| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Guitar Practice Planner | Online Tool</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> |
| @keyframes stringVibration { |
| 0%, 100% { transform: translateX(0); } |
| 25% { transform: translateX(-2px); } |
| 75% { transform: translateX(2px); } |
| } |
| .vibrating { |
| animation: stringVibration 0.3s infinite; |
| } |
| .fret-marker { |
| position: absolute; |
| width: 30px; |
| height: 30px; |
| border-radius: 50%; |
| background: rgba(255, 255, 255, 0.1); |
| transform: translate(-50%, -50%); |
| } |
| .fretboard { |
| background: linear-gradient(to bottom, #5e3217, #3a1f0e); |
| border-radius: 8px; |
| box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3); |
| } |
| .string { |
| position: relative; |
| height: 6px; |
| background: linear-gradient(to right, #ddd, #fff, #ddd); |
| box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); |
| } |
| .fret { |
| position: absolute; |
| width: 4px; |
| height: 100%; |
| background: linear-gradient(to right, #d4a76a, #f1d8b8, #d4a76a); |
| box-shadow: 1px 0 3px rgba(0, 0, 0, 0.5); |
| } |
| .note-dot { |
| width: 24px; |
| height: 24px; |
| border-radius: 50%; |
| position: absolute; |
| transform: translate(-50%, -50%); |
| cursor: pointer; |
| transition: all 0.2s; |
| } |
| .note-dot:hover { |
| transform: translate(-50%, -50%) scale(1.2); |
| } |
| .practice-item { |
| transition: all 0.3s; |
| } |
| .practice-item:hover { |
| transform: translateY(-3px); |
| box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); |
| } |
| .metronome-hand { |
| transform-origin: bottom center; |
| transition: transform 0.1s ease-out; |
| } |
| </style> |
| </head> |
| <body class="bg-gray-100 font-sans"> |
| <div class="min-h-screen"> |
| |
| <header class="bg-gradient-to-r from-blue-800 to-indigo-900 text-white py-6 shadow-lg"> |
| <div class="container mx-auto px-4"> |
| <div class="flex flex-col md:flex-row justify-between items-center"> |
| <div class="flex items-center mb-4 md:mb-0"> |
| <i class="fas fa-guitar text-3xl mr-3 text-yellow-300"></i> |
| <h1 class="text-3xl font-bold">Guitar<span class="text-yellow-300">Planner</span></h1> |
| </div> |
| <nav class="flex space-x-6"> |
| <a href="#" class="hover:text-yellow-300 transition">Dashboard</a> |
| <a href="#" class="hover:text-yellow-300 transition">Exercises</a> |
| <a href="#" class="hover:text-yellow-300 transition">Progress</a> |
| <a href="#" class="hover:text-yellow-300 transition">Community</a> |
| </nav> |
| </div> |
| </div> |
| </header> |
|
|
| <main class="container mx-auto px-4 py-8"> |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-8"> |
| |
| <div class="lg:col-span-2 bg-white rounded-xl shadow-lg overflow-hidden"> |
| <div class="p-6 bg-gradient-to-r from-blue-700 to-indigo-800 text-white"> |
| <h2 class="text-2xl font-bold flex items-center"> |
| <i class="fas fa-guitar mr-2"></i> Interactive Fretboard |
| </h2> |
| <p class="text-blue-200">Click on frets to mark notes and create exercises</p> |
| </div> |
| |
| <div class="p-6"> |
| <div class="flex justify-between mb-4"> |
| <div class="flex space-x-4"> |
| <button class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition"> |
| <i class="fas fa-save mr-2"></i> Save |
| </button> |
| <button class="px-4 py-2 bg-gray-200 text-gray-800 rounded-lg hover:bg-gray-300 transition"> |
| <i class="fas fa-eraser mr-2"></i> Clear |
| </button> |
| </div> |
| <div class="flex items-center"> |
| <span class="mr-2">Tuning:</span> |
| <select class="border rounded px-3 py-1"> |
| <option>Standard (EADGBE)</option> |
| <option>Drop D (DADGBE)</option> |
| <option>Open G (DGDGBD)</option> |
| <option>Half Step Down (Eb Ab Db Gb Bb Eb)</option> |
| </select> |
| </div> |
| </div> |
| |
| |
| <div class="fretboard p-4 mb-6 relative"> |
| <div class="relative h-64"> |
| |
| <div class="absolute top-0 left-0 right-0"> |
| <div class="string" style="top: 10%; width: 100%;"></div> |
| <div class="string" style="top: 25%; width: 100%;"></div> |
| <div class="string" style="top: 40%; width: 100%;"></div> |
| <div class="string" style="top: 55%; width: 100%;"></div> |
| <div class="string" style="top: 70%; width: 100%;"></div> |
| <div class="string" style="top: 85%; width: 100%;"></div> |
| </div> |
| |
| |
| <div class="absolute top-0 bottom-0 left-0 right-0"> |
| <div class="fret" style="left: 10%;"></div> |
| <div class="fret" style="left: 20%;"></div> |
| <div class="fret" style="left: 30%;"></div> |
| <div class="fret" style="left: 40%;"></div> |
| <div class="fret" style="left: 50%;"></div> |
| <div class="fret" style="left: 60%;"></div> |
| <div class="fret" style="left: 70%;"></div> |
| <div class="fret" style="left: 80%;"></div> |
| <div class="fret" style="left: 90%;"></div> |
| </div> |
| |
| |
| <div class="fret-marker" style="top: 50%; left: 15%;"></div> |
| <div class="fret-marker" style="top: 50%; left: 35%;"></div> |
| <div class="fret-marker" style="top: 50%; left: 55%;"></div> |
| <div class="fret-marker" style="top: 50%; left: 75%;"></div> |
| <div class="fret-marker" style="top: 50%; left: 95%;"></div> |
| |
| |
| <div class="note-dot bg-red-500" style="top: 10%; left: 15%;" data-string="1" data-fret="3"></div> |
| <div class="note-dot bg-blue-500" style="top: 25%; left: 25%;" data-string="2" data-fret="5"></div> |
| <div class="note-dot bg-green-500" style="top: 40%; left: 35%;" data-string="3" data-fret="7"></div> |
| <div class="note-dot bg-yellow-500" style="top: 70%; left: 55%;" data-string="5" data-fret="9"></div> |
| </div> |
| </div> |
| |
| <div class="grid grid-cols-2 gap-4"> |
| <div class="bg-gray-50 p-4 rounded-lg"> |
| <h3 class="font-bold mb-2 text-gray-800">Selected Notes</h3> |
| <div class="flex flex-wrap gap-2"> |
| <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full">E3</span> |
| <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full">A5</span> |
| <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full">D7</span> |
| <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full">B9</span> |
| </div> |
| </div> |
| <div class="bg-gray-50 p-4 rounded-lg"> |
| <h3 class="font-bold mb-2 text-gray-800">Scale</h3> |
| <select class="w-full border rounded px-3 py-2"> |
| <option>Major</option> |
| <option>Minor</option> |
| <option>Pentatonic</option> |
| <option>Blues</option> |
| <option>Dorian</option> |
| </select> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden"> |
| <div class="p-6 bg-gradient-to-r from-indigo-700 to-purple-800 text-white"> |
| <h2 class="text-2xl font-bold flex items-center"> |
| <i class="fas fa-calendar-alt mr-2"></i> Practice Planner |
| </h2> |
| <p class="text-indigo-200">Schedule your practice sessions and track progress</p> |
| </div> |
| |
| <div class="p-6"> |
| <div class="mb-6"> |
| <h3 class="font-bold text-lg mb-3 text-gray-800">Today's Session</h3> |
| <div class="space-y-3"> |
| <div class="practice-item bg-gray-50 p-4 rounded-lg border-l-4 border-blue-500"> |
| <div class="flex justify-between"> |
| <div> |
| <h4 class="font-medium">Warm-up Exercises</h4> |
| <p class="text-sm text-gray-600">Finger stretching and chromatic runs</p> |
| </div> |
| <span class="text-blue-600 font-bold">15 min</span> |
| </div> |
| </div> |
| <div class="practice-item bg-gray-50 p-4 rounded-lg border-l-4 border-green-500"> |
| <div class="flex justify-between"> |
| <div> |
| <h4 class="font-medium">Scale Practice</h4> |
| <p class="text-sm text-gray-600">A minor pentatonic across the neck</p> |
| </div> |
| <span class="text-green-600 font-bold">20 min</span> |
| </div> |
| </div> |
| <div class="practice-item bg-gray-50 p-4 rounded-lg border-l-4 border-purple-500"> |
| <div class="flex justify-between"> |
| <div> |
| <h4 class="font-medium">Song Practice</h4> |
| <p class="text-sm text-gray-600">Stairway to Heaven intro</p> |
| </div> |
| <span class="text-purple-600 font-bold">25 min</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="mb-6"> |
| <h3 class="font-bold text-lg mb-3 text-gray-800">Add New Exercise</h3> |
| <div class="space-y-4"> |
| <div> |
| <label class="block text-gray-700 mb-1">Exercise Name</label> |
| <input type="text" class="w-full border rounded px-3 py-2" placeholder="e.g. Alternate Picking"> |
| </div> |
| <div> |
| <label class="block text-gray-700 mb-1">Duration (minutes)</label> |
| <input type="number" class="w-full border rounded px-3 py-2" value="15"> |
| </div> |
| <div> |
| <label class="block text-gray-700 mb-1">Category</label> |
| <select class="w-full border rounded px-3 py-2"> |
| <option>Warm-up</option> |
| <option>Scales</option> |
| <option>Chords</option> |
| <option>Songs</option> |
| <option>Technique</option> |
| </select> |
| </div> |
| <button class="w-full bg-indigo-600 text-white py-2 rounded-lg hover:bg-indigo-700 transition"> |
| <i class="fas fa-plus mr-2"></i> Add to Plan |
| </button> |
| </div> |
| </div> |
| |
| <div class="bg-gray-50 p-4 rounded-lg"> |
| <h3 class="font-bold text-lg mb-3 text-gray-800">Metronome</h3> |
| <div class="flex items-center justify-between mb-4"> |
| <div class="text-4xl font-bold text-gray-800">120</div> |
| <div class="flex space-x-2"> |
| <button class="w-10 h-10 bg-gray-200 rounded-full flex items-center justify-center"> |
| <i class="fas fa-minus"></i> |
| </button> |
| <button class="w-10 h-10 bg-gray-200 rounded-full flex items-center justify-center"> |
| <i class="fas fa-plus"></i> |
| </button> |
| </div> |
| </div> |
| <div class="flex justify-center mb-4"> |
| <div class="relative w-20 h-20"> |
| <div class="absolute bottom-1/2 left-1/2 w-1 h-10 bg-red-500 metronome-hand" style="transform: rotate(-30deg);"></div> |
| </div> |
| </div> |
| <button class="w-full bg-red-500 text-white py-2 rounded-lg hover:bg-red-600 transition"> |
| <i class="fas fa-play mr-2"></i> Start Metronome |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="mt-8 bg-white rounded-xl shadow-lg overflow-hidden"> |
| <div class="p-6 bg-gradient-to-r from-purple-700 to-pink-800 text-white"> |
| <h2 class="text-2xl font-bold flex items-center"> |
| <i class="fas fa-chart-line mr-2"></i> Practice Progress |
| </h2> |
| <p class="text-purple-200">Track your improvement over time</p> |
| </div> |
| |
| <div class="p-6 grid grid-cols-1 md:grid-cols-3 gap-6"> |
| <div class="bg-gray-50 p-4 rounded-lg"> |
| <h3 class="font-bold mb-2 text-gray-800">This Week</h3> |
| <div class="h-40 flex items-end space-x-2"> |
| <div class="w-8 bg-blue-400 rounded-t" style="height: 30%;"></div> |
| <div class="w-8 bg-blue-500 rounded-t" style="height: 50%;"></div> |
| <div class="w-8 bg-blue-600 rounded-t" style="height: 70%;"></div> |
| <div class="w-8 bg-blue-700 rounded-t" style="height: 90%;"></div> |
| <div class="w-8 bg-blue-800 rounded-t" style="height: 60%;"></div> |
| <div class="w-8 bg-blue-900 rounded-t" style="height: 40%;"></div> |
| <div class="w-8 bg-blue-400 rounded-t" style="height: 20%;"></div> |
| </div> |
| <div class="text-center mt-2 text-sm text-gray-600">Mon Tue Wed Thu Fri Sat Sun</div> |
| </div> |
| |
| <div class="bg-gray-50 p-4 rounded-lg"> |
| <h3 class="font-bold mb-2 text-gray-800">Categories</h3> |
| <div class="space-y-2"> |
| <div> |
| <div class="flex justify-between mb-1"> |
| <span class="text-sm font-medium text-gray-700">Scales</span> |
| <span class="text-sm font-medium text-blue-600">45%</span> |
| </div> |
| <div class="w-full bg-gray-200 rounded-full h-2"> |
| <div class="bg-blue-600 h-2 rounded-full" style="width: 45%"></div> |
| </div> |
| </div> |
| <div> |
| <div class="flex justify-between mb-1"> |
| <span class="text-sm font-medium text-gray-700">Chords</span> |
| <span class="text-sm font-medium text-green-600">30%</span> |
| </div> |
| <div class="w-full bg-gray-200 rounded-full h-2"> |
| <div class="bg-green-600 h-2 rounded-full" style="width: 30%"></div> |
| </div> |
| </div> |
| <div> |
| <div class="flex justify-between mb-1"> |
| <span class="text-sm font-medium text-gray-700">Songs</span> |
| <span class="text-sm font-medium text-purple-600">15%</span> |
| </div> |
| <div class="w-full bg-gray-200 rounded-full h-2"> |
| <div class="bg-purple-600 h-2 rounded-full" style="width: 15%"></div> |
| </div> |
| </div> |
| <div> |
| <div class="flex justify-between mb-1"> |
| <span class="text-sm font-medium text-gray-700">Technique</span> |
| <span class="text-sm font-medium text-yellow-600">10%</span> |
| </div> |
| <div class="w-full bg-gray-200 rounded-full h-2"> |
| <div class="bg-yellow-600 h-2 rounded-full" style="width: 10%"></div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="bg-gray-50 p-4 rounded-lg"> |
| <h3 class="font-bold mb-2 text-gray-800">Goals</h3> |
| <div class="space-y-3"> |
| <div class="flex items-center"> |
| <div class="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center mr-3"> |
| <i class="fas fa-check text-green-600"></i> |
| </div> |
| <span class="text-gray-700">Learn 5 new scales</span> |
| </div> |
| <div class="flex items-center"> |
| <div class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center mr-3"> |
| <span class="text-blue-600">2/3</span> |
| </div> |
| <span class="text-gray-700">Master 3 songs</span> |
| </div> |
| <div class="flex items-center"> |
| <div class="w-8 h-8 bg-gray-100 rounded-full flex items-center justify-center mr-3"> |
| <span class="text-gray-600">0/1</span> |
| </div> |
| <span class="text-gray-700">Increase speed to 160bpm</span> |
| </div> |
| </div> |
| <button class="mt-4 w-full bg-pink-500 text-white py-2 rounded-lg hover:bg-pink-600 transition"> |
| <i class="fas fa-bullseye mr-2"></i> Set New Goal |
| </button> |
| </div> |
| </div> |
| </div> |
| </main> |
| </div> |
|
|
| <script> |
| |
| document.addEventListener('DOMContentLoaded', function() { |
| const fretboard = document.querySelector('.fretboard'); |
| const strings = [1, 2, 3, 4, 5, 6]; |
| const frets = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 12]; |
| |
| |
| fretboard.addEventListener('click', function(e) { |
| if (e.target === fretboard) { |
| const rect = fretboard.getBoundingClientRect(); |
| const x = e.clientX - rect.left; |
| const y = e.clientY - rect.top; |
| |
| |
| const stringHeight = rect.height / 6; |
| const stringPos = Math.floor(y / stringHeight); |
| const fretWidth = rect.width / 12; |
| const fretPos = Math.floor(x / fretWidth); |
| |
| |
| const noteDot = document.createElement('div'); |
| noteDot.className = 'note-dot bg-blue-500'; |
| noteDot.style.top = `${(stringPos * stringHeight) + (stringHeight/2)}px`; |
| noteDot.style.left = `${(fretPos * fretWidth) + (fretWidth/2)}px`; |
| noteDot.setAttribute('data-string', stringPos + 1); |
| noteDot.setAttribute('data-fret', fretPos); |
| |
| fretboard.querySelector('.relative').appendChild(noteDot); |
| |
| |
| noteDot.classList.add('vibrating'); |
| setTimeout(() => { |
| noteDot.classList.remove('vibrating'); |
| }, 300); |
| } |
| }); |
| |
| |
| const metronomeBtn = document.querySelector('.bg-red-500'); |
| const metronomeHand = document.querySelector('.metronome-hand'); |
| let isMetronomeRunning = false; |
| let metronomeInterval; |
| |
| metronomeBtn.addEventListener('click', function() { |
| if (isMetronomeRunning) { |
| clearInterval(metronomeInterval); |
| metronomeBtn.innerHTML = '<i class="fas fa-play mr-2"></i> Start Metronome'; |
| metronomeBtn.classList.remove('bg-red-600'); |
| metronomeBtn.classList.add('bg-red-500'); |
| } else { |
| const bpm = 120; |
| const interval = 60000 / bpm; |
| |
| metronomeInterval = setInterval(() => { |
| metronomeHand.style.transform = 'rotate(30deg)'; |
| setTimeout(() => { |
| metronomeHand.style.transform = 'rotate(-30deg)'; |
| }, 50); |
| }, interval); |
| |
| metronomeBtn.innerHTML = '<i class="fas fa-stop mr-2"></i> Stop Metronome'; |
| metronomeBtn.classList.remove('bg-red-500'); |
| metronomeBtn.classList.add('bg-red-600'); |
| } |
| |
| isMetronomeRunning = !isMetronomeRunning; |
| }); |
| |
| |
| const bpmDisplay = document.querySelector('.text-4xl'); |
| const minusBtn = document.querySelector('.fa-minus').parentElement; |
| const plusBtn = document.querySelector('.fa-plus').parentElement; |
| |
| minusBtn.addEventListener('click', function() { |
| let currentBpm = parseInt(bpmDisplay.textContent); |
| if (currentBpm > 40) { |
| bpmDisplay.textContent = currentBpm - 5; |
| } |
| }); |
| |
| plusBtn.addEventListener('click', function() { |
| let currentBpm = parseInt(bpmDisplay.textContent); |
| if (currentBpm < 300) { |
| bpmDisplay.textContent = currentBpm + 5; |
| } |
| }); |
| }); |
| </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=jackboy70/guitar" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
