Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>NSFW Video Generator</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #6e45e2 0%, #88d3ce 100%); | |
| } | |
| .video-preview { | |
| aspect-ratio: 16/9; | |
| background-color: #1a1a2e; | |
| } | |
| .nsfw-badge { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { opacity: 0.7; } | |
| 50% { opacity: 1; } | |
| 100% { opacity: 0.7; } | |
| } | |
| .prompt-input:focus { | |
| box-shadow: 0 0 0 3px rgba(110, 69, 226, 0.3); | |
| } | |
| .tag:hover { | |
| transform: translateY(-2px); | |
| } | |
| .tag { | |
| transition: all 0.2s ease; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-900 text-gray-100 min-h-screen"> | |
| <div class="gradient-bg w-full py-4 px-6 shadow-lg"> | |
| <div class="container mx-auto flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <i class="fas fa-film text-2xl text-white"></i> | |
| <h1 class="text-2xl font-bold">NSFW VideoGen</h1> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <button class="bg-white text-purple-600 px-4 py-2 rounded-full font-medium hover:bg-gray-100 transition"> | |
| <i class="fas fa-user mr-2"></i>Sign In | |
| </button> | |
| <button class="bg-purple-700 text-white px-4 py-2 rounded-full font-medium hover:bg-purple-800 transition"> | |
| <i class="fas fa-plus mr-2"></i>Create | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="container mx-auto px-4 py-8"> | |
| <div class="max-w-4xl mx-auto"> | |
| <div class="bg-gray-800 rounded-xl p-6 shadow-lg mb-8"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-xl font-bold">Create NSFW Video</h2> | |
| <span class="nsfw-badge bg-red-600 text-white text-xs px-3 py-1 rounded-full font-bold">NSFW</span> | |
| </div> | |
| <div class="video-preview rounded-lg mb-6 flex items-center justify-center relative overflow-hidden"> | |
| <div id="videoPlaceholder" class="text-center p-4"> | |
| <i class="fas fa-video text-4xl text-gray-500 mb-3"></i> | |
| <p class="text-gray-400">Video preview will appear here</p> | |
| </div> | |
| <video id="generatedVideo" class="hidden w-full h-full object-cover" controls></video> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="prompt" class="block text-sm font-medium mb-2">Describe your video</label> | |
| <div class="relative"> | |
| <textarea id="prompt" rows="3" class="prompt-input w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-3 focus:outline-none focus:border-purple-500" placeholder="Example: A sensual scene with two women in a dimly lit bedroom, slow motion, soft lighting, cinematic"></textarea> | |
| <div class="absolute bottom-3 right-3 text-gray-400 text-xs"> | |
| <span id="charCount">0</span>/500 | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="block text-sm font-medium mb-2">Quick tags</label> | |
| <div class="flex flex-wrap gap-2"> | |
| <button class="tag bg-gray-700 hover:bg-purple-600 text-sm px-3 py-1 rounded-full">sensual</button> | |
| <button class="tag bg-gray-700 hover:bg-purple-600 text-sm px-3 py-1 rounded-full">bedroom</button> | |
| <button class="tag bg-gray-700 hover:bg-purple-600 text-sm px-3 py-1 rounded-full">lingerie</button> | |
| <button class="tag bg-gray-700 hover:bg-purple-600 text-sm px-3 py-1 rounded-full">slow motion</button> | |
| <button class="tag bg-gray-700 hover:bg-purple-600 text-sm px-3 py-1 rounded-full">cinematic</button> | |
| <button class="tag bg-gray-700 hover:bg-purple-600 text-sm px-3 py-1 rounded-full">soft lighting</button> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6"> | |
| <div> | |
| <label for="style" class="block text-sm font-medium mb-2">Style</label> | |
| <select id="style" class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 focus:outline-none focus:border-purple-500"> | |
| <option value="realistic">Realistic</option> | |
| <option value="anime">Anime</option> | |
| <option value="cartoon">Cartoon</option> | |
| <option value="3d">3D Render</option> | |
| <option value="pixel">Pixel Art</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label for="duration" class="block text-sm font-medium mb-2">Duration (seconds)</label> | |
| <input type="range" id="duration" min="5" max="60" value="15" class="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer"> | |
| <div class="flex justify-between text-xs text-gray-400 mt-1"> | |
| <span>5s</span> | |
| <span id="durationValue">15s</span> | |
| <span>60s</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex flex-col sm:flex-row justify-between gap-4"> | |
| <div class="flex items-center"> | |
| <input id="explicitToggle" type="checkbox" class="w-4 h-4 text-purple-600 bg-gray-700 border-gray-600 rounded focus:ring-purple-500"> | |
| <label for="explicitToggle" class="ml-2 text-sm">Include explicit content</label> | |
| </div> | |
| <button id="generateBtn" class="bg-purple-600 hover:bg-purple-700 text-white font-medium py-3 px-6 rounded-lg transition flex items-center justify-center"> | |
| <i class="fas fa-magic mr-2"></i> Generate Video | |
| </button> | |
| </div> | |
| </div> | |
| <div class="bg-gray-800 rounded-xl p-6 shadow-lg"> | |
| <h3 class="text-lg font-bold mb-4">Your Recent Creations</h3> | |
| <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4"> | |
| <div class="bg-gray-700 rounded-lg overflow-hidden aspect-video relative group"> | |
| <div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center opacity-0 group-hover:opacity-100 transition"> | |
| <button class="bg-purple-600 text-white p-2 rounded-full hover:bg-purple-700"> | |
| <i class="fas fa-download"></i> | |
| </button> | |
| </div> | |
| <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-2"> | |
| <p class="text-xs truncate">Sensual bedroom scene</p> | |
| </div> | |
| </div> | |
| <div class="bg-gray-700 rounded-lg overflow-hidden aspect-video relative group"> | |
| <div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center opacity-0 group-hover:opacity-100 transition"> | |
| <button class="bg-purple-600 text-white p-2 rounded-full hover:bg-purple-700"> | |
| <i class="fas fa-download"></i> | |
| </button> | |
| </div> | |
| <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-2"> | |
| <p class="text-xs truncate">Beach sunset romance</p> | |
| </div> | |
| </div> | |
| <div class="bg-gray-700 rounded-lg overflow-hidden aspect-video relative group"> | |
| <div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center opacity-0 group-hover:opacity-100 transition"> | |
| <button class="bg-purple-600 text-white p-2 rounded-full hover:bg-purple-700"> | |
| <i class="fas fa-download"></i> | |
| </button> | |
| </div> | |
| <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-2"> | |
| <p class="text-xs truncate">Shower scene cinematic</p> | |
| </div> | |
| </div> | |
| <div class="bg-gray-700 rounded-lg overflow-hidden aspect-video relative group"> | |
| <div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center opacity-0 group-hover:opacity-100 transition"> | |
| <button class="bg-purple-600 text-white p-2 rounded-full hover:bg-purple-700"> | |
| <i class="fas fa-download"></i> | |
| </button> | |
| </div> | |
| <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-2"> | |
| <p class="text-xs truncate">Office fantasy</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <footer class="bg-gray-800 py-6 mt-12"> | |
| <div class="container mx-auto px-4 text-center text-gray-400 text-sm"> | |
| <p>NSFW VideoGen - For adults only. All generated content is fictional.</p> | |
| <div class="flex justify-center space-x-6 mt-4"> | |
| <a href="#" class="hover:text-white">Terms</a> | |
| <a href="#" class="hover:text-white">Privacy</a> | |
| <a href="#" class="hover:text-white">Contact</a> | |
| <a href="#" class="hover:text-white">FAQ</a> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Character counter for prompt | |
| const promptInput = document.getElementById('prompt'); | |
| const charCount = document.getElementById('charCount'); | |
| promptInput.addEventListener('input', () => { | |
| charCount.textContent = promptInput.value.length; | |
| if (promptInput.value.length > 500) { | |
| charCount.classList.add('text-red-400'); | |
| } else { | |
| charCount.classList.remove('text-red-400'); | |
| } | |
| }); | |
| // Duration slider | |
| const durationSlider = document.getElementById('duration'); | |
| const durationValue = document.getElementById('durationValue'); | |
| durationSlider.addEventListener('input', () => { | |
| durationValue.textContent = `${durationSlider.value}s`; | |
| }); | |
| // Tag buttons | |
| const tags = document.querySelectorAll('.tag'); | |
| tags.forEach(tag => { | |
| tag.addEventListener('click', () => { | |
| const tagText = tag.textContent.trim(); | |
| const currentPrompt = promptInput.value; | |
| if (currentPrompt.length > 0 && !currentPrompt.endsWith(' ')) { | |
| promptInput.value += ' '; | |
| } | |
| promptInput.value += tagText + ' '; | |
| promptInput.focus(); | |
| charCount.textContent = promptInput.value.length; | |
| }); | |
| }); | |
| // Generate button | |
| const generateBtn = document.getElementById('generateBtn'); | |
| const videoPlaceholder = document.getElementById('videoPlaceholder'); | |
| const generatedVideo = document.getElementById('generatedVideo'); | |
| generateBtn.addEventListener('click', () => { | |
| if (promptInput.value.trim().length < 10) { | |
| alert('Please enter a more detailed prompt (at least 10 characters)'); | |
| return; | |
| } | |
| // Show loading state | |
| generateBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Generating...'; | |
| generateBtn.disabled = true; | |
| // Simulate generation process (in a real app, this would be an API call) | |
| setTimeout(() => { | |
| // Hide placeholder and show video | |
| videoPlaceholder.classList.add('hidden'); | |
| generatedVideo.classList.remove('hidden'); | |
| // In a real app, you would set the video source here | |
| // For demo purposes, we'll just show a message | |
| generatedVideo.innerHTML = ` | |
| <source src="#" type="video/mp4"> | |
| Your browser does not support the video tag. | |
| `; | |
| // Reset button | |
| generateBtn.innerHTML = '<i class="fas fa-magic mr-2"></i> Generate Video'; | |
| generateBtn.disabled = false; | |
| // Show success message | |
| alert('Video generated successfully! (This is a demo - in a real app, the video would appear here)'); | |
| }, 3000); | |
| }); | |
| // Age verification (would be more robust in a real app) | |
| const ageVerified = confirm("This website contains adult content. Are you 18 or older?"); | |
| if (!ageVerified) { | |
| window.location.href = "https://www.google.com"; | |
| } | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=aventura123/nsfw-video-gen" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |