Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <title>Elffuss Code — a VS Code-style IDE with an AI soul, in your browser</title> | |
| <meta property="og:type" content="website"> | |
| <meta property="og:site_name" content="Elffuss"> | |
| <meta property="og:title" content="Elffuss Code — a VS Code-style IDE with an AI soul, in your browser"> | |
| <meta property="og:description" content="A web IDE with an AI coding elf that reads, searches and edits your project. Open a folder and code with a local model on WebGPU — nothing leaves your machine."> | |
| <meta property="og:url" content="https://elffuss-code.utopiaia.com/"> | |
| <meta property="og:image" content="https://elffuss-code.utopiaia.com/og.png"> | |
| <meta property="og:image:width" content="1200"> | |
| <meta property="og:image:height" content="630"> | |
| <meta name="twitter:card" content="summary_large_image"> | |
| <meta name="twitter:title" content="Elffuss Code — a VS Code-style IDE with an AI soul, in your browser"> | |
| <meta name="twitter:description" content="A web IDE with an AI coding elf that reads, searches and edits your project. Open a folder and code with a local model on WebGPU — nothing leaves your machine."> | |
| <meta name="twitter:image" content="https://elffuss-code.utopiaia.com/og.png"> | |
| <meta name="description" content="Open a local folder and code with Elffuss: a web IDE plus an AI agent that runs on your own GPU (WebGPU). Nothing leaves your machine."> | |
| <link rel="icon" href="img/elffuss-code.svg"> | |
| <link rel="stylesheet" href="css/code.css"> | |
| <!-- import map: la ciudad 3D (VibeCodeViewer vendorizado en js/vcc) usa import 'three' --> | |
| <script type="importmap"> | |
| { "imports": { | |
| "three": "https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js", | |
| "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/" | |
| }} | |
| </script> | |
| </head> | |
| <body> | |
| <!-- landing: primero se abre la carpeta --> | |
| <div id="landing"> | |
| <div class="l-inner"> | |
| <img src="img/elffuss-code.svg" alt="Elffuss Code" class="hero"> | |
| <h1><b>Elffuss</b> Code</h1> | |
| <p class="tag">Abre tu carpeta de código y programa con una elfa al lado.<br> | |
| Editor tipo VS Code + agente <b>en tu navegador</b>. Nada sale de tu máquina. 😉</p> | |
| <button id="open-project">📁 Abrir carpeta de código</button> | |
| <button id="reopen-project" class="ghost" hidden></button> | |
| <div id="resume-clone" class="resume-clone" hidden> | |
| <span class="rc-text"></span> | |
| <button id="resume-clone-btn">Reanudar</button> | |
| <button id="discard-clone-btn" class="ghost">Descartar</button> | |
| </div> | |
| <div class="clone-row"> | |
| <span class="clone-or">o</span> | |
| <input id="clone-url" type="text" placeholder="pega la URL de un repo público (GitHub/Bitbucket)…" autocomplete="off" spellcheck="false"> | |
| <button id="clone-btn">Descargar y abrir</button> | |
| </div> | |
| <p id="clone-status" class="mini clone-status" hidden></p> | |
| <p class="mini">Chrome/Edge · File System Access · modelo local WebGPU</p> | |
| </div> | |
| </div> | |
| <!-- IDE --> | |
| <div id="ide" hidden> | |
| <header> | |
| <div class="brand"><img src="img/elffuss-code.svg" alt=""><b>Elffuss Code</b> | |
| <span id="project-name" class="proj"></span><span id="build" class="proj">__BUILD__</span></div> | |
| <nav id="menubar"> | |
| <button data-menu="file">File</button> | |
| <button data-menu="edit">Edit</button> | |
| <button data-menu="view">View</button> | |
| <button data-menu="git">Git</button> | |
| </nav> | |
| <div class="controls"> | |
| <button id="git-branch" class="chip" title="rama actual" hidden></button> | |
| <span id="model-dot" class="dot off" title="modelo"></span> | |
| <select id="model-select" hidden></select> | |
| <button id="btn-history" class="ghost icon-btn" title="Historial de conversaciones"></button> | |
| <button id="btn-settings" class="ghost icon-btn" title="Ajustes, modelo y API keys"></button> | |
| </div> | |
| </header> | |
| <div id="settings-panel" hidden></div> | |
| <div id="topmenu" hidden></div> | |
| <div id="palette" hidden> | |
| <input id="pal-input" autocomplete="off" spellcheck="false" | |
| placeholder="Buscar archivos por nombre (: para ir a línea, @ para símbolo, > para comandos)"> | |
| <div id="pal-list"></div> | |
| </div> | |
| <main> | |
| <nav id="activity"> | |
| <button id="act-files" class="on" title="Explorador"></button> | |
| <button id="act-search" title="Buscar (Cmd/Ctrl+P)"></button> | |
| <button id="act-arch" title="Arquitectura (grafo de dependencias)"></button> | |
| <button id="act-city" title="Ciudad 3D"></button> | |
| <button id="act-term" title="Terminal (Ctrl+`)"></button> | |
| <button id="act-skills" title="Skills"></button> | |
| <button id="act-settings" title="Ajustes y modelo"></button> | |
| <img src="img/elffuss-code.svg" alt="Elffuss" title="Elffuss Code"> | |
| </nav> | |
| <aside id="sidebar"> | |
| <div id="explorer-head">EXPLORER<span id="explorer-proj"></span></div> | |
| <div id="tree"></div> | |
| </aside> | |
| <section id="editor-wrap"> | |
| <div id="tabs-bar"></div> | |
| <div id="editor"></div> | |
| <div id="view-overlay" hidden> | |
| <button id="view-close" title="cerrar">✕</button> | |
| <div id="view-body"></div> | |
| </div> | |
| <div id="terminal-panel" hidden> | |
| <div id="term-resize" title="arrastra para redimensionar"></div> | |
| <div id="term-head"> | |
| <span class="term-title">TERMINAL</span> | |
| <span id="term-caps"></span> | |
| <button id="term-clear" class="term-btn" title="limpiar">limpiar</button> | |
| <button id="term-close" class="term-btn" title="cerrar (Ctrl+`)">✕</button> | |
| </div> | |
| <div id="terminal-host"></div> | |
| </div> | |
| <div id="statusbar"></div> | |
| </section> | |
| <section id="chat"> | |
| <div id="conv-tabs"></div> | |
| <div id="history-panel" hidden></div> | |
| <div id="chat-log"></div> | |
| <div id="menu" hidden></div> | |
| <div id="composer-wrap"> | |
| <div id="ctx-meter" title="contexto acumulado en la conversación"> | |
| <span id="ctx-text">ctx 0 / 6k</span> | |
| <div class="ctx-track"><div id="ctx-bar"></div></div> | |
| </div> | |
| <form id="composer"> | |
| <button type="button" id="btn-plus" class="cbtn" title="Adjuntar archivo del proyecto (@)"></button> | |
| <button type="button" id="btn-slash" class="cbtn" title="Comandos"></button> | |
| <input id="prompt" autocomplete="off" placeholder="Pídele código a Elffuss…"> | |
| <button type="button" id="btn-autoedit" class="cbtn autoedit on" title="Editar archivos automáticamente"><span class="ae-ico"></></span> <span class="ae-txt">Auto</span></button> | |
| <button type="button" id="btn-goal" class="cbtn goal" title="Modo Objetivo: descompone el mensaje en tareas y las ejecuta una a una (planificador + ejecutor)">🎯 <span class="goal-txt">Goal</span></button> | |
| <button type="submit" id="btn-send" title="Enviar"></button> | |
| </form> | |
| </div> | |
| </section> | |
| </main> | |
| </div> | |
| <button id="code-flip" title="cambiar entre chat y editor"></button> | |
| <div id="model-progress" hidden> | |
| <img src="img/elffuss-code.svg" alt=""> | |
| <div class="mp-body"> | |
| <span id="model-progress-text">Preparando el cerebro local…</span> | |
| <div class="track"><div id="model-bar"></div></div> | |
| </div> | |
| </div> | |
| <script type="module" src="js/main.js"></script> | |
| <script type="module" src="js/challenge.js"></script> | |
| </body> | |
| </html> | |