Skip to content

Commit d99938d

Browse files
DevLabStudyDevLabStudy
authored
Update index.html
1 parent 0df5b31 commit d99938d

1 file changed

Lines changed: 221 additions & 54 deletions

File tree

‎index.html‎

Lines changed: 221 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,86 +1,253 @@
1+
---
2+
layout: null
3+
---
14
<!DOCTYPE html>
2-
<html lang="en">
5+
<html lang="pl">
36
<head>
47
<meta charset="UTF-8">
58
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<title>DevLabStudy | Hub</title>
9+
<title>DevLab Environment | Command Center</title>
710
<link rel="icon" type="image/jpeg" href="/profileIcon_g3ffyg7edeeg1.jpeg">
11+
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700;800&family=Inter:wght@400;700;900&display=swap" rel="stylesheet">
812
<style>
913
:root {
10-
--bg-nav: rgba(5, 5, 5, 0.85); --text-main: #f8fafc; --text-muted: #94a3b8;
11-
--border-color: rgba(255, 255, 255, 0.1); --accent-blue: #3b82f6;
14+
--bg-body: #050505;
15+
--bg-nav: rgba(5, 5, 5, 0.85);
16+
--bg-card: #111;
17+
--text-main: #f8fafc;
18+
--text-muted: #94a3b8;
19+
--border-color: rgba(255, 255, 255, 0.1);
20+
--accent-blue: #3b82f6;
21+
--radius: 12px;
1222
}
13-
14-
body {
15-
font-family: 'Inter', -apple-system, sans-serif; margin: 0; min-height: 100vh;
16-
background: #000 url('/background.png') no-repeat center center fixed;
17-
background-size: cover; color: var(--text-main); overflow-x: hidden;
23+
24+
body {
25+
font-family: 'Inter', sans-serif;
26+
background: var(--bg-body) url('/background.png') no-repeat center center fixed;
27+
background-size: cover;
28+
color: var(--text-main);
29+
margin: 0;
30+
line-height: 1.6;
31+
overflow-x: hidden;
1832
}
1933

20-
.overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); z-index: 1; }
34+
/* Nawigacja */
35+
.navbar {
36+
position: sticky;
37+
top: 0;
38+
z-index: 100;
39+
background: var(--bg-nav);
40+
backdrop-filter: blur(15px);
41+
border-bottom: 1px solid var(--border-color);
42+
padding: 15px 40px;
43+
display: flex;
44+
align-items: center;
45+
justify-content: space-between;
46+
}
2147

22-
/* --- PERFEKCYJNY NAVBAR --- */
23-
.navbar { position: sticky; top: 0; z-index: 100; background: var(--bg-nav); backdrop-filter: blur(15px); border-bottom: 1px solid var(--border-color); padding: 15px 40px; display: flex; align-items: center; justify-content: space-between; }
24-
25-
.nav-left { flex: 1; display: flex; justify-content: flex-start; }
2648
.nav-brand { font-size: 1.5rem; font-weight: 800; text-decoration: none; color: var(--text-main); letter-spacing: -0.5px; }
27-
28-
.nav-center { flex: 2; display: flex; justify-content: center; gap: 30px; }
29-
.nav-center a { text-decoration: none; color: var(--text-muted); font-weight: 600; font-size: 0.95rem; transition: color 0.3s; }
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; }
3051
.nav-center a:hover, .nav-center a.active { color: var(--accent-blue); }
3152

