-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
2 lines (2 loc) · 44.4 KB
/
index.html
File metadata and controls
2 lines (2 loc) · 44.4 KB
1
2
<!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>CartoGo | 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"><meta content="High-performance Go implementation of the City Map Poster Generator. Generate beautiful, minimalist map posters for any city in the world." name="description"><meta content="CartoGo | Fezcodex" property="og:title"><meta content="High-performance Go implementation of the City Map Poster Generator. Generate beautiful, minimalist map posters for any city in the world." property="og:description"><meta content="https://fezcode.com/projects/cartogo/maps/london.webp" property="og:image"><meta content="https://fezcode.com/projects/cartogo/" property="og:url"><meta content="website" property="og:type"><meta content="Fezcodex" property="og:site_name"><meta content="https://fezcode.com/projects/cartogo/maps/london.webp" property="og:image:secure_url"><meta content="summary_large_image" name="twitter:card"><meta content="CartoGo | Fezcodex" name="twitter:title"><meta content="High-performance Go implementation of the City Map Poster Generator. Generate beautiful, minimalist map posters for any city in the world." name="twitter:description"><meta content="https://fezcode.com/projects/cartogo/maps/london.webp" name="twitter:image"><meta content="https://fezcode.com/projects/cartogo/" name="twitter:url"><link href="https://fezcode.com/projects/cartogo/" rel="canonical"><link href="https://release-assets.githubusercontent.com" rel="preconnect"></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 overflow-y-scroll snap-y snap-mandatory font-instr-sans selection:bg-rose-500/30 selection:text-rose-200"><div class="fixed right-8 top-1/2 -translate-y-1/2 z-50 flex flex-col gap-4"><div class="w-1 h-8 transition-colors duration-200 bg-rose-500"></div><div class="w-1 h-8 transition-colors duration-200 bg-white/10"></div><div class="w-1 h-8 transition-colors duration-200 bg-white/10"></div><div class="w-1 h-8 transition-colors duration-200 bg-white/10"></div><div class="w-1 h-8 transition-colors duration-200 bg-white/10"></div><div class="w-1 h-8 transition-colors duration-200 bg-white/10"></div><div class="w-1 h-8 transition-colors duration-200 bg-white/10"></div><div class="w-1 h-8 transition-colors duration-200 bg-white/10"></div><div class="w-1 h-8 transition-colors duration-200 bg-white/10"></div><div class="w-1 h-8 transition-colors duration-200 bg-white/10"></div><div class="w-1 h-8 transition-colors duration-200 bg-white/10"></div><div class="w-1 h-8 transition-colors duration-200 bg-white/10"></div></div><nav class="fixed top-0 left-0 right-0 z-50 flex items-center justify-between px-6 py-6 md:px-12 backdrop-blur-sm mix-blend-difference"><a class="text-xl font-instr-serif font-bold tracking-tight flex items-center gap-2 group text-white no-underline" href="/projects" data-discover="true"><svg fill="currentColor" height="1em" viewBox="0 0 256 256" width="1em" xmlns="http://www.w3.org/2000/svg" class="group-hover:rotate-12 transition-transform"><path d="M228.92,49.69a8,8,0,0,0-6.86-1.45L160.93,63.52,99.58,32.84a8,8,0,0,0-5.52-.6l-64,16A8,8,0,0,0,24,56V200a8,8,0,0,0,9.94,7.76l61.13-15.28,61.35,30.68A8.15,8.15,0,0,0,160,224a8,8,0,0,0,1.94-.24l64-16A8,8,0,0,0,232,200V56A8,8,0,0,0,228.92,49.69ZM104,52.94l48,24V203.06l-48-24ZM40,62.25l48-12v127.5l-48,12Zm176,131.5-48,12V78.25l48-12Z"></path></svg>CartoGo</a><div class="hidden md:flex items-center gap-8 text-sm font-medium opacity-80 font-instr-sans uppercase tracking-widest"><a class="hover:opacity-100 transition-opacity text-white no-underline" href="/" data-discover="true">Home</a><a class="hover:opacity-100 transition-opacity text-white no-underline" href="/projects" data-discover="true">Projects</a></div><a class="hidden md:flex items-center gap-2 border border-white/30 px-6 py-2 rounded text-xs font-instr-sans uppercase tracking-widest hover:bg-white hover:text-black transition-colors no-underline text-white" href="https://github.com/fezcode/CartoGo" rel="noopener noreferrer" target="_blank"><svg fill="currentColor" height="16" viewBox="0 0 256 256" width="16" xmlns="http://www.w3.org/2000/svg"><path d="M208.31,75.68A59.78,59.78,0,0,0,202.93,28,8,8,0,0,0,196,24a59.75,59.75,0,0,0-48,24H124A59.75,59.75,0,0,0,76,24a8,8,0,0,0-6.93,4,59.78,59.78,0,0,0-5.38,47.68A58.14,58.14,0,0,0,56,104v8a56.06,56.06,0,0,0,48.44,55.47A39.8,39.8,0,0,0,96,192v8H72a24,24,0,0,1-24-24A40,40,0,0,0,8,136a8,8,0,0,0,0,16,24,24,0,0,1,24,24,40,40,0,0,0,40,40H96v16a8,8,0,0,0,16,0V192a24,24,0,0,1,48,0v40a8,8,0,0,0,16,0V192a39.8,39.8,0,0,0-8.44-24.53A56.06,56.06,0,0,0,216,112v-8A58.14,58.14,0,0,0,208.31,75.68ZM200,112a40,40,0,0,1-40,40H112a40,40,0,0,1-40-40v-8a41.74,41.74,0,0,1,6.9-22.48A8,8,0,0,0,80,73.83a43.81,43.81,0,0,1,.79-33.58,43.88,43.88,0,0,1,32.32,20.06A8,8,0,0,0,119.82,64h32.35a8,8,0,0,0,6.74-3.69,43.87,43.87,0,0,1,32.32-20.06A43.81,43.81,0,0,1,192,73.83a8.09,8.09,0,0,0,1,7.65A41.72,41.72,0,0,1,200,104Z"></path></svg>See Project</a></nav><section class="relative h-screen w-full flex items-center overflow-hidden snap-start snap-always"><div class="absolute inset-0 z-0"><img alt="Hero Background" class="w-full h-full object-cover filter brightness-[0.6] saturate-[0.8]" src="/projects/cartogo/maps/ankara.webp"><div class="absolute inset-0 bg-gradient-to-r from-black/60 via-black/30 to-transparent"></div></div><div class="relative z-10 container mx-auto px-6 md:px-12 grid grid-cols-1 md:grid-cols-2 gap-12 h-full items-center"><div class="pt-20"><h1 class="text-5xl md:text-7xl lg:text-9xl font-instr-serif font-medium tracking-tight leading-[0.9] mb-12">CartoGo:<br><span class="text-rose-400">Artistic City Mapping</span></h1><div class="w-full max-w-2xl bg-black/40 backdrop-blur-2xl p-10 md:p-12 border border-white/10 shadow-2xl relative" style="opacity:1;transform:none"><div class="absolute -top-px -left-px w-8 h-px bg-rose-500/50"></div><div class="absolute -top-px -left-px w-px h-8 bg-rose-500/50"></div><div class="absolute -bottom-px -right-px w-8 h-px bg-rose-500/50"></div><div class="absolute -bottom-px -right-px w-px h-8 bg-rose-500/50"></div><p class="text-xl md:text-2xl text-gray-200 leading-relaxed font-garamond italic mb-10">A high-performance Go implementation of the City Map Poster Generator. Generate beautiful, minimalist map posters for any city in the world with 1-to-1 aesthetic parity.</p><div class="grid grid-cols-1 sm:grid-cols-2 gap-6 mb-10 border-t border-white/5 pt-8"><div><span class="text-[10px] font-instr-sans uppercase tracking-[0.3em] text-white/40 block mb-1">Technical Port & Optimization</span><span class="text-sm font-instr-serif italic text-white/80">Fezcode</span></div><div><span class="text-[10px] font-instr-sans uppercase tracking-[0.3em] text-white/40 block mb-1">Original Project Vision</span><span class="text-sm font-instr-serif italic text-white/80">Ankur Gupta (maptoposter)</span></div></div><div class="flex flex-wrap items-center gap-4 pt-8 border-t border-white/5"><a class="bg-white text-black hover:bg-rose-400 px-8 py-4 rounded font-instr-sans font-bold text-xs uppercase tracking-[0.2em] transition-colors flex items-center gap-2 no-underline" href="https://github.com/fezcode/CartoGo" rel="noopener noreferrer" target="_blank">See Project</a><a class="border border-white/30 hover:bg-white/10 backdrop-blur-md text-white px-8 py-4 rounded font-instr-sans font-bold text-xs uppercase tracking-[0.2em] transition-colors flex items-center gap-2 no-underline" href="https://github.com/originalankur/maptoposter" rel="noopener noreferrer" target="_blank">Original Project</a></div></div></div></div><div class="absolute bottom-0 left-0 right-0 p-6 md:p-12 z-20 flex flex-col md:flex-row items-end justify-between gap-8 pointer-events-none"><div class="flex items-center gap-8 opacity-50 grayscale pointer-events-auto font-instr-sans uppercase tracking-widest text-[10px]"><span class="font-bold flex items-center gap-2"><svg fill="currentColor" height="18" viewBox="0 0 256 256" width="18" xmlns="http://www.w3.org/2000/svg"><path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm88,104a87.62,87.62,0,0,1-6.4,32.94l-44.7-27.49a15.92,15.92,0,0,0-6.24-2.23l-22.82-3.08a16.11,16.11,0,0,0-16,7.86h-8.72l-3.8-7.86a15.91,15.91,0,0,0-11-8.67l-8-1.73L96.14,104h16.71a16.06,16.06,0,0,0,7.73-2l12.25-6.76a16.62,16.62,0,0,0,3-2.14l26.91-24.34A15.93,15.93,0,0,0,166,49.1l-.36-.65A88.11,88.11,0,0,1,216,128ZM143.31,41.34,152,56.9,125.09,81.24,112.85,88H96.14a16,16,0,0,0-13.88,8l-8.73,15.23L63.38,84.19,74.32,58.32a87.87,87.87,0,0,1,69-17ZM40,128a87.53,87.53,0,0,1,8.54-37.8l11.34,30.27a16,16,0,0,0,11.62,10l21.43,4.61L96.74,143a16.09,16.09,0,0,0,14.4,9h1.48l-7.23,16.23a16,16,0,0,0,2.86,17.37l.14.14L128,205.94l-1.94,10A88.11,88.11,0,0,1,40,128Zm102.58,86.78,1.13-5.81a16.09,16.09,0,0,0-4-13.9,1.85,1.85,0,0,1-.14-.14L120,174.74,133.7,144l22.82,3.08,45.72,28.12A88.18,88.18,0,0,1,142.58,214.78Z"></path></svg> Aether</span><span class="font-bold flex items-center gap-2"><svg fill="currentColor" height="18" viewBox="0 0 256 256" width="18" xmlns="http://www.w3.org/2000/svg"><path d="M240,208H224V96a16,16,0,0,0-16-16H144V32a16,16,0,0,0-24.88-13.32L39.12,72A16,16,0,0,0,32,85.34V208H16a8,8,0,0,0,0,16H240a8,8,0,0,0,0-16ZM208,96V208H144V96ZM48,85.34,128,32V208H48ZM112,112v16a8,8,0,0,1-16,0V112a8,8,0,1,1,16,0Zm-32,0v16a8,8,0,0,1-16,0V112a8,8,0,1,1,16,0Zm0,56v16a8,8,0,0,1-16,0V168a8,8,0,0,1,16,0Zm32,0v16a8,8,0,0,1-16,0V168a8,8,0,0,1,16,0Z"></path></svg> UrbanOS</span></div><div class="flex items-center gap-12 bg-black/20 backdrop-blur-md p-8 rounded-t-2xl border-t border-x border-white/10"><div><div class="text-4xl font-instr-serif font-bold">1ms</div><div class="text-[10px] font-instr-sans text-gray-400 uppercase tracking-[0.2em] mt-2">Cache Access</div></div><div class="w-px h-12 bg-white/10"></div><div><div class="text-4xl font-instr-serif font-bold">300</div><div class="text-[10px] font-instr-sans text-gray-400 uppercase tracking-[0.2em] mt-2">Target DPI</div></div><div class="w-px h-12 bg-white/10"></div><div><div class="text-4xl font-instr-serif font-bold">17</div><div class="text-[10px] font-instr-sans text-gray-400 uppercase tracking-[0.2em] mt-2">Design Themes</div></div></div></div><div class="absolute top-0 left-12 bottom-0 w-px bg-white/10 hidden md:block"></div><div class="absolute top-0 right-12 bottom-0 w-px bg-white/10 hidden md:block"></div><div class="absolute top-24 left-0 right-0 h-px bg-white/10 hidden md:block"></div><div class="absolute bottom-32 left-0 right-0 h-px bg-white/10 hidden md:block"></div></section><section class="relative h-screen w-full flex items-center overflow-hidden border-t border-white/5 snap-start snap-always"><div class="absolute inset-0 z-0"><img alt="System Overview" class="w-full h-full object-cover transition-transform duration-1000" src="/projects/cartogo/maps/london.webp"><div class="absolute inset-0 bg-gradient-to-b from-black/40 via-transparent to-black/60"></div><div class="absolute inset-0 bg-black/20"></div></div><div class="container mx-auto px-6 md:px-12 relative z-10"><div class="flex w-full justify-start"><div class="w-full max-w-2xl bg-black/40 backdrop-blur-2xl p-10 md:p-16 border border-white/10 shadow-2xl relative group" style="opacity:0;transform:translateY(30px)"><div class="absolute -top-px -left-px w-8 h-px bg-rose-500/50"></div><div class="absolute -top-px -left-px w-px h-8 bg-rose-500/50"></div><div class="absolute -bottom-px -right-px w-8 h-px bg-rose-500/50"></div><div class="absolute -bottom-px -right-px w-px h-8 bg-rose-500/50"></div><div class="mb-6 flex items-center gap-3"><span class="text-[10px] font-instr-sans font-bold uppercase tracking-[0.5em] text-rose-400">System Module / 01</span><div class="h-px w-12 bg-rose-500/30"></div></div><h2 class="text-4xl md:text-6xl font-instr-serif font-medium tracking-tight text-white mb-8 leading-tight">System Overview</h2><div class="prose prose-invert prose-xl font-garamond prose-p:text-gray-200 prose-p:leading-relaxed prose-p:font-light prose-li:text-gray-300 prose-strong:text-rose-400 prose-strong:font-medium prose-h2:text-2xl prose-h2:font-instr-serif prose-h2:mb-4 prose-h2:mt-8 prose-h3:text-xl prose-h3:font-instr-serif prose-h3:text-rose-500"><div class=""><h1>CartoGo Overview</h1><p><strong>CartoGo</strong> is a high-performance Go implementation of the original City Map Poster Generator. It is designed for speed, reliability, and 1-to-1 aesthetic parity with the original Python project.</p><h2>Project Vision</h2><p>To generate beautiful, minimalist map posters for any city in the world, leveraging the concurrency and safety of the Go programming language.</p><h2>Architecture</h2><ul><li><strong>Language</strong>: Go 1.25+</li><li><strong>Graphics</strong>: <code>gg</code> library</li><li><strong>Data</strong>: OpenStreetMap (Overpass API)</li><li><strong>Geocoding</strong>: Nominatim</li></ul></div></div><div class="mt-12 pt-8 border-t border-white/5 flex items-center justify-between"><div class="text-[10px] font-mono text-white/20 uppercase tracking-widest">ID: ###-OVERVIEW-###</div></div></div></div></div><div class="absolute top-1/2 -translate-y-1/2 hidden xl:block mix-blend-difference opacity-30 font-instr-sans text-[10px] uppercase tracking-[1em] [writing-mode:vertical-lr] right-12 rotate-180">Module Archive / 01</div></section><section class="relative h-screen w-full flex items-center overflow-hidden border-t border-white/5 snap-start snap-always"><div class="absolute inset-0 z-0"><img alt="Rendering Engine" class="w-full h-full object-cover transition-transform duration-1000" src="/projects/cartogo/maps/new_york.webp"><div class="absolute inset-0 bg-gradient-to-b from-black/40 via-transparent to-black/60"></div><div class="absolute inset-0 bg-black/20"></div></div><div class="container mx-auto px-6 md:px-12 relative z-10"><div class="flex w-full justify-end"><div class="w-full max-w-2xl bg-black/40 backdrop-blur-2xl p-10 md:p-16 border border-white/10 shadow-2xl relative group" style="opacity:0;transform:translateY(30px)"><div class="absolute -top-px -left-px w-8 h-px bg-rose-500/50"></div><div class="absolute -top-px -left-px w-px h-8 bg-rose-500/50"></div><div class="absolute -bottom-px -right-px w-8 h-px bg-rose-500/50"></div><div class="absolute -bottom-px -right-px w-px h-8 bg-rose-500/50"></div><div class="mb-6 flex items-center gap-3"><span class="text-[10px] font-instr-sans font-bold uppercase tracking-[0.5em] text-rose-400">System Module / 02</span><div class="h-px w-12 bg-rose-500/30"></div></div><h2 class="text-4xl md:text-6xl font-instr-serif font-medium tracking-tight text-white mb-8 leading-tight">Rendering Engine</h2><div class="prose prose-invert prose-xl font-garamond prose-p:text-gray-200 prose-p:leading-relaxed prose-p:font-light prose-li:text-gray-300 prose-strong:text-rose-400 prose-strong:font-medium prose-h2:text-2xl prose-h2:font-instr-serif prose-h2:mb-4 prose-h2:mt-8 prose-h3:text-xl prose-h3:font-instr-serif prose-h3:text-rose-500"><div class=""><h1>High-Performance Rendering</h1><p>At the heart of CartoGo lies a custom rendering engine built on top of the <code>gg</code> library. Optimized for 2D vector-like graphics operations in Go.</p><h2>Key Features</h2><ul><li><strong>Z-Order Management</strong>: Layering ensures water bodies, parks, and roads render correctly.</li><li><strong>Alpha Blending</strong>: Custom <code>NRGBA</code> gradient fades for the signature "fading edge" look.</li><li><strong>Projection</strong>: Precision conversion from Lat/Lon to local meter-based coordinate systems.</li></ul></div></div><div class="mt-12 pt-8 border-t border-white/5 flex items-center justify-between"><div class="text-[10px] font-mono text-white/20 uppercase tracking-widest">ID: ###-RENDERING-###</div></div></div></div></div><div class="absolute top-1/2 -translate-y-1/2 hidden xl:block mix-blend-difference opacity-30 font-instr-sans text-[10px] uppercase tracking-[1em] [writing-mode:vertical-lr] left-12">Module Archive / 02</div></section><section class="relative h-screen w-full flex items-center overflow-hidden border-t border-white/5 snap-start snap-always"><div class="absolute inset-0 z-0"><img alt="High-Fidelity Type" class="w-full h-full object-cover transition-transform duration-1000" src="/projects/cartogo/maps/paris.webp"><div class="absolute inset-0 bg-gradient-to-b from-black/40 via-transparent to-black/60"></div><div class="absolute inset-0 bg-black/20"></div></div><div class="container mx-auto px-6 md:px-12 relative z-10"><div class="flex w-full justify-start"><div class="w-full max-w-2xl bg-black/40 backdrop-blur-2xl p-10 md:p-16 border border-white/10 shadow-2xl relative group" style="opacity:0;transform:translateY(30px)"><div class="absolute -top-px -left-px w-8 h-px bg-rose-500/50"></div><div class="absolute -top-px -left-px w-px h-8 bg-rose-500/50"></div><div class="absolute -bottom-px -right-px w-8 h-px bg-rose-500/50"></div><div class="absolute -bottom-px -right-px w-px h-8 bg-rose-500/50"></div><div class="mb-6 flex items-center gap-3"><span class="text-[10px] font-instr-sans font-bold uppercase tracking-[0.5em] text-rose-400">System Module / 03</span><div class="h-px w-12 bg-rose-500/30"></div></div><h2 class="text-4xl md:text-6xl font-instr-serif font-medium tracking-tight text-white mb-8 leading-tight">High-Fidelity Type</h2><div class="prose prose-invert prose-xl font-garamond prose-p:text-gray-200 prose-p:leading-relaxed prose-p:font-light prose-li:text-gray-300 prose-strong:text-rose-400 prose-strong:font-medium prose-h2:text-2xl prose-h2:font-instr-serif prose-h2:mb-4 prose-h2:mt-8 prose-h3:text-xl prose-h3:font-instr-serif prose-h3:text-rose-500"><div class=""><h1>Professional Typography</h1><p>Typography is critical for the aesthetic. CartoGo includes an advanced text layout engine that handles city names and coordinates with professional elegance.</p><h2>Features</h2><ul><li><strong>Dynamic Font Scaling</strong>: Automatically fits long city names to canvas width.</li><li><strong>Tracking</strong>: Applies elegant letter spacing to Latin scripts.</li><li><strong>DPI Scaling</strong>: Ensures point sizes match physical inches at 300 DPI.</li></ul></div></div><div class="mt-12 pt-8 border-t border-white/5 flex items-center justify-between"><div class="text-[10px] font-mono text-white/20 uppercase tracking-widest">ID: ###-TYPOGRAPHY-###</div></div></div></div></div><div class="absolute top-1/2 -translate-y-1/2 hidden xl:block mix-blend-difference opacity-30 font-instr-sans text-[10px] uppercase tracking-[1em] [writing-mode:vertical-lr] right-12 rotate-180">Module Archive / 03</div></section><section class="relative h-screen w-full flex items-center overflow-hidden border-t border-white/5 snap-start snap-always"><div class="absolute inset-0 z-0"><img alt="OSM Data Pipeline" class="w-full h-full object-cover transition-transform duration-1000" src="/projects/cartogo/maps/venice.webp"><div class="absolute inset-0 bg-gradient-to-b from-black/40 via-transparent to-black/60"></div><div class="absolute inset-0 bg-black/20"></div></div><div class="container mx-auto px-6 md:px-12 relative z-10"><div class="flex w-full justify-end"><div class="w-full max-w-2xl bg-black/40 backdrop-blur-2xl p-10 md:p-16 border border-white/10 shadow-2xl relative group" style="opacity:0;transform:translateY(30px)"><div class="absolute -top-px -left-px w-8 h-px bg-rose-500/50"></div><div class="absolute -top-px -left-px w-px h-8 bg-rose-500/50"></div><div class="absolute -bottom-px -right-px w-8 h-px bg-rose-500/50"></div><div class="absolute -bottom-px -right-px w-px h-8 bg-rose-500/50"></div><div class="mb-6 flex items-center gap-3"><span class="text-[10px] font-instr-sans font-bold uppercase tracking-[0.5em] text-rose-400">System Module / 04</span><div class="h-px w-12 bg-rose-500/30"></div></div><h2 class="text-4xl md:text-6xl font-instr-serif font-medium tracking-tight text-white mb-8 leading-tight">OSM Data Pipeline</h2><div class="prose prose-invert prose-xl font-garamond prose-p:text-gray-200 prose-p:leading-relaxed prose-p:font-light prose-li:text-gray-300 prose-strong:text-rose-400 prose-strong:font-medium prose-h2:text-2xl prose-h2:font-instr-serif prose-h2:mb-4 prose-h2:mt-8 prose-h3:text-xl prose-h3:font-instr-serif prose-h3:text-rose-500"><div class=""><h1>OpenStreetMap Data Pipeline</h1><p>Fetching map data is handled by a specialized Overpass QL query engine.</p><h2>Pipeline Steps</h2><ol><li><strong>Query Building</strong>: Dynamic BBox queries for roads, water, and greenery.</li><li><strong>Fetch & Retry</strong>: Robust handling of API timeouts and server load.</li><li><strong>Relation Processing</strong>: Complex multipolygon reconstruction for parks and lakes.</li></ol></div></div><div class="mt-12 pt-8 border-t border-white/5 flex items-center justify-between"><div class="text-[10px] font-mono text-white/20 uppercase tracking-widest">ID: ###-DATA-PIPELINE-###</div></div></div></div></div><div class="absolute top-1/2 -translate-y-1/2 hidden xl:block mix-blend-difference opacity-30 font-instr-sans text-[10px] uppercase tracking-[1em] [writing-mode:vertical-lr] left-12">Module Archive / 04</div></section><section class="relative h-screen w-full flex items-center overflow-hidden border-t border-white/5 snap-start snap-always"><div class="absolute inset-0 z-0"><img alt="Binary Caching" class="w-full h-full object-cover transition-transform duration-1000" src="/projects/cartogo/maps/barcelona.webp"><div class="absolute inset-0 bg-gradient-to-b from-black/40 via-transparent to-black/60"></div><div class="absolute inset-0 bg-black/20"></div></div><div class="container mx-auto px-6 md:px-12 relative z-10"><div class="flex w-full justify-start"><div class="w-full max-w-2xl bg-black/40 backdrop-blur-2xl p-10 md:p-16 border border-white/10 shadow-2xl relative group" style="opacity:0;transform:translateY(30px)"><div class="absolute -top-px -left-px w-8 h-px bg-rose-500/50"></div><div class="absolute -top-px -left-px w-px h-8 bg-rose-500/50"></div><div class="absolute -bottom-px -right-px w-8 h-px bg-rose-500/50"></div><div class="absolute -bottom-px -right-px w-px h-8 bg-rose-500/50"></div><div class="mb-6 flex items-center gap-3"><span class="text-[10px] font-instr-sans font-bold uppercase tracking-[0.5em] text-rose-400">System Module / 05</span><div class="h-px w-12 bg-rose-500/30"></div></div><h2 class="text-4xl md:text-6xl font-instr-serif font-medium tracking-tight text-white mb-8 leading-tight">Binary Caching</h2><div class="prose prose-invert prose-xl font-garamond prose-p:text-gray-200 prose-p:leading-relaxed prose-p:font-light prose-li:text-gray-300 prose-strong:text-rose-400 prose-strong:font-medium prose-h2:text-2xl prose-h2:font-instr-serif prose-h2:mb-4 prose-h2:mt-8 prose-h3:text-xl prose-h3:font-instr-serif prose-h3:text-rose-500"><div class=""><h1>High-Speed Binary Caching</h1><p>Sub-second re-renders are achieved through a binary caching system using Go's <code>gob</code> format.</p><h2>Optimization</h2><ul><li><strong>Binary Serialization</strong>: Near-instant disk I/O compared to JSON or XML.</li><li><strong>Nominatim Cache</strong>: Stores geocoding results locally to respect rate limits.</li><li><strong>Data Persistence</strong>: Map data remains cached for future artistic iterations.</li></ul></div></div><div class="mt-12 pt-8 border-t border-white/5 flex items-center justify-between"><div class="text-[10px] font-mono text-white/20 uppercase tracking-widest">ID: ###-CACHING-###</div></div></div></div></div><div class="absolute top-1/2 -translate-y-1/2 hidden xl:block mix-blend-difference opacity-30 font-instr-sans text-[10px] uppercase tracking-[1em] [writing-mode:vertical-lr] right-12 rotate-180">Module Archive / 05</div></section><section class="relative h-screen w-full flex items-center overflow-hidden border-t border-white/5 snap-start snap-always"><div class="absolute inset-0 z-0"><img alt="Dynamic Scaling" class="w-full h-full object-cover transition-transform duration-1000" src="/projects/cartogo/maps/san_francisco.webp"><div class="absolute inset-0 bg-gradient-to-b from-black/40 via-transparent to-black/60"></div><div class="absolute inset-0 bg-black/20"></div></div><div class="container mx-auto px-6 md:px-12 relative z-10"><div class="flex w-full justify-end"><div class="w-full max-w-2xl bg-black/40 backdrop-blur-2xl p-10 md:p-16 border border-white/10 shadow-2xl relative group" style="opacity:0;transform:translateY(30px)"><div class="absolute -top-px -left-px w-8 h-px bg-rose-500/50"></div><div class="absolute -top-px -left-px w-px h-8 bg-rose-500/50"></div><div class="absolute -bottom-px -right-px w-8 h-px bg-rose-500/50"></div><div class="absolute -bottom-px -right-px w-px h-8 bg-rose-500/50"></div><div class="mb-6 flex items-center gap-3"><span class="text-[10px] font-instr-sans font-bold uppercase tracking-[0.5em] text-rose-400">System Module / 06</span><div class="h-px w-12 bg-rose-500/30"></div></div><h2 class="text-4xl md:text-6xl font-instr-serif font-medium tracking-tight text-white mb-8 leading-tight">Dynamic Scaling</h2><div class="prose prose-invert prose-xl font-garamond prose-p:text-gray-200 prose-p:leading-relaxed prose-p:font-light prose-li:text-gray-300 prose-strong:text-rose-400 prose-strong:font-medium prose-h2:text-2xl prose-h2:font-instr-serif prose-h2:mb-4 prose-h2:mt-8 prose-h3:text-xl prose-h3:font-instr-serif prose-h3:text-rose-500"><div class=""><h1>Intelligent Radius Scaling</h1><p>Maps aren't just squares. CartoGo implements dynamic radius compensation to ensure perfect framing.</p><h2>The Compensation Algorithm</h2><p>Calculates an optimal bounding box based on the physical aspect ratio (Width/Height) to ensure the city center peninsula or arterial roads aren't cropped awkwardly.</p></div></div><div class="mt-12 pt-8 border-t border-white/5 flex items-center justify-between"><div class="text-[10px] font-mono text-white/20 uppercase tracking-widest">ID: ###-SMART-RADIUS-###</div></div></div></div></div><div class="absolute top-1/2 -translate-y-1/2 hidden xl:block mix-blend-difference opacity-30 font-instr-sans text-[10px] uppercase tracking-[1em] [writing-mode:vertical-lr] left-12">Module Archive / 06</div></section><section class="relative h-screen w-full flex items-center overflow-hidden border-t border-white/5 snap-start snap-always"><div class="absolute inset-0 z-0"><img alt="JSON Theme Engine" class="w-full h-full object-cover transition-transform duration-1000" src="/projects/cartogo/maps/marrakech.webp"><div class="absolute inset-0 bg-gradient-to-b from-black/40 via-transparent to-black/60"></div><div class="absolute inset-0 bg-black/20"></div></div><div class="container mx-auto px-6 md:px-12 relative z-10"><div class="flex w-full justify-start"><div class="w-full max-w-2xl bg-black/40 backdrop-blur-2xl p-10 md:p-16 border border-white/10 shadow-2xl relative group" style="opacity:0;transform:translateY(30px)"><div class="absolute -top-px -left-px w-8 h-px bg-rose-500/50"></div><div class="absolute -top-px -left-px w-px h-8 bg-rose-500/50"></div><div class="absolute -bottom-px -right-px w-8 h-px bg-rose-500/50"></div><div class="absolute -bottom-px -right-px w-px h-8 bg-rose-500/50"></div><div class="mb-6 flex items-center gap-3"><span class="text-[10px] font-instr-sans font-bold uppercase tracking-[0.5em] text-rose-400">System Module / 07</span><div class="h-px w-12 bg-rose-500/30"></div></div><h2 class="text-4xl md:text-6xl font-instr-serif font-medium tracking-tight text-white mb-8 leading-tight">JSON Theme Engine</h2><div class="prose prose-invert prose-xl font-garamond prose-p:text-gray-200 prose-p:leading-relaxed prose-p:font-light prose-li:text-gray-300 prose-strong:text-rose-400 prose-strong:font-medium prose-h2:text-2xl prose-h2:font-instr-serif prose-h2:mb-4 prose-h2:mt-8 prose-h3:text-xl prose-h3:font-instr-serif prose-h3:text-rose-500"><div class=""><h1>Modular JSON Themes</h1><p>Separating data from design. CartoGo features a fully customizable JSON-based theme engine.</p><h2>Theme Architecture</h2><ul><li><strong>JSON Definitions</strong>: Backgrounds, road weights, and hex colors.</li><li><strong>Built-in Styles</strong>: 17 curated themes (Noir, Terracotta, Cyberpunk, etc.).</li><li><strong>Extensibility</strong>: Add new artistic styles without modifying core rendering code.</li></ul></div></div><div class="mt-12 pt-8 border-t border-white/5 flex items-center justify-between"><div class="text-[10px] font-mono text-white/20 uppercase tracking-widest">ID: ###-THEMING-###</div></div></div></div></div><div class="absolute top-1/2 -translate-y-1/2 hidden xl:block mix-blend-difference opacity-30 font-instr-sans text-[10px] uppercase tracking-[1em] [writing-mode:vertical-lr] right-12 rotate-180">Module Archive / 07</div></section><section class="relative h-screen w-full flex items-center overflow-hidden border-t border-white/5 snap-start snap-always"><div class="absolute inset-0 z-0"><img alt="Nominatim Integration" class="w-full h-full object-cover transition-transform duration-1000" src="/projects/cartogo/maps/amsterdam.webp"><div class="absolute inset-0 bg-gradient-to-b from-black/40 via-transparent to-black/60"></div><div class="absolute inset-0 bg-black/20"></div></div><div class="container mx-auto px-6 md:px-12 relative z-10"><div class="flex w-full justify-end"><div class="w-full max-w-2xl bg-black/40 backdrop-blur-2xl p-10 md:p-16 border border-white/10 shadow-2xl relative group" style="opacity:0;transform:translateY(30px)"><div class="absolute -top-px -left-px w-8 h-px bg-rose-500/50"></div><div class="absolute -top-px -left-px w-px h-8 bg-rose-500/50"></div><div class="absolute -bottom-px -right-px w-8 h-px bg-rose-500/50"></div><div class="absolute -bottom-px -right-px w-px h-8 bg-rose-500/50"></div><div class="mb-6 flex items-center gap-3"><span class="text-[10px] font-instr-sans font-bold uppercase tracking-[0.5em] text-rose-400">System Module / 08</span><div class="h-px w-12 bg-rose-500/30"></div></div><h2 class="text-4xl md:text-6xl font-instr-serif font-medium tracking-tight text-white mb-8 leading-tight">Nominatim Integration</h2><div class="prose prose-invert prose-xl font-garamond prose-p:text-gray-200 prose-p:leading-relaxed prose-p:font-light prose-li:text-gray-300 prose-strong:text-rose-400 prose-strong:font-medium prose-h2:text-2xl prose-h2:font-instr-serif prose-h2:mb-4 prose-h2:mt-8 prose-h3:text-xl prose-h3:font-instr-serif prose-h3:text-rose-500"><div class=""><h1>Geocoding Integration</h1><p>Precise location targeting via the Nominatim API.</p><h2>Features</h2><ul><li><strong>Structured Search</strong>: Targets specific cities and countries.</li><li><strong>Centroid Calculation</strong>: Uses geocoded coordinates as the map center.</li><li><strong>Radius Tuning</strong>: Allows users to zoom in or out from the geocoded point.</li></ul></div></div><div class="mt-12 pt-8 border-t border-white/5 flex items-center justify-between"><div class="text-[10px] font-mono text-white/20 uppercase tracking-widest">ID: ###-GEOCODING-###</div></div></div></div></div><div class="absolute top-1/2 -translate-y-1/2 hidden xl:block mix-blend-difference opacity-30 font-instr-sans text-[10px] uppercase tracking-[1em] [writing-mode:vertical-lr] left-12">Module Archive / 08</div></section><section class="relative h-screen w-full flex items-center overflow-hidden border-t border-white/5 snap-start snap-always"><div class="absolute inset-0 z-0"><img alt="300 DPI Export" class="w-full h-full object-cover transition-transform duration-1000" src="/projects/cartogo/maps/dubai.webp"><div class="absolute inset-0 bg-gradient-to-b from-black/40 via-transparent to-black/60"></div><div class="absolute inset-0 bg-black/20"></div></div><div class="container mx-auto px-6 md:px-12 relative z-10"><div class="flex w-full justify-start"><div class="w-full max-w-2xl bg-black/40 backdrop-blur-2xl p-10 md:p-16 border border-white/10 shadow-2xl relative group" style="opacity:0;transform:translateY(30px)"><div class="absolute -top-px -left-px w-8 h-px bg-rose-500/50"></div><div class="absolute -top-px -left-px w-px h-8 bg-rose-500/50"></div><div class="absolute -bottom-px -right-px w-8 h-px bg-rose-500/50"></div><div class="absolute -bottom-px -right-px w-px h-8 bg-rose-500/50"></div><div class="mb-6 flex items-center gap-3"><span class="text-[10px] font-instr-sans font-bold uppercase tracking-[0.5em] text-rose-400">System Module / 09</span><div class="h-px w-12 bg-rose-500/30"></div></div><h2 class="text-4xl md:text-6xl font-instr-serif font-medium tracking-tight text-white mb-8 leading-tight">300 DPI Export</h2><div class="prose prose-invert prose-xl font-garamond prose-p:text-gray-200 prose-p:leading-relaxed prose-p:font-light prose-li:text-gray-300 prose-strong:text-rose-400 prose-strong:font-medium prose-h2:text-2xl prose-h2:font-instr-serif prose-h2:mb-4 prose-h2:mt-8 prose-h3:text-xl prose-h3:font-instr-serif prose-h3:text-rose-500"><div class=""><h1>High-Resolution Print Export</h1><p>Engineered for the physical world. Export high-fidelity posters ready for professional printing.</p><h2>Print Specifications</h2><ul><li><strong>300 DPI</strong>: Standard professional print resolution.</li><li><strong>Custom Dimensions</strong>: Support for any size (A4, A3, 18x24, etc.).</li><li><strong>Vector Parity</strong>: Ensures sharp lines and smooth gradients on large scales.</li></ul></div></div><div class="mt-12 pt-8 border-t border-white/5 flex items-center justify-between"><div class="text-[10px] font-mono text-white/20 uppercase tracking-widest">ID: ###-HIGH-RESOLUTION-###</div></div></div></div></div><div class="absolute top-1/2 -translate-y-1/2 hidden xl:block mix-blend-difference opacity-30 font-instr-sans text-[10px] uppercase tracking-[1em] [writing-mode:vertical-lr] right-12 rotate-180">Module Archive / 09</div></section><section class="relative h-screen w-full flex items-center overflow-hidden border-t border-white/5 snap-start snap-always"><div class="absolute inset-0 z-0"><img alt="Go Concurrency" class="w-full h-full object-cover transition-transform duration-1000" src="/projects/cartogo/maps/istanbul.webp"><div class="absolute inset-0 bg-gradient-to-b from-black/40 via-transparent to-black/60"></div><div class="absolute inset-0 bg-black/20"></div></div><div class="container mx-auto px-6 md:px-12 relative z-10"><div class="flex w-full justify-end"><div class="w-full max-w-2xl bg-black/40 backdrop-blur-2xl p-10 md:p-16 border border-white/10 shadow-2xl relative group" style="opacity:0;transform:translateY(30px)"><div class="absolute -top-px -left-px w-8 h-px bg-rose-500/50"></div><div class="absolute -top-px -left-px w-px h-8 bg-rose-500/50"></div><div class="absolute -bottom-px -right-px w-8 h-px bg-rose-500/50"></div><div class="absolute -bottom-px -right-px w-px h-8 bg-rose-500/50"></div><div class="mb-6 flex items-center gap-3"><span class="text-[10px] font-instr-sans font-bold uppercase tracking-[0.5em] text-rose-400">System Module / 010</span><div class="h-px w-12 bg-rose-500/30"></div></div><h2 class="text-4xl md:text-6xl font-instr-serif font-medium tracking-tight text-white mb-8 leading-tight">Go Concurrency</h2><div class="prose prose-invert prose-xl font-garamond prose-p:text-gray-200 prose-p:leading-relaxed prose-p:font-light prose-li:text-gray-300 prose-strong:text-rose-400 prose-strong:font-medium prose-h2:text-2xl prose-h2:font-instr-serif prose-h2:mb-4 prose-h2:mt-8 prose-h3:text-xl prose-h3:font-instr-serif prose-h3:text-rose-500"><div class=""><h1>Concurrent Performance</h1><p>Leveraging Go's Goroutines to accelerate the rendering pipeline.</p><h2>Go vs Python</h2><ul><li><strong>Speed</strong>: Significant performance uplift over Matplotlib rendering.</li><li><strong>Type Safety</strong>: Reduces bugs in coordinate transformation.</li><li><strong>Distribution</strong>: Compiles to a single static binary for easy use.</li></ul></div></div><div class="mt-12 pt-8 border-t border-white/5 flex items-center justify-between"><div class="text-[10px] font-mono text-white/20 uppercase tracking-widest">ID: ###-PERFORMANCE-###</div></div></div></div></div><div class="absolute top-1/2 -translate-y-1/2 hidden xl:block mix-blend-difference opacity-30 font-instr-sans text-[10px] uppercase tracking-[1em] [writing-mode:vertical-lr] left-12">Module Archive / 010</div></section><section class="relative h-screen w-full flex items-center overflow-hidden border-t border-white/5 snap-start snap-always"><div class="absolute inset-0 z-0"><img alt="Automation & CLI" class="w-full h-full object-cover transition-transform duration-1000" src="/projects/cartogo/maps/sydney.webp"><div class="absolute inset-0 bg-gradient-to-b from-black/40 via-transparent to-black/60"></div><div class="absolute inset-0 bg-black/20"></div></div><div class="container mx-auto px-6 md:px-12 relative z-10"><div class="flex w-full justify-start"><div class="w-full max-w-2xl bg-black/40 backdrop-blur-2xl p-10 md:p-16 border border-white/10 shadow-2xl relative group" style="opacity:0;transform:translateY(30px)"><div class="absolute -top-px -left-px w-8 h-px bg-rose-500/50"></div><div class="absolute -top-px -left-px w-px h-8 bg-rose-500/50"></div><div class="absolute -bottom-px -right-px w-8 h-px bg-rose-500/50"></div><div class="absolute -bottom-px -right-px w-px h-8 bg-rose-500/50"></div><div class="mb-6 flex items-center gap-3"><span class="text-[10px] font-instr-sans font-bold uppercase tracking-[0.5em] text-rose-400">System Module / 011</span><div class="h-px w-12 bg-rose-500/30"></div></div><h2 class="text-4xl md:text-6xl font-instr-serif font-medium tracking-tight text-white mb-8 leading-tight">Automation & CLI</h2><div class="prose prose-invert prose-xl font-garamond prose-p:text-gray-200 prose-p:leading-relaxed prose-p:font-light prose-li:text-gray-300 prose-strong:text-rose-400 prose-strong:font-medium prose-h2:text-2xl prose-h2:font-instr-serif prose-h2:mb-4 prose-h2:mt-8 prose-h3:text-xl prose-h3:font-instr-serif prose-h3:text-rose-500"><div class=""><h1>Powerful CLI Automation</h1><p>A tool for designers and developers alike. Fully automatable via command line.</p><h2>Basic Usage</h2><pre><code class="language-bash">./CartoGo.exe -city "Sydney" -country "Australia"
</code></pre><h2>Batch Processing</h2><p>Easily scriptable to generate a collection of posters for entire countries or regions using simple shell loops.</p></div></div><div class="mt-12 pt-8 border-t border-white/5 flex items-center justify-between"><div class="text-[10px] font-mono text-white/20 uppercase tracking-widest">ID: ###-CLI-USAGE-###</div></div></div></div></div><div class="absolute top-1/2 -translate-y-1/2 hidden xl:block mix-blend-difference opacity-30 font-instr-sans text-[10px] uppercase tracking-[1em] [writing-mode:vertical-lr] right-12 rotate-180">Module Archive / 011</div></section></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(84.1852vw)"><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(-1.85802px) rotate(3.27403deg)"><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.6244px)"></div><div class="w-3 h-2 rounded-full bg-current opacity-50" style="color:#10b981;transform:translateY(-.375598px)"></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>