miles/miles-web
1
0
Fork 0
mirror of https://github.com/mileswolfallen2/miles-web.git synced 2026-09-08 11:23:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

added 404

Browse Source
This commit is contained in:
miles
2026-07-26 03:25:10 -05:00
parent ad83aa6795
commit e99c5a7fb8
1 changed files with 108 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
404.html
+108
View File
@@ -0,0 +1,108 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>404 | Miles Wolf Allen</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Space+Mono:wght@400;700&family=Inter:wght@400;500;600;800&display=swap" rel="stylesheet">
<link rel="icon" type="image/svg+xml" href="favicon.svg">
<style>
:root{
--bg:#000;--text:#fff;--muted:#666;--accent:#FF3D9A;--tape:#FFC93C;--red:#FF0000;
--font-pixel:'Press Start 2P',monospace;--font-mono:'Space Mono',monospace;--font-body:'Inter',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box;}
body{background:var(--bg);color:var(--text);font-family:var(--font-body);overflow:hidden;height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;}
body::after{
content:'';position:fixed;inset:0;pointer-events:none;z-index:9998;
background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,0.15) 2px,rgba(0,0,0,0.15) 4px);
}
.cursor-dot,.cursor-ring{position:fixed;top:0;left:0;pointer-events:none;z-index:99999;border-radius:50%;}
.cursor-dot{width:6px;height:6px;background:var(--accent);transform:translate(-50%,-50%);transition:width .2s,height .2s;}
.cursor-ring{width:36px;height:36px;border:2px solid var(--accent);transform:translate(-50%,-50%);transition:width .3s,height .3s,opacity .3s;opacity:.5;}
.cursor-dot.hover{width:10px;height:10px;background:var(--tape);}
.cursor-ring.hover{width:50px;height:50px;border-color:var(--tape);opacity:.8;}
@media(max-width:720px){.cursor-dot,.cursor-ring{display:none;}}
@media(hover:none){.cursor-dot,.cursor-ring{display:none;}}
.code{
font-family:var(--font-pixel);font-size:clamp(80px,20vw,200px);font-weight:700;line-height:1;
color:var(--text);text-shadow:6px 6px 0 var(--accent),-3px -3px 0 var(--tape);
animation:glitch 3s ease-in-out infinite;transform:rotate(-3deg);margin-bottom:20px;
}
@keyframes glitch{
0%,90%,100%{text-shadow:6px 6px 0 var(--accent),-3px -3px 0 var(--tape);}
92%{text-shadow:6px 6px 0 var(--red),-3px -3px 0 var(--accent);transform:rotate(-3deg) translateX(3px);}
94%{text-shadow:6px 6px 0 var(--accent),-3px -3px 0 var(--red);transform:rotate(-3deg) translateX(-3px);}
96%{text-shadow:6px 6px 0 var(--tape),-3px -3px 0 var(--accent);transform:rotate(-3deg) translateX(2px);}
}
.msg{
font-family:var(--font-mono);font-size:clamp(12px,2.5vw,16px);color:var(--muted);
text-align:center;max-width:500px;line-height:1.8;margin-bottom:40px;transform:rotate(1deg);
}
.actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;transform:rotate(-0.5deg);}
.btn{
font-family:var(--font-mono);font-weight:700;font-size:12px;padding:14px 28px;
border:2px solid var(--text);text-transform:uppercase;letter-spacing:.04em;
text-decoration:none;transition:all .2s;display:inline-block;
}
.btn-home{background:var(--text);color:#000;}
.btn-back{background:transparent;color:var(--text);}
.btn:hover{transform:translateY(-3px) rotate(-1deg);filter:brightness(1.1);}
.btn:active{transform:translateY(0) scale(.98);}
.tape{
position:fixed;top:50%;left:-5%;right:-5%;height:28px;
background:var(--tape);transform:rotate(-5deg);z-index:10;display:flex;align-items:center;
justify-content:center;font-family:var(--font-pixel);font-size:9px;color:#000;
letter-spacing:.1em;text-transform:uppercase;opacity:.15;pointer-events:none;
}
.tape:nth-child(2){top:30%;transform:rotate(3deg);opacity:.08;}
.tape:nth-child(3){top:70%;transform:rotate(-2deg);opacity:.1;}
@media(max-width:720px){
.actions{flex-direction:column;width:80%;}
.btn{text-align:center;}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;}}
</style>
</head>
<body>
<div class="cursor-dot" id="cursorDot"></div>
<div class="cursor-ring" id="cursorRing"></div>
<div class="tape">PAGE NOT FOUND * PAGE NOT FOUND * PAGE NOT FOUND * PAGE NOT FOUND * PAGE NOT FOUND *</div>
<div class="tape">404 * 404 * 404 * 404 * 404 * 404 * 404 * 404 *</div>
<div class="tape">DOES NOT EXIST * DOES NOT EXIST * DOES NOT EXIST * DOES NOT EXIST *</div>
<div class="code">404</div>
<p class="msg">This page doesn't exist. Either the URL is wrong or I never built it. Probably both.</p>
<div class="actions">
<a href="index.html" class="btn btn-home">Go Home</a>
<a href="javascript:history.back()" class="btn btn-back">Go Back</a>
</div>
<script>
(function(){
var dot=document.getElementById('cursorDot');
var ring=document.getElementById('cursorRing');
if(!dot||!ring)return;
var mx=0,my=0,rx=0,ry=0;
document.addEventListener('mousemove',function(e){mx=e.clientX;my=e.clientY;dot.style.left=mx+'px';dot.style.top=my+'px';});
(function loop(){
rx+=(mx-rx)*0.15;ry+=(my-ry)*0.15;
ring.style.left=rx+'px';ring.style.top=ry+'px';
requestAnimationFrame(loop);
})();
document.querySelectorAll('a,button').forEach(function(el){
el.addEventListener('mouseenter',function(){dot.classList.add('hover');ring.classList.add('hover');});
el.addEventListener('mouseleave',function(){dot.classList.remove('hover');ring.classList.remove('hover');});
});
})();
</script>
</body>
</html>