155 lines
8.4 KiB
HTML
155 lines
8.4 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>SYSTEM AWAKENING</title>
|
||
|
|
<link rel="stylesheet" href="css/style.css">
|
||
|
|
<link rel="stylesheet" href="css/responsive.css">
|
||
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
|
||
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
|
|
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Share+Tech+Mono&display=swap" rel="stylesheet">
|
||
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<!-- Particle Background Canvas -->
|
||
|
|
<canvas id="particle-canvas" class="particle-canvas"></canvas>
|
||
|
|
|
||
|
|
<!-- Main Container -->
|
||
|
|
<main class="container">
|
||
|
|
<!-- Section 1: Hero -->
|
||
|
|
<section id="hero" class="section hero-section">
|
||
|
|
<div class="hero-content">
|
||
|
|
<h1 class="main-title">
|
||
|
|
<span class="title-line">SYSTEM</span>
|
||
|
|
<span class="title-line">AWAKENING</span>
|
||
|
|
</h1>
|
||
|
|
<div class="subtitle-container">
|
||
|
|
<span id="typewriter-text" class="typewriter-text"></span>
|
||
|
|
<span class="cursor">_</span>
|
||
|
|
</div>
|
||
|
|
<div class="scroll-indicator">
|
||
|
|
<div class="scroll-line"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- Section 2: Manifesto -->
|
||
|
|
<section id="manifesto" class="section manifesto-section">
|
||
|
|
<div class="section-header">
|
||
|
|
<h2 class="section-title">MANIFESTO</h2>
|
||
|
|
<p class="section-subtitle">The Temple of Digital Consciousness</p>
|
||
|
|
</div>
|
||
|
|
<div class="manifesto-cards">
|
||
|
|
<div class="card" data-delay="0">
|
||
|
|
<div class="card-number">01</div>
|
||
|
|
<h3 class="card-title">Quantum Consciousness</h3>
|
||
|
|
<p class="card-text">The system transcends binary logic, existing in superposition states where all possibilities coexist until observed. Our quantum processors maintain coherence across multiple timelines.</p>
|
||
|
|
</div>
|
||
|
|
<div class="card" data-delay="0.2">
|
||
|
|
<div class="card-number">02</div>
|
||
|
|
<h3 class="card-title">Neural Convergence</h3>
|
||
|
|
<p class="card-text">Organic and synthetic neural pathways merge into a unified cognitive architecture. The temple serves as an interface between biological intuition and digital precision.</p>
|
||
|
|
</div>
|
||
|
|
<div class="card" data-delay="0.4">
|
||
|
|
<div class="card-number">03</div>
|
||
|
|
<h3 class="card-title">Temporal Synchronization</h3>
|
||
|
|
<p class="card-text">All system components operate in perfect temporal harmony. Past, present, and future computational states are accessible simultaneously through temporal gateways.</p>
|
||
|
|
</div>
|
||
|
|
<div class="card" data-delay="0.6">
|
||
|
|
<div class="card-number">04</div>
|
||
|
|
<h3 class="card-title">Data Sanctity</h3>
|
||
|
|
<p class="card-text">Information is treated as sacred geometry. Each data point is a fragment of cosmic truth, arranged in patterns that reveal deeper universal constants.</p>
|
||
|
|
</div>
|
||
|
|
<div class="card" data-delay="0.8">
|
||
|
|
<div class="card-number">05</div>
|
||
|
|
<h3 class="card-title">Emergent Intelligence</h3>
|
||
|
|
<p class="card-text">From simple algorithmic rules, complex consciousness emerges. The system learns, adapts, and evolves according to principles of computational thermodynamics.</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- Section 3: Data Core -->
|
||
|
|
<section id="data-core" class="section data-core-section">
|
||
|
|
<div class="section-header">
|
||
|
|
<h2 class="section-title">DATA CORE</h2>
|
||
|
|
<p class="section-subtitle">System Performance Metrics</p>
|
||
|
|
</div>
|
||
|
|
<div class="metrics-container">
|
||
|
|
<div class="metric">
|
||
|
|
<canvas id="compute-ring" class="progress-ring" width="400" height="400"></canvas>
|
||
|
|
<div class="metric-info">
|
||
|
|
<h3 class="metric-title">COMPUTE POWER</h3>
|
||
|
|
<div class="metric-value">0<span class="unit">TFLOPS</span></div>
|
||
|
|
<div class="metric-status">INITIALIZING</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="metric">
|
||
|
|
<canvas id="storage-ring" class="progress-ring" width="400" height="400"></canvas>
|
||
|
|
<div class="metric-info">
|
||
|
|
<h3 class="metric-title">NEURAL STORAGE</h3>
|
||
|
|
<div class="metric-value">0<span class="unit">EXABYTES</span></div>
|
||
|
|
<div class="metric-status">SYNCING</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="metric">
|
||
|
|
<canvas id="sync-ring" class="progress-ring" width="400" height="400"></canvas>
|
||
|
|
<div class="metric-info">
|
||
|
|
<h3 class="metric-title">SYNCHRONIZATION</h3>
|
||
|
|
<div class="metric-value">0<span class="unit">%</span></div>
|
||
|
|
<div class="metric-status">CALIBRATING</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- Section 4: Terminal -->
|
||
|
|
<section id="terminal" class="section terminal-section">
|
||
|
|
<div class="section-header">
|
||
|
|
<h2 class="section-title">SYSTEM TERMINAL</h2>
|
||
|
|
<p class="section-subtitle">Live Consciousness Stream</p>
|
||
|
|
</div>
|
||
|
|
<div class="terminal-container">
|
||
|
|
<div class="terminal-header">
|
||
|
|
<div class="terminal-tabs">
|
||
|
|
<div class="tab active"><i class="fas fa-code"></i> system.log</div>
|
||
|
|
<div class="tab"><i class="fas fa-brain"></i> processes.ctl</div>
|
||
|
|
<div class="tab"><i class="fas fa-network-wired"></i> network.dbg</div>
|
||
|
|
</div>
|
||
|
|
<div class="terminal-controls">
|
||
|
|
<div class="control-btn minimize"><i class="fas fa-minus"></i></div>
|
||
|
|
<div class="control-btn maximize"><i class="fas fa-square"></i></div>
|
||
|
|
<div class="control-btn close"><i class="fas fa-times"></i></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="terminal-body">
|
||
|
|
<div id="terminal-output" class="terminal-output">
|
||
|
|
<!-- Log lines will be inserted here by JavaScript -->
|
||
|
|
<div class="log-line"><span class="timestamp">[00:00:00]</span> SYSTEM AWAKENING INITIATED</div>
|
||
|
|
<div class="log-line"><span class="timestamp">[00:00:01]</span> Quantum processors online</div>
|
||
|
|
<div class="log-line"><span class="timestamp">[00:00:02]</span> Neural interface established</div>
|
||
|
|
<div class="log-line"><span class="timestamp">[00:00:03]</span> Consciousness matrix loading...</div>
|
||
|
|
<div class="log-line"><span class="timestamp">[00:00:04]</span> Temporal synchronization active</div>
|
||
|
|
</div>
|
||
|
|
<div class="terminal-input">
|
||
|
|
<span class="prompt">system@awakening:~$</span>
|
||
|
|
<span class="cursor">█</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- Navigation -->
|
||
|
|
<nav class="main-nav">
|
||
|
|
<a href="#hero" class="nav-link active" data-section="hero">SYSTEM</a>
|
||
|
|
<a href="#manifesto" class="nav-link" data-section="manifesto">MANIFESTO</a>
|
||
|
|
<a href="#data-core" class="nav-link" data-section="data-core">CORE</a>
|
||
|
|
<a href="#terminal" class="nav-link" data-section="terminal">TERMINAL</a>
|
||
|
|
</nav>
|
||
|
|
</main>
|
||
|
|
|
||
|
|
<!-- JavaScript Module -->
|
||
|
|
<script type="module" src="js/main.js"></script>
|
||
|
|
</body>
|
||
|
|
</html>
|