Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>YouTube to VR Converter</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> | |
| .vr-container { | |
| perspective: 1000px; | |
| width: 100%; | |
| height: 60vh; | |
| position: relative; | |
| overflow: hidden; | |
| border-radius: 16px; | |
| box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); | |
| } | |
| .vr-video { | |
| width: 200%; | |
| height: 100%; | |
| position: absolute; | |
| left: -50%; | |
| transform-style: preserve-3d; | |
| transition: transform 0.5s ease-out; | |
| } | |
| .vr-controls { | |
| background: rgba(0, 0, 0, 0.7); | |
| backdrop-filter: blur(10px); | |
| border-radius: 50px; | |
| padding: 12px 24px; | |
| } | |
| @media (max-width: 768px) { | |
| .vr-container { | |
| height: 50vh; | |
| } | |
| .vr-controls { | |
| padding: 8px 16px; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| } | |
| /* VR headset animation */ | |
| @keyframes float { | |
| 0%, 100% { | |
| transform: translateY(0); | |
| } | |
| 50% { | |
| transform: translateY(-10px); | |
| } | |
| } | |
| .vr-headset { | |
| animation: float 3s ease-in-out infinite; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gradient-to-br from-indigo-900 via-purple-900 to-pink-800 min-h-screen text-white"> | |
| <div class="container mx-auto px-4 py-12"> | |
| <!-- Header --> | |
| <header class="text-center mb-12"> | |
| <div class="flex justify-center mb-6 vr-headset"> | |
| <i class="fas fa-vr-cardboard text-6xl text-white"></i> | |
| </div> | |
| <h1 class="text-4xl md:text-5xl font-bold mb-4">YouTube to VR Converter</h1> | |
| <p class="text-xl opacity-90 max-w-2xl mx-auto">Transform any YouTube video into an immersive VR experience</p> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="max-w-4xl mx-auto"> | |
| <!-- Input Section --> | |
| <div class="bg-white/10 backdrop-blur-md rounded-xl p-6 mb-8 shadow-xl"> | |
| <div class="flex flex-col md:flex-row gap-4"> | |
| <input | |
| type="text" | |
| id="youtubeUrl" | |
| placeholder="Paste YouTube URL here..." | |
| class="flex-grow px-4 py-3 rounded-lg bg-white/20 border border-white/30 focus:outline-none focus:ring-2 focus:ring-purple-400" | |
| > | |
| <button | |
| id="convertBtn" | |
| class="px-6 py-3 bg-gradient-to-r from-purple-500 to-pink-500 rounded-lg font-semibold hover:from-purple-600 hover:to-pink-600 transition-all transform hover:scale-105 shadow-lg flex items-center justify-center gap-2" | |
| > | |
| <i class="fas fa-magic"></i> Convert to VR | |
| </button> | |
| </div> | |
| <div class="mt-4 text-sm opacity-80"> | |
| <p>Example: https://www.youtube.com/watch?v=dQw4w9WgXcQ</p> | |
| </div> | |
| </div> | |
| <!-- VR Player Section --> | |
| <div id="vrPlayer" class="hidden"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h2 class="text-2xl font-bold">VR Experience</h2> | |
| <button id="resetBtn" class="text-sm bg-white/10 hover:bg-white/20 px-3 py-1 rounded-full flex items-center gap-1"> | |
| <i class="fas fa-redo"></i> Reset | |
| </button> | |
| </div> | |
| <div class="vr-container bg-black"> | |
| <div class="vr-video" id="vrVideo"> | |
| <iframe id="youtubeFrame" width="100%" height="100%" frameborder="0" allowfullscreen></iframe> | |
| </div> | |
| </div> | |
| <!-- VR Controls --> | |
| <div class="flex items-center justify-center mt-6 gap-4 vr-controls"> | |
| <button id="vrModeBtn" class="px-4 py-2 bg-purple-600 hover:bg-purple-700 rounded-full flex items-center gap-2"> | |
| <i class="fas fa-vr-cardboard"></i> VR Mode | |
| </button> | |
| <div class="flex items-center gap-4"> | |
| <button id="lookLeft" class="p-2 bg-white/20 hover:bg-white/30 rounded-full"> | |
| <i class="fas fa-arrow-left"></i> | |
| </button> | |
| <button id="lookCenter" class="px-4 py-2 bg-white/20 hover:bg-white/30 rounded-full"> | |
| Center View | |
| </button> | |
| <button id="lookRight" class="p-2 bg-white/20 hover:bg-white/30 rounded-full"> | |
| <i class="fas fa-arrow-right"></i> | |
| </button> | |
| </div> | |
| <div class="flex items-center gap-2"> | |
| <span class="text-sm">Zoom:</span> | |
| <input type="range" id="zoomControl" min="1" max="2" step="0.1" value="1.5" class="w-24"> | |
| </div> | |
| </div> | |
| <!-- VR Instructions --> | |
| <div class="mt-8 bg-black/30 p-6 rounded-xl"> | |
| <h3 class="text-xl font-semibold mb-3 flex items-center gap-2"> | |
| <i class="fas fa-info-circle"></i> VR Experience Tips | |
| </h3> | |
| <ul class="space-y-2"> | |
| <li class="flex items-start gap-2"> | |
| <i class="fas fa-mobile-alt mt-1"></i> | |
| <span>For best results, use your phone in a VR headset</span> | |
| </li> | |
| <li class="flex items-start gap-2"> | |
| <i class="fas fa-arrows-alt mt-1"></i> | |
| <span>Use the controls to look around or click and drag on desktop</span> | |
| </li> | |
| <li class="flex items-start gap-2"> | |
| <i class="fas fa-expand mt-1"></i> | |
| <span>Tap the VR Mode button when using a headset</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <!-- Features Section --> | |
| <div class="mt-16 grid grid-cols-1 md:grid-cols-3 gap-6"> | |
| <div class="bg-white/10 p-6 rounded-xl backdrop-blur-sm"> | |
| <div class="text-3xl mb-4 text-purple-300"> | |
| <i class="fas fa-globe"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-2">360° Experience</h3> | |
| <p class="opacity-90">Convert any video into an immersive 360-degree VR experience.</p> | |
| </div> | |
| <div class="bg-white/10 p-6 rounded-xl backdrop-blur-sm"> | |
| <div class="text-3xl mb-4 text-pink-300"> | |
| <i class="fas fa-headset"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-2">VR Headset Ready</h3> | |
| <p class="opacity-90">Optimized for use with Google Cardboard and other VR headsets.</p> | |
| </div> | |
| <div class="bg-white/10 p-6 rounded-xl backdrop-blur-sm"> | |
| <div class="text-3xl mb-4 text-indigo-300"> | |
| <i class="fas fa-mobile-alt"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-2">Mobile Friendly</h3> | |
| <p class="opacity-90">Works perfectly on both desktop and mobile devices.</p> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="mt-16 text-center opacity-80 text-sm"> | |
| <p>YouTube to VR Converter - Transform your viewing experience</p> | |
| <p class="mt-2">Note: This is a simulation of VR experience using standard videos</p> | |
| </footer> | |
| </div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const youtubeUrlInput = document.getElementById('youtubeUrl'); | |
| const convertBtn = document.getElementById('convertBtn'); | |
| const vrPlayer = document.getElementById('vrPlayer'); | |
| const vrVideo = document.getElementById('vrVideo'); | |
| const youtubeFrame = document.getElementById('youtubeFrame'); | |
| const resetBtn = document.getElementById('resetBtn'); | |
| const lookLeft = document.getElementById('lookLeft'); | |
| const lookRight = document.getElementById('lookRight'); | |
| const lookCenter = document.getElementById('lookCenter'); | |
| const zoomControl = document.getElementById('zoomControl'); | |
| const vrModeBtn = document.getElementById('vrModeBtn'); | |
| let isDragging = false; | |
| let startX, scrollLeft; | |
| let currentRotation = 0; | |
| let isVRMode = false; | |
| // Convert YouTube URL to embed URL and display VR player | |
| convertBtn.addEventListener('click', function() { | |
| const youtubeUrl = youtubeUrlInput.value.trim(); | |
| if (!youtubeUrl) { | |
| alert('Please enter a YouTube URL'); | |
| return; | |
| } | |
| // Extract video ID from URL | |
| let videoId = ''; | |
| const regExp = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/; | |
| const match = youtubeUrl.match(regExp); | |
| if (match && match[2].length === 11) { | |
| videoId = match[2]; | |
| } else { | |
| alert('Invalid YouTube URL'); | |
| return; | |
| } | |
| // Create embed URL | |
| const embedUrl = `https://www.youtube.com/embed/${videoId}?autoplay=1&rel=0&controls=0&showinfo=0&modestbranding=1`; | |
| // Set iframe source | |
| youtubeFrame.src = embedUrl; | |
| // Show VR player | |
| vrPlayer.classList.remove('hidden'); | |
| // Scroll to VR player | |
| vrPlayer.scrollIntoView({ behavior: 'smooth' }); | |
| }); | |
| // Reset button | |
| resetBtn.addEventListener('click', function() { | |
| youtubeFrame.src = ''; | |
| vrPlayer.classList.add('hidden'); | |
| youtubeUrlInput.value = ''; | |
| vrVideo.style.transform = 'rotateY(0deg)'; | |
| currentRotation = 0; | |
| isVRMode = false; | |
| vrModeBtn.innerHTML = '<i class="fas fa-vr-cardboard"></i> VR Mode'; | |
| }); | |
| // Look left button | |
| lookLeft.addEventListener('click', function() { | |
| currentRotation += 45; | |
| vrVideo.style.transform = `rotateY(${currentRotation}deg)`; | |
| }); | |
| // Look right button | |
| lookRight.addEventListener('click', function() { | |
| currentRotation -= 45; | |
| vrVideo.style.transform = `rotateY(${currentRotation}deg)`; | |
| }); | |
| // Center view button | |
| lookCenter.addEventListener('click', function() { | |
| currentRotation = 0; | |
| vrVideo.style.transform = `rotateY(${currentRotation}deg)`; | |
| }); | |
| // Zoom control | |
| zoomControl.addEventListener('input', function() { | |
| const zoomValue = this.value; | |
| youtubeFrame.style.transform = `scale(${zoomValue})`; | |
| }); | |
| // VR Mode button | |
| vrModeBtn.addEventListener('click', function() { | |
| isVRMode = !isVRMode; | |
| if (isVRMode) { | |
| this.innerHTML = '<i class="fas fa-times"></i> Exit VR'; | |
| document.documentElement.requestFullscreen().catch(err => { | |
| console.log('Fullscreen error:', err); | |
| }); | |
| // Split screen for VR effect | |
| vrVideo.style.width = '400%'; | |
| vrVideo.style.left = '-150%'; | |
| } else { | |
| this.innerHTML = '<i class="fas fa-vr-cardboard"></i> VR Mode'; | |
| if (document.fullscreenElement) { | |
| document.exitFullscreen(); | |
| } | |
| // Return to normal view | |
| vrVideo.style.width = '200%'; | |
| vrVideo.style.left = '-50%'; | |
| } | |
| }); | |
| // Mouse drag for desktop | |
| vrVideo.addEventListener('mousedown', (e) => { | |
| isDragging = true; | |
| startX = e.pageX - vrVideo.offsetLeft; | |
| scrollLeft = currentRotation; | |
| }); | |
| document.addEventListener('mouseup', () => { | |
| isDragging = false; | |
| }); | |
| document.addEventListener('mousemove', (e) => { | |
| if (!isDragging) return; | |
| e.preventDefault(); | |
| const x = e.pageX - vrVideo.offsetLeft; | |
| const walk = (x - startX) * 0.5; | |
| currentRotation = scrollLeft - walk; | |
| vrVideo.style.transform = `rotateY(${currentRotation}deg)`; | |
| }); | |
| // Touch events for mobile | |
| vrVideo.addEventListener('touchstart', (e) => { | |
| isDragging = true; | |
| startX = e.touches[0].pageX - vrVideo.offsetLeft; | |
| scrollLeft = currentRotation; | |
| }); | |
| document.addEventListener('touchend', () => { | |
| isDragging = false; | |
| }); | |
| document.addEventListener('touchmove', (e) => { | |
| if (!isDragging) return; | |
| e.preventDefault(); | |
| const x = e.touches[0].pageX - vrVideo.offsetLeft; | |
| const walk = (x - startX) * 0.5; | |
| currentRotation = scrollLeft - walk; | |
| vrVideo.style.transform = `rotateY(${currentRotation}deg)`; | |
| }); | |
| // Handle fullscreen change | |
| document.addEventListener('fullscreenchange', function() { | |
| if (!document.fullscreenElement) { | |
| isVRMode = false; | |
| vrModeBtn.innerHTML = '<i class="fas fa-vr-cardboard"></i> VR Mode'; | |
| vrVideo.style.width = '200%'; | |
| vrVideo.style.left = '-50%'; | |
| } | |
| }); | |
| }); | |
| </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=Rilaba/vr-conversor" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |