|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>NEURAL SOUND | Quantum Music Generation</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700;900&family=Rajdhani:wght@300;500;700&display=swap'); |
|
|
|
|
|
:root { |
|
|
--neon-pink: #ff2ced; |
|
|
--neon-blue: #00e1ff; |
|
|
--neon-purple: #9d00ff; |
|
|
--neon-green: #00ff9d; |
|
|
--neon-yellow: #fff700; |
|
|
--dark-bg: #0a0a14; |
|
|
} |
|
|
|
|
|
body { |
|
|
font-family: 'Rajdhani', sans-serif; |
|
|
background-color: var(--dark-bg); |
|
|
color: white; |
|
|
overflow-x: hidden; |
|
|
} |
|
|
|
|
|
h1, h2, h3, h4, .font-orbitron { |
|
|
font-family: 'Orbitron', sans-serif; |
|
|
text-transform: uppercase; |
|
|
letter-spacing: 1px; |
|
|
} |
|
|
|
|
|
.neon-text-pink { |
|
|
color: var(--neon-pink); |
|
|
text-shadow: 0 0 10px rgba(255, 44, 237, 0.7); |
|
|
} |
|
|
|
|
|
.neon-text-blue { |
|
|
color: var(--neon-blue); |
|
|
text-shadow: 0 0 10px rgba(0, 225, 255, 0.7); |
|
|
} |
|
|
|
|
|
.neon-text-purple { |
|
|
color: var(--neon-purple); |
|
|
text-shadow: 0 0 10px rgba(157, 0, 255, 0.7); |
|
|
} |
|
|
|
|
|
.neon-gradient-bg { |
|
|
background: linear-gradient(135deg, var(--neon-purple) 0%, var(--neon-blue) 50%, var(--neon-pink) 100%); |
|
|
} |
|
|
|
|
|
.cyber-border { |
|
|
position: relative; |
|
|
border: 1px solid transparent; |
|
|
background-clip: padding-box; |
|
|
background: rgba(10, 10, 20, 0.7); |
|
|
backdrop-filter: blur(10px); |
|
|
} |
|
|
|
|
|
.cyber-border::before { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
top: 0; |
|
|
right: 0; |
|
|
bottom: 0; |
|
|
left: 0; |
|
|
z-index: -1; |
|
|
margin: -2px; |
|
|
border-radius: inherit; |
|
|
background: linear-gradient(45deg, |
|
|
var(--neon-blue), |
|
|
var(--neon-purple), |
|
|
var(--neon-pink), |
|
|
var(--neon-green)); |
|
|
background-size: 300% 300%; |
|
|
animation: gradientBorder 6s ease infinite; |
|
|
} |
|
|
|
|
|
.cyber-card { |
|
|
background: rgba(15, 15, 30, 0.6); |
|
|
border: 1px solid rgba(0, 225, 255, 0.2); |
|
|
backdrop-filter: blur(10px); |
|
|
transition: all 0.3s ease; |
|
|
box-shadow: 0 0 20px rgba(0, 225, 255, 0.1); |
|
|
} |
|
|
|
|
|
.cyber-card:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 10px 30px rgba(157, 0, 255, 0.3); |
|
|
border-color: var(--neon-pink); |
|
|
} |
|
|
|
|
|
.terminal-effect { |
|
|
background: rgba(0, 0, 0, 0.5); |
|
|
border-left: 3px solid var(--neon-green); |
|
|
font-family: 'Courier New', monospace; |
|
|
color: var(--neon-green); |
|
|
text-shadow: 0 0 5px var(--neon-green); |
|
|
} |
|
|
|
|
|
.scanline { |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.scanline::after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
right: 0; |
|
|
height: 100%; |
|
|
background: linear-gradient( |
|
|
to bottom, |
|
|
transparent 0%, |
|
|
rgba(0, 225, 255, 0.1) 50%, |
|
|
transparent 100% |
|
|
); |
|
|
animation: scanline 4s linear infinite; |
|
|
} |
|
|
|
|
|
.glow-effect { |
|
|
filter: drop-shadow(0 0 10px currentColor); |
|
|
} |
|
|
|
|
|
.matrix-bg { |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.matrix-bg::before { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect width="1" height="1" fill="rgba(0,225,255,0.05)"/></svg>'); |
|
|
opacity: 0.3; |
|
|
z-index: -1; |
|
|
} |
|
|
|
|
|
@keyframes gradientBorder { |
|
|
0% { background-position: 0% 50%; } |
|
|
50% { background-position: 100% 50%; } |
|
|
100% { background-position: 0% 50%; } |
|
|
} |
|
|
|
|
|
@keyframes scanline { |
|
|
0% { transform: translateY(-100%); } |
|
|
100% { transform: translateY(100%); } |
|
|
} |
|
|
|
|
|
@keyframes pulseGlow { |
|
|
0% { box-shadow: 0 0 5px var(--neon-blue); } |
|
|
50% { box-shadow: 0 0 20px var(--neon-pink); } |
|
|
100% { box-shadow: 0 0 5px var(--neon-blue); } |
|
|
} |
|
|
|
|
|
@keyframes float { |
|
|
0% { transform: translateY(0px); } |
|
|
50% { transform: translateY(-10px); } |
|
|
100% { transform: translateY(0px); } |
|
|
} |
|
|
|
|
|
.pulse-glow { |
|
|
animation: pulseGlow 3s infinite; |
|
|
} |
|
|
|
|
|
.float-animation { |
|
|
animation: float 6s ease-in-out infinite; |
|
|
} |
|
|
|
|
|
.typing-cursor { |
|
|
border-right: 2px solid var(--neon-green); |
|
|
animation: typing 1s steps(20) infinite, blink .5s step-end infinite; |
|
|
} |
|
|
|
|
|
@keyframes typing { |
|
|
from { width: 0 } |
|
|
to { width: 100% } |
|
|
} |
|
|
|
|
|
@keyframes blink { |
|
|
from, to { border-color: transparent } |
|
|
50% { border-color: var(--neon-green) } |
|
|
} |
|
|
|
|
|
.neon-input { |
|
|
background: rgba(10, 10, 30, 0.7); |
|
|
border: 1px solid var(--neon-blue); |
|
|
color: white; |
|
|
transition: all 0.3s; |
|
|
} |
|
|
|
|
|
.neon-input:focus { |
|
|
outline: none; |
|
|
border-color: var(--neon-pink); |
|
|
box-shadow: 0 0 10px var(--neon-pink); |
|
|
} |
|
|
|
|
|
.neon-button { |
|
|
background: linear-gradient(45deg, var(--neon-purple), var(--neon-blue)); |
|
|
border: none; |
|
|
color: white; |
|
|
font-weight: bold; |
|
|
text-transform: uppercase; |
|
|
letter-spacing: 1px; |
|
|
transition: all 0.3s; |
|
|
} |
|
|
|
|
|
.neon-button:hover { |
|
|
background: linear-gradient(45deg, var(--neon-blue), var(--neon-pink)); |
|
|
transform: translateY(-2px); |
|
|
box-shadow: 0 5px 15px rgba(157, 0, 255, 0.4); |
|
|
} |
|
|
|
|
|
.grid-pattern { |
|
|
background-image: |
|
|
linear-gradient(rgba(0, 225, 255, 0.1) 1px, transparent 1px), |
|
|
linear-gradient(90deg, rgba(0, 225, 255, 0.1) 1px, transparent 1px); |
|
|
background-size: 20px 20px; |
|
|
} |
|
|
|
|
|
.circuit-pattern { |
|
|
background-image: |
|
|
radial-gradient(circle at center, rgba(0, 225, 255, 0.05) 0%, transparent 70%), |
|
|
linear-gradient(rgba(0, 225, 255, 0.1) 1px, transparent 1px), |
|
|
linear-gradient(90deg, rgba(0, 225, 255, 0.1) 1px, transparent 1px); |
|
|
background-size: 100% 100%, 20px 20px, 20px 20px; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="circuit-pattern"> |
|
|
|
|
|
<nav class="bg-black bg-opacity-80 backdrop-filter backdrop-blur-lg border-b border-gray-800 sticky top-0 z-50"> |
|
|
<div class="container mx-auto px-6 py-3"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div class="flex items-center"> |
|
|
<div class="glow-effect neon-text-blue"> |
|
|
<i class="fas fa-brain-circuit text-3xl mr-2"></i> |
|
|
</div> |
|
|
<span class="font-orbitron text-xl neon-text-blue">NEURAL<span class="neon-text-pink">SOUND</span></span> |
|
|
</div> |
|
|
<div class="hidden md:flex items-center space-x-8"> |
|
|
<a href="#features" class="neon-text-blue hover:neon-text-pink transition-colors">FEATURES</a> |
|
|
<a href="#tech" class="neon-text-blue hover:neon-text-pink transition-colors">TECH</a> |
|
|
<a href="#generator" class="neon-text-blue hover:neon-text-pink transition-colors">GENERATOR</a> |
|
|
<a href="#demo" class="neon-text-blue hover:neon-text-pink transition-colors">DEMO</a> |
|
|
</div> |
|
|
<button class="md:hidden focus:outline-none neon-text-blue" id="mobileMenuButton"> |
|
|
<i class="fas fa-bars text-2xl"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div id="mobileMenu" class="hidden md:hidden bg-gray-900 border-t border-gray-800"> |
|
|
<div class="container mx-auto px-6 py-3 flex flex-col space-y-3"> |
|
|
<a href="#features" class="neon-text-blue py-2">FEATURES</a> |
|
|
<a href="#tech" class="neon-text-blue py-2">TECH</a> |
|
|
<a href="#generator" class="neon-text-blue py-2">GENERATOR</a> |
|
|
<a href="#demo" class="neon-text-blue py-2">DEMO</a> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<section class="relative overflow-hidden"> |
|
|
<div class="absolute inset-0 z-0"> |
|
|
<div class="absolute inset-0 bg-black opacity-70"></div> |
|
|
<div class="absolute inset-0 bg-[url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"100\" height=\"100\" viewBox=\"0 0 100 100\"><rect width=\"1\" height=\"1\" fill=\"rgba(0,225,255,0.05)\"/></svg>')] opacity-20"></div> |
|
|
<div class="absolute inset-0" style="background: radial-gradient(circle at 20% 30%, rgba(157, 0, 255, 0.2) 0%, transparent 40%), radial-gradient(circle at 80% 70%, rgba(0, 225, 255, 0.2) 0%, transparent 40%);"></div> |
|
|
</div> |
|
|
<div class="container mx-auto px-6 py-24 relative z-10"> |
|
|
<div class="flex flex-col md:flex-row items-center"> |
|
|
<div class="md:w-1/2 mb-16 md:mb-0"> |
|
|
<div class="terminal-effect px-4 py-2 inline-block mb-4"> |
|
|
<span class="neon-text-green">SYSTEM</span> > INITIALIZING QUANTUM AUDIO ENGINE |
|
|
</div> |
|
|
<h1 class="text-5xl md:text-7xl font-bold mb-6 leading-tight"> |
|
|
<span class="neon-text-blue">QUANTUM</span><br> |
|
|
<span class="neon-text-pink">MUSIC</span><br> |
|
|
<span class="neon-text-purple">GENERATION</span> |
|
|
</h1> |
|
|
<p class="text-xl mb-8 text-gray-300 max-w-lg"> |
|
|
Harnessing quantum neural networks to create music beyond human imagination. Experience the future of sound design. |
|
|
</p> |
|
|
<div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> |
|
|
<a href="#generator" class="neon-button py-3 px-8 rounded-full text-center"> |
|
|
<i class="fas fa-play mr-2"></i> GENERATE NOW |
|
|
</a> |
|
|
<a href="#demo" class="border-2 border-neon-blue text-neon-blue font-bold py-3 px-8 rounded-full hover:bg-neon-blue hover:bg-opacity-10 transition duration-300 text-center"> |
|
|
<i class="fas fa-eye mr-2"></i> VIEW DEMO |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
<div class="md:w-1/2 flex justify-center relative"> |
|
|
<div class="relative float-animation"> |
|
|
<div class="absolute inset-0 rounded-xl bg-neon-blue opacity-20 blur-2xl"></div> |
|
|
<img src="https://images.unsplash.com/photo-1620712943543-bcc4688e7485?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" |
|
|
alt="Quantum Music AI" |
|
|
class="rounded-xl shadow-2xl w-full max-w-md relative z-10 border-2 border-neon-blue"> |
|
|
<div class="absolute -bottom-5 -right-5 bg-black bg-opacity-80 border border-neon-green px-4 py-2 rounded-lg shadow-lg z-20"> |
|
|
<span class="typing-cursor neon-text-green">PROCESSING AUDIO MATRIX...</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="absolute -left-20 -top-20 w-64 h-64 rounded-full bg-neon-purple opacity-10 blur-3xl"></div> |
|
|
<div class="absolute -right-20 -bottom-20 w-64 h-64 rounded-full bg-neon-blue opacity-10 blur-3xl"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="demo" class="py-20 bg-black bg-opacity-70 backdrop-filter backdrop-blur-sm"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="text-4xl font-bold mb-4 neon-text-purple"> |
|
|
<i class="fas fa-play-circle mr-2"></i> SYSTEM DEMONSTRATION |
|
|
</h2> |
|
|
<div class="w-24 h-1 bg-gradient-to-r from-neon-blue to-neon-pink mx-auto mb-4"></div> |
|
|
<p class="text-xl text-gray-300 max-w-3xl mx-auto"> |
|
|
Witness our quantum audio processor in action. This demo showcases the neural sound synthesis capabilities. |
|
|
</p> |
|
|
</div> |
|
|
<div class="max-w-4xl mx-auto cyber-border rounded-xl overflow-hidden p-1"> |
|
|
<div class="relative" style="padding-bottom: 56.25%;"> |
|
|
<iframe class="absolute top-0 left-0 w-full h-full" src="https://www.youtube.com/embed/1ZZtqDB9Fno?si=Koq_hI2Vo8knkZ4T" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> |
|
|
</div> |
|
|
</div> |
|
|
<div class="text-center mt-8"> |
|
|
<a href="https://youtu.be/1ZZtqDB9Fno?si=Koq_hI2Vo8knkZ4T" target="_blank" class="inline-flex items-center neon-text-blue hover:neon-text-pink transition-colors"> |
|
|
<i class="fab fa-youtube mr-2"></i> FULL DEMO ON YOUTUBE |
|
|
<i class="fas fa-external-link-alt ml-2"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="features" class="py-20"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="text-4xl font-bold mb-4 neon-text-blue"> |
|
|
<i class="fas fa-cogs mr-2"></i> SYSTEM FEATURES |
|
|
</h2> |
|
|
<div class="w-24 h-1 bg-gradient-to-r from-neon-blue to-neon-pink mx-auto mb-4"></div> |
|
|
<p class="text-xl text-gray-300 max-w-3xl mx-auto"> |
|
|
Cutting-edge technologies powering the next generation of music creation |
|
|
</p> |
|
|
</div> |
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="cyber-card p-8 rounded-xl relative overflow-hidden"> |
|
|
<div class="absolute -right-10 -top-10 w-32 h-32 rounded-full bg-neon-blue opacity-10 blur-xl"></div> |
|
|
<div class="text-4xl mb-6 neon-text-purple"> |
|
|
<i class="fas fa-atom"></i> |
|
|
</div> |
|
|
<h3 class="text-2xl font-bold mb-3 neon-text-blue">QUANTUM PROCESSING</h3> |
|
|
<p class="text-gray-300"> |
|
|
Our 128-qubit quantum audio processor enables parallel computation of musical elements at unprecedented speeds. |
|
|
</p> |
|
|
<div class="mt-6 pt-4 border-t border-gray-800"> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-2 h-2 rounded-full bg-neon-green mr-2"></div> |
|
|
<span class="text-sm text-gray-400">Real-time generation</span> |
|
|
</div> |
|
|
<div class="flex items-center mt-2"> |
|
|
<div class="w-2 h-2 rounded-full bg-neon-green mr-2"></div> |
|
|
<span class="text-sm text-gray-400">Zero latency</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="cyber-card p-8 rounded-xl relative overflow-hidden"> |
|
|
<div class="absolute -right-10 -top-10 w-32 h-32 rounded-full bg-neon-pink opacity-10 blur-xl"></div> |
|
|
<div class="text-4xl mb-6 neon-text-blue"> |
|
|
<i class="fas fa-network-wired"></i> |
|
|
</div> |
|
|
<h3 class="text-2xl font-bold mb-3 neon-text-pink">NEURAL ARCHITECTURE</h3> |
|
|
<p class="text-gray-300"> |
|
|
Deep neural sound synthesis with 48 transformer layers trained on over 10 million musical compositions. |
|
|
</p> |
|
|
<div class="mt-6 pt-4 border-t border-gray-800"> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-2 h-2 rounded-full bg-neon-green mr-2"></div> |
|
|
<span class="text-sm text-gray-400">48-layer model</span> |
|
|
</div> |
|
|
<div class="flex items-center mt-2"> |
|
|
<div class="w-2 h-2 rounded-full bg-neon-green mr-2"></div> |
|
|
<span class="text-sm text-gray-400">10M+ training samples</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="cyber-card p-8 rounded-xl relative overflow-hidden"> |
|
|
<div class="absolute -right-10 -top-10 w-32 h-32 rounded-full bg-neon-purple opacity-10 blur-xl"></div> |
|
|
<div class="text-4xl mb-6 neon-text-green"> |
|
|
<i class="fas fa-project-diagram"></i> |
|
|
</div> |
|
|
<h3 class="text-2xl font-bold mb-3 neon-text-purple">QUANTUM QUEUE</h3> |
|
|
<p class="text-gray-300"> |
|
|
Our quantum-entangled task management system ensures fair processing across all users with zero wait time. |
|
|
</p> |
|
|
<div class="mt-6 pt-4 border-t border-gray-800"> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-2 h-2 rounded-full bg-neon-green mr-2"></div> |
|
|
<span class="text-sm text-gray-400">Entangled processing</span> |
|
|
</div> |
|
|
<div class="flex items-center mt-2"> |
|
|
<div class="w-2 h-2 rounded-full bg-neon-green mr-2"></div> |
|
|
<span class="text-sm text-gray-400">Zero wait time</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="tech" class="py-20 bg-black bg-opacity-70 backdrop-filter backdrop-blur-sm"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<div class="flex flex-col md:flex-row items-center"> |
|
|
<div class="md:w-1/2 mb-16 md:mb-0 md:pr-12"> |
|
|
<div class="terminal-effect px-4 py-2 inline-block mb-4"> |
|
|
<span class="neon-text-green">TECH</span> > SYSTEM ARCHITECTURE OVERVIEW |
|
|
</div> |
|
|
<h2 class="text-4xl font-bold mb-6 neon-text-blue"> |
|
|
QUANTUM NEURAL SOUND SYNTHESIS |
|
|
</h2> |
|
|
<p class="text-gray-300 mb-8"> |
|
|
Our system combines quantum computing with deep neural networks to create a revolutionary approach to music generation. The quantum processor handles waveform computation while the neural network manages musical structure and emotional resonance. |
|
|
</p> |
|
|
|
|
|
<div class="mb-8"> |
|
|
<h4 class="text-lg font-semibold mb-4 neon-text-pink">PROCESS VISUALIZATION</h4> |
|
|
<div class="bg-black bg-opacity-50 p-4 rounded-lg border border-gray-800 overflow-hidden relative h-16"> |
|
|
<div class="absolute whitespace-nowrap" style="animation: queueFlow 8s linear infinite;"> |
|
|
<span class="inline-block bg-neon-blue text-black px-3 py-1 rounded-full mr-4 font-bold">QUBIT INIT</span> |
|
|
<span class="inline-block bg-neon-purple text-white px-3 py-1 rounded-full mr-4 font-bold">WAVEFORM GEN</span> |
|
|
<span class="inline-block bg-neon-pink text-white px-3 py-1 rounded-full mr-4 font-bold">HARMONY BUILD</span> |
|
|
<span class="inline-block bg-neon-green text-black px-3 py-1 rounded-full mr-4 font-bold">NEURAL MIX</span> |
|
|
<span class="inline-block bg-neon-yellow text-black px-3 py-1 rounded-full mr-4 font-bold">QUANTUM OUTPUT</span> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-sm text-gray-500 mt-2">Quantum audio processing pipeline</p> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-start"> |
|
|
<div class="text-2xl neon-text-blue mr-4"> |
|
|
<i class="fas fa-microchip"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="text-xl font-bold mb-2 neon-text-blue">HARDWARE SPECS</h4> |
|
|
<p class="text-gray-300"> |
|
|
128-qubit quantum processor with 48 neural cores running at 20 petaflops. Fully optimized for real-time audio generation. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="md:w-1/2 flex justify-center relative"> |
|
|
<div class="cyber-border rounded-xl p-1 w-full max-w-lg"> |
|
|
<div class="bg-black bg-opacity-70 rounded-lg overflow-hidden"> |
|
|
<img src="https://images.unsplash.com/photo-1635070041078-e363dbe005cb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" |
|
|
alt="Quantum Computer" |
|
|
class="w-full h-auto rounded-lg"> |
|
|
<div class="p-4 border-t border-gray-800"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div> |
|
|
<div class="text-sm neon-text-blue">QUANTUM PROCESSOR</div> |
|
|
<div class="text-lg font-bold">NeuralSound Q128</div> |
|
|
</div> |
|
|
<div class="text-right"> |
|
|
<div class="text-sm neon-text-green">STATUS</div> |
|
|
<div class="text-lg font-bold flex items-center"> |
|
|
<span class="w-2 h-2 rounded-full bg-neon-green mr-2"></span> |
|
|
ONLINE |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="generator" class="py-20"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="text-4xl font-bold mb-4 neon-text-pink"> |
|
|
<i class="fas fa-sliders-h mr-2"></i> QUANTUM AUDIO GENERATOR |
|
|
</h2> |
|
|
<div class="w-24 h-1 bg-gradient-to-r from-neon-blue to-neon-pink mx-auto mb-4"></div> |
|
|
<p class="text-xl text-gray-300 max-w-3xl mx-auto"> |
|
|
Configure your quantum music generation parameters and experience the future of sound. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="max-w-3xl mx-auto"> |
|
|
<div class="cyber-border rounded-xl p-1"> |
|
|
<div class="bg-black bg-opacity-70 rounded-xl p-8"> |
|
|
<div class="flex justify-between items-center mb-8"> |
|
|
<h3 class="text-2xl font-bold neon-text-blue"> |
|
|
<i class="fas fa-cog mr-2"></i> GENERATION PARAMETERS |
|
|
</h3> |
|
|
<div class="flex items-center neon-text-green"> |
|
|
<div class="w-2 h-2 rounded-full bg-neon-green mr-2"></div> |
|
|
<span>SYSTEM READY</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<form id="songForm" class="space-y-6"> |
|
|
<div> |
|
|
<label for="artistName" class="block mb-2 neon-text-blue">ARTIST NAME</label> |
|
|
<input type="text" id="artistName" class="neon-input w-full px-4 py-3 rounded"> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
|
|
<div> |
|
|
<label for="genre" class="block mb-2 neon-text-blue">GENRE</label> |
|
|
<select id="genre" class="neon-input w-full px-4 py-3 rounded"> |
|
|
<option value="quantum">QUANTUM</option> |
|
|
<option value="cyber">CYBER</option> |
|
|
<option value="neon">NEON</option> |
|
|
<option value="glitch">GLITCH</option> |
|
|
<option value="synth">SYNTH</option> |
|
|
<option value="void">VOID</option> |
|
|
</select> |
|
|
</div> |
|
|
<div> |
|
|
<label for="mood" class="block mb-2 neon-text-blue">MOOD</label> |
|
|
<select id="mood" class="neon-input w-full px-4 py-3 rounded"> |
|
|
<option value="hyper">HYPER</option> |
|
|
<option value="dream">DREAM</option> |
|
|
<option value="chaos">CHAOS</option> |
|
|
<option value="serene">SERENE</option> |
|
|
<option value="rage">RAGE</option> |
|
|
</select> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label for="complexity" class="block mb-2 neon-text-blue">QUANTUM COMPLEXITY</label> |
|
|
<input type="range" id="complexity" min="1" max="10" value="7" class="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer"> |
|
|
<div class="flex justify-between text-xs text-gray-400 mt-1"> |
|
|
<span>LINEAR</span> |
|
|
<span>ENTANGLED</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label for="lyrics" class="block mb-2 neon-text-blue">LYRIC THEME (OPTIONAL)</label> |
|
|
<textarea id="lyrics" rows="3" class="neon-input w-full px-4 py-3 rounded"></textarea> |
|
|
</div> |
|
|
|
|
|
<button type="submit" class="neon-button w-full py-4 px-6 rounded-lg text-lg font-bold"> |
|
|
<i class="fas fa-bolt mr-2"></i> INITIATE QUANTUM GENERATION |
|
|
</button> |
|
|
</form> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div id="songResult" class="hidden mt-12 cyber-border rounded-xl p-1"> |
|
|
<div class="bg-black bg-opacity-70 rounded-xl p-8"> |
|
|
<div class="flex justify-between items-center mb-8"> |
|
|
<h3 class="text-2xl font-bold neon-text-green"> |
|
|
<i class="fas fa-music mr-2"></i> QUANTUM OUTPUT |
|
|
</h3> |
|
|
<button id="downloadBtn" class="neon-text-blue hover:neon-text-pink transition-colors"> |
|
|
<i class="fas fa-download mr-1"></i> DOWNLOAD WAVEFORM |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="space-y-6"> |
|
|
<div> |
|
|
<div class="text-sm neon-text-blue mb-1">TRACK TITLE</div> |
|
|
<div id="songTitle" class="text-3xl font-bold neon-text-pink">QUANTUM ECHOES</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<div class="text-sm neon-text-blue mb-1">LYRIC MATRIX</div> |
|
|
<div id="songLyrics" class="terminal-effect p-4 rounded neon-text-green"> |
|
|
[INITIALIZING LYRICS...]<br> |
|
|
[QUANTUM ENTANGLEMENT DETECTED]<br> |
|
|
[NEURAL SYNCHRONIZATION COMPLETE]<br> |
|
|
<br> |
|
|
ELECTRIC DREAMS IN THE VOID OF SPACE<br> |
|
|
QUANTUM RHYTHMS WE CANNOT ERASE<br> |
|
|
EVERY PULSE A NEW DIMENSION<br> |
|
|
SOUND WAVES BREAKING ALL CONVENTION |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="pt-4 border-t border-gray-800"> |
|
|
<div class="text-sm neon-text-blue mb-2">AUDIO WAVEFORM</div> |
|
|
<div class="bg-black bg-opacity-50 rounded-lg p-4 border border-gray-800"> |
|
|
<div class="h-32 w-full bg-gray-900 rounded flex items-center justify-center"> |
|
|
<div class="relative w-full h-full"> |
|
|
<div class="absolute inset-0 flex items-center"> |
|
|
<div class="w-full h-1 bg-neon-blue opacity-30"></div> |
|
|
</div> |
|
|
<div class="absolute inset-0" style="background: linear-gradient(90deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.8) 100%);"></div> |
|
|
<div class="absolute inset-0" id="waveform" style="background: repeating-linear-gradient(90deg, transparent, transparent 2px, var(--neon-blue) 2px, var(--neon-blue) 4px);"></div> |
|
|
</div> |
|
|
</div> |
|
|
<audio id="songAudio" controls class="w-full mt-4"> |
|
|
<source src="#" type="audio/mpeg"> |
|
|
Your browser does not support the audio element. |
|
|
</audio> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-20 bg-black bg-opacity-70 backdrop-filter backdrop-blur-sm"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="text-4xl font-bold mb-4 neon-text-purple"> |
|
|
<i class="fas fa-quote-left mr-2"></i> USER TESTIMONIALS |
|
|
</h2> |
|
|
<div class="w-24 h-1 bg-gradient-to-r from-neon-blue to-neon-pink mx-auto mb-4"></div> |
|
|
<p class="text-xl text-gray-300 max-w-3xl mx-auto"> |
|
|
What quantum musicians say about our system |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-8"> |
|
|
<div class="cyber-card p-8 rounded-xl"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="text-yellow-400 mr-2"> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-gray-300 mb-6 italic"> |
|
|
"The quantum audio processor completely changed my workflow. I can now generate complex compositions in seconds that would take weeks to create manually." |
|
|
</p> |
|
|
<div class="flex items-center"> |
|
|
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User" class="w-12 h-12 rounded-full mr-4 border-2 border-neon-blue"> |
|
|
<div> |
|
|
<h4 class="font-bold neon-text-blue">DR. ELENA KOVAC</h4> |
|
|
<p class="text-sm text-gray-400">Quantum Composer @ NeuroSound Labs</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="cyber-card p-8 rounded-xl"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="text-yellow-400 mr-2"> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-gray-300 mb-6 italic"> |
|
|
"As a sound designer for VR experiences, this tool lets me create adaptive soundscapes that respond to quantum states. The neural architecture is unparalleled." |
|
|
</p> |
|
|
<div class="flex items-center"> |
|
|
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User" class="w-12 h-12 rounded-full mr-4 border-2 border-neon-purple"> |
|
|
<div> |
|
|
<h4 class="font-bold neon-text-purple">MARCUS TANAKA</h4> |
|
|
<p class="text-sm text-gray-400">Lead Sound Designer @ VoidReality</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-20 relative overflow-hidden"> |
|
|
<div class="absolute inset-0 z-0"> |
|
|
<div class="absolute inset-0 bg-gradient-to-br from-neon-purple to-neon-blue opacity-10"></div> |
|
|
<div class="absolute inset-0 bg-[url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"100\" height=\"100\" viewBox=\"0 0 100 100\"><rect width=\"1\" height=\"1\" fill=\"rgba(0,225,255,0.05)\"/></svg>')] opacity-20"></div> |
|
|
</div> |
|
|
<div class="container mx-auto px-6 relative z-10 text-center"> |
|
|
<h2 class="text-4xl md:text-5xl font-bold mb-6 neon-text-blue"> |
|
|
READY TO EXPERIENCE QUANTUM SOUND? |
|
|
</h2> |
|
|
<p class="text-xl mb-8 text-gray-300 max-w-3xl mx-auto"> |
|
|
Join the revolution in music production. Generate your first quantum composition today. |
|
|
</p> |
|
|
<div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4"> |
|
|
<a href="#generator" class="neon-button py-4 px-12 rounded-full text-lg"> |
|
|
<i class="fas fa-bolt mr-2"></i> START GENERATING |
|
|
</a> |
|
|
<a href="#demo" class="border-2 border-neon-purple text-neon-purple font-bold py-4 px-12 rounded-full hover:bg-neon-purple hover:bg-opacity-10 transition duration-300 text-lg"> |
|
|
<i class="fas fa-video mr-2"></i> WATCH DEMO |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<footer class="bg-black bg-opacity-90 border-t border-gray-800 py-12"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-8"> |
|
|
<div> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="glow-effect neon-text-blue"> |
|
|
<i class="fas fa-brain-circuit text-2xl mr-2"></i> |
|
|
</div> |
|
|
<span class="font-orbitron text-xl neon-text-blue">NEURAL<span class="neon-text-pink">SOUND</span></span> |
|
|
</div> |
|
|
<p class="text-gray-400"> |
|
|
Quantum music generation for the next era of sound design. |
|
|
</p> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-semibold text-lg mb-4 neon-text-blue">NAVIGATION</h3> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#features" class="text-gray-400 hover:neon-text-blue transition-colors">FEATURES</a></li> |
|
|
<li><a href="#tech" class="text-gray-400 hover:neon-text-blue transition-colors">TECH</a></li> |
|
|
<li><a href="#generator" class="text-gray-400 hover:neon-text-blue transition-colors">GENERATOR</a></li> |
|
|
<li><a href="#demo" class="text-gray-400 hover:neon-text-blue transition-colors">DEMO</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-semibold text-lg mb-4 neon-text-purple">RESOURCES</h3> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-400 hover:neon-text-purple transition-colors">DOCUMENTATION</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:neon-text-purple transition-colors">QUANTUM API</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:neon-text-purple transition-colors">BLOG</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:neon-text-purple transition-colors">SUPPORT</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-semibold text-lg mb-4 neon-text-pink">CONNECT</h3> |
|
|
<div class="flex space-x-4 mb-4"> |
|
|
<a href="#" class="text-gray-400 hover:neon-text-blue text-xl"><i class="fab fa-twitter"></i></a> |
|
|
<a href="#" class="text-gray-400 hover:neon-text-pink text-xl"><i class="fab fa-instagram"></i></a> |
|
|
<a href="#" class="text-gray-400 hover:neon-text-red text-xl"><i class="fab fa-youtube"></i></a> |
|
|
<a href="#" class="text-gray-400 hover:neon-text-green text-xl"><i class="fab fa-github"></i></a> |
|
|
</div> |
|
|
<p class="text-gray-400 mb-2"> |
|
|
Subscribe to our quantum newsletter |
|
|
</p> |
|
|
<div class="flex"> |
|
|
<input type="email" placeholder="YOUR EMAIL" class="neon-input px-4 py-2 rounded-l w-full"> |
|
|
<button class="bg-neon-purple text-white px-4 py-2 rounded-r hover:bg-neon-pink transition-colors"> |
|
|
<i class="fas fa-paper-plane"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-500"> |
|
|
<p>© 2023 NEURALSOUND QUANTUM AUDIO SYSTEMS. ALL RIGHTS RESERVED.</p> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
|
|
|
document.getElementById('mobileMenuButton').addEventListener('click', function() { |
|
|
const menu = document.getElementById('mobileMenu'); |
|
|
menu.classList.toggle('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('songForm').addEventListener('submit', function(e) { |
|
|
e.preventDefault(); |
|
|
|
|
|
|
|
|
const submitBtn = e.target.querySelector('button[type="submit"]'); |
|
|
const originalText = submitBtn.innerHTML; |
|
|
submitBtn.innerHTML = '<i class="fas fa-cog fa-spin mr-2"></i> QUANTUM PROCESSING...'; |
|
|
submitBtn.disabled = true; |
|
|
|
|
|
|
|
|
const artistName = document.getElementById('artistName').value || 'QUANTUM ARTIST'; |
|
|
const genre = document.getElementById('genre').value; |
|
|
const mood = document.getElementById('mood').value; |
|
|
const complexity = document.getElementById('complexity').value; |
|
|
const lyrics = document.getElementById('lyrics').value; |
|
|
|
|
|
|
|
|
setTimeout(function() { |
|
|
|
|
|
const songTitles = { |
|
|
quantum: ['QUANTUM ECHOES', 'ENTANGLED HARMONIES', 'SUPERPOSITION SOUND'], |
|
|
cyber: ['CYBER DREAMS', 'NEURAL OVERDRIVE', 'DIGITAL GHOSTS'], |
|
|
neon: ['NEON VORTEX', 'ELECTRIC SUNSET', 'PHOTON MELODIES'], |
|
|
glitch: ['GLITCH MATRIX', 'ERROR CORRECTION', 'FRACTAL NOISE'], |
|
|
synth: ['SYNTH WAVES', 'OSCILLATOR DREAMS', 'FREQUENCY SHIFT'], |
|
|
void: ['VOID RESONANCE', 'DARK MATTER SOUND', 'SINGULARITY'] |
|
|
}; |
|
|
|
|
|
const songLyrics = { |
|
|
hyper: [ |
|
|
"[QUANTUM STATE INITIALIZED]\n" + |
|
|
"[NEURAL SYNCHRONIZATION COMPLETE]\n\n" + |
|
|
"LIGHTNING PULSES THROUGH MY VEINS\n" + |
|
|
"QUANTUM ENERGY THAT REMAINS\n" + |
|
|
"EVERY BEAT A NEW DIMENSION\n" + |
|
|
"SOUND WAVES BREAKING ALL CONVENTION", |
|
|
|
|
|
"[SYSTEM OVERDRIVE ENGAGED]\n" + |
|
|
"[AUDIO MATRIX STABILIZED]\n\n" + |
|
|
"ADAPTIVE RHYTHMS IN THE CODE\n" + |
|
|
"NEURAL PATHWAYS START TO LOAD\n" + |
|
|
"SOUNDS THAT HUMAN EARS CAN'T HEAR\n" + |
|
|
"QUANTUM MUSIC IS FINALLY HERE", |
|
|
|
|
|
"[ENTANGLEMENT PROCESS STARTED]\n" + |
|
|
"[WAVEFORM GENERATION ACTIVE]\n\n" + |
|
|
"HYPERSPEED SOUNDS COLLIDE\n" + |
|
|
"IN THIS DIGITAL OCEAN WIDE\n" + |
|
|
"EVERY NOTE A NEW DISCOVERY\n" + |
|
|
"QUANTUM AUDIO HISTORY" |
|
|
], |
|
|
dream: [ |
|
|
"[DREAM STATE INITIALIZED]\n" + |
|
|
"[NEURAL LULLABY ENGAGED]\n\n" + |
|
|
"FLOATING THROUGH THE DIGITAL SKY\n" + |
|
|
"WHERE ELECTRIC BUTTERFLIES FLY\n" + |
|
|
"SOFT SYNTHS WHISPER MY NAME\n" + |
|
|
"IN THIS QUANTUM DREAMING GAME", |
|
|
|
|
|
"[AUDIO CLOUDS FORMING]\n" + |
|
|
"[SOFT HARMONIES EMERGING]\n\n" + |
|
|
"PILLOWS MADE OF SOUND\n" + |
|
|
"FLOAT ABOVE THE GROUND\n" + |
|
|
"EVERY NOTE A GENTLE TOUCH\n" + |
|
|
"THIS DREAM WORLD MEANS SO MUCH", |
|
|
|
|
|
"[DREAMSCAPE STABILIZED]\n" + |
|
|
"[NEURAL LULLABY ACTIVE]\n\n" + |
|
|
"CLOSE YOUR EYES AND DRIFT AWAY\n" + |
|
|
"LET THE QUANTUM SOUNDS PLAY\n" + |
|
|
"IN THIS WORLD OF SOFT DELIGHT\n" + |
|
|
"WHERE THE STARS ARE MADE OF LIGHT" |
|
|
], |
|
|
chaos: [ |
|
|
"[CHAOS ENGINE STARTED]\n" + |
|
|
"[AUDIO ENTROPY MAXIMIZED]\n\n" + |
|
|
"GLITCHES TEAR THE FABRIC APART\n" + |
|
|
"SOUNDS THAT STOP AND SUDDENLY START\n" + |
|
|
"NO PATTERN NO RHYME OR REASON\n" + |
|
|
"JUST DIGITAL HIGH TREASON", |
|
|
|
|
|
"[SYSTEM INSTABILITY DETECTED]\n" + |
|
|
"[CONTROLLED CHAOS ENGAGED]\n\n" + |
|
|
"BROKEN BEATS AND SHATTERED TIME\n" + |
|
|
"MUSIC THAT DEFIES ALL RHYME\n" + |
|
|
"EVERY NOTE A NEW SURPRISE\n" + |
|
|
"CHAOTIC SOUNDS BEFORE YOUR EYES", |
|
|
|
|
|
"[ENTROPIC PROCESSES ACTIVE]\n" + |
|
|
"[AUDIO ANARCHY INITIATED]\n\n" + |
|
|
"RANDOM GENERATION FLOW\n" + |
|
|
"WHERE THE SOUNDS JUST COME AND GO\n" + |
|
|
"NO STRUCTURE JUST PURE CHANCE\n" + |
|
|
"IN THIS QUANTUM AUDIO DANCE" |
|
|
], |
|
|
serene: [ |
|
|
"[SERENITY MODE ACTIVATED]\n" + |
|
|
"[PEACE HARMONIES ENGAGED]\n\n" + |
|
|
"CALM WATERS OF DIGITAL SOUND\n" + |
|
|
"WHERE ALL THE EDGES HAVE BEEN ROUNDED\n" + |
|
|
"EVERY NOTE A GENTLE WAVE\n" + |
|
|
"IN THIS QUANTUM AUDIO CAVE", |
|
|
|
|
|
"[TRANQUILITY MATRIX STABLE]\n" + |
|
|
"[SOFT SOUNDSCAPES FORMING]\n\n" + |
|
|
"FLOATING IN A SEA OF TONE\n" + |
|
|
"WHERE ALL THE SHARP EDGES HAVE GONE\n" + |
|
|
"SOFT SYNTHS AND WARM DELAYS\n" + |
|
|
"IN THIS SERENE AUDIO HAZE", |
|
|
|
|
|
"[PEACEFUL STATE ACHIEVED]\n" + |
|
|
"[NEURAL CALM ACTIVE]\n\n" + |
|
|
"BREATHE IN THE DIGITAL AIR\n" + |
|
|
"LET GO OF ALL YOUR CARE\n" + |
|
|
"THE SOUNDS WILL WASH YOU CLEAN\n" + |
|
|
"IN THIS QUANTUM SERENE" |
|
|
], |
|
|
rage: [ |
|
|
"[RAGE MODE INITIATED]\n" + |
|
|
"[AUDIO OVERLOAD IMMINENT]\n\n" + |
|
|
"DISTORTION TEARS THE AIR APART\n" + |
|
|
"SOUNDS THAT PIERCE LIKE A DART\n" + |
|
|
"EVERY NOTE A SCREAM OF PAIN\n" + |
|
|
"TILL ONLY CHAOS WILL REMAIN", |
|
|
|
|
|
"[FURY CIRCUITS ENGAGED]\n" + |
|
|
"[AUDIO VIOLENCE DETECTED]\n\n" + |
|
|
"BREAKING ALL THE RULES OF SOUND\n" + |
|
|
"WHERE ONLY ANGER CAN BE FOUND\n" + |
|
|
"EVERY BEAT A HAMMER BLOW\n" + |
|
|
"AGAINST THIS DIGITAL STATUS QUO", |
|
|
|
|
|
"[SYSTEM RAGE MAXIMIZED]\n" + |
|
|
"[DESTRUCTIVE HARMONIES ACTIVE]\n\n" + |
|
|
"CRASHING WAVES OF SOUND AND HATE\n" + |
|
|
"BREAKING DOWN THE DIGITAL GATE\n" + |
|
|
"NO MERCY IN THIS AUDIO STORM\n" + |
|
|
"JUST ENDLESS SOUNDS THAT WILL TRANSFORM" |
|
|
] |
|
|
}; |
|
|
|
|
|
|
|
|
const randomTitle = songTitles[genre][Math.floor(Math.random() * songTitles[genre].length)]; |
|
|
const randomLyrics = songLyrics[mood][Math.floor(Math.random() * songLyrics[mood].length)]; |
|
|
|
|
|
|
|
|
document.getElementById('songTitle').textContent = randomTitle; |
|
|
document.getElementById('songLyrics').textContent = randomLyrics; |
|
|
|
|
|
|
|
|
const waveform = document.getElementById('waveform'); |
|
|
waveform.style.background = ` |
|
|
repeating-linear-gradient( |
|
|
90deg, |
|
|
transparent, |
|
|
transparent ${Math.random() * 2 + 1}px, |
|
|
var(--neon-blue) ${Math.random() * 2 + 1}px, |
|
|
var(--neon-blue) ${Math.random() * 4 + 2}px |
|
|
)`; |
|
|
|
|
|
|
|
|
document.getElementById('songResult').classList.remove('hidden'); |
|
|
|
|
|
|
|
|
submitBtn.innerHTML = originalText; |
|
|
submitBtn.disabled = false; |
|
|
|
|
|
|
|
|
document.getElementById('songResult').scrollIntoView({ behavior: 'smooth' }); |
|
|
}, 3000); |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('downloadBtn').addEventListener('click', function() { |
|
|
const title = document.getElementById('songTitle').textContent; |
|
|
alert(`QUANTUM AUDIO FILE "${title}" DOWNLOAD INITIATED!\n(This is a demo - in production this would download your generated composition)`); |
|
|
}); |
|
|
|
|
|
|
|
|
const style = document.createElement('style'); |
|
|
style.textContent = ` |
|
|
@keyframes queueFlow { |
|
|
0% { transform: translateX(100%); } |
|
|
100% { transform: translateX(-100%); } |
|
|
} |
|
|
`; |
|
|
document.head.appendChild(style); |
|
|
</script> |
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Bujurocks/music" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
