Spaces:
Running
Running
| <html lang="es"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"/> | |
| <title>ECOTAGS 路 Galaxias 3D</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap" rel="stylesheet"> | |
| <link rel="stylesheet" href="./styles.css"> | |
| </head> | |
| <body> | |
| <div id="container"></div> | |
| <div id="tooltip"></div> | |
| <div id="ui"> | |
| <div id="hdr"> | |
| <div id="title"> | |
| <svg class="w-6 h-6 text-green-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.6" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09z"/></svg> | |
| <span>ECOTAGS</span> | |
| </div> | |
| <div class="flex items-center gap-2"> | |
| <span id="statusPill" class="hidden">Conectado</span> | |
| <button id="logoutBtn" class="btn bg-red-600 text-white px-3 py-1 rounded text-sm hidden">Cerrar sesi贸n</button> | |
| </div> | |
| </div> | |
| <div id="panel"> | |
| <div class="mb-3"> | |
| <div class="text-xs text-gray-400 mb-1">Usuario</div> | |
| <div id="usernameLabel" class="text-green-300 font-semibold">-</div> | |
| </div> | |
| <input id="topicInput" type="text" class="w-full p-3 rounded-lg bg-gray-800/70 text-white border border-gray-700 focus:outline-none focus:border-green-500 mb-3" placeholder="Escribe uno o m谩s hashtags"> | |
| <div class="grid grid-cols-3 gap-3 mb-4 text-sm"> | |
| <div> | |
| <label class="text-gray-300">Nivel 1: <span id="level1Value" class="text-blue-300">10</span></label> | |
| <input id="level1Slider" type="range" min="1" max="15" value="10"> | |
| </div> | |
| <div> | |
| <label class="text-gray-300">Nivel 2: <span id="level2Value" class="text-blue-300">5</span></label> | |
| <input id="level2Slider" type="range" min="3" max="8" value="5"> | |
| </div> | |
| <div> | |
| <label class="text-gray-300">Nivel 3: <span id="level3Value" class="text-blue-300">3</span></label> | |
| <input id="level3Slider" type="range" min="1" max="3" value="3"> | |
| </div> | |
| </div> | |
| <button id="seedBtn" class="btn w-full bg-gradient-to-r from-green-600 to-blue-600 hover:from-green-500 hover:to-blue-500 text-white font-bold py-3 rounded-lg flex items-center justify-center gap-2"> | |
| <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.6" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09z"/></svg> | |
| <span>Sembrar</span> | |
| </button> | |
| <div id="progressBarContainer" class="mt-3"><div id="progressBar"></div></div> | |
| <details class="mt-4 bg-gray-800/60 rounded-md p-3 border border-gray-700"> | |
| <summary class="cursor-pointer text-sm text-blue-300 font-semibold">Configuraci贸n</summary> | |
| <div class="mt-3 space-y-2 text-sm"> | |
| <div> | |
| <label class="block text-gray-300">Gemini API Key</label> | |
| <input id="geminiKeyInput" type="password" class="w-full p-2 rounded bg-gray-800 text-white border border-gray-700 focus:outline-none focus:border-blue-500" placeholder="AIza..."> | |
| </div> | |
| <div class="flex items-center gap-2"> | |
| <button id="saveGeminiKeyBtn" class="btn bg-gray-700 hover:bg-gray-600 px-3 py-1 rounded">Guardar clave</button> | |
| <span id="geminiKeyStatus" class="text-gray-400"></span> | |
| </div> | |
| </div> | |
| </details> | |
| <div class="mt-4"> | |
| <h2 class="font-bold text-lg text-blue-300 mb-2">Galaxias de Usuarios</h2> | |
| <div id="userList" class="w-full max-h-[22vh] overflow-y-auto text-gray-300 pr-1 text-sm"></div> | |
| </div> | |
| <div id="minimapContainer"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <h2 class="font-bold text-lg text-blue-300">Minimapa</h2> | |
| <div class="flex gap-1"> | |
| <button id="zoomOutButton" class="btn w-7 h-7 bg-gray-700 hover:bg-gray-600 rounded text-lg font-bold flex items-center justify-center">-</button> | |
| <button id="zoomInButton" class="btn w-7 h-7 bg-gray-700 hover:bg-gray-600 rounded text-lg font-bold flex items-center justify-center">+</button> | |
| </div> | |
| </div> | |
| <canvas id="minimap" width="340" height="200"></canvas> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/three@0.160.0/examples/js/controls/OrbitControls.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/three@0.160.0/examples/js/geometries/TextGeometry.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/three@0.160.0/examples/js/loaders/FontLoader.js"></script> | |
| <script type="module" src="./src/main.js"></script> | |
| </body> | |
| </html> | |