Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>About - Sonic Canvas</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.waves.min.js"></script> | |
| </head> | |
| <body class="bg-gray-900 text-white"> | |
| <!-- Header --> | |
| <header class="absolute top-0 left-0 right-0 z-50 p-4 flex justify-between items-center bg-gray-900 bg-opacity-80 backdrop-blur-sm"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="p-2 rounded-lg bg-gradient-to-r from-purple-500 to-indigo-600"> | |
| <i data-feather="music" class="text-white"></i> | |
| </div> | |
| <h1 class="text-3xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-purple-400 via-pink-400 to-indigo-300"> | |
| Sonic Canvas | |
| </h1> | |
| </div> | |
| <nav class="flex space-x-4"> | |
| <a href="index.html" class="px-4 py-2 rounded-lg hover:bg-gray-800 transition">Home</a> | |
| <a href="about.html" class="px-4 py-2 rounded-lg bg-gradient-to-r from-purple-600 to-indigo-600">About</a> | |
| </nav> | |
| </header> | |
| <!-- Main Content --> | |
| <div id="content" class="min-h-screen flex items-center justify-center p-8 pt-24"> | |
| <div class="max-w-4xl mx-auto"> | |
| <div class="text-center mb-12"> | |
| <h1 class="text-5xl font-bold mb-6 bg-clip-text text-transparent bg-gradient-to-r from-purple-400 to-indigo-300"> | |
| About Sonic Canvas | |
| </h1> | |
| <p class="text-xl text-gray-300 max-w-2xl mx-auto"> | |
| An innovative step sequencer that transforms your browser into a musical playground | |
| </p> | |
| </div> | |
| <div class="grid md:grid-cols-2 gap-8 mb-12"> | |
| <div class="bg-gray-800 bg-opacity-50 backdrop-blur-sm rounded-xl p-6 border border-gray-700"> | |
| <div class="flex items-center mb-4"> | |
| <div class="p-3 rounded-lg bg-gradient-to-r from-purple-500 to-indigo-600 mr-4"> | |
| <i data-feather="grid" class="w-6 h-6"></i> | |
| </div> | |
| <h2 class="text-2xl font-bold">Interactive Grid</h2> | |
| </div> | |
| <p class="text-gray-300"> | |
| Our 12x16 grid interface allows you to visually compose music by activating cells. | |
| Each row represents a different note, and each column represents a step in time. | |
| </p> | |
| </div> | |
| <div class="bg-gray-800 bg-opacity-50 backdrop-blur-sm rounded-xl p-6 border border-gray-700"> | |
| <div class="flex items-center mb-4"> | |
| <div class="p-3 rounded-lg bg-gradient-to-r from-pink-500 to-rose-600 mr-4"> | |
| <i data-feather="music" class="w-6 h-6"></i> | |
| </div> | |
| <h2 class="text-2xl font-bold">Musical Scales</h2> | |
| </div> | |
| <p class="text-gray-300"> | |
| Choose from various musical scales including Major, Minor, Pentatonic, Blues, | |
| Dorian, and Mixolydian to create different moods and styles. | |
| </p> | |
| </div> | |
| <div class="bg-gray-800 bg-opacity-50 backdrop-blur-sm rounded-xl p-6 border border-gray-700"> | |
| <div class="flex items-center mb-4"> | |
| <div class="p-3 rounded-lg bg-gradient-to-r from-blue-500 to-cyan-600 mr-4"> | |
| <i data-feather="sliders" class="w-6 h-6"></i> | |
| </div> | |
| <h2 class="text-2xl font-bold">Precise Control</h2> | |
| </div> | |
| <p class="text-gray-300"> | |
| Adjust tempo, volume, and octave range to fine-tune your composition. | |
| The virtual keyboard lets you preview notes before adding them to your sequence. | |
| </p> | |
| </div> | |
| <div class="bg-gray-800 bg-opacity-50 backdrop-blur-sm rounded-xl p-6 border border-gray-700"> | |
| <div class="flex items-center mb-4"> | |
| <div class="p-3 rounded-lg bg-gradient-to-r from-green-500 to-emerald-600 mr-4"> | |
| <i data-feather="code" class="w-6 h-6"></i> | |
| </div> | |
| <h2 class="text-2xl font-bold">Web Audio API</h2> | |
| </div> | |
| <p class="text-gray-300"> | |
| Built with modern web technologies including Web Audio API for high-quality | |
| sound synthesis and smooth performance directly in your browser. | |
| </p> | |
| </div> | |
| </div> | |
| <div class="text-center"> | |
| <h2 class="text-3xl font-bold mb-6">How to Use</h2> | |
| <div class="bg-gray-800 bg-opacity-50 backdrop-blur-sm rounded-xl p-8 border border-gray-700"> | |
| <ol class="list-decimal list-inside space-y-4 text-left max-w-2xl mx-auto text-gray-300"> | |
| <li>Click cells in the grid to activate notes</li> | |
| <li>Adjust tempo and volume using the sliders</li> | |
| <li>Change octaves and musical scales for different sounds</li> | |
| <li>Use the virtual keyboard to preview notes</li> | |
| <li>Press Play to hear your composition come to life</li> | |
| <li>Press Clear to start a new sequence</li> | |
| </ol> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Footer --> | |
| <footer class="py-8 text-center text-gray-500 text-sm border-t border-gray-800 mt-12"> | |
| <div class="container mx-auto px-4"> | |
| <p>© 2023 Sonic Canvas - A modern step sequencer experience</p> | |
| </div> | |
| </footer> | |
| <script> | |
| // Initialize Feather Icons | |
| feather.replace(); | |
| // Initialize Vanta.js background | |
| VANTA.WAVES({ | |
| el: "#content", | |
| mouseControls: true, | |
| touchControls: true, | |
| gyroControls: false, | |
| minHeight: 200.00, | |
| minWidth: 200.00, | |
| scale: 1.00, | |
| scaleMobile: 1.00, | |
| color: 0x1a1a2e, | |
| shininess: 15.00, | |
| waveHeight: 10.00, | |
| waveSpeed: 0.50 | |
| }); | |
| </script> | |
| </body> | |
| </html> |