Update templates/index.html

templates/index.html

@@ -110,39 +110,62 @@
 		</header>
 		<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
 			<div class="glass-morphism col-span-1 md:col-span-1 rounded-xl shadow-xl p-8 mb-8 h-fit">
-				<div class="dropzone p-8 mb-6 flex flex-col items-center justify-center" id="dropzone">
-					<i data-feather="music" class="text-blue-500 mb-4" style="width: 48px; height: 48px;"></i>
-					<label class="block text-gray-700 font-medium mb-2">Upload Audio File</label>
-					<p class="text-sm text-gray-500 mb-4">Drag & drop your file here or click to browse</p>
-					<input type="file" id="audioFile" accept="audio/*" class="hidden">
-					<button id="browseBtn"
-						class="bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-6 rounded-full transition duration-300 flex items-center">
-						<i data-feather="upload-cloud" class="mr-2"></i>
-						Browse Files
-					</button>
-				</div>
-
-				<div class="mb-6">
-					<div class="bg-gray-50 rounded-lg p-4 flex items-center" id="fileInfoContainer"
-						style="display: none;">
-						<div
-							class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mr-3 flex-shrink-0">
-							<i data-feather="file" class="text-blue-600"></i>
-						</div>
-						<div class="flex-grow">
-							<p class="font-medium text-gray-800" id="fileName">No file selected</p>
-							<p class="text-sm text-gray-500" id="fileSize"></p>
-						</div>
-						<button id="removeFileBtn"
-							class="text-gray-400 hover:text-red-500 transition-colors duration-300">
-							<i data-feather="x-circle"></i>
+				<!-- Add tab buttons -->
+                <div class="flex mb-6 bg-gray-100 rounded-lg p-1">
+                    <button id="fileTabBtn" class="flex-1 py-2 px-4 rounded-md bg-white shadow-sm text-blue-600 font-medium">
+                        <i data-feather="file" class="inline mr-2"></i>File
+                    </button>
+                    <button id="youtubeTabBtn" class="flex-1 py-2 px-4 rounded-md text-gray-600 font-medium">
+                        <i data-feather="youtube" class="inline mr-2"></i>YouTube
+                    </button>
+                </div>
+
+                <!-- File upload section -->
+                <div id="fileUploadSection">
+                    <div class="dropzone p-8 mb-6 flex flex-col items-center justify-center" id="dropzone">
+                        <i data-feather="music" class="text-blue-500 mb-4" style="width: 48px; height: 48px;"></i>
+						<label class="block text-gray-700 font-medium mb-2">Upload Audio File</label>
+						<p class="text-sm text-gray-500 mb-4">Drag & drop your file here or click to browse</p>
+						<input type="file" id="audioFile" accept="audio/*" class="hidden">
+						<button id="browseBtn"
+							class="bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-6 rounded-full transition duration-300 flex items-center">
+							<i data-feather="upload-cloud" class="mr-2"></i>
+							Browse Files
 						</button>
-					</div>
+                    </div>
+                    <div class="mb-6">
+						<div class="bg-gray-50 rounded-lg p-4 flex items-center" id="fileInfoContainer"
+							style="display: none;">
+							<div
+								class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mr-3 flex-shrink-0">
+								<i data-feather="file" class="text-blue-600"></i>
+							</div>
+							<div class="flex-grow">
+								<p class="font-medium text-gray-800" id="fileName">No file selected</p>
+								<p class="text-sm text-gray-500" id="fileSize"></p>
+							</div>
+							<button id="removeFileBtn"
+								class="text-gray-400 hover:text-red-500 transition-colors duration-300">
+								<i data-feather="x-circle"></i>
+							</button>
+						</div>
 
-					<audio id="audioPlayer" controls class="w-full mt-4 rounded-lg" hidden>
-						Your browser does not support the audio element.
-					</audio>
-				</div>
+						<audio id="audioPlayer" controls class="w-full mt-4 rounded-lg" hidden>
+							Your browser does not support the audio element.
+						</audio>
+					</div>
+                </div>
+
+                <!-- YouTube link section -->
+                <div id="youtubeLinkSection" class="hidden">
+                    <div class="mb-6">
+                        <label class="block text-gray-700 font-medium mb-2">YouTube URL</label>
+                        <input type="text" id="youtubeUrl" 
+                            class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                            placeholder="https://www.youtube.com/watch?v=...">
+                        <p id="youtubeError" class="text-red-500 text-sm mt-1 hidden">Please enter a valid YouTube URL</p>
+                    </div>
+                </div>
 
 				<button id="convertBtn"
 					class="w-full bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 text-white font-semibold py-3 px-4 rounded-lg disabled:opacity-50 disabled:cursor-not-allowed transition duration-300 flex items-center justify-center pulse"
@@ -284,30 +307,50 @@
 
 		// Handle convert button click
 		convertBtn.addEventListener('click', async () => {
-			const file = audioFile.files[0];
-			if (!file) {
-				alert('Please select an audio file first');
-				return;
+			const isYoutubeMode = !youtubeLinkSection.classList.contains('hidden');
+			
+			if (isYoutubeMode) {
+				const youtubeLink = youtubeUrl.value;
+				if (!isValidYouTubeUrl(youtubeLink)) {
+					alert('Please enter a valid YouTube URL');
+					return;
+				}
+			} else {
+				const file = audioFile.files[0];
+				if (!file) {
+					alert('Please select an audio file first');
+					return;
+				}
 			}
-
+	
 			// Show loading indicator
 			loadingIndicator.classList.remove('hidden');
 			convertBtn.disabled = true;
 			convertBtn.classList.remove('pulse');
-
-			const formData = new FormData();
-			formData.append('file', file);
-
+	
 			try {
-				const response = await fetch('/convert', {
-					method: 'POST',
-					body: formData
-				});
-
+				let response;
+				if (isYoutubeMode) {
+					response = await fetch('/convert-youtube', {
+						method: 'POST',
+						headers: {
+							'Content-Type': 'application/json',
+						},
+						body: JSON.stringify({ url: youtubeUrl.value })
+					});
+				} else {
+					const formData = new FormData();
+					formData.append('file', audioFile.files[0]);
+					response = await fetch('/convert', {
+						method: 'POST',
+						body: formData
+					});
+				}
+	
 				const result = await response.json();
-
+	
 				if (response.ok) {
-					lyricsOutput.srcdoc = result.lyrics; // Render in iframe
+					lyricsOutput.srcdoc = result.lyrics;
 					downloadBtn.classList.remove('hidden');
 				} else {
 					lyricsOutput.srcdoc = `Error: ${result.error}`;
@@ -315,7 +358,6 @@
 			} catch (error) {
 				lyricsOutput.srcdoc = `Error: ${error.message}`;
 			} finally {
-				// Hide loading indicator
 				loadingIndicator.classList.add('hidden');
 				convertBtn.disabled = false;
 			}
@@ -335,6 +377,43 @@
 			document.body.removeChild(a);
 			URL.revokeObjectURL(url);
 		});
+
+		// Add new JavaScript for YouTube functionality
+		const fileTabBtn = document.getElementById('fileTabBtn');
+		const youtubeTabBtn = document.getElementById('youtubeTabBtn');
+		const fileUploadSection = document.getElementById('fileUploadSection');
+		const youtubeLinkSection = document.getElementById('youtubeLinkSection');
+		const youtubeUrl = document.getElementById('youtubeUrl');
+		const youtubeError = document.getElementById('youtubeError');
+
+		fileTabBtn.addEventListener('click', () => {
+			fileTabBtn.classList.add('bg-white', 'shadow-sm', 'text-blue-600');
+			youtubeTabBtn.classList.remove('bg-white', 'shadow-sm', 'text-blue-600');
+			fileUploadSection.classList.remove('hidden');
+			youtubeLinkSection.classList.add('hidden');
+			convertBtn.disabled = !audioFile.files.length;
+		});
+
+		youtubeTabBtn.addEventListener('click', () => {
+			youtubeTabBtn.classList.add('bg-white', 'shadow-sm', 'text-blue-600');
+			fileTabBtn.classList.remove('bg-white', 'shadow-sm', 'text-blue-600');
+			youtubeLinkSection.classList.remove('hidden');
+			fileUploadSection.classList.add('hidden');
+			convertBtn.disabled = !isValidYouTubeUrl(youtubeUrl.value);
+		});
+
+		function isValidYouTubeUrl(url) {
+			const youtubeRegex = /^(https?:\/\/)?(www\.)?(youtube\.com|youtu\.be)\/.+/;
+			return youtubeRegex.test(url);
+		}
+
+		youtubeUrl.addEventListener('input', () => {
+			const isValid = isValidYouTubeUrl(youtubeUrl.value);
+			youtubeError.classList.toggle('hidden', isValid);
+			convertBtn.disabled = !isValid;
+			if (isValid) convertBtn.classList.add('pulse');
+			else convertBtn.classList.remove('pulse');
+		});
 	</script>
 </body>