Spaces:
Running
Running
| <html class="dark" lang="en"> | |
| <head> | |
| <meta charset="utf-8"/> | |
| <meta content="width=device-width, initial-scale=1.0" name="viewport"/> | |
| <title>About - Stitch</title> | |
| <script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script> | |
| <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap" rel="stylesheet"/> | |
| <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet"/> | |
| <script> | |
| tailwind.config = { | |
| darkMode: "class", | |
| theme: { | |
| extend: { | |
| colors: { | |
| "primary": "#00FFFF", | |
| "background-dark": "#000000", | |
| "surface-dark": "#1A1A2E", | |
| "accent": "#FF00FF", | |
| "text-light": "#E0E0E0", | |
| "text-dark": "#FFFFFF" | |
| }, | |
| fontFamily: { | |
| "display": ["Space Grotesk", "sans-serif"] | |
| }, | |
| borderRadius: { | |
| "DEFAULT": "0.75rem", | |
| "lg": "1rem", | |
| "xl": "1.5rem", | |
| "full": "9999px" | |
| }, | |
| boxShadow: { | |
| 'glow-primary': '0 0 5px #00FFFF, 0 0 10px #00FFFF, 0 0 15px #00FFFF', | |
| 'glow-accent': '0 0 5px #FF00FF, 0 0 10px #FF00FF, 0 0 15px #FF00FF', | |
| } | |
| }, | |
| }, | |
| } | |
| </script> | |
| <style> | |
| .material-symbols-outlined { | |
| font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24 | |
| } | |
| .animate-flicker { | |
| animation: flicker 2s infinite alternate; | |
| } | |
| @keyframes flicker { | |
| 0%, 18%, 22%, 25%, 53%, 57%, 100% { | |
| text-shadow: | |
| 0 0 4px #00FFFF, | |
| 0 0 11px #00FFFF, | |
| 0 0 19px #00FFFF, | |
| 0 0 40px #00FFFF, | |
| 0 0 80px #00FFFF; | |
| } | |
| 20%, 24%, 55% { | |
| text-shadow: none; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gradient-to-br from-gray-900 to-black font-display text-text-light"> | |
| <div class="flex h-screen w-full"> | |
| <main class="flex-1 flex flex-col overflow-hidden p-6 gap-6"> | |
| <header class="flex items-center justify-between"> | |
| <div class="flex items-center gap-3"> | |
| <div class="size-10 bg-primary/10 rounded-lg flex items-center justify-center shadow-glow-primary"> | |
| <span class="material-symbols-outlined text-primary text-2xl">bubble_chart</span> | |
| </div> | |
| <h1 class="text-text-dark text-2xl font-bold">Stitch</h1> | |
| </div> | |
| <nav class="flex gap-6"> | |
| <a class="text-text-light hover:text-primary transition-colors" href="index.html">Home</a> | |
| <a class="text-text-light hover:text-primary transition-colors" href="synthesizer.html">Synthesizer</a> | |
| <a class="text-text-light hover:text-primary transition-colors" href="quantum.html">Quantum</a> | |
| <a class="text-text-light hover:text-primary transition-colors" href="visualization.html">Visualization</a> | |
| <a class="text-text-light hover:text-primary transition-colors" href="api.html">API</a> | |
| <a class="text-text-light hover:text-primary transition-colors" href="agent.html">Agent</a> | |
| <a class="text-text-light hover:text-primary transition-colors" href="community.html">Community</a> | |
| <a class="text-primary font-medium" href="about.html">About</a> | |
| </nav> | |
| <div class="flex items-center gap-4"> | |
| <button class="flex items-center justify-center rounded-lg h-10 w-10 bg-white/5 text-text-light hover:bg-white/10"> | |
| <span class="material-symbols-outlined">settings</span> | |
| </button> | |
| <div class="bg-center bg-no-repeat aspect-square bg-cover rounded-full size-10 border-2 border-primary" data-alt="User avatar" style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuA2mbAar7pUrV5jZFgpjBtdtDsGy7j8Lc_H9hav9BtxU399HRUVRYEBF5wsFR5NvYwTrAu_6dFI5YfPYHd9QSf1-gulLHEDRSyaTa5Hkx28GJIouw37QLcTT1_8pHwcRzNZFKPrNh14nl6V1B38ZvG8W9e68fHzEcrJrukyiavHEl1ccZZGVQkfaEka1PMQLsRlIsAB6dJZ6Gk6w6fKpAZiFnoB2Inru9FCWep4IBwtops3MTzUooCLrMa27XW3qNrqtqvsuhb3ProA");'></div> | |
| </div> | |
| </header> | |
| <div class="flex-1 overflow-y-auto pr-2"> | |
| <div class="max-w-4xl mx-auto"> | |
| <h2 class="text-3xl font-bold text-text-dark mb-8 text-center">About Stitch</h2> | |
| <div class="bg-surface-dark/50 backdrop-blur-md p-8 rounded-xl border border-white/10 mb-8"> | |
| <h3 class="text-2xl font-bold text-text-dark mb-4">Quantum Audio-Visual Synthesis</h3> | |
| <p class="mb-4">Stitch represents the cutting edge of quantum computing applications in creative industries. Our platform harnesses the power of NISQ (Noisy Intermediate-Scale Quantum) devices to generate unique audio-visual experiences that were previously impossible with classical computing alone.</p> | |
| <p class="mb-4">By leveraging quantum superposition and entanglement, we create rich, complex musical compositions and visualizations that evolve in real-time. Each synthesis is a unique exploration of the quantum state space, producing outputs with unparalleled depth and complexity.</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8"> | |
| <div class="bg-surface-dark/50 backdrop-blur-md p-6 rounded-xl border border-white/10"> | |
| <h3 class="text-xl font-bold text-text-dark mb-3">Core Technologies</h3> | |
| <ul class="space-y-2"> | |
| <li class="flex items-start"> | |
| <span class="material-symbols-outlined text-primary mr-2">check_circle</span> | |
| <span>Amazon Braket for quantum computation</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <span class="material-symbols-outlined text-primary mr-2">check_circle</span> | |
| <span>Lindblad Master Equation solvers</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <span class="material-symbols-outlined text-primary mr-2">check_circle</span> | |
| <span>QuantumToolbox.jl for simulation</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <span class="material-symbols-outlined text-primary mr-2">check_circle</span> | |
| <span>Real-time MIDI processing</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="bg-surface-dark/50 backdrop-blur-md p-6 rounded-xl border border-white/10"> | |
| <h3 class="text-xl font-bold text-text-dark mb-3">Key Features</h3> | |
| <ul class="space-y-2"> | |
| <li class="flex items-start"> | |
| <span class="material-symbols-outlined text-primary mr-2">music_note</span> | |
| <span>Quantum music composition</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <span class="material-symbols-outlined text-primary mr-2">auto_graph</span> | |
| <span>3D quantum state visualization</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <span class="material-symbols-outlined text-primary mr-2">psychology</span> | |
| <span>AI-powered voice synthesis</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <span class="material-symbols-outlined text-primary mr-2">bolt</span> | |
| <span>Real-time quantum feedback</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="bg-surface-dark/50 backdrop-blur-md p-8 rounded-xl border border-white/10"> | |
| <h3 class="text-2xl font-bold text-text-dark mb-4">Our Mission</h3> | |
| <p class="mb-4">We aim to democratize access to quantum computing for creative professionals. Our mission is to bridge the gap between quantum physics and artistic expression, enabling musicians, artists, and researchers to explore new frontiers of creativity powered by quantum mechanics.</p> | |
| <p>Through intuitive interfaces and powerful backend systems, we make quantum-enhanced audio-visual synthesis accessible to everyone from hobbyists to professional composers.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| </body> | |
| </html> |