Skip to content

Commit b2f7c53

Browse files
VoidArc-StudioVoidArc-Studio
authored
Create index.html
1 parent daa814f commit b2f7c53

File tree

1 file changed

+390
-0
lines changed

1 file changed

+390
-0
lines changed

‎index.html‎

Lines changed: 390 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,390 @@
1+
<!DOCTYPE html>
2+
<html lang="pl">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>HackerOS Search</title>
7+
<style>
8+
* {
9+
margin: 0;
10+
padding: 0;
11+
box-sizing: border-box;
12+
font-family: 'Courier New', Courier, monospace;
13+
}
14+
15+
body {
16+
background: linear-gradient(135deg, #1c2526 0%, #0d1117 100%);
17+
min-height: 100vh;
18+
display: flex;
19+
flex-direction: column;
20+
align-items: center;
21+
justify-content: center;
22+
color: #e0e0e0;
23+
overflow: hidden;
24+
}
25+
26+
/* Efekt cząsteczek z liniami */
27+
.particles {
28+
position: fixed;
29+
top: 0;
30+
left: 0;
31+
width: 100%;
32+
height: 100%;
33+
pointer-events: none;
34+
z-index: 1;
35+
}
36+
37+
.header {
38+
position: absolute;
39+
top: 20px;
40+
left: 20px;
41+
z-index: 10;
42+
}
43+
44+
.header img {
45+
width: 60px;
46+
height: auto;
47+
transition: transform 0.3s ease, filter 0.3s ease;
48+
}
49+
50+
.header img:hover {
51+
transform: scale(1.15) rotate(5deg);
52+
filter: brightness(1.3) drop-shadow(0 0 10px rgba(255, 255, 255, 0.4));
53+
}
54+
55+
.main-container {
56+
text-align: center;
57+
display: flex;
58+
flex-direction: column;
59+
align-items: center;
60+
gap: 35px;
61+
z-index: 10;
62+
animation: fadeIn 1.5s ease-in-out;
63+
}
64+
65+
@keyframes fadeIn {
66+
from { opacity: 0; transform: translateY(40px); }
67+
to { opacity: 1; transform: translateY(0); }
68+
}
69+
70+
.main-logo {
71+
width: 300px;
72+
height: auto;
73+
opacity: 0.95;
74+
filter: drop-shadow(0 0 25px rgba(255, 255, 255, 0.4));
75+
animation: glowPulse 4s infinite ease-in-out;
76+
}
77+
78+
@keyframes glowPulse {
79+
0%, 100% { filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.3)); }
80+
50% { filter: drop-shadow(0 0 30px rgba(255, 255, 255, 0.5)); }
81+
}
82+
83+
.search-container {
84+
position: relative;
85+
width: 100%;
86+
max-width: 850px;
87+
background: linear-gradient(145deg, #2d2d2d, #3a3a3a);
88+
border-radius: 70px;
89+
padding: 10px;
90+
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), inset 0 2px 8px rgba(255, 255, 255, 0.15);
91+
transition: box-shadow 0.4s ease, transform 0.4s ease;
92+
z-index: 10;
93+
display: flex;
94+
align-items: center;
95+
justify-content: center;
96+
}
97+
98+
.search-container:hover {
99+
box-shadow: 0 12px 35px rgba(255, 255, 255, 0.25), inset 0 2px 8px rgba(255, 255, 255, 0.2);
100+
transform: translateY(-4px);
101+
}
102+
103+
.search-form {
104+
display: flex;
105+
align-items: center;
106+
width: 100%;
107+
position: relative;
108+
}
109+
110+
.search-input {
111+
width: 100%;
112+
padding: 20px 70px 20px 30px;
113+
background: transparent;
114+
border: 3px solid #e0e0e0;
115+
border-radius: 70px;
116+
color: #ffffff;
117+
font-size: 19px;
118+
outline: none;
119+
transition: border-color 0.4s ease, box-shadow 0.4s ease, background-color 0.4s ease;
120+
}
121+
122+
.search-input:focus {
123+
border-color: #ffffff;
124+
box-shadow: 0 0 20px rgba(255, 255, 255, 0.6), inset 0 0 8px rgba(255, 255, 255, 0.3);
125+
background: rgba(255, 255, 255, 0.08);
126+
}
127+
128+
.search-input::placeholder {
129+
color: #b0b0b0;
130+
font-style: italic;
131+
transition: opacity 0.3s ease;
132+
}
133+
134+
.search-input:focus::placeholder {
135+
opacity: 0.5;
136+
}
137+
138+
.search-button {
139+
position: absolute;
140+
right: 10px;
141+
background: linear-gradient(145deg, #e0e0e0, #ffffff);
142+
border: none;
143+
border-radius: 50%;
144+
cursor: pointer;
145+
padding: 14px;
146+
transition: background 0.4s ease, transform 0.4s ease, box-shadow 0.4s ease;
147+
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
148+
}
149+
150+
.search-button:hover {
151+
background: #ffffff;
152+
transform: scale(1.25) rotate(8deg);
153+
box-shadow: 0 5px 12px rgba(255, 255, 255, 0.4);
154+
}
155+
156+
.search-button img {
157+
width: 30px;
158+
height: 30px;
159+
filter: invert(0.2);
160+
transition: filter 0.4s ease, transform 0.4s ease;
161+
}
162+
163+
.search-button:hover img {
164+
filter: invert(0);
165+
transform: rotate(-8deg);
166+
}
167+
168+
.footer {
169+
position: absolute;
170+
bottom: 15px;
171+
text-align: center;
172+
font-size: 15px;
173+
color: #b0b0b0;
174+
z-index: 10;
175+
display: flex;
176+
align-items: center;
177+
gap: 5px;
178+
font-family: 'Arial', sans-serif;
179+
}
180+
181+
.footer a {
182+
color: #58a6ff;
183+
text-decoration: none;
184+
transition: color 0.3s ease;
185+
}
186+
187+
.footer a:hover {
188+
color: #ffffff;
189+
}
190+
191+
.footer img {
192+
width: 16px;
193+
height: 16px;
194+
filter: invert(0.7);
195+
}
196+
197+
@media (max-width: 600px) {
198+
.main-logo {
199+
width: 220px;
200+
}
201+
202+
.search-container {
203+
max-width: 90%;
204+
padding: 8px;
205+
}
206+
207+
.search-input {
208+
font-size: 17px;
209+
padding: 16px 60px 16px 25px;
210+
}
211+
212+
.search-button {
213+
padding: 12px;
214+
}
215+
216+
.search-button img {
217+
width: 26px;
218+
height: 26px;
219+
}
220+
221+
.header img {
222+
width: 50px;
223+
}
224+
225+
.footer {
226+
font-size: 13px;
227+
}
228+
229+
.footer img {
230+
width: 14px;
231+
height: 14px;
232+
}
233+
}
234+
235+
@media (min-width: 1200px) {
236+
.search-container {
237+
max-width: 900px;
238+
}
239+
240+
.main-logo {
241+
width: 320px;
242+
}
243+
}
244+
</style>
245+
</head>
246+
<body>
247+
<canvas class="particles" id="particles"></canvas>
248+
<div class="header">
249+
<img src="/usr/share/HackerOS/ICONS/HackerOS.png" alt="HackerOS Logo">
250+
</div>
251+
<div class="main-container">
252+
<img class="main-logo" src="/usr/share/HackerOS/ICONS/Plymouth-Icons/watermark.png" alt="HackerOS Watermark">
253+
<div class="search-container">
254+
<form class="search-form" action="https://www.startpage.com/sp/search" method="GET">
255+
<input type="text" class="search-input" name="query" placeholder="Wyszukaj w Startpage..." required>
256+
<button type="submit" class="search-button">
257+
<img src="https://cdn-icons-png.flaticon.com/512/622/622669.png" alt="Search Icon">
258+
</button>
259+
</form>
260+
</div>
261+
</div>
262+
<div class="footer">
263+
<img src="https://cdn-icons-png.flaticon.com/512/622/622669.png" alt="Startpage Icon">
264+
Powered by <a href="https://www.startpage.com" target="_blank">Startpage</a> | HackerOS Search © 2025
265+
</div>
266+
<script>
267+
// Walidacja formularza
268+
document.querySelector('.search-form').addEventListener('submit', function(e) {
269+
const query = document.querySelector('.search-input').value.trim();
270+
if (!query) {
271+
e.preventDefault();
272+
alert('Proszę wpisać frazę wyszukiwania!');
273+
}
274+
});
275+
276+
// Animacja placeholder
277+
const placeholderText = "Wyszukaj w Startpage...";
278+
const input = document.querySelector('.search-input');
279+
let i = 0;
280+
function typePlaceholder() {
281+
if (i < placeholderText.length) {
282+
input.placeholder = placeholderText.slice(0, i + 1);
283+
i++;
284+
setTimeout(typePlaceholder, 70);
285+
} else {
286+
setTimeout(() => {
287+
i = 0;
288+
input.placeholder = "";
289+
typePlaceholder();
290+
}, 2500);
291+
}
292+
}
293+
typePlaceholder();
294+
295+
// Efekt cząsteczek z liniami
296+
const canvas = document.getElementById('particles');
297+
const ctx = canvas.getContext('2d');
298+
canvas.width = window.innerWidth;
299+
canvas.height = window.innerHeight;
300+
301+
const particlesArray = [];
302+
const numberOfParticles = 60;
303+
304+
class Particle {
305+
constructor() {
306+
this.x = Math.random() * canvas.width;
307+
this.y = Math.random() * canvas.height;
308+
this.size = Math.random() * 2 + 1;
309+
this.speedX = Math.random() * 0.4 - 0.2;
310+
this.speedY = Math.random() * 0.4 - 0.2;
311+
}
312+
update() {
313+
this.x += this.speedX;
314+
this.y += this.speedY;
315+
if (this.size > 0.2) this.size -= 0.008;
316+
}
317+
draw() {
318+
ctx.fillStyle = 'rgba(255, 255, 255, 0.4)';
319+
ctx.beginPath();
320+
ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
321+
ctx.fill();
322+
}
323+
}
324+
325+
function initParticles() {
326+
for (let i = 0; i < numberOfParticles; i++) {
327+
particlesArray.push(new Particle());
328+
}
329+
}
330+
331+
function connectParticles() {
332+
for (let i = 0; i < particlesArray.length; i++) {
333+
for (let j = i + 1; j < particlesArray.length; j++) {
334+
const dx = particlesArray[i].x - particlesArray[j].x;
335+
const dy = particlesArray[i].y - particlesArray[j].y;
336+
const distance = Math.sqrt(dx * dx + dy * dy);
337+
if (distance < 100) {
338+
ctx.strokeStyle = `rgba(255, 255, 255, ${1 - distance / 100})`;
339+
ctx.lineWidth = 0.5;
340+
ctx.beginPath();
341+
ctx.moveTo(particlesArray[i].x, particlesArray[i].y);
342+
ctx.lineTo(particlesArray[j].x, particlesArray[j].y);
343+
ctx.stroke();
344+
}
345+
}
346+
}
347+
}
348+
349+
function animateParticles() {
350+
ctx.clearRect(0, 0, canvas.width, canvas.height);
351+
for (let i = 0; i < particlesArray.length; i++) {
352+
particlesArray[i].update();
353+
particlesArray[i].draw();
354+
if (particlesArray[i].size <= 0.2) {
355+
particlesArray.splice(i, 1);
356+
particlesArray.push(new Particle());
357+
i--;
358+
}
359+
}
360+
connectParticles();
361+
requestAnimationFrame(animateParticles);
362+
}
363+
364+
initParticles();
365+
animateParticles();
366+
367+
window.addEventListener('resize', () => {
368+
canvas.width = window.innerWidth;
369+
canvas.height = window.innerHeight;
370+
});
371+
372+
// Reakcja paska wyszukiwania na ruch myszy
373+
document.addEventListener('mousemove', (e) => {
374+
const searchContainer = document.querySelector('.search-container');
375+
const rect = searchContainer.getBoundingClientRect();
376+
const centerX = rect.left + rect.width / 2;
377+
const centerY = rect.top + rect.height / 2;
378+
const maxTilt = 5;
379+
const tiltX = ((centerY - e.clientY) / centerY) * maxTilt;
380+
const tiltY = ((centerX - e.clientX) / centerX) * maxTilt;
381+
searchContainer.style.transform = `translateY(-4px) rotateX(${tiltX}deg) rotateY(${tiltY}deg)`;
382+
});
383+
384+
document.addEventListener('mouseout', () => {
385+
const searchContainer = document.querySelector('.search-container');
386+
searchContainer.style.transform = 'translateY(0) rotateX(0deg) rotateY(0deg)';
387+
});
388+
</script>
389+
</body>
390+
</html>

0 commit comments

Comments
 (0)