Hugging Face's logo

Spaces:
pedrod8
/
full-stack-strategy-wizard
Running

App Files Community
full-stack-strategy-wizard / index.html
pedrod8's picture
pedrod8
make this 1000% better
3398d18 verified
Raw History Blame Contribute Delete
8.11 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Wireframe Wormhole</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js" defer></script>
<script src="https://unpkg.com/feather-icons" defer></script>
<link rel="preconnect" href="https://cdnjs.cloudflare.com">
<link rel="preconnect" href="https://cdn.jsdelivr.net">
<link rel="preconnect" href="https://unpkg.com">
<style>
body, html {
margin: 0;
padding: 0;
overflow: hidden;
height: 100%;
will-change: transform, opacity;
contain: strict;
}
#vanta-canvas {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
contain: strict;
transform: translateZ(0);
backface-visibility: hidden;
image-rendering: -webkit-optimize-contrast;
}
.content {
position: relative;
z-index: 1;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-shadow: 0 2px 4px rgba(0,0,0,0.5); /* Better contrast */
}
@keyframes zoomInOut {
0% { transform: scale(1); }
100% { transform: scale(1.1); }
}
.content > * {
will-change: transform, opacity;
backface-visibility: hidden;
}
</style>
</head>
<body class="bg-black text-white">
<div id="vanta-canvas">
</div>
<div id="followup" class="hidden w-full min-h-screen bg-black text-white pt-20 pb-32 px-8">
<div class="max-w-4xl mx-auto">
<h2 class="text-4xl font-bold mb-12 text-center">Journey Through the Wormhole</h2>
<div class="grid md:grid-cols-2 gap-12">
<div class="space-y-6">
<h3 class="text-2xl font-semibold">Depth Perception</h3>
<p class="text-gray-300">Experience true three-dimensional depth with our layered wireframe technology.</p>
<div class="h-64 bg-gradient-to-b from-gray-900 to-black border border-gray-800 rounded-lg"></div>
</div>
<div class="space-y-6">
<h3 class="text-2xl font-semibold">Monochrome Space</h3>
<p class="text-gray-300">Navigate through a stark black and white universe of pure geometry.</p>
<div class="h-64 bg-gradient-to-b from-white to-gray-300 border border-gray-400 rounded-lg"></div>
</div>
</div>
<div class="mt-20 text-center">
<button id="returnBtn" class="px-8 py-4 bg-white text-black rounded-full text-xl font-semibold hover:scale-105 transition-transform duration-300 shadow-lg hover:shadow-white/30">
Return to Entrance
</button>
</div>
</div>
</div>
<div class="content text-center px-4">
<h1 class="text-5xl md:text-7xl font-bold mb-6 text-transparent bg-clip-text bg-gradient-to-r from-purple-300 to-pink-500">
Wireframe Wormhole
</h1>
<p class="text-xl md:text-2xl max-w-2xl mb-10 opacity-95">
Dive into an infinite 3D wireframe universe that zooms endlessly into another dimension
</p>
<button id="enterBtn" class="px-8 py-4 bg-gradient-to-r from-purple-500 to-pink-600 rounded-full text-xl font-semibold hover:scale-105 transition-transform duration-300 shadow-lg hover:shadow-purple-500/50 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-500">
Enter the Wormhole
</button>
</div>
<div class="absolute bottom-6 left-0 right-0 text-center opacity-70 text-sm">
<p>Scroll or use arrow keys to navigate</p>
<i data-feather="arrow-down" class="animate-bounce mt-2 mx-auto"></i>
</div>
<script>
// Initialize Vanta.js after DOM is loaded
document.addEventListener('DOMContentLoaded', function() {
initVanta();
});
function initVanta() {
VANTA.NET({
el: "#vanta-canvas",
mouseControls: true,
touchControls: true,
gyroControls: false,
minHeight: 200.00,
minWidth: 200.00,
scale: 1.00,
scaleMobile: 1.00,
color: 0x8a2be2,
backgroundColor: 0x000000,
points: 18.00,
maxDistance: 30.00,
spacing: 22.00,
showDots: false,
lineWidth: 0.8,
color: 0xffffff,
backgroundColor: 0x000000,
pointSize: 1.5,
pointLight: true,
pointLightIntensity: 0.5,
pointLightColor: 0xffffff,
lineColor: 0xaaaaaa
});
// Optimized click handler with passive listener
document.getElementById('enterBtn').addEventListener('click', function() {
const netEffect = VANTA.NET({
el: "#vanta-canvas",
mouseControls: true,
touchControls: true,
gyroControls: false,
minHeight: 200.00,
minWidth: 200.00,
scale: 1.00,
scaleMobile: 1.00,
color: 0x7e3ff2,
backgroundColor: 0x000000,
points: 18.00,
maxDistance: 30.00,
spacing: 22.00,
showDots: false,
lineWidth: 0.8,
color: 0xffffff,
backgroundColor: 0x000000,
pointSize: 1.5,
pointLight: true,
pointLightIntensity: 0.5,
pointLightColor: 0xffffff,
lineColor: 0xaaaaaa
});
// Start zoom animation
let scale = 1;
const zoomStep = () => {
scale *= 1.02;
requestAnimationFrame(() => {
netEffect.setOptions({
spacing: 18.00 * scale,
maxDistance: 25.00 * scale,
points: 12.00 * scale
});
});
);
if (scale < 100) {
requestAnimationFrame(zoomStep);
} else {
// Here you would typically transition to another scene or page
requestAnimationFrame(() => {
document.querySelector('.content').classList.add('hidden');
document.getElementById('followup').classList.remove('hidden');
});
// Optimized return button handler
document.getElementById('returnBtn').addEventListener('click', function() {
requestAnimationFrame(() => {
document.querySelector('.content').classList.remove('hidden');
document.getElementById('followup').classList.add('hidden');
if (netEffect) {
netEffect.setOptions({
points: 18.00,
maxDistance: 30.00,
spacing: 22.00,
lineWidth: 0.8,
pointSize: 1.5
});
}
});
});
zoomStep();
}
// Initialize feather icons
document.addEventListener('DOMContentLoaded', function() {
feather.replace();
});
</script>
<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
</body>
</html>