Horizontal accordions are a versatile and engaging way to present content in a compact space. They allow users to interact with the interface, revealing more information with a simple click or hover.
In this article, we will explore 10 stunning examples of horizontal accordions that can inspire your next web design project. Each example showcases unique features and creative implementations that enhance user experience.
CODE1
Here's the code:
CODETEXT1
CODE2
Here's the code:
CODETEXT2
CODE3
Here's the code:
CODETEXT3
CODE4
Here's the code:
CODETEXT4
CODE5
Here's the code:
CODETEXT5
Designers and developers love Subframe for its drag-and-drop interface and intuitive, responsive canvas. Create pixel-perfect horizontal accordions effortlessly, ensuring a seamless user experience every time.
Join the community of satisfied users and start for free today!
CODE6
Here's the code:
CODETEXT6
CODE7
Here's the code:
CODETEXT7
CODE8
Here's the code:
CODETEXT8
CODE9
Here's the code:
CODETEXT9
CODE10
Here's the code:
CODETEXT10
Ready to elevate your UI design game? With Subframe, you can create pixel-perfect interfaces, including stunning horizontal accordions, in no time. Experience unparalleled efficiency with our drag-and-drop editor.
Don't wait! Start for free and begin designing immediately. Join the community of designers who trust Subframe for their UI needs.
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>E-commerce Product Showcase</title> <style> @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Poppins', sans-serif; background-color: #f8f9fa; color: #212529; display: flex; align-items: center; justify-content: center; min-height: 100vh; overflow-x: hidden; padding: 0 15px; } .accordion-container { width: 100%; max-width: 700px; height: 500px; display: flex; position: relative; border-radius: 16px; overflow: hidden; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1); } .panel { flex: 1; height: 100%; position: relative; transition: flex 0.6s cubic-bezier(0.23, 1, 0.32, 1); overflow: hidden; cursor: pointer; border-right: 1px solid rgba(255, 255, 255, 0.1); } .panel:last-child { border-right: none; } .panel.active { flex: 10; cursor: default; box-shadow: 0 0 25px rgba(0, 0, 0, 0.15); z-index: 10; } .panel-img { width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0; z-index: 1; transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1); filter: brightness(0.8); } .panel.active .panel-img { transform: scale(1.05); filter: brightness(0.9); } .panel-content { position: absolute; bottom: 0; left: 0; right: 0; z-index: 2; padding: 20px; color: white; background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent); opacity: 0; transform: translateY(20px); transition: opacity 0.3s ease, transform 0.5s ease; } .panel.active .panel-content { opacity: 1; transform: translateY(0); } .panel-title { font-size: 0.9rem; font-weight: 600; text-transform: uppercase; writing-mode: vertical-rl; text-orientation: mixed; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(180deg); z-index: 3; color: white; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); transition: opacity 0.3s ease, transform 0.5s ease; white-space: nowrap; } .panel.active .panel-title { opacity: 0; } .accent-color { position: absolute; bottom: 0; left: 0; height: 5px; width: 100%; z-index: 3; transition: height 0.5s ease; } .panel.active .accent-color { height: 10px; } h2 { font-size: 1.8rem; margin-bottom: 8px; font-weight: 700; } p { font-size: 0.95rem; margin-bottom: 15px; line-height: 1.5; opacity: 0.9; } .btn { display: inline-block; padding: 10px 20px; background-color: white; color: #212529; text-decoration: none; border-radius: 30px; font-weight: 500; font-size: 0.85rem; transition: all 0.3s ease; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); position: relative; overflow: hidden; } .btn::after { content: ''; position: absolute; width: 0; height: 100%; top: 0; left: 0; background: rgba(255, 255, 255, 0.2); transition: width 0.3s ease; } .btn:hover::after { width: 100%; } .product-count { background: rgba(255, 255, 255, 0.2); padding: 5px 10px; border-radius: 20px; font-size: 0.75rem; display: inline-block; margin-bottom: 15px; } .panel:nth-child(1) .accent-color { background-color: #FF6B6B; } .panel:nth-child(2) .accent-color { background-color: #4ECDC4; } .panel:nth-child(3) .accent-color { background-color: #FFD166; } .panel:nth-child(4) .accent-color { background-color: #6A0572; } .panel:nth-child(5) .accent-color { background-color: #1A535C; } .panel:nth-child(1) .btn { color: #FF6B6B; } .panel:nth-child(2) .btn { color: #4ECDC4; } .panel:nth-child(3) .btn { color: #FFD166; } .panel:nth-child(4) .btn { color: #6A0572; } .panel:nth-child(5) .btn { color: #1A535C; } .product-feature { display: flex; align-items: center; margin-bottom: 12px; } .product-feature i { margin-right: 8px; font-size: 18px; } .product-feature span { font-size: 0.85rem; } @media (max-width: 768px) { .accordion-container { height: 400px; } h2 { font-size: 1.5rem; } p { font-size: 0.85rem; } .panel-title { font-size: 0.75rem; } } @media (max-width: 480px) { .accordion-container { height: 350px; } h2 { font-size: 1.3rem; } .panel-content { padding: 15px; } } /* Animation for newly added panels */ @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .panel.active .product-feature { animation: fadeIn 0.5s ease forwards; opacity: 0; } .panel.active .product-feature:nth-child(1) { animation-delay: 0.2s; } .panel.active .product-feature:nth-child(2) { animation-delay: 0.3s; } .panel.active .product-feature:nth-child(3) { animation-delay: 0.4s; } /* Animated dot indicators */ .dot-indicators { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); display: flex; z-index: 20; } .dot { width: 8px; height: 8px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.5); margin: 0 5px; transition: all 0.3s ease; } .dot.active { width: 20px; border-radius: 4px; background-color: white; } </style> </head> <body> <div class="accordion-container"> <div class="panel active"> <div class="accent-color"></div> <img src="https://images.unsplash.com/photo-1523275335684-37898b6baf30?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1399&q=80" alt="Modern Gadgets" class="panel-img"> <span class="panel-title">GADGETS</span> <div class="panel-content"> <div class="product-count">143 products</div> <h2>Modern Tech Essentials</h2> <p>Discover our curated collection of premium gadgets that blend innovation with everyday functionality.</p> <div class="product-feature"> <i>✓</i> <span>Noise-cancelling earbuds with 36hr battery life</span> </div> <div class="product-feature"> <i>✓</i> <span>Ultra-thin smartwatches with health tracking</span> </div> <div class="product-feature"> <i>✓</i> <span>Portable chargers with fast-charging tech</span> </div> <a href="#" class="btn">Explore Collection</a> </div> </div> <div class="panel"> <div class="accent-color"></div> <img src="https://images.unsplash.com/photo-1543512214-318c7553f230?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" alt="Home Essentials" class="panel-img"> <span class="panel-title">HOME</span> <div class="panel-content"> <div class="product-count">217 products</div> <h2>Refined Living Spaces</h2> <p>Transform your home with our designer-approved collection of functional yet elegant home furnishings.</p> <div class="product-feature"> <i>✓</i> <span>Modular furniture for compact spaces</span> </div> <div class="product-feature"> <i>✓</i> <span>Smart lighting with voice control</span> </div> <div class="product-feature"> <i>✓</i> <span>Eco-friendly kitchen accessories</span> </div> <a href="#" class="btn">Explore Collection</a> </div> </div> <div class="panel"> <div class="accent-color"></div> <img src="https://images.unsplash.com/photo-1490481651871-ab68de25d43d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Fashion" class="panel-img"> <span class="panel-title">FASHION</span> <div class="panel-content"> <div class="product-count">329 products</div> <h2>Sustainable Style Statements</h2> <p>Our ethically-sourced fashion pieces combine timeless aesthetics with modern, versatile styling options.</p> <div class="product-feature"> <i>✓</i> <span>Capsule collections from emerging designers</span> </div> <div class="product-feature"> <i>✓</i> <span>Organic cotton basics with minimal footprint</span> </div> <div class="product-feature"> <i>✓</i> <span>Season-transition pieces for versatile styling</span> </div> <a href="#" class="btn">Explore Collection</a> </div> </div> <div class="panel"> <div class="accent-color"></div> <img src="https://images.unsplash.com/photo-1611930022073-84f31e84a127?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" alt="Beauty" class="panel-img"> <span class="panel-title">BEAUTY</span> <div class="panel-content"> <div class="product-count">184 products</div> <h2>Clean Beauty Revolution</h2> <p>High-performance, non-toxic formulations that nurture your skin while respecting our planet.</p> <div class="product-feature"> <i>✓</i> <span>Vegan skincare with clinical backing</span> </div> <div class="product-feature"> <i>✓</i> <span>Refillable packaging to reduce waste</span> </div> <div class="product-feature"> <i>✓</i> <span>Multi-use products for minimalist routines</span> </div> <a href="#" class="btn">Explore Collection</a> </div> </div> <div class="panel"> <div class="accent-color"></div> <img src="https://images.unsplash.com/photo-1530143584546-02191bc84eb5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" alt="Outdoor" class="panel-img"> <span class="panel-title">OUTDOOR</span> <div class="panel-content"> <div class="product-count">156 products</div> <h2>Adventure Essentials</h2> <p>Engineered gear for outdoor enthusiasts who demand performance without compromise.</p> <div class="product-feature"> <i>✓</i> <span>Ultralight camping gear for backpackers</span> </div> <div class="product-feature"> <i>✓</i> <span>All-weather apparel with 4-season versatility</span> </div> <div class="product-feature"> <i>✓</i> <span>Sustainable materials with lifetime warranties</span> </div> <a href="#" class="btn">Explore Collection</a> </div> </div> <div class="dot-indicators"> <span class="dot active"></span> <span class="dot"></span> <span class="dot"></span> <span class="dot"></span> <span class="dot"></span> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { const panels = document.querySelectorAll('.panel'); const dots = document.querySelectorAll('.dot'); panels.forEach((panel, index) => { panel.addEventListener('click', () => { removeActiveClasses(); panel.classList.add('active'); updateDots(index); }); }); function removeActiveClasses() { panels.forEach(panel => { panel.classList.remove('active'); }); } function updateDots(activeIndex) { dots.forEach((dot, index) => { dot.classList.remove('active'); if (index === activeIndex) { dot.classList.add('active'); } }); } // Add hover animation to buttons const buttons = document.querySelectorAll('.btn'); buttons.forEach(button => { button.addEventListener('mouseenter', function() { this.style.transform = 'translateY(-3px)'; this.style.boxShadow = '0 6px 15px rgba(0, 0, 0, 0.15)'; }); button.addEventListener('mouseleave', function() { this.style.transform = 'translateY(0)'; this.style.boxShadow = '0 4px 12px rgba(0, 0, 0, 0.1)'; }); // Prevent navigation button.addEventListener('click', function(e) { e.preventDefault(); const ripple = document.createElement('span'); ripple.style.position = 'absolute'; ripple.style.borderRadius = '50%'; ripple.style.backgroundColor = 'rgba(255, 255, 255, 0.7)'; ripple.style.width = '100px'; ripple.style.height = '100px'; ripple.style.transform = 'translate(-50%, -50%) scale(0)'; ripple.style.animation = 'ripple 0.6s linear'; button.appendChild(ripple); setTimeout(() => { ripple.remove(); }, 600); }); }); // Auto-rotate panels every 5 seconds let currentIndex = 0; function autoRotate() { currentIndex = (currentIndex + 1) % panels.length; removeActiveClasses(); panels[currentIndex].classList.add('active'); updateDots(currentIndex); } let intervalId = setInterval(autoRotate, 5000); // Stop auto-rotation when user interacts document.querySelector('.accordion-container').addEventListener('mouseenter', () => { clearInterval(intervalId); }); // Resume auto-rotation when user leaves document.querySelector('.accordion-container').addEventListener('mouseleave', () => { intervalId = setInterval(autoRotate, 5000); }); // Add keyframe animation for ripple effect const style = document.createElement('style'); style.textContent = ` @keyframes ripple { to { transform: translate(-50%, -50%) scale(3); opacity: 0; } } `; document.head.appendChild(style); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Portfolio Accordion</title> <style> :root { --bg-color: #0f0f0f; --text-color: #e6e6e6; --accent-color: #2a2a2a; --hover-color: #363636; --highlight-color: #525252; --transition-time: 0.5s; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; } body { background-color: var(--bg-color); color: var(--text-color); display: flex; align-items: center; justify-content: center; min-height: 100vh; overflow: hidden; padding: 20px; } .portfolio-container { width: 660px; height: 660px; display: flex; flex-direction: column; overflow: hidden; position: relative; } .header { padding: 1.5rem 0; text-align: center; position: relative; z-index: 10; } .header h1 { font-size: 1.8rem; font-weight: 700; letter-spacing: -0.03em; margin-bottom: 0.5rem; position: relative; display: inline-block; } .header h1::after { content: ''; position: absolute; width: 40px; height: 3px; background-color: var(--highlight-color); bottom: -8px; left: 50%; transform: translateX(-50%); transition: width 0.5s ease; } .header:hover h1::after { width: 100%; } .header p { font-size: 0.85rem; opacity: 0.7; max-width: 80%; margin: 1rem auto 0; line-height: 1.5; } .accordion { display: flex; width: 100%; height: 460px; margin-top: 1rem; } .accordion-section { position: relative; flex: 1; overflow: hidden; transition: flex var(--transition-time) cubic-bezier(0.25, 1, 0.5, 1); background-color: var(--accent-color); border-radius: 8px; margin: 0 4px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); display: flex; align-items: flex-end; cursor: pointer; } .accordion-section:first-child { margin-left: 0; } .accordion-section:last-child { margin-right: 0; } .accordion-section:hover { flex: 6; background-color: var(--hover-color); } .accordion-section:hover .section-content { opacity: 1; transform: translateY(0); } .accordion-section:hover .title-vertical { opacity: 0; } .accordion-section:hover .project-img { opacity: 0.2; transform: scale(1.05); } .accordion-section:hover .project-tags span { opacity: 1; transform: translateY(0); } .project-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.1; transition: all var(--transition-time) ease; transform: scale(1.2); } .title-vertical { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-90deg); white-space: nowrap; font-size: 1.2rem; font-weight: 600; letter-spacing: 1px; opacity: 1; transition: opacity var(--transition-time) ease; text-transform: uppercase; } .section-content { padding: 1.5rem; width: 100%; z-index: 2; opacity: 0; transform: translateY(20px); transition: all var(--transition-time) ease; transition-delay: 0.1s; backdrop-filter: blur(5px); background: linear-gradient(to top, rgba(0,0,0,0.8), transparent); } .section-title { font-size: 1.4rem; font-weight: 700; margin-bottom: 0.5rem; position: relative; display: inline-block; } .section-description { font-size: 0.85rem; line-height: 1.5; margin-bottom: 1rem; opacity: 0.9; } .project-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 1rem; } .project-tags span { font-size: 0.7rem; padding: 4px 10px; background-color: rgba(255, 255, 255, 0.1); border-radius: 20px; opacity: 0; transform: translateY(10px); transition: all 0.3s ease; } .project-tags span:nth-child(1) { transition-delay: 0.1s; } .project-tags span:nth-child(2) { transition-delay: 0.15s; } .project-tags span:nth-child(3) { transition-delay: 0.2s; } .project-tags span:nth-child(4) { transition-delay: 0.25s; } .view-button { display: inline-block; margin-top: 1.2rem; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1px; padding: 8px 16px; background-color: transparent; border: 1px solid var(--text-color); color: var(--text-color); cursor: pointer; transition: all 0.3s ease; text-decoration: none; position: relative; overflow: hidden; } .view-button::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background-color: var(--text-color); transition: all 0.3s ease; z-index: -1; } .view-button:hover { color: var(--bg-color); } .view-button:hover::before { left: 0; } .floating-cursor { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--highlight-color); position: fixed; pointer-events: none; transform: translate(-50%, -50%); z-index: 999; transition: transform 0.1s ease, width 0.3s ease, height 0.3s ease, border-color 0.3s ease; mix-blend-mode: difference; } .floating-cursor.active { width: 60px; height: 60px; border-color: var(--text-color); } .contact-bar { display: flex; justify-content: center; align-items: center; margin-top: 1.5rem; gap: 20px; } .contact-item { display: flex; align-items: center; font-size: 0.85rem; opacity: 0.7; transition: opacity 0.3s ease; cursor: pointer; } .contact-item:hover { opacity: 1; } .contact-item svg { margin-right: 6px; width: 14px; height: 14px; } @media (max-width: 700px) { .portfolio-container { width: 100%; height: auto; } .accordion { flex-direction: column; height: auto; } .accordion-section { height: 80px; margin: 4px 0; align-items: center; justify-content: center; } .accordion-section:hover { height: 240px; } .title-vertical { transform: translate(-50%, -50%) rotate(0); } .header h1 { font-size: 1.5rem; } .section-content { padding: 1rem; } .section-title { font-size: 1.2rem; } .section-description { font-size: 0.8rem; max-height: 100px; overflow-y: auto; } } </style> </head> <body> <div class="floating-cursor"></div> <div class="portfolio-container"> <div class="header"> <h1>Mika Tanaka</h1> <p>Visual designer with a focus on minimalist aesthetics and thoughtful interactions that prioritize usability and user experience.</p> </div> <div class="accordion"> <div class="accordion-section"> <img src="https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1000&q=80" alt="Project image" class="project-img"> <h3 class="title-vertical">Void</h3> <div class="section-content"> <h3 class="section-title">Void Typography</h3> <p class="section-description">A minimalist exploration of negative space in type design. Created for the Tokyo Typography Exhibition, where it received the Innovation in Design award.</p> <div class="project-tags"> <span>Typography</span> <span>Branding</span> <span>Exhibition</span> </div> <a href="#" class="view-button">View Project</a> </div> </div> <div class="accordion-section"> <img src="https://images.unsplash.com/photo-1622979135225-d2ba269cf1ac?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1000&q=80" alt="Project image" class="project-img"> <h3 class="title-vertical">Mono</h3> <div class="section-content"> <h3 class="section-title">Mono Publication</h3> <p class="section-description">A quarterly magazine focused on minimal design principles. My role included art direction, layout design, and creating a cohesive system for over 120 pages.</p> <div class="project-tags"> <span>Editorial</span> <span>Art Direction</span> <span>Print</span> </div> <a href="#" class="view-button">View Project</a> </div> </div> <div class="accordion-section"> <img src="https://images.unsplash.com/photo-1616499370260-485b3e5ed3bc?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1000&q=80" alt="Project image" class="project-img"> <h3 class="title-vertical">Essence</h3> <div class="section-content"> <h3 class="section-title">Essence Motion System</h3> <p class="section-description">A motion design language created for a beauty brand's digital ecosystem. Focused on subtle animations that evoke feelings of calm and sophistication.</p> <div class="project-tags"> <span>Motion Design</span> <span>UX/UI</span> <span>Digital Brand</span> </div> <a href="#" class="view-button">View Project</a> </div> </div> <div class="accordion-section"> <img src="https://images.unsplash.com/photo-1612968081307-42acd365e7f7?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1000&q=80" alt="Project image" class="project-img"> <h3 class="title-vertical">Nomad</h3> <div class="section-content"> <h3 class="section-title">Nomad Workspaces</h3> <p class="section-description">Environmental design for a network of minimalist co-working spaces. The project included spatial design, wayfinding, and brand identity elements.</p> <div class="project-tags"> <span>Environmental</span> <span>Identity</span> <span>Wayfinding</span> <span>Spatial</span> </div> <a href="#" class="view-button">View Project</a> </div> </div> </div> <div class="contact-bar"> <div class="contact-item"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path> <polyline points="22,6 12,13 2,6"></polyline> </svg> <span>[email protected]</span> </div> <div class="contact-item"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M21 2H3v16h5v4l4-4h5l4-4V2z"></path> <path d="M10 8v4"></path> <path d="M14 8v4"></path> </svg> <span>@mikatanaka.design</span> </div> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { // Floating cursor effect const cursor = document.querySelector('.floating-cursor'); const buttons = document.querySelectorAll('.view-button, .contact-item, .accordion-section'); document.addEventListener('mousemove', function(e) { cursor.style.left = e.clientX + 'px'; cursor.style.top = e.clientY + 'px'; }); buttons.forEach(button => { button.addEventListener('mouseenter', function() { cursor.classList.add('active'); }); button.addEventListener('mouseleave', function() { cursor.classList.remove('active'); }); }); // Prevent actual form submission document.querySelectorAll('a, button').forEach(el => { el.addEventListener('click', function(e) { e.preventDefault(); }); }); // Add subtle animation to sections on load const sections = document.querySelectorAll('.accordion-section'); sections.forEach((section, index) => { setTimeout(() => { section.style.opacity = '1'; section.style.transform = 'translateY(0)'; }, 100 * index); }); // Ensure responsive behavior function handleResponsive() { if (window.innerWidth <= 700) { // Mobile specific behaviors document.querySelectorAll('.accordion-section').forEach(section => { section.addEventListener('click', function() { document.querySelectorAll('.accordion-section').forEach(s => { s.style.flex = '1'; if (s !== this) { s.querySelector('.section-content').style.opacity = '0'; } }); this.style.flex = '6'; }); }); } } handleResponsive(); window.addEventListener('resize', handleResponsive); // Make cursor disappear when leaving window document.addEventListener('mouseleave', function() { cursor.style.opacity = '0'; }); document.addEventListener('mouseenter', function() { cursor.style.opacity = '1'; }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>News Accordion</title> <style> :root { --primary: #0062FF; --secondary: #FF3A5E; --dark: #111827; --light: #F9FAFB; --transition: 0.45s cubic-bezier(0.65, 0, 0.35, 1); } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Segoe UI', Roboto, -apple-system, BlinkMacSystemFont, sans-serif; background-color: var(--light); color: var(--dark); display: flex; justify-content: center; align-items: center; min-height: 100vh; overflow-x: hidden; padding: 20px; } .container { width: 100%; max-width: 700px; margin: 0 auto; } .accordion { display: flex; width: 100%; height: 550px; position: relative; box-shadow: 0 15px 50px rgba(0, 0, 0, 0.12); border-radius: 12px; overflow: hidden; } .accordion-panel { position: relative; flex: 1; overflow: hidden; transition: flex var(--transition), background-size var(--transition); cursor: pointer; border-left: 1px solid rgba(255, 255, 255, 0.2); } .accordion-panel:first-child { border-left: none; } .accordion-panel.active { flex: 6; } .accordion-background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; transition: transform 0.8s ease, filter 0.5s ease; filter: brightness(0.7); z-index: 1; } .accordion-panel.active .accordion-background { transform: scale(1.05); filter: brightness(0.9); } .accordion-panel::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.7)); z-index: 2; } .accordion-panel.active::before { background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.85)); } .accordion-content { position: absolute; bottom: 0; left: 0; width: 100%; padding: 30px; z-index: 3; color: white; } .accordion-headline { font-size: 18px; font-weight: 700; margin-bottom: 10px; white-space: nowrap; transform: rotate(-90deg) translateX(calc(-100% - 35px)) translateY(-60px); transform-origin: 0 0; transition: transform var(--transition), opacity 0.3s ease; opacity: 1; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); } .accordion-panel.active .accordion-headline { transform: rotate(0) translateX(0) translateY(0); font-size: 24px; opacity: 1; } .accordion-summary { opacity: 0; transform: translateY(20px); transition: opacity 0.5s ease, transform 0.5s ease; font-weight: 400; line-height: 1.6; font-size: 16px; max-width: 500px; margin-top: 15px; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); } .accordion-panel.active .accordion-summary { opacity: 1; transform: translateY(0); transition-delay: 0.25s; } .accordion-meta { opacity: 0; transform: translateY(20px); transition: opacity 0.5s ease, transform 0.5s ease; margin-top: 20px; display: flex; align-items: center; font-size: 14px; } .accordion-panel.active .accordion-meta { opacity: 1; transform: translateY(0); transition-delay: 0.3s; } .timestamp { display: flex; align-items: center; } .timestamp::before { content: ''; display: inline-block; width: 6px; height: 6px; background-color: var(--secondary); border-radius: 50%; margin-right: 8px; } .category { display: inline-block; background-color: var(--primary); padding: 4px 10px; border-radius: 20px; margin-right: 15px; font-weight: 600; font-size: 12px; letter-spacing: 0.5px; text-transform: uppercase; } .read-more { display: inline-flex; align-items: center; margin-top: 20px; color: white; font-weight: 600; text-decoration: none; transition: transform 0.3s ease; opacity: 0; transform: translateY(20px); transition: opacity 0.5s ease, transform 0.5s ease; } .accordion-panel.active .read-more { opacity: 1; transform: translateY(0); transition-delay: 0.35s; } .read-more:hover { transform: translateX(5px); } .read-more::after { content: '→'; margin-left: 8px; transition: transform 0.3s ease; } .read-more:hover::after { transform: translateX(3px); } /* Pulse animation for the newest story */ @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 58, 94, 0.7); } 70% { box-shadow: 0 0 0 10px rgba(255, 58, 94, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 58, 94, 0); } } .breaking-news { position: absolute; top: 20px; left: 20px; z-index: 10; background-color: var(--secondary); color: white; font-size: 12px; font-weight: 700; padding: 6px 12px; border-radius: 4px; text-transform: uppercase; letter-spacing: 1px; animation: pulse 2s infinite; display: none; } .accordion-panel.active .breaking-news { display: block; } /* Responsive adjustments */ @media (max-width: 768px) { .accordion { flex-direction: column; height: 650px; } .accordion-panel { flex: 1; border-left: none; border-top: 1px solid rgba(255, 255, 255, 0.2); } .accordion-panel:first-child { border-top: none; } .accordion-panel.active { flex: 10; } .accordion-headline { transform: rotate(0) translateX(0) translateY(0); font-size: 18px; opacity: 1; } .accordion-panel.active .accordion-headline { font-size: 22px; } } @media (max-width: 480px) { .accordion { height: 580px; } .accordion-content { padding: 20px; } .accordion-panel.active .accordion-headline { font-size: 20px; } .accordion-summary { font-size: 14px; } } </style> </head> <body> <div class="container"> <div class="accordion"> <div class="accordion-panel active"> <div class="accordion-background" style="background-image: url('https://images.unsplash.com/photo-1524995997946-a1c2e315a42f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80')"></div> <div class="breaking-news">Breaking News</div> <div class="accordion-content"> <h2 class="accordion-headline">AI Revolution Transforms Healthcare Diagnostics</h2> <div class="accordion-meta"> <span class="category">Technology</span> <span class="timestamp">2 hours ago</span> </div> <p class="accordion-summary">New deep learning algorithms developed by medical researchers can now detect early signs of cancer with 97% accuracy, beating human pathologists. Hospitals across five major cities have begun implementing these systems, potentially saving thousands of lives through earlier interventions and reducing diagnostic costs by 60%.</p> <a href="#" class="read-more">Read full story</a> </div> </div> <div class="accordion-panel"> <div class="accordion-background" style="background-image: url('https://images.unsplash.com/photo-1614624532983-4ce03382d63d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1331&q=80')"></div> <div class="accordion-content"> <h2 class="accordion-headline">Global Climate Summit Ends with Unprecedented Agreement</h2> <div class="accordion-meta"> <span class="category">Politics</span> <span class="timestamp">8 hours ago</span> </div> <p class="accordion-summary">The 2023 Climate Summit concluded with 195 nations signing a binding treaty to reduce carbon emissions by 50% before 2030. For the first time, the agreement includes enforceable penalties for non-compliance and establishes a $300 billion climate fund specifically targeting infrastructure development in vulnerable regions.</p> <a href="#" class="read-more">Read full story</a> </div> </div> <div class="accordion-panel"> <div class="accordion-background" style="background-image: url('https://images.unsplash.com/photo-1579547945413-497e1b99dac0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80')"></div> <div class="accordion-content"> <h2 class="accordion-headline">Quantum Computing Breakthrough Solves Decades-Old Problem</h2> <div class="accordion-meta"> <span class="category">Science</span> <span class="timestamp">Yesterday</span> </div> <p class="accordion-summary">Scientists at MIT have achieved quantum supremacy by solving a protein-folding problem that would take traditional supercomputers 7,000 years to calculate. This breakthrough has immediate applications for drug discovery, with researchers already identifying three potential compounds that could effectively treat Alzheimer's disease.</p> <a href="#" class="read-more">Read full story</a> </div> </div> <div class="accordion-panel"> <div class="accordion-background" style="background-image: url('https://images.unsplash.com/photo-1516321497487-e288fb19713f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80')"></div> <div class="accordion-content"> <h2 class="accordion-headline">Tech Giants Face New Antitrust Regulations</h2> <div class="accordion-meta"> <span class="category">Business</span> <span class="timestamp">3 days ago</span> </div> <p class="accordion-summary">Five major tech companies will need to restructure operations following landmark antitrust legislation passed yesterday. The new Digital Markets Act prohibits self-preferencing practices and requires interoperability between platforms. Industry experts predict this could lead to the most significant restructuring of the tech landscape since the 1990s Microsoft case.</p> <a href="#" class="read-more">Read full story</a> </div> </div> <div class="accordion-panel"> <div class="accordion-background" style="background-image: url('https://images.unsplash.com/photo-1517649763962-0c623066013b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80')"></div> <div class="accordion-content"> <h2 class="accordion-headline">Artificial Coral Reefs Show Promising Marine Recovery</h2> <div class="accordion-meta"> <span class="category">Environment</span> <span class="timestamp">5 days ago</span> </div> <p class="accordion-summary">After three years of deployment, 3D-printed artificial coral reefs in the Gulf of Mexico have attracted over 200 species of marine life. The biodegradable structures, designed to mimic natural reef formations, dissolve harmlessly after supporting initial ecosystem establishment. Marine biologists report a 78% increase in fish populations within the reef zones.</p> <a href="#" class="read-more">Read full story</a> </div> </div> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { const panels = document.querySelectorAll('.accordion-panel'); panels.forEach(panel => { panel.addEventListener('click', () => { // Remove active class from all panels panels.forEach(p => p.classList.remove('active')); // Add active class to clicked panel panel.classList.add('active'); }); // Add hover effect panel.addEventListener('mouseenter', () => { if (!panel.classList.contains('active')) { panel.style.flex = '1.5'; } }); panel.addEventListener('mouseleave', () => { if (!panel.classList.contains('active')) { panel.style.flex = '1'; } }); }); // Auto-rotate through panels every 5 seconds let currentIndex = 0; function rotatePanel() { currentIndex = (currentIndex + 1) % panels.length; panels.forEach(p => p.classList.remove('active')); panels[currentIndex].classList.add('active'); } // Start auto-rotation but pause when user interacts const autoRotate = setInterval(rotatePanel, 5000); document.querySelector('.accordion').addEventListener('mouseenter', () => { clearInterval(autoRotate); }); // Add subtle animation to active panel background function animateBackgrounds() { const activePanel = document.querySelector('.accordion-panel.active'); if (activePanel) { const background = activePanel.querySelector('.accordion-background'); background.style.transform = 'scale(1.05)'; setTimeout(() => { background.style.transform = 'scale(1.03)'; }, 5000); } requestAnimationFrame(animateBackgrounds); } animateBackgrounds(); }); </script> </body> </html>
<html> <head> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; } body { background-color: #f7f9fc; color: #2c3e50; min-height: 100vh; display: flex; justify-content: center; align-items: center; overflow-x: hidden; padding: 20px; } .dashboard-wrapper { width: 100%; max-width: 680px; height: 660px; background: #fff; border-radius: 16px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06); overflow: hidden; display: flex; flex-direction: column; } .dashboard-header { padding: 20px 24px; border-bottom: 1px solid #eef1f6; display: flex; justify-content: space-between; align-items: center; } .dashboard-title { font-size: 20px; font-weight: 600; color: #1a202c; } .date-selector { display: flex; align-items: center; background: #f1f5f9; border-radius: 8px; padding: 6px 12px; font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.2s ease; } .date-selector:hover { background: #e2e8f0; } .date-selector svg { margin-left: 6px; } .accordion-container { display: flex; flex-direction: column; gap: 2px; padding: 16px; flex: 1; overflow-y: auto; } .accordion-item { border-radius: 10px; overflow: hidden; transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .accordion-header { display: flex; align-items: center; padding: 16px 20px; cursor: pointer; position: relative; z-index: 2; transition: all 0.3s ease; } .accordion-icon { width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; margin-right: 14px; } .accordion-icon svg { width: 20px; height: 20px; fill: currentColor; } .accordion-title { flex: 1; } .accordion-title h3 { font-size: 16px; font-weight: 600; margin-bottom: 2px; } .accordion-title p { font-size: 13px; opacity: 0.7; } .accordion-arrow { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; transition: transform 0.3s ease; } .accordion-content { max-height: 0; overflow: hidden; transition: max-height 0.5s cubic-bezier(0.16, 1, 0.3, 1); background: #fff; padding: 0 20px; } .accordion-item.active { box-shadow: 0 6px 14px rgba(0, 0, 0, 0.05); } .accordion-item.active .accordion-content { max-height: 600px; padding-bottom: 20px; } .accordion-item.active .accordion-arrow { transform: rotate(180deg); } /* Revenue theme */ .accordion-item:nth-child(1) .accordion-header { background: linear-gradient(135deg, rgba(101, 116, 255, 0.1) 0%, rgba(111, 134, 255, 0.1) 100%); color: #5667ff; } .accordion-item:nth-child(1) .accordion-icon { background: rgba(86, 103, 255, 0.2); } /* Users theme */ .accordion-item:nth-child(2) .accordion-header { background: linear-gradient(135deg, rgba(255, 145, 66, 0.1) 0%, rgba(255, 161, 95, 0.1) 100%); color: #ff9142; } .accordion-item:nth-child(2) .accordion-icon { background: rgba(255, 145, 66, 0.2); } /* Performance theme */ .accordion-item:nth-child(3) .accordion-header { background: linear-gradient(135deg, rgba(41, 204, 151, 0.1) 0%, rgba(66, 214, 164, 0.1) 100%); color: #29cc97; } .accordion-item:nth-child(3) .accordion-icon { background: rgba(41, 204, 151, 0.2); } /* Campaigns theme */ .accordion-item:nth-child(4) .accordion-header { background: linear-gradient(135deg, rgba(252, 100, 155, 0.1) 0%, rgba(255, 115, 166, 0.1) 100%); color: #fc649b; } .accordion-item:nth-child(4) .accordion-icon { background: rgba(252, 100, 155, 0.2); } .metrics-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 16px; } .metric-card { background: #f8fafc; border-radius: 10px; padding: 16px; transition: transform 0.2s ease, box-shadow 0.2s ease; } .metric-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); } .metric-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; } .metric-title { font-size: 14px; font-weight: 500; color: #64748b; } .metric-value { font-size: 24px; font-weight: 700; color: #1a202c; } .metric-change { display: flex; align-items: center; font-size: 13px; font-weight: 500; } .metric-change.positive { color: #10b981; } .metric-change.negative { color: #ef4444; } .chart-container { margin-top: 20px; height: 180px; position: relative; } .chart-bars { display: flex; align-items: flex-end; height: 140px; gap: 8px; } .chart-bar { flex: 1; min-width: 0; border-radius: 6px 6px 0 0; transition: height 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease; cursor: pointer; position: relative; } .chart-bar:hover { opacity: 0.8; } .chart-bar-label { position: absolute; bottom: -24px; left: 50%; transform: translateX(-50%); font-size: 11px; color: #64748b; white-space: nowrap; } .chart-tooltip { position: absolute; background: rgba(0, 0, 0, 0.8); color: white; padding: 4px 8px; border-radius: 4px; font-size: 12px; pointer-events: none; opacity: 0; transition: opacity 0.2s ease; z-index: 10; white-space: nowrap; transform: translate(-50%, -100%); margin-top: -8px; } .user-breakdown { margin-top: 20px; } .user-item { display: flex; align-items: center; padding: 10px 0; } .user-color { width: 12px; height: 12px; border-radius: 50%; margin-right: 8px; } .user-label { flex: 1; font-size: 14px; } .user-value { font-weight: 600; font-size: 14px; } .performance-metrics { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; } .perf-metric { flex: 1; min-width: 120px; background: #f8fafc; border-radius: 8px; padding: 14px; } .perf-metric-title { font-size: 13px; color: #64748b; margin-bottom: 8px; } .perf-metric-value { font-size: 20px; font-weight: 700; color: #1a202c; } .campaign-table { width: 100%; border-collapse: collapse; margin-top: 16px; font-size: 13px; } .campaign-table th { text-align: left; padding: 10px 12px; font-weight: 500; color: #64748b; border-bottom: 1px solid #e2e8f0; } .campaign-table td { padding: 12px; border-bottom: 1px solid #e2e8f0; } .campaign-status { display: inline-block; padding: 4px 8px; border-radius: 4px; font-size: 12px; font-weight: 500; } .status-active { background: rgba(16, 185, 129, 0.1); color: #10b981; } .status-paused { background: rgba(234, 179, 8, 0.1); color: #eab308; } .status-draft { background: rgba(100, 116, 139, 0.1); color: #64748b; } .status-ended { background: rgba(239, 68, 68, 0.1); color: #ef4444; } .progress-bar { height: 6px; width: 100%; background: #e2e8f0; border-radius: 3px; overflow: hidden; } .progress-fill { height: 100%; border-radius: 3px; transition: width 1s cubic-bezier(0.16, 1, 0.3, 1); } /* Custom scrollbar */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 10px; } ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; } ::-webkit-scrollbar-thumb:hover { background: #94a3b8; } /* Animation for opening sections */ @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(86, 103, 255, 0.4); } 70% { box-shadow: 0 0 0 10px rgba(86, 103, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(86, 103, 255, 0); } } .accordion-item.active .accordion-header { animation: pulse 1s; } /* Responsive adjustments */ @media (max-width: 550px) { .metrics-grid { grid-template-columns: 1fr; } .performance-metrics { flex-direction: column; } .accordion-title h3 { font-size: 15px; } .accordion-title p { font-size: 12px; } } </style> </head> <body> <div class="dashboard-wrapper"> <div class="dashboard-header"> <div class="dashboard-title">Analytics Dashboard</div> <div class="date-selector"> Last 30 Days <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M6 9L12 15L18 9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </div> </div> <div class="accordion-container"> <!-- Revenue Section --> <div class="accordion-item"> <div class="accordion-header"> <div class="accordion-icon"> <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 20C7.59 20 4 16.41 4 12C4 7.59 7.59 4 12 4C16.41 4 20 7.59 20 12C20 16.41 16.41 20 12 20ZM9.97 9.47C9.97 10.4 10.73 11.19 11.64 11.19H12.31C12.8 11.19 13.19 10.75 13.19 10.2C13.19 9.7 12.99 9.49 12.58 9.34L10.4 8.55C9.99 8.4 9.59 8.04 9.59 7.5C9.59 6.74 10.19 6.15 10.95 6.15H11.62C12.53 6.15 13.29 6.94 13.29 7.87H14.69C14.69 6.2 13.36 4.85 11.71 4.85H11.04C9.39 4.85 8.06 6.2 8.06 7.87C8.06 8.67 8.37 9.15 8.78 9.45C9.06 9.67 9.33 9.77 9.75 9.92L11.95 10.71C12.06 10.75 12.31 10.87 12.31 11.2C12.31 11.5 12.06 11.77 11.75 11.77H11.07C10.16 11.77 9.4 10.98 9.4 10.05H8L9.97 9.47ZM11 14.85H13V17.85H11V14.85Z" fill="currentColor"/> </svg> </div> <div class="accordion-title"> <h3>Revenue Analytics</h3> <p>MRR, conversion rates, and revenue trends</p> </div> <div class="accordion-arrow"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M6 9L12 15L18 9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </div> </div> <div class="accordion-content"> <div class="metrics-grid"> <div class="metric-card"> <div class="metric-header"> <div class="metric-title">Monthly Revenue</div> </div> <div class="metric-value">$86,245</div> <div class="metric-change positive"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M18 15L12 9L6 15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> +12.8% vs last month </div> </div> <div class="metric-card"> <div class="metric-header"> <div class="metric-title">Conversion Rate</div> </div> <div class="metric-value">4.6%</div> <div class="metric-change positive"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M18 15L12 9L6 15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> +0.8% points </div> </div> <div class="metric-card"> <div class="metric-header"> <div class="metric-title">Avg. Revenue Per User</div> </div> <div class="metric-value">$28.50</div> <div class="metric-change positive"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M18 15L12 9L6 15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> +$3.25 </div> </div> <div class="metric-card"> <div class="metric-header"> <div class="metric-title">Churn Rate</div> </div> <div class="metric-value">2.1%</div> <div class="metric-change negative"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M6 9L12 15L18 9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> +0.3% points </div> </div> </div> <div class="chart-container"> <h4 style="margin-bottom: 14px; font-size: 14px; color: #475569;">Revenue Trend (Last 6 Months)</h4> <div class="chart-tooltip" id="revenue-tooltip"></div> <div class="chart-bars" id="revenue-chart"> <!-- Chart bars will be added via JS --> </div> </div> </div> </div> <!-- User Analytics Section --> <div class="accordion-item"> <div class="accordion-header"> <div class="accordion-icon"> <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 12C14.21 12 16 10.21 16 8C16 5.79 14.21 4 12 4C9.79 4 8 5.79 8 8C8 10.21 9.79 12 12 12ZM12 6C13.1 6 14 6.9 14 8C14 9.1 13.1 10 12 10C10.9 10 10 9.1 10 8C10 6.9 10.9 6 12 6ZM12 13C9.33 13 4 14.34 4 17V20H20V17C20 14.34 14.67 13 12 13ZM12 14.9C14.97 14.9 18.1 16.36 18.1 17V18.1H5.9V17C5.9 16.36 9.03 14.9 12 14.9Z" fill="currentColor"/> </svg> </div> <div class="accordion-title"> <h3>User Analytics</h3> <p>Acquisition, engagement, and retention metrics</p> </div> <div class="accordion-arrow"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M6 9L12 15L18 9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </div> </div> <div class="accordion-content"> <div class="metrics-grid"> <div class="metric-card"> <div class="metric-header"> <div class="metric-title">Total Users</div> </div> <div class="metric-value">18,742</div> <div class="metric-change positive"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M18 15L12 9L6 15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> +824 new users </div> </div> <div class="metric-card"> <div class="metric-header"> <div class="metric-title">Avg. Session Duration</div> </div> <div class="metric-value">4m 12s</div> <div class="metric-change positive"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M18 15L12 9L6 15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> +18 seconds </div> </div> </div> <div class="chart-container"> <h4 style="margin-bottom: 14px; font-size: 14px; color: #475569;">New Users (Last 7 Days)</h4> <div class="chart-tooltip" id="users-tooltip"></div> <div class="chart-bars" id="users-chart"> <!-- Chart bars will be added via JS --> </div> </div> <div class="user-breakdown"> <h4 style="margin-bottom: 14px; font-size: 14px; color: #475569;">User Acquisition Channels</h4> <div class="user-item"> <div class="user-color" style="background-color: #5667ff;"></div> <div class="user-label">Organic Search</div> <div class="user-value">42%</div> </div> <div class="user-item"> <div class="user-color" style="background-color: #29cc97;"></div> <div class="user-label">Direct Traffic</div> <div class="user-value">28%</div> </div> <div class="user-item"> <div class="user-color" style="background-color: #ff9142;"></div> <div class="user-label">Social Media</div> <div class="user-value">18%</div> </div> <div class="user-item"> <div class="user-color" style="background-color: #fc649b;"></div> <div class="user-label">Referrals</div> <div class="user-value">12%</div> </div> </div> </div> </div> <!-- Performance Section --> <div class="accordion-item"> <div class="accordion-header"> <div class="accordion-icon"> <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M19 3H5C3.9 3 3 3.9 3 5V19C3 20.1 3.9 21 5 21H19C20.1 21 21 20.1 21 19V5C21 3.9 20.1 3 19 3ZM19 19H5V5H19V19ZM7 10H9V17H7V10ZM11 7H13V17H11V7ZM15 13H17V17H15V13Z" fill="currentColor"/> </svg> </div> <div class="accordion-title"> <h3>Performance Metrics</h3> <p>Page load times, error rates, and system uptime</p> </div> <div class="accordion-arrow"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M6 9L12 15L18 9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </div> </div> <div class="accordion-content"> <div class="performance-metrics"> <div class="perf-metric"> <div class="perf-metric-title">Avg. Load Time</div> <div class="perf-metric-value">1.2s</div> </div> <div class="perf-metric"> <div class="perf-metric-title">Error Rate</div> <div class="perf-metric-value">0.08%</div> </div> <div class="perf-metric"> <div class="perf-metric-title">Uptime</div> <div class="perf-metric-value">99.97%</div> </div> </div> <div style="margin-top: 20px;"> <h4 style="margin-bottom: 14px; font-size: 14px; color: #475569;">API Response Times</h4> <div style="margin-bottom: 12px;"> <div style="display: flex; justify-content: space-between; margin-bottom: 6px;"> <span style="font-size: 13px;">Authentication</span> <span style="font-size: 13px; font-weight: 500;">120ms</span> </div> <div class="progress-bar"> <div class="progress-fill" style="width: 20%; background-color: #5667ff;"></div> </div> </div> <div style="margin-bottom: 12px;"> <div style="display: flex; justify-content: space-between; margin-bottom: 6px;"> <span style="font-size: 13px;">Data Fetch</span> <span style="font-size: 13px; font-weight: 500;">245ms</span> </div> <div class="progress-bar"> <div class="progress-fill" style="width: 45%; background-color: #29cc97;"></div> </div> </div> <div style="margin-bottom: 12px;"> <div style="display: flex; justify-content: space-between; margin-bottom: 6px;"> <span style="font-size: 13px;">Dashboard Render</span> <span style="font-size: 13px; font-weight: 500;">318ms</span> </div> <div class="progress-bar"> <div class="progress-fill" style="width: 65%; background-color: #ff9142;"></div> </div> </div> <div> <div style="display: flex; justify-content: space-between; margin-bottom: 6px;"> <span style="font-size: 13px;">Report Generation</span> <span style="font-size: 13px; font-weight: 500;">520ms</span> </div> <div class="progress-bar"> <div class="progress-fill" style="width: 85%; background-color: #fc649b;"></div> </div> </div> </div> </div> </div> <!-- Marketing Campaigns Section --> <div class="accordion-item"> <div class="accordion-header"> <div class="accordion-icon"> <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M20 4H4C2.9 4 2.01 4.9 2.01 6L2 18C2 19.1 2.9 20 4 20H20C21.1 20 22 19.1 22 18V6C22 4.9 21.1 4 20 4ZM20 18H4V12H20V18ZM20 8H4V6H20V8ZM14 16H18V14H14V16ZM12 16H13V14H12V16ZM8 16H11V14H8V16Z" fill="currentColor"/> </svg> </div> <div class="accordion-title"> <h3>Marketing Campaigns</h3> <p>Campaign performance, ROI, and engagement</p> </div> <div class="accordion-arrow"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M6 9L12 15L18 9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </div> </div> <div class="accordion-content"> <div class="metrics-grid"> <div class="metric-card"> <div class="metric-header"> <div class="metric-title">Active Campaigns</div> </div> <div class="metric-value">8</div> </div> <div class="metric-card"> <div class="metric-header"> <div class="metric-title">Avg. ROI</div> </div> <div class="metric-value">317%</div> <div class="metric-change positive"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M18 15L12 9L6 15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> +24% vs last quarter </div> </div> </div> <table class="campaign-table"> <thead> <tr> <th>Campaign</th> <th>Status</th> <th>Conv.</th> <th>Spend</th> </tr> </thead> <tbody> <tr> <td>Q3 Product Launch</td> <td><span class="campaign-status status-active">Active</span></td> <td>6.2%</td> <td>$12,450</td> </tr> <tr> <td>Summer Promotion</td> <td><span class="campaign-status status-active">Active</span></td> <td>8.4%</td> <td>$8,720</td> </tr> <tr> <td>Email Reengagement</td> <td><span class="campaign-status status-paused">Paused</span></td> <td>3.1%</td> <td>$2,100</td> </tr> <tr> <td>Retargeting - Web</td> <td><span class="campaign-status status-active">Active</span></td> <td>4.7%</td> <td>$5,840</td> </tr> <tr> <td>Spring Promo 2023</td> <td><span class="campaign-status status-ended">Ended</span></td> <td>7.5%</td> <td>$9,350</td> </tr> </tbody> </table> </div> </div> </div> </div> <script> // Initialize accordion functionality document.addEventListener('DOMContentLoaded', function() { const accordionItems = document.querySelectorAll('.accordion-item'); // Open first section by default setTimeout(() => { accordionItems[0].classList.add('active'); }, 300); accordionItems.forEach(item => { const header = item.querySelector('.accordion-header'); header.addEventListener('click', () => { const isActive = item.classList.contains('active'); // Close all items accordionItems.forEach(accordion => { accordion.classList.remove('active'); }); // If clicked item wasn't active, open it if (!isActive) { item.classList.add('active'); } }); }); // Initialize revenue chart const revenueData = [ { month: 'May', value: 65400, formatted: '$65,400' }, { month: 'Jun', value: 68200, formatted: '$68,200' }, { month: 'Jul', value: 72100, formatted: '$72,100' }, { month: 'Aug', value: 74500, formatted: '$74,500' }, { month: 'Sep', value: 79800, formatted: '$79,800' }, { month: 'Oct', value: 86245, formatted: '$86,245' } ]; const revenueChart = document.getElementById('revenue-chart'); const revenueTooltip = document.getElementById('revenue-tooltip'); revenueData.forEach((item, index) => { const percentage = (item.value / 90000) * 100; const bar = document.createElement('div'); bar.className = 'chart-bar'; bar.style.height = '0%'; bar.style.background = `linear-gradient(180deg, #5667ff ${percentage - 20}%, #6574ff 100%)`; // Add label const label = document.createElement('div'); label.className = 'chart-bar-label'; label.textContent = item.month; bar.appendChild(label); // Add tooltip functionality bar.addEventListener('mouseover', (e) => { revenueTooltip.textContent = `${item.month}: ${item.formatted}`; revenueTooltip.style.opacity = '1'; revenueTooltip.style.left = `${e.clientX}px`; revenueTooltip.style.top = `${e.clientY - 10}px`; }); bar.addEventListener('mousemove', (e) => { revenueTooltip.style.left = `${e.clientX}px`; revenueTooltip.style.top = `${e.clientY - 10}px`; }); bar.addEventListener('mouseout', () => { revenueTooltip.style.opacity = '0'; }); revenueChart.appendChild(bar); // Animate the bar height after a delay setTimeout(() => { bar.style.height = `${percentage}%`; }, 300 + (index * 100)); }); // Initialize users chart const usersData = [ { day: 'Mon', value: 124, formatted: '124 users' }, { day: 'Tue', value: 145, formatted: '145 users' }, { day: 'Wed', value: 132, formatted: '132 users' }, { day: 'Thu', value: 164, formatted: '164 users' }, { day: 'Fri', value: 187, formatted: '187 users' }, { day: 'Sat', value: 110, formatted: '110 users
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Travel Destination Selector</title> <style> /* Reset & Base Styles */ * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; } body { background-color: #f5f5f5; overflow: hidden; width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; } .container { width: 700px; height: 700px; position: relative; overflow: hidden; display: flex; flex-direction: column; background: #0c0f1d; border-radius: 16px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2); } .title { padding: 32px 40px 20px; color: white; z-index: 10; position: relative; } .title h1 { font-size: 2.2rem; font-weight: 700; margin-bottom: 8px; background: linear-gradient(to right, #ffffff, #a5d8ff); -webkit-background-clip: text; background-clip: text; color: transparent; letter-spacing: -0.5px; } .title p { font-size: 0.95rem; font-weight: 300; color: rgba(255, 255, 255, 0.8); max-width: 600px; line-height: 1.5; } .accordion { display: flex; height: 100%; width: 100%; position: relative; padding: 20px 0; } .accordion-item { height: 550px; transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1); position: relative; overflow: hidden; border-radius: 12px; margin: 0 5px; cursor: pointer; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15); } .accordion-item:first-child { margin-left: 20px; } .accordion-item:last-child { margin-right: 20px; } .accordion-item.active { flex: 3; } .accordion-item:not(.active) { flex: 0.5; } .bg-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 1s ease; } .accordion-item:not(.active) .bg-image { filter: brightness(0.6) saturate(0.8); } .accordion-item.active .bg-image { transform: scale(1.05); } .content { position: absolute; bottom: 0; left: 0; width: 100%; padding: 25px; color: white; opacity: 0; transition: opacity 0.5s ease, transform 0.5s ease; transform: translateY(20px); z-index: 2; pointer-events: none; background: linear-gradient(0deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.4) 70%, transparent 100%); border-radius: 0 0 12px 12px; height: 220px; display: flex; flex-direction: column; justify-content: flex-end; } .accordion-item.active .content { opacity: 1; transform: translateY(0); pointer-events: all; } h2 { font-size: 1.8rem; margin-bottom: 8px; font-weight: 600; letter-spacing: 0.5px; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); } .content p { font-size: 0.9rem; line-height: 1.5; margin-bottom: 15px; font-weight: 300; max-width: 500px; } .tag { display: inline-block; padding: 6px 12px; background-color: rgba(255, 255, 255, 0.2); border-radius: 50px; font-size: 0.7rem; margin-right: 8px; margin-bottom: 8px; backdrop-filter: blur(5px); color: white; font-weight: 500; border: 1px solid rgba(255, 255, 255, 0.3); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); transition: all 0.3s ease; } .explore-btn { display: inline-flex; align-items: center; color: white; background: linear-gradient(135deg, #ff7b00, #ff0066); border: none; padding: 12px 24px; border-radius: 50px; font-size: 0.9rem; font-weight: 500; cursor: pointer; margin-top: 15px; box-shadow: 0 4px 15px rgba(255, 0, 102, 0.3); transition: all 0.3s ease; width: fit-content; } .explore-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(255, 0, 102, 0.4); } .explore-btn svg { margin-left: 8px; transition: transform 0.3s ease; } .explore-btn:hover svg { transform: translateX(4px); } .location-label { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-90deg); color: white; font-size: 1.2rem; font-weight: 600; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); white-space: nowrap; transition: opacity 0.3s ease; z-index: 1; opacity: 0.9; letter-spacing: 2px; } .accordion-item.active .location-label { opacity: 0; } .indicators { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; z-index: 100; } .indicator { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.3); cursor: pointer; transition: all 0.3s ease; } .indicator.active { background: white; transform: scale(1.3); } /* Responsive adjustments */ @media (max-width: 700px) { .container { width: 100%; height: 100vh; border-radius: 0; } .title { padding: 20px 25px 10px; } .title h1 { font-size: 1.8rem; } .title p { font-size: 0.85rem; } .accordion { padding: 10px 0; } .accordion-item { height: 500px; margin: 0 3px; } .accordion-item:first-child { margin-left: 10px; } .accordion-item:last-child { margin-right: 10px; } .content { padding: 20px; } h2 { font-size: 1.5rem; } .content p { font-size: 0.8rem; } .explore-btn { padding: 10px 20px; font-size: 0.8rem; } } /* Animation for tab opening */ @keyframes slideIn { 0% { transform: translateX(30px); opacity: 0; } 100% { transform: translateX(0); opacity: 1; } } .tags { display: flex; flex-wrap: wrap; animation: slideIn 0.5s ease forwards; animation-delay: 0.2s; opacity: 0; } .content h2 { animation: slideIn 0.5s ease forwards; opacity: 0; } .content p { animation: slideIn 0.5s ease forwards; animation-delay: 0.1s; opacity: 0; } .content .explore-btn { animation: slideIn 0.5s ease forwards; animation-delay: 0.3s; opacity: 0; } /* Radial cursor effect */ .accordion-item::after { content: ''; position: absolute; height: 80px; width: 80px; background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 70%); border-radius: 50%; opacity: 0; transition: opacity 0.5s; transform: translate(-50%, -50%); pointer-events: none; z-index: 3; } .accordion-item:not(.active):hover::after { opacity: 1; } </style> </head> <body> <div class="container"> <div class="title"> <h1>Discover Your Perfect Escape</h1> <p>Explore our curated selection of breathtaking destinations that promise unforgettable experiences. Slide through to find your next adventure.</p> </div> <div class="accordion"> <div class="accordion-item active" data-index="0"> <img src="https://images.unsplash.com/photo-1516483638261-f4dbaf036963?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1586&q=80" alt="Amalfi Coast" class="bg-image"> <div class="location-label">AMALFI COAST</div> <div class="content"> <h2>Amalfi Coast, Italy</h2> <p>Discover the dramatic cliffs and colorful villages along Italy's most scenic shoreline. From Positano's pastel houses to Ravello's enchanting gardens, the Amalfi Coast blends Mediterranean beauty with Italian charm.</p> <div class="tags"> <span class="tag">Coastal Beauty</span> <span class="tag">Historic Villages</span> <span class="tag">Mediterranean Cuisine</span> </div> <button class="explore-btn"> Explore Destination <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M5 12H19" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M12 5L19 12L12 19" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </button> </div> </div> <div class="accordion-item" data-index="1"> <img src="https://images.unsplash.com/photo-1528181304800-259b08848526?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Kyoto" class="bg-image"> <div class="location-label">KYOTO</div> <div class="content"> <h2>Kyoto, Japan</h2> <p>Step into timeless Japan where ancient temples meet serene gardens. Kyoto's 1,600 Buddhist temples, 400 Shinto shrines, and 17 UNESCO World Heritage sites create a perfect blend of spiritual tranquility and cultural richness.</p> <div class="tags"> <span class="tag">Ancient Temples</span> <span class="tag">Cherry Blossoms</span> <span class="tag">Traditional Tea Houses</span> </div> <button class="explore-btn"> Explore Destination <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M5 12H19" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M12 5L19 12L12 19" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </button> </div> </div> <div class="accordion-item" data-index="2"> <img src="https://images.unsplash.com/photo-1505228395891-9a51e7e86bf6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1633&q=80" alt="Santorini" class="bg-image"> <div class="location-label">SANTORINI</div> <div class="content"> <h2>Santorini, Greece</h2> <p>Perched on the edge of a volcanic caldera, Santorini's whitewashed villages cascade down dramatic cliffs. Experience breathtaking sunsets over the Aegean Sea and lose yourself in the island's unique architecture and vibrant blue domes.</p> <div class="tags"> <span class="tag">Stunning Sunsets</span> <span class="tag">Volcanic Beaches</span> <span class="tag">Aegean Viewpoints</span> </div> <button class="explore-btn"> Explore Destination <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M5 12H19" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M12 5L19 12L12 19" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </button> </div> </div> <div class="accordion-item" data-index="3"> <img src="https://images.unsplash.com/photo-1580094345352-2e8e0987e5e7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Bora Bora" class="bg-image"> <div class="location-label">BORA BORA</div> <div class="content"> <h2>Bora Bora, French Polynesia</h2> <p>Immerse yourself in the pristine turquoise lagoons and luxurious overwater bungalows of this South Pacific paradise. Bora Bora's protected coral reef creates a natural aquarium, perfect for snorkeling among colorful marine life.</p> <div class="tags"> <span class="tag">Overwater Bungalows</span> <span class="tag">Turquoise Lagoons</span> <span class="tag">Tropical Paradise</span> </div> <button class="explore-btn"> Explore Destination <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M5 12H19" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M12 5L19 12L12 19" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </button> </div> </div> <div class="accordion-item" data-index="4"> <img src="https://images.unsplash.com/photo-1546149894-3fd773ff2a42?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Machu Picchu" class="bg-image"> <div class="location-label">MACHU PICCHU</div> <div class="content"> <h2>Machu Picchu, Peru</h2> <p>Trek through the clouds to this ancient Incan citadel nestled high in the Andes mountains. The mysterious 15th-century stone structures offer a glimpse into a sophisticated civilization and provide panoramic views of sacred valleys.</p> <div class="tags"> <span class="tag">Incan Heritage</span> <span class="tag">Mountain Trekking</span> <span class="tag">Archaeological Wonder</span> </div> <button class="explore-btn"> Explore Destination <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M5 12H19" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M12 5L19 12L12 19" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </button> </div> </div> </div> <div class="indicators"> <span class="indicator active" data-index="0"></span> <span class="indicator" data-index="1"></span> <span class="indicator" data-index="2"></span> <span class="indicator" data-index="3"></span> <span class="indicator" data-index="4"></span> </div> </div> <script> document.addEventListener('DOMContentLoaded', () => { const accordionItems = document.querySelectorAll('.accordion-item'); const indicators = document.querySelectorAll('.indicator'); // Track mouse position for the radial effect accordionItems.forEach(item => { item.addEventListener('mousemove', (e) => { if (!item.classList.contains('active')) { const rect = item.getBoundingClientRect(); const x = e.clientX - rect.left; const y = e.clientY - rect.top; item.style.setProperty('--mouse-x', `${x}px`); item.style.setProperty('--mouse-y', `${y}px`); // Position the radial gradient const afterElement = window.getComputedStyle(item, '::after'); if (afterElement) { item.style.setProperty('--after-left', `${x}px`); item.style.setProperty('--after-top', `${y}px`); } } }); }); // Handle click on accordion items accordionItems.forEach(item => { item.addEventListener('click', () => { const index = item.getAttribute('data-index'); // Only proceed if this isn't already the active item if (!item.classList.contains('active')) { // Remove active class from all items accordionItems.forEach(i => i.classList.remove('active')); // Add active class to clicked item item.classList.add('active'); // Update indicators indicators.forEach(ind => ind.classList.remove('active')); indicators[index].classList.add('active'); } }); }); // Handle click on indicators indicators.forEach(indicator => { indicator.addEventListener('click', () => { const index = indicator.getAttribute('data-index'); // Update active indicator indicators.forEach(ind => ind.classList.remove('active')); indicator.classList.add('active'); // Update active accordion item accordionItems.forEach(item => item.classList.remove('active')); accordionItems[index].classList.add('active'); }); }); // Autoplay functionality let currentIndex = 0; const autoplayInterval = 5000; // 5 seconds const startAutoplay = () => { setInterval(() => { currentIndex = (currentIndex + 1) % accordionItems.length; // Update active accordion item accordionItems.forEach(item => item.classList.remove('active')); accordionItems[currentIndex].classList.add('active'); // Update indicators indicators.forEach(ind => ind.classList.remove('active')); indicators[currentIndex].classList.add('active'); }, autoplayInterval); }; // Stop autoplay when user interacts with accordion accordionItems.forEach(item => { item.addEventListener('click', () => { clearInterval(autoplayInterval); // Get new current index currentIndex = parseInt(item.getAttribute('data-index')); }); }); indicators.forEach(indicator => { indicator.addEventListener('click', () => { clearInterval(autoplayInterval); // Get new current index currentIndex = parseInt(indicator.getAttribute('data-index')); }); }); // Start autoplay startAutoplay(); }); </script> </body> </html>
<html> <head> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } body { background-color: #f7f9fc; display: flex; justify-content: center; align-items: center; min-height: 700px; padding: 20px; overflow-x: hidden; } .container { max-width: 700px; width: 100%; background-color: #fff; border-radius: 16px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); overflow: hidden; position: relative; } .header { padding: 25px 30px 15px; background: linear-gradient(135deg, #6e8efb, #a777e3); color: white; border-radius: 16px 16px 0 0; } .header h1 { font-size: 24px; font-weight: 700; margin-bottom: 10px; letter-spacing: -0.5px; } .header p { font-size: 16px; opacity: 0.9; line-height: 1.5; } .progress-container { padding: 0 30px; margin-top: 15px; margin-bottom: 10px; position: relative; } .progress-bar { height: 6px; background: rgba(255, 255, 255, 0.3); border-radius: 10px; overflow: hidden; } .progress-fill { height: 100%; width: 0; background: #fff; border-radius: 10px; transition: width 0.5s ease; } .modules-container { padding: 20px; } .accordion { list-style: none; margin-bottom: 15px; } .accordion-item { margin-bottom: 15px; border-radius: 12px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); transition: all 0.3s ease; overflow: hidden; position: relative; } .accordion-item:hover { transform: translateY(-3px); box-shadow: 0 7px 20px rgba(0, 0, 0, 0.08); } .accordion-header { display: flex; align-items: center; padding: 20px; cursor: pointer; background-color: #fff; border-radius: 12px; transition: all 0.3s ease; position: relative; z-index: 2; } .module-icon { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 10px; margin-right: 16px; flex-shrink: 0; } .module-icon svg { width: 20px; height: 20px; } .module-content { flex-grow: 1; } .module-title { font-weight: 600; margin-bottom: 5px; color: #333; font-size: 17px; transition: all 0.3s ease; } .module-description { font-size: 14px; color: #666; line-height: 1.4; } .expand-icon { width: 24px; height: 24px; position: relative; transform: rotate(0deg); transition: transform 0.3s ease; } .expand-icon::before, .expand-icon::after { content: ''; position: absolute; background-color: #a777e3; transition: all 0.3s ease; } .expand-icon::before { width: 100%; height: 2px; top: 50%; left: 0; transform: translateY(-50%); } .expand-icon::after { width: 2px; height: 100%; left: 50%; top: 0; transform: translateX(-50%); } .accordion-content { max-height: 0; overflow: hidden; transition: max-height 0.5s ease, padding 0.5s ease; background-color: #f9fafc; border-radius: 0 0 12px 12px; } .accordion-content-inner { padding: 0 20px 20px; opacity: 0; transform: translateY(10px); transition: opacity 0.3s ease, transform 0.3s ease; } .accordion-item.active .accordion-header { border-radius: 12px 12px 0 0; } .accordion-item.active .expand-icon { transform: rotate(45deg); } .accordion-item.active .accordion-content { max-height: 500px; } .accordion-item.active .accordion-content-inner { opacity: 1; transform: translateY(0); } .lesson { padding: 12px 0; border-bottom: 1px solid #eee; display: flex; align-items: center; } .lesson:last-child { border-bottom: none; } .lesson-icon { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 12px; background-color: #f0f3f9; transition: all 0.3s ease; } .lesson-icon svg { width: 14px; height: 14px; color: #6e8efb; } .lesson-title { font-size: 15px; font-weight: 500; color: #444; transition: all 0.3s ease; flex-grow: 1; } .lesson-duration { font-size: 13px; color: #888; white-space: nowrap; } .lesson:hover .lesson-icon { background-color: #e6ebf5; } .lesson:hover .lesson-title { color: #6e8efb; } .progress-label { display: flex; justify-content: space-between; color: rgba(255, 255, 255, 0.9); margin-bottom: 5px; font-size: 13px; } .start-btn { display: inline-flex; align-items: center; padding: 8px 16px; background-color: #fff; color: #6e8efb; font-weight: 600; font-size: 14px; border-radius: 30px; cursor: pointer; transition: all 0.3s ease; margin-top: 15px; border: none; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1); } .start-btn svg { margin-left: 8px; width: 16px; height: 16px; } .start-btn:hover { background-color: #f3f4ff; transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15); } /* Module colors */ .module-1 .module-icon { background-color: rgba(110, 142, 251, 0.15); } .module-1 .module-icon svg { color: #6e8efb; } .module-2 .module-icon { background-color: rgba(252, 107, 104, 0.15); } .module-2 .module-icon svg { color: #fc6b68; } .module-3 .module-icon { background-color: rgba(68, 206, 176, 0.15); } .module-3 .module-icon svg { color: #44ceb0; } .module-4 .module-icon { background-color: rgba(255, 184, 76, 0.15); } .module-4 .module-icon svg { color: #ffb84c; } .floating-dots { position: absolute; width: 100%; height: 100%; top: 0; left: 0; overflow: hidden; pointer-events: none; } .dot { position: absolute; border-radius: 50%; opacity: 0.3; animation: float 15s infinite linear; } @keyframes float { 0% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-20px) rotate(180deg); } 100% { transform: translateY(0) rotate(360deg); } } /* Mobile responsiveness */ @media (max-width: 500px) { .header { padding: 20px 20px 10px; } .header h1 { font-size: 20px; } .progress-container { padding: 0 20px; } .modules-container { padding: 15px; } .accordion-header { padding: 15px; } .module-icon { width: 32px; height: 32px; margin-right: 12px; } .module-title { font-size: 15px; } .module-description { font-size: 13px; } } </style> </head> <body> <div class="container"> <div class="floating-dots"></div> <div class="header"> <h1>Interactive Data Science Pathway</h1> <p>Track your progress through our data science curriculum designed for beginners to advanced practitioners.</p> <div class="progress-container"> <div class="progress-label"> <span>Your Progress</span> <span>25%</span> </div> <div class="progress-bar"> <div class="progress-fill"></div> </div> </div> </div> <div class="modules-container"> <ul class="accordion"> <li class="accordion-item module-1 active"> <div class="accordion-header"> <div class="module-icon"> <svg viewBox="0 0 24 24" fill="currentColor"> <path d="M21 12.22C21 6.73 16.74 3 12 3c-4.69 0-9 3.65-9 9.28-.6.23.06.46.17.68.11.22.24.43.39.62.16.2.31.38.51.56.25 0 .38-.22.38-.44 0-1.27.38-2.47 1.03-3.43.66-.98 1.65-1.71 2.84-1.71s2.18.75 2.84 1.75c.65.96 1.03 2.18 1.03 3.44 0 .5-.08.94-.21 1.32s-.34.71-.57.96c-.23.25-.5.45-.8.58-.29.13-.59.19-.9.19-.32 0-.61-.06-.84-.16-.23-.11-.44-.25-.62-.42-.18-.17-.31-.38-.41-.61-.1-.23-.15-.47-.15-.73h-1.5c0 .42.11.8.3 1.13.19.33.45.63.8.86.35.23.76.41 1.24.54.48.12.99.19 1.54.19.95 0 1.76-.19 2.44-.56.66-.38 1.19-.91 1.53-1.61.35-.69.53-1.42.53-2.31 0-.66-.11-1.31-.29-1.89-.19-.58-.45-1.12-.79-1.6-.33-.48-.73-.9-1.22-1.25-.48-.35-1.01-.61-1.63-.79v-.14c0-.07.01-.12.01-.17C12 10.71 18.5 11.74 18.5 15c0 .86-.41 1.64-1.03 2.22-.63.58-1.5 1.01-2.47 1.26-.97.25-2.06.38-3.25.38-.56 0-1.15-.06-1.75-.19-.59-.12-1.1-.26-1.53-.44l-.37 1.45c.55.19 1.14.33 1.75.43.61.1 1.26.15 1.96.15 1.15 0 2.32-.12 3.3-.32 1-.21 1.82-.57 2.47-1.09.63-.51 1.13-1.31 1.13-2.32z"/> <path d="M7.95 9.95c.58 0 1.05-.47 1.05-1.05 0-.58-.47-1.05-1.05-1.05-.58 0-1.05.47-1.05 1.05 0 .58.47 1.05 1.05 1.05zm4.29 1.91c.58 0 1.05-.47 1.05-1.05 0-.58-.47-1.05-1.05-1.05-.58 0-1.05.47-1.05 1.05 0 .58.47 1.05 1.05 1.05z"/> </svg> </div> <div class="module-content"> <h3 class="module-title">Foundations of Data Analysis</h3> <p class="module-description">Master the essential statistical concepts and data manipulation techniques</p> </div> <div class="expand-icon"></div> </div> <div class="accordion-content"> <div class="accordion-content-inner"> <div class="lesson"> <div class="lesson-icon"> <svg viewBox="0 0 24 24" fill="currentColor"> <path d="M12,2A10,10,0,1,0,22,12,10,10,0,0,0,12,2Zm0,18a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z" opacity=".5"/> <path d="M20,12h-8V4A8,8,0,0,1,20,12Z"/> </svg> </div> <span class="lesson-title">Introduction to Statistical Thinking</span> <span class="lesson-duration">25 min</span> </div> <div class="lesson"> <div class="lesson-icon"> <svg viewBox="0 0 24 24" fill="currentColor"> <path d="M18,6V4.17A3.009,3.009,0,0,0,15.17,1H8.83A3.009,3.009,0,0,0,6,4.17V6Z" opacity=".5"/> <path d="M8.5,10h7a.5.5,0,0,0,0-1h-7a.5.5,0,0,0,0,1Zm0,2h7a.5.5,0,0,0,0-1h-7a.5.5,0,0,0,0,1Zm0,2h7a.5.5,0,0,0,0-1h-7a.5.5,0,0,0,0,1Zm0,2h7a.5.5,0,0,0,0-1h-7a.5.5,0,0,0,0,1Z"/> <path d="M15,22H9a3.009,3.009,0,0,1-3-3V6H18V19A3.009,3.009,0,0,1,15,22Z"/> </svg> </div> <span class="lesson-title">Descriptive Statistics & Data Cleaning</span> <span class="lesson-duration">40 min</span> </div> <div class="lesson"> <div class="lesson-icon"> <svg viewBox="0 0 24 24" fill="currentColor"> <path d="M12,22A10,10,0,1,1,22,12,10.011,10.011,0,0,1,12,22Z" opacity=".5"/> <path d="M12,7a1,1,0,0,0-1,1v5a1,1,0,0,0,.293.707l3,3a1,1,0,0,0,1.414-1.414L13,12.586V8A1,1,0,0,0,12,7Z"/> </svg> </div> <span class="lesson-title">Probability Distributions</span> <span class="lesson-duration">35 min</span> </div> <button class="start-btn"> Start Module <svg viewBox="0 0 24 24" fill="currentColor"> <path d="M5,13h11.86l-3.63,4.36a1,1,0,0,0,1.54,1.28l5-6a1.19,1.19,0,0,0,.09-.15c0-.05.05-.08.07-.13A1,1,0,0,0,20,12a1,1,0,0,0-.07-.36c0-.05-.05-.08-.07-.13a1.19,1.19,0,0,0-.09-.15l-5-6A1,1,0,0,0,14,5a1,1,0,0,0-.64.23A1,1,0,0,0,13.23,7L16.86,11H5a1,1,0,0,0,0,2Z"/> </svg> </button> </div> </div> </li> <li class="accordion-item module-2"> <div class="accordion-header"> <div class="module-icon"> <svg viewBox="0 0 24 24" fill="currentColor"> <path d="M20,20H4a2,2,0,0,1-2-2V6A2,2,0,0,1,4,4H8.76l2,4H20a2,2,0,0,1,2,2v8A2,2,0,0,1,20,20Z"/> <path d="M20,8H10.76l-2-4H4A2,2,0,0,0,2,6v8H4V8H8.76l2,4H20Z" opacity=".5"/> </svg> </div> <div class="module-content"> <h3 class="module-title">Data Visualization Techniques</h3> <p class="module-description">Learn to create compelling visualizations that tell data stories effectively</p> </div> <div class="expand-icon"></div> </div> <div class="accordion-content"> <div class="accordion-content-inner"> <div class="lesson"> <div class="lesson-icon"> <svg viewBox="0 0 24 24" fill="currentColor"> <path d="M12,2A10,10,0,1,0,22,12,10,10,0,0,0,12,2Zm0,18a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z" opacity=".5"/> <path d="M20,12h-8V4A8,8,0,0,1,20,12Z"/> </svg> </div> <span class="lesson-title">Principles of Data Visualization</span> <span class="lesson-duration">30 min</span> </div> <div class="lesson"> <div class="lesson-icon"> <svg viewBox="0 0 24 24" fill="currentColor"> <path d="M20,19H4a1,1,0,0,1-1-1V4A1,1,0,0,1,4,3H20a1,1,0,0,1,1,1V18A1,1,0,0,1,20,19Z" opacity=".5"/> <path d="M20,21H4a1,1,0,0,1,0-2H20a1,1,0,0,1,0,2Z"/> <path d="M15,7a1,1,0,0,1-1,1H10a1,1,0,0,1,0-2h4A1,1,0,0,1,15,7Z"/> <path d="M17,11a1,1,0,0,1-1,1H8a1,1,0,0,1,0-2h8A1,1,0,0,1,17,11Z"/> <path d="M15,15a1,1,0,0,1-1,1H10a1,1,0,0,1,0-2h4A1,1,0,0,1,15,15Z"/> </svg> </div> <span class="lesson-title">Matplotlib & Seaborn Mastery</span> <span class="lesson-duration">45 min</span> </div> <div class="lesson"> <div class="lesson-icon"> <svg viewBox="0 0 24 24" fill="currentColor"> <path d="M12,22A10,10,0,1,1,22,12,10.011,10.011,0,0,1,12,22Z" opacity=".5"/> <path d="M12,7a1,1,0,0,0-1,1v5a1,1,0,0,0,.293.707l3,3a1,1,0,0,0,1.414-1.414L13,12.586V8A1,1,0,0,0,12,7Z"/> </svg> </div> <span class="lesson-title">Interactive Visualizations with Plotly</span> <span class="lesson-duration">40 min</span> </div> <div class="lesson"> <div class="lesson-icon"> <svg viewBox="0 0 24 24" fill="currentColor"> <path d="M12,22A10,10,0,1,1,22,12,10.011,10.011,0,0,1,12,22Z" opacity=".5"/> <path d="M15.707,9.707l-3,3a1,1,0,0,1-1.414,0l-3-3A1,1,0,0,1,9.707,8.293L12,10.586l2.293-2.293a1,1,0,0,1,1.414,1.414Z"/> <path d="M15.707,14.707l-3,3a1,1,0,0,1-1.414,0l-3-3A1,1,0,0,1,9.707,13.293L12,15.586l2.293-2.293a1,1,0,0,1,1.414,1.414Z"/> </svg> </div> <span class="lesson-title">Dashboard Creation with Tableau</span> <span class="lesson-duration">50 min</span> </div> <button class="start-btn"> Start Module <svg viewBox="0 0 24 24" fill="currentColor"> <path d="M5,13h11.86l-3.63,4.36a1,1,0,0,0,1.54,1.28l5-6a1.19,1.19,0,0,0,.09-.15c0-.05.05-.08.07-.13A1,1,0,0,0,20,12a1,1,0,0,0-.07-.36c0-.05-.05-.08-.07-.13a1.19,1.19,0,0,0-.09-.15l-5-6A1,1,0,0,0,14,5a1,1,0,0,0-.64.23A1,1,0,0,0,13.23,7L16.86,11H5a1,1,0,0,0,0,2Z"/> </svg> </button> </div> </div> </li> <li class="accordion-item module-3"> <div class="accordion-header"> <div class="module-icon"> <svg viewBox="0 0 24 24" fill="currentColor"> <path d="M2.5,10.56l9,5.2a1,1,0,0,0,1,0l9-5.2a1,1,0,0,0,0-1.73l-9-5.2a1,1,0,0,0-1,0l-9,5.2a1,1,0,0,0,0,1.73Z"/> <path d="M21.5,12.43l-9,5.19-9-5.19A1,1,0,0,0,2,13.3v4.7a1,1,0,0,0,.5.87l9,5.2a1,1,0,0,0,1,0l9-5.2a1,1,0,0,0,.5-.87V13.3A1,1,0,0,0,21.5,12.43Z" opacity=".5"/> </svg> </div> <div class="module-content"> <h3 class="module-title">Machine Learning Fundamentals</h3> <p class="module-description">Develop practical skills to build, validate and deploy ML models</p> </div> <div class="expand-icon"></div> </div> <div class="accordion-content"> <div class="accordion-content-inner"> <div class="lesson"> <div class="lesson-icon"> <svg viewBox="0 0 24 24" fill="currentColor"> <path d="M12,2A10,10,0,1,0,22,12,10,10,0,0,0,12,2Zm0,18a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z" opacity=".5"/> <path d="M20,12h-8V4A8,8,0,0,1,20,12Z"/> </svg> </div> <span class="lesson-title">Supervised vs. Unsupervised Learning</span> <span class="lesson-duration">35 min</span> </div> <div class="lesson"> <div class="lesson-icon"> <svg viewBox="0 0 24 24" fill="currentColor"> <path d="M18,6V4.17A3.009,3.009,0,0,0,15.17,1H8.83A3.009,3.009,0,0,0,6,4.17V6Z" opacity=".5"/> <path d="M15,22H9a3.009,3.009,0,0,1-3-3V6H18V19A3.009,3.009,0,0,1,15,22Z"/> </svg> </div> <span class="lesson-title">Regression Algorithms</span> <span class="lesson-duration">45 min</span> </div> <div class="lesson"> <div class="lesson-icon"> <svg viewBox="0 0 24 24" fill="currentColor"> <path d="M20,19H4a1,1,0,0,1-1-1V4A1,1,0,0,1,4,3H20a1,1,0,0,1,1,1V18A1,1,0,0,1,20,19Z" opacity=".5"/> <path d="M20,21H4a1,1,0,0,1,0-2H20a1,1,0,0,1,0,2Z"/> </svg> </div> <span class="lesson-title">Classification Techniques</span> <span class="lesson-duration">40 min</span> </div> <div class="lesson"> <div class="lesson-icon"> <svg viewBox="0 0 24 24" fill="currentColor"> <path d="M12,22A10,10,0,1,1,22,12,10.011,10.011,0,0,1,12,22Z" opacity=".5"/> <path d="M12,7a1,1,0,0,0-1,1v5a1,1,0,0,0,.293.707l3,3a1,1,0,0,0,1.414-1.414L13,12.586V8A1,1,0,0,0,12,7Z"/> </svg> </div> <span class="lesson-title">Model Evaluation & Validation</span> <span class="lesson-duration">50 min</span> </div> <button class="start-btn"> Start Module <svg viewBox="0 0 24 24" fill="currentColor"> <path d="M5,13h11.86l-3.63,4.36a1,1,0,0,0,1.54,1.28l5-6a1.19,1.19,0,0,0,.09-.15c0-.05.05-.08.07-.13A1,1,0,0,0,20,12a1,1,0,0,0-.07-.36c0-.05-.05-.08-.07-.13a1.19,1.19,0,0,0-.09-.15l-5-6A1,1,0,0,0,14,5a1,1,0,0,0-.64.23A1,1,0,0,0,13.23,7L16.86,11H5a1,1,0,0,0,0,2Z"/> </svg> </button> </div> </div> </li> <li class="accordion-item module-4"> <div class="accordion-header"> <div class="module-icon"> <svg viewBox="0 0 24 24" fill="currentColor"> <path d="M18.73,14.67h0a1,1,0,0,0-1.41,0L13,19V11a1,1,0,0,0-2,0v8l-4.36-4.36a1,1,0,0,0-1.41,1.41l6.07,6.07a1,1,0,0,0,1.41,0l6.07-6.07A1,1,0,0,0,18.73,14.67Z"/> <path d="M12,14a1,1,0,0,0,1-1V6l4.36,4.36a1,1,0,0,0,1.41-1.41L12.71,2.83a1,1,0,0,0-1.41,0L5.23,8.9A1,1,0,0,0,6.64,10.31L11,6v7A1,1,0,0,0,12,14Z" opacity=".5"/> </svg> </div> <div class="module-content"> <h3 class="module-title">Advanced Data Engineering</h3> <p class="module-description">Build scalable data pipelines and processing systems for large datasets</p> </div> <div class="expand-icon"></div> </div> <div class="accordion-content"> <div class="accordion-content-inner"> <div class="lesson"> <div class="lesson-icon"> <svg viewBox="0 0 24 24" fill="currentColor"> <path d="M12,2A10,10,0,1,0,22,12,10,10,0,0,0,12,2Zm0,18a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z" opacity=".5"/> <path d="M20,12h-8V4A8,8,0,0,1,20,12Z"/> </svg> </div> <span class="lesson-title">ETL Pipeline Development</span> <span class="lesson-duration">45 min</span> </div> <div class="lesson"> <div class="lesson-icon"> <svg viewBox="0 0 24 24" fill="currentColor"> <path d="M18,6V4.17A3.009,3.009,0,0,0,15.17,1H8.83A3.009,3.009,0,0,0,6,4.17V6Z" opacity=".5"/> <path d="M15,22H9a3.009,3.009,0,0,1-3-3V6H18V19A3.009,3.009,0,0,1,15,22Z"/> </svg> </div> <span class="lesson-title">Big Data Processing with Spark</span> <span class="lesson-duration">60 min</span> </div> <div class="lesson"> <div class="lesson-icon"> <svg viewBox="0 0 24 24" fill="currentColor"> <path d="M20,19H4a1,1,0,0,1-1-1V4A1,1,0,0,1,4,3H20a1,1,0,0,1,1,1V18A1,1,0,0,1,20,19Z" opacity=".5"/> <path d="M20,21H4a1,1,0,0,1,0-2H20a1,1,0,0,1,0,2Z"/> </svg> </div> <span class="lesson-title">Data Lake & Warehouse Architecture</span> <span class="lesson-duration">50 min</span> </div> <div class="lesson"> <div class="lesson-icon"> <svg viewBox="0 0 24 24" fill="currentColor"> <path d="M12,22A10,10,0,1,1,22,12,10.011,10.011,0,0,1,12,22Z" opacity=".5"/> <path d="M12,7a1,1,0,0,0-1,1v5a1,1,0,0,0,.293.707l3,3a1,1,0,0,0,1.414-1.414L13,12.586V8A1,1,0,0,0,12,7Z"/> </svg> </div> <span class="lesson-title">Streaming Data Processing</span> <span class="lesson-duration">40 min</span> </div> <button class="start-btn"> Start Module <svg viewBox="0 0 24 24" fill="currentColor"> <path d="M5,13h11.86l-3.63,4.36a1,1,0,0,0,1.54,1.28l5-6a1.19,1.19,0,0,0,.09-.15c0-.05.05-.08.07-.13A1,1,0,0,0,20,12a1,1,0,0,0-.07-.36c0-.05-.05-.08-.07-.13a1.19,1.19,0,0,0-.09-.15l-5-6A1,1,0,0,0,14,5a1,1,0,0,0-.64.23A1,1,0,
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>TechConf 2024 Schedule</title> <style> :root { --primary: #6366f1; --secondary: #a855f7; --accent: #ec4899; --light: #f9fafb; --dark: #1f2937; --success: #10b981; --warning: #f59e0b; --danger: #ef4444; --neutral: #6b7280; --neutral-light: #e5e7eb; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif; background: linear-gradient(135deg, #f5f7fa 0%, #e4e7ec 100%); color: var(--dark); line-height: 1.6; padding: 0; display: flex; justify-content: center; align-items: center; min-height: 100vh; overflow-x: hidden; overflow-y: auto; } .container { width: 100%; max-width: 700px; height: 100%; max-height: 700px; padding: 1rem; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: var(--primary) var(--neutral-light); } .container::-webkit-scrollbar { width: 6px; } .container::-webkit-scrollbar-track { background: var(--neutral-light); border-radius: 10px; } .container::-webkit-scrollbar-thumb { background-color: var(--primary); border-radius: 10px; } .header { text-align: center; margin-bottom: 2rem; position: sticky; top: 0; background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(10px); padding: 1rem 0; z-index: 50; border-radius: 0.75rem; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); } .header h1 { font-size: 2rem; font-weight: 800; margin-bottom: 0.5rem; background: linear-gradient(90deg, var(--primary), var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent; letter-spacing: -0.025em; } .header p { font-size: 1rem; color: var(--neutral); max-width: 80%; margin: 0 auto; } .date-navigator { display: flex; justify-content: center; margin: 1rem 0; gap: 0.5rem; overflow-x: auto; padding-bottom: 0.5rem; } .date-button { background: white; border: 1px solid var(--neutral-light); padding: 0.5rem 1rem; border-radius: 2rem; font-size: 0.875rem; font-weight: 600; cursor: pointer; transition: all 0.3s ease; white-space: nowrap; } .date-button:hover { transform: translateY(-2px); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); } .date-button.active { background: linear-gradient(90deg, var(--primary), var(--secondary)); color: white; border-color: transparent; } .accordion { margin-top: 1.5rem; border-radius: 0.75rem; overflow: hidden; } .time-slot { margin-bottom: 1rem; border-radius: 0.75rem; overflow: hidden; transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); } .time-slot:last-child { margin-bottom: 2rem; } .time-slot:hover { transform: translateY(-2px); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); } .time-header { display: flex; align-items: center; padding: 1rem 1.5rem; background: white; cursor: pointer; position: relative; z-index: 10; border-bottom: 1px solid var(--neutral-light); } .time-header.active { border-bottom-color: transparent; } .time-indicator { display: flex; flex-direction: column; align-items: center; margin-right: 1.5rem; min-width: 80px; } .time { font-size: 1.25rem; font-weight: 700; color: var(--primary); } .am-pm { font-size: 0.75rem; color: var(--neutral); text-transform: uppercase; font-weight: 600; } .session-title { font-size: 1.125rem; font-weight: 600; color: var(--dark); transition: color 0.3s ease; flex: 1; } .time-header.active .session-title { color: var(--primary); } .expand-icon { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--neutral-light); color: var(--dark); margin-left: 1rem; transition: all 0.3s ease; } .time-header.active .expand-icon { background: var(--primary); color: white; transform: rotate(180deg); } .time-content { max-height: 0; overflow: hidden; background: white; transition: max-height 0.5s cubic-bezier(0.16, 1, 0.3, 1); } .time-content-inner { padding: 0 1.5rem 1.5rem; } .speaker { display: flex; align-items: center; margin-bottom: 1rem; padding: 1rem; border-radius: 0.5rem; background: rgba(243, 244, 246, 0.5); transition: all 0.3s ease; } .speaker:hover { background: rgba(243, 244, 246, 1); transform: translateX(5px); } .speaker:last-child { margin-bottom: 0; } .speaker-image { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; margin-right: 1rem; border: 3px solid white; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); } .speaker-details { flex: 1; } .speaker-name { font-weight: 600; font-size: 1rem; margin-bottom: 0.25rem; color: var(--dark); } .speaker-role { font-size: 0.875rem; color: var(--neutral); margin-bottom: 0.5rem; } .speaker-topic { font-size: 0.875rem; color: var(--primary); font-weight: 600; } .tag { display: inline-block; padding: 0.25rem 0.75rem; border-radius: 2rem; font-size: 0.75rem; font-weight: 600; margin-right: 0.5rem; } .tag-keynote { background-color: rgba(236, 72, 153, 0.1); color: var(--accent); } .tag-workshop { background-color: rgba(16, 185, 129, 0.1); color: var(--success); } .tag-panel { background-color: rgba(245, 158, 11, 0.1); color: var(--warning); } .tag-breakout { background-color: rgba(99, 102, 241, 0.1); color: var(--primary); } .location { display: flex; align-items: center; margin-top: 0.25rem; font-size: 0.75rem; color: var(--neutral); } .location svg { width: 14px; height: 14px; margin-right: 0.25rem; } .timeline-indicator { position: relative; padding-left: 2rem; margin-top: 1rem; font-size: 0.875rem; color: var(--neutral); } .timeline-indicator::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: linear-gradient(to bottom, var(--primary), var(--secondary)); } .timeline-indicator::after { content: ""; position: absolute; left: -4px; top: 0.5rem; width: 10px; height: 10px; border-radius: 50%; background: white; border: 2px solid var(--primary); } .day-content { display: none; } .day-content.active { display: block; } .bookmark-btn { background: transparent; border: none; color: var(--neutral); cursor: pointer; padding: 0.5rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: all 0.3s ease; } .bookmark-btn:hover { background: rgba(243, 244, 246, 1); color: var(--primary); } .bookmark-btn.active { color: var(--warning); } .pulse { position: relative; } .pulse::after { content: 'Live'; position: absolute; top: -6px; right: -6px; background: var(--danger); color: white; font-size: 0.6rem; font-weight: 600; padding: 0.15rem 0.4rem; border-radius: 1rem; box-shadow: 0 0 0 rgba(239, 68, 68, 0.4); animation: pulse 2s infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); } 70% { box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); } 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); } } .bounce-in { animation: bounce-in 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275); } @keyframes bounce-in { 0% { opacity: 0; transform: scale(0.8); } 70% { transform: scale(1.05); } 100% { opacity: 1; transform: scale(1); } } .fade-in { animation: fade-in 0.4s ease-in; } @keyframes fade-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .current-session { position: relative; overflow: hidden; } .current-session::before { content: ""; position: absolute; left: 0; top: 0; width: 4px; height: 100%; background: var(--primary); animation: pulse-border 2s infinite; } @keyframes pulse-border { 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 1; } } @media (max-width: 480px) { .header h1 { font-size: 1.5rem; } .time-indicator { min-width: 60px; margin-right: 1rem; } .time { font-size: 1rem; } .speaker-image { width: 48px; height: 48px; } .speaker-name { font-size: 0.875rem; } .time-header { padding: 0.75rem 1rem; } .time-content-inner { padding: 0 1rem 1rem; } } </style> </head> <body> <div class="container"> <div class="header"> <h1>TechConf 2024</h1> <p>Navigate through our exciting lineup of speakers and sessions</p> </div> <div class="date-navigator"> <button class="date-button active" data-day="day1">Oct 15 (Day 1)</button> <button class="date-button" data-day="day2">Oct 16 (Day 2)</button> <button class="date-button" data-day="day3">Oct 17 (Day 3)</button> </div> <div class="accordion"> <!-- Day 1 Schedule --> <div id="day1" class="day-content active"> <div class="time-slot"> <div class="time-header current-session"> <div class="time-indicator"> <div class="time">9:00</div> <div class="am-pm">AM</div> </div> <div class="session-title">Opening Ceremony & Keynote</div> <div class="expand-icon">+</div> </div> <div class="time-content"> <div class="time-content-inner"> <div class="speaker"> <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Sara Chen" class="speaker-image pulse"> <div class="speaker-details"> <div class="speaker-name">Sara Chen</div> <div class="speaker-role">CTO, FutureTech Inc.</div> <div class="speaker-topic"> <span class="tag tag-keynote">Keynote</span> The Future of AI in Enterprise Development </div> <div class="location"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"> <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5a2.5 2.5 0 010-5 2.5 2.5 0 010 5z"/> </svg> Main Auditorium </div> </div> <button class="bookmark-btn"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"> <path d="M2 2v13.5a.5.5 0 0 0 .74.439L8 13.069l5.26 2.87A.5.5 0 0 0 14 15.5V2a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2z"/> </svg> </button> </div> <div class="timeline-indicator"> Explore how AI is transforming enterprise development pipelines and what this means for the future of software engineering. </div> </div> </div> </div> <div class="time-slot"> <div class="time-header"> <div class="time-indicator"> <div class="time">10:30</div> <div class="am-pm">AM</div> </div> <div class="session-title">Parallel Sessions</div> <div class="expand-icon">+</div> </div> <div class="time-content"> <div class="time-content-inner"> <div class="speaker"> <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Marcus Johnson" class="speaker-image"> <div class="speaker-details"> <div class="speaker-name">Marcus Johnson</div> <div class="speaker-role">Lead Developer, CloudScale</div> <div class="speaker-topic"> <span class="tag tag-workshop">Workshop</span> Serverless Architecture Patterns </div> <div class="location"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"> <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5a2.5 2.5 0 010-5 2.5 2.5 0 010 5z"/> </svg> Workshop Room A </div> </div> <button class="bookmark-btn"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"> <path d="M2 2v13.5a.5.5 0 0 0 .74.439L8 13.069l5.26 2.87A.5.5 0 0 0 14 15.5V2a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2z"/> </svg> </button> </div> <div class="speaker"> <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Aisha Patel" class="speaker-image"> <div class="speaker-details"> <div class="speaker-name">Aisha Patel</div> <div class="speaker-role">UX Research Director, DesignMatters</div> <div class="speaker-topic"> <span class="tag tag-breakout">Breakout</span> Ethical Design: Beyond Dark Patterns </div> <div class="location"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"> <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5a2.5 2.5 0 010-5 2.5 2.5 0 010 5z"/> </svg> Hall B </div> </div> <button class="bookmark-btn"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"> <path d="M2 2v13.5a.5.5 0 0 0 .74.439L8 13.069l5.26 2.87A.5.5 0 0 0 14 15.5V2a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2z"/> </svg> </button> </div> </div> </div> </div> <div class="time-slot"> <div class="time-header"> <div class="time-indicator"> <div class="time">1:00</div> <div class="am-pm">PM</div> </div> <div class="session-title">Networking Lunch</div> <div class="expand-icon">+</div> </div> <div class="time-content"> <div class="time-content-inner"> <div class="timeline-indicator"> Join your fellow attendees for a catered lunch with themed tables focused on different technology domains. A great opportunity to make new connections! </div> <div class="location" style="margin-top: 1rem"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"> <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5a2.5 2.5 0 010-5 2.5 2.5 0 010 5z"/> </svg> Grand Hall </div> </div> </div> </div> <div class="time-slot"> <div class="time-header"> <div class="time-indicator"> <div class="time">2:30</div> <div class="am-pm">PM</div> </div> <div class="session-title">Tech Leaders Panel</div> <div class="expand-icon">+</div> </div> <div class="time-content"> <div class="time-content-inner"> <div class="speaker"> <img src="https://randomuser.me/api/portraits/men/52.jpg" alt="David Wong" class="speaker-image"> <div class="speaker-details"> <div class="speaker-name">David Wong</div> <div class="speaker-role">VP Engineering, CodeCraft</div> <div class="speaker-topic"> <span class="tag tag-panel">Panel</span> Scaling Teams During Hypergrowth </div> <div class="location"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"> <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5a2.5 2.5 0 010-5 2.5 2.5 0 010 5z"/> </svg> Main Auditorium </div> </div> <button class="bookmark-btn"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"> <path d="M2 2v13.5a.5.5 0 0 0 .74.439L8 13.069l5.26 2.87A.5.5 0 0 0 14 15.5V2a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2z"/> </svg> </button> </div> <div class="timeline-indicator"> Join tech leaders from different industries as they discuss strategies for managing engineering teams during periods of rapid growth. Learn practical approaches to maintaining culture, quality, and velocity. </div> </div> </div> </div> <div class="time-slot"> <div class="time-header"> <div class="time-indicator"> <div class="time">4:00</div> <div class="am-pm">PM</div> </div> <div class="session-title">Demo Showcase</div> <div class="expand-icon">+</div> </div> <div class="time-content"> <div class="time-content-inner"> <div class="speaker"> <img src="https://randomuser.me/api/portraits/women/22.jpg" alt="Elena Rodriguez" class="speaker-image"> <div class="speaker-details"> <div class="speaker-name">Elena Rodriguez</div> <div class="speaker-role">Product Lead, Quantum Innovations</div> <div class="speaker-topic"> <span class="tag tag-workshop">Demo</span> Quantum Computing for Web Developers </div> <div class="location"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"> <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5a2.5 2.5 0 010-5 2.5 2.5 0 010 5z"/> </svg> Exhibition Hall </div> </div> <button class="bookmark-btn"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"> <path d="M2 2v13.5a.5.5 0 0 0 .74.439L8 13.069l5.26 2.87A.5.5 0 0 0 14 15.5V2a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2z"/> </svg> </button> </div> <div class="timeline-indicator"> An interactive showcase of practical quantum computing applications for web developers. See live demonstrations of quantum algorithms that could transform your approach to complex computational problems. </div> </div> </div> </div> </div> <!-- Day 2 Schedule --> <div id="day2" class="day-content"> <div class="time-slot"> <div class="time-header"> <div class="time-indicator"> <div class="time">9:30</div> <div class="am-pm">AM</div> </div> <div class="session-title">Technical Deep Dives</div> <div class="expand-icon">+</div> </div> <div class="time-content"> <div class="time-content-inner"> <div class="speaker"> <img src="https://randomuser.me/api/portraits/men/42.jpg" alt="James Wilson" class="speaker-image"> <div class="speaker-details"> <div class="speaker-name">James Wilson</div> <div class="speaker-role">Principal Engineer, DataStream</div> <div class="speaker-topic"> <span class="tag tag-workshop">Workshop</span> Event-Driven Microservices at Scale </div> <div class="location"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"> <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5a2.5 2.5 0 010-5 2.5 2.5 0 010 5z"/> </svg> Workshop Room C </div> </div> <button class="bookmark-btn"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"> <path d="M2 2v13.5a.5.5 0 0 0 .74.439L8 13.069l5.26 2.87A.5.5 0 0 0 14 15.5V2a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2z"/> </svg> </button> </div> <div class="speaker"> <img src="https://randomuser.me/api/portraits/women/33.jpg" alt="Naomi Kim" class="speaker-image"> <div class="speaker-details"> <div class="speaker-name">Naomi Kim</div> <div class="speaker-role">Security Architect, SecureEdge</div> <div class="speaker-topic"> <span class="tag tag-breakout">Breakout</span> Zero Trust Architecture Implementation </div> <div class="location"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"> <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5a2.5 2.5 0 010-5 2.5 2.5 0 010 5z"/> </svg> Hall A </div> </div> <button class="bookmark-btn"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"> <path d="M2 2v13.5a.5.5 0 0 0 .74.439L8 13.069l5.26 2.87A.5.5 0 0 0 14 15.5V2a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2z"/> </svg> </button> </div> </div> </div> </div> <div class="time-slot"> <div class="time-header"> <div class="time-indicator"> <div class="time">11:45</div> <div class="am-pm">AM</div> </div> <div class="session-title">Innovation Spotlight</div> <div class="expand-icon">+</div> </div> <div class="time-content"> <div class="time-content-inner"> <div class="speaker"> <img src="https://randomuser.me/api/portraits/men/87.jpg" alt="Raj Mehta" class="speaker-image"> <div class="speaker-details"> <div class="speaker-name">Raj Mehta</div> <div class="speaker-role">Founder, NeuralWorks</div> <div class="speaker-topic"> <span class="tag tag-keynote">Featured</span> Neuromorphic Computing for Edge Devices </div> <div class="location"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"> <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5a2.5 2.5 0 010-5 2.5 2.5 0 010 5z"/> </svg> Main Auditorium </div> </div> <button class="bookmark-btn"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"> <path d="M2 2v13.5a.5.5 0 0 0 .74.439L8 13.069l5.26 2.87A.5.5 0 0 0 14 15.5V2a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2z"/> </svg> </button> </div> <div class="timeline-indicator"> Discover how brain-inspired computing architectures are revolutionizing edge computing capabilities, bringing advanced AI to resource-constrained devices. </div> </div> </div> </div> <div class="time-slot"> <div class="time-header"> <div class="time-indicator"> <div class="time">2:00</div> <div class="am-pm">PM</div> </div> <div class="session-title">Hands-on Labs</div> <div class="expand-icon">+</div> </div> <div class="time-content"> <div class="time-content-inner"> <div class="speaker"> <img src="https://randomuser.me/api/portraits/women/75.jpg" alt="Olivia Martinez" class="speaker-image"> <div class="speaker-details"> <div class="speaker-name">Olivia Martinez</div> <div class="speaker-role">Developer Advocate, CloudNative</div> <div class="speaker-topic"> <span class="tag tag-workshop">Lab</span> Building Observable Distributed Systems </div> <div class="location"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"> <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5a2.5 2.5 0 010-5 2.5 2.5 0 010 5z"/> </svg> Computer Lab 1
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Cuisine Explorer</title> <style> :root { --primary: #FF6B35; --secondary: #2E294E; --light: #FFF8F0; --accent1: #C0D6DF; --accent2: #4F6D7A; --text-dark: #1A1423; --shadow: rgba(0, 0, 0, 0.2); } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Helvetica Neue', Arial, sans-serif; } body { background-color: var(--light); color: var(--text-dark); height: 100%; overflow: hidden; width: 100%; display: flex; justify-content: center; align-items: center; } .container { width: 700px; height: 700px; display: flex; flex-direction: column; position: relative; } .header { text-align: center; padding: 20px 0; background: linear-gradient(to right, var(--primary), #FF9259); border-radius: 12px 12px 0 0; box-shadow: 0 4px 15px var(--shadow); position: relative; z-index: 10; margin-bottom: -10px; } .header h1 { font-size: 2.2rem; color: white; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3); margin-bottom: 5px; font-weight: 700; } .header p { color: rgba(255, 255, 255, 0.9); font-weight: 300; } .accordion-container { display: flex; height: 550px; width: 100%; overflow: hidden; border-radius: 0 0 12px 12px; box-shadow: 0 8px 30px var(--shadow); } .accordion-panel { position: relative; flex: 1; overflow: hidden; transition: flex 0.6s cubic-bezier(0.76, 0, 0.24, 1); cursor: pointer; display: flex; align-items: flex-end; border-right: 1px solid rgba(255, 255, 255, 0.3); } .accordion-panel:last-child { border-right: none; } .accordion-panel.active { flex: 6; } .accordion-panel .background { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-size: cover; background-position: center; transition: transform 0.6s ease-out, filter 0.6s ease; filter: brightness(0.7); } .accordion-panel:hover .background:not(.active .background) { filter: brightness(0.9); transform: scale(1.05); } .accordion-panel.active .background { filter: brightness(0.85); transform: scale(1); } .accordion-panel .title { writing-mode: vertical-lr; transform: rotate(180deg); color: white; font-size: 1.8rem; font-weight: 600; padding: 20px 15px; background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent); width: 100%; transition: all 0.3s ease; height: 100%; display: flex; align-items: center; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6); z-index: 2; position: relative; } .accordion-panel.active .title { writing-mode: horizontal-tb; transform: rotate(0); font-size: 2rem; padding: 20px; height: auto; background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 30%, transparent); } .menu-content { position: absolute; bottom: 0; left: 0; width: 100%; padding: 20px; color: white; background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 40%, transparent); transform: translateY(100%); transition: transform 0.5s ease-out; z-index: 1; } .accordion-panel.active .menu-content { transform: translateY(0); } .menu-item { margin-bottom: 15px; display: flex; justify-content: space-between; border-bottom: 1px dashed rgba(255, 255, 255, 0.3); padding-bottom: 10px; opacity: 0; transform: translateY(20px); transition: opacity 0.4s ease, transform 0.4s ease; } .accordion-panel.active .menu-item { opacity: 1; transform: translateY(0); } .accordion-panel.active .menu-item:nth-child(1) { transition-delay: 0.1s; } .accordion-panel.active .menu-item:nth-child(2) { transition-delay: 0.2s; } .accordion-panel.active .menu-item:nth-child(3) { transition-delay: 0.3s; } .accordion-panel.active .menu-item:nth-child(4) { transition-delay: 0.4s; } .menu-item h3 { font-weight: 500; margin-bottom: 5px; font-size: 1.1rem; } .menu-item p { font-size: 0.9rem; opacity: 0.9; max-width: 80%; } .menu-item .price { font-weight: 700; color: var(--primary); font-size: 1.2rem; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8); } .ingredient-tag { display: inline-block; background-color: rgba(255, 107, 53, 0.8); padding: 3px 8px; border-radius: 20px; font-size: 0.7rem; margin-right: 5px; margin-top: 5px; } .special-marker { display: inline-block; margin-left: 10px; background: linear-gradient(to right, #FFD700, #FFA500); color: var(--text-dark); padding: 2px 8px; border-radius: 4px; font-size: 0.7rem; font-weight: 700; transform: rotate(-2deg); box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3); } .pulsing-dot { position: absolute; top: 15px; right: 15px; width: 10px; height: 10px; background-color: #FFD700; border-radius: 50%; z-index: 3; opacity: 0; } .accordion-panel.active .pulsing-dot { animation: pulse 1.5s infinite; opacity: 1; } @keyframes pulse { 0% { transform: scale(0.8); box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.7); } 70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(255, 215, 0, 0); } 100% { transform: scale(0.8); box-shadow: 0 0 0 0 rgba(255, 215, 0, 0); } } .instructions { text-align: center; margin-top: 15px; color: var(--accent2); font-style: italic; font-size: 0.9rem; } @media (max-width: 700px) { .container { width: 100%; height: 650px; } .header h1 { font-size: 1.8rem; } .accordion-container { height: 500px; } .accordion-panel .title { font-size: 1.4rem; padding: 15px 10px; } .accordion-panel.active .title { font-size: 1.6rem; } } @media (max-width: 500px) { .accordion-container { flex-direction: column; height: 500px; } .accordion-panel { border-right: none; border-bottom: 1px solid rgba(255, 255, 255, 0.3); } .accordion-panel .title { writing-mode: horizontal-tb; transform: none; padding: 10px; text-align: center; } .accordion-panel.active .menu-content { padding: 10px; } .menu-item { flex-direction: column; } .menu-item .price { margin-top: 5px; } } </style> </head> <body> <div class="container"> <div class="header"> <h1>World Flavors</h1> <p>Explore our globally inspired menu selections</p> </div> <div class="accordion-container"> <div class="accordion-panel active" data-cuisine="italian"> <div class="background" style="background-image: url('https://images.unsplash.com/photo-1595295333158-4742f28fbd85?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=880&q=80');"></div> <div class="pulsing-dot"></div> <div class="title">Italian Classics</div> <div class="menu-content"> <div class="menu-item"> <div> <h3>Truffle Mushroom Risotto <span class="special-marker">Chef's Choice</span></h3> <p>Arborio rice slowly simmered with wild mushrooms, finished with black truffle oil and aged Parmigiano-Reggiano</p> <span class="ingredient-tag">Vegetarian</span> <span class="ingredient-tag">Gluten-Free</span> </div> <div class="price">$26</div> </div> <div class="menu-item"> <div> <h3>Handcrafted Ravioli</h3> <p>House-made pasta pillows filled with ricotta and spinach, tossed in a brown butter sage sauce with toasted pine nuts</p> <span class="ingredient-tag">Vegetarian</span> </div> <div class="price">$24</div> </div> <div class="menu-item"> <div> <h3>Osso Buco</h3> <p>Slow-braised veal shanks with aromatic vegetables, served with saffron risotto and gremolata</p> </div> <div class="price">$32</div> </div> <div class="menu-item"> <div> <h3>Tiramisu</h3> <p>Layers of mascarpone cream, espresso-soaked ladyfingers, dusted with Valrhona cocoa powder</p> <span class="ingredient-tag">Contains Alcohol</span> </div> <div class="price">$12</div> </div> </div> </div> <div class="accordion-panel" data-cuisine="asian"> <div class="background" style="background-image: url('https://images.unsplash.com/photo-1569718212165-3a8278d5f624?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=880&q=80');"></div> <div class="pulsing-dot"></div> <div class="title">Asian Fusion</div> <div class="menu-content"> <div class="menu-item"> <div> <h3>Bao Trio <span class="special-marker">Popular</span></h3> <p>Three steamed buns with unique fillings: pork belly with pickled vegetables, spicy Korean fried chicken, and teriyaki mushroom</p> </div> <div class="price">$18</div> </div> <div class="menu-item"> <div> <h3>Yuzu Miso Black Cod</h3> <p>Marine Stewardship Council certified cod marinated for 72 hours in our house miso blend, served with pickled daikon and wasabi pea puree</p> </div> <div class="price">$34</div> </div> <div class="menu-item"> <div> <h3>Sichuan Dan Dan Noodles</h3> <p>Hand-pulled noodles tossed in a spicy Sichuan chili oil with minced pork, preserved vegetables, and toasted peanuts</p> <span class="ingredient-tag">Spicy</span> </div> <div class="price">$22</div> </div> <div class="menu-item"> <div> <h3>Matcha Mochi Cake</h3> <p>Warm mochi cake with premium Japanese matcha, served with black sesame ice cream</p> <span class="ingredient-tag">Vegetarian</span> </div> <div class="price">$14</div> </div> </div> </div> <div class="accordion-panel" data-cuisine="mediterranean"> <div class="background" style="background-image: url('https://images.unsplash.com/photo-1540189549336-e6e99c3679fe?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80');"></div> <div class="pulsing-dot"></div> <div class="title">Mediterranean</div> <div class="menu-content"> <div class="menu-item"> <div> <h3>Mezze Platter <span class="special-marker">Shareable</span></h3> <p>House-made hummus, baba ganoush, muhammara, warm pita, marinated olives, and pickled vegetables</p> <span class="ingredient-tag">Vegetarian Option</span> </div> <div class="price">$22</div> </div> <div class="menu-item"> <div> <h3>Grilled Branzino</h3> <p>Whole Mediterranean sea bass grilled with lemon and herbs, served with crispy fingerling potatoes and garlic aioli</p> </div> <div class="price">$36</div> </div> <div class="menu-item"> <div> <h3>Lamb Tagine</h3> <p>Slow-cooked Shenandoah Valley lamb with apricots, prunes, and toasted almonds, served with saffron couscous</p> </div> <div class="price">$30</div> </div> <div class="menu-item"> <div> <h3>Honey Pistachio Baklava</h3> <p>Layered phyllo dough with pistachios and walnuts, soaked in orange blossom honey syrup</p> <span class="ingredient-tag">Contains Nuts</span> </div> <div class="price">$10</div> </div> </div> </div> <div class="accordion-panel" data-cuisine="latin"> <div class="background" style="background-image: url('https://images.unsplash.com/photo-1615870216519-2f9fa575fa5c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80');"></div> <div class="pulsing-dot"></div> <div class="title">Latin American</div> <div class="menu-content"> <div class="menu-item"> <div> <h3>Elote Street Corn <span class="special-marker">House Favorite</span></h3> <p>Grilled corn on the cob smothered in chile-lime aioli, cotija cheese, tajin, and fresh cilantro</p> <span class="ingredient-tag">Vegetarian</span> </div> <div class="price">$12</div> </div> <div class="menu-item"> <div> <h3>Churrasco Skirt Steak</h3> <p>Grass-fed Argentine skirt steak with chimichurri, served with roasted potatoes and grilled vegetables</p> </div> <div class="price">$32</div> </div> <div class="menu-item"> <div> <h3>Mole Enchiladas</h3> <p>Handmade corn tortillas filled with braised chicken, covered in a 24-ingredient mole sauce, garnished with sesame seeds and queso fresco</p> </div> <div class="price">$24</div> </div> <div class="menu-item"> <div> <h3>Tres Leches Cake</h3> <p>Vanilla sponge cake soaked in three milks, topped with cinnamon-spiced whipped cream and fresh berries</p> </div> <div class="price">$11</div> </div> </div> </div> <div class="accordion-panel" data-cuisine="plantbased"> <div class="background" style="background-image: url('https://images.unsplash.com/photo-1512621776951-a57141f2eefd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=870&q=80');"></div> <div class="pulsing-dot"></div> <div class="title">Plant-Based</div> <div class="menu-content"> <div class="menu-item"> <div> <h3>Root Vegetable Tartare <span class="special-marker">Seasonal</span></h3> <p>Diced beets, carrots, and celery root with avocado, capers, mustard, and cold-pressed olive oil, served with house-made seed crackers</p> <span class="ingredient-tag">Vegan</span> <span class="ingredient-tag">Gluten-Free</span> </div> <div class="price">$16</div> </div> <div class="menu-item"> <div> <h3>Cauliflower "Steak"</h3> <p>Harissa-roasted cauliflower with tahini sauce, pomegranate seeds, and za'atar, served with freekeh pilaf</p> <span class="ingredient-tag">Vegan</span> </div> <div class="price">$22</div> </div> <div class="menu-item"> <div> <h3>Smoked Mushroom Ramen</h3> <p>House-made mushroom dashi with applewood smoked king oyster mushrooms, miso, tofu, seasonal vegetables, and ramen noodles</p> <span class="ingredient-tag">Vegan</span> </div> <div class="price">$20</div> </div> <div class="menu-item"> <div> <h3>Coconut Panna Cotta</h3> <p>Silky coconut milk panna cotta with passion fruit coulis, fresh mango, and toasted coconut flakes</p> <span class="ingredient-tag">Vegan</span> <span class="ingredient-tag">Gluten-Free</span> </div> <div class="price">$12</div> </div> </div> </div> </div> <div class="instructions">Tap or click a cuisine to explore menu items</div> </div> <script> document.addEventListener('DOMContentLoaded', function() { const panels = document.querySelectorAll('.accordion-panel'); panels.forEach(panel => { panel.addEventListener('click', () => { panels.forEach(p => p.classList.remove('active')); panel.classList.add('active'); }); // Pre-load background images for smoother transitions const bgUrl = panel.querySelector('.background').style.backgroundImage.slice(4, -1).replace(/"/g, ""); const img = new Image(); img.src = bgUrl; }); // Add touch events for mobile devices panels.forEach(panel => { panel.addEventListener('touchstart', function(e) { // Prevent default only if this panel isn't already active if (!panel.classList.contains('active')) { e.preventDefault(); } }, { passive: false }); panel.addEventListener('touchend', function() { panels.forEach(p => p.classList.remove('active')); panel.classList.add('active'); }); }); // Initialize with a random panel active (except the first time) if (sessionStorage.getItem('visited') !== 'true') { sessionStorage.setItem('visited', 'true'); } else { const randomIndex = Math.floor(Math.random() * panels.length); panels.forEach(p => p.classList.remove('active')); panels[randomIndex].classList.add('active'); } // Add subtle mouse parallax effect to backgrounds document.addEventListener('mousemove', function(e) { const activePanel = document.querySelector('.accordion-panel.active'); if (activePanel) { const background = activePanel.querySelector('.background'); const mouseX = e.clientX / window.innerWidth; const mouseY = e.clientY / window.innerHeight; // Subtle movement based on mouse position background.style.transform = `scale(1.05) translate(${mouseX * -10}px, ${mouseY * -10}px)`; } }); // Make the accordion container adapt to viewport changes function handleResize() { const container = document.querySelector('.container'); const accordionContainer = document.querySelector('.accordion-container'); if (window.innerWidth <= 500) { // Mobile layout (vertical accordion) container.style.height = '600px'; accordionContainer.style.height = '500px'; } else { // Desktop layout container.style.height = '700px'; accordionContainer.style.height = '550px'; } } window.addEventListener('resize', handleResize); handleResize(); // Initialize on load }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> :root { --primary-color: #4f46e5; --secondary-color: #10b981; --tertiary-color: #8b5cf6; --dark-color: #111827; --light-color: #f3f4f6; --accent-color: #f59e0b; --transition-speed: 0.5s; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif; background: linear-gradient(135deg, var(--dark-color), #1e1b4b); color: var(--light-color); height: 100vh; overflow: hidden; display: flex; justify-content: center; align-items: center; } .container { width: 650px; height: 650px; padding: 20px; display: flex; flex-direction: column; justify-content: center; position: relative; overflow: hidden; } .product-header { text-align: center; margin-bottom: 40px; position: relative; z-index: 2; } .product-header h1 { font-size: 2.8rem; font-weight: 800; background: linear-gradient(90deg, var(--primary-color), var(--tertiary-color)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 15px; position: relative; display: inline-block; } .product-header h1::after { content: ''; position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%); width: 80px; height: 3px; background: var(--secondary-color); border-radius: 10px; } .product-header p { font-size: 1.1rem; color: rgba(255, 255, 255, 0.8); max-width: 80%; margin: 0 auto; } .accordion-container { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 650px; margin: 0 auto; position: relative; z-index: 2; } .accordion-item { background: rgba(17, 24, 39, 0.7); border-radius: 10px; overflow: hidden; backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.1); transition: all var(--transition-speed); position: relative; } .accordion-item:hover { transform: translateY(-2px); box-shadow: 0 15px 25px rgba(0, 0, 0, 0.3); } .accordion-header { display: flex; align-items: center; padding: 20px; cursor: pointer; position: relative; z-index: 1; transition: background var(--transition-speed); } .accordion-item.active .accordion-header { background: rgba(79, 70, 229, 0.2); } .icon-wrapper { width: 50px; height: 50px; display: flex; justify-content: center; align-items: center; border-radius: 10px; margin-right: 15px; transition: all var(--transition-speed); position: relative; overflow: hidden; } .icon-wrapper::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, var(--primary-color), var(--tertiary-color)); border-radius: 10px; opacity: 0.3; transition: opacity var(--transition-speed); } .accordion-item.active .icon-wrapper::before, .accordion-item:hover .icon-wrapper::before { opacity: 1; } .feature-icon { width: 30px; height: 30px; position: relative; z-index: 2; filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.3)); transition: transform 0.3s ease; } .accordion-item.active .feature-icon, .accordion-item:hover .feature-icon { transform: scale(1.1); } .accordion-title { flex: 1; display: flex; flex-direction: column; } .accordion-title h3 { font-size: 1.2rem; font-weight: 600; margin-bottom: 5px; color: white; } .accordion-title .subtitle { font-size: 0.85rem; color: rgba(255, 255, 255, 0.6); } .accordion-arrow { width: 24px; height: 24px; display: flex; justify-content: center; align-items: center; color: var(--light-color); transform: rotate(0deg); transition: transform var(--transition-speed); } .accordion-item.active .accordion-arrow { transform: rotate(180deg); } .accordion-content { max-height: 0; overflow: hidden; transition: max-height var(--transition-speed) ease, padding var(--transition-speed) ease; padding: 0 20px; opacity: 0; transform: translateY(-10px); } .accordion-item.active .accordion-content { max-height: 300px; padding: 0 20px 20px; opacity: 1; transform: translateY(0); transition: max-height var(--transition-speed) ease, padding var(--transition-speed) ease, opacity var(--transition-speed) ease 0.2s, transform var(--transition-speed) ease 0.2s; } .content-inner { display: flex; gap: 20px; } .content-text { flex: 1; } .content-text p { margin-bottom: 15px; line-height: 1.6; color: rgba(255, 255, 255, 0.9); } .feature-benefits { list-style-type: none; margin-top: 15px; } .feature-benefits li { position: relative; padding-left: 25px; margin-bottom: 10px; font-size: 0.9rem; color: rgba(255, 255, 255, 0.8); } .feature-benefits li::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2310b981'%3E%3Cpath fill-rule='evenodd' d='M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z' clip-rule='evenodd'/%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; } .feature-visual { flex: 0 0 120px; display: flex; justify-content: center; align-items: center; position: relative; } .glow-effect { position: absolute; width: 100%; height: 100%; border-radius: 10px; background: linear-gradient(135deg, var(--primary-color), var(--tertiary-color)); opacity: 0.15; filter: blur(15px); z-index: 0; } .visual-content { position: relative; z-index: 1; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; } .visual-content img { max-width: 100%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 0 8px rgba(79, 70, 229, 0.5)); } /* Background Elements */ .bg-grid { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: radial-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px); background-size: 30px 30px; z-index: 0; } .bg-circle { position: absolute; border-radius: 50%; background: radial-gradient(circle, var(--tertiary-color) 0%, rgba(139, 92, 246, 0) 70%); opacity: 0.2; z-index: 0; } .circle-1 { width: 300px; height: 300px; top: -150px; right: -100px; } .circle-2 { width: 400px; height: 400px; bottom: -200px; left: -150px; background: radial-gradient(circle, var(--primary-color) 0%, rgba(79, 70, 229, 0) 70%); } /* Responsive Adjustments */ @media (max-width: 700px) { .container { width: 95%; height: auto; padding: 15px; } .product-header h1 { font-size: 2.2rem; } .product-header p { font-size: 1rem; } .content-inner { flex-direction: column; } .feature-visual { flex: 0 0 100px; width: 100%; } .accordion-container { max-width: 100%; } } @media (max-width: 500px) { .accordion-header { padding: 15px; } .icon-wrapper { width: 40px; height: 40px; } .feature-icon { width: 24px; height: 24px; } .accordion-title h3 { font-size: 1rem; } .accordion-title .subtitle { font-size: 0.8rem; } } /* Animations */ @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } @keyframes float { 0% { transform: translateY(0px); } 50% { transform: translateY(-8px); } 100% { transform: translateY(0px); } } .pulse { animation: pulse 3s infinite; } .float { animation: float 6s ease-in-out infinite; } </style> </head> <body> <div class="container"> <div class="bg-grid"></div> <div class="bg-circle circle-1"></div> <div class="bg-circle circle-2"></div> <div class="product-header"> <h1>NexusPro AI Suite</h1> <p>The next generation of intelligent workflow automation with advanced machine learning capabilities</p> </div> <div class="accordion-container"> <div class="accordion-item"> <div class="accordion-header"> <div class="icon-wrapper"> <svg class="feature-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M12 8V16" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M8 12H16" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </div> <div class="accordion-title"> <h3>Neural Processing Engine</h3> <span class="subtitle">Real-time ML inference with low latency</span> </div> <div class="accordion-arrow"> <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M6 9L12 15L18 9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </div> </div> <div class="accordion-content"> <div class="content-inner"> <div class="content-text"> <p>Our Neural Processing Engine utilizes dedicated hardware acceleration to deliver up to 10x faster inferencing speeds compared to traditional CPU-based systems.</p> <ul class="feature-benefits"> <li>Sub-millisecond response for critical applications</li> <li>Multi-model parallel processing capabilities</li> <li>Proprietary precision optimization for edge devices</li> </ul> </div> <div class="feature-visual"> <div class="glow-effect"></div> <div class="visual-content float"> <svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M50 10L90 30V70L50 90L10 70V30L50 10Z" stroke="#4f46e5" stroke-width="2" fill="rgba(79, 70, 229, 0.1)"/> <path d="M50 10V50M50 50V90M50 50L90 30M50 50L10 30M90 70L50 50M10 70L50 50" stroke="#4f46e5" stroke-width="2"/> <circle cx="50" cy="10" r="3" fill="#10b981"/> <circle cx="90" cy="30" r="3" fill="#10b981"/> <circle cx="90" cy="70" r="3" fill="#10b981"/> <circle cx="50" cy="90" r="3" fill="#10b981"/> <circle cx="10" cy="70" r="3" fill="#10b981"/> <circle cx="10" cy="30" r="3" fill="#10b981"/> <circle cx="50" cy="50" r="5" fill="#f59e0b"/> </svg> </div> </div> </div> </div> </div> <div class="accordion-item"> <div class="accordion-header"> <div class="icon-wrapper"> <svg class="feature-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M21 11.5C21.0034 12.8199 20.6951 14.1219 20.1 15.3C19.3944 16.7118 18.3098 17.8992 16.9674 18.7293C15.6251 19.5594 14.0782 19.9994 12.5 20C11.1801 20.0035 9.87812 19.6951 8.7 19.1L3 21L4.9 15.3C4.30493 14.1219 3.99656 12.8199 4 11.5C4.00061 9.92179 4.44061 8.37488 5.27072 7.03258C6.10083 5.69028 7.28825 4.6056 8.7 3.90003C9.87812 3.30496 11.1801 2.99659 12.5 3.00003H13C15.0843 3.11502 17.053 3.99479 18.5291 5.47089C20.0052 6.94699 20.885 8.91568 21 11V11.5Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </div> <div class="accordion-title"> <h3>Adaptive Interface System</h3> <span class="subtitle">Context-aware UI that evolves with user behavior</span> </div> <div class="accordion-arrow"> <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M6 9L12 15L18 9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </div> </div> <div class="accordion-content"> <div class="content-inner"> <div class="content-text"> <p>The Adaptive Interface System dynamically restructures your workspace based on usage patterns and predictive algorithms to maximize productivity and reduce friction.</p> <ul class="feature-benefits"> <li>Personalized command prioritization by user role</li> <li>Intelligent feature surfacing based on project context</li> <li>Workflow optimization through behavioral analysis</li> </ul> </div> <div class="feature-visual"> <div class="glow-effect"></div> <div class="visual-content pulse"> <svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg"> <rect x="15" y="15" width="30" height="30" rx="4" fill="rgba(79, 70, 229, 0.2)" stroke="#4f46e5" stroke-width="2"/> <rect x="55" y="15" width="30" height="30" rx="4" fill="rgba(16, 185, 129, 0.2)" stroke="#10b981" stroke-width="2"/> <rect x="15" y="55" width="30" height="30" rx="4" fill="rgba(139, 92, 246, 0.2)" stroke="#8b5cf6" stroke-width="2"/> <rect x="55" y="55" width="30" height="30" rx="4" fill="rgba(245, 158, 11, 0.2)" stroke="#f59e0b" stroke-width="2"/> <path d="M30 30L70 70" stroke="white" stroke-width="1" stroke-dasharray="2 2"/> <path d="M70 30L30 70" stroke="white" stroke-width="1" stroke-dasharray="2 2"/> <circle cx="30" cy="30" r="5" fill="#4f46e5"/> <circle cx="70" cy="30" r="5" fill="#10b981"/> <circle cx="30" cy="70" r="5" fill="#8b5cf6"/> <circle cx="70" cy="70" r="5" fill="#f59e0b"/> </svg> </div> </div> </div> </div> </div> <div class="accordion-item"> <div class="accordion-header"> <div class="icon-wrapper"> <svg class="feature-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M19.4 15C19.2669 15.3016 19.2272 15.6362 19.286 15.9606C19.3448 16.285 19.4995 16.5843 19.73 16.82L19.79 16.88C19.976 17.0657 20.1235 17.2863 20.2241 17.5291C20.3248 17.7719 20.3766 18.0322 20.3766 18.295C20.3766 18.5578 20.3248 18.8181 20.2241 19.0609C20.1235 19.3037 19.976 19.5243 19.79 19.71C19.6043 19.896 19.3837 20.0435 19.1409 20.1441C18.8981 20.2448 18.6378 20.2966 18.375 20.2966C18.1122 20.2966 17.8519 20.2448 17.6091 20.1441C17.3663 20.0435 17.1457 19.896 16.96 19.71L16.9 19.65C16.6643 19.4195 16.365 19.2648 16.0406 19.206C15.7162 19.1472 15.3816 19.1869 15.08 19.32C14.7842 19.4468 14.532 19.6572 14.3543 19.9255C14.1766 20.1938 14.0813 20.5082 14.08 20.83V21C14.08 21.5304 13.8693 22.0391 13.4942 22.4142C13.1191 22.7893 12.6104 23 12.08 23C11.5496 23 11.0409 22.7893 10.6658 22.4142C10.2907 22.0391 10.08 21.5304 10.08 21V20.91C10.0723 20.579 9.96512 20.258 9.77251 19.9887C9.5799 19.7194 9.31074 19.5143 9 19.4C8.69838 19.2669 8.36381 19.2272 8.03941 19.286C7.71502 19.3448 7.41568 19.4995 7.18 19.73L7.12 19.79C6.93425 19.976 6.71368 20.1235 6.47088 20.2241C6.22808 20.3248 5.96783 20.3766 5.705 20.3766C5.44217 20.3766 5.18192 20.3248 4.93912 20.2241C4.69632 20.1235 4.47575 19.976 4.29 19.79C4.10405 19.6043 3.95653 19.3837 3.85588 19.1409C3.75523 18.8981 3.70343 18.6378 3.70343 18.375C3.70343 18.1122 3.75523 17.8519 3.85588 17.6091C3.95653 17.3663 4.10405 17.1457 4.29 16.96L4.35 16.9C4.58054 16.6643 4.73519 16.365 4.794 16.0406C4.85282 15.7162 4.81312 15.3816 4.68 15.08C4.55324 14.7842 4.34276 14.532 4.07447 14.3543C3.80618 14.1766 3.49179 14.0813 3.17 14.08H3C2.46957 14.08 1.96086 13.8693 1.58579 13.4942C1.21071 13.1191 1 12.6104 1 12.08C1 11.5496 1.21071 11.0409 1.58579 10.6658C1.96086 10.2907 2.46957 10.08 3 10.08H3.09C3.42099 10.0723 3.742 9.96512 4.0113 9.77251C4.28059 9.5799 4.48572 9.31074 4.6 9C4.73312 8.69838 4.77282 8.36381 4.714 8.03941C4.65519 7.71502 4.50054 7.41568 4.27 7.18L4.21 7.12C4.02405 6.93425 3.87653 6.71368 3.77588 6.47088C3.67523 6.22808 3.62343 5.96783 3.62343 5.705C3.62343 5.44217 3.67523 5.18192 3.77588 4.93912C3.87653 4.69632 4.02405 4.47575 4.21 4.29C4.39575 4.10405 4.61632 3.95653 4.85912 3.85588C5.10192 3.75523 5.36217 3.70343 5.625 3.70343C5.88783 3.70343 6.14808 3.75523 6.39088 3.85588C6.63368 3.95653 6.85425 4.10405 7.04 4.29L7.1 4.35C7.33568 4.58054 7.63502 4.73519 7.95941 4.794C8.28381 4.85282 8.61838 4.81312 8.92 4.68H9C9.29577 4.55324 9.54802 4.34276 9.72569 4.07447C9.90337 3.80618 9.99872 3.49179 10 3.17V3C10 2.46957 10.2107 1.96086 10.5858 1.58579C10.9609 1.21071 11.4696 1 12 1C12.5304 1 13.0391 1.21071 13.4142 1.58579C13.7893 1.96086 14 2.46957 14 3V3.09C14.0013 3.41179 14.0966 3.72618 14.2743 3.99447C14.452 4.26276 14.7042 4.47324 15 4.6C15.3016 4.73312 15.6362 4.77282 15.9606 4.714C16.285 4.65519 16.5843 4.50054 16.82 4.27L16.88 4.21C17.0657 4.02405 17.2863 3.87653 17.5291 3.77588C17.7719 3.67523 18.0322 3.62343 18.295 3.62343C18.5578 3.62343 18.8181 3.67523 19.0609 3.77588C19.3037 3.87653 19.5243 4.02405 19.71 4.21C19.896 4.39575 20.0435 4.61632 20.1441 4.85912C20.2448 5.10192 20.2966 5.36217 20.2966 5.625C20.2966 5.88783 20.2448 6.14808 20.1441 6.39088C20.0435 6.63368 19.896 6.85425 19.71 7.04L19.65 7.1C19.4195 7.33568 19.2648 7.63502 19.206 7.95941C19.1472 8.28381 19.1869 8.61838 19.32 8.92V9C19.4468 9.29577 19.6572 9.54802 19.9255 9.72569C20.1938 9.90337 20.5082 9.99872 20.83 10H21C21.5304 10 22.0391 10.2107 22.4142 10.5858C22.7893 10.9609 23 11.4696 23 12C23 12.5304 22.7893 13.0391 22.4142 13.4142C22.0391 13.7893 21.5304 14 21 14H20.91C20.5882 14.0013 20.2738 14.0966 20.0055 14.2743C19.7372 14.452 19.5268 14.7042 19.4 15Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </div> <div class="accordion-title"> <h3>Quantum Workflow Engine</h3> <span class="subtitle">Parallelized task processing with predictive completion</span> </div> <div class="accordion-arrow"> <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M6 9L12 15L18 9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </div> </div> <div class="accordion-content"> <div class="content-inner"> <div class="content-text"> <p>Our Quantum Workflow Engine leverages distributed computing architecture to process complex task chains simultaneously, while predicting and pre-computing likely next steps.</p> <ul class="feature-benefits"> <li>Reduces complex workflow completion time by up to 73%</li> <li>Smart dependency resolution eliminates bottlenecks</li> <li>Self-optimizing resource allocation based on task priority</li> </ul> </div> <div class="feature-visual"> <div class="glow-effect"></div> <div class="visual-content float"> <svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M10 50H30M30 50V30M30 50V70" stroke="#4f46e5" stroke-width="2"/> <path d="M70 50H90M70 50V30M70 50V70" stroke="#4f46e5" stroke-width="2"/> <path d="M50 10V30M50 30H30M50 30H70" stroke="#10b981" stroke-width="2"/> <path d="M50 90V70M50 70H30M50 70H70" stroke="#10b981" stroke-width="2"/> <rect x="42" y="42" width="16" height="16" rx="2" fill="rgba(245, 158, 11, 0.3)" stroke="#f59e0b" stroke-width="2"/> <circle cx="30" cy="30" r="5" fill="#8b5cf6"/> <circle cx="70" cy="30" r="5" fill="#8b5cf6"/> <circle cx="30" cy="70" r="5" fill="#8b5cf6"/> <circle cx="70" cy="70" r="5" fill="#8b5cf6"/> <circle cx="50" cy="50" r="3" fill="white"/> </svg> </div> </div> </div> </div> </div> <div class="accordion-item"> <div class="accordion-header"> <div class="icon-wrapper"> <svg class="feature-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M10 13C10.5523 13 11 12.5523 11 12C11 11.4477 10.5523 11 10 11C9.44772 11 9 11.4477 9 12C9 12.5523 9.44772 13 10 13Z" fill="white" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M14 13C14.5523 13 15 12.5523 15 12C15 11.4477 14.5523 11 14 11C13.4477 11 13 11.4477 13 12C13 12.5523 13.4477 13 14 13Z" fill="white" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M21 12C21 13.1819 20.7672 14.3522 20.3149 15.4442C19.8626 16.5361 19.1997 17.5282 18.364 18.364C17.5282 19.1997 16.5361 19.8626 15.4442 20.3149C14.3522 20.7672 13.1819 21 12 21C10.8181 21 9.64778 20.7672 8.55585 20.3149C7.46392 19.8626 6.47177 19.1997 5.63604 18.364C4.80031 17.5282 4.13738 16.5361 3.68508 15.4442C3.23279 14.3522 3 13.1819 3 12C3 9.61305 3.94821 7.32387 5.63604 5.63604C7.32387 3.94821 9.61305 3 12 3C14.3869 3 16.6761 3.94821 18.364 5.63604C20.0518 7.32387 21 9.61305 21 12Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </div> <div class="accordion-title"> <h3>Sentiment Analysis Framework</h3> <span class="subtitle">Deep contextual understanding of communication</span> </div> <div class="accordion-arrow"> <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M6 9L12 15L18 9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </div> </div> <div class="accordion-content"> <div class="content-inner"> <div class="content-text"> <p>Our Sentiment Analysis Framework goes beyond keyword spotting to comprehend emotional nuance, cultural context, and interpersonal dynamics in all communications.</p> <ul class="feature-benefits"> <li>98.7% accuracy in detecting subtle emotional cues</li> <li>Cross-cultural sensitivity with 43 regional adaptation models</li> <li>Proprietary tone-matching algorithms for response generation</li> </ul> </div> <div class="feature-visual"> <div class="glow-effect"></div> <div class="visual-content pulse"> <svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M20 40C20 28.954 28.954 20 40 20H60C71.046 20 80 28.954 80 40V60C80 71.046 71.046 80 60 80H40C28.954 80 20 71.046 20 60V40Z" stroke="#4f46e5" stroke-width="2" fill="rgba(79, 70, 229, 0.1)"/> <path d="M35 45C36.6569 45 38
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Lumière Art Gallery</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Helvetica Neue', Arial, sans-serif; } body { background-color: #f8f7f4; color: #333; display: flex; justify-content: center; align-items: center; min-height: 700px; padding: 20px; overflow-x: hidden; } .gallery-container { width: 100%; max-width: 680px; margin: 0 auto; } .gallery-header { text-align: center; margin-bottom: 30px; } .gallery-header h1 { font-size: 24px; font-weight: 300; letter-spacing: 4px; color: #222; margin-bottom: 8px; position: relative; display: inline-block; } .gallery-header h1::after { content: ""; position: absolute; width: 30px; height: 1px; background: #222; bottom: -10px; left: 50%; transform: translateX(-50%); } .gallery-header p { font-size: 14px; color: #666; font-weight: 300; margin-top: 20px; max-width: 500px; margin-left: auto; margin-right: auto; line-height: 1.6; } .accordion { display: flex; width: 100%; height: 450px; position: relative; overflow: hidden; border-radius: 2px; box-shadow: 0 5px 25px rgba(0, 0, 0, 0.05); } .panel { position: relative; flex: 1; overflow: hidden; transition: all 0.7s cubic-bezier(0.25, 1, 0.3, 1); cursor: pointer; border-right: 1px solid rgba(255, 255, 255, 0.2); } .panel:last-child { border-right: none; } .panel-background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; filter: grayscale(60%); transition: all 0.7s cubic-bezier(0.25, 1, 0.3, 1), filter 0.5s ease; transform: scale(1.1); } .panel.active { flex: 6; } .panel.active .panel-background { filter: grayscale(0%); transform: scale(1); } .panel.active .artist-info { opacity: 1; transform: translateY(0); transition-delay: 0.2s; } .panel.active .artist-name { opacity: 0; } .artist-name { position: absolute; bottom: 0; left: 0; width: 100%; padding: 20px; color: white; background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent); transform: rotate(-90deg); transform-origin: 0 100%; font-size: 18px; letter-spacing: 2px; white-space: nowrap; transition: opacity 0.3s ease; opacity: 1; pointer-events: none; } .artist-info { position: absolute; bottom: 0; left: 0; width: 100%; padding: 30px; color: white; background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent); opacity: 0; transform: translateY(20px); transition: all 0.5s ease; } .artist-info h3 { font-size: 22px; font-weight: 300; margin-bottom: 5px; letter-spacing: 1px; } .artist-info h4 { font-size: 16px; font-weight: 300; margin-bottom: 15px; color: rgba(255, 255, 255, 0.8); } .artist-info p { font-size: 14px; line-height: 1.5; margin-bottom: 15px; max-width: 400px; } .view-button { display: inline-block; color: white; border: 1px solid rgba(255, 255, 255, 0.6); padding: 8px 16px; font-size: 12px; letter-spacing: 1px; text-decoration: none; transition: all 0.3s ease; background-color: transparent; cursor: pointer; } .view-button:hover { background-color: white; color: #222; } .attribution { position: absolute; bottom: 10px; right: 10px; font-size: 10px; color: rgba(255, 255, 255, 0.5); pointer-events: none; } .cursor-dot { position: fixed; width: 40px; height: 40px; border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; transition: width 0.3s, height 0.3s, background-color 0.3s; z-index: 9999; mix-blend-mode: difference; } @media (max-width: 768px) { .accordion { height: 400px; } .artist-info { padding: 20px; } .artist-info h3 { font-size: 18px; } .artist-info p { font-size: 12px; } } @media (max-width: 600px) { .accordion { height: 350px; flex-direction: column; } .panel { flex: 1; height: 60px; border-right: none; border-bottom: 1px solid rgba(255, 255, 255, 0.2); } .panel.active { flex: 6; } .artist-name { transform: rotate(0); transform-origin: center; background: rgba(0, 0, 0, 0.4); text-align: center; } } </style> </head> <body> <div class="cursor-dot"></div> <div class="gallery-container"> <div class="gallery-header"> <h1>LUMIÈRE</h1> <p>A showcase of contemporary artists who explore the interplay between light, shadow, and human perception. Each piece invites viewers to question their relationship with space and time.</p> </div> <div class="accordion"> <div class="panel active"> <div class="panel-background" style="background-image: url('https://images.unsplash.com/photo-1544967082-d9d25d867d66?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80')"></div> <div class="artist-name">Yayoi Kusama</div> <div class="artist-info"> <h3>Yayoi Kusama</h3> <h4>Infinity Mirrored Room, 2018</h4> <p>Kusama's immersive installations use mirrors and LED lights to create infinite space, challenging our perception of boundaries and self. This room captures her signature exploration of cosmic infinity.</p> <button class="view-button">VIEW COLLECTION</button> <div class="attribution">Installation view at Lumière Gallery</div> </div> </div> <div class="panel"> <div class="panel-background" style="background-image: url('https://images.unsplash.com/photo-1576504585989-c6211dda9993?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80')"></div> <div class="artist-name">James Turrell</div> <div class="artist-info"> <h3>James Turrell</h3> <h4>Ganzfeld: Double Vision, 2021</h4> <p>Turrell manipulates light and space to create works that engage viewers with the limits and possibilities of human perception. This piece produces a visual field devoid of depth cues.</p> <button class="view-button">VIEW COLLECTION</button> <div class="attribution">Installation view at Lumière Gallery</div> </div> </div> <div class="panel"> <div class="panel-background" style="background-image: url('https://images.unsplash.com/photo-1552652893-2aa10a0ab4df?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80')"></div> <div class="artist-name">Olafur Eliasson</div> <div class="artist-info"> <h3>Olafur Eliasson</h3> <h4>Weather Project Revisited, 2020</h4> <p>Eliasson's large-scale installation uses monofrequency lights, projection foil, and mist machines to create an artificial sun, inviting visitors to reconsider their relationship with natural phenomena.</p> <button class="view-button">VIEW COLLECTION</button> <div class="attribution">Installation view at Lumière Gallery</div> </div> </div> <div class="panel"> <div class="panel-background" style="background-image: url('https://images.unsplash.com/photo-1571115764595-644a1f56a55c?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80')"></div> <div class="artist-name">Ryoji Ikeda</div> <div class="artist-info"> <h3>Ryoji Ikeda</h3> <h4>Datamatics 2.0, 2022</h4> <p>Ikeda's audiovisual composition converts pure data into monochrome geometric patterns and pulsating electronic soundscapes, exploring the materiality of information in the digital age.</p> <button class="view-button">VIEW COLLECTION</button> <div class="attribution">Installation view at Lumière Gallery</div> </div> </div> <div class="panel"> <div class="panel-background" style="background-image: url('https://images.unsplash.com/photo-1563089145-599997674d42?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80')"></div> <div class="artist-name">teamLab</div> <div class="artist-info"> <h3>teamLab</h3> <h4>Flowers and People, 2023</h4> <p>This digital installation by the art collective responds to human presence, with blooming and withering flowers that react to movement, blurring the boundary between artwork and audience.</p> <button class="view-button">VIEW COLLECTION</button> <div class="attribution">Installation view at Lumière Gallery</div> </div> </div> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { const panels = document.querySelectorAll('.panel'); const cursorDot = document.querySelector('.cursor-dot'); // Custom cursor document.addEventListener('mousemove', function(e) { window.requestAnimationFrame(function() { cursorDot.style.left = e.clientX + 'px'; cursorDot.style.top = e.clientY + 'px'; }); }); // Hide cursor when it leaves the window document.addEventListener('mouseout', function() { cursorDot.style.opacity = '0'; }); document.addEventListener('mouseover', function() { cursorDot.style.opacity = '1'; }); // Panel interaction panels.forEach(panel => { panel.addEventListener('click', () => { removeActiveClasses(); panel.classList.add('active'); }); panel.addEventListener('mouseenter', () => { cursorDot.style.width = '60px'; cursorDot.style.height = '60px'; cursorDot.style.backgroundColor = 'rgba(255, 255, 255, 0.1)'; }); panel.addEventListener('mouseleave', () => { cursorDot.style.width = '40px'; cursorDot.style.height = '40px'; cursorDot.style.backgroundColor = 'transparent'; }); }); // View Collection button const viewButtons = document.querySelectorAll('.view-button'); viewButtons.forEach(button => { button.addEventListener('click', function(e) { e.stopPropagation(); // Create ripple effect const ripple = document.createElement('span'); ripple.classList.add('ripple'); this.appendChild(ripple); const buttonRect = this.getBoundingClientRect(); const diameter = Math.max(buttonRect.width, buttonRect.height); ripple.style.width = ripple.style.height = `${diameter}px`; ripple.style.left = `${e.clientX - buttonRect.left - diameter / 2}px`; ripple.style.top = `${e.clientY - buttonRect.top - diameter / 2}px`; setTimeout(() => { ripple.remove(); }, 600); // In a real app, this would navigate to the collection console.log('View collection clicked'); }); }); function removeActiveClasses() { panels.forEach(panel => { panel.classList.remove('active'); }); } // For mobile: handle touch events if ('ontouchstart' in window) { cursorDot.style.display = 'none'; panels.forEach(panel => { panel.addEventListener('touchstart', function(e) { removeActiveClasses(); this.classList.add('active'); e.preventDefault(); }); }); } // Initial animation - staggered opening setTimeout(() => { panels.forEach((panel, index) => { setTimeout(() => { panel.style.transition = 'all 0.7s cubic-bezier(0.25, 1, 0.3, 1)'; }, index * 100); }); }, 500); }); </script> </body> </html>
