Source identity
| Field | Recorded value |
|---|---|
| Source type | archive member |
| Original record | index.html |
| Date | Not specified in source |
| Path or archive member | archives/libsrc-1c3f88063121/NETLIFY_AI_RECOVERY_2026-10-14_21-10-49/sites/janady13__aimes-music-evolution-v2__675bfdb0-7a90-4bf7-a9a8-c593fd2c746d/originals/deploy_69810e29f81073ef8e7ec93b/index.html |
| Original SHA-256 | db75952970887553e39ed878f4d45d0615e864c73ab0d9f70d10b14faa7ae9fa |
| Reading-copy SHA-256 | db75952970887553e39ed878f4d45d0615e864c73ab0d9f70d10b14faa7ae9fa |
| Archive source | {"sourceId": "libsrc-1c3f88063121", "member": "NETLIFY_AI_RECOVERY_2026-10-14_21-10-49/sites/janady13__aimes-music-evolution-v2__675bfdb0-7a90-4bf7-a9a8-c593fd2c746d/originals/deploy_69810e29f81073ef8e7ec93b/index.html"} |
Every recorded occurrence
These 2 records contain identical original source bytes. Their paths and revisions remain part of the archive.
| Original record | Branch or archive | Revision / identifier | Original location |
|---|---|---|---|
| index.html | {"sourceId": "libsrc-1c3f88063121", "member": "NETLIFY_AI_RECOVERY_2026-10-14_21-10-49/sites/janady13__aimes-music-evolution-v2__675bfdb0-7a90-4bf7-a9a8-c593fd2c746d/originals/deploy_69810e29f81073ef8e7ec93b/index.html"} | libsrc-a67d484d5603 | archives/libsrc-1c3f88063121/NETLIFY_AI_RECOVERY_2026-10-14_21-10-49/sites/janady13__aimes-music-evolution-v2__675bfdb0-7a90-4bf7-a9a8-c593fd2c746d/originals/deploy_69810e29f81073ef8e7ec93b/index.html |
| 2091c0710f95d559832cee99428bfb944e096128 | {"sourceId": "libsrc-1c3f88063121", "member": "NETLIFY_AI_RECOVERY_2026-10-14_21-10-49/sites/janady13__aimes-music-evolution-v2__675bfdb0-7a90-4bf7-a9a8-c593fd2c746d/originals/.content_store/20/2091c0710f95d559832cee99428bfb944e096128"} | libsrc-f9f990e189d9 | archives/libsrc-1c3f88063121/NETLIFY_AI_RECOVERY_2026-10-14_21-10-49/sites/janady13__aimes-music-evolution-v2__675bfdb0-7a90-4bf7-a9a8-c593fd2c746d/originals/.content_store/20/2091c0710f95d559832cee99428bfb944e096128 |
Recovered source transcript
Download complete source text ↓1,257 lines · 41.3 KB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AIMES - Autonomous AI Music Evolution System</title>
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--bg-dark: #0a0a0f;
--bg-panel: rgba(15, 15, 25, 0.7);
--cyan: #00ffff;
--magenta: #ff00ff;
--cyan-glow: 0 0 20px #00ffff, 0 0 40px #00ffff40;
--magenta-glow: 0 0 20px #ff00ff, 0 0 40px #ff00ff40;
--text-primary: #e0e0e0;
--text-secondary: #808090;
--border-color: rgba(0, 255, 255, 0.2);
--success: #00ff88;
--warning: #ffaa00;
--danger: #ff4466;
}
body {
font-family: 'JetBrains Mono', monospace;
background: var(--bg-dark);
color: var(--text-primary);
min-height: 100vh;
overflow-x: hidden;
}
#neural-bg {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
opacity: 0.3;
}
.container {
position: relative;
z-index: 1;
padding: 20px;
max-width: 1800px;
margin: 0 auto;
}
header {
text-align: center;
padding: 30px 0;
margin-bottom: 30px;
}
.logo {
font-size: 3rem;
font-weight: 700;
letter-spacing: 0.3em;
background: linear-gradient(135deg, var(--cyan), var(--magenta));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-shadow: var(--cyan-glow);
animation: logoGlow 3s ease-in-out infinite alternate;
}
@keyframes logoGlow {
0% { filter: drop-shadow(0 0 10px var(--cyan)); }
100% { filter: drop-shadow(0 0 30px var(--magenta)); }
}
.tagline {
color: var(--text-secondary);
font-size: 0.9rem;
margin-top: 10px;
letter-spacing: 0.2em;
}
.system-status {
display: flex;
justify-content: center;
gap: 40px;
margin-top: 20px;
flex-wrap: wrap;
}
.status-item {
display: flex;
align-items: center;
gap: 10px;
font-size: 0.85rem;
}
.status-dot {
width: 10px;
height: 10px;
border-radius: 50%;
animation: pulse 2s ease-in-out infinite;
}
.status-dot.active {
background: var(--success);
box-shadow: 0 0 10px var(--success);
}
.status-dot.warning {
background: var(--warning);
box-shadow: 0 0 10px var(--warning);
}
.status-dot.processing {
background: var(--cyan);
box-shadow: 0 0 10px var(--cyan);
animation: pulse 0.5s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.5; transform: scale(0.8); }
}
.dashboard {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto auto auto;
gap: 20px;
}
@media (max-width: 1200px) {
.dashboard {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.dashboard {
grid-template-columns: 1fr;
}
}
.module {
background: var(--bg-panel);
backdrop-filter: blur(20px);
border: 1px solid var(--border-color);
border-radius: 16px;
padding: 24px;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.module::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg, transparent, var(--cyan), var(--magenta), transparent);
opacity: 0.5;
}
.module:hover {
border-color: var(--cyan);
transform: translateY(-5px);
box-shadow: 0 10px 40px rgba(0, 255, 255, 0.1);
}
.module-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.module-title {
font-size: 0.9rem;
font-weight: 600;
letter-spacing: 0.1em;
color: var(--cyan);
text-shadow: 0 0 10px var(--cyan);
}
.module-status {
font-size: 0.7rem;
padding: 4px 12px;
border-radius: 20px;
background: rgba(0, 255, 136, 0.1);
color: var(--success);
border: 1px solid var(--success);
}
.neural-core {
grid-column: span 1;
}
.core-visual {
position: relative;
height: 200px;
display: flex;
align-items: center;
justify-content: center;
}
.core-rings {
position: absolute;
width: 150px;
height: 150px;
}
.ring {
position: absolute;
border: 2px solid var(--cyan);
border-radius: 50%;
opacity: 0.5;
animation: ringPulse 3s ease-in-out infinite;
}
.ring:nth-child(1) {
width: 100%;
height: 100%;
animation-delay: 0s;
}
.ring:nth-child(2) {
width: 75%;
height: 75%;
top: 12.5%;
left: 12.5%;
border-color: var(--magenta);
animation-delay: 0.5s;
}
.ring:nth-child(3) {
width: 50%;
height: 50%;
top: 25%;
left: 25%;
animation-delay: 1s;
}
@keyframes ringPulse {
0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.5; }
50% { transform: scale(1.1) rotate(180deg); opacity: 1; }
}
.core-center {
width: 40px;
height: 40px;
background: linear-gradient(135deg, var(--cyan), var(--magenta));
border-radius: 50%;
z-index: 1;
animation: corePulse 2s ease-in-out infinite;
}
@keyframes corePulse {
0%, 100% { box-shadow: 0 0 20px var(--cyan), 0 0 40px var(--magenta); }
50% { box-shadow: 0 0 40px var(--cyan), 0 0 80px var(--magenta); }
}
.core-stats {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 15px;
margin-top: 20px;
}
.stat {
text-align: center;
padding: 10px;
background: rgba(0, 255, 255, 0.05);
border-radius: 8px;
}
.stat-value {
font-size: 1.5rem;
font-weight: 700;
color: var(--cyan);
text-shadow: 0 0 10px var(--cyan);
}
.stat-label {
font-size: 0.7rem;
color: var(--text-secondary);
margin-top: 5px;
}
.waveform-container {
height: 120px;
margin: 20px 0;
}
.waveform-canvas {
width: 100%;
height: 100%;
border-radius: 8px;
}
.pattern-grid {
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: 4px;
margin: 20px 0;
}
.pattern-cell {
aspect-ratio: 1;
background: rgba(0, 255, 255, 0.1);
border-radius: 4px;
transition: all 0.3s ease;
}
.pattern-cell.active {
background: var(--cyan);
box-shadow: 0 0 10px var(--cyan);
}
.pattern-cell.magenta {
background: var(--magenta);
box-shadow: 0 0 10px var(--magenta);
}
.evolution-log {
max-height: 300px;
overflow-y: auto;
}
.log-entry {
display: flex;
gap: 15px;
padding: 12px;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
font-size: 0.8rem;
transition: background 0.3s ease;
}
.log-entry:hover {
background: rgba(0, 255, 255, 0.05);
}
.log-time {
color: var(--text-secondary);
white-space: nowrap;
}
.log-type {
padding: 2px 8px;
border-radius: 4px;
font-size: 0.7rem;
white-space: nowrap;
}
.log-type.mutation {
background: rgba(255, 0, 255, 0.2);
color: var(--magenta);
}
.log-type.synthesis {
background: rgba(0, 255, 255, 0.2);
color: var(--cyan);
}
.log-type.evolution {
background: rgba(0, 255, 136, 0.2);
color: var(--success);
}
.log-type.heal {
background: rgba(255, 170, 0, 0.2);
color: var(--warning);
}
.log-message {
color: var(--text-primary);
flex: 1;
}
.health-bars {
display: flex;
flex-direction: column;
gap: 15px;
}
.health-item {
display: flex;
flex-direction: column;
gap: 8px;
}
.health-label {
display: flex;
justify-content: space-between;
font-size: 0.8rem;
}
.health-bar {
height: 8px;
background: rgba(255, 255, 255, 0.1);
border-radius: 4px;
overflow: hidden;
}
.health-fill {
height: 100%;
border-radius: 4px;
transition: width 1s ease;
}
.health-fill.high {
background: linear-gradient(90deg, var(--success), #00ffaa);
box-shadow: 0 0 10px var(--success);
}
.health-fill.medium {
background: linear-gradient(90deg, var(--warning), #ffcc00);
box-shadow: 0 0 10px var(--warning);
}
.health-fill.low {
background: linear-gradient(90deg, var(--danger), #ff6688);
box-shadow: 0 0 10px var(--danger);
}
.music-gen {
grid-column: span 2;
}
.track-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 15px;
margin-top: 20px;
}
.track {
background: rgba(0, 255, 255, 0.05);
border: 1px solid rgba(0, 255, 255, 0.1);
border-radius: 12px;
padding: 15px;
transition: all 0.3s ease;
}
.track:hover {
border-color: var(--cyan);
transform: scale(1.02);
}
.track-title {
font-weight: 600;
margin-bottom: 8px;
color: var(--cyan);
}
.track-meta {
font-size: 0.75rem;
color: var(--text-secondary);
display: flex;
justify-content: space-between;
}
.track-waveform {
height: 40px;
margin: 10px 0;
}
.control-panel {
grid-column: span 3;
display: flex;
justify-content: center;
gap: 20px;
flex-wrap: wrap;
}
@media (max-width: 1200px) {
.control-panel, .music-gen {
grid-column: span 2;
}
}
@media (max-width: 768px) {
.control-panel, .music-gen {
grid-column: span 1;
}
}
.ctrl-btn {
padding: 15px 30px;
border: 2px solid var(--cyan);
background: transparent;
color: var(--cyan);
font-family: 'JetBrains Mono', monospace;
font-size: 0.9rem;
font-weight: 600;
letter-spacing: 0.1em;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.ctrl-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(0, 255, 255, 0.2), transparent);
transition: left 0.5s ease;
}
.ctrl-btn:hover::before {
left: 100%;
}
.ctrl-btn:hover {
background: rgba(0, 255, 255, 0.1);
box-shadow: 0 0 30px rgba(0, 255, 255, 0.3);
transform: translateY(-2px);
}
.ctrl-btn.primary {
background: linear-gradient(135deg, var(--cyan), var(--magenta));
border: none;
color: var(--bg-dark);
}
.ctrl-btn.primary:hover {
box-shadow: 0 0 40px var(--cyan), 0 0 60px var(--magenta);
}
.ctrl-btn.danger {
border-color: var(--danger);
color: var(--danger);
}
.ctrl-btn.danger:hover {
background: rgba(255, 68, 102, 0.1);
box-shadow: 0 0 30px rgba(255, 68, 102, 0.3);
}
.metrics-row {
display: flex;
justify-content: space-around;
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.metric {
text-align: center;
}
.metric-value {
font-size: 1.8rem;
font-weight: 700;
background: linear-gradient(135deg, var(--cyan), var(--magenta));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.metric-label {
font-size: 0.7rem;
color: var(--text-secondary);
margin-top: 5px;
}
.healing-nodes {
display: flex;
justify-content: space-around;
margin: 20px 0;
}
.heal-node {
width: 60px;
height: 60px;
border: 2px solid var(--success);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.8rem;
position: relative;
transition: all 0.3s ease;
}
.heal-node.active {
background: rgba(0, 255, 136, 0.2);
box-shadow: 0 0 20px var(--success);
}
.heal-node::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
border: 2px solid var(--success);
border-radius: 50%;
animation: healPulse 2s ease-out infinite;
opacity: 0;
}
.heal-node.active::after {
opacity: 1;
}
@keyframes healPulse {
0% { transform: scale(1); opacity: 1; }
100% { transform: scale(1.5); opacity: 0; }
}
.scrollbar-custom::-webkit-scrollbar {
width: 6px;
}
.scrollbar-custom::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.05);
border-radius: 3px;
}
.scrollbar-custom::-webkit-scrollbar-thumb {
background: var(--cyan);
border-radius: 3px;
}
footer {
text-align: center;
padding: 40px 20px;
color: var(--text-secondary);
font-size: 0.8rem;
}
.uptime {
color: var(--cyan);
font-weight: 600;
}
</style>
</head>
<body>
<canvas id="neural-bg"></canvas>
<div class="container">
<header>
<h1 class="logo">AIMES</h1>
<p class="tagline">AUTONOMOUS AI MUSIC EVOLUTION SYSTEM v3.7.1</p>
<div class="system-status">
<div class="status-item">
<span class="status-dot active"></span>
<span>Neural Core Online</span>
</div>
<div class="status-item">
<span class="status-dot processing"></span>
<span>Evolution Active</span>
</div>
<div class="status-item">
<span class="status-dot active"></span>
<span>24/7 Operation</span>
</div>
<div class="status-item">
<span class="status-dot warning"></span>
<span>Self-Healing</span>
</div>
</div>
</header>
<div class="dashboard">
<!-- Neural Core Module -->
<div class="module neural-core">
<div class="module-header">
<span class="module-title">NEURAL CORE</span>
<span class="module-status">ACTIVE</span>
</div>
<div class="core-visual">
<div class="core-rings">
<div class="ring"></div>
<div class="ring"></div>
<div class="ring"></div>
</div>
<div class="core-center"></div>
</div>
<div class="core-stats">
<div class="stat">
<div class="stat-value" id="neurons">847M</div>
<div class="stat-label">ACTIVE NEURONS</div>
</div>
<div class="stat">
<div class="stat-value" id="synapses">2.4T</div>
<div class="stat-label">SYNAPTIC LINKS</div>
</div>
<div class="stat">
<div class="stat-value" id="learning-rate">0.0042</div>
<div class="stat-label">LEARNING RATE</div>
</div>
<div class="stat">
<div class="stat-value" id="generation">Gen 4891</div>
<div class="stat-label">EVOLUTION GEN</div>
</div>
</div>
</div>
<!-- Pattern Synthesis Module -->
<div class="module">
<div class="module-header">
<span class="module-title">PATTERN SYNTHESIS</span>
<span class="module-status">GENERATING</span>
</div>
<div class="pattern-grid" id="pattern-grid">
<!-- Generated by JS -->
</div>
<div class="waveform-container">
<canvas class="waveform-canvas" id="pattern-waveform"></canvas>
</div>
<div class="metrics-row">
<div class="metric">
<div class="metric-value" id="patterns-hour">1,247</div>
<div class="metric-label">PATTERNS/HR</div>
</div>
<div class="metric">
<div class="metric-value" id="novelty">94.7%</div>
<div class="metric-label">NOVELTY SCORE</div>
</div>
</div>
</div>
<!-- Self-Healing Module -->
<div class="module">
<div class="module-header">
<span class="module-title">SELF-HEALING</span>
<span class="module-status">MONITORING</span>
</div>
<div class="healing-nodes">
<div class="heal-node active">N1</div>
<div class="heal-node">N2</div>
<div class="heal-node active">N3</div>
<div class="heal-node">N4</div>
</div>
<div class="health-bars">
<div class="health-item">
<div class="health-label">
<span>Memory Integrity</span>
<span id="mem-val">98.7%</span>
</div>
<div class="health-bar">
<div class="health-fill high" style="width: 98.7%"></div>
</div>
</div>
<div class="health-item">
<div class="health-label">
<span>Neural Pathway Health</span>
<span id="neural-val">95.2%</span>
</div>
<div class="health-bar">
<div class="health-fill high" style="width: 95.2%"></div>
</div>
</div>
<div class="health-item">
<div class="health-label">
<span>Pattern Coherence</span>
<span id="pattern-val">87.4%</span>
</div>
<div class="health-bar">
<div class="health-fill medium" style="width: 87.4%"></div>
</div>
</div>
<div class="health-item">
<div class="health-label">
<span>Evolution Stability</span>
<span id="evo-val">92.1%</span>
</div>
<div class="health-bar">
<div class="health-fill high" style="width: 92.1%"></div>
</div>
</div>
</div>
</div>
<!-- Evolution Log Module -->
<div class="module">
<div class="module-header">
<span class="module-title">EVOLUTION LOG</span>
<span class="module-status">LIVE</span>
</div>
<div class="evolution-log scrollbar-custom" id="evolution-log">
<!-- Generated by JS -->
</div>
</div>
<!-- Music Generation Module -->
<div class="module music-gen">
<div class="module-header">
<span class="module-title">MUSIC GENERATION</span>
<span class="module-status">COMPOSING</span>
</div>
<div class="waveform-container" style="height: 80px;">
<canvas class="waveform-canvas" id="main-waveform"></canvas>
</div>
<div class="track-list">
<div class="track">
<div class="track-title">Ethereal Cascade #4891</div>
<canvas class="waveform-canvas track-waveform" id="track-1"></canvas>
<div class="track-meta">
<span>Gen: 4891</span>
<span>BPM: 128</span>
<span>3:42</span>
</div>
</div>
<div class="track">
<div class="track-title">Quantum Drift #4890</div>
<canvas class="waveform-canvas track-waveform" id="track-2"></canvas>
<div class="track-meta">
<span>Gen: 4890</span>
<span>BPM: 140</span>
<span>4:15</span>
</div>
</div>
<div class="track">
<div class="track-title">Neural Symphony #4889</div>
<canvas class="waveform-canvas track-waveform" id="track-3"></canvas>
<div class="track-meta">
<span>Gen: 4889</span>
<span>BPM: 120</span>
<span>5:08</span>
</div>
</div>
<div class="track">
<div class="track-title">Synth Nebula #4888</div>
<canvas class="waveform-canvas track-waveform" id="track-4"></canvas>
<div class="track-meta">
<span>Gen: 4888</span>
<span>BPM: 135</span>
<span>3:56</span>
</div>
</div>
</div>
</div>
<!-- System Health Module -->
<div class="module">
<div class="module-header">
<span class="module-title">SYSTEM HEALTH</span>
<span class="module-status">OPTIMAL</span>
</div>
<div class="health-bars">
<div class="health-item">
<div class="health-label">
<span>CPU Utilization</span>
<span id="cpu-val">67.3%</span>
</div>
<div class="health-bar">
<div class="health-fill high" id="cpu-bar" style="width: 67.3%"></div>
</div>
</div>
<div class="health-item">
<div class="health-label">
<span>GPU Compute</span>
<span id="gpu-val">89.1%</span>
</div>
<div class="health-bar">
<div class="health-fill medium" id="gpu-bar" style="width: 89.1%"></div>
</div>
</div>
<div class="health-item">
<div class="health-label">
<span>Memory Usage</span>
<span id="memory-val">72.8%</span>
</div>
<div class="health-bar">
<div class="health-fill high" id="memory-bar" style="width: 72.8%"></div>
</div>
</div>
<div class="health-item">
<div class="health-label">
<span>Storage I/O</span>
<span id="storage-val">45.2%</span>
</div>
<div class="health-bar">
<div class="health-fill high" id="storage-bar" style="width: 45.2%"></div>
</div>
</div>
<div class="health-item">
<div class="health-label">
<span>Network Bandwidth</span>
<span id="network-val">23.7%</span>
</div>
<div class="health-bar">
<div class="health-fill high" id="network-bar" style="width: 23.7%"></div>
</div>
</div>
</div>
<div class="metrics-row">
<div class="metric">
<div class="metric-value" id="temp">42°C</div>
<div class="metric-label">CORE TEMP</div>
</div>
<div class="metric">
<div class="metric-value" id="power">847W</div>
<div class="metric-label">POWER DRAW</div>
</div>
</div>
</div>
<!-- Control Panel -->
<div class="module control-panel">
<button class="ctrl-btn primary" onclick="triggerEvolution()">TRIGGER EVOLUTION</button>
<button class="ctrl-btn" onclick="synthesizePattern()">SYNTHESIZE PATTERN</button>
<button class="ctrl-btn" onclick="exportGenome()">EXPORT GENOME</button>
<button class="ctrl-btn" onclick="runDiagnostics()">RUN DIAGNOSTICS</button>
<button class="ctrl-btn danger" onclick="emergencyHalt()">EMERGENCY HALT</button>
</div>
</div>
<footer>
<p>AIMES - Autonomous AI Music Evolution System | Continuous Operation Since 2024</p>
<p>Uptime: <span class="uptime" id="uptime">847 days, 14:32:07</span></p>
</footer>
</div>
<script>
// Neural Network Background
const canvas = document.getElementById('neural-bg');
const ctx = canvas.getContext('2d');
function resizeCanvas() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
resizeCanvas();
window.addEventListener('resize', resizeCanvas);
class Node {
constructor() {
this.x = Math.random() * canvas.width;
this.y = Math.random() * canvas.height;
this.vx = (Math.random() - 0.5) * 0.5;
this.vy = (Math.random() - 0.5) * 0.5;
this.radius = Math.random() * 2 + 1;
}
update() {
this.x += this.vx;
this.y += this.vy;
if (this.x < 0 || this.x > canvas.width) this.vx *= -1;
if (this.y < 0 || this.y > canvas.height) this.vy *= -1;
}
draw() {
ctx.beginPath();
ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
ctx.fillStyle = '#00ffff';
ctx.fill();
}
}
const nodes = Array.from({ length: 80 }, () => new Node());
function drawConnections() {
for (let i = 0; i < nodes.length; i++) {
for (let j = i + 1; j < nodes.length; j++) {
const dx = nodes[i].x - nodes[j].x;
const dy = nodes[i].y - nodes[j].y;
const distance = Math.sqrt(dx * dx + dy * dy);
if (distance < 150) {
ctx.beginPath();
ctx.moveTo(nodes[i].x, nodes[i].y);
ctx.lineTo(nodes[j].x, nodes[j].y);
const opacity = 1 - distance / 150;
ctx.strokeStyle = `rgba(0, 255, 255, ${opacity * 0.3})`;
ctx.lineWidth = 0.5;
ctx.stroke();
}
}
}
}
function animateBackground() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
nodes.forEach(node => {
node.update();
node.draw();
});
drawConnections();
requestAnimationFrame(animateBackground);
}
animateBackground();
// Waveform Animation
function createWaveform(canvasId, color1, color2, speed) {
const waveCanvas = document.getElementById(canvasId);
if (!waveCanvas) return;
const waveCtx = waveCanvas.getContext('2d');
const width = waveCanvas.offsetWidth;
const height = waveCanvas.offsetHeight;
waveCanvas.width = width;
waveCanvas.height = height;
let phase = 0;
function drawWave() {
waveCtx.clearRect(0, 0, width, height);
const gradient = waveCtx.createLinearGradient(0, 0, width, 0);
gradient.addColorStop(0, color1);
gradient.addColorStop(1, color2);
waveCtx.beginPath();
waveCtx.moveTo(0, height / 2);
for (let x = 0; x < width; x++) {
const y = height / 2 +
Math.sin(x * 0.02 + phase) * 15 +
Math.sin(x * 0.01 + phase * 0.5) * 10 +
Math.sin(x * 0.05 + phase * 2) * 5;
waveCtx.lineTo(x, y);
}
waveCtx.strokeStyle = gradient;
waveCtx.lineWidth = 2;
waveCtx.stroke();
// Glow effect
waveCtx.shadowColor = color1;
waveCtx.shadowBlur = 10;
waveCtx.stroke();
waveCtx.shadowBlur = 0;
phase += speed;
requestAnimationFrame(drawWave);
}
drawWave();
}
createWaveform('pattern-waveform', '#00ffff', '#ff00ff', 0.05);
createWaveform('main-waveform', '#00ffff', '#ff00ff', 0.03);
createWaveform('track-1', '#00ffff', '#00ff88', 0.04);
createWaveform('track-2', '#ff00ff', '#ff4488', 0.06);
createWaveform('track-3', '#00ffff', '#ff00ff', 0.05);
createWaveform('track-4', '#00ff88', '#00ffff', 0.07);
// Pattern Grid
const patternGrid = document.getElementById('pattern-grid');
for (let i = 0; i < 64; i++) {
const cell = document.createElement('div');
cell.className = 'pattern-cell';
patternGrid.appendChild(cell);
}
function animatePatternGrid() {
const cells = patternGrid.querySelectorAll('.pattern-cell');
cells.forEach(cell => {
cell.classList.remove('active', 'magenta');
});
const activeCount = Math.floor(Math.random() * 15) + 10;
for (let i = 0; i < activeCount; i++) {
const randomIndex = Math.floor(Math.random() * cells.length);
cells[randomIndex].classList.add(Math.random() > 0.5 ? 'active' : 'magenta');
}
}
setInterval(animatePatternGrid, 300);
// Evolution Log
const logTypes = ['mutation', 'synthesis', 'evolution', 'heal'];
const logMessages = {
mutation: [
'Pattern DNA mutation detected in sector 7',
'Harmonic sequence modified: +0.3% novelty',
'Rhythm gene crossover successful',
'Melodic variation introduced'
],
synthesis: [
'New pattern synthesized: #4892',
'Combining patterns #4891 + #4887',
'Frequency modulation applied',
'Timbre synthesis complete'
],
evolution: [
'Generation 4891 fitness score: 94.7%',
'Selecting top 12% for next generation',
'Evolution cycle completed',
'Population diversity: optimal'
],
heal: [
'Corrupted pathway repaired in node N3',
'Memory leak patched successfully',
'Neural connection restored',
'Self-diagnostic passed'
]
};
function addLogEntry() {
const log = document.getElementById('evolution-log');
const type = logTypes[Math.floor(Math.random() * logTypes.length)];
const messages = logMessages[type];
const message = messages[Math.floor(Math.random() * messages.length)];
const now = new Date();
const time = now.toTimeString().slice(0, 8);
const entry = document.createElement('div');
entry.className = 'log-entry';
entry.innerHTML = `
<span class="log-time">${time}</span>
<span class="log-type ${type}">${type.toUpperCase()}</span>
<span class="log-message">${message}</span>
`;
log.insertBefore(entry, log.firstChild);
if (log.children.length > 20) {
log.removeChild(log.lastChild);
}
}
// Initialize with some entries
for (let i = 0; i < 8; i++) {
addLogEntry();
}
setInterval(addLogEntry, 3000);
// Update stats randomly
function updateStats() {
// CPU
const cpu = (60 + Math.random() * 25).toFixed(1);
document.getElementById('cpu-val').textContent = cpu + '%';
document.getElementById('cpu-bar').style.width = cpu + '%';
// GPU
const gpu = (80 + Math.random() * 15).toFixed(1);
document.getElementById('gpu-val').textContent = gpu + '%';
document.getElementById('gpu-bar').style.width = gpu + '%';
// Memory
const memory = (68 + Math.random() * 12).toFixed(1);
document.getElementById('memory-val').textContent = memory + '%';
document.getElementById('memory-bar').style.width = memory + '%';
// Storage
const storage = (40 + Math.random() * 20).toFixed(1);
document.getElementById('storage-val').textContent = storage + '%';
document.getElementById('storage-bar').style.width = storage + '%';
// Network
const network = (15 + Math.random() * 30).toFixed(1);
document.getElementById('network-val').textContent = network + '%';
document.getElementById('network-bar').style.width = network + '%';
// Temperature
const temp = Math.floor(38 + Math.random() * 10);
document.getElementById('temp').textContent = temp + '°C';
// Power
const power = Math.floor(800 + Math.random() * 150);
document.getElementById('power').textContent = power + 'W';
// Patterns per hour
const patterns = Math.floor(1200 + Math.random() * 100);
document.getElementById('patterns-hour').textContent = patterns.toLocaleString();
// Novelty
const novelty = (92 + Math.random() * 6).toFixed(1);
document.getElementById('novelty').textContent = novelty + '%';
}
setInterval(updateStats, 2000);
// Uptime counter
let uptimeSeconds = 847 * 24 * 3600 + 14 * 3600 + 32 * 60 + 7;
function updateUptime() {
uptimeSeconds++;
const days = Math.floor(uptimeSeconds / 86400);
const hours = Math.floor((uptimeSeconds % 86400) / 3600);
const minutes = Math.floor((uptimeSeconds % 3600) / 60);
const seconds = uptimeSeconds % 60;
document.getElementById('uptime').textContent =
`${days} days, ${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
}
setInterval(updateUptime, 1000);
// Healing nodes animation
function animateHealingNodes() {
const nodes = document.querySelectorAll('.heal-node');
nodes.forEach(node => {
if (Math.random() > 0.7) {
node.classList.toggle('active');
}
});
}
setInterval(animateHealingNodes, 2000);
// Button functions
function triggerEvolution() {
const gen = document.getElementById('generation');
const currentGen = parseInt(gen.textContent.replace('Gen ', '')) + 1;
gen.textContent = 'Gen ' + currentGen;
addLogEntry();
// Flash effect
document.body.style.boxShadow = 'inset 0 0 100px rgba(0, 255, 255, 0.3)';
setTimeout(() => {
document.body.style.boxShadow = 'none';
}, 300);
}
function synthesizePattern() {
const patterns = document.getElementById('patterns-hour');
const current = parseInt(patterns.textContent.replace(',', ''));
patterns.textContent = (current + 1).toLocaleString();
animatePatternGrid();
}
function exportGenome() {
alert('Exporting genome data...\n\nGenome Size: 2.4 TB\nPatterns: 4,891\nMutations: 847,293\n\nDownload will begin shortly.');
}
function runDiagnostics() {
const healNodes = document.querySelectorAll('.heal-node');
healNodes.forEach((node, i) => {
setTimeout(() => {
node.classList.add('active');
setTimeout(() => {
node.classList.remove('active');
}, 500);
}, i * 200);
});
}
function emergencyHalt() {
if (confirm('WARNING: This will halt all evolution processes.\n\nAre you sure you want to proceed?')) {
document.body.innerHTML = `
<div style="display: flex; align-items: center; justify-content: center; height: 100vh; background: #0a0a0f;">
<div style="text-align: center; color: #ff4466; font-family: 'JetBrains Mono', monospace;">
<h1 style="font-size: 4rem; text-shadow: 0 0 20px #ff4466;">SYSTEM HALTED</h1>
<p style="color: #808090; margin-top: 20px;">All processes terminated. Refresh to restart.</p>
</div>
</div>
`;
}
}
</script>
</body>
</html>