Skip to content

Commit a042420

Browse files
craftycramcraftycram
committed
add itmr-dev template as default
1 parent 112022d commit a042420

File tree

2 files changed

+307
-1
lines changed

2 files changed

+307
-1
lines changed

‎Dockerfile‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -99,4 +99,4 @@ HEALTHCHECK --interval=10s --start-interval=1s --start-period=5s --timeout=2s CM
9999

100100
ENTRYPOINT ["/bin/error-pages"]
101101

102-
CMD ["serve"]
102+
CMD ["serve", '--template-name="itmr-dev"']

‎templates/itmr-dev.html‎

Lines changed: 306 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,306 @@
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: #fff;
28+
--gradient-end: #d2d2d2;
29+
--color-primary: #000;
30+
--color-secondary: #474747;
31+
--color-accent: #e3f1f2;
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: #bbb;
40+
--color-accent: #e2ecec;
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+
.hfgd {
100+
color: var(--color-primary);
101+
font-style: normal;
102+
font-weight: 500;
103+
line-height: normal;
104+
font-size: 16pt;
105+
display: flex;
106+
align-items: center;
107+
gap: 0.5rem;
108+
vertical-align: middle;
109+
}
110+
111+
.logo {
112+
height: 20px;
113+
}
114+
115+
.invisible {
116+
color:transparent;
117+
}
118+
119+
.status {
120+
display: flex;
121+
align-items: start;
122+
justify-content: center;
123+
flex-direction: column;
124+
}
125+
126+
.status .code h1 {
127+
font-size: 2em;
128+
margin: 0;
129+
padding: 0;
130+
font-weight: bold;
131+
}
132+
133+
.status .desc p {
134+
font-size: 1.5em;
135+
font-weight: lighter;
136+
}
137+
138+
/* Show details when enabled */
139+
/* {{ if show_details }} */
140+
ul.details {
141+
list-style: none;
142+
margin: 1.2em 0 0 0;
143+
padding: 0;
144+
font-size: 0.8em;
145+
}
146+
147+
ul.details li {
148+
font-family: monospace;
149+
}
150+
151+
ul.details li.name {
152+
font-weight: bold;
153+
}
154+
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+
169+
/* {{ end }} */
170+
</style>
171+
</head>
172+
<body>
173+
<span class="hfgd">
174+
<img class="logo" src="https://cdn.l4b.dev/images/logo.svg" alt="itmr.dev">
175+
ITMR Developments
176+
</span>
177+
178+
<main>
179+
<div class="status">
180+
<div class="code">
181+
<h1>Got your head in the clouds?</h1>
182+
</div>
183+
<div class="desc">
184+
<p>
185+
{{ code }} {{ message }}
186+
<br>
187+
{{ description }}
188+
</p>
189+
</div>
190+
191+
<!-- Show additional details if enabled -->
192+
<!-- {{ if show_details }} -->
193+
<ul class="details">
194+
<!-- {{ if host }} -->
195+
<li class="name">Host:</li>
196+
<li class="value">{{ host }}</li>
197+
<!-- {{ end }} -->
198+
<!-- {{ if original_uri }} -->
199+
<li class="name">Original URI:</li>
200+
<li class="value">{{ original_uri }}</li>
201+
<!-- {{ end }} -->
202+
<!-- {{ if forwarded_for }} -->
203+
<li class="name">Forwarded for:</li>
204+
<li class="value">{{ forwarded_for }}</li>
205+
<!-- {{ end }} -->
206+
<!-- {{ if namespace }} -->
207+
<li class="name">Namespace:</li>
208+
<li class="value">{{ namespace }}</li>
209+
<!-- {{ end }} -->
210+
<!-- {{ if ingress_name }} -->
211+
<li class="name">Ingress name:</li>
212+
<li class="value">{{ ingress_name }}</li>
213+
<!-- {{ end }} -->
214+
<!-- {{ if service_name }} -->
215+
<li class="name">Service name:</li>
216+
<li class="value">{{ service_name }}</li>
217+
<!-- {{ end }} -->
218+
<!-- {{ if service_port }} -->
219+
<li class="name">Service port:</li>
220+
<li class="value">{{ service_port }}</li>
221+
<!-- {{ end }} -->
222+
<!-- {{ if request_id }} -->
223+
<li class="name">Request ID:</li>
224+
<li class="value">{{ request_id }}</li>
225+
<!-- {{ end }} -->
226+
<li class="name">Timestamp:</li>
227+
<li class="value">{{ nowUnix }}</li>
228+
</ul>
229+
<!-- {{ end }} -->
230+
</div>
231+
232+
</main>
233+
234+
<span>
235+
<div class="footer">
236+
<a href="https://status.itmr-dev.de/" target="_blank" rel="noopener noreferrer">
237+
<span id="status-dot" style="display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:5px;"></span>
238+
<span id="status-text"></span>
239+
</a>
240+
<div>
241+
<a href="https://itmr.dev/" target="_blank" rel="noopener noreferrer">itmr.dev</a>
242+
–
243+
<a href="https://itmr.cloud/" target="_blank" rel="noopener noreferrer">itmr.cloud</a>
244+
–
245+
<a href="https://itmr-dev.de/impressum.html" target="_blank" rel="noopener noreferrer">imprint</a>
246+
</div>
247+
</div>
248+
</span>
249+
250+
251+
<script>
252+
fetch('https://itmr-dev.statuspage.io/api/v2/status.json')
253+
.then(response => response.json())
254+
.then(data => {
255+
const statusTextElement = document.getElementById('status-text');
256+
const statusDotElement = document.getElementById('status-dot');
257+
const statusDescription = data.status.description.toLowerCase();
258+
statusTextElement.innerText = statusDescription;
259+
260+
// Determine the dot color based on the status.
261+
// If your API provides a status indicator, you might use that.
262+
// Here, we assume possible values like "none", "minor", "major".
263+
let color = 'gray'; // default color if no match
264+
if(data.status.indicator) {
265+
switch(data.status.indicator) {
266+
case "none":
267+
color = "green";
268+
break;
269+
case "minor":
270+
color = "yellow";
271+
break;
272+
case "major":
273+
color = "red";
274+
break;
275+
default:
276+
color = "gray";
277+
}
278+
} else {
279+
// Fallback based on description text
280+
const lowerDesc = statusDescription.toLowerCase();
281+
if(lowerDesc.includes("operational")) {
282+
color = "green";
283+
} else if(lowerDesc.includes("partial")) {
284+
color = "orange";
285+
} else if(lowerDesc.includes("major")) {
286+
color = "red";
287+
}
288+
}
289+
statusDotElement.style.backgroundColor = color;
290+
})
291+
.catch(error => {
292+
console.error('Error fetching status:', error);
293+
document.getElementById('status-text').innerText = 'Status unavailable';
294+
document.getElementById('status-dot').style.backgroundColor = 'gray';
295+
});
296+
</script>
297+
298+
299+
<!-- Localization script if enabled -->
300+
<!-- {{ if l10n_enabled }} -->
301+
<script>
302+
// {{ l10nScript }}
303+
</script>
304+
<!-- {{ end }} -->
305+
</body>
306+
</html>

0 commit comments

Comments
 (0)