mirror of
https://github.com/mileswolfallen2/miles-web.git
synced 2026-09-08 11:23:17 +00:00
Add uses page and interactive features including toast notifications, cursor effects, and theme toggle
This commit is contained in:
@@ -8,7 +8,7 @@
|
||||
<link rel="canonical" href="https://milesallen.site/404.html">
|
||||
<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.png">
|
||||
<link rel="icon" type="image/svg+xml" href="favicon.svg">
|
||||
<style>
|
||||
:root{
|
||||
--bg:#000;--text:#fff;--muted:#666;--accent:#FF3D9A;--tape:#FFC93C;--red:#FF0000;
|
||||
@@ -72,6 +72,16 @@
|
||||
}
|
||||
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;}}
|
||||
</style>
|
||||
<script type="application/ld+json">
|
||||
{
|
||||
"@context": "https://schema.org",
|
||||
"@type": "BreadcrumbList",
|
||||
"itemListElement": [
|
||||
{ "@type": "ListItem", "position": 1, "name": "Home", "item": "https://milesallen.site/" },
|
||||
{ "@type": "ListItem", "position": 2, "name": "404", "item": "https://milesallen.site/404.html" }
|
||||
]
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="cursor-dot" id="cursorDot"></div>
|
||||
@@ -88,37 +98,16 @@
|
||||
<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');});
|
||||
});
|
||||
|
||||
var seq=['ArrowUp','ArrowUp','ArrowDown','ArrowDown','ArrowLeft','ArrowRight','ArrowLeft','ArrowRight','b','a'];
|
||||
var pos=0;
|
||||
window.addEventListener('keydown',function(e){
|
||||
var key=e.key.length===1?e.key.toLowerCase():e.key;
|
||||
if(key===seq[pos]){pos++;if(pos===seq.length){pos=0;revealCursor();}}
|
||||
else{pos=(key===seq[0])?1:0;}
|
||||
});
|
||||
function revealCursor(){
|
||||
document.body.style.cursor='auto';
|
||||
var style=document.createElement('style');style.id='konami-cursor';
|
||||
style.textContent='*{cursor:auto !important;}';
|
||||
document.head.appendChild(style);
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
<script src="projects/script.js"></script>
|
||||
<footer style="text-align:center;padding:40px 24px;font-family:var(--font-mono);font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;position:relative;z-index:20;">
|
||||
<div class="footer-links" style="margin-bottom: 12px;">
|
||||
<a href="uses.html" style="color:var(--muted);text-decoration:none;">Uses</a>
|
||||
<span style="color:var(--muted);margin:0 8px;">·</span>
|
||||
<a href="now.html" style="color:var(--muted);text-decoration:none;">Now</a>
|
||||
<span style="color:var(--muted);margin:0 8px;">·</span>
|
||||
<a href="colophon.html" style="color:var(--muted);text-decoration:none;">Colophon</a>
|
||||
</div>
|
||||
Built by Miles · 2026 · Powered by too much coffee and the Konami code
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user