Skip to content

Commit dffebab

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

1 file changed

Lines changed: 117 additions & 128 deletions

File tree

‎index.html‎

Lines changed: 117 additions & 128 deletions
Original file line numberDiff line numberDiff line change
@@ -6,170 +6,159 @@
66
<head>
77
<meta charset="UTF-8">
88
<meta name="viewport" content="width=device-width, initial-scale=1.0">
9-
<title>DevLab Environment | Command Center</title>
9+
<title>DevLab | System Hub</title>
1010
<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">
11+
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&family=Inter:wght@400;900&display=swap" rel="stylesheet">
1212
<style>
1313
:root {
14-
--bg-body: #050505;
15-
--bg-nav: rgba(5, 5, 5, 0.9);
16-
--bg-card: #0e0e0e;
17-
--text-main: #f8fafc;
18-
--text-muted: #64748b;
19-
--border-color: rgba(255, 255, 255, 0.08);
20-
--accent-blue: #3b82f6;
21-
--accent-green: #4ade80;
22-
--radius: 12px;
14+
--bg: #050505;
15+
--card-bg: rgba(10, 10, 10, 0.8);
16+
--accent: #3b82f6;
17+
--border: rgba(255, 255, 255, 0.05);
18+
--text: #e2e8f0;
2319
}
2420

2521
body {
22+
background: var(--bg);
23+
color: var(--text);
2624
font-family: 'Inter', sans-serif;
27-
background: var(--bg-body) url('/background.png') no-repeat center center fixed;
28-
background-size: cover;
29-
color: var(--text-main);
3025
margin: 0;
31-
overflow-x: hidden;
26+
background-image: radial-gradient(circle at 2px 2px, rgba(255,255,255,0.02) 1px, transparent 0);
27+
background-size: 32px 32px;
3228
}
3329

