Skip to content

Commit 10376b5

Browse files
craftycramcraftycram
committed
update itmr pages & fix styles
1 parent b3dee9f commit 10376b5

File tree

2 files changed

+321
-14
lines changed

2 files changed

+321
-14
lines changed

‎templates/itmr-dev-neutral.html‎

Lines changed: 307 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,307 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="robots" content="nofollow,noarchive,noindex" />
6+
<title>{{ code }}: {{ message }} - itmr.dev</title>
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
8+
9+
<!-- Auto-refresh for specific status codes -->
10+
<!-- {{ if or (eq code 408) (eq code 425) (eq code 429) (eq code 500) (eq code 502) (eq code 503) (eq code 504) }} -->
11+
<meta http-equiv="refresh" content="30" />
12+
<!-- {{ end }} -->
13+
14+
<meta name="title" content="{{ code }}: {{ message | escape }}" />
15+
<meta name="description" content="{{ description | escape }}" />
16+
<meta property="og:title" content="{{ code }}: {{ message | escape }}" />
17+
<meta property="og:description" content="{{ description | escape }}" />
18+
<meta
19+
property="twitter:title"
20+
content="{{ code }}: {{ message | escape }}"
21+
/>
22+
<meta property="twitter:description" content="{{ description | escape }}" />
23+
24+
<style>
25+
26+
:root {
27+
--gradient-start: #333;
28+
--gradient-end: #222;
29+
--color-primary: #f1f1f1;
30+
--color-secondary: #d2d2d2;
31+
--color-accent: #cdd6e8;
32+
}
33+
34+
@media (prefers-color-scheme: dark) {
35+
:root {
36+
--gradient-start: #333;
37+
--gradient-end: #222;
38+
--color-primary: #f1f1f1;
39+
--color-secondary: #d2d2d2;
40+
--color-accent: #cdd6e8;
41+
}
42+
}
43+
44+
45+
* {
46+
margin: 0;
47+
padding: 0;
48+
box-sizing: border-box;
49+
}
50+
51+
body {
52+
background: url('https://cdn.l4b.dev/images/clouds.jpg') no-repeat center center fixed;
53+
background-size: cover;
54+
height: 100vh;
55+
width: 100vw;
56+
display: flex;
57+
color: var(--color-primary);
58+
font-family: "Atlas Grotesk", sans-serif;
59+
font-size: 16px;
60+
padding: 3rem 4rem;
61+
flex-direction: column;
62+
justify-content: space-between;
63+
}
64+
65+
main {
66+
display: flex;
67+
justify-content: center;
68+
align-items: center;
69+
margin-top: 2rem;
70+
gap: 4rem;
71+
}
72+
73+
main > div {
74+
display: flex;
75+
flex-direction: column;
76+
gap: 1.5rem;
77+
}
78+
79+
main > div > svg {
80+
width: 200px;
81+
height: auto;
82+
padding-top: 1rem;
83+
}
84+
85+
h1 {
86+
font-size: 3.5em;
87+
line-height: 1;
88+
font-family: Poppins,sans-serif;
89+
}
90+
91+
p {
92+
color: var(--color-secondary);
93+
font-style: normal;
94+
font-weight: 200;
95+
line-height: normal;
96+
font-size: 18pt;
97+
}
98+
99+
span {
100+
color: var(--color-secondary);
101+
}
102+
103+
.hfgd {
104+
color: var(--color-primary);
105+
font-style: normal;
106+
font-weight: 500;
107+
line-height: normal;
108+
font-size: 16pt;
109+
display: flex;
110+
align-items: center;
111+
gap: 0.5rem;
112+
vertical-align: middle;
113+
}
114+
115+
.logo {
116+
height: 20px;
117+
}
118+
119+
.invisible {
120+
color:transparent;
121+
}
122+
123+
.status {
124+
display: flex;
125+
align-items: start;
126+
justify-content: center;
127+
flex-direction: column;
128+
}
129+
130+
.status .code h1 {
131+
font-size: 2em;
132+
margin: 0;
133+
padding: 0;
134+
font-weight: bold;
135+
}
136+
137+
.status .desc p {
138+
font-size: 1.5em;
139+
font-weight: lighter;
140+
}
141+
142+
.link, a {
143+
color: inherit;
144+
color: var(--color-primary);
145+
text-decoration: none;
146+
font-weight: 400;
147+
}
148+
149+
.footer {
150+
display: flex;
151+
flex-direction: row;
152+
justify-content: space-between;
153+
cursor: default;
154+
}
155+
156+
/* Show details when enabled */
157+
/* {{ if show_details }} */
158+
ul.details {
159+
list-style: none;
160+
margin: 1.2em 0 0 0;
161+
padding: 0;
162+
font-size: 0.8em;
163+
}
164+
165+
ul.details li {
166+
font-family: monospace;
167+
}
168+
169+
ul.details li.name {
170+
font-weight: bold;
171+
}
172+
173+
/* {{ end }} */
174+
</style>
175+
</head>
176+
<body>
177+
<span class="hfgd">
178+
</span>
179+
180+
<main>
181+
<div class="status">
182+
<div class="code">
183+
<h1>Got your head in the clouds?</h1>
184+
</div>
185+
<div class="desc">
186+
<p>
187+
{{ code }} {{ message }}
188+
<br>
189+
{{ description }}
190+
</p>
191+
</div>
192+
193+
<!-- Show additional details if enabled -->
194+
<!-- {{ if show_details }} -->
195+
<ul class="details">
196+
<!-- {{ if host }} -->
197+
<li class="name">Host:</li>
198+
<li class="value">{{ host }}</li>
199+
<!-- {{ end }} -->
200+
<!-- {{ if original_uri }} -->
201+
<li class="name">Original URI:</li>
202+
<li class="value">{{ original_uri }}</li>
203+
<!-- {{ end }} -->
204+
<!-- {{ if forwarded_for }} -->
205+
<li class="name">Forwarded for:</li>
206+
<li class="value">{{ forwarded_for }}</li>
207+
<!-- {{ end }} -->
208+
<!-- {{ if namespace }} -->
209+
<li class="name">Namespace:</li>
210+
<li class="value">{{ namespace }}</li>
211+
<!-- {{ end }} -->
212+
<!-- {{ if ingress_name }} -->
213+
<li class="name">Ingress name:</li>
214+
<li class="value">{{ ingress_name }}</li>
215+
<!-- {{ end }} -->
216+
<!-- {{ if service_name }} -->
217+
<li class="name">Service name:</li>
218+
<li class="value">{{ service_name }}</li>
219+
<!-- {{ end }} -->
220+
<!-- {{ if service_port }} -->
221+
<li class="name">Service port:</li>
222+
<li class="value">{{ service_port }}</li>
223+
<!-- {{ end }} -->
224+
<!-- {{ if request_id }} -->
225+
<li class="name">Request ID:</li>
226+
<li class="value">{{ request_id }}</li>
227+
<!-- {{ end }} -->
228+
<li class="name">Timestamp:</li>
229+
<li class="value">{{ nowUnix }}</li>
230+
</ul>
231+
<!-- {{ end }} -->
232+
</div>
233+
234+
</main>
235+
236+
<span>
237+
<div class="footer">
238+
<div>
239+
This error page is provided by
240+
<a href="https://itmr-dev.de/" target="_blank" rel="noopener noreferrer">itmr.dev</a>
241+
</div>
242+
<div>
243+
<a href="https://status.itmr-dev.de/" target="_blank" rel="noopener noreferrer">
244+
<span id="status-dot" style="display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:5px;"></span>
245+
<span id="status-text" class="link"></span>
246+
</a>
247+
</div>
248+
</div>
249+
</span>
250+
251+
252+
<script>
253+
fetch('https://itmr-dev.statuspage.io/api/v2/status.json')
254+
.then(response => response.json())
255+
.then(data => {
256+
const statusTextElement = document.getElementById('status-text');
257+
const statusDotElement = document.getElementById('status-dot');
258+
const statusDescription = data.status.description.toLowerCase();
259+
statusTextElement.innerText = statusDescription;
260+
261+
// Determine the dot color based on the status.
262+
// If your API provides a status indicator, you might use that.
263+
// Here, we assume possible values like "none", "minor", "major".
264+
let color = 'gray'; // default color if no match
265+
if(data.status.indicator) {
266+
switch(data.status.indicator) {
267+
case "none":
268+
color = "green";
269+
break;
270+
case "minor":
271+
color = "yellow";
272+
break;
273+
case "major":
274+
color = "red";
275+
break;
276+
default:
277+
color = "gray";
278+
}
279+
} else {
280+
// Fallback based on description text
281+
const lowerDesc = statusDescription.toLowerCase();
282+
if(lowerDesc.includes("operational")) {
283+
color = "green";
284+
} else if(lowerDesc.includes("partial")) {
285+
color = "orange";
286+
} else if(lowerDesc.includes("major")) {
287+
color = "red";
288+
}
289+
}
290+
statusDotElement.style.backgroundColor = color;
291+
})
292+
.catch(error => {
293+
console.error('Error fetching status:', error);
294+
document.getElementById('status-text').innerText = 'Status unavailable';
295+
document.getElementById('status-dot').style.backgroundColor = 'gray';
296+
});
297+
</script>
298+
299+
300+
<!-- Localization script if enabled -->
301+
<!-- {{ if l10n_enabled }} -->
302+
<script>
303+
// {{ l10nScript }}
304+
</script>
305+
<!-- {{ end }} -->
306+
</body>
307+
</html>

‎templates/itmr-dev.html‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -135,6 +135,20 @@
135135
font-weight: lighter;
136136
}
137137

138+
a {
139+
/* color: var(--color-accent); */
140+
color: inherit;
141+
text-decoration: none;
142+
font-weight: 400;
143+
}
144+
145+
.footer {
146+
display: flex;
147+
flex-direction: row;
148+
justify-content: space-between;
149+
cursor: default;
150+
}
151+
138152
/* Show details when enabled */
139153
/* {{ if show_details }} */
140154
ul.details {
@@ -152,20 +166,6 @@
152166
font-weight: bold;
153167
}
154168

155-
a {
156-
/* color: var(--color-accent); */
157-
color: inherit;
158-
text-decoration: none;
159-
font-weight: 400;
160-
}
161-
162-
.footer {
163-
display: flex;
164-
flex-direction: row;
165-
justify-content: space-between;
166-
cursor: default;
167-
}
168-
169169
/* {{ end }} */
170170
</style>
171171
</head>

0 commit comments

Comments
 (0)