Skip to content

Commit cff0556

Browse files
DevLabStudyDevLabStudy
authored
Update index.html
1 parent 1201771 commit cff0556

1 file changed

Lines changed: 120 additions & 112 deletions

File tree

‎index.html‎

Lines changed: 120 additions & 112 deletions
Original file line numberDiff line numberDiff line change
@@ -6,158 +6,166 @@
66
<head>
77
<meta charset="UTF-8">
88
<meta name="viewport" content="width=device-width, initial-scale=1.0">
9-
<title>DevLab | System Hub</title>
9+
<title>DevLab STUDY | Command Center</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&family=Inter:wght@400;900&display=swap" rel="stylesheet">
11+
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700;800&display=swap" rel="stylesheet">
1212
<style>
1313
:root {
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;
14+
--bg-body: #050505;
15+
--bg-nav: rgba(5, 5, 5, 0.9);
16+
--bg-card: #0e0e0e;
17+
--text-main: #f0f0f0;
18+
--text-muted: #64748b;
19+
--border-color: rgba(255, 255, 255, 0.08);
20+
--accent-blue: #3b82f6;
21+
--accent-green: #4ade80;
22+
--accent-pink: #e11d48;
23+
--accent-coffee: #FFDD00;
1924
}
2025

2126
body {
22-
background: var(--bg);
23-
color: var(--text);
24-
font-family: 'Inter', sans-serif;
27+
font-family: 'JetBrains Mono', monospace;
28+
background: var(--bg-body);
29+
color: var(--text-main);
2530
margin: 0;
26-
background-image: radial-gradient(circle at 2px 2px, rgba(255,255,255,0.02) 1px, transparent 0);
27-
background-size: 32px 32px;
31+
overflow-x: hidden;
32+
background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.01) 1px, transparent 0);
33+
background-size: 40px 40px;
2834
}
2935

