Mobile menus are a crucial element in modern web design, offering seamless navigation for users on the go. In this article, we explore ten exemplary mobile menu designs that stand out for their functionality and aesthetics.
From minimalist approaches to feature-rich interfaces, these mobile menu examples showcase the best practices in user experience and design. Let's dive into the details and see what makes each one unique.
CODE1
Here's the code:
CODETEXT1
CODE2
Here's the code:
CODETEXT2
CODE3
Here's the code:
CODETEXT3
CODE4
Here's the code:
CODETEXT4
CODE5
Here's the code:
CODETEXT5
Designers and developers love Subframe for its drag-and-drop interface and intuitive, responsive canvas. Create pixel-perfect mobile menus effortlessly, ensuring a seamless user experience every time.
Join the community of satisfied users and elevate your design game. Start for free today!
CODE6
Here's the code:
CODETEXT6
CODE7
Here's the code:
CODETEXT7
CODE8
Here's the code:
CODETEXT8
CODE9
Here's the code:
CODETEXT9
CODE10
Here's the code:
CODETEXT10
Ready to elevate your UI design game? With Subframe, you can create pixel-perfect mobile menus and stunning UIs in minutes. Our drag-and-drop editor ensures efficiency and precision.
Don't wait! Start for free and begin designing immediately. Join the community of satisfied designers today!
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>PulseTrack Fitness Menu</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; user-select: none; } :root { --primary: #00E676; --primary-dark: #00C853; --secondary: #FF3D00; --dark: #121212; --light: #FFFFFF; --gray: #757575; --gray-light: #F5F5F5; --shadow: 0 4px 20px rgba(0, 0, 0, 0.15); --transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); } body { background-color: var(--dark); color: var(--light); font-size: 16px; line-height: 1.5; min-height: 100vh; display: flex; flex-direction: column; overflow-x: hidden; width: 100%; max-width: 700px; margin: 0 auto; position: relative; } .adaptive-brightness { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(0,0,0,0.2), transparent); opacity: 0; transition: opacity 0.5s ease; pointer-events: none; z-index: 100; } .app-container { display: flex; flex-direction: column; width: 100%; height: 100vh; max-height: 700px; padding: 16px; position: relative; overflow: hidden; } .header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding: 10px 0; } .logo { font-size: 22px; font-weight: 800; color: var(--primary); display: flex; align-items: center; } .logo-icon { margin-right: 8px; display: flex; } .user-profile { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), var(--primary-dark)); display: flex; align-items: center; justify-content: center; color: var(--dark); font-weight: 600; font-size: 16px; box-shadow: var(--shadow); cursor: pointer; transition: var(--transition); } .user-profile:hover { transform: scale(1.05); } .stats-container { background-color: rgba(255, 255, 255, 0.08); border-radius: 16px; padding: 16px; margin-bottom: 24px; position: relative; overflow: hidden; box-shadow: var(--shadow); } .stats-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; } .stats-title { font-size: 18px; font-weight: 600; } .stats-date { font-size: 14px; color: var(--gray); } .stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .stat-item { display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: rgba(255, 255, 255, 0.05); border-radius: 12px; padding: 12px 8px; transition: var(--transition); } .stat-item:hover { background-color: rgba(255, 255, 255, 0.1); transform: translateY(-2px); } .stat-value { font-size: 20px; font-weight: 700; margin-bottom: 4px; color: var(--light); } .stat-label { font-size: 12px; color: var(--gray); text-align: center; } .achievement { color: var(--primary); } .menu-container { flex: 1; display: flex; flex-direction: column; gap: 14px; overflow-y: auto; padding-bottom: 80px; position: relative; } .menu-container::-webkit-scrollbar { width: 6px; } .menu-container::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.05); border-radius: 10px; } .menu-container::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2); border-radius: 10px; } .menu-item { background-color: rgba(255, 255, 255, 0.08); border-radius: 14px; padding: 16px; display: flex; align-items: center; cursor: pointer; transition: var(--transition); position: relative; overflow: hidden; } .menu-item:hover { background-color: rgba(255, 255, 255, 0.12); transform: translateY(-3px); box-shadow: var(--shadow); } .menu-item:active { transform: translateY(0); } .menu-icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-right: 16px; color: var(--dark); font-size: 20px; } .menu-content { flex: 1; } .menu-title { font-size: 17px; font-weight: 600; margin-bottom: 4px; } .menu-description { font-size: 13px; color: var(--gray); } .menu-arrow { margin-left: 12px; font-size: 20px; color: var(--gray); transition: var(--transition); } .menu-item:hover .menu-arrow { transform: translateX(4px); color: var(--light); } .nav-bar { position: absolute; bottom: 0; left: 0; width: 100%; display: flex; justify-content: space-around; background: rgba(18, 18, 18, 0.8); backdrop-filter: blur(10px); padding: 12px 16px; border-top: 1px solid rgba(255, 255, 255, 0.08); z-index: 10; } .nav-item { display: flex; flex-direction: column; align-items: center; font-size: 12px; color: var(--gray); cursor: pointer; transition: var(--transition); } .nav-icon { font-size: 22px; margin-bottom: 4px; } .nav-item.active { color: var(--primary); } .nav-item:hover { color: var(--light); } .menu-badge { position: absolute; top: 16px; right: 16px; background-color: var(--secondary); color: var(--light); font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 12px; text-transform: uppercase; } .ripple { position: absolute; border-radius: 50%; transform: scale(0); background-color: rgba(255, 255, 255, 0.3); animation: ripple-animation 0.6s linear; } @keyframes ripple-animation { to { transform: scale(4); opacity: 0; } } .workout-item { background: linear-gradient(135deg, #FF416C, #FF4B2B); } .activity-item { background: linear-gradient(135deg, #4776E6, #8E54E9); } .nutrition-item { background: linear-gradient(135deg, #00B09B, #96C93D); } .sleep-item { background: linear-gradient(135deg, #0F2027, #2C5364); } .goals-item { background: linear-gradient(135deg, #FF8008, #FFC837); } .friends-item { background: linear-gradient(135deg, #834d9b, #d04ed6); } .brightness-toggle { position: absolute; top: 20px; right: 70px; width: 40px; height: 40px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.08); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: var(--transition); z-index: 10; } .brightness-toggle:hover { background-color: rgba(255, 255, 255, 0.15); } .swipe-indicator { position: absolute; bottom: 90px; left: 50%; transform: translateX(-50%); background-color: rgba(255, 255, 255, 0.2); padding: 10px 16px; border-radius: 20px; font-size: 13px; color: var(--gray); display: flex; align-items: center; pointer-events: none; opacity: 0; transition: opacity 0.3s ease; } .swipe-indicator svg { margin-right: 8px; } .watermark { position: absolute; bottom: 8px; right: 8px; font-size: 10px; color: rgba(255, 255, 255, 0.3); pointer-events: none; } /* Animations */ @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } .pulse { animation: pulse 2s infinite; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .menu-item { animation: fadeIn 0.3s ease forwards; opacity: 0; } .menu-item:nth-child(1) { animation-delay: 0.1s; } .menu-item:nth-child(2) { animation-delay: 0.2s; } .menu-item:nth-child(3) { animation-delay: 0.3s; } .menu-item:nth-child(4) { animation-delay: 0.4s; } .menu-item:nth-child(5) { animation-delay: 0.5s; } .menu-item:nth-child(6) { animation-delay: 0.6s; } /* Media queries for responsive design */ @media (max-width: 380px) { .stats-grid { grid-template-columns: repeat(2, 1fr); } .menu-title { font-size: 15px; } .menu-description { font-size: 12px; } .menu-icon { width: 40px; height: 40px; margin-right: 12px; } } /* Touch gesture indicator */ .swipe-area { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 5; pointer-events: none; } .swipe-trail { position: absolute; width: 10px; height: 10px; border-radius: 50%; background-color: var(--primary); opacity: 0.6; pointer-events: none; z-index: 9; } </style> </head> <body> <div class="adaptive-brightness" id="adaptiveBrightness"></div> <div class="app-container"> <div class="header"> <div class="logo"> <div class="logo-icon"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 2L18 8V16L12 22L6 16V8L12 2Z" stroke="#00E676" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M12 12V7" stroke="#00E676" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <circle cx="12" cy="16" r="1" fill="#00E676"/> </svg> </div> PulseTrack </div> <div class="brightness-toggle" id="brightnessToggle"> <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 17C14.7614 17 17 14.7614 17 12C17 9.23858 14.7614 7 12 7C9.23858 7 7 9.23858 7 12C7 14.7614 9.23858 17 12 17Z" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M12 1V3" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M12 21V23" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M4.22 4.22L5.64 5.64" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M18.36 18.36L19.78 19.78" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M1 12H3" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M21 12H23" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M4.22 19.78L5.64 18.36" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M18.36 5.64L19.78 4.22" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </div> <div class="user-profile" id="userProfile">JP</div> </div> <div class="stats-container"> <div class="stats-header"> <div class="stats-title">Today's Progress</div> <div class="stats-date">May 15, 2023</div> </div> <div class="stats-grid"> <div class="stat-item"> <div class="stat-value">8,432</div> <div class="stat-label">Steps</div> </div> <div class="stat-item"> <div class="stat-value achievement">3.2<small>km</small></div> <div class="stat-label">Distance</div> </div> <div class="stat-item"> <div class="stat-value">348</div> <div class="stat-label">Calories</div> </div> </div> </div> <div class="menu-container" id="menuContainer"> <div class="menu-item" id="workoutItem"> <div class="menu-icon workout-item"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M6.5 6.5L17.5 17.5" stroke="#121212" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M2 12H4" stroke="#121212" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M20 12H22" stroke="#121212" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M7 4L7 6" stroke="#121212" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M17 18L17 20" stroke="#121212" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M3 7L5 5" stroke="#121212" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M19 17L21 19" stroke="#121212" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </div> <div class="menu-content"> <div class="menu-title">Workout Plans</div> <div class="menu-description">HIIT, strength & cardio routines</div> </div> <div class="menu-arrow">›</div> <div class="menu-badge">New</div> </div> <div class="menu-item"> <div class="menu-icon activity-item"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M22 12H18L15 21L9 3L6 12H2" stroke="#121212" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </div> <div class="menu-content"> <div class="menu-title">Activity Log</div> <div class="menu-description">Track progress & view history</div> </div> <div class="menu-arrow">›</div> </div> <div class="menu-item"> <div class="menu-icon nutrition-item"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M18 8H19C20.0609 8 21.0783 8.42143 21.8284 9.17157C22.5786 9.92172 23 10.9391 23 12C23 13.0609 22.5786 14.0783 21.8284 14.8284C21.0783 15.5786 20.0609 16 19 16H18" stroke="#121212" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M2 8H18V17C18 18.0609 17.5786 19.0783 16.8284 19.8284C16.0783 20.5786 15.0609 21 14 21H6C4.93913 21 3.92172 20.5786 3.17157 19.8284C2.42143 19.0783 2 18.0609 2 17V8Z" stroke="#121212" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M6 1V4" stroke="#121212" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M10 1V4" stroke="#121212" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M14 1V4" stroke="#121212" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </div> <div class="menu-content"> <div class="menu-title">Nutrition Tracker</div> <div class="menu-description">Meals, hydration & macros</div> </div> <div class="menu-arrow">›</div> </div> <div class="menu-item"> <div class="menu-icon sleep-item"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z" stroke="#121212" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M12 7V12L15 15" stroke="#121212" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </div> <div class="menu-content"> <div class="menu-title">Sleep Analytics</div> <div class="menu-description">Sleep cycles & quality metrics</div> </div> <div class="menu-arrow">›</div> </div> <div class="menu-item"> <div class="menu-icon goals-item"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M19 21L12 16L5 21V5C5 4.46957 5.21071 3.96086 5.58579 3.58579C5.96086 3.21071 6.46957 3 7 3H17C17.5304 3 18.0391 3.21071 18.4142 3.58579C18.7893 3.96086 19 4.46957 19 5V21Z" stroke="#121212" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </div> <div class="menu-content"> <div class="menu-title">Goals & Achievements</div> <div class="menu-description">Set targets & view badges</div> </div> <div class="menu-arrow">›</div> </div> <div class="menu-item"> <div class="menu-icon friends-item"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M17 21V19C17 17.9391 16.5786 16.9217 15.8284 16.1716C15.0783 15.4214 14.0609 15 13 15H5C3.93913 15 2.92172 15.4214 2.17157 16.1716C1.42143 16.9217 1 17.9391 1 19V21" stroke="#121212" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M9 11C11.2091 11 13 9.20914 13 7C13 4.79086 11.2091 3 9 3C6.79086 3 5 4.79086 5 7C5 9.20914 6.79086 11 9 11Z" stroke="#121212" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M23 21V19C22.9993 18.1137 22.7044 17.2528 22.1614 16.5523C21.6184 15.8519 20.8581 15.3516 20 15.13" stroke="#121212" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M16 3.13C16.8604 3.35031 17.623 3.85071 18.1676 4.55232C18.7122 5.25392 19.0078 6.11683 19.0078 7.005C19.0078 7.89318 18.7122 8.75608 18.1676 9.45769C17.623 10.1593 16.8604 10.6597 16 10.88" stroke="#121212" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </div> <div class="menu-content"> <div class="menu-title">Training Partners</div> <div class="menu-description">Challenges & group activities</div> </div> <div class="menu-arrow">›</div> </div> </div> <div class="swipe-indicator" id="swipeIndicator"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M7 7L12 12L17 7" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M7 14L12 19L17 14" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> Swipe for more options </div> <div class="nav-bar"> <div class="nav-item active"> <div class="nav-icon"> <svg width="22" height="22" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M3 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="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M9 22V12H15V22" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </div> Home </div> <div class="nav-item"> <div class="nav-icon"> <svg width="22" height="22" 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="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M12 6V12L16 14" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </div> Activity </div> <div class="nav-item pulse"> <div class="nav-icon"> <svg width="22" height="22" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M12 8V16" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M8 12H16" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </div> Train </div> <div class="nav-item"> <div class="nav-icon"> <svg width="22" height="22" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M19 3H5C3.89543 3 3 3.89543 3 5V19C3 20.1046 3.89543 21 5 21H19C20.1046 21 21 20.1046 21 19V5C21 3.89543 20.1046 3 19 3Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M9 14L11 16L15 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </div> Progress </div> <div class="nav-item"> <div class="nav-icon"> <svg width="22" height="22" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M19.4 15C19.2669 15.3016 19.2272 15.6362 19.286 15.9606C19.3448 16.285 19.4995 16.5843 19.73 16.82L19.79 16.88C19.976 17.0657 20.1235 17.2863 20.2241 17.5291C20.3248 17.7719 20.3766 18.0322 20.3766 18.295C20.3766 18.5578 20.3248 18.8181 20.2241 19.0609C20.1235 19.3037 19.976 19.5243 19.79 19.71C19.6043 19.896 19.3837 20.0435 19.1409 20.1441C18.8981 20.2448 18.6378 20.2966 18.375 20.2966C18.1122 20.2966 17.8519 20.2448 17.6091 20.1441C17.3663 20.0435 17.1457 19.896 16.96 19.71L16.9 19.65C16.6643 19.4195 16.365 19.2648 16.0406 19.206C15.7162 19.1472 15.3816 19.1869 15.08 19.32C14.7842 19.4468 14.532 19.6572 14.3543 19.9255C14.1766 20.1938 14.0813 20.5082 14.08 20.83V21C14.08 21.5304 13.8693 22.0391 13.4942 22.4142C13.1191 22.7893 12.6104 23 12.08 23C11.5496 23 11.0409 22.7893 10.6658 22.4142C10.2907 22.0391 10.08 21.5304 10.08 21V20.91C10.0723 20.579 9.96512 20.258 9.77251 19.9887C9.5799 19.7194 9.31074 19.5143 9 19.4C8.69838 19.2669 8.36381 19.2272 8.03941 19.286C7.71502 19.3448 7.41568 19.4995 7.18 19.73L7.12 19.79C6.93425 19.976 6.71368 20.1235 6.47088 20.2241C6.22808 20.3248 5.96783 20.3766 5.705 20.3766C5.44217 20.3766 5.18192 20.3248 4.93912 20.2241C4.69632 20.1235 4.47575 19.976 4.29 19.79C4.10405 19.6043 3.95653 19.3837 3.85588 19.1409C3.75523 18.8981 3.70343 18.6378 3.70343 18.375C3.70343 18.1122 3.75523 17.8519 3.85588 17.6091C3.95653 17.3663 4.10405 17.1457 4.29 16.96L4.35 16.9C4.58054 16.6643 4.73519 16.365 4.794 16.0406C4.85282 15.7162 4.81312 15.3816 4.68 15.08C4.55324 14.7842 4.34276 14.532 4.07447 14.3543C3.80618 14.1766 3.49179 14.0813 3.17 14.08H3C2.46957 14.08 1.96086 13.8693 1.58579 13.4942C1.21071 13.1191 1 12.6104 1 12.08C1 11.5496 1.21071 11.0409 1.58579 10.6658C1.96086 10.2907 2.46957 10.08 3 10.08H3.09C3.42099 10.0723 3.742 9.96512 4.0113 9.77251C4.28059 9.5799 4.48572 9.31074 4.6 9C4.73312 8.69838 4.77282 8.36381 4.714 8.03941C4.65519 7.71502 4.50054 7.41568 4.27 7.18L4.21 7.12C4.02405 6.93425 3.87653 6.71368 3.77588 6.47088C3.67523 6.22808 3.62343 5.96783 3.62343 5.705C3.62343 5.44217 3.67523 5.18192 3.77588 4.93912C3.87653 4.69632 4.02405 4.47575 4.21 4.29C4.39575 4.10405 4.61632 3.95653 4.85912 3.85588C5.10192 3.75523 5.36217 3.70343 5.625 3.70343C5.88783 3.70343 6.14808 3.75523 6.39088 3.85588C6.63368 3.95653 6.85425 4.10405 7.04 4.29L7.1 4.35C7.33568 4.58054 7.63502 4.73519 7.95941 4.794C8.28381 4.85282 8.61838 4.81312 8.92 4.68H9C9.29577 4.55324 9.54802 4.34276 9.72569 4.07447C9.90337
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>E-Commerce Mobile Menu</title> <style> :root { --primary: #12173D; --secondary: #F85E5E; --accent: #4AD8C2; --light: #F8F9FC; --medium: #E1E5EE; --dark: #2C3454; --text: #333333; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; -webkit-tap-highlight-color: transparent; } body { background-color: var(--light); color: var(--text); height: 100vh; width: 100%; display: flex; justify-content: center; align-items: center; overflow: hidden; } .container { max-width: 700px; width: 100%; height: 700px; background-color: var(--light); position: relative; overflow: hidden; } .phone-frame { position: relative; width: 360px; height: 680px; margin: 10px auto; border-radius: 32px; background-color: white; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1); overflow: hidden; transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1); } .status-bar { height: 50px; padding: 15px 20px; display: flex; justify-content: space-between; align-items: center; background-color: var(--primary); color: white; z-index: 10; position: sticky; top: 0; } .status-bar .logo { font-weight: 600; font-size: 18px; letter-spacing: 0.5px; } .status-bar .actions { display: flex; gap: 15px; align-items: center; } .icon { width: 24px; height: 24px; display: flex; justify-content: center; align-items: center; cursor: pointer; position: relative; } .status-bar .cart-icon { position: relative; } .cart-badge { position: absolute; top: -6px; right: -6px; background-color: var(--secondary); color: white; border-radius: 50%; width: 18px; height: 18px; font-size: 10px; display: flex; justify-content: center; align-items: center; font-weight: bold; } .menu-content { height: calc(100% - 50px); overflow-y: auto; padding: 20px; padding-bottom: 80px; } .section-title { font-size: 18px; font-weight: 600; margin-bottom: 15px; color: var(--primary); } .card-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; margin-bottom: 30px; } .menu-card { background-color: white; border-radius: 16px; overflow: hidden; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); transition: all 0.3s ease; position: relative; cursor: pointer; height: 130px; } .menu-card:active { transform: scale(0.96); } .menu-card .card-content { padding: 16px; display: flex; flex-direction: column; justify-content: space-between; height: 100%; } .menu-card .card-icon { width: 40px; height: 40px; border-radius: 12px; display: flex; justify-content: center; align-items: center; margin-bottom: 10px; } .menu-card .card-title { font-weight: 600; font-size: 15px; color: var(--dark); } .menu-card .card-description { font-size: 12px; color: #777; margin-top: 4px; line-height: 1.4; } .menu-card.product .card-icon { background-color: rgba(74, 216, 194, 0.2); color: var(--accent); } .menu-card.offer .card-icon { background-color: rgba(248, 94, 94, 0.2); color: var(--secondary); } .menu-card.account .card-icon { background-color: rgba(18, 23, 61, 0.2); color: var(--primary); } .search-bar { background-color: var(--medium); border-radius: 12px; padding: 12px 16px; display: flex; align-items: center; margin-bottom: 20px; transition: all 0.3s ease; } .search-bar:focus-within { box-shadow: 0 0 0 2px var(--accent); } .search-bar i { color: #888; margin-right: 10px; } .search-bar input { border: none; background: transparent; flex-grow: 1; outline: none; color: var(--dark); font-size: 15px; } .search-bar input::placeholder { color: #888; } .bottom-nav { position: absolute; bottom: 0; left: 0; width: 100%; height: 70px; background-color: white; display: flex; justify-content: space-around; align-items: center; border-top: 1px solid var(--medium); z-index: 10; } .nav-item { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 25%; position: relative; cursor: pointer; } .nav-item i { font-size: 20px; color: #888; transition: all 0.3s ease; margin-bottom: 4px; } .nav-item .label { font-size: 11px; color: #888; transition: all 0.3s ease; } .nav-item.active i, .nav-item.active .label { color: var(--primary); font-weight: 600; } .nav-item .indicator { position: absolute; top: -18px; width: 5px; height: 5px; border-radius: 50%; background-color: var(--primary); opacity: 0; transition: all 0.3s ease; } .nav-item.active .indicator { opacity: 1; } .floating-circle { position: absolute; border-radius: 50%; pointer-events: none; z-index: -1; opacity: 0.8; } .floating-circle.one { width: 200px; height: 200px; background: linear-gradient(135deg, var(--accent) 0%, rgba(74, 216, 194, 0.3) 100%); top: -100px; right: -70px; animation: float1 15s ease-in-out infinite alternate; } .floating-circle.two { width: 150px; height: 150px; background: linear-gradient(135deg, var(--secondary) 0%, rgba(248, 94, 94, 0.3) 100%); bottom: -60px; left: -70px; animation: float2 18s ease-in-out infinite alternate; } @keyframes float1 { 0% { transform: translate(0px, 0px); } 50% { transform: translate(-20px, 20px); } 100% { transform: translate(10px, -10px); } } @keyframes float2 { 0% { transform: translate(0px, 0px); } 50% { transform: translate(20px, -15px); } 100% { transform: translate(-15px, 10px); } } .pulse { animation: pulse 0.4s cubic-bezier(0.33, 1, 0.68, 1); } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(0.95); } 100% { transform: scale(1); } } .recommended-products { display: flex; overflow-x: auto; gap: 15px; padding: 5px 0; margin-bottom: 25px; scrollbar-width: none; } .recommended-products::-webkit-scrollbar { display: none; } .product-card { min-width: 140px; max-width: 140px; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); transition: all 0.3s ease; position: relative; } .product-card:active { transform: scale(0.96); } .product-image { width: 100%; height: 100px; background-color: var(--medium); position: relative; overflow: hidden; } .product-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .product-card:hover .product-image img { transform: scale(1.1); } .product-label { position: absolute; top: 8px; right: 8px; background-color: rgba(248, 94, 94, 0.9); color: white; font-size: 10px; font-weight: bold; padding: 3px 6px; border-radius: 4px; } .product-info { padding: 10px; background-color: white; } .product-title { font-weight: 500; font-size: 13px; margin-bottom: 4px; color: var(--dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .product-price { font-weight: 600; font-size: 14px; color: var(--primary); } /* Scale for mobile view */ @media (max-width: 400px) { .phone-frame { width: 100%; height: 100%; border-radius: 0; margin: 0; } } .banner { background: linear-gradient(135deg, var(--primary) 0%, var(--dark) 100%); border-radius: 16px; padding: 16px; margin-bottom: 25px; color: white; display: flex; align-items: center; justify-content: space-between; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } .banner-content { flex: 1; } .banner-title { font-size: 16px; font-weight: 600; margin-bottom: 4px; } .banner-text { font-size: 12px; opacity: 0.9; line-height: 1.4; margin-bottom: 10px; } .banner-button { background-color: white; color: var(--primary); border: none; padding: 6px 12px; border-radius: 6px; font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; } .banner-button:active { transform: scale(0.95); background-color: var(--medium); } .banner-image { width: 80px; height: 80px; margin-left: 10px; background-size: contain; background-repeat: no-repeat; background-position: center; } </style> </head> <body> <div class="container"> <div class="phone-frame"> <div class="status-bar"> <div class="logo">LUXEMART</div> <div class="actions"> <div class="icon notifications-icon"> <i data-feather="bell"></i> </div> <div class="icon cart-icon"> <i data-feather="shopping-bag"></i> <span class="cart-badge">3</span> </div> </div> </div> <div class="menu-content"> <div class="search-bar"> <i data-feather="search"></i> <input type="text" placeholder="Search products, brands, categories..."> </div> <div class="banner"> <div class="banner-content"> <div class="banner-title">Summer Collection</div> <div class="banner-text">Get 20% off our newest seasonal arrivals</div> <button class="banner-button">Shop Now</button> </div> <div class="banner-image" style="background-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 100 100\"><circle cx=\"50\" cy=\"40\" r=\"30\" fill=\"%23ffffff\" opacity=\"0.2\"/><path d=\"M30,85 L70,85 L70,45 C70,22.90 52.09,5 30,30 L30,85 Z\" fill=\"%23ffffff\" opacity=\"0.15\"/><path d=\"M42,55 C42,55 45,45 50,45 C55,45 58,55 58,55 L42,55 Z\" fill=\"%23ffffff\" opacity=\"0.6\"/></svg>')"></div> </div> <div class="section-title">Featured Products</div> <div class="recommended-products"> <div class="product-card"> <div class="product-image"> <img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><rect width='100' height='100' fill='%234AD8C2' opacity='0.3'/><circle cx='50' cy='50' r='25' fill='%234AD8C2' opacity='0.7'/></svg>" alt="Minimalist Watch"> <div class="product-label">NEW</div> </div> <div class="product-info"> <div class="product-title">Minimalist Watch</div> <div class="product-price">$129.99</div> </div> </div> <div class="product-card"> <div class="product-image"> <img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><rect width='100' height='100' fill='%23F85E5E' opacity='0.3'/><rect x='25' y='25' width='50' height='50' fill='%23F85E5E' opacity='0.7'/></svg>" alt="Leather Bag"> <div class="product-label">-15%</div> </div> <div class="product-info"> <div class="product-title">Leather Bag</div> <div class="product-price">$84.50</div> </div> </div> <div class="product-card"> <div class="product-image"> <img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><rect width='100' height='100' fill='%2312173D' opacity='0.3'/><polygon points='50,25 75,65 25,65' fill='%2312173D' opacity='0.7'/></svg>" alt="Smart Speaker"> </div> <div class="product-info"> <div class="product-title">Smart Speaker</div> <div class="product-price">$149.00</div> </div> </div> <div class="product-card"> <div class="product-image"> <img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><rect width='100' height='100' fill='%234AD8C2' opacity='0.3'/><path d='M25,25 L75,25 L75,75 L25,75 Z' fill='%234AD8C2' opacity='0.7'/></svg>" alt="Desk Lamp"> <div class="product-label">BEST</div> </div> <div class="product-info"> <div class="product-title">Desk Lamp</div> <div class="product-price">$59.99</div> </div> </div> </div> <div class="section-title">Shop By Category</div> <div class="card-grid"> <div class="menu-card product" id="card-1"> <div class="card-content"> <div class="card-icon"> <i data-feather="smartphone"></i> </div> <div> <div class="card-title">Electronics</div> <div class="card-description">Gadgets, phones, and smart devices</div> </div> </div> </div> <div class="menu-card product" id="card-2"> <div class="card-content"> <div class="card-icon"> <i data-feather="scissors"></i> </div> <div> <div class="card-title">Fashion</div> <div class="card-description">Clothing, shoes, and accessories</div> </div> </div> </div> <div class="menu-card product" id="card-3"> <div class="card-content"> <div class="card-icon"> <i data-feather="home"></i> </div> <div> <div class="card-title">Home & Living</div> <div class="card-description">Furniture, decor, kitchenware</div> </div> </div> </div> <div class="menu-card product" id="card-4"> <div class="card-content"> <div class="card-icon"> <i data-feather="gift"></i> </div> <div> <div class="card-title">Beauty</div> <div class="card-description">Cosmetics, skincare, fragrance</div> </div> </div> </div> </div> <div class="section-title">Offers & Deals</div> <div class="card-grid"> <div class="menu-card offer" id="card-5"> <div class="card-content"> <div class="card-icon"> <i data-feather="zap"></i> </div> <div> <div class="card-title">Flash Sales</div> <div class="card-description">Up to 50% off for the next 4 hours</div> </div> </div> </div> <div class="menu-card offer" id="card-6"> <div class="card-content"> <div class="card-icon"> <i data-feather="package"></i> </div> <div> <div class="card-title">Bundles</div> <div class="card-description">Save 15% on curated collections</div> </div> </div> </div> <div class="menu-card offer" id="card-7"> <div class="card-content"> <div class="card-icon"> <i data-feather="truck"></i> </div> <div> <div class="card-title">Free Shipping</div> <div class="card-description">No minimum order on Tuesdays</div> </div> </div> </div> <div class="menu-card offer" id="card-8"> <div class="card-content"> <div class="card-icon"> <i data-feather="calendar"></i> </div> <div> <div class="card-title">Pre-orders</div> <div class="card-description">20% off on upcoming products</div> </div> </div> </div> </div> <div class="section-title">Account</div> <div class="card-grid"> <div class="menu-card account" id="card-9"> <div class="card-content"> <div class="card-icon"> <i data-feather="user"></i> </div> <div> <div class="card-title">My Profile</div> <div class="card-description">Personal details and preferences</div> </div> </div> </div> <div class="menu-card account" id="card-10"> <div class="card-content"> <div class="card-icon"> <i data-feather="clock"></i> </div> <div> <div class="card-title">Order History</div> <div class="card-description">Track and manage purchases</div> </div> </div> </div> <div class="menu-card account" id="card-11"> <div class="card-content"> <div class="card-icon"> <i data-feather="heart"></i> </div> <div> <div class="card-title">Wishlist</div> <div class="card-description">Saved items for later</div> </div> </div> </div> <div class="menu-card account" id="card-12"> <div class="card-content"> <div class="card-icon"> <i data-feather="settings"></i> </div> <div> <div class="card-title">Settings</div> <div class="card-description">Notifications and preferences</div> </div> </div> </div> </div> </div> <div class="bottom-nav"> <div class="nav-item active" data-nav="home"> <div class="indicator"></div> <i data-feather="grid"></i> <div class="label">Menu</div> </div> <div class="nav-item" data-nav="categories"> <div class="indicator"></div> <i data-feather="layers"></i> <div class="label">Categories</div> </div> <div class="nav-item" data-nav="cart"> <div class="indicator"></div> <i data-feather="shopping-bag"></i> <div class="label">Cart</div> </div> <div class="nav-item" data-nav="account"> <div class="indicator"></div> <i data-feather="user"></i> <div class="label">Account</div> </div> </div> <div class="floating-circle one"></div> <div class="floating-circle two"></div> </div> </div> <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> <script> document.addEventListener('DOMContentLoaded', function() { // Initialize Feather Icons feather.replace(); // Bottom nav interactions const navItems = document.querySelectorAll('.nav-item'); navItems.forEach(item => { item.addEventListener('click', function() { navItems.forEach(nav => nav.classList.remove('active')); this.classList.add('active'); // Simulate haptic feedback window.navigator.vibrate && window.navigator.vibrate(15); }); }); // Card interactions const cards = document.querySelectorAll('.menu-card, .product-card'); cards.forEach(card => { card.addEventListener('click', function() { this.classList.add('pulse'); setTimeout(() => { this.classList.remove('pulse'); }, 400); // Simulate haptic feedback window.navigator.vibrate && window.navigator.vibrate(15); }); }); // Search interactions const searchBar = document.querySelector('.search-bar input'); searchBar.addEventListener('focus', function() { // Simulate haptic feedback on focus window.navigator.vibrate && window.navigator.vibrate(10); }); // Banner button interaction const bannerButton = document.querySelector('.banner-button'); bannerButton.addEventListener('click', function(e) { e.preventDefault(); // Simulate haptic feedback window.navigator.vibrate && window.navigator.vibrate(15); }); // Cart icon interaction const cartIcon = document.querySelector('.cart-icon'); cartIcon.addEventListener('click', function() { // Animate cart icon this.style.transform = 'scale(1.2)'; setTimeout(() => { this.style.transform = 'scale(1)'; }, 200); // Simulate haptic feedback window.navigator.vibrate && window.navigator.vibrate(20); // Set cart nav as active const cartNav = document.querySelector('[data-nav="cart"]'); navItems.forEach(nav => nav.classList.remove('active')); cartNav.classList.add('active'); }); // Notifications icon interaction const notificationsIcon = document.querySelector('.notifications-icon'); notificationsIcon.addEventListener('click', function() { // Animate notifications icon this.style.transform = 'scale(1.2)'; setTimeout(() => { this.style.transform = 'scale(1)'; }, 200); // Simulate haptic feedback window.navigator.vibrate && window.navigator.vibrate(20); }); // Product scroll snap functionality const productScroll = document.querySelector('.recommended-products'); let isDown = false; let startX; let scrollLeft; productScroll.addEventListener('mousedown', (e) => { isDown = true; startX = e.pageX - productScroll.offsetLeft; scrollLeft = productScroll.scrollLeft; }); productScroll.addEventListener('mouseleave', () => { isDown = false; }); productScroll.addEventListener('mouseup', () => { isDown = false; }); productScroll.addEventListener('mousemove', (e) => { if (!isDown) return; e.preventDefault(); const x = e.pageX - productScroll.offsetLeft; const walk = (x - startX) * 2; productScroll.scrollLeft = scrollLeft - walk; }); // Touch events for better mobile scrolling productScroll.addEventListener('touchstart', (e) => { startX = e.touches[0].pageX - productScroll.offsetLeft; scrollLeft = productScroll.scrollLeft; }); productScroll.addEventListener('touchmove', (e) => { if (e.touches.length !== 1) return; const x = e.touches[0].pageX - productScroll.offsetLeft; const walk = (x - startX) * 2; productScroll.scrollLeft = scrollLeft - walk; }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Voyagr - Mobile Travel Booking</title> <style> /* Reset & Base Styles */ * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Roboto, -apple-system, BlinkMacSystemFont, sans-serif; } :root { --primary: #0a97b7; --primary-dark: #087c96; --secondary: #46e1d4; --accent: #ff8a5c; --light: #f5fbff; --dark: #0e3641; --gray: #e0e8ec; --text: #1a3a42; } body { background-color: var(--light); color: var(--text); height: 100vh; width: 100%; overflow: hidden; touch-action: pan-y; position: relative; } .app-container { max-width: 700px; height: 100%; margin: 0 auto; position: relative; overflow: hidden; background: linear-gradient(160deg, var(--light) 0%, #d6f5ff 100%); } /* Header */ header { padding: 20px; display: flex; justify-content: space-between; align-items: center; position: relative; z-index: 5; } .logo { font-size: 1.8rem; font-weight: 700; color: var(--primary); letter-spacing: -0.5px; } .logo span { color: var(--accent); } .menu-toggle { background: var(--primary); border: none; width: 50px; height: 50px; border-radius: 50%; display: flex; justify-content: center; align-items: center; cursor: pointer; box-shadow: 0 4px 12px rgba(10, 151, 183, 0.2); transform: translateZ(0); transition: all 0.3s ease; } .menu-toggle:hover, .menu-toggle:focus { background: var(--primary-dark); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(10, 151, 183, 0.3); } .menu-toggle span { display: block; width: 24px; height: 2px; background: white; border-radius: 2px; position: relative; transition: all 0.3s ease; } .menu-toggle span:before, .menu-toggle span:after { content: ''; position: absolute; width: 24px; height: 2px; background: white; border-radius: 2px; transition: all 0.3s ease; } .menu-toggle span:before { transform: translateY(-8px); } .menu-toggle span:after { transform: translateY(8px); } .menu-open .menu-toggle span { background: transparent; } .menu-open .menu-toggle span:before { transform: rotate(45deg); } .menu-open .menu-toggle span:after { transform: rotate(-45deg); } /* Main Content */ .content { padding: 0 20px; max-width: 100%; position: relative; z-index: 1; transition: transform 0.5s cubic-bezier(0.86, 0, 0.07, 1); } .menu-open .content { transform: translateX(-260px); } .hero { margin-top: 20px; position: relative; border-radius: 24px; overflow: hidden; height: 200px; box-shadow: 0 15px 30px rgba(14, 54, 65, 0.1); } .hero img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s ease; } .hero:hover img { transform: scale(1.05); } .hero-content { position: absolute; bottom: 0; left: 0; width: 100%; padding: 20px; background: linear-gradient(to top, rgba(10, 30, 40, 0.9), transparent); color: white; } .hero-content h2 { font-size: 1.5rem; margin-bottom: 8px; font-weight: 600; } .feature-cards { margin-top: 30px; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 15px; } .feature-card { background: white; border-radius: 16px; padding: 20px; text-align: center; box-shadow: 0 8px 16px rgba(14, 54, 65, 0.05); transition: all 0.3s ease; cursor: pointer; } .feature-card:hover { transform: translateY(-5px); box-shadow: 0 12px 24px rgba(14, 54, 65, 0.1); } .feature-card i { font-size: 2rem; color: var(--primary); margin-bottom: 15px; display: inline-block; } .feature-card h3 { font-size: 1rem; margin-bottom: 8px; color: var(--dark); } .feature-card p { font-size: 0.85rem; color: #607d86; } /* Mobile Menu */ .mobile-menu { position: fixed; top: 0; right: -300px; width: 300px; height: 100%; background: white; z-index: 100; transition: transform 0.5s cubic-bezier(0.86, 0, 0.07, 1); box-shadow: -5px 0 30px rgba(14, 54, 65, 0.1); padding: 20px; display: flex; flex-direction: column; } .menu-open .mobile-menu { transform: translateX(-300px); } .menu-header { display: flex; justify-content: space-between; align-items: center; padding-bottom: 20px; border-bottom: 1px solid var(--gray); margin-bottom: 25px; } .user-profile { display: flex; align-items: center; gap: 10px; } .avatar { width: 45px; height: 45px; border-radius: 50%; background: var(--secondary); display: flex; justify-content: center; align-items: center; color: var(--dark); font-weight: bold; } .close-menu { background: none; border: none; font-size: 1.5rem; color: var(--text); cursor: pointer; } .menu-tabs { display: flex; gap: 5px; margin-bottom: 20px; background: var(--gray); border-radius: 10px; padding: 5px; } .menu-tab { flex: 1; padding: 10px 0; text-align: center; border-radius: 8px; font-weight: 500; cursor: pointer; transition: all 0.2s ease; } .menu-tab.active { background: white; color: var(--primary); box-shadow: 0 2px 8px rgba(14, 54, 65, 0.1); } .nav-items { display: flex; flex-direction: column; gap: 10px; } .nav-item { display: flex; align-items: center; gap: 15px; padding: 15px; border-radius: 12px; cursor: pointer; transition: all 0.2s ease; } .nav-item:hover { background: rgba(70, 225, 212, 0.1); } .nav-item.active { background: var(--primary); color: white; } .nav-item i { font-size: 1.2rem; color: inherit; } .nav-item.active i { color: white; } .nav-item-text { font-weight: 500; } .destinations { margin-top: auto; margin-bottom: 20px; } .destinations h3 { font-size: 1.1rem; margin-bottom: 15px; color: var(--dark); } .destination-cards { display: flex; gap: 15px; overflow-x: auto; padding-bottom: 10px; scroll-snap-type: x mandatory; } .destination-cards::-webkit-scrollbar { height: 6px; } .destination-cards::-webkit-scrollbar-thumb { background: var(--gray); border-radius: 10px; } .destination-card { scroll-snap-align: start; min-width: 140px; height: 100px; border-radius: 12px; overflow: hidden; position: relative; box-shadow: 0 4px 12px rgba(14, 54, 65, 0.1); } .destination-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; } .destination-card:hover img { transform: scale(1.1); } .destination-name { position: absolute; bottom: 0; left: 0; width: 100%; padding: 10px; background: linear-gradient(to top, rgba(10, 30, 40, 0.8), transparent); color: white; font-size: 0.9rem; font-weight: 500; } /* Tab Content */ .tab-content { display: none; } .tab-content.active { display: block; } /* Weather Widget */ .weather-widget { background: rgba(255, 255, 255, 0.9); border-radius: 16px; padding: 15px; margin-top: 20px; display: flex; align-items: center; justify-content: space-between; box-shadow: 0 8px 16px rgba(14, 54, 65, 0.05); } .weather-info { display: flex; align-items: center; gap: 15px; } .weather-icon { font-size: 2.5rem; color: var(--accent); } .weather-details h3 { font-size: 1.1rem; margin-bottom: 3px; } .weather-details p { font-size: 0.85rem; color: #607d86; } .weather-temp { font-size: 1.8rem; font-weight: 600; color: var(--primary); } /* Keyframes for animations */ @keyframes wave { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } } .wave-animation { animation: wave 5s ease-in-out infinite; } /* Overlay to close menu when clicked outside */ .overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(14, 54, 65, 0.4); z-index: 50; opacity: 0; visibility: hidden; transition: all 0.3s ease; } .menu-open .overlay { opacity: 1; visibility: visible; } /* Adaptive media queries */ @media (max-width: 480px) { .feature-cards { grid-template-columns: 1fr 1fr; } .hero { height: 180px; } .hero-content h2 { font-size: 1.3rem; } } </style> </head> <body> <div class="app-container"> <div class="overlay"></div> <header> <div class="logo">Voyagr<span>.</span></div> <button class="menu-toggle" aria-label="Open menu"> <span></span> </button> </header> <div class="content"> <div class="hero"> <img src="https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" alt="Beautiful beach destination"> <div class="hero-content"> <h2>Experience paradise this summer</h2> <p>Exclusive deals on tropical getaways</p> </div> </div> <div class="weather-widget"> <div class="weather-info"> <div class="weather-icon">☀️</div> <div class="weather-details"> <h3>Current Location</h3> <p>Sunny with clear skies</p> </div> </div> <div class="weather-temp">29°</div> </div> <div class="feature-cards"> <div class="feature-card"> <i class="fas fa-plane wave-animation">✈️</i> <h3>Flights</h3> <p>Find best fares</p> </div> <div class="feature-card"> <i class="fas fa-hotel">🏨</i> <h3>Hotels</h3> <p>Top-rated stays</p> </div> <div class="feature-card"> <i class="fas fa-compass">🧭</i> <h3>Experiences</h3> <p>Local adventures</p> </div> </div> </div> <div class="mobile-menu"> <div class="menu-header"> <div class="user-profile"> <div class="avatar">JD</div> <div> <div style="font-weight: 600;">Jamie Doe</div> <div style="font-size: 0.85rem; color: #607d86;">Gold Member</div> </div> </div> </div> <div class="menu-tabs"> <div class="menu-tab active" data-tab="travel">Travel</div> <div class="menu-tab" data-tab="booking">Bookings</div> <div class="menu-tab" data-tab="account">Account</div> </div> <div class="tab-content active" id="travel-tab"> <div class="nav-items"> <div class="nav-item active"> <i class="fas fa-plane">✈️</i> <span class="nav-item-text">Flights</span> </div> <div class="nav-item"> <i class="fas fa-hotel">🏨</i> <span class="nav-item-text">Hotels</span> </div> <div class="nav-item"> <i class="fas fa-car">🚗</i> <span class="nav-item-text">Car Rentals</span> </div> <div class="nav-item"> <i class="fas fa-umbrella-beach">🏖️</i> <span class="nav-item-text">Vacation Packages</span> </div> <div class="nav-item"> <i class="fas fa-compass">🧭</i> <span class="nav-item-text">Experiences</span> </div> <div class="nav-item"> <i class="fas fa-utensils">🍴</i> <span class="nav-item-text">Food & Dining</span> </div> </div> <div class="destinations"> <h3>Trending Destinations</h3> <div class="destination-cards"> <div class="destination-card"> <img src="https://images.unsplash.com/photo-1506665531195-3566af98b413?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=300&q=80" alt="Bali"> <div class="destination-name">Bali</div> </div> <div class="destination-card"> <img src="https://images.unsplash.com/photo-1568432027403-8c896b44cccc?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=300&q=80" alt="Santorini"> <div class="destination-name">Santorini</div> </div> <div class="destination-card"> <img src="https://images.unsplash.com/photo-1530060638996-3a591f3306df?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=300&q=80" alt="Kyoto"> <div class="destination-name">Kyoto</div> </div> </div> </div> </div> <div class="tab-content" id="booking-tab"> <div class="nav-items"> <div class="nav-item"> <i class="fas fa-calendar-check">📅</i> <span class="nav-item-text">Upcoming Trips</span> </div> <div class="nav-item"> <i class="fas fa-history">⏱️</i> <span class="nav-item-text">Past Bookings</span> </div> <div class="nav-item"> <i class="fas fa-heart">❤️</i> <span class="nav-item-text">Saved Trips</span> </div> </div> </div> <div class="tab-content" id="account-tab"> <div class="nav-items"> <div class="nav-item"> <i class="fas fa-user">👤</i> <span class="nav-item-text">Profile</span> </div> <div class="nav-item"> <i class="fas fa-cog">⚙️</i> <span class="nav-item-text">Settings</span> </div> <div class="nav-item"> <i class="fas fa-credit-card">💳</i> <span class="nav-item-text">Payment Methods</span> </div> <div class="nav-item"> <i class="fas fa-headset">🎧</i> <span class="nav-item-text">Support</span> </div> </div> </div> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { const menuToggle = document.querySelector('.menu-toggle'); const body = document.body; const overlay = document.querySelector('.overlay'); const menuTabs = document.querySelectorAll('.menu-tab'); const navItems = document.querySelectorAll('.nav-item'); // Mobile menu toggle menuToggle.addEventListener('click', () => { body.classList.toggle('menu-open'); }); // Close menu when clicking overlay overlay.addEventListener('click', () => { body.classList.remove('menu-open'); }); // Switch tabs in the menu menuTabs.forEach(tab => { tab.addEventListener('click', () => { // Remove active class from all tabs menuTabs.forEach(t => t.classList.remove('active')); // Add active class to clicked tab tab.classList.add('active'); // Show corresponding tab content const tabName = tab.getAttribute('data-tab'); document.querySelectorAll('.tab-content').forEach(content => { content.classList.remove('active'); }); document.getElementById(`${tabName}-tab`).classList.add('active'); }); }); // Navigation item selection navItems.forEach(item => { item.addEventListener('click', () => { // Only update active state within the visible tab const activeTab = document.querySelector('.tab-content.active'); activeTab.querySelectorAll('.nav-item').forEach(i => { i.classList.remove('active'); }); item.classList.add('active'); }); }); // Feature cards hover effect const featureCards = document.querySelectorAll('.feature-card'); featureCards.forEach(card => { card.addEventListener('mouseenter', () => { const icon = card.querySelector('i'); icon.classList.add('wave-animation'); }); card.addEventListener('mouseleave', () => { const icon = card.querySelector('i'); icon.classList.remove('wave-animation'); }); card.addEventListener('click', () => { // Simulate card selection with animation card.style.transform = 'scale(0.95)'; setTimeout(() => { card.style.transform = ''; }, 150); // Open the menu and navigate to the corresponding section body.classList.add('menu-open'); // Find the matching nav item in the menu const cardTitle = card.querySelector('h3').textContent.trim(); navItems.forEach(item => { const itemText = item.querySelector('.nav-item-text').textContent.trim(); if (itemText.includes(cardTitle)) { // Set the Travel tab as active menuTabs.forEach(t => t.classList.remove('active')); document.querySelector('.menu-tab[data-tab="travel"]').classList.add('active'); // Show travel tab content document.querySelectorAll('.tab-content').forEach(content => { content.classList.remove('active'); }); document.getElementById('travel-tab').classList.add('active'); // Set the nav item as active document.getElementById('travel-tab').querySelectorAll('.nav-item').forEach(i => { i.classList.remove('active'); }); item.classList.add('active'); } }); }); }); // Add swipe gesture to open menu let touchStartX = 0; let touchEndX = 0; document.addEventListener('touchstart', e => { touchStartX = e.changedTouches[0].screenX; }, false); document.addEventListener('touchend', e => { touchEndX = e.changedTouches[0].screenX; handleSwipe(); }, false); function handleSwipe() { if (touchEndX < touchStartX && touchStartX - touchEndX > 80) { // Swipe left to open menu body.classList.add('menu-open'); } if (touchEndX > touchStartX && touchEndX - touchStartX > 80) { // Swipe right to close menu body.classList.remove('menu-open'); } } // Animate destination cards on hover const destinationCards = document.querySelectorAll('.destination-card'); destinationCards.forEach(card => { card.addEventListener('click', () => { // Pulse animation on click card.style.transform = 'scale(0.95)'; setTimeout(() => { card.style.transform = ''; }, 150); }); }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>LocalBuzz Community App</title> <style> :root { --primary: #FF6B6B; --secondary: #4ECDC4; --accent: #FFD166; --dark: #2A363B; --light: #F7FFF7; --success: #06D6A0; --info: #118AB2; --warning: #FFB347; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } body { background-color: #f5f5f5; color: var(--dark); display: flex; flex-direction: column; height: 100vh; overflow: hidden; } .container { max-width: 700px; width: 100%; margin: 0 auto; padding: 20px; display: flex; flex-direction: column; height: 100%; } .header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; position: relative; } .logo { font-size: 1.5rem; font-weight: 700; color: var(--primary); display: flex; align-items: center; gap: 8px; } .logo-icon { background-color: var(--primary); color: white; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: transform 0.3s ease; } .logo:hover .logo-icon { transform: rotate(15deg); } .user-profile { display: flex; align-items: center; gap: 10px; cursor: pointer; position: relative; } .user-avatar { width: 40px; height: 40px; border-radius: 50%; background-color: var(--secondary); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; position: relative; overflow: hidden; transition: transform 0.3s ease; } .user-profile:hover .user-avatar { transform: scale(1.1); } .notification-badge { position: absolute; top: -5px; right: -5px; background-color: var(--primary); color: white; border-radius: 50%; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: bold; border: 2px solid white; animation: pulse 2s infinite; } @keyframes pulse { 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 107, 107, 0.7); } 70% { transform: scale(1.1); box-shadow: 0 0 0 10px rgba(255, 107, 107, 0); } 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 107, 107, 0); } } .menu-container { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; flex-grow: 1; overflow-y: auto; padding-bottom: 70px; } .menu-item { background-color: white; border-radius: 20px; padding: 20px; display: flex; flex-direction: column; cursor: pointer; transition: all 0.3s ease; position: relative; overflow: hidden; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); } .menu-item:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); } .menu-item::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 5px; background-color: var(--primary); transition: height 0.3s ease; } .menu-item:nth-child(2)::before { background-color: var(--secondary); } .menu-item:nth-child(3)::before { background-color: var(--accent); } .menu-item:nth-child(4)::before { background-color: var(--info); } .menu-item:hover::before { height: 10px; } .item-icon { width: 50px; height: 50px; border-radius: 15px; display: flex; align-items: center; justify-content: center; margin-bottom: 15px; font-size: 1.5rem; color: white; transition: transform 0.3s ease; } .menu-item:hover .item-icon { transform: scale(1.1); } .menu-item:nth-child(1) .item-icon { background-color: var(--primary); } .menu-item:nth-child(2) .item-icon { background-color: var(--secondary); } .menu-item:nth-child(3) .item-icon { background-color: var(--accent); } .menu-item:nth-child(4) .item-icon { background-color: var(--info); } .item-title { font-weight: 600; font-size: 1.1rem; margin-bottom: 5px; } .item-description { font-size: 0.85rem; color: #666; margin-bottom: 15px; } .item-footer { display: flex; justify-content: space-between; align-items: center; margin-top: auto; } .item-count { background-color: #f0f0f0; padding: 5px 10px; border-radius: 20px; font-size: 0.75rem; font-weight: 600; color: #555; } .item-action { color: var(--primary); font-size: 0.8rem; font-weight: 600; display: flex; align-items: center; gap: 5px; } .menu-item:nth-child(2) .item-action { color: var(--secondary); } .menu-item:nth-child(3) .item-action { color: var(--accent); } .menu-item:nth-child(4) .item-action { color: var(--info); } .bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; background-color: white; padding: 15px 0; display: flex; justify-content: space-around; box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.05); border-top-left-radius: 25px; border-top-right-radius: 25px; z-index: 100; } .nav-item { display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s ease; position: relative; } .nav-item.active { color: var(--primary); } .nav-icon { width: 45px; height: 45px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; margin-bottom: 5px; } .nav-item.active .nav-icon { background-color: var(--primary); color: white; transform: translateY(-15px); box-shadow: 0 5px 15px rgba(255, 107, 107, 0.3); } .nav-label { font-size: 0.75rem; font-weight: 500; transition: all 0.3s ease; opacity: 0; transform: translateY(-5px); position: absolute; bottom: -10px; } .nav-item.active .nav-label { opacity: 1; transform: translateY(0); } .featured-event { background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%); border-radius: 20px; color: white; padding: 20px; margin-bottom: 20px; display: flex; flex-direction: column; position: relative; overflow: hidden; box-shadow: 0 10px 20px rgba(255, 107, 107, 0.2); } .featured-event::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url('data:image/svg+xml;utf8,<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><circle cx="20" cy="20" r="10" fill="rgba(255,255,255,0.1)"/><circle cx="60" cy="50" r="15" fill="rgba(255,255,255,0.1)"/><circle cx="80" cy="80" r="20" fill="rgba(255,255,255,0.1)"/></svg>'); background-size: 120px; opacity: 0.3; } .event-label { background-color: rgba(0, 0, 0, 0.2); padding: 5px 10px; border-radius: 20px; font-size: 0.7rem; font-weight: bold; display: inline-block; align-self: flex-start; margin-bottom: 10px; } .event-title { font-size: 1.4rem; font-weight: 700; margin-bottom: 10px; } .event-info { display: flex; gap: 15px; margin-bottom: 15px; font-size: 0.85rem; } .event-date, .event-location { display: flex; align-items: center; gap: 5px; } .event-description { font-size: 0.9rem; margin-bottom: 15px; line-height: 1.4; opacity: 0.9; } .event-action { display: flex; justify-content: space-between; align-items: center; } .event-button { background-color: white; color: var(--primary); border: none; padding: 8px 16px; border-radius: 20px; font-weight: 600; font-size: 0.9rem; cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; gap: 5px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); } .event-button:hover { transform: scale(1.05); } .event-interested { display: flex; align-items: center; gap: 5px; font-size: 0.85rem; } .avatar-stack { display: flex; margin-right: 5px; } .avatar-stack img { width: 25px; height: 25px; border-radius: 50%; border: 2px solid white; margin-left: -10px; } .avatar-stack img:first-child { margin-left: 0; } /* Animations */ @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .menu-item { animation: fadeIn 0.5s ease forwards; opacity: 0; } .menu-item:nth-child(1) { animation-delay: 0.1s; } .menu-item:nth-child(2) { animation-delay: 0.2s; } .menu-item:nth-child(3) { animation-delay: 0.3s; } .menu-item:nth-child(4) { animation-delay: 0.4s; } .featured-event { animation: fadeIn 0.5s ease forwards; animation-delay: 0.05s; opacity: 0; } /* Loading state */ .loading-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: white; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 1000; transition: opacity 0.5s ease, visibility 0.5s ease; } .loading-spinner { width: 60px; height: 60px; border-radius: 50%; border: 5px solid #f0f0f0; border-top-color: var(--primary); animation: spin 1s linear infinite; margin-bottom: 20px; } .loading-text { font-size: 1.2rem; font-weight: 600; color: var(--dark); } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* Content panels */ .content-panel { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: white; z-index: 200; transform: translateY(100%); transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); display: flex; flex-direction: column; padding: 20px; overflow-y: auto; } .content-panel.active { transform: translateY(0); } .panel-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px solid #f0f0f0; } .panel-title { font-size: 1.4rem; font-weight: 700; color: var(--dark); } .close-panel { background-color: #f0f0f0; border: none; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s ease; } .close-panel:hover { background-color: #e0e0e0; transform: rotate(90deg); } /* Responsive design */ @media (max-width: 500px) { .menu-container { grid-template-columns: 1fr; } .featured-event { padding: 15px; } .event-title { font-size: 1.2rem; } .event-info { flex-direction: column; gap: 8px; } } /* Animations for menu items */ .menu-item:hover .item-action { animation: bounce 0.5s ease; } @keyframes bounce { 0%, 20%, 50%, 80%, 100% {transform: translateX(0);} 40% {transform: translateX(5px);} 60% {transform: translateX(3px);} } </style> </head> <body> <div class="loading-overlay" id="loading-overlay"> <div class="loading-spinner"></div> <div class="loading-text">Loading LocalBuzz...</div> </div> <div class="container"> <div class="header"> <div class="logo"> <div class="logo-icon"> <i class="fas fa-map-pin"></i> </div> LocalBuzz </div> <div class="user-profile" id="user-profile"> <div class="user-avatar"> JS <div class="notification-badge">3</div> </div> </div> </div> <div class="featured-event"> <div class="event-label">HAPPENING NOW</div> <h2 class="event-title">Riverside Farmers Market</h2> <div class="event-info"> <div class="event-date"> <i class="fas fa-calendar-alt"></i> Today, 9AM - 2PM </div> <div class="event-location"> <i class="fas fa-map-marker-alt"></i> Riverfront Park </div> </div> <p class="event-description">Fresh local produce, artisan crafts, and food trucks. Live music by The Locals starting at 11AM!</p> <div class="event-action"> <button class="event-button"> <i class="fas fa-calendar-plus"></i> RSVP Now </button> <div class="event-interested"> <div class="avatar-stack"> <img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' width='100' height='100'><circle cx='50' cy='50' r='50' fill='%234ECDC4'/><text x='50' y='60' font-family='Arial' font-size='30' fill='white' text-anchor='middle'>A</text></svg>" alt="Avatar"> <img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' width='100' height='100'><circle cx='50' cy='50' r='50' fill='%23FF6B6B'/><text x='50' y='60' font-family='Arial' font-size='30' fill='white' text-anchor='middle'>B</text></svg>" alt="Avatar"> <img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' width='100' height='100'><circle cx='50' cy='50' r='50' fill='%23FFD166'/><text x='50' y='60' font-family='Arial' font-size='30' fill='white' text-anchor='middle'>C</text></svg>" alt="Avatar"> </div> +42 going </div> </div> </div> <div class="menu-container"> <div class="menu-item" id="events-item"> <div class="item-icon"> <i class="fas fa-calendar-alt"></i> </div> <h3 class="item-title">Local Events</h3> <p class="item-description">Discover what's happening in your neighborhood</p> <div class="item-footer"> <div class="item-count">12 events today</div> <div class="item-action"> Explore <i class="fas fa-arrow-right"></i> </div> </div> </div> <div class="menu-item" id="news-item"> <div class="item-icon"> <i class="fas fa-newspaper"></i> </div> <h3 class="item-title">Community News</h3> <p class="item-description">Stay updated with local happenings</p> <div class="item-footer"> <div class="item-count">5 new stories</div> <div class="item-action"> Read <i class="fas fa-arrow-right"></i> </div> </div> </div> <div class="menu-item" id="forums-item"> <div class="item-icon"> <i class="fas fa-comments"></i> </div> <h3 class="item-title">Discussion Forums</h3> <p class="item-description">Join conversations with neighbors</p> <div class="item-footer"> <div class="item-count">3 active topics</div> <div class="item-action"> Join in <i class="fas fa-arrow-right"></i> </div> </div> </div> <div class="menu-item" id="marketplace-item"> <div class="item-icon"> <i class="fas fa-store"></i> </div> <h3 class="item-title">Local Marketplace</h3> <p class="item-description">Buy, sell, and trade with neighbors</p> <div class="item-footer"> <div class="item-count">28 new listings</div> <div class="item-action"> Shop <i class="fas fa-arrow-right"></i> </div> </div> </div> </div> </div> <div class="bottom-nav"> <div class="nav-item active"> <div class="nav-icon"> <i class="fas fa-home"></i> </div> <div class="nav-label">Home</div> </div> <div class="nav-item"> <div class="nav-icon"> <i class="fas fa-search"></i> </div> <div class="nav-label">Explore</div> </div> <div class="nav-item"> <div class="nav-icon"> <i class="fas fa-bell"></i> </div> <div class="nav-label">Alerts</div> </div> <div class="nav-item"> <div class="nav-icon"> <i class="fas fa-user"></i> </div> <div class="nav-label">Profile</div> </div> </div> <!-- Content panels --> <div class="content-panel" id="events-panel"> <div class="panel-header"> <h2 class="panel-title">Local Events</h2> <button class="close-panel" id="close-events-panel"> <i class="fas fa-times"></i> </button> </div> <div class="panel-content"> <!-- Events content will be dynamically added here --> </div> </div> <div class="content-panel" id="news-panel"> <div class="panel-header"> <h2 class="panel-title">Community News</h2> <button class="close-panel" id="close-news-panel"> <i class="fas fa-times"></i> </button> </div> <div class="panel-content"> <!-- News content will be dynamically added here --> </div> </div> <div class="content-panel" id="forums-panel"> <div class="panel-header"> <h2 class="panel-title">Discussion Forums</h2> <button class="close-panel" id="close-forums-panel"> <i class="fas fa-times"></i> </button> </div> <div class="panel-content"> <!-- Forums content will be dynamically added here --> </div> </div> <div class="content-panel" id="marketplace-panel"> <div class="panel-header"> <h2 class="panel-title">Local Marketplace</h2> <button class="close-panel" id="close-marketplace-panel"> <i class="fas fa-times"></i> </button> </div> <div class="panel-content"> <!-- Marketplace content will be dynamically added here --> </div> </div> <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script> <script> // Simulate loading document.addEventListener('DOMContentLoaded', function() { setTimeout(function() { const loadingOverlay = document.getElementById('loading-overlay'); loadingOverlay.style.opacity = '0'; setTimeout(function() { loadingOverlay.style.visibility = 'hidden'; }, 500); }, 1500); }); // Bottom navigation functionality const navItems = document.querySelectorAll('.nav-item'); navItems.forEach(item => { item.addEventListener('click', function() { navItems.forEach(navItem => navItem.classList.remove('active')); this.classList.add('active'); }); }); // Sample events data const eventsData = [ { title: "Community Garden Workshop", date: "Tomorrow, 10AM - 12PM", location: "Oakwood Community Garden", description: "Learn organic gardening techniques and help maintain our community garden.", attendees: 18 }, { title: "Monthly Town Hall Meeting", date: "July 15, 6PM - 8PM", location: "Town Center Auditorium", description: "Discussion about the upcoming infrastructure projects and community concerns.", attendees: 34 }, { title: "Summer Movie Night", date: "July 17, 8:30PM", location: "Central Park", description: "Outdoor screening of 'Back to the Future'. Bring blankets and popcorn!", attendees: 65 } ]; // Sample news data const newsData = [ { title: "New Bike Lanes Coming to Main Street", date: "2 hours ago", author: "Local Transportation Department", summary: "Construction begins next week on protected bike lanes along Main Street, from 1st Avenue to 10th Avenue." }, { title: "Community Library Extends Hours", date: "Yesterday", author: "Oakwood Library", summary: "Starting July 1st, the community library will stay open until 9PM on weekdays to accommodate evening visitors." }, { title: "Local Coffee Shop Celebrates 10 Years", date: "2 days ago", author: "Downtown Business Association", summary: "Morning Brew is offering special anniversary discounts and hosting a community celebration this weekend." } ]; // Sample forums data const forumsData = [ { title: "Recommendations for local plumbers?", author: "HomeOwner123", replies: 8, lastActivity: "15 minutes ago", summary: "I need a reliable plumber for a bathroom renovation. Anyone had good experiences locally?" }, { title: "Organizing neighborhood cleanup", author: "GreenCitizen", replies: 12, lastActivity: "2 hours ago", summary: "Looking for volunteers to help clean up the creek area this Saturday morning. Tools provided!" }, { title: "New restaurant opening downtown", author: "FoodieExplorer", replies: 23, lastActivity: "Yesterday", summary: "Has anyone heard details about the new Thai place opening next month? Menu, hours, etc?" } ]; // Sample marketplace data const marketplaceData = [ { title: "Gently Used Patio Furniture", price: "$120", seller: "OutdoorLover", location: "West Hills", posted: "3 hours ago", description: "4-piece patio set in great condition. Moving and need to sell quickly." }, { title: "Professional Lawn Care Services", price: "$25/hour", seller: "GreenThumb", location: "Citywide", posted: "Yesterday", description: "Mowing, trimming, and garden maintenance. Discounts for seniors and recurring service." }, { title: "Mountain Bike - Trek", price: "$350", seller: "CyclingEnthusiast", location: "Downtown", posted: "2 days ago", description: "Trek mountain bike, 2 years old, regularly maintained. New tires installed last month." } ]; // Function to generate panel content function generateEventsContent() { const panelContent = document.querySelector('#events-panel .panel-content'); panelContent.innerHTML = ''; eventsData.forEach(event => { const eventElement = document.createElement('div'); eventElement.className = 'panel-item'; eventElement.innerHTML = ` <h3>${event.title}</h3> <div class="event-info"> <div><i class="fas fa-calendar-alt"></i> ${event.date}</div> <div><i class="fas fa-map-marker-alt"></i> ${event.location}</div> </div> <p>${event.description}</p> <div class="item-footer"> <button class="event-button">RSVP</button> <div class="event-interested">${event.attendees} attending</div> </div> `; panelContent.appendChild(eventElement); }); } function generateNewsContent() { const panelContent = document.querySelector('#news-panel .panel-content'); panelContent.innerHTML = ''; newsData.forEach(news => { const newsElement = document.createElement('div'); newsElement.className = 'panel-item'; newsElement.innerHTML = ` <h3>${news.title}</h3> <div class="news-meta"> <span><i class="fas fa-clock"></i> ${news.date}</span> <span><i class="fas fa-user"></i> ${news.author}</span> </div> <p>${news.summary}</p> <button class="news-button">Read Full Story</button> `; panelContent.appendChild(newsElement); }); } function generateForumsContent() { const panelContent = document.querySelector('#forums-panel .panel-content'); panelContent.innerHTML = ''; forumsData.forEach(forum => { const forumElement = document.createElement('div'); forumElement.className = 'panel-item'; forumElement.innerHTML = ` <h3>${forum.title}</h3> <div class="forum-meta"> <span><i class="fas fa-user"></i> ${forum.author}</span> <span><i class="fas fa-reply"></i> ${forum.replies} replies</span> <span><i class="fas fa-clock"></i> ${forum.lastActivity}</span> </div> <p>${forum.summary}</p> <button class="forum-button">Join Discussion</button> `; panelContent.appendChild(forumElement); }); } function generateMarketplaceContent() { const panelContent = document.querySelector('#marketplace-panel .panel-content'); panelContent.innerHTML = ''; marketplaceData.forEach(item => { const itemElement = document.createElement('div'); itemElement.className = 'panel-item'; itemElement.innerHTML = ` <h3>${item.title}</h3> <div class="price">${item.price}</div> <div class="marketplace-meta"> <span><i class="fas fa-user"></i> ${item.seller}</span> <span><i class="fas fa-map-marker-alt"></i> ${item.location}</span> <span><i class="fas fa-clock"></i> ${item.posted}</span> </div> <p>${item.description}</p> <button class="marketplace-button">Contact Seller</button> `; panelContent.appendChild(itemElement); }); } // Panel toggle functionality document.getElementById('events-item').addEventListener('click', function() { generateEventsContent(); document.getElementById('events-panel').classList.add('active'); }); document.getElementById('close-events-panel').addEventListener('click', function() { document.getElementById('events-panel').classList.remove('active'); }); document.getElementById('news-item').addEventListener('click', function() { generateNewsContent(); document.getElementById('news-panel').classList.add('active'); }); document.getElementById('close-news-panel').addEventListener('click', function() { document.getElementById('news-panel').classList.remove('active'); }); document.getElementById('forums-item').addEventListener('click', function() { generateForumsContent(); document.getElementById('forums-panel').classList.add('active'); }); document.getElementById('close-forums-panel').addEventListener('click', function() { document.getElementById('forums-panel').classList.remove('active'); }); document.getElementById('marketplace-item').addEventListener('click', function() { generateMarketplaceContent(); document.getElementById('marketplace-panel').classList.add('active'); }); document.getElementById('close-marketplace-panel').addEventListener('click', function() { document.getElementById('marketplace-panel').classList.remove('active'); }); // Add Font Awesome for icons (backup in case the CDN fails) if (typeof FontAwesome === 'undefined') { const fallbackIcons = { 'fa-map-pin': '📍', 'fa-calendar-alt': '📅', 'fa-map-marker-alt': '📍', 'fa-calendar-plus': '➕', 'fa-newspaper': '📰', 'fa-comments': '💬', 'fa-store': '🏪', 'fa-home': '🏠', 'fa-search': '🔍', 'fa-bell': '🔔', 'fa-user': '👤', 'fa-times': '✖', 'fa-arrow-right': '→', 'fa-clock': '⏰', 'fa-reply': '↩️' }; document.querySelectorAll('.fas').forEach(icon => { const classes = Array.from(icon.classList); for (const className of classes) { if (fallbackIcons[className]) { icon.innerHTML = fallbackIcons[className]; break; } } }); } </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>LearnSphere Mobile Menu</title> <style> @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); :root { --primary: #4361ee; --secondary: #3a0ca3; --accent: #f72585; --light: #f8f9fa; --dark: #212529; --success: #2ec4b6; --warning: #ff9f1c; --info: #4cc9f0; --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: 'Poppins', sans-serif; } body { background-color: var(--gray-100); color: var(--dark); min-height: 100vh; display: flex; justify-content: center; align-items: center; overflow-x: hidden; } .app-container { width: 100%; max-width: 400px; height: 650px; background-color: white; border-radius: 20px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); overflow: hidden; position: relative; display: flex; flex-direction: column; } .app-header { padding: 20px; background: linear-gradient(135deg, var(--primary), var(--secondary)); color: white; display: flex; justify-content: space-between; align-items: center; position: relative; z-index: 10; } .app-header h1 { font-size: 1.5rem; font-weight: 600; margin: 0; } .user-profile { display: flex; align-items: center; gap: 10px; cursor: pointer; position: relative; } .profile-img { width: 36px; height: 36px; border-radius: 50%; background-color: var(--accent); display: flex; justify-content: center; align-items: center; color: white; font-weight: 600; font-size: 16px; } .profile-menu { position: absolute; top: 45px; right: 0; background-color: white; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); border-radius: 10px; padding: 10px 0; min-width: 180px; opacity: 0; visibility: hidden; transform: translateY(-10px); transition: all 0.3s ease; z-index: 100; } .profile-menu.active { opacity: 1; visibility: visible; transform: translateY(0); } .profile-menu-item { padding: 10px 20px; display: flex; align-items: center; gap: 10px; color: var(--gray-700); cursor: pointer; transition: background-color 0.2s ease; } .profile-menu-item:hover { background-color: var(--gray-100); color: var(--primary); } .menu-container { flex: 1; overflow-y: auto; padding: 20px; scrollbar-width: thin; scrollbar-color: var(--gray-400) var(--gray-200); } .menu-container::-webkit-scrollbar { width: 6px; } .menu-container::-webkit-scrollbar-track { background: var(--gray-200); } .menu-container::-webkit-scrollbar-thumb { background-color: var(--gray-400); border-radius: 10px; } .menu-section { margin-bottom: 25px; } .menu-section-header { display: flex; justify-content: space-between; align-items: center; color: var(--gray-800); margin-bottom: 15px; font-weight: 600; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 1px; } .menu-section-header .badge { background-color: var(--accent); color: white; padding: 2px 8px; border-radius: 10px; font-size: 0.7rem; font-weight: 500; } .course-list { display: flex; flex-direction: column; gap: 12px; } .course-item { background-color: var(--gray-100); border-radius: 12px; overflow: hidden; cursor: grab; transition: all 0.3s ease; position: relative; } .course-item.dragging { opacity: 0.7; transform: scale(0.98); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); } .course-item:active { cursor: grabbing; } .course-header { padding: 12px 16px; display: flex; justify-content: space-between; align-items: center; background-color: white; border-left: 4px solid; transition: background-color 0.2s ease; } .design-course .course-header { border-left-color: var(--accent); } .coding-course .course-header { border-left-color: var(--primary); } .math-course .course-header { border-left-color: var(--success); } .language-course .course-header { border-left-color: var(--warning); } .science-course .course-header { border-left-color: var(--info); } .course-title { display: flex; flex-direction: column; gap: 3px; } .course-title h3 { font-size: 0.95rem; font-weight: 600; color: var(--gray-800); margin: 0; } .course-title p { font-size: 0.75rem; color: var(--gray-600); margin: 0; } .course-progress { display: flex; align-items: center; gap: 5px; } .progress-bar { width: 60px; height: 6px; border-radius: 3px; background-color: var(--gray-300); overflow: hidden; } .progress-fill { height: 100%; border-radius: 3px; transition: width 0.3s ease; } .design-course .progress-fill { background-color: var(--accent); } .coding-course .progress-fill { background-color: var(--primary); } .math-course .progress-fill { background-color: var(--success); } .language-course .progress-fill { background-color: var(--warning); } .science-course .progress-fill { background-color: var(--info); } .progress-text { font-size: 0.75rem; font-weight: 600; color: var(--gray-700); } .toggle-btn { background: none; border: none; color: var(--gray-600); cursor: pointer; padding: 5px; transition: transform 0.3s ease, color 0.2s ease; } .toggle-btn:hover { color: var(--primary); } .toggle-btn.active { transform: rotate(180deg); } .course-content { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; background-color: white; } .course-content.active { max-height: 500px; } .course-modules { padding: 0 16px 16px; display: flex; flex-direction: column; gap: 10px; } .course-module { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; border-radius: 8px; background-color: var(--gray-100); transition: background-color 0.2s ease; } .course-module:hover { background-color: var(--gray-200); } .module-details { display: flex; align-items: center; gap: 10px; } .module-icon { width: 24px; height: 24px; border-radius: 6px; display: flex; justify-content: center; align-items: center; color: white; font-size: 0.7rem; } .design-course .module-icon { background-color: var(--accent); } .coding-course .module-icon { background-color: var(--primary); } .math-course .module-icon { background-color: var(--success); } .language-course .module-icon { background-color: var(--warning); } .science-course .module-icon { background-color: var(--info); } .module-details h4 { font-size: 0.85rem; font-weight: 500; color: var(--gray-800); margin: 0; } .module-status { font-size: 0.7rem; padding: 2px 8px; border-radius: 10px; font-weight: 500; } .status-completed { background-color: rgba(46, 196, 182, 0.1); color: var(--success); } .status-in-progress { background-color: rgba(255, 159, 28, 0.1); color: var(--warning); } .status-not-started { background-color: var(--gray-200); color: var(--gray-600); } .discussion-list { display: flex; flex-direction: column; gap: 12px; } .discussion-item { background-color: white; border-radius: 12px; padding: 15px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); transition: all 0.2s ease; border-left: 4px solid var(--primary); } .discussion-item:hover { box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08); transform: translateY(-2px); } .discussion-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px; } .discussion-title { font-size: 0.95rem; font-weight: 600; color: var(--gray-800); margin: 0; } .discussion-badge { font-size: 0.7rem; padding: 2px 8px; border-radius: 10px; background-color: rgba(67, 97, 238, 0.1); color: var(--primary); font-weight: 500; } .discussion-meta { display: flex; justify-content: space-between; align-items: center; font-size: 0.75rem; color: var(--gray-600); } .discussion-meta .replies { display: flex; align-items: center; gap: 5px; } .discussion-meta .replies-count { color: var(--gray-700); font-weight: 500; } .bottom-navigation { display: flex; justify-content: space-between; align-items: center; padding: 15px 20px; background-color: white; border-top: 1px solid var(--gray-200); z-index: 10; } .nav-item { display: flex; flex-direction: column; align-items: center; padding: 8px; gap: 5px; border-radius: 10px; cursor: pointer; transition: all 0.2s ease; } .nav-item:hover { background-color: var(--gray-100); } .nav-item.active { background-color: rgba(67, 97, 238, 0.1); color: var(--primary); } .nav-item i { font-size: 1.2rem; color: var(--gray-600); transition: color 0.2s ease; } .nav-item.active i { color: var(--primary); } .nav-item span { font-size: 0.7rem; font-weight: 500; color: var(--gray-700); transition: color 0.2s ease; } .nav-item.active span { color: var(--primary); } .notification-dot { width: 8px; height: 8px; background-color: var(--accent); border-radius: 50%; position: absolute; top: 6px; right: 6px; } .search-container { position: relative; margin-bottom: 20px; } .search-input { width: 100%; padding: 12px 20px 12px 40px; border: none; border-radius: 10px; background-color: var(--gray-100); color: var(--gray-800); font-size: 0.9rem; transition: all 0.3s ease; } .search-input:focus { outline: none; box-shadow: 0 0 0 2px rgba(67, 97, 238, 0.3); background-color: white; } .search-icon { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--gray-500); transition: color 0.3s ease; } .search-input:focus + .search-icon { color: var(--primary); } .action-btn { position: absolute; right: 20px; bottom: 90px; width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), var(--secondary)); display: flex; justify-content: center; align-items: center; color: white; box-shadow: 0 4px 15px rgba(67, 97, 238, 0.4); cursor: pointer; z-index: 20; transition: all 0.3s ease; } .action-btn:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(67, 97, 238, 0.5); } .action-btn i { font-size: 1.5rem; } .tab-content { display: none; animation: fadeIn 0.3s ease; } .tab-content.active { display: block; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .custom-tooltip { position: absolute; top: -40px; left: 50%; transform: translateX(-50%); background-color: var(--dark); color: white; padding: 5px 10px; border-radius: 5px; font-size: 0.75rem; opacity: 0; visibility: hidden; transition: all 0.3s ease; white-space: nowrap; z-index: 100; } .custom-tooltip::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: var(--dark) transparent transparent transparent; } .has-tooltip { position: relative; } .has-tooltip:hover .custom-tooltip { opacity: 0.9; visibility: visible; top: -35px; } .empty-state { text-align: center; padding: 30px; color: var(--gray-600); } .empty-state i { font-size: 3rem; margin-bottom: 15px; color: var(--gray-400); } .empty-state h3 { font-size: 1.1rem; margin-bottom: 10px; color: var(--gray-800); } .empty-state p { font-size: 0.85rem; margin-bottom: 20px; } .empty-state button { background-color: var(--primary); color: white; border: none; padding: 10px 20px; border-radius: 10px; font-size: 0.9rem; font-weight: 500; cursor: pointer; transition: all 0.3s ease; } .empty-state button:hover { background-color: var(--secondary); transform: translateY(-2px); } .pulse-anim { animation: pulse 1.5s infinite; } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } @media (max-width: 400px) { .app-container { border-radius: 0; height: 100vh; max-width: 100%; } .app-header h1 { font-size: 1.2rem; } .profile-img { width: 32px; height: 32px; } .menu-container { padding: 15px; } .course-title h3 { font-size: 0.85rem; } .course-title p { font-size: 0.7rem; } .progress-bar { width: 50px; } .course-module { padding: 8px; } .module-details h4 { font-size: 0.8rem; } .bottom-navigation { padding: 10px 15px; } } </style> </head> <body> <div class="app-container"> <header class="app-header"> <h1>LearnSphere</h1> <div class="user-profile" id="userProfile"> <div class="profile-img">JS</div> <div class="profile-menu" id="profileMenu"> <div class="profile-menu-item"> <i class="fas fa-user"></i> <span>My Profile</span> </div> <div class="profile-menu-item"> <i class="fas fa-cog"></i> <span>Settings</span> </div> <div class="profile-menu-item"> <i class="fas fa-certificate"></i> <span>Certificates</span> </div> <div class="profile-menu-item"> <i class="fas fa-sign-out-alt"></i> <span>Log Out</span> </div> </div> </div> </header> <div class="menu-container"> <div class="search-container"> <input type="text" class="search-input" placeholder="Search courses, discussions..."> <i class="fas fa-search search-icon"></i> </div> <div class="tab-content active" id="coursesTab"> <div class="menu-section"> <div class="menu-section-header"> <span>My Courses</span> <span class="badge">5</span> </div> <div class="course-list" id="courseList"> <div class="course-item design-course" draggable="true" data-id="1"> <div class="course-header"> <div class="course-title"> <h3>UI/UX Design Fundamentals</h3> <p>Intermediate • Week 4 of 10</p> </div> <div class="course-progress"> <div class="progress-bar"> <div class="progress-fill" style="width: 40%;"></div> </div> <span class="progress-text">40%</span> </div> <button class="toggle-btn"> <i class="fas fa-chevron-down"></i> </button> </div> <div class="course-content"> <div class="course-modules"> <div class="course-module"> <div class="module-details"> <div class="module-icon"> <i class="fas fa-check"></i> </div> <h4>Color Theory in UI Design</h4> </div> <div class="module-status status-completed">Completed</div> </div> <div class="course-module"> <div class="module-details"> <div class="module-icon"> <i class="fas fa-play"></i> </div> <h4>Gestalt Principles</h4> </div> <div class="module-status status-in-progress">In Progress</div> </div> <div class="course-module"> <div class="module-details"> <div class="module-icon"> <i class="fas fa-lock"></i> </div> <h4>User Research Methods</h4> </div> <div class="module-status status-not-started">Not Started</div> </div> </div> </div> </div> <div class="course-item coding-course" draggable="true" data-id="2"> <div class="course-header"> <div class="course-title"> <h3>JavaScript Fundamentals</h3> <p>Beginner • Week 6 of 8</p> </div> <div class="course-progress"> <div class="progress-bar"> <div class="progress-fill" style="width: 75%;"></div> </div> <span class="progress-text">75%</span> </div> <button class="toggle-btn"> <i class="fas fa-chevron-down"></i> </button> </div> <div class="course-content"> <div class="course-modules"> <div class="course-module"> <div class="module-details"> <div class="module-icon"> <i class="fas fa-check"></i> </div> <h4>Variables & Data Types</h4> </div> <div class="module-status status-completed">Completed</div> </div> <div class="course-module"> <div class="module-details"> <div class="module-icon"> <i class="fas fa-check"></i> </div> <h4>Functions & Scope</h4> </div> <div class="module-status status-completed">Completed</div> </div> <div class="course-module"> <div class="module-details"> <div class="module-icon"> <i class="fas fa-play"></i> </div> <h4>DOM Manipulation</h4> </div> <div class="module-status status-in-progress">In Progress</div> </div> </div> </div> </div> <div class="course-item math-course" draggable="true" data-id="3"> <div class="course-header"> <div class="course-title"> <h3>Statistics for Data Science</h3> <p>Advanced • Week 3 of 12</p> </div> <div class="course-progress"> <div class="progress-bar"> <div class="progress-fill" style="width: 25%;"></div> </div> <span class="progress-text">25%</span> </div> <button class="toggle-btn"> <i class="fas fa-chevron-down"></i> </button> </div> <div class="course-content"> <div class="course-modules"> <div class="course-module"> <div class="module-details"> <div class="module-icon"> <i class="fas fa-check"></i> </div> <h4>Descriptive Statistics</h4> </div> <div class="module-status status-completed">Completed</div> </div> <div class="course-module"> <div class="module-details"> <div class="module-icon"> <i class="fas fa-play"></i> </div> <h4>Probability Distributions</h4> </div> <div class="module-status status-in-progress">In Progress</div> </div> <div class="course-module"> <div class="module-details"> <div class="module-icon"> <i class="fas fa-lock"></i> </div> <h4>Hypothesis Testing</h4> </div> <div class="module-status status-not-started">Not Started</div> </div> </div> </div> </div> <div class="course-item language-course" draggable="true" data-id="4"> <div class="course-header"> <div class="course-title"> <h3>Spanish for Beginners</h3> <p>Beginner • Week 2 of 10</p> </div> <div class="course-progress"> <div class="progress-bar"> <div class="progress-fill" style="width: 20%;"></div> </div> <span class="progress-text">20%</span> </div> <button class="toggle-btn"> <i class="fas fa-chevron-down"></i> </button> </div> <div class="course-content"> <div class="course-modules"> <div class="course-module"> <div class="module-details"> <div class="module-icon"> <i class="fas fa-check"></i> </div> <h4>Basic Greetings</h4> </div> <div class="module-status status-completed">Completed</div> </div> <div class="course-module"> <div class="module-details"> <div class="module-icon"> <i class="fas fa-play"></i> </div> <h4>Present Tense Verbs</h4> </div> <div class="module-status status-in-progress">In Progress</div> </div> <div class="course-module"> <div class="module-details"> <div class="module-icon"> <i class="fas fa-lock"></i> </div> <h4>Common Expressions</h4> </div> <div class="module-status status-not-started">Not Started</div> </div> </div> </div> </div> <div class="course-item science-course" draggable="true" data-id="5"> <div class="course-header"> <div class="course-title"> <h3>Introduction to Physics</h3> <p>Intermediate • Week 5 of 8</p> </div> <div class="course-progress"> <div class="progress-bar"> <div class="progress-fill" style="width: 60%;"></div> </div> <span class="progress-text">60%</span> </div> <button class="toggle-btn"> <i class="fas fa-chevron-down"></i> </button> </div> <div class="course-content"> <div class="course-modules"> <div class="course-module"> <div class="module-details"> <div class="module-icon"> <i class="fas fa-check"></i> </div> <h4>Mechanics</h4> </div> <div class="module-status status-completed">Completed</div> </div> <div class="course-module"> <div class="module-details"> <div class="module-icon"> <i class="fas fa-check"></i> </div> <h4>Thermodynamics</h4> </div> <div class="module-status status-completed">Completed</div> </div> <div class="course-module"> <div class="module-details"> <div class="module-icon"> <i class="fas fa-play"></i> </div> <h4>Electromagnetism</h4> </div> <div class="module-status status-in-progress">In Progress</div> </div> </div> </div> </div> </div> </div> </div> <div class="tab-content" id="discussionsTab"> <div class="menu-section"> <div class="menu-section-header"> <span>Recent Discussions</span> <span class="badge">3</span> </div> <div class="discussion-list"> <div class="discussion-item"> <div class="discussion-header"> <h3 class="discussion-title">Best practices for wireframing?</h3> <span class="discussion-badge">UI/UX Design</span> </div> <div class="discussion-meta"> <span>2 hours ago</span> <div class="replies"> <span class="replies-count">12</span> <i class="fas fa-comment-alt"></i> </div> </div> </div> <div class="discussion-item"> <div class="discussion-header"> <h3 class="discussion-title">Understanding closures in JavaScript</h3> <span class="discussion-badge">JavaScript</span> </div> <div class="discussion-meta"> <span>Yesterday</span> <div class="replies"> <span class="replies-count">8</span> <i class="fas fa-comment-alt"></i> </div> </div> </div> <div class="discussion-item"> <div class="discussion-header"> <h3 class="discussion-title">Tips for memorizing Spanish vocabulary?</h3> <span class="discussion-badge">Spanish</span> </div> <div class="discussion-meta"> <span>3 days ago</span> <div class="replies"> <span class="replies-count">5</span> <i class="fas fa-comment-alt"></i> </div> </div> </div> </div> </div> <div class="menu-section"> <div class="menu-section-header"> <span>Your Posts</span> <span class="badge">1</span> </div> <div class="discussion-list"> <div class="discussion-item"> <div class="discussion-header"> <h3 class="discussion-title">How to approach responsive design?</h3> <span class="discussion-badge">UI/UX Design</span> </div> <div class="discussion-meta"> <span>1 week ago</span> <div class="replies"> <span class="replies-count">15</span> <i class="fas fa-comment-alt"></i> </div> </div> </div> </div> </div> </div> <div class="tab-content" id="progressTab"> <div class="menu-section"> <div class="menu-section-header"> <span>Course Progress</span> </div> <div class="course-list"> <div class="course-item coding-course"> <div class="course-header"> <div class="course-title"> <h3>JavaScript Fundamentals</h3> <p>6 out of 8 weeks completed</p> </div> <div class="course-progress"> <div class="progress-bar"> <div class="progress-fill" style="width: 75%;"></div> </div> <span class="progress-text">75%</span> </div> </div> </div> <div class="course-item science-course"> <div class="course-header"> <div class="course-title"> <h3>Introduction to Physics</h3> <p>5 out of 8 weeks completed</p> </div> <div class="course-progress"> <div class="progress-bar"> <div class="progress-fill" style="width: 60%;"></div> </div> <span class="progress-text">60%</span> </div> </div> </div> <div class="course-item design-course"> <div class="course-header"> <div class="course-title"> <h3>UI/UX Design Fundamentals</h3> <p>4 out of 10 weeks completed</p> </div> <div class="course-progress"> <div class="progress-bar"> <div class="progress-fill" style="width: 40%;"></div> </div> <span class="progress-text">40%</span> </div> </div> </div> <div class="course-item math-course"> <div class="course-header"> <div class="course-title"> <h3>Statistics for Data Science</h3> <p>3 out of 12 weeks completed</p> </div> <div class="course-progress"> <div class="progress-bar"> <div class="progress-fill" style="width: 25%;"></div> </div> <span class="progress-text">25%</span> </div> </div> </div> <div class="course-item language-course"> <div class="course-header"> <div class="course-title"> <h3>Spanish for Beginners</h3> <p>2 out of 10 weeks completed</p> </div> <div class="course-progress"> <div class="progress-bar"> <div class="progress-fill" style="width: 20%;"></div> </div>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CareConnect Healthcare App</title> <style> :root { --primary-color: #6a98e0; --secondary-color: #a5c8ff; --tertiary-color: #f3f7ff; --accent-color: #89d6c5; --text-primary: #333842; --text-secondary: #6b7280; --shadow: 0 8px 20px rgba(106, 152, 224, 0.1); --border-radius: 16px; --transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1); } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'SF Pro Display', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; -webkit-tap-highlight-color: transparent; -webkit-font-smoothing: antialiased; } html, body { width: 100%; height: 100%; background: linear-gradient(135deg, #f4f7ff 0%, #e8f1ff 100%); overflow-x: hidden; } .container { width: 100%; max-width: 700px; height: 100%; max-height: 700px; margin: 0 auto; padding: 20px; display: flex; flex-direction: column; position: relative; overflow: hidden; } header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding: 15px 5px; position: relative; z-index: 5; } .logo { display: flex; align-items: center; gap: 10px; } .logo-icon { width: 36px; height: 36px; background: linear-gradient(135deg, var(--primary-color), var(--accent-color)); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 18px; } .logo-text { font-weight: 700; font-size: 22px; color: var(--text-primary); } .user-profile { width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(135deg, #e3eeff, #f7faff); border: 2px solid white; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow); cursor: pointer; position: relative; overflow: hidden; transition: var(--transition); } .user-profile:hover { transform: scale(1.05); } .user-profile img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; } .user-notifications { position: absolute; top: -2px; right: -2px; width: 14px; height: 14px; background-color: #ff7676; border-radius: 50%; border: 2px solid white; } .menu-container { flex: 1; overflow: hidden; border-radius: var(--border-radius); box-shadow: var(--shadow); background: white; position: relative; } .menu-tabs { display: flex; width: 100%; padding: 15px; gap: 10px; border-bottom: 1px solid rgba(0, 0, 0, 0.05); } .tab { flex: 1; text-align: center; padding: 12px 5px; border-radius: 12px; font-size: 15px; font-weight: 600; color: var(--text-secondary); cursor: pointer; transition: var(--transition); position: relative; background: transparent; } .tab.active { color: var(--primary-color); background: var(--tertiary-color); } .tab:not(.active):hover { background: rgba(243, 247, 255, 0.6); } .tab::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%) scaleX(0); width: 20px; height: 3px; background: var(--primary-color); border-radius: 8px; transition: var(--transition); } .tab.active::after { transform: translateX(-50%) scaleX(1); } .tab-content { display: none; padding: 20px; height: calc(100% - 70px); overflow-y: auto; } .tab-content.active { display: block; animation: fadeIn 0.5s ease; } .search-bar { margin-bottom: 25px; position: relative; } .search-input { width: 100%; padding: 16px 45px; border-radius: 12px; border: none; background: var(--tertiary-color); font-size: 16px; color: var(--text-primary); transition: var(--transition); } .search-input:focus { outline: none; box-shadow: 0 0 0 2px rgba(106, 152, 224, 0.3); } .search-icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--text-secondary); } .appointments-list, .medications-list, .records-list { display: flex; flex-direction: column; gap: 15px; } .appointment-card, .medication-card, .record-card { background: white; border-radius: var(--border-radius); padding: 20px; box-shadow: 0 5px 15px rgba(106, 152, 224, 0.08); transition: var(--transition); cursor: pointer; position: relative; overflow: hidden; } .appointment-card:hover, .medication-card:hover, .record-card:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(106, 152, 224, 0.15); } .card-accent { position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: linear-gradient(to bottom, var(--primary-color), var(--accent-color)); border-radius: 2px; } .appointment-card { display: flex; flex-direction: column; gap: 10px; } .appointment-header { display: flex; justify-content: space-between; align-items: flex-start; } .appointment-type { font-size: 16px; font-weight: 700; color: var(--text-primary); margin-left: 15px; } .appointment-date { color: var(--text-secondary); font-weight: 500; font-size: 14px; background: var(--tertiary-color); padding: 5px 10px; border-radius: 6px; } .appointment-details { display: flex; align-items: center; gap: 15px; margin-left: 15px; } .doctor-avatar { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; background: var(--tertiary-color); } .doctor-avatar img { width: 100%; height: 100%; object-fit: cover; } .appointment-info { flex: 1; } .doctor-name { font-weight: 600; color: var(--text-primary); margin-bottom: 2px; } .doctor-specialty { font-size: 13px; color: var(--text-secondary); } .appointment-time { display: flex; align-items: center; gap: 5px; font-size: 13px; color: var(--text-secondary); padding: 5px 10px; background: var(--tertiary-color); border-radius: 6px; width: fit-content; margin-left: 15px; margin-top: 10px; } .time-icon { width: 14px; height: 14px; color: var(--primary-color); } .medication-card { padding-left: 20px; } .medication-name { font-weight: 700; font-size: 17px; color: var(--text-primary); margin-bottom: 8px; } .medication-dosage { display: flex; gap: 5px; align-items: center; font-size: 14px; color: var(--text-secondary); margin-bottom: 5px; } .medication-schedule { font-size: 13px; color: var(--text-primary); display: flex; align-items: center; gap: 8px; background: var(--tertiary-color); padding: 8px 12px; border-radius: 8px; width: fit-content; margin-top: 10px; } .pill-icon { color: var(--accent-color); } .record-card { padding-left: 20px; } .record-title { font-weight: 700; font-size: 17px; color: var(--text-primary); margin-bottom: 5px; } .record-date { font-size: 13px; color: var(--text-secondary); margin-bottom: 10px; } .record-details { display: flex; justify-content: space-between; align-items: center; } .record-provider { font-size: 14px; color: var(--text-primary); display: flex; align-items: center; gap: 8px; } .provider-icon { color: var(--primary-color); } .view-button { background: var(--tertiary-color); color: var(--primary-color); font-weight: 600; font-size: 13px; padding: 6px 12px; border-radius: 8px; border: none; cursor: pointer; transition: var(--transition); } .view-button:hover { background: rgba(106, 152, 224, 0.1); } .section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; } .section-title { font-weight: 700; font-size: 18px; color: var(--text-primary); } .see-all { font-size: 14px; font-weight: 600; color: var(--primary-color); padding: 5px 10px; border-radius: 8px; cursor: pointer; transition: var(--transition); } .see-all:hover { background: rgba(106, 152, 224, 0.1); } .bottom-nav { position: absolute; bottom: 20px; left: 20px; right: 20px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 12px; background: white; border-radius: 16px; box-shadow: 0 -4px 20px rgba(106, 152, 224, 0.1); z-index: 10; } .nav-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 10px; border-radius: 12px; cursor: pointer; transition: var(--transition); } .nav-item:hover { background: var(--tertiary-color); } .nav-item.active { background: var(--tertiary-color); } .nav-icon { width: 24px; height: 24px; color: var(--text-secondary); transition: var(--transition); } .nav-item.active .nav-icon { color: var(--primary-color); } .nav-text { font-size: 12px; font-weight: 500; color: var(--text-secondary); transition: var(--transition); } .nav-item.active .nav-text { color: var(--primary-color); } .add-btn { position: fixed; bottom: 85px; right: 50%; transform: translateX(50%); width: 60px; height: 60px; background: linear-gradient(135deg, var(--primary-color), #5c84c7); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; box-shadow: 0 8px 20px rgba(106, 152, 224, 0.3); cursor: pointer; transition: var(--transition); z-index: 15; } .add-btn:hover { transform: translateX(50%) scale(1.05); } .add-icon { font-size: 28px; } .add-menu { position: fixed; bottom: 150px; right: 50%; transform: translateX(50%) scale(0); display: flex; flex-direction: column; gap: 15px; z-index: 14; transition: var(--transition); opacity: 0; pointer-events: none; } .add-menu.active { transform: translateX(50%) scale(1); opacity: 1; pointer-events: all; } .add-option { display: flex; align-items: center; gap: 10px; background: white; padding: 12px; border-radius: 12px; box-shadow: var(--shadow); cursor: pointer; transition: var(--transition); } .add-option:hover { transform: translateX(-5px); } .option-icon { width: 32px; height: 32px; background: var(--tertiary-color); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--primary-color); } .option-text { font-weight: 600; color: var(--text-primary); font-size: 14px; } .backdrop { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); opacity: 0; pointer-events: none; transition: var(--transition); z-index: 13; } .backdrop.active { opacity: 1; pointer-events: all; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 50px 20px; text-align: center; color: var(--text-secondary); } .empty-icon { font-size: 60px; margin-bottom: 20px; color: #d1ddf7; } .empty-title { font-weight: 600; font-size: 18px; color: var(--text-primary); margin-bottom: 10px; } .empty-desc { font-size: 14px; line-height: 1.5; margin-bottom: 20px; max-width: 300px; } .action-btn { background: var(--primary-color); color: white; font-weight: 600; padding: 12px 20px; border-radius: 10px; border: none; cursor: pointer; transition: var(--transition); } .action-btn:hover { background: #5c84c7; transform: translateY(-2px); } ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-thumb { background-color: rgba(106, 152, 224, 0.2); border-radius: 8px; } ::-webkit-scrollbar-track { background-color: rgba(0, 0, 0, 0.02); } /* Floating reminder */ .floating-reminder { position: absolute; top: 20px; right: 20px; padding: 15px; background: white; box-shadow: var(--shadow); border-radius: 12px; max-width: 280px; z-index: 100; animation: slideIn 0.6s cubic-bezier(0.22, 1, 0.36, 1), fadeOut 0.5s ease 5.5s forwards; display: flex; gap: 12px; align-items: center; } .reminder-icon { width: 40px; height: 40px; border-radius: 10px; background: rgba(137, 214, 197, 0.2); display: flex; align-items: center; justify-content: center; color: var(--accent-color); font-size: 20px; flex-shrink: 0; } .reminder-content { flex: 1; } .reminder-title { font-weight: 700; font-size: 14px; color: var(--text-primary); margin-bottom: 4px; } .reminder-message { font-size: 13px; color: var(--text-secondary); line-height: 1.4; } .reminder-close { position: absolute; top: 10px; right: 10px; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; color: var(--text-secondary); cursor: pointer; font-size: 14px; } @keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; transform: translateX(10%); } } /* For smaller screens or responsive layout */ @media (max-width: 480px) { .container { padding: 15px; } .tab { font-size: 14px; padding: 10px 5px; } .appointment-type, .medication-name, .record-title { font-size: 15px; } .doctor-avatar { width: 36px; height: 36px; } .bottom-nav { padding: 8px; } .nav-item { padding: 8px 5px; } .nav-text { font-size: 11px; } } /* Accessibility focus styles */ button:focus, a:focus, .tab:focus, .nav-item:focus { outline: 2px solid var(--primary-color); outline-offset: 2px; } </style> </head> <body> <div class="container"> <header> <div class="logo"> <div class="logo-icon"> <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M8.5 12.5H15.5M12 9V16M12 3C16.9706 3 21 7.02944 21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </div> <span class="logo-text">CareConnect</span> </div> <div class="user-profile"> <img src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?ixlib=rb-1.2.1&auto=format&fit=crop&w=200&q=80" alt="User Profile"> <div class="user-notifications"></div> </div> </header> <div class="menu-container"> <div class="menu-tabs"> <div class="tab active" data-tab="appointments">Appointments</div> <div class="tab" data-tab="medications">Medications</div> <div class="tab" data-tab="records">Records</div> </div> <div class="tab-content active" id="appointments"> <div class="search-bar"> <div class="search-icon"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M21 21L16.65 16.65M19 11C19 15.4183 15.4183 19 11 19C6.58172 19 3 15.4183 3 11C3 6.58172 6.58172 3 11 3C15.4183 3 19 6.58172 19 11Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </div> <input type="text" class="search-input" placeholder="Search appointments..."> </div> <div class="section-header"> <h2 class="section-title">Upcoming</h2> <div class="see-all">See all</div> </div> <div class="appointments-list"> <div class="appointment-card"> <div class="card-accent"></div> <div class="appointment-header"> <div class="appointment-type">Annual Physical</div> <div class="appointment-date">Tomorrow</div> </div> <div class="appointment-details"> <div class="doctor-avatar"> <img src="https://images.unsplash.com/photo-1559839734-2b71ea197ec2?ixlib=rb-1.2.1&auto=format&fit=crop&w=200&q=80" alt="Dr. Sarah Chen"> </div> <div class="appointment-info"> <div class="doctor-name">Dr. Sarah Chen</div> <div class="doctor-specialty">Primary Care Physician</div> </div> </div> <div class="appointment-time"> <svg class="time-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 7V12L15 15M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> 10:30 AM - 11:15 AM </div> </div> <div class="appointment-card"> <div class="card-accent"></div> <div class="appointment-header"> <div class="appointment-type">Cardiology Follow-up</div> <div class="appointment-date">Mar 15</div> </div> <div class="appointment-details"> <div class="doctor-avatar"> <img src="https://images.unsplash.com/photo-1612349317150-e413f6a5b16d?ixlib=rb-1.2.1&auto=format&fit=crop&w=200&q=80" alt="Dr. James Wilson"> </div> <div class="appointment-info"> <div class="doctor-name">Dr. James Wilson</div> <div class="doctor-specialty">Cardiologist</div> </div> </div> <div class="appointment-time"> <svg class="time-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 7V12L15 15M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> 2:00 PM - 2:45 PM </div> </div> <div class="appointment-card"> <div class="card-accent"></div> <div class="appointment-header"> <div class="appointment-type">Therapy Session</div> <div class="appointment-date">Mar 22</div> </div> <div class="appointment-details"> <div class="doctor-avatar"> <img src="https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?ixlib=rb-1.2.1&auto=format&fit=crop&w=200&q=80" alt="Dr. Maya Patel"> </div> <div class="appointment-info"> <div class="doctor-name">Dr. Maya Patel</div> <div class="doctor-specialty">Psychotherapist</div> </div> </div> <div class="appointment-time"> <svg class="time-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 7V12L15 15M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> 4:30 PM - 5:30 PM </div> </div> </div> </div> <div class="tab-content" id="medications"> <div class="search-bar"> <div class="search-icon"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M21 21L16.65 16.65M19 11C19 15.4183 15.4183 19 11 19C6.58172 19 3 15.4183 3 11C3 6.58172 6.58172 3 11 3C15.4183 3 19 6.58172 19 11Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </div> <input type="text" class="search-input" placeholder="Search medications..."> </div> <div class="section-header"> <h2 class="section-title">Today's Medications</h2> <div class="see-all">See all</div> </div> <div class="medications-list"> <div class="medication-card"> <div class="card-accent"></div> <div class="medication-name">Lisinopril</div> <div class="medication-dosage"> <svg class="pill-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M10.5 13.5L3.5 20.5C2.0982 21.9018 0 20.8897 0 19C0 18.4477 0.223858 17.9187 0.622204 17.5203L7.5 10.5M10.5 13.5L17.5 20.5C18.9018 21.9018 21 20.8897 21 19C21 18.4477 20.7761 17.9187 20.3778 17.5203L13.5 10.5M10.5 13.5L13.5 10.5M7.5 10.5L3.5 6.5C2.0982 5.0982 2.0982 2.9018 3.5 1.5C4.9018 0.0982 7.0982 0.0982 8.5 1.5L12.5 5.5M7.5 10.5L12.5 5.5M13.5 10.5L17.5 6.5C18.9018 5.0982 21.0982 5.0982 22.5 6.5C23.9018 7.9018 23.9018 10.0982 22.5 11.5L18.5 15.5M12.5 5.5L18.5 15.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> 10mg, 1 tablet </div> <div class="medication-schedule"> <svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 7V12L15 15M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> Morning, with breakfast </div> </div> <div class="medication-card"> <div class="card-accent"></div> <div class="medication-name">Metformin</div> <div class="medication-dosage"> <svg class="pill-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M10.5 13.5L3.5 20.5C2.0982 21.9018 0 20.8897 0 19C0 18.4477 0.223858 17.9187 0.622204 17.5203L7.5 10.5M10.5 13.5L17.5 20.5C18.9018 21.9018 21 20.8897 21 19C21 18.4477 20.7761 17.9187 20.3778 17.5203L13.5 10.5M10.5 13.5L13.5 10.5M7.5 10.5L3.5 6.5C2.0982 5.0982 2.0982 2.9018 3.5 1.5C4.9018 0.0982 7.0982 0.0982 8.5 1.5L12.5 5.5M7.5 10.5L12.5 5.5M13.5 10.5L17.5 6.5C18.9018 5.0982 21.0982 5.0982 22.5 6.5C23.9018 7.9018 23.9018 10.0982 22.5 11.5L18.5 15.5M12.5 5.5L18.5 15.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> 500mg, 2 tablets </div> <div class="medication-schedule"> <svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 7V12L15 15M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> Evening, after dinner </div> </div> <div class="medication-card"> <div class="card-accent"></div> <div class="medication-name">Vitamin D3</div> <div class="medication-dosage"> <svg class="pill-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M10.5 13.5L3.5 20.5C2.0982 21.9018 0 20.8897 0 19C0 18.4477 0.223858 17.9187 0.622204 17.5203L7.5 10.5M10.5 13.5L17.5 20.5C18.9018 21.9018 21 20.8897 21 19C21 18.4477 20.7761 17.9187 20.3778 17.5203L13.5 10.5M10.5 13.5L13.5 10.5M7.5 10.5L3.5 6.5C2.0982 5.0982 2.0982 2.9018 3.5 1.5C4.9018 0.0982 7.0982 0.0982 8.5 1.5L12.5 5.5M7.5 10.5L12.5 5.5M13.5 10.5L17.5 6.5C18.9018 5.0982 21.0982 5.0982 22.5 6.5C23.9018 7.9018 23.9018 10.0982 22.5 11.5L18.5 15.5M12.5 5.5L18.5 15.5" stroke="currentColor" stroke-width="
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> :root { --primary-color: #6200ea; --secondary-color: #03dac6; --accent-color: #ff7597; --text-color: #333; --light-gray: #f5f5f5; --medium-gray: #e0e0e0; --white: #ffffff; --shadow: 0 4px 12px rgba(0, 0, 0, 0.08); --transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1); } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } body { background-color: var(--light-gray); color: var(--text-color); height: 700px; width: 700px; display: flex; justify-content: center; align-items: center; overflow: hidden; } .app-container { width: 375px; height: 650px; background-color: var(--white); border-radius: 24px; box-shadow: var(--shadow); overflow: hidden; position: relative; display: flex; flex-direction: column; } .app-header { padding: 24px 20px 12px; background-color: var(--primary-color); color: white; position: relative; z-index: 10; } .app-header h1 { font-size: 24px; font-weight: 700; margin-bottom: 8px; } .date-selector { display: flex; margin-top: 16px; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; padding-bottom: 12px; gap: 10px; } .date-selector::-webkit-scrollbar { display: none; } .date-item { display: flex; flex-direction: column; align-items: center; min-width: 60px; padding: 10px 0; border-radius: 16px; background-color: rgba(255, 255, 255, 0.1); transition: var(--transition); cursor: pointer; } .date-item.active { background-color: var(--white); color: var(--primary-color); transform: scale(1.05); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); } .day-name { font-size: 14px; font-weight: 500; text-transform: uppercase; margin-bottom: 4px; } .day-number { font-size: 20px; font-weight: 700; } .section-tabs { display: flex; justify-content: space-around; padding: 16px 16px 0; background-color: var(--white); position: relative; border-bottom: 1px solid var(--medium-gray); } .tab { padding: 10px 16px; font-weight: 600; color: #888; position: relative; cursor: pointer; transition: var(--transition); } .tab.active { color: var(--primary-color); } .tab-indicator { position: absolute; bottom: -1px; height: 3px; background-color: var(--primary-color); border-radius: 3px 3px 0 0; transition: var(--transition); } .main-content { flex: 1; overflow-y: auto; padding: 20px; position: relative; } .time-slot { display: flex; border-radius: 12px; margin-bottom: 16px; padding: 16px; background-color: var(--white); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); transition: var(--transition); position: relative; overflow: hidden; cursor: pointer; } .time-slot:active { transform: scale(0.98); } .time-slot.expanded { height: 180px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); } .time-indicator { display: flex; flex-direction: column; align-items: center; margin-right: 16px; } .time-text { font-size: 16px; font-weight: 700; color: var(--primary-color); } .time-divider { width: 2px; height: 20px; background-color: var(--medium-gray); margin: 4px 0; } .slot-icon { width: 40px; height: 40px; border-radius: 10px; background-color: var(--light-gray); display: flex; justify-content: center; align-items: center; margin-right: 16px; } .slot-icon i { color: var(--primary-color); font-size: 20px; } .slot-info { flex: 1; } .slot-title { font-size: 16px; font-weight: 600; margin-bottom: 4px; } .slot-subtitle { font-size: 14px; color: #666; margin-bottom: 16px; } .slot-details { height: 0; opacity: 0; transform: translateY(10px); transition: var(--transition); } .time-slot.expanded .slot-details { height: auto; opacity: 1; transform: translateY(0); } .detail-item { display: flex; align-items: center; margin-bottom: 8px; font-size: 14px; } .detail-item i { color: var(--accent-color); margin-right: 8px; font-size: 16px; } .action-buttons { display: flex; gap: 10px; margin-top: 16px; } .btn { padding: 10px 16px; border-radius: 8px; font-weight: 600; font-size: 14px; cursor: pointer; transition: var(--transition); border: none; display: flex; align-items: center; justify-content: center; } .btn-primary { background-color: var(--primary-color); color: white; } .btn-secondary { background-color: var(--light-gray); color: var(--text-color); } .btn:active { transform: scale(0.96); } .btn i { margin-right: 6px; } .add-event-button { position: absolute; bottom: 20px; right: 20px; width: 60px; height: 60px; border-radius: 30px; background-color: var(--secondary-color); color: var(--text-color); display: flex; justify-content: center; align-items: center; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); cursor: pointer; transition: var(--transition); z-index: 10; border: none; font-size: 24px; } .add-event-button:active { transform: scale(0.92); } .add-event-button i { color: white; font-size: 28px; } .bottom-nav { display: flex; justify-content: space-around; padding: 16px; background-color: var(--white); border-top: 1px solid var(--medium-gray); } .nav-item { display: flex; flex-direction: column; align-items: center; color: #888; transition: var(--transition); cursor: pointer; } .nav-item.active { color: var(--primary-color); } .nav-item i { font-size: 22px; margin-bottom: 4px; } .nav-text { font-size: 12px; font-weight: 500; } .swipe-hint { display: flex; justify-content: center; align-items: center; padding: 8px; font-size: 12px; color: #888; background-color: rgba(255, 255, 255, 0.7); position: absolute; bottom: 80px; left: 50%; transform: translateX(-50%); border-radius: 20px; padding: 8px 16px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); animation: fadeInOut 5s forwards; } .swipe-hint i { margin-right: 6px; animation: swipeAnimation 2s infinite; } @keyframes fadeInOut { 0% { opacity: 0; } 10% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } } @keyframes swipeAnimation { 0% { transform: translateX(-3px); } 50% { transform: translateX(3px); } 100% { transform: translateX(-3px); } } .status-indicator { position: absolute; top: 16px; right: 16px; width: 12px; height: 12px; border-radius: 6px; } .status-available { background-color: #4CAF50; box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2); } .status-busy { background-color: #F44336; box-shadow: 0 0 0 2px rgba(244, 67, 54, 0.2); } .time-slot-controls { position: absolute; right: 16px; display: flex; gap: 8px; } .time-slot:not(.expanded) .time-slot-controls { align-items: center; height: 100%; top: 0; } .control-button { width: 36px; height: 36px; border-radius: 18px; background-color: var(--light-gray); display: flex; justify-content: center; align-items: center; cursor: pointer; transition: var(--transition); border: none; } .control-button:hover { background-color: var(--medium-gray); } .control-button i { color: var(--text-color); font-size: 18px; } /* Custom scrollbar */ .main-content::-webkit-scrollbar { width: 6px; } .main-content::-webkit-scrollbar-track { background: var(--light-gray); } .main-content::-webkit-scrollbar-thumb { background-color: var(--medium-gray); border-radius: 3px; } </style> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> </head> <body> <div class="app-container"> <div class="app-header"> <h1>Schedule Master</h1> <p>Book and manage your events seamlessly</p> <div class="date-selector"> <div class="date-item"> <span class="day-name">Mon</span> <span class="day-number">12</span> </div> <div class="date-item"> <span class="day-name">Tue</span> <span class="day-number">13</span> </div> <div class="date-item active"> <span class="day-name">Wed</span> <span class="day-number">14</span> </div> <div class="date-item"> <span class="day-name">Thu</span> <span class="day-number">15</span> </div> <div class="date-item"> <span class="day-name">Fri</span> <span class="day-number">16</span> </div> <div class="date-item"> <span class="day-name">Sat</span> <span class="day-number">17</span> </div> <div class="date-item"> <span class="day-name">Sun</span> <span class="day-number">18</span> </div> </div> </div> <div class="section-tabs"> <div class="tab" data-tab="upcoming">Upcoming</div> <div class="tab active" data-tab="today">Today</div> <div class="tab" data-tab="week">Week</div> <div class="tab-indicator" style="width: 60px; left: 155px;"></div> </div> <div class="main-content"> <div class="time-slot"> <div class="time-indicator"> <span class="time-text">9:00</span> <div class="time-divider"></div> <span class="time-text">10:30</span> </div> <div class="slot-icon"> <i class="material-icons">videocam</i> </div> <div class="slot-info"> <div class="slot-title">Product Design Review</div> <div class="slot-subtitle">Zoom Meeting • 90 minutes</div> <div class="slot-details"> <div class="detail-item"> <i class="material-icons">group</i> <span>with Design Team (6 participants)</span> </div> <div class="detail-item"> <i class="material-icons">notes</i> <span>Review Q2 product designs and UI updates</span> </div> <div class="action-buttons"> <button class="btn btn-secondary"> <i class="material-icons">edit</i> Edit </button> <button class="btn btn-primary"> <i class="material-icons">login</i> Join </button> </div> </div> </div> <div class="status-indicator status-busy"></div> <div class="time-slot-controls"> <button class="control-button toggle-expand"> <i class="material-icons">expand_more</i> </button> </div> </div> <div class="time-slot"> <div class="time-indicator"> <span class="time-text">11:00</span> <div class="time-divider"></div> <span class="time-text">12:00</span> </div> <div class="slot-icon"> <i class="material-icons">lunch_dining</i> </div> <div class="slot-info"> <div class="slot-title">Lunch Break</div> <div class="slot-subtitle">Personal • 60 minutes</div> <div class="slot-details"> <div class="detail-item"> <i class="material-icons">location_on</i> <span>Cafe Tranquil, 3rd floor</span> </div> <div class="detail-item"> <i class="material-icons">notes</i> <span>Don't forget to pick up the salad order</span> </div> <div class="action-buttons"> <button class="btn btn-secondary"> <i class="material-icons">edit</i> Edit </button> <button class="btn btn-primary"> <i class="material-icons">notifications</i> Remind </button> </div> </div> </div> <div class="status-indicator status-busy"></div> <div class="time-slot-controls"> <button class="control-button toggle-expand"> <i class="material-icons">expand_more</i> </button> </div> </div> <div class="time-slot"> <div class="time-indicator"> <span class="time-text">13:30</span> <div class="time-divider"></div> <span class="time-text">14:30</span> </div> <div class="slot-icon"> <i class="material-icons">handshake</i> </div> <div class="slot-info"> <div class="slot-title">Client Presentation</div> <div class="slot-subtitle">Conference Room A • 60 minutes</div> <div class="slot-details"> <div class="detail-item"> <i class="material-icons">group</i> <span>NovaTech Team + 3 client stakeholders</span> </div> <div class="detail-item"> <i class="material-icons">description</i> <span>Final presentation of the mobile app redesign</span> </div> <div class="action-buttons"> <button class="btn btn-secondary"> <i class="material-icons">share</i> Share </button> <button class="btn btn-primary"> <i class="material-icons">edit</i> Prepare </button> </div> </div> </div> <div class="status-indicator status-busy"></div> <div class="time-slot-controls"> <button class="control-button toggle-expand"> <i class="material-icons">expand_more</i> </button> </div> </div> <div class="time-slot"> <div class="time-indicator"> <span class="time-text">15:00</span> <div class="time-divider"></div> <span class="time-text">16:00</span> </div> <div class="slot-icon"> <i class="material-icons">schedule</i> </div> <div class="slot-info"> <div class="slot-title">Available Slot</div> <div class="slot-subtitle">Open for scheduling • 60 minutes</div> <div class="slot-details"> <div class="detail-item"> <i class="material-icons">info</i> <span>This time is currently unscheduled</span> </div> <div class="action-buttons"> <button class="btn btn-secondary"> <i class="material-icons">block</i> Block </button> <button class="btn btn-primary"> <i class="material-icons">add</i> Schedule </button> </div> </div> </div> <div class="status-indicator status-available"></div> <div class="time-slot-controls"> <button class="control-button toggle-expand"> <i class="material-icons">expand_more</i> </button> </div> </div> <div class="time-slot"> <div class="time-indicator"> <span class="time-text">16:30</span> <div class="time-divider"></div> <span class="time-text">17:30</span> </div> <div class="slot-icon"> <i class="material-icons">sports</i> </div> <div class="slot-info"> <div class="slot-title">Yoga Session</div> <div class="slot-subtitle">Wellness Room • 60 minutes</div> <div class="slot-details"> <div class="detail-item"> <i class="material-icons">person</i> <span>Instructor: Maya P.</span> </div> <div class="detail-item"> <i class="material-icons">info</i> <span>Bring your own mat and water</span> </div> <div class="action-buttons"> <button class="btn btn-secondary"> <i class="material-icons">close</i> Cancel </button> <button class="btn btn-primary"> <i class="material-icons">alarm</i> Remind </button> </div> </div> </div> <div class="status-indicator status-busy"></div> <div class="time-slot-controls"> <button class="control-button toggle-expand"> <i class="material-icons">expand_more</i> </button> </div> </div> </div> <div class="swipe-hint"> <i class="material-icons">swipe</i> <span>Swipe left to reschedule, right to cancel</span> </div> <button class="add-event-button"> <i class="material-icons">add</i> </button> <div class="bottom-nav"> <div class="nav-item"> <i class="material-icons">home</i> <span class="nav-text">Home</span> </div> <div class="nav-item active"> <i class="material-icons">calendar_today</i> <span class="nav-text">Schedule</span> </div> <div class="nav-item"> <i class="material-icons">explore</i> <span class="nav-text">Discover</span> </div> <div class="nav-item"> <i class="material-icons">person</i> <span class="nav-text">Profile</span> </div> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { // Date selector const dateItems = document.querySelectorAll('.date-item'); dateItems.forEach(item => { item.addEventListener('click', function() { dateItems.forEach(di => di.classList.remove('active')); this.classList.add('active'); }); }); // Tabs const tabs = document.querySelectorAll('.tab'); const tabIndicator = document.querySelector('.tab-indicator'); tabs.forEach(tab => { tab.addEventListener('click', function() { tabs.forEach(t => t.classList.remove('active')); this.classList.add('active'); // Move indicator const tabWidth = this.offsetWidth; const tabLeft = this.offsetLeft; tabIndicator.style.width = tabWidth + 'px'; tabIndicator.style.left = tabLeft + 'px'; }); }); // Time slot expansion const expandButtons = document.querySelectorAll('.toggle-expand'); expandButtons.forEach(button => { button.addEventListener('click', function(e) { e.stopPropagation(); const timeSlot = this.closest('.time-slot'); timeSlot.classList.toggle('expanded'); const icon = this.querySelector('i'); if (timeSlot.classList.contains('expanded')) { icon.textContent = 'expand_less'; } else { icon.textContent = 'expand_more'; } }); }); // Time slot click for expansion const timeSlots = document.querySelectorAll('.time-slot'); timeSlots.forEach(slot => { slot.addEventListener('click', function() { // First collapse all other slots timeSlots.forEach(s => { if (s !== this && s.classList.contains('expanded')) { s.classList.remove('expanded'); const btn = s.querySelector('.toggle-expand i'); btn.textContent = 'expand_more'; } }); // Toggle this slot this.classList.toggle('expanded'); const icon = this.querySelector('.toggle-expand i'); if (this.classList.contains('expanded')) { icon.textContent = 'expand_less'; } else { icon.textContent = 'expand_more'; } }); }); // Bottom nav const navItems = document.querySelectorAll('.nav-item'); navItems.forEach(item => { item.addEventListener('click', function() { navItems.forEach(ni => ni.classList.remove('active')); this.classList.add('active'); }); }); // Add event button const addButton = document.querySelector('.add-event-button'); addButton.addEventListener('click', function() { // Just add a subtle animation when clicked this.style.transform = 'scale(0.9)'; setTimeout(() => { this.style.transform = 'scale(1)'; }, 150); }); // Swipe gestures for time slots let touchStartX = 0; let touchEndX = 0; timeSlots.forEach(slot => { slot.addEventListener('touchstart', function(e) { touchStartX = e.changedTouches[0].screenX; }, false); slot.addEventListener('touchend', function(e) { touchEndX = e.changedTouches[0].screenX; handleSwipe(this); }, false); }); function handleSwipe(slot) { if (touchEndX < touchStartX - 100) { // Swipe left - reschedule animation slot.style.transform = 'translateX(-100px)'; slot.style.opacity = '0.5'; setTimeout(() => { slot.style.transform = 'translateX(0)'; slot.style.opacity = '1'; }, 500); } if (touchEndX > touchStartX + 100) { // Swipe right - cancel animation slot.style.transform = 'translateX(100px)'; slot.style.opacity = '0.5'; setTimeout(() => { slot.style.transform = 'translateX(0)'; slot.style.opacity = '1'; }, 500); } } // Mouse drag emulation for desktop viewing timeSlots.forEach(slot => { let isDragging = false; let startX; slot.addEventListener('mousedown', function(e) { isDragging = true; startX = e.clientX; slot.style.transition = 'none'; // Disable transition during drag }); document.addEventListener('mousemove', function(e) { if (!isDragging) return; const diffX = e.clientX - startX; if (Math.abs(diffX) < 100) { slot.style.transform = `translateX(${diffX}px)`; slot.style.opacity = 1 - Math.abs(diffX) / 200; } }); document.addEventListener('mouseup', function() { if (!isDragging) return; isDragging = false; slot.style.transition = 'var(--transition)'; slot.style.transform = 'translateX(0)'; slot.style.opacity = '1'; }); }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500&family=Inter:wght@300;400;500&display=swap'); *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --primary-color: #222222; --secondary-color: #f4f1eb; --accent-color: #ae8e65; --text-color: #333333; --transition-slow: 0.5s cubic-bezier(0.76, 0, 0.24, 1); --transition-fast: 0.3s cubic-bezier(0.76, 0, 0.24, 1); } body { font-family: 'Inter', sans-serif; background-color: var(--secondary-color); color: var(--text-color); max-width: 700px; height: 100vh; margin: 0 auto; overflow-x: hidden; position: relative; } .portfolio-container { height: 100%; display: flex; flex-direction: column; overflow: hidden; } header { padding: 20px; display: flex; justify-content: space-between; align-items: center; z-index: 100; } .logo { font-family: 'Cormorant Garamond', serif; font-weight: 300; font-size: 1.2rem; letter-spacing: 1px; color: var(--primary-color); } .menu-toggle { width: 30px; height: 20px; position: relative; cursor: pointer; z-index: 200; } .menu-toggle span { display: block; position: absolute; height: 1px; width: 100%; background: var(--primary-color); opacity: 1; left: 0; transform: rotate(0deg); transition: var(--transition-fast); } .menu-toggle span:nth-child(1) { top: 0px; } .menu-toggle span:nth-child(2) { top: 8px; width: 70%; } .menu-toggle span:nth-child(3) { top: 16px; } .menu-toggle.active span:nth-child(1) { top: 8px; transform: rotate(45deg); background: var(--secondary-color); } .menu-toggle.active span:nth-child(2) { opacity: 0; width: 0%; } .menu-toggle.active span:nth-child(3) { top: 8px; transform: rotate(-45deg); background: var(--secondary-color); } .mobile-menu { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--primary-color); display: flex; flex-direction: column; justify-content: center; z-index: 100; transform: translateY(-100%); transition: transform var(--transition-slow); } .mobile-menu.active { transform: translateY(0); } .nav-items { list-style: none; padding: 0 40px; } .nav-item { margin-bottom: 10px; } .nav-link { font-family: 'Cormorant Garamond', serif; color: var(--secondary-color); font-size: 2.5rem; text-decoration: none; font-weight: 300; letter-spacing: 1px; position: relative; display: inline-block; padding: 5px 0; transition: var(--transition-fast); cursor: pointer; } .nav-link::after { content: ''; position: absolute; width: 0; height: 1px; bottom: 0; left: 0; background-color: var(--accent-color); transition: width var(--transition-fast); } .nav-link:hover { color: var(--accent-color); } .nav-link:hover::after { width: 100%; } .project-details { max-height: 0; overflow: hidden; transition: max-height var(--transition-fast); padding-left: 20px; opacity: 0; } .project-item { margin: 10px 0; font-size: 1rem; color: rgba(244, 241, 235, 0.8); display: flex; align-items: center; } .project-item::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background-color: var(--accent-color); margin-right: 10px; } .nav-item.expanded .project-details { max-height: 500px; opacity: 1; transition: max-height var(--transition-slow), opacity 0.6s ease; } .expand-icon { display: inline-block; margin-left: 10px; font-size: 1.2rem; transform: rotate(0deg); transition: transform var(--transition-fast); } .nav-item.expanded .expand-icon { transform: rotate(45deg); } .social-links { display: flex; gap: 20px; padding: 0 40px; margin-top: 40px; } .social-link { color: var(--secondary-color); font-size: 1.2rem; transition: var(--transition-fast); } .social-link:hover { color: var(--accent-color); transform: translateY(-3px); } .main-content { flex: 1; display: flex; align-items: center; justify-content: center; padding: 20px; text-align: center; position: relative; z-index: 1; } .welcome-text { max-width: 500px; } h1 { font-family: 'Cormorant Garamond', serif; font-weight: 400; font-size: 2.5rem; margin-bottom: 20px; color: var(--primary-color); letter-spacing: 1px; } p { line-height: 1.6; margin-bottom: 30px; font-weight: 300; } .cta-button { display: inline-block; padding: 12px 24px; background-color: var(--primary-color); color: var(--secondary-color); text-decoration: none; border: none; font-family: 'Inter', sans-serif; font-size: 0.9rem; letter-spacing: 1px; cursor: pointer; transition: var(--transition-fast); position: relative; overflow: hidden; } .cta-button::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: var(--accent-color); transition: var(--transition-slow); z-index: -1; } .cta-button:hover::before { left: 0; } .cursor { width: 20px; height: 20px; border-radius: 50%; background-color: rgba(174, 142, 101, 0.3); position: fixed; pointer-events: none; z-index: 300; transform: translate(-50%, -50%) scale(1); transition: transform 0.1s; } @media (max-width: 500px) { .nav-link { font-size: 2rem; } h1 { font-size: 2rem; } } /* Subtle gradient background */ .bg-pattern { position: absolute; bottom: 0; right: 0; width: 300px; height: 300px; background: radial-gradient(circle at bottom right, rgba(174, 142, 101, 0.1), transparent 70%); z-index: 0; } /* Subtle line decoration */ .line-decor { position: absolute; top: 40px; right: 40px; width: 40px; height: 1px; background-color: var(--accent-color); } .line-decor::after { content: ''; position: absolute; top: 0; right: 0; width: 1px; height: 40px; background-color: var(--accent-color); } </style> </head> <body> <div class="portfolio-container"> <header> <div class="logo">ALEX MORGAN</div> <div class="menu-toggle"> <span></span> <span></span> <span></span> </div> </header> <div class="mobile-menu"> <ul class="nav-items"> <li class="nav-item"> <div class="nav-link">About <span class="expand-icon">+</span></div> <div class="project-details"> <div class="project-item">Design Philosophy</div> <div class="project-item">Experience</div> <div class="project-item">Skills</div> </div> </li> <li class="nav-item"> <div class="nav-link">Projects <span class="expand-icon">+</span></div> <div class="project-details"> <div class="project-item">Kinetic Typography Series</div> <div class="project-item">Immersive Exhibition Design</div> <div class="project-item">Minimalist Brand Identity</div> <div class="project-item">Editorial Layouts</div> </div> </li> <li class="nav-item"> <div class="nav-link">Case Studies <span class="expand-icon">+</span></div> <div class="project-details"> <div class="project-item">Reimagining Digital Narratives</div> <div class="project-item">Typography in Motion</div> <div class="project-item">Spatial Design Explorations</div> </div> </li> <li class="nav-item"> <div class="nav-link">Contact</div> </li> </ul> <div class="social-links"> <a href="#" class="social-link">Dribbble</a> <a href="#" class="social-link">Instagram</a> <a href="#" class="social-link">LinkedIn</a> </div> </div> <div class="main-content"> <div class="welcome-text"> <h1>Crafting Visual Narratives</h1> <p>Independent designer specializing in typography, motion, and spatial experiences. Creating intentional designs that connect emotion with functionality.</p> <a href="#" class="cta-button">View Selected Work</a> </div> </div> <div class="bg-pattern"></div> <div class="line-decor"></div> </div> <div class="cursor"></div> <script> document.addEventListener('DOMContentLoaded', function() { const menuToggle = document.querySelector('.menu-toggle'); const mobileMenu = document.querySelector('.mobile-menu'); const navItems = document.querySelectorAll('.nav-item'); const cursor = document.querySelector('.cursor'); // Custom cursor document.addEventListener('mousemove', function(e) { cursor.style.left = e.clientX + 'px'; cursor.style.top = e.clientY + 'px'; }); document.addEventListener('mousedown', function() { cursor.style.transform = 'translate(-50%, -50%) scale(0.8)'; }); document.addEventListener('mouseup', function() { cursor.style.transform = 'translate(-50%, -50%) scale(1)'; }); // Menu toggle menuToggle.addEventListener('click', function() { this.classList.toggle('active'); mobileMenu.classList.toggle('active'); document.body.style.overflow = this.classList.contains('active') ? 'hidden' : 'auto'; }); // Expandable sections navItems.forEach(item => { const navLink = item.querySelector('.nav-link'); if (navLink.querySelector('.expand-icon')) { navLink.addEventListener('click', function() { item.classList.toggle('expanded'); // Close other expanded items navItems.forEach(otherItem => { if (otherItem !== item && otherItem.classList.contains('expanded')) { otherItem.classList.remove('expanded'); } }); }); } }); // Link hover effects with cursor const allLinks = document.querySelectorAll('a, .nav-link, .menu-toggle'); allLinks.forEach(link => { link.addEventListener('mouseenter', function() { cursor.style.transform = 'translate(-50%, -50%) scale(1.5)'; cursor.style.backgroundColor = 'rgba(174, 142, 101, 0.2)'; }); link.addEventListener('mouseleave', function() { cursor.style.transform = 'translate(-50%, -50%) scale(1)'; cursor.style.backgroundColor = 'rgba(174, 142, 101, 0.3)'; }); }); // Hide cursor on mobile devices if ('ontouchstart' in window || navigator.maxTouchPoints > 0) { cursor.style.display = 'none'; } }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Neon Beats - Music Streaming App</title> <style> :root { --primary: #ff00ff; --secondary: #00ffff; --dark: #121212; --light: #ffffff; --accent1: #fe53bb; --accent2: #09fbd3; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; } body { background-color: var(--dark); color: var(--light); height: 100vh; overflow: hidden; display: flex; justify-content: center; align-items: center; font-family: 'Poppins', sans-serif; } .app-container { width: 100%; max-width: 700px; height: 700px; background: linear-gradient(145deg, rgba(25, 25, 25, 0.8), rgba(18, 18, 18, 0.9)); border-radius: 20px; overflow: hidden; position: relative; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5); } .app-header { display: flex; justify-content: space-between; align-items: center; padding: 20px; background: rgba(0, 0, 0, 0.3); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(255, 255, 255, 0.1); position: relative; z-index: 10; } .logo { font-size: 24px; font-weight: 700; background: linear-gradient(to right, var(--accent1), var(--accent2)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; letter-spacing: 1px; } .search-bar { position: relative; width: 60%; } .search-bar input { width: 100%; padding: 10px 15px; border-radius: 20px; border: none; background: rgba(255, 255, 255, 0.1); color: var(--light); font-size: 14px; } .search-bar input::placeholder { color: rgba(255, 255, 255, 0.5); } .search-bar input:focus { outline: none; box-shadow: 0 0 0 2px var(--accent2); } .user-profile { width: 35px; height: 35px; border-radius: 50%; background: linear-gradient(45deg, var(--accent1), var(--accent2)); display: flex; justify-content: center; align-items: center; cursor: pointer; overflow: hidden; } .user-profile img { width: 100%; height: 100%; object-fit: cover; } .menu-container { display: grid; grid-template-columns: 1fr; gap: 15px; padding: 20px; overflow-y: auto; height: calc(100% - 76px); scrollbar-width: thin; scrollbar-color: var(--accent2) transparent; } .menu-container::-webkit-scrollbar { width: 5px; } .menu-container::-webkit-scrollbar-thumb { background-color: var(--accent2); border-radius: 10px; } .nav-buttons { display: flex; justify-content: space-around; margin-bottom: 20px; } .nav-btn { padding: 10px 20px; border-radius: 30px; border: none; background: rgba(255, 255, 255, 0.05); color: var(--light); font-weight: 600; cursor: pointer; transition: all 0.3s ease; position: relative; overflow: hidden; } .nav-btn:hover { background: rgba(255, 255, 255, 0.1); } .nav-btn.active { background: linear-gradient(45deg, var(--accent1), var(--accent2)); box-shadow: 0 0 15px rgba(254, 83, 187, 0.5); } .nav-btn.active::before { content: ''; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; z-index: -1; background: linear-gradient(45deg, var(--accent1), var(--accent2), var(--accent1)); background-size: 400%; border-radius: 32px; animation: glowing 20s linear infinite; } @keyframes glowing { 0% { background-position: 0 0; } 50% { background-position: 400% 0; } 100% { background-position: 0 0; } } .section-title { font-size: 20px; font-weight: 700; margin: 20px 0 15px; position: relative; display: inline-block; text-transform: uppercase; letter-spacing: 1px; } .section-title::after { content: ''; position: absolute; bottom: -5px; left: 0; width: 30px; height: 3px; background: linear-gradient(to right, var(--accent1), var(--accent2)); border-radius: 3px; } .playlist-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; } .playlist-card { background: rgba(255, 255, 255, 0.05); border-radius: 10px; overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; cursor: pointer; position: relative; } .playlist-card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3); } .playlist-card:hover .playlist-overlay { opacity: 1; } .playlist-image { width: 100%; height: 130px; object-fit: cover; transition: all 0.3s ease; } .playlist-card:hover .playlist-image { transform: scale(1.05); } .playlist-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 30%, transparent); opacity: 0.8; transition: opacity 0.3s ease; display: flex; flex-direction: column; justify-content: flex-end; padding: 15px; } .playlist-title { font-size: 16px; font-weight: 600; margin-bottom: 5px; } .playlist-info { font-size: 12px; color: rgba(255, 255, 255, 0.7); } .recently-played { margin-top: 30px; } .track-list { display: flex; flex-direction: column; gap: 10px; } .track-item { display: flex; align-items: center; padding: 10px; border-radius: 8px; background: rgba(255, 255, 255, 0.05); transition: background 0.3s ease; cursor: pointer; } .track-item:hover { background: rgba(255, 255, 255, 0.1); } .track-album-art { width: 50px; height: 50px; border-radius: 5px; margin-right: 15px; } .track-info { flex: 1; } .track-title { font-size: 14px; font-weight: 600; margin-bottom: 3px; } .track-artist { font-size: 12px; color: rgba(255, 255, 255, 0.7); } .track-duration { font-size: 12px; color: rgba(255, 255, 255, 0.5); } .equalizer { display: flex; align-items: flex-end; height: 20px; width: 20px; margin-right: 15px; gap: 1px; } .eq-bar { width: 3px; height: 5px; background: var(--accent2); border-radius: 1px; animation: equalize 0.9s infinite alternate; } .eq-bar:nth-child(1) { animation-delay: 0.0s; } .eq-bar:nth-child(2) { animation-delay: 0.2s; } .eq-bar:nth-child(3) { animation-delay: 0.1s; } .eq-bar:nth-child(4) { animation-delay: 0.3s; } @keyframes equalize { 0% { height: 5px; } 100% { height: 15px; } } .now-playing-bar { position: fixed; bottom: 0; left: 0; right: 0; height: 70px; background: rgba(18, 18, 18, 0.95); backdrop-filter: blur(10px); display: flex; align-items: center; padding: 0 20px; border-top: 1px solid rgba(255, 255, 255, 0.1); z-index: 100; transform: translateY(70px); transition: transform 0.3s ease; } .now-playing-bar.show { transform: translateY(0); } .now-playing-info { display: flex; align-items: center; flex: 1; } .now-playing-art { width: 50px; height: 50px; border-radius: 5px; margin-right: 15px; } .now-playing-details { flex: 1; } .now-playing-title { font-size: 14px; font-weight: 600; margin-bottom: 3px; } .now-playing-artist { font-size: 12px; color: rgba(255, 255, 255, 0.7); } .controls { display: flex; align-items: center; gap: 15px; } .control-btn { background: none; border: none; color: var(--light); cursor: pointer; font-size: 24px; transition: color 0.3s ease; } .control-btn:hover { color: var(--accent2); } .progress-container { flex: 1; height: 4px; background: rgba(255, 255, 255, 0.1); border-radius: 2px; overflow: hidden; margin: 0 15px; cursor: pointer; } .progress-bar { height: 100%; width: 30%; background: linear-gradient(to right, var(--accent1), var(--accent2)); border-radius: 2px; } .time-info { font-size: 12px; color: rgba(255, 255, 255, 0.7); margin-right: 10px; } .bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; height: 60px; background: rgba(18, 18, 18, 0.95); backdrop-filter: blur(10px); display: flex; justify-content: space-around; align-items: center; border-top: 1px solid rgba(255, 255, 255, 0.1); z-index: 100; } .nav-item { display: flex; flex-direction: column; align-items: center; color: rgba(255, 255, 255, 0.7); transition: color 0.3s ease; cursor: pointer; } .nav-item.active { color: var(--accent2); } .nav-icon { font-size: 24px; margin-bottom: 5px; } .nav-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; } /* Neon glow effect */ .neon-glow { position: absolute; width: 250px; height: 250px; border-radius: 50%; filter: blur(80px); opacity: 0.3; z-index: 0; animation: moveGlow 20s infinite alternate ease-in-out; } .glow-1 { background: var(--accent1); top: -100px; left: -100px; } .glow-2 { background: var(--accent2); bottom: -100px; right: -100px; } @keyframes moveGlow { 0% { transform: translate(0, 0); } 50% { transform: translate(50px, 30px); } 100% { transform: translate(-30px, 60px); } } /* For touch swiping effect */ .swipe-area { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 5; touch-action: pan-y; } /* Media queries for responsiveness */ @media (max-width: 600px) { .playlist-grid { grid-template-columns: 1fr; } .search-bar { width: 50%; } .nav-buttons button { padding: 8px 15px; font-size: 14px; } } @media (max-height: 700px) { .app-container { height: 95vh; } } .gesture-hint { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(0, 0, 0, 0.8); padding: 15px 20px; border-radius: 10px; text-align: center; z-index: 200; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } .gesture-hint.show { opacity: 1; animation: fadeInOut 2s forwards; } @keyframes fadeInOut { 0% { opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } } .gesture-icon { font-size: 24px; margin-bottom: 10px; color: var(--accent2); } </style> </head> <body> <div class="app-container"> <div class="neon-glow glow-1"></div> <div class="neon-glow glow-2"></div> <div class="app-header"> <div class="logo">NEON BEATS</div> <div class="search-bar"> <input type="text" placeholder="Search tracks, artists, or podcasts"> </div> <div class="user-profile"> <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0id2hpdGUiPjxwYXRoIGQ9Ik0xMiAxMmMtMS42NTUgMC0zLTEuMzQ1LTMtM3MxLjM0NS0zIDMtMyAzIDEuMzQ1IDMgMy0xLjM0NSAzLTMgM3ptMCAyYzcuNDU2IDAgOSAxLjUgOSAzdjJIMUwzIDE3YzAtMS41IDEuNS0zIDktM3oiLz48L3N2Zz4=" alt="Profile"> </div> </div> <div class="menu-container"> <div class="nav-buttons"> <button class="nav-btn active">For You</button> <button class="nav-btn">Trending</button> <button class="nav-btn">New Releases</button> </div> <h2 class="section-title">Your Playlists</h2> <div class="playlist-grid"> <div class="playlist-card" data-playlist="chill"> <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMDAgMjAwIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImEiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjEwMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiM4MzM2ZmYiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZjQ1YmIiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCBmaWxsPSJ1cmwoI2EpIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIvPjxjaXJjbGUgY3g9IjEwMCIgY3k9IjEwMCIgcj0iNTAiIGZpbGw9InJnYmEoMCwwLDAsMC4yKSIvPjwvc3ZnPg==" alt="Late Night Vibes" class="playlist-image"> <div class="playlist-overlay"> <div class="playlist-title">Late Night Vibes</div> <div class="playlist-info">42 tracks • 1.2M listeners</div> </div> </div> <div class="playlist-card" data-playlist="workout"> <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMDAgMjAwIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImIiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjEwMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMwMGZmY2MiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDgwZmYiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCBmaWxsPSJ1cmwoI2IpIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIvPjxwYXRoIGQ9Ik01MCAxMDBBNTAgNTAgMCAwIDEgMTUwIDEwMEE1MCA1MCAwIDAgMSA1MCAxMDAiIGZpbGw9InJnYmEoMCwwLDAsMC4yKSIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjIiLz48L3N2Zz4=" alt="Bass Boosted Workout" class="playlist-image"> <div class="playlist-overlay"> <div class="playlist-title">Bass Boosted Workout</div> <div class="playlist-info">38 tracks • 450K listeners</div> </div> </div> <div class="playlist-card" data-playlist="lofi"> <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMDAgMjAwIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImMiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjEwMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNmZjlhOGIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZjZiNmIiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCBmaWxsPSJ1cmwoI2MpIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIvPjxyZWN0IHg9IjcwIiB5PSI3MCIgd2lkdGg9IjYwIiBoZWlnaHQ9IjYwIiBmaWxsPSJyZ2JhKDAsMCwwLDAuMikiLz48L3N2Zz4=" alt="Lo-Fi Study Beats" class="playlist-image"> <div class="playlist-overlay"> <div class="playlist-title">Lo-Fi Study Beats</div> <div class="playlist-info">107 tracks • 2.5M listeners</div> </div> </div> <div class="playlist-card" data-playlist="synthwave"> <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMDAgMjAwIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImQiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjEwMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNmZjAwZmYiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMGZmZmYiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCBmaWxsPSJ1cmwoI2QpIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIvPjxwYXRoIGQ9Ik0yMCAxNDBMNjAgODBMMTAwIDE0MEwxNDAgODBMMTgwIDE0MCIgc3Ryb2tlPSJyZ2JhKDAsMCwwLDAuMikiIHN0cm9rZS13aWR0aD0iMTAiIGZpbGw9Im5vbmUiLz48L3N2Zz4=" alt="Retrowave Synthfunk" class="playlist-image"> <div class="playlist-overlay"> <div class="playlist-title">Retrowave Synthfunk</div> <div class="playlist-info">53 tracks • 890K listeners</div> </div> </div> </div> <div class="recently-played"> <h2 class="section-title">Recently Played</h2> <div class="track-list"> <div class="track-item playing" data-track="midnight"> <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImUiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjEwMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiM5MzRjZmYiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZjQ5YjciLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCBmaWxsPSJ1cmwoI2UpIiB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIvPjxjaXJjbGUgY3g9IjUwIiBjeT0iNTAiIHI9IjIwIiBmaWxsPSIjMDAwIiBmaWxsLW9wYWNpdHk9IjAuMyIvPjxjaXJjbGUgY3g9IjUwIiBjeT0iNTAiIHI9IjgiIGZpbGw9IiMwMDAiIGZpbGwtb3BhY2l0eT0iMC41Ii8+PC9zdmc+" alt="Midnight Cruise" class="track-album-art"> <div class="equalizer"> <div class="eq-bar"></div> <div class="eq-bar"></div> <div class="eq-bar"></div> <div class="eq-bar"></div> </div> <div class="track-info"> <div class="track-title">Midnight Cruise</div> <div class="track-artist">NightDrive & Sarah Luna</div> </div> <div class="track-duration">3:45</div> </div> <div class="track-item" data-track="electric"> <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImYiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjEwMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMwMGZmOTkiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDg4ZmYiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCBmaWxsPSJ1cmwoI2YpIiB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIvPjxwb2x5Z29uIHBvaW50cz0iNTAsMzAgNzAsNTAgNTAsNzAgMzAsNTAiIGZpbGw9IiMwMDAiIGZpbGwtb3BhY2l0eT0iMC4zIi8+PC9zdmc+" alt="Electric Dreams" class="track-album-art"> <div class="track-info"> <div class="track-title">Electric Dreams</div> <div class="track-artist">Neon Pulse</div> </div> <div class="track-duration">4:10</div> </div> <div class="track-item" data-track="astral"> <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImciIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjEwMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNmZmE1MDAiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZjAwNWIiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCBmaWxsPSJ1cmwoI2cpIiB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIvPjxjaXJjbGUgY3g9IjUwIiBjeT0iNTAiIHI9IjI1IiBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAiIHN0cm9rZS1vcGFjaXR5PSIwLjMiIHN0cm9rZS13aWR0aD0iNSIvPjwvc3ZnPg==" alt="Astral Projection" class="track-album-art"> <div class="track-info"> <div class="track-title">Astral Projection</div> <div class="track-artist">Cosmic Drift</div> </div> <div class="track-duration">5:22</div> </div> <div class="track-item" data-track="cyberspace"> <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImgiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjEwMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiM2MTAwZmYiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMGZmZmYiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCBmaWxsPSJ1cmwoI2gpIiB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIvPjxwYXRoIGQ9Ik0yMCA4MEw0MCA0MEw2MCA2MEw4MCAyMCIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utb3BhY2l0eT0iMC4zIiBzdHJva2Utd2lkdGg9IjUiIGZpbGw9Im5vbmUiLz48L3N2Zz4=" alt="Cyberspace Odyssey" class="track-album-art"> <div class="track-info"> <div class="track-title">Cyberspace Odyssey</div> <div class="track-artist">Digital Voyager ft. Byte</div> </div> <div class="track-duration">3:58</div> </div> </div> </div> </div> <div class="now-playing-bar"> <div class="now-playing-info"> <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImUiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjEwMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiM5MzRjZmYiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZjQ5YjciLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCBmaWxsPSJ1cmwoI2UpIiB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIvPjxjaXJjbGUgY3g9IjUwIiBjeT0iNTAiIHI9IjIwIiBmaWxsPSIjMDAwIiBmaWxsLW9wYWNpdHk9IjAuMyIvPjxjaXJjbGUgY3g9IjUwIiBjeT0iNTAiIHI9IjgiIGZpbGw9IiMwMDAiIGZpbGwtb3BhY2l0eT0iMC41Ii8+PC9zdmc+" alt="Midnight Cruise" class="now-
