Spaces:
Sleeping
Sleeping
| <html lang="es"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>EL CANDIDATO: MEMORIA NEURONAL</title> | |
| <script type="importmap"> | |
| { | |
| "imports": { | |
| "three": "https://unpkg.com/three@0.160.0/build/three.module.js", | |
| "three/addons/": "https://unpkg.com/three@0.160.0/examples/jsm/", | |
| "cannon-es": "https://unpkg.com/cannon-es@0.20.0/dist/cannon-es.js" | |
| } | |
| } | |
| </script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/tween.js/18.6.4/tween.umd.js"></script> | |
| <!-- Helper for animations --> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet"> | |
| <style> | |
| body { | |
| margin: 0; | |
| overflow: hidden; | |
| background: #050505; | |
| font-family: 'Inter', sans-serif; | |
| user-select: none; | |
| } | |
| #loading-screen { | |
| position: fixed; | |
| inset: 0; | |
| background: #000; | |
| z-index: 9999; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| color: #fff; | |
| transition: opacity 1s ease-out; | |
| } | |
| .loader-bar { | |
| width: 300px; | |
| height: 4px; | |
| background: #333; | |
| margin-top: 20px; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .loader-progress { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| bottom: 0; | |
| width: 0%; | |
| background: #fff; | |
| box-shadow: 0 0 10px #fff; | |
| transition: width 0.2s; | |
| } | |
| /* POST PROCESSING OVERLAY (CSS BASED) */ | |
| #grain { | |
| position: fixed; | |
| inset: 0; | |
| pointer-events: none; | |
| z-index: 10; | |
| background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E"); | |
| opacity: 0.4; | |
| } | |
| #vignette { | |
| position: fixed; | |
| inset: 0; | |
| pointer-events: none; | |
| z-index: 11; | |
| background: radial-gradient(circle, transparent 50%, rgba(0, 0, 0, 0.4) 120%); | |
| } | |
| /* UI */ | |
| #ui-layer { | |
| position: absolute; | |
| inset: 0; | |
| pointer-events: none; | |
| z-index: 20; | |
| } | |
| #phone { | |
| position: absolute; | |
| bottom: 30px; | |
| right: 30px; | |
| width: 340px; | |
| height: 680px; | |
| background: #111; | |
| border-radius: 40px; | |
| border: 6px solid #222; | |
| box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5); | |
| transform: translateY(110%); | |
| transition: transform 0.6s cubic-bezier(0.2, 0.9, 0.3, 1.1); | |
| overflow: hidden; | |
| pointer-events: auto; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| #phone.active { | |
| transform: translateY(0); | |
| } | |
| .screen { | |
| flex: 1; | |
| background: #fff; | |
| display: flex; | |
| flex-direction: column; | |
| background: #f0f2f5; | |
| } | |
| .header { | |
| background: #008069; | |
| color: white; | |
| padding: 15px; | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); | |
| } | |
| .avatar { | |
| width: 35px; | |
| height: 35px; | |
| background: #ddd; | |
| border-radius: 50%; | |
| } | |
| .chat { | |
| flex: 1; | |
| padding: 15px; | |
| overflow-y: auto; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 8px; | |
| background-image: radial-gradient(#ddd 1px, transparent 1px); | |
| background-size: 20px 20px; | |
| } | |
| .msg { | |
| max-width: 80%; | |
| padding: 8px 12px; | |
| border-radius: 8px; | |
| font-size: 14px; | |
| line-height: 1.4; | |
| box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); | |
| animation: pop 0.3s; | |
| } | |
| .in { | |
| align-self: flex-start; | |
| background: white; | |
| } | |
| .out { | |
| align-self: flex-end; | |
| background: #d9fdd3; | |
| } | |
| .opts { | |
| padding: 10px; | |
| background: #f0f2f5; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 5px; | |
| } | |
| .btn { | |
| background: white; | |
| padding: 12px; | |
| text-align: center; | |
| border-radius: 20px; | |
| cursor: pointer; | |
| color: #008069; | |
| font-weight: 600; | |
| border: 1px solid #ddd; | |
| transition: 0.1s; | |
| } | |
| .btn:hover { | |
| background: #f5f5f5; | |
| } | |
| @keyframes pop { | |
| from { | |
| opacity: 0; | |
| transform: scale(0.9); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: scale(1); | |
| } | |
| } | |
| /* INTRO */ | |
| #intro { | |
| position: fixed; | |
| inset: 0; | |
| background: #111; | |
| z-index: 100; | |
| display: grid; | |
| place-items: center; | |
| text-align: center; | |
| color: #fff; | |
| transition: opacity 1s; | |
| cursor: pointer; | |
| } | |
| .title { | |
| font-size: 3rem; | |
| font-weight: 800; | |
| letter-spacing: -2px; | |
| margin-bottom: 10px; | |
| } | |
| .sub { | |
| color: #888; | |
| font-family: monospace; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="grain"></div> | |
| <div id="vignette"></div> | |
| <div id="intro" onclick="this.style.opacity=0; setTimeout(()=>this.remove(),1000)"> | |
| <div> | |
| <div class="title">VICENTE LÓPEZ</div> | |
| <div class="sub">Click para iniciar la simulación</div> | |
| </div> | |
| </div> | |
| <div id="loading-screen"> | |
| <div>CARGANDO SIMULACIÓN...</div> | |
| <div class="loader-bar"> | |
| <div class="loader-progress" id="loader-progress"></div> | |
| </div> | |
| </div> | |
| <!-- 3D WORLD CONTAINER --> | |
| <div id="world-container"></div> | |
| <!-- UI --> | |
| <div id="ui-layer"> | |
| <div id="phone"> | |
| <div class="screen"> | |
| <div class="header"> | |
| <div class="avatar" | |
| style="background:url('https://api.dicebear.com/7.x/micah/svg?seed=Ruso') center/cover"></div> | |
| <div><b>El Ruso</b><br><small>en línea</small></div> | |
| </div> | |
| <div class="chat" id="chat"></div> | |
| <div class="opts" id="opts"></div> | |
| </div> | |
| </div> | |
| </div> | |
| // Logic moved to main.js | |
| </script> | |
| <script type="module" src="./static/js/main.js"></script> | |
| </body> | |
| </html> |