| <!doctype html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8" /> |
| <meta |
| name="viewport" |
| content="width=device-width, initial-scale=1.0, user-scalable=no" |
| /> |
| <meta |
| name="description" |
| content="Digital Life Evolution Simulator - An autonomous AI ecosystem demonstration" |
| /> |
| <title>Digital Life Evolution Simulator</title> |
|
|
| <link rel="stylesheet" href="css/main.css" /> |
| <link rel="stylesheet" href="css/animations.css" /> |
| <link rel="stylesheet" href="css/neon-effects.css" /> |
|
|
| <style> |
| html, |
| body { |
| background: #06060f; |
| } |
| #loading { |
| position: fixed; |
| top: 0; |
| left: 0; |
| right: 0; |
| bottom: 0; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| background: #06060f; |
| z-index: 9999; |
| font-family: "Courier New", monospace; |
| color: #00f0ff; |
| font-size: 14px; |
| letter-spacing: 2px; |
| transition: opacity 0.5s ease; |
| } |
| #loading.fade-out { |
| opacity: 0; |
| pointer-events: none; |
| } |
| #loading .pulse { |
| animation: loadPulse 1.5s ease-in-out infinite; |
| } |
| @keyframes loadPulse { |
| 0%, |
| 100% { |
| opacity: 0.4; |
| } |
| 50% { |
| opacity: 1; |
| text-shadow: |
| 0 0 10px #00f0ff, |
| 0 0 20px #00f0ff; |
| } |
| } |
| </style> |
| </head> |
| <body> |
| <div id="loading" role="alert" aria-live="polite"> |
| <span class="pulse">INITIALIZING ECOSYSTEM...</span> |
| </div> |
|
|
| <div |
| id="app" |
| role="application" |
| aria-label="Digital Life Evolution Simulator" |
| > |
| <a |
| href="#panel-stats" |
| class="sr-only" |
| style="position: absolute; z-index: 100" |
| > |
| Skip to simulation stats |
| </a> |
|
|
| <canvas |
| id="simulation-canvas" |
| aria-label="Simulation world with AI entities, resources, and environmental events" |
| role="img" |
| ></canvas> |
|
|
| <canvas id="particle-canvas" aria-hidden="true"></canvas> |
|
|
| <div class="scan-overlay" aria-hidden="true"></div> |
| </div> |
|
|
| <script type="module"> |
| import { bootstrap } from "./js/ecosystem.js"; |
| |
| if (document.readyState === "loading") { |
| document.addEventListener("DOMContentLoaded", start); |
| } else { |
| start(); |
| } |
| |
| function start() { |
| requestAnimationFrame(() => { |
| try { |
| bootstrap(); |
| } catch (err) { |
| console.error("Bootstrap failed:", err); |
| document.getElementById("loading").innerHTML = |
| '<span style="color:#ff3366">ERROR: ' + err.message + "</span>"; |
| return; |
| } |
| |
| const loading = document.getElementById("loading"); |
| if (loading) { |
| loading.classList.add("fade-out"); |
| setTimeout(() => loading.remove(), 600); |
| } |
| }); |
| } |
| </script> |
| </body> |
| </html> |
|
|
