Hugging Face's logo

Spaces:
fhkffuy
/
undefined
Running

App Files Community
undefined / index.html
fhkffuy's picture
fhkffuy
create a website that turns youtube videos into youtube shorts, intagram and tit tok reals
ee75025 verified
Raw History Blame Contribute Delete
24.9 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>VidReel Wizard - Transform Videos for Short Platforms</title>
<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/feather-icons"></script>
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.waves.min.js"></script>
<style>
.platform-card {
transition: all 0.3s ease;
}
.platform-card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
.glow-on-hover:hover {
filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.6));
}
#video-input {
height: 300px;
}
.preview-box {
aspect-ratio: 9/16;
max-height: 500px;
}
</style>
</head>
<body class="bg-gray-50">
<div id="vanta-background" class="fixed inset-0 -z-10"></div>
<header class="pt-12 pb-6 px-4 sm:px-6 lg:px-8 text-center">
<h1 class="text-4xl md:text-6xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-purple-600 mb-4">
VidReel Wizard
</h1>
<p class="text-xl md:text-2xl text-gray-700 font-medium max-w-3xl mx-auto">
Transform your YouTube videos into perfect Shorts, Reels & TikToks
</p>
</header>
<main class="container mx-auto px-4 py-8">
<section class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center mb-16">
<div class="bg-white rounded-xl shadow-xl p-6">
<h2 class="text-2xl font-semibold text-gray-800 mb-4">Your Video</h2>
<div id="video-input" class="w-full bg-gray-100 rounded-lg flex items-center justify-center border-2 border-dashed border-gray-300">
<div class="text-center p-6">
<i data-feather="upload" class="w-16 h-16 mx-auto text-gray-400 mb-4"></i>
<p class="text-gray-500 mb-4">Drag & drop your YouTube video URL or file</p>
<input type="file" id="file-upload" class="hidden" accept="video/*">
<label for="file-upload" class="px-6 py-2 bg-blue-600 text-white rounded-full cursor-pointer hover:bg-blue-700 transition">
Select Video
</label>
<div class="mt-4 relative">
<input type="text" id="youtube-url" placeholder="Or paste YouTube URL here"
class="w-full px-4 py-2 border border-gray-300 rounded-full focus:outline-none focus:ring-2 focus:ring-blue-500">
</div>
</div>
</div>
<div class="mt-4 flex justify-center">
<button id="analyze-btn" class="px-8 py-3 bg-gradient-to-r from-blue-600 to-purple-600 text-white font-bold rounded-full hover:shadow-lg transition-all transform hover:scale-105">
Analyze Video
</button>
</div>
</div>
<div class="bg-white rounded-xl shadow-xl p-6">
<h2 class="text-2xl font-semibold text-gray-800 mb-4">Transformation Options</h2>
<div class="space-y-4">
<div>
<h3 class="font-medium text-gray-800 mb-2">Select Platform</h3>
<div class="grid grid-cols-3 gap-2">
<button class="platform-btn px-3 py-2 bg-blue-100 text-blue-800 rounded-lg font-medium" data-platform="shorts">
YouTube Shorts
</button>
<button class="platform-btn px-3 py-2 bg-pink-100 text-pink-800 rounded-lg font-medium" data-platform="reels">
Instagram Reels
</button>
<button class="platform-btn px-3 py-2 bg-black text-white rounded-lg font-medium" data-platform="tiktok">
TikTok
</button>
</div>
</div>
<div>
<h3 class="font-medium text-gray-800 mb-2">Crop Options</h3>
<div class="grid grid-cols-2 md:grid-cols-4 gap-2">
<button class="crop-option px-3 py-2 bg-gray-100 text-gray-800 rounded-lg" data-crop="9:16">
9:16 Vertical
</button>
<button class="crop-option px-3 py-2 bg-gray-100 text-gray-800 rounded-lg" data-crop="1:1">
1:1 Square
</button>
<button class="crop-option px-3 py-2 bg-gray-100 text-gray-800 rounded-lg" data-crop="16:9">
16:9 Widescreen
</button>
<button class="crop-option px-3 py-2 bg-gray-100 text-gray-800 rounded-lg" data-crop="custom">
Custom
</button>
</div>
</div>
<div>
<h3 class="font-medium text-gray-800 mb-2">Enhancements</h3>
<div class="space-y-2">
<label class="flex items-center space-x-3">
<input type="checkbox" class="form-checkbox h-5 w-5 text-blue-600 rounded" id="auto-captions">
<span class="text-gray-700">Auto-generate captions</span>
</label>
<label class="flex items-center space-x-3">
<input type="checkbox" class="form-checkbox h-5 w-5 text-blue-600 rounded" id="auto-trim">
<span class="text-gray-700">Auto-trim to 60 seconds</span>
</label>
<label class="flex items-center space-x-3">
<input type="checkbox" class="form-checkbox h-5 w-5 text-blue-600 rounded" id="add-music">
<span class="text-gray-700">Add trending music</span>
</label>
</div>
</div>
</div>
</div>
</section>
<section id="preview-section" class="hidden">
<h2 class="text-3xl font-bold text-center text-gray-800 mb-8">Preview & Download</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="bg-white rounded-xl shadow-lg p-4">
<h3 class="text-xl font-semibold text-gray-800 mb-4 text-center">YouTube Shorts</h3>
<div class="preview-box bg-gray-100 rounded-lg overflow-hidden flex items-center justify-center">
<video id="shorts-preview" controls class="w-full h-full object-cover hidden"></video>
<div id="shorts-placeholder" class="text-center p-6">
<i data-feather="youtube" class="w-12 h-12 mx-auto text-red-500 mb-4"></i>
<p class="text-gray-500">Shorts preview will appear here</p>
</div>
</div>
<button class="w-full mt-4 px-4 py-2 bg-red-600 text-white rounded-lg font-medium hover:bg-red-700 transition" id="download-shorts">
Download Short
</button>
</div>
<div class="bg-white rounded-xl shadow-lg p-4">
<h3 class="text-xl font-semibold text-gray-800 mb-4 text-center">Instagram Reels</h3>
<div class="preview-box bg-gray-100 rounded-lg overflow-hidden flex items-center justify-center">
<video id="reels-preview" controls class="w-full h-full object-cover hidden"></video>
<div id="reels-placeholder" class="text-center p-6">
<i data-feather="instagram" class="w-12 h-12 mx-auto text-pink-500 mb-4"></i>
<p class="text-gray-500">Reels preview will appear here</p>
</div>
</div>
<button class="w-full mt-4 px-4 py-2 bg-gradient-to-r from-purple-600 to-pink-600 text-white rounded-lg font-medium hover:opacity-90 transition" id="download-reels">
Download Reel
</button>
</div>
<div class="bg-white rounded-xl shadow-lg p-4">
<h3 class="text-xl font-semibold text-gray-800 mb-4 text-center">TikTok</h3>
<div class="preview-box bg-gray-100 rounded-lg overflow-hidden flex items-center justify-center">
<video id="tiktok-preview" controls class="w-full h-full object-cover hidden"></video>
<div id="tiktok-placeholder" class="text-center p-6">
<i data-feather="music" class="w-12 h-12 mx-auto text-black mb-4"></i>
<p class="text-gray-500">TikTok preview will appear here</p>
</div>
</div>
<button class="w-full mt-4 px-4 py-2 bg-black text-white rounded-lg font-medium hover:bg-gray-800 transition" id="download-tiktok">
Download TikTok
</button>
</div>
</div>
</section>
<section class="mt-16 bg-white rounded-xl shadow-lg p-8">
<h2 class="text-3xl font-bold text-center text-gray-800 mb-6">How It Works</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="text-center p-4">
<div class="w-20 h-20 mx-auto bg-blue-100 rounded-full flex items-center justify-center mb-4 glow-on-hover">
<i data-feather="upload" class="w-10 h-10 text-blue-600"></i>
</div>
<h3 class="text-xl font-semibold text-gray-800 mb-2">1. Upload Your Video</h3>
<p class="text-gray-600">Add your YouTube URL or upload a video file directly</p>
</div>
<div class="text-center p-4">
<div class="w-20 h-20 mx-auto bg-purple-100 rounded-full flex items-center justify-center mb-4 glow-on-hover">
<i data-feather="sliders" class="w-10 h-10 text-purple-600"></i>
</div>
<h3 class="text-xl font-semibold text-gray-800 mb-2">2. Customize Format</h3>
<p class="text-gray-600">Select platform and adjust cropping, captions, and music</p>
</div>
<div class="text-center p-4">
<div class="w-20 h-20 mx-auto bg-pink-100 rounded-full flex items-center justify-center mb-4 glow-on-hover">
<i data-feather="download" class="w-10 h-10 text-pink-600"></i>
</div>
<h3 class="text-xl font-semibold text-gray-800 mb-2">3. Download & Share</h3>
<p class="text-gray-600">Get platform-optimized videos ready for posting</p>
</div>
</div>
</section>
<section class="mt-16">
<h2 class="text-3xl font-bold text-center text-gray-800 mb-8">Platform Specifications</h2>
<div class="overflow-x-auto">
<table class="min-w-full bg-white rounded-lg overflow-hidden">
<thead class="bg-gray-100">
<tr>
<th class="py-3 px-4 text-left font-semibold text-gray-700">Platform</th>
<th class="py-3 px-4 text-left font-semibold text-gray-700">Optimal Ratio</th>
<th class="py-3 px-4 text-left font-semibold text-gray-700">Max Length</th>
<th class="py-3 px-4 text-left font-semibold text-gray-700">Recommended</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-200">
<tr>
<td class="py-3 px-4 text-gray-700">YouTube Shorts</td>
<td class="py-3 px-4 text-gray-600">9:16</td>
<td class="py-3 px-4 text-gray-600">60 seconds</td>
<td class="py-3 px-4 text-gray-600">First 15 seconds hook</td>
</tr>
<tr>
<td class="py-3 px-4 text-gray-700">Instagram Reels</td>
<td class="py-3 px-4 text-gray-600">9:16 or 1:1</td>
<td class="py-3 px-4 text-gray-600">90 seconds</td>
<td class="py-3 px-4 text-gray-600">Trending audio</td>
</tr>
<tr>
<td class="py-3 px-4 text-gray-700">TikTok</td>
<td class="py-3 px-4 text-gray-600">9:16</td>
<td class="py-3 px-4 text-gray-600">3 minutes</td>
<td class="py-3 px-4 text-gray-600">Captions & effects</td>
</tr>
</tbody>
</table>
</div>
</section>
</main>
<footer class="bg-black bg-opacity-80 text-white py-12 mt-16">
<div class="container mx-auto px-4">
<div class="flex flex-col md:flex-row justify-between items-center">
<div class="mb-6 md:mb-0">
<h2 class="text-2xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-purple-400">VidReel Wizard</h2>
<p class="text-gray-400 mt-2">Your video transformation specialist</p>
</div>
<div class="flex space-x-4">
<a href="#" class="text-gray-400 hover:text-white transition">
<i data-feather="twitter"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white transition">
<i data-feather="instagram"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white transition">
<i data-feather="youtube"></i>
</a>
</div>
</div>
<div class="border-t border-gray-800 mt-8 pt-8 flex flex-col md:flex-row justify-between items-center">
<p class="text-gray-500 text-sm">© 2023 VidReel Wizard. All rights reserved.</p>
<div class="flex space-x-6 mt-4 md:mt-0">
<a href="#" class="text-gray-400 hover:text-white text-sm transition">Privacy Policy</a>
<a href="#" class="text-gray-400 hover:text-white text-sm transition">Terms of Service</a>
<a href="#" class="text-gray-400 hover:text-white text-sm transition">Contact Us</a>
</div>
</div>
</div>
</footer>
<script>
// Initialize Vanta.js background
VANTA.WAVES({
el: "#vanta-background",
mouseControls: true,
touchControls: true,
gyroControls: false,
minHeight: 200.00,
minWidth: 200.00,
scale: 1.00,
scaleMobile: 1.00,
color: 0x0066ff,
shininess: 35.00,
waveHeight: 15.00,
waveSpeed: 0.80,
zoom: 0.85
});
// Initialize Feather Icons
feather.replace();
document.addEventListener('DOMContentLoaded', function() {
// File upload handling
const fileUpload = document.getElementById('file-upload');
const videoInput = document.getElementById('video-input');
const youtubeUrl = document.getElementById('youtube-url');
const analyzeBtn = document.getElementById('analyze-btn');
const previewSection = document.getElementById('preview-section');
let currentVideoFile = null;
let currentPlatform = 'shorts';
let currentCrop = '9:16';
// Handle file selection
fileUpload.addEventListener('change', function(e) {
if (e.target.files.length) {
currentVideoFile = e.target.files[0];
youtubeUrl.value = '';
updateVideoPreview();
}
});
// Handle YouTube URL input
youtubeUrl.addEventListener('input', function() {
if (youtubeUrl.value) {
currentVideoFile = null;
fileUpload.value = '';
}
});
// Handle drag and drop
videoInput.addEventListener('dragover', function(e) {
e.preventDefault();
videoInput.classList.add('border-blue-500', 'bg-blue-50');
});
videoInput.addEventListener('dragleave', function() {
videoInput.classList.remove('border-blue-500', 'bg-blue-50');
});
videoInput.addEventListener('drop', function(e) {
e.preventDefault();
videoInput.classList.remove('border-blue-500', 'bg-blue-50');
if (e.dataTransfer.files.length && e.dataTransfer.files[0].type.includes('video')) {
currentVideoFile = e.dataTransfer.files[0];
youtubeUrl.value = '';
fileUpload.files = e.dataTransfer.files;
updateVideoPreview();
}
});
// Platform selection
document.querySelectorAll('.platform-btn').forEach(btn => {
btn.addEventListener('click', function() {
document.querySelectorAll('.platform-btn').forEach(b => {
b.classList.remove('ring-2', 'ring-offset-2', 'ring-blue-500');
});
this.classList.add('ring-2', 'ring-offset-2', 'ring-blue-500');
currentPlatform = this.dataset.platform;
});
});
// Crop selection
document.querySelectorAll('.crop-option').forEach(btn => {
btn.addEventListener('click', function() {
document.querySelectorAll('.crop-option').forEach(b => {
b.classList.remove('ring-2', 'ring-offset-2', 'ring-blue-500');
});
this.classList.add('ring-2', 'ring-offset-2', 'ring-blue-500');
currentCrop = this.dataset.crop;
});
});
// Analyze button
analyzeBtn.addEventListener('click', function() {
if (!currentVideoFile && !youtubeUrl.value) {
alert('Please upload a video or enter a YouTube URL');
return;
}
// Show loading state
this.innerHTML = '<span class="animate-pulse">Processing...</span>';
// Simulate processing delay
setTimeout(() => {
this.innerHTML = 'Analyze Video';
previewSection.classList.remove('hidden');
// Update previews
updatePlatformPreviews();
}, 2000);
});
// Download buttons
document.getElementById('download-shorts').addEventListener('click', function() {
alert('YouTube Short downloaded (simulated)');
});
document.getElementById('download-reels').addEventListener('click', function() {
alert('Instagram Reel downloaded (simulated)');
});
document.getElementById('download-tiktok').addEventListener('click', function() {
alert('TikTok video downloaded (simulated)');
});
// Helper functions
function updateVideoPreview() {
if (currentVideoFile) {
const videoUrl = URL.createObjectURL(currentVideoFile);
videoInput.innerHTML = `
<video src="${videoUrl}" controls class="w-full h-full object-contain"></video>
<div class="absolute bottom-2 left-2 bg-black bg-opacity-50 text-white px-2 py-1 rounded text-sm">
${currentVideoFile.name}
</div>
`;
}
}
function updatePlatformPreviews() {
if (currentVideoFile) {
const videoUrl = URL.createObjectURL(currentVideoFile);
// Update all platform previews
document.getElementById('shorts-preview').src = videoUrl;
document.getElementById('shorts-preview').classList.remove('hidden');
document.getElementById('shorts-placeholder').classList.add('hidden');
document.getElementById('reels-preview').src = videoUrl;
document.getElementById('reels-preview').classList.remove('hidden');
document.getElementById('reels-placeholder').classList.add('hidden');
document.getElementById('tiktok-preview').src = videoUrl;
document.getElementById('tiktok-preview').classList.remove('hidden');
document.getElementById('tiktok-placeholder').classList.add('hidden');
} else if (youtubeUrl.value) {
// For YouTube URLs, we would normally use the YouTube API to get the video
// Here we just show a placeholder with the URL
document.getElementById('shorts-preview').src = '';
document.getElementById('shorts-preview').classList.add('hidden');
document.getElementById('shorts-placeholder').classList.remove('hidden');
document.getElementById('shorts-placeholder').innerHTML = `
<i data-feather="youtube" class="w-12 h-12 mx-auto text-red-500 mb-4"></i>
<p class="text-gray-500">YouTube URL ready for conversion</p>
<p class="text-xs mt-2 text-gray-400">${youtubeUrl.value}</p>
`;
// Same for other platforms
document.getElementById('reels-preview').src = '';
document.getElementById('reels-preview').classList.add('hidden');
document.getElementById('reels-placeholder').classList.remove('hidden');
document.getElementById('reels-placeholder').innerHTML = `
<i data-feather="instagram" class="w-12 h-12 mx-auto text-pink-500 mb-4"></i>
<p class="text-gray-500">YouTube URL ready for conversion</p>
<p class="text-xs mt-2 text-gray-400">${youtubeUrl.value}</p>
`;
document.getElementById('tiktok-preview').src = '';
document.getElementById('tiktok-preview').classList.add('hidden');
document.getElementById('tiktok-placeholder').classList.remove('hidden');
document.getElementById('tiktok-placeholder').innerHTML = `
<i data-feather="music" class="w-12 h-12 mx-auto text-black mb-4"></i>
<p class="text-gray-500">YouTube URL ready for conversion</p>
<p class="text-xs mt-2 text-gray-400">${youtubeUrl.value}</p>
`;
feather.replace();
}
}
// Initialize with default selections
document.querySelector('[data-platform="shorts"]').click();
document.querySelector('[data-crop="9:16"]').click();
});
</script>
</body>
</html>