Skip to content

Commit 9468fd9

Browse files
michal92299michal92299
authored
Update Home-page.html
1 parent 851b7af commit 9468fd9

File tree

1 file changed

+109
-4
lines changed

1 file changed

+109
-4
lines changed

‎Home-page.html‎

Lines changed: 109 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -113,15 +113,17 @@
113113
transform: translateY(-2px);
114114
}
115115
.hero {
116-
height: 100vh;
116+
height: auto; /* Zmiana z 100vh, aby pomieścić dodatkową treść */
117117
display: flex;
118-
justify-content: center;
118+
flex-direction: column;
119+
justify-content: flex-start;
119120
align-items: center;
120121
text-align: center;
121122
background: linear-gradient(45deg, #1C2526, #2F3A44);
122123
position: relative;
123-
overflow: hidden;
124-
padding-top: 100px; /* Adjusted for header with social bar */
124+
overflow: visible; /* Zmiana z hidden, aby treść nie była obcinana */
125+
padding-top: 150px; /* Zwiększony padding dla uniknięcia nakładania się z headerem */
126+
padding-bottom: 100px; /* Większa przestrzeń na dole, aby lepiej się mieściło */
125127
}
126128
.hero::before {
127129
content: '';
@@ -159,6 +161,50 @@
159161
transform: scale(1.05);
160162
box-shadow: 0 4px 10px rgba(255,255,255,0.2);
161163
}
164+
.wallpapers-section {
165+
margin-top: 300px; /* Jeszcze większa przerwa pod powitaniem */
166+
max-width: 1200px;
167+
width: 100%;
168+
padding: 0 20px;
169+
}
170+
.wallpapers-section h2 {
171+
font-size: 32px;
172+
margin-bottom: 30px;
173+
color: #FFFFFF;
174+
}
175+
.wallpapers-grid {
176+
display: grid;
177+
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
178+
gap: 20px;
179+
margin-bottom: 30px;
180+
}
181+
.wallpaper-item {
182+
display: flex;
183+
flex-direction: column;
184+
align-items: center;
185+
background-color: rgba(255, 255, 255, 0.05);
186+
padding: 15px;
187+
border-radius: 10px;
188+
transition: transform 0.3s, box-shadow 0.3s;
189+
}
190+
.wallpaper-item:hover {
191+
transform: scale(1.05);
192+
box-shadow: 0 4px 10px rgba(255,255,255,0.2);
193+
}
194+
.wallpaper-item img {
195+
width: 100%;
196+
height: auto;
197+
max-height: 300px;
198+
border-radius: 5px;
199+
margin-bottom: 10px;
200+
}
201+
.wallpaper-item .btn {
202+
margin-top: 10px;
203+
}
204+
.download-all {
205+
display: block;
206+
margin: 0 auto;
207+
}
162208
footer {
163209
background-color: #121212;
164210
padding: 20px;
@@ -189,7 +235,32 @@
189235
document.querySelector('.hero-content h1').textContent = 'Welcome to HackerOS';
190236
document.querySelector('.hero-content p').textContent = 'A powerful, Debian-based operating system designed for enthusiasts and professionals.';
191237
document.querySelector('footer p').textContent = '© 2025 HackerOS. All rights reserved.';
238+
// Update wallpapers section to English if needed
239+
document.querySelector('.wallpapers-section h2').textContent = 'Download Phone Wallpapers';
240+
document.querySelectorAll('.wallpaper-item .btn').forEach(btn => btn.textContent = 'Download');
241+
document.querySelector('.download-all').textContent = 'Download All';
192242
}
243+
// Download all wallpapers
244+
const downloadAllBtn = document.querySelector('.download-all');
245+
downloadAllBtn.addEventListener('click', () => {
246+
const wallpapers = [
247+
'phone-wallpapers/wallpaper.png',
248+
'phone-wallpapers/wallpaper1.png',
249+
'phone-wallpapers/wallpaper2.png',
250+
'phone-wallpapers/wallpaper3.png',
251+
'phone-wallpapers/wallpaper4.png',
252+
'phone-wallpapers/wallpaper5.png',
253+
'phone-wallpapers/default-wallpaper.png'
254+
];
255+
wallpapers.forEach(url => {
256+
const a = document.createElement('a');
257+
a.href = url;
258+
a.download = url.split('/').pop();
259+
document.body.appendChild(a);
260+
a.click();
261+
document.body.removeChild(a);
262+
});
263+
});
193264
});
194265
</script>
195266
</head>
@@ -247,6 +318,40 @@ <h1>Witaj w HackerOS.</h1>
247318
<p>Potężny system operacyjny oparty na Debianie, zaprojektowany dla entuzjastów od cyberbezpiecznestwa, zwykłych użytkowników oraz graczy.</p>
248319
<a href="download.html" class="btn">Pobierz Teraz</a>
249320
</div>
321+
<div class="wallpapers-section">
322+
<h2>Pobierz tapety na telefon</h2>
323+
<div class="wallpapers-grid">
324+
<div class="wallpaper-item">
325+
<img src="phone-wallpapers/wallpaper.png" alt="Tapeta 1">
326+
<a href="phone-wallpapers/wallpaper.png" download class="btn">Pobierz</a>
327+
</div>
328+
<div class="wallpaper-item">
329+
<img src="phone-wallpapers/wallpaper1.png" alt="Tapeta 2">
330+
<a href="phone-wallpapers/wallpaper1.png" download class="btn">Pobierz</a>
331+
</div>
332+
<div class="wallpaper-item">
333+
<img src="phone-wallpapers/wallpaper2.png" alt="Tapeta 3">
334+
<a href="phone-wallpapers/wallpaper2.png" download class="btn">Pobierz</a>
335+
</div>
336+
<div class="wallpaper-item">
337+
<img src="phone-wallpapers/wallpaper3.png" alt="Tapeta 4">
338+
<a href="phone-wallpapers/wallpaper3.png" download class="btn">Pobierz</a>
339+
</div>
340+
<div class="wallpaper-item">
341+
<img src="phone-wallpapers/wallpaper4.png" alt="Tapeta 5">
342+
<a href="phone-wallpapers/wallpaper4.png" download class="btn">Pobierz</a>
343+
</div>
344+
<div class="wallpaper-item">
345+
<img src="phone-wallpapers/wallpaper5.png" alt="Tapeta 6">
346+
<a href="phone-wallpapers/wallpaper5.png" download class="btn">Pobierz</a>
347+
</div>
348+
<div class="wallpaper-item">
349+
<img src="phone-wallpapers/default-wallpaper.png" alt="Domyślna tapeta">
350+
<a href="phone-wallpapers/default-wallpaper.png" download class="btn">Pobierz</a>
351+
</div>
352+
</div>
353+
<button class="btn download-all">Pobierz wszystkie</button>
354+
</div>
250355
</section>
251356
<footer>
252357
<div class="footer-buttons">

0 commit comments

Comments
 (0)