Create me a TikTok and youtiube transcript creator software so I can be able to copy and paste any TikTok link and youri
c0b52b1
verified
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>VidScript Wizard | Transcript Creator</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| </head> | |
| <body class="bg-gray-900 text-gray-100 min-h-screen"> | |
| <div class="container mx-auto px-4 py-12"> | |
| <!-- Header --> | |
| <header class="mb-12 text-center"> | |
| <div class="flex justify-center items-center mb-4"> | |
| <i data-feather="type" class="text-purple-500 w-10 h-10 mr-3"></i> | |
| <h1 class="text-4xl font-bold bg-gradient-to-r from-purple-500 to-pink-500 bg-clip-text text-transparent"> | |
| VidScript Wizard | |
| </h1> | |
| </div> | |
| <p class="text-xl text-gray-400 max-w-2xl mx-auto"> | |
| Generate perfect transcripts from TikTok & YouTube videos instantly | |
| </p> | |
| </header> | |
| <!-- Main Content --> | |
| <main> | |
| <div class="glass-card bg-gray-800/50 backdrop-blur-lg rounded-xl p-8 mb-12 max-w-3xl mx-auto"> | |
| <form id="transcriptForm" class="space-y-6"> | |
| <div> | |
| <label for="videoUrl" class="block text-lg font-medium mb-2">Video URL</label> | |
| <div class="flex"> | |
| <input | |
| type="url" | |
| id="videoUrl" | |
| placeholder="Paste TikTok or YouTube link here..." | |
| class="flex-grow px-4 py-3 rounded-l-lg bg-gray-700 border border-gray-600 focus:border-purple-500 focus:ring-1 focus:ring-purple-500 outline-none" | |
| required | |
| > | |
| <button | |
| type="submit" | |
| class="bg-gradient-to-r from-purple-500 to-pink-500 px-6 py-3 rounded-r-lg font-medium hover:opacity-90 transition" | |
| > | |
| Generate | |
| </button> | |
| </div> | |
| </div> | |
| <div class="flex items-center justify-center space-x-4"> | |
| <div class="flex items-center"> | |
| <input type="radio" id="tiktok" name="platform" value="tiktok" class="mr-2" checked> | |
| <label for="tiktok" class="flex items-center"> | |
| <i data-feather="smartphone" class="w-4 h-4 mr-1"></i> | |
| TikTok | |
| </label> | |
| </div> | |
| <div class="flex items-center"> | |
| <input type="radio" id="youtube" name="platform" value="youtube" class="mr-2"> | |
| <label for="youtube" class="flex items-center"> | |
| <i data-feather="youtube" class="w-4 h-4 mr-1"></i> | |
| YouTube | |
| </label> | |
| </div> | |
| </div> | |
| </form> | |
| </div> | |
| <!-- Result Section --> | |
| <div id="resultSection" class="hidden glass-card bg-gray-800/50 backdrop-blur-lg rounded-xl p-8 mb-12 max-w-3xl mx-auto"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-2xl font-semibold">Transcript</h2> | |
| <button id="copyBtn" class="flex items-center text-sm bg-gray-700 hover:bg-gray-600 px-3 py-1.5 rounded-lg transition"> | |
| <i data-feather="copy" class="w-4 h-4 mr-1"></i> | |
| Copy | |
| </button> | |
| </div> | |
| <div id="videoInfo" class="flex items-start mb-6"> | |
| <div id="thumbnail" class="w-24 h-24 bg-gray-700 rounded-lg mr-4 overflow-hidden"> | |
| <img src="" alt="Video thumbnail" class="w-full h-full object-cover"> | |
| </div> | |
| <div> | |
| <h3 id="videoTitle" class="text-xl font-medium mb-1">Video Title</h3> | |
| <p id="videoAuthor" class="text-sm text-gray-400">@username</p> | |
| </div> | |
| </div> | |
| <div id="transcriptContent" class="bg-gray-700 p-4 rounded-lg whitespace-pre-line"> | |
| Transcript will appear here... | |
| </div> | |
| </div> | |
| <!-- Features --> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-12"> | |
| <div class="bg-gray-800/50 p-6 rounded-lg"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-purple-500/20 p-3 rounded-full mr-4"> | |
| <i data-feather="link" class="text-purple-500 w-6 h-6"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold">Easy Paste</h3> | |
| </div> | |
| <p class="text-gray-400"> | |
| Just paste any TikTok or YouTube link and get instant transcript. | |
| </p> | |
| </div> | |
| <div class="bg-gray-800/50 p-6 rounded-lg"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-pink-500/20 p-3 rounded-full mr-4"> | |
| <i data-feather="edit" class="text-pink-500 w-6 h-6"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold">Editable Format</h3> | |
| </div> | |
| <p class="text-gray-400"> | |
| Clean, readable format that's easy to edit and use in your projects. | |
| </p> | |
| </div> | |
| <div class="bg-gray-800/50 p-6 rounded-lg"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-blue-500/20 p-3 rounded-full mr-4"> | |
| <i data-feather="clipboard" class="text-blue-500 w-6 h-6"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold">One-Click Copy</h3> | |
| </div> | |
| <p class="text-gray-400"> | |
| Copy the entire transcript with a single click for your convenience. | |
| </p> | |
| </div> | |
| </div> | |
| </main> | |
| <footer class="text-center text-gray-500 text-sm mt-16"> | |
| <p>© 2023 VidScript Wizard | The ultimate video transcript generator</p> | |
| </footer> | |
| </div> | |
| <script> | |
| feather.replace(); | |
| document.getElementById('transcriptForm').addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| // Show loading state | |
| const submitBtn = this.querySelector('button[type="submit"]'); | |
| submitBtn.disabled = true; | |
| submitBtn.innerHTML = '<i data-feather="loader" class="w-5 h-5 mr-1 animate-spin"></i> Processing...'; | |
| feather.replace(); | |
| const url = document.getElementById('videoUrl').value; | |
| const platform = document.querySelector('input[name="platform"]:checked').value; | |
| // Simulate API call (in a real app, you would call your backend API here) | |
| setTimeout(() => { | |
| // Sample response - in real app this would come from your API | |
| const sampleResponse = { | |
| title: "How to Make Perfect Pancakes", | |
| author: "@CookingMaster", | |
| thumbnail: "http://static.photos/food/320x240/123", | |
| transcript: "Hey everyone! Today I'm going to show you how to make the most perfect pancakes you've ever tasted.\n\nFirst, we'll need:\n- 1 cup all-purpose flour\n- 2 tablespoons sugar\n- 1 tablespoon baking powder\n- 1/2 teaspoon salt\n- 1 cup milk\n- 1 egg\n- 2 tablespoons melted butter\n\nMix all the dry ingredients together first, then add the wet ingredients. Don't overmix - lumps are okay!\n\nHeat your pan to medium heat and pour about 1/4 cup batter for each pancake. Flip when you see bubbles forming on top.\n\nAnd that's it! Perfect fluffy pancakes every time. Don't forget to like and follow for more recipes!" | |
| }; | |
| // Display results | |
| document.getElementById('videoTitle').textContent = sampleResponse.title; | |
| document.getElementById('videoAuthor').textContent = sampleResponse.author; | |
| document.getElementById('thumbnail').querySelector('img').src = sampleResponse.thumbnail; | |
| document.getElementById('transcriptContent').textContent = sampleResponse.transcript; | |
| document.getElementById('resultSection').classList.remove('hidden'); | |
| // Reset button | |
| submitBtn.disabled = false; | |
| submitBtn.innerHTML = 'Generate'; | |
| }, 2000); | |
| }); | |
| document.getElementById('copyBtn').addEventListener('click', function() { | |
| const transcript = document.getElementById('transcriptContent').textContent; | |
| navigator.clipboard.writeText(transcript).then(() => { | |
| const originalText = this.innerHTML; | |
| this.innerHTML = '<i data-feather="check" class="w-4 h-4 mr-1"></i> Copied!'; | |
| feather.replace(); | |
| setTimeout(() => { | |
| this.innerHTML = originalText; | |
| feather.replace(); | |
| }, 2000); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |