Skip to content

Commit 02cca6c

Browse files
SkyzerFlyzerskyzerflyzerclaude
authored
Feature/p2p enhancements (#3)
* P2P page enhancements: rules, circuit board hero, countdown, data-driven podium, JetBrains Mono Add CTF rules accordion section, circuit board trace canvas animation for hero, countdown timer to event date, data-driven podium from JSON, and swap font from Space Grotesk to JetBrains Mono. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * Add 404 page Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> --------- Co-authored-by: skyzerflyzer <skyzerflyzer@skyzer.dev> Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
1 parent 822f612 commit 02cca6c

6 files changed

Lines changed: 1150 additions & 210 deletions

File tree

‎404.html‎

Lines changed: 185 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,185 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
<title>404 — DMU Hackers</title>
8+
<meta name="robots" content="noindex">
9+
<link rel="preconnect" href="https://fonts.googleapis.com">
10+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
11+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
12+
<link rel="stylesheet" href="css/main.css">
13+
<style>
14+
body { overflow: hidden; }
15+
16+
.error-page {
17+
position: relative;
18+
min-height: 100vh;
19+
display: flex;
20+
align-items: center;
21+
justify-content: center;
22+
overflow: hidden;
23+
}
24+
25+
.error-page__bg {
26+
position: absolute;
27+
inset: 0;
28+
background:
29+
radial-gradient(ellipse 60% 50% at 50% 30%, rgba(200, 16, 46, .1) 0%, transparent 60%),
30+
linear-gradient(rgba(200, 16, 46, 0.025) 1px, transparent 1px),
31+
linear-gradient(90deg, rgba(200, 16, 46, 0.025) 1px, transparent 1px);
32+
background-size: 100% 100%, 48px 48px, 48px 48px;
33+
pointer-events: none;
34+
animation: heroBreathe 10s ease-in-out infinite;
35+
}
36+
37+
.error-page__content {
38+
position: relative;
39+
text-align: center;
40+
padding: 24px;
41+
max-width: 600px;
42+
}
43+
44+
/* Glitch 404 */
45+
.error-page__code {
46+
position: relative;
47+
font-family: var(--font-display);
48+
font-size: clamp(7rem, 22vw, 14rem);
49+
font-weight: 700;
50+
color: var(--text);
51+
letter-spacing: .1em;
52+
line-height: 1;
53+
margin-bottom: 24px;
54+
text-shadow: 0 0 40px var(--accent-glow);
55+
}
56+
57+
.error-page__code::before,
58+
.error-page__code::after {
59+
content: attr(data-text);
60+
position: absolute;
61+
top: 0;
62+
left: 0;
63+
width: 100%;
64+
height: 100%;
65+
pointer-events: none;
66+
}
67+
68+
.error-page__code::before {
69+
color: var(--accent);
70+
z-index: -1;
71+
animation: glitch-1 5s infinite linear;
72+
}
73+
74+
.error-page__code::after {
75+
color: var(--cyan);
76+
z-index: -1;
77+
animation: glitch-2 5s infinite linear;
78+
}
79+
80+
@keyframes glitch-1 {
81+
0%, 82%, 100% { clip-path: inset(0); transform: translate(0); }
82+
84% { clip-path: inset(20% 0 60% 0); transform: translate(-4px, -2px); }
83+
86% { clip-path: inset(60% 0 10% 0); transform: translate(3px, 1px); }
84+
88% { clip-path: inset(40% 0 30% 0); transform: translate(-2px, 2px); }
85+
90% { clip-path: inset(0); transform: translate(0); }
86+
}
87+
88+
@keyframes glitch-2 {
89+
0%, 86%, 100% { clip-path: inset(0); transform: translate(0); }
90+
88% { clip-path: inset(70% 0 5% 0); transform: translate(4px, 2px); }
91+
90% { clip-path: inset(10% 0 70% 0); transform: translate(-3px, -1px); }
92+
92% { clip-path: inset(30% 0 40% 0); transform: translate(2px, -2px); }
93+
94% { clip-path: inset(0); transform: translate(0); }
94+
}
95+
96+
/* Terminal lines */
97+
.error-page__terminal {
98+
margin-bottom: 40px;
99+
}
100+
101+
.error-page__terminal p {
102+
font-family: var(--font-mono);
103+
font-size: .82rem;
104+
color: var(--text-muted);
105+
line-height: 2;
106+
letter-spacing: .02em;
107+
opacity: 0;
108+
animation: terminalReveal .4s ease forwards;
109+
}
110+
111+
.error-page__terminal p span {
112+
color: var(--accent);
113+
}
114+
115+
.error-page__terminal p:nth-child(1) { animation-delay: .4s; }
116+
.error-page__terminal p:nth-child(2) { animation-delay: .8s; }
117+
.error-page__terminal p:nth-child(3) { animation-delay: 1.3s; }
118+
.error-page__terminal p:nth-child(4) { animation-delay: 1.7s; }
119+
120+
@keyframes terminalReveal {
121+
from { opacity: 0; transform: translateX(-8px); }
122+
to { opacity: 1; transform: translateX(0); }
123+
}
124+
125+
/* Buttons */
126+
.error-page__actions {
127+
display: flex;
128+
gap: 14px;
129+
justify-content: center;
130+
flex-wrap: wrap;
131+
opacity: 0;
132+
animation: terminalReveal .4s ease 2.2s forwards;
133+
}
134+
135+
/* Blinking cursor */
136+
.error-page__cursor {
137+
display: inline-block;
138+
width: 8px;
139+
height: 1em;
140+
background: var(--accent);
141+
margin-left: 4px;
142+
vertical-align: text-bottom;
143+
animation: cursorBlink .8s step-end infinite;
144+
}
145+
146+
@keyframes cursorBlink {
147+
0%, 100% { opacity: 1; }
148+
50% { opacity: 0; }
149+
}
150+
151+
@media (prefers-reduced-motion: reduce) {
152+
.error-page__code::before,
153+
.error-page__code::after { animation: none; clip-path: none; transform: none; opacity: 0; }
154+
.error-page__terminal p { opacity: 1; animation: none; }
155+
.error-page__actions { opacity: 1; animation: none; }
156+
.error-page__cursor { animation: none; }
157+
.error-page__bg { animation: none; }
158+
}
159+
160+
@media (max-width: 480px) {
161+
.error-page__terminal p { font-size: .72rem; }
162+
}
163+
</style>
164+
</head>
165+
166+
<body>
167+
<div class="error-page">
168+
<div class="error-page__bg"></div>
169+
<div class="error-page__content">
170+
<h1 class="error-page__code" data-text="404">404</h1>
171+
<div class="error-page__terminal">
172+
<p><span>&gt;</span> INTRUSION DETECTED</p>
173+
<p><span>&gt;</span> ERROR 0x194: RESOURCE NOT FOUND</p>
174+
<p><span>&gt;</span> The page you requested has been pwned.</p>
175+
<p><span>&gt;</span> Or maybe it never existed.<span class="error-page__cursor"></span></p>
176+
</div>
177+
<div class="error-page__actions">
178+
<a href="/" class="btn btn--primary"><i class="fas fa-terminal"></i> Return to Base</a>
179+
<a href="https://discord.gg/Vvrk4kK" class="btn btn--ghost" target="_blank"><i class="fab fa-discord"></i> Report to Discord</a>
180+
</div>
181+
</div>
182+
</div>
183+
</body>
184+
185+
</html>

0 commit comments

Comments
 (0)