|
|
<!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> |
