You Tube Subtitle Downloader - Copy this React, Tailwind Component to your project
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>YouTube Subtitle Downloader</title> <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet"> <style> body { font-family: 'Roboto', sans-serif; display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0; background: linear-gradient(135deg, #00c6ff, #0072ff); background-attachment: fixed; animation: backgroundAnimation 10s infinite alternate; } @keyframes backgroundAnimation { 0% { background: linear-gradient(135deg, #00c6ff, #0072ff); } 50% { background: linear-gradient(135deg, #fbc2eb, #a6c1ee); } 100% { background: linear-gradient(135deg, #ff9a9e, #fad0c4); } } .container { text-align: center; background-color: #ffffff; padding: 30px 20px; border-radius: 15px; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2); max-width: 400px; width: 100%; transition: transform 0.3s, box-shadow 0.3s; } .container:hover { transform: translateY(-5px); box-shadow: 0 10px 35px rgba(0, 0, 0, 0.25); } h1 { font-size: 2em; margin-bottom: 15px; color: #0072ff; } form { margin-top: 20px; } label { text-align: left; display: block; font-weight: 500; margin-bottom: 5px; } input[type="url"] { width: 100%; padding: 12px 15px; margin: 10px 0; border: 2px solid #0072ff; border-radius: 10px; font-size: 1em; outline: none; transition: border-color 0.3s, box-shadow 0.3s; } input[type="url"]:focus { border-color: #004dff; box-shadow: 0 0 10px rgba(0, 114, 255, 0.5); } input[type="url"]::placeholder { color: #777; font-size: 0.9em; } button { width: 100%; padding: 12px 15px; background-color: #0072ff; color: #ffffff; border: none; border-radius: 10px; font-size: 1em; font-weight: 600; cursor: pointer; transition: background-color 0.3s, transform 0.2s; } button:hover { background-color: #004dff; } button:active { transform: scale(0.97); } .loading { display: none; margin-top: 15px; font-size: 1em; color: #0072ff; text-align: center; } .spinner { border: 4px solid #e0f7fa; border-top: 4px solid #0072ff; border-radius: 50%; width: 32px; height: 32px; margin: 0 auto; animation: spin 1s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Indian Flag in the top-right corner */ .flag-container { position: absolute; top: 20px; right: 20px; } .flag-container img { width: 50px; /* You can adjust the size */ height: auto; } </style> </head> <body> <!-- Indian Flag --> <div class="flag-container"> <img src="https://upload.wikimedia.org/wikipedia/commons/4/41/Flag_of_India.svg" alt="Indian Flag"> </div> <div class="container"> <h1>YouTube Subtitle Downloader</h1> <form action="{{ url_for('get_subtitles') }}" method="post" id="subtitleForm"> <label for="videoUrl">Enter YouTube Video URL:</label> <input type="url" id="videoUrl" name="videoUrl" placeholder="e.g., https://www.youtube.com/watch?v=example" required> <button type="submit" id="submitBtn">Search</button> </form> <div class="loading" id="loadingMessage"> <div class="spinner"></div> <p>Loading subtitles, please wait...</p> </div> </div> <script> document.getElementById('subtitleForm').addEventListener('submit', function() { document.getElementById('loadingMessage').style.display = 'block'; document.getElementById('submitBtn').disabled = true; }); </script> </body> </html>
