Skip to content

Commit 62777cc

Browse files
DevLabStudyDevLabStudy
authored
Update index.html
1 parent d99938d commit 62777cc

1 file changed

Lines changed: 95 additions & 172 deletions

File tree

‎index.html‎

Lines changed: 95 additions & 172 deletions
Original file line numberDiff line numberDiff line change
@@ -12,12 +12,13 @@
1212
<style>
1313
:root {
1414
--bg-body: #050505;
15-
--bg-nav: rgba(5, 5, 5, 0.85);
16-
--bg-card: #111;
15+
--bg-nav: rgba(5, 5, 5, 0.9);
16+
--bg-card: #0e0e0e;
1717
--text-main: #f8fafc;
18-
--text-muted: #94a3b8;
19-
--border-color: rgba(255, 255, 255, 0.1);
18+
--text-muted: #64748b;
19+
--border-color: rgba(255, 255, 255, 0.08);
2020
--accent-blue: #3b82f6;
21+
--accent-green: #4ade80;
2122
--radius: 12px;
2223
}
2324

@@ -27,226 +28,148 @@
2728
background-size: cover;
2829
color: var(--text-main);
2930
margin: 0;
30-
line-height: 1.6;
3131
overflow-x: hidden;
3232
}
3333

34-
/* Nawigacja */
34+
/* Navbar */
3535
.navbar {
36-
position: sticky;
37-
top: 0;
38-
z-index: 100;
39-
background: var(--bg-nav);
40-
backdrop-filter: blur(15px);
36+
position: sticky; top: 0; z-index: 1000;
37+
background: var(--bg-nav); backdrop-filter: blur(20px);
4138
border-bottom: 1px solid var(--border-color);
42-
padding: 15px 40px;
43-
display: flex;
44-
align-items: center;
45-
justify-content: space-between;
39+
padding: 12px 40px; display: flex; align-items: center; justify-content: space-between;
4640
}
47-
48-
.nav-brand { font-size: 1.5rem; font-weight: 800; text-decoration: none; color: var(--text-main); letter-spacing: -0.5px; }
49-
.nav-center { display: flex; gap: 30px; }
50-
.nav-center a { text-decoration: none; color: var(--text-muted); font-weight: 600; font-size: 0.95rem; transition: 0.3s; }
41+
.nav-brand { font-size: 1.4rem; font-weight: 900; text-decoration: none; color: #fff; letter-spacing: -1px; }
42+
.nav-center { display: flex; gap: 25px; }
43+
.nav-center a { text-decoration: none; color: var(--text-muted); font-weight: 600; font-size: 0.9rem; transition: 0.3s; }
5144
.nav-center a:hover, .nav-center a.active { color: var(--accent-blue); }
5245

53-
/* Dashboard Wrapper */
54-
.dashboard {
55-
max-width: 1400px;
56-
margin: 40px auto;
57-
padding: 0 20px;
58-
font-family: 'JetBrains Mono', monospace;
59-
}
60-
61-
/* Header Dash */
62-
.dash-header {
63-
display: flex;
64-
justify-content: space-between;
65-
align-items: center;
66-
padding: 20px;
67-
background: rgba(10, 10, 10, 0.8);
68-
border: 1px solid var(--border-color);
69-
border-radius: var(--radius);
70-
margin-bottom: 20px;
71-
box-shadow: 0 4px 15px rgba(59, 130, 246, 0.1);
72-
}
73-
74-
/* Layout Grids */
75-
.grid-container {
76-
display: grid;
77-
grid-template-columns: 2fr 1fr;
78-
gap: 20px;
79-
}
80-
81-
.card {
82-
background: rgba(17, 17, 17, 0.8);
83-
backdrop-filter: blur(10px);
84-
border: 1px solid var(--border-color);
85-
border-radius: var(--radius);
86-
padding: 20px;
87-
position: relative;
88-
overflow: hidden;
89-
}
90-
91-
.hero-project {
92-
grid-column: span 1;
93-
height: 450px;
94-
background: url('/assets/images/IMG_20260304_153435_hdr.jpg') center/cover;
95-
display: flex;
96-
align-items: flex-end;
97-
border: 1px solid var(--border-color);
98-
}
99-
100-
.hero-overlay {
101-
width: 100%;
102-
background: linear-gradient(transparent, rgba(0,0,0,0.95));
103-
padding: 30px;
46+
/* Dropdown Community */
47+
.dropdown { position: relative; display: inline-block; }
48+
.dropbtn { background: rgba(255,255,255,0.05); color: #fff; padding: 8px 16px; border-radius: 8px; border: 1px solid var(--border-color); cursor: pointer; font-weight: 700; font-size: 0.85rem; }
49+
.dropdown-content { display: none; position: absolute; right: 0; background: #0e0e0e; min-width: 180px; border: 1px solid var(--border-color); border-radius: 10px; z-index: 1001; box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
50+
.dropdown-content a { color: #ccc; padding: 12px 16px; text-decoration: none; display: block; font-size: 0.85rem; border-bottom: 1px solid rgba(255,255,255,0.05); }
51+
.dropdown-content a:hover { background: rgba(255,255,255,0.05); color: var(--accent-blue); }
52+
.dropdown:hover .dropdown-content { display: block; }
53+
54+
/* Dashboard */
55+
.dashboard { max-width: 1400px; margin: 30px auto; padding: 0 20px; font-family: 'JetBrains Mono', monospace; }
56+
.dash-header { background: rgba(15,15,15,0.8); border: 1px solid var(--border-color); border-radius: var(--radius); padding: 20px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; }
57+
58+
.grid-container { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; }
59+
.card { background: rgba(10, 10, 10, 0.7); backdrop-filter: blur(10px); border: 1px solid var(--border-color); border-radius: var(--radius); padding: 20px; }
60+
61+
.hero-project {
62+
height: 480px; background: url('/assets/images/IMG_20260304_153435_hdr.jpg') center/cover;
63+
display: flex; align-items: flex-end; border: 1px solid var(--border-color);
10464
}
65+
.hero-overlay { width: 100%; background: linear-gradient(transparent, rgba(0,0,0,0.98)); padding: 40px; border-radius: 0 0 var(--radius) var(--radius); }
10566

106-
.status-bar {
107-
height: 6px;
108-
background: rgba(255,255,255,0.1);
109-
border-radius: 3px;
110-
margin: 10px 0;
111-
}
67+
.btn-blue { background: var(--accent-blue); color: #000; padding: 10px 24px; border-radius: 6px; text-decoration: none; font-weight: 800; font-size: 0.9rem; transition: 0.3s; }
68+
.btn-blue:hover { filter: brightness(1.2); transform: translateY(-2px); }
11269

113-
.status-fill {
114-
height: 100%;
115-
background: var(--accent-blue);
116-
border-radius: 3px;
117-
}
70+
.status-bar { height: 6px; background: rgba(255,255,255,0.05); border-radius: 3px; margin: 8px 0; }
71+
.status-fill { height: 100%; border-radius: 3px; }
11872

119-
.ad-slot {
120-
background: rgba(255,255,255,0.02);
121-
border: 2px dashed #333;
122-
border-radius: var(--radius);
123-
height: 100px;
124-
display: flex;
125-
align-items: center;
126-
justify-content: center;
127-
color: #444;
128-
font-size: 0.75rem;
129-
text-transform: uppercase;
130-
letter-spacing: 2px;
131-
margin: 20px 0;
132-
}
73+
.ad-slot { background: rgba(255,255,255,0.02); border: 2px dashed #222; border-radius: var(--radius); color: #333; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; text-transform: uppercase; margin: 20px 0; }
13374

134-
@media (max-width: 1024px) {
135-
.grid-container { grid-template-columns: 1fr; }
136-
.navbar { padding: 15px 20px; flex-direction: column; gap: 15px; }
137-
}
75+
@media (max-width: 1024px) { .grid-container { grid-template-columns: 1fr; } .navbar { padding: 15px; } }
13876
</style>
13977
</head>
14078
<body>
14179

14280
<nav class="navbar">
143-
<a href="/" class="nav-brand">DevLabStudy</a>
81+
<a href="/" class="nav-brand">DEVLAB STUDY</a>
14482
<div class="nav-center">
145-
<a href="/" class="active">Hub</a>
146-
<a href="/blog">Blog</a>
147-
<a href="/homelab">HomeLab</a>
148-
<a href="/orbit">Orbit™</a>
83+
<a href="/" class="active">HUB</a>
84+
<a href="/blog">BLOG</a>
85+
<a href="/homelab">HOMELAB</a>
86+
<a href="/orbit">ORBIT™</a>
87+
</div>
88+
<div class="dropdown">
89+
<button class="dropbtn">Community ▾</button>
90+
<div class="dropdown-content">
91+
<a href="https://github.com/DevLabStudy">GitHub</a>
92+
<a href="https://www.youtube.com/@devlabstudy">YouTube</a>
93+
<a href="https://x.com/DevLabStudy">X / Twitter</a>
94+
<a href="https://www.reddit.com/user/devlabstudy">Reddit</a>
95+
</div>
14996
</div>
150-
<div style="width: 100px;"></div> </nav>
97+
</nav>
15198

15299
<main class="dashboard">
153100

154101
<header class="dash-header">
155-
<div style="display: flex; align-items: center; gap: 15px;">
156-
<span style="font-size: 1.8rem;">🖥️</span>
157-
<div>
158-
<h1 style="margin: 0; font-size: 1.1rem; text-transform: uppercase; letter-spacing: 1px;">Command Center v3.0</h1>
159-
<p style="margin: 0; font-size: 0.75rem; color: var(--text-muted);">HOST: devlab-main | IP: 192.168.1.100 | OS: Mint/Proxmox</p>
160-
</div>
102+
<div>
103+
<h1 style="margin: 0; font-size: 1rem; color: var(--accent-blue);">[ COMMAND_CENTER_V3 ]</h1>
104+
<p style="margin: 0; font-size: 0.7rem; color: var(--text-muted);">OS: LINUX MINT | PROXMOX NODE: ACTIVE</p>
161105
</div>
162-
<div style="text-align: right; line-height: 1.2;">
163-
<span style="color: #4ade80; font-weight: bold; font-size: 0.85rem;">● SYSTEM ONLINE</span><br>
164-
<span style="color: var(--text-muted); font-size: 0.7rem;">UPTIME: 34D 12H 45M</span>
106+
<div style="text-align: right; font-size: 0.75rem;">
107+
<span style="color: var(--accent-green);">● SYSTEM ONLINE</span><br>
108+
<span style="opacity: 0.5;">UPTIME: 34:12:45:09</span>
165109
</div>
166110
</header>
167111

168112
<div class="grid-container">
169113

170-
<div>
114+
<section>
171115
<div class="card hero-project">
172116
<div class="hero-overlay">
173-
<span style="background: var(--accent-blue); color: #000; padding: 2px 8px; border-radius: 4px; font-size: 0.7rem; font-weight: 800;">ACTIVE MISSION</span>
174-
<h2 style="margin: 10px 0; font-size: 1.8rem; font-weight: 900; line-height: 1.1;">Serwerownia na Drzewie</h2>
175-
<p style="color: #cbd5e1; font-size: 0.9rem; margin-bottom: 20px; max-width: 500px;">Budowa infrastruktury IT 5 metrów nad ziemią. Pełna integracja Proxmoxa z siecią bezprzewodową w ekstremalnych warunkach.</p>
176-
<a href="/blog" style="display: inline-block; border: 2px solid var(--accent-blue); color: var(--accent-blue); padding: 10px 25px; border-radius: 6px; text-decoration: none; font-weight: bold; transition: 0.3s;" onmouseover="this.style.background='var(--accent-blue)'; this.style.color='#000';" onmouseout="this.style.background='transparent'; this.style.color='var(--accent-blue)';">ACCESS LOGS →</a>
117+
<div style="color: var(--accent-blue); font-weight: 800; font-size: 0.7rem; margin-bottom: 10px;">> FEATURED_MISSION</div>
118+
<h2 style="font-size: 2.2rem; margin: 0 0 15px 0; font-weight: 900;">Serwerownia na Drzewie</h2>
119+
<p style="color: #94a3b8; margin-bottom: 25px; max-width: 550px;">Budowa bazy IT 5 metrów nad ziemią. Testy zasięgu, zasilania i stabilności serwerów w ekstremalnym środowisku DIY.</p>
120+
<a href="/blog" class="btn-blue">ACCESS_LOGS</a>
177121
</div>
178122
</div>
179123

180-
<div class="ad-slot">Miejsce na Reklamę AdSense (In-Feed)</div>
124+
<div class="ad-slot" style="height: 100px;">AdSense Placeholder [In-Feed]</div>
181125

182126
<div class="card">
183-
<h3 style="margin-top: 0; font-size: 0.9rem; color: var(--accent-blue); text-transform: uppercase;">Recent System Logs:</h3>
184-
<div style="display: flex; flex-direction: column; gap: 12px;">
185-
{% for post in site.posts limit:4 %}
186-
<a href="{{ post.url }}" style="display: flex; justify-content: space-between; text-decoration: none; color: var(--text-main); border-bottom: 1px solid rgba(255,255,255,0.05); padding-bottom: 8px;">
187-
<span><b style="color: var(--accent-blue);">></b> {{ post.title }}</span>
188-
<span style="color: var(--text-muted); font-size: 0.8rem;">[{{ post.date | date: "%d.%m.%y" }}]</span>
189-
</a>
190-
{% endfor %}
191-
</div>
127+
<h3 style="font-size: 0.8rem; color: var(--text-muted); margin-bottom: 20px;">LATEST_ENTRIES</h3>
128+
{% for post in site.posts limit:4 %}
129+
<a href="{{ post.url }}" style="display: flex; justify-content: space-between; text-decoration: none; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,0.03);">
130+
<span style="color: #eee;"><b style="color: var(--accent-blue);">></b> {{ post.title }}</span>
131+
<span style="color: var(--text-muted); font-size: 0.75rem;">{{ post.date | date: "%d.%m.%y" }}</span>
132+
</a>
133+
{% endfor %}
192134
</div>
193-
</div>
135+
</section>
194136

195-
<div style="display: flex; flex-direction: column; gap: 20px;">
196-
137+
<aside style="display: flex; flex-direction: column; gap: 20px;">
197138
<div class="card">
198-
<h3 style="margin-top: 0; font-size: 0.9rem; color: var(--text-muted); text-transform: uppercase;">Infrastructure Status</h3>
199-
200-
<div style="margin-bottom: 20px;">
201-
<div style="display: flex; justify-content: space-between; font-size: 0.8rem; margin-bottom: 5px;">
202-
<span>node-hp-primary</span>
203-
<span style="color: #4ade80;">45%</span>
204-
</div>
205-
<div class="status-bar"><div class="status-fill" style="width: 45%; background: #4ade80;"></div></div>
139+
<h3 style="font-size: 0.8rem; color: var(--text-muted); margin-bottom: 15px;">RESOURCE_MONITOR</h3>
140+
<div style="margin-bottom: 15px;">
141+
<div style="display: flex; justify-content: space-between; font-size: 0.7rem; margin-bottom: 4px;"><span>CPU_NODE_HP</span><span>42%</span></div>
142+
<div class="status-bar"><div class="status-fill" style="width: 42%; background: var(--accent-green);"></div></div>
206143
</div>
207-
208-
<div style="margin-bottom: 20px;">
209-
<div style="display: flex; justify-content: space-between; font-size: 0.8rem; margin-bottom: 5px;">
210-
<span>node-laptop-cluster</span>
211-
<span style="color: var(--accent-blue);">12%</span>
212-
</div>
213-
<div class="status-bar"><div class="status-fill" style="width: 12%;"></div></div>
214-
</div>
215-
216-
<div style="margin-bottom: 0;">
217-
<div style="display: flex; justify-content: space-between; font-size: 0.8rem; margin-bottom: 5px;">
218-
<span>network-throughput</span>
219-
<span style="color: #fbbf24;">68%</span>
220-
</div>
221-
<div class="status-bar"><div class="status-fill" style="width: 68%; background: #fbbf24;"></div></div>
144+
<div>
145+
<div style="display: flex; justify-content: space-between; font-size: 0.7rem; margin-bottom: 4px;"><span>STORAGE_NAS</span><span>68%</span></div>
146+
<div class="status-bar"><div class="status-fill" style="width: 68%; background: var(--accent-blue);"></div></div>
222147
</div>
223148
</div>
224149

225150
<div class="card" style="text-align: center;">
226-
<h3 style="margin-top: 0; font-size: 0.8rem; color: var(--text-muted); text-transform: uppercase;">Deployed Stack</h3>
227-
<div style="font-size: 2.2rem; margin: 15px 0;">
228-
🐧 🐳 🛡️ ⚡
229-
</div>
230-
<p style="font-size: 0.7rem; color: var(--text-muted); margin: 0;">Mint | Docker | WireGuard | Proxmox | ESP32</p>
151+
<h3 style="font-size: 0.8rem; color: var(--text-muted);">TECH_STACK</h3>
152+
<div style="font-size: 2rem; margin: 15px 0;">🐧 🐳 🛡️ ⚡</div>
153+
<p style="font-size: 0.65rem; color: var(--text-muted);">PROXMOX | DOCKER | WIREGUARD | ESP32</p>
231154
</div>
232155

233-
<a href="https://buycoffee.to/devlabstudy" style="text-decoration: none;">
234-
<div class="card" style="background: var(--accent-blue); color: #000; text-align: center; border: none; cursor: pointer; transition: 0.3s;">
235-
<span style="font-size: 2rem;">☕</span>
236-
<h3 style="margin: 10px 0 5px 0; font-weight: 800; font-size: 1rem;">WSPIERAJ PROJEKT</h3>
237-
<p style="margin: 0; font-size: 0.75rem; font-weight: bold; opacity: 0.8;">Zafunduj kawę serwerom!</p>
156+
<div class="card" style="background: rgba(59, 130, 246, 0.1); border-color: var(--accent-blue);">
157+
<h3 style="font-size: 0.8rem; color: var(--accent-blue); margin-bottom: 15px;">SUPPORT_DEVELOPMENT</h3>
158+
<div style="display: flex; flex-direction: column; gap: 10px;">
159+
<a href="https://patreon.com/DevLabStudy" style="background: #e11d48; color: #fff; text-decoration: none; padding: 10px; border-radius: 6px; font-weight: 800; font-size: 0.8rem; text-align: center;">PATREON / PATRONITE</a>
160+
<a href="https://www.buymeacoffee.com/DevLabStudy" style="background: #FFDD00; color: #000; text-decoration: none; padding: 10px; border-radius: 6px; font-weight: 800; font-size: 0.8rem; text-align: center;">BUY ME A COFFEE</a>
238161
</div>
239-
</a>
240-
241-
<div class="ad-slot" style="height: 250px;">Ad Unit (Vertical)</div>
162+
</div>
242163

243-
</div>
164+
<div class="ad-slot" style="height: 300px;">AdSense Placeholder [Skyscraper]</div>
165+
</aside>
166+
244167
</div>
245168
</main>
246169

247-
<footer style="text-align: center; padding: 40px; color: var(--text-muted); font-family: 'JetBrains Mono', monospace; font-size: 0.8rem; border-top: 1px solid var(--border-color); margin-top: 40px;">
248-
<p>> DevLab Environment v3.0 | Built on Linux Mint | Hosted by GitHub</p>
249-
<p style="font-size: 0.7rem; opacity: 0.5;">&copy; 2026 DevLabStudy. Wszelkie prawa zastrzeżone.</p>
170+
<footer style="text-align: center; padding: 60px; font-family: 'JetBrains Mono'; font-size: 0.7rem; color: #334155; border-top: 1px solid var(--border-color);">
171+
<p>> ROOT@DEVLAB:~# SYSTEM_STABLE_STATUS_CONFIRMED</p>
172+
<p>&copy; 2026 DEVLAB STUDY. NO RIGHTS RESERVED. COPYLEFT.</p>
250173
</footer>
251174

252175
</body>

0 commit comments

Comments
 (0)