Skip to content

Commit 717c38c

Browse files
psalias2006psalias2006
authored
Feature/page (#24)
* page simple Co-authored-by: Panos <>
1 parent 1884c57 commit 717c38c

File tree

3 files changed

+1087
-0
lines changed

3 files changed

+1087
-0
lines changed

‎docs/.nojekyll‎

Whitespace-only changes.

‎docs/404.html‎

Lines changed: 381 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,381 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>404 - Page Not Found | GPU Hot</title>
7+
<link rel="preconnect" href="https://fonts.googleapis.com">
8+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
10+
<style>
11+
* {
12+
margin: 0;
13+
padding: 0;
14+
box-sizing: border-box;
15+
}
16+
17+
:root {
18+
--bg: #0a0a0f;
19+
--surface: #13131a;
20+
--border: rgba(255, 255, 255, 0.08);
21+
--text: #ffffff;
22+
--text-secondary: rgba(255, 255, 255, 0.7);
23+
--text-muted: rgba(255, 255, 255, 0.4);
24+
--accent: #4facfe;
25+
--accent-dark: #1e3a8a;
26+
--accent-light: #00f2fe;
27+
}
28+
29+
body {
30+
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
31+
background: var(--bg);
32+
color: var(--text);
33+
line-height: 1.6;
34+
-webkit-font-smoothing: antialiased;
35+
min-height: 100vh;
36+
display: flex;
37+
flex-direction: column;
38+
position: relative;
39+
overflow-x: hidden;
40+
}
41+
42+
/* Animated pulsing background */
43+
body::before {
44+
content: '';
45+
position: fixed;
46+
top: 0;
47+
left: 0;
48+
right: 0;
49+
bottom: 0;
50+
background:
51+
radial-gradient(circle at 20% 50%, rgba(79, 172, 254, 0.08) 0%, transparent 50%),
52+
radial-gradient(circle at 80% 50%, rgba(0, 242, 254, 0.06) 0%, transparent 50%);
53+
z-index: 0;
54+
animation: bgPulse 25s ease-in-out infinite;
55+
pointer-events: none;
56+
}
57+
58+
@keyframes bgPulse {
59+
0%, 100% {
60+
opacity: 0.4;
61+
transform: scale(1);
62+
}
63+
50% {
64+
opacity: 0.8;
65+
transform: scale(1.1);
66+
}
67+
}
68+
69+
.container {
70+
max-width: 900px;
71+
margin: 0 auto;
72+
padding: 0 2rem;
73+
flex: 1;
74+
display: flex;
75+
flex-direction: column;
76+
position: relative;
77+
z-index: 1;
78+
}
79+
80+
/* Nav */
81+
nav {
82+
border-bottom: 1px solid var(--border);
83+
padding: 1.5rem 0;
84+
}
85+
86+
.nav-content {
87+
display: flex;
88+
justify-content: space-between;
89+
align-items: center;
90+
max-width: 750px;
91+
margin: 0 auto;
92+
}
93+
94+
.logo {
95+
font-weight: 700;
96+
font-size: 1.05rem;
97+
letter-spacing: -0.3px;
98+
text-decoration: none;
99+
color: var(--text);
100+
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
101+
position: relative;
102+
}
103+
104+
.logo::after {
105+
content: '';
106+
position: absolute;
107+
bottom: -2px;
108+
left: 0;
109+
width: 0;
110+
height: 2px;
111+
background: linear-gradient(90deg, var(--accent), var(--accent-light));
112+
transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
113+
}
114+
115+
.logo:hover {
116+
color: var(--accent);
117+
transform: translateY(-1px);
118+
}
119+
120+
.logo:hover::after {
121+
width: 100%;
122+
}
123+
124+
/* Error Content */
125+
.error-content {
126+
flex: 1;
127+
display: flex;
128+
flex-direction: column;
129+
justify-content: center;
130+
align-items: center;
131+
text-align: center;
132+
max-width: 750px;
133+
margin: 0 auto;
134+
padding: 3rem 0;
135+
}
136+
137+
.error-code {
138+
font-size: 10rem;
139+
font-weight: 900;
140+
line-height: 1;
141+
letter-spacing: -8px;
142+
margin-bottom: 1.5rem;
143+
background: linear-gradient(180deg, var(--text) 0%, rgba(255,255,255,0.6) 100%);
144+
-webkit-background-clip: text;
145+
-webkit-text-fill-color: transparent;
146+
background-clip: text;
147+
position: relative;
148+
}
149+
150+
.error-code::after {
151+
content: '';
152+
position: absolute;
153+
bottom: -0.5rem;
154+
left: 50%;
155+
transform: translateX(-50%);
156+
width: 100px;
157+
height: 2px;
158+
background: linear-gradient(90deg, transparent, var(--accent), transparent);
159+
opacity: 0.5;
160+
}
161+
162+
h1 {
163+
font-size: 2.5rem;
164+
font-weight: 700;
165+
margin-bottom: 1rem;
166+
letter-spacing: -1px;
167+
}
168+
169+
p {
170+
font-size: 1.2rem;
171+
color: var(--text-secondary);
172+
margin-bottom: 2.5rem;
173+
max-width: 500px;
174+
line-height: 1.6;
175+
}
176+
177+
.btn {
178+
display: inline-flex;
179+
align-items: center;
180+
gap: 0.5rem;
181+
padding: 0.85rem 1.75rem;
182+
background: var(--text);
183+
color: var(--bg);
184+
text-decoration: none;
185+
border-radius: 6px;
186+
font-weight: 600;
187+
font-size: 0.95rem;
188+
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
189+
position: relative;
190+
overflow: hidden;
191+
}
192+
193+
.btn::before {
194+
content: '';
195+
position: absolute;
196+
top: 0;
197+
left: -100%;
198+
width: 100%;
199+
height: 100%;
200+
background: linear-gradient(90deg, transparent, rgba(79, 172, 254, 0.3), transparent);
201+
transition: left 0.6s cubic-bezier(0.4, 0, 0.2, 1);
202+
}
203+
204+
.btn:hover::before {
205+
left: 100%;
206+
}
207+
208+
.btn:hover {
209+
transform: translateY(-3px);
210+
box-shadow: 0 10px 28px rgba(255, 255, 255, 0.2);
211+
}
212+
213+
.btn:active {
214+
transform: translateY(-1px);
215+
}
216+
217+
.links {
218+
margin-top: 2rem;
219+
display: flex;
220+
gap: 2rem;
221+
}
222+
223+
.links a {
224+
color: var(--text-secondary);
225+
text-decoration: none;
226+
font-size: 0.95rem;
227+
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
228+
position: relative;
229+
padding: 0.25rem 0;
230+
}
231+
232+
.links a::after {
233+
content: '';
234+
position: absolute;
235+
bottom: 0;
236+
left: 0;
237+
width: 0;
238+
height: 1px;
239+
background: linear-gradient(90deg, var(--accent), transparent);
240+
transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
241+
}
242+
243+
.links a:hover {
244+
color: var(--text);
245+
transform: translateX(2px);
246+
}
247+
248+
.links a:hover::after {
249+
width: 100%;
250+
}
251+
252+
/* Footer */
253+
footer {
254+
border-top: 1px solid var(--border);
255+
padding: 2rem 0;
256+
}
257+
258+
.footer-content {
259+
text-align: center;
260+
color: var(--text-muted);
261+
font-size: 0.875rem;
262+
}
263+
264+
/* Animations */
265+
@keyframes fadeInUp {
266+
from {
267+
opacity: 0;
268+
transform: translateY(30px);
269+
}
270+
to {
271+
opacity: 1;
272+
transform: translateY(0);
273+
}
274+
}
275+
276+
.error-content > * {
277+
animation: fadeInUp 1s cubic-bezier(0.4, 0, 0.2, 1);
278+
}
279+
280+
.error-code {
281+
animation-delay: 0s;
282+
}
283+
284+
h1 {
285+
animation-delay: 0.1s;
286+
animation-fill-mode: both;
287+
}
288+
289+
p {
290+
animation-delay: 0.2s;
291+
animation-fill-mode: both;
292+
}
293+
294+
.btn {
295+
animation-delay: 0.3s;
296+
animation-fill-mode: both;
297+
}
298+
299+
.links {
300+
animation-delay: 0.4s;
301+
animation-fill-mode: both;
302+
}
303+
304+
/* Smooth scrolling */
305+
html {
306+
scroll-behavior: smooth;
307+
}
308+
309+
/* Responsive */
310+
@media (max-width: 768px) {
311+
.container {
312+
padding: 0 1.5rem;
313+
}
314+
315+
nav {
316+
padding: 1.25rem 0;
317+
}
318+
319+
.error-content {
320+
padding: 2rem 0;
321+
}
322+
323+
.error-code {
324+
font-size: 6rem;
325+
letter-spacing: -5px;
326+
}
327+
328+
h1 {
329+
font-size: 1.75rem;
330+
}
331+
332+
p {
333+
font-size: 1rem;
334+
}
335+
336+
.btn {
337+
padding: 0.75rem 1.5rem;
338+
font-size: 0.9rem;
339+
}
340+
341+
.links {
342+
flex-direction: column;
343+
gap: 1rem;
344+
margin-top: 1.5rem;
345+
}
346+
}
347+
</style>
348+
</head>
349+
<body>
350+
<div class="container">
351+
<!-- Nav -->
352+
<nav>
353+
<div class="nav-content">
354+
<a href="/gpu-hot/" class="logo">GPU Hot</a>
355+
</div>
356+
</nav>
357+
358+
<!-- Error Content -->
359+
<div class="error-content">
360+
<div class="error-code">404</div>
361+
<h1>Page Not Found</h1>
362+
<p>This page doesn't exist. Even the GPU couldn't compute this one.</p>
363+
<a href="/gpu-hot/" class="btn">Back to Home</a>
364+
<div class="links">
365+
<a href="https://github.com/psalias2006/gpu-hot">GitHub</a>
366+
<a href="https://github.com/psalias2006/gpu-hot/issues">Report Issue</a>
367+
</div>
368+
</div>
369+
</div>
370+
371+
<!-- Footer -->
372+
<footer>
373+
<div class="container">
374+
<div class="footer-content">
375+
Open source. Built for developers.
376+
</div>
377+
</div>
378+
</footer>
379+
</body>
380+
</html>
381+

0 commit comments

Comments
 (0)