| <!doctype html>
|
| <html lang="en">
|
| <head>
|
| <meta charset="UTF-8">
|
| <meta name="viewport" content="width=device-width, initial-scale=1">
|
| <meta name="theme-color" content="#061422">
|
| <meta name="description" content="GitWorld: walk inside a simulated repository.">
|
| <title>GitWorld — the world you walk into</title>
|
| <link rel="stylesheet" href="./styles.css">
|
| </head>
|
| <body>
|
| <section id="opening-scene" class="opening-scene" aria-label="GitWorld opening scene">
|
| <video id="opening-video" class="opening-video" playsinline muted preload="auto"></video>
|
| <div class="opening-vignette" aria-hidden="true"></div>
|
| <div class="opening-copy">
|
| <span class="section-kicker">VRCHAT WORLD · NEON REFLECTIONS</span>
|
| <h1>GITWORLD</h1>
|
| <p>Walk into the code. Every repository is a living world.</p>
|
| <div class="opening-meta"><span><i></i> OPENING SCENE READY</span><span>LOCAL BROWSER RENDER</span><span>VR-STYLE VIEW</span></div>
|
| <div class="opening-actions"><button class="opening-enter" data-action="enter-game">ENTER THE WORLD <b>→</b></button><button class="opening-sound" data-action="toggle-opening-sound">SOUND OFF</button></div>
|
| <small id="opening-status">Loading 3099.mp4…</small>
|
| </div>
|
| </section>
|
| <div id="game-shell" class="game-shell" data-view="city">
|
| <div class="ambient ambient-one" aria-hidden="true"></div>
|
| <div class="ambient ambient-two" aria-hidden="true"></div>
|
| <header class="topbar">
|
| <div class="brand-lockup"><span class="brand-mark">⌘</span><span><strong>GitWorld</strong><small>THE WORLD YOU WALK INTO</small></span></div>
|
| <div class="repo-search-wrap"><label for="repo-search">Local repo search</label><input id="repo-search" type="search" placeholder="Search the city…" autocomplete="off"><kbd>⌘ K</kbd></div>
|
| <div class="topbar-actions"><span class="simulated-pill"><i></i> BROWSER-LOCAL SIMULATION</span><button class="icon-button" data-action="open-terminal" aria-label="Open terminal phone">▣</button></div>
|
| </header>
|
|
|
| <aside class="left-rail panel-glass" aria-label="Welcome to GitWorld">
|
| <div class="panel-title"><span class="section-kicker">WELCOME TO</span><h1>GITWORLD</h1><i></i></div>
|
| <p class="welcome-copy">A virtual world where GitHub repositories are living places. Walk in. Explore. Watch agents build in real time.</p>
|
| <p class="welcome-copy muted">Code is no longer abstract.<br><strong>It’s physical.</strong></p>
|
| <div class="rail-divider"></div>
|
| <div class="component-heading"><span>CORE COMPONENTS</span><small>THE CITY LEGEND</small></div>
|
| <ul class="component-list">
|
| <li><b>◉</b><span>Repositories are <strong>Worlds</strong></span></li>
|
| <li><b>♙</b><span>Agents are <strong>Builders</strong></span></li>
|
| <li><b>✦</b><span>Commits are <strong>Events</strong></span></li>
|
| <li><b>↔</b><span>Pull Requests are <strong>Doors</strong></span></li>
|
| <li><b>!</b><span>Issues are <strong>Quests</strong></span></li>
|
| <li><b>⌘</b><span>Code is <strong>Physical</strong></span></li>
|
| </ul>
|
| <div class="how-it-works">
|
| <div class="component-heading"><span>HOW IT WORKS</span><small>YOUR LOOP</small></div>
|
| <ol><li>Walk inside a repository</li><li>Explore code as a world</li><li>Watch agents build</li><li>Inspect software objects</li><li>Build · test · deploy</li></ol>
|
| </div>
|
| </aside>
|
|
|
| <main class="world-stage" aria-label="Playable GitWorld city">
|
| <div class="stage-heading"><div><span class="section-kicker">ENTER REPOSITORY</span><h2>SNAPKITTYWEST <b>/ pax-coder</b></h2></div><div class="stage-state"><span id="repo-visibility">Public</span><span id="repo-branch">BRANCH / main</span></div></div>
|
| <div id="world-viewport" class="world-viewport" tabindex="0" aria-label="Walkable repository city. Use WASD or arrow keys to move."></div>
|
| <section id="reality-deck" class="reality-deck" aria-label="Browser reality capture scene references">
|
| <div class="reality-deck-heading"><span><i class="live-dot"></i> REALITY DECK</span><small>NEON REFLECTIONS · BROWSER SCENE PLATES</small></div>
|
| <div class="reality-deck-grid">
|
| <video class="reality-plate" data-reference-image="NeonReflections/3089.webp" muted playsinline aria-label="Neon reflections social hub reference"></video>
|
| <video class="reality-plate" data-reference-image="NeonReflections/3087.webp" muted playsinline aria-label="Arcade portal reference"></video>
|
| <video class="reality-plate" data-reference-image="NeonReflections/3090.webp" muted playsinline aria-label="GitWorld spawn point reference"></video>
|
| <video class="reality-plate" data-reference-image="NeonReflections/3092.jpg" muted playsinline aria-label="Reality capture avatar reference"></video>
|
| </div>
|
| </section>
|
| <div id="nearby-prompt" class="nearby-prompt" aria-live="polite"><span>WALKABLE CITY</span><strong>NORTH</strong><small>WASD · ARROWS TO NAVIGATE</small></div>
|
| <div class="city-reticle" aria-hidden="true"><i></i><b></b></div>
|
| <div class="movement-help"><kbd>W</kbd><kbd>A</kbd><kbd>S</kbd><kbd>D</kbd><span>walk</span><kbd>E</kbd><span>enter</span></div>
|
| <div class="feedback-line" aria-live="polite"><i></i><span id="feedback-line">Walk toward a district or click a glowing building.</span><time id="world-clock">00:00:00</time></div>
|
| </main>
|
|
|
| <aside class="right-rail" aria-label="GitWorld telemetry">
|
| <section class="map-panel panel-glass">
|
| <div class="panel-heading"><span><i class="live-dot"></i> GITWORLD MAP</span><button class="icon-button" data-action="close-inspector" aria-label="Collapse map">×</button></div>
|
| <div id="minimap-viewport" class="minimap-viewport"></div>
|
| <div class="map-legend"><span><i class="legend-player"></i> YOU</span><span><i class="legend-building"></i> DISTRICT</span><span><i class="legend-road"></i> ROAD</span></div>
|
| </section>
|
| <section class="agents-panel panel-glass">
|
| <div class="panel-heading"><span>BUILD AGENTS <b class="count-badge" id="active-agent-count">3</b></span><small>LIVE SWARM</small></div>
|
| <ul id="agent-list" class="agent-list"></ul>
|
| <div class="swarm-flow"><span>WORLD ARCHITECT</span><i>↓</i><span>REPOSITORY BUILDER</span><i>↓</i><span>REALITY/UI INTEGRATOR</span></div>
|
| </section>
|
| <section class="event-panel panel-glass">
|
| <div class="panel-heading"><span>CONSTRUCTION FEED</span><small id="event-count">3 EVENTS</small></div>
|
| <ul id="event-feed" class="event-feed" aria-live="polite"></ul>
|
| </section>
|
| </aside>
|
|
|
| <section id="inspector-drawer" class="inspector-drawer panel-glass" aria-label="Repository inspector">
|
| <div class="drawer-heading"><div><span class="section-kicker">CONTEXTUAL INSPECT</span><strong>PHYSICAL SOFTWARE</strong></div><button class="icon-button" data-action="close-inspector" aria-label="Close inspector">×</button></div>
|
| <div id="inspector-content" class="inspector-content"></div>
|
| <div class="drawer-tabs"><button data-action="select-collection" data-collection="files">FILES</button><button data-action="select-collection" data-collection="commits">COMMITS</button><button data-action="select-collection" data-collection="issues">ISSUES</button><button data-action="select-collection" data-collection="prs">PRS</button><button data-action="select-collection" data-collection="build">CI</button></div>
|
| </section>
|
|
|
| <section id="terminal-phone" class="terminal-phone" aria-label="Simulated terminal phone" aria-hidden="true">
|
| <div class="phone-speaker"></div><div class="terminal-top"><span>● local-shell</span><button class="icon-button" data-action="close-terminal" aria-label="Close terminal">×</button></div>
|
| <div class="terminal-screen"><div class="terminal-header"><strong>_ bash</strong><small>pax-coder · main</small></div><div id="terminal-output" class="terminal-output"></div><form id="terminal-form" class="terminal-form"><span>$</span><input id="terminal-input" aria-label="Terminal command" placeholder="type a command…" autocomplete="off"><button type="submit" aria-label="Run command">↵</button></form><div class="terminal-shortcuts"><button data-action="command" data-command="ls">ls</button><button data-action="command" data-command="git status">git status</button><button data-action="command" data-command="cargo test">cargo test</button><button data-action="command" data-command="./build.sh">./build.sh</button></div></div><div class="phone-home"></div>
|
| </section>
|
|
|
| <nav id="toolbelt" class="toolbelt panel-glass" aria-label="Software toolbelt"></nav>
|
|
|
| <section class="software-shelf" aria-labelledby="software-objects-title">
|
| <div class="shelf-title"><span id="software-objects-title">SEE SOFTWARE AS PHYSICAL OBJECTS</span><small>CLICK A TOOL OR BUILDING TO INTERACT</small></div>
|
| <div class="object-grid">
|
| <button class="object-card" data-action="open-terminal"><span class="object-art phone-art">▣</span><strong>TERMINAL = PHONE</strong><small>1 · open shell</small></button>
|
| <button class="object-card" data-action="tool" data-tool-id="bash"><span class="object-art hammer-art">⚒</span><strong>BASH = HAMMER</strong><small>2 · run operation</small></button>
|
| <button class="object-card" data-action="tool" data-tool-id="git"><span class="object-art backpack-art">◈</span><strong>GIT = BACKPACK</strong><small>3 · view history</small></button>
|
| <button class="object-card" data-action="tool" data-tool-id="docker"><span class="object-art box-art">▦</span><strong>DOCKER = BOX</strong><small>4 · open container</small></button>
|
| <button class="object-card" data-action="tool" data-tool-id="code"><span class="object-art tablet-art">⌘</span><strong>CODE = TABLET</strong><small>5 · read source</small></button>
|
| <button class="object-card" data-action="tool" data-tool-id="ssh"><span class="object-art key-art">⚿</span><strong>SSH = KEY</strong><small>6 · unlock gate</small></button>
|
| <button class="object-card" data-action="tool" data-tool-id="database"><span class="object-art vault-art">▤</span><strong>DATABASE = VAULT</strong><small>7 · inspect data</small></button>
|
| <button class="object-card" data-action="tool" data-tool-id="deploy"><span class="object-art rocket-art">↗</span><strong>DEPLOY = ROCKET</strong><small>8 · launch build</small></button>
|
| </div>
|
| </section>
|
|
|
| <div id="touch-controls" class="touch-controls" aria-label="Touch movement controls">
|
| <button data-action="move" data-dx="0" data-dy="-1" aria-label="Walk north">▲</button><div><button data-action="move" data-dx="-1" data-dy="0" aria-label="Walk west">◀</button><button data-action="move" data-dx="0" data-dy="1" aria-label="Walk south">▼</button><button data-action="move" data-dx="1" data-dy="0" aria-label="Walk east">▶</button></div>
|
| </div>
|
| <footer class="disclaimer"><span>SIMULATED REPOSITORY DATA</span><span>NO BACKEND · NO NETWORK · LOCAL DEMO</span><span id="player-level">LEVEL 12 DEV</span></footer>
|
| </div>
|
| <script type="module" src="./src/main.ts"></script>
|
| </body>
|
| </html>
|
|
|
