-
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) · 23 KB
/
index.html
File metadata and controls
1 lines (1 loc) · 23 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>Castarook | 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="Castarook is an immersive 3D chess game built with React and Three.js that integrates D&D-inspired RPG mechanics." name="description"><meta content="Castarook | Fezcodex" property="og:title"><meta content="Castarook is an immersive 3D chess game built with React and Three.js that integrates D&D-inspired RPG mechanics." property="og:description"><meta content="https://fezcode.com/images/projects/castarook/main-menu.webp" property="og:image"><meta content="https://fezcode.com/projects/castarook/" property="og:url"><meta content="website" property="og:type"><meta content="Fezcodex" property="og:site_name"><meta content="https://fezcode.com/images/projects/castarook/main-menu.webp" property="og:image:secure_url"><meta content="summary_large_image" name="twitter:card"><meta content="Castarook | Fezcodex" name="twitter:title"><meta content="Castarook is an immersive 3D chess game built with React and Three.js that integrates D&D-inspired RPG mechanics." name="twitter:description"><meta content="https://fezcode.com/images/projects/castarook/main-menu.webp" name="twitter:image"><meta content="https://fezcode.com/projects/castarook/" name="twitter:url"><link href="https://fezcode.com/projects/castarook/" 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 aria-label="Dismiss" class="p-1 hover:bg-black/20 rounded-sm transition-colors shrink-0"><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="bg-[#050505] text-white h-screen w-screen overflow-hidden font-instr-sans relative selection:bg-white/30 selection:text-white"><style>*{cursor:none!important}</style><div class="fixed top-0 left-0 pointer-events-none z-[9999] transition-colors duration-500" style="transform:translate(0,0)"><div class="relative -top-1/2 -left-1/2 flex items-center justify-center drop-shadow-2xl"><div class="w-5 h-5 bg-red-600 rounded-full border border-white/20"></div></div></div><div class="absolute top-0 left-0 w-[15vw] h-full z-40"></div><div class="absolute top-0 right-0 w-[15vw] h-full z-40"></div><div class="fixed top-0 left-1/2 -translate-x-1/2 z-50 flex flex-col items-center pt-8 pointer-events-none transition-all duration-500"><div class="flex items-center justify-between w-[320px] md:w-[400px] bg-red-600 text-black px-4 py-3 pointer-events-auto transition-colors duration-500"><a class="flex gap-2 cursor-pointer opacity-70 hover:opacity-100 transition-opacity text-black no-underline" href="/projects" data-discover="true"><svg fill="currentColor" height="20" viewBox="0 0 256 256" width="20" xmlns="http://www.w3.org/2000/svg"><path d="M228,128a12,12,0,0,1-12,12H69l51.52,51.51a12,12,0,0,1-17,17l-72-72a12,12,0,0,1,0-17l72-72a12,12,0,0,1,17,17L69,116H216A12,12,0,0,1,228,128Z"></path></svg></a><span class="font-black tracking-tighter text-xl uppercase text-black">CASTAROOK</span><div class="flex gap-3 text-black opacity-80 w-5"></div></div><a class="w-[320px] md:w-[400px] bg-black border border-white/10 flex items-center justify-between px-3 py-2 mt-1 pointer-events-auto cursor-pointer hover:bg-white/5 transition-colors no-underline group" href="https://fezcode.com/castarook/" rel="noopener noreferrer" target="_blank"><div class="flex items-center gap-3"><div class="w-10 h-6 bg-white/10 overflow-hidden relative border border-white/5"><img alt="thumb" class="w-full h-full object-cover opacity-60" src="/images/projects/castarook/rabbit.webp"></div><span class="text-red-600 font-bold text-[10px] tracking-[0.2em] uppercase transition-colors duration-500">PLAY THE GAME</span></div><svg fill="currentColor" height="14" viewBox="0 0 256 256" width="14" xmlns="http://www.w3.org/2000/svg" class="text-red-600 transition-transform group-hover:translate-x-1 duration-300"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></a></div><div class="fixed bottom-8 left-1/2 -translate-x-1/2 z-50 flex items-center gap-3 pointer-events-auto"><button aria-label="Go to slide 1" class="transition-all duration-300 rounded-full border border-red-600 w-6 h-1.5 bg-red-600"></button><button aria-label="Go to slide 2" class="transition-all duration-300 rounded-full border border-red-600 w-1.5 h-1.5 bg-transparent"></button><button aria-label="Go to slide 3" class="transition-all duration-300 rounded-full border border-red-600 w-1.5 h-1.5 bg-transparent"></button><button aria-label="Go to slide 4" class="transition-all duration-300 rounded-full border border-red-600 w-1.5 h-1.5 bg-transparent"></button><button aria-label="Go to slide 5" class="transition-all duration-300 rounded-full border border-red-600 w-1.5 h-1.5 bg-transparent"></button></div><div class="fixed bottom-8 left-8 z-50 flex flex-col items-start gap-4 pointer-events-auto hidden md:flex"><div class="flex items-center gap-6"><a class="p-4 bg-red-600 rounded-sm hover:brightness-125 transition-all group shadow-lg" href="https://fezcode.com/castarook/" rel="noopener noreferrer" target="_blank"><svg fill="currentColor" height="36" viewBox="0 0 256 256" width="36" xmlns="http://www.w3.org/2000/svg" class="text-black group-hover:scale-110 transition-transform"><path d="M240,128a15.74,15.74,0,0,1-7.6,13.51L88.32,229.65a16,16,0,0,1-16.2.3A15.86,15.86,0,0,1,64,216.13V39.87a15.86,15.86,0,0,1,8.12-13.82,16,16,0,0,1,16.2.3L232.4,114.49A15.74,15.74,0,0,1,240,128Z"></path></svg></a><a class="p-4 bg-red-600 rounded-sm hover:brightness-125 transition-all group shadow-lg" href="https://github.com/fezcode/castarook" rel="noopener noreferrer" target="_blank"><svg fill="currentColor" height="36" viewBox="0 0 256 256" width="36" xmlns="http://www.w3.org/2000/svg" class="text-black group-hover:scale-110 transition-transform"><path d="M240,102c0,70-103.79,126.66-108.21,129a8,8,0,0,1-7.58,0C119.79,228.66,16,172,16,102A62.07,62.07,0,0,1,78,40c20.65,0,38.73,8.88,50,23.89C139.27,48.88,157.35,40,178,40A62.07,62.07,0,0,1,240,102Z"></path></svg></a></div><span class="text-[10px] font-bold tracking-widest text-red-600">2026</span></div><div class="flex h-full w-full overflow-x-auto overflow-y-hidden snap-x snap-mandatory scroll-smooth [&::-webkit-scrollbar]:hidden"><section class="relative w-full h-full flex-shrink-0 snap-center flex items-center overflow-hidden"><div class="absolute inset-0 z-0 bg-black"><img alt="Castarook" class="w-full h-full object-cover" src="/images/projects/castarook/rabbit.webp" style="opacity:1;transform:none"><div class="absolute inset-0 pointer-events-none" style="background-color:rgba(0,0,0,.5)"></div></div><div class="relative z-10 w-full h-full flex flex-col justify-center px-[10px]"><div class="flex flex-col md:flex-row items-center justify-between w-full h-full"><div class="flex-1 flex flex-col justify-center pointer-events-none h-full pt-20 md:pt-32"><div class="mb-6 inline-block ml-2" style="opacity:1;transform:none"><span class="border border-red-600 text-red-600 text-xs md:text-sm uppercase font-bold tracking-[0.2em] px-3 py-1 bg-black/50 backdrop-blur-sm pointer-events-auto">RPG CHESS</span></div><h1 class="text-6xl md:text-[7vw] lg:text-[8vw] leading-[0.8] uppercase tracking-normal font-instr-serif text-red-600 m-0 p-0 pointer-events-auto" style="font-weight:900;transform-origin:left center;opacity:1;transform:none">Castarook</h1></div><div class="flex-1 flex flex-col justify-center items-end mt-12 md:mt-0 pointer-events-none h-full"><div class="max-w-md bg-black/60 backdrop-blur-md p-6 border-x-4 shadow-2xl pointer-events-auto text-red-600 border-red-600" style="opacity:1;transform:none"><p class="text-base md:text-lg font-outfit font-light leading-relaxed text-justify drop-shadow-md text-current">An immersive 3D chess game built with React and Three.js that integrates D&D-inspired RPG mechanics like health points and dice-based combat.</p></div></div></div></div></section><section class="relative w-full h-full flex-shrink-0 snap-center flex items-center overflow-hidden"><div class="absolute inset-0 z-0 bg-black"><img alt="COMBAT" class="w-full h-full object-cover" src="/images/projects/castarook/battle-screen.webp" style="opacity:.3;transform:scale(1.02)"><div class="absolute inset-0 pointer-events-none" style="background-color:rgba(0,0,0,.5)"></div></div><div class="relative z-10 w-full h-full flex flex-col justify-center px-[10px]"><div class="flex flex-col md:flex-row items-center justify-between w-full h-full"><div class="flex-1 flex flex-col justify-center pointer-events-none h-full pt-20 md:pt-32"><div class="mb-6 inline-block ml-2" style="opacity:0;transform:translateY(20px)"><span class="border border-yellow-400 text-yellow-400 text-xs md:text-sm uppercase font-bold tracking-[0.2em] px-3 py-1 bg-black/50 backdrop-blur-sm pointer-events-auto">BATTLE PHASE</span></div><h1 class="text-6xl md:text-[7vw] lg:text-[8vw] leading-[0.8] uppercase tracking-normal font-instr-serif text-yellow-400 m-0 p-0 pointer-events-auto" style="font-weight:900;transform-origin:left center;opacity:0;transform:translateX(-50px)">COMBAT</h1></div><div class="flex-1 flex flex-col justify-center items-end mt-12 md:mt-0 pointer-events-none h-full"><div class="max-w-md bg-black/60 backdrop-blur-md p-6 border-x-4 shadow-2xl pointer-events-auto text-yellow-400 border-yellow-400" style="opacity:0;transform:translateX(50px)"><div class="prose prose-invert prose-sm md:prose-base font-outfit font-light text-justify prose-p:text-current prose-p:leading-relaxed prose-strong:text-current prose-strong:font-bold prose-h2:text-lg md:prose-h2:text-xl prose-h2:font-bold prose-h2:uppercase prose-h2:tracking-tight prose-h2:mb-3 prose-h2:mt-1 prose-h2:text-current prose-h3:text-base prose-h3:font-medium prose-h3:uppercase prose-h3:text-current"><div class=""><h2>Roll for Damage</h2><p>Players engage in a unique <strong>Battle Phase</strong> when capturing pieces. Instead of standard instant captures, combat is determined by piece-specific dice rolls (ranging from D6 to D20) combined with veteran attributes.</p><p>Victory is not achieved by standard checkmate logic, but by fully depleting the enemy King's HP to zero. Plan your strikes carefully, a lucky roll can turn the tide of the war!</p></div></div></div></div></div></div></section><section class="relative w-full h-full flex-shrink-0 snap-center flex items-center overflow-hidden"><div class="absolute inset-0 z-0 bg-black"><img alt="PROCEDURAL LOW-POLY" class="w-full h-full object-cover" src="/images/projects/castarook/scenery.webp" style="opacity:.3;transform:scale(1.02)"><div class="absolute inset-0 pointer-events-none" style="background-color:rgba(0,0,0,.5)"></div></div><div class="relative z-10 w-full h-full flex flex-col justify-center px-[10px]"><div class="flex flex-col md:flex-row items-center justify-between w-full h-full"><div class="flex-1 flex flex-col justify-center pointer-events-none h-full pt-20 md:pt-32"><div class="mb-6 inline-block ml-2" style="opacity:0;transform:translateY(20px)"><span class="border border-teal-400 text-teal-400 text-xs md:text-sm uppercase font-bold tracking-[0.2em] px-3 py-1 bg-black/50 backdrop-blur-sm pointer-events-auto">ENVIRONMENT</span></div><h1 class="text-6xl md:text-[7vw] lg:text-[8vw] leading-[0.8] uppercase tracking-normal font-instr-serif text-teal-400 m-0 p-0 pointer-events-auto" style="font-weight:900;transform-origin:left center;opacity:0;transform:translateX(-50px)">PROCEDURAL LOW-POLY</h1></div><div class="flex-1 flex flex-col justify-center items-end mt-12 md:mt-0 pointer-events-none h-full"><div class="max-w-md bg-black/60 backdrop-blur-md p-6 border-x-4 shadow-2xl pointer-events-auto text-teal-400 border-teal-400" style="opacity:0;transform:translateX(50px)"><div class="prose prose-invert prose-sm md:prose-base font-outfit font-light text-justify prose-p:text-current prose-p:leading-relaxed prose-strong:text-current prose-strong:font-bold prose-h2:text-lg md:prose-h2:text-xl prose-h2:font-bold prose-h2:uppercase prose-h2:tracking-tight prose-h2:mb-3 prose-h2:mt-1 prose-h2:text-current prose-h3:text-base prose-h3:font-medium prose-h3:uppercase prose-h3:text-current"><div class=""><h2>Beautiful Vistas</h2><p>The game takes place on a beautifully crafted, procedural <strong>low-poly environment</strong> that changes around the battlefield.</p><p>Vibrant colors and shifting terrains keep every match feeling visually fresh, enhancing the tabletop RPG vibe right inside your browser powered by Three.js.</p></div></div></div></div></div></div></section><section class="relative w-full h-full flex-shrink-0 snap-center flex items-center overflow-hidden"><div class="absolute inset-0 z-0 bg-black"><img alt="Tormenta, mittite!" class="w-full h-full object-cover" src="/images/projects/castarook/onagers.webp" style="opacity:.3;transform:scale(1.02)"><div class="absolute inset-0 pointer-events-none" style="background-color:rgba(0,0,0,.5)"></div></div><div class="relative z-10 w-full h-full flex flex-col justify-center px-[10px]"><div class="flex flex-col md:flex-row items-center justify-between w-full h-full"><div class="flex-1 flex flex-col justify-center pointer-events-none h-full pt-20 md:pt-32"><div class="mb-6 inline-block ml-2" style="opacity:0;transform:translateY(20px)"><span class="border border-rose-400 text-rose-400 text-xs md:text-sm uppercase font-bold tracking-[0.2em] px-3 py-1 bg-black/50 backdrop-blur-sm pointer-events-auto">ONAGERS</span></div><h1 class="text-6xl md:text-[7vw] lg:text-[8vw] leading-[0.8] uppercase tracking-normal font-instr-serif text-rose-400 m-0 p-0 pointer-events-auto" style="font-weight:900;transform-origin:left center;opacity:0;transform:translateX(-50px)">Tormenta, mittite!</h1></div><div class="flex-1 flex flex-col justify-center items-end mt-12 md:mt-0 pointer-events-none h-full"><div class="max-w-md bg-black/60 backdrop-blur-md p-6 border-x-4 shadow-2xl pointer-events-auto text-rose-400 border-rose-400" style="opacity:0;transform:translateX(50px)"><div class="prose prose-invert prose-sm md:prose-base font-outfit font-light text-justify prose-p:text-current prose-p:leading-relaxed prose-strong:text-current prose-strong:font-bold prose-h2:text-lg md:prose-h2:text-xl prose-h2:font-bold prose-h2:uppercase prose-h2:tracking-tight prose-h2:mb-3 prose-h2:mt-1 prose-h2:text-current prose-h3:text-base prose-h3:font-medium prose-h3:uppercase prose-h3:text-current"><div class=""><h2>Bring Down The Walls</h2><p>Introducing special strategic elements like <strong>one-time-use Siege Weapons</strong>. The Onager adds a powerful new layer to the standard chess formula.</p><p>Use them to deal massive damage to high-priority targets from afar or to soften up defensive positions before your infantry moves in.</p></div></div></div></div></div></div></section><section class="relative w-full h-full flex-shrink-0 snap-center flex items-center overflow-hidden"><div class="absolute inset-0 z-0 bg-black"><img alt="DAY & NIGHT" class="w-full h-full object-cover" src="/images/projects/castarook/night-mode.webp" style="opacity:.3;transform:scale(1.02)"><div class="absolute inset-0 pointer-events-none" style="background-color:rgba(0,0,0,.5)"></div></div><div class="relative z-10 w-full h-full flex flex-col justify-center px-[10px]"><div class="flex flex-col md:flex-row items-center justify-between w-full h-full"><div class="flex-1 flex flex-col justify-center pointer-events-none h-full pt-20 md:pt-32"><div class="mb-6 inline-block ml-2" style="opacity:0;transform:translateY(20px)"><span class="border border-green-500 text-green-500 text-xs md:text-sm uppercase font-bold tracking-[0.2em] px-3 py-1 bg-black/50 backdrop-blur-sm pointer-events-auto">DYNAMIC WEATHER</span></div><h1 class="text-6xl md:text-[7vw] lg:text-[8vw] leading-[0.8] uppercase tracking-normal font-instr-serif text-green-500 m-0 p-0 pointer-events-auto" style="font-weight:900;transform-origin:left center;opacity:0;transform:translateX(-50px)">DAY & NIGHT</h1></div><div class="flex-1 flex flex-col justify-center items-end mt-12 md:mt-0 pointer-events-none h-full"><div class="max-w-md bg-black/60 backdrop-blur-md p-6 border-x-4 shadow-2xl pointer-events-auto text-green-500 border-green-500" style="opacity:0;transform:translateX(50px)"><div class="prose prose-invert prose-sm md:prose-base font-outfit font-light text-justify prose-p:text-current prose-p:leading-relaxed prose-strong:text-current prose-strong:font-bold prose-h2:text-lg md:prose-h2:text-xl prose-h2:font-bold prose-h2:uppercase prose-h2:tracking-tight prose-h2:mb-3 prose-h2:mt-1 prose-h2:text-current prose-h3:text-base prose-h3:font-medium prose-h3:uppercase prose-h3:text-current"><div class=""><h2>The Sands of Time</h2><p>Castarook features a full <strong>day and night cycle</strong> alongside dynamic weather effects.</p><p>Watch the shadows lengthen as the sun sets over your battlefield. The atmosphere completely shifts under the moonlight, bringing a new mood to the long, grueling wars of attrition.</p></div></div></div></div></div></div></section></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(86.0301vw)"><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(-3.96572px) rotate(-1.9283deg)"><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(-.0336663px)"></div><div class="w-3 h-2 rounded-full bg-current opacity-50" style="color:#10b981;transform:translateY(-1.96633px)"></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>