30-
/* Navbar (Identyczny z HomeLab) */
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;
36+
/* Navbar */
37+
.navbar {
38+
position: sticky; top: 0; z-index: 1000;
39+
background: var(--bg-nav); backdrop-filter: blur(20px);
40+
border-bottom: 1px solid var(--border-color);
41+
padding: 12px 40px; display: flex; align-items: center; justify-content: space-between;
3542
}
36-
.nav-links { display: flex; align-items: center; }
37-
.nav-links a { color: #64748b; text-decoration: none; margin-left: 20px; font-weight: 600; font-size: 0.9rem; transition: 0.3s; }
38-
.nav-links a:hover { color: var(--accent); }
43+
.nav-brand { font-size: 1.2rem; font-weight: 800; text-decoration: none; color: #fff; text-transform: uppercase; }
44+
.nav-center { display: flex; gap: 20px; }
45+
.nav-center a { text-decoration: none; color: var(--text-muted); font-weight: 400; font-size: 0.85rem; transition: 0.3s; }
46+
.nav-center a:hover, .nav-center a.active { color: var(--accent-blue); }
3947

40-
/* Community Dropdown */
48+
/* Dropdown Community */
4149
.dropdown { position: relative; display: inline-block; }
42-
.dropbtn { background: none; border: 1px solid var(--border); color: #fff; padding: 8px 16px; border-radius: 6px; cursor: pointer; font-family: inherit; font-weight: bold; }
43-
.dropdown-content {
44-
display: none; position: absolute; right: 0; background: #0a0a0a;
45-
min-width: 180px; border: 1px solid var(--border); border-radius: 8px; z-index: 1000;
46-
}
47-
.dropdown-content a { color: #888; padding: 12px; text-decoration: none; display: block; font-size: 0.8rem; border-bottom: 1px solid var(--border); }
48-
.dropdown-content a:last-child { border-bottom: none; }
49-
.dropdown-content a:hover { background: #111; color: var(--accent); }
50+
.dropbtn { background: none; color: #fff; padding: 6px 14px; border-radius: 4px; border: 1px solid var(--border-color); cursor: pointer; font-family: inherit; font-weight: 700; font-size: 0.8rem; }
51+
.dropdown-content { display: none; position: absolute; right: 0; background: #0a0a0a; min-width: 180px; border: 1px solid var(--border-color); border-radius: 8px; z-index: 1001; }
52+
.dropdown-content a { color: #ccc; padding: 10px 14px; text-decoration: none; display: block; font-size: 0.8rem; border-bottom: 1px solid rgba(255,255,255,0.05); }
53+
.dropdown-content a:hover { background: rgba(255,255,255,0.05); color: var(--accent-blue); }
5054
.dropdown:hover .dropdown-content { display: block; }
5155

52-
/* Main Content */
53-
.container { max-width: 1300px; margin: 40px auto; padding: 0 20px; display: grid; grid-template-columns: 1.5fr 1fr; gap: 30px; }
54-
55-
.terminal-card {
56-
background: var(--card-bg); border: 1px solid var(--border);
57-
border-radius: 12px; padding: 30px; position: relative;
58-
box-shadow: 0 10px 30px rgba(0,0,0,0.5);
56+
/* Hero Header (Wyśrodkowane na górze) */
57+
.hero-header {
58+
max-width: 1000px; margin: 60px auto 40px auto; text-align: center; padding: 0 20px;
59+
}
60+
.hero-title { font-size: 3.5rem; font-weight: 800; margin: 0; text-transform: uppercase; letter-spacing: -2px; line-height: 1; color: var(--text-main); }
61+
.hero-title span { color: var(--accent-blue); }
62+
.hero-subtitle { font-size: 1rem; color: var(--text-muted); margin-top: 15px; max-width: 700px; margin-left: auto; margin-right: auto; }
63+
64+
/* Dashboard Wrapper */
65+
.dashboard { max-width: 1400px; margin: 0 auto 40px auto; padding: 0 20px; }
66+
67+
/* Grid Layout */
68+
.grid-container { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; }
69+
.card { background: rgba(10, 10, 10, 0.8); border: 1px solid var(--border-color); padding: 25px; border-radius: 8px; position: relative; }
70+
71+
/* Main Project Card */
72+
.hero-project {
73+
grid-column: span 1;
74+
height: 480px;
75+
background: url('/assets/images/IMG_20260304_153435_hdr.jpg') center/cover;
76+
display: flex; align-items: flex-end;
77+
border-radius: 8px; border: 1px solid var(--border-color);
5978
}
79+
.hero-overlay { width: 100%; background: linear-gradient(transparent, rgba(0,0,0,0.98)); padding: 40px; border-radius: 0 0 8px 8px; }
6080

61-
.hero-title { font-size: 3.5rem; font-weight: 900; margin: 0; letter-spacing: -2px; line-height: 1; }
62-
.hero-title span { color: var(--accent); }
81+
.btn-blue { display: inline-block; background: var(--accent-blue); color: #000; padding: 12px 28px; border-radius: 4px; text-decoration: none; font-weight: 800; font-size: 0.9rem; text-transform: uppercase; transition: 0.3s; margin-top: 20px; }
82+
.btn-blue:hover { filter: brightness(1.2); }
6383

64-
.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; }
84+
/* Sidebar & Support */
85+
.support-btn { display: block; text-decoration: none; padding: 14px; border-radius: 4px; font-weight: 800; font-size: 0.85rem; text-align: center; margin-top: 10px; transition: 0.3s; text-transform: uppercase; }
86+
.support-btn:hover { filter: brightness(1.1); }
6587

66-
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 30px; }
67-
.stat-box { border: 1px solid var(--border); padding: 20px; border-radius: 10px; background: rgba(255,255,255,0.01); }
68-
.stat-box h4 { margin: 0; font-size: 0.7rem; color: #444; text-transform: uppercase; }
69-
.stat-box p { margin: 10px 0 0 0; font-family: 'JetBrains Mono', monospace; color: var(--accent); font-size: 1.2rem; }
88+
.ad-slot { background: rgba(255,255,255,0.01); border: 2px dashed #222; border-radius: 8px; color: #333; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; text-transform: uppercase; margin: 20px 0; font-weight: bold; }
7089

71-
.btn-cta {
72-
display: inline-block; background: var(--accent); color: #000;
73-
padding: 15px 30px; border-radius: 8px; text-decoration: none;
74-
font-weight: 800; margin-top: 30px; transition: 0.3s;
90+
@media (max-width: 1024px) {
91+
.hero-title { font-size: 2.5rem; }
92+
.grid-container { grid-template-columns: 1fr; }
93+
.navbar { padding: 15px; flex-direction: column; gap: 15px; }
7594
}
76-
.btn-cta:hover { transform: translateY(-3px); box-shadow: 0 5px 15px rgba(59, 130, 246, 0.4); }
77-
78-
.posts-list { list-style: none; padding: 0; }
79-
.posts-list li { margin-bottom: 15px; border-bottom: 1px solid var(--border); padding-bottom: 10px; }
80-
.posts-list a { color: #cbd5e1; text-decoration: none; display: flex; justify-content: space-between; font-size: 0.9rem; }
81-
.posts-list a:hover { color: var(--accent); }
82-
83-
.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; }
84-
85-
@media (max-width: 1000px) { .container { grid-template-columns: 1fr; } .hero-title { font-size: 2.5rem; } }
8695
</style>
8796
</head>
8897
<body>
8998

90-
<nav class="nav">
91-
<a href="/" style="font-weight: 900; color: #fff; text-decoration: none; font-size: 1.2rem;">DEVLAB STUDY</a>
92-
<div class="nav-links">
93-
<a href="/">Hub</a>
99+
<nav class="navbar">
100+
<a href="/" class="nav-brand">DEVLAB STUDY</a>
101+
<div class="nav-center">
102+
<a href="/" class="active">Hub</a>
94103
<a href="/blog">Blog</a>
95104
<a href="/homelab">HomeLab</a>
96105
<a href="/orbit">Orbit™</a>
97-
<div class="dropdown" style="margin-left: 20px;">
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://x.com/DevLabStudy">X / Twitter</a>
103-
<a href="https://www.reddit.com/user/devlabstudy">Reddit</a>
104-
</div>
106+
</div>
107+
<div class="dropdown">
108+
<button class="dropbtn">Community ▾</button>
109+
<div class="dropdown-content">
110+
<a href="https://github.com/DevLabStudy" target="_blank">GitHub</a>
111+
<a href="https://www.youtube.com/@devlabstudy" target="_blank">YouTube</a>
112+
<a href="https://www.tiktok.com/@devlabstudy" target="_blank">TikTok</a>
113+
<a href="https://x.com/DevLabStudy" target="_blank">X / Twitter</a>
114+
<a href="https://www.reddit.com/user/devlabstudy" target="_blank">Reddit</a>
105115
</div>
106116
</div>
107117
</nav>
108118

109-
<div class="container">
110-
<main>
111-
<div class="terminal-card">
112-
<span class="badge">System Status: Active</span>
113-
<h1 class="hero-title">DevLab <span>Environment</span></h1>
114-
<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>
115-
116-
<div class="stat-grid">
117-
<div class="stat-box">
118-
<h4>Active Nodes</h4>
119-
<p>02 UNITS</p>
119+
<header class="hero-header">
120+
<div style="color: var(--accent-blue); font-weight: 800; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 2px;">> SYSTEM_INIT_...</div>
121+
<h1 class="hero-title">DevLab <span>Environment</span></h1>
122+
<p class="hero-subtitle">Centrum zarządzania domową infrastrukturą IT, klastrami Proxmox i projektami DIY. Dokumentujemy ewolucję od Arduino po automatyzację na Linux Mint.</p>
123+
</header>
124+
125+
<main class="dashboard">
126+
<div class="grid-container">
127+
128+
<section>
129+
<div class="card hero-project">
130+
<div class="hero-overlay">
131+
<div style="background: var(--accent-blue); color: #000; padding: 3px 10px; border-radius: 4px; font-size: 0.75rem; font-weight: 800; text-transform: uppercase; display: inline-block; margin-bottom: 10px;">[ ACTIVE_LOG ]</div>
132+
<h2 style="font-size: 2.2rem; margin: 0 0 15px 0; font-weight: 800; text-transform: uppercase; line-height: 1.1;">Serwerownia na Drzewie</h2>
133+
<p style="color: #cbd5e1; margin: 0; max-width: 550px; font-size: 0.9rem;">Pełna dokumentacja budowy infrastruktury sieciowej i serwerowej 5 metrów nad ziemią. HP ProLiant, OpenWRT i ESP32 integracja.</p>
134+
<a href="/blog" class="btn-blue">ACCESS_DOCUMENTATION →</a>
120135
</div>
121-
<div class="stat-box">
122-
<h4>Storage Array</h4>
123-
<p>2.0 TB ZFS</p>
136+
</div>
137+
</section>
138+
139+
<aside style="display: flex; flex-direction: column; gap: 20px;">
140+
<div class="card">
141+
<h3 style="font-size: 0.85rem; color: var(--text-muted); margin-top: 0; margin-bottom: 20px; text-transform: uppercase; letter-spacing: 1px;">Recent_Entries:</h3>
142+
<div style="display: flex; flex-direction: column; gap: 12px; font-size: 0.85rem;">
143+
{% for post in site.posts limit:5 %}
144+
<a href="{{ post.url }}" style="display: flex; justify-content: space-between; text-decoration: none; padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,0.05); color: var(--text-main);">
145+
<span><b style="color: var(--accent-blue);">></b> {{ post.title }}</span>
146+
<span style="color: var(--text-muted); font-size: 0.75rem; white-space: nowrap; margin-left: 10px;">[{{ post.date | date: "%d.%m.%y" }}]</span>
147+
</a>
148+
{% endfor %}
124149
</div>
125150
</div>
126151

127-
<a href="/blog" class="btn-cta">Eksploruj Dokumentację</a>
128-
</div>
152+
<div class="card" style="background: rgba(59, 130, 246, 0.05); border-color: var(--accent-blue);">
153+
<h3 style="font-size: 0.85rem; color: var(--accent-blue); margin-top: 0; margin-bottom: 15px; text-transform: uppercase; letter-spacing: 1px;">Support_Development:</h3>
154+
<a href="https://patreon.com/DevLabStudy" target="_blank" class="support-btn" style="background: var(--accent-pink); color: #fff;">PATREON</a>
155+
<a href="https://www.buymeacoffee.com/DevLabStudy" target="_blank" class="support-btn" style="background: var(--accent-coffee); color: #000;">BUY ME A COFFEE</a>
156+
</div>
157+
</aside>
158+
159+
</div>
129160

130-
<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;">
131-
ADSENSE_RESERVED_ZONE
132-
</div>
133-
</main>
134-
135-
<aside>
136-
<div class="terminal-card" style="padding: 20px;">
137-
<h3 style="font-size: 0.8rem; text-transform: uppercase; color: #444; margin-bottom: 20px;">Recent Logs</h3>
138-
<ul class="posts-list">
139-
{% for post in site.posts limit:5 %}
140-
<li>
141-
<a href="{{ post.url }}">
142-
<span>{{ post.title }}</span>
143-
<span style="color: #444; font-size: 0.7rem;">{{ post.date | date: "%d.%m" }}</span>
144-
</a>
145-
</li>
146-
{% endfor %}
147-
</ul>
148-
</div>
161+
<div class="ad-slot" style="height: 120px; width: 100%;">MIEJSCE NA REKLAMĘ ADSENSE [BANNER]</div>
149162

150-
<div class="terminal-card" style="margin-top: 20px; padding: 20px; border-color: var(--accent);">
151-
<h3 style="font-size: 0.8rem; color: var(--accent); margin-bottom: 15px;">Support Lab</h3>
152-
<a href="https://patreon.com/DevLabStudy" class="support-btn" style="background: #e11d48; color: #fff;">PATREON / PATRONITE</a>
153-
<a href="https://www.buymeacoffee.com/DevLabStudy" class="support-btn" style="background: #FFDD00; color: #000;">BUY ME A COFFEE</a>
154-
</div>
155-
</aside>
156-
</div>
163+
</main>
157164

158-
<footer style="text-align: center; padding: 40px; color: #222; font-family: 'JetBrains Mono'; font-size: 0.7rem;">
165+
<footer style="text-align: center; padding: 60px; font-size: 0.75rem; color: #333; border-top: 1px solid var(--border-color); background: #080808;">
159166
&gt; root@devlab:~# uptime _ <br>
160167
21:55:00 up 34 days, 12:45, 1 user, load average: 0.08, 0.03, 0.01
168+
<p>&copy; 2026 DEVLAB STUDY. SYSTEM_STABLE.</p>
161169
</footer>
162170

163171
</body>

0 commit comments

Comments
 (0)