-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy path404.html
More file actions
237 lines (211 loc) · 11.5 KB
/
404.html
File metadata and controls
237 lines (211 loc) · 11.5 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>404 — Page Not Found</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: #f5f0e8;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
}
#kilt-man { width: 340px; height: auto; }
#kilt-man .tartan-fill { transition: fill 0.5s ease; }
p { font-size: 1.2rem; color: #5a4a3a; margin-top: 0.6rem; }
a {
margin-top: 1em;
padding: 0.5em 1.6em;
color: #2a1a0a;
font-size: 1rem;
text-decoration: none;
border: 2px solid #2a1a0a;
border-radius: 6px;
transition: background 0.2s;
}
a:hover { background: rgba(0,0,0,0.08); }
/* ── Theme toggle button ─────────────────────────────── */
.theme-toggle {
position: fixed;
top: 1rem;
right: 1rem;
z-index: 1000;
background: rgba(44,24,16,0.08);
border: 2px solid rgba(139,119,75,0.3);
border-radius: 50%;
width: 44px;
height: 44px;
cursor: pointer;
font-size: 1.4rem;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.3s, border-color 0.3s, transform 0.2s;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.theme-toggle:hover {
background: rgba(44,24,16,0.15);
border-color: rgba(139,119,75,0.5);
transform: scale(1.1);
}
.theme-toggle:active { transform: scale(0.95); }
.theme-toggle .icon-sun { display: inline; }
.theme-toggle .icon-moon { display: none; }
.dark-mode .theme-toggle {
background: rgba(240,232,208,0.1);
border-color: rgba(107,82,64,0.5);
}
.dark-mode .theme-toggle:hover {
background: rgba(240,232,208,0.2);
border-color: rgba(224,112,64,0.6);
}
.dark-mode .theme-toggle .icon-sun { display: none; }
.dark-mode .theme-toggle .icon-moon { display: inline; }
/* ── Dark mode ────────────────────────────────────────── */
body.dark-mode {
background: #1a1a2e;
}
body.dark-mode p { color: #b5a78a; }
body.dark-mode a { color: #e0d8c0; border-color: #6b5240; }
body.dark-mode a:hover { background: rgba(255,255,255,0.08); border-color: #e07040; color: #e07040; }
</style>
</head>
<body>
<button class="theme-toggle" id="theme-toggle" aria-label="Toggle dark mode" title="Toggle light/dark mode">
<span class="icon-sun">☀️</span>
<span class="icon-moon">🌙</span>
</button>
<svg id="kilt-man" viewBox="0 0 400 500" xmlns="http://www.w3.org/2000/svg">
<defs>
<pattern id="tartan" width="32" height="32" patternUnits="userSpaceOnUse" patternTransform="rotate(2)">
<rect width="32" height="32" class="tartan-fill" id="t-base"/>
<rect x="0" width="7" height="32" class="tartan-fill" id="t-v1" opacity="0.75"/>
<rect x="16" width="3" height="32" class="tartan-fill" id="t-v2" opacity="0.5"/>
<rect x="26" width="1.5" height="32" class="tartan-fill" id="t-v3" opacity="0.4"/>
<rect y="0" width="32" height="7" class="tartan-fill" id="t-h1" opacity="0.55"/>
<rect y="16" width="32" height="3" class="tartan-fill" id="t-h2" opacity="0.4"/>
<rect y="26" width="32" height="1.5" class="tartan-fill" id="t-h3" opacity="0.35"/>
</pattern>
<filter id="drop-shadow">
<feDropShadow dx="1" dy="2" stdDeviation="2" flood-color="#000" flood-opacity="0.15"/>
</filter>
</defs>
<!-- Shirt bottom peeking out -->
<rect x="160" y="0" width="80" height="16" rx="4" fill="#f8f8f5"/>
<!-- Belt -->
<rect x="148" y="16" width="104" height="24" rx="3" fill="#3a2518"/>
<rect x="148" y="16" width="104" height="5" rx="2" fill="#4a3528" opacity="0.4"/>
<rect x="190" y="19" width="20" height="18" rx="2" fill="#c8b070" stroke="#8a7040" stroke-width="1"/>
<rect x="197" y="22" width="6" height="12" rx="1" fill="#3a2518"/>
<!-- Kilt -->
<polygon points="148,40 252,40 280,232 120,232" fill="url(#tartan)"/>
<!-- Pleat folds -->
<line x1="170" y1="40" x2="148" y2="232" stroke="rgba(0,0,0,0.1)" stroke-width="1.5"/>
<line x1="188" y1="40" x2="174" y2="232" stroke="rgba(0,0,0,0.1)" stroke-width="1.5"/>
<line x1="200" y1="40" x2="200" y2="232" stroke="rgba(0,0,0,0.08)" stroke-width="1.5"/>
<line x1="212" y1="40" x2="226" y2="232" stroke="rgba(0,0,0,0.1)" stroke-width="1.5"/>
<line x1="230" y1="40" x2="252" y2="232" stroke="rgba(0,0,0,0.1)" stroke-width="1.5"/>
<!-- Kilt hem shadow -->
<line x1="124" y1="232" x2="276" y2="232" stroke="rgba(0,0,0,0.15)" stroke-width="2.5"/>
<!-- Sporran -->
<rect x="184" y="92" width="32" height="8" rx="3" fill="#c8b070"/>
<ellipse cx="200" cy="122" rx="22" ry="28" fill="#1a0e04"/>
<ellipse cx="200" cy="116" rx="18" ry="16" fill="#2a1a0a"/>
<line x1="192" y1="126" x2="189" y2="148" stroke="#c8b070" stroke-width="1.5" stroke-linecap="round"/>
<line x1="200" y1="128" x2="200" y2="152" stroke="#c8b070" stroke-width="1.5" stroke-linecap="round"/>
<line x1="208" y1="126" x2="211" y2="148" stroke="#c8b070" stroke-width="1.5" stroke-linecap="round"/>
<!-- Left thigh (skin, angled outward in squat) -->
<path d="M125,225 C100,262 70,298 44,332 C40,348 58,354 70,344 C92,312 114,270 150,232 Z" fill="#d4a574"/>
<ellipse cx="58" cy="330" rx="10" ry="8" fill="#dbb08a" opacity="0.4" transform="rotate(-15,58,330)"/>
<!-- Right thigh (skin, angled outward in squat) -->
<path d="M275,225 C300,262 330,298 356,332 C360,348 342,354 330,344 C308,312 286,270 250,232 Z" fill="#d4a574"/>
<ellipse cx="342" cy="330" rx="10" ry="8" fill="#dbb08a" opacity="0.4" transform="rotate(15,342,330)"/>
<!-- Left sock -->
<path d="M40,338 C34,368 32,402 44,442 L74,442 C74,406 76,370 72,342 Z" fill="#f5f5f0" stroke="#ddd8d0" stroke-width="1"/>
<path d="M40,338 Q44,348 56,350 Q68,348 72,342 Q68,346 56,347 Q44,346 40,338 Z" fill="#e8e4dc"/>
<line x1="38" y1="360" x2="73" y2="358" stroke="#e8e4dc" stroke-width="0.8"/>
<line x1="36" y1="380" x2="74" y2="378" stroke="#e8e4dc" stroke-width="0.8"/>
<line x1="35" y1="400" x2="74" y2="398" stroke="#e8e4dc" stroke-width="0.8"/>
<line x1="37" y1="420" x2="74" y2="418" stroke="#e8e4dc" stroke-width="0.8"/>
<!-- Sgian-dubh in left sock -->
<rect x="68" y="340" width="5" height="16" rx="1.5" fill="#2a1a0a" transform="rotate(5,70,348)"/>
<rect x="69" y="338" width="3" height="5" rx="1" fill="#c8b070" transform="rotate(5,70,340)"/>
<!-- Right sock -->
<path d="M328,342 C324,370 326,406 338,442 L368,442 C378,406 380,370 374,338 Z" fill="#f5f5f0" stroke="#ddd8d0" stroke-width="1"/>
<path d="M374,338 Q370,348 358,350 Q346,348 328,342 Q346,346 358,347 Q370,346 374,338 Z" fill="#e8e4dc"/>
<line x1="330" y1="362" x2="376" y2="360" stroke="#e8e4dc" stroke-width="0.8"/>
<line x1="330" y1="382" x2="376" y2="380" stroke="#e8e4dc" stroke-width="0.8"/>
<line x1="332" y1="402" x2="374" y2="400" stroke="#e8e4dc" stroke-width="0.8"/>
<line x1="334" y1="422" x2="372" y2="420" stroke="#e8e4dc" stroke-width="0.8"/>
<!-- Left shoe -->
<path d="M18,438 L80,438 Q90,440 90,450 L88,462 Q86,472 76,472 L22,472 Q12,472 12,462 L14,450 Q16,440 22,438 Z" fill="#2a1508"/>
<ellipse cx="52" cy="445" rx="24" ry="4" fill="#3a2518" opacity="0.5"/>
<path d="M28,450 Q38,444 48,450" stroke="#4a3528" stroke-width="1" fill="none"/>
<path d="M48,450 Q58,444 68,450" stroke="#4a3528" stroke-width="1" fill="none"/>
<rect x="12" y="468" width="78" height="4" rx="2" fill="#1a0a00"/>
<!-- Right shoe -->
<path d="M320,438 L382,438 Q392,440 392,450 L390,462 Q388,472 378,472 L324,472 Q314,472 314,462 L316,450 Q318,440 324,438 Z" fill="#2a1508"/>
<ellipse cx="354" cy="445" rx="24" ry="4" fill="#3a2518" opacity="0.5"/>
<path d="M332,450 Q342,444 352,450" stroke="#4a3528" stroke-width="1" fill="none"/>
<path d="M352,450 Q362,444 372,450" stroke="#4a3528" stroke-width="1" fill="none"/>
<rect x="314" y="468" width="78" height="4" rx="2" fill="#1a0a00"/>
<!-- Stink lines rising from under kilt -->
<path d="M182,268 C179,256 184,246 181,234" stroke="#9a8a6a" stroke-width="1.5" fill="none" opacity="0.18" stroke-linecap="round"/>
<path d="M200,264 C197,250 203,240 200,228" stroke="#9a8a6a" stroke-width="1.5" fill="none" opacity="0.14" stroke-linecap="round"/>
<path d="M218,268 C215,256 220,246 217,234" stroke="#9a8a6a" stroke-width="1.5" fill="none" opacity="0.18" stroke-linecap="round"/>
<!-- Motion lines (404 dropping) -->
<line x1="172" y1="244" x2="172" y2="258" stroke="#9a8a6a" stroke-width="1.5" opacity="0.18" stroke-linecap="round"/>
<line x1="200" y1="240" x2="200" y2="256" stroke="#9a8a6a" stroke-width="1.5" opacity="0.14" stroke-linecap="round"/>
<line x1="228" y1="242" x2="228" y2="258" stroke="#9a8a6a" stroke-width="1.5" opacity="0.18" stroke-linecap="round"/>
<!-- 404 tumbling out from under the kilt -->
<g filter="url(#drop-shadow)">
<text x="158" y="302" font-family="Georgia, 'Times New Roman', serif" font-size="54" font-weight="900" fill="#5a4030" transform="rotate(-10,158,302)">4</text>
<text x="188" y="320" font-family="Georgia, 'Times New Roman', serif" font-size="54" font-weight="900" fill="#5a4030" transform="rotate(4,188,320)">0</text>
<text x="222" y="308" font-family="Georgia, 'Times New Roman', serif" font-size="54" font-weight="900" fill="#5a4030" transform="rotate(12,222,308)">4</text>
<animateTransform attributeName="transform" type="translate" values="0,0;0,3;0,0" dur="2s" repeatCount="indefinite"/>
</g>
<!-- Ground shadow -->
<ellipse cx="200" cy="478" rx="200" ry="10" fill="rgba(0,0,0,0.06)"/>
</svg>
<p>Page not found</p>
<a href="https://leereilly.net/dev-tartan">← Home</a>
<script>
function randHSL(s, lMin, lMax) {
const h = Math.floor(Math.random() * 360);
const l = lMin + Math.floor(Math.random() * (lMax - lMin));
return `hsl(${h}, ${s}%, ${l}%)`;
}
function changeTartan() {
const base = randHSL(55, 25, 45);
const stripe1 = randHSL(60, 20, 40);
const stripe2 = randHSL(50, 50, 70);
document.getElementById('t-base').setAttribute('fill', base);
document.getElementById('t-v1').setAttribute('fill', stripe1);
document.getElementById('t-h1').setAttribute('fill', stripe1);
document.getElementById('t-v2').setAttribute('fill', stripe2);
document.getElementById('t-h2').setAttribute('fill', stripe2);
document.getElementById('t-v3').setAttribute('fill', stripe1);
document.getElementById('t-h3').setAttribute('fill', stripe1);
}
changeTartan();
setInterval(changeTartan, 1000);
// Theme toggle — syncs with homepage preference
(function() {
const toggle = document.getElementById('theme-toggle');
const stored = localStorage.getItem('dev-tartan-theme');
if (stored === 'dark') document.body.classList.add('dark-mode');
toggle.addEventListener('click', () => {
document.body.classList.toggle('dark-mode');
const isDark = document.body.classList.contains('dark-mode');
localStorage.setItem('dev-tartan-theme', isDark ? 'dark' : 'light');
});
})();
</script>
</body>
</html>