| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>QuitNic | Quit Nicotine Support App</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| <script> |
| tailwind.config = { |
| theme: { |
| extend: { |
| colors: { |
| 'primary': '#4e60ff', |
| 'secondary': '#8e9dff', |
| 'accent': '#ff6b8b', |
| 'light': '#f9fafb', |
| 'dark': '#1e293b' |
| } |
| } |
| } |
| } |
| </script> |
| <style> |
| @keyframes fade-in-out { |
| 0% { opacity: 0; transform: translateY(10px); } |
| 10% { opacity: 1; transform: translateY(0); } |
| 90% { opacity: 1; transform: translateY(0); } |
| 100% { opacity: 0; transform: translateY(-10px); } |
| } |
| .animate-fade-in-out { |
| animation: fade-in-out 2s ease-in-out forwards; |
| } |
| .hero-gradient { |
| background: linear-gradient(135deg, #4e60ff 0%, #8e9dff 100%); |
| } |
| .progress-gradient { |
| background: linear-gradient(to right, #4e60ff, #8e9dff); |
| } |
| .calendar-grid { |
| display: grid; |
| grid-template-columns: repeat(7, 1fr); |
| gap: 8px; |
| } |
| .tip-card:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); |
| } |
| .stat-card { |
| transition: all 0.3s ease; |
| } |
| .stat-card:hover { |
| transform: scale(1.03); |
| } |
| </style> |
| </head> |
| <body class="bg-light text-dark font-sans"> |
| |
| <div class="max-w-md mx-auto bg-white min-h-screen shadow-lg relative overflow-hidden"> |
| |
| |
| <header class="hero-gradient text-white px-6 py-8"> |
| <div class="flex justify-between items-center mb-10"> |
| <div class="flex items-center"> |
| <div class="w-12 h-12 rounded-full bg-white flex items-center justify-center"> |
| <i class="fas fa-smoking-ban text-primary text-2xl"></i> |
| </div> |
| <h1 class="ml-4 text-2xl font-bold">QuitNic</h1> |
| </div> |
| <div class="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center"> |
| <i class="fas fa-user text-white"></i> |
| </div> |
| </div> |
| <div class="mb-6"> |
| <h2 class="text-2xl font-bold mb-2">Welcome Back, Michael!</h2> |
| <p class="opacity-90">Today is day <span class="font-bold">14</span> of being nicotine-free.</p> |
| </div> |
| </header> |
| |
| |
| <div class="px-4 -mt-6 mb-6"> |
| <div class="flex space-x-4 overflow-x-auto pb-4 px-1 -mx-1"> |
| <div class="stat-card bg-white p-4 rounded-xl shadow-lg min-w-[180px] flex-shrink-0"> |
| <div class="flex items-center mb-2"> |
| <div class="bg-primary/10 text-primary w-10 h-10 rounded-lg flex items-center justify-center mr-2"> |
| <i class="fas fa-calendar-check"></i> |
| </div> |
| <span class="text-lg font-bold">14 Days</span> |
| </div> |
| <p class="text-gray-500 text-sm">Current streak</p> |
| </div> |
| <div class="stat-card bg-white p-4 rounded-xl shadow-lg min-w-[180px] flex-shrink-0"> |
| <div class="flex items-center mb-2"> |
| <div class="bg-secondary/10 text-secondary w-10 h-10 rounded-lg flex items-center justify-center mr-2"> |
| <i class="fas fa-coins"></i> |
| </div> |
| <span class="text-lg font-bold">$124</span> |
| </div> |
| <p class="text-gray-500 text-sm">Money saved</p> |
| </div> |
| </div> |
| </div> |
| |
| |
| <nav class="flex p-4 bg-white border-b"> |
| <button class="flex-1 text-center py-2 border-b-2 border-primary text-primary font-medium"> |
| <i class="fas fa-home mb-1 block"></i> |
| <span class="text-xs">Home</span> |
| </button> |
| <button class="flex-1 text-center py-2 text-gray-500"> |
| <i class="fas fa-clipboard-list mb-1 block"></i> |
| <span class="text-xs">Tips</span> |
| </button> |
| <button class="flex-1 text-center py-2 text-gray-500"> |
| <i class="fas fa-chart-line mb-1 block"></i> |
| <span class="text-xs">Progress</span> |
| </button> |
| <button class="flex-1 text-center py-2 text-gray-500"> |
| <i class="fas fa-cog mb-1 block"></i> |
| <span class="text-xs">Settings</span> |
| </button> |
| </nav> |
| |
| |
| <main class="p-4"> |
| |
| <div class="mb-8"> |
| <h3 class="font-bold text-lg mb-4 flex items-center"> |
| <i class="fas fa-bolt text-accent mr-2"></i> Quick Actions |
| </h3> |
| <div class="grid grid-cols-2 gap-4"> |
| <a href="#" class="bg-primary/10 text-primary p-4 rounded-lg text-center transition hover:bg-primary/20"> |
| <i class="fas fa-notes-medical block text-2xl mb-2"></i> |
| Log Cravings |
| </a> |
| <a href="#" class="bg-secondary/10 text-secondary p-4 rounded-lg text-center transition hover:bg-secondary/20"> |
| <i class="fas fa-book block text-2xl mb-2"></i> |
| Journal |
| </a> |
| <a href="#" class="bg-green-100 text-green-600 p-4 rounded-lg text-center transition hover:bg-green-200"> |
| <i class="fas fa-users block text-2xl mb-2"></i> |
| Community |
| </a> |
| <a href="#" class="bg-purple-100 text-purple-600 p-4 rounded-lg text-center transition hover:bg-purple-200"> |
| <i class="fas fa-award block text-2xl mb-2"></i> |
| Rewards |
| </a> |
| </div> |
| </div> |
|
|
| |
| <div class="mb-8"> |
| <h3 class="font-bold text-lg mb-4 flex items-center"> |
| <i class="fas fa-heartbeat text-red-500 mr-2"></i> Cravings Tracker |
| </h3> |
| <div class="bg-white p-4 rounded-lg shadow-sm"> |
| <div class="flex justify-between items-center mb-3"> |
| <h4 class="font-medium">Today's Cravings</h4> |
| <span class="text-sm text-gray-500">3 logged</span> |
| </div> |
| <div class="space-y-3"> |
| <div class="flex items-center"> |
| <div class="w-3 h-3 rounded-full bg-red-500 mr-3"></div> |
| <div class="flex-1"> |
| <div class="flex justify-between"> |
| <span>Morning</span> |
| <span class="text-sm text-gray-500">8:30 AM</span> |
| </div> |
| <div class="w-full bg-gray-200 rounded-full h-1.5 mt-1"> |
| <div class="bg-red-500 h-1.5 rounded-full" style="width: 70%"></div> |
| </div> |
| </div> |
| </div> |
| <div class="flex items-center"> |
| <div class="w-3 h-3 rounded-full bg-yellow-500 mr-3"></div> |
| <div class="flex-1"> |
| <div class="flex justify-between"> |
| <span>Afternoon</span> |
| <span class="text-sm text-gray-500">2:15 PM</span> |
| </div> |
| <div class="w-full bg-gray-200 rounded-full h-1.5 mt-1"> |
| <div class="bg-yellow-500 h-1.5 rounded-full" style="width: 40%"></div> |
| </div> |
| </div> |
| </div> |
| <div class="flex items-center"> |
| <div class="w-3 h-3 rounded-full bg-green-500 mr-3"></div> |
| <div class="flex-1"> |
| <div class="flex justify-between"> |
| <span>Evening</span> |
| <span class="text-sm text-gray-500">7:45 PM</span> |
| </div> |
| <div class="w-full bg-gray-200 rounded-full h-1.5 mt-1"> |
| <div class="bg-green-500 h-1.5 rounded-full" style="width: 20%"></div> |
| </div> |
| </div> |
| </div> |
| </div> |
| <button class="w-full mt-4 bg-gray-100 hover:bg-gray-200 text-gray-700 py-2 rounded-lg text-sm font-medium transition"> |
| View Full Report |
| </button> |
| </div> |
| </div> |
| |
| |
| <div class="mb-8"> |
| <div class="flex justify-between items-center mb-4"> |
| <h3 class="font-bold text-lg flex items-center"> |
| <i class="fas fa-lightbulb text-yellow-400 mr-2"></i> Tips for You |
| </h3> |
| <a href="#" class="text-primary text-sm">See All</a> |
| </div> |
| |
| <div class="space-y-4"> |
| |
| <div class="tip-card bg-white border p-4 rounded-lg shadow-sm transition-all"> |
| <div class="flex items-start mb-3"> |
| <div class="bg-purple-100 text-purple-600 w-8 h-8 rounded-full flex items-center justify-center mr-3"> |
| <i class="fas fa-running"></i> |
| </div> |
| <h4 class="font-semibold text-lg text-dark">Managing Tired Muscles?</h4> |
| </div> |
| <p class="text-gray-600 mb-4">Try gentle stretching exercises to relieve muscle fatigue caused by nicotine withdrawal.</p> |
| <div class="flex justify-between"> |
| <span class="text-xs bg-green-50 text-green-600 px-2 py-1 rounded-full">Physical</span> |
| <a href="#" class="text-primary text-sm font-medium">Read More</a> |
| </div> |
| </div> |
| |
| |
| <div class="tip-card bg-white border p-4 rounded-lg shadow-sm transition-all"> |
| <div class="flex items-start mb-3"> |
| <div class="bg-blue-100 text-blue-600 w-8 h-8 rounded-full flex items-center justify-center mr-3"> |
| <i class="fas fa-brain"></i> |
| </div> |
| <h4 class="font-semibold text-lg text-dark">Beat Evening Cravings</h4> |
| </div> |
| <p class="text-gray-600 mb-4">Replace your after-dinner cigarette with a new calming ritual like herbal tea or journaling.</p> |
| <div class="flex justify-between"> |
| <span class="text-xs bg-amber-50 text-amber-600 px-2 py-1 rounded-full">Mental</span> |
| <a href="#" class="text-primary text-sm font-medium">Read More</a> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="mb-8"> |
| <div class="flex justify-between items-center mb-4"> |
| <h3 class="font-bold text-lg flex items-center"> |
| <i class="fas fa-calendar-alt text-secondary mr-2"></i> Your Progress |
| </h3> |
| <a href="#" class="text-primary text-sm">Detailed Stats</a> |
| </div> |
| |
| |
| <div class="p-4 rounded-lg border-0 progress-gradient text-white mb-4"> |
| <h4 class="font-semibold mb-2">Daily Goal Achieved!</h4> |
| <p class="text-sm mb-4">You've resisted 3 cravings today already.</p> |
| <div class="w-full bg-white/30 rounded-full h-2 mb-2"> |
| <div class="bg-white h-2 rounded-full" style="width: 75%"></div> |
| </div> |
| <p class="text-xs opacity-80">You're 75% toward your daily goal</p> |
| </div> |
| |
| |
| <div class="mb-4"> |
| <h4 class="font-medium mb-2">Smoke-Free Calendar</h4> |
| <div class="calendar-grid mb-2"> |
| <div class="text-center text-sm py-1">S</div> |
| <div class="text-center text-sm py-1">M</div> |
| <div class="text-center text-sm py-1">T</div> |
| <div class="text-center text-sm py-1">W</div> |
| <div class="text-center text-sm py-1">T</div> |
| <div class="text-center text-sm py-1">F</div> |
| <div class="text-center text-sm py-1">S</div> |
| </div> |
| <div class="calendar-grid"> |
| <div class="bg-gray-100 aspect-square rounded-lg"></div> |
| <div class="bg-gray-100 aspect-square rounded-lg"></div> |
| <div class="bg-gray-100 aspect-square rounded-lg"></div> |
| <div class="aspect-square rounded-lg flex items-center justify-center"> |
| <div class="bg-secondary/10 border-b-2 border-secondary w-6 h-6 rounded-md flex items-center justify-center"> |
| <span class="text-xs font-semibold">1</span> |
| </div> |
| </div> |
| <div class="bg-gradient-to-r from-primary to-secondary aspect-square rounded-lg flex items-center justify-center text-white"> |
| <span class="font-bold">2</span> |
| </div> |
| <div class="bg-white border-b-2 border-primary aspect-square rounded-lg flex items-center justify-center"> |
| <span class="text-xs font-semibold">3</span> |
| </div> |
| <div class="bg-white border-b-2 border-primary aspect-square rounded-lg flex items-center justify-center"> |
| <span class="text-xs font-semibold">4</span> |
| </div> |
| <div class="bg-white border-b-2 border-primary aspect-square rounded-lg flex items-center justify-center"> |
| <span class="text-xs font-semibold">5</span> |
| </div> |
| <div class="bg-white border-b-2 border-primary aspect-square rounded-lg flex items-center justify-center"> |
| <span class="text-xs font-semibold">6</span> |
| </div> |
| <div class="bg-gradient-to-r from-primary to-secondary aspect-square rounded-lg flex items-center justify-center text-white"> |
| <span class="font-bold">7</span> |
| </div> |
| <div class="bg-gradient-to-r from-primary to-secondary aspect-square rounded-lg flex items-center justify-center text-white"> |
| <span class="font-bold">8</span> |
| </div> |
| <div class="bg-gradient-to-r from-primary to-secondary aspect-square rounded-lg flex items-center justify-center text-white"> |
| <span class="font-bold">9</span> |
| </div> |
| <div class="bg-white border-b-2 border-primary aspect-square rounded-lg flex items-center justify-center"> |
| <span class="text-xs font-semibold">10</span> |
| </div> |
| <div class="bg-primary/10 aspect-square rounded-lg flex items-center justify-center text-primary"> |
| <span class="font-semibold">11</span> |
| </div> |
| <div class="bg-white border-b-2 border-primary aspect-square rounded-lg flex items-center justify-center"> |
| <span class="text-xs font-semibold">12</span> |
| </div> |
| <div class="bg-white border-b-2 border-primary aspect-square rounded-lg flex items-center justify-center"> |
| <span class="text-xs font-semibold">13</span> |
| </div> |
| <div class="bg-gradient-to-r from-primary to-secondary aspect-square rounded-lg flex items-center justify-center text-white"> |
| <span class="font-bold">14</span> |
| </div> |
| <div class="border-2 border-gray-300 aspect-square rounded-lg"></div> |
| <div class="border-2 border-gray-300 aspect-square rounded-lg"></div> |
| <div class="border-2 border-gray-300 aspect-square rounded-lg"></div> |
| <div class="border-2 border-gray-300 aspect-square rounded-lg"></div> |
| <div class="border-2 border-gray-300 aspect-square rounded-lg"></div> |
| <div class="border-2 border-gray-300 aspect-square rounded-lg"></div> |
| </div> |
| </div> |
| |
| <div class="flex justify-center mt-3"> |
| <div class="flex items-center mr-4"> |
| <div class="w-3 h-3 rounded-full bg-gradient-to-r from-primary to-secondary mr-1"></div> |
| <span class="text-xs">Nicotine-free</span> |
| </div> |
| <div class="flex items-center mr-4"> |
| <div class="w-3 h-3 rounded-full bg-secondary/10 border-b-2 border-secondary mr-1"></div> |
| <span class="text-xs">Mild craving</span> |
| </div> |
| <div class="flex items-center"> |
| <div class="w-3 h-3 rounded-full bg-primary/10 mr-1"></div> |
| <span class="text-xs">Strong craving</span> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="mb-8"> |
| <h3 class="font-bold text-lg mb-4 flex items-center"> |
| <i class="fas fa-book text-blue-500 mr-2"></i> Recent Journal Entry |
| </h3> |
| <div class="bg-white p-4 rounded-lg shadow-sm"> |
| <div class="flex justify-between items-center mb-3"> |
| <h4 class="font-medium">Day 14 Reflection</h4> |
| <span class="text-sm text-gray-500">Yesterday</span> |
| </div> |
| <p class="text-gray-600 mb-4 line-clamp-3"> |
| Today was challenging but rewarding. I had three strong cravings but managed to overcome them by going for a walk and drinking water. I'm noticing my sense of smell is improving already... |
| </p> |
| <div class="flex space-x-2"> |
| <button class="text-primary text-sm font-medium">Read More</button> |
| <button class="text-gray-500 text-sm font-medium">New Entry</button> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="mb-8"> |
| <h3 class="font-bold text-lg mb-4 flex items-center"> |
| <i class="fas fa-users text-green-500 mr-2"></i> Community Support |
| </h3> |
| <div class="bg-white p-4 rounded-lg shadow-sm"> |
| <div class="flex items-center mb-4"> |
| <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center mr-3"> |
| <i class="fas fa-comments text-green-500"></i> |
| </div> |
| <div> |
| <h4 class="font-medium">Connect with Others</h4> |
| <p class="text-sm text-gray-500">Join discussions and share your journey</p> |
| </div> |
| </div> |
| <div class="grid grid-cols-3 gap-2"> |
| <div class="bg-blue-50 text-blue-600 p-2 rounded text-center text-sm"> |
| <i class="fas fa-comment-dots block mb-1"></i> |
| <span>12 New</span> |
| </div> |
| <div class="bg-purple-50 text-purple-600 p-2 rounded text-center text-sm"> |
| <i class="fas fa-heart block mb-1"></i> |
| <span>8 Likes</span> |
| </div> |
| <div class="bg-green-50 text-green-600 p-2 rounded text-center text-sm"> |
| <i class="fas fa-user-friends block mb-1"></i> |
| <span>24 Online</span> |
| </div> |
| </div> |
| <button class="w-full mt-4 bg-green-100 hover:bg-green-200 text-green-700 py-2 rounded-lg text-sm font-medium transition"> |
| Join Community |
| </button> |
| </div> |
| </div> |
|
|
| |
| <div class="bg-gradient-to-r from-accent to-pink-400 text-white rounded-lg p-4 mb-8"> |
| <div class="flex justify-between items-start mb-2"> |
| <i class="fas fa-quote-left text-white/40 text-xl"></i> |
| <button class="text-white/70 hover:text-white"> |
| <i class="fas fa-sync-alt"></i> |
| </button> |
| </div> |
| <p class="font-medium mb-3">Every craving you overcome is building a healthier, stronger version of yourself.</p> |
| <div class="text-right text-white/80 text-sm">- QuitNic Team</div> |
| </div> |
| |
| </main> |
| |
| |
| <div class="fixed bottom-24 right-4 z-10"> |
| <button class="w-14 h-14 rounded-full bg-primary shadow-lg flex items-center justify-center group"> |
| <i class="fas fa-plus text-white text-2xl group-hover:rotate-90 transition-transform"></i> |
| </button> |
| </div> |
|
|
| |
| <div class="fixed bottom-40 right-4 z-10 w-64 bg-white rounded-lg shadow-xl p-4 animate-bounce"> |
| <div class="flex items-start mb-2"> |
| <div class="bg-green-100 text-green-600 w-8 h-8 rounded-full flex items-center justify-center mr-2"> |
| <i class="fas fa-heartbeat"></i> |
| </div> |
| <div> |
| <h4 class="font-medium text-sm">Health Update</h4> |
| <p class="text-xs text-gray-500">Your circulation has improved by 15% since quitting!</p> |
| </div> |
| </div> |
| <button class="text-primary text-xs font-medium">Dismiss</button> |
| </div> |
| |
| |
| <div class="fixed bottom-0 left-0 right-0 bg-white border-t"> |
| <div class="flex justify-around"> |
| <a href="#" class="flex flex-col items-center py-3 px-6 text-primary"> |
| <i class="fas fa-home text-lg mb-1"></i> |
| <span class="text-xs">Home</span> |
| </a> |
| <a href="#" class="flex flex-col items-center py-3 px-6 text-gray-500"> |
| <i class="fas fa-clipboard-list text-lg mb-1"></i> |
| <span class="text-xs">Tips</span> |
| </a> |
| <a href="#" class="flex flex-col items-center py-3 px-6 text-gray-500"> |
| <i class="fas fa-chart-line text-lg mb-1"></i> |
| <span class="text-xs">Progress</span> |
| </a> |
| <a href="#" class="flex flex-col items-center py-3 px-6 text-gray-500"> |
| <i class="fas fa-cog text-lg mb-1"></i> |
| <span class="text-xs">Settings</span> |
| </a> |
| </div> |
| </div> |
| |
| </div> |
| |
| <script> |
| document.addEventListener('DOMContentLoaded', function() { |
| |
| const navLinks = document.querySelectorAll('nav button, .fixed.bottom-0 a'); |
| navLinks.forEach(link => { |
| link.addEventListener('click', function(e) { |
| e.preventDefault(); |
| |
| navLinks.forEach(l => { |
| l.classList.remove('text-primary', 'border-primary', 'font-medium'); |
| l.classList.add('text-gray-500'); |
| }); |
| |
| this.classList.remove('text-gray-500'); |
| this.classList.add('text-primary'); |
| if(this.closest('nav')) { |
| this.classList.add('border-b-2', 'font-medium'); |
| } |
| |
| console.log(`Navigating to: ${this.querySelector('span').textContent}`); |
| }); |
| }); |
| |
| |
| const quickActions = document.querySelectorAll('.grid.grid-cols-2 a'); |
| quickActions.forEach(action => { |
| action.addEventListener('click', function(e) { |
| e.preventDefault(); |
| const actionName = this.textContent.trim(); |
| console.log(`Quick action: ${actionName}`); |
| |
| const feedback = document.createElement('div'); |
| feedback.className = 'fixed top-20 left-1/2 -translate-x-1/2 bg-green-500 text-white px-4 py-2 rounded-lg shadow-lg animate-fade-in-out'; |
| feedback.textContent = `${actionName} started!`; |
| document.body.appendChild(feedback); |
| setTimeout(() => feedback.remove(), 2000); |
| }); |
| }); |
| |
| |
| const calendarDays = document.querySelectorAll('[class*="aspect-square"]'); |
| calendarDays.forEach(day => { |
| day.addEventListener('click', function() { |
| if(this.classList.contains('border-b-2')) { |
| this.classList.remove('border-b-2', 'border-primary'); |
| this.classList.add('bg-gradient-to-r', 'from-primary', 'to-secondary', 'text-white'); |
| } else if(this.classList.contains('bg-gradient-to-r')) { |
| this.classList.remove('bg-gradient-to-r', 'from-primary', 'to-secondary', 'text-white'); |
| this.classList.add('bg-primary/10', 'text-primary'); |
| } else { |
| this.classList.add('border-b-2', 'border-primary'); |
| } |
| }); |
| }); |
| |
| |
| const fab = document.querySelector('.fixed.bottom-24 button'); |
| fab.addEventListener('click', function() { |
| console.log('FAB clicked - opening action menu'); |
| |
| }); |
| |
| |
| const dismissBtn = document.querySelector('.fixed.bottom-40 button'); |
| dismissBtn.addEventListener('click', function(e) { |
| e.preventDefault(); |
| this.closest('.fixed.bottom-40').remove(); |
| }); |
| |
| |
| setTimeout(() => { |
| document.querySelectorAll('.stat-card span')[0].textContent = '15 Days'; |
| document.querySelectorAll('.stat-card span')[1].textContent = '$132'; |
| }, 3000); |
| }); |
| </script> |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Ptwo/quitnic" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