3430
/* Navbar */
35-
.navbar {
36-
position: sticky; top: 0; z-index: 1000;
37-
background: var(--bg-nav); backdrop-filter: blur(20px);
38-
border-bottom: 1px solid var(--border-color);
39-
padding: 12px 40px; display: flex; align-items: center; justify-content: space-between;
31+
.nav {
32+
display: flex; justify-content: space-between; align-items: center;
33+
padding: 20px 40px; border-bottom: 1px solid var(--border);
34+
backdrop-filter: blur(10px); position: sticky; top: 0; z-index: 100;
4035
}
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; }
44-
.nav-center a:hover, .nav-center a.active { color: var(--accent-blue); }
36+
.nav-links a { color: #64748b; text-decoration: none; margin-left: 20px; font-weight: 600; font-size: 0.9rem; transition: 0.3s; }
37+
.nav-links a:hover { color: var(--accent); }
4538

46-
/* Dropdown Community */
39+
/* Community Dropdown */
4740
.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); }
41+
.dropbtn { background: none; border: 1px solid var(--border); color: #fff; padding: 8px 16px; border-radius: 6px; cursor: pointer; font-family: inherit; font-weight: bold; }
42+
.dropdown-content {
43+
display: none; position: absolute; right: 0; background: #0a0a0a;
44+
min-width: 180px; border: 1px solid var(--border); border-radius: 8px; z-index: 1000;
45+
}
46+
.dropdown-content a { color: #888; padding: 12px; text-decoration: none; display: block; font-size: 0.8rem; border-bottom: 1px solid var(--border); }
47+
.dropdown-content a:last-child { border-bottom: none; }
48+
.dropdown-content a:hover { background: #111; color: var(--accent); }
5249
.dropdown:hover .dropdown-content { display: block; }
5350

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);
51+
/* Main Content */
52+
.container { max-width: 1300px; margin: 40px auto; padding: 0 20px; display: grid; grid-template-columns: 1.5fr 1fr; gap: 30px; }
53+
54+
.terminal-card {
55+
background: var(--card-bg); border: 1px solid var(--border);
56+
border-radius: 12px; padding: 30px; position: relative;
57+
box-shadow: 0 10px 30px rgba(0,0,0,0.5);
6458
}
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); }
6659

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); }
60+
.hero-title { font-size: 3.5rem; font-weight: 900; margin: 0; letter-spacing: -2px; line-height: 1; }
61+
.hero-title span { color: var(--accent); }
6962

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; }
63+
.badge { background: rgba(59, 130, 246, 0.1); color: var(--accent); padding: 4px 10px; border-radius: 4px; font-size: 0.7rem; font-weight: 800; text-transform: uppercase; margin-bottom: 15px; display: inline-block; }
7264

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; }
65+
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 30px; }
66+
.stat-box { border: 1px solid var(--border); padding: 20px; border-radius: 10px; background: rgba(255,255,255,0.01); }
67+
.stat-box h4 { margin: 0; font-size: 0.7rem; color: #444; text-transform: uppercase; }
68+
.stat-box p { margin: 10px 0 0 0; font-family: 'JetBrains Mono', monospace; color: var(--accent); font-size: 1.2rem; }
69+
70+
.btn-cta {
71+
display: inline-block; background: var(--accent); color: #000;
72+
padding: 15px 30px; border-radius: 8px; text-decoration: none;
73+
font-weight: 800; margin-top: 30px; transition: 0.3s;
74+
}
75+
.btn-cta:hover { transform: translateY(-3px); box-shadow: 0 5px 15px rgba(59, 130, 246, 0.4); }
7476

75-
@media (max-width: 1024px) { .grid-container { grid-template-columns: 1fr; } .navbar { padding: 15px; } }
77+
.posts-list { list-style: none; padding: 0; }
78+
.posts-list li { margin-bottom: 15px; border-bottom: 1px solid var(--border); padding-bottom: 10px; }
79+
.posts-list a { color: #cbd5e1; text-decoration: none; display: flex; justify-content: space-between; font-size: 0.9rem; }
80+
.posts-list a:hover { color: var(--accent); }
81+
82+
.support-btn { display: block; text-decoration: none; padding: 12px; border-radius: 8px; font-weight: 800; font-size: 0.8rem; text-align: center; margin-top: 10px; transition: 0.3s; }
83+
84+
@media (max-width: 1000px) { .container { grid-template-columns: 1fr; } .hero-title { font-size: 2.5rem; } }
7685
</style>
7786
</head>
7887
<body>
7988

80-
<nav class="navbar">
81-
<a href="/" class="nav-brand">DEVLAB STUDY</a>
82-
<div class="nav-center">
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>
89+
<nav class="nav">
90+
<a href="/" style="font-weight: 900; color: #fff; text-decoration: none; font-size: 1.2rem;">DEVLAB STUDY</a>
91+
<div style="display: flex; align-items: center;">
92+
<div class="nav-links" style="margin-right: 20px;">
93+
<a href="/blog">Blog</a>
94+
<a href="/homelab">HomeLab</a>
95+
<a href="/orbit">Orbit™</a>
96+
</div>
97+
<div class="dropdown">
98+
<button class="dropbtn">Community ▾</button>
99+
<div class="dropdown-content">
100+
<a href="https://github.com/DevLabStudy">GitHub</a>
101+
<a href="https://youtube.com/@devlabstudy">YouTube</a>
102+
<a href="https://tiktok.com/@devlabstudy">TikTok</a>
103+
<a href="https://x.com/DevLabStudy">X / Twitter</a>
104+
<a href="https://www.reddit.com/user/devlabstudy">Reddit</a>
105+
</div>
95106
</div>
96107
</div>
97108
</nav>
98109

99-
<main class="dashboard">
100-
101-
<header class="dash-header">
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>
105-
</div>
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>
109-
</div>
110-
</header>
111-
112-
<div class="grid-container">
113-
114-
<section>
115-
<div class="card hero-project">
116-
<div class="hero-overlay">
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>
121-
</div>
122-
</div>
123-
124-
<div class="ad-slot" style="height: 100px;">AdSense Placeholder [In-Feed]</div>
125-
126-
<div class="card">
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 %}
134-
</div>
135-
</section>
136-
137-
<aside style="display: flex; flex-direction: column; gap: 20px;">
138-
<div class="card">
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>
110+
<div class="container">
111+
<main>
112+
<div class="terminal-card">
113+
<span class="badge">System Status: Active</span>
114+
<h1 class="hero-title">DevLab <span>Environment</span></h1>
115+
<p style="color: #64748b; font-size: 1.1rem; margin-top: 20px;">Centrum zarządzania infrastrukturą IT, automatyką domową i projektami DIY. Dokumentujemy ewolucję od Arduino do klastrów Proxmox.</p>
116+
117+
<div class="stat-grid">
118+
<div class="stat-box">
119+
<h4>Active Nodes</h4>
120+
<p>02 UNITS</p>
143121
</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>
122+
<div class="stat-box">
123+
<h4>Storage Array</h4>
124+
<p>2.0 TB ZFS</p>
147125
</div>
148126
</div>
149127

150-
<div class="card" style="text-align: center;">
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>
154-
</div>
128+
<a href="/blog" class="btn-cta">Eksploruj Dokumentację</a>
129+
</div>
155130

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>
161-
</div>
162-
</div>
131+
<div style="margin-top: 30px; background: rgba(255,255,255,0.02); border: 1px dashed #222; border-radius: 12px; height: 100px; display: flex; align-items: center; justify-content: center; color: #333; font-size: 0.7rem; letter-spacing: 2px;">
132+
ADSENSE_RESERVED_ZONE
133+
</div>
134+
</main>
135+
136+
<aside>
137+
<div class="terminal-card" style="padding: 20px;">
138+
<h3 style="font-size: 0.8rem; text-transform: uppercase; color: #444; margin-bottom: 20px;">Recent Logs</h3>
139+
<ul class="posts-list">
140+
{% for post in site.posts limit:5 %}
141+
<li>
142+
<a href="{{ post.url }}">
143+
<span>{{ post.title }}</span>
144+
<span style="color: #444; font-size: 0.7rem;">{{ post.date | date: "%d.%m" }}</span>
145+
</a>
146+
</li>
147+
{% endfor %}
148+
</ul>
149+
</div>
163150

164-
<div class="ad-slot" style="height: 300px;">AdSense Placeholder [Skyscraper]</div>
165-
</aside>
166-
167-
</div>
168-
</main>
151+
<div class="terminal-card" style="margin-top: 20px; padding: 20px; border-color: var(--accent);">
152+
<h3 style="font-size: 0.8rem; color: var(--accent); margin-bottom: 15px;">Support Lab</h3>
153+
<a href="https://patreon.com/DevLabStudy" class="support-btn" style="background: #e11d48; color: #fff;">PATREON / PATRONITE</a>
154+
<a href="https://www.buymeacoffee.com/DevLabStudy" class="support-btn" style="background: #FFDD00; color: #000;">BUY ME A COFFEE</a>
155+
</div>
156+
</aside>
157+
</div>
169158

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>
159+
<footer style="text-align: center; padding: 40px; color: #222; font-family: 'JetBrains Mono'; font-size: 0.7rem;">
160+
&gt; root@devlab:~# uptime _ <br>
161+
21:55:00 up 34 days, 12:45, 1 user, load average: 0.08, 0.03, 0.01
173162
</footer>
174163

175164
</body>

0 commit comments

Comments
 (0)