In the realm of modern web design, the dotted menu icon has become a ubiquitous element, offering a sleek and intuitive way to navigate digital interfaces. These icons, often represented by three vertical or horizontal dots, are a staple in both mobile and desktop applications.
From minimalist designs to more elaborate styles, dotted menu icons serve as a versatile tool for enhancing user experience. Here, we explore ten exemplary dotted menu icons that showcase the range and creativity in their implementation.
CODE1
Here's the code:
CODETEXT1
CODE2
Here's the code:
CODETEXT2
CODE3
Here's the code:
CODETEXT3
CODE4
Here's the code:
CODETEXT4
CODE5
Here's the code:
CODETEXT5
Designers and developers, elevate your UI game with Subframe's drag-and-drop interface. Its intuitive, responsive canvas ensures pixel-perfect designs every time, making it a favorite among professionals.
Ready to create stunning dotted menu icons? Start for free today!
CODE6
Here's the code:
CODETEXT6
CODE7
Here's the code:
CODETEXT7
CODE8
Here's the code:
CODETEXT8
CODE9
Here's the code:
CODETEXT9
CODE10
Here's the code:
CODETEXT10
Unlock the power of Subframe and design pixel-perfect UIs with ease. Whether you're crafting a dotted menu icon or a complete interface, Subframe's drag-and-drop editor ensures efficiency and precision.
Ready to elevate your design game? Start for free and create stunning UIs immediately!
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } :root { --primary-color: #0de2ff; --secondary-color: #7b10ff; --dark-bg: #12151e; --medium-bg: #1a1f2e; --light-bg: #242a3d; --text-color: #f3f3f3; --muted-text: #8d97b5; } body { background-color: var(--dark-bg); color: var(--text-color); display: flex; justify-content: center; align-items: center; min-height: 700px; width: 100%; max-width: 700px; margin: 0 auto; overflow-x: hidden; } .container { width: 100%; height: 100%; padding: 20px; display: flex; flex-direction: column; } header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; } header h1 { font-size: 24px; font-weight: 500; background: linear-gradient(to right, var(--primary-color), var(--secondary-color)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; letter-spacing: 0.5px; } .profile { width: 40px; height: 40px; background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); border-radius: 50%; display: flex; justify-content: center; align-items: center; cursor: pointer; position: relative; overflow: hidden; } .profile::before { content: ""; position: absolute; width: 30px; height: 30px; background-color: var(--dark-bg); border-radius: 50%; } .profile::after { content: "CB"; position: relative; color: var(--text-color); font-size: 14px; font-weight: 600; z-index: 2; } .status-bar { background-color: var(--light-bg); border-radius: 10px; margin-bottom: 30px; padding: 15px; display: flex; justify-content: space-between; align-items: center; position: relative; overflow: hidden; } .status-bar::after { content: ""; position: absolute; width: 120px; height: 120px; background: radial-gradient(circle, var(--primary-color, #0de2ff) 0%, rgba(13, 226, 255, 0) 70%); opacity: 0.1; top: -50px; right: -50px; border-radius: 50%; z-index: 0; } .status-info h2 { font-size: 14px; margin-bottom: 5px; font-weight: 500; } .status-info p { font-size: 22px; font-weight: 600; } .status-value { background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .grid-menu { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-bottom: 30px; } .menu-item { background-color: var(--medium-bg); border-radius: 15px; aspect-ratio: 1/1; display: flex; flex-direction: column; justify-content: center; align-items: center; cursor: pointer; position: relative; overflow: hidden; transition: all 0.3s ease; } .menu-item:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3); } .menu-icon { width: 40px; height: 40px; position: relative; margin-bottom: 10px; } .menu-title { font-size: 12px; font-weight: 500; color: var(--muted-text); transition: color 0.3s ease; } .menu-item:hover .menu-title { color: var(--text-color); } .dotted-circle { position: absolute; top: 0; left: 0; width: 100%; height: 100%; stroke-dasharray: 3, 3; stroke-width: 1.5; fill: none; stroke: var(--primary-color); opacity: 0.7; transform-origin: center; } .inner-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 20px; height: 20px; fill: var(--text-color); z-index: 2; } .glow { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; filter: blur(5px); background: radial-gradient(circle, var(--primary-color) 0%, rgba(13, 226, 255, 0) 70%); opacity: 0; z-index: 1; transition: opacity 0.3s ease; } .active .glow { opacity: 0.3; } .glowing-dot { position: absolute; width: 4px; height: 4px; border-radius: 50%; background-color: var(--primary-color); box-shadow: 0 0 5px var(--primary-color); transform-origin: center; opacity: 0; } .section-title { font-size: 16px; font-weight: 500; margin-bottom: 15px; display: flex; justify-content: space-between; align-items: center; } .view-all { font-size: 12px; color: var(--primary-color); cursor: pointer; } .rooms-slider { display: flex; overflow-x: auto; gap: 15px; padding-bottom: 15px; scrollbar-width: none; -ms-overflow-style: none; } .rooms-slider::-webkit-scrollbar { display: none; } .room-card { flex: 0 0 auto; width: 170px; background-color: var(--medium-bg); border-radius: 15px; padding: 15px; cursor: pointer; transition: all 0.3s ease; position: relative; overflow: hidden; } .room-card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); } .room-name { font-size: 14px; font-weight: 500; margin-bottom: 5px; } .devices-count { font-size: 12px; color: var(--muted-text); margin-bottom: 15px; } .device-status { display: flex; gap: 10px; } .status-dot { width: 8px; height: 8px; border-radius: 50%; background-color: var(--muted-text); margin-right: 5px; display: inline-block; } .active-dot { background-color: var(--primary-color); box-shadow: 0 0 5px var(--primary-color); } .status-text { font-size: 11px; display: flex; align-items: center; } .room-decoration { position: absolute; top: -10px; right: -10px; width: 60px; height: 60px; opacity: 0.1; z-index: 0; } .bottom-nav { margin-top: auto; background-color: var(--medium-bg); border-radius: 15px; display: flex; justify-content: space-around; padding: 15px 0; position: relative; } .nav-item { display: flex; flex-direction: column; align-items: center; cursor: pointer; position: relative; z-index: 2; } .nav-icon { width: 24px; height: 24px; margin-bottom: 5px; position: relative; } .nav-text { font-size: 10px; color: var(--muted-text); transition: color 0.3s ease; } .nav-item.active .nav-text { color: var(--primary-color); } .nav-highlight { position: absolute; width: 60px; height: 60px; border-radius: 50%; background: radial-gradient(circle, rgba(13, 226, 255, 0.15) 0%, rgba(13, 226, 255, 0) 70%); top: 5px; left: 50%; transform: translateX(-50%); transition: left 0.3s ease; z-index: 1; } @media (max-width: 480px) { .grid-menu { grid-template-columns: repeat(2, 1fr); } .room-card { width: 150px; } } </style> </head> <body> <div class="container"> <header> <h1>NexusHome</h1> <div class="profile"></div> </header> <div class="status-bar"> <div class="status-info"> <h2>Current Energy Use</h2> <p><span class="status-value">1.8 kWh</span> | 24% less than avg</p> </div> <div class="status-info"> <h2>Temperature</h2> <p><span class="status-value">22°C</span></p> </div> </div> <div class="grid-menu"> <div class="menu-item" data-id="lighting"> <div class="menu-icon"> <svg class="dotted-circle" viewBox="0 0 40 40"> <circle cx="20" cy="20" r="18"></circle> </svg> <div class="glow"></div> <svg class="inner-icon" viewBox="0 0 24 24"> <path d="M12,3c-0.46,0-0.93,0.04-1.4,0.14C7.84,3.67,5.64,5.9,5.12,8.66c-0.48,2.61,0.48,5.01,2.22,6.56C7.77,15.6,8,16.13,8,16.69 V19c0,1.1,0.9,2,2,2h0.28c0.35,0.6,0.98,1,1.72,1s1.38-0.4,1.72-1H14c1.1,0,2-0.9,2-2v-2.31c0-0.55,0.22-1.09,0.64-1.46 C18.09,13.95,19,12.08,19,10C19,6.13,15.87,3,12,3z M14,19h-4v-1h4V19z M14,17h-4v-1h4V17z M12.5,11.41V14h-1v-2.59L9.67,9.59 l0.71-0.71L12,10.5l1.62-1.62l0.71,0.71L12.5,11.41z"/> </svg> </div> <div class="menu-title">Lighting</div> </div> <div class="menu-item" data-id="climate"> <div class="menu-icon"> <svg class="dotted-circle" viewBox="0 0 40 40"> <circle cx="20" cy="20" r="18"></circle> </svg> <div class="glow"></div> <svg class="inner-icon" viewBox="0 0 24 24"> <path d="M12,11c-1.1,0-2,0.9-2,2s0.9,2,2,2s2-0.9,2-2S13.1,11,12,11z M12,2C6.5,2,2,6.5,2,12s4.5,10,10,10s10-4.5,10-10S17.5,2,12,2z M12,20c-4.4,0-8-3.6-8-8s3.6-8,8-8s8,3.6,8,8S16.4,20,12,20z"/> </svg> </div> <div class="menu-title">Climate</div> </div> <div class="menu-item" data-id="security"> <div class="menu-icon"> <svg class="dotted-circle" viewBox="0 0 40 40"> <circle cx="20" cy="20" r="18"></circle> </svg> <div class="glow"></div> <svg class="inner-icon" viewBox="0 0 24 24"> <path d="M12,1L3,5v6c0,5.55,3.84,10.74,9,12c5.16-1.26,9-6.45,9-12V5L12,1z M12,11.99h7c-0.53,4.12-3.28,7.79-7,8.94V12H5V6.3l7-3.11V11.99z"/> </svg> </div> <div class="menu-title">Security</div> </div> <div class="menu-item" data-id="entertainment"> <div class="menu-icon"> <svg class="dotted-circle" viewBox="0 0 40 40"> <circle cx="20" cy="20" r="18"></circle> </svg> <div class="glow"></div> <svg class="inner-icon" viewBox="0 0 24 24"> <path d="M9,10v8l7-4L9,10z M21,6H3C1.9,6,1,6.9,1,8v8c0,1.1,0.9,2,2,2h18c1.1,0,2-0.9,2-2V8C23,6.9,22.1,6,21,6z M21,16H3V8h18V16z"/> </svg> </div> <div class="menu-title">Media</div> </div> <div class="menu-item" data-id="energy"> <div class="menu-icon"> <svg class="dotted-circle" viewBox="0 0 40 40"> <circle cx="20" cy="20" r="18"></circle> </svg> <div class="glow"></div> <svg class="inner-icon" viewBox="0 0 24 24"> <path d="M12,2C6.47,2,2,6.47,2,12s4.47,10,10,10s10-4.47,10-10S17.53,2,12,2z M17,18h-2v-2h-2v-2h-2V9H9V7h8V18z"/> </svg> </div> <div class="menu-title">Energy</div> </div> <div class="menu-item" data-id="scenes"> <div class="menu-icon"> <svg class="dotted-circle" viewBox="0 0 40 40"> <circle cx="20" cy="20" r="18"></circle> </svg> <div class="glow"></div> <svg class="inner-icon" viewBox="0 0 24 24"> <path d="M14.43,10l-2.43-8l-2.43,8l-7.57,0l6.18,4.41l-2.35,7.59l6.17-4.69l6.18,4.69l-2.35-7.59l6.17-4.41z"/> </svg> </div> <div class="menu-title">Scenes</div> </div> </div> <div class="section-title"> <span>Active Rooms</span> <span class="view-all">View All</span> </div> <div class="rooms-slider"> <div class="room-card"> <svg class="room-decoration" viewBox="0 0 24 24"> <path fill="currentColor" d="M21,9V7c0-1.65-1.35-3-3-3H6C4.35,4,3,5.35,3,7v2c-1.65,0-3,1.35-3,3v5c0,1.65,1.35,3,3,3h18c1.65,0,3-1.35,3-3v-5 C24,10.35,22.65,9,21,9z M5,7c0-0.55,0.45-1,1-1h12c0.55,0,1,0.45,1,1v2.78c-0.61,0.55-1,1.34-1,2.22v2H6v-2c0-0.88-0.39-1.67-1-2.22 V7z M22,17c0,0.55-0.45,1-1,1H3c-0.55,0-1-0.45-1-1v-5c0-0.55,0.45-1,1-1s1,0.45,1,1v4h16v-4c0-0.55,0.45-1,1-1s1,0.45,1,1V17z"/> </svg> <div class="room-name">Living Room</div> <div class="devices-count">6 devices</div> <div class="device-status"> <div class="status-text"><span class="status-dot active-dot"></span>Lights On</div> <div class="status-text"><span class="status-dot active-dot"></span>TV On</div> </div> </div> <div class="room-card"> <svg class="room-decoration" viewBox="0 0 24 24"> <path fill="currentColor" d="M20,10V7c0-1.1-0.9-2-2-2H6C4.9,5,4,5.9,4,7v3c-1.1,0-2,0.9-2,2v5h1.33L4,19h1l0.67-2h12.67L19,19h1l0.67-2H22v-5 C22,10.9,21.1,10,20,10z M11,10H6V7h5V10z M18,10h-5V7h5V10z"/> </svg> <div class="room-name">Kitchen</div> <div class="devices-count">4 devices</div> <div class="device-status"> <div class="status-text"><span class="status-dot active-dot"></span>Lights On</div> <div class="status-text"><span class="status-dot"></span>Fridge</div> </div> </div> <div class="room-card"> <svg class="room-decoration" viewBox="0 0 24 24"> <path fill="currentColor" d="M7,11v2h10v-2c0-1.86,1.28-3.41,3-3.86V6c0-1.65-1.35-3-3-3H7C5.35,3,4,4.35,4,6v1.14C5.72,7.59,7,9.14,7,11z M21,9.31 c-0.93,0.62-1.5,1.67-1.5,2.81V14h-15v-1.88c0-1.14-0.57-2.19-1.5-2.81V19c0,1.1,0.9,2,2,2h14c1.1,0,2-0.9,2-2V9.31z M14,19h-4v-3 c0-0.55,0.45-1,1-1h2c0.55,0,1,0.45,1,1V19z"/> </svg> <div class="room-name">Bedroom</div> <div class="devices-count">3 devices</div> <div class="device-status"> <div class="status-text"><span class="status-dot"></span>All Off</div> </div> </div> <div class="room-card"> <svg class="room-decoration" viewBox="0 0 24 24"> <path fill="currentColor" d="M11,12c-1.1,0-2,0.9-2,2s0.9,2,2,2s2-0.9,2-2S12.1,12,11,12z M3,6c-0.55,0-1,0.45-1,1v13c0,1.1,0.9,2,2,2h13 c0.55,0,1-0.45,1-1s-0.45-1-1-1H5c-0.55,0-1-0.45-1-1V7C4,6.45,3.55,6,3,6z M20,2H8C6.9,2,6,2.9,6,4v12c0,1.1,0.9,2,2,2h12 c1.1,0,2-0.9,2-2V4C22,2.9,21.1,2,20,2z M18,11c0,0.55-0.45,1-1,1s-1-0.45-1-1s0.45-1,1-1S18,10.45,18,11z M14,7 c0,0.55-0.45,1-1,1s-1-0.45-1-1s0.45-1,1-1S14,6.45,14,7z"/> </svg> <div class="room-name">Office</div> <div class="devices-count">5 devices</div> <div class="device-status"> <div class="status-text"><span class="status-dot active-dot"></span>Lights On</div> <div class="status-text"><span class="status-dot active-dot"></span>PC On</div> </div> </div> </div> <div class="bottom-nav"> <div class="nav-item active"> <div class="nav-icon"> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="color: var(--primary-color);"> <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="nav-text">Home</div> </div> <div class="nav-item"> <div class="nav-icon"> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"></path> </svg> </div> <div class="nav-text">Routines</div> </div> <div class="nav-item"> <div class="nav-icon"> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <circle cx="12" cy="12" r="10"></circle> <polyline points="12 6 12 12 16 14"></polyline> </svg> </div> <div class="nav-text">History</div> </div> <div class="nav-item"> <div class="nav-icon"> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <line x1="4" y1="21" x2="4" y2="14"></line> <line x1="4" y1="10" x2="4" y2="3"></line> <line x1="12" y1="21" x2="12" y2="12"></line> <line x1="12" y1="8" x2="12" y2="3"></line> <line x1="20" y1="21" x2="20" y2="16"></line> <line x1="20" y1="12" x2="20" y2="3"></line> <line x1="1" y1="14" x2="7" y2="14"></line> <line x1="9" y1="8" x2="15" y2="8"></line> <line x1="17" y1="16" x2="23" y2="16"></line> </svg> </div> <div class="nav-text">Settings</div> </div> <div class="nav-highlight"></div> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { // Create dotted menu icons animations const menuItems = document.querySelectorAll('.menu-item'); menuItems.forEach(item => { const icon = item.querySelector('.menu-icon'); const circle = item.querySelector('.dotted-circle'); const glow = item.querySelector('.glow'); // Create animation for dotted circle const circumference = 2 * Math.PI * 18; circle.style.strokeDasharray = `${circumference}`; // Random rotation for variety const initialRotation = Math.random() * 360; circle.style.transform = `rotate(${initialRotation}deg)`; // Add glowing dots animation for (let i = 0; i < 12; i++) { const dot = document.createElement('div'); dot.classList.add('glowing-dot'); // Position dots in a circle const angle = (i * 30) * Math.PI / 180; const x = 20 + 18 * Math.cos(angle); const y = 20 + 18 * Math.sin(angle); dot.style.left = `${x}px`; dot.style.top = `${y}px`; // Random delay for animation dot.style.animationDelay = `${i * 0.1}s`; icon.appendChild(dot); } // Add tap/click event item.addEventListener('click', function() { menuItems.forEach(mi => mi.classList.remove('active')); item.classList.add('active'); // Animate glowing dots const dots = item.querySelectorAll('.glowing-dot'); dots.forEach((dot, index) => { dot.style.animation = 'none'; dot.offsetHeight; // Trigger reflow dot.style.animation = `pulse 1.5s ease-in-out infinite ${index * 0.1}s`; }); // Rotate circle circle.style.transition = 'transform 5s ease-in-out'; circle.style.transform = `rotate(${initialRotation + 360}deg)`; }); }); // Bottom navigation animation const navItems = document.querySelectorAll('.nav-item'); const navHighlight = document.querySelector('.nav-highlight'); navItems.forEach((item, index) => { item.addEventListener('click', function() { navItems.forEach(ni => ni.classList.remove('active')); item.classList.add('active'); // Move highlight const itemWidth = item.offsetWidth; const centerPosition = item.offsetLeft + (itemWidth / 2); navHighlight.style.left = `${centerPosition}px`; }); }); // Initialize animations function initAnimations() { // Animate dotted circles document.querySelectorAll('.dotted-circle').forEach(circle => { circle.style.animation = `rotate 20s linear infinite`; }); // Simulate lighting room interaction setTimeout(() => { document.querySelector('[data-id="lighting"]').click(); }, 1000); } initAnimations(); // Room cards hover effect const roomCards = document.querySelectorAll('.room-card'); roomCards.forEach(card => { card.addEventListener('mouseenter', function() { const decoration = card.querySelector('.room-decoration'); decoration.style.transform = 'rotate(10deg) scale(1.2)'; decoration.style.opacity = '0.2'; decoration.style.transition = 'all 0.3s ease'; }); card.addEventListener('mouseleave', function() { const decoration = card.querySelector('.room-decoration'); decoration.style.transform = 'rotate(0) scale(1)'; decoration.style.opacity = '0.1'; }); }); }); // Pulse animation for the dots document.head.insertAdjacentHTML('beforeend', ` <style> @keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes pulse { 0% { transform: scale(0.5); opacity: 0.7; } 50% { transform: scale(1.5); opacity: 1; } 100% { transform: scale(0.5); opacity: 0.7; } } </style> `); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>E-Commerce Dashboard Menu</title> <style> :root { --primary: #5E6AD2; --primary-light: #7B85E6; --primary-dark: #424AAA; --success: #30D158; --warning: #FFB340; --danger: #FF453A; --gray-100: #f8f9fa; --gray-200: #e9ecef; --gray-300: #dee2e6; --gray-400: #ced4da; --gray-500: #adb5bd; --gray-600: #6c757d; --gray-700: #495057; --gray-800: #343a40; --gray-900: #212529; } * { 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: #f5f7fa; display: flex; justify-content: center; align-items: center; min-height: 100vh; overflow-x: hidden; } .container { max-width: 680px; width: 100%; height: 680px; background-color: white; border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); display: grid; grid-template-rows: auto 1fr; overflow: hidden; } .header { padding: 20px 30px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--gray-200); } .logo { display: flex; align-items: center; gap: 10px; } .logo-icon { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; background: var(--primary); position: relative; overflow: hidden; } .logo-dots { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 4px; transform: rotate(45deg); } .logo-dot { width: 6px; height: 6px; background: white; border-radius: 50%; opacity: 0.7; transform-origin: center; transition: all 0.3s ease; } .logo-dot:nth-child(5) { opacity: 1; transform: scale(1.2); } .logo-icon:hover .logo-dot { animation: pulse 1.5s infinite; } .logo-text { font-weight: 600; font-size: 18px; color: var(--gray-800); } .user-menu { display: flex; align-items: center; gap: 15px; } .notification-btn, .settings-btn { background: none; border: none; width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--gray-700); cursor: pointer; transition: all 0.2s ease; } .notification-btn:hover, .settings-btn:hover { background-color: var(--gray-100); color: var(--primary); } .avatar { width: 36px; height: 36px; border-radius: 8px; background-color: var(--primary-light); color: white; display: flex; align-items: center; justify-content: center; font-weight: 600; cursor: pointer; transition: all 0.2s ease; } .avatar:hover { background-color: var(--primary); } .content { display: grid; grid-template-columns: 220px 1fr; height: 100%; } .sidebar { border-right: 1px solid var(--gray-200); padding: 25px 15px; display: flex; flex-direction: column; gap: 10px; background-color: var(--gray-50); } .menu-category { margin-bottom: 15px; } .category-title { font-size: 12px; font-weight: 600; color: var(--gray-600); text-transform: uppercase; letter-spacing: 0.5px; padding: 0 10px; margin-bottom: 10px; } .menu-item { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 8px; color: var(--gray-700); font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.2s ease; position: relative; } .menu-item:hover { background-color: rgba(94, 106, 210, 0.08); color: var(--primary); } .menu-item.active { background-color: rgba(94, 106, 210, 0.12); color: var(--primary); } .menu-item.active .menu-icon { color: var(--primary); } .menu-icon { width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; position: relative; color: var(--gray-600); transition: all 0.2s ease; } .menu-item:hover .menu-icon { color: var(--primary); } .dot-menu { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); width: 18px; height: 18px; gap: 2px; } .dot { width: 4px; height: 4px; background-color: currentColor; border-radius: 50%; transition: transform 0.3s ease, opacity 0.3s ease; } .menu-item:hover .dot { transform: scale(1.2); } .menu-item.active .dot:nth-child(5) { transform: scale(1.5); } /* Special dot menus */ .dashboard-dots .dot:nth-child(5) { transform: scale(1.2); } .products-dots .dot:nth-child(1), .products-dots .dot:nth-child(5), .products-dots .dot:nth-child(9) { transform: scale(1.2); } .orders-dots .dot:nth-child(1), .orders-dots .dot:nth-child(2), .orders-dots .dot:nth-child(3) { transform: scale(1.2); } .customers-dots .dot:nth-child(1), .customers-dots .dot:nth-child(9) { transform: scale(1.2); } .analytics-dots .dot:nth-child(3), .analytics-dots .dot:nth-child(5), .analytics-dots .dot:nth-child(7) { transform: scale(1.2); } .marketing-dots .dot:nth-child(2), .marketing-dots .dot:nth-child(8) { transform: scale(1.2); } .discounts-dots .dot { transform: scale(0.8); } .discounts-dots .dot:nth-child(1), .discounts-dots .dot:nth-child(3), .discounts-dots .dot:nth-child(7), .discounts-dots .dot:nth-child(9) { transform: scale(1.2); } .apps-dots .dot:nth-child(1), .apps-dots .dot:nth-child(3), .apps-dots .dot:nth-child(5), .apps-dots .dot:nth-child(7), .apps-dots .dot:nth-child(9) { transform: scale(1.2); } .settings-dots .dot:nth-child(2), .settings-dots .dot:nth-child(4), .settings-dots .dot:nth-child(5), .settings-dots .dot:nth-child(6), .settings-dots .dot:nth-child(8) { transform: scale(1.2); } .dashboard-content { padding: 25px; overflow-y: auto; } .page-title { font-size: 24px; font-weight: 700; color: var(--gray-800); margin-bottom: 20px; } .stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-bottom: 25px; } .stat-card { background-color: white; border-radius: 10px; padding: 16px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); border: 1px solid var(--gray-200); transition: all 0.3s ease; } .stat-card:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08); } .stat-title { font-size: 13px; color: var(--gray-600); margin-bottom: 8px; } .stat-value { font-size: 24px; font-weight: 700; color: var(--gray-800); margin-bottom: 4px; } .stat-trend { display: flex; align-items: center; gap: 5px; font-size: 12px; } .trend-up { color: var(--success); } .trend-down { color: var(--danger); } .section-title { font-size: 16px; font-weight: 600; color: var(--gray-800); margin-bottom: 15px; display: flex; justify-content: space-between; align-items: center; } .view-all { font-size: 13px; color: var(--primary); text-decoration: none; font-weight: 500; } .recent-orders { background-color: white; border-radius: 10px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); border: 1px solid var(--gray-200); overflow: hidden; margin-bottom: 25px; } .orders-table { width: 100%; border-collapse: collapse; } .orders-table th { text-align: left; padding: 12px 15px; font-size: 12px; font-weight: 600; color: var(--gray-600); text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid var(--gray-200); background-color: var(--gray-50); } .orders-table td { padding: 12px 15px; font-size: 13px; color: var(--gray-700); border-bottom: 1px solid var(--gray-200); } .orders-table tr:last-child td { border-bottom: none; } .order-id { font-weight: 600; color: var(--primary); } .order-status { padding: 4px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; text-transform: uppercase; } .status-paid { background-color: rgba(48, 209, 88, 0.1); color: var(--success); } .status-pending { background-color: rgba(255, 179, 64, 0.1); color: var(--warning); } .status-failed { background-color: rgba(255, 69, 58, 0.1); color: var(--danger); } .quick-actions { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; } .action-card { background-color: white; border-radius: 10px; padding: 16px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); border: 1px solid var(--gray-200); display: flex; align-items: center; gap: 15px; cursor: pointer; transition: all 0.3s ease; } .action-card:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08); border-color: var(--primary-light); } .action-icon { width: 40px; height: 40px; border-radius: 8px; background-color: rgba(94, 106, 210, 0.1); color: var(--primary); display: flex; align-items: center; justify-content: center; font-size: 20px; } .action-text { flex: 1; } .action-title { font-size: 14px; font-weight: 600; color: var(--gray-800); margin-bottom: 2px; } .action-desc { font-size: 12px; color: var(--gray-600); } @keyframes pulse { 0% { transform: scale(1) rotate(0deg); opacity: 0.7; } 50% { transform: scale(1.2) rotate(45deg); opacity: 1; } 100% { transform: scale(1) rotate(0deg); opacity: 0.7; } } @media (max-width: 700px) { .container { height: 600px; border-radius: 0; box-shadow: none; } .content { grid-template-columns: 1fr; overflow-y: auto; } .sidebar { display: none; } .stats-grid { grid-template-columns: 1fr; } .quick-actions { grid-template-columns: 1fr; } .header { padding: 15px; } .logo-text { font-size: 16px; } } /* Mobile Menu */ .mobile-menu-toggle { display: none; background: none; border: none; width: 36px; height: 36px; border-radius: 8px; color: var(--gray-700); cursor: pointer; } .mobile-sidebar { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: white; z-index: 1000; transform: translateX(-100%); transition: transform 0.3s ease; display: none; flex-direction: column; } .mobile-sidebar.active { transform: translateX(0); } .mobile-sidebar-header { display: flex; justify-content: space-between; align-items: center; padding: 20px; border-bottom: 1px solid var(--gray-200); } .mobile-close { background: none; border: none; width: 36px; height: 36px; border-radius: 8px; color: var(--gray-700); cursor: pointer; } .mobile-sidebar-content { padding: 20px; overflow-y: auto; flex: 1; } @media (max-width: 700px) { .mobile-menu-toggle { display: flex; align-items: center; justify-content: center; } .mobile-sidebar { display: flex; } .notification-btn, .settings-btn { display: none; } } </style> </head> <body> <div class="container"> <header class="header"> <div class="logo"> <div class="logo-icon"> <div class="logo-dots"> <div class="logo-dot"></div> <div class="logo-dot"></div> <div class="logo-dot"></div> <div class="logo-dot"></div> <div class="logo-dot"></div> <div class="logo-dot"></div> <div class="logo-dot"></div> <div class="logo-dot"></div> <div class="logo-dot"></div> </div> </div> <span class="logo-text">DotCommerce</span> </div> <div class="user-menu"> <button class="mobile-menu-toggle"> <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"> <line x1="3" y1="12" x2="21" y2="12"></line> <line x1="3" y1="6" x2="21" y2="6"></line> <line x1="3" y1="18" x2="21" y2="18"></line> </svg> </button> <button class="notification-btn"> <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path> <path d="M13.73 21a2 2 0 0 1-3.46 0"></path> </svg> </button> <button class="settings-btn"> <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <circle cx="12" cy="12" r="3"></circle> <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path> </svg> </button> <div class="avatar">JS</div> </div> </header> <div class="content"> <aside class="sidebar"> <div class="menu-category"> <div class="category-title">Core</div> <div class="menu-item active"> <div class="menu-icon"> <div class="dot-menu dashboard-dots"> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> </div> </div> <span>Dashboard</span> </div> <div class="menu-item"> <div class="menu-icon"> <div class="dot-menu products-dots"> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> </div> </div> <span>Products</span> </div> <div class="menu-item"> <div class="menu-icon"> <div class="dot-menu orders-dots"> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> </div> </div> <span>Orders</span> </div> <div class="menu-item"> <div class="menu-icon"> <div class="dot-menu customers-dots"> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> </div> </div> <span>Customers</span> </div> </div> <div class="menu-category"> <div class="category-title">Insights</div> <div class="menu-item"> <div class="menu-icon"> <div class="dot-menu analytics-dots"> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> </div> </div> <span>Analytics</span> </div> <div class="menu-item"> <div class="menu-icon"> <div class="dot-menu marketing-dots"> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> </div> </div> <span>Marketing</span> </div> <div class="menu-item"> <div class="menu-icon"> <div class="dot-menu discounts-dots"> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> </div> </div> <span>Discounts</span> </div> </div> <div class="menu-category"> <div class="category-title">Configuration</div> <div class="menu-item"> <div class="menu-icon"> <div class="dot-menu apps-dots"> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> </div> </div> <span>Apps</span> </div> <div class="menu-item"> <div class="menu-icon"> <div class="dot-menu settings-dots"> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> </div> </div> <span>Settings</span> </div> </div> </aside> <div class="dashboard-content"> <h1 class="page-title">Dashboard</h1> <div class="stats-grid"> <div class="stat-card"> <div class="stat-title">Revenue Today</div> <div class="stat-value">$4,289</div> <div class="stat-trend trend-up"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <polyline points="22 7 13.5 15.5 8.5 10.5 2 17"></polyline> <polyline points="16 7 22 7 22 13"></polyline> </svg> 12.5% from yesterday </div> </div> <div class="stat-card"> <div class="stat-title">Orders</div> <div class="stat-value">156</div> <div class="stat-trend trend-up"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <polyline points="22 7 13.5 15.5 8.5 10.5 2 17"></polyline> <polyline points="16 7 22 7 22 13"></polyline> </svg> 8.2% from yesterday </div> </div> <div class="stat-card"> <div class="stat-title">Conversion Rate</div> <div class="stat-value">3.6%</div> <div class="stat-trend trend-down"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <polyline points="22 17 13.5 8.5 8.5 13.5 2 7"></polyline> <polyline points="16 17 22 17 22 11"></polyline> </svg> 1.2% from yesterday </div> </div> </div> <div class="section-title"> <span>Recent Orders</span> <a href="#" class="view-all">View all</a> </div> <div class="recent-orders"> <table class="orders-table"> <thead> <tr> <th>Order ID</th> <th>Customer</th> <th>Amount</th> <th>Status</th> </tr> </thead> <tbody> <tr> <td class="order-id">#ORD-7243</td> <td>Alex Morgan</td> <td>$129.99</td> <td><span class="order-status status-paid">Paid</span></td> </tr> <tr> <td class="order-id">#ORD-7242</td> <td>James Wilson</td> <td>$89.95</td> <td><span class="order-status status-pending">Pending</span></td> </tr> <tr> <td class="order-id">#ORD-7241</td> <td>Sara Johnson</td> <td>$259.50</td> <td><span class="order-status status-paid">Paid</span></td> </tr> <tr> <td class="order-id">#ORD-7240</td> <td>Michael Chen</td> <td>$45.00</td> <td><span class="order-status status-failed">Failed</span></td> </tr> </tbody> </table> </div> <div class="section-title"> <span>Quick Actions</span> </div> <div class="quick-actions"> <div class="action-card"> <div class="action-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"></path> <line x1="7" y1="7" x2="7.01" y2="7"></line> </svg> </div> <div class="action-text"> <div class="action-title">New Discount</div> <div class="action-desc">Create seasonal promotions</div> </div> </div> <div class="action-card"> <div class="action-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect> <line x1="12" y1="8" x2="12" y2="16"></line> <line x1="8" y1="12" x2="16" y2="12"></line> </svg> </div> <div class="action-text"> <div class="action-title">Add Product</div> <div class="action-desc">Expand your inventory</div> </div> </div> </div> </div> </div> </div> <div class="mobile-sidebar"> <div class="mobile-sidebar-header"> <div class="logo"> <div class="logo-icon"> <div class="logo-dots"> <div class="logo-dot"></div> <div class="logo-dot"></div> <div class="logo-dot"></div> <div class="logo-dot"></div> <div class="logo-dot"></div> <div class="logo-dot"></div> <div class="logo-dot"></div> <div class="logo-dot"></div> <div class="logo-dot"></div> </div> </div> <span class="logo-text">DotCommerce</span> </div> <button class="mobile-close"> <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"> <line x1="18" y1="6" x2="6" y2="18"></line> <line x1="6" y1="6" x2="18" y2="18"></line> </svg> </button> </div> <div class="mobile-sidebar-content"> <div class="menu-category"> <div class="category-title">Core</div> <div class="menu-item active"> <div class="menu-icon"> <div class="dot-menu dashboard-dots"> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> </div> </div> <span>Dashboard</span> </div> <div class="menu-item"> <div class="menu-icon"> <div class="dot-menu products-dots"> <div class="dot"></div> <div class="dot"></div>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>EduDots Menu</title> <style> @import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,wght@0,400;0,600;1,400&family=Quicksand:wght@400;500;600&display=swap'); :root { --primary: #4A6FA5; --secondary: #FF9E6D; --accent: #6DB193; --text: #333F48; --light: #F5F7FA; --paper: #F9F7F3; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Quicksand', sans-serif; background-color: var(--paper); color: var(--text); display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; padding: 20px; overflow-x: hidden; position: relative; } .header { position: absolute; top: 20px; left: 20px; right: 20px; display: flex; justify-content: space-between; align-items: center; z-index: 10; } .logo { font-family: 'Newsreader', serif; font-size: 28px; font-weight: 600; color: var(--primary); text-decoration: none; position: relative; } .logo span { color: var(--accent); } .logo::after { content: ""; position: absolute; width: 10px; height: 10px; background-color: var(--secondary); border-radius: 50%; bottom: 7px; right: -15px; opacity: 0.8; } .platform-title { font-family: 'Newsreader', serif; font-size: 2.5rem; font-weight: 600; margin-bottom: 1.5rem; color: var(--primary); text-align: center; position: relative; } .platform-title::after { content: ""; display: block; width: 60px; height: 5px; background: var(--secondary); margin: 10px auto; border-radius: 3px; } .subtitle { font-size: 1.1rem; text-align: center; max-width: 600px; margin-bottom: 3rem; line-height: 1.5; color: var(--text); opacity: 0.9; } .menu-container { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem; max-width: 650px; } .menu-item { display: flex; flex-direction: column; align-items: center; width: 130px; height: 130px; padding: 1.2rem; background-color: var(--light); border-radius: 15px; transition: transform 0.3s ease, box-shadow 0.3s ease; cursor: pointer; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); position: relative; overflow: hidden; } .menu-item:hover { transform: translateY(-5px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1); } .icon-container { position: relative; width: 60px; height: 60px; margin-bottom: 10px; } .dot { position: absolute; background-color: var(--primary); border-radius: 50%; opacity: 0.8; transition: transform 0.4s ease, opacity 0.4s ease; } .menu-item:hover .dot { transform: scale(1.2); } .menu-item:nth-child(1) .dot { background-color: var(--primary); } .menu-item:nth-child(2) .dot { background-color: var(--secondary); } .menu-item:nth-child(3) .dot { background-color: var(--accent); } .menu-item:nth-child(4) .dot { background-color: #9B5DE5; } .menu-item:nth-child(5) .dot { background-color: #F15BB5; } .menu-item:nth-child(6) .dot { background-color: #00BBF9; } .menu-item:nth-child(7) .dot { background-color: #00F5D4; } .menu-item:nth-child(8) .dot { background-color: #FEE440; } .menu-label { font-weight: 600; text-align: center; transition: color 0.3s ease; font-size: 0.95rem; } .menu-item:hover .menu-label { color: var(--primary); } .tooltip { position: absolute; bottom: -40px; left: 50%; transform: translateX(-50%); background-color: var(--text); color: white; padding: 6px 12px; border-radius: 6px; font-size: 0.8rem; opacity: 0; transition: opacity 0.3s, bottom 0.3s; pointer-events: none; white-space: nowrap; } .tooltip::before { content: ''; position: absolute; top: -5px; left: 50%; transform: translateX(-50%); border-width: 0 6px 6px 6px; border-style: solid; border-color: transparent transparent var(--text) transparent; } .menu-item:hover .tooltip { opacity: 1; bottom: -30px; } .notification-dot { position: absolute; top: 10px; right: 10px; width: 8px; height: 8px; background-color: #FF5252; border-radius: 50%; z-index: 2; } .paper-texture { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPgogIDxmaWx0ZXIgaWQ9Im5vaXNlIj4KICAgIDxmZVR1cmJ1bGVuY2UgdHlwZT0iZnJhY3RhbE5vaXNlIiBiYXNlRnJlcXVlbmN5PSIwLjgiIG51bU9jdGF2ZXM9IjQiIHN0aXRjaFRpbGVzPSJzdGl0Y2giIHJlc3VsdD0ibm9pc2UiLz4KICAgIDxmZUNvbG9yTWF0cml4IHR5cGU9InNhdHVyYXRlIiB2YWx1ZXM9IjAiLz4KICAgIDxmZUJsZW5kIGluPSJTb3VyY2VHcmFwaGljIiBpbjI9Im5vaXNlIiBtb2RlPSJzb2Z0LWxpZ2h0Ii8+CiAgPC9maWx0ZXI+CiAgPHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsdGVyPSJ1cmwoI25vaXNlKSIgb3BhY2l0eT0iMC4wNSIvPgo8L3N2Zz4='); pointer-events: none; z-index: -1; } .bg-pattern { position: absolute; bottom: 0; left: 0; width: 100%; height: 40%; background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMDAgMjAwIj48cmVjdCBmaWxsPSIjNEE2RkE1IiBmaWxsLW9wYWNpdHk9IjAuMDMiIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCwwKSIvPjxyZWN0IGZpbGw9IiM0QTZGQTUiIGZpbGwtb3BhY2l0eT0iMC4wMiIgd2lkdGg9IjIwIiBoZWlnaHQ9IjIwIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLDQwKSIvPjxyZWN0IGZpbGw9IiM0QTZGQTUiIGZpbGwtb3BhY2l0eT0iMC4wMiIgd2lkdGg9IjIwIiBoZWlnaHQ9IjIwIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLDgwKSIvPjxyZWN0IGZpbGw9IiM0QTZGQTUiIGZpbGwtb3BhY2l0eT0iMC4wNCIgd2lkdGg9IjIwIiBoZWlnaHQ9IjIwIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLDEyMCkiLz48cmVjdCBmaWxsPSIjNEE2RkE1IiBmaWxsLW9wYWNpdHk9IjAuMDMiIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCwxNjApIi8+PHJlY3QgZmlsbD0iIzRBNkZBNSIgZmlsbC1vcGFjaXR5PSIwLjAzIiB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQwLDApIi8+PHJlY3QgZmlsbD0iIzRBNkZBNSIgZmlsbC1vcGFjaXR5PSIwLjA0IiB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQwLDQwKSIvPjxyZWN0IGZpbGw9IiM0QTZGQTUiIGZpbGwtb3BhY2l0eT0iMC4wMiIgd2lkdGg9IjIwIiBoZWlnaHQ9IjIwIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0MCw4MCkiLz48cmVjdCBmaWxsPSIjNEE2RkE1IiBmaWxsLW9wYWNpdHk9IjAuMDEiIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNDAsMTIwKSIvPjxyZWN0IGZpbGw9IiM0QTZGQTUiIGZpbGwtb3BhY2l0eT0iMC4wMiIgd2lkdGg9IjIwIiBoZWlnaHQ9IjIwIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0MCwxNjApIi8+PHJlY3QgZmlsbD0iIzRBNkZBNSIgZmlsbC1vcGFjaXR5PSIwLjA0IiB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDgwLDApIi8+PHJlY3QgZmlsbD0iIzRBNkZBNSIgZmlsbC1vcGFjaXR5PSIwLjAyIiB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDgwLDQwKSIvPjxyZWN0IGZpbGw9IiM0QTZGQTUiIGZpbGwtb3BhY2l0eT0iMC4wMyIgd2lkdGg9IjIwIiBoZWlnaHQ9IjIwIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg4MCw4MCkiLz48cmVjdCBmaWxsPSIjNEE2RkE1IiBmaWxsLW9wYWNpdHk9IjAuMDQiIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoODAsMTIwKSIvPjxyZWN0IGZpbGw9IiM0QTZGQTUiIGZpbGwtb3BhY2l0eT0iMC4wMiIgd2lkdGg9IjIwIiBoZWlnaHQ9IjIwIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg4MCwxNjApIi8+PHJlY3QgZmlsbD0iIzRBNkZBNSIgZmlsbC1vcGFjaXR5PSIwLjAyIiB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEyMCwwKSIvPjxyZWN0IGZpbGw9IiM0QTZGQTUiIGZpbGwtb3BhY2l0eT0iMC4wMSIgd2lkdGg9IjIwIiBoZWlnaHQ9IjIwIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMjAsNDApIi8+PHJlY3QgZmlsbD0iIzRBNkZBNSIgZmlsbC1vcGFjaXR5PSIwLjA0IiB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEyMCw4MCkiLz48cmVjdCBmaWxsPSIjNEE2RkE1IiBmaWxsLW9wYWNpdHk9IjAuMDMiIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTIwLDEyMCkiLz48cmVjdCBmaWxsPSIjNEE2RkE1IiBmaWxsLW9wYWNpdHk9IjAuMDEiIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTIwLDE2MCkiLz48cmVjdCBmaWxsPSIjNEE2RkE1IiBmaWxsLW9wYWNpdHk9IjAuMDIiIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTYwLDApIi8+PHJlY3QgZmlsbD0iIzRBNkZBNSIgZmlsbC1vcGFjaXR5PSIwLjA0IiB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDE2MCw0MCkiLz48cmVjdCBmaWxsPSIjNEE2RkE1IiBmaWxsLW9wYWNpdHk9IjAuMDEiIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTYwLDgwKSIvPjxyZWN0IGZpbGw9IiM0QTZGQTUiIGZpbGwtb3BhY2l0eT0iMC4wMyIgd2lkdGg9IjIwIiBoZWlnaHQ9IjIwIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxNjAsMTIwKSIvPjxyZWN0IGZpbGw9IiM0QTZGQTUiIGZpbGwtb3BhY2l0eT0iMC4wMiIgd2lkdGg9IjIwIiBoZWlnaHQ9IjIwIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxNjAsMTYwKSIvPjwvc3ZnPg=='); background-repeat: repeat; opacity: 0.4; z-index: -1; pointer-events: none; } @media (max-width: 650px) { .platform-title { font-size: 2rem; } .subtitle { font-size: 1rem; margin-bottom: 2rem; } .menu-container { gap: 1rem; } .menu-item { width: 120px; height: 120px; padding: 1rem; } .icon-container { width: 50px; height: 50px; } } @media (max-width: 430px) { .platform-title { font-size: 1.8rem; } .menu-container { gap: 0.8rem; } .menu-item { width: 100px; height: 100px; } .icon-container { width: 40px; height: 40px; } .menu-label { font-size: 0.8rem; } } </style> </head> <body> <div class="paper-texture"></div> <div class="bg-pattern"></div> <div class="header"> <a href="#" class="logo">Scholar<span>Hub</span></a> </div> <h1 class="platform-title">Interactive Learning Portal</h1> <p class="subtitle">Navigate through our hand-crafted learning ecosystem with these creative dotted menu icons designed specifically for curious minds.</p> <div class="menu-container"> <div class="menu-item"> <div class="icon-container" id="courses-icon"></div> <div class="menu-label">Courses</div> <div class="tooltip">Browse all courses</div> </div> <div class="menu-item"> <div class="icon-container" id="assignments-icon"></div> <div class="menu-label">Assignments</div> <div class="tooltip">View pending assignments</div> <div class="notification-dot"></div> </div> <div class="menu-item"> <div class="icon-container" id="library-icon"></div> <div class="menu-label">Digital Library</div> <div class="tooltip">Access study materials</div> </div> <div class="menu-item"> <div class="icon-container" id="discussions-icon"></div> <div class="menu-label">Discussion Forums</div> <div class="tooltip">Join academic conversations</div> </div> <div class="menu-item"> <div class="icon-container" id="progress-icon"></div> <div class="menu-label">Learning Progress</div> <div class="tooltip">Track your achievements</div> </div> <div class="menu-item"> <div class="icon-container" id="calendar-icon"></div> <div class="menu-label">Academic Calendar</div> <div class="tooltip">View upcoming events</div> </div> <div class="menu-item"> <div class="icon-container" id="feedback-icon"></div> <div class="menu-label">Peer Feedback</div> <div class="tooltip">Give and receive feedback</div> </div> <div class="menu-item"> <div class="icon-container" id="settings-icon"></div> <div class="menu-label">Account Settings</div> <div class="tooltip">Customize your experience</div> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { // Configuration for each icon const iconConfigs = { 'courses-icon': { pattern: 'grid', dotsCount: 9, size: [4, 5] }, 'assignments-icon': { pattern: 'checklist', dotsCount: 12, size: [3, 4] }, 'library-icon': { pattern: 'books', dotsCount: 15, size: [3, 5] }, 'discussions-icon': { pattern: 'chat', dotsCount: 15, size: [3, 4, 5] }, 'progress-icon': { pattern: 'chart', dotsCount: 14, size: [3, 4, 5] }, 'calendar-icon': { pattern: 'calendar', dotsCount: 16, size: [3, 4] }, 'feedback-icon': { pattern: 'star', dotsCount: 12, size: [3, 4, 5] }, 'settings-icon': { pattern: 'gear', dotsCount: 13, size: [3, 4, 5] } }; // Create dots for each icon Object.keys(iconConfigs).forEach(iconId => { createDots(iconId, iconConfigs[iconId]); }); // Function to create dots based on pattern function createDots(iconId, config) { const container = document.getElementById(iconId); const containerWidth = container.offsetWidth; const containerHeight = container.offsetHeight; let dots = []; switch(config.pattern) { case 'grid': // 3x3 grid pattern for (let i = 0; i < 3; i++) { for (let j = 0; j < 3; j++) { dots.push({ x: 15 + i * 15, y: 15 + j * 15, size: getRandomSize(config.size), delay: (i + j) * 0.05 }); } } break; case 'checklist': // Checklist pattern for (let i = 0; i < 3; i++) { dots.push({ x: 15, y: 10 + i * 20, size: getRandomSize(config.size), delay: i * 0.1 }); for (let j = 0; j < 3; j++) { dots.push({ x: 30 + j * 10, y: 10 + i * 20, size: getRandomSize([2, 3]), delay: (i * 3 + j + 1) * 0.05 }); } } break; case 'books': // Books on shelf pattern for (let i = 0; i < 3; i++) { for (let j = 0; j < 5; j++) { dots.push({ x: 10 + i * 20, y: 5 + j * 10, size: getRandomSize(config.size), delay: (i * 5 + j) * 0.03 }); } } break; case 'chat': // Chat bubble pattern // Outer circle for (let i = 0; i < 12; i++) { const angle = (i / 12) * 2 * Math.PI; dots.push({ x: 30 + Math.cos(angle) * 25, y: 30 + Math.sin(angle) * 20, size: getRandomSize(config.size), delay: i * 0.06 }); } // Inner dots dots.push({x: 20, y: 30, size: 4, delay: 0.7}); dots.push({x: 30, y: 30, size: 4, delay: 0.8}); dots.push({x: 40, y: 30, size: 4, delay: 0.9}); break; case 'chart': // Chart/graph pattern for (let i = 0; i < 5; i++) { dots.push({ x: 10 + i * 10, y: 45 - i * 5, size: getRandomSize(config.size), delay: i * 0.1 }); } for (let i = 0; i < 4; i++) { dots.push({ x: 10 + (i+5) * 10, y: 25 + i * 5, size: getRandomSize(config.size), delay: (i+5) * 0.1 }); } // Axis dots for (let i = 0; i < 5; i++) { dots.push({ x: 10, y: 15 + i * 10, size: 3, delay: 0.9 + i * 0.02 }); } break; case 'calendar': // Calendar pattern // Top row (header) for (let i = 0; i < 4; i++) { dots.push({ x: 15 + i * 10, y: 10, size: 4, delay: i * 0.05 }); } // Grid of days for (let i = 0; i < 3; i++) { for (let j = 0; j < 4; j++) { dots.push({ x: 15 + j * 10, y: 20 + i * 10, size: getRandomSize([2, 3]), delay: 0.2 + (i * 4 + j) * 0.03 }); } } break; case 'star': // Star/feedback pattern for (let i = 0; i < 5; i++) { const angle = ((i / 5) * 2 * Math.PI) - Math.PI/2; dots.push({ x: 30 + Math.cos(angle) * 20, y: 30 + Math.sin(angle) * 20, size: getRandomSize(config.size), delay: i * 0.08 }); } // Inner circle for (let i = 0; i < 7; i++) { const angle = ((i / 7) * 2 * Math.PI); dots.push({ x: 30 + Math.cos(angle) * 10, y: 30 + Math.sin(angle) * 10, size: getRandomSize([2, 3]), delay: 0.4 + i * 0.04 }); } break; case 'gear': // Gear/settings pattern for (let i = 0; i < 8; i++) { const angle = (i / 8) * 2 * Math.PI; dots.push({ x: 30 + Math.cos(angle) * 20, y: 30 + Math.sin(angle) * 20, size: getRandomSize(config.size), delay: i * 0.05 }); } // Inner circle for (let i = 0; i < 5; i++) { const angle = ((i / 5) * 2 * Math.PI) + (Math.PI / 5); dots.push({ x: 30 + Math.cos(angle) * 10, y: 30 + Math.sin(angle) * 10, size: getRandomSize([2, 3]), delay: 0.4 + i * 0.06 }); } break; } // Create the actual dot elements dots.forEach(dot => { const dotElement = document.createElement('div'); dotElement.className = 'dot'; dotElement.style.width = `${dot.size}px`; dotElement.style.height = `${dot.size}px`; dotElement.style.left = `${dot.x}px`; dotElement.style.top = `${dot.y}px`; dotElement.style.transitionDelay = `${dot.delay}s`; // Add slight randomness to initial position for more hand-drawn feel const randomOffset = Math.random() * 2 - 1; dotElement.style.transform = `translate(${randomOffset}px, ${randomOffset}px)`; container.appendChild(dotElement); }); } function getRandomSize(sizeArray) { return sizeArray[Math.floor(Math.random() * sizeArray.length)]; } // Add ripple effect on click document.querySelectorAll('.menu-item').forEach(item => { item.addEventListener('click', function(e) { const x = e.clientX - this.getBoundingClientRect().left; const y = e.clientY - this.getBoundingClientRect().top; const ripple = document.createElement('span'); ripple.className = 'ripple'; ripple.style.left = `${x}px`; ripple.style.top = `${y}px`; this.appendChild(ripple); setTimeout(() => { ripple.remove(); }, 600); }); }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>PulseTrack Fitness App</title> <style> :root { --primary: #FF5757; --secondary: #5CE1E6; --tertiary: #8C52FF; --success: #7CFF6B; --dark: #1D1D35; --light: #F7F8FC; --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } body { background-color: var(--dark); color: var(--light); width: 100%; height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; } .app-container { width: 100%; max-width: 700px; height: 100%; max-height: 700px; display: flex; flex-direction: column; position: relative; overflow: hidden; background: linear-gradient(145deg, #232341, #1a1a30); border-radius: 24px; box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22); } .app-header { display: flex; align-items: center; justify-content: space-between; padding: 20px; background: rgba(29, 29, 53, 0.8); backdrop-filter: blur(10px); z-index: 10; } .app-title { font-size: 1.5rem; font-weight: 700; display: flex; align-items: center; gap: 10px; } .app-title span { color: var(--secondary); } .pulse-dot { width: 10px; height: 10px; background-color: var(--primary); border-radius: 50%; display: inline-block; margin-right: 5px; animation: pulse 1.5s infinite; } .menu-btn { background: none; border: none; color: var(--light); font-size: 1.5rem; cursor: pointer; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; transition: var(--transition); } .menu-btn:hover { background: rgba(255, 255, 255, 0.1); } .content-area { flex: 1; padding: 20px; overflow-y: auto; position: relative; } .stat-container { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-bottom: 30px; } .stat-card { background: rgba(255, 255, 255, 0.08); border-radius: 16px; padding: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; transition: var(--transition); cursor: pointer; position: relative; overflow: hidden; } .stat-card:hover { transform: translateY(-5px); background: rgba(255, 255, 255, 0.12); } .stat-card::before { content: ''; position: absolute; width: 100%; height: 100%; background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.05), transparent); top: 0; left: -100%; transition: 0.5s; } .stat-card:hover::before { left: 100%; } .stat-icon { font-size: 2rem; margin-bottom: 10px; } .steps .stat-icon { color: var(--secondary); } .heart .stat-icon { color: var(--primary); } .calories .stat-icon { color: var(--tertiary); } .distance .stat-icon { color: var(--success); } .stat-value { font-size: 1.8rem; font-weight: 700; margin-bottom: 5px; } .stat-label { font-size: 0.9rem; opacity: 0.8; } .activity-log { background: rgba(255, 255, 255, 0.08); border-radius: 16px; padding: 20px; margin-bottom: 30px; } .activity-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; } .activity-title { font-size: 1.2rem; font-weight: 600; } .activity-view-all { color: var(--secondary); font-size: 0.9rem; text-decoration: none; cursor: pointer; } .activity-item { display: flex; align-items: center; gap: 15px; padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .activity-item:last-child { border-bottom: none; } .activity-icon { width: 40px; height: 40px; background: rgba(255, 255, 255, 0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; } .run .activity-icon { color: var(--secondary); } .bike .activity-icon { color: var(--tertiary); } .swim .activity-icon { color: var(--primary); } .activity-details { flex: 1; } .activity-name { font-weight: 500; margin-bottom: 3px; } .activity-metrics { display: flex; gap: 10px; font-size: 0.8rem; opacity: 0.8; } .activity-time { opacity: 0.7; font-size: 0.8rem; } .menu-container { position: fixed; bottom: 0; left: 0; width: 100%; background: rgba(29, 29, 53, 0.95); backdrop-filter: blur(10px); display: flex; justify-content: space-around; padding: 15px 0; border-top-left-radius: 24px; border-top-right-radius: 24px; z-index: 100; transform: translateY(100%); transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .menu-container.active { transform: translateY(0); } .menu-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 90; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } .menu-overlay.active { opacity: 1; pointer-events: all; } .nav-container { width: 100%; display: flex; justify-content: space-around; background: rgba(29, 29, 53, 0.95); backdrop-filter: blur(10px); padding: 15px 0; border-top-left-radius: 24px; border-top-right-radius: 24px; position: absolute; bottom: 0; z-index: 10; } .nav-icon { display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; transition: var(--transition); position: relative; width: 60px; } .nav-icon-container { position: relative; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; } .nav-icon.active .nav-label { opacity: 1; } .nav-dots { position: relative; width: 30px; height: 30px; } .dot { position: absolute; width: 6px; height: 6px; border-radius: 50%; transition: var(--transition); } /* Home icon dots */ .home-icon .dot:nth-child(1) { background-color: var(--secondary); top: 5px; left: 5px; } .home-icon .dot:nth-child(2) { background-color: var(--secondary); top: 5px; right: 5px; } .home-icon .dot:nth-child(3) { background-color: var(--secondary); bottom: 5px; left: 5px; } .home-icon .dot:nth-child(4) { background-color: var(--secondary); bottom: 5px; right: 5px; } /* Stats icon dots */ .stats-icon .dot:nth-child(1) { background-color: var(--primary); top: 0; left: 12px; } .stats-icon .dot:nth-child(2) { background-color: var(--primary); top: 12px; left: 0; } .stats-icon .dot:nth-child(3) { background-color: var(--primary); top: 12px; right: 0; } .stats-icon .dot:nth-child(4) { background-color: var(--primary); bottom: 0; left: 12px; } /* Activity icon dots */ .activity-icon-dots .dot:nth-child(1) { background-color: var(--tertiary); top: 0; left: 12px; } .activity-icon-dots .dot:nth-child(2) { background-color: var(--tertiary); top: 12px; left: 12px; } .activity-icon-dots .dot:nth-child(3) { background-color: var(--tertiary); bottom: 0; left: 12px; } /* Profile icon dots */ .profile-icon .dot:nth-child(1) { background-color: var(--success); top: 3px; left: 12px; } .profile-icon .dot:nth-child(2) { background-color: var(--success); top: 15px; left: 5px; } .profile-icon .dot:nth-child(3) { background-color: var(--success); top: 15px; right: 5px; } .nav-icon.active .dot { animation: pulseDot 1.5s infinite; } .nav-label { margin-top: 8px; font-size: 0.8rem; opacity: 0.7; transition: var(--transition); } .nav-icon::after { content: ''; position: absolute; bottom: -10px; width: 0; height: 3px; border-radius: 3px; transition: var(--transition); } .nav-icon.home.active::after { background-color: var(--secondary); width: 20px; } .nav-icon.stats.active::after { background-color: var(--primary); width: 20px; } .nav-icon.activity.active::after { background-color: var(--tertiary); width: 20px; } .nav-icon.profile.active::after { background-color: var(--success); width: 20px; } .action-button { position: absolute; bottom: 90px; right: 20px; width: 60px; height: 60px; border-radius: 50%; background: linear-gradient(45deg, var(--primary), var(--tertiary)); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: white; box-shadow: 0 4px 20px rgba(140, 82, 255, 0.5); cursor: pointer; transition: var(--transition); z-index: 20; } .action-button:hover { transform: scale(1.1); box-shadow: 0 6px 25px rgba(140, 82, 255, 0.7); } .action-button i { transition: var(--transition); } .action-button:hover i { transform: rotate(90deg); } @keyframes pulse { 0% { transform: scale(1); opacity: 0.8; } 50% { transform: scale(1.3); opacity: 1; } 100% { transform: scale(1); opacity: 0.8; } } @keyframes pulseDot { 0% { transform: scale(1); opacity: 0.8; } 50% { transform: scale(1.3); opacity: 1; } 100% { transform: scale(1); opacity: 0.8; } } /* Menu animation */ .menu-item { display: flex; align-items: center; padding: 15px 20px; color: var(--light); text-decoration: none; transition: var(--transition); border-radius: 12px; margin: 0 10px; } .menu-item i { width: 30px; font-size: 1.2rem; margin-right: 15px; } .menu-item:hover { background: rgba(255, 255, 255, 0.1); } .menu-item.settings i { color: var(--secondary); } .menu-item.goals i { color: var(--primary); } .menu-item.challenges i { color: var(--tertiary); } .menu-item.friends i { color: var(--success); } .menu-item.help i { color: #FFC107; } .welcome-message { margin-bottom: 25px; } .welcome-user { font-size: 1.5rem; font-weight: 700; margin-bottom: 5px; } .welcome-subtitle { color: var(--secondary); font-size: 1rem; } .today-summary { margin-bottom: 10px; font-size: 1.1rem; font-weight: 600; } @media (max-width: 480px) { .stat-container { grid-template-columns: repeat(2, 1fr); gap: 15px; } .stat-value { font-size: 1.5rem; } .stat-icon { font-size: 1.5rem; } .welcome-user { font-size: 1.2rem; } .nav-icon { width: 50px; } } /* Progress ring for stats */ .progress-ring { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 16px; } .progress-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); } .progress-ring circle { fill: none; stroke-width: 3; stroke-linecap: round; } .progress-bg { stroke: rgba(255, 255, 255, 0.05); } .progress-bar { stroke-dasharray: 255; transition: stroke-dashoffset 1s ease; } .steps .progress-bar { stroke: var(--secondary); stroke-dashoffset: calc(255 - (255 * 0.75)); } .heart .progress-bar { stroke: var(--primary); stroke-dashoffset: calc(255 - (255 * 0.68)); } .calories .progress-bar { stroke: var(--tertiary); stroke-dashoffset: calc(255 - (255 * 0.45)); } .distance .progress-bar { stroke: var(--success); stroke-dashoffset: calc(255 - (255 * 0.62)); } </style> </head> <body> <div class="app-container"> <div class="app-header"> <div class="app-title"> <div class="pulse-dot"></div> Pulse<span>Track</span> </div> <button class="menu-btn" id="menuBtn"> <i>≡</i> </button> </div> <div class="content-area"> <div class="welcome-message"> <div class="welcome-user">Hey, Alex! 👋</div> <div class="welcome-subtitle">Ready to beat yesterday's record?</div> </div> <div class="today-summary">Today's Progress</div> <div class="stat-container"> <div class="stat-card steps"> <div class="progress-ring"> <svg viewBox="0 0 100 100"> <circle class="progress-bg" cx="50" cy="50" r="40"></circle> <circle class="progress-bar" cx="50" cy="50" r="40"></circle> </svg> </div> <div class="stat-icon">👣</div> <div class="stat-value">7,548</div> <div class="stat-label">Steps</div> </div> <div class="stat-card heart"> <div class="progress-ring"> <svg viewBox="0 0 100 100"> <circle class="progress-bg" cx="50" cy="50" r="40"></circle> <circle class="progress-bar" cx="50" cy="50" r="40"></circle> </svg> </div> <div class="stat-icon">❤️</div> <div class="stat-value">78</div> <div class="stat-label">BPM</div> </div> <div class="stat-card calories"> <div class="progress-ring"> <svg viewBox="0 0 100 100"> <circle class="progress-bg" cx="50" cy="50" r="40"></circle> <circle class="progress-bar" cx="50" cy="50" r="40"></circle> </svg> </div> <div class="stat-icon">🔥</div> <div class="stat-value">458</div> <div class="stat-label">Calories</div> </div> <div class="stat-card distance"> <div class="progress-ring"> <svg viewBox="0 0 100 100"> <circle class="progress-bg" cx="50" cy="50" r="40"></circle> <circle class="progress-bar" cx="50" cy="50" r="40"></circle> </svg> </div> <div class="stat-icon">🏃</div> <div class="stat-value">3.2</div> <div class="stat-label">Kilometers</div> </div> </div> <div class="activity-log"> <div class="activity-header"> <div class="activity-title">Recent Activities</div> <div class="activity-view-all">View All</div> </div> <div class="activity-item run"> <div class="activity-icon">🏃</div> <div class="activity-details"> <div class="activity-name">Morning Run</div> <div class="activity-metrics"> <span>2.5 km</span> <span>•</span> <span>22 min</span> <span>•</span> <span>245 cal</span> </div> </div> <div class="activity-time">Today</div> </div> <div class="activity-item bike"> <div class="activity-icon">🚴</div> <div class="activity-details"> <div class="activity-name">Cycling to Work</div> <div class="activity-metrics"> <span>8.2 km</span> <span>•</span> <span>35 min</span> <span>•</span> <span>312 cal</span> </div> </div> <div class="activity-time">Yesterday</div> </div> <div class="activity-item swim"> <div class="activity-icon">🏊</div> <div class="activity-details"> <div class="activity-name">Pool Swimming</div> <div class="activity-metrics"> <span>1.5 km</span> <span>•</span> <span>45 min</span> <span>•</span> <span>405 cal</span> </div> </div> <div class="activity-time">2 days ago</div> </div> </div> </div> <div class="action-button" id="startActivityBtn"> <i>+</i> </div> <div class="nav-container"> <div class="nav-icon home active"> <div class="nav-icon-container"> <div class="nav-dots home-icon"> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> </div> </div> <div class="nav-label">Home</div> </div> <div class="nav-icon stats"> <div class="nav-icon-container"> <div class="nav-dots stats-icon"> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> </div> </div> <div class="nav-label">Stats</div> </div> <div class="nav-icon activity"> <div class="nav-icon-container"> <div class="nav-dots activity-icon-dots"> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> </div> </div> <div class="nav-label">Activities</div> </div> <div class="nav-icon profile"> <div class="nav-icon-container"> <div class="nav-dots profile-icon"> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> </div> </div> <div class="nav-label">Profile</div> </div> </div> <div class="menu-overlay" id="menuOverlay"></div> <div class="menu-container" id="menuContainer"> <div style="width: 100%;"> <div class="menu-item settings"> <i>⚙️</i> <span>Settings</span> </div> <div class="menu-item goals"> <i>🎯</i> <span>Fitness Goals</span> </div> <div class="menu-item challenges"> <i>🏆</i> <span>Challenges</span> </div> <div class="menu-item friends"> <i>👥</i> <span>Friends</span> </div> <div class="menu-item help"> <i>❓</i> <span>Help & Support</span> </div> </div> </div> </div> <script> // DOM elements const navIcons = document.querySelectorAll('.nav-icon'); const menuBtn = document.getElementById('menuBtn'); const menuContainer = document.getElementById('menuContainer'); const menuOverlay = document.getElementById('menuOverlay'); const startActivityBtn = document.getElementById('startActivityBtn'); // Handle navigation icon clicks navIcons.forEach(icon => { icon.addEventListener('click', () => { // Remove active class from all icons navIcons.forEach(item => item.classList.remove('active')); // Add active class to clicked icon icon.classList.add('active'); // Add a subtle tap effect icon.style.transform = 'scale(0.9)'; setTimeout(() => { icon.style.transform = 'scale(1)'; }, 150); }); }); // Handle menu button click menuBtn.addEventListener('click', () => { menuContainer.classList.toggle('active'); menuOverlay.classList.toggle('active'); }); // Close menu when clicking outside menuOverlay.addEventListener('click', () => { menuContainer.classList.remove('active'); menuOverlay.classList.remove('active'); }); // Start Activity button effect startActivityBtn.addEventListener('click', () => { startActivityBtn.style.transform = 'scale(0.9)'; startActivityBtn.querySelector('i').style.transform = 'rotate(45deg)'; setTimeout(() => { startActivityBtn.style.transform = 'scale(1)'; // Simple pulse animation startActivityBtn.style.boxShadow = '0 0 0 15px rgba(140, 82, 255, 0.1)'; setTimeout(() => { startActivityBtn.style.boxShadow = '0 4px 20px rgba(140, 82, 255, 0.5)'; }, 300); }, 150); }); // Add pulsing animation to statistic cards on scroll const statCards = document.querySelectorAll('.stat-card'); const observerOptions = { threshold: 0.5 }; const cardObserver = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.style.transform = 'translateY(-5px)'; entry.target.style.background = 'rgba(255, 255, 255, 0.12)'; setTimeout(() => { entry.target.style.transform = 'translateY(0)'; entry.target.style.background = 'rgba(255, 255, 255, 0.08)'; }, 1000); } }); }, observerOptions); statCards.forEach(card => { cardObserver.observe(card); }); // Menu item hover effect const menuItems = document.querySelectorAll('.menu-item'); menuItems.forEach(item => { item.addEventListener('mouseover', () => { item.style.paddingLeft = '25px'; }); item.addEventListener('mouseout', () => { item.style.paddingLeft = '20px'; }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Wander Wise - Travel Booking</title> <style> :root { --primary: #ff7e5f; --secondary: #feb47b; --tertiary: #ffcd9a; --light: #fff4e9; --dark: #3a3042; --accent: #6d8ea0; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } body { background-color: var(--light); display: flex; justify-content: center; align-items: center; min-height: 100vh; overflow-x: hidden; padding: 20px; } .container { width: 100%; max-width: 680px; background: white; border-radius: 24px; box-shadow: 0 10px 30px rgba(58, 48, 66, 0.08); overflow: hidden; position: relative; } .header { background: linear-gradient(135deg, var(--primary), var(--secondary)); padding: 30px; color: white; position: relative; overflow: hidden; } .header h1 { font-size: 28px; margin-bottom: 10px; font-weight: 700; position: relative; z-index: 2; } .header p { font-size: 16px; opacity: 0.9; max-width: 80%; position: relative; z-index: 2; } .dotted-bg { position: absolute; top: 0; right: 0; width: 180px; height: 180px; z-index: 1; opacity: 0.15; } .dotted-bg svg { width: 100%; height: 100%; } .menu-container { padding: 30px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .menu-item { display: flex; flex-direction: column; align-items: center; position: relative; cursor: pointer; transition: transform 0.3s ease; } .menu-item:hover { transform: translateY(-5px); } .icon-container { width: 70px; height: 70px; border-radius: 50%; display: flex; justify-content: center; align-items: center; margin-bottom: 12px; position: relative; background: white; } .icon-bg { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 1; opacity: 0.15; transform: scale(0.8); transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .menu-item:hover .icon-bg { transform: scale(1); } .icon-container svg { width: 30px; height: 30px; position: relative; z-index: 2; transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .menu-item:hover .icon-container svg { transform: rotate(10deg) scale(1.1); } .menu-item h3 { font-size: 16px; font-weight: 600; color: var(--dark); margin-bottom: 6px; text-align: center; } .menu-description { position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(10px); background: white; padding: 15px; border-radius: 12px; box-shadow: 0 10px 20px rgba(58, 48, 66, 0.1); width: 200px; opacity: 0; visibility: hidden; transition: 0.3s ease; z-index: 10; pointer-events: none; } .menu-item:hover .menu-description { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(15px); } .menu-description p { font-size: 14px; color: var(--dark); margin-bottom: 10px; } .menu-description a { display: inline-block; font-size: 13px; color: var(--primary); font-weight: 600; text-decoration: none; position: relative; } .menu-description a::after { content: ""; position: absolute; bottom: -2px; left: 0; width: 100%; height: 2px; background-color: var(--primary); transform: scaleX(0); transform-origin: right; transition: transform 0.3s ease; } .menu-description a:hover::after { transform: scaleX(1); transform-origin: left; } .recent-searches { margin-top: 20px; padding: 0 30px 30px; } .recent-searches h2 { font-size: 18px; color: var(--dark); margin-bottom: 15px; font-weight: 600; } .search-items { display: flex; gap: 15px; overflow-x: auto; padding-bottom: 10px; scrollbar-width: thin; scrollbar-color: var(--secondary) var(--light); } .search-items::-webkit-scrollbar { height: 6px; } .search-items::-webkit-scrollbar-track { background: var(--light); border-radius: 10px; } .search-items::-webkit-scrollbar-thumb { background-color: var(--secondary); border-radius: 10px; border: 3px solid var(--secondary); } .search-item { min-width: 150px; background: linear-gradient(to bottom, rgba(255,255,255,0.9), rgba(255,255,255,0.7)); backdrop-filter: blur(10px); border-radius: 12px; padding: 15px; box-shadow: 0 3px 10px rgba(58, 48, 66, 0.05); position: relative; transition: transform 0.3s ease; border: 1px solid rgba(255, 126, 95, 0.1); } .search-item:hover { transform: translateY(-3px); } .search-item h4 { font-size: 14px; color: var(--dark); margin-bottom: 5px; } .search-item p { font-size: 12px; color: var(--accent); } .fab-button { position: absolute; bottom: 30px; right: 30px; width: 60px; height: 60px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), var(--secondary)); display: flex; justify-content: center; align-items: center; box-shadow: 0 5px 15px rgba(255, 126, 95, 0.3); cursor: pointer; z-index: 5; transition: transform 0.3s ease, box-shadow 0.3s ease; } .fab-button:hover { transform: scale(1.05); box-shadow: 0 8px 20px rgba(255, 126, 95, 0.4); } .fab-button svg { width: 24px; height: 24px; fill: white; } .flight-icon { background: linear-gradient(135deg, #FF9D6C, #FF7E5F); } .hotel-icon { background: linear-gradient(135deg, #6D8EA0, #4A6F89); } .activities-icon { background: linear-gradient(135deg, #AED581, #8BC34A); } .packages-icon { background: linear-gradient(135deg, #FFC1E3, #FF8DD1); } .rentals-icon { background: linear-gradient(135deg, #90CAF9, #42A5F5); } .food-icon { background: linear-gradient(135deg, #FFCC80, #FFA726); } @media (max-width: 600px) { .menu-container { grid-template-columns: repeat(2, 1fr); } .header h1 { font-size: 24px; } .header p { font-size: 14px; max-width: 100%; } } .toast { position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%) translateY(100px); background: var(--dark); color: white; padding: 12px 24px; border-radius: 50px; font-size: 14px; opacity: 0; visibility: hidden; transition: all 0.3s ease; z-index: 1000; } .toast.show { transform: translateX(-50%) translateY(0); opacity: 1; visibility: visible; } .menu-dot { width: 4px; height: 4px; background-color: currentColor; border-radius: 50%; margin: 1px 0; } .menu-dots { display: flex; flex-direction: column; align-items: center; justify-content: center; position: absolute; top: 14px; right: 14px; height: 14px; opacity: 0.5; transition: opacity 0.3s ease; } .search-item:hover .menu-dots { opacity: 1; } </style> </head> <body> <div class="container"> <div class="header"> <h1>Wander Wise</h1> <p>Your gateway to authentic travel experiences and hidden gems</p> <div class="dotted-bg"> <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <pattern id="dotPattern" width="10" height="10" patternUnits="userSpaceOnUse"> <circle cx="2" cy="2" r="1" fill="white" /> </pattern> <rect width="100" height="100" fill="url(#dotPattern)" /> </svg> </div> </div> <div class="menu-container"> <div class="menu-item" data-type="flights"> <div class="icon-container flight-icon"> <div class="icon-bg"> <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <pattern id="dotPattern1" width="5" height="5" patternUnits="userSpaceOnUse"> <circle cx="2" cy="2" r="0.8" fill="currentColor" /> </pattern> <circle cx="50" cy="50" r="40" fill="url(#dotPattern1)" /> </svg> </div> <svg viewBox="0 0 24 24" fill="white"> <path d="M21,16V14L13,9V3.5A1.5,1.5,0,0,0,11.5,2h0A1.5,1.5,0,0,0,10,3.5V9L2,14v2l8-2.5V19L8,20.5V22l3.5-1L15,22V20.5L13,19V13.5Z"/> </svg> </div> <h3>Flights</h3> <div class="menu-description"> <p>Compare flights across 500+ airlines and find hidden routes with better connections.</p> <a href="#">Find your flight</a> </div> </div> <div class="menu-item" data-type="hotels"> <div class="icon-container hotel-icon"> <div class="icon-bg"> <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <pattern id="dotPattern2" width="5" height="5" patternUnits="userSpaceOnUse"> <circle cx="2" cy="2" r="0.8" fill="currentColor" /> </pattern> <circle cx="50" cy="50" r="40" fill="url(#dotPattern2)" /> </svg> </div> <svg viewBox="0 0 24 24" fill="white"> <path d="M19,7H11V14H3V5H1V20H3V17H21V20H23V11A4,4,0,0,0,19,7M7,13A3,3,0,0,0,10,10,3,3,0,0,0,7,7,3,3,0,0,0,4,10,3,3,0,0,0,7,13Z"/> </svg> </div> <h3>Hotels</h3> <div class="menu-description"> <p>Discover unique stays from boutique hotels to authentic local homestays and budget-friendly options.</p> <a href="#">Find accommodation</a> </div> </div> <div class="menu-item" data-type="activities"> <div class="icon-container activities-icon"> <div class="icon-bg"> <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <pattern id="dotPattern3" width="5" height="5" patternUnits="userSpaceOnUse"> <circle cx="2" cy="2" r="0.8" fill="currentColor" /> </pattern> <circle cx="50" cy="50" r="40" fill="url(#dotPattern3)" /> </svg> </div> <svg viewBox="0 0 24 24" fill="white"> <path d="M15,20A1,1,0,0,0,16,19V15A1,1,0,0,0,15,14H9a1,1,0,0,0-1,1v4a1,1,0,0,0,1,1ZM10,16h4v2H10ZM12,2A10,10,0,1,0,22,12,10,10,0,0,0,12,2Zm0,18a8,8,0,1,1,8-8A8,8,0,0,1,12,20Zm4-9H13V8a1,1,0,0,0-2,0v3H8a1,1,0,0,0,0,2h3v3a1,1,0,0,0,2,0V13h3a1,1,0,0,0,0-2Z"/> </svg> </div> <h3>Activities</h3> <div class="menu-description"> <p>Book local experiences led by passionate guides and skip the tourist traps for authentic moments.</p> <a href="#">Explore activities</a> </div> </div> <div class="menu-item" data-type="packages"> <div class="icon-container packages-icon"> <div class="icon-bg"> <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <pattern id="dotPattern4" width="5" height="5" patternUnits="userSpaceOnUse"> <circle cx="2" cy="2" r="0.8" fill="currentColor" /> </pattern> <circle cx="50" cy="50" r="40" fill="url(#dotPattern4)" /> </svg> </div> <svg viewBox="0 0 24 24" fill="white"> <path d="M21,16.5C21,16.88 20.79,17.21 20.47,17.38L12.57,21.82C12.41,21.94 12.21,22 12,22C11.79,22 11.59,21.94 11.43,21.82L3.53,17.38C3.21,17.21 3,16.88 3,16.5V7.5C3,7.12 3.21,6.79 3.53,6.62L11.43,2.18C11.59,2.06 11.79,2 12,2C12.21,2 12.41,2.06 12.57,2.18L20.47,6.62C20.79,6.79 21,7.12 21,7.5V16.5M12,4.15L6.04,7.5L12,10.85L17.96,7.5L12,4.15M5,15.91L11,19.29V12.58L5,9.21V15.91M19,15.91V9.21L13,12.58V19.29L19,15.91Z"/> </svg> </div> <h3>Packages</h3> <div class="menu-description"> <p>Save up to 25% with our hand-curated travel bundles, combining flights, stays, and unique experiences.</p> <a href="#">View packages</a> </div> </div> <div class="menu-item" data-type="rentals"> <div class="icon-container rentals-icon"> <div class="icon-bg"> <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <pattern id="dotPattern5" width="5" height="5" patternUnits="userSpaceOnUse"> <circle cx="2" cy="2" r="0.8" fill="currentColor" /> </pattern> <circle cx="50" cy="50" r="40" fill="url(#dotPattern5)" /> </svg> </div> <svg viewBox="0 0 24 24" fill="white"> <path d="M16,6H6V4H16V6M18.5,14H18V12L14,8H6C4.89,8 4,8.89 4,10V17H5.5A3.5,3.5 0 0,0 9,20.5A3.5,3.5 0 0,0 12.5,17H18.5A3.5,3.5 0 0,0 22,13.5A3.5,3.5 0 0,0 18.5,10C15.79,10 13.5,12.29 13.5,15H12.5A3.5,3.5 0 0,0 9,11.5A3.5,3.5 0 0,0 5.5,15H5V10H13L17,14H18.5M18.5,11.5A2,2 0 0,1 20.5,13.5A2,2 0 0,1 18.5,15.5A2,2 0 0,1 16.5,13.5A2,2 0 0,1 18.5,11.5M9,12.5A2,2 0 0,1 11,14.5A2,2 0 0,1 9,16.5A2,2 0 0,1 7,14.5A2,2 0 0,1 9,12.5Z"/> </svg> </div> <h3>Car Rentals</h3> <div class="menu-description"> <p>From eco-friendly compacts to rugged 4x4s for off-road adventures. Free cancellation up to 48hrs before.</p> <a href="#">Rent a vehicle</a> </div> </div> <div class="menu-item" data-type="food"> <div class="icon-container food-icon"> <div class="icon-bg"> <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <pattern id="dotPattern6" width="5" height="5" patternUnits="userSpaceOnUse"> <circle cx="2" cy="2" r="0.8" fill="currentColor" /> </pattern> <circle cx="50" cy="50" r="40" fill="url(#dotPattern6)" /> </svg> </div> <svg viewBox="0 0 24 24" fill="white"> <path d="M8.1,13.34L3.91,9.16C2.35,7.59 2.35,5.06 3.91,3.5L10.93,10.5L8.1,13.34M14.88,11.53L13.41,13L20.29,19.88L18.88,21.29L12,14.41L5.12,21.29L3.71,19.88L13.47,10.12C12.76,8.59 13.26,6.44 14.85,4.85C16.76,2.93 19.5,2.57 20.96,4.03C22.43,5.5 22.07,8.24 20.15,10.15C18.56,11.74 16.41,12.24 14.88,11.53Z"/> </svg> </div> <h3>Food Guide</h3> <div class="menu-description"> <p>Discover local food treasures with our curated food tours and reserve tables at authentic local eateries.</p> <a href="#">Explore culinary options</a> </div> </div> </div> <div class="recent-searches"> <h2>Recent Wanderings</h2> <div class="search-items"> <div class="search-item"> <div class="menu-dots"> <div class="menu-dot"></div> <div class="menu-dot"></div> <div class="menu-dot"></div> </div> <h4>Kyoto, Japan</h4> <p>Apr 12-18 · Culture</p> </div> <div class="search-item"> <div class="menu-dots"> <div class="menu-dot"></div> <div class="menu-dot"></div> <div class="menu-dot"></div> </div> <h4>Amalfi Coast</h4> <p>Jun 3-9 · Coastal</p> </div> <div class="search-item"> <div class="menu-dots"> <div class="menu-dot"></div> <div class="menu-dot"></div> <div class="menu-dot"></div> </div> <h4>Marrakech</h4> <p>Sep 21-28 · Market</p> </div> <div class="search-item"> <div class="menu-dots"> <div class="menu-dot"></div> <div class="menu-dot"></div> <div class="menu-dot"></div> </div> <h4>Patagonia Trek</h4> <p>Nov 5-17 · Adventure</p> </div> </div> </div> <div class="fab-button"> <svg viewBox="0 0 24 24"> <path d="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z" /> </svg> </div> </div> <div class="toast" id="toast">Action in progress</div> <script> document.addEventListener('DOMContentLoaded', function() { const menuItems = document.querySelectorAll('.menu-item'); const fabButton = document.querySelector('.fab-button'); const toast = document.getElementById('toast'); const searchItems = document.querySelectorAll('.search-item'); // Menu items interaction menuItems.forEach(item => { item.addEventListener('click', function() { const type = this.getAttribute('data-type'); showToast(`Opening ${type} search...`); }); }); // FAB button interaction fabButton.addEventListener('click', function() { showToast('Starting a new adventure...'); this.style.transform = 'scale(1.1) rotate(45deg)'; setTimeout(() => { this.style.transform = 'scale(1.05)'; }, 300); }); // Search items interaction searchItems.forEach(item => { const menuDots = item.querySelector('.menu-dots'); if (menuDots) { menuDots.addEventListener('click', function(e) { e.stopPropagation(); showToast('Opening search options...'); }); } item.addEventListener('click', function() { showToast('Resuming your search...'); }); }); // Show toast message function showToast(message) { toast.textContent = message; toast.classList.add('show'); setTimeout(() => { toast.classList.remove('show'); }, 2500); } // Add dotted background effect function createDottedBackground() { const iconContainers = document.querySelectorAll('.icon-container'); iconContainers.forEach(container => { const colorClass = Array.from(container.classList).find(cls => cls.includes('-icon')); if (colorClass) { container.style.position = 'relative'; container.style.overflow = 'hidden'; } }); } createDottedBackground(); // Add gentle hover animation to the entire container const container = document.querySelector('.container'); container.addEventListener('mousemove', function(e) { const xAxis = (window.innerWidth / 2 - e.pageX) / 25; const yAxis = (window.innerHeight / 2 - e.pageY) / 25; container.style.transform = `rotateY(${xAxis}deg) rotateX(${yAxis}deg)`; }); container.addEventListener('mouseenter', function() { container.style.transition = 'none'; }); container.addEventListener('mouseleave', function() { container.style.transition = 'transform 0.5s ease'; container.style.transform = 'rotateY(0deg) rotateX(0deg)'; }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>TaskDot Sidebar</title> <style> :root { --primary: #6366F1; --primary-hover: #4F46E5; --secondary: #0ea5e9; --bg-light: #f9fafb; --bg-dark: #1f2937; --text-dark: #1f2937; --text-light: #f9fafb; --gray-100: #f3f4f6; --gray-200: #e5e7eb; --gray-300: #d1d5db; --gray-400: #9ca3af; --gray-500: #6b7280; --text-menu: #4b5563; --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; } body { background-color: var(--bg-light); height: 100vh; display: flex; justify-content: center; align-items: center; overflow: hidden; } .container { width: 700px; height: 600px; background-color: white; border-radius: 16px; box-shadow: var(--shadow-lg); display: flex; position: relative; overflow: hidden; } .sidebar { width: 80px; background-color: white; border-right: 1px solid var(--gray-200); padding: 24px 0; display: flex; flex-direction: column; align-items: center; transition: width 0.3s ease; position: relative; z-index: 10; } .sidebar.expanded { width: 220px; } .toggle-btn { position: absolute; right: -12px; top: 20px; width: 24px; height: 24px; background-color: var(--primary); border-radius: 50%; display: flex; justify-content: center; align-items: center; cursor: pointer; box-shadow: var(--shadow-md); transition: all 0.2s ease; z-index: 5; } .toggle-btn:hover { transform: scale(1.1); } .toggle-btn::before, .toggle-btn::after { content: ''; position: absolute; width: 2px; height: 10px; background-color: white; transition: transform 0.3s ease; } .toggle-btn::before { transform: rotate(45deg); } .toggle-btn::after { transform: rotate(-45deg); } .sidebar.expanded .toggle-btn::before { transform: rotate(-45deg); } .sidebar.expanded .toggle-btn::after { transform: rotate(45deg); } .logo { margin-bottom: 40px; width: 40px; height: 40px; display: flex; align-items: center; position: relative; } .logo-text { white-space: nowrap; overflow: hidden; opacity: 0; transition: opacity 0.3s ease; font-weight: 700; font-size: 18px; color: var(--primary); position: absolute; left: 50px; } .sidebar.expanded .logo-text { opacity: 1; } .nav-item { position: relative; width: 100%; display: flex; justify-content: center; align-items: center; margin-bottom: 16px; cursor: pointer; transition: all 0.3s ease; } .nav-item:hover .dot-icon { transform: scale(1.1); } .dot-icon { width: 40px; height: 40px; border-radius: 10px; display: grid; grid-template-columns: repeat(3, 8px); grid-template-rows: repeat(3, 8px); gap: 2px; padding: 5px; background-color: var(--gray-100); transition: all 0.3s ease; position: relative; } .nav-item.active .dot-icon { background-color: var(--primary); } .nav-item:not(.active):hover .dot-icon { background-color: var(--gray-200); } .dot { width: 6px; height: 6px; border-radius: 50%; background-color: var(--text-menu); transition: all 0.2s ease; } .nav-item.active .dot { background-color: white; } .nav-text { position: absolute; left: 60px; white-space: nowrap; font-size: 15px; font-weight: 500; color: var(--text-menu); opacity: 0; transition: opacity 0.3s ease; pointer-events: none; } .nav-item.active .nav-text { color: var(--primary); font-weight: 600; } .sidebar.expanded .nav-text { opacity: 1; pointer-events: auto; } .tooltip { position: absolute; left: 90px; background-color: var(--bg-dark); color: var(--text-light); padding: 6px 12px; border-radius: 6px; font-size: 12px; opacity: 0; transform: translateX(-10px); transition: opacity 0.2s ease, transform 0.2s ease; pointer-events: none; white-space: nowrap; z-index: 10; box-shadow: var(--shadow-md); } .tooltip::before { content: ''; position: absolute; left: -5px; top: 50%; transform: translateY(-50%); border-width: 5px 5px 5px 0; border-style: solid; border-color: transparent var(--bg-dark) transparent transparent; } .nav-item:hover .tooltip { opacity: 1; transform: translateX(0px); } .sidebar.expanded .tooltip { display: none; } .main-content { flex: 1; padding: 30px; overflow-y: auto; } .header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; } .title { font-size: 24px; font-weight: 700; color: var(--text-dark); } .search-bar { position: relative; width: 100%; max-width: 320px; margin-bottom: 24px; } .search-bar input { width: 100%; padding: 12px 16px 12px 42px; border: 1px solid var(--gray-300); border-radius: 8px; background-color: var(--gray-100); font-size: 14px; outline: none; transition: all 0.2s ease; } .search-bar input:focus { border-color: var(--primary); background-color: white; box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1); } .search-icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; pointer-events: none; color: var(--gray-400); } .tasks-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; } .task-card { background-color: white; border-radius: 12px; padding: 16px; box-shadow: var(--shadow-sm); border: 1px solid var(--gray-200); cursor: pointer; transition: all 0.2s ease; position: relative; overflow: hidden; } .task-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--gray-300); } .task-card::before { content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background-color: var(--primary); opacity: 0.8; } .task-card.medium::before { background-color: #f59e0b; } .task-card.low::before { background-color: #10b981; } .task-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; } .task-title { font-size: 16px; font-weight: 600; color: var(--text-dark); margin-bottom: 8px; } .task-priority { font-size: 11px; font-weight: 500; padding: 4px 8px; border-radius: 12px; text-transform: uppercase; letter-spacing: 0.5px; } .priority-high { background-color: rgba(239, 68, 68, 0.1); color: #ef4444; } .priority-medium { background-color: rgba(245, 158, 11, 0.1); color: #f59e0b; } .priority-low { background-color: rgba(16, 185, 129, 0.1); color: #10b981; } .task-description { font-size: 13px; color: var(--gray-500); margin-bottom: 16px; line-height: 1.4; } .task-meta { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--gray-500); } .task-date { display: flex; align-items: center; gap: 4px; } .progress-dots { display: flex; gap: 4px; } .progress-dot { width: 6px; height: 6px; border-radius: 50%; background-color: var(--gray-300); } .progress-dot.filled { background-color: var(--primary); } /* Define different dot patterns for different menu items */ .nav-item[data-pattern="dashboard"] .dot-icon .dot:nth-child(1), .nav-item[data-pattern="dashboard"] .dot-icon .dot:nth-child(3), .nav-item[data-pattern="dashboard"] .dot-icon .dot:nth-child(5), .nav-item[data-pattern="dashboard"] .dot-icon .dot:nth-child(9) { opacity: 0; } .nav-item[data-pattern="tasks"] .dot-icon { grid-template-columns: repeat(3, 8px); grid-template-rows: repeat(3, 8px); } .nav-item[data-pattern="calendar"] .dot-icon .dot { opacity: 0; } .nav-item[data-pattern="calendar"] .dot-icon .dot:nth-child(2), .nav-item[data-pattern="calendar"] .dot-icon .dot:nth-child(4), .nav-item[data-pattern="calendar"] .dot-icon .dot:nth-child(5), .nav-item[data-pattern="calendar"] .dot-icon .dot:nth-child(6), .nav-item[data-pattern="calendar"] .dot-icon .dot:nth-child(8) { opacity: 1; } .nav-item[data-pattern="stats"] .dot-icon .dot:nth-child(1), .nav-item[data-pattern="stats"] .dot-icon .dot:nth-child(4), .nav-item[data-pattern="stats"] .dot-icon .dot:nth-child(7) { opacity: 0; } .nav-item[data-pattern="settings"] .dot-icon .dot:nth-child(2), .nav-item[data-pattern="settings"] .dot-icon .dot:nth-child(4), .nav-item[data-pattern="settings"] .dot-icon .dot:nth-child(6), .nav-item[data-pattern="settings"] .dot-icon .dot:nth-child(8) { opacity: 0; } /* Cool hover effect with shadow preview */ .nav-item:not(.active):hover .dot-icon::after { content: ''; position: absolute; top: 3px; left: 3px; width: calc(100% - 6px); height: calc(100% - 6px); border-radius: 8px; box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2); animation: pulse 1.5s infinite; } @keyframes pulse { 0% { opacity: 0.6; transform: scale(0.95); } 50% { opacity: 0.4; transform: scale(1.05); } 100% { opacity: 0.6; transform: scale(0.95); } } /* Responsive design */ @media (max-width: 700px) { .container { width: 100%; height: 100%; border-radius: 0; } .tasks-container { grid-template-columns: 1fr; } .sidebar.expanded { width: 200px; } } @media (max-width: 500px) { .header { flex-direction: column; align-items: flex-start; gap: 16px; } .search-bar { max-width: 100%; } } </style> </head> <body> <div class="container"> <div class="sidebar"> <div class="toggle-btn"></div> <div class="logo"> <div class="dot-icon"> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> </div> <span class="logo-text">TaskDot</span> </div> <div class="nav-item active" data-pattern="dashboard"> <div class="dot-icon"> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> </div> <span class="nav-text">Dashboard</span> <div class="tooltip">Dashboard</div> </div> <div class="nav-item" data-pattern="tasks"> <div class="dot-icon"> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> </div> <span class="nav-text">My Tasks</span> <div class="tooltip">My Tasks</div> </div> <div class="nav-item" data-pattern="calendar"> <div class="dot-icon"> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> </div> <span class="nav-text">Calendar</span> <div class="tooltip">Calendar</div> </div> <div class="nav-item" data-pattern="stats"> <div class="dot-icon"> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> </div> <span class="nav-text">Analytics</span> <div class="tooltip">Analytics</div> </div> <div class="nav-item" data-pattern="settings"> <div class="dot-icon"> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> </div> <span class="nav-text">Settings</span> <div class="tooltip">Settings</div> </div> </div> <div class="main-content"> <div class="header"> <h1 class="title">My Tasks</h1> </div> <div class="search-bar"> <svg class="search-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <circle cx="11" cy="11" r="8"></circle> <line x1="21" y1="21" x2="16.65" y2="16.65"></line> </svg> <input type="text" placeholder="Search tasks..."> </div> <div class="tasks-container"> <div class="task-card"> <div class="task-header"> <div class="task-title">Website Redesign</div> <div class="task-priority priority-high">High</div> </div> <div class="task-description">Finalize the grid-based layout for the dashboard and implement responsive breakpoints.</div> <div class="task-meta"> <div class="task-date"> <svg width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M8 2V5M16 2V5M3.5 9.09H20.5M21 8.5V17C21 20 19.5 22 16 22H8C4.5 22 3 20 3 17V8.5C3 5.5 4.5 3.5 8 3.5H16C19.5 3.5 21 5.5 21 8.5Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> </svg> Today </div> <div class="progress-dots"> <div class="progress-dot filled"></div> <div class="progress-dot filled"></div> <div class="progress-dot"></div> <div class="progress-dot"></div> </div> </div> </div> <div class="task-card medium"> <div class="task-header"> <div class="task-title">Task Sidebar Icons</div> <div class="task-priority priority-medium">Medium</div> </div> <div class="task-description">Create dotted menu icons with interactive hover effects for the navigation sidebar.</div> <div class="task-meta"> <div class="task-date"> <svg width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M8 2V5M16 2V5M3.5 9.09H20.5M21 8.5V17C21 20 19.5 22 16 22H8C4.5 22 3 20 3 17V8.5C3 5.5 4.5 3.5 8 3.5H16C19.5 3.5 21 5.5 21 8.5Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> </svg> Tomorrow </div> <div class="progress-dots"> <div class="progress-dot filled"></div> <div class="progress-dot filled"></div> <div class="progress-dot filled"></div> <div class="progress-dot"></div> </div> </div> </div> <div class="task-card low"> <div class="task-header"> <div class="task-title">Animation Polish</div> <div class="task-priority priority-low">Low</div> </div> <div class="task-description">Add subtle shadow previews on hover states for all interactive elements in the app.</div> <div class="task-meta"> <div class="task-date"> <svg width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M8 2V5M16 2V5M3.5 9.09H20.5M21 8.5V17C21 20 19.5 22 16 22H8C4.5 22 3 20 3 17V8.5C3 5.5 4.5 3.5 8 3.5H16C19.5 3.5 21 5.5 21 8.5Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> </svg> 3 days </div> <div class="progress-dots"> <div class="progress-dot filled"></div> <div class="progress-dot"></div> <div class="progress-dot"></div> <div class="progress-dot"></div> </div> </div> </div> <div class="task-card medium"> <div class="task-header"> <div class="task-title">Grid Organization</div> <div class="task-priority priority-medium">Medium</div> </div> <div class="task-description">Implement a dot-pattern grid system that visually represents task organization and dependencies.</div> <div class="task-meta"> <div class="task-date"> <svg width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M8 2V5M16 2V5M3.5 9.09H20.5M21 8.5V17C21 20 19.5 22 16 22H8C4.5 22 3 20 3 17V8.5C3 5.5 4.5 3.5 8 3.5H16C19.5 3.5 21 5.5 21 8.5Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> </svg> Next week </div> <div class="progress-dots"> <div class="progress-dot filled"></div> <div class="progress-dot filled"></div> <div class="progress-dot"></div> <div class="progress-dot"></div> </div> </div> </div> </div> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { const toggleBtn = document.querySelector('.toggle-btn'); const sidebar = document.querySelector('.sidebar'); const navItems = document.querySelectorAll('.nav-item'); // Toggle sidebar expansion toggleBtn.addEventListener('click', function() { sidebar.classList.toggle('expanded'); }); // Handle nav item click navItems.forEach(item => { item.addEventListener('click', function() { navItems.forEach(i => i.classList.remove('active')); this.classList.add('active'); // Create a ripple effect on click const ripple = document.createElement('span'); ripple.classList.add('ripple'); ripple.style.position = 'absolute'; ripple.style.borderRadius = '50%'; ripple.style.backgroundColor = 'rgba(99, 102, 241, 0.3)'; ripple.style.width = '60px'; ripple.style.height = '60px'; ripple.style.transform = 'translate(-50%, -50%)'; ripple.style.animation = 'ripple-effect 0.6s linear forwards'; this.appendChild(ripple); setTimeout(() => { ripple.remove(); }, 600); }); }); // Animate dots on first load setTimeout(() => { document.querySelectorAll('.dot').forEach(dot => { dot.style.transition = 'transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.3s ease'; dot.style.transform = 'scale(1.2)'; setTimeout(() => { dot.style.transform = 'scale(1)'; }, 300); }); }, 300); // Add hover effect for task cards with custom timing const taskCards = document.querySelectorAll('.task-card'); taskCards.forEach((card, index) => { // Staggered animation on load setTimeout(() => { card.style.opacity = '0'; card.style.transform = 'translateY(20px)'; card.style.transition = 'opacity 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1)'; setTimeout(() => { card.style.opacity = '1'; card.style.transform = 'translateY(0)'; }, 50); }, index * 100); }); // Add keyframe animation for ripple effect const style = document.createElement('style'); style.type = 'text/css'; style.innerHTML = ` @keyframes ripple-effect { 0% { width: 0; height: 0; opacity: 0.5; } 100% { width: 100px; height: 100px; 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>Health Diagnostics App Menu</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } body { display: flex; flex-direction: column; justify-content: flex-start; align-items: center; min-height: 700px; max-width: 700px; margin: 0 auto; background-color: #f9fbfe; color: #333; padding: 20px; overflow-x: hidden; } .app-header { width: 100%; padding: 15px 0; display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; } .app-title { font-size: 1.8rem; font-weight: 600; color: #2b6cb0; letter-spacing: -0.5px; } .dotted-menu { width: 48px; height: 48px; display: flex; justify-content: center; align-items: center; border-radius: 50%; cursor: pointer; position: relative; transition: all 0.3s ease; background: linear-gradient(135deg, #ebf4ff 0%, #d1e1f9 100%); box-shadow: 0 2px 10px rgba(43, 108, 176, 0.1); } .dotted-menu:hover { transform: scale(1.05); box-shadow: 0 4px 15px rgba(43, 108, 176, 0.2); } .dots { display: flex; flex-direction: column; align-items: center; gap: 4px; } .dot { width: 6px; height: 6px; border-radius: 50%; background: linear-gradient(135deg, #4299e1 0%, #2b6cb0 100%); transition: all 0.3s ease; } .menu-dropdown { position: absolute; top: 60px; right: 0; width: 220px; background: white; border-radius: 12px; box-shadow: 0 5px 25px rgba(43, 108, 176, 0.15); opacity: 0; transform: translateY(-10px); pointer-events: none; transition: all 0.3s ease; z-index: 100; overflow: hidden; } .menu-dropdown.active { opacity: 1; transform: translateY(0); pointer-events: all; } .menu-item { display: flex; align-items: center; padding: 14px 20px; cursor: pointer; transition: all 0.2s ease; position: relative; overflow: hidden; } .menu-item:hover { background-color: #ebf8ff; } .menu-item.active { background-color: #ebf8ff; } .menu-icon { width: 32px; height: 32px; display: flex; justify-content: center; align-items: center; margin-right: 12px; border-radius: 8px; transition: all 0.3s ease; position: relative; } .menu-icon-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 8px; background: linear-gradient(135deg, #ebf4ff 0%, #d1e1f9 100%); transition: all 0.3s ease; } .menu-item.active .menu-icon-bg, .menu-item:hover .menu-icon-bg { background: linear-gradient(135deg, #bfdbfe 0%, #93c5fd 100%); } .menu-icon svg { position: relative; z-index: 1; transition: all 0.3s ease; } .menu-item.active .menu-icon svg path, .menu-item:hover .menu-icon svg path { fill: #2b6cb0; } .menu-text { font-size: 0.95rem; font-weight: 500; color: #4a5568; transition: all 0.3s ease; } .menu-item.active .menu-text, .menu-item:hover .menu-text { color: #2b6cb0; } .ripple { position: absolute; border-radius: 50%; background-color: rgba(43, 108, 176, 0.1); transform: scale(0); animation: ripple 0.6s linear; pointer-events: none; } @keyframes ripple { to { transform: scale(4); opacity: 0; } } .dashboard { width: 100%; display: flex; flex-direction: column; gap: 25px; } .dashboard-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; } .welcome-text { font-size: 1.4rem; font-weight: 600; color: #2d3748; } .date-text { font-size: 0.95rem; color: #718096; } .stats-container { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; width: 100%; } .stat-card { background: white; border-radius: 16px; padding: 20px; box-shadow: 0 4px 12px rgba(43, 108, 176, 0.08); display: flex; flex-direction: column; justify-content: space-between; min-height: 160px; transition: all 0.3s ease; position: relative; overflow: hidden; } .stat-card::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 6px; background: linear-gradient(90deg, #4299e1, #3182ce); transform: translateY(-100%); transition: transform 0.3s ease; } .stat-card:hover::before { transform: translateY(0); } .stat-card:hover { transform: translateY(-5px); box-shadow: 0 8px 20px rgba(43, 108, 176, 0.12); } .stat-title { font-size: 0.9rem; color: #718096; margin-bottom: 5px; } .stat-value { font-size: 1.8rem; font-weight: 700; color: #2d3748; margin-bottom: 10px; } .heart-rate .stat-value { color: #e53e3e; } .blood-pressure .stat-value { color: #dd6b20; } .glucose .stat-value { color: #38a169; } .sleep .stat-value { color: #805ad5; } .stat-trend { display: flex; align-items: center; gap: 5px; font-size: 0.85rem; } .trend-up { color: #38a169; } .trend-down { color: #e53e3e; } .overview-section { width: 100%; margin-top: 10px; } .section-header { font-size: 1.1rem; font-weight: 600; color: #2d3748; margin-bottom: 15px; } .weekly-chart { background: white; border-radius: 16px; padding: 20px; box-shadow: 0 4px 12px rgba(43, 108, 176, 0.08); width: 100%; height: 200px; position: relative; } .chart-placeholder { width: 100%; height: 150px; background: linear-gradient(90deg, rgba(237, 242, 247, 0.8) 0%, rgba(226, 232, 240, 0.8) 50%, rgba(237, 242, 247, 0.8) 100%); border-radius: 8px; position: relative; overflow: hidden; } .chart-line { position: absolute; top: 50%; left: 0; width: 100%; height: 2px; background: linear-gradient(90deg, #4299e1, #3182ce, #2b6cb0); opacity: 0.7; } .chart-point { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: #3182ce; box-shadow: 0 0 0 4px rgba(49, 130, 206, 0.2); transform: translate(-50%, -50%); } .chart-point-1 { top: 60%; left: 10%; } .chart-point-2 { top: 40%; left: 25%; } .chart-point-3 { top: 30%; left: 40%; } .chart-point-4 { top: 50%; left: 55%; } .chart-point-5 { top: 35%; left: 70%; } .chart-point-6 { top: 20%; left: 85%; } .chart-days { display: flex; justify-content: space-between; margin-top: 10px; } .day { font-size: 0.8rem; color: #718096; } .screen { display: none; width: 100%; flex-direction: column; gap: 20px; } .screen.active { display: flex; } .back-button { display: flex; align-items: center; gap: 8px; padding: 10px; background: none; border: none; cursor: pointer; font-size: 1rem; font-weight: 500; color: #4a5568; transition: all 0.2s ease; margin-bottom: 10px; } .back-button:hover { color: #2b6cb0; } .detail-card { background: white; border-radius: 16px; padding: 25px; box-shadow: 0 4px 15px rgba(43, 108, 176, 0.08); margin-bottom: 20px; } .detail-title { font-size: 1.2rem; font-weight: 600; color: #2d3748; margin-bottom: 20px; } .detail-subtitle { font-size: 1rem; font-weight: 500; color: #4a5568; margin-bottom: 15px; } .detail-description { font-size: 0.95rem; line-height: 1.6; color: #718096; margin-bottom: 20px; } .data-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid #e2e8f0; } .data-row:last-child { border-bottom: none; } .data-label { font-size: 0.9rem; color: #718096; } .data-value { font-size: 0.95rem; font-weight: 500; color: #2d3748; } .critical { color: #e53e3e; } .warning { color: #dd6b20; } .good { color: #38a169; } .action-button { background: linear-gradient(135deg, #4299e1 0%, #3182ce 100%); color: white; border: none; border-radius: 8px; padding: 12px 20px; font-size: 0.95rem; font-weight: 500; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 4px 10px rgba(49, 130, 206, 0.2); margin-top: 10px; width: 100%; } .action-button:hover { transform: translateY(-2px); box-shadow: 0 6px 15px rgba(49, 130, 206, 0.25); } .action-button:active { transform: translateY(0); } .notification-dot { position: absolute; top: 0; right: 0; width: 8px; height: 8px; background-color: #e53e3e; border-radius: 50%; border: 2px solid white; } .animate-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } @media (max-width: 500px) { .stats-container { grid-template-columns: 1fr; } .stat-card { min-height: 130px; } .app-title { font-size: 1.5rem; } .welcome-text { font-size:: 1.2rem; } } </style> </head> <body> <div class="app-header"> <h1 class="app-title">VitalTrack</h1> <div class="dotted-menu" id="menuButton"> <div class="dots"> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> </div> <div class="menu-dropdown" id="menuDropdown"> <div class="menu-item active" data-screen="dashboard"> <div class="menu-icon"> <div class="menu-icon-bg"></div> <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M9 22V12H15V22M3 9L12 2L21 9V20C21 20.5304 20.7893 21.0391 20.4142 21.4142C20.0391 21.7893 19.5304 22 19 22H5C4.46957 22 3.96086 21.7893 3.58579 21.4142C3.21071 21.0391 3 20.5304 3 20V9Z" stroke="#4299E1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </div> <span class="menu-text">Dashboard</span> </div> <div class="menu-item" data-screen="heartRate"> <div class="menu-icon"> <div class="menu-icon-bg"></div> <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M20.84 4.61C20.3292 4.099 19.7228 3.69364 19.0554 3.41708C18.388 3.14052 17.6726 2.99817 16.95 2.99817C16.2274 2.99817 15.512 3.14052 14.8446 3.41708C14.1772 3.69364 13.5708 4.099 13.06 4.61L12 5.67L10.94 4.61C9.9083 3.57831 8.50903 2.99871 7.05 2.99871C5.59096 2.99871 4.19169 3.57831 3.16 4.61C2.1283 5.64169 1.54871 7.04097 1.54871 8.5C1.54871 9.95903 2.1283 11.3583 3.16 12.39L4.22 13.45L12 21.23L19.78 13.45L20.84 12.39C21.351 11.8792 21.7563 11.2728 22.0329 10.6054C22.3095 9.93801 22.4518 9.22262 22.4518 8.5C22.4518 7.77738 22.3095 7.06199 22.0329 6.3946C21.7563 5.72721 21.351 5.12076 20.84 4.61Z" stroke="#4299E1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </div> <span class="menu-text">Heart Rate</span> </div> <div class="menu-item" data-screen="bloodPressure"> <div class="menu-icon"> <div class="menu-icon-bg"></div> <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 2.69L17.66 8.35C18.7793 9.46953 19.5413 10.8901 19.8509 12.4301C20.1604 13.9701 20.0035 15.5633 19.3982 17.0079C18.7929 18.4524 17.7679 19.6733 16.4603 20.5078C15.1526 21.3423 13.6253 21.7517 12.07 21.6833C10.5147 21.6148 9.0307 21.0717 7.80333 20.1283C6.57596 19.1849 5.6585 17.8862 5.16385 16.4164C4.6692 14.9467 4.6187 13.3717 5.01777 11.8772C5.41684 10.3827 6.2487 9.03894 7.41 8.01L12 2.69Z" stroke="#4299E1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </div> <span class="menu-text">Blood Pressure</span> </div> <div class="menu-item" data-screen="glucose"> <div class="menu-icon"> <div class="menu-icon-bg"></div> <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke="#4299E1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M9.09 9C9.57612 8.37502 10.2405 7.90961 11 7.66C11.7595 7.41039 12.5766 7.39352 13.3456 7.61144C14.1145 7.82935 14.7964 8.2705 15.3089 8.88034C15.8215 9.49018 16.1435 10.2377 16.24 11.03C16.28 11.62 16.07 12.26 15.7 12.87C15.5 13.22 15.28 13.56 15.09 13.9C14.5 14.9 14.24 15.77 14.03 16.87L14 17" stroke="#4299E1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M12 17H12.01" stroke="#4299E1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </div> <span class="menu-text">Glucose</span> </div> <div class="menu-item" data-screen="sleep"> <div class="menu-icon"> <div class="menu-icon-bg"></div> <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 19C15.866 19 19 15.866 19 12C19 8.13401 15.866 5 12 5C8.13401 5 5 8.13401 5 12C5 15.866 8.13401 19 12 19Z" stroke="#4299E1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M12 9V12L14 14" stroke="#4299E1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </div> <span class="menu-text">Sleep</span> <div class="notification-dot"></div> </div> </div> </div> </div> <div class="screen active" id="dashboard"> <div class="dashboard"> <div class="dashboard-header"> <div> <h2 class="welcome-text">Hello, Sarah</h2> <p class="date-text">Tuesday, May 16, 2023</p> </div> </div> <div class="stats-container"> <div class="stat-card heart-rate"> <div> <p class="stat-title">Heart Rate</p> <h3 class="stat-value">72 bpm</h3> </div> <div class="stat-trend"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M7 17L17 7" stroke="#38A169" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M7 7H17V17" stroke="#38A169" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> <span class="trend-up">Normal range</span> </div> </div> <div class="stat-card blood-pressure"> <div> <p class="stat-title">Blood Pressure</p> <h3 class="stat-value">128/85</h3> </div> <div class="stat-trend"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M7 7L17 17" stroke="#E53E3E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M17 7V17H7" stroke="#E53E3E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> <span class="trend-down">Slightly elevated</span> </div> </div> <div class="stat-card glucose"> <div> <p class="stat-title">Blood Glucose</p> <h3 class="stat-value">102 mg/dL</h3> </div> <div class="stat-trend"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M7 17L17 7" stroke="#38A169" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M7 7H17V17" stroke="#38A169" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> <span class="trend-up">Normal fasting</span> </div> </div> <div class="stat-card sleep"> <div> <p class="stat-title">Sleep Duration</p> <h3 class="stat-value">6.5 hrs</h3> </div> <div class="stat-trend"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M7 7L17 17" stroke="#E53E3E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M17 7V17H7" stroke="#E53E3E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> <span class="trend-down">Below target</span> </div> </div> </div> <div class="overview-section"> <h3 class="section-header">Weekly Overview</h3> <div class="weekly-chart"> <div class="chart-placeholder"> <div class="chart-line"></div> <div class="chart-point chart-point-1"></div> <div class="chart-point chart-point-2"></div> <div class="chart-point chart-point-3"></div> <div class="chart-point chart-point-4"></div> <div class="chart-point chart-point-5"></div> <div class="chart-point chart-point-6"></div> </div> <div class="chart-days"> <span class="day">Wed</span> <span class="day">Thu</span> <span class="day">Fri</span> <span class="day">Sat</span> <span class="day">Sun</span> <span class="day">Mon</span> <span class="day">Tue</span> </div> </div> </div> </div> </div> <div class="screen" id="heartRate"> <button class="back-button" id="backToHome"> <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M19 12H5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M12 19L5 12L12 5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> Back to Dashboard </button> <div class="detail-card"> <h2 class="detail-title">Heart Rate Monitor</h2> <p class="detail-description">Your heart rate is an important indicator of your cardiovascular health. We track your resting and active heart rates to provide insights into your overall fitness level.</p> <div class="data-row"> <span class="data-label">Current Heart Rate</span> <span class="data-value good">72 bpm</span> </div> <div class="data-row"> <span class="data-label">Resting Average (7 days)</span> <span class="data-value good">68 bpm</span> </div> <div class="data-row"> <span class="data-label">Active Average (7 days)</span> <span class="data-value good">132 bpm</span> </div> <div class="data-row"> <span class="data-label">Peak Rate (7 days)</span> <span class="data-value">154 bpm</span> </div> <button class="action-button">View Detailed Analysis</button> </div> </div> <div class="screen" id="bloodPressure"> <button class="back-button" id="backToHome2"> <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M19 12H5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M12 19L5 12L12 5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> Back to Dashboard </button> <div class="detail-card"> <h2 class="detail-title">Blood Pressure Monitor</h2> <p class="detail-description">Your blood pressure reading consists of two numbers: systolic (top) and diastolic (bottom). Regular monitoring helps detect hypertension early.</p> <div class="data-row"> <span class="data-label">Current Reading</span> <span class="data-value warning">128/85 mmHg</span> </div> <div class="data-row"> <span class="data-label">Morning Average (7 days)</span> <span class="data-value warning">130/84 mmHg</span> </div> <div class="data-row"> <span class="data-label">Evening Average (7 days)</span> <span class="data-value warning">126/82 mmHg</span> </div> <div class="data-row"> <span class="data-label">Status</span> <span class="data-value warning">Stage 1 Hypertension</span> </div> <button class="action-button">Set Measurement Reminder</button> </div> </div> <div class="screen" id="glucose"> <button class="back-button" id="backToHome3"> <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M19 12H5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M12 19L5 12L12 5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> Back to Dashboard </button> <div class="detail-card"> <h2 class="detail-title">Blood Glucose Tracker</h2> <p class="detail-description">Monitoring your glucose levels is crucial for managing diabetes or identifying prediabetic conditions. Our app helps you track patterns in your readings.</p> <div class="data-row"> <span class="data-label">Current Fasting Level</span> <span class="data-value good">102 mg/dL</span> </div> <div class="data-row"> <span class="data-label">After Meal Average (7 days)</span> <span class="data-value good">138 mg/dL</span> </div> <div class="data-row"> <span class="data-label">Lowest Reading (7 days)</span> <span class="data-value good">96 mg/dL</span> </div> <div class="data-row"> <span class="data-label">Highest Reading (7 days)</span> <span class="data-value warning">145 mg/dL</span> </div> <button class="action-button">Log New Reading</button> </div> </div> <div class="screen" id="sleep"> <button class="back-button" id="backToHome4"> <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M19 12H5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M12 19L5 12L12 5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> Back to Dashboard </button> <div class="detail-card"> <h2 class="detail-title">Sleep Insights</h2> <h3 class="detail-subtitle animate-pulse">New Sleep Report Available</h3> <p class="detail-description">Quality sleep is essential for overall health. Your recent sleep patterns indicate some areas for improvement. Here's a breakdown of your sleep metrics:</p> <div class="data-row"> <span class="data-label">Last Night</span> <span class="data-value warning">6.5 hours</span> </div> <div class="data-row"> <span class="data-label">Weekly Average</span> <span class="data-value warning">6.2 hours</span> </div> <div class="data-row"> <span class="data-label">Deep Sleep</span> <span class="data-value warning">18% (Target: 25%)</span> </div> <div class="data-row"> <span class="data-label">Sleep Interruptions</span> <span class="data-value">3 times/night</span> </div> <button class="action-button">View Sleep Improvement Plan</button> </div> </div> <script> // Menu toggle functionality const menuButton = document.getElementById('menuButton'); const menuDropdown = document.getElementById('menuDropdown'); const menuItems = document.querySelectorAll('.menu-item'); const screens = document.querySelectorAll('.screen'); const backButtons = document.querySelectorAll('[id^="backToHome"]'); // Ripple effect function 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('ripple'); const ripple = button.querySelector('.ripple'); if (ripple) { ripple.remove(); } button.appendChild(circle); } // Toggle menu dropdown menuButton.addEventListener('click', (e) => { createRipple(e); menuDropdown.classList.toggle('active'); // Animate dots when opening/closing menu const dots = document.querySelectorAll('.dot'); dots.forEach((dot, index) => { setTimeout(() => { dot.style.transform = menuDropdown.classList.contains('active') ? 'scale(1.2)' : 'scale(1)'; setTimeout(() => { dot.style.transform = 'scale(1)'; }, 150); }, index * 50); }); });
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>VR Interface Navigation</title> <style> :root { --primary-glow: rgb(80, 200, 255); --secondary-glow: rgb(170, 80, 255); --tertiary-glow: rgb(255, 90, 200); --quaternary-glow: rgb(80, 255, 170); --bg-color: #090a1d; --menu-bg: rgba(10, 15, 40, 0.7); } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } body { background-color: var(--bg-color); color: white; display: flex; justify-content: center; align-items: center; width: 100%; height: 100vh; overflow: hidden; perspective: 1000px; } .container { width: 100%; max-width: 700px; height: 700px; display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; } .vr-interface { width: 90%; height: 90%; position: relative; transform-style: preserve-3d; display: flex; justify-content: center; align-items: center; } .menu-container { width: 500px; height: 500px; position: relative; transform-style: preserve-3d; transform: rotateX(25deg); transition: transform 0.5s ease; } .menu-ring { position: absolute; width: 100%; height: 100%; border-radius: 50%; display: flex; justify-content: center; align-items: center; transform-style: preserve-3d; border: 1px solid rgba(255, 255, 255, 0.1); animation: ring-rotate 60s linear infinite; } @keyframes ring-rotate { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .menu-item { position: absolute; width: 80px; height: 80px; border-radius: 50%; background: var(--menu-bg); backdrop-filter: blur(10px); display: flex; flex-direction: column; justify-content: center; align-items: center; cursor: pointer; transform-style: preserve-3d; transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); box-shadow: 0 0 20px rgba(0, 0, 0, 0.3); overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.1); transform: translateZ(20px); } .menu-item:hover { transform: translateZ(40px) scale(1.15); z-index: 10; } .menu-item.active { transform: translateZ(60px) scale(1.3); z-index: 20; } .dot-icon { position: relative; width: 40px; height: 40px; margin-bottom: 5px; } .dot { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: white; transition: all 0.3s ease; } .menu-item:hover .dot { transform: scale(1.5); filter: drop-shadow(0 0 5px currentColor); } .menu-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; transition: all 0.3s ease; opacity: 0.8; } .menu-item:hover .menu-label { opacity: 1; transform: scale(1.1); } .navigation .dot { color: var(--primary-glow); box-shadow: 0 0 10px var(--primary-glow), 0 0 20px var(--primary-glow); } .environments .dot { color: var(--secondary-glow); box-shadow: 0 0 10px var(--secondary-glow), 0 0 20px var(--secondary-glow); } .tools .dot { color: var(--tertiary-glow); box-shadow: 0 0 10px var(--tertiary-glow), 0 0 20px var(--tertiary-glow); } .settings .dot { color: var(--quaternary-glow); box-shadow: 0 0 10px var(--quaternary-glow), 0 0 20px var(--quaternary-glow); } .social .dot { color: rgb(255, 180, 80); box-shadow: 0 0 10px rgb(255, 180, 80), 0 0 20px rgb(255, 180, 80); } .notifications .dot { color: rgb(255, 100, 100); box-shadow: 0 0 10px rgb(255, 100, 100), 0 0 20px rgb(255, 100, 100); } .central-hub { position: absolute; width: 140px; height: 140px; border-radius: 50%; background: var(--menu-bg); backdrop-filter: blur(15px); display: flex; justify-content: center; align-items: center; transform-style: preserve-3d; transform: translateZ(60px); box-shadow: 0 0 30px rgba(0, 0, 0, 0.5), 0 0 60px rgba(255, 255, 255, 0.1) inset; border: 1px solid rgba(255, 255, 255, 0.15); cursor: pointer; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); z-index: 30; } .central-hub:hover { transform: translateZ(80px) scale(1.1); } .central-hub-content { text-align: center; } .central-hub-icon { width: 60px; height: 60px; border-radius: 50%; background: rgba(255, 255, 255, 0.05); margin: 0 auto 10px; position: relative; overflow: hidden; } .central-hub-icon::before { content: ''; position: absolute; width: 100%; height: 100%; background: conic-gradient( var(--primary-glow), var(--secondary-glow), var(--tertiary-glow), var(--quaternary-glow), var(--primary-glow) ); animation: rotate 4s linear infinite; filter: blur(10px); opacity: 0.7; } .central-hub-icon::after { content: ''; position: absolute; top: 5px; left: 5px; right: 5px; bottom: 5px; background: var(--bg-color); border-radius: 50%; z-index: 1; } .hub-dots { position: relative; z-index: 2; width: 100%; height: 100%; } .hub-dot { position: absolute; width: 4px; height: 4px; background: white; border-radius: 50%; animation: pulse 2s infinite alternate; } @keyframes pulse { 0% { transform: scale(1); opacity: 0.5; } 100% { transform: scale(1.5); opacity: 1; } } @keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .context-info { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); width: 80%; text-align: center; font-size: 16px; color: rgba(255, 255, 255, 0.7); padding: 15px; border-radius: 10px; background: rgba(10, 15, 40, 0.4); backdrop-filter: blur(10px); opacity: 0; transition: opacity 0.3s ease; border: 1px solid rgba(255, 255, 255, 0.1); } .bg-elements { position: absolute; width: 100%; height: 100%; overflow: hidden; z-index: -1; } .bg-dot { position: absolute; width: 2px; height: 2px; background: white; border-radius: 50%; opacity: 0.3; } .parallax-grid { position: absolute; width: 200%; height: 200%; top: -50%; left: -50%; transform-style: preserve-3d; pointer-events: none; } .grid-line { position: absolute; background: rgba(255, 255, 255, 0.1); } .horizontal { width: 100%; height: 1px; } .vertical { width: 1px; height: 100%; } .selection-indicator { position: absolute; top: 20px; width: 80%; text-align: center; font-size: 18px; font-weight: 600; letter-spacing: 1px; color: white; opacity: 0; transform: translateY(-20px); transition: all 0.3s ease; } @media (max-width: 600px) { .menu-container { width: 380px; height: 380px; } .menu-item { width: 60px; height: 60px; } .dot-icon { width: 30px; height: 30px; } .menu-label { font-size: 8px; } .central-hub { width: 100px; height: 100px; } .central-hub-icon { width: 40px; height: 40px; } } </style> </head> <body> <div class="container"> <div class="vr-interface"> <div class="bg-elements"></div> <div class="parallax-grid" id="parallaxGrid"></div> <div class="selection-indicator" id="selectionIndicator">Exploring Spatial Navigation</div> <div class="menu-container" id="menuContainer"> <div class="menu-ring"> <div class="menu-item navigation" data-pos="0" data-desc="Navigate between virtual spaces with intuitive waypoint controls"> <div class="dot-icon" id="navIcon"></div> <div class="menu-label">Navigate</div> </div> <div class="menu-item environments" data-pos="1" data-desc="Switch between immersive environments with real-time biome transitions"> <div class="dot-icon" id="envIcon"></div> <div class="menu-label">Environments</div> </div> <div class="menu-item tools" data-pos="2" data-desc="Access creative toolsets for spatial manipulation and object interaction"> <div class="dot-icon" id="toolsIcon"></div> <div class="menu-label">Tools</div> </div> <div class="menu-item settings" data-pos="3" data-desc="Customize sensory parameters and interface responsiveness"> <div class="dot-icon" id="settingsIcon"></div> <div class="menu-label">Settings</div> </div> <div class="menu-item social" data-pos="4" data-desc="Connect with other spatial explorers in shared dimensional spaces"> <div class="dot-icon" id="socialIcon"></div> <div class="menu-label">Social</div> </div> <div class="menu-item notifications" data-pos="5" data-desc="View spatial alerts and dimensional notifications"> <div class="dot-icon" id="notifIcon"></div> <div class="menu-label">Alerts</div> </div> </div> <div class="central-hub"> <div class="central-hub-content"> <div class="central-hub-icon"> <div class="hub-dots" id="hubDots"></div> </div> <div class="central-hub-label">NeoSphere</div> </div> </div> </div> <div class="context-info" id="contextInfo">Select a function to explore spatial navigation options</div> </div> </div> <script> document.addEventListener('DOMContentLoaded', () => { // Create dot patterns for the icons createDotPattern('navIcon', 'navigation', 16, 'compass'); createDotPattern('envIcon', 'environments', 16, 'landscape'); createDotPattern('toolsIcon', 'tools', 16, 'tools'); createDotPattern('settingsIcon', 'settings', 16, 'gear'); createDotPattern('socialIcon', 'social', 16, 'users'); createDotPattern('notifIcon', 'notifications', 16, 'bell'); // Create hub dots createHubDots(); // Create background elements createBackgroundElements(); // Create parallax grid createParallaxGrid(); // Menu items interaction const menuItems = document.querySelectorAll('.menu-item'); const contextInfo = document.getElementById('contextInfo'); const selectionIndicator = document.getElementById('selectionIndicator'); const menuContainer = document.getElementById('menuContainer'); // Position menu items in a circle positionMenuItems(); // Add event listeners to menu items menuItems.forEach(item => { item.addEventListener('mouseenter', () => { contextInfo.textContent = item.dataset.desc; contextInfo.style.opacity = '1'; const className = item.classList[1]; if (className) { selectionIndicator.textContent = toTitleCase(className); selectionIndicator.style.opacity = '1'; selectionIndicator.style.transform = 'translateY(0)'; } }); item.addEventListener('mouseleave', () => { contextInfo.style.opacity = '0'; selectionIndicator.style.opacity = '0'; selectionIndicator.style.transform = 'translateY(-20px)'; }); item.addEventListener('click', () => { menuItems.forEach(i => i.classList.remove('active')); item.classList.add('active'); }); }); // Mouse parallax effect document.addEventListener('mousemove', (e) => { const xAxis = (window.innerWidth / 2 - e.pageX) / 25; const yAxis = (window.innerHeight / 2 - e.pageY) / 25; menuContainer.style.transform = `rotateX(${25 + yAxis}deg) rotateY(${xAxis}deg)`; // Move parallax grid const parallaxGrid = document.getElementById('parallaxGrid'); parallaxGrid.style.transform = `translateX(${xAxis * 2}px) translateY(${yAxis * 2}px)`; }); // Central hub interaction const centralHub = document.querySelector('.central-hub'); centralHub.addEventListener('mouseenter', () => { contextInfo.textContent = "NeoSphere Control Hub - Access dimension-shifting capabilities and core spatial functions"; contextInfo.style.opacity = '1'; selectionIndicator.textContent = "NeoSphere Control Hub"; selectionIndicator.style.opacity = '1'; selectionIndicator.style.transform = 'translateY(0)'; }); centralHub.addEventListener('mouseleave', () => { contextInfo.style.opacity = '0'; selectionIndicator.style.opacity = '0'; selectionIndicator.style.transform = 'translateY(-20px)'; }); centralHub.addEventListener('click', () => { menuItems.forEach(item => item.classList.remove('active')); animateHubActivation(); }); }); function createDotPattern(elementId, className, numDots, pattern) { const element = document.getElementById(elementId); // Clear any existing dots element.innerHTML = ''; // Different dot patterns based on icon type let positions = []; switch(pattern) { case 'compass': // Navigation - compass-like pattern positions = [ {x: 50, y: 10}, {x: 90, y: 50}, {x: 50, y: 90}, {x: 10, y: 50}, {x: 30, y: 30}, {x: 70, y: 30}, {x: 70, y: 70}, {x: 30, y: 70}, {x: 50, y: 50}, {x: 40, y: 50}, {x: 60, y: 50}, {x: 50, y: 40}, {x: 50, y: 60}, {x: 45, y: 45}, {x: 55, y: 45}, {x: 55, y: 55}, {x: 45, y: 55} ]; break; case 'landscape': // Environments - landscape-like pattern positions = [ {x: 10, y: 70}, {x: 20, y: 60}, {x: 30, y: 65}, {x: 40, y: 50}, {x: 50, y: 40}, {x: 60, y: 55}, {x: 70, y: 30}, {x: 80, y: 45}, {x: 90, y: 65}, {x: 20, y: 80}, {x: 40, y: 75}, {x: 60, y: 80}, {x: 80, y: 75}, {x: 50, y: 70}, {x: 30, y: 40}, {x: 70, y: 50} ]; break; case 'tools': // Tools - tool-like pattern positions = [ {x: 30, y: 20}, {x: 40, y: 20}, {x: 50, y: 20}, {x: 60, y: 20}, {x: 70, y: 20}, {x: 40, y: 30}, {x: 60, y: 30}, {x: 30, y: 40}, {x: 50, y: 40}, {x: 70, y: 40}, {x: 50, y: 50}, {x: 40, y: 60}, {x: 60, y: 60}, {x: 30, y: 70}, {x: 50, y: 70}, {x: 70, y: 70}, {x: 40, y: 80}, {x: 60, y: 80} ]; break; case 'gear': // Settings - gear-like pattern let radius = 15; let centerX = 50; let centerY = 50; positions = []; // Inner circle for (let i = 0; i < 8; i++) { let angle = (i / 8) * Math.PI * 2; positions.push({ x: centerX + Math.cos(angle) * radius, y: centerY + Math.sin(angle) * radius }); } // Outer circle radius = 25; for (let i = 0; i < 8; i++) { let angle = (i / 8) * Math.PI * 2; positions.push({ x: centerX + Math.cos(angle) * radius, y: centerY + Math.sin(angle) * radius }); } // Center dot positions.push({x: centerX, y: centerY}); break; case 'users': // Social - people-like pattern positions = [ {x: 30, y: 30}, {x: 70, y: 30}, // Two heads {x: 30, y: 40}, {x: 70, y: 40}, {x: 20, y: 55}, {x: 40, y: 55}, // Left body {x: 30, y: 55}, {x: 60, y: 55}, {x: 80, y: 55}, // Right body {x: 70, y: 55}, {x: 50, y: 70}, // Center person {x: 50, y: 60}, {x: 40, y: 80}, {x: 50, y: 80}, {x: 60, y: 80}, {x: 45, y: 70}, {x: 55, y: 70} ]; break; case 'bell': // Notifications - bell-like pattern positions = [ {x: 50, y: 20}, {x: 40, y: 25}, {x: 60, y: 25}, {x: 35, y: 35}, {x: 65, y: 35}, {x: 30, y: 45}, {x: 70, y: 45}, {x: 30, y: 55}, {x: 70, y: 55}, {x: 35, y: 65}, {x: 65, y: 65}, {x: 40, y: 75}, {x: 60, y: 75}, {x: 50, y: 80}, {x: 45, y: 65}, {x: 55, y: 65}, {x: 50, y: 60} ]; break; default: // Random dots as fallback for (let i = 0; i < numDots; i++) { positions.push({ x: Math.random() * 80 + 10, y: Math.random() * 80 + 10 }); } } // Create the dots with the defined positions positions.forEach((pos, index) => { const dot = document.createElement('div'); dot.className = `dot ${className}-dot`; dot.style.left = `${pos.x}%`; dot.style.top = `${pos.y}%`; dot.style.animationDelay = `${index * 0.05}s`; element.appendChild(dot); }); } function createHubDots() { const hubDots = document.getElementById('hubDots'); const numDots = 20; const colors = [ 'var(--primary-glow)', 'var(--secondary-glow)', 'var(--tertiary-glow)', 'var(--quaternary-glow)' ]; for (let i = 0; i < numDots; i++) { const dot = document.createElement('div'); dot.className = 'hub-dot'; // Create a spiral pattern const angle = 0.5 * i; const radius = 1 + (i / numDots) * 20; const x = 50 + radius * Math.cos(angle); const y = 50 + radius * Math.sin(angle); dot.style.left = `${x}%`; dot.style.top = `${y}%`; dot.style.backgroundColor = colors[i % colors.length]; dot.style.animationDelay = `${i * 0.1}s`; hubDots.appendChild(dot); } } function createBackgroundElements() { const bgElements = document.querySelector('.bg-elements'); const numDots = 100; for (let i = 0; i < numDots; i++) { const dot = document.createElement('div'); dot.className = 'bg-dot'; dot.style.left = `${Math.random() * 100}%`; dot.style.top = `${Math.random() * 100}%`; dot.style.opacity = Math.random() * 0.5; dot.style.width = `${Math.random() * 3 + 1}px`; dot.style.height = dot.style.width; bgElements.appendChild(dot); } } function createParallaxGrid() { const grid = document.getElementById('parallaxGrid'); const gridLines = 20; // Create horizontal lines for (let i = 0; i <= gridLines; i++) { const line = document.createElement('div'); line.className = 'grid-line horizontal'; line.style.top = `${i * (100 / gridLines)}%`; grid.appendChild(line); } // Create vertical lines for (let i = 0; i <= gridLines; i++) { const line = document.createElement('div'); line.className = 'grid-line vertical'; line.style.left = `${i * (100 / gridLines)}%`; grid.appendChild(line); } } function positionMenuItems() { const menuItems = document.querySelectorAll('.menu-item'); const radius = 190; // Distance from center menuItems.forEach((item, index) => { const angle = (index / menuItems.length) * Math.PI * 2; const x = Math.cos(angle) * radius; const y = Math.sin(angle) * radius; item.style.transform = `translate(${x}px, ${y}px) translateZ(20px)`; }); } function animateHubActivation() { const hub = document.querySelector('.central-hub'); const hubDots = document.querySelectorAll('.hub-dot'); // Animate hub expansion hub.style.transform = 'translateZ(100px) scale(1.2)'; // Animate dots hubDots.forEach(dot => { dot.style.animationDuration = '0.5s'; }); // Reset after animation setTimeout(() => { hub.style.transform = 'translateZ(60px) scale(1)'; hubDots.forEach(dot => { dot.style.animationDuration = '2s'; }); }, 1000); } function toTitleCase(str) { return str.charAt(0).toUpperCase() + str.slice(1); } </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Rajdhani', 'Orbitron', sans-serif; } :root { --neon-pink: #ff2a6d; --neon-blue: #05d9e8; --neon-purple: #ae00ff; --neon-green: #01ffc3; --dark-bg: #0d1117; --darker-bg: #010915; } body { background-color: var(--dark-bg); color: white; height: 700px; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; position: relative; } .container { width: 700px; max-width: 100%; height: 700px; padding: 20px; display: flex; flex-direction: column; justify-content: center; position: relative; } .grid-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: radial-gradient(var(--neon-blue) 1px, transparent 1px); background-size: 20px 20px; opacity: 0.1; z-index: 0; pointer-events: none; } .title { text-align: center; margin-bottom: 40px; font-size: 2.5rem; text-transform: uppercase; letter-spacing: 3px; position: relative; z-index: 1; color: white; text-shadow: 0 0 10px var(--neon-blue), 0 0 20px var(--neon-blue); } .title span { position: relative; display: inline-block; } .title span::after { content: attr(data-text); position: absolute; left: 0; top: 0; color: var(--neon-pink); transform: translateX(5px); opacity: 0.7; z-index: -1; } .menu-container { display: flex; justify-content: center; flex-wrap: wrap; gap: 30px; position: relative; z-index: 2; } .menu-item { width: 130px; height: 130px; position: relative; cursor: pointer; perspective: 1000px; transition: transform 0.3s ease-out; } .menu-item:hover { transform: scale(1.05); } .menu-item.active .dot-pattern { animation: pulse 2s infinite; } .menu-icon { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; transition: transform 0.3s ease; transform-style: preserve-3d; } .menu-item:hover .menu-icon { transform: translateZ(20px); } .dot-pattern { position: absolute; width: 100%; height: 100%; background: var(--darker-bg); border-radius: 15px; overflow: hidden; box-shadow: 0 0 15px rgba(5, 217, 232, 0.3); transition: all 0.3s ease; } .menu-item:nth-child(1) .dot-pattern { box-shadow: 0 0 15px rgba(255, 42, 109, 0.3); } .menu-item:nth-child(2) .dot-pattern { box-shadow: 0 0 15px rgba(5, 217, 232, 0.3); } .menu-item:nth-child(3) .dot-pattern { box-shadow: 0 0 15px rgba(174, 0, 255, 0.3); } .menu-item:nth-child(4) .dot-pattern { box-shadow: 0 0 15px rgba(1, 255, 195, 0.3); } .dot-pattern::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: radial-gradient(circle, rgba(255, 255, 255, 0.8) 2px, transparent 2px); background-size: 15px 15px; opacity: 0.3; transition: all 0.3s ease; } .menu-item:nth-child(1) .dot-pattern::before { background-image: radial-gradient(circle, var(--neon-pink) 2px, transparent 2px); } .menu-item:nth-child(2) .dot-pattern::before { background-image: radial-gradient(circle, var(--neon-blue) 2px, transparent 2px); } .menu-item:nth-child(3) .dot-pattern::before { background-image: radial-gradient(circle, var(--neon-purple) 2px, transparent 2px); } .menu-item:nth-child(4) .dot-pattern::before { background-image: radial-gradient(circle, var(--neon-green) 2px, transparent 2px); } .menu-item:hover .dot-pattern::before { opacity: 0.6; animation: moveDots 5s linear infinite; } .icon { font-size: 2.5rem; margin-bottom: 10px; position: relative; z-index: 2; transition: all 0.3s ease; } .menu-item:nth-child(1) .icon { color: var(--neon-pink); text-shadow: 0 0 10px var(--neon-pink); } .menu-item:nth-child(2) .icon { color: var(--neon-blue); text-shadow: 0 0 10px var(--neon-blue); } .menu-item:nth-child(3) .icon { color: var(--neon-purple); text-shadow: 0 0 10px var(--neon-purple); } .menu-item:nth-child(4) .icon { color: var(--neon-green); text-shadow: 0 0 10px var(--neon-green); } .menu-label { font-weight: bold; text-transform: uppercase; letter-spacing: 1px; font-size: 0.9rem; position: relative; z-index: 2; transition: all 0.3s ease; } .menu-item:nth-child(1) .menu-label { color: var(--neon-pink); } .menu-item:nth-child(2) .menu-label { color: var(--neon-blue); } .menu-item:nth-child(3) .menu-label { color: var(--neon-purple); } .menu-item:nth-child(4) .menu-label { color: var(--neon-green); } .menu-item:hover .icon, .menu-item:hover .menu-label { transform: scale(1.1); } .menu-item:active .dot-pattern { transform: scale(0.95); } .menu-item.active::after { content: ''; position: absolute; top: -10px; right: -10px; width: 20px; height: 20px; border-radius: 50%; background: currentColor; box-shadow: 0 0 15px currentColor; animation: pulse 2s infinite; } .glitch-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(45deg, transparent 0%, rgba(255, 42, 109, 0.1) 50%, transparent 100%); opacity: 0; z-index: 5; pointer-events: none; mix-blend-mode: overlay; } .menu-item:hover .glitch-overlay { animation: glitch 0.3s ease forwards; } .modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.85); display: flex; align-items: center; justify-content: center; z-index: 100; opacity: 0; visibility: hidden; transition: all 0.3s ease-in-out; } .modal.show { opacity: 1; visibility: visible; } .modal-content { background-color: var(--darker-bg); width: 90%; max-width: 500px; padding: 30px; border-radius: 15px; position: relative; transform: translateY(50px); transition: all 0.3s ease-in-out; border: 1px solid rgba(5, 217, 232, 0.3); box-shadow: 0 0 30px rgba(5, 217, 232, 0.2); } .modal.show .modal-content { transform: translateY(0); } .modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); padding-bottom: 15px; } .modal-close { background: none; border: none; color: white; font-size: 1.5rem; cursor: pointer; transition: all 0.2s ease; } .modal-close:hover { color: var(--neon-pink); transform: rotate(90deg); } .modal-title { font-size: 1.5rem; text-transform: uppercase; letter-spacing: 2px; color: var(--neon-blue); text-shadow: 0 0 5px var(--neon-blue); } .modal-body { margin-bottom: 20px; line-height: 1.5; } @keyframes pulse { 0% { box-shadow: 0 0 15px rgba(5, 217, 232, 0.3); } 50% { box-shadow: 0 0 25px rgba(5, 217, 232, 0.6); } 100% { box-shadow: 0 0 15px rgba(5, 217, 232, 0.3); } } @keyframes moveDots { 0% { background-position: 0 0; } 100% { background-position: 100px 100px; } } @keyframes glitch { 0% { opacity: 0; transform: translateX(-10px); } 25% { opacity: 0.5; transform: translateX(5px); } 50% { opacity: 0.7; transform: translateX(-5px); } 75% { opacity: 0.5; transform: translateX(10px); } 100% { opacity: 0; transform: translateX(0); } } @keyframes glitchText { 0% { text-shadow: -2px 0 var(--neon-pink), 2px 2px var(--neon-blue); transform: translate(2px, 0); } 25% { text-shadow: 1px -1px var(--neon-pink), -1px 1px var(--neon-blue); transform: translate(-2px, 0); } 50% { text-shadow: 2px -2px var(--neon-pink), 0 0 var(--neon-blue); transform: translate(0, 2px); } 75% { text-shadow: -1px 0 var(--neon-pink), 0 1px var(--neon-blue); transform: translate(0, -2px); } 100% { text-shadow: 0 0 var(--neon-pink), 0 0 var(--neon-blue); transform: translate(0, 0); } } .back-button { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); background: none; border: none; color: white; font-size: 1rem; cursor: pointer; padding: 10px 20px; border-radius: 5px; background-color: rgba(1, 15, 30, 0.7); border: 1px solid var(--neon-blue); transition: all 0.2s ease; z-index: 3; text-transform: uppercase; letter-spacing: 2px; display: none; } .back-button:hover { background-color: var(--neon-blue); color: var(--darker-bg); } .content-screen { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: all 0.5s ease; background-color: var(--dark-bg); z-index: 10; padding: 30px; } .content-screen.active { opacity: 1; visibility: visible; } .content-title { font-size: 2rem; margin-bottom: 30px; text-align: center; text-transform: uppercase; letter-spacing: 3px; } .content-body { max-width: 600px; text-align: center; line-height: 1.6; margin-bottom: 30px; } .glitch-text { position: relative; display: inline-block; } .glitch-text:hover { animation: glitchText 0.3s infinite; } .loading-dots { display: flex; justify-content: center; gap: 8px; margin-top: 20px; } .loading-dot { width: 10px; height: 10px; border-radius: 50%; background-color: white; animation: loadingDot 1.5s infinite ease-in-out; } .loading-dot:nth-child(1) { background-color: var(--neon-pink); animation-delay: 0s; } .loading-dot:nth-child(2) { background-color: var(--neon-blue); animation-delay: 0.2s; } .loading-dot:nth-child(3) { background-color: var(--neon-purple); animation-delay: 0.4s; } .loading-dot:nth-child(4) { background-color: var(--neon-green); animation-delay: 0.6s; } @keyframes loadingDot { 0%, 100% { transform: scale(1); opacity: 0.5; } 50% { transform: scale(1.5); opacity: 1; } } @media (max-width: 600px) { .title { font-size: 1.8rem; } .menu-container { gap: 15px; } .menu-item { width: 110px; height: 110px; } .modal-content { padding: 20px; } } </style> </head> <body> <div class="container"> <div class="grid-bg"></div> <h1 class="title"> <span data-text="NEXUS">NEXUS</span> <span data-text="INTERFACE">INTERFACE</span> </h1> <div class="menu-container"> <div class="menu-item" data-content="combat"> <div class="dot-pattern"></div> <div class="menu-icon"> <div class="icon">⚔️</div> <div class="menu-label">COMBAT</div> </div> <div class="glitch-overlay"></div> </div> <div class="menu-item" data-content="inventory"> <div class="dot-pattern"></div> <div class="menu-icon"> <div class="icon">🎒</div> <div class="menu-label">INVENTORY</div> </div> <div class="glitch-overlay"></div> </div> <div class="menu-item" data-content="skills"> <div class="dot-pattern"></div> <div class="menu-icon"> <div class="icon">⚡</div> <div class="menu-label">SKILLS</div> </div> <div class="glitch-overlay"></div> </div> <div class="menu-item" data-content="settings"> <div class="dot-pattern"></div> <div class="menu-icon"> <div class="icon">⚙️</div> <div class="menu-label">SETTINGS</div> </div> <div class="glitch-overlay"></div> </div> </div> <button class="back-button">Return to Main Menu</button> <div id="combat-screen" class="content-screen"> <h2 class="content-title" style="color: var(--neon-pink); text-shadow: 0 0 10px var(--neon-pink);">Combat System</h2> <p class="content-body"> Access your <span class="glitch-text">neural combat matrix</span> and activate weapon synchronization. Current tactical loadout includes pulse rifles, nano-blades, and quantum grenades. <br><br> Enemy detection grid <span class="glitch-text">online</span>. Motion sensors calibrated. </p> <div class="loading-dots"> <div class="loading-dot"></div> <div class="loading-dot"></div> <div class="loading-dot"></div> <div class="loading-dot"></div> </div> </div> <div id="inventory-screen" class="content-screen"> <h2 class="content-title" style="color: var(--neon-blue); text-shadow: 0 0 10px var(--neon-blue);">Inventory Matrix</h2> <p class="content-body"> <span class="glitch-text">Dimensional storage</span> capacity at 64%. Rare items include: <br><br> • Quantum Stabilizer (x3)<br> • Proximity Mine Cluster (x12)<br> • Stealth Camo Module (Damaged)<br> • Neural Interface Chip v4.8 </p> <div class="loading-dots"> <div class="loading-dot"></div> <div class="loading-dot"></div> <div class="loading-dot"></div> <div class="loading-dot"></div> </div> </div> <div id="skills-screen" class="content-screen"> <h2 class="content-title" style="color: var(--neon-purple); text-shadow: 0 0 10px var(--neon-purple);">Neural Skillnet</h2> <p class="content-body"> <span class="glitch-text">Bio-enhancement</span> pathways available for upgrade: <br><br> • Reflex Overclock: Level 7 (23,450 XP to next level)<br> • Tactical Analysis: Level 9 (MAX)<br> • Stealth Protocol: Level 4 (1,320 XP to next level)<br> • Energy Manipulation: Level 3 (LOCKED: Requires Synapse Module) </p> <div class="loading-dots"> <div class="loading-dot"></div> <div class="loading-dot"></div> <div class="loading-dot"></div> <div class="loading-dot"></div> </div> </div> <div id="settings-screen" class="content-screen"> <h2 class="content-title" style="color: var(--neon-green); text-shadow: 0 0 10px var(--neon-green);">System Configuration</h2> <p class="content-body"> <span class="glitch-text">Neural interface</span> settings available: <br><br> • Display Mode: Holographic (HIGH)<br> • Audio Sensors: 3D Spatial (ENABLED)<br> • HUD Opacity: 78%<br> • Enemy Highlight: Pulse Mode<br> • Auto-Aim Assistance: Minimal </p> <div class="loading-dots"> <div class="loading-dot"></div> <div class="loading-dot"></div> <div class="loading-dot"></div> <div class="loading-dot"></div> </div> </div> </div> <div id="modal" class="modal"> <div class="modal-content"> <div class="modal-header"> <h2 class="modal-title">SYSTEM NOTICE</h2> <button class="modal-close">×</button> </div> <div class="modal-body"> <p>Neural interface initialized. Welcome to the NEXUS combat system, operator.</p> <p>Data synchronization in progress. Please stand by...</p> <div class="loading-dots"> <div class="loading-dot"></div> <div class="loading-dot"></div> <div class="loading-dot"></div> <div class="loading-dot"></div> </div> </div> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { // Show modal on load setTimeout(() => { document.getElementById('modal').classList.add('show'); // Add glitchy text animation to title on load const titleSpans = document.querySelectorAll('.title span'); titleSpans.forEach(span => { span.style.animation = 'glitchText 0.3s 3'; span.setAttribute('data-text', span.textContent); }); }, 800); // Close modal document.querySelector('.modal-close').addEventListener('click', function() { document.getElementById('modal').classList.remove('show'); }); // Menu item click handler const menuItems = document.querySelectorAll('.menu-item'); const backButton = document.querySelector('.back-button'); const contentScreens = document.querySelectorAll('.content-screen'); menuItems.forEach(item => { item.addEventListener('click', function() { const contentType = this.getAttribute('data-content'); const targetScreen = document.getElementById(`${contentType}-screen`); // Hide all screens first contentScreens.forEach(screen => { screen.classList.remove('active'); }); // Show target screen targetScreen.classList.add('active'); backButton.style.display = 'block'; // Add glitch effect animation to menu icon this.querySelector('.glitch-overlay').style.animation = 'glitch 0.3s ease forwards'; // Play click sound const clickSound = new Audio('data:audio/mp3;base64,//uQxAAAAAAAAAAAAAAAAAAAAAAAWGluZwAAAA8AAAAFAAAGhgCAgICAgICAgICAgMDAwMDAwMDAwMDAwPDw8PDw8PDw8PDw8P///////////////wAAAExhdmM1OC41NAAAAAAAAAAAAAAAACQCQAAAAAAAAaGGvZ6zAAAA//uwxAAAAmkXVlEEQBBNIs7KK8xgAEAQBAEKqqqq7qYIIIKd1dXV4IKoIgB+C4Lg+D4QCAQD8HwfBAEAQBAMYxjC8YxjGEIQhDEMJgCAIADAYDAAQBAEAQAACMYxjGK4riqq7u7IAgiCInJQNESEVUQWShEB/v9/goCAf8EAQCEAQD/w+CAIAgCPggD4IB/BAEAQBDGMbx////////////////3d3d3VVVVVdVVVVMQU1FMy45OS41VVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV'); clickSound.volume = 0.3; clickSound.play(); }); }); // Back button click handler backButton.addEventListener('click', function() { // Hide all content screens contentScreens.forEach(screen => { screen.classList.remove('active'); }); // Hide back button backButton.style.display = 'none'; // Reset all menu items menuItems.forEach(item => { item.classList.remove('active'); }); // Play click sound const clickSound = new Audio('data:audio/mp3;base64,//uQxAAAAAAAAAAAAAAAAAAAAAAAWGluZwAAAA8AAAAEAAAGhgCenp6enp6enp6enp68vLy8vLy8vLy8vLzPz8/Pz8/Pz8/Pz8/////////////////AxAQEBAQEBAQEBAQQEBAQEBAQEBAQEBAgICAgICAgICAgICAoKCgoKCgoKCgoKCgwMDAwMDAwMDAwMDAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA//sQxAADwAABpAAAACAAANIAAAARAAAaQAAAAgAAA0gAAABExBTUUzLjk5LjVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV'); clickSound.volume = 0.2; clickSound.play(); }); // Hover sound effect for menu items menuItems.forEach(item => { item.addEventListener('mouseenter', function() { const hoverSound = new Audio('data:audio/mp3;base64,//uQxAAAAAAAAAAAAAAAAAAAAAAAWGluZwAAAA8AAAADAAAGSACCgoKCgoKCgoKCgoKCgoKtra2tra2tra2tra2tra3i4uLi4uLi4uLi4uLi4uL///////////////8AAAATGF2YzU4LjU0AAAAAAAAAAAAAAAAJAkAAAAAAAAZIEm9qowAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD/+7DEAAAJtEte9BGAIM6LK56CMAQQQEAwTc1VREsHRdHkNB8PhCHIch8H4+j8fB+Ph+Pw/D4Ph+Ph8Poc1ptJpNOpFIpEXi8XikXi1GotFqNQ9qtVqtOp0Oh8Oh0OhmMxmMxoLBYLBaK1jFgsForFYrGsay7u7uKqqqqqqqqqqqqqqq9PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PTEFNRTMuOTkuNVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVQ=='); hoverSound.volume = 0.1; hoverSound.play(); }); }); // Add glitch effect to glitch-text elements on hover const glitchTexts = document.querySelectorAll('.glitch-text'); glitchTexts.forEach(text => { text.addEventListener('mouseenter', function() { this.style.animation = 'glitchText 0.3s infinite'; }); text.addEventListener('mouseleave', function() { this.style.animation = 'none'; }); }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>The Daily Pulse - News Navigation</title> <style> :root { --primary: #2c3e50; --secondary: #3498db; --accent: #e74c3c; --text: #333; --light: #f8f9fa; --transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1); --transition-long: 0.5s cubic-bezier(0.4, 0, 0.2, 1); } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', sans-serif; } body { background-color: var(--light); color: var(--text); display: flex; flex-direction: column; justify-content: flex-start; align-items: center; min-height: 100vh; max-width: 700px; margin: 0 auto; padding: 20px; overflow-x: hidden; } header { width: 100%; background-color: white; padding: 15px 20px; border-radius: 10px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); display: flex; justify-content: space-between; align-items: center; position: relative; z-index: 10; margin-bottom: 25px; } .logo { display: flex; align-items: center; font-weight: 700; font-size: 22px; color: var(--primary); } .logo-dot { width: 12px; height: 12px; border-radius: 50%; background-color: var(--accent); margin-right: 8px; display: inline-block; } .menu-container { position: relative; } .menu-toggle { background: none; border: none; cursor: pointer; width: 40px; height: 40px; display: flex; justify-content: center; align-items: center; position: relative; border-radius: 50%; transition: var(--transition); outline: none; } .menu-toggle:hover { background-color: rgba(0, 0, 0, 0.05); } .menu-toggle:focus { box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.3); } .dot-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 4px; width: 18px; height: 18px; transition: var(--transition); } .dot { width: 4px; height: 4px; border-radius: 50%; border: 1px solid var(--primary); background-color: transparent; transition: var(--transition); } .menu-toggle:hover .dot { transform: scale(1.1); background-color: var(--primary); } .menu-toggle.active .dot { background-color: var(--secondary); border-color: var(--secondary); } .menu-toggle.active .dot-grid { transform: rotate(90deg); } .menu { position: absolute; top: calc(100% + 10px); right: 0; width: 260px; background-color: white; border-radius: 8px; box-shadow: 0 6px 25px rgba(0, 0, 0, 0.15); opacity: 0; visibility: hidden; transform: translateY(-20px); transition: var(--transition-long); padding: 10px 0; overflow: hidden; } .menu.active { opacity: 1; visibility: visible; transform: translateY(0); } .menu-item { display: flex; align-items: center; padding: 12px 20px; color: var(--text); text-decoration: none; transition: var(--transition); position: relative; } .menu-item:hover { background-color: rgba(0, 0, 0, 0.03); color: var(--secondary); } .menu-icon { display: flex; margin-right: 14px; width: 24px; height: 24px; justify-content: center; align-items: center; opacity: 0.8; transition: var(--transition); } .menu-item:hover .menu-icon { opacity: 1; } .menu-dot-container { display: flex; justify-content: space-between; width: 15px; height: 15px; position: relative; } .menu-dot { width: 4px; height: 4px; border-radius: 50%; border: 1px solid var(--primary); background-color: transparent; position: absolute; transition: var(--transition); } /* Breaking News icon */ .breaking-news .menu-dot:nth-child(1) { top: 0; left: 50%; transform: translateX(-50%); } .breaking-news .menu-dot:nth-child(2) { bottom: 0; left: 0; } .breaking-news .menu-dot:nth-child(3) { bottom: 0; right: 0; } .menu-item:hover .breaking-news .menu-dot { background-color: var(--accent); border-color: var(--accent); } /* Politics icon */ .politics .menu-dot:nth-child(1) { top: 50%; left: 0; transform: translateY(-50%); } .politics .menu-dot:nth-child(2) { top: 50%; left: 50%; transform: translate(-50%, -50%); } .politics .menu-dot:nth-child(3) { top: 50%; right: 0; transform: translateY(-50%); } .menu-item:hover .politics .menu-dot { background-color: var(--primary); border-color: var(--primary); } /* Technology icon */ .technology .menu-dot:nth-child(1) { top: 0; left: 0; } .technology .menu-dot:nth-child(2) { top: 0; right: 0; } .technology .menu-dot:nth-child(3) { bottom: 0; left: 50%; transform: translateX(-50%); } .menu-item:hover .technology .menu-dot { background-color: var(--secondary); border-color: var(--secondary); } /* Culture icon */ .culture .menu-dot:nth-child(1) { top: 0; left: 0; } .culture .menu-dot:nth-child(2) { top: 0; right: 0; } .culture .menu-dot:nth-child(3) { bottom: 0; left: 0; } .culture .menu-dot:nth-child(4) { bottom: 0; right: 0; opacity: 0; } .menu-item:hover .culture .menu-dot:nth-child(4) { opacity: 1; } .menu-item:hover .culture .menu-dot { background-color: #9b59b6; border-color: #9b59b6; } /* Science icon */ .science .menu-dot:nth-child(1) { top: 0; left: 50%; transform: translateX(-50%); } .science .menu-dot:nth-child(2) { bottom: 0; left: 0; } .science .menu-dot:nth-child(3) { bottom: 0; right: 0; } .menu-item:hover .science .menu-dot { background-color: #27ae60; border-color: #27ae60; } /* Health icon */ .health .menu-dot:nth-child(1) { top: 0; left: 0; } .health .menu-dot:nth-child(2) { top: 0; right: 0; } .health .menu-dot:nth-child(3) { bottom: 0; left: 0; } .health .menu-dot:nth-child(4) { bottom: 0; right: 0; } .menu-item:hover .health .menu-dot { background-color: #16a085; border-color: #16a085; } .notification-dot { width: 6px; height: 6px; background-color: var(--accent); border-radius: 50%; position: absolute; top: 13px; right: 18px; transform: scale(0); transition: var(--transition); } .notification-active .notification-dot { transform: scale(1); animation: pulse 2s infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.4); } 70% { box-shadow: 0 0 0 6px rgba(231, 76, 60, 0); } 100% { box-shadow: 0 0 0 0 rgba(231, 76, 60, 0); } } .divider { height: 1px; background-color: rgba(0, 0, 0, 0.06); margin: 8px 0; } /* Main content section */ .main-content { width: 100%; background-color: white; border-radius: 10px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); padding: 25px; margin-bottom: 20px; position: relative; overflow: hidden; } .content-header { display: flex; align-items: center; margin-bottom: 20px; } .content-header .heading-dot { width: 8px; height: 8px; border-radius: 50%; background-color: var(--accent); margin-right: 10px; } h2 { font-size: 18px; font-weight: 600; color: var(--primary); } .news-grid { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 20px; } .news-item { border-radius: 8px; overflow: hidden; box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05); transition: var(--transition); cursor: pointer; position: relative; } .news-item:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1); } .news-image { width: 100%; height: 120px; object-fit: cover; display: block; } .news-content { padding: 15px; } .news-category { font-size: 11px; font-weight: 600; text-transform: uppercase; color: var(--secondary); margin-bottom: 5px; } .news-title { font-size: 14px; line-height: 1.4; font-weight: 600; margin-bottom: 8px; color: var(--text); } .news-meta { display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: #777; } .tag { display: inline-block; padding: 3px 7px; font-size: 10px; border-radius: 30px; background-color: rgba(52, 152, 219, 0.1); color: var(--secondary); font-weight: 500; position: absolute; top: 10px; right: 10px; } .tag.trending { background-color: rgba(231, 76, 60, 0.1); color: var(--accent); } @media (max-width: 480px) { header { padding: 12px 15px; } .news-grid { grid-template-columns: 1fr; } .menu { width: 220px; } .logo { font-size: 18px; } .main-content { padding: 20px; } } </style> </head> <body> <header> <div class="logo"> <span class="logo-dot"></span> The Daily Pulse </div> <div class="menu-container"> <button class="menu-toggle" aria-label="Open navigation menu"> <div class="dot-grid"> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> </div> </button> <nav class="menu"> <a href="#" class="menu-item notification-active"> <div class="menu-icon"> <div class="menu-dot-container breaking-news"> <div class="menu-dot"></div> <div class="menu-dot"></div> <div class="menu-dot"></div> </div> </div> Breaking News <span class="notification-dot"></span> </a> <a href="#" class="menu-item"> <div class="menu-icon"> <div class="menu-dot-container politics"> <div class="menu-dot"></div> <div class="menu-dot"></div> <div class="menu-dot"></div> </div> </div> Politics </a> <a href="#" class="menu-item"> <div class="menu-icon"> <div class="menu-dot-container technology"> <div class="menu-dot"></div> <div class="menu-dot"></div> <div class="menu-dot"></div> </div> </div> Technology </a> <div class="divider"></div> <a href="#" class="menu-item"> <div class="menu-icon"> <div class="menu-dot-container culture"> <div class="menu-dot"></div> <div class="menu-dot"></div> <div class="menu-dot"></div> <div class="menu-dot"></div> </div> </div> Culture & Arts </a> <a href="#" class="menu-item"> <div class="menu-icon"> <div class="menu-dot-container science"> <div class="menu-dot"></div> <div class="menu-dot"></div> <div class="menu-dot"></div> </div> </div> Science </a> <a href="#" class="menu-item"> <div class="menu-icon"> <div class="menu-dot-container health"> <div class="menu-dot"></div> <div class="menu-dot"></div> <div class="menu-dot"></div> <div class="menu-dot"></div> </div> </div> Health & Wellness </a> </nav> </div> </header> <section class="main-content"> <div class="content-header"> <span class="heading-dot"></span> <h2>Today's Top Stories</h2> </div> <div class="news-grid"> <div class="news-item"> <img src="https://images.unsplash.com/photo-1576358204926-7e18779c9d5c?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80" alt="Microchip closeup" class="news-image"> <div class="news-content"> <div class="news-category">Technology</div> <h3 class="news-title">Quantum Computing Breakthrough Opens New Processing Frontiers</h3> <div class="news-meta"> <span>14 mins ago</span> <span>5 min read</span> </div> </div> <span class="tag trending">Trending</span> </div> <div class="news-item"> <img src="https://images.unsplash.com/photo-1581090464777-f3220bbe1b8b?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80" alt="Climate protest" class="news-image"> <div class="news-content"> <div class="news-category">Politics</div> <h3 class="news-title">Global Climate Summit Reaches Historic Emissions Agreement</h3> <div class="news-meta"> <span>2 hours ago</span> <span>7 min read</span> </div> </div> <span class="tag">Live Updates</span> </div> <div class="news-item"> <img src="https://images.unsplash.com/photo-1579154204601-01588f351e67?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80" alt="Healthcare worker" class="news-image"> <div class="news-content"> <div class="news-category">Health</div> <h3 class="news-title">FDA Approves Novel Treatment for Antibiotic-Resistant Infections</h3> <div class="news-meta"> <span>5 hours ago</span> <span>4 min read</span> </div> </div> </div> <div class="news-item"> <img src="https://images.unsplash.com/photo-1485827404703-89b55fcc595e?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80" alt="Cultural festival" class="news-image"> <div class="news-content"> <div class="news-category">Culture</div> <h3 class="news-title">Digital Art Museum Opens Virtual Reality Exhibition Space</h3> <div class="news-meta"> <span>Yesterday</span> <span>3 min read</span> </div> </div> </div> </div> </section> <script> document.addEventListener('DOMContentLoaded', function() { const menuToggle = document.querySelector('.menu-toggle'); const menu = document.querySelector('.menu'); // Menu toggle functionality menuToggle.addEventListener('click', function() { menu.classList.toggle('active'); menuToggle.classList.toggle('active'); // Add subtle animation to menu dot grid const dots = document.querySelectorAll('.dot'); dots.forEach((dot, index) => { dot.style.transitionDelay = `${index * 20}ms`; }); }); // Close menu when clicking outside document.addEventListener('click', function(e) { if (!menuToggle.contains(e.target) && !menu.contains(e.target)) { menu.classList.remove('active'); menuToggle.classList.remove('active'); } }); // Menu item hover effect const menuItems = document.querySelectorAll('.menu-item'); menuItems.forEach(item => { item.addEventListener('mouseenter', function() { const dots = this.querySelectorAll('.menu-dot'); dots.forEach((dot, index) => { dot.style.transitionDelay = `${index * 50}ms`; }); }); item.addEventListener('mouseleave', function() { const dots = this.querySelectorAll('.menu-dot'); dots.forEach(dot => { dot.style.transitionDelay = '0ms'; }); }); }); // News item hover interaction const newsItems = document.querySelectorAll('.news-item'); newsItems.forEach(item => { item.addEventListener('mouseenter', function() { this.style.zIndex = '1'; }); item.addEventListener('mouseleave', function() { this.style.zIndex = '0'; }); }); // Simulate notification pulse animation const notificationItems = document.querySelectorAll('.notification-active'); notificationItems.forEach(item => { setInterval(() => { const dot = item.querySelector('.notification-dot'); dot.style.transform = 'scale(1.2)'; setTimeout(() => { dot.style.transform = 'scale(1)'; }, 300); }, 5000); }); }); </script> </body> </html>