32-
.nav-right { flex: 1; display: flex; justify-content: flex-end; }
33-
.dropdown { position: relative; display: inline-block; padding: 10px 0; }
34-
.dropbtn { color: var(--text-main); font-weight: 700; font-size: 0.95rem; cursor: pointer; background: rgba(255,255,255,0.1); padding: 8px 16px; border-radius: 8px; border: 1px solid var(--border-color); transition: 0.3s; }
35-
.dropdown:hover .dropbtn { background: rgba(255,255,255,0.2); }
36-
37-
/* Dropdown wycentrowany do prawej strony */
38-
.dropdown-content { display: none; position: absolute; right: 0; top: 100%; background-color: #111; min-width: 180px; box-shadow: 0 10px 40px rgba(0,0,0,0.8); border-radius: 12px; border: 1px solid var(--border-color); overflow: hidden; z-index: 1; opacity: 0; transform: translateY(-10px); transition: all 0.3s ease; }
39-
.dropdown:hover .dropdown-content { display: block; opacity: 1; transform: translateY(0); }
40-
.dropdown-content a { color: var(--text-main) !important; padding: 12px 20px; text-decoration: none; display: flex; justify-content: space-between; font-size: 0.9rem; font-weight: 600; border-bottom: 1px solid var(--border-color); transition: background 0.2s; }
41-
.dropdown-content a:last-child { border-bottom: none; }
42-
.dropdown-content a:hover { background: rgba(255,255,255,0.1); padding-left: 25px; }
43-
44-
.hero-content { position: relative; z-index: 2; text-align: center; margin-top: 25vh; padding: 0 20px; }
45-
.hero-title { font-size: 4rem; font-weight: 900; margin: 0; letter-spacing: -2px; text-shadow: 0 4px 20px rgba(0,0,0,0.8); }
46-
.hero-subtitle { font-size: 1.2rem; color: #cbd5e1; margin-top: 15px; font-weight: 500; text-shadow: 0 2px 10px rgba(0,0,0,0.8); }
47-
48-
@media (max-width: 768px) { .navbar { flex-direction: column; gap: 15px; } .nav-left, .nav-center, .nav-right { justify-content: center; width: 100%; flex-wrap: wrap; } }
49-
</style>
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+
}
5080

51-
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-XXXXXXXXXXXXXXXX" crossorigin="anonymous"></script>
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;
104+
}
105+
106+
.status-bar {
107+
height: 6px;
108+
background: rgba(255,255,255,0.1);
109+
border-radius: 3px;
110+
margin: 10px 0;
111+
}
112+
113+
.status-fill {
114+
height: 100%;
115+
background: var(--accent-blue);
116+
border-radius: 3px;
117+
}
52118

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+
}
133+
134+
@media (max-width: 1024px) {
135+
.grid-container { grid-template-columns: 1fr; }
136+
.navbar { padding: 15px 20px; flex-direction: column; gap: 15px; }
137+
}
138+
</style>
53139
</head>
54140
<body>
55-
<div class="overlay"></div>
56141

57142
<nav class="navbar">
58-
<div class="nav-left">
59-
<a href="/" class="nav-brand">DevLabStudy</a>
60-
</div>
143+
<a href="/" class="nav-brand">DevLabStudy</a>
61144
<div class="nav-center">
62145
<a href="/" class="active">Hub</a>
63146
<a href="/blog">Blog</a>
64147
<a href="/homelab">HomeLab</a>
65148
<a href="/orbit">Orbit™</a>
66149
</div>
67-
<div class="nav-right">
68-
<div class="dropdown">
69-
<span class="dropbtn">Community ▾</span>
70-
<div class="dropdown-content">
71-
<a href="https://github.com/DevLabStudy">GitHub <span>↗</span></a>
72-
<a href="https://www.youtube.com/@devlabstudy">YouTube <span>↗</span></a>
73-
<a href="https://x.com/DevLabStudy">X / Twitter <span>↗</span></a>
74-
<a href="https://www.tiktok.com/@devlabstudy">TikTok <span>↗</span></a>
75-
<a href="https://www.reddit.com/user/devlabstudy">Reddit <span>↗</span></a>
150+
<div style="width: 100px;"></div> </nav>
151+
152+
<main class="dashboard">
153+
154+
<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>
161+
</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>
165+
</div>
166+
</header>
167+
168+
<div class="grid-container">
169+
170+
<div>
171+
<div class="card hero-project">
172+
<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>
177+
</div>
178+
</div>
179+
180+
<div class="ad-slot">Miejsce na Reklamę AdSense (In-Feed)</div>
181+
182+
<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>
76192
</div>
77193
</div>
78-
</div>
79-
</nav>
80194

81-
<main class="hero-content">
82-
<h1 class="hero-title">DevLab Environment</h1>
83-
<p class="hero-subtitle">System Administration • Docker Optimization • Edge Computing</p>
195+
<div style="display: flex; flex-direction: column; gap: 20px;">
196+
197+
<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>
206+
</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>
222+
</div>
223+
</div>
224+
225+
<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>
231+
</div>
232+
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>
238+
</div>
239+
</a>
240+
241+
<div class="ad-slot" style="height: 250px;">Ad Unit (Vertical)</div>
242+
243+
</div>
244+
</div>
84245
</main>
246+
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>
250+
</footer>
251+
85252
</body>
86253
</html>

0 commit comments

Comments
 (0)