Designing an app that stands out in today's crowded market can be a daunting task. To inspire your next project, we've curated a list of 10 exceptional app design examples.
These examples showcase innovative interfaces and user-friendly experiences, providing a benchmark for quality and creativity in app design.
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
Subframe's drag-and-drop interface and intuitive, responsive canvas make it easy to create pixel-perfect UI every time. Loved by designers and developers alike, Subframe ensures your app design stands out.
Start for free and experience the difference today!
CODE6
Here's the code:
CODETEXT6
CODE7
Here's the code:
CODETEXT7
CODE8
Here's the code:
CODETEXT8
CODE9
Here's the code:
CODETEXT9
CODE10
Here's the code:
CODETEXT10
Ready to elevate your app design? With Subframe, you can create pixel-perfect UIs efficiently and effortlessly. Our drag-and-drop editor and beautifully crafted components make designing a breeze.
Don't wait! Start for free and begin creating stunning interfaces right away.
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vibelink - Connect through shared moments</title> <style> :root { --primary: #6C63FF; --secondary: #FF6584; --tertiary: #43D97B; --light: #F8F9FA; --dark: #212529; --gradient: linear-gradient(135deg, #6C63FF 0%, #FF6584 100%); --card-radius: 18px; --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; } body { background-color: var(--light); color: var(--dark); font-size: 16px; line-height: 1.6; overflow-x: hidden; height: 100vh; display: flex; flex-direction: column; } .container { max-width: 700px; margin: 0 auto; padding: 0 15px; height: 100%; display: flex; flex-direction: column; } header { padding: 15px 0; display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 2; } .logo { font-weight: 700; font-size: 24px; background: var(--gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; display: flex; align-items: center; gap: 8px; } .logo-icon { background: var(--gradient); width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 18px; } .search-bar { display: flex; align-items: center; background: white; border-radius: 50px; padding: 8px 16px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); width: 240px; } .search-bar input { border: none; outline: none; background: transparent; width: 100%; font-size: 14px; } .search-bar i { color: #adb5bd; margin-right: 8px; } main { flex: 1; display: flex; flex-direction: column; overflow-y: auto; padding-bottom: 70px; position: relative; } .story-container { display: flex; gap: 12px; overflow-x: auto; padding: 15px 0; margin-bottom: 15px; scroll-behavior: smooth; -ms-overflow-style: none; scrollbar-width: none; } .story-container::-webkit-scrollbar { display: none; } .story { min-width: 80px; width: 80px; height: 120px; border-radius: var(--card-radius); position: relative; overflow: hidden; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); cursor: pointer; transition: var(--transition); } .story:hover { transform: translateY(-5px); } .story img { width: 100%; height: 100%; object-fit: cover; } .story-overlay { position: absolute; bottom: 0; left: 0; width: 100%; padding: 8px; background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent); color: white; font-size: 11px; font-weight: 500; } .create-story { background: white; border: 2px dashed var(--primary); display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--primary); font-size: 24px; } .create-story span { font-size: 11px; margin-top: 8px; } .post-card { background: white; border-radius: var(--card-radius); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08); margin-bottom: 20px; overflow: hidden; transition: var(--transition); transform-origin: center; position: relative; } .post-card:hover { transform: scale(1.01); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); } .post-header { display: flex; align-items: center; padding: 12px 16px; } .post-avatar { width: 42px; height: 42px; border-radius: 50%; margin-right: 12px; object-fit: cover; } .post-user-info { flex: 1; } .post-username { font-weight: 600; font-size: 15px; display: flex; align-items: center; } .verified-badge { width: 16px; height: 16px; background-color: var(--primary); border-radius: 50%; color: white; font-size: 10px; display: inline-flex; align-items: center; justify-content: center; margin-left: 5px; } .post-time { font-size: 12px; color: #6c757d; } .post-more-options { color: #6c757d; cursor: pointer; font-size: 18px; padding: 5px; } .post-content { padding: 0 16px 16px; } .post-text { margin-bottom: 12px; font-size: 14px; } .post-image-container { width: 100%; height: 280px; border-radius: 12px; overflow: hidden; position: relative; } .post-image { width: 100%; height: 100%; object-fit: cover; transition: var(--transition); } .post-image:hover { transform: scale(1.02); } .post-stats { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-top: 1px solid #f0f0f0; } .post-reaction { display: flex; align-items: center; gap: 4px; font-size: 13px; color: #6c757d; } .post-actions { display: flex; align-items: center; justify-content: space-around; padding: 8px 16px; border-top: 1px solid #f0f0f0; } .action-btn { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; color: #6c757d; background: transparent; border: none; padding: 8px 12px; border-radius: 8px; cursor: pointer; transition: var(--transition); } .action-btn:hover { background-color: rgba(108, 99, 255, 0.08); color: var(--primary); } .action-btn.liked { color: var(--secondary); } .create-post { position: fixed; bottom: 20px; right: 20px; background: var(--gradient); width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 24px; box-shadow: 0 4px 12px rgba(108, 99, 255, 0.4); cursor: pointer; z-index: 10; transition: var(--transition); } .create-post:hover { transform: rotate(45deg); box-shadow: 0 6px 16px rgba(108, 99, 255, 0.6); } .bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; background: white; display: flex; justify-content: space-around; padding: 12px 0; box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05); z-index: 5; } .nav-item { display: flex; flex-direction: column; align-items: center; color: #adb5bd; font-size: 11px; gap: 5px; cursor: pointer; transition: var(--transition); } .nav-item.active { color: var(--primary); } .nav-item:hover { color: var(--primary); } .nav-item i { font-size: 20px; } .card-swiper { perspective: 1000px; position: relative; height: 380px; margin-bottom: 20px; } .swipe-card { position: absolute; width: 100%; height: 100%; transform-style: preserve-3d; transition: all 0.5s ease; border-radius: var(--card-radius); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); background: white; overflow: hidden; cursor: grab; } .swipe-card.active { z-index: 3; } .swipe-card.prev { z-index: 2; transform: translateX(-15px) scale(0.95) rotate(-5deg); opacity: 0.8; } .swipe-card.next { z-index: 1; transform: translateX(15px) scale(0.9) rotate(5deg); opacity: 0.6; } .swipe-card.removed { transform: translateX(-1000px) rotate(-30deg); transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55); } .swipe-header { height: 220px; overflow: hidden; } .swipe-image { width: 100%; height: 100%; object-fit: cover; } .swipe-content { padding: 16px; } .swipe-title { font-weight: 700; font-size: 18px; margin-bottom: 6px; color: var(--dark); } .swipe-metadata { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #6c757d; margin-bottom: 12px; } .swipe-description { font-size: 14px; line-height: 1.4; margin-bottom: 16px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .swipe-actions { display: flex; justify-content: space-between; } .swipe-btn { padding: 8px 16px; border-radius: 50px; border: none; font-weight: 600; font-size: 14px; cursor: pointer; transition: var(--transition); } .swipe-btn.primary { background-color: var(--primary); color: white; } .swipe-btn.secondary { background-color: #f0f0f0; color: #6c757d; } .swipe-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } .notification { position: fixed; top: 20px; left: 50%; transform: translateX(-50%) translateY(-100px); background: white; border-radius: 12px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); padding: 12px 20px; display: flex; align-items: center; gap: 12px; z-index: 100; transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); min-width: 280px; } .notification.show { transform: translateX(-50%) translateY(0); } .notification-icon { width: 40px; height: 40px; border-radius: 50%; background: var(--tertiary); display: flex; align-items: center; justify-content: center; color: white; font-size: 20px; } .notification-content { flex: 1; } .notification-title { font-weight: 600; font-size: 14px; margin-bottom: 2px; } .notification-message { font-size: 12px; color: #6c757d; } .notification-close { color: #adb5bd; cursor: pointer; font-size: 16px; } .notification-progress { position: absolute; bottom: 0; left: 0; height: 3px; background: var(--gradient); width: 100%; border-radius: 0 0 12px 12px; animation: progress 3s linear forwards; } @keyframes progress { from { width: 100%; } to { width: 0%; } } .section-title { font-weight: 700; font-size: 18px; margin-bottom: 15px; color: var(--dark); } .tag-list { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 12px; -ms-overflow-style: none; scrollbar-width: none; } .tag-list::-webkit-scrollbar { display: none; } .tag { background: white; border: 1px solid #e9ecef; border-radius: 50px; padding: 7px 14px; font-size: 13px; font-weight: 500; white-space: nowrap; cursor: pointer; transition: var(--transition); } .tag.active { background: var(--gradient); color: white; border-color: transparent; } .tag:hover:not(.active) { background: #f8f9fa; border-color: #dee2e6; } .bounce-in { animation: bounceIn 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55); } @keyframes bounceIn { 0% { transform: scale(0.8); opacity: 0; } 70% { transform: scale(1.1); } 100% { transform: scale(1); opacity: 1; } } .fade-in { animation: fadeIn 0.5s ease forwards; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .pulse { animation: pulse 2s infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(108, 99, 255, 0.4); } 70% { box-shadow: 0 0 0 10px rgba(108, 99, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(108, 99, 255, 0); } } .like-animation { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0); color: var(--secondary); font-size: 80px; opacity: 0; z-index: 10; pointer-events: none; } .like-animation.active { animation: likeAnimation 0.8s cubic-bezier(0.17, 0.89, 0.32, 1.49); } @keyframes likeAnimation { 0% { transform: translate(-50%, -50%) scale(0); opacity: 0; } 15% { transform: translate(-50%, -50%) scale(1.3); opacity: 0.9; } 30% { transform: translate(-50%, -50%) scale(0.95); opacity: 0.9; } 45%, 80% { transform: translate(-50%, -50%) scale(1); opacity: 0.9; } 100% { transform: translate(-50%, -50%) scale(0); opacity: 0; } } /* Responsive adjustments */ @media (max-width: 600px) { .search-bar { width: 180px; } .card-swiper { height: 340px; } .swipe-header { height: 180px; } } @media (max-width: 480px) { .search-bar { width: 140px; } .post-image-container { height: 220px; } } </style> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet"> </head> <body> <div class="container"> <header> <div class="logo"> <div class="logo-icon">V</div> Vibelink </div> <div class="search-bar"> <i class="fas fa-search"></i> <input type="text" placeholder="Search vibes..."> </div> </header> <main> <section class="story-container"> <div class="story create-story"> <i class="fas fa-plus"></i> <span>Add Story</span> </div> <div class="story"> <img src="https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTF8fHBvcnRyYWl0fGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60" alt="User Story"> <div class="story-overlay">Jamie's Hike</div> </div> <div class="story"> <img src="https://images.unsplash.com/photo-1539571696357-5a69c17a67c6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8N3x8cGVvcGxlfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60" alt="User Story"> <div class="story-overlay">Alex's Day</div> </div> <div class="story"> <img src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NHx8cG9ydHJhaXR8ZW58MHx8MHx8&auto=format&fit=crop&w=500&q=60" alt="User Story"> <div class="story-overlay">Kira's Art</div> </div> <div class="story"> <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTZ8fHBvcnRyYWl0fGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60" alt="User Story"> <div class="story-overlay">Sam's Trip</div> </div> </section> <section> <h2 class="section-title">Discover Vibes</h2> <div class="tag-list"> <div class="tag active">For You</div> <div class="tag">Trending</div> <div class="tag">Music</div> <div class="tag">Art</div> <div class="tag">Tech</div> <div class="tag">Travel</div> <div class="tag">Food</div> </div> </section> <section class="card-swiper"> <div class="swipe-card active"> <div class="swipe-header"> <img class="swipe-image" src="https://images.unsplash.com/photo-1501281668745-f7f57925c3b4?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8ZmVzdGl2YWx8ZW58MHx8MHx8&auto=format&fit=crop&w=500&q=60" alt="Event"> </div> <div class="swipe-content"> <h3 class="swipe-title">Neighborhood Music Festival</h3> <div class="swipe-metadata"> <i class="fas fa-calendar"></i> This Weekend <i class="fas fa-map-marker-alt"></i> Parkside Plaza </div> <p class="swipe-description">Join our community for live performances, food trucks, and art installations by local creators. Perfect chance to connect with neighbors!</p> <div class="swipe-actions"> <button class="swipe-btn secondary">Skip</button> <button class="swipe-btn primary">I'm Interested</button> </div> </div> </div> <div class="swipe-card next"> <div class="swipe-header"> <img class="swipe-image" src="https://images.unsplash.com/photo-1515169067868-5387ec356754?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTJ8fHdvcmtzaG9wfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60" alt="Workshop"> </div> <div class="swipe-content"> <h3 class="swipe-title">Creative Workshop Series</h3> <div class="swipe-metadata"> <i class="fas fa-calendar"></i> Every Tuesday <i class="fas fa-map-marker-alt"></i> Community Center </div> <p class="swipe-description">Learn new skills from community experts. This week: Digital Art Fundamentals – bring your tablets and creativity!</p> <div class="swipe-actions"> <button class="swipe-btn secondary">Skip</button> <button class="swipe-btn primary">I'm Interested</button> </div> </div> </div> <div class="swipe-card"> <div class="swipe-header"> <img class="swipe-image" src="https://images.unsplash.com/photo-1511795409834-ef04bbd61622?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8M3x8ZXZlbnR8ZW58MHx8MHx8&auto=format&fit=crop&w=500&q=60" alt="Meetup"> </div> <div class="swipe-content"> <h3 class="swipe-title">Tech Meetup: Web3 Discussion</h3> <div class="swipe-metadata"> <i class="fas fa-calendar"></i> Thursday, 7PM <i class="fas fa-map-marker-alt"></i> Innovate Hub </div> <p class="swipe-description">Join fellow tech enthusiasts to discuss the future of decentralized applications and blockchain technologies.</p> <div class="swipe-actions"> <button class="swipe-btn secondary">Skip</button> <button class="swipe-btn primary">I'm Interested</button> </div> </div> </div> </section> <div class="post-card fade-in"> <div class="post-header"> <img class="post-avatar" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8cG9ydHJhaXR8ZW58MHx8MHx8&auto=format&fit=crop&w=500&q=60" alt="User"> <div class="post-user-info"> <div class="post-username">Maya Wilson <span class="verified-badge"><i class="fas fa-check"></i></span></div> <div class="post-time">2 hours ago</div> </div> <div class="post-more-options"> <i class="fas fa-ellipsis-h"></i> </div> </div> <div class="post-content"> <p class="post-text">Just finished setting up the community garden for spring planting! 🌱 Who's joining us this Saturday for the seed-sharing event?</p> <div class="post-image-container"> <img class="post-image" src="https://images.unsplash.com/photo-1589833018884-8a5c7369086d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NXx8Z2FyZGVufGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60" alt="Community Garden"> <div class="like-animation"> <i class="fas fa-heart"></i> </div> </div> </div> <div class="post-stats"> <div class="post-reaction"> <i class="fas fa-heart" style="color: var(--secondary);"></i> 142 likes </div> <div class="post-reaction"> <i class="fas fa-comment"></i> 38 comments </div> </div> <div class="post-actions"> <button class="action-btn like-btn"> <i class="far fa-heart"></i> Like </button> <button class="action-btn"> <i class="far fa-comment"></i> Comment </button> <button class="action-btn"> <i class="far fa-share-square"></i> Share </button> </div> </div> <div class="post-card fade-in"> <div class="post-header"> <img class="post-avatar" src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8cG9ydHJhaXR8ZW58MHx8MHx8&auto=format&fit=crop&w=500&q=60" alt="User"> <div class="post-user-info"> <div class="post-username">Ethan Blake</div> <div class="post-time">Yesterday</div> </div> <div class="post-more-options"> <i class="fas fa-ellipsis-h"></i> </div> </div> <div class="post-content"> <p class="post-text">Exciting news! Our neighborhood podcast "Local Voices" just hit 1000 listeners. Thanks to everyone who's tuned in and shared their stories with us. 🎙️ Next episode drops Monday!</p> <div class="post-image-container"> <img class="post-image" src="https://images.unsplash.com/photo-1590602847861-f357a9332bbc?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTR8fHBvZGNhc3R8ZW58MHx8MHx8&auto=format&fit=crop&w=500&q=60" alt="Podcast Equipment"> <div class="like-animation"> <i class="fas fa-heart"></i> </div> </div> </div> <div class="post-stats"> <div class="post-reaction"> <i class="fas fa-heart" style="color: var(--secondary);"></i> 89 likes </div> <div class="post-reaction"> <i class="fas fa-comment"></i> 24 comments </div> </div> <div class="post-actions"> <button class="action-btn like-btn"> <i class="far fa-heart"></i> Like </button> <button class="action-btn"> <i class="far fa-comment"></i> Comment </button> <button class="action-btn"> <i class="far fa-share-square"></i> Share </button> </div> </div> </main> <div class="bottom-nav"> <div class="nav-item active"> <i class="fas fa-home"></i> <span>Home</span> </div> <div class="nav-item"> <i class="fas fa-compass"></i> <span>Discover</span> </div> <div class="nav-item"> <i class="far fa-bell"></i> <span>Notifications</span> </div> <div class="nav-item"> <i class="far fa-user"></i> <span>Profile</span> </div> </div> <div class="create-post pulse"> <i class="fas fa-plus"></i> </div> </div> <div class="notification"> <div class="notification-icon"> <i class="fas fa-bell"></i> </div> <div class="notification-content"> <div class="notification-title">New Community Connection</div> <div class="notification-message">Kira just joined your "Local Artists" group</div> </div> <div class="notification-close"> <i class="fas fa-times"></i> </div> <div class="notification-progress"></div> </div> <script> document.addEventListener('DOMContentLoaded', function() { // Show notification setTimeout(() => { document.querySelector('.notification').classList.add('show'); // Hide notification after 3 seconds setTimeout(() => { document.querySelector('.notification').classList.remove('show'); }, 3000); }, 2000); // Notification close button document.querySelector('.notification-close').addEventListener('click', function() { document.querySelector('.notification').classList.remove('show'); }); // Story hover effect const stories = document.querySelectorAll('.story:not(.create-story)'); stories.forEach(story => { story.addEventListener('click', function() { this.classList.add('bounce-in'); setTimeout(() => { this.classList.remove('bounce-in'); }, 500); }); }); // Tag selection const tags = document.querySelectorAll('.tag'); tags.forEach(tag => { tag.addEventListener('click', function() { document.querySelector('.tag.active').classList.remove('active'); this.classList.add('active'); }); }); // Bottom navigation const navItems = document.querySelectorAll('.nav-item'); navItems.forEach(item => { item.addEventListener('click', function() { document.querySelector('.nav-item.active').classList.remove('active'); this.classList.add('active'); }); }); // Create Post Button document.querySelector('.create-post').addEventListener('click', function() { // Show a custom notification when create post is clicked const notification = document.querySelector('.notification'); const notificationTitle = notification.querySelector('.notification-title'); const notificationMessage = notification.querySelector('.notification-message'); const notificationIcon = notification.querySelector('.notification-icon i'); notificationTitle.textContent = 'Create New Post'; notificationMessage.textContent = 'Share what\'s happening in your community!'; notificationIcon.className = 'fas fa-edit'; notification.querySelector('.notification-icon').style.background = 'var(--primary)'; notification.classList.add('show'); setTimeout(() => { notification.classList.remove('show'); }, 3000); }); // Like button functionality const likeBtns = document.querySelectorAll('.like-btn'); likeBtns.forEach(btn => { btn.addEventListener('click', function() { const icon = this.querySelector('i'); if (icon.classList.contains('far')) { icon.classList.remove('far'); icon.classList.add('fas'); this.classList.add('liked'); // Show the heart animation const postCard = this.closest('.post-card'); const likeAnimation = postCard.querySelector('.like-animation'); likeAnimation.classList.add('active'); setTimeout(() => { likeAnimation.classList.remove('active'); }, 800); } else { icon.classList.remove('fas'); icon.classList.add('far'); this.classList.remove('liked'); } }); }); // Double tap to like const postImages = document.querySelectorAll('.post-image-container'); postImages.forEach(img => { let tapCount = 0; let tapTimer; img.addEventListener('click', function() { tapCount++; if (tapCount === 1) { tapTimer = setTimeout(() => { tapCount = 0; }, 300); } else { clearTimeout(tapTimer); tapCount = 0; // Like the post const postCard = this.closest('.post-card');
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vitality - Health Tracking App</title> <style> :root { --primary: #4a8feb; --primary-light: #6ba5f2; --secondary: #6ed5b7; --secondary-light: #8ee1c9; --accent: #f887b8; --dark: #2a3b4c; --text: #3a4a5c; --text-light: #778899; --light: #f5f8ff; --shadow: rgba(42, 59, 76, 0.1); --glass: rgba(255, 255, 255, 0.9); --glass-dark: rgba(42, 59, 76, 0.03); } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', sans-serif; } body { background: linear-gradient(135deg, #f5f8ff 0%, #eef5ff 100%); color: var(--text); font-family: 'Inter', sans-serif; height: 100vh; overflow: hidden; display: flex; justify-content: center; align-items: center; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; src: url('https://fonts.gstatic.com/s/inter/v12/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfAZ9hiA.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; src: url('https://fonts.gstatic.com/s/inter/v12/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuGKYAZ9hiA.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; src: url('https://fonts.gstatic.com/s/inter/v12/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuFuYAZ9hiA.woff2') format('woff2'); } .app-container { width: 100%; max-width: 700px; height: 700px; background: var(--light); border-radius: 24px; box-shadow: 0 20px 60px var(--shadow); overflow: hidden; display: grid; grid-template-rows: auto 1fr; position: relative; } .nav { padding: 20px; display: flex; justify-content: space-between; align-items: center; background: var(--glass); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(0, 0, 0, 0.05); position: relative; z-index: 10; } .logo { font-weight: 700; font-size: 24px; color: var(--primary); display: flex; align-items: center; gap: 8px; } .logo-icon { display: flex; justify-content: center; align-items: center; width: 32px; height: 32px; background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%); border-radius: 8px; color: white; } .nav-links { display: flex; gap: 24px; } .nav-link { text-decoration: none; color: var(--text-light); font-weight: 600; font-size: 14px; transition: all 0.3s ease; position: relative; } .nav-link:hover, .nav-link.active { color: var(--primary); } .nav-link.active::after { content: ''; position: absolute; bottom: -5px; left: 0; width: 100%; height: 3px; background: linear-gradient(90deg, var(--primary) 0%, var(--primary-light) 100%); border-radius: 10px; } .user { display: flex; align-items: center; gap: 12px; } .user-avatar { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, #6a6cff 0%, #cb52f7 100%); color: white; display: flex; justify-content: center; align-items: center; font-weight: 600; font-size: 14px; } .main { padding: 30px; overflow-y: auto; position: relative; } .main::-webkit-scrollbar { width: 6px; } .main::-webkit-scrollbar-track { background: transparent; } .main::-webkit-scrollbar-thumb { background: var(--primary-light); border-radius: 10px; } .greeting { font-size: 26px; font-weight: 700; margin-bottom: 8px; } .date { color: var(--text-light); font-size: 14px; margin-bottom: 30px; } .stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 30px; } .stat-card { background: white; border-radius: 16px; padding: 20px; box-shadow: 0 4px 20px var(--shadow); transition: all 0.3s ease; cursor: pointer; overflow: hidden; position: relative; } .stat-card:hover { transform: translateY(-5px); box-shadow: 0 10px 25px var(--shadow); } .stat-title { font-size: 14px; font-weight: 600; color: var(--text-light); margin-bottom: 12px; display: flex; align-items: center; gap: 6px; } .stat-icon { width: 20px; height: 20px; display: flex; justify-content: center; align-items: center; border-radius: 6px; } .steps .stat-icon { background: rgba(74, 143, 235, 0.1); color: var(--primary); } .calories .stat-icon { background: rgba(242, 153, 74, 0.1); color: #f2994a; } .sleep .stat-icon { background: rgba(110, 213, 183, 0.1); color: var(--secondary); } .stat-value { font-size: 28px; font-weight: 700; margin-bottom: 4px; } .stat-compare { font-size: 12px; color: #4caf50; display: flex; align-items: center; gap: 4px; } .stat-compare.negative { color: #f44336; } .progress-ring { position: absolute; top: 15px; right: 15px; width: 40px; height: 40px; } .chart-section { background: white; border-radius: 20px; padding: 24px; box-shadow: 0 4px 20px var(--shadow); margin-bottom: 30px; } .section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .section-title { font-size: 18px; font-weight: 700; } .time-selector { display: flex; gap: 12px; } .time-option { font-size: 13px; background: var(--glass-dark); border: none; padding: 6px 12px; border-radius: 8px; color: var(--text-light); cursor: pointer; transition: all 0.2s ease; } .time-option.active { background: var(--primary); color: white; } .chart-container { height: 200px; position: relative; } .insights-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .insight-card { background: white; border-radius: 16px; padding: 20px; box-shadow: 0 4px 20px var(--shadow); display: flex; flex-direction: column; gap: 12px; cursor: pointer; transition: all 0.3s ease; } .insight-card:hover { transform: translateY(-3px); box-shadow: 0 8px 25px var(--shadow); } .insight-header { display: flex; justify-content: space-between; align-items: flex-start; } .insight-icon { width: 36px; height: 36px; border-radius: 10px; display: flex; justify-content: center; align-items: center; font-size: 16px; } .heart-rate .insight-icon { background: rgba(248, 135, 184, 0.1); color: var(--accent); } .water .insight-icon { background: rgba(74, 143, 235, 0.1); color: var(--primary); } .insight-title { font-size: 16px; font-weight: 600; } .insight-value { font-size: 24px; font-weight: 700; } .insight-desc { font-size: 13px; color: var(--text-light); } .water-progress-container { width: 100%; height: 10px; background: rgba(74, 143, 235, 0.1); border-radius: 10px; overflow: hidden; } .water-progress { height: 100%; background: linear-gradient(90deg, var(--primary) 0%, var(--primary-light) 100%); border-radius: 10px; width: 0; /* Will be set by JS */ transition: width 1s ease; } .heart-rate-chart { width: 100%; height: 60px; position: relative; } .heart-rate-line { position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; stroke: var(--accent); stroke-width: 2; fill: none; stroke-linecap: round; opacity: 0.8; } .heart-rate-area { position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; fill: url(#heartGradient); opacity: 0.2; } .floating-bubble { position: absolute; border-radius: 50%; background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.2)); filter: blur(1px); animation: float 8s infinite ease-in-out; z-index: -1; } @keyframes float { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-15px) scale(1.05); } } @keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } } .btn { background: var(--primary); color: white; border: none; padding: 8px 16px; border-radius: 8px; font-weight: 600; font-size: 14px; cursor: pointer; transition: all 0.2s ease; } .btn:hover { background: var(--primary-light); transform: translateY(-2px); } .btn-outline { background: transparent; border: 1px solid var(--primary); color: var(--primary); } .btn-outline:hover { background: rgba(74, 143, 235, 0.1); } @media (max-width: 700px) { .stats-grid { grid-template-columns: 1fr; } .insights-grid { grid-template-columns: 1fr; } .nav-links { display: none; } } @media (max-width: 500px) { .main { padding: 20px; } .greeting { font-size: 22px; } .stat-value { font-size: 24px; } } /* Sleek tooltip design */ .tooltip { position: absolute; background: white; border-radius: 8px; padding: 10px 14px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); font-size: 12px; z-index: 100; pointer-events: none; opacity: 0; transition: opacity 0.2s ease; max-width: 200px; } .tooltip-title { font-weight: 600; margin-bottom: 4px; } .tooltip-value { color: var(--primary); font-weight: 700; } /* Pulse animation for notifications */ .pulse { position: relative; } .pulse::after { content: ''; position: absolute; top: -2px; right: -2px; width: 8px; height: 8px; background: #f44336; border-radius: 50%; border: 2px solid white; } </style> </head> <body> <div class="app-container"> <nav class="nav"> <div class="logo"> <div class="logo-icon"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M16 4C16 2.89543 15.1046 2 14 2H10C8.89543 2 8 2.89543 8 4V6H16V4Z" fill="currentColor"/> <path d="M18.5 6H5.5C4.11929 6 3 7.11929 3 8.5V19C3 20.6569 4.34315 22 6 22H18C19.6569 22 21 20.6569 21 19V8.5C21 7.11929 19.8807 6 18.5 6Z" fill="currentColor"/> <path d="M10.5 11.5C10.5 10.6716 11.1716 10 12 10C12.8284 10 13.5 10.6716 13.5 11.5V13.5H15.5C16.3284 13.5 17 14.1716 17 15C17 15.8284 16.3284 16.5 15.5 16.5H13.5V18.5C13.5 19.3284 12.8284 20 12 20C11.1716 20 10.5 19.3284 10.5 18.5V16.5H8.5C7.67157 16.5 7 15.8284 7 15C7 14.1716 7.67157 13.5 8.5 13.5H10.5V11.5Z" fill="white"/> </svg> </div> <span>Vitality</span> </div> <div class="nav-links"> <a href="#" class="nav-link active">Dashboard</a> <a href="#" class="nav-link">Activity</a> <a href="#" class="nav-link">Nutrition</a> <a href="#" class="nav-link">Sleep</a> </div> <div class="user"> <div class="user-avatar pulse">JS</div> </div> </nav> <main class="main"> <h1 class="greeting">Welcome back, Jamie</h1> <p class="date">Tuesday, 15 March • 2023</p> <div class="stats-grid"> <div class="stat-card steps"> <div class="stat-title"> <div class="stat-icon"> <svg width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M19.5 21C19.5 21.5523 19.0523 22 18.5 22C17.9477 22 17.5 21.5523 17.5 21C17.5 20.4477 17.9477 20 18.5 20C19.0523 20 19.5 20.4477 19.5 21Z" fill="currentColor"/> <path d="M15.5 11.5C15.5 12.0523 15.0523 12.5 14.5 12.5C13.9477 12.5 13.5 12.0523 13.5 11.5C13.5 10.9477 13.9477 10.5 14.5 10.5C15.0523 10.5 15.5 10.9477 15.5 11.5Z" fill="currentColor"/> <path d="M16 15C16 15.5523 15.5523 16 15 16C14.4477 16 14 15.5523 14 15C14 14.4477 14.4477 14 15 14C15.5523 14 16 14.4477 16 15Z" fill="currentColor"/> <path d="M14.5 6.5C14.5 7.05228 14.0523 7.5 13.5 7.5C12.9477 7.5 12.5 7.05228 12.5 6.5C12.5 5.94772 12.9477 5.5 13.5 5.5C14.0523 5.5 14.5 5.94772 14.5 6.5Z" fill="currentColor"/> <path d="M20.5 16C20.5 16.5523 20.0523 17 19.5 17C18.9477 17 18.5 16.5523 18.5 16C18.5 15.4477 18.9477 15 19.5 15C20.0523 15 20.5 15.4477 20.5 16Z" fill="currentColor"/> <path d="M7.5 14C7.5 14.5523 7.05228 15 6.5 15C5.94772 15 5.5 14.5523 5.5 14C5.5 13.4477 5.94772 13 6.5 13C7.05228 13 7.5 13.4477 7.5 14Z" fill="currentColor"/> <path d="M9.5 19C9.5 19.5523 9.05228 20 8.5 20C7.94772 20 7.5 19.5523 7.5 19C7.5 18.4477 7.94772 18 8.5 18C9.05228 18 9.5 18.4477 9.5 19Z" fill="currentColor"/> <path d="M8.5 8C8.5 8.55228 8.05228 9 7.5 9C6.94772 9 6.5 8.55228 6.5 8C6.5 7.44772 6.94772 7 7.5 7C8.05228 7 8.5 7.44772 8.5 8Z" fill="currentColor"/> <path d="M5.5 4C5.5 4.55228 5.05228 5 4.5 5C3.94772 5 3.5 4.55228 3.5 4C3.5 3.44772 3.94772 3 4.5 3C5.05228 3 5.5 3.44772 5.5 4Z" fill="currentColor"/> <path d="M19.1642 13C19.5792 12.3047 19.3856 11.3971 18.75 10.9286C18.1144 10.4602 17.2683 10.5844 16.8033 11.25L14.5 14.5L11.25 10.5C10.7388 9.87336 9.84435 9.70602 9.15865 10.1356C8.47295 10.5652 8.25661 11.4566 8.625 12.1667L11.7353 17.3333C12.0887 17.902 12.7522 18.1559 13.3796 17.9643L13.5 17.9167L16.5385 19.7143C17.2594 20.1201 18.1548 19.9092 18.5303 19.2L19.1642 13Z" fill="currentColor"/> </svg> </div> Steps </div> <div class="stat-value">8,247</div> <div class="stat-compare"> <svg width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 4L12 20M12 4L18 10M12 4L6 10" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> 12% more than yesterday </div> <svg class="progress-ring" width="40" height="40"> <circle cx="20" cy="20" r="15" fill="none" stroke="#e6eef9" stroke-width="3"/> <circle class="progress-ring-circle" cx="20" cy="20" r="15" fill="none" stroke="#4a8feb" stroke-width="3" stroke-dasharray="94.2" stroke-dashoffset="28.26" stroke-linecap="round"/> </svg> </div> <div class="stat-card calories"> <div class="stat-title"> <div class="stat-icon"> <svg width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M15.5769 14C15.8444 13.8348 16.0865 13.6468 16.3432 13.4644C17.1343 12.9332 18 12.1521 18 11C18 10.4477 17.5523 10 17 10C16.4477 10 16 10.4477 16 11C16 11.3479 15.6157 11.8168 14.9068 12.2856C14.7013 12.4148 14.4773 12.5419 14.2331 12.662C13.1747 13.1547 11.7463 13.5569 10 13.5C6.57143 13.4 4 10.25 4 7C4 5.75 4.30612 4.55 5 3.5C4.09554 3.88534 3.32519 4.57489 2.84236 5.43923C2.32915 6.34572 2.02299 7.38104 2.00096 8.43759C1.97884 9.50167 2.24504 10.5601 2.76258 11.4959C3.28013 12.4316 4.03235 13.2122 4.94871 13.7591C5.86507 14.3061 6.9113 14.5997 7.97961 14.6119C9.04792 14.624 10.1005 14.3543 11.0283 13.8288C11.2234 13.7189 11.4124 13.5983 11.595 13.4673C12.9744 14.4525 14.74 14.5388 15.5769 14Z" fill="currentColor"/> <path d="M12.9086 3.41256C12.7705 3.05872 12.4352 2.82773 12.0635 2.82773C11.6918 2.82773 11.3565 3.05872 11.2184 3.41256L10.4387 5.42407C10.0138 6.57396 10.4429 7.86418 11.5137 8.46816C11.8339 8.65823 12.2931 8.65823 12.6133 8.46816C13.6841 7.86418 14.1132 6.57396 13.6883 5.42407L12.9086 3.41256Z" fill="currentColor"/> <path d="M17.41 6.30881C17.5482 5.95497 17.8835 5.72398 18.2552 5.72398C18.6269 5.72398 18.9622 5.95497 19.1003 6.30881L19.8799 8.32033C20.3049 9.47022 19.8758 10.7604 18.8049 11.3644C18.4848 11.5545 18.0256 11.5545 17.7054 11.3644C16.6346 10.7604 16.2055 9.47022 16.6304 8.32033L17.41 6.30881Z" fill="currentColor"/> <path d="M14.5818 14.4293C14.2351 14.8293 14.4617 15.4515 14.9852 15.5927L17.5 16.25L14.9852 16.9073C14.4617 17.0485 14.2351 17.6707 14.5818 18.0707L16 19.5L14.5818 20.9293C14.2351 21.3293 14.4617 21.9515 14.9852 22.0927C16.0628 22.3612 17.6684 22.6919 19 22.6919C20.3316 22.6919 21.9372 22.3612 23.0148 22.0927C23.5383 21.9515 23.7649 21.3293 23.4182 20.9293L22 19.5L23.4182 18.0707C23.7649 17.6707 23.5383 17.0485 23.0148 16.9073L20.5 16.25L23.0148 15.5927C23.5383 15.4515 23.7649 14.8293 23.4182 14.4293L22 13L23.4182 11.5707C23.7649 11.1707 23.5383 10.5485 23.0148 10.4073C21.9372 10.1388 20.3316 9.80807 19 9.80807C17.6684 9.80807 16.0628 10.1388 14.9852 10.4073C14.4617 10.5485 14.2351 11.1707 14.5818 11.5707L16 13L14.5818 14.4293Z" fill="currentColor"/> </svg> </div> Calories </div> <div class="stat-value">1,356</div> <div class="stat-compare negative"> <svg width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 20L12 4M12 20L6 14M12 20L18 14" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> 8% less than yesterday </div> <svg class="progress-ring" width="40" height="40"> <circle cx="20" cy="20" r="15" fill="none" stroke="#f9e9e6" stroke-width="3"/> <circle class="progress-ring-circle" cx="20" cy="20" r="15" fill="none" stroke="#f2994a" stroke-width="3" stroke-dasharray="94.2" stroke-dashoffset="47.1" stroke-linecap="round"/> </svg> </div> <div class="stat-card sleep"> <div class="stat-title"> <div class="stat-icon"> <svg width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M21 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" fill="currentColor"/> <path d="M14.5 9C14.5 9.82843 13.8284 10.5 13 10.5C12.1716 10.5 11.5 9.82843 11.5 9C11.5 8.17157 12.1716 7.5 13 7.5C13.8284 7.5 14.5 8.17157 14.5 9Z" fill="white"/> <path d="M10.5 9C10.5 9.82843 9.82843 10.5 9 10.5C8.17157 10.5 7.5 9.82843 7.5 9C7.5 8.17157 8.17157 7.5 9 7.5C9.82843 7.5 10.5 8.17157 10.5 9Z" fill="white"/> <path d="M8.84232 13.3216C9.04321 12.9301 9.54078 12.7688 9.93224 12.9697C12.3305 14.2655 15.4268 12.6723 15.4268 9.94938C15.4268 9.5076 15.7851 9.14938 16.2268 9.14938C16.6686 9.14938 17.0268 9.5076 17.0268 9.94938C17.0268 13.9302 12.5016 16.2974 8.99425 14.4115C8.60279 14.2106 8.44144 13.713 8.64232 13.3216Z" fill="white"/> </svg> </div> Sleep </div> <div class="stat-value">7h 23m</div> <div class="stat-compare"> <svg width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 4L12 20M12 4L18 10M12 4L6 10" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> 5% more than average </div> <svg class="progress-ring" width="40" height="40"> <circle cx="20" cy="20" r="15" fill="none" stroke="#e6f9f4" stroke-width="3"/> <circle class="progress-ring-circle" cx="20" cy="20" r="15" fill="none" stroke="#6ed5b7" stroke-width="3" stroke-dasharray="94.2" stroke-dashoffset="18.84" stroke-linecap="round"/> </svg> </div> </div> <div class="chart-section"> <div class="section-header"> <h2 class="section-title">Activity Trends</h2> <div class="time-selector"> <button class="time-option">Day</button> <button class="time-option active">Week</button> <button class="time-option">Month</button> </div> </div> <div class="chart-container" id="activity-chart"> <canvas id="trendsChart" width="640" height="200"></canvas> </div> </div> <div class="insights-grid"> <div class="insight-card heart-rate"> <div class="insight-header"> <div> <div class="insight-title">Heart Rate</div> <div class="insight-value">72 bpm</div> </div> <div class="insight-icon"> <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M19.5676 9.69237C20.1051 9.20144 20.1362 8.36368 19.6403 7.83743C18.9007 7.05447 17.663 7.07795 16.9498 7.88734L15.3433 9.71473L12 4.5L8.65667 9.71473L7.05018 7.88734C6.33697 7.07795 5.09927 7.05447 4.35975 7.83743C3.86375 8.36368 3.89489 9.20144 4.4324 9.69237L9 13.9236L4.4324 18.1548C3.89489 18.6457 3.86375 19.4835 4.35975 20.0097C5.09927 20.7927 6.33697 20.7692 7.05018 19.9598L12 14.3807L16.9498 19.9598C17.663 20.7692 18.9007 20.7927 19.6403 20.0097C20.1362 19.4835 20.1051 18.6457 19.5676 18.1548L15 13.9236L19.5676 9.69237Z" fill="currentColor"/> </svg> </div> </div> <div class="heart-rate-chart"> <svg width="100%" height="100%" viewBox="0 0 200 60" preserveAspectRatio="none"> <defs> <linearGradient id="heartGradient" x1="0%" y1="0%" x2="0%" y2="100%"> <stop offset="0%" stop-color="var(--accent)" stop-opacity="1" /> <stop offset="100%" stop-color="var(--accent)" stop-opacity="0" /> </linearGradient> </defs> <path class="heart-rate-line" d="M0,30 Q10,30 15,10 T30,30 T45,20 T60,40 T75,30 T90,50 T105,20 T120,30 T135,10 T150,30 T165,25 T180,40 T195,30 T200,30" />
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>MINIMA - Curated Shopping Experience</title> <style> :root { --primary: #14151a; --secondary: #f8f8f8; --accent: #ff4242; --gray: #a0a0a0; --light-gray: #e5e5e5; --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif; } body { background-color: var(--secondary); color: var(--primary); height: 100%; overflow-x: hidden; position: relative; } .container { max-width: 700px; margin: 0 auto; padding: 0 15px; height: 700px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--gray) var(--secondary); } .container::-webkit-scrollbar { width: 5px; } .container::-webkit-scrollbar-thumb { background-color: var(--gray); border-radius: 10px; } .header { padding: 20px 0; display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; background-color: var(--secondary); z-index: 10; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); } .logo { font-weight: 800; font-size: 1.5rem; letter-spacing: -1px; } .logo-dot { color: var(--accent); } .nav-icon { cursor: pointer; position: relative; } .nav-icon svg { width: 24px; height: 24px; fill: var(--primary); } .cart-count { position: absolute; top: -8px; right: -8px; background-color: var(--accent); color: white; border-radius: 50%; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: bold; } .search-container { margin: 10px 0 20px; position: relative; } .search-input { width: 100%; padding: 15px 15px 15px 45px; border: none; border-radius: 8px; background-color: var(--light-gray); font-size: 14px; transition: var(--transition); } .search-input:focus { outline: none; box-shadow: 0 0 0 2px var(--accent); } .search-icon { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--gray); } .categories { display: flex; gap: 10px; overflow-x: auto; padding: 5px 0 15px; scrollbar-width: none; } .categories::-webkit-scrollbar { display: none; } .category { padding: 8px 16px; border-radius: 20px; background-color: var(--light-gray); white-space: nowrap; cursor: pointer; transition: var(--transition); font-size: 13px; } .category.active { background-color: var(--primary); color: white; } .category:hover:not(.active) { background-color: #ddd; } .section-title { margin: 25px 0 15px; font-size: 1.2rem; font-weight: 600; display: flex; justify-content: space-between; align-items: center; } .view-all { font-size: 14px; color: var(--accent); cursor: pointer; font-weight: 500; } .featured-product { position: relative; border-radius: 12px; overflow: hidden; margin-bottom: 25px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); transition: var(--transition); height: 180px; } .featured-product:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15); } .featured-img { width: 100%; height: 100%; object-fit: cover; } .featured-overlay { position: absolute; bottom: 0; left: 0; right: 0; padding: 20px; background: linear-gradient(0deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%); color: white; } .featured-title { font-size: 1.1rem; margin-bottom: 5px; font-weight: 600; } .featured-price { display: flex; align-items: center; gap: 10px; } .current-price { font-weight: 700; font-size: 1rem; } .original-price { font-size: 0.9rem; text-decoration: line-through; opacity: 0.7; } .discount { background-color: var(--accent); font-size: 0.8rem; padding: 3px 8px; border-radius: 4px; font-weight: 500; } .products-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; margin-bottom: 30px; } .product-card { background-color: white; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); transition: var(--transition); position: relative; } .product-card:hover { transform: translateY(-5px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1); } .product-img-container { height: 140px; overflow: hidden; position: relative; } .product-img { width: 100%; height: 100%; object-fit: cover; transition: var(--transition); } .product-card:hover .product-img { transform: scale(1.05); } .product-info { padding: 12px; } .product-name { font-size: 0.9rem; font-weight: 500; margin-bottom: 5px; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } .product-price { font-weight: 700; font-size: 1rem; color: var(--primary); } .add-to-cart { position: absolute; bottom: 12px; right: 12px; width: 32px; height: 32px; border-radius: 50%; background-color: var(--primary); color: white; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: var(--transition); border: none; } .add-to-cart:hover { background-color: var(--accent); transform: scale(1.1); } .add-to-cart svg { width: 16px; height: 16px; fill: white; } .wish-button { position: absolute; top: 10px; right: 10px; background-color: rgba(255, 255, 255, 0.8); border-radius: 50%; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: var(--transition); z-index: 5; border: none; } .wish-button svg { width: 16px; height: 16px; fill: var(--gray); transition: var(--transition); } .wish-button.active svg { fill: var(--accent); } .wish-button:hover { background-color: rgba(255, 255, 255, 1); } .wish-button:hover svg { fill: var(--accent); } .cart-modal { position: fixed; top: 0; right: -100%; width: 100%; max-width: 350px; height: 100%; background-color: white; z-index: 100; box-shadow: -5px 0 25px rgba(0, 0, 0, 0.1); transition: var(--transition); padding: 20px; overflow-y: auto; } .cart-modal.active { right: 0; } .cart-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px solid var(--light-gray); } .cart-title { font-size: 1.2rem; font-weight: 600; } .close-cart { cursor: pointer; background: none; border: none; } .close-cart svg { width: 24px; height: 24px; fill: var(--primary); } .cart-items { margin-bottom: 20px; } .cart-item { display: flex; gap: 15px; padding: 15px 0; border-bottom: 1px solid var(--light-gray); position: relative; } .cart-item-img { width: 80px; height: 80px; border-radius: 8px; object-fit: cover; } .cart-item-details { flex: 1; display: flex; flex-direction: column; justify-content: space-between; } .cart-item-name { font-weight: 500; margin-bottom: 5px; } .cart-item-price { font-weight: 700; color: var(--primary); } .cart-item-quantity { display: flex; align-items: center; gap: 10px; } .quantity-btn { width: 28px; height: 28px; border-radius: 50%; background-color: var(--light-gray); display: flex; align-items: center; justify-content: center; cursor: pointer; border: none; font-size: 16px; } .quantity-btn:hover { background-color: var(--gray); color: white; } .cart-item-remove { position: absolute; top: 15px; right: 0; background: none; border: none; cursor: pointer; color: var(--gray); } .cart-item-remove:hover { color: var(--accent); } .cart-total { margin-top: 20px; padding-top: 15px; border-top: 1px solid var(--light-gray); } .cart-total-row { display: flex; justify-content: space-between; margin-bottom: 10px; } .cart-total-label { color: var(--gray); } .cart-total-value { font-weight: 600; } .cart-total-final { display: flex; justify-content: space-between; margin: 15px 0; font-size: 1.1rem; font-weight: 700; } .checkout-btn { width: 100%; padding: 15px; background-color: var(--primary); color: white; border: none; border-radius: 10px; font-weight: 600; cursor: pointer; transition: var(--transition); display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 15px; } .checkout-btn:hover { background-color: var(--accent); } .empty-cart { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 300px; text-align: center; } .empty-cart svg { width: 60px; height: 60px; margin-bottom: 20px; fill: var(--gray); } .empty-cart-text { font-size: 1rem; color: var(--gray); margin-bottom: 20px; } .continue-shopping { padding: 10px 20px; background-color: var(--primary); color: white; border: none; border-radius: 8px; cursor: pointer; font-weight: 500; transition: var(--transition); } .continue-shopping:hover { background-color: var(--accent); } .overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); opacity: 0; visibility: hidden; transition: var(--transition); z-index: 50; } .overlay.active { opacity: 1; visibility: visible; } .toast { position: fixed; bottom: -100px; left: 50%; transform: translateX(-50%); background-color: var(--primary); color: white; padding: 12px 24px; border-radius: 8px; font-size: 14px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); z-index: 1000; transition: var(--transition); display: flex; align-items: center; gap: 10px; } .toast.active { bottom: 20px; } .toast-icon { width: 20px; height: 20px; fill: white; } .product-quick-view { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; max-width: 600px; background-color: white; border-radius: 15px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); z-index: 200; overflow: hidden; opacity: 0; visibility: hidden; transition: var(--transition); } .product-quick-view.active { opacity: 1; visibility: visible; } .quick-view-content { display: flex; flex-direction: column; max-height: 80vh; overflow-y: auto; } .quick-view-img { width: 100%; height: 250px; object-fit: cover; } .quick-view-details { padding: 20px; } .quick-view-title { font-size: 1.3rem; font-weight: 600; margin-bottom: 10px; } .quick-view-price { font-size: 1.4rem; font-weight: 700; margin-bottom: 15px; color: var(--accent); } .quick-view-desc { margin-bottom: 20px; color: var(--gray); line-height: 1.5; } .color-options { margin-bottom: 20px; } .option-title { font-weight: 500; margin-bottom: 10px; } .color-picker { display: flex; gap: 10px; } .color-circle { width: 30px; height: 30px; border-radius: 50%; cursor: pointer; transition: var(--transition); position: relative; } .color-circle.selected::after { content: ''; position: absolute; top: -3px; left: -3px; right: -3px; bottom: -3px; border: 2px solid var(--primary); border-radius: 50%; } .size-options { margin-bottom: 20px; } .size-picker { display: flex; gap: 10px; } .size-option { padding: 8px 12px; border: 1px solid var(--light-gray); border-radius: 5px; cursor: pointer; transition: var(--transition); text-align: center; min-width: 40px; } .size-option.selected { background-color: var(--primary); color: white; border-color: var(--primary); } .size-option:hover:not(.selected) { border-color: var(--gray); } .quantity-selector { display: flex; align-items: center; gap: 15px; margin-bottom: 20px; } .quantity-control { display: flex; align-items: center; border: 1px solid var(--light-gray); border-radius: 8px; overflow: hidden; } .quantity-btn-large { width: 40px; height: 40px; background-color: var(--light-gray); border: none; cursor: pointer; font-size: 18px; display: flex; align-items: center; justify-content: center; } .quantity-btn-large:hover { background-color: var(--gray); color: white; } .quantity-input { width: 50px; height: 40px; border: none; text-align: center; font-size: 16px; } .quantity-input:focus { outline: none; } .quick-view-actions { display: flex; gap: 10px; } .add-to-cart-btn { flex: 1; padding: 15px; background-color: var(--primary); color: white; border: none; border-radius: 10px; font-weight: 600; cursor: pointer; transition: var(--transition); display: flex; align-items: center; justify-content: center; gap: 10px; } .add-to-cart-btn:hover { background-color: var(--accent); } .wish-btn-large { width: 50px; height: 50px; border-radius: 10px; background-color: var(--light-gray); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: var(--transition); border: none; } .wish-btn-large svg { width: 20px; height: 20px; fill: var(--gray); transition: var(--transition); } .wish-btn-large.active svg { fill: var(--accent); } .wish-btn-large:hover { background-color: #ddd; } .wish-btn-large:hover svg { fill: var(--accent); } .close-quick-view { position: absolute; top: 15px; right: 15px; background-color: rgba(255, 255, 255, 0.8); border-radius: 50%; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 10; border: none; } .close-quick-view svg { width: 20px; height: 20px; fill: var(--primary); } /* Responsive styles */ @media (max-width: 480px) { .product-quick-view { width: 95%; } .products-grid { grid-template-columns: 1fr; } .quick-view-actions { flex-direction: column; } .wish-btn-large { width: 100%; } } /* Animations */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } .product-card { animation: fadeIn 0.5s ease-out forwards; } .featured-product { animation: slideUp 0.6s ease-out forwards; } .category { position: relative; overflow: hidden; } .category::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 0; background-color: var(--accent); transition: height 0.3s ease; z-index: -1; opacity: 0.2; } .category:hover::after { height: 100%; } /* Animated loading spinner */ .loader { display: inline-block; position: relative; width: 40px; height: 40px; } .loader div { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--primary); animation: loader 1.2s linear infinite; } .loader div:nth-child(1) { top: 0; left: 0; animation-delay: 0s; } .loader div:nth-child(2) { top: 0; right: 0; animation-delay: 0.4s; } .loader div:nth-child(3) { bottom: 0; left: 0; animation-delay: 0.8s; } .loader div:nth-child(4) { bottom: 0; right: 0; animation-delay: 1.2s; } @keyframes loader { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } } </style> </head> <body> <div class="container"> <header class="header"> <div class="logo">MINIMA<span class="logo-dot">.</span></div> <div class="nav-icon" id="cartIcon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path d="M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.08-.14.12-.31.12-.48 0-.55-.45-1-1-1H5.21l-.94-2H1zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z"/> </svg> <span class="cart-count" id="cartCount">0</span> </div> </header> <div class="search-container"> <input type="text" class="search-input" placeholder="Search for products..."> <div class="search-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="currentColor"> <path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-2.78-2.79-5-5.59-5.34a6.505 6.505 0 0 0-7.27 7.27c.34 2.8 2.56 5.12 5.34 5.59a6.5 6.5 0 0 0 5.34-1.48l.27.28v.79l4.25 4.25c.41.41 1.08.41 1.49 0 .41-.41.41-1.08 0-1.49L15.5 14zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/> </svg> </div> </div> <div class="categories"> <div class="category active">All</div> <div class="category">Clothing</div> <div class="category">Electronics</div> <div class="category">Home & Living</div> <div class="category">Beauty</div> <div class="category">Accessories</div> </div> <div class="section-title"> <h2>Just Dropped</h2> <span class="view-all">View all</span> </div> <div class="featured-product"> <img src="https://images.unsplash.com/photo-1511556820780-d912e42b4980?ixlib=rb-1.2.1&auto=format&fit=crop&w=700&q=80" alt="Limited Edition Headphones" class="featured-img"> <div class="featured-overlay"> <h3 class="featured-title">Eclipse Pro Wireless Headphones</h3> <div class="featured-price"> <span class="current-price">$129.99</span> <span class="original-price">$199.99</span> <span class="discount">35% OFF</span> </div> </div> </div> <div class="section-title"> <h2>Trending Now</h2> <span class="view-all">View all</span> </div> <div class="products-grid"> <div class="product-card" data-id="1" data-name="Smart Watch Series X" data-price="189.99" data-img="https://images.unsplash.com/photo-1546868871-7041f2a55e12?ixlib=rb-1.2.1&auto=format&fit=crop&w=400&q=80"> <div class="product-img-container"> <img src="https://images.unsplash.com/photo-1546868871-7041f2a55e12?ixlib=rb-1.2.1&auto=format&fit=crop&w=400&q=80" alt="Smart Watch Series X" class="product-img"> <button class="wish-button"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/> </svg> </button> </div> <div class="product-info"> <h3 class="product-name">Smart Watch Series X</h3> <p class="product-price">$189.99</p> <button class="add-to-cart"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/> </svg> </button> </div> </div> <div class="product-card" data-id="2" data-name="Minimalist Leather Bag" data-price="79.99" data-img="https://images.unsplash.com/photo-1547949003-9792a18a2601?ixlib=rb-1.2.1&auto=format&fit=crop&w=400&q=80"> <div class="product-img-container"> <img src="https://images.unsplash.com/photo-1547949003-9792a18a2601?ixlib=rb-1.2.1&auto=format&fit=crop&w=400&q=80" alt="Minimalist Leather Bag" class="product-img"> <button class="wish-button"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/> </svg> </button> </div> <div class="product-info"> <h3 class="product-name">Minimalist Leather Bag</h3> <p class="product-price">$79.99</p> <button class="add-to-cart"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/> </svg> </button> </div> </div> <div class="product-card" data-id="3" data-name="Ultralight Running Shoes" data-price="119.99" data-img="https://images.unsplash.com/photo-1542291026-7eec264c27ff?ixlib=rb-1.2.1&auto=format&fit=crop&w=400&q=80"> <div class="product-img-container"> <img src="https://images.unsplash.com/photo-1542291026-7eec264c27ff?ixlib=rb-1.2.1&auto=format&fit=crop&w=400&q=80" alt="Ultralight Running Shoes" class="product-img"> <button class="wish-button"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/> </svg> </button> </div> <div class="product-info"> <h3 class="product-name">Ultralight Running Shoes</h3> <p class="product-price">$119.99</p> <button class="add-to-cart"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/> </svg> </button> </div> </div> <div class="product-card" data-id="4" data-name="Ceramic Coffee Pour Over" data-price="42.99" data-img="https://images.unsplash.com/photo-1553787499-6f9133860278?ixlib=rb-1.2.1&auto=format&fit=crop&w=400&q=80"> <div class="product-img-container"> <img src="https://images.unsplash.com/photo-1553787499-6f9133860278?ixlib=rb-1.2.1&auto=format&fit=crop&w=400&q=80" alt="Ceramic Coffee Pour Over" class="product-img"> <button class="wish-button"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/> </svg> </button> </div> <div class="product-info"> <h3 class="product-name">Ceramic Coffee Pour Over</h3> <p class="product-price">$42.99</p> <button class="add-to-cart"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/> </svg> </button> </div> </div> </div> <div class="section-title"> <h2>You Might Also Like</h2> <span class="view-all">View all</span> </div> <div class="products-grid"> <div class="product-card" data-id="5" data-name="
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>FlowFinance</title> <style> /* Reset and Base Styles */ * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; } :root { --primary: #2D57EC; --primary-light: #4B77FF; --secondary: #19284F; --accent: #00DAC3; --danger: #FF6B6B; --success: #4BD37B; --neutral-100: #F8FAFC; --neutral-200: #EEF2F6; --neutral-300: #DDE5EE; --neutral-400: #A9B5C6; --neutral-500: #637594; --neutral-600: #3D4D65; --neutral-700: #2C3A4F; --neutral-800: #1A2233; --card-shadow: 0 10px 25px rgba(29, 52, 99, 0.07); --secure-shadow: 0 0 0 2px rgba(0, 218, 195, 0.2); } body { background-color: var(--neutral-100); color: var(--neutral-800); line-height: 1.5; font-size: 14px; overflow-x: hidden; max-width: 700px; margin: 0 auto; height: 700px; overflow-y: auto; } .container { max-width: 700px; margin: 0 auto; padding: 0 1rem; } /* Typography */ h1, h2, h3, h4 { font-weight: 700; letter-spacing: -0.01em; } h1 { font-size: 1.6rem; margin-bottom: 0.5rem; } h2 { font-size: 1.4rem; margin-bottom: 0.5rem; } h3 { font-size: 1.1rem; margin-bottom: 0.5rem; } p { margin-bottom: 1rem; color: var(--neutral-600); } /* Header */ header { background-color: white; border-bottom: 1px solid var(--neutral-200); padding: 1rem 0; position: sticky; top: 0; z-index: 100; } .header-content { display: flex; justify-content: space-between; align-items: center; } .logo { display: flex; align-items: center; font-weight: 800; font-size: 1.3rem; color: var(--secondary); } .logo-icon { background: linear-gradient(135deg, var(--primary), var(--accent)); color: white; width: 24px; height: 24px; border-radius: 6px; display: flex; align-items: center; justify-content: center; margin-right: 8px; font-size: 1rem; } .user-menu { display: flex; align-items: center; gap: 1rem; } .notification-bell { position: relative; cursor: pointer; } .notification-dot { position: absolute; top: -2px; right: -2px; width: 8px; height: 8px; background-color: var(--danger); border-radius: 50%; border: 2px solid white; } .avatar { width: 36px; height: 36px; border-radius: 50%; background-color: var(--primary-light); color: white; display: flex; align-items: center; justify-content: center; font-weight: 700; cursor: pointer; transition: transform 0.2s; } .avatar:hover { transform: scale(1.05); } /* Main Content */ main { padding: 1.5rem 0; } /* Dashboard Cards */ .card { background-color: white; border-radius: 1rem; padding: 1.5rem; margin-bottom: 1.5rem; box-shadow: var(--card-shadow); transition: all 0.3s ease; } .card:hover { transform: translateY(-2px); box-shadow: 0 15px 30px rgba(29, 52, 99, 0.1); } .card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; } .card-title { font-size: 1.1rem; font-weight: 700; color: var(--secondary); } .card-action { color: var(--primary); font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 0.25rem; font-size: 0.9rem; } /* Balance Card */ .balance-card { background: linear-gradient(to right, var(--secondary), var(--primary)); color: white; } .balance-card .card-title { color: rgba(255, 255, 255, 0.8); font-size: 0.9rem; font-weight: 600; } .balance-amount { font-size: 2.2rem; font-weight: 700; margin: 0.5rem 0 1rem; } .balance-actions { display: flex; gap: 1rem; margin-top: 1rem; } .balance-action-btn { background-color: rgba(255, 255, 255, 0.15); border: none; color: white; padding: 0.75rem 1rem; border-radius: 0.75rem; font-weight: 600; cursor: pointer; flex: 1; display: flex; align-items: center; justify-content: center; gap: 0.5rem; transition: all 0.2s; } .balance-action-btn:hover { background-color: rgba(255, 255, 255, 0.25); } .balance-action-btn i { font-size: 1.1rem; } /* Cards Grid */ .cards-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } @media (max-width: 600px) { .cards-grid { grid-template-columns: 1fr; } } .stat-card { padding: 1.25rem; } .stat-value { font-size: 1.8rem; font-weight: 700; margin: 0.25rem 0; } .stat-label { color: var(--neutral-500); font-size: 0.85rem; } .trend { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.25rem 0.5rem; border-radius: 1rem; font-size: 0.8rem; font-weight: 600; } .trend-up { background-color: rgba(75, 211, 123, 0.15); color: var(--success); } .trend-down { background-color: rgba(255, 107, 107, 0.15); color: var(--danger); } /* Transactions */ .transaction-list { margin-top: 0.5rem; } .transaction-item { display: flex; align-items: center; padding: 1rem 0; border-bottom: 1px solid var(--neutral-200); position: relative; overflow: hidden; } .transaction-item:last-child { border-bottom: none; } .transaction-icon { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-right: 1rem; flex-shrink: 0; } .transaction-income { background-color: rgba(75, 211, 123, 0.15); color: var(--success); } .transaction-expense { background-color: rgba(255, 107, 107, 0.15); color: var(--danger); } .transaction-subscription { background-color: rgba(45, 87, 236, 0.15); color: var(--primary); } .transaction-info { flex: 1; } .transaction-name { font-weight: 600; margin-bottom: 0.25rem; } .transaction-date { font-size: 0.8rem; color: var(--neutral-500); } .transaction-amount { font-weight: 700; } .amount-positive { color: var(--success); } .amount-negative { color: var(--danger); } /* Charts */ .chart-container { height: 200px; margin-top: 1rem; position: relative; } .chart-bar { position: absolute; bottom: 0; width: 8%; background-color: var(--primary-light); border-radius: 4px 4px 0 0; transition: height 1s cubic-bezier(0.34, 1.56, 0.64, 1); } .chart-bar:nth-child(even) { background-color: var(--primary); } .chart-bar:hover { background-color: var(--accent); } .chart-labels { display: flex; justify-content: space-between; margin-top: 0.5rem; color: var(--neutral-500); font-size: 0.8rem; } /* Quick Actions */ .quick-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 0.5rem; } @media (max-width: 600px) { .quick-actions { grid-template-columns: repeat(2, 1fr); } } .quick-action-btn { background-color: var(--neutral-100); border: 1px solid var(--neutral-200); border-radius: 0.75rem; padding: 1rem 0.5rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; transition: all 0.2s; cursor: pointer; } .quick-action-btn:hover { background-color: var(--neutral-200); transform: translateY(-2px); } .quick-action-icon { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background-color: var(--primary); color: white; margin-bottom: 0.5rem; } .quick-action-label { font-size: 0.8rem; font-weight: 600; text-align: center; } /* Security Indicator */ .security-indicator { position: fixed; bottom: 1rem; right: 1rem; background-color: white; border-radius: 2rem; padding: 0.5rem 1rem; display: flex; align-items: center; gap: 0.5rem; box-shadow: var(--card-shadow); cursor: pointer; transition: all 0.2s; z-index: 100; border: 1px solid var(--neutral-200); } .security-indicator:hover { box-shadow: var(--secure-shadow); transform: translateY(-2px); } .security-icon { color: var(--accent); } .security-text { font-size: 0.8rem; font-weight: 600; color: var(--neutral-700); } /* Transaction Modal */ .modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(26, 34, 51, 0.7); display: flex; align-items: center; justify-content: center; z-index: 1000; opacity: 0; visibility: hidden; transition: all 0.3s; } .modal-overlay.active { opacity: 1; visibility: visible; } .modal { background-color: white; border-radius: 1rem; width: 90%; max-width: 500px; padding: 2rem; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2); transform: translateY(20px); transition: transform 0.3s; } .modal-overlay.active .modal { transform: translateY(0); } .modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; } .modal-title { font-size: 1.3rem; font-weight: 700; } .modal-close { background: none; border: none; font-size: 1.5rem; color: var(--neutral-500); cursor: pointer; transition: color 0.2s; } .modal-close:hover { color: var(--neutral-800); } .form-group { margin-bottom: 1.5rem; } label { display: block; margin-bottom: 0.5rem; font-weight: 600; color: var(--neutral-700); } input, select { width: 100%; padding: 0.75rem 1rem; border: 1px solid var(--neutral-300); border-radius: 0.75rem; font-size: 1rem; transition: all 0.2s; } input:focus, select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(45, 87, 236, 0.15); } .btn { background-color: var(--primary); color: white; border: none; border-radius: 0.75rem; padding: 1rem 1.5rem; font-weight: 600; cursor: pointer; transition: all 0.2s; width: 100%; font-size: 1rem; } .btn:hover { background-color: var(--primary-light); transform: translateY(-2px); } /* Animations */ @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } @keyframes slide-in { 0% { transform: translateX(50px); opacity: 0; } 100% { transform: translateX(0); opacity: 1; } } .transaction-item.new { animation: slide-in 0.3s forwards; } .pulse { animation: pulse 2s infinite; } /* Transaction Success Animation */ .transaction-success { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: white; border-radius: 1rem; padding: 2rem; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: var(--card-shadow); z-index: 1100; opacity: 0; visibility: hidden; transition: all 0.3s; } .transaction-success.active { opacity: 1; visibility: visible; } .success-icon { width: 80px; height: 80px; background-color: var(--success); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2rem; margin-bottom: 1.5rem; } .success-title { font-size: 1.5rem; font-weight: 700; margin-bottom: 0.5rem; } .success-message { text-align: center; margin-bottom: 1.5rem; } /* Navigation */ .bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; background-color: white; display: flex; justify-content: space-around; padding: 0.75rem 0; border-top: 1px solid var(--neutral-200); z-index: 90; max-width: 700px; margin: 0 auto; } .nav-item { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; color: var(--neutral-500); font-size: 0.8rem; font-weight: 600; transition: all 0.2s; cursor: pointer; } .nav-item.active { color: var(--primary); } .nav-item:hover { color: var(--primary-light); } .nav-icon { font-size: 1.4rem; } /* Add New Transaction Button */ .add-transaction-btn { position: fixed; bottom: 4.5rem; right: 1.5rem; width: 56px; height: 56px; background-color: var(--primary); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 10px rgba(45, 87, 236, 0.3); cursor: pointer; transition: all 0.2s; z-index: 100; font-size: 1.5rem; } .add-transaction-btn:hover { background-color: var(--primary-light); transform: translateY(-4px) rotate(90deg); box-shadow: 0 8px 15px rgba(45, 87, 236, 0.4); } /* Custom Progress Bar */ .progress-container { width: 100%; height: 6px; background-color: var(--neutral-200); border-radius: 3px; margin: 0.5rem 0 1rem; overflow: hidden; } .progress-bar { height: 100%; background-color: var(--primary); border-radius: 3px; transition: width 1s ease; } /* Budget Badge */ .budget-badge { display: inline-block; padding: 0.25rem 0.5rem; border-radius: 0.5rem; font-size: 0.75rem; font-weight: 600; margin-left: 0.5rem; } .budget-on-track { background-color: rgba(75, 211, 123, 0.15); color: var(--success); } .budget-at-risk { background-color: rgba(255, 170, 0, 0.15); color: #FF9900; } .budget-over { background-color: rgba(255, 107, 107, 0.15); color: var(--danger); } </style> </head> <body> <header> <div class="container"> <div class="header-content"> <div class="logo"> <div class="logo-icon">F</div> FlowFinance </div> <div class="user-menu"> <div class="notification-bell"> <i class="fas fa-bell"></i> <div class="notification-dot"></div> </div> <div class="avatar">AK</div> </div> </div> </div> </header> <main> <div class="container"> <div class="card balance-card"> <div class="card-title">Available Balance</div> <div class="balance-amount">$8,493.25</div> <div class="balance-actions"> <button class="balance-action-btn"> <i class="fas fa-arrow-up"></i> Send </button> <button class="balance-action-btn"> <i class="fas fa-arrow-down"></i> Receive </button> <button class="balance-action-btn"> <i class="fas fa-exchange-alt"></i> Transfer </button> </div> </div> <div class="cards-grid"> <div class="card stat-card"> <div class="stat-label">Monthly Income</div> <div class="stat-value">$12,450</div> <div class="trend trend-up"> <i class="fas fa-arrow-up"></i> 8.2% </div> </div> <div class="card stat-card"> <div class="stat-label">Monthly Expenses</div> <div class="stat-value">$8,245</div> <div class="trend trend-down"> <i class="fas fa-arrow-down"></i> 3.1% </div> </div> </div> <div class="card"> <div class="card-header"> <div class="card-title">Budget Overview</div> <div class="card-action">Manage <i class="fas fa-chevron-right"></i></div> </div> <div> <h3>Entertainment <span class="budget-badge budget-on-track">On Track</span></h3> <div class="progress-container"> <div class="progress-bar" style="width: 32%"></div> </div> <p>$160 of $500 spent</p> <h3>Groceries <span class="budget-badge budget-at-risk">At Risk</span></h3> <div class="progress-container"> <div class="progress-bar" style="width: 78%"></div> </div> <p>$624 of $800 spent</p> <h3>Dining <span class="budget-badge budget-over">Over Budget</span></h3> <div class="progress-container"> <div class="progress-bar" style="width: 100%"></div> </div> <p>$385 of $300 spent</p> </div> </div> <div class="card"> <div class="card-header"> <div class="card-title">Weekly Spending</div> <div class="card-action">See All <i class="fas fa-chevron-right"></i></div> </div> <div class="chart-container"> <div class="chart-bar" style="left: 0%; height: 40%"></div> <div class="chart-bar" style="left: 13%; height: 65%"></div> <div class="chart-bar" style="left: 26%; height: 45%"></div> <div class="chart-bar" style="left: 39%; height: 80%"></div> <div class="chart-bar" style="left: 52%; height: 55%"></div> <div class="chart-bar" style="left: 65%; height: 30%"></div> <div class="chart-bar" style="left: 78%; height: 60%"></div> <div class="chart-bar" style="left: 91%; height: 50%"></div> </div> <div class="chart-labels"> <span>Mon</span> <span>Tue</span> <span>Wed</span> <span>Thu</span> <span>Fri</span> <span>Sat</span> <span>Sun</span> </div> </div> <div class="card"> <div class="card-header"> <div class="card-title">Recent Transactions</div> <div class="card-action">View All <i class="fas fa-chevron-right"></i></div> </div> <div class="transaction-list"> <div class="transaction-item"> <div class="transaction-icon transaction-expense"> <i class="fas fa-shopping-bag"></i> </div> <div class="transaction-info"> <div class="transaction-name">Whole Foods Market</div> <div class="transaction-date">Today, 2:34 PM</div> </div> <div class="transaction-amount amount-negative">-$86.23</div> </div> <div class="transaction-item"> <div class="transaction-icon transaction-subscription"> <i class="fas fa-play"></i> </div> <div class="transaction-info"> <div class="transaction-name">Netflix Subscription</div> <div class="transaction-date">May 15, 2023</div> </div> <div class="transaction-amount amount-negative">-$14.99</div> </div> <div class="transaction-item"> <div class="transaction-icon transaction-income"> <i class="fas fa-briefcase"></i> </div> <div class="transaction-info"> <div class="transaction-name">Salary Deposit</div> <div class="transaction-date">May 14, 2023</div> </div> <div class="transaction-amount amount-positive">+$3,250.00</div> </div> <div class="transaction-item"> <div class="transaction-icon transaction-expense"> <i class="fas fa-utensils"></i> </div> <div class="transaction-info"> <div class="transaction-name">Sushi Royale</div> <div class="transaction-date">May 13, 2023</div> </div> <div class="transaction-amount amount-negative">-$54.80</div> </div> </div> </div> <div class="card"> <div class="card-header"> <div class="card-title">Quick Actions</div> </div> <div class="quick-actions"> <div class="quick-action-btn"> <div class="quick-action-icon"> <i class="fas fa-credit-card"></i> </div> <div class="quick-action-label">Pay Bills</div> </div> <div class="quick-action-btn"> <div class="quick-action-icon"> <i class="fas fa-mobile-alt"></i> </div> <div class="quick-action-label">Mobile Recharge</div> </div> <div class="quick-action-btn"> <div class="quick-action-icon"> <i class="fas fa-money-check"></i> </div> <div class="quick-action-label">Check Deposit</div> </div> <div class="quick-action-btn"> <div class="quick-action-icon"> <i class="fas fa-gift"></i> </div> <div class="quick-action-label">Rewards</div> </div> </div> </div> </div> </main> <div class="security-indicator"> <div class="security-icon"> <i class="fas fa-shield-alt"></i> </div> <div class="security-text">Secure Connection</div> </div> <div class="add-transaction-btn"> <i class="fas fa-plus"></i> </div> <div class="bottom-nav"> <div class="nav-item active"> <div class="nav-icon"><i class="fas fa-home"></i></div> <div>Home</div> </div> <div class="nav-item"> <div class="nav-icon"><i class="fas fa-chart-line"></i></div> <div>Stats</div> </div> <div class="nav-item"> <div class="nav-icon"><i class="fas fa-wallet"></i></div> <div>Cards</div> </div> <div class="nav-item"> <div class="nav-icon"><i class="fas fa-cog"></i></div> <div>Settings</div> </div> </div> <div class="modal-overlay" id="transactionModal"> <div class="modal"> <div class="modal-header"> <div class="modal-title">New Transaction</div> <button class="modal-close">×</button> </div> <div class="form-group"> <label for="transaction-type">Transaction Type</label> <select id="transaction-type"> <option value="expense">Expense</option> <option value="income">Income</option> <option value="transfer">Transfer</option> </select> </div> <div class="form-group"> <label for="transaction-amount">Amount</label> <input type="number" id="transaction-amount" placeholder="Enter amount"> </div> <div class="form-group"> <label for="transaction-category">Category</label> <select id="transaction-category"> <option value="groceries">Groceries</option> <option value="dining">Dining</option> <option value="entertainment">Entertainment</option> <option value="transport">Transportation</option> <option value="utilities">Utilities</option> <option value="shopping">Shopping</option> <option value="health">Health</option> </select> </div> <div class="form-group"> <label for="transaction-note">Note (Optional)</label> <input type="text" id="transaction-note" placeholder="Add a note"> </div> <button class="btn" id="submit-transaction">Complete Transaction</button> </div> </div> <div class="transaction-success" id="transactionSuccess"> <div class="success-icon"> <i class="fas fa-check"></i> </div> <div class="success-title">Transaction Complete!</div> <div class="success-message">Your transaction has been successfully processed.</div> <button class="btn" id="success-close">Back to Dashboard</button> </div> <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script> <script> document.addEventListener('DOMContentLoaded', function() { // Fallback for Font Awesome if CDN fails if (!document.querySelector('i').style.fontFamily) { const fontAwesomeIcons = { 'fa-arrow-up': '↑', 'fa-arrow-down': '↓', 'fa-exchange-alt': '⇄', 'fa-chevron-right': '›', 'fa-shopping-bag': '🛍️', 'fa-play': '▶️', 'fa-briefcase': '💼', 'fa-utensils': '🍴', 'fa-credit-card': '💳', 'fa-mobile-alt': '📱', 'fa-money-check': '💵', 'fa-gift': '🎁', 'fa-shield-alt': '🛡️', 'fa-plus': '+', 'fa-home': '🏠', 'fa-chart-line': '📈', 'fa-wallet': '👛', 'fa-cog': '⚙️', 'fa-check': '✓', 'fa-bell': '🔔' }; document.querySelectorAll('i[class*="fa-"]').forEach(icon => { for (const [className, symbol] of Object.entries(fontAwesomeIcons)) { if (icon.classList.contains(className)) { icon.textContent = symbol; break; } } }); } // Animate chart bars on load const chartBars = document.querySelectorAll('.chart-bar'); chartBars.forEach(bar => { const height = bar.style.height; bar.style.height = '0'; setTimeout(() => { bar.style.height = height; }, 300); }); // Add transaction modal const addTransactionBtn = document.querySelector('.add-transaction-btn'); const transactionModal = document.getElementById('transactionModal'); const modalClose = document.querySelector('.modal-close'); const submitTransaction = document.getElementById('submit-transaction'); const transactionSuccess = document.getElementById('transactionSuccess'); const successClose = document.getElementById('success-close'); addTransactionBtn.addEventListener('click', () => { transactionModal.classList.add('active'); }); modalClose.addEventListener('click', () => { transactionModal.classList.remove('active'); }); submitTransaction.addEventListener('click', () => { // Get form values const type = document.getElementById('transaction-type').value; const amount = document.getElementById('transaction-amount').value; const category = document.getElementById('transaction-category').value; const note = document.getElementById('transaction-note').value; if (!amount || amount <= 0) { alert('Please enter a valid amount'); return; } // Close transaction modal and show success transactionModal.classList.remove('active'); transactionSuccess.classList.add('active'); // Create new transaction in the list setTimeout(() => { addNewTransaction(type, amount, category, note); }, 1000); }); successClose.addEventListener('click', () => { transactionSuccess.classList.remove('active'); }); // Close modal if clicked outside transactionModal.addEventListener('click', (e) => { if (e.target === transactionModal) { transactionModal.classList.remove('active'); } }); // Function to add a new transaction to the list function addNewTransaction(type, amount, category, note) { const transactionList = document.querySelector('.transaction-list'); const newTransaction = document.createElement('div'); newTransaction.className = 'transaction-item new'; const iconClass = type === 'income' ? 'transaction-income' : 'transaction-expense'; const iconType = getIconForCategory(category); const amountClass = type === 'income' ? 'amount-positive' : 'amount-negative'; const amountPrefix = type === 'income' ? '+' : '-'; const formattedAmount = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(amount); newTransaction.innerHTML = ` <div class="transaction-icon ${iconClass}"> <i class="fas ${iconType}"></i> </div> <div class="transaction-info"> <div class="transaction-name">${getCategoryName(category)}${note ? ` - ${note}` : ''}</div> <div class="transaction-date">Just now</div> </div> <div
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Luminova Learning</title> <style> :root { --primary: #4c6fff; --secondary: #ff9d5c; --accent1: #ff5c87; --accent2: #5cffa0; --light-bg: #f5f7fa; --pastel-blue: #d1e3ff; --pastel-green: #d1ffe0; --pastel-pink: #ffd1e3; --pastel-purple: #e3d1ff; --dark-text: #2a2a4a; --light-text: #6b7280; --white: #ffffff; --shadow: 0 10px 30px rgba(76, 111, 255, 0.1); --border-radius: 16px; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; } body { background-color: var(--light-bg); color: var(--dark-text); font-size: 16px; line-height: 1.6; overflow-x: hidden; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; transition: background-color 0.3s ease; } .container { max-width: 100%; width: 100%; height: 100%; overflow-y: auto; border-radius: var(--border-radius); background-color: var(--white); box-shadow: var(--shadow); position: relative; } .app-wrapper { display: flex; flex-direction: column; height: 100%; transition: all 0.3s ease; } header { display: flex; align-items: center; justify-content: space-between; padding: 20px; background: linear-gradient(135deg, var(--primary), #7644ff); border-radius: var(--border-radius) var(--border-radius) 0 0; color: var(--white); position: relative; overflow: hidden; } .logo { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 20px; position: relative; z-index: 2; } .logo-icon { background: var(--white); width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: var(--primary); font-weight: 900; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } .profile { display: flex; align-items: center; gap: 10px; position: relative; z-index: 2; } .profile-image { width: 40px; height: 40px; border-radius: 50%; background-color: var(--pastel-blue); display: flex; align-items: center; justify-content: center; font-weight: bold; color: var(--primary); border: 2px solid var(--white); } .header-decoration { position: absolute; bottom: -30px; right: -30px; width: 150px; height: 150px; border-radius: 50%; background: rgba(255, 255, 255, 0.1); z-index: 1; } .header-decoration:before { content: ''; position: absolute; top: -20px; left: -50px; width: 100px; height: 100px; border-radius: 50%; background: rgba(255, 255, 255, 0.1); } .menu-btn { background: none; border: none; color: var(--white); font-size: 24px; cursor: pointer; z-index: 2; } .main-content { padding: 20px; flex-grow: 1; overflow-y: auto; position: relative; } .section-title { font-size: 22px; font-weight: 700; margin-bottom: 20px; display: flex; align-items: center; gap: 8px; } .welcome-banner { background: linear-gradient(135deg, var(--pastel-blue), var(--pastel-purple)); border-radius: var(--border-radius); padding: 20px; margin-bottom: 25px; position: relative; overflow: hidden; transition: transform 0.3s ease; } .welcome-banner:hover { transform: translateY(-5px); } .welcome-banner h2 { font-size: 20px; margin-bottom: 5px; position: relative; z-index: 1; } .welcome-banner p { font-size: 14px; opacity: 0.8; margin-bottom: 15px; max-width: 80%; position: relative; z-index: 1; } .welcome-decoration { position: absolute; top: 10px; right: 10px; font-size: 50px; opacity: 0.2; } .start-btn { display: inline-flex; align-items: center; gap: 8px; background-color: var(--white); color: var(--primary); border: none; padding: 10px 20px; border-radius: 30px; font-weight: 600; cursor: pointer; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); transition: all 0.2s ease; position: relative; z-index: 1; } .start-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15); } .courses-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; margin-bottom: 30px; } .course-card { background-color: var(--white); border-radius: var(--border-radius); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); overflow: hidden; position: relative; transition: all 0.3s ease; cursor: pointer; height: 100%; display: flex; flex-direction: column; border: 1px solid rgba(0, 0, 0, 0.05); } .course-card:hover { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1); } .course-card.math { background-color: var(--pastel-blue); } .course-card.science { background-color: var(--pastel-green); } .course-card.language { background-color: var(--pastel-pink); } .course-card.history { background-color: var(--pastel-purple); } .course-img { height: 100px; display: flex; align-items: center; justify-content: center; font-size: 40px; color: rgba(0, 0, 0, 0.2); background-size: cover; background-position: center; position: relative; } .course-badge { position: absolute; top: 10px; right: 10px; background: rgba(255, 255, 255, 0.8); border-radius: 20px; padding: 4px 8px; font-size: 10px; font-weight: 600; color: var(--primary); } .course-content { padding: 15px; flex-grow: 1; display: flex; flex-direction: column; } .course-title { font-weight: 600; margin-bottom: 8px; font-size: 16px; } .course-info { display: flex; justify-content: space-between; font-size: 12px; color: var(--light-text); margin-top: auto; } .progress-container { width: 100%; height: 6px; background-color: rgba(0, 0, 0, 0.1); border-radius: 3px; margin-top: 10px; margin-bottom: 8px; overflow: hidden; } .progress-bar { height: 100%; border-radius: 3px; transition: width 0.5s ease-in-out; position: relative; overflow: hidden; } .progress-bar::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(90deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.2)); animation: shimmer 2s infinite; transform: translateX(-100%); } @keyframes shimmer { 100% { transform: translateX(100%); } } .math .progress-bar { background-color: var(--primary); } .science .progress-bar { background-color: var(--accent2); } .language .progress-bar { background-color: var(--accent1); } .history .progress-bar { background-color: #a27eff; } .module-section { margin-top: 30px; } .active-learning { background-color: var(--white); border-radius: var(--border-radius); padding: 20px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06); margin-bottom: 30px; } .module-details { display: flex; gap: 15px; margin-bottom: 20px; } .module-icon { width: 50px; height: 50px; background-color: var(--pastel-blue); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 24px; color: var(--primary); flex-shrink: 0; } .module-info { flex-grow: 1; } .module-title { font-weight: 700; font-size: 18px; margin-bottom: 5px; } .module-subtitle { font-size: 14px; color: var(--light-text); } .interactive-element { background-color: var(--light-bg); border-radius: var(--border-radius); padding: 15px; margin-bottom: 20px; position: relative; } .question-text { font-weight: 600; margin-bottom: 15px; padding-left: 10px; border-left: 3px solid var(--primary); } .options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .option { background-color: var(--white); border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 12px; padding: 12px; cursor: pointer; transition: all 0.2s ease; position: relative; overflow: hidden; } .option:hover { border-color: var(--primary); transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); } .option.selected { border-color: var(--primary); background-color: rgba(76, 111, 255, 0.05); } .option.correct { border-color: var(--accent2); background-color: rgba(92, 255, 160, 0.1); } .option.incorrect { border-color: var(--accent1); background-color: rgba(255, 92, 135, 0.1); } .option-indicator { display: inline-block; width: 20px; height: 20px; border-radius: 50%; border: 2px solid rgba(0, 0, 0, 0.2); margin-right: 10px; vertical-align: middle; position: relative; } .option.selected .option-indicator { border-color: var(--primary); } .option.selected .option-indicator::after { content: ''; position: absolute; top: 3px; left: 3px; width: 10px; height: 10px; border-radius: 50%; background-color: var(--primary); } .check-answer { margin-top: 20px; background-color: var(--primary); color: var(--white); border: none; border-radius: 30px; padding: 12px 25px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: all 0.2s ease; } .check-answer:hover { background-color: #3a5be0; transform: translateY(-2px); box-shadow: 0 5px 15px rgba(76, 111, 255, 0.3); } .feedback { margin-top: 15px; padding: 12px; border-radius: 12px; font-weight: 500; display: none; } .feedback.correct { background-color: rgba(92, 255, 160, 0.1); color: #0d8f4e; border: 1px solid rgba(92, 255, 160, 0.3); } .feedback.incorrect { background-color: rgba(255, 92, 135, 0.1); color: #c92651; border: 1px solid rgba(255, 92, 135, 0.3); } .nav-tabs { display: flex; gap: 10px; margin-bottom: 20px; margin-top: 10px; overflow-x: auto; padding-bottom: 5px; } .nav-tab { padding: 10px 20px; background-color: var(--light-bg); border-radius: 30px; font-size: 14px; font-weight: 500; cursor: pointer; white-space: nowrap; transition: all 0.2s ease; border: 2px solid transparent; } .nav-tab:hover { background-color: rgba(76, 111, 255, 0.1); } .nav-tab.active { background-color: var(--primary); color: var(--white); } .tooltip { position: absolute; background-color: #333; color: white; padding: 8px 12px; border-radius: 6px; font-size: 12px; z-index: 100; opacity: 0; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease; transform: translateY(10px); width: max-content; max-width: 200px; } .tooltip::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: #333 transparent transparent transparent; } .tooltip.show { opacity: 1; transform: translateY(0); } .nav-bottom { display: flex; justify-content: space-between; background-color: var(--white); padding: 15px 20px; border-top: 1px solid rgba(0, 0, 0, 0.05); border-radius: 0 0 var(--border-radius) var(--border-radius); } .nav-item { display: flex; flex-direction: column; align-items: center; gap: 5px; font-size: 12px; color: var(--light-text); text-decoration: none; transition: all 0.2s ease; cursor: pointer; } .nav-item.active { color: var(--primary); } .nav-icon { font-size: 22px; } /* Float animation for welcome banner */ @keyframes float { 0% { transform: translateY(0px); } 50% { transform: translateY(-5px); } 100% { transform: translateY(0px); } } .welcome-decoration { animation: float 3s ease-in-out infinite; } /* Pulse animation for start button */ @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(76, 111, 255, 0.4); } 70% { box-shadow: 0 0 0 10px rgba(76, 111, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(76, 111, 255, 0); } } .start-btn { animation: pulse 2s infinite; } /* Mobile responsiveness */ @media (max-width: 600px) { .courses-grid { grid-template-columns: repeat(2, 1fr); } .options { grid-template-columns: 1fr; } .welcome-banner p { max-width: 100%; } } /* Dark mode toggle */ .mode-toggle { position: absolute; top: 20px; right: 20px; width: 50px; height: 25px; background-color: rgba(255, 255, 255, 0.2); border-radius: 25px; display: flex; align-items: center; padding: 2px; cursor: pointer; z-index: 5; transition: all 0.3s ease; } .toggle-handle { width: 21px; height: 21px; background-color: white; border-radius: 50%; transition: transform 0.3s ease; display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--primary); } /* Animations */ @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .animate-in { animation: fadeIn 0.5s ease forwards; } .delay-1 { animation-delay: 0.1s; } .delay-2 { animation-delay: 0.2s; } .delay-3 { animation-delay: 0.3s; } .delay-4 { animation-delay: 0.4s; } </style> </head> <body> <div class="container"> <div class="app-wrapper"> <header> <div class="logo"> <div class="logo-icon">L</div> Luminova </div> <div class="profile"> <div class="profile-image">JD</div> </div> <div class="header-decoration"></div> </header> <div class="main-content"> <section class="welcome-section"> <div class="welcome-banner animate-in"> <h2>Welcome back, Jordan!</h2> <p>Pick up where you left off or start a new learning module.</p> <button class="start-btn">Continue Learning <span>→</span></button> <div class="welcome-decoration">🚀</div> </div> </section> <div class="nav-tabs animate-in delay-1"> <div class="nav-tab active">My Courses</div> <div class="nav-tab">Recommended</div> <div class="nav-tab">Popular</div> <div class="nav-tab">Bookmarked</div> </div> <section class="courses-section animate-in delay-2"> <h2 class="section-title">Your Progress <span>📚</span></h2> <div class="courses-grid"> <div class="course-card math" data-tooltip="Interactive algebra lessons with step-by-step problem solving"> <div class="course-img">➗</div> <div class="course-badge">In Progress</div> <div class="course-content"> <h3 class="course-title">Advanced Algebra</h3> <div class="progress-container"> <div class="progress-bar" style="width: 68%"></div> </div> <div class="course-info"> <span>15 Modules</span> <span>68% Completed</span> </div> </div> </div> <div class="course-card science" data-tooltip="Explore the quantum world through visual simulations"> <div class="course-img">🧬</div> <div class="course-badge">New Module</div> <div class="course-content"> <h3 class="course-title">Quantum Physics</h3> <div class="progress-container"> <div class="progress-bar" style="width: 24%"></div> </div> <div class="course-info"> <span>12 Modules</span> <span>24% Completed</span> </div> </div> </div> <div class="course-card language" data-tooltip="Master Spanish with conversational AI practice"> <div class="course-img">🗣️</div> <div class="course-badge">Updated</div> <div class="course-content"> <h3 class="course-title">Spanish Fluency</h3> <div class="progress-container"> <div class="progress-bar" style="width: 42%"></div> </div> <div class="course-info"> <span>20 Modules</span> <span>42% Completed</span> </div> </div> </div> <div class="course-card history" data-tooltip="Interactive timeline of ancient civilizations"> <div class="course-img">🏛️</div> <div class="course-badge">Popular</div> <div class="course-content"> <h3 class="course-title">Ancient History</h3> <div class="progress-container"> <div class="progress-bar" style="width: 12%"></div> </div> <div class="course-info"> <span>18 Modules</span> <span>12% Completed</span> </div> </div> </div> </div> </section> <section class="module-section animate-in delay-3"> <h2 class="section-title">Continue Learning <span>🎯</span></h2> <div class="active-learning"> <div class="module-details"> <div class="module-icon">➗</div> <div class="module-info"> <h3 class="module-title">Quadratic Equations</h3> <p class="module-subtitle">Module 7 of Advanced Algebra</p> </div> </div> <div class="interactive-element"> <div class="question-text">Solve the quadratic equation: x² + 5x + 6 = 0</div> <div class="options"> <div class="option" data-value="a"> <span class="option-indicator"></span> x = 2, x = 3 </div> <div class="option" data-value="b"> <span class="option-indicator"></span> x = -2, x = -3 </div> <div class="option" data-value="c"> <span class="option-indicator"></span> x = -2, x = 3 </div> <div class="option" data-value="d"> <span class="option-indicator"></span> x = 2, x = -3 </div> </div> <button class="check-answer">Check Answer</button> <div class="feedback"></div> </div> </div> </section> </div> <div class="nav-bottom animate-in delay-4"> <div class="nav-item active"> <div class="nav-icon">🏠</div> <span>Home</span> </div> <div class="nav-item"> <div class="nav-icon">📚</div> <span>Courses</span> </div> <div class="nav-item"> <div class="nav-icon">🔍</div> <span>Explore</span> </div> <div class="nav-item"> <div class="nav-icon">📊</div> <span>Progress</span> </div> <div class="nav-item"> <div class="nav-icon">👤</div> <span>Profile</span> </div> </div> </div> </div> <div id="tooltip" class="tooltip"></div> <script> document.addEventListener('DOMContentLoaded', function() { // Initialize tooltips const tooltipElement = document.getElementById('tooltip'); const tooltipItems = document.querySelectorAll('[data-tooltip]'); tooltipItems.forEach(item => { item.addEventListener('mouseenter', function(e) { const tooltip = this.getAttribute('data-tooltip'); tooltipElement.textContent = tooltip; const rect = this.getBoundingClientRect(); tooltipElement.style.left = rect.left + (rect.width / 2) - (tooltipElement.offsetWidth / 2) + 'px'; tooltipElement.style.top = rect.top - tooltipElement.offsetHeight - 10 + 'px'; tooltipElement.classList.add('show'); }); item.addEventListener('mouseleave', function() { tooltipElement.classList.remove('show'); }); }); // Quiz functionality const options = document.querySelectorAll('.option'); const checkButton = document.querySelector('.check-answer'); const feedback = document.querySelector('.feedback'); let selectedOption = null; options.forEach(option => { option.addEventListener('click', function() { // Remove selected class from all options options.forEach(opt => opt.classList.remove('selected')); // Add selected class to clicked option this.classList.add('selected'); selectedOption = this.getAttribute('data-value'); }); }); checkButton.addEventListener('click', function() { if (!selectedOption) { feedback.textContent = 'Please select an answer first.'; feedback.className = 'feedback'; feedback.style.display = 'block'; return; } // Correct answer is b: x = -2, x = -3 if (selectedOption === 'b') { feedback.textContent = 'Correct! For x² + 5x + 6 = 0, the factors are (x + 2)(x + 3) = 0, so x = -2 or x = -3.'; feedback.className = 'feedback correct'; // Find the correct option and mark it options.forEach(option => { if (option.getAttribute('data-value') === 'b') { option.classList.add('correct'); } }); } else { feedback.textContent = 'Incorrect. Try factoring x² + 5x + 6 into (x + 2)(x + 3) = 0, which gives x = -2 or x = -3.'; feedback.className = 'feedback incorrect'; // Mark the selected option as incorrect and show the correct one options.forEach(option => { if (option.getAttribute('data-value') === selectedOption) { option.classList.add('incorrect'); } if (option.getAttribute('data-value') === 'b') { option.classList.add('correct'); } }); } feedback.style.display = 'block'; }); // Course card hover effect const courseCards = document.querySelectorAll('.course-card'); courseCards.forEach(card => { card.addEventListener('mouseenter', function() { this.style.transform = 'translateY(-8px)'; this.style.boxShadow = '0 12px 30px rgba(0, 0, 0, 0.15)'; }); card.addEventListener('mouseleave', function() { this.style.transform = ''; this.style.boxShadow = ''; }); }); // Tab switching const tabs = document.querySelectorAll('.nav-tab'); tabs.forEach(tab => { tab.addEventListener('click', function() { tabs.forEach(t => t.classList.remove('active')); this.classList.add('active'); }); }); // Bottom navigation const navItems = document.querySelectorAll('.nav-item'); navItems.forEach(item => { item.addEventListener('click', function() { navItems.forEach(i => i.classList.remove('active')); this.classList.add('active'); }); }); // Animate progress bars on load const progressBars = document.querySelectorAll('.progress-bar'); progressBars.forEach(bar => { const width = bar.style.width; bar.style.width = '0'; setTimeout(() => { bar.style.width = width; }, 300); }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Wanderlust - Travel Discovery App</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Montserrat', sans-serif; } @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap'); :root { --primary: #FF6B6B; --secondary: #4ECDC4; --dark-blue: #1A535C; --yellow: #FFE66D; --white: #FFFFFF; --light-gray: #F7F7F7; --dark-gray: #333333; } body { background-color: var(--light-gray); color: var(--dark-gray); width: 100%; height: 100vh; overflow: hidden; } .app-container { width: 100%; height: 100%; max-width: 700px; max-height: 700px; margin: 0 auto; position: relative; overflow: hidden; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); border-radius: 25px; background: var(--white); } .header { display: flex; justify-content: space-between; align-items: center; padding: 20px; background: var(--dark-blue); color: var(--white); position: relative; z-index: 10; } .logo { font-size: 22px; font-weight: 700; display: flex; align-items: center; } .logo span { color: var(--yellow); } .logo i { margin-right: 8px; color: var(--secondary); } .nav-icons { display: flex; gap: 15px; } .nav-icons i { font-size: 20px; cursor: pointer; transition: transform 0.3s ease; } .nav-icons i:hover { transform: scale(1.2); color: var(--secondary); } .search-bar { display: flex; align-items: center; padding: 15px 20px; background: white; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); position: relative; z-index: 5; } .search-input { flex: 1; border: none; padding: 12px 15px; font-size: 16px; background: var(--light-gray); border-radius: 25px; outline: none; transition: all 0.3s ease; } .search-input:focus { box-shadow: 0 0 0 2px var(--secondary); } .filter-button { background: var(--primary); color: white; border: none; padding: 10px 15px; border-radius: 20px; margin-left: 10px; cursor: pointer; font-weight: 500; transition: all 0.3s ease; display: flex; align-items: center; gap: 5px; } .filter-button:hover { background: #ff5252; transform: translateY(-2px); } .categories { display: flex; padding: 15px 10px; overflow-x: auto; scrollbar-width: none; background: var(--white); } .categories::-webkit-scrollbar { display: none; } .category { flex: 0 0 auto; padding: 8px 15px; margin: 0 5px; background: var(--light-gray); border-radius: 20px; font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.3s ease; white-space: nowrap; } .category.active { background: var(--dark-blue); color: var(--white); } .category:hover:not(.active) { background: #e0e0e0; } .destination-cards { height: calc(100% - 180px); overflow-y: auto; padding: 20px; scrollbar-width: thin; position: relative; } .destination-cards::-webkit-scrollbar { width: 5px; } .destination-cards::-webkit-scrollbar-thumb { background: var(--secondary); border-radius: 10px; } .section-title { font-size: 18px; font-weight: 600; margin-bottom: 15px; color: var(--dark-blue); display: flex; justify-content: space-between; align-items: center; } .see-all { font-size: 14px; color: var(--secondary); cursor: pointer; transition: color 0.3s; } .see-all:hover { color: var(--primary); text-decoration: underline; } .trending-destinations { display: flex; gap: 15px; overflow-x: auto; padding-bottom: 15px; scrollbar-width: none; } .trending-destinations::-webkit-scrollbar { display: none; } .trending-card { flex: 0 0 auto; width: 200px; height: 250px; border-radius: 15px; overflow: hidden; position: relative; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); cursor: pointer; transition: transform 0.3s ease, box-shadow 0.3s ease; } .trending-card:hover { transform: translateY(-5px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15); } .trending-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .trending-card:hover .trending-img { transform: scale(1.1); } .trending-overlay { position: absolute; bottom: 0; left: 0; right: 0; padding: 15px; background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent); color: white; } .trending-location { font-size: 18px; font-weight: 600; margin-bottom: 5px; } .trending-price { font-size: 14px; opacity: 0.9; } .flight-deals { margin-top: 30px; } .ticket-container { position: relative; perspective: 1000px; height: 180px; margin-bottom: 20px; cursor: grab; } .ticket-card { width: 100%; height: 100%; background: white; border-radius: 15px; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08); padding: 15px; display: flex; flex-direction: column; transition: transform 0.6s ease, box-shadow 0.3s ease; position: relative; transform-style: preserve-3d; overflow: hidden; } .ticket-card:hover { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); } .ticket-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; } .airline-logo { display: flex; align-items: center; gap: 10px; } .airline-logo img { width: 30px; height: 30px; object-fit: contain; } .airline-name { font-weight: 600; font-size: 16px; } .ticket-price { font-size: 18px; font-weight: 700; color: var(--primary); } .ticket-route { display: flex; align-items: center; margin-bottom: 20px; position: relative; } .departure, .arrival { display: flex; flex-direction: column; align-items: center; width: 80px; } .city-code { font-size: 22px; font-weight: 700; color: var(--dark-blue); } .city-name { font-size: 12px; color: var(--dark-gray); margin-top: 3px; } .flight-path { flex: 1; display: flex; align-items: center; justify-content: center; padding: 0 15px; } .path-line { height: 2px; background: #e0e0e0; flex-grow: 1; position: relative; } .path-line::before, .path-line::after { content: ""; position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #e0e0e0; top: 50%; transform: translateY(-50%); } .path-line::before { left: 0; } .path-line::after { right: 0; } .plane-icon { font-size: 18px; color: var(--secondary); margin: 0 10px; animation: flyPlane 2s infinite alternate; } @keyframes flyPlane { 0% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-3px) rotate(0); } 100% { transform: translateY(0) rotate(0); } } .ticket-details { display: flex; justify-content: space-between; font-size: 14px; padding-top: 15px; border-top: 1px dashed #e0e0e0; } .detail-item { display: flex; flex-direction: column; } .detail-label { font-size: 12px; color: #888; margin-bottom: 3px; } .detail-value { font-weight: 600; color: var(--dark-blue); } .ticket-cta { position: absolute; bottom: 15px; right: 15px; background: var(--secondary); color: white; border: none; padding: 8px 15px; border-radius: 20px; font-weight: 500; cursor: pointer; transition: all 0.3s ease; } .ticket-cta:hover { background: #3bafa9; transform: scale(1.05); } .map-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); z-index: 100; display: flex; justify-content: center; align-items: center; opacity: 0; visibility: hidden; transition: all 0.4s ease; } .map-container { width: 90%; max-width: 600px; height: 80%; background: white; border-radius: 20px; overflow: hidden; transform: translateY(50px); transition: all 0.5s ease; position: relative; } .map-header { padding: 15px 20px; display: flex; justify-content: space-between; align-items: center; background: var(--dark-blue); color: white; } .map-title { font-size: 18px; font-weight: 600; } .close-map { background: none; border: none; color: white; font-size: 20px; cursor: pointer; transition: transform 0.3s; } .close-map:hover { transform: scale(1.2); } .map-content { width: 100%; height: calc(100% - 60px); background: url('https://images.unsplash.com/photo-1524661135-423995f22d0b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1200&q=80') center/cover; position: relative; } .map-point { position: absolute; width: 20px; height: 20px; background: var(--primary); border-radius: 50%; transform: translate(-50%, -50%); cursor: pointer; box-shadow: 0 0 0 rgba(255, 107, 107, 0.6); animation: pulse 2s infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 107, 107, 0.6); } 70% { box-shadow: 0 0 0 15px rgba(255, 107, 107, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 107, 107, 0); } } .map-point::after { content: attr(data-city); position: absolute; bottom: 25px; left: 50%; transform: translateX(-50%); background: var(--dark-blue); color: white; padding: 5px 10px; border-radius: 5px; font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.3s; } .map-point:hover::after { opacity: 1; } .bottom-nav { position: fixed; bottom: 0; left: 0; width: 100%; display: flex; justify-content: space-around; background: white; box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1); padding: 15px 0; z-index: 10; border-top-left-radius: 20px; border-top-right-radius: 20px; } .nav-item { display: flex; flex-direction: column; align-items: center; cursor: pointer; } .nav-icon { font-size: 20px; margin-bottom: 5px; transition: all 0.3s ease; } .nav-label { font-size: 12px; font-weight: 500; } .nav-item.active .nav-icon { color: var(--primary); transform: translateY(-3px); } .nav-item.active .nav-label { color: var(--primary); } /* Loading animation */ .loading-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: var(--white); display: flex; justify-content: center; align-items: center; z-index: 1000; transition: opacity 0.5s ease, visibility 0.5s ease; } .loading-animation { width: 50px; height: 50px; position: relative; } .loading-animation div { position: absolute; width: 50px; height: 50px; border: 5px solid transparent; border-top-color: var(--primary); border-radius: 50%; animation: spin 1s linear infinite; } .loading-animation div:nth-child(2) { border-top-color: var(--secondary); animation-delay: -0.5s; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Responsive styles */ @media (max-width: 480px) { .trending-card { width: 160px; height: 200px; } .ticket-route { flex-wrap: wrap; } .ticket-details { flex-wrap: wrap; gap: 10px; } .detail-item { width: 48%; } } /* Animation for swipe effects */ .swipe-left { animation: swipeLeft 0.5s forwards; } .swipe-right { animation: swipeRight 0.5s forwards; } @keyframes swipeLeft { from { transform: translateX(0); opacity: 1; } to { transform: translateX(-100%); opacity: 0; } } @keyframes swipeRight { from { transform: translateX(0); opacity: 1; } to { transform: translateX(100%); opacity: 0; } } /* Extra animation for the app */ .fade-in { animation: fadeIn 0.5s forwards; } @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .destination-details { position: fixed; bottom: -100%; left: 0; width: 100%; height: 80%; background: white; border-top-left-radius: 30px; border-top-right-radius: 30px; z-index: 50; transition: bottom 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.1); overflow-y: auto; } .details-header { position: relative; height: 250px; overflow: hidden; } .details-image { width: 100%; height: 100%; object-fit: cover; } .details-close { position: absolute; top: 15px; right: 15px; width: 35px; height: 35px; background: rgba(0, 0, 0, 0.4); border-radius: 50%; display: flex; justify-content: center; align-items: center; color: white; font-size: 18px; cursor: pointer; transition: background 0.3s ease; } .details-close:hover { background: rgba(0, 0, 0, 0.6); } .details-content { padding: 20px; } .details-title { font-size: 24px; font-weight: 700; color: var(--dark-blue); margin-bottom: 10px; } .details-location { font-size: 16px; color: #666; display: flex; align-items: center; margin-bottom: 20px; } .details-location i { color: var(--primary); margin-right: 5px; } .details-stats { display: flex; justify-content: space-between; padding: 15px 0; border-top: 1px solid #eee; border-bottom: 1px solid #eee; margin-bottom: 20px; } .stat-item { display: flex; flex-direction: column; align-items: center; } .stat-value { font-size: 18px; font-weight: 600; color: var(--dark-blue); } .stat-label { font-size: 12px; color: #888; margin-top: 5px; } .details-description { line-height: 1.6; color: #444; margin-bottom: 20px; } .details-highlights { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; } .highlight { padding: 8px 15px; background: var(--light-gray); border-radius: 20px; font-size: 14px; display: flex; align-items: center; } .highlight i { margin-right: 5px; color: var(--secondary); } .book-button { width: 100%; padding: 15px; background: var(--primary); color: white; border: none; border-radius: 25px; font-size: 16px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 20px; } .book-button:hover { background: #ff5252; transform: translateY(-3px); box-shadow: 0 5px 15px rgba(255, 107, 107, 0.3); } .notification { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); background: var(--dark-blue); color: white; padding: 10px 20px; border-radius: 30px; font-size: 14px; font-weight: 500; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); z-index: 100; opacity: 0; transition: opacity 0.3s ease; display: flex; align-items: center; gap: 8px; } .notification i { color: var(--yellow); } .show-notification { opacity: 1; } #map-toggle { position: fixed; bottom: 80px; right: 20px; width: 50px; height: 50px; background: var(--primary); color: white; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 20px; box-shadow: 0 5px 15px rgba(255, 107, 107, 0.3); cursor: pointer; transition: all 0.3s ease; z-index: 40; } #map-toggle:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(255, 107, 107, 0.4); } </style> </head> <body> <div class="loading-overlay"> <div class="loading-animation"> <div></div> <div></div> </div> </div> <div class="app-container"> <div class="header"> <div class="logo"> <i class="fas fa-globe"></i>Wander<span>lust</span> </div> <div class="nav-icons"> <i class="fas fa-bell"></i> <i class="fas fa-user-circle"></i> </div> </div> <div class="search-bar"> <input type="text" class="search-input" placeholder="Where do you want to go?"> <button class="filter-button"> <i class="fas fa-sliders-h"></i> Filters </button> </div> <div class="categories"> <div class="category active">All</div> <div class="category">Flights</div> <div class="category">Hotels</div> <div class="category">Vacation Packages</div> <div class="category">Activities</div> <div class="category">Road Trips</div> </div> <div class="destination-cards"> <div class="section-title"> <span>Trending Destinations</span> <span class="see-all">See all</span> </div> <div class="trending-destinations"> <div class="trending-card" data-destination="Tokyo"> <img src="https://images.unsplash.com/photo-1503899036084-c55cdd92da26?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NXx8dG9reW98ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&w=500&q=60" class="trending-img"> <div class="trending-overlay"> <div class="trending-location">Tokyo, Japan</div> <div class="trending-price">From $899</div> </div> </div> <div class="trending-card" data-destination="Santorini"> <img src="https://images.unsplash.com/photo-1469796466635-455ede028ac4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NHx8c2FudG9yaW5pfGVufDB8fDB8fHww&auto=format&fit=crop&w=500&q=60" class="trending-img"> <div class="trending-overlay"> <div class="trending-location">Santorini, Greece</div> <div class="trending-price">From $1299</div> </div> </div> <div class="trending-card" data-destination="Bali"> <img src="https://images.unsplash.com/photo-1537996194471-e657df975ab4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NXx8YmFsaXxlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=500&q=60" class="trending-img"> <div class="trending-overlay"> <div class="trending-location">Bali, Indonesia</div> <div class="trending-price">From $849</div> </div> </div> <div class="trending-card" data-destination="Paris"> <img src="https://images.unsplash.com/photo-1502602898657-3e91760cbb34?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8cGFyaXN8ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&w=500&q=60" class="trending-img"> <div class="trending-overlay"> <div class="trending-location">Paris, France</div> <div class="trending-price">From $749</div> </div> </div> </div> <div class="flight-deals"> <div class="section-title"> <span>Flash Flight Deals</span> <span class="see-all">See all</span> </div> <div class="ticket-container" id="ticket1"> <div class="ticket-card"> <div class="ticket-header"> <div class="airline-logo"> <i class="fas fa-plane" style="color: #0078D2;"></i> <span class="airline-name">SkyJet Airways</span> </div> <div class="ticket-price">$329</div> </div> <div class="ticket-route"> <div class="departure"> <div class="city-code">NYC</div> <div class="city-name">New York</div> </div> <div class="flight-path"> <div class="path-line"></div> <i class="fas fa-plane plane-icon"></i> <div class="path-line"></div> </div> <div class="arrival"> <div class="city-code">MIA</div> <div class="city-name">Miami</div> </div> </div> <div class="ticket-details"> <div class="detail-item"> <span class="detail-label">Date</span> <span class="detail-value">Jun 15, 2023</span> </div> <div class="detail-item"> <span class="detail-label">Time</span> <span class="detail-value">11:30 AM</span> </div> <div class="detail-item"> <span class="detail-label">Duration</span> <span class="detail-value">2h 45m</span> </div> </div> <button class="ticket-cta">View Deal</button> </div> </div> <div class="ticket-container" id="ticket2"> <div class="ticket-card"> <div class="ticket-header"> <div class="airline-logo"> <i class="fas fa-plane" style="color: #E10707;"></i> <span class="airline-name">Global Airlines</span> </div> <div class="ticket-price">$549</div> </div> <div class="ticket-route"> <div class="departure"> <div class="city-code">SFO</div> <div class="city-name">San Francisco</div> </div> <div class="flight-path"> <div class="path-line"></div> <i class="fas fa-plane plane-icon"></i> <div class="path-line"></div> </div> <div class="arrival"> <div class="city-code">CUN</div> <div class="city-name">Cancun</div> </div> </div> <div class="ticket-details"> <div class="detail-item"> <span class="detail-label">Date</span> <span class="detail-value">Jul 3, 2023</span> </div> <div class="detail-item"> <span class="detail-label">Time</span> <span class="detail-value">8:45 AM</span> </div> <div class="detail-item"> <span class="detail-label">Duration</span> <span class="detail-value">4h 20m</span> </div> </div> <button class="ticket-cta">View Deal</button> </div> </div> </div> </div> </div> <div id="map-toggle"> <i class="fas fa-map-marked-alt"></i> </div> <div class="map-overlay"> <div class="map-container"> <div class="map-header"> <div class="map-title">Explore Destinations</div> <button class="close-map">×</button> </div> <div class="map-content"> <div class="map-point" style="top: 30%; left: 20%;" data-city="New York"></div> <div class="map-point" style="top: 25%; left: 45%;" data-city="London"></div> <div class="map-point" style="top: 30%; left: 75%;" data-city="Tokyo"></div> <div class="map-point" style="top: 45%; left: 25%;" data-city="Mexico City"></div> <div class="map-point" style="top: 55%; left: 65%;" data-city="Bangkok"></div> <div class="map-point" style="top: 65%; left: 80%;" data-city="Sydney"></div> </div> </div> </div> <div class="destination-details"> <div class="details-header"> <img src="https://images.unsplash.com/photo-1503899036084-c55cdd92da26" class="details-image"> <div class="details-close">×</div> </div> <div class="details-content"> <h2 class="details-title">Tokyo, Japan</h2> <div class="details-location"> <i class="fas fa-map-marker-alt"></i> Kanto Region, Japan </div> <div class="details-stats"> <div class="stat-item"> <div class="stat-value">4.8</div> <div class="stat-label">Rating</div> </div> <div class="stat-item"> <div class="stat-value">10.5M</div> <div class="stat-label">Visitors/Year</div> </div> <div class="stat-item"> <div class="stat-value">$65</div> <div class="stat-label">Avg. Daily Cost</div> </div> </div> <p class="details-description"> Tokyo, Japan's busy capital, mixes the ultramodern and the traditional, from neon-lit skyscrapers to historic temples. Experience a city where cutting-edge technology meets ancient tradition, vibrant street life, and unparalleled cuisine. </p> <div class="details-highlights"> <div class="highlight"><i class="fas fa-utensils"></i> Food Tourism</div> <div class="highlight"><i class="fas fa-building"></i> Urban Exploration</div> <div class="highlight"><i class="fas fa-torii-gate"></i> Cultural Sites</div> <div class="highlight"><i class="fas fa-shopping-bag"></i> Shopping</div> </div> <button class="book-button"> <i class="fas fa-ticket-alt"></i> Book Your Trip </button> </div> </div> <div class="notification"> <i class="fas fa-tag"></i> 30% off flights to Bali for the next 48 hours! </div> <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script> <script> document.addEventListener('DOMContentLoaded', function() { // Simulate loading setTimeout(() => { document.querySelector('.loading-overlay').style.opacity = '0'; setTimeout(() => { document.querySelector('.loading-overlay').style.visibility = 'hidden'; }, 500); }, 1500); // Handle categories const categories = document.querySelectorAll('.category'); categories.forEach(category => { category.addEventListener('click', function() { categories.forEach(c => c.classList.remove('active')); this.classList.add('active'); // Show notification when changing categories if (this.textContent !== 'All') { showNotification(`${this.textContent} selected! Showing best deals.`); } }); }); // Handle map toggle const mapToggle = document.getElementById('map-toggle'); const mapOverlay = document.querySelector('.map-overlay'); const mapContainer = document.querySelector('.map-container'); const closeMap = document.querySelector('.close-map');
<html> <head> <style> :root { --primary: #FF5A5F; --secondary: #4C69F6; --dark: #1A1B41; --light: #F8F9FA; --success: #00C853; --warning: #FFD600; --font-main: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: var(--font-main); background-color: var(--light); color: var(--dark); height: 100vh; overflow-x: hidden; -webkit-font-smoothing: antialiased; } .app-container { max-width: 700px; height: 700px; margin: 0 auto; display: flex; flex-direction: column; padding: 15px; background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); border-radius: 20px; overflow: hidden; position: relative; } header { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; margin-bottom: 15px; } .logo { font-weight: 800; font-size: 24px; color: var(--primary); display: flex; align-items: center; } .logo span { background-color: var(--primary); color: white; border-radius: 8px; padding: 2px 8px; margin-right: 5px; font-size: 16px; } .user-profile { display: flex; align-items: center; gap: 10px; } .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: 600; font-size: 16px; } .today-summary { background: linear-gradient(120deg, var(--primary), var(--secondary)); color: white; padding: 20px; border-radius: 16px; margin-bottom: 20px; position: relative; overflow: hidden; box-shadow: 0 10px 25px -5px rgba(255, 90, 95, 0.25); } .summary-header { display: flex; justify-content: space-between; margin-bottom: 15px; } .today-date { font-size: 14px; opacity: 0.8; } .stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-top: 15px; } .stat-card { background: rgba(255, 255, 255, 0.2); backdrop-filter: blur(5px); border-radius: 12px; padding: 15px; text-align: center; transition: transform 0.3s ease, box-shadow 0.3s ease; } .stat-card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); } .stat-value { font-size: 24px; font-weight: 700; margin-bottom: 5px; } .stat-label { font-size: 12px; opacity: 0.8; } .workouts-section { flex: 1; overflow-y: auto; padding-right: 5px; } .section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; } .section-title { font-size: 18px; font-weight: 700; } .see-all { color: var(--secondary); font-size: 14px; font-weight: 600; cursor: pointer; } .see-all:hover { text-decoration: underline; } .workout-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; } .workout-card { background: white; border-radius: 16px; padding: 18px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); cursor: pointer; transition: all 0.3s ease; position: relative; overflow: hidden; } .workout-card:hover { transform: scale(1.02); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); } .workout-card::before { content: ''; position: absolute; top: 0; left: 0; width: 5px; height: 100%; background-color: var(--secondary); } .workout-type { font-size: 14px; color: #6c757d; margin-bottom: 8px; } .workout-name { font-weight: 700; margin-bottom: 15px; font-size: 16px; } .workout-meta { display: flex; justify-content: space-between; font-size: 12px; color: #6c757d; } .nav-bar { display: flex; justify-content: space-between; background-color: white; padding: 15px 25px; border-radius: 16px; margin-top: 20px; box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.03); } .nav-item { display: flex; flex-direction: column; align-items: center; text-decoration: none; color: #6c757d; font-size: 12px; transition: all 0.3s ease; cursor: pointer; } .nav-icon { font-size: 20px; margin-bottom: 4px; } .nav-item.active { color: var(--primary); font-weight: 600; } .add-workout-btn { position: absolute; bottom: 80px; right: 30px; width: 60px; height: 60px; border-radius: 50%; background-color: var(--primary); color: white; display: flex; align-items: center; justify-content: center; font-size: 24px; box-shadow: 0 6px 16px rgba(255, 90, 95, 0.3); cursor: pointer; transition: all 0.3s ease; z-index: 10; } .add-workout-btn:hover { transform: scale(1.1); box-shadow: 0 8px 20px rgba(255, 90, 95, 0.4); } /* Progress bars */ .progress-container { width: 100%; height: 8px; background-color: rgba(255, 255, 255, 0.3); border-radius: 4px; overflow: hidden; margin-top: 5px; } .progress-bar { height: 100%; background-color: white; border-radius: 4px; width: 0; transition: width 1.5s cubic-bezier(0.65, 0, 0.35, 1); } /* Workout dialog */ .dialog-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; z-index: 100; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; } .dialog-overlay.active { opacity: 1; visibility: visible; } .dialog { background-color: white; border-radius: 20px; width: 90%; max-width: 500px; max-height: 80vh; overflow-y: auto; padding: 25px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2); transform: translateY(20px); opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease; } .dialog-overlay.active .dialog { transform: translateY(0); opacity: 1; } .dialog-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .dialog-title { font-size: 20px; font-weight: 700; color: var(--dark); } .close-btn { background: none; border: none; font-size: 22px; color: #6c757d; cursor: pointer; } .workout-form { display: flex; flex-direction: column; gap: 15px; } .form-group { display: flex; flex-direction: column; } .form-group label { font-size: 14px; margin-bottom: 8px; color: #495057; } .form-control { padding: 12px 15px; border: 1px solid #dee2e6; border-radius: 8px; font-size: 16px; transition: border-color 0.3s ease; } .form-control:focus { outline: none; border-color: var(--secondary); } .workout-types { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 15px; } .workout-type-option { padding: 8px 15px; border-radius: 20px; background-color: #f1f3f5; color: #495057; font-size: 14px; cursor: pointer; transition: all 0.3s ease; } .workout-type-option.active { background-color: var(--secondary); color: white; } .submit-btn { background-color: var(--primary); color: white; border: none; padding: 12px; border-radius: 8px; font-weight: 600; cursor: pointer; transition: background-color 0.3s ease; margin-top: 10px; } .submit-btn:hover { background-color: #e63946; } /* Animations */ @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .workout-card { animation: fadeInUp 0.5s ease-out; animation-fill-mode: both; } .workout-card:nth-child(1) { animation-delay: 0.1s; } .workout-card:nth-child(2) { animation-delay: 0.2s; } .workout-card:nth-child(3) { animation-delay: 0.3s; } .workout-card:nth-child(4) { animation-delay: 0.4s; } /* Media Queries */ @media (max-width: 480px) { .workout-cards { grid-template-columns: 1fr; } .stats-grid { grid-template-columns: 1fr 1fr; } .logo { font-size: 20px; } .nav-bar { padding: 10px 15px; } } /* Achievement Badge */ .achievement-badge { position: absolute; top: 15px; right: 15px; background: var(--warning); border-radius: 50%; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 8px rgba(255, 214, 0, 0.4); animation: pulse 1.5s infinite; } /* Water Tracker */ .water-tracker { display: flex; align-items: center; gap: 10px; margin-top: 10px; } .water-drops { display: flex; gap: 5px; } .water-drop { width: 18px; height: 24px; background: rgba(255, 255, 255, 0.3); border-radius: 50% 50% 0 50%; transform: rotate(-45deg); cursor: pointer; transition: all 0.3s ease; } .water-drop.filled { background: #4fc3f7; box-shadow: 0 0 8px rgba(79, 195, 247, 0.6); } /* Custom scrollbar */ .workouts-section::-webkit-scrollbar { width: 6px; } .workouts-section::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.03); border-radius: 10px; } .workouts-section::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.1); border-radius: 10px; } .workouts-section::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.2); } /* Live workout indicator */ .live-workout { display: inline-flex; align-items: center; background: rgba(255, 59, 48, 0.2); padding: 4px 8px; border-radius: 12px; font-size: 12px; margin-top: 5px; color: #ff3b30; } .live-dot { width: 8px; height: 8px; background-color: #ff3b30; border-radius: 50%; margin-right: 5px; animation: pulse 1.5s infinite; } </style> </head> <body> <div class="app-container"> <header> <div class="logo"><span>PF</span>PeakFit</div> <div class="user-profile"> <div class="user-avatar">JS</div> </div> </header> <div class="today-summary"> <div class="summary-header"> <div> <h2>Today's Progress</h2> <p class="today-date" id="current-date">Loading date...</p> </div> <div class="achievement-badge"> <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 15L8.5 18L9.5 14L6.5 11.5L10.5 11L12 7.5L13.5 11L17.5 11.5L14.5 14L15.5 18L12 15Z" fill="white"/> </svg> </div> </div> <div class="progress-container"> <div class="progress-bar" id="daily-progress"></div> </div> <div class="stats-grid"> <div class="stat-card"> <div class="stat-value" id="calories-burned">0</div> <div class="stat-label">Calories</div> </div> <div class="stat-card"> <div class="stat-value" id="active-minutes">0</div> <div class="stat-label">Active Min</div> </div> <div class="stat-card"> <div class="stat-value" id="workouts">0</div> <div class="stat-label">Workouts</div> </div> </div> <div class="water-tracker"> <span style="font-size: 14px; opacity: 0.8;">Water:</span> <div class="water-drops"> <div class="water-drop" data-index="1"></div> <div class="water-drop" data-index="2"></div> <div class="water-drop" data-index="3"></div> <div class="water-drop" data-index="4"></div> <div class="water-drop" data-index="5"></div> <div class="water-drop" data-index="6"></div> <div class="water-drop" data-index="7"></div> <div class="water-drop" data-index="8"></div> </div> </div> </div> <div class="workouts-section"> <div class="section-header"> <h3 class="section-title">Today's Workouts</h3> <span class="see-all">See All</span> </div> <div class="workout-cards"> <div class="workout-card" data-id="1"> <div class="workout-type">CARDIO</div> <h4 class="workout-name">Morning Run</h4> <div class="live-workout"> <span class="live-dot"></span> Live Now </div> <div class="workout-meta"> <span>30 mins</span> <span>350 cal</span> </div> </div> <div class="workout-card" data-id="2"> <div class="workout-type">STRENGTH</div> <h4 class="workout-name">Upper Body</h4> <div class="workout-meta"> <span>45 mins</span> <span>280 cal</span> </div> </div> <div class="workout-card" data-id="3"> <div class="workout-type">FLEXIBILITY</div> <h4 class="workout-name">Evening Stretch</h4> <div class="workout-meta"> <span>20 mins</span> <span>120 cal</span> </div> </div> <div class="workout-card" data-id="4"> <div class="workout-type">HIIT</div> <h4 class="workout-name">Tabata Circuits</h4> <div class="workout-meta"> <span>25 mins</span> <span>310 cal</span> </div> </div> </div> </div> <div class="add-workout-btn" id="add-workout"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 5V19M5 12H19" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/> </svg> </div> <nav class="nav-bar"> <a class="nav-item active"> <div class="nav-icon"> <svg width="24" height="24" 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"/> </svg> </div> <span>Home</span> </a> <a class="nav-item"> <div class="nav-icon"> <svg width="24" height="24" 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> <span>Activity</span> </a> <a class="nav-item"> <div class="nav-icon"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M18 8C18 6.4087 17.3679 4.88258 16.2426 3.75736C15.1174 2.63214 13.5913 2 12 2C10.4087 2 8.88258 2.63214 7.75736 3.75736C6.63214 4.88258 6 6.4087 6 8C6 15 3 17 3 17H21C21 17 18 15 18 8Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M13.73 21C13.5542 21.3031 13.3019 21.5547 12.9982 21.7295C12.6946 21.9044 12.3504 21.9965 12 21.9965C11.6496 21.9965 11.3054 21.9044 11.0018 21.7295C10.6982 21.5547 10.4458 21.3031 10.27 21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </div> <span>Alerts</span> </a> <a class="nav-item"> <div class="nav-icon"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M20 21V19C20 17.9391 19.5786 16.9217 18.8284 16.1716C18.0783 15.4214 17.0609 15 16 15H8C6.93913 15 5.92172 15.4214 5.17157 16.1716C4.42143 16.9217 4 17.9391 4 19V21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M12 11C14.2091 11 16 9.20914 16 7C16 4.79086 14.2091 3 12 3C9.79086 3 8 4.79086 8 7C8 9.20914 9.79086 11 12 11Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </div> <span>Profile</span> </a> </nav> </div> <div class="dialog-overlay" id="workout-dialog"> <div class="dialog"> <div class="dialog-header"> <h3 class="dialog-title">Add New Workout</h3> <button class="close-btn" id="close-dialog">×</button> </div> <form class="workout-form" id="workout-form"> <div class="form-group"> <label>Workout Type</label> <div class="workout-types"> <div class="workout-type-option" data-type="CARDIO">Cardio</div> <div class="workout-type-option" data-type="STRENGTH">Strength</div> <div class="workout-type-option" data-type="FLEXIBILITY">Flexibility</div> <div class="workout-type-option" data-type="HIIT">HIIT</div> <div class="workout-type-option" data-type="YOGA">Yoga</div> </div> </div> <div class="form-group"> <label for="workout-name">Workout Name</label> <input type="text" id="workout-name" class="form-control" placeholder="e.g., Morning Run" required> </div> <div class="form-group"> <label for="workout-duration">Duration (minutes)</label> <input type="number" id="workout-duration" class="form-control" placeholder="30" min="1" required> </div> <div class="form-group"> <label for="workout-calories">Estimated Calories</label> <input type="number" id="workout-calories" class="form-control" placeholder="200" min="0" required> </div> <button type="submit" class="submit-btn">Add Workout</button> </form> </div> </div> <script> // DOM Elements const currentDateEl = document.getElementById('current-date'); const dailyProgressBar = document.getElementById('daily-progress'); const caloriesBurnedEl = document.getElementById('calories-burned'); const activeMinutesEl = document.getElementById('active-minutes'); const workoutsEl = document.getElementById('workouts'); const waterDrops = document.querySelectorAll('.water-drop'); const addWorkoutBtn = document.getElementById('add-workout'); const workoutDialog = document.getElementById('workout-dialog'); const closeDialogBtn = document.getElementById('close-dialog'); const workoutForm = document.getElementById('workout-form'); const workoutTypeOptions = document.querySelectorAll('.workout-type-option'); const navItems = document.querySelectorAll('.nav-item'); const workoutCards = document.querySelectorAll('.workout-card'); // App State let currentWaterIntake = 0; let selectedWorkoutType = null; // Initial stats let stats = { calories: 750, activeMinutes: 95, workouts: 3, dailyGoalPercentage: 65 }; // Initialize the app function initApp() { // Set current date const now = new Date(); const options = { weekday: 'long', month: 'short', day: 'numeric' }; currentDateEl.textContent = now.toLocaleDateString('en-US', options); // Set initial stats with animation animateCountUp(caloriesBurnedEl, 0, stats.calories, 1500); animateCountUp(activeMinutesEl, 0, stats.activeMinutes, 1500); animateCountUp(workoutsEl, 0, stats.workouts, 1000); // Animate progress bar setTimeout(() => { dailyProgressBar.style.width = `${stats.dailyGoalPercentage}%`; }, 500); // Set up event listeners setupEventListeners(); } // Set up event listeners function setupEventListeners() { // Water intake tracking waterDrops.forEach(drop => { drop.addEventListener('click', () => { const index = parseInt(drop.getAttribute('data-index')); updateWaterIntake(index); }); }); // Open workout dialog addWorkoutBtn.addEventListener('click', () => { workoutDialog.classList.add('active'); }); // Close workout dialog closeDialogBtn.addEventListener('click', () => { workoutDialog.classList.remove('active'); }); // Click outside to close dialog workoutDialog.addEventListener('click', (e) => { if (e.target === workoutDialog) { workoutDialog.classList.remove('active'); } }); // Select workout type workoutTypeOptions.forEach(option => { option.addEventListener('click', () => { workoutTypeOptions.forEach(opt => opt.classList.remove('active')); option.classList.add('active'); selectedWorkoutType = option.getAttribute('data-type'); }); }); // Handle workout form submission workoutForm.addEventListener('submit', (e) => { e.preventDefault(); if (!selectedWorkoutType) { alert("Please select a workout type"); return; } const name = document.getElementById('workout-name').value; const duration = document.getElementById('workout-duration').value; const calories = document.getElementById('workout-calories').value; addNewWorkout({ type: selectedWorkoutType, name, duration, calories }); workoutDialog.classList.remove('active'); workoutForm.reset(); workoutTypeOptions.forEach(opt => opt.classList.remove('active')); selectedWorkoutType = null; }); // Navigation navItems.forEach(item => { item.addEventListener('click', () => { navItems.forEach(nav => nav.classList.remove('active')); item.classList.add('active'); }); }); // Workout cards workoutCards.forEach(card => { card.addEventListener('click', () => { card.style.animation = 'pulse 0.5s ease'; setTimeout(() => { card.style.animation = ''; }, 500); }); }); } // Update water intake function updateWaterIntake(index) { waterDrops.forEach((drop, i) => { if (i < index) { drop.classList.add('filled'); } else { drop.classList.remove('filled'); } }); currentWaterIntake = index; } // Add new workout function addNewWorkout(workout) { // Update stats stats.calories += parseInt(workout.calories); stats.activeMinutes += parseInt(workout.duration); stats.workouts += 1; stats.dailyGoalPercentage = Math.min(100, stats.dailyGoalPercentage + 10); // Update UI animateCountUp(caloriesBurnedEl, parseInt(caloriesBurnedEl.textContent), stats.calories, 800); animateCountUp(activeMinutesEl, parseInt(activeMinutesEl.textContent), stats.activeMinutes, 800); animateCountUp(workoutsEl, parseInt(workoutsEl.textContent), stats.workouts, 500); dailyProgressBar.style.width = `${stats.dailyGoalPercentage}%`; // Create and add new workout card const workoutCardsContainer = document.querySelector('.workout-cards'); const newWorkoutCard = document.createElement('div'); newWorkoutCard.className = 'workout-card'; newWorkoutCard.setAttribute('data-id', Date.now()); newWorkoutCard.innerHTML = ` <div class="workout-type">${workout.type}</div> <h4 class="workout-name">${workout.name}</h4> <div class="workout-meta"> <span>${workout.duration} mins</span> <span>${workout.calories} cal</span> </div> `; // Add event listener to new card newWorkoutCard.addEventListener('click', () => { newWorkoutCard.style.animation = 'pulse 0.5s ease'; setTimeout(() => { newWorkoutCard.style.animation = ''; }, 500); }); workoutCardsContainer.prepend(newWorkoutCard); } // Animate count up effect function animateCountUp(element, start, end, duration) { let startTimestamp = null; const step = (timestamp) => { if (!startTimestamp) startTimestamp = timestamp; const progress = Math.min((timestamp - startTimestamp) / duration, 1); const value = Math.floor(progress * (end - start) + start); element.textContent = value; if (progress < 1) { window.requestAnimationFrame(step); } }; window.requestAnimationFrame(step); } // Initialize the app when the document is loaded document.addEventListener('DOMContentLoaded', initApp); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Wavelength - Music Streaming</title> <style> :root { --bg-primary: #121212; --bg-secondary: #181818; --bg-tertiary: #222222; --text-primary: #ffffff; --text-secondary: #b3b3b3; --accent-primary: #1db954; --accent-secondary: #8c67db; --accent-tertiary: #e94560; --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', sans-serif; } body { background-color: var(--bg-primary); color: var(--text-primary); height: 100vh; width: 100%; overflow: hidden; display: flex; flex-direction: column; } .app-container { display: grid; grid-template-rows: auto 1fr auto; height: 100vh; max-width: 700px; margin: 0 auto; width: 100%; } .header { padding: 20px; display: flex; justify-content: space-between; align-items: center; background-color: var(--bg-secondary); border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .logo { display: flex; align-items: center; } .logo h1 { font-size: 24px; margin-left: 10px; background: linear-gradient(45deg, var(--accent-primary), var(--accent-secondary)); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 800; } .search-bar { background-color: var(--bg-tertiary); border-radius: 20px; padding: 8px 15px; display: flex; align-items: center; width: 200px; } .search-bar input { background-color: transparent; border: none; color: var(--text-primary); width: 100%; outline: none; padding-left: 8px; } .content { padding: 20px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--accent-primary) var(--bg-tertiary); } .content::-webkit-scrollbar { width: 6px; } .content::-webkit-scrollbar-track { background: var(--bg-tertiary); } .content::-webkit-scrollbar-thumb { background-color: var(--accent-primary); border-radius: 6px; } .section-title { margin-bottom: 20px; font-size: 20px; font-weight: 600; } .now-playing { background-color: var(--bg-secondary); border-radius: 12px; padding: 20px; margin-bottom: 30px; position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; } .album-art { width: 240px; height: 240px; border-radius: 8px; position: relative; overflow: hidden; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); transition: var(--transition); z-index: 2; } .album-art:hover { transform: scale(1.02); box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6); } .album-art img { width: 100%; height: 100%; object-fit: cover; transition: var(--transition); } .song-info { text-align: center; margin: 20px 0; position: relative; z-index: 2; } .song-title { font-size: 22px; margin-bottom: 5px; font-weight: 700; } .artist { color: var(--text-secondary); font-size: 16px; } .visualizer { height: 60px; width: 100%; display: flex; align-items: center; justify-content: center; gap: 5px; margin-bottom: 15px; } .bar { width: 4px; background-color: var(--accent-primary); border-radius: 2px; transition: height 0.1s ease; } .controls { display: flex; justify-content: center; align-items: center; gap: 20px; margin-bottom: 10px; } .control-btn { background: transparent; border: none; color: var(--text-primary); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 24px; transition: var(--transition); } .control-btn:hover { color: var(--accent-primary); transform: scale(1.1); } .play-btn { background-color: var(--accent-primary); width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px; transition: var(--transition); } .play-btn:hover { background-color: #1ed760; transform: scale(1.05); } .progress-container { width: 100%; height: 4px; background-color: var(--bg-tertiary); border-radius: 2px; position: relative; cursor: pointer; margin: 10px 0; } .progress-bar { height: 100%; background-color: var(--accent-primary); border-radius: 2px; width: 35%; position: relative; } .progress-handle { width: 12px; height: 12px; background-color: var(--text-primary); border-radius: 50%; position: absolute; top: 50%; right: -6px; transform: translateY(-50%); box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); opacity: 0; transition: var(--transition); } .progress-container:hover .progress-handle { opacity: 1; } .time { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-secondary); } .playlists { margin-top: 30px; } .playlist-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 15px; } .playlist-card { background-color: var(--bg-secondary); border-radius: 8px; padding: 12px; cursor: pointer; transition: var(--transition); position: relative; overflow: hidden; } .playlist-card::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(45deg, var(--accent-primary), var(--accent-secondary)); opacity: 0; transition: var(--transition); z-index: 1; } .playlist-card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); } .playlist-card:hover::after { opacity: 0.1; } .playlist-img { width: 100%; aspect-ratio: 1; border-radius: 6px; margin-bottom: 10px; object-fit: cover; position: relative; z-index: 2; } .playlist-title { font-weight: 600; font-size: 14px; margin-bottom: 4px; position: relative; z-index: 2; } .playlist-songs { font-size: 12px; color: var(--text-secondary); position: relative; z-index: 2; } .player { background-color: var(--bg-secondary); padding: 15px 20px; border-top: 1px solid rgba(255, 255, 255, 0.1); display: flex; align-items: center; gap: 15px; } .mini-album { width: 50px; height: 50px; border-radius: 6px; overflow: hidden; } .mini-album img { width: 100%; height: 100%; object-fit: cover; } .mini-info { flex: 1; } .mini-title { font-size: 14px; font-weight: 600; } .mini-artist { font-size: 12px; color: var(--text-secondary); } .mini-controls { display: flex; align-items: center; gap: 15px; } .mini-btn { font-size: 18px; background: transparent; border: none; color: var(--text-primary); cursor: pointer; transition: var(--transition); } .mini-btn:hover { color: var(--accent-primary); transform: scale(1.1); } .volume-container { display: flex; align-items: center; gap: 8px; position: relative; } .volume-slider { width: 80px; height: 4px; background-color: var(--bg-tertiary); border-radius: 2px; cursor: pointer; } .volume-bar { height: 100%; background-color: var(--accent-primary); border-radius: 2px; width: 65%; position: relative; } .volume-handle { width: 10px; height: 10px; background-color: var(--text-primary); border-radius: 50%; position: absolute; top: 50%; right: -5px; transform: translateY(-50%); opacity: 0; transition: var(--transition); } .volume-slider:hover .volume-handle { opacity: 1; } .next-tracks { margin-top: 30px; } .track-list { display: flex; flex-direction: column; gap: 8px; } .track-item { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 8px; cursor: pointer; transition: var(--transition); } .track-item:hover { background-color: var(--bg-secondary); } .track-number { font-size: 14px; color: var(--text-secondary); width: 20px; text-align: center; } .track-info { flex: 1; } .track-title { font-size: 14px; font-weight: 500; margin-bottom: 2px; } .track-artist { font-size: 12px; color: var(--text-secondary); } .track-duration { font-size: 14px; color: var(--text-secondary); } .equalizer-effect { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(45deg, rgba(29, 185, 84, 0.1), rgba(140, 103, 219, 0.1)); z-index: 1; opacity: 0.5; mix-blend-mode: overlay; } /* Swipe gesture effect */ .swipe-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--accent-primary); opacity: 0; z-index: 999; pointer-events: none; transition: opacity 0.3s ease; } @media (max-width: 600px) { .player { padding: 12px; gap: 10px; } .mini-album { width: 40px; height: 40px; } .playlist-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); } .album-art { width: 200px; height: 200px; } .search-bar { width: 150px; } .controls { gap: 15px; } } @media (max-width: 450px) { .song-title { font-size: 18px; } .album-art { width: 180px; height: 180px; } .playlist-grid { grid-template-columns: repeat(2, 1fr); } } /* For touch devices */ @media (hover: none) { .progress-handle, .volume-handle { opacity: 1; width: 14px; height: 14px; } } /* Animations */ @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .album-art { animation: fadeIn 0.6s ease-out; } .equalizer-active { animation: pulse 2s infinite; } /* Track Switch Animation */ .track-switch-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 999; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } .track-switch-content { background-color: var(--bg-secondary); padding: 20px; border-radius: 12px; text-align: center; transform: scale(0.9); transition: transform 0.3s ease; } .track-switch-overlay.active { opacity: 1; pointer-events: auto; } .track-switch-overlay.active .track-switch-content { transform: scale(1); } </style> </head> <body> <div class="app-container"> <header class="header"> <div class="logo"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM16 16.5L15 17.5C14.5 16.5 13.5 16 12.5 16C11.5 16 10.5 16.5 10 17.5L9 16.5C9.5 15.5 10.5 15 11.5 15H12.5C13.5 15 14.5 15.5 15 16.5V16.5ZM16 12L15 13C14.5 12 13.5 11.5 12.5 11.5C11.5 11.5 10.5 12 10 13L9 12C9.5 11 10.5 10.5 11.5 10.5H12.5C13.5 10.5 14.5 11 15 12V12ZM16 7.5L15 8.5C14.5 7.5 13.5 7 12.5 7C11.5 7 10.5 7.5 10 8.5L9 7.5C9.5 6.5 10.5 6 11.5 6H12.5C13.5 6 14.5 6.5 15 7.5V7.5Z" fill="#1db954"/> </svg> <h1>Wavelength</h1> </div> <div class="search-bar"> <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M15.5 14H14.71L14.43 13.73C15.41 12.59 16 11.11 16 9.5C16 5.91 13.09 3 9.5 3C5.91 3 3 5.91 3 9.5C3 13.09 5.91 16 9.5 16C11.11 16 12.59 15.41 13.73 14.43L14 14.71V15.5L19 20.49L20.49 19L15.5 14ZM9.5 14C7.01 14 5 11.99 5 9.5C5 7.01 7.01 5 9.5 5C11.99 5 14 7.01 14 9.5C14 11.99 11.99 14 9.5 14Z" fill="#b3b3b3"/> </svg> <input type="text" placeholder="Search"> </div> </header> <main class="content"> <div class="now-playing"> <div class="equalizer-effect"></div> <div class="album-art"> <img src="https://images.unsplash.com/photo-1602848597941-0d3c7c51e260?q=80&w=2560&auto=format&fit=crop" alt="Alt-J - The Dream album cover"> </div> <div class="song-info"> <h2 class="song-title">The Actor</h2> <p class="artist">Alt-J · The Dream</p> </div> <div class="visualizer" id="visualizer"> <!-- Bars will be dynamically added here --> </div> <div class="controls"> <button class="control-btn"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M7 6C7 5.44772 6.55228 5 6 5C5.44772 5 5 5.44772 5 6V18C5 18.5523 5.44772 19 6 19C6.55228 19 7 18.5523 7 18V6Z" fill="currentColor"/> <path d="M13 12L19 18V6L13 12Z" fill="currentColor"/> </svg> </button> <button class="play-btn" id="playBtn"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M8 5V19L19 12L8 5Z" fill="currentColor"/> </svg> </button> <button class="control-btn"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M17 6C17 5.44772 17.4477 5 18 5C18.5523 5 19 5.44772 19 6V18C19 18.5523 18.5523 19 18 19C17.4477 19 17 18.5523 17 18V6Z" fill="currentColor"/> <path d="M11 12L5 18V6L11 12Z" fill="currentColor"/> </svg> </button> </div> <div class="progress-container" id="progressContainer"> <div class="progress-bar" id="progressBar"> <div class="progress-handle"></div> </div> </div> <div class="time"> <span>1:54</span> <span>4:28</span> </div> </div> <div class="next-tracks"> <h3 class="section-title">Next in Queue</h3> <div class="track-list"> <div class="track-item"> <div class="track-number">1</div> <div class="track-info"> <div class="track-title">Hard Drive Gold</div> <div class="track-artist">Alt-J</div> </div> <div class="track-duration">3:26</div> </div> <div class="track-item"> <div class="track-number">2</div> <div class="track-info"> <div class="track-title">U&ME</div> <div class="track-artist">Alt-J</div> </div> <div class="track-duration">3:42</div> </div> <div class="track-item"> <div class="track-number">3</div> <div class="track-info"> <div class="track-title">Bane</div> <div class="track-artist">Alt-J</div> </div> <div class="track-duration">3:50</div> </div> </div> </div> <div class="playlists"> <h3 class="section-title">Your Playlists</h3> <div class="playlist-grid"> <div class="playlist-card"> <img src="https://images.unsplash.com/photo-1614613535308-eb5fbd3d2c17?q=80&w=2070&auto=format&fit=crop" alt="Late Night Vibes" class="playlist-img"> <div class="playlist-title">Late Night Vibes</div> <div class="playlist-songs">42 songs</div> </div> <div class="playlist-card"> <img src="https://images.unsplash.com/photo-1493225457124-a3eb161ffa5f?q=80&w=2070&auto=format&fit=crop" alt="Running Mix" class="playlist-img"> <div class="playlist-title">Running Mix</div> <div class="playlist-songs">28 songs</div> </div> <div class="playlist-card"> <img src="https://images.unsplash.com/photo-1459749411175-04bf5292ceea?q=80&w=2070&auto=format&fit=crop" alt="Indie Picks" class="playlist-img"> <div class="playlist-title">Indie Picks</div> <div class="playlist-songs">56 songs</div> </div> <div class="playlist-card"> <img src="https://images.unsplash.com/photo-1525362081669-2b476bb628c3?q=80&w=2074&auto=format&fit=crop" alt="Chill Acoustic" class="playlist-img"> <div class="playlist-title">Chill Acoustic</div> <div class="playlist-songs">34 songs</div> </div> </div> </div> </main> <div class="player"> <div class="mini-album"> <img src="https://images.unsplash.com/photo-1602848597941-0d3c7c51e260?q=80&w=2560&auto=format&fit=crop" alt="Alt-J - The Dream album cover"> </div> <div class="mini-info"> <div class="mini-title">The Actor</div> <div class="mini-artist">Alt-J</div> </div> <div class="mini-controls"> <button class="mini-btn"> <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M8 5V19L19 12L8 5Z" fill="currentColor"/> </svg> </button> <button class="mini-btn"> <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M17 6C17 5.44772 17.4477 5 18 5C18.5523 5 19 5.44772 19 6V18C19 18.5523 18.5523 19 18 19C17.4477 19 17 18.5523 17 18V6Z" fill="currentColor"/> <path d="M11 12L5 18V6L11 12Z" fill="currentColor"/> </svg> </button> </div> <div class="volume-container"> <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M3 9V15H7L12 20V4L7 9H3Z" fill="currentColor"/> <path d="M16.5 12C16.5 10.23 15.48 8.71 14 7.97V16.02C15.48 15.29 16.5 13.77 16.5 12Z" fill="currentColor"/> <path d="M14 3.23V5.29C16.89 6.15 19 8.83 19 12C19 15.17 16.89 17.85 14 18.71V20.77C18.01 19.86 21 16.28 21 12C21 7.72 18.01 4.14 14 3.23Z" fill="currentColor"/> </svg> <div class="volume-slider"> <div class="volume-bar"> <div class="volume-handle"></div> </div> </div> </div> </div> </div> <div class="swipe-overlay" id="swipeOverlay"></div> <div class="track-switch-overlay" id="trackSwitchOverlay"> <div class="track-switch-content"> <h3>Changing track...</h3> </div> </div> <script> // Initialize visualizer const visualizer = document.getElementById('visualizer'); const barsCount = 20; // Create visualizer bars for (let i = 0; i < barsCount; i++) { const bar = document.createElement('div'); bar.className = 'bar'; bar.style.height = Math.floor(Math.random() * 40 + 5) + 'px'; visualizer.appendChild(bar); } // Animate visualizer bars function animateVisualizer() { const bars = document.querySelectorAll('.bar'); bars.forEach(bar => { const height = Math.floor(Math.random() * 40 + 5); bar.style.height = height + 'px'; }); } // Set interval for visualizer animation let visualizerInterval; const playBtn = document.getElementById('playBtn'); let isPlaying = false; // Toggle play/pause playBtn.addEventListener('click', () => { isPlaying = !isPlaying; if (isPlaying) { playBtn.innerHTML = ` <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z" fill="currentColor"/> </svg> `; visualizerInterval = setInterval(animateVisualizer, 100); document.querySelector('.album-art').classList.add('equalizer-active'); } else { playBtn.innerHTML = ` <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M8 5V19L19 12L8 5Z" fill="currentColor"/> </svg> `; clearInterval(visualizerInterval); document.querySelector('.album-art').classList.remove('equalizer-active'); // Pause visualizer by setting all bars to a random but fixed height const bars = document.querySelectorAll('.bar'); bars.forEach(bar => { const height = Math.floor(Math.random() * 20 + 5); bar.style.height = height + 'px'; }); } }); // Progress bar functionality const progressContainer = document.getElementById('progressContainer'); const progressBar = document.getElementById('progressBar'); progressContainer.addEventListener('click', (e) => { const width = progressContainer.clientWidth; const clickX = e.offsetX; const percentage = (clickX / width) * 100; progressBar.style.width = percentage + '%'; }); // Track items click handling const trackItems = document.querySelectorAll('.track-item'); const trackSwitchOverlay = document.getElementById('trackSwitchOverlay'); const songTitle = document.querySelector('.song-title'); const artistName = document.querySelector('.artist'); const miniTitle = document.querySelector('.mini-title'); const miniArtist = document.querySelector('.mini-artist'); trackItems.forEach(track => { track.addEventListener('click', () => { const title = track.querySelector('.track-title').textContent; const artist = track.querySelector('.track-artist').textContent; // Show track switch animation trackSwitchOverlay.classList.add('active'); setTimeout(() => { // Update track info songTitle.textContent = title; artistName.textContent = artist + ' · The Dream'; miniTitle.textContent = title; miniArtist.textContent = artist; // Hide overlay after updating trackSwitchOverlay.classList.remove('active'); // Reset progress bar progressBar.style.width = '0%'; // Start playing if (!isPlaying) { playBtn.click(); } }, 500); }); }); // Playlist cards interaction const playlistCards = document.querySelectorAll('.playlist-card'); const swipeOverlay = document.getElementById('swipeOverlay'); playlistCards.forEach(card => { card.addEventListener('click', () => { // Flash effect swipeOverlay.style.opacity = '0.2'; setTimeout(() => { swipeOverlay.style.opacity = '0'; }, 200); }); }); // Touch swipe gesture for track control let touchStartX = 0; let touchEndX = 0; const albumArt = document.querySelector('.album-art'); albumArt.addEventListener('touchstart', (e) => { touchStartX = e.changedTouches[0].screenX; }); albumArt.addEventListener('touchend', (e) => { touchEndX = e.changedTouches[0].screenX; handleSwipe(); }); function handleSwipe() { const swipeThreshold = 50; if (touchEndX < touchStartX - swipeThreshold) { // Swipe left (next track) swipeOverlay.style.opacity = '0.2'; setTimeout(() => { swipeOverlay.style.opacity = '0'; // Simulate clicking on the first track trackItems[0].click(); }, 200); } if (touchEndX > touchStartX + swipeThreshold) { // Swipe right (previous track) swipeOverlay.style.opacity = '0.2'; setTimeout(() => { swipeOverlay.style.opacity = '0'; // Simulate clicking on the third track trackItems[2].click(); }, 200); } } // Initialize app with random visualizer heights document.addEventListener('DOMContentLoaded', () => { animateVisualizer(); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Munch Express - Food Delivery</title> <style> @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Quicksand:wght@400;500;600;700&display=swap'); :root { --primary: #ff6b35; --primary-light: #ff8a5e; --secondary: #2ec4b6; --text-dark: #333333; --text-light: #666666; --background: #fffcf9; --card-bg: #ffffff; --shadow: 0 8px 24px rgba(255, 107, 53, 0.12); --radius: 16px; --transition: all 0.3s ease; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Poppins', sans-serif; background-color: var(--background); color: var(--text-dark); height: 700px; width: 700px; max-width: 100%; overflow-x: hidden; } .container { width: 100%; height: 100%; padding: 20px; display: flex; flex-direction: column; } header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .logo { font-family: 'Quicksand', sans-serif; font-weight: 700; font-size: 24px; color: var(--primary); display: flex; align-items: center; } .logo svg { margin-right: 8px; } .search-bar { position: relative; width: 100%; max-width: 400px; margin: 0 auto 24px; } .search-bar input { width: 100%; padding: 14px 20px; padding-left: 48px; border: none; background-color: var(--card-bg); border-radius: var(--radius); box-shadow: var(--shadow); font-family: 'Poppins', sans-serif; font-size: 14px; color: var(--text-dark); transition: var(--transition); } .search-bar input:focus { outline: none; box-shadow: 0 8px 24px rgba(255, 107, 53, 0.2); } .search-icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--primary); } .categories { display: flex; gap: 12px; margin-bottom: 24px; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; padding-bottom: 8px; } .categories::-webkit-scrollbar { display: none; } .category-btn { background-color: var(--card-bg); border: none; padding: 10px 18px; border-radius: 24px; font-family: 'Poppins', sans-serif; font-weight: 500; font-size: 14px; color: var(--text-light); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); white-space: nowrap; cursor: pointer; transition: var(--transition); display: flex; align-items: center; gap: 6px; } .category-btn.active { background-color: var(--primary); color: white; } .category-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08); } .food-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; margin-bottom: 24px; overflow-y: auto; max-height: 450px; padding-right: 5px; } .food-grid::-webkit-scrollbar { width: 6px; } .food-grid::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 10px; } .food-grid::-webkit-scrollbar-thumb { background: var(--primary-light); border-radius: 10px; } .food-card { background-color: var(--card-bg); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); transition: var(--transition); position: relative; cursor: pointer; } .food-card:hover { transform: translateY(-6px); box-shadow: 0 12px 32px rgba(255, 107, 53, 0.15); } .food-img { width: 100%; height: 140px; object-fit: cover; border-top-left-radius: var(--radius); border-top-right-radius: var(--radius); } .food-info { padding: 15px; } .food-name { font-weight: 600; font-size: 16px; margin-bottom: 5px; color: var(--text-dark); } .food-desc { font-size: 12px; color: var(--text-light); margin-bottom: 12px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .food-price { font-weight: 700; font-size: 16px; color: var(--primary); } .time-delivery { display: flex; align-items: center; font-size: 12px; color: var(--text-light); margin-top: 8px; } .time-delivery svg { margin-right: 5px; } .rating { position: absolute; top: 10px; right: 10px; background-color: var(--card-bg); border-radius: 20px; padding: 4px 8px; display: flex; align-items: center; font-size: 12px; font-weight: 600; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } .rating svg { color: #FFD700; margin-right: 3px; } .add-btn { position: absolute; bottom: 15px; right: 15px; width: 32px; height: 32px; border-radius: 50%; background-color: var(--primary); color: white; border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: var(--transition); box-shadow: 0 4px 12px rgba(255, 107, 53, 0.2); } .add-btn:hover { background-color: var(--primary-light); transform: scale(1.1); } .bottom-nav { margin-top: auto; background-color: var(--card-bg); border-radius: var(--radius); padding: 16px; display: flex; justify-content: space-around; box-shadow: var(--shadow); } .nav-item { display: flex; flex-direction: column; align-items: center; color: var(--text-light); cursor: pointer; transition: var(--transition); } .nav-item.active { color: var(--primary); } .nav-item svg { margin-bottom: 5px; } .nav-text { font-size: 12px; font-weight: 500; } /* Cart modal */ .cart-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); display: flex; justify-content: center; align-items: center; z-index: 1000; opacity: 0; visibility: hidden; transition: all 0.3s ease; } .cart-modal.active { opacity: 1; visibility: visible; } .cart-content { background-color: var(--card-bg); border-radius: var(--radius); width: 90%; max-width: 600px; max-height: 80%; overflow-y: auto; padding: 24px; transform: translateY(20px); transition: all 0.3s ease; } .cart-modal.active .cart-content { transform: translateY(0); } .cart-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .cart-title { font-weight: 700; font-size: 20px; } .close-btn { background: none; border: none; font-size: 24px; cursor: pointer; color: var(--text-light); } .cart-items { margin-bottom: 20px; } .cart-item { display: flex; padding: 10px 0; border-bottom: 1px solid #f0f0f0; } .item-img { width: 60px; height: 60px; border-radius: 8px; object-fit: cover; } .item-details { flex: 1; margin-left: 15px; } .item-name { font-weight: 600; margin-bottom: 5px; } .item-price { color: var(--primary); font-weight: 600; } .item-quantity { display: flex; align-items: center; margin-top: 5px; } .quantity-btn { width: 24px; height: 24px; border-radius: 50%; border: none; background-color: #f0f0f0; display: flex; align-items: center; justify-content: center; cursor: pointer; font-weight: 600; color: var(--text-dark); } .quantity { margin: 0 10px; } .cart-total { font-weight: 700; font-size: 18px; margin-bottom: 20px; display: flex; justify-content: space-between; } .checkout-btn { width: 100%; background-color: var(--primary); color: white; border: none; border-radius: 30px; padding: 14px; font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 16px; cursor: pointer; transition: var(--transition); display: flex; justify-content: center; align-items: center; gap: 8px; } .checkout-btn:hover { background-color: var(--primary-light); transform: translateY(-2px); box-shadow: 0 8px 16px rgba(255, 107, 53, 0.2); } /* Order tracking animation */ .tracking-container { margin-top: 20px; position: relative; } .tracking-line { height: 4px; background-color: #f0f0f0; position: relative; margin: 10px 0 30px; border-radius: 4px; } .tracking-progress { position: absolute; height: 100%; background-color: var(--secondary); border-radius: 4px; transition: width 1s ease-in-out; width: 0%; } .tracking-steps { display: flex; justify-content: space-between; margin-bottom: 10px; } .step { display: flex; flex-direction: column; align-items: center; position: relative; width: 25%; } .step-icon { width: 40px; height: 40px; border-radius: 50%; background-color: #f0f0f0; display: flex; align-items: center; justify-content: center; margin-bottom: 8px; z-index: 1; color: var(--text-light); transition: all 0.3s ease; } .step.active .step-icon { background-color: var(--secondary); color: white; box-shadow: 0 4px 12px rgba(46, 196, 182, 0.3); } .step-text { font-size: 12px; text-align: center; color: var(--text-light); transition: all 0.3s ease; } .step.active .step-text { color: var(--secondary); font-weight: 600; } /* Food detail modal */ .food-detail-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); display: flex; justify-content: center; align-items: center; z-index: 1000; opacity: 0; visibility: hidden; transition: all 0.3s ease; } .food-detail-modal.active { opacity: 1; visibility: visible; } .food-detail-content { background-color: var(--card-bg); border-radius: var(--radius); width: 90%; max-width: 600px; max-height: 80%; overflow-y: auto; transform: translateY(20px); transition: all 0.3s ease; } .food-detail-modal.active .food-detail-content { transform: translateY(0); } .food-detail-img { width: 100%; height: 200px; object-fit: cover; } .food-detail-info { padding: 20px; } .food-detail-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 15px; } .food-detail-title { font-weight: 700; font-size: 22px; } .food-detail-price { color: var(--primary); font-weight: 700; font-size: 20px; } .food-detail-desc { color: var(--text-light); margin-bottom: 20px; line-height: 1.6; } .food-detail-extras { margin-bottom: 20px; } .extras-title { font-weight: 600; margin-bottom: 10px; } .extras-options { display: flex; flex-wrap: wrap; gap: 10px; } .extra-option { background-color: #f0f0f0; border-radius: 20px; padding: 8px 16px; font-size: 14px; cursor: pointer; transition: var(--transition); } .extra-option.selected { background-color: var(--primary); color: white; } .add-to-cart-btn { width: 100%; background-color: var(--primary); color: white; border: none; border-radius: 30px; padding: 14px; font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 16px; cursor: pointer; transition: var(--transition); display: flex; justify-content: center; align-items: center; gap: 8px; } .add-to-cart-btn:hover { background-color: var(--primary-light); transform: translateY(-2px); box-shadow: 0 8px 16px rgba(255, 107, 53, 0.2); } /* Cart badge */ .cart-badge { position: absolute; top: -5px; right: -5px; background-color: var(--primary); color: white; border-radius: 50%; width: 18px; height: 18px; font-size: 10px; display: flex; align-items: center; justify-content: center; opacity: 0; transform: scale(0); transition: all 0.3s ease; } .cart-badge.active { opacity: 1; transform: scale(1); } /* Notification */ .notification { position: fixed; top: 20px; left: 50%; transform: translateX(-50%) translateY(-100px); background-color: var(--primary); color: white; padding: 12px 24px; border-radius: 30px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); z-index: 2000; transition: all 0.3s ease; opacity: 0; } .notification.active { transform: translateX(-50%) translateY(0); opacity: 1; } /* Responsive adjustments */ @media (max-width: 600px) { .food-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } .search-bar { max-width: 100%; } } @media (max-width: 400px) { .logo { font-size: 20px; } .food-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); } } /* Loader */ .loader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--background); display: flex; justify-content: center; align-items: center; z-index: 2000; transition: opacity 0.5s ease; } .loader.hidden { opacity: 0; pointer-events: none; } .loader-circle { width: 50px; height: 50px; border: 4px solid rgba(255, 107, 53, 0.2); border-top: 4px solid var(--primary); border-radius: 50%; animation: spin 1s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Food add animation */ @keyframes addToCart { 0% { transform: scale(1); } 50% { transform: scale(1.2); } 100% { transform: scale(1); } } .add-animation { animation: addToCart 0.5s ease; } /* Pulse animation for special offers */ @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 107, 53, 0.4); } 70% { box-shadow: 0 0 0 10px rgba(255, 107, 53, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 107, 53, 0); } } .special-offer { position: absolute; top: 10px; left: 10px; background-color: var(--primary); color: white; font-size: 10px; font-weight: 600; padding: 4px 8px; border-radius: 12px; z-index: 1; animation: pulse 2s infinite; } </style> </head> <body> <div class="loader"> <div class="loader-circle"></div> </div> <div class="container"> <header> <div class="logo"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M17 18a5 5 0 0 0-10 0"></path> <line x1="12" y1="2" x2="12" y2="9"></line> <line x1="4.22" y1="10.22" x2="5.64" y2="11.64"></line> <line x1="19.78" y1="10.22" x2="18.36" y2="11.64"></line> <line x1="3" y1="18" x2="21" y2="18"></line> </svg> Munch Express </div> </header> <div class="search-bar"> <div class="search-icon"> <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <circle cx="11" cy="11" r="8"></circle> <line x1="21" y1="21" x2="16.65" y2="16.65"></line> </svg> </div> <input type="text" placeholder="Search for food, restaurants..."> </div> <div class="categories"> <button class="category-btn active"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline> </svg> All </button> <button class="category-btn"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M18 8h1a4 4 0 0 1 0 8h-1"></path> <path d="M2 8h16v9a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4V8z"></path> <line x1="6" y1="1" x2="6" y2="4"></line> <line x1="10" y1="1" x2="10" y2="4"></line> <line x1="14" y1="1" x2="14" y2="4"></line> </svg> Burgers </button> <button class="category-btn"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M5.5 8.5 9 12l-3.5 3.5L2 12l3.5-3.5z"></path> <path d="m12 2 3.5 3.5L12 9 8.5 5.5 12 2z"></path> <path d="M18.5 8.5 22 12l-3.5 3.5L15 12l3.5-3.5z"></path> <path d="m12 15 3.5 3.5L12 22l-3.5-3.5L12 15z"></path> </svg> Pizza </button> <button class="category-btn"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M6 9H4.5a2.5 2.5 0 0 1 0-5H6"></path> <path d="M18 9h1.5a2.5 2.5 0 0 0 0-5H18"></path> <path d="M4 22h16"></path> <path d="M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22"></path> <path d="M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22"></path> <path d="M18 2H6v7a6 6 0 0 0 12 0V2Z"></path> </svg> Asian </button> <button class="category-btn"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"></path> <polyline points="14 2 14 8 20 8"></polyline> <line x1="16" y1="13" x2="8" y2="13"></line> <line x1="16" y1="17" x2="8" y2="17"></line> <line x1="10" y1="9" x2="8" y2="9"></line> </svg> Healthy </button> <button class="category-btn"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <line x1="8" y1="2" x2="8" y2="6"></line> <line x1="16" y1="2" x2="16" y2="6"></line> <line x1="3" y1="10" x2="21" y2="10"></line> <path d="M7 14h.01"></path> <path d="M17 14h.01"></path> <path d="M7 18h.01"></path> <path d="M17 18h.01"></path> <rect x="2" y="6" width="20" height="16" rx="2"></rect> </svg> Dessert </button> </div> <div class="food-grid"> <div class="food-card" data-id="1"> <span class="special-offer">20% OFF</span> <img src="https://images.unsplash.com/photo-1568901346375-23c9450c58cd?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" class="food-img" alt="Signature Burger"> <div class="rating"> <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor" stroke="none"> <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon> </svg> 4.8 </div> <div class="food-info"> <h3 class="food-name">Umami Burger</h3> <p class="food-desc">Wagyu beef, truffle aioli, caramelized onions, and gourmet mushrooms</p> <div class="food-price">$12.99</div> <div class="time-delivery"> <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <circle cx="12" cy="12" r="10"></circle> <polyline points="12 6 12 12 16 14"></polyline> </svg> 20-25 min </div> <button class="add-btn"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <line x1="12" y1="5" x2="12" y2="19"></line> <line x1="5" y1="12" x2="19" y2="12"></line> </svg> </button> </div> </div> <div class="food-card" data-id="2"> <img src="https://images.unsplash.com/photo-1565299624946-b28f40a0ae38?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" class="food-img" alt="Margherita Pizza"> <div class="rating"> <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor" stroke="none"> <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon> </svg> 4.6 </div> <div class="food-info"> <h3 class="food-name">Neapolitan Pizza</h3> <p class="food-desc">San Marzano tomatoes, fresh mozzarella, basil leaves, and olive oil</p> <div class="food-price">$14.50</div> <div class="time-delivery"> <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <circle cx="12" cy="12" r="10"></circle> <polyline points="12 6 12 12 16 14"></polyline> </svg> 25-35 min </div> <button class="add-btn"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <line x1="12" y1="5" x2="12" y2="19"></line> <line x1="5" y1="12" x2="19" y2="12"></line> </svg> </button> </div> </div> <div class="food-card" data-id="3"> <img src="https://images.unsplash.com/photo-1626645738196-c2a7c87a8f58?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" class="food-img" alt="Spicy Ramen"> <div class="rating"> <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor" stroke="none"> <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon> </svg> 4.9 </div> <div class="food-info"> <h3 class="food-name">Tonkotsu Ramen</h3> <p class="food-desc">Rich pork broth, fresh noodles, soft-boiled egg, chashu, and green onions</p> <div class="food-price">$16.75</div> <div class="time-delivery"> <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <circle cx="12" cy="12" r="10"></circle> <polyline points="12 6 12 12 16 14"></polyline> </svg> 15-25 min </div> <button class="add-btn"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <line x1="12" y1="5" x2="12" y2="19"></line> <line x1="5" y1="12" x2="19" y2="12"></line> </svg> </button> </div> </div> <div class="food-card" data-id="4"> <span class="special-offer">NEW</span> <img src="https://images.unsplash.com/photo-1546069901-ba9599a7e63c?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" class="food-img" alt="Healthy Bowl"> <div class="rating"> <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor" stroke="none"> <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon> </svg> 4.7 </div> <div class="food-info"> <h3 class="food-name">Mediterranean Bowl</h3> <p class="food-desc">Quinoa, kale, roasted vegetables, hummus, feta, and lemon tahini dressing</p> <div class="food-price">$13.25</div> <div class="time-delivery"> <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <circle cx="12" cy="12" r="10"></circle> <polyline points="12 6 12 12 16 14"></polyline> </svg> 15-20 min </div> <button class="add-btn"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <line x1="12" y1="5" x2="12" y2="19"></line> <line x1="5" y1="12" x2="19" y
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Gentle - Dating with Intention</title> <style> :root { --primary: #f8c2d9; --secondary: #a2d2ff; --tertiary: #cdb4db; --text-dark: #333; --text-light: #fff; --bg-light: #fefefe; --shadow: rgba(0, 0, 0, 0.05); } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; } body { background: linear-gradient(135deg, #f5f7fa 0%, #f8f9fa 100%); min-height: 700px; display: flex; justify-content: center; align-items: center; color: var(--text-dark); overflow: hidden; } .app-container { width: 100%; max-width: 375px; height: 650px; background-color: var(--bg-light); border-radius: 24px; box-shadow: 0 10px 30px var(--shadow); position: relative; overflow: hidden; } .header { display: flex; justify-content: space-between; align-items: center; padding: 20px; position: relative; z-index: 10; } .logo { font-size: 24px; font-weight: 700; background: linear-gradient(90deg, var(--primary), var(--tertiary)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; display: flex; align-items: center; } .logo svg { margin-right: 8px; } .nav-icons { display: flex; gap: 16px; } .nav-icon { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background-color: rgba(248, 194, 217, 0.1); color: var(--text-dark); cursor: pointer; transition: all 0.2s ease; } .nav-icon:hover { background-color: rgba(248, 194, 217, 0.3); transform: translateY(-2px); } .nav-icon svg { width: 18px; height: 18px; } .card-stack { position: relative; width: 300px; height: 450px; margin: 10px auto; perspective: 1000px; } .card { width: 100%; height: 100%; position: absolute; border-radius: 16px; background-color: var(--bg-light); box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08); overflow: hidden; transform-origin: bottom; transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275); cursor: grab; transform: translateY(0) rotate(0) scale(1); } .card:nth-child(1) { z-index: 5; } .card:nth-child(2) { z-index: 4; transform: translateY(10px) scale(0.97); } .card:nth-child(3) { z-index: 3; transform: translateY(20px) scale(0.94); } .card-image { width: 100%; height: 75%; background-size: cover; background-position: center; border-radius: 16px 16px 0 0; position: relative; } .card-overlay { position: absolute; bottom: 0; left: 0; right: 0; height: 40%; background: linear-gradient(0deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%); display: flex; flex-direction: column; justify-content: flex-end; padding: 20px; color: var(--text-light); } .card-content { padding: 16px; height: 25%; display: flex; flex-direction: column; justify-content: space-between; } .card-name { font-size: 22px; font-weight: 700; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .card-age-location { font-size: 14px; color: rgba(51, 51, 51, 0.7); margin-bottom: 12px; } .card-interests { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 15px; } .card-interest { padding: 6px 12px; background-color: rgba(162, 210, 255, 0.2); border-radius: 20px; font-size: 12px; color: var(--secondary); font-weight: 500; white-space: nowrap; } .action-buttons { display: flex; justify-content: center; margin-top: 20px; gap: 20px; padding: 0 20px 20px; } .action-button { width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: none; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); } .action-button:hover { transform: translateY(-2px); } .like-button { background: linear-gradient(135deg, #f8c2d9, #fdafbb); } .like-button:hover { background: linear-gradient(135deg, #fdafbb, #f8c2d9); } .dislike-button { background: white; } .superlike-button { background: linear-gradient(135deg, #a2d2ff, #8ecae6); } .superlike-button:hover { background: linear-gradient(135deg, #8ecae6, #a2d2ff); } .match-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, rgba(248, 194, 217, 0.95), rgba(162, 210, 255, 0.95)); display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 100; opacity: 0; pointer-events: none; transition: opacity 0.4s ease; } .match-overlay.active { opacity: 1; pointer-events: all; animation: pulse 2s infinite; } @keyframes pulse { 0% { background: linear-gradient(135deg, rgba(248, 194, 217, 0.95), rgba(162, 210, 255, 0.95)); } 50% { background: linear-gradient(135deg, rgba(162, 210, 255, 0.95), rgba(248, 194, 217, 0.95)); } 100% { background: linear-gradient(135deg, rgba(248, 194, 217, 0.95), rgba(162, 210, 255, 0.95)); } } .match-title { font-size: 32px; font-weight: 800; color: white; margin-bottom: 20px; transform: scale(0); animation: popIn 0.5s forwards; animation-delay: 0.3s; } .match-circles { display: flex; gap: 20px; margin-bottom: 40px; } .match-circle { width: 100px; height: 100px; border-radius: 50%; background-size: cover; background-position: center; border: 4px solid white; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); transform: scale(0); } .match-circle:nth-child(1) { animation: popIn 0.5s forwards; animation-delay: 0.6s; } .match-circle:nth-child(2) { animation: popIn 0.5s forwards; animation-delay: 0.8s; } .match-message { font-size: 16px; color: white; margin-bottom: 30px; text-align: center; opacity: 0; animation: fadeIn 0.5s forwards; animation-delay: 1.2s; } .match-button { background-color: white; color: var(--primary); border: none; padding: 14px 30px; border-radius: 30px; font-weight: 600; font-size: 16px; cursor: pointer; transition: all 0.3s ease; opacity: 0; animation: fadeIn 0.5s forwards; animation-delay: 1.5s; } .match-button:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); } @keyframes popIn { 0% { transform: scale(0); } 70% { transform: scale(1.1); } 100% { transform: scale(1); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .choice-indicator { position: absolute; top: 30px; font-size: 32px; font-weight: 800; transform: rotate(-15deg); padding: 8px 16px; border-radius: 8px; z-index: 10; opacity: 0; transform-origin: center; text-transform: uppercase; } .like-indicator { right: 30px; border: 4px solid var(--primary); color: var(--primary); } .dislike-indicator { left: 30px; border: 4px solid #ff0000; color: #ff0000; } .sliding-animation { transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .card-bio { font-size: 13px; color: #666; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; max-height: 55px; } /* Responsive adjustments */ @media (max-width: 400px) { .app-container { border-radius: 0; height: 100vh; max-width: 100%; } .card-stack { width: 85%; height: 420px; } .action-buttons { padding-bottom: 30px; } } @media (max-height: 700px) { .app-container { height: 100vh; } .card-stack { height: 380px; } .action-buttons { margin-top: 10px; } } </style> </head> <body> <div class="app-container"> <div class="header"> <div class="logo"> <svg width="22" height="22" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 21.35L10.55 20.03C5.4 15.36 2 12.28 2 8.5C2 5.42 4.42 3 7.5 3C9.24 3 10.91 3.81 12 5.09C13.09 3.81 14.76 3 16.5 3C19.58 3 22 5.42 22 8.5C22 12.28 18.6 15.36 13.45 20.04L12 21.35Z" fill="url(#paint0_linear)"/> <defs> <linearGradient id="paint0_linear" x1="2" y1="3" x2="22" y2="21" gradientUnits="userSpaceOnUse"> <stop stop-color="#f8c2d9"/> <stop offset="1" stop-color="#a2d2ff"/> </linearGradient> </defs> </svg> Gentle </div> <div class="nav-icons"> <div class="nav-icon"> <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M21 6H3C2.44772 6 2 6.44772 2 7V17C2 17.5523 2.44772 18 3 18H21C21.5523 18 22 17.5523 22 17V7C22 6.44772 21.5523 6 21 6Z" stroke="#333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M2 10H22" stroke="#333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </div> <div class="nav-icon"> <svg width="18" height="18" 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="#333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M19.4 15C19.2669 15.3016 19.2272 15.6362 19.286 15.9606C19.3448 16.285 19.4995 16.5843 19.73 16.82L19.79 16.88C19.976 17.0657 20.1235 17.2863 20.2241 17.5291C20.3248 17.7719 20.3766 18.0322 20.3766 18.295C20.3766 18.5578 20.3248 18.8181 20.2241 19.0609C20.1235 19.3037 19.976 19.5243 19.79 19.71C19.6043 19.896 19.3837 20.0435 19.1409 20.1441C18.8981 20.2448 18.6378 20.2966 18.375 20.2966C18.1122 20.2966 17.8519 20.2448 17.6091 20.1441C17.3663 20.0435 17.1457 19.896 16.96 19.71L16.9 19.65C16.6643 19.4195 16.365 19.2648 16.0406 19.206C15.7162 19.1472 15.3816 19.1869 15.08 19.32C14.7842 19.4468 14.532 19.6572 14.3543 19.9255C14.1766 20.1938 14.0813 20.5082 14.08 20.83V21C14.08 21.5304 13.8693 22.0391 13.4942 22.4142C13.1191 22.7893 12.6104 23 12.08 23C11.5496 23 11.0409 22.7893 10.6658 22.4142C10.2907 22.0391 10.08 21.5304 10.08 21V20.91C10.0723 20.579 9.96512 20.258 9.77251 19.9887C9.5799 19.7194 9.31074 19.5143 9 19.4C8.69838 19.2669 8.36381 19.2272 8.03941 19.286C7.71502 19.3448 7.41568 19.4995 7.18 19.73L7.12 19.79C6.93425 19.976 6.71368 20.1235 6.47088 20.2241C6.22808 20.3248 5.96783 20.3766 5.705 20.3766C5.44217 20.3766 5.18192 20.3248 4.93912 20.2241C4.69632 20.1235 4.47575 19.976 4.29 19.79C4.10405 19.6043 3.95653 19.3837 3.85588 19.1409C3.75523 18.8981 3.70343 18.6378 3.70343 18.375C3.70343 18.1122 3.75523 17.8519 3.85588 17.6091C3.95653 17.3663 4.10405 17.1457 4.29 16.96L4.35 16.9C4.58054 16.6643 4.73519 16.365 4.794 16.0406C4.85282 15.7162 4.81312 15.3816 4.68 15.08C4.55324 14.7842 4.34276 14.532 4.07447 14.3543C3.80618 14.1766 3.49179 14.0813 3.17 14.08H3C2.46957 14.08 1.96086 13.8693 1.58579 13.4942C1.21071 13.1191 1 12.6104 1 12.08C1 11.5496 1.21071 11.0409 1.58579 10.6658C1.96086 10.2907 2.46957 10.08 3 10.08H3.09C3.42099 10.0723 3.742 9.96512 4.0113 9.77251C4.28059 9.5799 4.48572 9.31074 4.6 9C4.73312 8.69838 4.77282 8.36381 4.714 8.03941C4.65519 7.71502 4.50054 7.41568 4.27 7.18L4.21 7.12C4.02405 6.93425 3.87653 6.71368 3.77588 6.47088C3.67523 6.22808 3.62343 5.96783 3.62343 5.705C3.62343 5.44217 3.67523 5.18192 3.77588 4.93912C3.87653 4.69632 4.02405 4.47575 4.21 4.29C4.39575 4.10405 4.61632 3.95653 4.85912 3.85588C5.10192 3.75523 5.36217 3.70343 5.625 3.70343C5.88783 3.70343 6.14808 3.75523 6.39088 3.85588C6.63368 3.95653 6.85425 4.10405 7.04 4.29L7.1 4.35C7.33568 4.58054 7.63502 4.73519 7.95941 4.794C8.28381 4.85282 8.61838 4.81312 8.92 4.68H9C9.29577 4.55324 9.54802 4.34276 9.72569 4.07447C9.90337 3.80618 9.99872 3.49179 10 3.17V3C10 2.46957 10.2107 1.96086 10.5858 1.58579C10.9609 1.21071 11.4696 1 12 1C12.5304 1 13.0391 1.21071 13.4142 1.58579C13.7893 1.96086 14 2.46957 14 3V3.09C14.0013 3.41179 14.0966 3.72618 14.2743 3.99447C14.452 4.26276 14.7042 4.47324 15 4.6C15.3016 4.73312 15.6362 4.77282 15.9606 4.714C16.285 4.65519 16.5843 4.50054 16.82 4.27L16.88 4.21C17.0657 4.02405 17.2863 3.87653 17.5291 3.77588C17.7719 3.67523 18.0322 3.62343 18.295 3.62343C18.5578 3.62343 18.8181 3.67523 19.0609 3.77588C19.3037 3.87653 19.5243 4.02405 19.71 4.21C19.896 4.39575 20.0435 4.61632 20.1441 4.85912C20.2448 5.10192 20.2966 5.36217 20.2966 5.625C20.2966 5.88783 20.2448 6.14808 20.1441 6.39088C20.0435 6.63368 19.896 6.85425 19.71 7.04L19.65 7.1C19.4195 7.33568 19.2648 7.63502 19.206 7.95941C19.1472 8.28381 19.1869 8.61838 19.32 8.92V9C19.4468 9.29577 19.6572 9.54802 19.9255 9.72569C20.1938 9.90337 20.5082 9.99872 20.83 10H21C21.5304 10 22.0391 10.2107 22.4142 10.5858C22.7893 10.9609 23 11.4696 23 12C23 12.5304 22.7893 13.0391 22.4142 13.4142C22.0391 13.7893 21.5304 14 21 14H20.91C20.5882 14.0013 20.2738 14.0966 20.0055 14.2743C19.7372 14.452 19.5268 14.7042 19.4 15Z" stroke="#333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </div> </div> </div> <div class="card-stack"> <div class="card" data-name="Sophia" data-age="28" data-location="Brooklyn, NY" data-bio="Classical pianist who loves picnics in Prospect Park. Looking for someone to explore art galleries and try new coffee shops with on weekends." data-interests="Classical Music,Art,Coffee,Picnics"> <div class="card-image" style="background-image: url('https://images.unsplash.com/photo-1529626455594-4ff0802cfb7e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80')"> <div class="choice-indicator like-indicator">Like</div> <div class="choice-indicator dislike-indicator">Nope</div> </div> <div class="card-content"> <div> <div class="card-name">Sophia, 28</div> <div class="card-age-location">Brooklyn, NY</div> </div> <div class="card-bio">Classical pianist who loves picnics in Prospect Park. Looking for someone to explore art galleries and try new coffee shops with on weekends.</div> </div> </div> <div class="card" data-name="Ethan" data-age="31" data-location="Manhattan, NY" data-bio="Architect by day, amateur chef by night. I make a risotto that will change your life. Looking for someone to share conversations and home-cooked meals." data-interests="Architecture,Cooking,Design,Wine"> <div class="card-image" style="background-image: url('https://images.unsplash.com/photo-1539571696357-5a69c17a67c6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80')"> <div class="choice-indicator like-indicator">Like</div> <div class="choice-indicator dislike-indicator">Nope</div> </div> <div class="card-content"> <div> <div class="card-name">Ethan, 31</div> <div class="card-age-location">Manhattan, NY</div> </div> <div class="card-bio">Architect by day, amateur chef by night. I make a risotto that will change your life. Looking for someone to share conversations and home-cooked meals.</div> </div> </div> <div class="card" data-name="Mia" data-age="26" data-location="Queens, NY" data-bio="Environmental scientist with a love for vintage bookstores. I hike on weekends and have a collection of plants that are all named after philosophers." data-interests="Hiking,Books,Plants,Sustainability"> <div class="card-image" style="background-image: url('https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80')"> <div class="choice-indicator like-indicator">Like</div> <div class="choice-indicator dislike-indicator">Nope</div> </div> <div class="card-content"> <div> <div class="card-name">Mia, 26</div> <div class="card-age-location">Queens, NY</div> </div> <div class="card-bio">Environmental scientist with a love for vintage bookstores. I hike on weekends and have a collection of plants that are all named after philosophers.</div> </div> </div> </div> <div class="action-buttons"> <button class="action-button dislike-button"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M18 6L6 18M6 6L18 18" stroke="#FF5555" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </button> <button class="action-button superlike-button"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 2L14.39 6.75L19.5 7.73L15.75 11.38L16.85 16.5L12 14.09L7.15 16.5L8.25 11.38L4.5 7.73L9.61 6.75L12 2Z" fill="white" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </button> <button class="action-button like-button"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 21.35L10.55 20.03C5.4 15.36 2 12.28 2 8.5C2 5.42 4.42 3 7.5 3C9.24 3 10.91 3.81 12 5.09C13.09 3.81 14.76 3 16.5 3C19.58 3 22 5.42 22 8.5C22 12.28 18.6 15.36 13.45 20.04L12 21.35Z" fill="white"/> </svg> </button> </div> <div class="match-overlay"> <h2 class="match-title">It's a Match!</h2> <div class="match-circles"> <div class="match-circle" style="background-image: url('https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=880&q=80')"></div> <div class="match-circle match-person"></div> </div> <p class="match-message">You and <span class="match-name"></span> have liked each other.</p> <button class="match-button">Say Hello</button> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { const cards = document.querySelectorAll('.card'); const likeBtn = document.querySelector('.like-button'); const dislikeBtn = document.querySelector('.dislike-button'); const superlikeBtn = document.querySelector('.superlike-button'); const matchOverlay = document.querySelector('.match-overlay'); const matchButton = document.querySelector('.match-button'); const matchNameSpan = document.querySelector('.match-name'); const matchPersonImg = document.querySelector('.match-person'); // Track swipe state let startX = 0; let startY = 0; let moveX = 0; let moveY = 0; let currentCard = null; let isDragging = false; let swipeThreshold = 100; // Set up initial card state function initCards() { cards.forEach((card, index) => { card.style.zIndex = cards.length - index; setupCardListeners(card); // Add interests to cards const interests = card.dataset.interests.split(','); const interestsContainer = document.createElement('div'); interestsContainer.className = 'card-interests'; interests.forEach(interest => { const interestEl = document.createElement('div'); interestEl.className = 'card-interest'; interestEl.textContent = interest.trim(); interestsContainer.appendChild(interestEl); }); card.querySelector('.card-bio').before(interestsContainer); }); } function setupCardListeners(card) { card.addEventListener('mousedown', startDrag); card.addEventListener('touchstart', startDrag, { passive: true }); card.addEventListener('mousemove', drag); card.addEventListener('touchmove', drag, { passive: true }); card.addEventListener('mouseup', endDrag); card.addEventListener('touchend', endDrag); card.addEventListener('mouseleave', () => { if (isDragging) endDrag({ currentTarget: card }); }); } function startDrag(e) { currentCard = this; isDragging = true; currentCard.style.transition = 'none'; if (e.type === 'touchstart') { startX = e.touches[0].clientX; startY = e.touches[0].clientY; } else { startX = e.clientX; startY = e.clientY; } } function drag(e) { if (!isDragging || !currentCard) return; let currentX, currentY; if (e.type === 'touchmove') { currentX = e.touches[0].clientX; currentY = e.touches[0].clientY; } else { currentX = e.clientX; currentY = e.clientY; } moveX = currentX - startX; moveY = currentY - startY; // Calculate rotation based on horizontal movement const rotate = moveX * 0.1; // Apply transform currentCard.style.transform = `translate(${moveX}px, ${moveY}px) rotate(${rotate}deg)`; // Update choice indicators if (moveX > 50) { currentCard.querySelector('.like-indicator').style.opacity = Math.min(moveX / 100, 1); currentCard.querySelector('.dislike-indicator').style.opacity = 0; } else if (moveX < -50) { currentCard.querySelector('.dislike-indicator').style.opacity = Math.min(Math.abs(moveX) / 100, 1); currentCard.querySelector('.like-indicator').style.opacity = 0; } else { currentCard.querySelector('.like-indicator').style.opacity = 0; currentCard.querySelector('.dislike-indicator').style.opacity = 0; } } function endDrag(e) { if (!isDragging || !currentCard) return; isDragging = false; currentCard.style.transition = 'transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275)'; // Check if swipe was far enough to count as a decision if (moveX > swipeThreshold) { swipeRight(currentCard); } else if (moveX < -swipeThreshold) { swipeLeft(currentCard); } else { // Reset position if not a decisive swipe resetCardPosition(); } // Reset indicators currentCard.querySelector('.like-indicator').style.opacity = 0; currentCard.querySelector('.dislike-indicator').style.opacity = 0; } function resetCardPosition() { if (currentCard) { currentCard.style.transform = 'translateX(0) translateY(0) rotate(0)'; } } function swipeLeft(card) { // Animation for dislike card.style.transform = 'translateX(-1000px) rotate(-30deg)'; setTimeout(() => removeCard(card), 300); } function swipeRight(card) { // Animation for like card.style.transform = 'translateX(1000px) rotate(30deg)'; // Random chance for match const isMatch = Math.random() > 0.5; if (isMatch) { showMatch(card); } setTimeout(() => removeCard(card), 300); } function removeCard(card) { // Remove the card from DOM card.remove(); // Move next cards up updateRemainingCards(); } function updateRemainingCards() { const remainingCards = document.querySelectorAll('.card'); if (remainingCards.length === 0) { // Add more cards when all are gone (in a real app you'd fetch more) reset
