Spaces:
Running
Running
Of course. Here is a comprehensive prompt curated to generate the entire frontend of your website as a single HTML file, using only HTML, CSS, and JavaScript, just as you asked. This prompt includes the detailed "Aurora Beam Navbar" and placeholder sections for the rest of your homepage.
56972dd verified | <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Aurora Dimension Forge</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Exo+2:wght@300;400;600&display=swap'); | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: 'Exo 2', sans-serif; | |
| background: linear-gradient(135deg, #0b0e18 0%, #101828 100%); | |
| color: #e2e8f0; | |
| overflow-x: hidden; | |
| min-height: 100vh; | |
| } | |
| .orbitron { | |
| font-family: 'Orbitron', sans-serif; | |
| } | |
| #particles-canvas { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| z-index: -1; | |
| } | |
| .aurora-beam { | |
| background: rgba(16, 24, 40, 0.7); | |
| backdrop-filter: blur(20px); | |
| border: 1px solid rgba(56, 189, 248, 0.2); | |
| box-shadow: 0 0 60px rgba(56, 189, 248, 0.1); | |
| } | |
| .nav-link { | |
| position: relative; | |
| transition: all 0.3s ease; | |
| } | |
| .nav-link::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: -5px; | |
| left: 50%; | |
| width: 0; | |
| height: 2px; | |
| background: linear-gradient(90deg, transparent, #38bdf8, transparent); | |
| transition: all 0.3s ease; | |
| transform: translateX(-50%); | |
| } | |
| .nav-link:hover::after { | |
| width: 100%; | |
| } | |
| .ripple { | |
| position: absolute; | |
| border-radius: 50%; | |
| background: rgba(56, 189, 248, 0.3); | |
| transform: scale(0); | |
| animation: ripple 0.6s linear; | |
| pointer-events: none; | |
| } | |
| @keyframes ripple { | |
| to { | |
| transform: scale(4); | |
| opacity: 0; | |
| } | |
| } | |
| .contact-btn { | |
| background: linear-gradient(135deg, #0ea5e9 0%, #38bdf8 100%); | |
| box-shadow: 0 0 30px rgba(56, 189, 248, 0.4); | |
| animation: pulse-glow 2s infinite; | |
| } | |
| @keyframes pulse-glow { | |
| 0%, 100% { box-shadow: 0 0 30px rgba(56, 189, 248, 0.4); } | |
| 50% { box-shadow: 0 0 50px rgba(56, 189, 248, 0.8); } | |
| } | |
| .project-card { | |
| background: rgba(16, 24, 40, 0.6); | |
| border: 1px solid rgba(56, 189, 248, 0.1); | |
| transition: all 0.3s ease; | |
| } | |
| .project-card:hover { | |
| transform: translateY(-10px); | |
| border-color: rgba(56, 189, 248, 0.3); | |
| box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); | |
| } | |
| .mobile-menu { | |
| background: rgba(11, 14, 24, 0.95); | |
| backdrop-filter: blur(20px); | |
| } | |
| .hero-gradient { | |
| background: radial-gradient(circle at center, rgba(56, 189, 248, 0.1) 0%, transparent 70%); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Particles Background --> | |
| <canvas id="particles-canvas"></canvas> | |
| <!-- Aurora Beam Navigation --> | |
| <nav class="aurora-beam fixed top-0 left-0 w-full z-50 py-4 px-6 lg:px-12"> | |
| <div class="max-w-7xl mx-auto flex items-center justify-between"> | |
| <!-- Logo --> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 bg-gradient-to-br from-cyan-400 to-blue-500 rounded-lg flex items-center justify-center shadow-lg"> | |
| <span class="orbitron text-white font-bold text-lg">ADF</span> | |
| </div> | |
| </div> | |
| <!-- Center Navigation Links (Arc Layout) --> | |
| <div class="hidden lg:flex relative"> | |
| <div class="absolute -top-4 left-0 w-full h-1 bg-gradient-to-r from-transparent via-cyan-400/30 to-transparent rounded-full"></div> | |
| <div class="flex space-x-8 relative"> | |
| <a href="#" class="nav-link text-cyan-100 hover:text-white font-medium transition-all duration-300">Home</a> | |
| <a href="#" class="nav-link text-cyan-100 hover:text-white font-medium transition-all duration-300">Projects</a> | |
| <a href="#" class="nav-link text-cyan-100 hover:text-white font-medium transition-all duration-300">Blog</a> | |
| <a href="#" class="nav-link text-cyan-100 hover:text-white font-medium transition-all duration-300">Store</a> | |
| <a href="#" class="nav-link text-cyan-100 hover:text-white font-medium transition-all duration-300">About</a> | |
| </div> | |
| </div> | |
| <!-- Contact Button --> | |
| <div class="hidden lg:block"> | |
| <button class="contact-btn text-white font-semibold py-2 px-6 rounded-full transition-all duration-300 hover:scale-105"> | |
| Contact | |
| </button> | |
| </div> | |
| <!-- Mobile Menu Button --> | |
| <button id="mobile-menu-btn" class="lg:hidden text-cyan-300 hover:text-white transition-colors"> | |
| <i data-feather="menu"></i> | |
| </button> | |
| </div> | |
| </nav> | |
| <!-- Mobile Menu --> | |
| <div id="mobile-menu" class="mobile-menu fixed inset-0 z-40 hidden lg:hidden"> | |
| <div class="flex flex-col items-center justify-center h-full space-y-8"> | |
| <a href="#" class="text-2xl text-cyan-100 hover:text-white font-medium transition-colors">Home</a> | |
| <a href="#" class="text-2xl text-cyan-100 hover:text-white font-medium transition-colors">Projects</a> | |
| <a href="#" class="text-2xl text-cyan-100 hover:text-white font-medium transition-colors">Blog</a> | |
| <a href="#" class="text-2xl text-cyan-100 hover:text-white font-medium transition-colors">Store</a> | |
| <a href="#" class="text-2xl text-cyan-100 hover:text-white font-medium transition-colors">About</a> | |
| <button class="contact-btn text-white font-semibold py-3 px-8 rounded-full text-lg mt-4"> | |
| Contact | |
| </button> | |
| <button id="close-mobile-menu" class="absolute top-6 right-6 text-cyan-300 hover:text-white"> | |
| <i data-feather="x"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Hero Section --> | |
| <section class="min-h-screen flex items-center justify-center relative px-6 pt-20"> | |
| <div class="hero-gradient absolute inset-0 pointer-events-none"></div> | |
| <div class="max-w-4xl mx-auto text-center z-10"> | |
| <h1 class="orbitron text-4xl md:text-6xl lg:text-7xl font-bold mb-6 bg-gradient-to-r from-cyan-300 via-blue-400 to-purple-400 bg-clip-text text-transparent"> | |
| Transcending Digital.<br>Crafting Dimensions. | |
| </h1> | |
| <p class="text-xl md:text-2xl text-cyan-100 mb-12 max-w-2xl mx-auto leading-relaxed"> | |
| Where innovation meets imagination. We build digital experiences that transcend boundaries and create new realities. | |
| </p> | |
| <div class="flex flex-col sm:flex-row gap-4 justify-center"> | |
| <button class="bg-gradient-to-r from-cyan-500 to-blue-500 text-white font-semibold py-3 px-8 rounded-full hover:scale-105 transition-transform duration-300 shadow-lg"> | |
| View Projects | |
| </button> | |
| <button class="border border-cyan-400 text-cyan-300 font-semibold py-3 px-8 rounded-full hover:bg-cyan-400/10 transition-all duration-300"> | |
| Get in Touch | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Featured Projects Section --> | |
| <section class="py-20 px-6"> | |
| <div class="max-w-7xl mx-auto"> | |
| <h2 class="orbitron text-3xl md:text-4xl font-bold text-center mb-16 bg-gradient-to-r from-cyan-300 to-blue-400 bg-clip-text text-transparent"> | |
| Featured Dimensions | |
| </h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Project Card 1 --> | |
| <div class="project-card rounded-2xl p-6"> | |
| <div class="h-48 bg-gradient-to-br from-cyan-500/20 to-blue-600/20 rounded-xl mb-4 flex items-center justify-center"> | |
| </div> | |
| <h3 class="orbitron text-xl font-bold text-cyan-200 mb-2">Quantum Interface</h3> | |
| <p class="text-cyan-100/80">Next-gen user experience platform with neural integration capabilities.</p> | |
| </div> | |
| <!-- Project Card 2 --> | |
| <div class="project-card rounded-2xl p-6"> | |
| <div class="h-48 bg-gradient-to-br from-purple-500/20 to-pink-600/20 rounded-xl mb-4 flex items-center justify-center"> | |
| </div> | |
| <h3 class="orbitron text-xl font-bold text-cyan-200 mb-2">Aether Network</h3> | |
| <p class="text-cyan-100/80">Decentralized communication protocol for seamless cross-dimensional data transfer.</p> | |
| </div> | |
| <!-- Project Card 3 --> | |
| <div class="project-card rounded-2xl p-6"> | |
| <div class="h-48 bg-gradient-to-br from-blue-500/20 to-cyan-600/20 rounded-xl mb-4 flex items-center justify-center"> | |
| </div> | |
| <h3 class="orbitron text-xl font-bold text-cyan-200 mb-2">Nova Engine</h3> | |
| <p class="text-cyan-100/80">Real-time rendering system that creates photorealistic virtual environments.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="border-t border-cyan-800/30 py-12 px-6"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="mb-6 md:mb-0"> | |
| <div class="flex items-center space-x-2"> | |
| <div class="w-8 h-8 bg-gradient-to-br from-cyan-400 to-blue-500 rounded-lg flex items-center justify-center"> | |
| <span class="orbitron text-white font-bold">ADF</span> | |
| </div> | |
| <span class="orbitron text-cyan-300">Aurora Dimension Forge</span> | |
| </div> | |
| </div> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-cyan-300 hover:text-white transition-colors"> | |
| <i data-feather="github"></i> | |
| </a> | |
| <a href="#" class="text-cyan-300 hover:text-white transition-colors"> | |
| <i data-feather="twitter"></i> | |
| </a> | |
| <a href="#" class="text-cyan-300 hover:text-white transition-colors"> | |
| <i data-feather="linkedin"></i> | |
| </a> | |
| <a href="#" class="text-cyan-300 hover:text-white transition-colors"> | |
| <i data-feather="instagram"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="text-center mt-8 text-cyan-500/60"> | |
| <p>© 2024 Aurora Dimension Forge. Crafting realities beyond imagination.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Initialize Feather Icons | |
| feather.replace(); | |
| // Particle System | |
| const canvas = document.getElementById('particles-canvas'); | |
| const ctx = canvas.getContext('2d'); | |
| function resizeCanvas() { | |
| canvas.width = window.innerWidth; | |
| canvas.height = window.innerHeight; | |
| } | |
| resizeCanvas(); | |
| window.addEventListener('resize', resizeCanvas); | |
| const particles = []; | |
| const particleCount = 80; | |
| class Particle { | |
| constructor() { | |
| this.x = Math.random() * canvas.width; | |
| this.y = Math.random() * canvas.height; | |
| this.size = Math.random() * 2 + 0.5; | |
| this.speedX = Math.random() * 0.5 - 0.25; | |
| this.speedY = Math.random() * 0.5 - 0.25; | |
| this.color = `rgba(56, 189, 248, ${Math.random() * 0.5 + 0.1})`; | |
| } | |
| update() { | |
| this.x += this.speedX; | |
| this.y += this.speedY; | |
| if (this.x > canvas.width) this.x = 0; | |
| if (this.x < 0) this.x = canvas.width; | |
| if (this.y > canvas.height) this.y = 0; | |
| if (this.y < 0) this.y = canvas.height; | |
| } | |
| draw() { | |
| ctx.fillStyle = this.color; | |
| ctx.beginPath(); | |
| ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2); | |
| ctx.fill(); | |
| } | |
| } | |
| function initParticles() { | |
| for (let i = 0; i < particleCount; i++) { | |
| particles.push(new Particle()); | |
| } | |
| } | |
| function animateParticles() { | |
| ctx.clearRect(0, 0, canvas.width, canvas.height); | |
| for (let particle of particles) { | |
| particle.update(); | |
| particle.draw(); | |
| } | |
| requestAnimationFrame(animateParticles); | |
| } | |
| initParticles(); | |
| animateParticles(); | |
| // Navbar Animations | |
| gsap.from('nav', { | |
| duration: 1, | |
| y: -100, | |
| opacity: 0, | |
| ease: "power3.out" | |
| }); | |
| // Hero Section Animations | |
| gsap.from('h1', { | |
| duration: 1.2, | |
| y: 50, | |
| opacity: 0, | |
| delay: 0.5, | |
| ease: "power3.out" | |
| }); | |
| gsap.from('section p', { | |
| duration: 1, | |
| y: 30, | |
| opacity: 0, | |
| delay: 0.8, | |
| ease: "power3.out" | |
| }); | |
| gsap.from('section button', { | |
| duration: 1, | |
| y: 30, | |
| opacity: 0, | |
| delay: 1.1, | |
| stagger: 0.2, | |
| ease: "power3.out" | |
| }); | |
| // Ripple Effect for Nav Links | |
| document.querySelectorAll('.nav-link').forEach(link => { | |
| link.addEventListener('click', function(e) { | |
| const ripple = document.createElement('span'); | |
| ripple.classList.add('ripple'); | |
| this.appendChild(ripple); | |
| const x = e.clientX - this.getBoundingClientRect().left; | |
| const y = e.clientY - this.getBoundingClientRect().top; | |
| ripple.style.left = `${x}px`; | |
| ripple.style.top = `${y}px`; | |
| setTimeout(() => { | |
| ripple.remove(); | |
| }, 600); | |
| }); | |
| }); | |
| // Mobile Menu Functionality | |
| const mobileMenuBtn = document.getElementById('mobile-menu-btn'); | |
| const closeMobileMenu = document.getElementById('close-mobile-menu'); | |
| const mobileMenu = document.getElementById('mobile-menu'); | |
| mobileMenuBtn.addEventListener('click', () => { | |
| mobileMenu.classList.remove('hidden'); | |
| gsap.fromTo(mobileMenu, | |
| { opacity: 0, scale: 0.8 }, | |
| { opacity: 1, scale: 1, duration: 0.3, ease: "power2.out" } | |
| ); | |
| }); | |
| closeMobileMenu.addEventListener('click', () => { | |
| gsap.to(mobileMenu, { | |
| opacity: 0, | |
| scale: 0.8, | |
| duration: 0.3, | |
| ease: "power2.in", | |
| onComplete: () => mobileMenu.classList.add('hidden') | |
| }); | |
| }); | |
| // Parallax Effect for Navbar | |
| window.addEventListener('scroll', () => { | |
| const scrolled = window.pageYOffset; | |
| const parallaxSpeed = 0.3; | |
| const nav = document.querySelector('nav'); | |
| gsap.to(nav, { | |
| y: -scrolled * parallaxSpeed, | |
| ease: "none" | |
| }); | |
| }); | |
| // Project Card Animations on Scroll | |
| gsap.utils.toArray('.project-card').forEach((card, i) => { | |
| gsap.from(card, { | |
| scrollTrigger: { | |
| trigger: card, | |
| start: "top 80%", | |
| end: "bottom 20%", | |
| toggleActions: "play none none reverse" | |
| }, | |
| y: 50, | |
| opacity: 0, | |
| duration: 0.8, | |
| delay: i * 0.1, | |
| ease: "power3.out" | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |