Skip to content

Commit 428b335

Browse files
DevLabStudyDevLabStudy
authored
Update index.html
1 parent f0888c4 commit 428b335

1 file changed

Lines changed: 191 additions & 72 deletions

File tree

‎index.html‎

Lines changed: 191 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -5,165 +5,284 @@
55

66
<style>
77
:root {
8-
--card-bg: #111114;
9-
--accent: #3b82f6;
8+
--bg-main: #09090b;
9+
--card-bg: #121216;
10+
--accent: #10b981;
11+
--accent-glow: rgba(16, 185, 129, 0.15);
12+
--text-main: #f4f4f5;
1013
--text-dim: #a1a1aa;
1114
--border: #27272a;
12-
--success: #10b981;
15+
--border-hover: #3f3f46;
1316
}
1417

1518
.devlab-hub {
16-
color: #fafafa;
19+
color: var(--text-main);
1720
font-family: 'JetBrains Mono', monospace;
21+
width: 100%;
22+
box-sizing: border-box;
1823
}
1924

20-
/* Nowa klasa do układu nagłówka z przyciskiem po prawej */
25+
/* Nagłówek – czysty, minimalistyczny układ bez Uptime Kuma */
2126
.hub-header {
2227
display: flex;
2328
justify-content: space-between;
2429
align-items: center;
2530
flex-wrap: wrap;
26-
gap: 15px;
27-
margin-bottom: 20px;
31+
gap: 10px;
32+
margin-bottom: 30px;
33+
padding-bottom: 15px;
34+
border-bottom: 1px solid var(--border);
2835
}
2936

30-
/* Styl dedykowanego przycisku Statusu */
31-
.btn-status {
32-
background: rgba(16, 185, 129, 0.1);
33-
color: var(--success);
34-
border: 1px solid rgba(16, 185, 129, 0.2);
35-
padding: 8px 16px;
36-
border-radius: 6px;
37-
font-size: 0.8rem;
38-
font-weight: bold;
39-
text-decoration: none;
40-
transition: all 0.2s ease;
41-
display: inline-flex;
42-
align-items: center;
43-
gap: 8px;
37+
.hub-header p {
38+
margin: 0;
39+
font-size: 0.9rem;
40+
color: var(--text-dim);
4441
}
4542

46-
.btn-status:hover {
47-
background: var(--success);
48-
color: #111114;
49-
border-color: var(--success);
50-
box-shadow: 0 0 15px rgba(16, 185, 129, 0.2);
43+
.hub-header strong {
44+
color: var(--accent);
5145
}
5246

53-
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin-top: 20px; }
47+
/* Responsywna siatka – naprawia problem na komórkach */
48+
.grid {
49+
display: grid;
50+
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
51+
gap: 20px;
52+
margin-top: 20px;
53+
}
5454

5555
.card {
5656
background: var(--card-bg);
5757
border: 1px solid var(--border);
58-
border-radius: 8px;
59-
padding: 20px;
60-
transition: all 0.3s ease;
58+
border-radius: 12px;
59+
padding: 24px;
60+
position: relative;
61+
overflow: hidden;
62+
transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
63+
}
64+
65+
.card::before {
66+
content: '';
67+
position: absolute;
68+
top: 0;
69+
left: 0;
70+
width: 4px;
71+
height: 100%;
72+
background: var(--border);
73+
transition: background 0.2s ease;
74+
}
75+
76+
.card:hover {
77+
border-color: var(--accent);
78+
transform: translateY(-2px);
79+
box-shadow: 0 10px 30px -10px var(--accent-glow);
6180
}
6281

63-
.card:hover { border-color: var(--success); }
82+
.card:hover::before {
83+
background: var(--accent);
84+
}
6485

6586
.tag {
66-
font-size: 0.65rem;
67-
background: rgba(16, 185, 129, 0.1);
68-
color: var(--success);
69-
padding: 2px 8px;
70-
border-radius: 4px;
87+
font-size: 0.7rem;
88+
background: var(--accent-glow);
89+
color: var(--accent);
90+
padding: 4px 10px;
91+
border-radius: 20px;
7192
text-transform: uppercase;
72-
font-weight: bold;
93+
font-weight: 700;
7394
display: inline-block;
95+
margin-bottom: 12px;
96+
border: 1px solid rgba(16, 185, 129, 0.2);
97+
}
98+
99+
.card h3 {
100+
margin: 0 0 15px 0;
101+
font-size: 1.25rem;
102+
letter-spacing: -0.5px;
103+
}
104+
105+
.spec-list {
106+
list-style: none;
107+
padding: 0;
108+
margin: 0;
109+
font-size: 0.85rem;
110+
}
111+
112+
.spec-list li {
74113
margin-bottom: 10px;
114+
display: flex;
115+
justify-content: space-between;
116+
gap: 10px;
117+
border-bottom: 1px dashed var(--border);
118+
padding-bottom: 6px;
119+
color: var(--text-dim);
120+
}
121+
122+
.spec-list li:last-child {
123+
border-bottom: none;
124+
margin-bottom: 0;
125+
padding-bottom: 0;
75126
}
76127

77-
.spec-list { list-style: none; padding: 0; font-size: 0.85rem; margin: 15px 0 0 0; }
78-
.spec-list li { margin-bottom: 8px; border-bottom: 1px solid #1c1c1f; padding-bottom: 4px; color: var(--text-dim); }
79-
.spec-list b { color: #fff; }
128+
.spec-list b {
129+
color: var(--text-main);
130+
text-align: right;
131+
}
80132

81-
.bench-val { font-family: monospace; font-size: 1.2rem; color: var(--success); }
133+
/* Sekcja benchmarków z nowym pazurem */
134+
.section-title {
135+
margin-top: 50px;
136+
margin-bottom: 20px;
137+
font-size: 1.4rem;
138+
display: flex;
139+
align-items: center;
140+
gap: 10px;
141+
}
142+
143+
.section-title::after {
144+
content: '';
145+
flex: 1;
146+
height: 1px;
147+
background: var(--border);
148+
}
149+
150+
.bench-card {
151+
background: var(--card-bg);
152+
border: 1px solid var(--border);
153+
border-radius: 10px;
154+
padding: 20px;
155+
}
156+
157+
.bench-label {
158+
font-size: 0.75rem;
159+
color: var(--text-dim);
160+
font-weight: bold;
161+
letter-spacing: 0.5px;
162+
}
163+
164+
.bench-val {
165+
font-family: monospace;
166+
font-size: 1.4rem;
167+
color: var(--accent);
168+
margin: 8px 0;
169+
font-weight: bold;
170+
}
82171

83172
.benchmark-bar {
84-
background: #1c1c1f;
85-
height: 6px;
86-
border-radius: 3px;
87-
margin: 10px 0;
173+
background: #18181b;
174+
height: 8px;
175+
border-radius: 4px;
88176
overflow: hidden;
177+
border: 1px solid var(--border);
89178
}
90179

91-
.fill { background: var(--success); height: 100%; }
180+
.fill {
181+
background: linear-gradient(90deg, #059669, var(--accent));
182+
height: 100%;
183+
border-radius: 4px;
184+
}
92185

93186
.status-footer {
94187
margin-top: 40px;
95-
padding: 15px;
96-
border-top: 1px solid var(--border);
188+
padding: 20px;
189+
background: var(--card-bg);
190+
border: 1px solid var(--border);
191+
border-radius: 8px;
97192
font-size: 0.8rem;
193+
display: flex;
194+
align-items: center;
195+
gap: 10px;
196+
color: var(--text-dim);
197+
}
198+
199+
.pulse-dot {
200+
color: var(--accent);
201+
animation: pulse 2s infinite;
202+
}
203+
204+
@keyframes pulse {
205+
0% { opacity: 1; }
206+
50% { opacity: 0.4; }
207+
100% { opacity: 1; }
208+
}
209+
210+
/* Poprawka pod mobile – pełna responsywność */
211+
@media (max-width: 600px) {
212+
.hub-header {
213+
flex-direction: column;
214+
align-items: flex-start;
215+
}
216+
.card {
217+
padding: 18px;
218+
}
98219
}
99220
</style>
100221

101222
<div class="devlab-hub">
102223
<div class="hub-header">
103-
<p style="color: var(--text-dim); margin: 0;">Infrastructure Status: <strong>Cieszyn Data Center</strong></p>
104-
<a href="https://uptime.devlabstudy.ovh" target="_blank" class="btn-status">
105-
<span style="color: var(--success);">●</span> UPTIME KUMA
106-
</a>
224+
<p>Infrastructure Status: <strong>Cieszyn Data Center</strong></p>
225+
<p style="font-size: 0.8rem;">Environment: <span style="color: var(--text-main);">Production / Lab</span></p>
107226
</div>
108227

109228
<div class="grid">
110229
<section class="card">
111230
<span class="tag">Main Host: Nobara Linux</span>
112-
<h3 style="margin:0">Gamingowy PC</h3>
231+
<h3>Gamingowy PC</h3>
113232
<ul class="spec-list">
114-
<li>CPU: <b>AMD Ryzen 5 3600</b> (6C/12T)</li>
233+
<li>CPU: <b>AMD Ryzen 5 3600</b></li>
115234
<li>RAM: <b>16GB DDR4</b></li>
116235
<li>GPU: <b>AMD Radeon RX 7600</b></li>
117236
<li>Storage: <b>MSI NVMe PCIe Gen3</b></li>
118237
</ul>
119238
</section>
120239

121240
<section class="card">
122-
<span class="tag">Storage & Docker Node</span>
123-
<h3 style="margin:0">HP Compaq Pro 6300</h3>
241+
<span class="tag">Storage & Docker</span>
242+
<h3>HP Compaq Pro 6300</h3>
124243
<ul class="spec-list">
125-
<li>CPU: <b>Intel Core i5-3470</b> (4C/4T)</li>
244+
<li>CPU: <b>Intel Core i5-3470</b></li>
126245
<li>RAM: <b>16GB DDR3</b></li>
127-
<li>Services: <b>Docker / Storage & Backup Server</b></li>
128-
<li>Storage: <b>256GB SSD + 2.1TB Mixed HDD</b></li>
246+
<li>Services: <b>Docker / Backup</b></li>
247+
<li>Storage: <b>256GB SSD + 2.1TB</b></li>
129248
</ul>
130249
</section>
131250

132251
<section class="card">
133252
<span class="tag">Network Backbone</span>
134-
<h3 style="margin:0">Core Components</h3>
253+
<h3>Core Components</h3>
135254
<ul class="spec-list">
136-
<li>Switch: <b>D-Link DGS-1100-16</b> (Managed L2)</li>
137-
<li>Router/DNS: <b>MikroTik RB951G</b> (Pi-hole + Unbound)</li>
138-
<li>Wireless: <b>Xiaomi Redmi AC2100</b> (5GHz AP Mode)</li>
139-
<li>VLANs: <b>VLAN 10, 20, 30 Configured</b></li>
255+
<li>Switch: <b>D-Link DGS-1100-16</b></li>
256+
<li>Router: <b>MikroTik (Pi-hole)</b></li>
257+
<li>Wireless: <b>Xiaomi AC2100</b></li>
258+
<li>VLANs: <b>10, 20, 30 Active</b></li>
140259
</ul>
141260
</section>
142261
</div>
143262

144-
<h2 style="margin-top: 40px; border-left: 4px solid var(--success); padding-left: 15px;">System Benchmarks</h2>
263+
<h2 class="section-title">System Benchmarks</h2>
145264

146265
<div class="grid">
147-
<div class="card">
148-
<span style="font-size: 0.7rem;">CPU COMPRESSION (7z b)</span>
266+
<div class="bench-card">
267+
<div class="bench-label">CPU COMPRESSION (7z b)</div>
149268
<div class="bench-val">46,287 MIPS</div>
150269
<div class="benchmark-bar"><div class="fill" style="width: 75%;"></div></div>
151270
</div>
152271

153-
<div class="card">
154-
<span style="font-size: 0.7rem;">LOCAL NETWORK OVER SWITCH (iPerf3)</span>
272+
<div class="bench-card">
273+
<div class="bench-label">LOCAL NETWORK (iPerf3)</div>
155274
<div class="bench-val">941 Mbits/sec</div>
156275
<div class="benchmark-bar"><div class="fill" style="width: 94%;"></div></div>
157276
</div>
158277

159-
<div class="card">
160-
<span style="font-size: 0.7rem;">SATA III SSD READ (hdparm)</span>
278+
<div class="bench-card">
279+
<div class="bench-label">SATA III SSD READ (hdparm)</div>
161280
<div class="bench-val">445.88 MB/s</div>
162281
<div class="benchmark-bar"><div class="fill" style="width: 65%;"></div></div>
163282
</div>
164283
</div>
165284

166285
<div class="status-footer">
167-
<span style="color: var(--success);">●</span> All Real Nodes Operational | Architecture: x86-64
286+
<span class="pulse-dot">●</span> <span>All Real Nodes Operational &bull; Architecture: x86-64</span>
168287
</div>
169288
</div>

0 commit comments

Comments
 (0)