Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>ChromaShift Chronicles</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r121/three.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.waves.min.js"></script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;800&display=swap'); | |
| :root { | |
| --undefined-primary: #6366f1; | |
| --undefined-secondary: #8b5cf6; | |
| --undefined-accent: #ec4899; | |
| --undefined-dark: #1e293b; | |
| --undefined-light: #f1f5f9; | |
| } | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| background-color: var(--undefined-dark); | |
| color: var(--undefined-light); | |
| overflow-x: hidden; | |
| } | |
| .undefined-gradient { | |
| background: linear-gradient(135deg, var(--undefined-primary), var(--undefined-secondary), var(--undefined-accent)); | |
| } | |
| .undefined-card { | |
| background: rgba(30, 41, 59, 0.7); | |
| backdrop-filter: blur(10px); | |
| border: 1px solid rgba(99, 102, 241, 0.2); | |
| transition: all 0.3s ease; | |
| } | |
| .undefined-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.1); | |
| border-color: rgba(99, 102, 241, 0.5); | |
| } | |
| .undefined-btn { | |
| background: linear-gradient(135deg, var(--undefined-primary), var(--undefined-secondary)); | |
| transition: all 0.3s ease; | |
| } | |
| .undefined-btn:hover { | |
| transform: scale(1.05); | |
| box-shadow: 0 10px 15px -3px rgba(99, 102, 241, 0.4); | |
| } | |
| .undefined-text { | |
| background: linear-gradient(135deg, var(--undefined-primary), var(--undefined-accent)); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| } | |
| .floating { | |
| animation: floating 3s ease-in-out infinite; | |
| } | |
| @keyframes floating { | |
| 0% { transform: translateY(0px); } | |
| 50% { transform: translateY(-15px); } | |
| 100% { transform: translateY(0px); } | |
| } | |
| .parallax-scroll { | |
| transform: translateZ(0); | |
| will-change: transform; | |
| } | |
| .glow { | |
| box-shadow: 0 0 15px rgba(99, 102, 241, 0.5); | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen"> | |
| <!-- Navigation --> | |
| <nav class="fixed w-full z-50 py-4 px-6 undefined-gradient"> | |
| <div class="max-w-7xl mx-auto flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <div class="w-10 h-10 rounded-full undefined-gradient glow"></div> | |
| <span class="text-xl font-bold">ChromaShift</span> | |
| </div> | |
| <div class="hidden md:flex space-x-8"> | |
| <a href="#" class="font-medium hover:text-purple-200 transition">Home</a> | |
| <a href="#" class="font-medium hover:text-purple-200 transition">Features</a> | |
| <a href="#" class="font-medium hover:text-purple-200 transition">Gallery</a> | |
| <a href="#" class="font-medium hover:text-purple-200 transition">About</a> | |
| <a href="#" class="font-medium hover:text-purple-200 transition">Contact</a> | |
| </div> | |
| <button class="md:hidden text-white"> | |
| <i data-feather="menu"></i> | |
| </button> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section id="hero" class="min-h-screen flex items-center pt-16"> | |
| <div id="vanta-bg" class="absolute inset-0 z-0"></div> | |
| <div class="relative z-10 max-w-7xl mx-auto px-6 grid md:grid-cols-2 gap-12 items-center"> | |
| <div class="text-center md:text-left"> | |
| <h1 class="text-5xl md:text-7xl font-extrabold mb-6 undefined-text"> | |
| Undefined Beauty | |
| </h1> | |
| <p class="text-xl mb-8 max-w-lg"> | |
| Experience the extraordinary blend of undefined aesthetics and cutting-edge design. Where imagination meets innovation. | |
| </p> | |
| <div class="flex flex-col sm:flex-row gap-4 justify-center md:justify-start"> | |
| <button class="undefined-btn text-white font-bold py-3 px-8 rounded-full undefined-btn"> | |
| Explore Now | |
| </button> | |
| <button class="bg-transparent border-2 border-white text-white font-bold py-3 px-8 rounded-full hover:bg-white hover:text-slate-900 transition"> | |
| Learn More | |
| </button> | |
| </div> | |
| </div> | |
| <div class="flex justify-center"> | |
| <div class="relative"> | |
| <div class="w-64 h-64 md:w-80 md:h-80 rounded-full undefined-gradient glow floating"></div> | |
| <div class="absolute inset-0 flex items-center justify-center"> | |
| <div class="w-48 h-48 md:w-60 md:h-60 rounded-full bg-slate-900 opacity-80"></div> | |
| </div> | |
| <div class="absolute inset-0 flex items-center justify-center"> | |
| <i data-feather="star" class="text-white w-16 h-16"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Features Section --> | |
| <section class="py-20 relative"> | |
| <div class="max-w-7xl mx-auto px-6"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-4xl font-bold mb-4">Undefined Experiences</h2> | |
| <p class="text-xl max-w-2xl mx-auto"> | |
| Discover the unique features that make our undefined aesthetic truly exceptional | |
| </p> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <div class="undefined-card p-8 rounded-2xl"> | |
| <div class="w-16 h-16 rounded-full undefined-gradient flex items-center justify-center mb-6"> | |
| <i data-feather="zap" class="text-white w-8 h-8"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold mb-4">Dynamic Shifts</h3> | |
| <p class="mb-6"> | |
| Our undefined palette adapts in real-time to create immersive experiences that evolve with your interaction. | |
| </p> | |
| <a href="#" class="text-indigo-300 hover:text-indigo-100 flex items-center"> | |
| Learn more | |
| <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i> | |
| </a> | |
| </div> | |
| <div class="undefined-card p-8 rounded-2xl"> | |
| <div class="w-16 h-16 rounded-full undefined-gradient flex items-center justify-center mb-6"> | |
| <i data-feather="eye" class="text-white w-8 h-8"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold mb-4">Visual Harmony</h3> | |
| <p class="mb-6"> | |
| Every element is carefully crafted to maintain visual balance while pushing the boundaries of undefined design. | |
| </p> | |
| <a href="#" class="text-indigo-300 hover:text-indigo-100 flex items-center"> | |
| Learn more | |
| <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i> | |
| </a> | |
| </div> | |
| <div class="undefined-card p-8 rounded-2xl"> | |
| <div class="w-16 h-16 rounded-full undefined-gradient flex items-center justify-center mb-6"> | |
| <i data-feather="code" class="text-white w-8 h-8"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold mb-4">Innovative Tech</h3> | |
| <p class="mb-6"> | |
| Cutting-edge technologies seamlessly integrated to deliver unparalleled performance and undefined aesthetics. | |
| </p> | |
| <a href="#" class="text-indigo-300 hover:text-indigo-100 flex items-center"> | |
| Learn more | |
| <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Gallery Section --> | |
| <section class="py-20 bg-slate-800"> | |
| <div class="max-w-7xl mx-auto px-6"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-4xl font-bold mb-4">Undefined Gallery</h2> | |
| <p class="text-xl max-w-2xl mx-auto"> | |
| A visual journey through the undefined aesthetic universe | |
| </p> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-6"> | |
| <div class="undefined-card rounded-2xl overflow-hidden group"> | |
| <div class="h-64 bg-gradient-to-br from-indigo-500 to-purple-600 relative overflow-hidden"> | |
| <img src="http://static.photos/abstract/640x360/1" alt="Abstract Art" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-slate-900 to-transparent"></div> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-2">Chromatic Waves</h3> | |
| <p>Exploring the fluid dynamics of undefined color theory</p> | |
| </div> | |
| </div> | |
| <div class="undefined-card rounded-2xl overflow-hidden group"> | |
| <div class="h-64 bg-gradient-to-br from-purple-500 to-pink-600 relative overflow-hidden"> | |
| <img src="http://static.photos/technology/640x360/2" alt="Technology" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-slate-900 to-transparent"></div> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-2">Digital Metamorphosis</h3> | |
| <p>Where technology meets undefined artistic expression</p> | |
| </div> | |
| </div> | |
| <div class="undefined-card rounded-2xl overflow-hidden group"> | |
| <div class="h-64 bg-gradient-to-br from-pink-500 to-red-600 relative overflow-hidden"> | |
| <img src="http://static.photos/minimal/640x360/3" alt="Minimal Design" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-slate-900 to-transparent"></div> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-2">Essence Reduction</h3> | |
| <p>Finding beauty in undefined simplicity</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA Section --> | |
| <section class="py-20"> | |
| <div class="max-w-4xl mx-auto px-6 text-center"> | |
| <div class="undefined-card p-12 rounded-3xl"> | |
| <h2 class="text-4xl font-bold mb-6">Join the Undefined Movement</h2> | |
| <p class="text-xl mb-8 max-w-2xl mx-auto"> | |
| Be part of a community that embraces the undefined beauty of creativity and innovation | |
| </p> | |
| <div class="flex flex-col sm:flex-row gap-4 justify-center"> | |
| <button class="undefined-btn text-white font-bold py-4 px-10 rounded-full undefined-btn"> | |
| Get Started | |
| </button> | |
| <button class="border-2 border-indigo-500 text-indigo-300 font-bold py-4 px-10 rounded-full hover:bg-indigo-500 hover:text-white transition"> | |
| View Demo | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="py-12 bg-slate-900 border-t border-slate-800"> | |
| <div class="max-w-7xl mx-auto px-6"> | |
| <div class="grid md:grid-cols-4 gap-8"> | |
| <div> | |
| <div class="flex items-center space-x-2 mb-6"> | |
| <div class="w-8 h-8 rounded-full undefined-gradient"></div> | |
| <span class="text-xl font-bold">ChromaShift</span> | |
| </div> | |
| <p class="text-slate-400 mb-4"> | |
| Redefining digital experiences through undefined aesthetics and innovative design. | |
| </p> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-slate-400 hover:text-white"> | |
| <i data-feather="twitter"></i> | |
| </a> | |
| <a href="#" class="text-slate-400 hover:text-white"> | |
| <i data-feather="instagram"></i> | |
| </a> | |
| <a href="#" class="text-slate-400 hover:text-white"> | |
| <i data-feather="github"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-bold mb-4">Products</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-slate-400 hover:text-white">ChromaSuite</a></li> | |
| <li><a href="#" class="text-slate-400 hover:text-white">Undefined UI</a></li> | |
| <li><a href="#" class="text-slate-400 hover:text-white">Aesthetic Engine</a></li> | |
| <li><a href="#" class="text-slate-400 hover:text-white">Design Lab</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-bold mb-4">Resources</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-slate-400 hover:text-white">Documentation</a></li> | |
| <li><a href="#" class="text-slate-400 hover:text-white">Tutorials</a></li> | |
| <li><a href="#" class="text-slate-400 hover:text-white">Blog</a></li> | |
| <li><a href="#" class="text-slate-400 hover:text-white">Community</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-bold mb-4">Subscribe</h3> | |
| <p class="text-slate-400 mb-4"> | |
| Stay updated with our latest undefined creations | |
| </p> | |
| <div class="flex"> | |
| <input type="email" placeholder="Your email" class="bg-slate-800 text-white py-2 px-4 rounded-l-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 w-full"> | |
| <button class="undefined-gradient py-2 px-4 rounded-r-lg"> | |
| <i data-feather="send" class="text-white"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t border-slate-800 mt-12 pt-8 text-center text-slate-500"> | |
| <p>© 2023 ChromaShift Chronicles. All rights reserved. Embrace the undefined.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Initialize Feather Icons | |
| feather.replace(); | |
| // Initialize Vanta.js Background | |
| VANTA.WAVES({ | |
| el: "#vanta-bg", | |
| mouseControls: true, | |
| touchControls: true, | |
| gyroControls: false, | |
| minHeight: 400.00, | |
| minWidth: 400.00, | |
| scale: 1.00, | |
| scaleMobile: 1.00, | |
| color: 0x1e293b, | |
| shininess: 15.00, | |
| waveHeight: 15.00, | |
| waveSpeed: 0.75, | |
| zoom: 0.75 | |
| }); | |
| // Parallax effect for hero section | |
| document.addEventListener('mousemove', (e) => { | |
| const parallaxElements = document.querySelectorAll('.parallax-scroll'); | |
| const x = (window.innerWidth - e.pageX) / 50; | |
| const y = (window.innerHeight - e.pageY) / 50; | |
| parallaxElements.forEach(el => { | |
| el.style.transform = `translateX(${x}px) translateY(${y}px)`; | |
| }); | |
| }); | |
| // Scroll animations | |
| window.addEventListener('scroll', () => { | |
| const scrollPosition = window.scrollY; | |
| const heroSection = document.getElementById('hero'); | |
| if (scrollPosition > 100) { | |
| heroSection.style.opacity = `${1 - scrollPosition / 800}`; | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> | |