asepharyana
1cdb82a76f
- hypr/apps.lua - hypr/autostart.lua - hypr/envs.lua - hypr/hyprland.lua - hypr/hyprsunset.conf - hypr/input.lua - hypr/looknfeel.lua - hypr/omasettings.lua - hypr/xdph.conf - omarchy/branding/about.txt - omarchy/branding/screensaver.txt - omarchy/extensions/omarchy-menu.jsonc - omarchy/hooks/battery-low.d/play-warning-sound.sample - omarchy/hooks/font-set.d/show-font-notification.sample - omarchy/hooks/post-boot.d/weather.sample - omarchy/hooks/post-update.d/install-voxtype.hook - omarchy/hooks/post-update.d/setup-agent.hook - omarchy/hooks/post-update.d/setup-fingerprint.hook - omarchy/hooks/post-update.d/show-update-notification.sample - omarchy/hooks/pre-refresh-pacman.d/add-custom-repo.sample - omarchy/hooks/theme-set.d/show-theme-notification.sample - omarchy/shell.json - omarchy/shell.toml - omarchy/theme.name - omarchy/themes/azure-glow/README.md - omarchy/themes/azure-glow/alacritty.toml - omarchy/themes/azure-glow/btop.theme - omarchy/themes/azure-glow/hyprland.conf - omarchy/themes/azure-glow/hyprlock.conf - omarchy/themes/azure-glow/icons.theme - … 269 more
165 lines
11 KiB
HTML
165 lines
11 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<script src="./support.js"></script>
|
|
</head>
|
|
<body>
|
|
<x-dc>
|
|
<helmet>
|
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap">
|
|
<style>
|
|
body { margin: 0; background: #0e0e14; font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; }
|
|
a { color: #7aa2f7; } a:hover { color: #b4bee6; }
|
|
.cap { font-size: 10px; letter-spacing: 0.12em; color: #565f89; }
|
|
.tab { flex-grow: 1; height: 26px; display: flex; align-items: center; justify-content: center; font-size: 11px; color: #a9b1d6; background: rgba(169,177,214,0.04); border: 1px solid rgba(169,177,214,0.4); }
|
|
.tabon { flex-grow: 1; height: 26px; display: flex; align-items: center; justify-content: center; font-size: 11px; color: #c0caf5; background: rgba(169,177,214,0.18); border: 1px solid transparent; }
|
|
.sep { height: 1px; background: rgba(169,177,214,0.12); }
|
|
.ev { display: flex; align-items: flex-start; gap: 10px; }
|
|
.evt { font-size: 10px; color: #565f89; width: 60px; flex-shrink: 0; padding-top: 1px; }
|
|
.evb { font-size: 11px; color: #a9b1d6; line-height: 1.55; flex-grow: 1; }
|
|
.evd { font-size: 10px; color: #565f89; flex-shrink: 0; padding-top: 1px; }
|
|
.dot { width: 5px; height: 5px; flex-shrink: 0; margin-top: 5px; }
|
|
</style>
|
|
</helmet>
|
|
|
|
<div style="display: flex; flex-direction: column; width: 560px; background: #1a1b26; border: 2px solid #7aa2f7; box-sizing: border-box; padding: 18px; color: #a9b1d6;">
|
|
|
|
<div style="display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;">
|
|
<div style="display: flex; align-items: flex-start; gap: 10px;">
|
|
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#9ece6a" stroke-width="1.6" stroke-linecap="round" style="margin-top: 2px;">
|
|
<path d="M2 8.5a15 15 0 0 1 20 0"></path><path d="M5 12.2a10.5 10.5 0 0 1 14 0"></path><path d="M8.2 15.9a6 6 0 0 1 7.6 0"></path><circle cx="12" cy="19.3" r="1.1" fill="#9ece6a" stroke="none"></circle>
|
|
</svg>
|
|
<div style="display: flex; flex-direction: column; gap: 3px;">
|
|
<div style="font-size: 16px; font-weight: 700; color: #c0caf5;">Excitel</div>
|
|
<div class="cap" style="letter-spacing: 0.1em;">EXCELLENT · ONLINE 4H 12M</div>
|
|
</div>
|
|
</div>
|
|
<div style="display: flex; flex-direction: column; align-items: flex-end; gap: 1px;">
|
|
<div style="font-size: 30px; font-weight: 700; line-height: 1; color: #9ece6a;">94</div>
|
|
<div class="cap">EXPERIENCE</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="display: flex; gap: 6px; margin-top: 16px;">
|
|
<div class="tab">Overview</div><div class="tab">Latency</div><div class="tab">Speed</div><div class="tab">Wi-Fi</div><div class="tabon">Events</div>
|
|
</div>
|
|
|
|
<div class="sep" style="margin: 16px 0 14px 0;"></div>
|
|
|
|
<div style="display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px;">
|
|
<div class="cap">EXPERIENCE, LAST 24 HOURS</div>
|
|
<div style="font-size: 10px; color: #565f89;">1-minute buckets</div>
|
|
</div>
|
|
|
|
<svg width="524" height="26" viewBox="0 0 524 26" style="display: block;">
|
|
<sc-for list="{{c.ribbon}}" as="r" hint-placeholder-count="24">
|
|
<rect x="{{r.x}}" y="0" width="{{r.w}}" height="26" fill="{{r.fill}}"></rect>
|
|
</sc-for>
|
|
</svg>
|
|
|
|
<div style="display: flex; justify-content: space-between; margin-top: 5px;">
|
|
<div style="font-size: 9px; color: #414868;">14:30 yest.</div>
|
|
<div style="font-size: 9px; color: #414868;">00:00</div>
|
|
<div style="font-size: 9px; color: #414868;">08:00</div>
|
|
<div style="font-size: 9px; color: #414868;">now</div>
|
|
</div>
|
|
|
|
<div style="display: flex; gap: 12px; margin-top: 10px; flex-wrap: wrap;">
|
|
<div style="display: flex; align-items: center; gap: 5px;"><div style="width: 9px; height: 9px; background: #9ece6a;"></div><div style="font-size: 10px; color: #565f89;">90+ excellent</div></div>
|
|
<div style="display: flex; align-items: center; gap: 5px;"><div style="width: 9px; height: 9px; background: #b9f27c;"></div><div style="font-size: 10px; color: #565f89;">80 good</div></div>
|
|
<div style="display: flex; align-items: center; gap: 5px;"><div style="width: 9px; height: 9px; background: #e0af68;"></div><div style="font-size: 10px; color: #565f89;">70 okay</div></div>
|
|
<div style="display: flex; align-items: center; gap: 5px;"><div style="width: 9px; height: 9px; background: #eb927b;"></div><div style="font-size: 10px; color: #565f89;">50 fair</div></div>
|
|
<div style="display: flex; align-items: center; gap: 5px;"><div style="width: 9px; height: 9px; background: #f7768e;"></div><div style="font-size: 10px; color: #565f89;">under 50 poor</div></div>
|
|
</div>
|
|
|
|
<div class="sep" style="margin: 16px 0 12px 0;"></div>
|
|
|
|
<div class="cap" style="margin-bottom: 11px;">LAST 7 DAYS</div>
|
|
|
|
<div style="display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; align-items: end;">
|
|
<div style="display: flex; flex-direction: column; align-items: center; gap: 5px;"><div style="font-size: 10px; color: #c0caf5;">91</div><div style="width: 100%; height: 44px; background: rgba(169,177,214,0.08); display: flex; align-items: flex-end;"><div style="width: 100%; height: 40px; background: #9ece6a;"></div></div><div style="font-size: 9px; color: #414868;">Mon</div></div>
|
|
<div style="display: flex; flex-direction: column; align-items: center; gap: 5px;"><div style="font-size: 10px; color: #c0caf5;">93</div><div style="width: 100%; height: 44px; background: rgba(169,177,214,0.08); display: flex; align-items: flex-end;"><div style="width: 100%; height: 41px; background: #9ece6a;"></div></div><div style="font-size: 9px; color: #414868;">Tue</div></div>
|
|
<div style="display: flex; flex-direction: column; align-items: center; gap: 5px;"><div style="font-size: 10px; color: #c0caf5;">67</div><div style="width: 100%; height: 44px; background: rgba(169,177,214,0.08); display: flex; align-items: flex-end;"><div style="width: 100%; height: 29px; background: #eb927b;"></div></div><div style="font-size: 9px; color: #414868;">Wed</div></div>
|
|
<div style="display: flex; flex-direction: column; align-items: center; gap: 5px;"><div style="font-size: 10px; color: #c0caf5;">88</div><div style="width: 100%; height: 44px; background: rgba(169,177,214,0.08); display: flex; align-items: flex-end;"><div style="width: 100%; height: 39px; background: #b9f27c;"></div></div><div style="font-size: 9px; color: #414868;">Thu</div></div>
|
|
<div style="display: flex; flex-direction: column; align-items: center; gap: 5px;"><div style="font-size: 10px; color: #c0caf5;">94</div><div style="width: 100%; height: 44px; background: rgba(169,177,214,0.08); display: flex; align-items: flex-end;"><div style="width: 100%; height: 41px; background: #9ece6a;"></div></div><div style="font-size: 9px; color: #414868;">Fri</div></div>
|
|
<div style="display: flex; flex-direction: column; align-items: center; gap: 5px;"><div style="font-size: 10px; color: #c0caf5;">95</div><div style="width: 100%; height: 44px; background: rgba(169,177,214,0.08); display: flex; align-items: flex-end;"><div style="width: 100%; height: 42px; background: #9ece6a;"></div></div><div style="font-size: 9px; color: #414868;">Sat</div></div>
|
|
<div style="display: flex; flex-direction: column; align-items: center; gap: 5px;"><div style="font-size: 10px; color: #c0caf5;">94</div><div style="width: 100%; height: 44px; background: rgba(169,177,214,0.08); display: flex; align-items: flex-end;"><div style="width: 100%; height: 41px; background: #9ece6a;"></div></div><div style="font-size: 9px; color: #414868;">Sun</div></div>
|
|
</div>
|
|
|
|
<div class="sep" style="margin: 16px 0 12px 0;"></div>
|
|
|
|
<div style="display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px;">
|
|
<div class="cap">WHAT HAPPENED</div>
|
|
<div style="font-size: 10px; color: #565f89;">3 disruptions this week</div>
|
|
</div>
|
|
|
|
<div style="display: flex; flex-direction: column; gap: 11px;">
|
|
<div class="ev">
|
|
<div class="evt">Wed 19:14</div>
|
|
<div class="dot" style="background: #f7768e;"></div>
|
|
<div class="evb">No internet. Router still answered in 2 ms, so the fault was upstream of your line.</div>
|
|
<div class="evd">7m 41s</div>
|
|
</div>
|
|
<div class="ev">
|
|
<div class="evt">Wed 20:02</div>
|
|
<div class="dot" style="background: #eb927b;"></div>
|
|
<div class="evb">Lag above 120 ms on the wan leg. Speed unaffected.</div>
|
|
<div class="evd">52m</div>
|
|
</div>
|
|
<div class="ev">
|
|
<div class="evt">Thu 09:30</div>
|
|
<div class="dot" style="background: #7aa2f7;"></div>
|
|
<div class="evb">Public address changed, 49.36.x.x → 49.37.x.x. Same ISP, same AS.</div>
|
|
<div class="evd">—</div>
|
|
</div>
|
|
<div class="ev">
|
|
<div class="evt">Fri 12:04</div>
|
|
<div class="dot" style="background: #bb9af7;"></div>
|
|
<div class="evb">Roamed 3× between …25:fe ↔ …25:fa ↔ …25:b4</div>
|
|
<div class="evd">2m</div>
|
|
</div>
|
|
<div class="ev">
|
|
<div class="evt">Sat 03:00</div>
|
|
<div class="dot" style="background: #565f89;"></div>
|
|
<div class="evb">DNS resolver stopped answering for 90 s. Fell back to the secondary.</div>
|
|
<div class="evd">1m 30s</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="sep" style="margin: 16px 0 12px 0;"></div>
|
|
|
|
<div style="display: flex; align-items: center; justify-content: space-between; gap: 12px;">
|
|
<div style="font-size: 10px; color: #565f89; line-height: 1.6; flex-grow: 1;">Builds a plain-text summary of the window you are looking at, with timestamps, both legs and loss — the thing an ISP actually asks for.</div>
|
|
<div style="display: flex; align-items: center; gap: 7px; height: 28px; padding: 0 12px; background: rgba(169,177,214,0.04); border: 1px solid rgba(169,177,214,0.4); color: #c0caf5; font-size: 11px; flex-shrink: 0;">
|
|
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#c0caf5" stroke-width="1.6" stroke-linejoin="round"><rect x="9" y="4" width="11" height="14"></rect><path d="M15 20H4V7"></path></svg>
|
|
Copy report
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</x-dc>
|
|
|
|
<script data-dc-script data-props='{"$preview":{"width":560,"height":840}}'>
|
|
class Component extends DCLogic {
|
|
rng(seed) { let s = seed >>> 0; return function () { s = (s * 1664525 + 1013904223) >>> 0; return s / 4294967296 } }
|
|
|
|
renderVals() {
|
|
var N = 96, W = 524, rand = this.rng(31337)
|
|
var seg = W / N
|
|
var out = []
|
|
for (var i = 0; i < N; i++) {
|
|
var score = 92 + rand() * 7
|
|
if (i > 18 && i < 23) score = 41 + rand() * 8
|
|
if (i >= 23 && i < 31) score = 62 + rand() * 9
|
|
if (i > 54 && i < 58) score = 76 + rand() * 6
|
|
var fill = score >= 90 ? '#9ece6a' : score >= 80 ? '#b9f27c' : score >= 70 ? '#e0af68' : score >= 50 ? '#eb927b' : '#f7768e'
|
|
out.push({ x: (i * seg).toFixed(2), w: (seg + 0.4).toFixed(2), fill: fill })
|
|
}
|
|
return { c: { ribbon: out } }
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|