Skip to content

Commit 1a6aee6

Browse files
DevLabStudyDevLabStudy
authored
Create news.html
1 parent e019a85 commit 1a6aee6

1 file changed

Lines changed: 352 additions & 0 deletions

File tree

‎news.html‎

Lines changed: 352 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,352 @@
1+
---
2+
layout: default
3+
title: "Briefy & Newsy"
4+
---
5+
<!DOCTYPE html>
6+
<html lang="pl">
7+
<head>
8+
<meta charset="UTF-8">
9+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
10+
<title>Briefy & Newsy | DevLabStudy</title>
11+
<link rel="icon" type="image/jpeg" href="/profileIcon_g3ffyg7edeeg1.jpeg">
12+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800;900&family=JetBrains+Mono:wght@400;700;800&display=swap" rel="stylesheet">
13+
14+
<style>
15+
:root {
16+
--bg-nav: rgba(5, 5, 5, 0.9);
17+
--card-bg: rgba(10, 15, 25, 0.75);
18+
--text-main: #f8fafc;
19+
--text-muted: #94a3b8;
20+
--border: rgba(255, 255, 255, 0.1);
21+
--accent-blue: #00d2ff;
22+
--accent-contrast: #ff5e00;
23+
}
24+
25+
body {
26+
font-family: 'Inter', -apple-system, sans-serif;
27+
margin: 0;
28+
min-height: 100vh;
29+
background: #000 url('/background.png') no-repeat center center fixed;
30+
background-size: cover;
31+
color: var(--text-main);
32+
line-height: 1.7;
33+
}
34+
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);
42+
padding: 15px 40px;
43+
display: flex;
44+
align-items: center;
45+
justify-content: space-between;
46+
font-family: 'JetBrains Mono', monospace;
47+
}
48+
.nav-brand {
49+
font-size: 1.3rem;
50+
font-weight: 900;
51+
text-decoration: none;
52+
color: var(--text-main);
53+
letter-spacing: -0.5px;
54+
}
55+
.nav-brand span { color: var(--accent-contrast); }
56+
57+
.nav-links { display: flex; gap: 15px; }
58+
.nav-btn {
59+
background: rgba(255, 255, 255, 0.03);
60+
border: 1px solid var(--border);
61+
color: var(--text-muted);
62+
padding: 8px 16px;
63+
border-radius: 6px;
64+
text-decoration: none;
65+
font-size: 0.8rem;
66+
font-weight: 700;
67+
transition: all 0.2s ease;
68+
}
69+
.nav-btn:hover, .nav-btn.active {
70+
background: rgba(0, 210, 255, 0.08);
71+
border-color: var(--accent-blue);
72+
color: var(--accent-blue);
73+
}
74+
75+
/* Układ portalowy: Lewa kolumna (katalog newsów) + Prawa kolumna (sidebar) */
76+
.portal-container {
77+
max-width: 1200px;
78+
margin: 40px auto;
79+
padding: 0 20px;
80+
display: grid;
81+
grid-template-columns: 1fr 320px;
82+
gap: 30px;
83+
align-items: start;
84+
}
85+
86+
.main-feed {
87+
display: flex;
88+
flex-direction: column;
89+
gap: 25px;
90+
}
91+
92+
.news-card {
93+
background: var(--card-bg);
94+
backdrop-filter: blur(15px);
95+
border: 1px solid var(--border);
96+
border-radius: 12px;
97+
padding: 30px;
98+
box-shadow: 0 15px 35px rgba(0,0,0,0.5);
99+
position: relative;
100+
overflow: hidden;
101+
transition: transform 0.2s ease, border-color 0.2s ease;
102+
}
103+
.news-card:hover {
104+
border-color: rgba(0, 210, 255, 0.3);
105+
transform: translateY(-2px);
106+
}
107+
.news-card::before {
108+
content: '';
109+
position: absolute;
110+
top: 0; left: 0; width: 4px; height: 100%;
111+
background: var(--accent-contrast);
112+
}
113+
114+
.news-meta-top {
115+
display: flex;
116+
justify-content: space-between;
117+
align-items: center;
118+
margin-bottom: 12px;
119+
font-family: 'JetBrains Mono', monospace;
120+
font-size: 0.75rem;
121+
}
122+
.news-category {
123+
color: var(--accent-contrast);
124+
background: rgba(255, 94, 0, 0.1);
125+
padding: 4px 10px;
126+
border-radius: 4px;
127+
border: 1px solid rgba(255, 94, 0, 0.2);
128+
text-transform: uppercase;
129+
font-weight: 800;
130+
}
131+
.news-date { color: var(--text-muted); }
132+
133+
.news-title {
134+
font-size: 1.6rem;
135+
font-weight: 900;
136+
margin: 0 0 12px 0;
137+
letter-spacing: -0.5px;
138+
line-height: 1.3;
139+
color: #fff;
140+
}
141+
142+
.news-snippet {
143+
color: #cbd5e1;
144+
font-size: 0.98rem;
145+
margin-bottom: 20px;
146+
}
147+
148+
.news-footer-bar {
149+
display: flex;
150+
justify-content: space-between;
151+
align-items: center;
152+
border-top: 1px dashed var(--border);
153+
padding-top: 15px;
154+
font-family: 'JetBrains Mono', monospace;
155+
font-size: 0.8rem;
156+
}
157+
158+
.news-kudos-btn {
159+
background: rgba(255, 94, 0, 0.1);
160+
border: 1px solid rgba(255, 94, 0, 0.3);
161+
color: #fff;
162+
padding: 6px 14px;
163+
border-radius: 4px;
164+
cursor: pointer;
165+
font-family: 'JetBrains Mono', monospace;
166+
font-weight: 700;
167+
font-size: 0.75rem;
168+
transition: 0.2s;
169+
}
170+
.news-kudos-btn:hover { background: var(--accent-contrast); }
171+
172+
/* Sidebar boczny */
173+
.sidebar {
174+
display: flex;
175+
flex-direction: column;
176+
gap: 25px;
177+
}
178+
.sidebar-widget {
179+
background: var(--card-bg);
180+
backdrop-filter: blur(15px);
181+
border: 1px solid var(--border);
182+
border-radius: 12px;
183+
padding: 25px;
184+
}
185+
.sidebar-title {
186+
font-family: 'JetBrains Mono', monospace;
187+
font-size: 0.85rem;
188+
color: #fff;
189+
margin: 0 0 15px 0;
190+
text-transform: uppercase;
191+
border-bottom: 1px solid var(--border);
192+
padding-bottom: 10px;
193+
display: flex;
194+
align-items: center;
195+
gap: 8px;
196+
}
197+
.sidebar-title::before { content: '//'; color: var(--accent-blue); }
198+
199+
.sidebar-links {
200+
list-style: none;
201+
padding: 0;
202+
margin: 0;
203+
display: flex;
204+
flex-direction: column;
205+
gap: 10px;
206+
font-family: 'JetBrains Mono', monospace;
207+
font-size: 0.8rem;
208+
}
209+
.sidebar-links a {
210+
color: var(--text-muted);
211+
text-decoration: none;
212+
display: block;
213+
transition: 0.2s;
214+
}
215+
.sidebar-links a:hover {
216+
color: var(--accent-blue);
217+
transform: translateX(4px);
218+
}
219+
220+
footer {
221+
text-align: center;
222+
color: var(--text-muted);
223+
font-size: 0.8rem;
224+
font-family: 'JetBrains Mono', monospace;
225+
margin-top: 60px;
226+
margin-bottom: 40px;
227+
}
228+
229+
@media (max-width: 900px) {
230+
.portal-container { grid-template-columns: 1fr; }
231+
.navbar { padding: 15px 20px; flex-direction: column; gap: 15px; }
232+
}
233+
</style>
234+
</head>
235+
<body>
236+
237+
<nav class="navbar">
238+
<a href="/" class="nav-brand">DEVLABSTUDY<span>_</span></a>
239+
<div class="nav-links">
240+
<a href="/" class="nav-btn">// GŁÓWNA</a>
241+
<a href="/blog" class="nav-btn">// REJESTR</a>
242+
<a href="/news" class="nav-btn active">// BRIEFY</a>
243+
</div>
244+
</nav>
245+
246+
<main class="portal-container">
247+
248+
<!-- Lewa kolumna: Strumień newsów/briefów -->
249+
<section class="main-feed">
250+
<h1 style="font-family: 'JetBrains Mono', monospace; font-size: 1.5rem; color: #fff; margin: 0 0 10px 0;">
251+
// BIEŻĄCE BRIEFY TECHNOLOGICZNE
252+
</h1>
253+
254+
<!-- Przykładowy News 1 -->
255+
<article class="news-card">
256+
<div class="news-meta-top">
257+
<span class="news-category">[HARDWARE]</span>
258+
<span class="news-date">// 2026.10.06</span>
259+
</div>
260+
<h2 class="news-title">Core i9-14900K jako abonament? Kontrowersyjne posunięcie w świecie komponentów</h2>
261+
<p class="news-snippet">
262+
Płacenie subskrypcji za odblokowanie pełnej mocy rdzeni to kierunek, który budzi ogromny sprzeciw społeczności DIY. Czy to początek niebezpiecznego trendu na rynku?
263+
</p>
264+
<div class="news-footer-bar">
265+
<button class="news-kudos-btn" onclick="toggleKudos('news-1', this)">❤️ <span id="kudos-news-1">0</span> Kudos</button>
266+
<span style="color: var(--text-muted);">Operator: DevLabStudy</span>
267+
</div>
268+
</article>
269+
270+
<!-- Przykładowy News 2 -->
271+
<article class="news-card">
272+
<div class="news-meta-top">
273+
<span class="news-category">[NETWORKING]</span>
274+
<span class="news-date">// 2026.10.05</span>
275+
</div>
276+
<h2 class="news-title">Nowy standard Wi-Fi 7 w domowych labach – co realnie zmienia w routingu?</h2>
277+
<p class="news-snippet">
278+
Testujemy stabilność połączeń wielopasmowych na sprzęcie MikroTik i sprawdzamy, czy przesiadka na wyższe częstotliwości ma sens przy gęstej zabudowie miejskiej.
279+
</p>
280+
<div class="news-footer-bar">
281+
<button class="news-kudos-btn" onclick="toggleKudos('news-2', this)">❤️ <span id="kudos-news-2">0</span> Kudos</button>
282+
<span style="color: var(--text-muted);">Operator: DevLabStudy</span>
283+
</div>
284+
</article>
285+
286+
</section>
287+
288+
<!-- Prawa kolumna: Sidebar z filtrami i statusem -->
289+
<aside class="sidebar">
290+
<div class="sidebar-widget">
291+
<h3 class="sidebar-title">Kategorie Briefów</h3>
292+
<ul class="sidebar-links">
293+
<li><a href="/news">&rarr; Wszystkie wpisy</a></li>
294+
<li><a href="/news">&rarr; [HARDWARE] Sprzęt & CPU</a></li>
295+
<li><a href="/news">&rarr; [NETWORKING] Sieci & Routing</a></li>
296+
<li><a href="/news">&rarr; [HOMELAB] Serwery & Proxmox</a></li>
297+
</ul>
298+
</div>
299+
300+
<div class="sidebar-widget">
301+
<h3 class="sidebar-title">O projekcie</h3>
302+
<p style="font-family: 'JetBrains Mono', monospace; font-size: 0.8rem; color: var(--text-muted); margin: 0;">
303+
Krótkie raporty, testy podzespołów i surowe opinie prosto z warsztatu DevLabStudy.
304+
</p>
305+
</div>
306+
</aside>
307+
308+
</main>
309+
310+
<footer>
311+
<p>// DevLabStudy Tech Hub 2026</p>
312+
</footer>
313+
314+
<script>
315+
// Prosta obsługa liczników kudos zapisywanych w pamięci przeglądarki dla każdego kafelka
316+
function toggleKudos(newsId, btn) {
317+
let countSpan = document.getElementById('kudos-' + newsId);
318+
let likedKey = 'devlab_news_liked_' + newsId;
319+
let countKey = 'devlab_news_count_' + newsId;
320+
321+
let currentCount = parseInt(localStorage.getItem(countKey)) || 0;
322+
let hasLiked = localStorage.getItem(likedKey) === 'true';
323+
324+
if (!hasLiked) {
325+
currentCount++;
326+
hasLiked = true;
327+
btn.style.background = 'rgba(255, 94, 0, 0.4)';
328+
} else {
329+
currentCount = Math.max(0, currentCount - 1);
330+
hasLiked = false;
331+
btn.style.background = 'rgba(255, 94, 0, 0.1)';
332+
}
333+
334+
localStorage.setItem(countKey, currentCount);
335+
localStorage.setItem(likedKey, hasLiked);
336+
countSpan.textContent = currentCount;
337+
}
338+
339+
// Inicjalizacja stanów przy załadowaniu strony
340+
document.addEventListener('DOMContentLoaded', () => {
341+
['news-1', 'news-2'].forEach(id => {
342+
let count = localStorage.getItem('devlab_news_count_' + id) || 0;
343+
let liked = localStorage.getItem('devlab_news_liked_' + id) === 'true';
344+
document.getElementById('kudos-' + id).textContent = count;
345+
if(liked) {
346+
// opcjonalnie zaznacz przycisk
347+
}
348+
});
349+
});
350+
</script>
351+
</body>
352+
</html>

0 commit comments

Comments
 (0)