File size: 9,847 Bytes
c0b52b1 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 |
<!DOCTYPE html>
<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> |