Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Dynamic Portfolio Showcase</title> | |
| <style> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| :root { | |
| --primary: #667eea; | |
| --primary-dark: #5a67d8; | |
| --secondary: #f56565; | |
| --dark: #2d3748; | |
| --light: #f7fafc; | |
| --text: #4a5568; | |
| --gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| --shadow: 0 10px 30px rgba(0, 0, 0, 0.1); | |
| --shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.15); | |
| } | |
| body { | |
| font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; | |
| line-height: 1.6; | |
| color: var(--text); | |
| overflow-x: hidden; | |
| background: linear-gradient(to bottom, #f7fafc, #edf2f7); | |
| } | |
| /* Header */ | |
| header { | |
| background: white; | |
| box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); | |
| position: fixed; | |
| width: 100%; | |
| top: 0; | |
| z-index: 1000; | |
| transition: all 0.3s ease; | |
| } | |
| nav { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 1rem 2rem; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .logo { | |
| font-size: 1.5rem; | |
| font-weight: bold; | |
| background: var(--gradient); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| animation: gradientShift 3s ease infinite; | |
| } | |
| @keyframes gradientShift { | |
| 0%, 100% { filter: hue-rotate(0deg); } | |
| 50% { filter: hue-rotate(30deg); } | |
| } | |
| .nav-links { | |
| display: flex; | |
| gap: 2rem; | |
| list-style: none; | |
| } | |
| .nav-links a { | |
| color: var(--text); | |
| text-decoration: none; | |
| position: relative; | |
| transition: color 0.3s ease; | |
| font-weight: 500; | |
| } | |
| .nav-links a::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: -5px; | |
| left: 0; | |
| width: 0; | |
| height: 2px; | |
| background: var(--gradient); | |
| transition: width 0.3s ease; | |
| } | |
| .nav-links a:hover::after { | |
| width: 100%; | |
| } | |
| .nav-links a:hover { | |
| color: var(--primary); | |
| } | |
| .anycoder-link { | |
| color: var(--primary) ; | |
| font-weight: 600; | |
| } | |
| /* Hero Section */ | |
| .hero { | |
| margin-top: 80px; | |
| padding: 4rem 2rem; | |
| min-height: 60vh; | |
| display: flex; | |
| align-items: center; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .hero::before { | |
| content: ''; | |
| position: absolute; | |
| top: -50%; | |
| right: -10%; | |
| width: 600px; | |
| height: 600px; | |
| background: var(--gradient); | |
| border-radius: 50%; | |
| opacity: 0.1; | |
| animation: float 20s ease-in-out infinite; | |
| } | |
| @keyframes float { | |
| 0%, 100% { transform: translateY(0) rotate(0deg); } | |
| 50% { transform: translateY(-30px) rotate(180deg); } | |
| } | |
| .hero-content { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 4rem; | |
| align-items: center; | |
| position: relative; | |
| z-index: 1; | |
| } | |
| .hero-text h1 { | |
| font-size: 3rem; | |
| margin-bottom: 1rem; | |
| background: var(--gradient); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| animation: fadeInUp 0.8s ease; | |
| } | |
| .hero-text p { | |
| font-size: 1.2rem; | |
| margin-bottom: 2rem; | |
| color: var(--text); | |
| animation: fadeInUp 0.8s ease 0.2s both; | |
| } | |
| .cta-buttons { | |
| display: flex; | |
| gap: 1rem; | |
| animation: fadeInUp 0.8s ease 0.4s both; | |
| } | |
| .btn { | |
| padding: 0.8rem 2rem; | |
| border-radius: 50px; | |
| text-decoration: none; | |
| font-weight: 600; | |
| transition: all 0.3s ease; | |
| display: inline-block; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .btn-primary { | |
| background: var(--gradient); | |
| color: white; | |
| border: none; | |
| box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4); | |
| } | |
| .btn-primary:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 6px 20px rgba(102, 126, 234, 0.5); | |
| } | |
| .btn-secondary { | |
| background: white; | |
| color: var(--primary); | |
| border: 2px solid var(--primary); | |
| } | |
| .btn-secondary:hover { | |
| background: var(--primary); | |
| color: white; | |
| transform: translateY(-2px); | |
| } | |
| .hero-visual { | |
| position: relative; | |
| animation: fadeInUp 0.8s ease 0.6s both; | |
| } | |
| .floating-card { | |
| background: white; | |
| border-radius: 20px; | |
| padding: 2rem; | |
| box-shadow: var(--shadow-lg); | |
| position: relative; | |
| transition: transform 0.3s ease; | |
| } | |
| .floating-card:hover { | |
| transform: translateY(-10px); | |
| } | |
| .card-stats { | |
| display: grid; | |
| grid-template-columns: repeat(3, 1fr); | |
| gap: 1rem; | |
| margin-top: 1rem; | |
| } | |
| .stat { | |
| text-align: center; | |
| padding: 1rem; | |
| background: linear-gradient(135deg, #667eea15, #764ba215); | |
| border-radius: 10px; | |
| transition: all 0.3s ease; | |
| } | |
| .stat:hover { | |
| transform: scale(1.05); | |
| background: linear-gradient(135deg, #667eea25, #764ba225); | |
| } | |
| .stat-number { | |
| font-size: 1.5rem; | |
| font-weight: bold; | |
| color: var(--primary); | |
| } | |
| .stat-label { | |
| font-size: 0.9rem; | |
| color: var(--text); | |
| } | |
| /* Features Section */ | |
| .features { | |
| padding: 4rem 2rem; | |
| background: white; | |
| } | |
| .container { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| } | |
| .section-title { | |
| text-align: center; | |
| font-size: 2.5rem; | |
| margin-bottom: 3rem; | |
| background: var(--gradient); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| .features-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | |
| gap: 2rem; | |
| } | |
| .feature-card { | |
| background: linear-gradient(135deg, #f7fafc, #edf2f7); | |
| padding: 2rem; | |
| border-radius: 15px; | |
| text-align: center; | |
| transition: all 0.3s ease; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .feature-card::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 4px; | |
| background: var(--gradient); | |
| transform: scaleX(0); | |
| transition: transform 0.3s ease; | |
| } | |
| .feature-card:hover::before { | |
| transform: scaleX(1); | |
| } | |
| .feature-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: var(--shadow); | |
| } | |
| .feature-icon { | |
| width: 60px; | |
| height: 60px; | |
| margin: 0 auto 1rem; | |
| background: var(--gradient); | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 1.5rem; | |
| color: white; | |
| } | |
| .feature-title { | |
| font-size: 1.2rem; | |
| margin-bottom: 0.5rem; | |
| color: var(--dark); | |
| } | |
| .feature-description { | |
| color: var(--text); | |
| line-height: 1.6; | |
| } | |
| /* Interactive Section */ | |
| .interactive { | |
| padding: 4rem 2rem; | |
| background: linear-gradient(135deg, #667eea10, #764ba210); | |
| } | |
| .color-palette { | |
| display: flex; | |
| justify-content: center; | |
| gap: 1rem; | |
| margin-bottom: 2rem; | |
| flex-wrap: wrap; | |
| } | |
| .color-box { | |
| width: 80px; | |
| height: 80px; | |
| border-radius: 10px; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .color-box::after { | |
| content: '✓'; | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%) scale(0); | |
| color: white; | |
| font-size: 2rem; | |
| transition: transform 0.3s ease; | |
| } | |
| .color-box.selected::after { | |
| transform: translate(-50%, -50%) scale(1); | |
| } | |
| .color-box:hover { | |
| transform: scale(1.1) rotate(5deg); | |
| } | |
| .demo-box { | |
| width: 100%; | |
| max-width: 600px; | |
| margin: 0 auto; | |
| height: 200px; | |
| border-radius: 15px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: white; | |
| font-size: 1.5rem; | |
| font-weight: bold; | |
| transition: all 0.5s ease; | |
| box-shadow: var(--shadow-lg); | |
| } | |
| /* Footer */ | |
| footer { | |
| background: var(--dark); | |
| color: white; | |
| padding: 3rem 2rem 1rem; | |
| margin-top: 4rem; | |
| } | |
| .footer-content { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); | |
| gap: 2rem; | |
| margin-bottom: 2rem; | |
| } | |
| .footer-section h3 { | |
| margin-bottom: 1rem; | |
| color: white; | |
| } | |
| .footer-section a { | |
| color: #cbd5e0; | |
| text-decoration: none; | |
| display: block; | |
| margin-bottom: 0.5rem; | |
| transition: color 0.3s ease; | |
| } | |
| .footer-section a:hover { | |
| color: var(--primary); | |
| } | |
| .footer-bottom { | |
| text-align: center; | |
| padding-top: 2rem; | |
| border-top: 1px solid #4a5568; | |
| color: #cbd5e0; | |
| } | |
| /* Animations */ | |
| @keyframes fadeInUp { | |
| from { | |
| opacity: 0; | |
| transform: translateY(30px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| /* Responsive Design */ | |
| @media (max-width: 768px) { | |
| .nav-links { | |
| display: none; | |
| } | |
| .hero-content { | |
| grid-template-columns: 1fr; | |
| text-align: center; | |
| } | |
| .hero-text h1 { | |
| font-size: 2rem; | |
| } | |
| .cta-buttons { | |
| justify-content: center; | |
| } | |
| .card-stats { | |
| grid-template-columns: 1fr; | |
| } | |
| .features-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |
| /* Scroll animations */ | |
| .scroll-reveal { | |
| opacity: 0; | |
| transform: translateY(30px); | |
| transition: all 0.8s ease; | |
| } | |
| .scroll-reveal.active { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| /* Loading animation */ | |
| .loader { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: white; | |
| 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: 50px; | |
| height: 50px; | |
| border: 4px solid #f3f3f3; | |
| border-top: 4px solid var(--primary); | |
| border-radius: 50%; | |
| animation: spin 1s linear infinite; | |
| } | |
| @keyframes spin { | |
| 0% { transform: rotate(0deg); } | |
| 100% { transform: rotate(360deg); } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Loading Screen --> | |
| <div class="loader" id="loader"> | |
| <div class="loader-circle"></div> | |
| </div> | |
| <!-- Header --> | |
| <header id="header"> | |
| <nav> | |
| <div class="logo">Portfolio Pro</div> | |
| <ul class="nav-links"> | |
| <li><a href="#home">Home</a></li> | |
| <li><a href="#features">Features</a></li> | |
| <li><a href="#interactive">Interactive</a></li> | |
| <li><a href="#contact">Contact</a></li> | |
| <li><a href="https://huggingface.co/spaces/akhaliq/anycoder" class="anycoder-link" target="_blank">Built with anycoder</a></li> | |
| </ul> | |
| </nav> | |
| </header> | |
| <!-- Hero Section --> | |
| <section class="hero" id="home"> | |
| <div class="hero-content"> | |
| <div class="hero-text"> | |
| <h1>Welcome to Innovation</h1> | |
| <p>Experience the future of web development with cutting-edge design, seamless interactions, and responsive layouts that adapt to any device.</p> | |
| <div class="cta-buttons"> | |
| <a href="#features" class="btn btn-primary">Explore Features</a> | |
| <a href="#interactive" class="btn btn-secondary">Try Demo</a> | |
| </div> | |
| </div> | |
| <div class="hero-visual"> | |
| <div class="floating-card"> | |
| <h3>Live Statistics</h3> | |
| <div class="card-stats"> | |
| <div class="stat"> | |
| <div class="stat-number" data-target="150">0</div> | |
| <div class="stat-label">Projects</div> | |
| </div> | |
| <div class="stat"> | |
| <div class="stat-number" data-target="50">0</div> | |
| <div class="stat-label">Clients</div> | |
| </div> | |
| <div class="stat"> | |
| <div class="stat-number" data-target="98">0</div> | |
| <div class="stat-label">Success %</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Features Section --> | |
| <section class="features" id="features"> | |
| <div class="container"> | |
| <h2 class="section-title scroll-reveal">Amazing Features</h2> | |
| <div class="features-grid"> | |
| <div class="feature-card scroll-reveal"> | |
| <div class="feature-icon">⚡</div> | |
| <h3 class="feature-title">Lightning Fast</h3> | |
| <p class="feature-description">Optimized performance with blazing fast load times and smooth animations.</p> | |
| </div> | |
| <div class="feature-card scroll-reveal"> | |
| <div class="feature-icon">📱</div> | |
| <h3 class="feature-title">Fully Responsive</h3> | |
| <p class="feature-description">Perfectly adapted for all devices, from mobile phones to desktop computers.</p> | |
| </div> | |
| <div class="feature-card scroll-reveal"> | |
| <div class="feature-icon">🎨</div> | |
| <h3 class="feature-title">Modern Design</h3> | |
| <p class="feature-description">Clean, elegant interfaces with the latest design trends and best practices.</p> | |
| </div> | |
| <div class="feature-card scroll-reveal"> | |
| <div class="feature-icon">🔧</div> | |
| <h3 class="feature-title">Easy to Customize</h3> | |
| <p class="feature-description">Flexible components and modular structure for easy customization.</p> | |
| </div> | |
| <div class="feature-card scroll-reveal"> | |
| <div class="feature-icon">🚀</div> | |
| <h3 class="feature-title">SEO Optimized</h3> | |
| <p class="feature-description">Built with SEO best practices to help your content rank higher.</p> | |
| </div> | |
| <div class="feature-card scroll-reveal"> | |
| <div class="feature-icon">🛡️</div> | |
| <h3 class="feature-title">Secure & Reliable</h3> | |
| <p class="feature-description">Robust security measures and reliable performance you can trust.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Interactive Section --> | |
| <section class="interactive" id="interactive"> | |
| <div class="container"> | |
| <h2 class="section-title scroll-reveal">Interactive Color Palette</h2> | |
| <p style="text-align: center; margin-bottom: 2rem;">Click on colors to change the demo box background!</p> | |
| <div class="color-palette scroll-reveal"> | |
| <div class="color-box" style="background: linear-gradient(135deg, #667eea, #764ba2);" data-color="linear-gradient(135deg, #667eea, #764ba2)"></div> | |
| <div class="color-box" style="background: linear-gradient(135deg, #f093fb, #f5576c);" data-color="linear-gradient(135deg, #f093fb, #f5576c)"></div> | |
| <div class="color-box" style="background: linear-gradient(135deg, #4facfe, #00f2fe);" data-color="linear-gradient(135deg, #4facfe, #00f2fe)"></div> | |
| <div class="color-box" style="background: linear-gradient(135deg, #43e97b, #38f9d7);" data-color="linear-gradient(135deg, #43e97b, #38f9d7)"></div> | |
| <div class="color-box" style="background: linear-gradient(135deg, #fa709a, #fee140);" data-color="linear-gradient(135deg, #fa709a, #fee140)"></div> | |
| <div class="color-box" style="background: linear-gradient(135deg, #30cfd0, #330867);" data-color="linear-gradient(135deg, #30cfd0, #330867)"></div> | |
| </div> | |
| <div class="demo-box scroll-reveal" id="demoBox"> | |
| Dynamic Color Change | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer id="contact"> | |
| <div class="footer-content"> | |
| <div class="footer-section"> | |
| <h3>About</h3> | |
| <p>Creating beautiful, functional web experiences with modern technologies.</p> | |
| </div> | |
| <div class="footer-section"> | |
| <h3>Quick Links</h3> | |
| <a href="#home">Home</a> | |
| <a href="#features">Features</a> | |
| <a href="#interactive">Interactive</a> | |
| <a href="#contact">Contact</a> | |
| </div> | |
| <div class="footer-section"> | |
| <h3>Resources</h3> | |
| <a href="#">Documentation</a> | |
| <a href="#">Support</a> | |
| <a href="#">Blog</a> | |
| <a href="#">Community</a> | |
| </div> | |
| <div class="footer-section"> | |
| <h3>Connect</h3> | |
| <a href="#">Twitter</a> | |
| <a href="#">GitHub</a> | |
| <a href="#">LinkedIn</a> | |
| <a href="#">Email</a> | |
| </div> | |
| </div> | |
| <div class="footer-bottom"> | |
| <p>© 2024 Portfolio Pro. All rights reserved. | Built with passion and modern web technologies.</p> | |
| </div> | |
| </footer> | |
| <script> | |
| // Remove loader after page loads | |
| window.addEventListener('load', () => { | |
| setTimeout(() => { | |
| document.getElementById('loader').classList.add('hidden'); | |
| }, 1000); | |
| }); | |
| // Smooth scrolling for navigation links | |
| 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', | |
| block: 'start' | |
| }); | |
| } | |
| }); | |
| }); | |
| // Header scroll effect | |
| let lastScroll = 0; | |
| window.addEventListener('scroll', () => { | |
| const header = document.getElementById('header'); | |
| const currentScroll = window.pageYOffset; | |
| if (currentScroll > 100) { | |
| header.style.boxShadow = '0 4px 20px rgba(0, 0, 0, 0.1)'; | |
| header.style.background = 'rgba(255, 255, 255, 0.95)'; | |
| header.style.backdropFilter = 'blur(10px)'; | |
| } else { | |
| header.style.boxShadow = '0 2px 10px rgba(0, 0, 0, 0.05)'; | |
| header.style.background = 'white'; | |
| header.style.backdropFilter = 'none'; | |
| } | |
| lastScroll = currentScroll; | |
| }); | |
| // Animated counter for statistics | |
| const counters = document.querySelectorAll('.stat-number'); | |
| const speed = 200; | |
| const animateCounters = () => { | |
| counters.forEach(counter => { | |
| const animate = () => { | |
| const target = +counter.getAttribute('data-target'); | |
| const count = +counter.innerText; | |
| const increment = target / speed; | |
| if (count < target) { | |
| counter.innerText = Math.ceil(count + increment); | |
| setTimeout(animate, 10); | |
| } else { | |
| counter.innerText = target; | |
| } | |
| }; | |
| animate(); | |
| }); | |
| }; | |
| // Trigger counter animation when in viewport | |
| const observerOptions = { | |
| threshold: 0.5 | |
| }; | |
| const observer = new IntersectionObserver((entries) => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| animateCounters(); | |
| observer.unobserve(entry.target); | |
| } | |
| }); | |
| }, observerOptions); | |
| const statsSection = document.querySelector('.card-stats'); | |
| if (statsSection) { | |
| observer.observe(statsSection); | |
| } | |
| // Scroll reveal animation | |
| const scrollRevealElements = document.querySelectorAll('.scroll-reveal'); | |
| const scrollRevealObserver = new IntersectionObserver((entries) => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| entry.target.classList.add('active'); | |
| } | |
| }); | |
| }, { | |
| threshold: 0.1 | |
| }); | |
| scrollRevealElements.forEach(element => { | |
| scrollRevealObserver.observe(element); | |
| }); | |
| // Interactive color palette | |
| const colorBoxes = document.querySelectorAll('.color-box'); | |
| const demoBox = document.getElementById('demoBox'); | |
| colorBoxes.forEach(box => { | |
| box.addEventListener('click', function() { | |
| // Remove selected class from all boxes | |
| colorBoxes.forEach(b => b.classList.remove('selected')); | |
| // Add selected class to clicked box | |
| this.classList.add('selected'); | |
| // Change demo box background | |
| const color = this.getAttribute('data-color'); | |
| demoBox.style.background = color; | |
| // Add animation effect | |
| demoBox.style.transform = 'scale(0.95)'; | |
| setTimeout(() => { | |
| demoBox.style.transform = 'scale(1)'; | |
| }, 200); | |
| }); | |
| }); | |
| // Parallax effect for hero section | |
| window.addEventListener('scroll', () => { | |
| const scrolled = window.pageYOffset; | |
| const hero = document.querySelector('.hero'); | |
| if (hero) { | |
| hero.style.transform = `translateY(${scrolled * 0.5}px)`; | |
| } | |
| }); | |
| // Add interactive hover effect to feature cards | |
| const featureCards = document.querySelectorAll('.feature-card'); | |
| featureCards.forEach(card => { | |
| card.addEventListener('mouseenter', function() { | |
| this.style.transform = 'translateY(-10px) rotateX(5deg)'; | |
| }); | |
| card.addEventListener('mouseleave', function() { | |
| this.style.transform = 'translateY(0) rotateX(0)'; | |
| }); | |
| }); | |
| // Dynamic time display in footer | |
| function updateTime() { | |
| const now = new Date(); | |
| const timeString = now.toLocaleTimeString(); | |
| // You can add this display somewhere if needed | |
| } | |
| setInterval(updateTime, 1000); | |
| // Add keyboard navigation | |
| document.addEventListener('keydown', (e) => { | |
| if (e.key === 'Escape') { | |
| // Close any open modals or reset states | |
| colorBoxes.forEach(box => box.classList.remove('selected')); | |
| demoBox.style.background = 'linear-gradient(135deg, #667eea, #764ba2)'; | |
| } | |
| }); | |
| // Performance optimization: Throttle scroll events | |
| let ticking = false; | |
| function updateOnScroll() { | |
| if (!ticking) { | |
| window.requestAnimationFrame(() => { | |
| // Scroll-related updates here | |
| ticking = false; | |
| }); | |
| ticking = true; | |
| } | |
| } | |
| window.addEventListener('scroll', updateOnScroll); | |
| </script> | |
| </body> | |
| </html> |