Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Versalabs | Interactive 3D Experience</title> | |
| <script> | |
| let currentLanguage = 'en'; | |
| const translations = { | |
| en: { | |
| title: "Let's create", | |
| subtitle: "something amazing", | |
| description: "We transform ideas into immersive digital experiences. Our team crafts innovative solutions that push boundaries and captivate audiences.", | |
| startProject: "Start Project", | |
| exploreWork: "Explore Work" | |
| }, | |
| es: { | |
| title: "Vamos a crear", | |
| subtitle: "algo increíble", | |
| description: "Transformamos ideas en experiencias digitales inmersivas. Nuestro equipo crea soluciones innovadoras que superan límites y cautivan audiencias.", | |
| startProject: "Iniciar Proyecto", | |
| exploreWork: "Explorar Trabajos" | |
| } | |
| }; | |
| </script> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/@splinetool/runtime@1.0.42/build/runtime.js"></script> | |
| <style> | |
| .loader { | |
| width: 48px; | |
| height: 48px; | |
| border: 5px solid rgba(255, 255, 255, 0.2); | |
| border-radius: 50%; | |
| display: inline-block; | |
| box-sizing: border-box; | |
| position: relative; | |
| animation: pulse 1s linear infinite; | |
| } | |
| .loader:after { | |
| content: ''; | |
| position: absolute; | |
| width: 48px; | |
| height: 48px; | |
| border: 5px solid rgba(255, 255, 255, 0.2); | |
| border-radius: 50%; | |
| display: inline-block; | |
| box-sizing: border-box; | |
| left: 50%; | |
| top: 50%; | |
| transform: translate(-50%, -50%); | |
| animation: scaleUp 1s linear infinite; | |
| } | |
| @keyframes scaleUp { | |
| 0% { transform: translate(-50%, -50%) scale(0) } | |
| 60% , 100% { transform: translate(-50%, -50%) scale(1)} | |
| } | |
| @keyframes pulse { | |
| 0% , 60% , 100%{ transform: scale(1) } | |
| 80% { transform: scale(1.2)} | |
| } | |
| /* Hide the Spline branding */ | |
| spline-viewer::part(logo) { | |
| display: none ; | |
| } | |
| /* Custom gradient text for Versalabs */ | |
| .versalabs-gradient { | |
| background: linear-gradient(90deg, #3b82f6 0%, #8b5cf6 50%, #ec4899 100%); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-900 min-h-screen flex items-center justify-center p-4"> | |
| <div class="w-full max-w-6xl"> | |
| <!-- Card Component --> | |
| <div class="w-full h-[500px] bg-black/[0.96] rounded-xl relative overflow-hidden shadow-xl"> | |
| <!-- Spotlight Effect --> | |
| <div class="absolute -top-40 left-0 md:left-60 md:-top-20 w-full h-full bg-gradient-to-br from-white/5 via-white/10 to-transparent opacity-70 blur-3xl"></div> | |
| <div class="flex h-full flex-col md:flex-row"> | |
| <!-- Left content --> | |
| <div class="flex-1 p-8 relative z-10 flex flex-col justify-center"> | |
| <div class="flex items-center justify-between mb-2"> | |
| <div class="flex items-center gap-2"> | |
| <div class="w-3 h-3 rounded-full bg-blue-500 animate-pulse"></div> | |
| <span class="text-sm font-medium text-blue-400">VERSALABS</span> | |
| </div> | |
| <button id="language-toggle" class="relative px-3 py-1.5 rounded-full border border-white/20 bg-white/5 backdrop-blur-sm text-xs font-medium text-white/80 hover:text-white hover:bg-white/10 transition-all duration-300 group"> | |
| <span class="en">EN</span>/<span class="es">ES</span> | |
| <div class="absolute inset-0 rounded-full bg-gradient-to-r from-blue-500/20 to-purple-600/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div> | |
| </button> | |
| </div> | |
| <h1 class="text-4xl md:text-5xl font-bold"> | |
| <span class="versalabs-gradient" id="title-text">Let's create</span> | |
| <span class="block bg-clip-text text-transparent bg-gradient-to-b from-neutral-50 to-neutral-400" id="subtitle-text">something amazing</span> | |
| </h1> | |
| <p class="mt-4 text-neutral-300 max-w-lg" id="description-text"> | |
| We transform ideas into immersive digital experiences. Our team crafts innovative solutions that push boundaries and captivate audiences. | |
| </p> | |
| <div class="mt-8 flex gap-4"> | |
| <button id="start-project-btn" class="px-6 py-2.5 bg-gradient-to-r from-blue-500 to-purple-600 text-white rounded-full font-medium hover:opacity-90 transition-all duration-300 transform hover:scale-105"> | |
| Start Project | |
| </button> | |
| <button id="explore-work-btn" class="px-6 py-2.5 border border-white/20 text-white rounded-full font-medium hover:bg-white/10 transition-all duration-300"> | |
| Explore Work | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Right content - 3D Spline Scene --> | |
| <div class="flex-1 relative"> | |
| <div id="spline-container" class="w-full h-full"> | |
| <div class="w-full h-full flex items-center justify-center"> | |
| <span class="loader"></span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Language toggle functionality | |
| function updateTexts() { | |
| const lang = currentLanguage; | |
| document.getElementById('title-text').textContent = translations[lang].title; | |
| document.getElementById('subtitle-text').textContent = translations[lang].subtitle; | |
| document.getElementById('description-text').textContent = translations[lang].description; | |
| document.getElementById('start-project-btn').textContent = translations[lang].startProject; | |
| document.getElementById('explore-work-btn').textContent = translations[lang].exploreWork; | |
| } | |
| // Load Spline scene dynamically | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Set up language toggle | |
| document.getElementById('language-toggle').addEventListener('click', function() { | |
| currentLanguage = currentLanguage === 'en' ? 'es' : 'en'; | |
| updateTexts(); | |
| }); | |
| const splineContainer = document.getElementById('spline-container'); | |
| // Create script element to load Spline | |
| const script = document.createElement('script'); | |
| script.src = 'https://unpkg.com/@splinetool/viewer@1.0.42/build/spline-viewer.js'; | |
| script.type = 'module'; | |
| script.onload = function() { | |
| // Create Spline viewer element after script loads | |
| const splineViewer = document.createElement('spline-viewer'); | |
| splineViewer.setAttribute('url', 'https://prod.spline.design/kZDDjO5HuC9GJUM2/scene.splinecode'); | |
| splineViewer.setAttribute('loading-anim', 'true'); | |
| splineViewer.style.width = '100%'; | |
| splineViewer.style.height = '100%'; | |
| // Clear loader and append Spline viewer | |
| splineContainer.innerHTML = ''; | |
| splineContainer.appendChild(splineViewer); | |
| // Hide the Spline branding after a short delay to ensure it's loaded | |
| setTimeout(() => { | |
| const logo = splineViewer.shadowRoot.querySelector('.logo'); | |
| if (logo) { | |
| logo.style.display = 'none'; | |
| } | |
| }, 1000); | |
| }; | |
| document.head.appendChild(script); | |
| }); | |
| </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=VedetteStore/spline-scene" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p> | |
| </body> | |
| </html> |