Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta name="description" content="Futuristic mobile product landing page with mindblowing animations"> | |
| <title>NeonFlow - Future Mobile Experience</title> | |
| <style> | |
| :root { | |
| --primary: #00ffff; | |
| --secondary: #ff00ff; | |
| --accent: #ffff00; | |
| --dark: #0a0a0a; | |
| --light: #ffffff; | |
| --glass: rgba(255, 255, 255, 0.1); | |
| --glass-border: rgba(255, 255, 255, 0.2); | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: 'Arial', sans-serif; | |
| background: var(--dark); | |
| color: var(--light); | |
| overflow-x: hidden; | |
| line-height: 1.6; | |
| } | |
| /* Global Animations */ | |
| @keyframes float { | |
| 0%, 100% { transform: translateY(0px); } | |
| 50% { transform: translateY(-20px); } | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0.5; } | |
| } | |
| @keyframes glow { | |
| 0%, 100% { box-shadow: 0 0 20px var(--primary); } | |
| 50% { box-shadow: 0 0 40px var(--primary), 0 0 60px var(--primary); } | |
| } | |
| @keyframes rotate { | |
| from { transform: rotate(0deg); } | |
| to { transform: rotate(360deg); } | |
| } | |
| @keyframes wave { | |
| 0% { transform: translateY(0); } | |
| 50% { transform: translateY(-10px); } | |
| 100% { transform: translateY(0); } | |
| } | |
| /* Navigation */ | |
| .navbar { | |
| position: fixed; | |
| top: 0; | |
| width: 100%; | |
| padding: 1.5rem 2rem; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| z-index: 1000; | |
| backdrop-filter: blur(10px); | |
| background: var(--glass); | |
| border-bottom: 1px solid var(--glass-border); | |
| transition: all 0.3s ease; | |
| } | |
| .logo { | |
| font-size: 1.5rem; | |
| font-weight: bold; | |
| background: linear-gradient(45deg, var(--primary), var(--secondary)); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| animation: glow 2s infinite; | |
| } | |
| .nav-links { | |
| display: flex; | |
| gap: 2rem; | |
| } | |
| .nav-links a { | |
| color: var(--light); | |
| text-decoration: none; | |
| transition: all 0.3s ease; | |
| position: relative; | |
| } | |
| .nav-links a::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: -5px; | |
| left: 0; | |
| width: 0; | |
| height: 2px; | |
| background: var(--primary); | |
| transition: width 0.3s ease; | |
| } | |
| .nav-links a:hover::after { | |
| width: 100%; | |
| } | |
| /* Hero Section */ | |
| .hero { | |
| height: 100vh; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| align-items: center; | |
| text-align: center; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .hero-bg { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 50%, #16213e 100%); | |
| z-index: -2; | |
| } | |
| .hero::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: radial-gradient(circle at 20% 50%, rgba(0, 255, 255, 0.3) 0%, transparent 50%), | |
| radial-gradient(circle at 80% 80%, rgba(255, 0, 255, 0.3) 0%, transparent 50%); | |
| z-index: -1; | |
| animation: rotate 30s linear infinite; | |
| } | |
| .hero-title { | |
| font-size: 4rem; | |
| margin-bottom: 1rem; | |
| background: linear-gradient(45deg, var(--primary), var(--secondary), var(--accent)); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| animation: float 3s ease-in-out infinite; | |
| } | |
| .hero-subtitle { | |
| font-size: 1.5rem; | |
| margin-bottom: 2rem; | |
| color: var(--glass-border); | |
| animation: pulse 2s ease-in-out infinite; | |
| } | |
| .cta-button { | |
| padding: 1rem 2.5rem; | |
| font-size: 1.2rem; | |
| background: transparent; | |
| border: 2px solid var(--primary); | |
| color: var(--primary); | |
| border-radius: 50px; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .cta-button::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: -100%; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient(90deg, transparent, var(--primary), transparent); | |
| transition: left 0.5s ease; | |
| } | |
| .cta-button:hover::before { | |
| left: 100%; | |
| } | |
| .cta-button:hover { | |
| background: var(--primary); | |
| color: var(--dark); | |
| transform: translateY(-3px); | |
| box-shadow: 0 10px 20px rgba(0, 255, 255, 0.3); | |
| } | |
| /* Features Section */ | |
| .features { | |
| padding: 5rem 2rem; | |
| background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 100%); | |
| } | |
| .features-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | |
| gap: 2rem; | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| } | |
| .feature-card { | |
| background: var(--glass); | |
| backdrop-filter: blur(10px); | |
| border: 1px solid var(--glass-border); | |
| border-radius: 20px; | |
| padding: 2rem; | |
| transition: all 0.3s ease; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .feature-card::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 3px; | |
| background: linear-gradient(90deg, var(--primary), var(--secondary)); | |
| transform: scaleX(0); | |
| transition: transform 0.3s ease; | |
| } | |
| .feature-card:hover::before { | |
| transform: scaleX(1); | |
| } | |
| .feature-card:hover { | |
| transform: translateY(-10px); | |
| box-shadow: 0 20px 40px rgba(0, 255, 255, 0.2); | |
| } | |
| .feature-icon { | |
| font-size: 3rem; | |
| margin-bottom: 1rem; | |
| animation: glow 2s infinite; | |
| } | |
| .feature-title { | |
| font-size: 1.5rem; | |
| margin-bottom: 1rem; | |
| } | |
| .feature-desc { | |
| color: var(--glass-border); | |
| } | |
| /* Interactive Section */ | |
| .interactive { | |
| padding: 5rem 2rem; | |
| background: linear-gradient(135deg, #1a1a2e 0%, #0a0a0a 100%); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .interactive::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: | |
| radial-gradient(circle at 10% 20%, rgba(0, 255, 255, 0.1) 0%, transparent 50%), | |
| radial-gradient(circle at 90% 80%, rgba(255, 0, 255, 0.1) 0%, transparent 50%); | |
| z-index: -1; | |
| } | |
| .interactive-content { | |
| max-width: 800px; | |
| margin: 0 auto; | |
| text-align: center; | |
| } | |
| .interactive-title { | |
| font-size: 3rem; | |
| margin-bottom: 2rem; | |
| background: linear-gradient(45deg, var(--primary), var(--secondary)); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| } | |
| .interactive-desc { | |
| font-size: 1.2rem; | |
| margin-bottom: 3rem; | |
| color: var(--glass-border); | |
| } | |
| .interactive-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); | |
| gap: 2rem; | |
| margin-top: 4rem; | |
| } | |
| .interactive-item { | |
| background: var(--glass); | |
| backdrop-filter: blur(10px); | |
| border: 1px solid var(--glass-border); | |
| border-radius: 15px; | |
| padding: 2rem; | |
| text-align: center; | |
| transition: all 0.3s ease; | |
| cursor: pointer; | |
| } | |
| .interactive-item:hover { | |
| transform: scale(1.05); | |
| box-shadow: 0 15px 30px rgba(255, 255, 0, 0.2); | |
| } | |
| .interactive-item-icon { | |
| font-size: 2.5rem; | |
| margin-bottom: 1rem; | |
| animation: pulse 2s infinite; | |
| } | |
| /* Stats Section */ | |
| .stats { | |
| padding: 5rem 2rem; | |
| background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 100%); | |
| } | |
| .stats-container { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); | |
| gap: 2rem; | |
| } | |
| .stat-item { | |
| text-align: center; | |
| padding: 2rem; | |
| background: var(--glass); | |
| backdrop-filter: blur(10px); | |
| border: 1px solid var(--glass-border); | |
| border-radius: 20px; | |
| transition: all 0.3s ease; | |
| } | |
| .stat-item:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 15px 30px rgba(0, 255, 255, 0.2); | |
| } | |
| .stat-number { | |
| font-size: 3rem; | |
| font-weight: bold; | |
| background: linear-gradient(45deg, var(--primary), var(--secondary)); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| margin-bottom: 1rem; | |
| } | |
| .stat-label { | |
| font-size: 1.2rem; | |
| color: var(--glass-border); | |
| } | |
| /* Testimonials */ | |
| .testimonials { | |
| padding: 5rem 2rem; | |
| background: linear-gradient(135deg, #1a1a2e 0%, #0a0a0a 100%); | |
| } | |
| .testimonials-container { | |
| max-width: 1000px; | |
| margin: 0 auto; | |
| text-align: center; | |
| } | |
| .testimonial-slider { | |
| position: relative; | |
| max-width: 800px; | |
| margin: 0 auto; | |
| overflow: hidden; | |
| } | |
| .testimonial-track { | |
| display: flex; | |
| transition: transform 0.5s ease; | |
| } | |
| .testimonial-card { | |
| min-width: 100%; | |
| background: var(--glass); | |
| backdrop-filter: blur(10px); | |
| border: 1px solid var(--glass-border); | |
| border-radius: 20px; | |
| padding: 3rem; | |
| margin: 0 1rem; | |
| } | |
| .testimonial-text { | |
| font-size: 1.2rem; | |
| margin-bottom: 2rem; | |
| color: var(--light); | |
| position: relative; | |
| } | |
| .testimonial-text::before, | |
| .testimonial-text::after { | |
| content: '"'; | |
| font-size: 4rem; | |
| position: absolute; | |
| color: var(--primary); | |
| opacity: 0.3; | |
| } | |
| .testimonial-text::before { | |
| top: -20px; | |
| left: -10px; | |
| } | |
| .testimonial-text::after { | |
| bottom: -40px; | |
| right: -10px; | |
| } | |
| .testimonial-author { | |
| font-size: 1.2rem; | |
| font-weight: bold; | |
| color: var(--primary); | |
| } | |
| .testimonial-role { | |
| font-size: 1rem; | |
| color: var(--glass-border); | |
| } | |
| .slider-dots { | |
| display: flex; | |
| justify-content: center; | |
| gap: 1rem; | |
| margin-top: 2rem; | |
| } | |
| .slider-dot { | |
| width: 12px; | |
| height: 12px; | |
| border-radius: 50%; | |
| background: var(--glass-border); | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| } | |
| .slider-dot.active { | |
| background: var(--primary); | |
| transform: scale(1.2); | |
| } | |
| /* Footer */ | |
| .footer { | |
| padding: 3rem 2rem; | |
| background: var(--dark); | |
| text-align: center; | |
| border-top: 1px solid var(--glass-border); | |
| } | |
| .footer-content { | |
| max-width: 800px; | |
| margin: 0 auto; | |
| } | |
| .footer-logo { | |
| font-size: 1.5rem; | |
| font-weight: bold; | |
| background: linear-gradient(45deg, var(--primary), var(--secondary)); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| margin-bottom: 1rem; | |
| } | |
| .footer-links { | |
| display: flex; | |
| justify-content: center; | |
| gap: 2rem; | |
| margin-bottom: 2rem; | |
| } | |
| .footer-links a { | |
| color: var(--glass-border); | |
| text-decoration: none; | |
| transition: all 0.3s ease; | |
| } | |
| .footer-links a:hover { | |
| color: var(--primary); | |
| } | |
| .social-icons { | |
| display: flex; | |
| justify-content: center; | |
| gap: 1.5rem; | |
| margin-bottom: 2rem; | |
| } | |
| .social-icon { | |
| width: 40px; | |
| height: 40px; | |
| border: 1px solid var(--glass-border); | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| transition: all 0.3s ease; | |
| } | |
| .social-icon:hover { | |
| background: var(--primary); | |
| transform: translateY(-5px); | |
| } | |
| /* Particles */ | |
| .particles { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| pointer-events: none; | |
| z-index: -1; | |
| } | |
| .particle { | |
| position: absolute; | |
| background: var(--primary); | |
| border-radius: 50%; | |
| opacity: 0.5; | |
| animation: float 10s infinite linear; | |
| } | |
| /* Responsive */ | |
| @media (max-width: 768px) { | |
| .hero-title { | |
| font-size: 2.5rem; | |
| } | |
| .hero-subtitle { | |
| font-size: 1.2rem; | |
| } | |
| .nav-links { | |
| display: none; | |
| } | |
| .features-grid, | |
| .interactive-grid, | |
| .stats-container { | |
| grid-template-columns: 1fr; | |
| } | |
| .testimonial-card { | |
| margin: 0 0.5rem; | |
| } | |
| } | |
| /* Scroll Progress */ | |
| .scroll-progress { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| height: 4px; | |
| background: linear-gradient(90deg, var(--primary), var(--secondary)); | |
| z-index: 1001; | |
| transform: scaleX(0); | |
| transform-origin: left; | |
| transition: transform 0.1s ease; | |
| } | |
| /* Loading Animation */ | |
| .loader { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: var(--dark); | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| z-index: 9999; | |
| transition: opacity 0.5s ease; | |
| } | |
| .loader.hidden { | |
| opacity: 0; | |
| pointer-events: none; | |
| } | |
| .loader-circle { | |
| width: 60px; | |
| height: 60px; | |
| border: 3px solid var(--glass-border); | |
| border-top: 3px solid var(--primary); | |
| border-radius: 50%; | |
| animation: rotate 1s linear infinite; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Loader --> | |
| <div class="loader" id="loader"> | |
| <div class="loader-circle"></div> | |
| </div> | |
| <!-- Scroll Progress --> | |
| <div class="scroll-progress" id="scrollProgress"></div> | |
| <!-- Particles --> | |
| <div class="particles" id="particles"></div> | |
| <!-- Navigation --> | |
| <nav class="navbar"> | |
| <div class="logo">NeonFlow</div> | |
| <div class="nav-links"> | |
| <a href="#hero">Home</a> | |
| <a href="#features">Features</a> | |
| <a href="#interactive">Interactive</a> | |
| <a href="#stats">Stats</a> | |
| <a href="#testimonials">Testimonials</a> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="hero" id="hero"> | |
| <div class="hero-bg"></div> | |
| <h1 class="hero-title">Experience the Future</h1> | |
| <p class="hero-subtitle">Revolutionary mobile experience with cutting-edge technology</p> | |
| <button class="cta-button">Get Started</button> | |
| </section> | |
| <!-- Features Section --> | |
| <section class="features" id="features"> | |
| <div class="features-grid"> | |
| <div class="feature-card"> | |
| <div class="feature-icon">🚀</div> | |
| <h3 class="feature-title">Lightning Fast</h3> | |
| <p class="feature-desc">Experience blazing fast performance with our optimized technology stack</p> | |
| </div> | |
| <div class="feature-card"> | |
| <div class="feature-icon">🛡️</div> | |
| <h3 class="feature-title">Secure by Design</h3> | |
| <p class="feature-desc">Your data is protected with military-grade encryption</p> | |
| </div> | |
| <div class="feature-card"> | |
| <div class="feature-icon">🎨</div> | |
| <h3 class="feature-title">Beautiful Design</h3> | |
| <p class="feature-desc">Stunning UI with modern aesthetics and smooth animations</p> | |
| </div> | |
| <div class="feature-card"> | |
| <div class="feature-icon">📱</div> | |
| <h3 class="feature-title">Mobile First</h3> | |
| <p class="feature-desc">Perfectly optimized for all mobile devices and screen sizes</p> | |
| </div> | |
| <div class="feature-card"> | |
| <div class="feature-icon">🤖</div> | |
| <h3 class="feature-title">AI Powered</h3> | |
| <p class="feature-desc">Smart features powered by artificial intelligence</p> | |
| </div> | |
| <div class="feature-card"> | |
| <div class="feature-icon">🌐</div> | |
| <h3 class="feature-title">Global Reach</h3> | |
| <p class="feature-desc">Connect with users worldwide with seamless integration</p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Interactive Section --> | |
| <section class="interactive" id="interactive"> | |
| <div class="interactive-content"> | |
| <h2 class="interactive-title">Interactive Experience</h2> | |
| <p class="interactive-desc">Explore our innovative features with interactive demonstrations</p> | |
| <div class="interactive-grid"> | |
| <div class="interactive-item"> | |
| <div class="interactive-item-icon">🎮</div> | |
| <h3>Live Demo</h3> | |
| <p>Try our interactive demo</p> | |
| </div> | |
| <div class="interactive-item"> | |
| <div class="interactive-item-icon">📊</div> | |
| <h3>Real-time Stats</h3> | |
| <p>See live performance metrics</p> | |
| </div> | |
| <div class="interactive-item"> | |
| <div class="interactive-item-icon">🔮</div> | |
| <h3>Future Tech</h3> | |
| <p>Preview upcoming features</p> | |
| </div> | |
| <div class="interactive-item"> | |
| <div class="interactive-item-icon">🚀</div> | |
| <h3>Quick Start</h3> | |
| <p>Get started in seconds</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Stats Section --> | |
| <section class="stats" id="stats"> | |
| <div class="stats-container"> | |
| <div class="stat-item"> | |
| <div class="stat-number" data-target="99.9">0</div> | |
| <div class="stat-label">Uptime</div> | |
| </div> | |
| <div class="stat-item"> | |
| <div class="stat-number" data-target="1M+">0</div> | |
| <div class="stat-label">Active Users</div> | |
| </div> | |
| <div class="stat-item"> | |
| <div class="stat-number" data-target="4.9">0</div> | |
| <div class="stat-label">User Rating</div> | |
| </div> | |
| <div class="stat-item"> | |
| <div class="stat-number" data-target="24/7">0</div> | |
| <div class="stat-label">Support</div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials --> | |
| <section class="testimonials" id="testimonials"> | |
| <div class="testimonials-container"> | |
| <h2 class="interactive-title">What Our Users Say</h2> | |
| <div class="testimonial-slider"> | |
| <div class="testimonial-track" id="testimonialTrack"> | |
| <div class="testimonial-card"> | |
| <p class="testimonial-text">"NeonFlow has completely transformed how I work. The interface is stunning and the performance is unmatched."</p> | |
| <p class="testimonial-author">Sarah Johnson</p> | |
| <p class="testimonial-role">Product Manager</p> | |
| </div> | |
| <div class="testimonial-card"> | |
| <p class="testimonial-text">"I've never seen such a beautiful and functional mobile app. The animations are smooth and the features are innovative."</p> | |
| <p class="testimonial-author">Mike Chen</p> | |
| <p class="testimonial-role">Developer</p> | |
| </div> | |
| <div class="testimonial-card"> | |
| <p class="testimonial-text">"The future of mobile apps is here. NeonFlow sets a new standard for what's possible."</p> | |
| <p class="testimonial-author">Emily Rodriguez</p> | |
| <p class="testimonial-role">Designer</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="slider-dots" id="sliderDots"> | |
| <div class="slider-dot active"></div> | |
| <div class="slider-dot"></div> | |
| <div class="slider-dot"></div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="footer"> | |
| <div class="footer-content"> | |
| <div class="footer-logo">NeonFlow</div> | |
| <div class="footer-links"> | |
| <a href="#">Privacy</a> | |
| <a href="#">Terms</a> | |
| <a href="#">Contact</a> | |
| <a href="#">About</a> | |
| </div> | |
| <div class="social-icons"> | |
| <div class="social-icon">f</div> | |
| <div class="social-icon">t</div> | |
| <div class="social-icon">in</div> | |
| <div class="social-icon">ig</div> | |
| </div> | |
| <p>© 2023 NeonFlow. Built with <a href="https://huggingface.co/spaces/akhaliq/anycoder" style="color: var(--primary); text-decoration: none;">anycoder</a>. All rights reserved.</p> | |
| </div> | |
| </footer> | |
| <script> | |
| // Loader | |
| window.addEventListener('load', () => { | |
| setTimeout(() => { | |
| document.getElementById('loader').classList.add('hidden'); | |
| }, 1500); | |
| }); | |
| // Particles | |
| function createParticles() { | |
| const particlesContainer = document.getElementById('particles'); | |
| const particleCount = 50; | |
| for (let i = 0; i < particleCount; i++) { | |
| const particle = document.createElement('div'); | |
| particle.classList.add('particle'); | |
| const size = Math.random() * 4 + 2; | |
| const posX = Math.random() * 100; | |
| const posY = Math.random() * 100; | |
| const delay = Math.random() * 10; | |
| const duration = Math.random() * 20 + 10; | |
| particle.style.width = `${size}px`; | |
| particle.style.height = `${size}px`; | |
| particle.style.left = `${posX}%`; | |
| particle.style.top = `${posY}%`; | |
| particle.style.animationDelay = `${delay}s`; | |
| particle.style.animationDuration = `${duration}s`; | |
| particlesContainer.appendChild(particle); | |
| } | |
| } | |
| // Scroll Progress | |
| function updateScrollProgress() { | |
| const scrollProgress = document.getElementById('scrollProgress'); | |
| const scrollHeight = document.documentElement.scrollHeight - window.innerHeight; | |
| const scrolled = (window.scrollY / scrollHeight) * 100; | |
| scrollProgress.style.transform = `scaleX(${scrolled / 100})`; | |
| } | |
| // Animate Stats | |
| function animateStats() { | |
| const stats = document.querySelectorAll('.stat-number'); | |
| const observer = new IntersectionObserver((entries) => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| const target = entry.target; | |
| const targetValue = parseInt(target.getAttribute('data-target')); | |
| let currentValue = 0; | |
| const increment = targetValue / 100; | |
| const timer = setInterval(() => { | |
| currentValue += increment; | |
| if (currentValue >= targetValue) { | |
| target.textContent = targetValue; | |
| clearInterval(timer); | |
| } else { | |
| target.textContent = Math.floor(currentValue); | |
| } | |
| }, 20); | |
| observer.unobserve(target); | |
| } | |
| }); | |
| }, { threshold: 0.5 }); | |
| stats.forEach(stat => observer.observe(stat)); | |
| } | |
| // Testimonial Slider | |
| let currentSlide = 0; | |
| const slides = document.querySelectorAll('.testimonial-card'); | |
| const dots = document.querySelectorAll('.slider-dot'); | |
| const track = document.getElementById('testimonialTrack'); | |
| function updateSlider() { | |
| track.style.transform = `translateX(-${currentSlide * 100}%)`; | |
| dots.forEach((dot, index) => { | |
| dot.classList.toggle('active', index === currentSlide); | |
| }); | |
| } | |
| function nextSlide() { | |
| currentSlide = (currentSlide + 1) % slides.length; | |
| updateSlider(); | |
| } | |
| function prevSlide() { | |
| currentSlide = (currentSlide - 1 + slides.length) % slides.length; | |
| updateSlider(); | |
| } | |
| // Auto-slide | |
| setInterval(nextSlide, 5000); | |
| // Click dots to navigate | |
| dots.forEach((dot, index) => { | |
| dot.addEventListener('click', () => { | |
| currentSlide = index; | |
| updateSlider(); | |
| }); | |
| }); | |
| // Smooth scroll for navigation | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| const target = document.querySelector(this.getAttribute('href')); | |
| if (target) { | |
| target.scrollIntoView({ behavior: 'smooth' }); | |
| } | |
| }); | |
| }); | |
| // Parallax effect | |
| window.addEventListener('scroll', () => { | |
| const scrolled = window.scrollY; | |
| const parallax = document.querySelector('.hero'); | |
| parallax.style.transform = `translateY(${scrolled * 0.5}px)`; | |
| }); | |
| // Initialize everything | |
| document.addEventListener('DOMContentLoaded', () => { | |
| createParticles(); | |
| updateScrollProgress(); | |
| animateStats(); | |
| window.addEventListener('scroll', updateScrollProgress); | |
| // Add hover effects to interactive items | |
| const interactiveItems = document.querySelectorAll('.interactive-item'); | |
| interactiveItems.forEach(item => { | |
| item.addEventListener('mouseenter', () => { | |
| item.style.transform = 'scale(1.05)'; | |
| }); | |
| item.addEventListener('mouseleave', () => { | |
| item.style.transform = 'scale(1)'; | |
| }); | |
| }); | |
| }); | |
| // Add touch support for mobile | |
| let touchStartX = 0; | |
| let touchEndX = 0; | |
| document.addEventListener('touchstart', (e) => { | |
| touchStartX = e.changedTouches[0].screenX; | |
| }); | |
| document.addEventListener('touchend', (e) => { | |
| touchEndX = e.changedTouches[0].screenX; | |
| handleSwipe(); | |
| }); | |
| function handleSwipe() { | |
| if (touchEndX < touchStartX - 50) { | |
| nextSlide(); | |
| } | |
| if (touchEndX > touchStartX + 50) { | |
| prevSlide(); | |
| } | |
| } | |
| </script> | |
| </body> | |
| </html> |