Spaces:
Running
Running
create a web site to generate chord sequences in various styles of music. Include the capability to add modulation to the chord sequences to create more complex song muic.
27d4951
verified
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>ChordCraft Maestro - AI Music Generator</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.waves.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/tone@14.7.77/build/Tone.min.js"></script> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: { | |
| 500: '#6366f1', | |
| }, | |
| secondary: { | |
| 500: '#ec4899', | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| } | |
| .music-note { | |
| animation: float 3s ease-in-out infinite; | |
| } | |
| @keyframes float { | |
| 0%, 100% { transform: translateY(0); } | |
| 50% { transform: translateY(-15px); } | |
| } | |
| .chord-box { | |
| transition: all 0.3s ease; | |
| } | |
| .chord-box:hover { | |
| transform: scale(1.05); | |
| box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1); | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen bg-gray-50"> | |
| <div id="vanta-bg" class="fixed inset-0 -z-10"></div> | |
| <div class="container mx-auto px-4 py-12"> | |
| <header class="text-center mb-16"> | |
| <div class="flex justify-center mb-6"> | |
| <div class="music-note text-primary-500"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> | |
| <path d="M9 18V5l12-2v13"></path> | |
| <circle cx="6" cy="18" r="3"></circle> | |
| <circle cx="18" cy="16" r="3"></circle> | |
| </svg> | |
| </div> | |
| </div> | |
| <h1 class="text-5xl font-bold text-gray-800 mb-4">ChordCraft Maestro</h1> | |
| <p class="text-xl text-gray-600 max-w-2xl mx-auto">Generate beautiful chord progressions in any musical style with AI-powered modulation</p> | |
| </header> | |
| <main class="bg-white rounded-2xl shadow-xl p-8 mb-16"> | |
| <div class="grid md:grid-cols-2 gap-8"> | |
| <!-- Generator Form --> | |
| <div> | |
| <h2 class="text-2xl font-semibold mb-6 text-gray-800">Create Your Progression</h2> | |
| <div class="space-y-6"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">Music Style</label> | |
| <select class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary-500 focus:border-primary-500"> | |
| <option>Pop</option> | |
| <option>Jazz</option> | |
| <option>Blues</option> | |
| <option>Rock</option> | |
| <option>Classical</option> | |
| <option>R&B</option> | |
| <option>Electronic</option> | |
| <option>Folk</option> | |
| <option selected>Custom</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">Key</label> | |
| <select class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary-500 focus:border-primary-500"> | |
| <option>C Major</option> | |
| <option>G Major</option> | |
| <option>D Major</option> | |
| <option>A Major</option> | |
| <option>E Major</option> | |
| <option selected>A Minor</option> | |
| <option>E Minor</option> | |
| <option>B Minor</option> | |
| <option>F# Minor</option> | |
| <option>C# Minor</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">Chord Complexity</label> | |
| <div class="flex items-center space-x-4"> | |
| <span class="text-sm text-gray-500">Simple</span> | |
| <input type="range" min="1" max="5" value="3" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer"> | |
| <span class="text-sm text-gray-500">Complex</span> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">Modulation</label> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <button class="px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded-lg transition">None</button> | |
| <button class="px-4 py-2 bg-primary-500 hover:bg-primary-600 text-white rounded-lg transition">Add Modulation</button> | |
| </div> | |
| </div> | |
| <button class="w-full bg-secondary-500 hover:bg-secondary-600 text-white font-medium py-3 px-6 rounded-lg transition transform hover:scale-105"> | |
| Generate Progression | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Output Display --> | |
| <div> | |
| <h2 class="text-2xl font-semibold mb-6 text-gray-800">Your Chord Progression</h2> | |
| <div class="bg-gray-50 rounded-xl p-6 min-h-[300px] flex items-center justify-center"> | |
| <div id="chord-output" class="grid grid-cols-4 gap-4 w-full"> | |
| <div class="chord-box bg-white p-4 rounded-lg shadow text-center border border-gray-200"> | |
| <div class="text-2xl font-bold text-primary-500">C</div> | |
| <div class="text-xs text-gray-500">Major</div> | |
| </div> | |
| <div class="chord-box bg-white p-4 rounded-lg shadow text-center border border-gray-200"> | |
| <div class="text-2xl font-bold text-primary-500">G</div> | |
| <div class="text-xs text-gray-500">Major</div> | |
| </div> | |
| <div class="chord-box bg-white p-4 rounded-lg shadow text-center border border-gray-200"> | |
| <div class="text-2xl font-bold text-primary-500">Am</div> | |
| <div class="text-xs text-gray-500">Minor</div> | |
| </div> | |
| <div class="chord-box bg-white p-4 rounded-lg shadow text-center border border-gray-200"> | |
| <div class="text-2xl font-bold text-primary-500">F</div> | |
| <div class="text-xs text-gray-500">Major</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-6 flex space-x-4"> | |
| <button class="flex-1 bg-gray-100 hover:bg-gray-200 py-3 px-4 rounded-lg flex items-center justify-center space-x-2"> | |
| <i data-feather="play"></i> | |
| <span>Play</span> | |
| </button> | |
| <button class="flex-1 bg-gray-100 hover:bg-gray-200 py-3 px-4 rounded-lg flex items-center justify-center space-x-2"> | |
| <i data-feather="save"></i> | |
| <span>Save</span> | |
| </button> | |
| <button class="flex-1 bg-gray-100 hover:bg-gray-200 py-3 px-4 rounded-lg flex items-center justify-center space-x-2"> | |
| <i data-feather="share-2"></i> | |
| <span>Share</span> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <section class="bg-white rounded-2xl shadow-xl p-8 mb-16"> | |
| <h2 class="text-2xl font-semibold mb-6 text-gray-800">Modulation Options</h2> | |
| <div class="grid md:grid-cols-3 gap-6"> | |
| <div class="bg-gray-50 p-6 rounded-xl"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-primary-100 p-2 rounded-lg mr-4"> | |
| <i data-feather="repeat" class="text-primary-500"></i> | |
| </div> | |
| <h3 class="font-medium text-gray-800">Relative Key</h3> | |
| </div> | |
| <p class="text-gray-600">Switch to the parallel major or minor for emotional contrast</p> | |
| </div> | |
| <div class="bg-gray-50 p-6 rounded-xl"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-primary-100 p-2 rounded-lg mr-4"> | |
| <i data-feather="arrow-up" class="text-primary-500"></i> | |
| </div> | |
| <h3 class="font-medium text-gray-800">Up a Fourth</h3> | |
| </div> | |
| <p class="text-gray-600">Classic modulation that creates a sense of uplifting energy</p> | |
| </div> | |
| <div class="bg-gray-50 p-6 rounded-xl"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-primary-100 p-2 rounded-lg mr-4"> | |
| <i data-feather="activity" class="text-primary-500"></i> | |
| </div> | |
| <h3 class="font-medium text-gray-800">Chromatic</h3> | |
| </div> | |
| <p class="text-gray-600">Add tension and drama with half-step movements</p> | |
| </div> | |
| </div> | |
| </section> | |
| <footer class="text-center text-gray-600"> | |
| <p>© 2023 ChordCraft Maestro - Create beautiful music with AI</p> | |
| </footer> | |
| </div> | |
| <script> | |
| // Initialize Vanta.js background | |
| VANTA.WAVES({ | |
| el: "#vanta-bg", | |
| mouseControls: true, | |
| touchControls: true, | |
| gyroControls: false, | |
| minHeight: 200.00, | |
| minWidth: 200.00, | |
| scale: 1.00, | |
| scaleMobile: 1.00, | |
| color: 0x6366f1, | |
| shininess: 35.00, | |
| waveHeight: 15.00, | |
| waveSpeed: 0.50, | |
| zoom: 0.85 | |
| }); | |
| // Initialize Tone.js | |
| document.addEventListener('DOMContentLoaded', function() { | |
| feather.replace(); | |
| // Example: Play chord progression when Play button is clicked | |
| document.querySelector('button:nth-of-type(1)').addEventListener('click', function() { | |
| alert('Audio playback would start here using Tone.js synthesizer!'); | |
| // In a real implementation, we would use Tone.js to play the chords | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |