madebydanny.uk written in html, css, and a lot of JavaScript I don't understand
madebydanny.uk
html
css
javascript
updated js
+48
-31
+48
-31
status.js
+48
-31
status.js
···
26
26
this.render();
27
27
this.initializeStatusPage();
28
28
this.intervalId = setInterval(() => this.initializeStatusPage(), 60000);
29
+
window.addEventListener('resize', () => this.adjustBodyPadding());
29
30
}
30
31
31
32
disconnectedCallback() {
32
33
if (this.intervalId) {
33
34
clearInterval(this.intervalId);
34
35
}
36
+
window.removeEventListener('resize', () => this.adjustBodyPadding());
35
37
}
36
38
37
39
render() {
38
40
this.shadowRoot.innerHTML = `
39
41
<style>
40
42
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
41
-
43
+
42
44
:host {
43
45
all: initial;
44
46
display: block;
45
47
}
46
48
49
+
body {
50
+
font-family: 'Inter', sans-serif;
51
+
background-color: transparent;
52
+
margin: 0;
53
+
padding: 0;
54
+
box-sizing: border-box;
55
+
transition: padding-top 0.3s ease-in-out;
56
+
}
57
+
47
58
.overall-status-banner {
48
59
display: flex;
49
60
flex-direction: column;
···
52
63
border-bottom: 1px solid;
53
64
font-weight: 500;
54
65
font-size: 0.875rem;
55
-
position: fixed;
56
-
top: 0;
57
-
left: 0;
58
-
right: 0;
59
66
width: 100%;
60
-
z-index: 9999;
61
67
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
68
+
margin-bottom: 0;
62
69
font-family: 'Inter', sans-serif;
63
-
box-sizing: border-box;
64
-
transition: transform 0.3s ease-in-out;
65
-
transform: translateY(-100%);
66
70
}
67
-
.overall-status-banner.visible {
68
-
transform: translateY(0);
71
+
.overall-status-banner.hidden {
72
+
display: none;
69
73
}
74
+
75
+
/* Dynamic Color Styles */
76
+
.status-style-warning { background-color: #fef9e6; border-color: #fce7b0; color: #4b3e21; }
77
+
.status-style-warning .status-icon, .status-style-warning .status-text a { color: #d17800; }
78
+
.status-style-danger { background-color: #fee2e2; border-color: #fca5a5; color: #991b1b; }
79
+
.status-style-danger .status-icon, .status-style-danger .status-text a { color: #dc2626; }
80
+
.status-style-info { background-color: #e0f2fe; border-color: #93c5fd; color: #1e40af; }
81
+
.status-style-info .status-icon, .status-style-info .status-text a { color: #3b82f6; }
82
+
.status-style-primary { background-color: #eef2ff; border-color: #c7d2fe; color: #4338ca; }
83
+
.status-style-primary .status-icon, .status-style-primary .status-text a { color: #6366f1; }
84
+
.status-style-light { background-color: #f9fafb; border-color: #e5e7eb; color: #374151; }
85
+
.status-style-light .status-icon, .status-style-light .status-text a { color: #9ca3af; }
86
+
.status-style-dark { background-color: #1f2937; border-color: #4b5563; color: #f9fafb; }
87
+
.status-style-dark .status-icon, .status-style-dark .status-text a { color: #d1d5db; }
70
88
71
89
.status-header {
72
90
display: flex;
···
125
143
0% { transform: rotate(0deg); }
126
144
100% { transform: rotate(360deg); }
127
145
}
128
-
129
-
/* Dynamic Color Styles */
130
-
.status-style-warning { background-color: #fef9e6; border-color: #fce7b0; color: #4b3e21; }
131
-
.status-style-warning .status-icon, .status-style-warning .status-text a { color: #d17800; }
132
-
.status-style-danger { background-color: #fee2e2; border-color: #fca5a5; color: #991b1b; }
133
-
.status-style-danger .status-icon, .status-style-danger .status-text a { color: #dc2626; }
134
-
.status-style-info { background-color: #e0f2fe; border-color: #93c5fd; color: #1e40af; }
135
-
.status-style-info .status-icon, .status-style-info .status-text a { color: #3b82f6; }
136
-
.status-style-primary { background-color: #eef2ff; border-color: #c7d2fe; color: #4338ca; }
137
-
.status-style-primary .status-icon, .status-style-primary .status-text a { color: #6366f1; }
138
-
.status-style-light { background-color: #f9fafb; border-color: #e5e7eb; color: #374151; }
139
-
.status-style-light .status-icon, .status-style-light .status-text a { color: #9ca3af; }
140
-
.status-style-dark { background-color: #1f2937; border-color: #4b5563; color: #f9fafb; }
141
-
.status-style-dark .status-icon, .status-style-dark .status-text a { color: #d1d5db; }
142
-
143
146
</style>
144
147
145
-
<div id="status-banner" class="overall-status-banner">
148
+
<div id="status-banner" class="overall-status-banner hidden">
146
149
<div class="status-header">
147
150
<span id="status-icon" class="status-icon"></span>
148
151
<div id="status-text" class="flex-grow"></div>
···
155
158
`;
156
159
}
157
160
161
+
adjustBodyPadding() {
162
+
const statusBanner = this.shadowRoot.getElementById('status-banner');
163
+
if (!statusBanner.classList.contains('hidden')) {
164
+
document.body.style.paddingTop = statusBanner.offsetHeight + 'px';
165
+
} else {
166
+
document.body.style.paddingTop = '0';
167
+
}
168
+
}
169
+
158
170
async initializeStatusPage() {
159
171
const loadingIndicator = this.shadowRoot.getElementById('loading-indicator');
160
172
const statusBanner = this.shadowRoot.getElementById('status-banner');
161
173
162
-
statusBanner.classList.remove('visible');
174
+
statusBanner.classList.add('hidden');
163
175
loadingIndicator.style.display = 'block';
176
+
document.body.style.paddingTop = '0';
164
177
165
178
let heartbeatData = await this.fetchData(this.API_HEARTBEAT_URL, 'heartbeat');
166
179
let statusPageData = await this.fetchData(this.API_STATUS_PAGE_URL, 'status page');
···
235
248
loadingIndicator.style.display = 'none';
236
249
statusBanner.className = 'overall-status-banner';
237
250
incidentDetail.classList.add('hidden');
251
+
this.adjustBodyPadding();
238
252
239
253
let incident = statusPageData?.incident;
240
254
let incidentFound = incident?.pin;
241
255
242
256
if (overallStatus === 'operational' && !incidentFound) {
243
-
statusBanner.classList.remove('visible');
257
+
statusBanner.classList.add('hidden');
258
+
this.adjustBodyPadding();
244
259
return;
245
260
}
246
261
···
287
302
statusBanner.classList.add(bannerStyleClass);
288
303
statusText.innerHTML = statusMessage;
289
304
statusIcon.textContent = iconText;
290
-
statusBanner.classList.add('visible');
305
+
statusBanner.classList.remove('hidden');
306
+
this.adjustBodyPadding();
291
307
292
308
closeButton.onclick = () => {
293
-
statusBanner.classList.remove('visible');
309
+
statusBanner.classList.add('hidden');
310
+
this.adjustBodyPadding();
294
311
};
295
312
}
296
313
}