Spaces:
Running
Running
File size: 9,173 Bytes
47fe6c6 91ec29f 47fe6c6 91ec29f 47fe6c6 3c21800 47fe6c6 91ec29f 47fe6c6 91ec29f 47fe6c6 91ec29f 47fe6c6 91ec29f 47fe6c6 91ec29f 47fe6c6 91ec29f 47fe6c6 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 | <!DOCTYPE html>
<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 !important;
}
/* 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> |