olyanra csinald az oldalt tudod mint a videokat amit latsz tiktokkon hogy beszel egy hang aki mesel egy tortenetet es kozbe megy a hatterbe a minecraft parkour es csinalj hozza ait is aki kitalalja a torteneteket es utana felmondja oket
a9877da verified | <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>ClipCraft - One-Click Short Video Creator</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.globe.min.js"></script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| } | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| } | |
| .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); | |
| } | |
| .upload-box { | |
| border: 2px dashed #cbd5e0; | |
| transition: all 0.3s ease; | |
| } | |
| .upload-box:hover { | |
| border-color: #667eea; | |
| background-color: rgba(102, 126, 234, 0.05); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <div id="vanta-bg" class="fixed inset-0 -z-10"></div> | |
| <!-- Navigation --> | |
| <nav class="bg-white bg-opacity-90 shadow-sm"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between h-16"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 flex items-center"> | |
| <i data-feather="zap" class="text-purple-600 w-8 h-8"></i> | |
| <span class="ml-2 text-xl font-bold text-gray-900">ClipCraft</span> | |
| </div> | |
| </div> | |
| <div class="hidden md:ml-6 md:flex md:items-center space-x-8"> | |
| <a href="#" class="text-gray-900 hover:text-purple-600 px-3 py-2 text-sm font-medium">Home</a> | |
| <a href="#" class="text-gray-500 hover:text-purple-600 px-3 py-2 text-sm font-medium">Templates</a> | |
| <a href="#" class="text-gray-500 hover:text-purple-600 px-3 py-2 text-sm font-medium">Features</a> | |
| <a href="#" class="text-gray-500 hover:text-purple-600 px-3 py-2 text-sm font-medium">Pricing</a> | |
| </div> | |
| <div class="flex items-center"> | |
| <button class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-md text-sm font-medium transition duration-150 ease-in-out"> | |
| Get Started | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <div class="relative gradient-bg text-white overflow-hidden"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="relative z-10 pb-8 sm:pb-16 md:pb-20 lg:max-w-2xl lg:w-full lg:pb-28 xl:pb-32"> | |
| <main class="mt-10 mx-auto max-w-7xl px-4 sm:mt-12 sm:px-6 md:mt-16 lg:mt-20 lg:px-8 xl:mt-28"> | |
| <div class="sm:text-center lg:text-left"> | |
| <h1 class="text-4xl tracking-tight font-extrabold sm:text-5xl md:text-6xl"> | |
| <span class="block">Create Short Videos</span> | |
| <span class="block text-purple-200">In One Click</span> | |
| </h1> | |
| <p class="mt-3 text-base text-purple-100 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0"> | |
| Automatically convert your videos to perfect YouTube Shorts, TikTok & Instagram Reels with optimized templates. | |
| </p> | |
| <div class="mt-5 sm:mt-8 sm:flex sm:justify-center lg:justify-start"> | |
| <div class="rounded-md shadow"> | |
| <a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-purple-700 bg-white hover:bg-gray-50 md:py-4 md:text-lg md:px-10"> | |
| <i data-feather="upload" class="mr-2"></i> Upload Video | |
| </a> | |
| </div> | |
| <div class="mt-3 sm:mt-0 sm:ml-3"> | |
| <a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-purple-500 bg-opacity-60 hover:bg-opacity-70 md:py-4 md:text-lg md:px-10"> | |
| <i data-feather="play" class="mr-2"></i> See Demo | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12"> | |
| <!-- Upload Section --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden p-6 mb-12"> | |
| <div class="text-center"> | |
| <h2 class="text-3xl font-extrabold text-gray-900 mb-2">Create Your Short Video</h2> | |
| <p class="text-lg text-gray-500 mb-8">Upload your video and let ClipCraft work its magic</p> | |
| <div class="max-w-3xl mx-auto"> | |
| <div class="upload-box rounded-lg p-8 mb-6 cursor-pointer"> | |
| <div class="flex flex-col items-center justify-center"> | |
| <i data-feather="upload-cloud" class="w-16 h-16 text-purple-500 mb-4"></i> | |
| <h3 class="text-lg font-medium text-gray-900">Drag & drop your video</h3> | |
| <p class="mt-1 text-sm text-gray-500">or click to browse files</p> | |
| <p class="mt-2 text-xs text-gray-400">MP4, MOV, or AVI up to 10 minutes</p> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8"> | |
| <div class="platform-card bg-white border border-gray-200 rounded-lg p-4 transition duration-300 ease-in-out"> | |
| <div class="flex items-center mb-3"> | |
| <div class="bg-red-100 p-2 rounded-full"> | |
| <i data-feather="youtube" class="w-5 h-5 text-red-600"></i> | |
| </div> | |
| <h3 class="ml-3 font-medium text-gray-900">YouTube Shorts</h3> | |
| </div> | |
| <p class="text-sm text-gray-500">Vertical 9:16 format with optimized captions</p> | |
| </div> | |
| <div class="platform-card bg-white border border-gray-200 rounded-lg p-4 transition duration-300 ease-in-out"> | |
| <div class="flex items-center mb-3"> | |
| <div class="bg-pink-100 p-2 rounded-full"> | |
| <i data-feather="music" class="w-5 h-5 text-pink-600"></i> | |
| </div> | |
| <h3 class="ml-3 font-medium text-gray-900">TikTok</h3> | |
| </div> | |
| <p class="text-sm text-gray-500">Trending templates with viral effects</p> | |
| </div> | |
| <div class="platform-card bg-white border border-gray-200 rounded-lg p-4 transition duration-300 ease-in-out"> | |
| <div class="flex items-center mb-3"> | |
| <div class="bg-purple-100 p-2 rounded-full"> | |
| <i data-feather="instagram" class="w-5 h-5 text-purple-600"></i> | |
| </div> | |
| <h3 class="ml-3 font-medium text-gray-900">Instagram Reels</h3> | |
| </div> | |
| <p class="text-sm text-gray-500">Engagement-optimized cuts with hashtags</p> | |
| </div> | |
| </div> | |
| <div class="mb-8"> | |
| <h3 class="text-lg font-medium text-gray-900 mb-3">Select Content Style</h3> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-4"> | |
| <div class="border border-gray-200 rounded-lg p-3 cursor-pointer hover:border-purple-300 hover:bg-purple-50 transition"> | |
| <div class="flex items-center"> | |
| <div class="bg-blue-100 p-2 rounded-full mr-2"> | |
| <i data-feather="gamepad" class="w-4 h-4 text-blue-600"></i> | |
| </div> | |
| <span class="text-sm">Minecraft Parkour</span> | |
| </div> | |
| </div> | |
| <div class="border border-gray-200 rounded-lg p-3 cursor-pointer hover:border-purple-300 hover:bg-purple-50 transition"> | |
| <div class="flex items-center"> | |
| <div class="bg-green-100 p-2 rounded-full mr-2"> | |
| <i data-feather="mic" class="w-4 h-4 text-green-600"></i> | |
| </div> | |
| <span class="text-sm">AI Storytelling</span> | |
| </div> | |
| </div> | |
| <div class="border border-gray-200 rounded-lg p-3 cursor-pointer hover:border-purple-300 hover:bg-purple-50 transition"> | |
| <div class="flex items-center"> | |
| <div class="bg-red-100 p-2 rounded-full mr-2"> | |
| <i data-feather="alert-triangle" class="w-4 h-4 text-red-600"></i> | |
| </div> | |
| <span class="text-sm">Horror Stories</span> | |
| </div> | |
| </div> | |
| <div class="border border-gray-200 rounded-lg p-3 cursor-pointer hover:border-purple-300 hover:bg-purple-50 transition"> | |
| <div class="flex items-center"> | |
| <div class="bg-yellow-100 p-2 rounded-full mr-2"> | |
| <i data-feather="smile" class="w-4 h-4 text-yellow-600"></i> | |
| </div> | |
| <span class="text-sm">MrBeast Style</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mb-8 mt-6"> | |
| <h3 class="text-lg font-medium text-gray-900 mb-3">AI Story Settings</h3> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Story Theme</label> | |
| <select class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-purple-500"> | |
| <option>Horror</option> | |
| <option>Adventure</option> | |
| <option>Mystery</option> | |
| <option>Comedy</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Voice Style</label> | |
| <select class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-purple-500"> | |
| <option>Deep Male</option> | |
| <option>Soft Female</option> | |
| <option>Excited Teen</option> | |
| <option>Narrator</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Minecraft Background</label> | |
| <select class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-purple-500"> | |
| <option>Parkour Challenge</option> | |
| <option>Survival Mode</option> | |
| <option>Creative Build</option> | |
| <option>Nether Adventure</option> | |
| </select> | |
| </div> | |
| <div class="flex items-center"> | |
| <input type="checkbox" id="auto-generate" class="h-4 w-4 text-purple-600 focus:ring-purple-500 border-gray-300 rounded"> | |
| <label for="auto-generate" class="ml-2 block text-sm text-gray-700">Let AI generate the story</label> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <button class="w-full bg-purple-600 hover:bg-purple-700 text-white font-medium py-3 px-4 rounded-md transition duration-150 ease-in-out flex items-center justify-center"> | |
| <i data-feather="zap" class="mr-2"></i> Generate Story & Video | |
| </button> | |
| <button class="w-full bg-green-600 hover:bg-green-700 text-white font-medium py-3 px-4 rounded-md transition duration-150 ease-in-out flex items-center justify-center"> | |
| <i data-feather="upload" class="mr-2"></i> Upload to All Platforms | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Features Section --> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-extrabold text-gray-900 mb-2">Why Choose ClipCraft?</h2> | |
| <p class="text-lg text-gray-500 max-w-3xl mx-auto">The smartest way to create short-form content for all platforms</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-16"> | |
| <div class="bg-white p-6 rounded-xl shadow-sm"> | |
| <div class="bg-purple-100 w-12 h-12 rounded-full flex items-center justify-center mb-4"> | |
| <i data-feather="clock" class="w-6 h-6 text-purple-600"></i> | |
| </div> | |
| <h3 class="text-lg font-medium text-gray-900 mb-2">AI Story Generation</h3> | |
| <p class="text-gray-500">Our AI creates engaging stories with Minecraft backgrounds and professional voiceovers.</p> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-sm"> | |
| <div class="bg-purple-100 w-12 h-12 rounded-full flex items-center justify-center mb-4"> | |
| <i data-feather="trending-up" class="w-6 h-6 text-purple-600"></i> | |
| </div> | |
| <h3 class="text-lg font-medium text-gray-900 mb-2">Minecraft Backgrounds</h3> | |
| <p class="text-gray-500">Choose from various Minecraft gameplay styles to complement your stories.</p> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-sm"> | |
| <div class="bg-purple-100 w-12 h-12 rounded-full flex items-center justify-center mb-4"> | |
| <i data-feather="upload" class="w-6 h-6 text-purple-600"></i> | |
| </div> | |
| <h3 class="text-lg font-medium text-gray-900 mb-2">Professional Voiceovers</h3> | |
| <p class="text-gray-500">Multiple voice styles to bring your AI-generated stories to life.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Footer --> | |
| <footer class="bg-gray-50 border-t border-gray-200"> | |
| <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8"> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-8"> | |
| <div> | |
| <h3 class="text-sm font-semibold text-gray-900 tracking-wider uppercase mb-4">Product</h3> | |
| <ul class="space-y-3"> | |
| <li><a href="#" class="text-sm text-gray-500 hover:text-purple-600">Features</a></li> | |
| <li><a href="#" class="text-sm text-gray-500 hover:text-purple-600">Templates</a></li> | |
| <li><a href="#" class="text-sm text-gray-500 hover:text-purple-600">Pricing</a></li> | |
| <li><a href="#" class="text-sm text-gray-500 hover:text-purple-600">API</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-sm font-semibold text-gray-900 tracking-wider uppercase mb-4">Resources</h3> | |
| <ul class="space-y-3"> | |
| <li><a href="#" class="text-sm text-gray-500 hover:text-purple-600">Documentation</a></li> | |
| <li><a href="#" class="text-sm text-gray-500 hover:text-purple-600">Blog</a></li> | |
| <li><a href="#" class="text-sm text-gray-500 hover:text-purple-600">Community</a></li> | |
| <li><a href="#" class="text-sm text-gray-500 hover:text-purple-600">Support</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-sm font-semibold text-gray-900 tracking-wider uppercase mb-4">Company</h3> | |
| <ul class="space-y-3"> | |
| <li><a href="#" class="text-sm text-gray-500 hover:text-purple-600">About</a></li> | |
| <li><a href="#" class="text-sm text-gray-500 hover:text-purple-600">Careers</a></li> | |
| <li><a href="#" class="text-sm text-gray-500 hover:text-purple-600">Privacy</a></li> | |
| <li><a href="#" class="text-sm text-gray-500 hover:text-purple-600">Terms</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-sm font-semibold text-gray-900 tracking-wider uppercase mb-4">Connect</h3> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-gray-500 hover:text-purple-600"> | |
| <i data-feather="twitter" class="w-5 h-5"></i> | |
| </a> | |
| <a href="#" class="text-gray-500 hover:text-purple-600"> | |
| <i data-feather="instagram" class="w-5 h-5"></i> | |
| </a> | |
| <a href="#" class="text-gray-500 hover:text-purple-600"> | |
| <i data-feather="facebook" class="w-5 h-5"></i> | |
| </a> | |
| <a href="#" class="text-gray-500 hover:text-purple-600"> | |
| <i data-feather="linkedin" class="w-5 h-5"></i> | |
| </a> | |
| </div> | |
| <p class="mt-4 text-sm text-gray-500">Subscribe to our newsletter</p> | |
| <div class="mt-2 flex"> | |
| <input type="email" placeholder="Your email" class="px-3 py-2 border border-gray-300 rounded-l-md text-sm w-full focus:outline-none focus:ring-1 focus:ring-purple-500"> | |
| <button class="bg-purple-600 text-white px-4 py-2 rounded-r-md text-sm hover:bg-purple-700"> | |
| <i data-feather="send" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |