| | <!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> |
| |
|
