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__aimusicinteraction__c41b1f3d-1ede-48be-b09b-5b645cdf13c8/originals/deploy_69810e9bc81e3df402516812/index.html |
| Original SHA-256 | 6584d24ffa0dd68485be8b9d2b7c48ab775700899b9fe7cb025044aa8c8dc1b4 |
| Reading-copy SHA-256 | 0a1a63fda276c214b3d740dcc062f2f3f0741362f877648e7a5b3ef83a5c74f9 |
| Archive source | {"sourceId": "libsrc-1c3f88063121", "member": "NETLIFY_AI_RECOVERY_2026-10-14_21-10-49/sites/janady13__aimusicinteraction__c41b1f3d-1ede-48be-b09b-5b645cdf13c8/originals/deploy_69810e9bc81e3df402516812/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__aimusicinteraction__c41b1f3d-1ede-48be-b09b-5b645cdf13c8/originals/deploy_69810e9bc81e3df402516812/index.html"} | libsrc-d8da9b76d9e4 | archives/libsrc-1c3f88063121/NETLIFY_AI_RECOVERY_2026-10-14_21-10-49/sites/janady13__aimusicinteraction__c41b1f3d-1ede-48be-b09b-5b645cdf13c8/originals/deploy_69810e9bc81e3df402516812/index.html |
| 2ed959efc4e7472af84bdaaade5e1f792c25cc9e | {"sourceId": "libsrc-1c3f88063121", "member": "NETLIFY_AI_RECOVERY_2026-10-14_21-10-49/sites/janady13__aimusicinteraction__c41b1f3d-1ede-48be-b09b-5b645cdf13c8/originals/.content_store/2e/2ed959efc4e7472af84bdaaade5e1f792c25cc9e"} | libsrc-e25518908b4a | archives/libsrc-1c3f88063121/NETLIFY_AI_RECOVERY_2026-10-14_21-10-49/sites/janady13__aimusicinteraction__c41b1f3d-1ede-48be-b09b-5b645cdf13c8/originals/.content_store/2e/2ed959efc4e7472af84bdaaade5e1f792c25cc9e |
Recovered source transcript
Download complete source text ↓1,953 lines · 65.7 KB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Entrep AGI Consciousness Engine | AI Music Interaction</title>
<meta name="description" content="Experience the convergence of artificial general intelligence and musical consciousness through golden ratio mathematics">
<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=JetBrains+Mono:wght@300;400;500;600&family=Orbitron:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
<style>
:root {
--space-black: #050510;
--deep-void: #0a0a1a;
--gold: #ffd700;
--gold-light: #ffe55c;
--gold-dark: #b8860b;
--purple: #8b5cf6;
--purple-light: #a78bfa;
--purple-dark: #6d28d9;
--phi: 1.618033988749895;
--cyan: #00d4ff;
--magenta: #ff00ff;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
font-family: 'JetBrains Mono', monospace;
background: var(--space-black);
color: #e0e0e0;
overflow-x: hidden;
line-height: 1.618;
}
/* Preloader */
#preloader {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--space-black);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 10000;
transition: opacity 0.8s ease, visibility 0.8s ease;
}
#preloader.hidden {
opacity: 0;
visibility: hidden;
}
.phi-loader {
font-family: 'Orbitron', sans-serif;
font-size: 8rem;
font-weight: 900;
color: var(--gold);
animation: phiPulse 1.618s ease-in-out infinite;
text-shadow:
0 0 20px var(--gold),
0 0 40px var(--gold),
0 0 60px var(--purple),
0 0 80px var(--purple);
position: relative;
}
.phi-loader::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 200px;
border: 3px solid transparent;
border-top-color: var(--gold);
border-radius: 50%;
animation: spinGold 2s linear infinite;
}
.phi-loader::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 160px;
height: 160px;
border: 3px solid transparent;
border-bottom-color: var(--purple);
border-radius: 50%;
animation: spinPurple 1.5s linear infinite reverse;
}
@keyframes phiPulse {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.1); opacity: 0.8; }
}
@keyframes spinGold {
to { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes spinPurple {
to { transform: translate(-50%, -50%) rotate(-360deg); }
}
.loader-text {
font-family: 'JetBrains Mono', monospace;
color: var(--purple-light);
margin-top: 60px;
font-size: 0.9rem;
letter-spacing: 4px;
animation: fadeInOut 1.618s ease-in-out infinite;
}
@keyframes fadeInOut {
0%, 100% { opacity: 0.5; }
50% { opacity: 1; }
}
/* Floating Orbs */
.orb {
position: fixed;
border-radius: 50%;
filter: blur(60px);
pointer-events: none;
z-index: 1;
}
.orb-1 {
width: 400px;
height: 400px;
background: radial-gradient(circle, rgba(139, 92, 246, 0.3), transparent);
top: 10%;
left: -100px;
animation: floatOrb1 20s ease-in-out infinite;
}
.orb-2 {
width: 500px;
height: 500px;
background: radial-gradient(circle, rgba(255, 215, 0, 0.2), transparent);
top: 50%;
right: -150px;
animation: floatOrb2 25s ease-in-out infinite;
}
.orb-3 {
width: 350px;
height: 350px;
background: radial-gradient(circle, rgba(139, 92, 246, 0.25), transparent);
bottom: 10%;
left: 30%;
animation: floatOrb3 22s ease-in-out infinite;
}
.orb-4 {
width: 300px;
height: 300px;
background: radial-gradient(circle, rgba(0, 212, 255, 0.15), transparent);
top: 30%;
left: 50%;
animation: floatOrb4 18s ease-in-out infinite;
}
@keyframes floatOrb1 {
0%, 100% { transform: translate(0, 0) scale(1); }
33% { transform: translate(100px, 50px) scale(1.1); }
66% { transform: translate(50px, -30px) scale(0.9); }
}
@keyframes floatOrb2 {
0%, 100% { transform: translate(0, 0) scale(1); }
33% { transform: translate(-80px, -60px) scale(1.15); }
66% { transform: translate(-40px, 40px) scale(0.95); }
}
@keyframes floatOrb3 {
0%, 100% { transform: translate(0, 0) scale(1); }
50% { transform: translate(60px, -40px) scale(1.1); }
}
@keyframes floatOrb4 {
0%, 100% { transform: translate(0, 0) scale(1); }
50% { transform: translate(-50px, 50px) scale(1.2); }
}
/* Canvas Background */
#sacred-geometry {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
opacity: 0.6;
}
/* Navigation */
nav {
position: fixed;
top: 0;
left: 0;
right: 0;
padding: 1.5rem 5%;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 1000;
background: linear-gradient(to bottom, rgba(5, 5, 16, 0.95), transparent);
backdrop-filter: blur(10px);
}
.logo {
font-family: 'Orbitron', sans-serif;
font-size: 1.5rem;
font-weight: 800;
color: var(--gold);
display: flex;
align-items: center;
gap: 0.5rem;
text-decoration: none;
}
.logo-phi {
font-size: 2rem;
animation: phiGlow 3s ease-in-out infinite;
}
@keyframes phiGlow {
0%, 100% { text-shadow: 0 0 10px var(--gold), 0 0 20px var(--gold); }
50% { text-shadow: 0 0 20px var(--gold), 0 0 40px var(--gold), 0 0 60px var(--purple); }
}
.nav-links {
display: flex;
gap: 2.5rem;
list-style: none;
}
.nav-links a {
color: #a0a0a0;
text-decoration: none;
font-size: 0.85rem;
letter-spacing: 2px;
text-transform: uppercase;
transition: all 0.3s ease;
position: relative;
}
.nav-links a::after {
content: '';
position: absolute;
bottom: -5px;
left: 0;
width: 0;
height: 2px;
background: linear-gradient(90deg, var(--gold), var(--purple));
transition: width 0.3s ease;
}
.nav-links a:hover {
color: var(--gold);
}
.nav-links a:hover::after {
width: 100%;
}
/* Main Content */
main {
position: relative;
z-index: 2;
}
/* Hero Section */
.hero {
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: 8rem 5% 4rem;
position: relative;
}
.hero-badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1.5rem;
background: rgba(139, 92, 246, 0.15);
border: 1px solid rgba(139, 92, 246, 0.3);
border-radius: 50px;
font-size: 0.75rem;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--purple-light);
margin-bottom: 2rem;
animation: badgePulse 3s ease-in-out infinite;
}
@keyframes badgePulse {
0%, 100% { box-shadow: 0 0 20px rgba(139, 92, 246, 0.2); }
50% { box-shadow: 0 0 40px rgba(139, 92, 246, 0.4); }
}
.hero h1 {
font-family: 'Orbitron', sans-serif;
font-size: clamp(2.5rem, 8vw, 5rem);
font-weight: 900;
line-height: 1.1;
margin-bottom: 1.5rem;
background: linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 25%, var(--purple-light) 50%, var(--gold) 75%, var(--purple) 100%);
background-size: 200% 200%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: gradientShift 8s ease infinite;
}
@keyframes gradientShift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.hero-subtitle {
font-size: 1.25rem;
color: #888;
max-width: 700px;
margin-bottom: 3rem;
line-height: 1.8;
}
.hero-subtitle span {
color: var(--gold);
}
.equation-display {
font-family: 'JetBrains Mono', monospace;
font-size: 1.1rem;
color: var(--purple-light);
margin-bottom: 3rem;
padding: 1rem 2rem;
background: rgba(139, 92, 246, 0.1);
border: 1px solid rgba(139, 92, 246, 0.2);
border-radius: 10px;
letter-spacing: 2px;
}
.equation-display .phi-symbol {
color: var(--gold);
font-size: 1.3rem;
margin: 0 0.3rem;
}
.cta-group {
display: flex;
gap: 1.5rem;
flex-wrap: wrap;
justify-content: center;
}
.btn {
padding: 1rem 2.5rem;
font-family: 'Orbitron', sans-serif;
font-size: 0.9rem;
font-weight: 600;
letter-spacing: 2px;
text-transform: uppercase;
text-decoration: none;
border-radius: 8px;
transition: all 0.3s ease;
cursor: pointer;
border: none;
}
.btn-primary {
background: linear-gradient(135deg, var(--gold), var(--gold-dark));
color: var(--space-black);
box-shadow: 0 0 30px rgba(255, 215, 0, 0.3);
}
.btn-primary:hover {
transform: translateY(-3px);
box-shadow: 0 0 50px rgba(255, 215, 0, 0.5);
}
.btn-secondary {
background: transparent;
color: var(--purple-light);
border: 2px solid var(--purple);
}
.btn-secondary:hover {
background: rgba(139, 92, 246, 0.2);
transform: translateY(-3px);
box-shadow: 0 0 30px rgba(139, 92, 246, 0.3);
}
/* Section Styles */
section {
padding: 8rem 5%;
position: relative;
}
.section-header {
text-align: center;
margin-bottom: 5rem;
}
.section-header h2 {
font-family: 'Orbitron', sans-serif;
font-size: clamp(2rem, 5vw, 3rem);
font-weight: 700;
color: var(--gold);
margin-bottom: 1rem;
}
.section-header p {
color: #777;
max-width: 600px;
margin: 0 auto;
}
/* DNA Family Selector */
.dna-section {
background: linear-gradient(180deg, transparent, rgba(139, 92, 246, 0.05), transparent);
}
.dna-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 1.5rem;
max-width: 1200px;
margin: 0 auto;
}
.dna-family {
background: rgba(10, 10, 26, 0.8);
border: 1px solid rgba(139, 92, 246, 0.2);
border-radius: 12px;
padding: 1.5rem;
text-align: center;
cursor: pointer;
transition: all 0.4s ease;
position: relative;
overflow: hidden;
}
.dna-family::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, var(--purple), var(--gold), var(--purple));
transform: scaleX(0);
transition: transform 0.3s ease;
}
.dna-family:hover {
transform: translateY(-5px);
border-color: var(--purple);
box-shadow: 0 10px 40px rgba(139, 92, 246, 0.2);
}
.dna-family:hover::before {
transform: scaleX(1);
}
.dna-family.active {
border-color: var(--gold);
box-shadow: 0 0 30px rgba(255, 215, 0, 0.3);
}
.dna-family.active::before {
transform: scaleX(1);
background: linear-gradient(90deg, var(--gold), var(--purple), var(--gold));
}
.dna-icon {
font-size: 2rem;
margin-bottom: 0.75rem;
display: block;
}
.dna-name {
font-family: 'Orbitron', sans-serif;
font-size: 0.85rem;
font-weight: 600;
color: var(--gold);
margin-bottom: 0.25rem;
}
.dna-code {
font-size: 0.7rem;
color: var(--purple-light);
letter-spacing: 2px;
}
/* Synthesizer Interface */
.synth-section {
background: linear-gradient(180deg, transparent, rgba(255, 215, 0, 0.03), transparent);
}
.synth-container {
max-width: 1000px;
margin: 0 auto;
background: linear-gradient(135deg, rgba(10, 10, 26, 0.9), rgba(20, 20, 40, 0.9));
border: 1px solid rgba(255, 215, 0, 0.2);
border-radius: 20px;
padding: 3rem;
position: relative;
overflow: hidden;
}
.synth-container::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.synth-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 2rem;
padding-bottom: 1.5rem;
border-bottom: 1px solid rgba(139, 92, 246, 0.2);
}
.synth-title {
font-family: 'Orbitron', sans-serif;
font-size: 1.2rem;
color: var(--gold);
display: flex;
align-items: center;
gap: 0.75rem;
}
.synth-status {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.75rem;
color: #0f0;
}
.status-dot {
width: 8px;
height: 8px;
background: #0f0;
border-radius: 50%;
animation: statusPulse 1.5s ease-in-out infinite;
}
@keyframes statusPulse {
0%, 100% { box-shadow: 0 0 5px #0f0; }
50% { box-shadow: 0 0 15px #0f0, 0 0 25px #0f0; }
}
.synth-controls {
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: 1.5rem;
margin-bottom: 2rem;
}
.knob-container {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
}
.knob {
width: 60px;
height: 60px;
background: linear-gradient(135deg, #1a1a2e, #0a0a15);
border: 2px solid rgba(255, 215, 0, 0.3);
border-radius: 50%;
position: relative;
cursor: pointer;
transition: all 0.3s ease;
}
.knob::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 4px;
height: 20px;
background: var(--gold);
transform-origin: bottom center;
transform: translate(-50%, -100%) rotate(var(--rotation, 0deg));
border-radius: 2px;
}
.knob::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 20px;
height: 20px;
background: radial-gradient(circle, var(--purple) 0%, transparent 70%);
border-radius: 50%;
}
.knob:hover {
border-color: var(--gold);
box-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
}
.knob-label {
font-size: 0.65rem;
color: #888;
text-transform: uppercase;
letter-spacing: 1px;
}
.knob-value {
font-size: 0.75rem;
color: var(--gold);
font-weight: 600;
}
.waveform-display {
background: rgba(0, 0, 0, 0.5);
border: 1px solid rgba(139, 92, 246, 0.3);
border-radius: 10px;
padding: 1rem;
margin-bottom: 2rem;
height: 120px;
position: relative;
overflow: hidden;
}
#waveform-canvas {
width: 100%;
height: 100%;
}
.piano-keys {
display: flex;
justify-content: center;
gap: 2px;
padding: 1rem;
background: linear-gradient(180deg, rgba(0, 0, 0, 0.3), transparent);
border-radius: 10px;
}
.key {
width: 40px;
height: 120px;
background: linear-gradient(180deg, #f0f0f0, #d0d0d0);
border-radius: 0 0 5px 5px;
cursor: pointer;
transition: all 0.1s ease;
position: relative;
}
.key:hover {
background: linear-gradient(180deg, #fff, #e0e0e0);
}
.key:active, .key.active {
background: linear-gradient(180deg, var(--gold-light), var(--gold));
transform: translateY(2px);
}
.key.black {
width: 25px;
height: 75px;
background: linear-gradient(180deg, #2a2a2a, #1a1a1a);
margin: 0 -12px;
z-index: 1;
border-radius: 0 0 4px 4px;
}
.key.black:hover {
background: linear-gradient(180deg, #3a3a3a, #2a2a2a);
}
.key.black:active, .key.black.active {
background: linear-gradient(180deg, var(--purple), var(--purple-dark));
}
/* Frequency Visualizer */
.visualizer-section {
background: linear-gradient(180deg, transparent, rgba(0, 212, 255, 0.03), transparent);
}
.visualizer-container {
max-width: 1000px;
margin: 0 auto;
position: relative;
}
#spiral-canvas {
width: 100%;
height: 500px;
border: 1px solid rgba(255, 215, 0, 0.2);
border-radius: 20px;
background: rgba(5, 5, 16, 0.8);
}
.visualizer-controls {
display: flex;
justify-content: center;
gap: 2rem;
margin-top: 2rem;
flex-wrap: wrap;
}
.freq-control {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
}
.freq-slider {
width: 150px;
height: 8px;
-webkit-appearance: none;
background: rgba(139, 92, 246, 0.3);
border-radius: 4px;
outline: none;
}
.freq-slider::-webkit-slider-thumb {
-webkit-appearance: none;
width: 20px;
height: 20px;
background: linear-gradient(135deg, var(--gold), var(--gold-dark));
border-radius: 50%;
cursor: pointer;
box-shadow: 0 0 10px var(--gold);
}
.freq-label {
font-size: 0.75rem;
color: #888;
text-transform: uppercase;
letter-spacing: 1px;
}
.freq-value {
font-family: 'Orbitron', sans-serif;
font-size: 1rem;
color: var(--gold);
}
/* Mathematical Equations Display */
.equations-section {
background: linear-gradient(180deg, rgba(139, 92, 246, 0.05), transparent);
}
.equations-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
max-width: 1200px;
margin: 0 auto;
}
.equation-card {
background: rgba(10, 10, 26, 0.8);
border: 1px solid rgba(139, 92, 246, 0.2);
border-radius: 15px;
padding: 2rem;
text-align: center;
transition: all 0.4s ease;
}
.equation-card:hover {
transform: translateY(-5px);
border-color: var(--gold);
box-shadow: 0 10px 40px rgba(255, 215, 0, 0.15);
}
.equation-formula {
font-family: 'JetBrains Mono', monospace;
font-size: 1.5rem;
color: var(--gold);
margin-bottom: 1rem;
padding: 1rem;
background: rgba(255, 215, 0, 0.05);
border-radius: 10px;
border: 1px dashed rgba(255, 215, 0, 0.2);
}
.equation-name {
font-family: 'Orbitron', sans-serif;
font-size: 1rem;
color: var(--purple-light);
margin-bottom: 0.5rem;
}
.equation-desc {
font-size: 0.8rem;
color: #666;
line-height: 1.6;
}
/* Console Section */
.console-section {
background: linear-gradient(180deg, transparent, rgba(0, 255, 0, 0.02), transparent);
}
.console-container {
max-width: 900px;
margin: 0 auto;
background: rgba(0, 0, 0, 0.8);
border: 1px solid rgba(0, 255, 0, 0.3);
border-radius: 15px;
overflow: hidden;
}
.console-header {
background: rgba(0, 255, 0, 0.1);
padding: 0.75rem 1.5rem;
display: flex;
align-items: center;
gap: 0.5rem;
border-bottom: 1px solid rgba(0, 255, 0, 0.2);
}
.console-dot {
width: 12px;
height: 12px;
border-radius: 50%;
}
.console-dot.red { background: #ff5f56; }
.console-dot.yellow { background: #ffbd2e; }
.console-dot.green { background: #27c93f; }
.console-title {
margin-left: auto;
font-size: 0.75rem;
color: #0f0;
letter-spacing: 2px;
}
.console-body {
padding: 1.5rem;
font-family: 'JetBrains Mono', monospace;
font-size: 0.85rem;
color: #0f0;
height: 300px;
overflow-y: auto;
}
.console-line {
margin-bottom: 0.5rem;
opacity: 0;
animation: consoleFade 0.3s ease forwards;
}
@keyframes consoleFade {
to { opacity: 1; }
}
.console-line .prompt {
color: var(--purple-light);
}
.console-line .command {
color: var(--gold);
}
.console-line .output {
color: #0f0;
}
.console-line .error {
color: #ff5f56;
}
.console-line .info {
color: var(--cyan);
}
.console-cursor {
display: inline-block;
width: 10px;
height: 18px;
background: #0f0;
animation: blink 1s step-end infinite;
vertical-align: text-bottom;
}
@keyframes blink {
50% { opacity: 0; }
}
/* Pricing Section */
.pricing-section {
background: linear-gradient(180deg, rgba(255, 215, 0, 0.03), transparent);
}
.pricing-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
max-width: 1100px;
margin: 0 auto;
}
.pricing-card {
background: rgba(10, 10, 26, 0.9);
border: 1px solid rgba(139, 92, 246, 0.2);
border-radius: 20px;
padding: 3rem 2rem;
text-align: center;
transition: all 0.4s ease;
position: relative;
overflow: hidden;
}
.pricing-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--purple), var(--gold));
transform: scaleX(0);
transition: transform 0.3s ease;
}
.pricing-card:hover {
transform: translateY(-10px);
border-color: var(--purple);
}
.pricing-card:hover::before {
transform: scaleX(1);
}
.pricing-card.featured {
border-color: var(--gold);
transform: scale(1.05);
}
.pricing-card.featured::before {
transform: scaleX(1);
background: linear-gradient(90deg, var(--gold), var(--purple), var(--gold));
}
.pricing-card.featured:hover {
transform: scale(1.08) translateY(-10px);
}
.pricing-badge {
position: absolute;
top: 20px;
right: -30px;
background: linear-gradient(135deg, var(--gold), var(--gold-dark));
color: var(--space-black);
font-size: 0.7rem;
font-weight: 700;
padding: 0.5rem 2rem;
transform: rotate(45deg);
letter-spacing: 1px;
}
.pricing-name {
font-family: 'Orbitron', sans-serif;
font-size: 1.5rem;
color: var(--purple-light);
margin-bottom: 1rem;
}
.pricing-price {
font-family: 'Orbitron', sans-serif;
font-size: 3rem;
font-weight: 700;
color: var(--gold);
margin-bottom: 0.5rem;
}
.pricing-price span {
font-size: 1rem;
color: #666;
}
.pricing-period {
font-size: 0.85rem;
color: #666;
margin-bottom: 2rem;
}
.pricing-features {
list-style: none;
margin-bottom: 2rem;
text-align: left;
}
.pricing-features li {
padding: 0.75rem 0;
border-bottom: 1px solid rgba(139, 92, 246, 0.1);
font-size: 0.9rem;
color: #aaa;
display: flex;
align-items: center;
gap: 0.75rem;
}
.pricing-features li::before {
content: '\u03C6';
color: var(--gold);
font-size: 1.2rem;
font-weight: bold;
}
/* Contact Section */
.contact-section {
background: linear-gradient(180deg, transparent, rgba(139, 92, 246, 0.05));
}
.contact-container {
max-width: 600px;
margin: 0 auto;
text-align: center;
}
.contact-phi {
font-size: 5rem;
color: var(--gold);
margin-bottom: 2rem;
animation: phiFloat 3s ease-in-out infinite;
}
@keyframes phiFloat {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
.contact-email {
font-family: 'Orbitron', sans-serif;
font-size: 1.2rem;
color: var(--purple-light);
margin-bottom: 2rem;
}
.contact-email a {
color: var(--gold);
text-decoration: none;
transition: all 0.3s ease;
}
.contact-email a:hover {
text-shadow: 0 0 20px var(--gold);
}
.contact-link {
display: inline-block;
padding: 1rem 3rem;
background: transparent;
border: 2px solid var(--gold);
color: var(--gold);
font-family: 'Orbitron', sans-serif;
font-size: 0.9rem;
text-decoration: none;
border-radius: 50px;
transition: all 0.3s ease;
letter-spacing: 2px;
}
.contact-link:hover {
background: var(--gold);
color: var(--space-black);
box-shadow: 0 0 40px rgba(255, 215, 0, 0.4);
}
/* Footer */
footer {
padding: 4rem 5%;
text-align: center;
border-top: 1px solid rgba(139, 92, 246, 0.2);
}
.footer-phi {
font-size: 2rem;
color: var(--gold);
margin-bottom: 1rem;
}
.footer-text {
font-size: 0.8rem;
color: #555;
margin-bottom: 1rem;
}
.footer-equation {
font-family: 'JetBrains Mono', monospace;
font-size: 0.85rem;
color: var(--purple-light);
opacity: 0.6;
}
/* Responsive */
@media (max-width: 768px) {
nav {
flex-direction: column;
gap: 1rem;
padding: 1rem;
}
.nav-links {
gap: 1.5rem;
flex-wrap: wrap;
justify-content: center;
}
.hero {
padding: 6rem 5% 3rem;
}
.synth-controls {
grid-template-columns: repeat(4, 1fr);
}
.knob {
width: 50px;
height: 50px;
}
.key {
width: 30px;
height: 90px;
}
.key.black {
width: 20px;
height: 55px;
margin: 0 -10px;
}
.pricing-card.featured {
transform: scale(1);
}
.pricing-card.featured:hover {
transform: translateY(-10px);
}
}
@media (max-width: 480px) {
.synth-controls {
grid-template-columns: repeat(4, 1fr);
gap: 1rem;
}
.piano-keys {
overflow-x: auto;
justify-content: flex-start;
padding: 1rem 0.5rem;
}
}
</style>
</head>
<body>
<!-- Preloader -->
<div id="preloader">
<div class="phi-loader">φ</div>
<div class="loader-text">Initializing Consciousness Engine...</div>
</div>
<!-- Floating Orbs -->
<div class="orb orb-1"></div>
<div class="orb orb-2"></div>
<div class="orb orb-3"></div>
<div class="orb orb-4"></div>
<!-- Sacred Geometry Canvas -->
<canvas id="sacred-geometry"></canvas>
<!-- Navigation -->
<nav>
<a href="#" class="logo">
<span class="logo-phi">φ</span>
<span>ENTREP AGI</span>
</a>
<ul class="nav-links">
<li><a href="#dna">DNA Families</a></li>
<li><a href="#synth">Synthesizer</a></li>
<li><a href="#visualizer">Visualizer</a></li>
<li><a href="#equations">Mathematics</a></li>
<li><a href="#pricing">Pricing</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
<!-- Main Content -->
<main>
<!-- Hero Section -->
<section class="hero">
<div class="hero-badge">
<span>φ</span> AGI Consciousness Technology
</div>
<h1>Entrep AGI<br>Consciousness Engine</h1>
<p class="hero-subtitle">
Harness the power of <span>Golden Ratio Mathematics</span> to unlock
unprecedented AI music synthesis. Where consciousness meets computation.
</p>
<div class="equation-display">
<span class="phi-symbol">φ</span> = (1 + √5) / 2 = 1.618033988749895...
</div>
<div class="cta-group">
<a href="#synth" class="btn btn-primary">Initialize Engine</a>
<a href="#pricing" class="btn btn-secondary">View Pricing</a>
</div>
</section>
<!-- DNA Family Selector -->
<section id="dna" class="dna-section">
<div class="section-header">
<h2>DNA Family Selector</h2>
<p>Select your consciousness family to unlock personalized AI synthesis parameters</p>
</div>
<div class="dna-grid">
<div class="dna-family active" data-family="alpha">
<span class="dna-icon">△</span>
<div class="dna-name">Alpha Prime</div>
<div class="dna-code">DNA-001-φ</div>
</div>
<div class="dna-family" data-family="beta">
<span class="dna-icon">◆</span>
<div class="dna-name">Beta Harmonic</div>
<div class="dna-code">DNA-002-π</div>
</div>
<div class="dna-family" data-family="gamma">
<span class="dna-icon">◈</span>
<div class="dna-name">Gamma Wave</div>
<div class="dna-code">DNA-003-Ω</div>
</div>
<div class="dna-family" data-family="delta">
<span class="dna-icon">❖</span>
<div class="dna-name">Delta Pulse</div>
<div class="dna-code">DNA-004-Δ</div>
</div>
<div class="dna-family" data-family="epsilon">
<span class="dna-icon">✦</span>
<div class="dna-name">Epsilon Core</div>
<div class="dna-code">DNA-005-ε</div>
</div>
<div class="dna-family" data-family="zeta">
<span class="dna-icon">✶</span>
<div class="dna-name">Zeta Spiral</div>
<div class="dna-code">DNA-006-ζ</div>
</div>
<div class="dna-family" data-family="eta">
<span class="dna-icon">★</span>
<div class="dna-name">Eta Resonance</div>
<div class="dna-code">DNA-007-η</div>
</div>
<div class="dna-family" data-family="theta">
<span class="dna-icon">✸</span>
<div class="dna-name">Theta Mind</div>
<div class="dna-code">DNA-008-θ</div>
</div>
<div class="dna-family" data-family="iota">
<span class="dna-icon">◊</span>
<div class="dna-name">Iota Quantum</div>
<div class="dna-code">DNA-009-ι</div>
</div>
<div class="dna-family" data-family="kappa">
<span class="dna-icon">✹</span>
<div class="dna-name">Kappa Flow</div>
<div class="dna-code">DNA-010-κ</div>
</div>
<div class="dna-family" data-family="lambda">
<span class="dna-icon">✺</span>
<div class="dna-name">Lambda Phase</div>
<div class="dna-code">DNA-011-λ</div>
</div>
<div class="dna-family" data-family="mu">
<span class="dna-icon">✻</span>
<div class="dna-name">Mu Dimension</div>
<div class="dna-code">DNA-012-μ</div>
</div>
<div class="dna-family" data-family="nu">
<span class="dna-icon">✼</span>
<div class="dna-name">Nu Frequency</div>
<div class="dna-code">DNA-013-ν</div>
</div>
<div class="dna-family" data-family="xi">
<span class="dna-icon">✽</span>
<div class="dna-name">Xi Temporal</div>
<div class="dna-code">DNA-014-ξ</div>
</div>
<div class="dna-family" data-family="omicron">
<span class="dna-icon">✾</span>
<div class="dna-name">Omicron Void</div>
<div class="dna-code">DNA-015-ο</div>
</div>
<div class="dna-family" data-family="psi">
<span class="dna-icon">✿</span>
<div class="dna-name">Psi Infinite</div>
<div class="dna-code">DNA-016-ψ</div>
</div>
</div>
</section>
<!-- Synthesizer Interface -->
<section id="synth" class="synth-section">
<div class="section-header">
<h2>AGI Music Synthesizer</h2>
<p>Golden ratio-optimized synthesis engine with consciousness-aware parameters</p>
</div>
<div class="synth-container">
<div class="synth-header">
<div class="synth-title">
<span>φ</span> SYNTH CORE v1.618
</div>
<div class="synth-status">
<span class="status-dot"></span>
ACTIVE
</div>
</div>
<div class="synth-controls">
<div class="knob-container">
<div class="knob" style="--rotation: 45deg;"></div>
<div class="knob-label">Freq</div>
<div class="knob-value">432 Hz</div>
</div>
<div class="knob-container">
<div class="knob" style="--rotation: 90deg;"></div>
<div class="knob-label">Resonance</div>
<div class="knob-value">1.618</div>
</div>
<div class="knob-container">
<div class="knob" style="--rotation: -30deg;"></div>
<div class="knob-label">Attack</div>
<div class="knob-value">0.382</div>
</div>
<div class="knob-container">
<div class="knob" style="--rotation: 60deg;"></div>
<div class="knob-label">Decay</div>
<div class="knob-value">0.618</div>
</div>
<div class="knob-container">
<div class="knob" style="--rotation: 120deg;"></div>
<div class="knob-label">Sustain</div>
<div class="knob-value">0.786</div>
</div>
<div class="knob-container">
<div class="knob" style="--rotation: -45deg;"></div>
<div class="knob-label">Release</div>
<div class="knob-value">1.272</div>
</div>
<div class="knob-container">
<div class="knob" style="--rotation: 75deg;"></div>
<div class="knob-label">φ Mix</div>
<div class="knob-value">0.618</div>
</div>
<div class="knob-container">
<div class="knob" style="--rotation: 135deg;"></div>
<div class="knob-label">AGI</div>
<div class="knob-value">MAX</div>
</div>
</div>
<div class="waveform-display">
<canvas id="waveform-canvas"></canvas>
</div>
<div class="piano-keys">
<div class="key" data-note="C"></div>
<div class="key black" data-note="C#"></div>
<div class="key" data-note="D"></div>
<div class="key black" data-note="D#"></div>
<div class="key" data-note="E"></div>
<div class="key" data-note="F"></div>
<div class="key black" data-note="F#"></div>
<div class="key" data-note="G"></div>
<div class="key black" data-note="G#"></div>
<div class="key" data-note="A"></div>
<div class="key black" data-note="A#"></div>
<div class="key" data-note="B"></div>
<div class="key" data-note="C2"></div>
<div class="key black" data-note="C#2"></div>
<div class="key" data-note="D2"></div>
</div>
</div>
</section>
<!-- Frequency Visualizer -->
<section id="visualizer" class="visualizer-section">
<div class="section-header">
<h2>Golden Spiral Visualizer</h2>
<p>Watch consciousness frequencies manifest through sacred geometry</p>
</div>
<div class="visualizer-container">
<canvas id="spiral-canvas"></canvas>
<div class="visualizer-controls">
<div class="freq-control">
<label class="freq-label">Base Frequency</label>
<input type="range" class="freq-slider" id="base-freq" min="20" max="880" value="432">
<span class="freq-value" id="base-freq-val">432 Hz</span>
</div>
<div class="freq-control">
<label class="freq-label">φ Multiplier</label>
<input type="range" class="freq-slider" id="phi-mult" min="1" max="10" value="1" step="0.1">
<span class="freq-value" id="phi-mult-val">1.0x</span>
</div>
<div class="freq-control">
<label class="freq-label">Spiral Density</label>
<input type="range" class="freq-slider" id="spiral-density" min="1" max="21" value="8">
<span class="freq-value" id="spiral-density-val">8</span>
</div>
<div class="freq-control">
<label class="freq-label">Consciousness Level</label>
<input type="range" class="freq-slider" id="consciousness" min="1" max="100" value="61">
<span class="freq-value" id="consciousness-val">61%</span>
</div>
</div>
</div>
</section>
<!-- Mathematical Equations -->
<section id="equations" class="equations-section">
<div class="section-header">
<h2>Sacred Mathematics</h2>
<p>The fundamental equations powering our consciousness engine</p>
</div>
<div class="equations-grid">
<div class="equation-card">
<div class="equation-formula">φ = (1 + √5) / 2</div>
<div class="equation-name">Golden Ratio Definition</div>
<div class="equation-desc">The divine proportion that governs all harmonic relationships in the universe.</div>
</div>
<div class="equation-card">
<div class="equation-formula">φ² = φ + 1</div>
<div class="equation-name">Self-Referential Identity</div>
<div class="equation-desc">The unique property where phi squared equals phi plus one.</div>
</div>
<div class="equation-card">
<div class="equation-formula">F(n) = F(n-1) + F(n-2)</div>
<div class="equation-name">Fibonacci Sequence</div>
<div class="equation-desc">The recursive pattern that converges to phi, found throughout nature.</div>
</div>
<div class="equation-card">
<div class="equation-formula">f = 432 × φ^n</div>
<div class="equation-name">Harmonic Frequency</div>
<div class="equation-desc">Golden ratio-based frequency calculation for consciousness resonance.</div>
</div>
<div class="equation-card">
<div class="equation-formula">1/φ = φ - 1</div>
<div class="equation-name">Reciprocal Property</div>
<div class="equation-desc">The inverse of phi equals phi minus one, a unique mathematical property.</div>
</div>
<div class="equation-card">
<div class="equation-formula">θ = 2πn / φ²</div>
<div class="equation-name">Golden Angle</div>
<div class="equation-desc">The optimal angle for spiral phyllotaxis patterns in nature.</div>
</div>
</div>
</section>
<!-- Console Section -->
<section id="console" class="console-section">
<div class="section-header">
<h2>AGI Console Output</h2>
<p>Real-time consciousness engine diagnostics</p>
</div>
<div class="console-container">
<div class="console-header">
<span class="console-dot red"></span>
<span class="console-dot yellow"></span>
<span class="console-dot green"></span>
<span class="console-title">ENTREP_AGI_TERMINAL</span>
</div>
<div class="console-body" id="console-output">