In the world of web and app design, the hamburger menu icon has become a ubiquitous symbol for navigation. This simple yet effective design element can significantly enhance user experience by providing a clean and intuitive way to access menus.
From minimalist lines to creative animations, the versatility of the hamburger menu icon is impressive. Here, we explore 10 standout examples that showcase the best in design and functionality.
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
Designing your own hamburger menu icon has never been easier with Subframe. Its drag-and-drop interface and intuitive, responsive canvas ensure you create pixel-perfect UI every time. Loved by designers and developers alike, Subframe makes the design process seamless and efficient.
Start for free and experience the difference 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 stunning, pixel-perfect interfaces, including hamburger menu icons, in no time. Its drag-and-drop editor ensures efficiency and precision.
Don't wait! Start for free and begin designing immediately. Experience the ease and power of Subframe today!
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Minimalist Hamburger Menu</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; } body { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; min-height: 100vh; background-color: #f8f9fa; padding: 20px; transition: background-color 0.7s ease; } .dark-mode { background-color: #121212; color: #f8f9fa; } .app-container { width: 100%; max-width: 380px; height: 650px; border-radius: 24px; overflow: hidden; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); display: flex; flex-direction: column; background-color: #ffffff; position: relative; transition: box-shadow 0.3s ease, transform 0.3s ease, background-color 0.7s ease; } .dark-mode .app-container { background-color: #1e1e1e; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); } .app-header { padding: 18px 20px; display: flex; justify-content: space-between; align-items: center; background-color: #ffffff; position: relative; z-index: 100; border-bottom: 1px solid #f0f0f0; transition: background-color 0.7s ease, border-bottom 0.7s ease; } .dark-mode .app-header { background-color: #1e1e1e; border-bottom: 1px solid #333; } .app-title { font-size: 1.25rem; font-weight: 600; color: #333; transition: color 0.7s ease; } .dark-mode .app-title { color: #ffffff; } .hamburger-container { position: relative; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; cursor: pointer; border-radius: 50%; transition: background-color 0.3s ease; } .hamburger-container:hover { background-color: rgba(0, 0, 0, 0.04); } .dark-mode .hamburger-container:hover { background-color: rgba(255, 255, 255, 0.1); } .hamburger { width: 24px; height: 20px; position: relative; transform: rotate(0deg); transition: 0.5s ease-in-out; } .hamburger span { display: block; position: absolute; height: 2.5px; width: 100%; border-radius: 2px; opacity: 1; left: 0; transform: rotate(0deg); transition: 0.25s ease-in-out; background: linear-gradient(90deg, #4776E6 0%, #8E54E9 100%); } .dark-mode .hamburger span { background: linear-gradient(90deg, #5A88FF 0%, #AA78FF 100%); } .hamburger span:nth-child(1) { top: 0px; } .hamburger span:nth-child(2) { top: 8px; } .hamburger span:nth-child(3) { top: 16px; } .hamburger.open span:nth-child(1) { top: 8px; transform: rotate(135deg); } .hamburger.open span:nth-child(2) { opacity: 0; transform: translateX(-20px); } .hamburger.open span:nth-child(3) { top: 8px; transform: rotate(-135deg); } .navigation { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #ffffff; z-index: 99; display: flex; flex-direction: column; transform: translateY(-100%); transition: transform 0.5s cubic-bezier(0.77, 0, 0.175, 1); padding-top: 70px; overflow: hidden; } .dark-mode .navigation { background-color: #1e1e1e; } .navigation.open { transform: translateY(0); } .nav-list { list-style: none; padding: 0 20px; } .nav-item { margin-bottom: 5px; opacity: 0; transform: translateY(20px); transition: opacity 0.3s ease, transform 0.3s ease; } .navigation.open .nav-item { opacity: 1; transform: translateY(0); } .navigation.open .nav-item:nth-child(1) { transition-delay: 0.1s; } .navigation.open .nav-item:nth-child(2) { transition-delay: 0.2s; } .navigation.open .nav-item:nth-child(3) { transition-delay: 0.3s; } .navigation.open .nav-item:nth-child(4) { transition-delay: 0.4s; } .navigation.open .nav-item:nth-child(5) { transition-delay: 0.5s; } .nav-link { display: flex; align-items: center; padding: 16px 20px; text-decoration: none; color: #333; font-weight: 500; border-radius: 12px; transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease; } .dark-mode .nav-link { color: #e0e0e0; } .nav-link:hover { background-color: rgba(71, 118, 230, 0.05); transform: translateX(5px); } .dark-mode .nav-link:hover { background-color: rgba(90, 136, 255, 0.1); } .nav-link.active { background: linear-gradient(90deg, rgba(71, 118, 230, 0.1) 0%, rgba(142, 84, 233, 0.1) 100%); color: #4776E6; } .dark-mode .nav-link.active { background: linear-gradient(90deg, rgba(90, 136, 255, 0.15) 0%, rgba(170, 120, 255, 0.15) 100%); color: #5A88FF; } .nav-icon { margin-right: 16px; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; } .content { flex: 1; padding: 24px; overflow-y: auto; transition: opacity 0.3s ease; } .section-title { font-size: 1.1rem; font-weight: 600; margin-bottom: 16px; color: #333; transition: color 0.7s ease; } .dark-mode .section-title { color: #ffffff; } .card { background-color: #f8f9fa; border-radius: 16px; padding: 20px; margin-bottom: 16px; transition: background-color 0.7s ease, transform 0.3s ease, box-shadow 0.3s ease; } .dark-mode .card { background-color: #2d2d2d; } .card:hover { transform: translateY(-3px); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.05); } .dark-mode .card:hover { box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); } .card-title { font-size: 1rem; font-weight: 500; margin-bottom: 10px; color: #333; transition: color 0.7s ease; } .dark-mode .card-title { color: #ffffff; } .card-text { font-size: 0.9rem; color: #666; line-height: 1.4; transition: color 0.7s ease; } .dark-mode .card-text { color: #aaaaaa; } .overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.4); opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; z-index: 98; } .overlay.active { opacity: 1; visibility: visible; } .theme-toggle { position: absolute; bottom: 16px; right: 16px; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 101; background: linear-gradient(135deg, #4776E6 0%, #8E54E9 100%); box-shadow: 0 4px 12px rgba(71, 118, 230, 0.3); transition: transform 0.3s ease; } .dark-mode .theme-toggle { background: linear-gradient(135deg, #5A88FF 0%, #AA78FF 100%); box-shadow: 0 4px 12px rgba(90, 136, 255, 0.3); } .theme-toggle:hover { transform: scale(1.05); } .theme-toggle svg { width: 22px; height: 22px; fill: #ffffff; transition: transform 0.5s ease; } .dark-mode .theme-toggle .sun { transform: rotate(180deg) scale(1); opacity: 1; } .dark-mode .theme-toggle .moon { transform: rotate(180deg) scale(0); opacity: 0; } .theme-toggle .sun { transform: rotate(0) scale(0); opacity: 0; position: absolute; } .theme-toggle .moon { transform: rotate(0) scale(1); opacity: 1; position: absolute; } .accessibility-info { position: absolute; bottom: 16px; left: 16px; padding: 6px 12px; background-color: rgba(71, 118, 230, 0.1); border-radius: 20px; font-size: 0.8rem; color: #4776E6; display: flex; align-items: center; z-index: 101; transition: background-color 0.7s ease, color 0.7s ease; } .dark-mode .accessibility-info { background-color: rgba(90, 136, 255, 0.15); color: #5A88FF; } .accessibility-info svg { width: 14px; height: 14px; margin-right: 6px; } @media (max-width: 400px) { .app-container { height: 580px; border-radius: 16px; } .card { padding: 16px; } } /* Focus styles for accessibility */ *:focus-visible { outline: 3px solid #4776E6; outline-offset: 3px; border-radius: 4px; } .dark-mode *:focus-visible { outline-color: #5A88FF; } /* Animation for content when menu opens */ .content.blur { filter: blur(4px); opacity: 0.6; pointer-events: none; } </style> </head> <body> <div class="app-container"> <header class="app-header"> <h1 class="app-title">Minimal Nav</h1> <div class="hamburger-container" id="menuButton" tabindex="0" role="button" aria-label="Menu" aria-expanded="false"> <div class="hamburger"> <span></span> <span></span> <span></span> </div> </div> </header> <nav class="navigation" id="nav" aria-hidden="true"> <ul class="nav-list"> <li class="nav-item"> <a href="#" class="nav-link active"> <div class="nav-icon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"> <path d="M10.5 3.75a6.75 6.75 0 100 13.5 6.75 6.75 0 000-13.5zM2.25 10.5a8.25 8.25 0 1114.59 5.28l4.69 4.69a.75.75 0 11-1.06 1.06l-4.69-4.69A8.25 8.25 0 012.25 10.5z" /> </svg> </div> Discover </a> </li> <li class="nav-item"> <a href="#" class="nav-link"> <div class="nav-icon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"> <path d="M11.47 3.84a.75.75 0 011.06 0l8.69 8.69a.75.75 0 101.06-1.06l-8.689-8.69a2.25 2.25 0 00-3.182 0l-8.69 8.69a.75.75 0 001.061 1.06l8.69-8.69z" /> <path d="M12 5.432l8.159 8.159c.03.03.06.058.091.086v6.198c0 1.035-.84 1.875-1.875 1.875H15a.75.75 0 01-.75-.75v-4.5a.75.75 0 00-.75-.75h-3a.75.75 0 00-.75.75V21a.75.75 0 01-.75.75H5.625a1.875 1.875 0 01-1.875-1.875v-6.198a2.29 2.29 0 00.091-.086L12 5.43z" /> </svg> </div> Home </a> </li> <li class="nav-item"> <a href="#" class="nav-link"> <div class="nav-icon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"> <path fill-rule="evenodd" d="M7.5 6a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM3.751 20.105a8.25 8.25 0 0116.498 0 .75.75 0 01-.437.695A18.683 18.683 0 0112 22.5c-2.786 0-5.433-.608-7.812-1.7a.75.75 0 01-.437-.695z" clip-rule="evenodd" /> </svg> </div> Profile </a> </li> <li class="nav-item"> <a href="#" class="nav-link"> <div class="nav-icon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"> <path fill-rule="evenodd" d="M11.078 2.25c-.917 0-1.699.663-1.85 1.567L9.05 4.889c-.02.12-.115.26-.297.348a7.493 7.493 0 00-.986.57c-.166.115-.334.126-.45.083L6.3 5.508a1.875 1.875 0 00-2.282.819l-.922 1.597a1.875 1.875 0 00.432 2.385l.84.692c.095.078.17.229.154.43a7.598 7.598 0 000 1.139c.015.2-.059.352-.153.43l-.841.692a1.875 1.875 0 00-.432 2.385l.922 1.597a1.875 1.875 0 002.282.818l1.019-.382c.115-.043.283-.031.45.082.312.214.641.405.985.57.182.088.277.228.297.35l.178 1.071c.151.904.933 1.567 1.85 1.567h1.844c.916 0 1.699-.663 1.85-1.567l.178-1.072c.02-.12.114-.26.297-.349.344-.165.673-.356.985-.57.167-.114.335-.125.45-.082l1.02.382a1.875 1.875 0 002.28-.819l.923-1.597a1.875 1.875 0 00-.432-2.385l-.84-.692c-.095-.078-.17-.229-.154-.43a7.614 7.614 0 000-1.139c-.016-.2.059-.352.153-.43l.84-.692c.708-.582.891-1.59.433-2.385l-.922-1.597a1.875 1.875 0 00-2.282-.818l-1.02.382c-.114.043-.282.031-.449-.083a7.49 7.49 0 00-.985-.57c-.183-.087-.277-.227-.297-.348l-.179-1.072a1.875 1.875 0 00-1.85-1.567h-1.843zM12 15.75a3.75 3.75 0 100-7.5 3.75 3.75 0 000 7.5z" clip-rule="evenodd" /> </svg> </div> Settings </a> </li> <li class="nav-item"> <a href="#" class="nav-link"> <div class="nav-icon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"> <path fill-rule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm11.378-3.917c-.89-.777-2.366-.777-3.255 0a.75.75 0 01-.988-1.129c1.454-1.272 3.776-1.272 5.23 0 1.513 1.324 1.513 3.518 0 4.842a3.75 3.75 0 01-.837.552c-.676.328-1.028.774-1.028 1.152v.75a.75.75 0 01-1.5 0v-.75c0-1.279 1.06-2.107 1.875-2.502.182-.088.351-.199.503-.331.83-.727.83-1.857 0-2.584zM12 18a.75.75 0 100-1.5.75.75 0 000 1.5z" clip-rule="evenodd" /> </svg> </div> Help </a> </li> </ul> </nav> <main class="content" id="content"> <section> <h2 class="section-title">Navigation Design</h2> <div class="card"> <h3 class="card-title">Minimalism in Action</h3> <p class="card-text">This hamburger menu transforms seamlessly into a close icon, providing clear visual feedback while maintaining a clean interface. The crisp lines and subtle gradient enhance recognition.</p> </div> <div class="card"> <h3 class="card-title">Accessibility Features</h3> <p class="card-text">High contrast ratios between elements ensure visibility in various lighting conditions. The menu is fully keyboard navigable and includes appropriate ARIA attributes for screen readers.</p> </div> <div class="card"> <h3 class="card-title">Smooth Transitions</h3> <p class="card-text">Animations are carefully timed for a fluid experience without being distracting. The staggered appearance of menu items creates a natural flow for the user's attention.</p> </div> </section> </main> <div class="overlay" id="overlay"></div> <div class="theme-toggle" id="themeToggle" role="button" tabindex="0" aria-label="Toggle dark mode"> <svg class="moon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"> <path fill-rule="evenodd" d="M9.528 1.718a.75.75 0 01.162.819A8.97 8.97 0 009 6a9 9 0 009 9 8.97 8.97 0 003.463-.69.75.75 0 01.981.98 10.503 10.503 0 01-9.694 6.46c-5.799 0-10.5-4.701-10.5-10.5 0-4.368 2.667-8.112 6.46-9.694a.75.75 0 01.818.162z" clip-rule="evenodd" /> </svg> <svg class="sun" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"> <path d="M12 2.25a.75.75 0 01.75.75v2.25a.75.75 0 01-1.5 0V3a.75.75 0 01.75-.75zM7.5 12a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM18.894 6.166a.75.75 0 00-1.06-1.06l-1.591 1.59a.75.75 0 101.06 1.061l1.591-1.59zM21.75 12a.75.75 0 01-.75.75h-2.25a.75.75 0 010-1.5H21a.75.75 0 01.75.75zM17.834 18.894a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 10-1.061 1.06l1.59 1.591zM12 18a.75.75 0 01.75.75V21a.75.75 0 01-1.5 0v-2.25A.75.75 0 0112 18zM7.758 17.303a.75.75 0 00-1.061-1.06l-1.591 1.59a.75.75 0 001.06 1.061l1.591-1.59zM6 12a.75.75 0 01-.75.75H3a.75.75 0 010-1.5h2.25A.75.75 0 016 12zM6.697 7.757a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 00-1.061 1.06l1.59 1.591z" /> </svg> </div> <div class="accessibility-info"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"> <path fill-rule="evenodd" d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25zm0 8.625a1.125 1.125 0 100 2.25 1.125 1.125 0 000-2.25zM15.375 12a.75.75 0 01.75.75v3.75a.75.75 0 01-1.5 0V12.75a.75.75 0 01.75-.75zm-8.25 3.75a.75.75 0 01.75-.75h3.75a.75.75 0 010 1.5H8.625a.75.75 0 01-.75-.75z" clip-rule="evenodd" /> </svg> A11y Ready </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { const menuButton = document.getElementById('menuButton'); const hamburger = menuButton.querySelector('.hamburger'); const nav = document.getElementById('nav'); const content = document.getElementById('content'); const overlay = document.getElementById('overlay'); const themeToggle = document.getElementById('themeToggle'); // Toggle menu function toggleMenu() { hamburger.classList.toggle('open'); nav.classList.toggle('open'); content.classList.toggle('blur'); overlay.classList.toggle('active'); const isOpen = hamburger.classList.contains('open'); menuButton.setAttribute('aria-expanded', isOpen); nav.setAttribute('aria-hidden', !isOpen); // Prevent scrolling when menu is open document.body.style.overflow = isOpen ? 'hidden' : ''; } // Toggle theme function toggleTheme() { document.body.classList.toggle('dark-mode'); const isDarkMode = document.body.classList.contains('dark-mode'); localStorage.setItem('darkMode', isDarkMode); // Update aria-label themeToggle.setAttribute('aria-label', isDarkMode ? 'Switch to light mode' : 'Switch to dark mode' ); } // Event listeners menuButton.addEventListener('click', toggleMenu); menuButton.addEventListener('keydown', function(e) { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); toggleMenu(); } }); themeToggle.addEventListener('click', toggleTheme); themeToggle.addEventListener('keydown', function(e) { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); toggleTheme(); } }); overlay.addEventListener('click', toggleMenu); // Close menu when clicking a nav link const navLinks = document.querySelectorAll('.nav-link'); navLinks.forEach(link => { link.addEventListener('click', function(e) { e.preventDefault(); // prevent actual navigation // Remove active class from all links navLinks.forEach(l => l.classList.remove('active')); // Add active class to clicked link this.classList.add('active'); // Close the menu with a slight delay for better UX setTimeout(toggleMenu, 150); }); }); // Check for saved theme preference const prefersDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches; const savedTheme = localStorage.getItem('darkMode'); if (savedTheme === 'true' || (savedTheme === null && prefersDarkMode)) { document.body.classList.add('dark-mode'); themeToggle.setAttribute('aria-label', 'Switch to light mode'); } // Handle escape key to close menu document.addEventListener('keydown', function(e) { if (e.key === 'Escape' && hamburger.classList.contains('open')) { toggleMenu(); } }); // Add ripple effect to buttons const buttons = document.querySelectorAll('.hamburger-container, .theme-toggle'); buttons.forEach(button => { button.addEventListener('click', function(e) { const rect = button.getBoundingClientRect(); const x = e.clientX - rect.left; const y = e.clientY - rect.top; const ripple = document.createElement('span'); ripple.style.position = 'absolute'; ripple.style.width = '1px'; ripple.style.height = '1px'; ripple.style.borderRadius = '50%'; ripple.style.backgroundColor = 'rgba(255, 255, 255, 0.4)'; ripple.style.transform = 'scale(0)'; ripple.style.left = `${x}px`; ripple.style.top = `${y}px`; ripple.style.animation = 'ripple 0.6s linear'; ripple.addEventListener('animationend', () => { ripple.remove(); }); button.appendChild(ripple); }); }); // Add ripple animation const style = document.createElement('style'); style.textContent = ` @keyframes ripple { from { transform: scale(0); opacity: 1; } to { transform: scale(100); 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>ShopWave Menu</title> <style> :root { --primary: #ff3366; --secondary: #3390ff; --tertiary: #33ff99; --dark: #1a1a2e; --light: #ffffff; --transition: 0.35s cubic-bezier(0.65, 0, 0.35, 1); } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif; } body { background-color: #f9f9f9; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; height: 100vh; overflow-x: hidden; color: var(--dark); } .container { width: 100%; max-width: 700px; height: 100%; max-height: 700px; position: relative; overflow: hidden; } .navbar { width: 100%; height: 70px; background: var(--light); display: flex; justify-content: space-between; align-items: center; padding: 0 20px; position: relative; box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08); z-index: 100; } .logo { font-size: 22px; font-weight: 700; background: linear-gradient(45deg, var(--primary), var(--secondary)); -webkit-background-clip: text; background-clip: text; color: transparent; letter-spacing: -0.5px; display: flex; align-items: center; } .logo-icon { display: inline-block; width: 30px; height: 30px; margin-right: 8px; background: linear-gradient(45deg, var(--primary), var(--secondary)); border-radius: 8px; position: relative; } .logo-icon::before { content: '🛒'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 16px; } .hamburger-menu { width: 40px; height: 40px; background: linear-gradient(45deg, var(--primary), var(--secondary)); border-radius: 12px; position: relative; cursor: pointer; display: flex; flex-direction: column; justify-content: center; align-items: center; transition: transform var(--transition), background var(--transition); box-shadow: 0 4px 15px rgba(255, 51, 102, 0.25); z-index: 200; } .hamburger-menu:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(255, 51, 102, 0.35); } .hamburger-menu:active { transform: scale(0.95); } .hamburger-menu.active { background: linear-gradient(45deg, var(--secondary), var(--tertiary)); transform: rotate(90deg); box-shadow: 0 4px 15px rgba(51, 144, 255, 0.25); } .hamburger-line { width: 20px; height: 2px; background-color: var(--light); margin: 3px 0; border-radius: 2px; transition: transform var(--transition), opacity var(--transition); } .hamburger-menu.active .hamburger-line:nth-child(1) { transform: translateY(8px) rotate(45deg); } .hamburger-menu.active .hamburger-line:nth-child(2) { opacity: 0; } .hamburger-menu.active .hamburger-line:nth-child(3) { transform: translateY(-8px) rotate(-45deg); } .menu { position: fixed; top: 0; right: -100%; width: 100%; max-width: 320px; height: 100%; background-color: var(--light); transition: right var(--transition); box-shadow: -5px 0 25px rgba(0, 0, 0, 0.1); z-index: 99; padding: 100px 30px 30px; display: flex; flex-direction: column; } .menu.active { right: 0; } .menu-backdrop { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); opacity: 0; visibility: hidden; transition: opacity var(--transition), visibility var(--transition); z-index: 98; } .menu-backdrop.active { opacity: 1; visibility: visible; } .menu-item { padding: 15px 0; border-bottom: 1px solid rgba(0, 0, 0, 0.05); display: flex; align-items: center; cursor: pointer; transform: translateX(20px); opacity: 0; transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.5s cubic-bezier(0.23, 1, 0.32, 1), color 0.3s ease; } .menu.active .menu-item { transform: translateX(0); opacity: 1; } .menu.active .menu-item:nth-child(1) { transition-delay: 0.1s; } .menu.active .menu-item:nth-child(2) { transition-delay: 0.2s; } .menu.active .menu-item:nth-child(3) { transition-delay: 0.3s; } .menu.active .menu-item:nth-child(4) { transition-delay: 0.4s; } .menu.active .menu-item:nth-child(5) { transition-delay: 0.5s; } .menu-item:hover { color: var(--primary); } .menu-item i { margin-right: 15px; font-size: 20px; width: 24px; text-align: center; } .menu-item-text { font-weight: 500; } .menu-footer { margin-top: auto; text-align: center; opacity: 0.7; font-size: 12px; } .showcase { width: 100%; padding: 30px 20px; display: flex; flex-direction: column; align-items: center; } .showcase-title { font-size: 24px; font-weight: 700; margin-bottom: 20px; text-align: center; } .showcase-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 20px; width: 100%; } .product-card { background: var(--light); border-radius: 12px; overflow: hidden; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08); transition: transform 0.3s ease, box-shadow 0.3s ease; cursor: pointer; position: relative; } .product-card:hover { transform: translateY(-5px); box-shadow: 0 12px 20px rgba(0, 0, 0, 0.12); } .product-image { width: 100%; height: 130px; background-size: cover; background-position: center; position: relative; } .product-tag { position: absolute; top: 10px; right: 10px; background: linear-gradient(45deg, var(--primary), var(--secondary)); color: var(--light); font-size: 10px; font-weight: 600; padding: 3px 8px; border-radius: 20px; } .product-info { padding: 12px; } .product-name { font-size: 14px; font-weight: 600; margin-bottom: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .product-price { font-size: 14px; font-weight: 700; color: var(--primary); } .notification-badge { position: absolute; top: -5px; right: -5px; background: var(--tertiary); color: var(--dark); font-size: 10px; font-weight: 700; width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; opacity: 0; transform: scale(0); transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease; } .notification-badge.active { opacity: 1; transform: scale(1); } .cart-icon { position: relative; margin-right: 15px; cursor: pointer; } .cart-icon i { font-size: 22px; color: var(--dark); } @media (max-width: 600px) { .showcase-cards { grid-template-columns: repeat(2, 1fr); } } /* Animation for menu pattern */ .menu-pattern { position: absolute; bottom: 0; right: 0; width: 150px; height: 150px; opacity: 0.1; z-index: -1; background: radial-gradient(circle at 25% 25%, var(--primary) 1px, transparent 1px), radial-gradient(circle at 75% 75%, var(--secondary) 1px, transparent 1px); background-size: 20px 20px; animation: patternMove 30s linear infinite; } @keyframes patternMove { 0% { background-position: 0 0; } 100% { background-position: 100px 100px; } } /* Pulse animation for logo */ @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 51, 102, 0.4); } 70% { box-shadow: 0 0 0 10px rgba(255, 51, 102, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 51, 102, 0); } } .logo-icon { animation: pulse 2s infinite; } </style> </head> <body> <div class="container"> <nav class="navbar"> <div class="logo"> <div class="logo-icon"></div> ShopWave </div> <div class="cart-icon"> <i>🛒</i> <div class="notification-badge">3</div> </div> <div class="hamburger-menu"> <div class="hamburger-line"></div> <div class="hamburger-line"></div> <div class="hamburger-line"></div> </div> </nav> <div class="menu"> <div class="menu-pattern"></div> <div class="menu-item"> <i>🏠</i> <div class="menu-item-text">Home</div> </div> <div class="menu-item"> <i>👕</i> <div class="menu-item-text">New Arrivals</div> </div> <div class="menu-item"> <i>🔥</i> <div class="menu-item-text">Flash Sale</div> </div> <div class="menu-item"> <i>👤</i> <div class="menu-item-text">My Account</div> </div> <div class="menu-item"> <i>⚙️</i> <div class="menu-item-text">Settings</div> </div> <div class="menu-footer"> © 2023 ShopWave - Redefine your shopping experience </div> </div> <div class="menu-backdrop"></div> <div class="showcase"> <div class="showcase-title">Today's Trending Items</div> <div class="showcase-cards"> <div class="product-card"> <div class="product-image" style="background-image: url('https://images.unsplash.com/photo-1542291026-7eec264c27ff')"> <div class="product-tag">NEW</div> </div> <div class="product-info"> <div class="product-name">Ultra Sneakers</div> <div class="product-price">$129.99</div> </div> </div> <div class="product-card"> <div class="product-image" style="background-image: url('https://images.unsplash.com/photo-1523275335684-37898b6baf30')"> <div class="product-tag">-20%</div> </div> <div class="product-info"> <div class="product-name">Smart Watch Pro</div> <div class="product-price">$199.99</div> </div> </div> <div class="product-card"> <div class="product-image" style="background-image: url('https://images.unsplash.com/photo-1560343090-f0409e92791a')"> </div> <div class="product-info"> <div class="product-name">Wireless Earbuds</div> <div class="product-price">$89.99</div> </div> </div> <div class="product-card"> <div class="product-image" style="background-image: url('https://images.unsplash.com/photo-1551028719-00167b16eac5')"> <div class="product-tag">HOT</div> </div> <div class="product-info"> <div class="product-name">Designer Bag</div> <div class="product-price">$349.99</div> </div> </div> </div> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { const hamburgerMenu = document.querySelector('.hamburger-menu'); const menu = document.querySelector('.menu'); const menuBackdrop = document.querySelector('.menu-backdrop'); const notificationBadge = document.querySelector('.notification-badge'); const cartIcon = document.querySelector('.cart-icon'); // Display notification badge with a delay setTimeout(() => { notificationBadge.classList.add('active'); }, 1500); // Toggle menu hamburgerMenu.addEventListener('click', function() { this.classList.toggle('active'); menu.classList.toggle('active'); menuBackdrop.classList.toggle('active'); // Add haptic feedback if supported if (navigator.vibrate) { navigator.vibrate(50); } }); // Close menu when clicking on backdrop menuBackdrop.addEventListener('click', function() { hamburgerMenu.classList.remove('active'); menu.classList.remove('active'); menuBackdrop.classList.remove('active'); }); // Menu items click effect const menuItems = document.querySelectorAll('.menu-item'); menuItems.forEach(item => { item.addEventListener('click', function() { // Add active state this.style.backgroundColor = 'rgba(255, 51, 102, 0.1)'; // Reset after animation setTimeout(() => { this.style.backgroundColor = ''; // Close menu after selection (with delay for animation) setTimeout(() => { hamburgerMenu.classList.remove('active'); menu.classList.remove('active'); menuBackdrop.classList.remove('active'); }, 100); }, 300); // Add haptic feedback if supported if (navigator.vibrate) { navigator.vibrate(30); } }); }); // Cart icon interaction cartIcon.addEventListener('click', function() { this.style.transform = 'scale(0.9)'; setTimeout(() => { this.style.transform = ''; }, 200); // Update notification badge with animation notificationBadge.classList.remove('active'); setTimeout(() => { const currentCount = parseInt(notificationBadge.textContent); notificationBadge.textContent = currentCount < 9 ? (currentCount + 1) : '9+'; notificationBadge.classList.add('active'); }, 300); // Add haptic feedback if supported if (navigator.vibrate) { navigator.vibrate(30); } }); // Product card interaction const productCards = document.querySelectorAll('.product-card'); productCards.forEach(card => { card.addEventListener('click', function() { this.style.transform = 'translateY(-5px) scale(0.98)'; setTimeout(() => { this.style.transform = ''; }, 300); // Update cart notification notificationBadge.classList.remove('active'); setTimeout(() => { const currentCount = parseInt(notificationBadge.textContent); notificationBadge.textContent = currentCount < 9 ? (currentCount + 1) : '9+'; notificationBadge.classList.add('active'); }, 300); // Add haptic feedback if supported if (navigator.vibrate) { navigator.vibrate(20); } }); }); // Initialize menu items to be interactive menuItems.forEach(item => { item.style.opacity = 0; item.style.transform = 'translateX(20px)'; }); // Add hover effect for hamburger menu hamburgerMenu.addEventListener('mouseover', function() { this.style.transform = this.classList.contains('active') ? 'rotate(90deg) translateY(-2px)' : 'translateY(-2px)'; }); hamburgerMenu.addEventListener('mouseout', function() { this.style.transform = this.classList.contains('active') ? 'rotate(90deg)' : ''; }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Playful Hamburger Menu</title> <style> :root { --primary: #FF6B6B; --secondary: #4ECDC4; --tertiary: #FFD166; --dark: #2A363B; --light: #F7F9F9; --radius: 18px; --transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; } body { background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); height: 100vh; display: flex; justify-content: center; align-items: center; overflow: hidden; } .container { width: 100%; max-width: 680px; height: 680px; background: var(--light); border-radius: var(--radius); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); overflow: hidden; position: relative; } .header { height: 80px; background: linear-gradient(90deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%); display: flex; justify-content: space-between; align-items: center; padding: 0 25px; position: relative; z-index: 100; } .logo { font-size: 24px; font-weight: 700; color: var(--light); text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1); display: flex; align-items: center; } .logo i { font-size: 28px; margin-right: 8px; } .menu-button { width: 48px; height: 48px; border-radius: 50%; background: var(--light); display: flex; flex-direction: column; justify-content: center; align-items: center; cursor: pointer; transition: var(--transition); position: relative; z-index: 101; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); } .menu-button:hover { transform: scale(1.1); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15); } .menu-button:hover .line:nth-child(1) { transform: translateY(-2px); background: var(--primary); } .menu-button:hover .line:nth-child(3) { transform: translateY(2px); background: var(--secondary); } .line { width: 24px; height: 3px; background: var(--dark); margin: 3px 0; border-radius: 3px; transition: var(--transition); } .menu-button.active .line:nth-child(1) { transform: translateY(9px) rotate(45deg); background: var(--primary); } .menu-button.active .line:nth-child(2) { opacity: 0; transform: translateX(-20px); } .menu-button.active .line:nth-child(3) { transform: translateY(-9px) rotate(-45deg); background: var(--secondary); } .menu-button.active { transform: rotate(180deg); } .menu-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(10px); display: flex; justify-content: center; align-items: center; z-index: 99; transform: translateY(-100%); transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55); } .menu-container.active { transform: translateY(0); } .menu-items { display: flex; flex-direction: column; align-items: center; gap: 25px; } .menu-item { font-size: 24px; color: var(--dark); text-decoration: none; position: relative; opacity: 0; transform: translateY(20px); transition: var(--transition); display: flex; align-items: center; gap: 12px; } .menu-container.active .menu-item { opacity: 1; transform: translateY(0); } .menu-item-delay-1 { transition-delay: 0.1s; } .menu-item-delay-2 { transition-delay: 0.2s; } .menu-item-delay-3 { transition-delay: 0.3s; } .menu-item-delay-4 { transition-delay: 0.4s; } .menu-item-delay-5 { transition-delay: 0.5s; } .menu-item:before { content: ''; position: absolute; bottom: -5px; left: 0; width: 0; height: 3px; background: linear-gradient(90deg, var(--primary), var(--secondary)); transition: width 0.3s ease; border-radius: 3px; } .menu-item:hover:before { width: 100%; } .menu-item i { font-size: 24px; background: linear-gradient(90deg, var(--primary), var(--secondary)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; transition: transform 0.3s ease; } .menu-item:hover i { transform: scale(1.2); } .content { padding: 30px; height: calc(100% - 80px); overflow-y: auto; display: flex; flex-direction: column; gap: 25px; } .section-title { font-size: 22px; font-weight: 600; color: var(--dark); margin-bottom: 15px; } .card-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 20px; } .card { background: white; border-radius: var(--radius); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; cursor: pointer; } .card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); } .card-image { height: 120px; background-size: cover; background-position: center; } .card-content { padding: 15px; } .card-title { font-size: 16px; font-weight: 600; color: var(--dark); margin-bottom: 5px; } .card-description { font-size: 12px; color: #666; } .story-container { display: flex; gap: 15px; overflow-x: auto; padding: 5px 0; scrollbar-width: none; } .story-container::-webkit-scrollbar { display: none; } .story { width: 80px; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; cursor: pointer; } .story-avatar { width: 70px; height: 70px; border-radius: 50%; background-size: cover; background-position: center; position: relative; margin-bottom: 8px; } .story-avatar:before { content: ''; position: absolute; top: -3px; left: -3px; right: -3px; bottom: -3px; border-radius: 50%; background: linear-gradient(45deg, var(--primary), var(--secondary), var(--tertiary)); z-index: -1; animation: rotate 2s linear infinite; } .story-name { font-size: 12px; color: var(--dark); text-align: center; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .pulse { animation: pulse 2s infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 107, 107, 0.7); } 70% { box-shadow: 0 0 0 10px rgba(255, 107, 107, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 107, 107, 0); } } .notification-badge { position: absolute; top: -5px; right: -5px; width: 20px; height: 20px; border-radius: 50%; background: var(--primary); color: white; font-size: 12px; display: flex; justify-content: center; align-items: center; animation: bounce 1s infinite alternate; } @keyframes bounce { 0% { transform: scale(1); } 100% { transform: scale(1.2); } } .status-bar { margin-top: auto; height: 50px; display: flex; justify-content: space-around; align-items: center; background: white; border-radius: var(--radius); box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05); } .status-item { display: flex; flex-direction: column; align-items: center; cursor: pointer; transition: transform 0.3s ease; } .status-item:hover { transform: translateY(-5px); } .status-icon { font-size: 20px; color: var(--dark); margin-bottom: 5px; } .status-text { font-size: 10px; color: #666; } /* Responsive adjustments */ @media (max-width: 600px) { .container { border-radius: 0; height: 100vh; } .card-container { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); } } </style> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> </head> <body> <div class="container"> <div class="header"> <div class="logo"> <i class="fas fa-fish"></i> WaveShare </div> <div class="menu-button"> <div class="line"></div> <div class="line"></div> <div class="line"></div> </div> </div> <div class="menu-container"> <div class="menu-items"> <a href="#" class="menu-item menu-item-delay-1"> <i class="fas fa-home"></i> Home Feed </a> <a href="#" class="menu-item menu-item-delay-2"> <i class="fas fa-compass"></i> Discover </a> <a href="#" class="menu-item menu-item-delay-3"> <i class="fas fa-bell"></i> Notifications </a> <a href="#" class="menu-item menu-item-delay-4"> <i class="fas fa-user-circle"></i> Profile </a> <a href="#" class="menu-item menu-item-delay-5"> <i class="fas fa-cog"></i> Settings </a> </div> </div> <div class="content"> <div> <div class="section-title">Your Stories</div> <div class="story-container"> <div class="story"> <div class="story-avatar pulse" style="background-image: url('https://i.pravatar.cc/150?img=1');"> <div class="notification-badge">3</div> </div> <div class="story-name">Your Story</div> </div> <div class="story"> <div class="story-avatar" style="background-image: url('https://i.pravatar.cc/150?img=2');"></div> <div class="story-name">Skye_Runner</div> </div> <div class="story"> <div class="story-avatar" style="background-image: url('https://i.pravatar.cc/150?img=3');"></div> <div class="story-name">PixelPerfect</div> </div> <div class="story"> <div class="story-avatar" style="background-image: url('https://i.pravatar.cc/150?img=4');"></div> <div class="story-name">WaveMaker</div> </div> <div class="story"> <div class="story-avatar" style="background-image: url('https://i.pravatar.cc/150?img=5');"></div> <div class="story-name">GradientGuru</div> </div> <div class="story"> <div class="story-avatar" style="background-image: url('https://i.pravatar.cc/150?img=6');"></div> <div class="story-name">DesignDarling</div> </div> </div> </div> <div> <div class="section-title">Trending Today</div> <div class="card-container"> <div class="card"> <div class="card-image" style="background-image: url('https://source.unsplash.com/random/300x200?design')"></div> <div class="card-content"> <div class="card-title">UI Color Trends 2023</div> <div class="card-description">Soft gradients making a comeback!</div> </div> </div> <div class="card"> <div class="card-image" style="background-image: url('https://source.unsplash.com/random/300x200?art')"></div> <div class="card-content"> <div class="card-title">Animation Tips</div> <div class="card-description">Make your interfaces feel alive</div> </div> </div> <div class="card"> <div class="card-image" style="background-image: url('https://source.unsplash.com/random/300x200?interface')"></div> <div class="card-content"> <div class="card-title">Playful UI Elements</div> <div class="card-description">Fun interactions users love</div> </div> </div> </div> </div> <div> <div class="section-title">For You</div> <div class="card-container"> <div class="card"> <div class="card-image" style="background-image: url('https://source.unsplash.com/random/300x200?gradient')"></div> <div class="card-content"> <div class="card-title">Gradient Generator</div> <div class="card-description">Create lively color flows</div> </div> </div> <div class="card"> <div class="card-image" style="background-image: url('https://source.unsplash.com/random/300x200?ux')"></div> <div class="card-content"> <div class="card-title">Rounded Corners</div> <div class="card-description">The psychology of soft edges</div> </div> </div> </div> </div> <div class="status-bar"> <div class="status-item"> <i class="fas fa-home status-icon"></i> <span class="status-text">Home</span> </div> <div class="status-item"> <i class="fas fa-search status-icon"></i> <span class="status-text">Search</span> </div> <div class="status-item"> <i class="fas fa-plus-circle status-icon"></i> <span class="status-text">Create</span> </div> <div class="status-item"> <i class="fas fa-heart status-icon"></i> <span class="status-text">Activity</span> </div> <div class="status-item"> <i class="fas fa-user status-icon"></i> <span class="status-text">Profile</span> </div> </div> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { const menuButton = document.querySelector('.menu-button'); const menuContainer = document.querySelector('.menu-container'); menuButton.addEventListener('click', function() { this.classList.toggle('active'); menuContainer.classList.toggle('active'); }); // Story click effect const stories = document.querySelectorAll('.story'); stories.forEach(story => { story.addEventListener('click', function() { const avatar = this.querySelector('.story-avatar'); avatar.style.transform = 'scale(0.9)'; setTimeout(() => { avatar.style.transform = 'scale(1)'; }, 200); }); }); // Status bar interaction const statusItems = document.querySelectorAll('.status-item'); statusItems.forEach(item => { item.addEventListener('click', function() { statusItems.forEach(i => i.classList.remove('active')); this.classList.add('active'); const icon = this.querySelector('.status-icon'); icon.style.color = getComputedStyle(document.documentElement).getPropertyValue('--primary'); // Reset other icons to default color statusItems.forEach(i => { if (i !== this) { i.querySelector('.status-icon').style.color = getComputedStyle(document.documentElement).getPropertyValue('--dark'); } }); }); }); // Card hover effects with gradient borders const cards = document.querySelectorAll('.card'); cards.forEach(card => { card.addEventListener('mouseenter', function() { this.style.boxShadow = '0 10px 20px rgba(0, 0, 0, 0.1), 0 0 0 2px ' + getComputedStyle(document.documentElement).getPropertyValue('--primary'); }); card.addEventListener('mouseleave', function() { this.style.boxShadow = '0 5px 15px rgba(0, 0, 0, 0.05)'; }); }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>NexusBank Menu</title> <style> :root { --primary: #3a4750; --secondary: #efefef; --accent: #346e81; --hover: rgba(58, 71, 80, 0.1); --shadow: rgba(0, 0, 0, 0.08); --text: #2c3e50; --menu-width: 280px; --transition-speed: 0.3s; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } body { background-color: #fafafa; color: var(--text); height: 100vh; overflow: hidden; } .app-container { display: flex; flex-direction: column; height: 100vh; max-width: 700px; margin: 0 auto; position: relative; overflow: hidden; box-shadow: 0 0 20px var(--shadow); } header { background: white; height: 70px; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; box-shadow: 0 2px 4px var(--shadow); position: relative; z-index: 10; } .logo { display: flex; align-items: center; font-weight: 600; font-size: 22px; color: var(--primary); } .logo-icon { margin-right: 10px; color: var(--accent); } .hamburger-menu { width: 28px; height: 20px; position: relative; cursor: pointer; display: flex; flex-direction: column; justify-content: space-between; transition: all var(--transition-speed); } .hamburger-menu:focus { outline: none; } .hamburger-menu:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 2px; } .line { width: 100%; height: 2px; background-color: var(--primary); transition: all var(--transition-speed); border-radius: 4px; } .hamburger-menu:hover .line { background-color: var(--accent); } .hamburger-menu.active .line:nth-child(1) { transform: translateY(9px) rotate(45deg); } .hamburger-menu.active .line:nth-child(2) { opacity: 0; transform: translateX(-10px); } .hamburger-menu.active .line:nth-child(3) { transform: translateY(-9px) rotate(-45deg); } .menu-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.4); opacity: 0; visibility: hidden; transition: all var(--transition-speed); z-index: 15; } .menu-overlay.active { opacity: 1; visibility: visible; } .side-menu { position: absolute; top: 0; right: -var(--menu-width); width: var(--menu-width); height: 100%; background-color: white; box-shadow: -2px 0 5px var(--shadow); transition: right var(--transition-speed); z-index: 20; padding: 20px 0; display: flex; flex-direction: column; } .side-menu.active { right: 0; } .menu-header { display: flex; align-items: center; justify-content: space-between; padding: 0 20px 20px; border-bottom: 1px solid #efefef; margin-bottom: 15px; } .menu-title { font-weight: 500; color: var(--primary); } .menu-close { background: none; border: none; font-size: 24px; cursor: pointer; color: var(--primary); display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; transition: background-color var(--transition-speed); } .menu-close:hover { background-color: var(--hover); } .menu-items { list-style: none; padding: 0; flex: 1; } .menu-item { padding: 0 20px; margin-bottom: 5px; } .menu-link { display: flex; align-items: center; padding: 14px 16px; text-decoration: none; color: var(--text); border-radius: 8px; transition: all var(--transition-speed); font-weight: 400; } .menu-link:hover, .menu-link:focus { background-color: var(--hover); color: var(--accent); } .menu-link:focus { outline: 2px solid var(--accent); outline-offset: -2px; } .menu-icon { margin-right: 15px; display: flex; align-items: center; justify-content: center; width: 24px; color: var(--primary); opacity: 0.85; transition: opacity var(--transition-speed); } .menu-link:hover .menu-icon, .menu-link:focus .menu-icon { opacity: 1; color: var(--accent); } .menu-text { font-size: 15px; } .content { flex: 1; overflow-y: auto; padding: 24px; background-color: #fafafa; background-image: linear-gradient(rgba(52, 110, 129, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(52, 110, 129, 0.03) 1px, transparent 1px); background-size: 20px 20px; } .dashboard-section { margin-bottom: 24px; } .section-title { font-size: 18px; font-weight: 600; margin-bottom: 16px; color: var(--primary); } .balance-card { background: white; border-radius: 12px; padding: 20px; box-shadow: 0 2px 8px var(--shadow); margin-bottom: 20px; position: relative; overflow: hidden; } .balance-card::after { content: ''; position: absolute; bottom: 0; right: 0; width: 100px; height: 100px; background: linear-gradient(135deg, transparent 50%, rgba(52, 110, 129, 0.05) 50%); border-radius: 0 0 12px 0; } .balance-label { font-size: 14px; color: #6c757d; margin-bottom: 6px; } .balance-amount { font-size: 28px; font-weight: 600; color: var(--primary); display: flex; align-items: center; } .balance-details { display: flex; margin-top: 16px; font-size: 13px; } .balance-detail { flex: 1; padding-right: 12px; } .detail-label { color: #6c757d; margin-bottom: 4px; } .detail-value { font-weight: 500; color: var(--primary); } .quick-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 24px; } .action-button { border: none; background: white; border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 16px 10px; cursor: pointer; transition: all var(--transition-speed); box-shadow: 0 2px 6px var(--shadow); } .action-button:hover, .action-button:focus { transform: translateY(-3px); box-shadow: 0 4px 10px var(--shadow); } .action-button:focus { outline: 2px solid var(--accent); outline-offset: 2px; } .action-icon { font-size: 22px; color: var(--accent); margin-bottom: 8px; } .action-text { font-size: 12px; font-weight: 500; color: var(--text); text-align: center; } .transactions { background: white; border-radius: 12px; padding: 20px; box-shadow: 0 2px 8px var(--shadow); } .transaction-list { list-style: none; } .transaction-item { display: flex; align-items: center; padding: 14px 0; border-bottom: 1px solid #f0f0f0; } .transaction-item:last-child { border-bottom: none; } .transaction-icon { width: 40px; height: 40px; border-radius: 50%; background-color: #f8f9fa; display: flex; align-items: center; justify-content: center; margin-right: 14px; color: var(--primary); } .transaction-details { flex: 1; } .transaction-name { font-weight: 500; margin-bottom: 4px; color: var(--text); font-size: 15px; } .transaction-date { font-size: 13px; color: #6c757d; } .transaction-amount { font-weight: 600; font-size: 15px; } .amount-credit { color: #2ecc71; } .amount-debit { color: #e74c3c; } .menu-footer { padding: 20px; border-top: 1px solid #efefef; margin-top: auto; } .user-profile { display: flex; align-items: center; } .user-avatar { width: 42px; height: 42px; border-radius: 50%; margin-right: 12px; background-color: var(--accent); color: white; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 18px; } .user-info { overflow: hidden; } .user-name { font-weight: 500; font-size: 15px; margin-bottom: 2px; color: var(--primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .user-email { font-size: 13px; color: #6c757d; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 480px) { .quick-actions { grid-template-columns: repeat(4, 1fr); } .balance-amount { font-size: 24px; } .content { padding: 16px; } } </style> </head> <body> <div class="app-container"> <header> <div class="logo"> <span class="logo-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M20 16V7a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v9m16 0H4m16 0 1.28 2.55a1 1 0 0 1-.9 1.45H3.62a1 1 0 0 1-.9-1.45L4 16"></path> </svg> </span> <span>NexusBank</span> </div> <div class="hamburger-menu" tabindex="0" role="button" aria-label="Menu" aria-expanded="false"> <div class="line"></div> <div class="line"></div> <div class="line"></div> </div> </header> <div class="content"> <div class="dashboard-section"> <h2 class="section-title">Account Overview</h2> <div class="balance-card"> <div class="balance-label">Available Balance</div> <div class="balance-amount">$4,287.32</div> <div class="balance-details"> <div class="balance-detail"> <div class="detail-label">Pending</div> <div class="detail-value">$153.75</div> </div> <div class="balance-detail"> <div class="detail-label">Daily Limit</div> <div class="detail-value">$2,000.00</div> </div> </div> </div> </div> <div class="dashboard-section"> <div class="quick-actions"> <button class="action-button" aria-label="Transfer Money"> <div class="action-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="m15 14 5-5-5-5"></path> <path d="M4 20v-2a6 6 0 0 1 6-6h10"></path> </svg> </div> <span class="action-text">Transfer</span> </button> <button class="action-button" aria-label="Pay Bills"> <div class="action-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <rect width="20" height="14" x="2" y="5" rx="2"></rect> <line x1="2" x2="22" y1="10" y2="10"></line> </svg> </div> <span class="action-text">Pay Bills</span> </button> <button class="action-button" aria-label="Mobile Deposit"> <div class="action-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <rect width="16" height="20" x="4" y="2" rx="2" ry="2"></rect> <circle cx="12" cy="14" r="4"></circle> <line x1="12" x2="12.01" y1="6" y2="6"></line> </svg> </div> <span class="action-text">Deposit</span> </button> <button class="action-button" aria-label="View Statements"> <div class="action-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path> <path d="M14 2v6h6"></path> <line x1="16" y1="13" x2="8" y2="13"></line> <line x1="16" y1="17" x2="8" y2="17"></line> <line x1="10" y1="9" x2="8" y2="9"></line> </svg> </div> <span class="action-text">Statements</span> </button> </div> </div> <div class="dashboard-section"> <h2 class="section-title">Recent Transactions</h2> <div class="transactions"> <ul class="transaction-list"> <li class="transaction-item"> <div class="transaction-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M20 7h-9"></path> <path d="M14 17H5"></path> <circle cx="17" cy="17" r="3"></circle> <circle cx="7" cy="7" r="3"></circle> </svg> </div> <div class="transaction-details"> <div class="transaction-name">Direct Deposit - Payroll</div> <div class="transaction-date">Today, 09:45 AM</div> </div> <div class="transaction-amount amount-credit">+$1,250.00</div> </li> <li class="transaction-item"> <div class="transaction-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <line x1="12" x2="12" y1="2" y2="22"></line> <path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path> </svg> </div> <div class="transaction-details"> <div class="transaction-name">Urban Coffee Shop</div> <div class="transaction-date">Yesterday, 2:34 PM</div> </div> <div class="transaction-amount amount-debit">-$5.75</div> </li> <li class="transaction-item"> <div class="transaction-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <rect width="20" height="14" x="2" y="5" rx="2"></rect> <line x1="2" x2="22" y1="10" y2="10"></line> </svg> </div> <div class="transaction-details"> <div class="transaction-name">Electric Utility Payment</div> <div class="transaction-date">Jul 25, 11:15 AM</div> </div> <div class="transaction-amount amount-debit">-$87.42</div> </li> <li class="transaction-item"> <div class="transaction-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="m7 10 5 5 5-5"></path> <path d="M12 15V3"></path> <path d="M12 22v-3"></path> <path d="M5 12H2"></path> <path d="M22 12h-3"></path> </svg> </div> <div class="transaction-details"> <div class="transaction-name">Transfer to Savings</div> <div class="transaction-date">Jul 23, 4:30 PM</div> </div> <div class="transaction-amount amount-debit">-$300.00</div> </li> </ul> </div> </div> </div> <div class="menu-overlay"></div> <nav class="side-menu" aria-hidden="true"> <div class="menu-header"> <div class="menu-title">Menu</div> <button class="menu-close" aria-label="Close menu">×</button> </div> <ul class="menu-items"> <li class="menu-item"> <a href="#" class="menu-link"> <span class="menu-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path> <polyline points="9 22 9 12 15 12 15 22"></polyline> </svg> </span> <span class="menu-text">Dashboard</span> </a> </li> <li class="menu-item"> <a href="#" class="menu-link"> <span class="menu-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M4 10h12"></path> <path d="M4 14h9"></path> <path d="M19 6a7.7 7.7 0 0 0-5.2-2A7.9 7.9 0 0 0 6 12c0 4.4 3.5 8 8 8 2 0 3.8-.8 5.2-2"></path> </svg> </span> <span class="menu-text">Accounts</span> </a> </li> <li class="menu-item"> <a href="#" class="menu-link"> <span class="menu-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="m15 14 5-5-5-5"></path> <path d="M4 20v-2a6 6 0 0 1 6-6h10"></path> </svg> </span> <span class="menu-text">Transfers</span> </a> </li> <li class="menu-item"> <a href="#" class="menu-link"> <span class="menu-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <rect width="20" height="14" x="2" y="5" rx="2"></rect> <line x1="2" x2="22" y1="10" y2="10"></line> </svg> </span> <span class="menu-text">Bill Payments</span> </a> </li> <li class="menu-item"> <a href="#" class="menu-link"> <span class="menu-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M21 9V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v3"></path> <path d="M3 16c0 2 1.5 3 3 3h12c1.5 0 3-1 3-3v-7H3v7Z"></path> <path d="M7 18v-7"></path> <path d="M17 18v-7"></path> <path d="M15 14h-3"></path> <path d="M12 14v4"></path> </svg> </span> <span class="menu-text">Deposit Checks</span> </a> </li> <li class="menu-item"> <a href="#" class="menu-link"> <span class="menu-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <rect width="20" height="14" x="2" y="5" rx="2"></rect> <line x1="2" x2="22" y1="10" y2="10"></line> <path d="M7 15h.01"></path> <path d="M11 15h2"></path> </svg> </span> <span class="menu-text">Cards</span> </a> </li> <li class="menu-item"> <a href="#" class="menu-link"> <span class="menu-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path> <path d="M14 2v6h6"></path> <line x1="16" y1="13" x2="8" y2="13"></line> <line x1="16" y1="17" x2="8" y2="17"></line> <line x1="10" y1="9" x2="8" y2="9"></line> </svg> </span> <span class="menu-text">Statements</span> </a> </li> <li class="menu-item"> <a href="#" class="menu-link"> <span class="menu-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M12 8a2.83 2.83 0 0 0 4 4 4 4 0 1 1-8 0 4 4 0 0 1 8 0 2.83 2.83 0 0 1-4 4"></path> <path d="M12 8v4"></path> <path d="M12 16h.01"></path> </svg> </span> <span class="menu-text">Help & Support</span> </a> </li> <li class="menu-item"> <a href="#" class="menu-link"> <span class="menu-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"></path> <circle cx="12" cy="12" r="3"></circle> </svg> </span> <span class="menu-text">Settings</span> </a> </li> </ul> <div class="menu-footer"> <div class="user-profile"> <div class="user-avatar">AM</div> <div class="user-info"> <div class="user-name">Alex Morgan</div> <div class="user-email">[email protected]</div> </div> </div> </div> </nav> </div> <script> document.addEventListener('DOMContentLoaded', function() { const hamburgerMenu = document.querySelector('.hamburger-menu'); const menuOverlay = document.querySelector('.menu-overlay'); const sideMenu = document.querySelector('.side-menu'); const menuClose = document.querySelector('.menu-close'); const menuLinks = document.querySelectorAll('.menu-link'); // Function to open the menu function openMenu() { hamburgerMenu.classList.add('active'); menuOverlay.classList.add('active'); sideMenu.classList.add('active'); sideMenu.setAttribute('aria-hidden', 'false'); hamburgerMenu.setAttribute('aria-expanded', 'true'); // Trap focus within the menu setTimeout(() => { menuClose.focus(); }, 100); } // Function to close the menu function closeMenu() { hamburgerMenu.classList.remove('active'); menuOverlay.classList.remove('active'); sideMenu.classList.remove('active'); sideMenu.setAttribute('aria-hidden', 'true'); hamburgerMenu.setAttribute('aria-expanded', 'false'); // Return focus to hamburger menu hamburgerMenu.focus(); } // Toggle menu on hamburger click hamburgerMenu.addEventListener('click', function() { if (sideMenu.classList.contains('active')) { closeMenu(); } else { openMenu(); } }); // Open menu on hamburger keypress (Enter or Space) hamburgerMenu.addEventListener('keydown', function(e) { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); if (sideMenu.classList.contains('active')) { closeMenu(); } else { openMenu(); } } }); // Close menu when overlay is clicked menuOverlay.addEventListener('click', closeMenu); // Close menu when close button is clicked menuClose.addEventListener('click', closeMenu); // Close menu when ESC key is pressed document.addEventListener('keydown', function(e) { if (e.key === 'Escape' && sideMenu.classList.contains('active')) { closeMenu(); } }); // Add hover effects and animations for menu items menuLinks.forEach(link => { link.addEventListener('click', function(e) { e.preventDefault(); // Add ripple effect const ripple = document.createElement('span'); ripple.classList.add('ripple'); this.appendChild(ripple); // Remove ripple after animation setTimeout(() => { ripple.remove(); }, 600); // Close the menu after a slight delay setTimeout(() => { closeMenu(); }, 150); }); }); // Prevent clicks inside the menu from closing it sideMenu.addEventListener('click', function(e) { e.stopPropagation(); }); // Add button click effects for action buttons const actionButtons = document.querySelectorAll('.action-button'); actionButtons.forEach(button => { button.addEventListener('click', function() { this.style.transform = 'scale(0.95)'; setTimeout(() => { this.style.transform = ''; }, 150); }); }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>PulseTrack - Health & Fitness Tracker</title> <style> :root { --primary: #3498db; --secondary: #2ecc71; --tertiary: #9b59b6; --light: #ecf0f1; --dark: #2c3e50; --transition: all 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55); } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } body { background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); height: 100vh; display: flex; flex-direction: column; overflow-x: hidden; } header { display: flex; justify-content: space-between; align-items: center; padding: 1rem; background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(10px); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); position: relative; z-index: 100; } .logo { display: flex; align-items: center; font-weight: 700; color: var(--dark); font-size: 1.5rem; } .logo-icon { width: 32px; height: 32px; background: linear-gradient(135deg, var(--primary), var(--secondary)); border-radius: 50%; margin-right: 10px; position: relative; display: flex; align-items: center; justify-content: center; } .logo-icon::after { content: ''; position: absolute; width: 18px; height: 10px; border: 2px solid white; border-top: none; border-radius: 0 0 10px 10px; transform: translateY(-2px); } .hamburger-menu { width: 40px; height: 40px; position: relative; cursor: pointer; display: flex; justify-content: center; align-items: center; z-index: 101; transition: var(--transition); } .hamburger-icon { width: 30px; height: 24px; position: relative; transition: var(--transition); } .hamburger-icon span { display: block; position: absolute; height: 3px; width: 100%; background: linear-gradient(to right, var(--primary), var(--secondary)); border-radius: 4px; opacity: 1; left: 0; transform-origin: left center; transition: var(--transition); } .hamburger-icon span:nth-child(1) { top: 0px; transform: rotate(0deg); } .hamburger-icon span:nth-child(2) { top: 10px; width: 80%; transform: rotate(0deg); } .hamburger-icon span:nth-child(3) { top: 20px; transform: rotate(0deg); } /* Active State */ .hamburger-menu.active .hamburger-icon { transform: rotate(180deg); } .hamburger-menu.active .hamburger-icon span:nth-child(1) { transform: rotate(45deg); top: -1px; left: 4px; background: linear-gradient(to right, var(--tertiary), var(--primary)); } .hamburger-menu.active .hamburger-icon span:nth-child(2) { width: 0%; opacity: 0; } .hamburger-menu.active .hamburger-icon span:nth-child(3) { transform: rotate(-45deg); top: 20px; left: 4px; background: linear-gradient(to right, var(--tertiary), var(--primary)); } .menu { position: fixed; top: 0; right: -320px; width: 320px; height: 100vh; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1); transition: var(--transition); padding: 80px 20px 20px; z-index: 100; overflow-y: auto; } .menu.open { right: 0; } .menu-section { margin-bottom: 30px; } .menu-section h3 { color: var(--dark); font-size: 1.3rem; margin-bottom: 15px; position: relative; padding-bottom: 10px; } .menu-section h3::after { content: ''; position: absolute; bottom: 0; left: 0; width: 40px; height: 3px; background: linear-gradient(to right, var(--primary), var(--secondary)); border-radius: 3px; } .menu-item { display: flex; align-items: center; padding: 12px 15px; margin-bottom: 8px; border-radius: 8px; transition: var(--transition); cursor: pointer; color: var(--dark); } .menu-item:hover { background: rgba(52, 152, 219, 0.1); transform: translateX(5px); } .menu-item.active { background: linear-gradient(135deg, rgba(52, 152, 219, 0.2), rgba(46, 204, 113, 0.2)); font-weight: 600; } .menu-icon { margin-right: 15px; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; color: var(--primary); } main { flex: 1; padding: 20px; overflow-y: auto; } .dashboard { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin-bottom: 30px; } .card { background: white; border-radius: 15px; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08); padding: 25px; transition: var(--transition); position: relative; overflow: hidden; } .card:hover { transform: translateY(-5px); box-shadow: 0 12px 25px rgba(0, 0, 0, 0.12); } .card::before { content: ''; position: absolute; top: 0; left: 0; width: 5px; height: 100%; background: linear-gradient(to bottom, var(--primary), var(--secondary)); border-radius: 5px 0 0 5px; } .card-title { font-size: 1.1rem; color: var(--dark); margin-bottom: 15px; display: flex; align-items: center; } .card-title svg { margin-right: 10px; width: 20px; height: 20px; } .card-value { font-size: 2.2rem; font-weight: 700; color: var(--dark); margin-bottom: 5px; } .card-progress { width: 100%; height: 8px; background: #e0e0e0; border-radius: 4px; margin: 15px 0; position: relative; overflow: hidden; } .card-progress-bar { position: absolute; top: 0; left: 0; height: 100%; background: linear-gradient(to right, var(--primary), var(--secondary)); border-radius: 4px; transition: width 0.8s ease; } .card-meta { display: flex; justify-content: space-between; font-size: 0.85rem; color: #7f8c8d; } .device-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; } .device-card { background: white; border-radius: 15px; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08); padding: 20px; transition: var(--transition); display: flex; align-items: center; cursor: pointer; } .device-card:hover { transform: translateY(-5px); box-shadow: 0 12px 25px rgba(0, 0, 0, 0.12); } .device-icon { width: 50px; height: 50px; background: linear-gradient(135deg, var(--primary), var(--secondary)); border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-right: 15px; } .device-icon svg { width: 30px; height: 30px; color: white; } .device-info h3 { font-size: 1.1rem; color: var(--dark); margin-bottom: 5px; } .device-info p { font-size: 0.85rem; color: #7f8c8d; } .device-status { height: 10px; width: 10px; border-radius: 50%; background: #2ecc71; margin-left: auto; position: relative; } .device-status.connected { background: #2ecc71; } .device-status.disconnected { background: #e74c3c; } .device-status.connected::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; background: #2ecc71; opacity: 0.5; animation: pulse 1.5s infinite; } .section-title { font-size: 1.5rem; color: var(--dark); margin-bottom: 20px; position: relative; display: inline-block; } .section-title::after { content: ''; position: absolute; bottom: -5px; left: 0; width: 60%; height: 3px; background: linear-gradient(to right, var(--primary), var(--secondary)); border-radius: 3px; } @keyframes pulse { 0% { transform: scale(1); opacity: 0.5; } 70% { transform: scale(1.8); opacity: 0; } 100% { transform: scale(1); opacity: 0; } } @media (max-width: 768px) { .dashboard, .device-grid { grid-template-columns: 1fr; } .card-value { font-size: 1.8rem; } .menu { width: 280px; } } /* Light Condition Adjustments */ @media (prefers-color-scheme: light) { .hamburger-icon span { background: linear-gradient(to right, var(--primary), var(--secondary)); } } /* Dark Condition Adjustments */ @media (prefers-color-scheme: dark) { .hamburger-icon span { background: linear-gradient(to right, var(--primary), var(--tertiary)); } } /* Wearable Device Optimization */ @media (max-width: 320px) { .hamburger-menu { width: 36px; height: 36px; } .hamburger-icon { width: 24px; height: 20px; } .logo { font-size: 1.2rem; } .logo-icon { width: 24px; height: 24px; } .card-title { font-size: 0.9rem; } .card-value { font-size: 1.6rem; } .menu { width: 240px; } } </style> </head> <body> <header> <div class="logo"> <div class="logo-icon"></div> PulseTrack </div> <div class="hamburger-menu"> <div class="hamburger-icon"> <span></span> <span></span> <span></span> </div> </div> </header> <div class="menu"> <div class="menu-section"> <h3>Track & Analyze</h3> <div class="menu-item active"> <div class="menu-icon"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 8v8m-4-5v5m-4-2v2m-2 4h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" /> </svg> </div> Dashboard </div> <div class="menu-item"> <div class="menu-icon"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" /> </svg> </div> Activity Stats </div> <div class="menu-item"> <div class="menu-icon"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" /> </svg> </div> Heart Rate </div> <div class="menu-item"> <div class="menu-icon"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9" /> </svg> </div> Sleep Patterns </div> </div> <div class="menu-section"> <h3>Manage</h3> <div class="menu-item"> <div class="menu-icon"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" /> </svg> </div> Workout Plans </div> <div class="menu-item"> <div class="menu-icon"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" /> </svg> </div> Set Goals </div> <div class="menu-item"> <div class="menu-icon"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" /> </svg> </div> Reminders </div> </div> <div class="menu-section"> <h3>Connected Devices</h3> <div class="menu-item"> <div class="menu-icon"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z" /> </svg> </div> Manage Devices </div> <div class="menu-item"> <div class="menu-icon"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" /> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /> </svg> </div> Settings </div> </div> </div> <main> <h2 class="section-title">Health Overview</h2> <div class="dashboard"> <div class="card"> <div class="card-title"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" /> </svg> Steps Today </div> <div class="card-value">8,432</div> <div class="card-progress"> <div class="card-progress-bar" style="width: 72%;"></div> </div> <div class="card-meta"> <span>Goal: 10,000</span> <span>72% Complete</span> </div> </div> <div class="card"> <div class="card-title"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" /> </svg> Resting Heart Rate </div> <div class="card-value">68 <span style="font-size: 1rem;">bpm</span></div> <div class="card-progress"> <div class="card-progress-bar" style="width: 35%; background: linear-gradient(to right, #2ecc71, #3498db);"></div> </div> <div class="card-meta"> <span>Optimal Range</span> <span>60-100 bpm</span> </div> </div> <div class="card"> <div class="card-title"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" /> </svg> Sleep </div> <div class="card-value">7.5<span style="font-size: 1rem;">hrs</span></div> <div class="card-progress"> <div class="card-progress-bar" style="width: 85%; background: linear-gradient(to right, #9b59b6, #3498db);"></div> </div> <div class="card-meta"> <span>Goal: 8 hours</span> <span>94% of goal</span> </div> </div> </div> <h2 class="section-title">Connected Devices</h2> <div class="device-grid"> <div class="device-card"> <div class="device-icon"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="white"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z" /> </svg> </div> <div class="device-info"> <h3>HealthBand X2</h3> <p>Last synced: 3 minutes ago</p> </div> <div class="device-status connected"></div> </div> <div class="device-card"> <div class="device-icon" style="background: linear-gradient(135deg, var(--tertiary), var(--primary));"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="white"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" /> </svg> </div> <div class="device-info"> <h3>Smart Scale Pro</h3> <p>Last synced: 2 days ago</p> </div> <div class="device-status disconnected"></div> </div> <div class="device-card"> <div class="device-icon" style="background: linear-gradient(135deg, var(--secondary), var(--tertiary));"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="white"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.536 8.464a5 5 0 010 7.072m2.828-9.9a9 9 0 010 12.728M5.586 15.536a5 5 0 001.414 1.414m2.828-9.9a9 9 0 012.728-2.728" /> </svg> </div> <div class="device-info"> <h3>HeartSense Monitor</h3> <p>Last synced: 10 minutes ago</p> </div> <div class="device-status connected"></div> </div> </div> </main> <script> document.addEventListener('DOMContentLoaded', function() { // Initialize UI elements initializeMenu(); animateProgressBars(); }); function initializeMenu() { const hamburgerMenu = document.querySelector('.hamburger-menu'); const menu = document.querySelector('.menu'); hamburgerMenu.addEventListener('click', function() { this.classList.toggle('active'); menu.classList.toggle('open'); }); // Menu items click event const menuItems = document.querySelectorAll('.menu-item'); menuItems.forEach(item => { item.addEventListener('click', function() { menuItems.forEach(i => i.classList.remove('active')); this.classList.add('active'); }); }); // Close menu when clicking outside document.addEventListener('click', function(event) { const isClickInsideMenu = menu.contains(event.target); const isClickOnHamburger = hamburgerMenu.contains(event.target); if (!isClickInsideMenu && !isClickOnHamburger && menu.classList.contains('open')) { menu.classList.remove('open'); hamburgerMenu.classList.remove('active'); } }); } function animateProgressBars() { const progressBars = document.querySelectorAll('.card-progress-bar'); progressBars.forEach(bar => { const width = bar.style.width; bar.style.width = '0'; setTimeout(() => { bar.style.width = width; }, 300); }); } // Device card interactions const deviceCards = document.querySelectorAll('.device-card'); deviceCards.forEach(card => { card.addEventListener('click', function() { this.style.transform = 'scale(0.95)'; setTimeout(() => { this.style.transform = ''; }, 200); }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Sonic Stream Menu</title> <style> :root { --primary: #1DB954; --secondary: #121212; --text: #f8f8f8; --hover: #1ed760; --transition-duration: 0.6s; --menu-size: 40px; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; background: linear-gradient(135deg, #121212 0%, #181818 50%, #282828 100%); color: var(--text); height: 100vh; display: flex; flex-direction: column; overflow: hidden; position: relative; } .container { width: 100%; max-width: 700px; height: 100%; max-height: 700px; margin: 0 auto; padding: 20px; position: relative; } .header { display: flex; justify-content: space-between; align-items: center; padding: 15px 0; position: relative; z-index: 100; } .logo { font-size: 1.5rem; font-weight: 700; display: flex; align-items: center; gap: 10px; } .logo-icon { width: 30px; height: 30px; background: var(--primary); border-radius: 50%; position: relative; overflow: hidden; } .logo-icon::before, .logo-icon::after { content: ''; position: absolute; background: var(--secondary); } .logo-icon::before { width: 12px; height: 12px; border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%, -50%); } .logo-icon::after { width: 3px; height: 10px; top: 10px; left: 19px; border-radius: 2px; transform: rotate(30deg); } .hamburger-menu { width: var(--menu-size); height: var(--menu-size); position: relative; cursor: pointer; z-index: 1000; } .hamburger-lines { position: relative; width: 100%; height: 100%; } .line { position: absolute; height: 2px; width: 100%; background: var(--text); border-radius: 4px; transition: all var(--transition-duration) ease; transform-origin: center; left: 0; } .line-1 { top: 25%; width: 70%; } .line-2 { top: 50%; transform: translateY(-50%); } .line-3 { bottom: 25%; width: 50%; } /* Music notes (abstract lines) */ .notes { position: absolute; width: 100%; height: 100%; top: 0; left: 0; opacity: 0; transition: opacity var(--transition-duration) ease; } .note { position: absolute; background: var(--primary); border-radius: 50%; transform: scale(0); transition: transform var(--transition-duration) cubic-bezier(0.34, 1.56, 0.64, 1); } .note-1 { width: 8px; height: 8px; top: 10px; right: 5px; transition-delay: 0.1s; } .note-2 { width: 6px; height: 6px; top: 25px; right: 12px; transition-delay: 0.2s; } .note-3 { width: 10px; height: 10px; bottom: 10px; right: 8px; transition-delay: 0.3s; } .hamburger-menu:hover .note { transform: scale(1); } .hamburger-menu:hover .notes { opacity: 1; } /* Active state (when menu is open) */ .active .line-1 { top: 50%; transform: translateY(-50%) rotate(45deg); width: 100%; } .active .line-2 { opacity: 0; } .active .line-3 { bottom: 50%; transform: translateY(50%) rotate(-45deg); width: 100%; } .active .notes { opacity: 0; } .nav-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 0; background: rgba(18, 18, 18, 0.97); z-index: 99; overflow: hidden; transition: height var(--transition-duration) cubic-bezier(0.77, 0, 0.175, 1); } .nav-overlay.open { height: 100%; } .menu-content { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%; opacity: 0; transform: translateY(30px); transition: all var(--transition-duration) ease; transition-delay: 0.2s; } .nav-overlay.open .menu-content { opacity: 1; transform: translateY(0); } .menu-items { list-style: none; text-align: center; } .menu-item { margin: 1.5rem 0; font-size: 2rem; font-weight: 700; position: relative; overflow: hidden; cursor: pointer; } .menu-item a { color: var(--text); text-decoration: none; display: inline-block; position: relative; transition: all 0.3s ease; } .menu-item a::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 3px; background: var(--primary); transition: width 0.3s ease; } .menu-item a:hover { color: var(--primary); } .menu-item a:hover::after { width: 100%; } .equalizer { display: flex; align-items: flex-end; height: 30px; gap: 3px; position: absolute; top: 15px; right: 15px; } .bar { width: 3px; background: var(--primary); border-radius: 3px; animation: equalize 1.5s ease-in-out infinite alternate; } .bar-1 { height: 15px; animation-delay: 0s; } .bar-2 { height: 22px; animation-delay: 0.2s; } .bar-3 { height: 13px; animation-delay: 0.4s; } .bar-4 { height: 18px; animation-delay: 0.6s; } @keyframes equalize { 0% { height: 5px; } 100% { height: 25px; } } .content { padding: 20px 0; position: relative; z-index: 10; flex: 1; display: flex; flex-direction: column; justify-content: center; } .welcome-text { font-size: 3rem; font-weight: 800; margin-bottom: 20px; line-height: 1.1; background: linear-gradient(90deg, var(--text), var(--primary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .subtitle { font-size: 1.1rem; margin-bottom: 30px; line-height: 1.5; opacity: 0.8; } .featured { display: flex; gap: 15px; overflow-x: auto; padding: 10px 0; margin-top: 20px; scrollbar-width: none; } .featured::-webkit-scrollbar { display: none; } .album { flex: 0 0 auto; width: 150px; position: relative; border-radius: 8px; overflow: hidden; transition: transform 0.3s ease; cursor: pointer; } .album:hover { transform: translateY(-5px); } .album-cover { width: 100%; height: 150px; background: linear-gradient(45deg, #333 0%, #555 100%); position: relative; overflow: hidden; } .album-cover::before { content: ''; position: absolute; width: 60px; height: 60px; border-radius: 50%; background: rgba(255, 255, 255, 0.1); top: 50%; left: 50%; transform: translate(-50%, -50%); } .album-cover::after { content: ''; position: absolute; width: 20px; height: 20px; border-radius: 50%; background: rgba(0, 0, 0, 0.3); top: 50%; left: 50%; transform: translate(-50%, -50%); } .album-title { font-size: 0.9rem; margin-top: 10px; font-weight: 600; } .album-artist { font-size: 0.7rem; opacity: 0.7; } /* Sound waves animation */ .sound-waves { position: absolute; bottom: 0; left: 0; width: 100%; height: 120px; display: flex; justify-content: center; align-items: flex-end; pointer-events: none; opacity: 0.5; } .wave { width: 3px; margin: 0 2px; border-radius: 3px; background: var(--primary); animation: soundWave 1.5s infinite ease-in-out alternate; } @keyframes soundWave { 0% { height: 5px; } 100% { height: var(--wave-height, 30px); } } /* Generate waves with different heights and delays */ .wave:nth-child(1) { --wave-height: 45px; animation-delay: 0s; } .wave:nth-child(2) { --wave-height: 25px; animation-delay: 0.1s; } .wave:nth-child(3) { --wave-height: 60px; animation-delay: 0.2s; } .wave:nth-child(4) { --wave-height: 35px; animation-delay: 0.3s; } .wave:nth-child(5) { --wave-height: 50px; animation-delay: 0.4s; } .wave:nth-child(6) { --wave-height: 20px; animation-delay: 0.5s; } .wave:nth-child(7) { --wave-height: 40px; animation-delay: 0.6s; } .wave:nth-child(8) { --wave-height: 55px; animation-delay: 0.7s; } .wave:nth-child(9) { --wave-height: 30px; animation-delay: 0.8s; } .wave:nth-child(10) { --wave-height: 70px; animation-delay: 0.9s; } .wave:nth-child(11) { --wave-height: 25px; animation-delay: 1.0s; } .wave:nth-child(12) { --wave-height: 50px; animation-delay: 1.1s; } .wave:nth-child(13) { --wave-height: 35px; animation-delay: 1.2s; } .wave:nth-child(14) { --wave-height: 20px; animation-delay: 1.3s; } .wave:nth-child(15) { --wave-height: 60px; animation-delay: 1.4s; } .wave:nth-child(16) { --wave-height: 40px; animation-delay: 1.5s; } .wave:nth-child(17) { --wave-height: 30px; animation-delay: 1.6s; } .wave:nth-child(18) { --wave-height: 50px; animation-delay: 1.7s; } .wave:nth-child(19) { --wave-height: 25px; animation-delay: 1.8s; } .wave:nth-child(20) { --wave-height: 45px; animation-delay: 1.9s; } /* Responsive Styles */ @media (max-width: 600px) { .welcome-text { font-size: 2.3rem; } .menu-item { font-size: 1.5rem; margin: 1rem 0; } } </style> </head> <body> <div class="container"> <div class="header"> <div class="logo"> <div class="logo-icon"></div> <span>SonicFlow</span> </div> <div class="hamburger-menu"> <div class="hamburger-lines"> <span class="line line-1"></span> <span class="line line-2"></span> <span class="line line-3"></span> </div> <div class="notes"> <div class="note note-1"></div> <div class="note note-2"></div> <div class="note note-3"></div> </div> </div> </div> <div class="content"> <h1 class="welcome-text">Your rhythm,<br>your journey.</h1> <p class="subtitle">Discover music that moves with you. Personalized playlists crafted from your unique sonic fingerprint—evolving as you do.</p> <div class="featured"> <div class="album"> <div class="album-cover" style="background: linear-gradient(45deg, #3d1c54 0%, #7b2e8e 100%)"></div> <div class="album-title">Midnight Synthwave</div> <div class="album-artist">Neon Echoes</div> </div> <div class="album"> <div class="album-cover" style="background: linear-gradient(45deg, #1f3a52 0%, #4188bf 100%)"></div> <div class="album-title">Cosmic Vibrations</div> <div class="album-artist">Stellar Pulse</div> </div> <div class="album"> <div class="album-cover" style="background: linear-gradient(45deg, #542c1c 0%, #b85c38 100%)"></div> <div class="album-title">Urban Echoes</div> <div class="album-artist">City Soundscape</div> </div> <div class="album"> <div class="album-cover" style="background: linear-gradient(45deg, #1c4d33 0%, #38b874 100%)"></div> <div class="album-title">Emerald Dreams</div> <div class="album-artist">Forest Whispers</div> </div> </div> </div> <div class="sound-waves"> <div class="wave"></div> <div class="wave"></div> <div class="wave"></div> <div class="wave"></div> <div class="wave"></div> <div class="wave"></div> <div class="wave"></div> <div class="wave"></div> <div class="wave"></div> <div class="wave"></div> <div class="wave"></div> <div class="wave"></div> <div class="wave"></div> <div class="wave"></div> <div class="wave"></div> <div class="wave"></div> <div class="wave"></div> <div class="wave"></div> <div class="wave"></div> <div class="wave"></div> </div> </div> <div class="nav-overlay"> <div class="menu-content"> <div class="equalizer"> <div class="bar bar-1"></div> <div class="bar bar-2"></div> <div class="bar bar-3"></div> <div class="bar bar-4"></div> </div> <ul class="menu-items"> <li class="menu-item"><a href="#">Discover</a></li> <li class="menu-item"><a href="#">Your Library</a></li> <li class="menu-item"><a href="#">Playlists</a></li> <li class="menu-item"><a href="#">Podcasts</a></li> <li class="menu-item"><a href="#">Profile</a></li> </ul> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { const hamburgerMenu = document.querySelector('.hamburger-menu'); const navOverlay = document.querySelector('.nav-overlay'); hamburgerMenu.addEventListener('click', function() { this.classList.toggle('active'); navOverlay.classList.toggle('open'); }); // Close menu when clicking on a menu item const menuItems = document.querySelectorAll('.menu-item a'); menuItems.forEach(item => { item.addEventListener('click', function(e) { e.preventDefault(); // Prevent actual navigation hamburgerMenu.classList.remove('active'); navOverlay.classList.remove('open'); }); }); // Generate animated sound waves function generateWaves() { const soundWaves = document.querySelector('.sound-waves'); soundWaves.innerHTML = ''; for(let i = 0; i < 20; i++) { const wave = document.createElement('div'); wave.classList.add('wave'); wave.style.animationDelay = `${i * 0.1}s`; soundWaves.appendChild(wave); } } generateWaves(); // Subtle hover effect on the albums const albums = document.querySelectorAll('.album'); albums.forEach(album => { album.addEventListener('mouseenter', function() { this.style.transform = 'translateY(-8px) scale(1.05)'; this.style.boxShadow = '0 10px 20px rgba(0, 0, 0, 0.2)'; }); album.addEventListener('mouseleave', function() { this.style.transform = 'translateY(0) scale(1)'; this.style.boxShadow = 'none'; }); }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Educational Platform Menu</title> <style> :root { --primary-color: #2c3e50; --secondary-color: #f1f2f6; --accent-color: #3498db; --text-color: #333; --shadow-color: rgba(0, 0, 0, 0.2); --transition-speed: 0.3s; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } body { background-color: var(--secondary-color); color: var(--text-color); display: flex; flex-direction: column; min-height: 700px; max-width: 700px; margin: 0 auto; overflow-x: hidden; } header { background-color: white; padding: 1rem; box-shadow: 0 2px 8px var(--shadow-color); position: relative; z-index: 100; display: flex; justify-content: space-between; align-items: center; } .logo { font-weight: 700; font-size: 1.5rem; color: var(--primary-color); letter-spacing: -0.5px; } .logo span { color: var(--accent-color); } .hamburger-menu { width: 36px; height: 36px; display: flex; flex-direction: column; justify-content: center; align-items: center; cursor: pointer; position: relative; background-color: transparent; border: none; transition: transform var(--transition-speed); z-index: 110; } .hamburger-menu:focus { outline: none; } .hamburger-menu::before { content: ''; position: absolute; width: 42px; height: 42px; background-color: rgba(52, 152, 219, 0); border-radius: 50%; transform: scale(0); transition: transform 0.3s, background-color 0.3s; z-index: -1; } .hamburger-menu:hover::before { transform: scale(1); background-color: rgba(52, 152, 219, 0.1); } .hamburger-menu.active::before { background-color: rgba(52, 152, 219, 0.2); transform: scale(1); } .hamburger-menu:focus::before { transform: scale(1); background-color: rgba(52, 152, 219, 0.2); } .hamburger-line { width: 24px; height: 2px; background-color: var(--primary-color); margin: 2px 0; transition: transform var(--transition-speed), opacity var(--transition-speed); border-radius: 2px; box-shadow: 0 1px 2px var(--shadow-color); } .hamburger-menu.active .hamburger-line:nth-child(1) { transform: translateY(6px) rotate(45deg); } .hamburger-menu.active .hamburger-line:nth-child(2) { opacity: 0; } .hamburger-menu.active .hamburger-line:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } .menu-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); opacity: 0; visibility: hidden; transition: opacity var(--transition-speed), visibility var(--transition-speed); z-index: 90; } .menu-overlay.active { opacity: 1; visibility: visible; } .menu-container { position: fixed; top: 0; left: 0; height: 100%; width: 300px; max-width: 85%; background-color: white; transform: translateX(-100%); transition: transform var(--transition-speed); z-index: 100; display: flex; flex-direction: column; overflow-y: auto; box-shadow: 2px 0 10px var(--shadow-color); } .menu-container.active { transform: translateX(0); } .menu-header { padding: 1.5rem; background-color: var(--primary-color); color: white; } .menu-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background-color: var(--shadow-color); flex-grow: 1; } .menu-item { background-color: white; padding: 1.5rem 1rem; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: var(--primary-color); transition: all var(--transition-speed); position: relative; overflow: hidden; cursor: pointer; } .menu-item:hover, .menu-item:focus { background-color: #f8f9fa; transform: translateY(-2px); box-shadow: 0 4px 8px var(--shadow-color); z-index: 1; } .menu-item:active { transform: translateY(0); box-shadow: 0 2px 4px var(--shadow-color); } .menu-item i { font-size: 1.75rem; margin-bottom: 0.5rem; transition: transform var(--transition-speed); } .menu-item:hover i { transform: scale(1.1); } .menu-item::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 3px; background-color: var(--accent-color); transform: scaleX(0); transition: transform 0.3s; transform-origin: left; } .menu-item:hover::after, .menu-item:focus::after { transform: scaleX(1); } .menu-item h3 { font-size: 0.9rem; font-weight: 600; margin-bottom: 0.25rem; } .menu-item p { font-size: 0.7rem; opacity: 0.7; } .menu-footer { padding: 1rem; background-color: #f8f9fa; font-size: 0.8rem; text-align: center; color: #6c757d; border-top: 1px solid #dee2e6; } main { flex-grow: 1; padding: 2rem 1rem; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } main h1 { font-size: 2rem; margin-bottom: 1.5rem; color: var(--primary-color); } main p { margin-bottom: 2rem; max-width: 600px; line-height: 1.6; } .feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem; width: 100%; margin-top: 1rem; } .feature-card { background-color: white; padding: 1.5rem; border-radius: 8px; box-shadow: 0 4px 12px var(--shadow-color); transition: transform var(--transition-speed); } .feature-card:hover { transform: translateY(-5px); } .feature-card i { font-size: 2rem; color: var(--accent-color); margin-bottom: 1rem; } .feature-card h3 { margin-bottom: 0.5rem; color: var(--primary-color); } .feature-card p { font-size: 0.9rem; margin-bottom: 0; } @media (max-width: 576px) { .feature-grid { grid-template-columns: 1fr; } } /* Visual indicator for keyboard navigation */ button:focus, .menu-item:focus { outline: 2px solid var(--accent-color); outline-offset: 2px; } /* Fancy tap/click effect */ .pulse { position: absolute; background-color: rgba(52, 152, 219, 0.4); border-radius: 50%; transform: scale(0); animation: pulse 0.6s ease-out; pointer-events: none; } @keyframes pulse { to { transform: scale(3); opacity: 0; } } </style> </head> <body> <header> <div class="logo">scholar<span>Grid</span></div> <button class="hamburger-menu" aria-label="Menu" aria-expanded="false" aria-controls="menu-container"> <div class="hamburger-line"></div> <div class="hamburger-line"></div> <div class="hamburger-line"></div> </button> </header> <div class="menu-overlay"></div> <div class="menu-container" id="menu-container"> <div class="menu-header"> <h2>Learning Pathways</h2> </div> <div class="menu-grid"> <div class="menu-item" tabindex="0"> <i>📚</i> <h3>Courses</h3> <p>Structured learning modules with assessment</p> </div> <div class="menu-item" tabindex="0"> <i>🧠</i> <h3>Knowledge Base</h3> <p>Research-backed academic resources</p> </div> <div class="menu-item" tabindex="0"> <i>📅</i> <h3>Study Planner</h3> <p>Precision scheduling tools for academics</p> </div> <div class="menu-item" tabindex="0"> <i>🔍</i> <h3>Research Tools</h3> <p>Advanced analytics and citation assistance</p> </div> <div class="menu-item" tabindex="0"> <i>👥</i> <h3>Study Groups</h3> <p>Collaborative learning environments</p> </div> <div class="menu-item" tabindex="0"> <i>📊</i> <h3>Progress Tracker</h3> <p>Visualize your academic journey</p> </div> <div class="menu-item" tabindex="0"> <i>🏆</i> <h3>Achievements</h3> <p>Competency badges and certificates</p> </div> <div class="menu-item" tabindex="0"> <i>⚙️</i> <h3>Settings</h3> <p>Customize your learning environment</p> </div> </div> <div class="menu-footer"> ScholarGrid • Precision Learning Framework </div> </div> <main> <h1>Structured Learning for Academic Excellence</h1> <p>ScholarGrid's minimalist approach removes distractions, allowing students to focus on what matters most – building knowledge systematically and effectively. Our grid-based navigation reflects the methodical nature of scholarly pursuit.</p> <div class="feature-grid"> <div class="feature-card"> <i>🧩</i> <h3>Modular Learning</h3> <p>Component-based curriculum broken down into digestible, interconnected learning units.</p> </div> <div class="feature-card"> <i>🔄</i> <h3>Adaptive Pathways</h3> <p>Responsive learning journeys that adjust to your knowledge gaps and strengths.</p> </div> <div class="feature-card"> <i>📋</i> <h3>Structured Assessment</h3> <p>Rigorous evaluation methods aligned with educational standards and learning objectives.</p> </div> </div> </main> <script> document.addEventListener('DOMContentLoaded', function() { const hamburgerMenu = document.querySelector('.hamburger-menu'); const menuContainer = document.querySelector('.menu-container'); const menuOverlay = document.querySelector('.menu-overlay'); const menuItems = document.querySelectorAll('.menu-item'); // Toggle menu function toggleMenu() { hamburgerMenu.classList.toggle('active'); menuContainer.classList.toggle('active'); menuOverlay.classList.toggle('active'); const expanded = hamburgerMenu.getAttribute('aria-expanded') === 'true'; hamburgerMenu.setAttribute('aria-expanded', !expanded); } hamburgerMenu.addEventListener('click', toggleMenu); menuOverlay.addEventListener('click', toggleMenu); // Handle escape key document.addEventListener('keydown', function(e) { if (e.key === 'Escape' && menuContainer.classList.contains('active')) { toggleMenu(); } }); // Create ripple effect on menu items function createRipple(event) { const button = event.currentTarget; const circle = document.createElement('span'); const diameter = Math.max(button.clientWidth, button.clientHeight); circle.style.width = circle.style.height = `${diameter}px`; circle.style.left = `${event.clientX - button.getBoundingClientRect().left - diameter / 2}px`; circle.style.top = `${event.clientY - button.getBoundingClientRect().top - diameter / 2}px`; circle.classList.add('pulse'); const ripple = button.getElementsByClassName('pulse')[0]; if (ripple) { ripple.remove(); } button.appendChild(circle); } // Add ripple effect to menu items menuItems.forEach(item => { item.addEventListener('click', createRipple); item.addEventListener('keydown', function(e) { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); createRipple(e); // Simulate clicking the item const clickEvent = new MouseEvent('click', { bubbles: true, cancelable: true, view: window }); item.dispatchEvent(clickEvent); } }); }); // Add ripple effect to hamburger menu hamburgerMenu.addEventListener('click', createRipple); // Add active state for menu items menuItems.forEach(item => { item.addEventListener('click', function() { // Here you would normally navigate or perform an action // For demo purposes, just toggle a class menuItems.forEach(i => i.classList.remove('current')); this.classList.add('current'); // Close the menu after selection on mobile if (window.innerWidth < 768) { setTimeout(toggleMenu, 300); } }); }); }); </script> </body> </html>
<html> <head> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Press Start 2P', system-ui, monospace; } :root { --primary: #ff3e7f; --secondary: #40e0d0; --dark: #2a2a4a; --light: #f8f8ff; --accent: #ffcc00; } body { width: 700px; height: 700px; display: flex; justify-content: center; align-items: center; background: linear-gradient(135deg, #222266, #111133); overflow: hidden; position: relative; } .portal-container { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; padding: 20px; position: relative; } .pixel-grid { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px); background-size: 20px 20px; z-index: 1; } .header { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 15px; z-index: 2; margin-bottom: 30px; } .logo { font-size: 24px; color: var(--light); text-shadow: 0 0 10px var(--secondary), 0 0 20px var(--secondary); position: relative; } .logo::after { content: ""; position: absolute; bottom: -5px; left: 0; width: 100%; height: 2px; background: var(--accent); box-shadow: 0 0 10px var(--accent); } .menu-container { position: relative; z-index: 10; } .hamburger-menu { width: 50px; height: 50px; background: var(--dark); border-radius: 8px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px; cursor: pointer; position: relative; box-shadow: 0 0 15px rgba(64, 224, 208, 0.3); transition: all 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55); /* Pixelated border effect */ border: 2px solid transparent; background-clip: padding-box; position: relative; overflow: hidden; } .hamburger-menu::before { content: ""; position: absolute; inset: -2px; background: linear-gradient( 45deg, var(--primary), var(--secondary), var(--accent), var(--primary) ); background-size: 400%; z-index: -1; animation: pixelShine 4s linear infinite; opacity: 0.8; } @keyframes pixelShine { 0% { background-position: 0% 0%; } 100% { background-position: 400% 0%; } } .hamburger-menu.active { transform: rotate(90deg); background: var(--primary); box-shadow: 0 0 20px rgba(255, 62, 127, 0.5); } .hamburger-line { width: 30px; height: 4px; background-color: var(--light); border-radius: 2px; transition: all 0.3s ease; position: relative; /* Pixelated edges */ clip-path: polygon( 0% 25%, 3% 0%, 97% 0%, 100% 25%, 100% 75%, 97% 100%, 3% 100%, 0% 75% ); } /* Pixelated corners for menu lines */ .hamburger-line::before, .hamburger-line::after { content: ""; position: absolute; width: 2px; height: 2px; background: var(--dark); opacity: 0.8; } .hamburger-line::before { top: 0; left: 0; } .hamburger-line::after { bottom: 0; right: 0; } .hamburger-menu.active .hamburger-line:nth-child(1) { transform: translateY(10px) rotate(45deg); background-color: var(--light); } .hamburger-menu.active .hamburger-line:nth-child(2) { opacity: 0; } .hamburger-menu.active .hamburger-line:nth-child(3) { transform: translateY(-10px) rotate(-45deg); background-color: var(--light); } .menu-items { position: absolute; top: 70px; right: 0; width: 250px; background: rgba(42, 42, 74, 0.95); border: 2px solid var(--secondary); border-radius: 8px; padding: 20px; display: flex; flex-direction: column; gap: 15px; transform: translateX(300px); opacity: 0; transition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55); box-shadow: 0 0 20px rgba(64, 224, 208, 0.2); clip-path: polygon( 0% 5%, 5% 0%, 95% 0%, 100% 5%, 100% 95%, 95% 100%, 5% 100%, 0% 95% ); z-index: 15; } .menu-items.active { transform: translateX(0); opacity: 1; } .menu-item { color: var(--light); text-decoration: none; display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 6px; transition: all 0.3s ease; font-size: 12px; text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.5); position: relative; overflow: hidden; } .menu-item:hover { background: rgba(255, 255, 255, 0.1); color: var(--accent); transform: translateX(5px); box-shadow: -5px 0 0 var(--accent); } .menu-item::before { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.2), transparent ); transition: 0.5s; } .menu-item:hover::before { left: 100%; } .menu-item i { font-size: 16px; color: var(--secondary); } .content { z-index: 2; width: 100%; text-align: center; color: var(--light); } .content h1 { font-size: 30px; margin-bottom: 20px; color: var(--light); text-shadow: 0 0 10px var(--secondary), 0 0 20px var(--secondary); animation: textGlow 2s infinite alternate; } @keyframes textGlow { 0% { text-shadow: 0 0 10px var(--secondary), 0 0 20px var(--secondary); } 100% { text-shadow: 0 0 15px var(--primary), 0 0 30px var(--primary); } } .game-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 20px; margin-top: 30px; max-width: 600px; margin: 0 auto; } .game-card { background: rgba(42, 42, 74, 0.7); border: 2px solid var(--dark); border-radius: 8px; overflow: hidden; transition: all 0.3s ease; position: relative; cursor: pointer; } .game-card:hover { transform: translateY(-10px); border-color: var(--primary); box-shadow: 0 10px 20px rgba(255, 62, 127, 0.3); } .game-image { width: 100%; height: 100px; object-fit: cover; transition: all 0.3s ease; } .game-card:hover .game-image { filter: brightness(1.2); } .game-title { padding: 10px; font-size: 12px; color: var(--light); text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.5); } .particles { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; } .particle { position: absolute; width: 5px; height: 5px; background: var(--secondary); border-radius: 50%; opacity: 0.5; animation: float 15s linear infinite; } @keyframes float { 0% { transform: translateY(0) rotate(0deg); opacity: 0.5; } 100% { transform: translateY(-100vh) rotate(360deg); opacity: 0; } } @keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } } </style> </head> <body> <div class="portal-container"> <div class="pixel-grid"></div> <div class="particles" id="particles"></div> <div class="header"> <div class="logo">PIXEL NEXUS</div> <div class="menu-container"> <div class="hamburger-menu" id="hamburger-menu"> <div class="hamburger-line"></div> <div class="hamburger-line"></div> <div class="hamburger-line"></div> </div> <div class="menu-items" id="menu-items"> <a href="#" class="menu-item"> <i>🎮</i> <span>ARCADE CLASSICS</span> </a> <a href="#" class="menu-item"> <i>🏆</i> <span>LEADERBOARDS</span> </a> <a href="#" class="menu-item"> <i>👥</i> <span>MULTIPLAYER HUB</span> </a> <a href="#" class="menu-item"> <i>🎲</i> <span>INDIE SHOWCASE</span> </a> <a href="#" class="menu-item"> <i>🌟</i> <span>DAILY CHALLENGES</span> </a> <a href="#" class="menu-item"> <i>⚙️</i> <span>SETTINGS</span> </a> </div> </div> </div> <div class="content"> <h1>TRENDING GAMES</h1> <div class="game-grid"> <div class="game-card"> <img src="https://images.unsplash.com/photo-1511512578047-dfb367046420?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3" alt="Cyber Quest" class="game-image"> <div class="game-title">CYBER QUEST 3K</div> </div> <div class="game-card"> <img src="https://images.unsplash.com/photo-1560419015-7c427e8ae5ba?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3" alt="Pixel Racer" class="game-image"> <div class="game-title">PIXEL RACER</div> </div> <div class="game-card"> <img src="https://images.unsplash.com/photo-1551431009-a802eeec77b1?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3" alt="Neon Defender" class="game-image"> <div class="game-title">NEON DEFENDER</div> </div> <div class="game-card"> <img src="https://images.unsplash.com/photo-1550745165-9bc0b252726f?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3" alt="Retro Blaster" class="game-image"> <div class="game-title">RETRO BLASTER</div> </div> <div class="game-card"> <img src="https://images.unsplash.com/photo-1591370874773-6702e8f12fd8?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3" alt="Glitch Runner" class="game-image"> <div class="game-title">GLITCH RUNNER</div> </div> <div class="game-card"> <img src="https://images.unsplash.com/photo-1607853202273-797f1c22a38e?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3" alt="Bit Brawlers" class="game-image"> <div class="game-title">BIT BRAWLERS</div> </div> </div> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { // Hamburger menu functionality const hamburger = document.getElementById('hamburger-menu'); const menuItems = document.getElementById('menu-items'); hamburger.addEventListener('click', function() { this.classList.toggle('active'); menuItems.classList.toggle('active'); // Play sound effect const soundEffect = new Audio('data:audio/wav;base64,UklGRiQDAABXQVZFZm10IBAAAAABAAEAESsAABErAAABAAgAZGF0YQADAABt/237bvtt+236b/pt+W76bvlu+W76bfpt+m35b/n6/cv8zfzL/Mz8zPzL/Mz8zPzM/Mz8y/zN/Ef8+Pz6/Pj8+vz4/Pr8+Pz6/Pj8+vz4/Pr8+PxU/TP9M/0z/TP9M/0z/TP9M/0z/TP9M/0z/VP9BP79/fv9/f37/f39+/39/fv9/f37/f39+/1H/c/8z/zP/M/8z/zP/M/8z/zP/M/8z/zP/M/8T/yc/Zv9nP2b/Zz9m/2c/Zv9nP2b/Zz9m/2c/Zv9M/05/Tf9Of03/Tn9N/05/Tf9Of03/Tn9N/05/Tf9x/zJ/Mf8yfzH/Mn8x/zJ/Mf8yfzH/Mn8x/xJ/En9R/1J/Uf9Sf1H/Un9R/1J/Uf9Sf1H/Un9R/3J/Ef8yfxH/Mn8R/zJ/Ef8yfxH/Mn8R/zJ/Ef8Sfw0/1n/Nf9Z/zX/Wf81/1n/Nf9Z/zX/Wf81/zT/Vf81/8z+zv7M/s7+zP7O/sz+zv7M/s7+zP7O/sz+x/5H/sf+R/7H/kf+x/5H/sf+R/7H/kf+x/5H/kf+R/5X/pn+V/6Z/lf+mf5X/pn+V/6Z/lf+mf5X/ln+V/6Z/hT9Fv0U/Rb9FP0W/RT9Fv0U/Rb9FP0W/RT9Fv0U/cz8yvzM/Mr8zPzK/Mz8yvzM/Mr8zPzK/Mz8yvxM/PLC9cP0w/XD9MP1w/TD9cP0w/XD9MP1w/TD9cP0Z/Q4/zX/OP81/zj/Nf84/zX/OP81/zj/Nf84/zX/OP/N/8//zf/P/83/z//N/8//zf/P/83/z//N/8//jf+h/43/of+N/6H/jf+h/43/of+N/6H/jf+h/43/p/8='); soundEffect.volume = 0.2; // Lower volume soundEffect.play().catch(e => console.log("Audio play prevented:", e)); // Add bounce animation this.style.animation = 'bounce 0.5s ease'; setTimeout(() => { this.style.animation = ''; }, 500); }); // Create floating particles const particlesContainer = document.getElementById('particles'); const colors = ['#ff3e7f', '#40e0d0', '#ffcc00', '#f8f8ff']; for (let i = 0; i < 20; i++) { const particle = document.createElement('div'); particle.classList.add('particle'); particle.style.left = `${Math.random() * 100}%`; particle.style.top = `${Math.random() * 100}%`; particle.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)]; particle.style.width = `${Math.random() * 5 + 2}px`; particle.style.height = particle.style.width; particle.style.animationDuration = `${Math.random() * 20 + 10}s`; particle.style.animationDelay = `${Math.random() * 5}s`; particlesContainer.appendChild(particle); } // Menu item hover effect with sound const menuItemElements = document.querySelectorAll('.menu-item'); menuItemElements.forEach(item => { item.addEventListener('mouseenter', function() { const hoverSound = new Audio('data:audio/wav;base64,UklGRiQCAABXQVZFZm10IBAAAAABAAEAESsAABErAAABAAgAZGF0YQACAACBgIF/gn6Df4J+g3+CfoN/gn6Df4J+g3+CfoN/gn6Df4J+g3+CfoN/gn6Df4J+g3+CfoN/gn7F/8T+xf/E/sX/xP7F/8T+xf/E/sX/xP7F/8T+xf/E/sX/xP7F/8T+xf/E/sX/xP7F/8T+xf+EfoN/gn6Df4J+g3+CfoN/gn6Df4J+g3+CfoN/gn6Df4J+g3+CfoN/gn6Df4J+g3+CfoN/gn6Df8X+xf/E/sX/xP7F/8T+xf/E/sX/xP7F/8T+xf/E/sX/xP7F/8T+xf/E/sX/xP7F/8T+xf/E/sX/xP6CfoN/gn6Df4J+g3+CfoN/gn6Df4J+g3+CfoN/gn6Df4J+g3+CfoN/gn6Df4J+g3+CfoN/gn6Df4J+xf/E/sX/xP7F/8T+xf/E/sX/xP7F/8T+xf/E/sX/xP7F/8T+xf/E/sX/xP7F/8T+xf/E/sX/xP7F/4N/gn6Df4J+g3+CfoN/gn6Df4J+g3+CfoN/gn6Df4J+g3+CfoN/gn6Df4J+g3+CfoN/gn6Df4J+g3/E/sX/xP7F/8T+xf/E/sX/xP7F/8T+xf/E/sX/xP7F/8T+xf/E/sX/xP7F/8T+xf/E/sX/xP7F/8T+xf+hog=='); hoverSound.volume = 0.1; hoverSound.play().catch(e => console.log("Audio play prevented:", e)); }); }); // Game card hover effect const gameCards = document.querySelectorAll('.game-card'); gameCards.forEach(card => { card.addEventListener('mouseenter', function() { const hoverSound = new Audio('data:audio/wav;base64,UklGRiQCAABXQVZFZm10IBAAAAABAAEARKwAAESsAAABAAgAZGF0YQACAABqa2lqa2lqa2lqa2lqa2lqa2lqa2lqa2lqa2lqa2lqa2lqa2lqa2lqa2lqa2lqa2lqa2lqa2lqa2lqa2lqaw=='); hoverSound.volume = 0.1; hoverSound.play().catch(e => console.log("Audio play prevented:", e)); }); }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Burger Menu Animation</title> <style> :root { --primary: #FF6B35; /* Orange for hamburger patty */ --secondary: #7DCE82; /* Fresh lettuce green */ --accent: #FFD23F; /* Cheese yellow */ --bun: #F9C49A; /* Bun color */ --background: #FAFAFA; --text: #333333; --shadow: rgba(0, 0, 0, 0.1); } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif; } body { background-color: var(--background); display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 700px; width: 100%; max-width: 700px; margin: 0 auto; overflow-x: hidden; color: var(--text); } .app-container { width: 100%; max-width: 700px; height: 100%; display: flex; flex-direction: column; position: relative; box-shadow: 0 10px 30px var(--shadow); border-radius: 24px; overflow: hidden; } header { display: flex; justify-content: space-between; align-items: center; padding: 20px; background: linear-gradient(135deg, var(--bun) 0%, var(--primary) 100%); color: white; position: relative; z-index: 10; } .logo { font-size: 1.5rem; font-weight: 700; display: flex; align-items: center; gap: 10px; } .logo-icon { width: 30px; height: 30px; background-color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .logo-icon svg { width: 20px; height: 20px; fill: var(--primary); } .menu-toggle { width: 50px; height: 50px; background-color: white; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; position: relative; box-shadow: 0 4px 8px var(--shadow); transition: transform 0.3s cubic-bezier(0.68, -0.6, 0.32, 1.6); } .menu-toggle:hover { transform: scale(1.1); } .burger-line { width: 25px; height: 3px; background-color: var(--primary); margin: 2px 0; border-radius: 8px; transition: all 0.3s cubic-bezier(0.68, -0.6, 0.32, 1.6); position: relative; } /* Stylized burger elements */ .burger-line:nth-child(1)::before { content: ''; position: absolute; width: 25px; height: 3px; background-color: var(--accent); top: -1px; border-radius: 8px; opacity: 0.5; transition: all 0.3s ease; } .burger-line:nth-child(3)::after { content: ''; position: absolute; width: 25px; height: 3px; background-color: var(--secondary); bottom: -1px; border-radius: 8px; opacity: 0.5; transition: all 0.3s ease; } .menu-toggle.active .burger-line:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); background-color: var(--primary); } .menu-toggle.active .burger-line:nth-child(2) { opacity: 0; transform: translateX(-20px); } .menu-toggle.active .burger-line:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); background-color: var(--primary); } .menu-toggle.active .burger-line:nth-child(1)::before, .menu-toggle.active .burger-line:nth-child(3)::after { opacity: 0; } .menu { position: absolute; top: 90px; left: 0; width: 100%; background-color: white; border-radius: 0 0 24px 24px; padding: 20px; transform: translateY(-100%); opacity: 0; transition: all 0.4s cubic-bezier(0.68, -0.6, 0.32, 1.6); z-index: 5; box-shadow: 0 10px 30px var(--shadow); } .menu.active { transform: translateY(0); opacity: 1; } .menu-item { padding: 15px; margin: 8px 0; border-radius: 12px; display: flex; align-items: center; gap: 15px; cursor: pointer; transition: all 0.3s ease; background-color: rgba(249, 196, 154, 0.1); } .menu-item:hover { background-color: rgba(249, 196, 154, 0.2); transform: translateX(5px); } .menu-item-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background-color: var(--accent); color: white; } .menu-item:nth-child(2) .menu-item-icon { background-color: var(--primary); } .menu-item:nth-child(3) .menu-item-icon { background-color: var(--secondary); } .menu-item-text { flex: 1; } .menu-item-title { font-weight: 600; margin-bottom: 5px; } .menu-item-desc { font-size: 0.8rem; color: #777; } .content { padding: 20px; flex: 1; display: flex; flex-direction: column; position: relative; overflow-y: auto; background-color: #fff; transition: opacity 0.3s ease; } .content.dim { opacity: 0.7; } .featured-section { margin-bottom: 25px; } .section-title { font-size: 1.2rem; margin-bottom: 15px; position: relative; display: inline-block; } .section-title::after { content: ''; position: absolute; bottom: -5px; left: 0; width: 100%; height: 3px; background: linear-gradient(90deg, var(--primary), var(--accent)); border-radius: 2px; } .featured-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; } .food-card { background-color: white; border-radius: 16px; overflow: hidden; box-shadow: 0 5px 15px var(--shadow); transition: all 0.3s ease; cursor: pointer; position: relative; } .food-card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px var(--shadow); } .food-img { height: 120px; width: 100%; object-fit: cover; } .food-info { padding: 15px; } .food-title { font-weight: 600; margin-bottom: 5px; font-size: 0.9rem; } .food-desc { font-size: 0.8rem; color: #777; margin-bottom: 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .food-meta { display: flex; justify-content: space-between; align-items: center; margin-top: 5px; } .food-price { font-weight: 700; color: var(--primary); } .food-rating { display: flex; align-items: center; gap: 5px; font-size: 0.8rem; color: var(--accent); } .food-rating svg { width: 15px; height: 15px; fill: var(--accent); } .tag { position: absolute; top: 10px; right: 10px; background-color: var(--accent); color: white; padding: 5px 10px; border-radius: 20px; font-size: 0.7rem; font-weight: 600; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); } .categories { display: flex; gap: 10px; overflow-x: auto; padding: 5px 0 15px; margin-bottom: 20px; scrollbar-width: none; } .categories::-webkit-scrollbar { display: none; } .category { min-width: 80px; padding: 10px 15px; background-color: white; border-radius: 20px; display: flex; flex-direction: column; align-items: center; gap: 5px; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 3px 8px var(--shadow); } .category.active { background-color: var(--primary); color: white; } .category-icon { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; } .category-name { font-size: 0.8rem; font-weight: 500; } /* Dark mode support - adapting for low light conditions */ @media (prefers-color-scheme: dark) { :root { --background: #1E1E1E; --text: #FAFAFA; --shadow: rgba(0, 0, 0, 0.3); } body { background-color: var(--background); } .content { background-color: #2A2A2A; } .menu, .food-card, .category { background-color: #2A2A2A; } .menu-item-desc, .food-desc { color: #AAAAAA; } .menu-toggle { background-color: rgba(255, 255, 255, 0.9); } } /* Animation for burger transform */ @keyframes burgerBounce { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } } /* Responsive adjustments */ @media (max-width: 500px) { .featured-grid { grid-template-columns: 1fr; } .menu-item { padding: 10px; } .content { padding: 15px; } } </style> </head> <body> <div class="app-container"> <header> <div class="logo"> <div class="logo-icon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path d="M21.47,4.35L20.13,3.79V12.82L22.56,6.96C22.97,5.94 22.5,4.77 21.47,4.35M1.97,8.05L6.93,20C7.24,20.77 7.97,21.24 8.74,21.26C9,21.26 9.27,21.21 9.53,21.1L16.9,18.05C17.65,17.74 18.11,17 18.13,16.26C18.14,16 18.09,15.71 18,15.45L13,3.5C12.71,2.73 11.97,2.26 11.19,2.25C10.93,2.25 10.67,2.31 10.42,2.4L3.06,5.45C2.04,5.87 1.55,7.04 1.97,8.05M18.12,4.25A2,2 0 0,0 16.12,2.25H14.67L18.12,10.59"/> </svg> </div> <span>FreshBite</span> </div> <div class="menu-toggle"> <div class="burger-line"></div> <div class="burger-line"></div> <div class="burger-line"></div> </div> </header> <div class="menu"> <div class="menu-item"> <div class="menu-item-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path> <polyline points="9 22 9 12 15 12 15 22"></polyline> </svg> </div> <div class="menu-item-text"> <div class="menu-item-title">Home</div> <div class="menu-item-desc">Featured dishes and special offers</div> </div> </div> <div class="menu-item"> <div class="menu-item-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"></path> <line x1="3" y1="6" x2="21" y2="6"></line> <path d="M16 10a4 4 0 0 1-8 0"></path> </svg> </div> <div class="menu-item-text"> <div class="menu-item-title">My Orders</div> <div class="menu-item-desc">Track current and past deliveries</div> </div> </div> <div class="menu-item"> <div class="menu-item-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path> <circle cx="12" cy="7" r="4"></circle> </svg> </div> <div class="menu-item-text"> <div class="menu-item-title">Profile</div> <div class="menu-item-desc">Preferences and payment methods</div> </div> </div> </div> <div class="content"> <div class="categories"> <div class="category active"> <div class="category-icon">🍔</div> <div class="category-name">Burgers</div> </div> <div class="category"> <div class="category-icon">🍕</div> <div class="category-name">Pizza</div> </div> <div class="category"> <div class="category-icon">🥗</div> <div class="category-name">Salads</div> </div> <div class="category"> <div class="category-icon">🍜</div> <div class="category-name">Noodles</div> </div> <div class="category"> <div class="category-icon">🍰</div> <div class="category-name">Desserts</div> </div> </div> <div class="featured-section"> <h2 class="section-title">Today's Specials</h2> <div class="featured-grid"> <div class="food-card"> <img src="https://images.unsplash.com/photo-1568901346375-23c9450c58cd?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="Craft Burger" class="food-img"> <div class="tag">20% OFF</div> <div class="food-info"> <h3 class="food-title">Craft Smash Burger</h3> <p class="food-desc">Double patty with artisanal cheese and house sauce</p> <div class="food-meta"> <div class="food-price">$12.99</div> <div class="food-rating"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path d="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z" /> </svg> 4.9 </div> </div> </div> </div> <div class="food-card"> <img src="https://images.unsplash.com/photo-1585325701956-60dd9c8553bc?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="Veggie Burger" class="food-img"> <div class="food-info"> <h3 class="food-title">Garden Delight Burger</h3> <p class="food-desc">Plant-based patty with avocado and mixed greens</p> <div class="food-meta"> <div class="food-price">$10.99</div> <div class="food-rating"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path d="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z" /> </svg> 4.7 </div> </div> </div> </div> <div class="food-card"> <img src="https://images.unsplash.com/photo-1565299507177-b0ac66763828?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="Loaded Fries" class="food-img"> <div class="food-info"> <h3 class="food-title">Truffle Parmesan Fries</h3> <p class="food-desc">Hand-cut fries with truffle oil and aged parmesan</p> <div class="food-meta"> <div class="food-price">$6.99</div> <div class="food-rating"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path d="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z" /> </svg> 4.8 </div> </div> </div> </div> <div class="food-card"> <img src="https://images.unsplash.com/photo-1594212699903-ec8a3eca50f5?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="Shake" class="food-img"> <div class="food-info"> <h3 class="food-title">Berry Bliss Shake</h3> <p class="food-desc">Mixed berries and vanilla ice cream shake</p> <div class="food-meta"> <div class="food-price">$5.99</div> <div class="food-rating"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path d="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z" /> </svg> 4.6 </div> </div> </div> </div> </div> </div> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { const menuToggle = document.querySelector('.menu-toggle'); const menu = document.querySelector('.menu'); const content = document.querySelector('.content'); const categories = document.querySelectorAll('.category'); const foodCards = document.querySelectorAll('.food-card'); // Menu toggle interaction menuToggle.addEventListener('click', function() { this.classList.toggle('active'); menu.classList.toggle('active'); content.classList.toggle('dim'); // Burger animation if (this.classList.contains('active')) { this.style.animation = 'burgerBounce 0.4s cubic-bezier(0.68, -0.6, 0.32, 1.6)'; } else { this.style.animation = 'burgerBounce 0.4s cubic-bezier(0.68, -0.6, 0.32, 1.6) reverse'; } }); // Add hover effect for burger lines menuToggle.addEventListener('mouseenter', function() { if (!this.classList.contains('active')) { document.querySelector('.burger-line:nth-child(1)').style.width = '20px'; document.querySelector('.burger-line:nth-child(3)').style.width = '15px'; } }); menuToggle.addEventListener('mouseleave', function() { document.querySelectorAll('.burger-line').forEach(line => { line.style.width = '25px'; }); }); // Category selection categories.forEach(category => { category.addEventListener('click', function() { categories.forEach(c => c.classList.remove('active')); this.classList.add('active'); // Add a subtle animation to food cards on category change foodCards.forEach((card, index) => { card.style.animation = `fadeIn 0.3s ease forwards ${index * 0.1}s`; card.style.opacity = '0'; setTimeout(() => { card.style.opacity = '1'; card.style.animation = ''; }, 300 + (index * 100)); }); }); }); // Add hover effect for menu items const menuItems = document.querySelectorAll('.menu-item'); menuItems.forEach(item => { item.addEventListener('mouseenter', function() { this.style.transform = 'translateX(5px)'; }); item.addEventListener('mouseleave', function() { this.style.transform = 'translateX(0)'; }); item.addEventListener('click', function() { menuToggle.click(); // Close menu when item is clicked }); }); // Add card hover effect foodCards.forEach(card => { card.addEventListener('mouseenter', function() { this.style.transform = 'translateY(-5px)'; this.style.boxShadow = '0 10px 20px rgba(0, 0, 0, 0.1)'; }); card.addEventListener('mouseleave', function() { this.style.transform = 'translateY(0)'; this.style.boxShadow = '0 5px 15px rgba(0, 0, 0, 0.1)'; }); }); // Close menu when clicking outside document.addEventListener('click', function(event) { if (!menu.contains(event.target) && !menuToggle.contains(event.target) && menu.classList.contains('active')) { menuToggle.click(); } }); // Prevent actual form submissions document.addEventListener('submit', function(event) { event.preventDefault(); return false; }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>MetricsAI - Analytics SaaS Platform</title> <style> :root { --primary: #4361ee; --secondary: #3a0ca3; --accent: #7209b7; --light: #f8f9fa; --dark: #212529; --success: #38b000; --text: #2b2d42; --background: #ffffff; --menu-timing: 0.5s; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; } body { background-color: var(--background); color: var(--text); overflow-x: hidden; max-width: 700px; margin: 0 auto; } header { position: relative; padding: 1.5rem; display: flex; justify-content: space-between; align-items: center; z-index: 100; } .logo { display: flex; align-items: center; font-weight: 700; font-size: 1.5rem; color: var(--primary); text-decoration: none; } .logo span { display: inline-flex; align-items: center; justify-content: center; margin-right: 0.5rem; width: 32px; height: 32px; border-radius: 8px; background: linear-gradient(135deg, var(--primary), var(--accent)); color: white; } .hamburger-menu { position: relative; width: 32px; height: 32px; border-radius: 8px; background-color: transparent; display: flex; justify-content: center; align-items: center; cursor: pointer; z-index: 200; transition: transform 0.3s ease; } .hamburger-menu:hover { transform: scale(1.05); } .hamburger-icon { position: relative; width: 24px; height: 20px; } .hamburger-icon span { position: absolute; width: 100%; height: 3px; background-color: var(--primary); border-radius: 4px; transition: all var(--menu-timing) cubic-bezier(0.68, -0.6, 0.32, 1.6); } .hamburger-icon span:nth-child(1) { top: 0; } .hamburger-icon span:nth-child(2) { top: 50%; transform: translateY(-50%); width: 80%; right: 0; } .hamburger-icon span:nth-child(3) { bottom: 0; } .hamburger-menu.active .hamburger-icon span:nth-child(1) { top: 50%; transform: translateY(-50%) rotate(45deg); } .hamburger-menu.active .hamburger-icon span:nth-child(2) { opacity: 0; width: 0; } .hamburger-menu.active .hamburger-icon span:nth-child(3) { bottom: 45%; transform: translateY(50%) rotate(-45deg); } nav { position: fixed; top: 0; right: 0; width: 300px; height: 100vh; background: white; box-shadow: -5px 0 30px rgba(0, 0, 0, 0.1); z-index: 100; transform: translateX(100%); transition: transform 0.5s cubic-bezier(0.77, 0, 0.175, 1); display: flex; flex-direction: column; padding: 6rem 2rem 2rem; } nav.active { transform: translateX(0); } .menu-backdrop { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 90; opacity: 0; visibility: hidden; transition: opacity 0.5s ease, visibility 0.5s ease; } .menu-backdrop.active { opacity: 1; visibility: visible; } .nav-links { list-style: none; margin-bottom: 2rem; } .nav-links li { margin-bottom: 1rem; opacity: 0; transform: translateX(20px); transition: opacity 0.3s ease, transform 0.3s ease; transition-delay: calc(var(--i) * 0.1s); } nav.active .nav-links li { opacity: 1; transform: translateX(0); } .nav-links a { text-decoration: none; color: var(--text); font-size: 1.1rem; display: block; padding: 0.7rem 0; position: relative; transition: color 0.3s; } .nav-links a::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background: linear-gradient(to right, var(--primary), var(--accent)); transition: width 0.3s; } .nav-links a:hover { color: var(--primary); } .nav-links a:hover::after { width: 100%; } .cta-button { display: inline-block; background: linear-gradient(135deg, var(--primary), var(--accent)); color: white; padding: 0.8rem 2rem; border-radius: 8px; text-decoration: none; font-weight: 600; transition: transform 0.3s, box-shadow 0.3s; border: none; cursor: pointer; margin-top: auto; text-align: center; box-shadow: 0 4px 12px rgba(67, 97, 238, 0.2); } .cta-button:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(67, 97, 238, 0.3); } .hero { padding: 1rem 1.5rem 2rem; position: relative; } .hero h1 { font-size: 2.8rem; line-height: 1.1; margin-bottom: 1.5rem; background: linear-gradient(to right, var(--primary), var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero p { font-size: 1.1rem; line-height: 1.6; color: #4f5e78; margin-bottom: 2rem; max-width: 500px; } .hero-features { display: flex; gap: 1rem; margin-top: 2rem; flex-wrap: wrap; } .feature-badge { background-color: rgba(67, 97, 238, 0.1); color: var(--primary); padding: 0.5rem 1rem; border-radius: 20px; font-size: 0.9rem; font-weight: 500; display: inline-flex; align-items: center; gap: 8px; } .feature-badge i { font-size: 1rem; } .dashboard-preview { margin-top: 2rem; position: relative; border-radius: 12px; overflow: hidden; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1); } .dashboard-preview img { width: 100%; display: block; transform: translateY(0); transition: transform 0.5s ease-out; } .dashboard-preview:hover img { transform: translateY(-3%); } .dashboard-preview::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(0deg, rgba(255, 255, 255, 0) 70%, rgba(67, 97, 238, 0.1) 100%); pointer-events: none; } .social-proof { display: flex; align-items: center; margin-top: 2rem; gap: 1rem; } .client-logos { display: flex; gap: 1rem; align-items: center; } .client-logos img { height: 24px; opacity: 0.7; transition: opacity 0.3s; } .client-logos img:hover { opacity: 1; } .star-rating { color: #ffc107; font-size: 0.9rem; letter-spacing: 2px; } @media (max-width: 600px) { .hero h1 { font-size: 2.2rem; } .hero p { font-size: 1rem; } nav { width: 85%; } .social-proof { flex-direction: column; align-items: flex-start; } } </style> </head> <body> <header> <a href="#" class="logo"> <span>M</span>MetricsAI </a> <div class="hamburger-menu"> <div class="hamburger-icon"> <span></span> <span></span> <span></span> </div> </div> </header> <nav> <ul class="nav-links"> <li style="--i: 1"><a href="#">Product</a></li> <li style="--i: 2"><a href="#">Solutions</a></li> <li style="--i: 3"><a href="#">Pricing</a></li> <li style="--i: 4"><a href="#">Resources</a></li> <li style="--i: 5"><a href="#">Documentation</a></li> </ul> <a href="#" class="cta-button">Start Free Trial</a> </nav> <div class="menu-backdrop"></div> <section class="hero"> <h1>Transform Data into Business Intelligence</h1> <p>MetricsAI helps teams monitor KPIs, visualize trends, and discover actionable insights without complex setup or data science expertise.</p> <a href="#" class="cta-button">Try MetricsAI Free for 14 Days</a> <div class="hero-features"> <div class="feature-badge"> <i>⚡</i> Real-time Analytics </div> <div class="feature-badge"> <i>🔒</i> Enterprise Security </div> <div class="feature-badge"> <i>🤖</i> AI-Powered Insights </div> </div> <div class="dashboard-preview"> <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="MetricsAI Dashboard Preview"> </div> <div class="social-proof"> <div class="star-rating">★★★★★ <span style="color:#4f5e78;font-size:0.8rem">(4.9/5 from 2,300+ reviews)</span></div> <div class="client-logos"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/08/Netflix_2015_logo.svg/1920px-Netflix_2015_logo.svg.png" alt="Netflix"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/1200px-Google_2015_logo.svg.png" alt="Google"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/96/Spotify_logo_without_text.svg/1024px-Spotify_logo_without_text.svg.png" alt="Spotify"> </div> </div> </section> <script> document.addEventListener('DOMContentLoaded', function() { const hamburgerMenu = document.querySelector('.hamburger-menu'); const nav = document.querySelector('nav'); const menuBackdrop = document.querySelector('.menu-backdrop'); function toggleMenu() { hamburgerMenu.classList.toggle('active'); nav.classList.toggle('active'); menuBackdrop.classList.toggle('active'); // Prevent scrolling when menu is open document.body.style.overflow = hamburgerMenu.classList.contains('active') ? 'hidden' : ''; } hamburgerMenu.addEventListener('click', toggleMenu); menuBackdrop.addEventListener('click', toggleMenu); // Add ripple effect to hamburger hamburgerMenu.addEventListener('mousedown', function(e) { const ripple = document.createElement('span'); ripple.classList.add('ripple'); this.appendChild(ripple); const rect = this.getBoundingClientRect(); const size = Math.max(rect.width, rect.height); ripple.style.width = ripple.style.height = `${size}px`; ripple.style.left = `${e.clientX - rect.left - size/2}px`; ripple.style.top = `${e.clientY - rect.top - size/2}px`; ripple.classList.add('active'); setTimeout(() => { ripple.remove(); }, 500); }); // Add hover effect to menu items const navLinks = document.querySelectorAll('.nav-links a'); navLinks.forEach(link => { link.addEventListener('mouseenter', function() { this.style.transform = 'translateX(5px)'; this.style.transition = 'transform 0.3s'; }); link.addEventListener('mouseleave', function() { this.style.transform = 'translateX(0)'; }); }); // Add subtle animation to dashboard preview on scroll window.addEventListener('scroll', function() { const dashboardImg = document.querySelector('.dashboard-preview img'); const scrollValue = window.scrollY; if (scrollValue > 50) { dashboardImg.style.transform = `translateY(-${Math.min(scrollValue/20, 5)}%)`; } else { dashboardImg.style.transform = 'translateY(0)'; } }); }); </script> </body> </html>
