my own status page
feat: add hover states
+4
-4
+4
-4
src/routes/index.ts
+4
-4
src/routes/index.ts
···
102
102
</head>
103
103
<body>
104
104
<h1>infra.dunkirk.sh</h1>
105
-
<p class="overall"><span class="dot ${overallClass}"></span>${overallText}</p>
105
+
<p class="overall"><span class="dot ${overallClass}" title="${overallClass}"></span>${overallText}</p>
106
106
${servers
107
107
.map(
108
108
(m) => `<div class="machine">
109
-
<div class="machine-header"><span class="dot ${m.online ? "online" : m.services.length === 0 ? "unknown" : "offline"}"></span>${esc(m.name)}<span class="machine-type">${esc(m.type)}</span></div>
109
+
<div class="machine-header"><span class="dot ${m.online ? "online" : m.services.length === 0 ? "unknown" : "offline"}" title="${m.online ? "online" : "offline"}"></span>${esc(m.name)}<span class="machine-type">${esc(m.type)}</span></div>
110
110
${m.services.length === 0 ? `<div class="no-services">no services</div>` : m.services
111
111
.map(
112
112
(s) => `<div class="service">
113
113
<div class="svc-left">
114
-
<span class="dot ${s.status}"></span>
114
+
<span class="dot ${s.status}" title="${s.status}"></span>
115
115
<span class="svc-name"><a href="${esc(s.url)}">${esc(s.name)}</a></span>
116
116
</div>
117
117
<div class="svc-right">
···
126
126
${clients.length > 0 ? `<div class="clients">
127
127
<div class="clients-header">devices</div>
128
128
<div class="clients-list">
129
-
${clients.map((m) => `<span class="client"><span class="dot ${m.online ? "online" : "unknown"}"></span>${esc(m.name)}</span>`).join("\n")}
129
+
${clients.map((m) => `<span class="client"><span class="dot ${m.online ? "online" : "unknown"}" title="${m.online ? "online" : "offline"}"></span>${esc(m.name)}</span>`).join("\n")}
130
130
</div>
131
131
</div>` : ""}
132
132
<footer><span>${lastCheckISO ? `updated <relative-time datetime="${lastCheckISO}" prefix="">loading</relative-time>` : "no checks yet"}</span><a href="https://github.com/taciturnaxolotl/status/commit/${COMMIT_SHA}">${COMMIT_SHA}</a></footer>