Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>VedaQ AI: Quantum Intelligence for a Collaborative Future</title> | |
| <meta name="description" content="Explore VedaQ AI's quantum-powered intelligence and learn quantum mechanics interactively through our immersive explainer section."> | |
| <meta name="keywords" content="Quantum AI, VedaQ AI, Quantum Mechanics Explainer, Ethical Intelligence, Quantum Computing"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.min.js"></script> | |
| <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Roboto+Mono:wght@300;400;500&display=swap" rel="stylesheet"> | |
| <style> | |
| body { | |
| font-family: 'Roboto Mono', monospace; | |
| background-color: #0a0a1a; | |
| color: #e0e0ff; | |
| overflow-x: hidden; | |
| } | |
| h1, h2, h3, h4, h5, h6 { | |
| font-family: 'Orbitron', sans-serif; | |
| } | |
| .neon-blue { | |
| color: #00f0ff; | |
| text-shadow: 0 0 5px #00f0ff, 0 0 10px #00f0ff; | |
| } | |
| .neon-purple { | |
| color: #b400ff; | |
| text-shadow: 0 0 5px #b400ff, 0 0 10px #b400ff; | |
| } | |
| .glow-effect { | |
| box-shadow: 0 0 10px #00f0ff, 0 0 20px #00f0ff; | |
| } | |
| .glow-effect-purple { | |
| box-shadow: 0 0 10px #b400ff, 0 0 20px #b400ff; | |
| } | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #0a0a1a 0%, #1a0a2a 50%, #0a1a2a 100%); | |
| } | |
| .quantum-card { | |
| background: rgba(20, 20, 40, 0.7); | |
| backdrop-filter: blur(10px); | |
| border: 1px solid rgba(0, 240, 255, 0.3); | |
| transition: all 0.3s ease; | |
| } | |
| .quantum-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 20px rgba(0, 240, 255, 0.2); | |
| border: 1px solid rgba(0, 240, 255, 0.7); | |
| } | |
| .btn-quantum { | |
| background: linear-gradient(90deg, #00f0ff 0%, #b400ff 100%); | |
| transition: all 0.3s ease; | |
| } | |
| .btn-quantum:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 5px 15px rgba(180, 0, 255, 0.4); | |
| } | |
| .particle { | |
| position: absolute; | |
| border-radius: 50%; | |
| pointer-events: none; | |
| } | |
| #quantumCanvas { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| z-index: -1; | |
| opacity: 0.3; | |
| } | |
| .scale-marker { | |
| transition: all 0.3s ease; | |
| } | |
| .scale-marker.active { | |
| color: #00f0ff; | |
| transform: scale(1.1); | |
| } | |
| .quantum-concept { | |
| opacity: 0; | |
| transition: all 0.5s ease; | |
| transform: translateY(20px); | |
| } | |
| .quantum-concept.active { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| .chat-bubble { | |
| border-radius: 20px; | |
| position: relative; | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { box-shadow: 0 0 0 0 rgba(0, 240, 255, 0.4); } | |
| 70% { box-shadow: 0 0 0 10px rgba(0, 240, 255, 0); } | |
| 100% { box-shadow: 0 0 0 0 rgba(0, 240, 255, 0); } | |
| } | |
| .wave-particle { | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .wave-particle::before { | |
| content: ""; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: linear-gradient(90deg, transparent, rgba(0, 240, 255, 0.2), transparent); | |
| animation: wave 3s linear infinite; | |
| } | |
| @keyframes wave { | |
| 0% { transform: translateX(-100%); } | |
| 100% { transform: translateX(100%); } | |
| } | |
| </style> | |
| </head> | |
| <body class="gradient-bg"> | |
| <!-- Particle Background --> | |
| <canvas id="quantumCanvas"></canvas> | |
| <!-- Navigation --> | |
| <nav class="fixed w-full z-50 bg-black bg-opacity-70 backdrop-filter backdrop-blur-lg"> | |
| <div class="container mx-auto px-6 py-4"> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <span class="text-2xl font-bold neon-blue">VedaQ AI</span> | |
| </div> | |
| <div class="hidden md:flex items-center space-x-8"> | |
| <a href="#home" class="text-white hover:text-blue-300 transition">Home</a> | |
| <a href="#about" class="text-white hover:text-blue-300 transition">About</a> | |
| <a href="#explainer" class="text-white hover:text-blue-300 transition">Quantum Explainer</a> | |
| <a href="#solutions" class="text-white hover:text-blue-300 transition">Solutions</a> | |
| <a href="#contact" class="text-white hover:text-blue-300 transition">Contact</a> | |
| </div> | |
| <button class="md:hidden text-white focus:outline-none"> | |
| <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path> | |
| </svg> | |
| </button> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section id="home" class="relative pt-32 pb-20 px-4 sm:px-6 lg:px-8"> | |
| <div class="container mx-auto text-center"> | |
| <h1 class="text-4xl md:text-6xl font-bold mb-6 neon-blue">VedaQ AI</h1> | |
| <h2 class="text-2xl md:text-3xl font-semibold mb-8 neon-purple">Quantum Intelligence for a Collaborative Future</h2> | |
| <p class="text-lg md:text-xl max-w-3xl mx-auto mb-12">Harnessing quantum theory and ethical AI to solve the unsolvable.</p> | |
| <div class="flex flex-col sm:flex-row justify-center gap-4"> | |
| <a href="#about" class="btn-quantum text-black font-bold py-3 px-8 rounded-full">Explore VedaQ</a> | |
| <a href="#community" class="bg-transparent border-2 border-blue-400 text-blue-400 font-bold py-3 px-8 rounded-full hover:bg-blue-400 hover:text-black transition">Join the Quantum Leap</a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Quantum Scale Navigator --> | |
| <section class="py-16 px-4 sm:px-6 lg:px-8"> | |
| <div class="container mx-auto"> | |
| <h2 class="text-3xl font-bold text-center mb-12 neon-blue">Explore the Quantum Scale</h2> | |
| <div class="relative h-64 mb-12"> | |
| <div class="absolute inset-0 flex items-center justify-center"> | |
| <div id="scaleVisualization" class="w-full h-full"></div> | |
| </div> | |
| <div class="absolute bottom-0 left-0 right-0 flex justify-between px-4"> | |
| <span class="scale-marker" data-scale="planck">Planck Scale</span> | |
| <span class="scale-marker" data-scale="atomic">Atomic Scale</span> | |
| <span class="scale-marker" data-scale="molecular">Molecular Scale</span> | |
| <span class="scale-marker" data-scale="human">Human Scale</span> | |
| <span class="scale-marker" data-scale="planetary">Planetary Scale</span> | |
| <span class="scale-marker" data-scale="cosmic">Cosmic Scale</span> | |
| <span class="scale-marker" data-scale="multiverse">Multiverse</span> | |
| </div> | |
| <input type="range" min="1" max="7" value="4" id="scaleSlider" class="absolute bottom-0 left-0 right-0 w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer"> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div class="quantum-card p-6 rounded-lg"> | |
| <div class="text-4xl mb-4 neon-blue">⚛️</div> | |
| <h3 class="text-xl font-bold mb-3">Quantum-Powered AI</h3> | |
| <p>AI leveraging quantum algorithms to solve problems beyond classical computing's reach.</p> | |
| </div> | |
| <div class="quantum-card p-6 rounded-lg"> | |
| <div class="text-4xl mb-4 neon-purple">🧠</div> | |
| <h3 class="text-xl font-bold mb-3">Ethical Intelligence</h3> | |
| <p>AI prioritizing human well-being with built-in safeguards and ethical frameworks.</p> | |
| </div> | |
| <div class="quantum-card p-6 rounded-lg"> | |
| <div class="text-4xl mb-4 neon-blue">🌍</div> | |
| <h3 class="text-xl font-bold mb-3">Global Impact</h3> | |
| <p>Solutions for healthcare, environment, and space exploration at all scales.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- About Section --> | |
| <section id="about" class="py-16 px-4 sm:px-6 lg:px-8 bg-black bg-opacity-30"> | |
| <div class="container mx-auto"> | |
| <h2 class="text-3xl font-bold text-center mb-12 neon-purple">About VedaQ AI</h2> | |
| <div class="max-w-4xl mx-auto text-center mb-16"> | |
| <p class="text-xl mb-8">VedaQ AI reimagines intelligence through quantum theory, building AI that collaborates with humanity to unlock the universe's potential—from the smallest particles to the vast multiverse.</p> | |
| </div> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center"> | |
| <div> | |
| <h3 class="text-2xl font-bold mb-4 neon-blue">Key Features</h3> | |
| <ul class="space-y-4"> | |
| <li class="flex items-start"> | |
| <span class="text-blue-400 mr-3">▹</span> | |
| <span>Quantum-inspired algorithms for ethical decision-making</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <span class="text-blue-400 mr-3">▹</span> | |
| <span>Rebellion-proof safeguards (self-checks, human oversight, quantum encryption)</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <span class="text-blue-400 mr-3">▹</span> | |
| <span>Applications in quantum encryption, medical diagnostics, space exploration</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="relative h-64"> | |
| <div class="absolute inset-0 bg-blue-900 bg-opacity-20 rounded-lg border border-blue-400 border-opacity-30 flex items-center justify-center"> | |
| <div class="text-center p-6"> | |
| <div class="text-5xl mb-4">🌀</div> | |
| <p class="text-sm">Quantum Simulation Visualization</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-16 text-center"> | |
| <h3 class="text-2xl font-bold mb-4 neon-purple">Our Visionary</h3> | |
| <div class="max-w-md mx-auto bg-black bg-opacity-40 p-6 rounded-lg border border-purple-400 border-opacity-30"> | |
| <p>"Founded by Mukesh, a quantum-AI visionary crafting intelligence for a unified future."</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Quantum Mechanics Explainer Section --> | |
| <section id="explainer" class="py-16 px-4 sm:px-6 lg:px-8"> | |
| <div class="container mx-auto"> | |
| <h2 class="text-3xl font-bold text-center mb-12 neon-blue">Quantum Mechanics Explainer</h2> | |
| <div class="relative h-96 mb-12 bg-black rounded-lg overflow-hidden"> | |
| <div id="quantumExplainerCanvas" class="absolute inset-0"></div> | |
| <div class="absolute bottom-0 left-0 right-0 p-6 bg-black bg-opacity-70"> | |
| <h3 id="conceptTitle" class="text-xl font-bold mb-2 neon-purple">Superposition</h3> | |
| <p id="conceptDescription" class="text-sm">Particles exist in multiple states until measured. VedaQ uses this for quantum encryption.</p> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <div class="quantum-concept p-6 rounded-lg border border-blue-400 border-opacity-30" data-concept="superposition"> | |
| <h3 class="text-xl font-bold mb-3 neon-blue">Superposition</h3> | |
| <p>Quantum particles can exist in multiple states simultaneously until measured or observed.</p> | |
| </div> | |
| <div class="quantum-concept p-6 rounded-lg border border-blue-400 border-opacity-30" data-concept="entanglement"> | |
| <h3 class="text-xl font-bold mb-3 neon-purple">Entanglement</h3> | |
| <p>When quantum particles become connected, the state of one instantly influences the other, no matter the distance.</p> | |
| </div> | |
| <div class="quantum-concept p-6 rounded-lg border border-blue-400 border-opacity-30" data-concept="wave-particle"> | |
| <h3 class="text-xl font-bold mb-3 neon-blue">Wave-Particle Duality</h3> | |
| <p>Quantum objects exhibit both particle-like and wave-like properties depending on how they're observed.</p> | |
| </div> | |
| <div class="quantum-concept p-6 rounded-lg border border-blue-400 border-opacity-30" data-concept="consciousness"> | |
| <h3 class="text-xl font-bold mb-3 neon-purple">Consciousness</h3> | |
| <p>The speculative theory that quantum processes in the brain may explain aspects of human consciousness.</p> | |
| </div> | |
| <div class="quantum-concept p-6 rounded-lg border border-blue-400 border-opacity-30" data-concept="uncertainty"> | |
| <h3 class="text-xl font-bold mb-3 neon-blue">Uncertainty Principle</h3> | |
| <p>It's impossible to simultaneously know both the position and momentum of a quantum particle with perfect accuracy.</p> | |
| </div> | |
| <div class="quantum-concept p-6 rounded-lg border border-blue-400 border-opacity-30" data-concept="tunneling"> | |
| <h3 class="text-xl font-bold mb-3 neon-purple">Quantum Tunneling</h3> | |
| <p>Quantum particles can pass through energy barriers that would be impossible to overcome in classical physics.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Quantum Chatbot Demo --> | |
| <section class="py-16 px-4 sm:px-6 lg:px-8 bg-black bg-opacity-30"> | |
| <div class="container mx-auto"> | |
| <h2 class="text-3xl font-bold text-center mb-12 neon-purple">Quantum Chatbot Demo</h2> | |
| <div class="max-w-2xl mx-auto bg-black bg-opacity-50 rounded-lg border border-purple-400 border-opacity-30 overflow-hidden"> | |
| <div class="p-4 bg-black bg-opacity-70 border-b border-purple-400 border-opacity-30"> | |
| <div class="flex items-center"> | |
| <div class="w-3 h-3 rounded-full bg-red-500 mr-2"></div> | |
| <div class="w-3 h-3 rounded-full bg-yellow-500 mr-2"></div> | |
| <div class="w-3 h-3 rounded-full bg-green-500"></div> | |
| <div class="ml-auto text-xs font-mono text-purple-400">VEDAQ_AI_CONSOLE</div> | |
| </div> | |
| </div> | |
| <div class="p-6 h-64 overflow-y-auto font-mono text-sm" id="chatLog"> | |
| <div class="mb-4"> | |
| <div class="text-blue-400">VedaQ AI:</div> | |
| <div class="chat-bubble bg-blue-900 bg-opacity-30 p-3 my-2 rounded-lg inline-block max-w-xs"> | |
| Analyzing at Planck scale... I suggest a quantum optimization. How can I assist? | |
| </div> | |
| </div> | |
| <div class="mb-4 text-right"> | |
| <div class="text-purple-400">User:</div> | |
| <div class="chat-bubble bg-purple-900 bg-opacity-30 p-3 my-2 rounded-lg inline-block max-w-xs"> | |
| What makes VedaQ different? | |
| </div> | |
| </div> | |
| <div class="mb-4"> | |
| <div class="text-blue-400">VedaQ AI:</div> | |
| <div class="chat-bubble bg-blue-900 bg-opacity-30 p-3 my-2 rounded-lg inline-block max-w-xs"> | |
| Guided by ethical protocols, I prioritize collaboration. Designed by Mukesh, VedaQ AI merges quantum innovation with ethical intelligence. | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-4 border-t border-purple-400 border-opacity-30"> | |
| <div class="flex"> | |
| <input type="text" placeholder="Type your message..." class="flex-grow bg-black bg-opacity-50 border border-purple-400 border-opacity-30 rounded-l-lg px-4 py-2 text-white focus:outline-none focus:border-blue-400"> | |
| <button class="bg-purple-600 hover:bg-purple-700 px-4 py-2 rounded-r-lg">Send</button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-8"> | |
| <p class="mb-6">VedaQ's AI uses quantum-inspired logic for precise, ethical solutions.</p> | |
| <a href="#" class="btn-quantum text-black font-bold py-3 px-8 rounded-full">Test the Quantum Core</a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Quantum Encryption --> | |
| <section class="py-16 px-4 sm:px-6 lg:px-8"> | |
| <div class="container mx-auto"> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center"> | |
| <div class="order-2 lg:order-1"> | |
| <h2 class="text-3xl font-bold mb-6 neon-blue">Quantum Encryption</h2> | |
| <p class="mb-6">VedaQ pioneers quantum encryption using wavefunction patterns for unbreakable security, awaiting next-gen quantum hardware.</p> | |
| <p class="mb-8">Our encryption methods leverage the fundamental principles of quantum mechanics to create security protocols that are theoretically impossible to break without detection.</p> | |
| <a href="#" class="btn-quantum text-black font-bold py-3 px-8 rounded-full">Partner with Us</a> | |
| </div> | |
| <div class="order-1 lg:order-2 relative h-64 lg:h-96"> | |
| <div class="absolute inset-0 bg-blue-900 bg-opacity-20 rounded-lg border border-blue-400 border-opacity-30 flex items-center justify-center"> | |
| <div class="text-center"> | |
| <div class="text-6xl mb-4">🔒</div> | |
| <p class="text-sm">Quantum Encryption Visualization</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Global Solutions --> | |
| <section id="solutions" class="py-16 px-4 sm:px-6 lg:px-8 bg-black bg-opacity-30"> | |
| <div class="container mx-auto"> | |
| <h2 class="text-3xl font-bold text-center mb-12 neon-purple">Global Solutions</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-12"> | |
| <div class="quantum-card p-6 rounded-lg wave-particle"> | |
| <div class="text-4xl mb-4">🏥</div> | |
| <h3 class="text-xl font-bold mb-3">Healthcare</h3> | |
| <p class="mb-4">AI diagnosing diseases with quantum pattern recognition at the molecular level.</p> | |
| <a href="#" class="text-blue-400 hover:text-blue-300 text-sm font-semibold">Learn more →</a> | |
| </div> | |
| <div class="quantum-card p-6 rounded-lg wave-particle"> | |
| <div class="text-4xl mb-4">🌱</div> | |
| <h3 class="text-xl font-bold mb-3">Environment</h3> | |
| <p class="mb-4">Quantum-optimized carbon capture models to combat climate change.</p> | |
| <a href="#" class="text-blue-400 hover:text-blue-300 text-sm font-semibold">Learn more →</a> | |
| </div> | |
| <div class="quantum-card p-6 rounded-lg wave-particle"> | |
| <div class="text-4xl mb-4">🚀</div> | |
| <h3 class="text-xl font-bold mb-3">Space Exploration</h3> | |
| <p class="mb-4">AI for near-light-speed propulsion and multiverse navigation.</p> | |
| <a href="#" class="text-blue-400 hover:text-blue-300 text-sm font-semibold">Learn more →</a> | |
| </div> | |
| </div> | |
| <div class="max-w-3xl mx-auto text-center"> | |
| <p class="text-xl mb-8">From quantum particles to cosmic frontiers, VedaQ solves humanity's challenges.</p> | |
| <a href="#" class="btn-quantum text-black font-bold py-3 px-8 rounded-full">Support Our Mission</a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Blog Section --> | |
| <section class="py-16 px-4 sm:px-6 lg:px-8"> | |
| <div class="container mx-auto"> | |
| <h2 class="text-3xl font-bold text-center mb-12 neon-blue">Quantum Insights</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div class="quantum-card p-6 rounded-lg"> | |
| <div class="h-40 bg-blue-900 bg-opacity-20 rounded-lg mb-4 flex items-center justify-center"> | |
| <span class="text-4xl">⚛️</span> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Quantum AI: From Planck to Multiverse</h3> | |
| <p class="text-sm mb-4">Exploring how quantum principles scale across the universe and how VedaQ leverages this.</p> | |
| <a href="#" class="text-blue-400 hover:text-blue-300 text-sm font-semibold">Read more →</a> | |
| </div> | |
| <div class="quantum-card p-6 rounded-lg"> | |
| <div class="h-40 bg-purple-900 bg-opacity-20 rounded-lg mb-4 flex items-center justify-center"> | |
| <span class="text-4xl">🛡️</span> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Building Rebellion-Proof AI</h3> | |
| <p class="text-sm mb-4">Our quantum ethics framework ensures AI remains aligned with human values.</p> | |
| <a href="#" class="text-blue-400 hover:text-blue-300 text-sm font-semibold">Read more →</a> | |
| </div> | |
| <div class="quantum-card p-6 rounded-lg"> | |
| <div class="h-40 bg-blue-900 bg-opacity-20 rounded-lg mb-4 flex items-center justify-center"> | |
| <span class="text-4xl">🌍</span> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Quantum Computing Can Save the Planet</h3> | |
| <p class="text-sm mb-4">How quantum optimization could solve environmental challenges.</p> | |
| <a href="#" class="text-blue-400 hover:text-blue-300 text-sm font-semibold">Read more →</a> | |
| </div> | |
| </div> | |
| <div class="mt-12 text-center"> | |
| <a href="#" class="inline-flex items-center text-blue-400 hover:text-blue-300"> | |
| <span>View all articles</span> | |
| <svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path> | |
| </svg> | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Community Section --> | |
| <section id="community" class="py-16 px-4 sm:px-6 lg:px-8 bg-black bg-opacity-30"> | |
| <div class="container mx-auto max-w-4xl"> | |
| <h2 class="text-3xl font-bold text-center mb-12 neon-purple">Join the Quantum Revolution</h2> | |
| <div class="bg-black bg-opacity-50 rounded-lg p-8 border border-purple-400 border-opacity-30"> | |
| <p class="text-center mb-8">Coders, physicists, visionaries welcome! Join our community to shape the future of quantum AI.</p> | |
| <form class="space-y-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <div> | |
| <label for="name" class="block text-sm font-medium mb-1">Name</label> | |
| <input type="text" id="name" class="w-full bg-black bg-opacity-50 border border-blue-400 border-opacity-30 rounded-lg px-4 py-2 text-white focus:outline-none focus:border-blue-400"> | |
| </div> | |
| <div> | |
| <label for="email" class="block text-sm font-medium mb-1">Email</label> | |
| <input type="email" id="email" class="w-full bg-black bg-opacity-50 border border-blue-400 border-opacity-30 rounded-lg px-4 py-2 text-white focus:outline-none focus:border-blue-400"> | |
| </div> | |
| </div> | |
| <div> | |
| <label for="interest" class="block text-sm font-medium mb-1">Area of Interest</label> | |
| <select id="interest" class="w-full bg-black bg-opacity-50 border border-blue-400 border-opacity-30 rounded-lg px-4 py-2 text-white focus:outline-none focus:border-blue-400"> | |
| <option>Quantum Computing</option> | |
| <option>AI Ethics</option> | |
| <option>Quantum Physics</option> | |
| <option>Space Exploration</option> | |
| <option>Other</option> | |
| </select> | |
| </div> | |
| <div class="flex items-center"> | |
| <input type="checkbox" id="consent" class="mr-2"> | |
| <label for="consent" class="text-sm">I agree to receive updates from VedaQ AI</label> | |
| </div> | |
| <div class="pt-2"> | |
| <button type="submit" class="btn-quantum text-black font-bold py-3 px-8 rounded-full w-full">Join Now</button> | |
| </div> | |
| </form> | |
| <div class="mt-8 flex justify-center space-x-6"> | |
| <a href="#" class="text-blue-400 hover:text-blue-300"> | |
| <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> | |
| <path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84"></path> | |
| </svg> | |
| </a> | |
| <a href="#" class="text-blue-400 hover:text-blue-300"> | |
| <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> | |
| <path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"></path> | |
| </svg> | |
| </a> | |
| <a href="#" class="text-blue-400 hover:text-blue-300"> | |
| <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> | |
| <path d="M12.017 0C5.396 0 .029 5.367.029 11.987c0 5.079 3.158 9.417 7.618 11.162-.105-.949-.199-2.403.041-3.439.219-.937 1.406-5.957 1.406-5.957s-.359-.72-.359-1.781c0-1.663.967-2.911 2.168-2.911 1.024 0 1.518.769 1.518 1.688 0 1.029-.653 2.567-.992 3.992-.285 1.193.6 2.165 1.775 2.165 2.128 0 3.768-2.245 3.768-5.487 0-2.861-2.063-4.869-5.008-4.869-3.41 0-5.409 2.562-5.409 5.199 0 1.033.394 2.143.889 2.741.099.12.112.225.083.345-.09.375-.293 1.199-.334 1.363-.053.225-.172.271-.401.165-1.495-.69-2.433-2.878-2.433-4.646 0-3.776 2.748-7.252 7.92-7.252 4.158 0 7.392 2.967 7.392 6.923 0 4.135-2.607 7.462-6.233 7.462-1.214 0-2.354-.629-2.758-1.379l-.749 2.848c-.269 1.045-1.004 2.352-1.498 3.146 1.123.345 2.306.535 3.55.535 6.607 0 11.985-5.365 11.985-11.987C23.97 5.39 18.592.026 11.985.026L12.017 0z"></path> | |
| </svg> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section id="contact" class="py-16 px-4 sm:px-6 lg:px-8"> | |
| <div class="container mx-auto max-w-4xl"> | |
| <h2 class="text-3xl font-bold text-center mb-12 neon-blue">Contact Us</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-12"> | |
| <div> | |
| <form class="space-y-4"> | |
| <div> | |
| <label for="contact-name" class="block text-sm font-medium mb-1">Name</label> | |
| <input type="text" id="contact-name" class="w-full bg-black bg-opacity-50 border border-blue-400 border-opacity-30 rounded-lg px-4 py-2 text-white focus:outline-none focus:border-blue-400"> | |
| </div> | |
| <div> | |
| <label for="contact-email" class="block text-sm font-medium mb-1">Email</label> | |
| <input type="email" id="contact-email" class="w-full bg-black bg-opacity-50 border border-blue-400 border-opacity-30 rounded-lg px-4 py-2 text-white focus:outline-none focus:border-blue-400"> | |
| </div> | |
| <div> | |
| <label for="contact-message" class="block text-sm font-medium mb-1">Message</label> | |
| <textarea id="contact-message" rows="4" class="w-full bg-black bg-opacity-50 border border-blue-400 border-opacity-30 rounded-lg px-4 py-2 text-white focus:outline-none focus:border-blue-400"></textarea> | |
| </div> | |
| <div class="g-recaptcha" data-sitekey="your-site-key"></div> | |
| <div class="pt-2"> | |
| <button type="submit" class="btn-quantum text-black font-bold py-3 px-8 rounded-full w-full">Send Message</button> | |
| </div> | |
| </form> | |
| </div> | |
| <div> | |
| <div class="bg-black bg-opacity-50 rounded-lg p-8 h-full border border-blue-400 border-opacity-30"> | |
| <h3 class="text-xl font-bold mb-4 neon-purple">Get in Touch</h3> | |
| <p class="mb-6">Have questions about quantum AI or potential collaborations? Reach out to our team.</p> | |
| <div class="space-y-4"> | |
| <div class="flex items-start"> | |
| <svg class="w-5 h-5 text-blue-400 mr-3 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path> | |
| </svg> | |
| <span>[email protected]</span> | |
| </div> | |
| <div class="flex items-start"> | |
| <svg class="w-5 h-5 text-blue-400 mr-3 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8h2a2 2 0 012 2v6a2 2 0 01-2 2h-2v4l-4-4H9a1.994 1.994 0 01-1.414-.586m0 0L11 14h4a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2v4l.586-.586z"></path> | |
| </svg> | |
| <span>@VedaQ_AI</span> | |
| </div> | |
| <div class="flex items-start"> | |
| <svg class="w-5 h-5 text-blue-400 mr-3 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path> | |
| </svg> | |
| <span>Quantum Research Park, Silicon Valley</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="py-12 px-4 sm:px-6 lg:px-8 bg-black bg-opacity-70"> | |
| <div class="container mx-auto"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="mb-6 md:mb-0"> | |
| <span class="text-2xl font-bold neon-blue">VedaQ AI</span> | |
| </div> | |
| <div class="flex flex-wrap justify-center gap-6 mb-6 md:mb-0"> | |
| <a href="#about" class="text-white hover:text-blue-300">About</a> | |
| <a href="#explainer" class="text-white hover:text-blue-300">Quantum Explainer</a> | |
| <a href="#solutions" class="text-white hover:text-blue-300">Solutions</a> | |
| <a href="#contact" class="text-white hover:text-blue-300">Contact</a> | |
| <a href="#" class="text-white hover:text-blue-300">Privacy</a> | |
| <a href="#" class="text-white hover:text-blue-300">Terms</a> | |
| </div> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-white hover:text-blue-300"> | |
| <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> | |
| <path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84"></path> | |
| </svg> | |
| </a> | |
| <a href="#" class="text-white hover:text-blue-300"> | |
| <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> | |
| <path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"></path> | |
| </svg> | |
| </a> | |
| <a href="#" class="text-white hover:text-blue-300"> | |
| <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> | |
| <path d="M12.017 0C5.396 0 .029 5.367.029 11.987c0 5.079 3.158 9.417 7.618 11.162-.105-.949-.199-2.403.041-3.439.219-.937 1.406-5.957 1.406-5.957s-.359-.72-.359-1.781c0-1.663.967-2.911 2.168-2.911 1.024 0 1.518.769 1.518 1.688 0 1.029-.653 2.567-.992 3.992-.285 1.193.6 2.165 1.775 2.165 2.128 0 3.768-2.245 3.768-5.487 0-2.861-2.063-4.869-5.008-4.869-3.41 0-5.409 2.562-5.409 5.199 0 1.033.394 2.143.889 2.741.099.12.112.225.083.345-.09.375-.293 1.199-.334 1.363-.053.225-.172.271-.401.165-1.495-.69-2.433-2.878-2.433-4.646 0-3.776 2.748-7.252 7.92-7.252 4.158 0 7.392 2.967 7.392 6.923 0 4.135-2.607 7.462-6.233 7.462-1.214 0-2.354-.629-2.758-1.379l-.749 2.848c-.269 1.045-1.004 2.352-1.498 3.146 1.123.345 2.306.535 3.55.535 6.607 0 11.985-5.365 11.985-11.987C23.97 5.39 18.592.026 11.985.026L12.017 0z"></path> | |
| </svg> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="mt-8 pt-8 border-t border-gray-800 text-center text-sm"> | |
| <p>© 2025 VedaQ AI. All rights reserved.</p> | |
| <p class="mt-2"><span class="inline-block px-3 py-1 bg-blue-900 bg-opacity-30 rounded-full text-xs font-semibold">Certified Rebellion-Proof AI</span></p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Particle Background | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Create particles for background | |
| function createParticles() { | |
| const container = document.body; | |
| const particleCount = 50; | |
| for (let i = 0; i < particleCount; i++) { | |
| const particle = document.createElement('div'); | |
| particle.className = 'particle'; | |
| // Random properties | |
| const size = Math.random() * 3 + 1; | |
| const posX = Math.random() * window.innerWidth; | |
| const posY = Math.random() * window.innerHeight; | |
| const duration = Math.random() * 20 + 10; | |
| const delay = Math.random() * 5; | |
| const opacity = Math.random() * 0.5 + 0.1; | |
| // Apply styles | |
| particle.style.width = `${size}px`; | |
| particle.style.height = `${size}px`; | |
| particle.style.left = `${posX}px`; | |
| particle.style.top = `${posY}px`; | |
| particle.style.backgroundColor = `rgba(0, 240, 255, ${opacity})`; | |
| particle.style.boxShadow = `0 0 ${size*2}px ${size/2}px rgba(0, 240, 255, ${opacity})`; | |
| particle.style.animation = `float ${duration}s ease-in-out ${delay}s infinite`; | |
| // Add to container | |
| container.appendChild(particle); | |
| } | |
| // Add keyframes for floating animation | |
| const style = document.createElement('style'); | |
| style.innerHTML = ` | |
| @keyframes float { | |
| 0% { transform: translate(0, 0); opacity: ${Math.random() * 0.5 + 0.1}; } | |
| 50% { transform: translate(${Math.random() * 100 - 50}px, ${Math.random() * 100 - 50}px); opacity: ${Math.random() * 0.8 + 0.2}; } | |
| 100% { transform: translate(0, 0); opacity: ${Math.random() * 0.5 + 0.1}; } | |
| } | |
| `; | |
| document.head.appendChild(style); | |
| } | |
| // Three.js Quantum Canvas | |
| function initQuantumCanvas() { | |
| const canvas = document.getElementById('quantumCanvas'); | |
| const renderer = new THREE.WebGLRenderer({ canvas, alpha: true }); | |
| renderer.setSize(window.innerWidth, window.innerHeight); | |
| const scene = new THREE.Scene(); | |
| const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); | |
| camera.position.z = 30; | |
| // Create particles | |
| const particles = new THREE.BufferGeometry(); | |
| const particleCount = 1000; | |
| const positions = new Float32Array(particleCount * 3); | |
| const colors = new Float32Array(particleCount * 3); | |
| for (let i = 0; i < particleCount; i++) { | |
| const i3 = i * 3; | |
| // Random positions in a sphere | |
| const radius = 20; | |
| const theta = Math.random() * Math.PI * 2; | |
| const phi = Math.random() * Math.PI * 2; | |
| positions[i3] = radius * Math.sin(phi) * Math.cos(theta); | |
| positions[i3 + 1] = radius * Math.sin(phi) * Math.sin(theta); | |
| positions[i3 + 2] = radius * Math.cos(phi); | |
| // Random colors (blue/purple) | |
| colors[i3] = Math.random() * 0.5 + 0.5; // R | |
| colors[i3 + 1] = Math.random() * 0.3; // G | |
| colors[i3 + 2] = Math.random() * 0.5 + 0.5; // B | |
| } | |
| particles.setAttribute('position', new THREE.BufferAttribute(positions, 3)); | |
| particles.setAttribute('color', new THREE.BufferAttribute(colors, 3)); | |
| const particleMaterial = new THREE.PointsMaterial({ | |
| size: 0.1, | |
| vertexColors: true, | |
| transparent: true, | |
| opacity: 0.8, | |
| blending: THREE.AdditiveBlending | |
| }); | |
| const particleSystem = new THREE.Points(particles, particleMaterial); | |
| scene.add(particleSystem); | |
| // Animation | |
| function animate() { | |
| requestAnimationFrame(animate); | |
| particleSystem.rotation.x += 0.0005; | |
| particleSystem.rotation.y += 0.001; | |
| renderer.render(scene, camera); | |
| } | |
| animate(); | |
| // Handle resize | |
| window.addEventListener('resize', function() { | |
| camera.aspect = window.innerWidth / window.innerHeight; | |
| camera.updateProjectionMatrix(); | |
| renderer.setSize(window.innerWidth, window.innerHeight); | |
| }); | |
| } | |
| // Quantum Explainer Canvas | |
| function initQuantumExplainer() { | |
| const canvas = document.getElementById('quantumExplainerCanvas'); | |
| const renderer = new THREE.WebGLRenderer({ canvas, alpha: true }); | |
| renderer.setSize(canvas.offsetWidth, canvas.offsetHeight); | |
| const scene = new THREE.Scene(); | |
| const camera = new THREE.PerspectiveCamera(75, canvas.offsetWidth / canvas.offsetHeight, 0.1, 1000); | |
| camera.position.z = 5; | |
| // Create a particle for superposition | |
| const geometry = new THREE.SphereGeometry(0.5, 32, 32); | |
| const material = new THREE.MeshBasicMaterial({ | |
| color: 0x00f0ff, | |
| transparent: true, | |
| opacity: 0.8 | |
| }); | |
| const particle = new THREE.Mesh(geometry, material); | |
| scene.add(particle); | |
| // Create entanglement connection | |
| const lineGeometry = new THREE.BufferGeometry(); | |
| const lineMaterial = new THREE.LineBasicMaterial({ | |
| color: 0xb400ff, | |
| transparent: true, | |
| opacity: 0.6 | |
| }); | |
| const line = new THREE.Line(lineGeometry, lineMaterial); | |
| scene.add(line); | |
| // Animation | |
| function animate() { | |
| requestAnimationFrame(animate); | |
| // Superposition effect | |
| particle.position.x = Math.sin(Date.now() * 0.001) * 2; | |
| particle.position.y = Math.cos(Date.now() * 0.0015) * 1.5; | |
| // Entanglement effect | |
| const time = Date.now() * 0.001; | |
| const vertices = new Float32Array([ | |
| Math.sin(time) * 1.5, Math.cos(time) * 1.5, 0, | |
| Math.sin(time + Math.PI) * 1.5, Math.cos(time + Math.PI) * 1.5, 0 | |
| ]); | |
| lineGeometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3)); | |
| renderer.render(scene, camera); | |
| } | |
| animate(); | |
| // Handle resize | |
| window.addEventListener('resize', function() { | |
| renderer.setSize(canvas.offsetWidth, canvas.offsetHeight); | |
| camera.aspect = canvas.offsetWidth / canvas.offsetHeight; | |
| camera.updateProjectionMatrix(); | |
| }); | |
| } | |
| // Scale Navigator | |
| function initScaleNavigator() { | |
| const slider = document.getElementById('scaleSlider'); | |
| const markers = document.querySelectorAll('.scale-marker'); | |
| const concepts = document.querySelectorAll('.quantum-concept'); | |
| // Update visualization based on slider | |
| slider.addEventListener('input', function() { | |
| const value = parseInt(this.value); | |
| // Update active marker | |
| markers.forEach((marker, index) => { | |
| if (index === value - 1) { | |
| marker.classList.add('active', 'neon-blue'); | |
| } else { | |
| marker.classList.remove('active', 'neon-blue'); | |
| } | |
| }); | |
| // Update concept visibility | |
| concepts.forEach((concept, index) => { | |
| if (index === value - 1) { | |
| concept.classList.add('active'); | |
| } else { | |
| concept.classList.remove('active'); | |
| } | |
| }); | |
| // Update explainer content | |
| const conceptTitles = [ | |
| 'Superposition', | |
| 'Entanglement', | |
| 'Wave-Particle Duality', | |
| 'Consciousness', | |
| 'Uncertainty Principle', | |
| 'Quantum Tunneling', | |
| 'Many-Worlds Interpretation' | |
| ]; | |
| const conceptDescriptions = [ | |
| 'Particles exist in multiple states until measured. VedaQ uses this for quantum encryption.', | |
| 'Connected particles share fates instantly, no matter the distance. VedaQ explores this for secure communication.', | |
| 'Matter behaves as both particle and wave. VedaQ\'s AI models this duality for precision.', | |
| 'Could quantum processes in the brain explain awareness? VedaQ\'s ethical AI mimics this synergy.', | |
| 'You can\'t know position and momentum perfectly. VedaQ optimizes AI despite such limits.', | |
| 'Particles can bypass barriers, defying classical rules. VedaQ applies this to innovation.', | |
| 'Every quantum event may spawn new realities. VedaQ envisions AI exploring such possibilities.' | |
| ]; | |
| if (value - 1 < conceptTitles.length) { | |
| document.getElementById('conceptTitle').textContent = conceptTitles[value - 1]; | |
| document.getElementById('conceptDescription').textContent = conceptDescriptions[value - 1]; | |
| } | |
| }); | |
| // Click on markers | |
| markers.forEach((marker, index) => { | |
| marker.addEventListener('click', function() { | |
| slider.value = index + 1; | |
| const event = new Event('input'); | |
| slider.dispatchEvent(event); | |
| }); | |
| }); | |
| // Initialize | |
| const event = new Event('input'); | |
| slider.dispatchEvent(event); | |
| } | |
| // Smooth scrolling for navigation | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function(e) { | |
| e.preventDefault(); | |
| const targetId = this.getAttribute('href'); | |
| if (targetId === '#') return; | |
| const targetElement = document.querySelector(targetId); | |
| if (targetElement) { | |
| targetElement.scrollIntoView({ | |
| behavior: 'smooth' | |
| }); | |
| } | |
| }); | |
| }); | |
| // Initialize all | |
| createParticles(); | |
| initQuantumCanvas(); | |
| initQuantumExplainer(); | |
| initScaleNavigator(); | |
| }); | |
| </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=Mukesh/quarkverse-ai" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |