-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
1 lines (1 loc) · 14.3 KB
/
index.html
File metadata and controls
1 lines (1 loc) · 14.3 KB
1
<!DOCTYPE html><html class="dark" lang="en"><head><meta charset="utf-8"><link href="/favicon.ico" rel="icon"><link href="/favicon.svg" rel="icon" type="image/svg+xml"><meta content="width=device-width,initial-scale=1" name="viewport"><meta content="#000000" name="theme-color"><link href="/rss.xml" rel="alternate" type="application/rss+xml" title="Fezcodex RSS Feed"><meta content="codex by fezcode..." name="description"><meta content="website" property="og:type"><meta content="https://fezcode.com/" property="og:url"><meta content="Fezcodex - Personal Blog and Projects" property="og:title"><meta content="Discover logs, posts, projects, and stories from Fezcode." property="og:description"><meta content="/images/asset/ogtitle.png" property="og:image"><meta content="summary_large_image" name="twitter:card"><meta content="https://fezcode.com/" name="twitter:url"><meta content="Fezcodex - Personal Blog and Projects" name="twitter:title"><meta content="Discover logs, posts, projects, and stories from Fezcode." name="twitter:description"><meta content="/images/asset/ogtitle.png" name="twitter:image"><link href="/logo192.png" rel="apple-touch-icon"><link href="/manifest.json" rel="manifest"><link href="https://fonts.googleapis.com" rel="preconnect"><link href="https://fonts.gstatic.com" rel="preconnect" crossorigin=""><link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&family=Space+Mono:wght@400;700&display=swap" rel="stylesheet"><link href="https://fonts.googleapis.com/css2?family=Arvo&family=Inter&family=Playfair+Display:wght@400;500;600;700;800;900&display=swap" rel="stylesheet"><link href="https://fonts.googleapis.com/css2?family=Syne:wght@700;800&family=Outfit:wght@300;400;500;600&display=swap" rel="stylesheet"><link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet"><link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Instrument+Sans:ital,wght@0,400..700;1,400..700&family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap" rel="stylesheet"><link href="https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&display=swap" rel="stylesheet"><title>Swat Tactics | Fezcodex</title><title>fezcodex</title><script defer src="/static/js/main.87f8d95f.js"></script><link href="/static/css/main.c666da2c.css" rel="stylesheet"><link href="https://fonts.googleapis.com" rel="preconnect"><link href="https://fonts.gstatic.com" rel="preconnect"><link href="https://github.com" rel="preconnect"><link href="https://release-assets.githubusercontent.com" rel="preconnect"><meta content="Swat Tactics is a high-stakes strategic encounter game where precision and planning are the keys to victory." name="description"><meta content="React 19, TypeScript, Three.js, Rapier Physics, Zustand, Tailwind CSS 4" name="keywords"><meta content="Swat Tactics | Fezcodex" property="og:title"><meta content="Swat Tactics is a high-stakes strategic encounter game where precision and planning are the keys to victory." property="og:description"><meta content="https://raw.githubusercontent.com/fezcode/Swat-Tactics/main/branding/banner.png" property="og:image"><meta content="https://fezcode.com/projects/swat-tactics/" property="og:url"><meta content="website" property="og:type"><meta content="Fezcodex" property="og:site_name"><meta content="https://raw.githubusercontent.com/fezcode/Swat-Tactics/main/branding/banner.png" property="og:image:secure_url"><meta content="summary_large_image" name="twitter:card"><meta content="Swat Tactics | Fezcodex" name="twitter:title"><meta content="Swat Tactics is a high-stakes strategic encounter game where precision and planning are the keys to victory." name="twitter:description"><meta content="https://raw.githubusercontent.com/fezcode/Swat-Tactics/main/branding/banner.png" name="twitter:image"><meta content="https://fezcode.com/projects/swat-tactics/" name="twitter:url"><link href="https://fezcode.com/projects/swat-tactics/" rel="canonical"></head><body class="bg-slate-950" style="cursor:default;user-select:auto"><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"><div class="bg-emerald-600 text-white relative z-[100] border-b-2 border-black selection:bg-white selection:text-black" style="height:auto;opacity:1"><div class="max-w-7xl mx-auto px-4 py-3 flex items-center justify-between gap-4"><div class="flex items-center gap-3 flex-1"><span class="shrink-0"><svg fill="currentColor" height="20" viewBox="0 0 256 256" width="20" xmlns="http://www.w3.org/2000/svg"><path d="M108,84a16,16,0,1,1,16,16A16,16,0,0,1,108,84Zm128,44A108,108,0,1,1,128,20,108.12,108.12,0,0,1,236,128Zm-24,0a84,84,0,1,0-84,84A84.09,84.09,0,0,0,212,128Zm-72,36.68V132a20,20,0,0,0-20-20,12,12,0,0,0-4,23.32V168a20,20,0,0,0,20,20,12,12,0,0,0,4-23.32Z"></path></svg></span><p class="font-mono text-xs md:text-sm font-black uppercase tracking-widest leading-tight">CLIMB THE TALL BUILDING 0 IS ONLINE: BUILD YOUR DECK AND CLIMB. ACCESS AT /CLIMB-THE-TALL-BUILDING-0.</p><a class="shrink-0 inline-flex items-center gap-1 bg-black/20 hover:bg-black/40 px-3 py-1 rounded-sm border border-white/20 transition-all font-bold text-[10px] uppercase" href="https://fezcode.com/climb-the-tall-building-0/">Play Climb the Tall Building 0<svg fill="currentColor" height="12" viewBox="0 0 256 256" width="12" xmlns="http://www.w3.org/2000/svg"><path d="M224.49,136.49l-72,72a12,12,0,0,1-17-17L187,140H40a12,12,0,0,1,0-24H187L135.51,64.48a12,12,0,0,1,17-17l72,72A12,12,0,0,1,224.49,136.49Z"></path></svg></a></div><button class="p-1 hover:bg-black/20 rounded-sm transition-colors shrink-0" aria-label="Dismiss"><svg fill="currentColor" height="20" viewBox="0 0 256 256" width="20" xmlns="http://www.w3.org/2000/svg"><path d="M208.49,191.51a12,12,0,0,1-17,17L128,145,64.49,208.49a12,12,0,0,1-17-17L111,128,47.51,64.49a12,12,0,0,1,17-17L128,111l63.51-63.52a12,12,0,0,1,17,17L145,128Z"></path></svg></button></div><div class="h-0.5 w-full bg-black/10"></div></div><div class="bg-[#050505] min-h-screen font-sans flex"><div class="flex-1 flex flex-col transition-all duration-300 md:ml-0"><main class="flex-grow"><div class="min-h-screen bg-[#f3f1e9] text-black p-8 md:p-16 flex flex-col font-instr-sans overflow-hidden transition-colors duration-500"><div class="flex justify-between items-center mb-16 z-10"><div class="flex items-center gap-8"><button class="flex items-center gap-2 text-zinc-500 hover:text-black transition-colors group w-fit"><svg fill="currentColor" height="20" viewBox="0 0 256 256" width="20" xmlns="http://www.w3.org/2000/svg" class="group-hover:-translate-x-1 transition-transform"><path d="M224,128a8,8,0,0,1-8,8H59.31l58.35,58.34a8,8,0,0,1-11.32,11.32l-72-72a8,8,0,0,1,0-11.32l72-72a8,8,0,0,1,11.32,11.32L59.31,120H216A8,8,0,0,1,224,128Z"></path></svg><span class="text-sm font-bold uppercase tracking-widest">Back to Projects</span></button><button class="p-2 rounded-full border-2 border-black hover:bg-zinc-500/10 transition-all" title="Switch to Black"><svg fill="currentColor" height="20" viewBox="0 0 256 256" width="20" xmlns="http://www.w3.org/2000/svg"><path d="M236.37,139.4a12,12,0,0,0-12-3A84.07,84.07,0,0,1,119.6,31.59a12,12,0,0,0-15-15A108.86,108.86,0,0,0,49.69,55.07,108,108,0,0,0,136,228a107.09,107.09,0,0,0,64.93-21.69,108.86,108.86,0,0,0,38.44-54.94A12,12,0,0,0,236.37,139.4Zm-49.88,47.74A84,84,0,0,1,68.86,69.51,84.93,84.93,0,0,1,92.27,48.29Q92,52.13,92,56A108.12,108.12,0,0,0,200,164q3.87,0,7.71-.27A84.79,84.79,0,0,1,186.49,187.14Z"></path></svg></button></div><div class="flex gap-12 items-center"><div class="hidden md:flex gap-6 items-center border-r-2 border-zinc-200 pr-12 mr-4"><a class="flex items-center gap-2 hover:opacity-50 transition-opacity" href="https://fezcode.com/Swat-Tactics/" rel="noopener noreferrer" target="_blank" title="Live Demo"><svg fill="currentColor" height="20" viewBox="0 0 256 256" width="20" xmlns="http://www.w3.org/2000/svg"><path d="M128,20A108,108,0,1,0,236,128,108.12,108.12,0,0,0,128,20Zm0,187a113.4,113.4,0,0,1-20.39-35h40.82a116.94,116.94,0,0,1-10,20.77A108.61,108.61,0,0,1,128,207Zm-26.49-59a135.42,135.42,0,0,1,0-40h53a135.42,135.42,0,0,1,0,40ZM44,128a83.49,83.49,0,0,1,2.43-20H77.25a160.63,160.63,0,0,0,0,40H46.43A83.49,83.49,0,0,1,44,128Zm84-79a113.4,113.4,0,0,1,20.39,35H107.59a116.94,116.94,0,0,1,10-20.77A108.61,108.61,0,0,1,128,49Zm50.73,59h30.82a83.52,83.52,0,0,1,0,40H178.75a160.63,160.63,0,0,0,0-40Zm20.77-24H173.71a140.82,140.82,0,0,0-15.5-34.36A84.51,84.51,0,0,1,199.52,84ZM97.79,49.64A140.82,140.82,0,0,0,82.29,84H56.48A84.51,84.51,0,0,1,97.79,49.64ZM56.48,172H82.29a140.82,140.82,0,0,0,15.5,34.36A84.51,84.51,0,0,1,56.48,172Zm101.73,34.36A140.82,140.82,0,0,0,173.71,172h25.81A84.51,84.51,0,0,1,158.21,206.36Z"></path></svg><span class="text-[10px] font-black uppercase tracking-widest">Live</span></a></div><div class="hidden md:flex flex-col items-end"><span class="text-[10px] text-zinc-400 font-bold uppercase tracking-[0.2em]">Project Phase</span><span class="text-sm font-black uppercase tracking-widest">OVERVIEW</span></div><div class="w-12 h-12 border-2 border-black flex items-center justify-center font-black">1</div></div></div><div class="flex flex-col lg:flex-row gap-12 lg:gap-24 flex-grow"><div class="lg:w-2/5 flex flex-col space-y-12"><div class="group cursor-pointer relative"><div class="flex items-center gap-6"><span class="text-sm font-black transition-colors text-black">01</span><div class="flex flex-col"><span class="text-[10px] font-bold uppercase tracking-[0.3em] transition-colors text-zinc-500">Tactical Shooter</span><h2 class="text-4xl md:text-6xl font-black uppercase transition-all duration-300 text-black translate-x-2">Overview</h2></div></div><div class="overflow-hidden pl-12" style="height:auto;opacity:1;margin-top:24px"><div class="max-w-lg prose prose-sm prose-zinc border-l-4 border-black pl-6"><p>SWAT TACTICS is a high-octane, top-down 3D action shooter inspired by the fast-paced gameplay and retro-neon aesthetic of <em>Hotline Miami</em>. Step into the boots of a tactical operator, clear sectors of hostile targets, and survive the chaos of continuous physics-based combat.</p></div></div></div><div class="group cursor-pointer relative"><div class="flex items-center gap-6"><span class="text-sm font-black transition-colors text-zinc-300">02</span><div class="flex flex-col"><span class="text-[10px] font-bold uppercase tracking-[0.3em] transition-colors text-zinc-300">Mechanics</span><h2 class="text-4xl md:text-6xl font-black uppercase transition-all duration-300 text-zinc-300 group-hover:text-zinc-500">Features</h2></div></div></div><div class="group cursor-pointer relative"><div class="flex items-center gap-6"><span class="text-sm font-black transition-colors text-zinc-300">03</span><div class="flex flex-col"><span class="text-[10px] font-bold uppercase tracking-[0.3em] transition-colors text-zinc-300">Stack</span><h2 class="text-4xl md:text-6xl font-black uppercase transition-all duration-300 text-zinc-300 group-hover:text-zinc-500">Technical</h2></div></div></div><div class="group cursor-pointer relative"><div class="flex items-center gap-6"><span class="text-sm font-black transition-colors text-zinc-300">04</span><div class="flex flex-col"><span class="text-[10px] font-bold uppercase tracking-[0.3em] transition-colors text-zinc-300">Play Now</span><h2 class="text-4xl md:text-6xl font-black uppercase transition-all duration-300 text-zinc-300 group-hover:text-zinc-500">Access</h2></div></div></div></div><div class="lg:w-3/5 relative"><div class="w-full aspect-[4/5] lg:h-[70vh] relative overflow-hidden border-[8px] border-black shadow-[30px_30px_0px_0px_rgba(0,0,0,1)] bg-zinc-200 transition-all duration-500"><div class="absolute inset-0" style="opacity:1;filter:grayscale(0);transform:none"><img alt="Swat Tactics" class="w-full h-full object-cover" src="/images/projects/swat-tactics/1.png"></div><div class="absolute top-8 left-8 mix-blend-difference text-white"><div class="text-xs font-black uppercase tracking-[0.4em] mb-2">Artifact No.</div><div class="text-4xl font-black">SWAT-TACTICS</div></div><div class="absolute bottom-8 right-8 mix-blend-difference text-white text-right"><div class="text-[60px] font-black leading-none opacity-50">A</div></div></div></div></div><div class="mt-12 flex justify-between items-end border-t-2 border-black pt-8"><div class="text-[10px] font-black uppercase tracking-[0.5em] text-zinc-400">Digital Archive / Swat Tactics / 2026</div><div class="flex gap-2"><div class="w-8 h-2 bg-black"></div><div class="w-8 h-2 bg-zinc-200"></div><div class="w-8 h-2 bg-zinc-200"></div><div class="w-8 h-2 bg-zinc-200"></div></div></div></div></main></div></div><div class="fixed bottom-0 left-0 w-full h-32 pointer-events-none z-[9999]"><div class="absolute bottom-2 flex flex-col items-center pointer-events-auto cursor-help" style="width:60px;transform:translateX(83.1318vw)"><div class="relative" style="transform:scaleX(-1)"><div class="w-10 h-10 flex items-center justify-center rounded-lg border-2 bg-[#050505] border-[#10B981]/40 text-[#10B981] shadow-lg" style="transform:translateY(-.663885px) scale(1.04824) rotate(-1.67014deg)"><svg fill="currentColor" height="24" viewBox="0 0 256 256" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M224,118.31V200a8,8,0,0,1-8,8H40a8,8,0,0,1-8-8V118.31h0A191.14,191.14,0,0,0,128,144,191.08,191.08,0,0,0,224,118.31Z" opacity="0.2"></path><path d="M104,112a8,8,0,0,1,8-8h32a8,8,0,0,1,0,16H112A8,8,0,0,1,104,112ZM232,72V200a16,16,0,0,1-16,16H40a16,16,0,0,1-16-16V72A16,16,0,0,1,40,56H80V48a24,24,0,0,1,24-24h48a24,24,0,0,1,24,24v8h40A16,16,0,0,1,232,72ZM96,56h64V48a8,8,0,0,0-8-8H104a8,8,0,0,0-8,8ZM40,72v41.62A184.07,184.07,0,0,0,128,136a184,184,0,0,0,88-22.39V72ZM216,200V131.63A200.25,200.25,0,0,1,128,152a200.19,200.19,0,0,1-88-20.36V200H216Z"></path></svg><div class="absolute top-2 left-2 flex gap-3"><div class="w-1.5 h-1.5 rounded-full bg-current animate-pulse"></div><div class="w-1.5 h-1.5 rounded-full bg-current animate-pulse"></div></div></div><div class="flex justify-around mt-[-4px]"><div class="w-3 h-2 rounded-full bg-current opacity-50" style="color:#10b981;transform:translateY(-1.08414px)"></div><div class="w-3 h-2 rounded-full bg-current opacity-50" style="color:#10b981;transform:translateY(-.91586px)"></div></div></div></div></div><div class="fixed top-24 right-6 md:right-12 z-[100] pointer-events-none flex flex-col items-end gap-2"><div class="pointer-events-auto flex flex-col-reverse gap-3"></div></div></div></body></html>