Spaces:
Running
Running
| <html lang="en" class="dark"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>StreakTracker | Build Habits & Track Progress</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 = { | |
| darkMode: 'class', | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: { | |
| 50: '#f0f9ff', | |
| 100: '#e0f2fe', | |
| 200: '#bae6fd', | |
| 300: '#7dd3fc', | |
| 400: '#38bdf8', | |
| 500: '#0ea5e9', | |
| 600: '#0284c7', | |
| 700: '#0369a1', | |
| 800: '#075985', | |
| 900: '#0c4a6e', | |
| }, | |
| success: { | |
| 500: '#10b981', | |
| 600: '#059669', | |
| }, | |
| warning: { | |
| 500: '#f59e0b', | |
| 600: '#d97706', | |
| }, | |
| danger: { | |
| 500: '#ef4444', | |
| 600: '#dc2626', | |
| } | |
| }, | |
| animation: { | |
| 'pulse-fast': 'pulse 1s cubic-bezier(0.4, 0, 0.6, 1) infinite', | |
| 'bounce-fast': 'bounce 0.75s infinite', | |
| 'celebrate': 'celebrate 0.5s ease-out', | |
| 'confetti': 'confetti 5s linear forwards', | |
| }, | |
| keyframes: { | |
| celebrate: { | |
| '0%': { transform: 'scale(1)' }, | |
| '50%': { transform: 'scale(1.2)' }, | |
| '100%': { transform: 'scale(1)' }, | |
| }, | |
| confetti: { | |
| '0%': { transform: 'translateY(0) rotate(0deg)', opacity: '1' }, | |
| '100%': { transform: 'translateY(100vh) rotate(360deg)', opacity: '0' }, | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| .confetti { | |
| position: absolute; | |
| width: 10px; | |
| height: 10px; | |
| background-color: #f00; | |
| opacity: 0; | |
| } | |
| .streak-card:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1); | |
| } | |
| .streak-card.completed { | |
| border-left: 4px solid #10b981; | |
| } | |
| .streak-card.missed { | |
| border-left: 4px solid #ef4444; | |
| } | |
| .calendar-day.completed { | |
| background-color: #10b981; | |
| color: white; | |
| } | |
| .calendar-day.missed { | |
| background-color: #ef4444; | |
| color: white; | |
| } | |
| .calendar-day.partial { | |
| background-color: #f59e0b; | |
| color: white; | |
| } | |
| .progress-ring__circle { | |
| transition: stroke-dashoffset 0.35s; | |
| transform: rotate(-90deg); | |
| transform-origin: 50% 50%; | |
| } | |
| @keyframes float { | |
| 0% { transform: translateY(0px); } | |
| 50% { transform: translateY(-10px); } | |
| 100% { transform: translateY(0px); } | |
| } | |
| .floating { | |
| animation: float 3s ease-in-out infinite; | |
| } | |
| .task-item.completed { | |
| text-decoration: line-through; | |
| color: #9ca3af; | |
| } | |
| .streak-fire { | |
| animation: pulse-fast 2s infinite; | |
| } | |
| .milestone-badge { | |
| animation: celebrate 0.5s ease-out; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-gray-100 min-h-screen transition-colors duration-300"> | |
| <!-- Confetti container --> | |
| <div id="confetti-container" class="fixed inset-0 pointer-events-none z-50 overflow-hidden hidden"></div> | |
| <!-- Auth Modal --> | |
| <div id="auth-modal" class="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center hidden"> | |
| <div class="bg-white dark:bg-gray-800 rounded-lg p-6 w-full max-w-md"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="text-xl font-bold">Welcome to StreakTracker</h3> | |
| <button id="close-auth-modal" class="text-gray-500 hover:text-gray-700 dark:hover:text-gray-300"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="block text-sm font-medium mb-1">Email</label> | |
| <input type="email" class="w-full px-3 py-2 border rounded-lg dark:bg-gray-700 dark:border-gray-600"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium mb-1">Password</label> | |
| <input type="password" class="w-full px-3 py-2 border rounded-lg dark:bg-gray-700 dark:border-gray-600"> | |
| </div> | |
| <button class="w-full bg-primary-600 text-white py-2 rounded-lg hover:bg-primary-700 transition">Sign In</button> | |
| <p class="text-center text-sm">Don't have an account? <button class="text-primary-600 hover:underline">Sign up</button></p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Streak Details Modal --> | |
| <div id="streak-details-modal" class="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center hidden"> | |
| <div class="bg-white dark:bg-gray-800 rounded-lg p-6 w-full max-w-md"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 id="streak-modal-title" class="text-xl font-bold">Streak Details</h3> | |
| <button id="close-streak-modal" class="text-gray-500 hover:text-gray-700 dark:hover:text-gray-300"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="space-y-4"> | |
| <div class="flex items-center justify-between"> | |
| <span class="font-medium">Current Streak:</span> | |
| <span id="streak-count" class="font-bold text-primary-600">0 days</span> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <span class="font-medium">Longest Streak:</span> | |
| <span id="longest-streak" class="font-bold text-primary-600">0 days</span> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <span class="font-medium">Completion Rate:</span> | |
| <div class="flex items-center"> | |
| <div class="w-24 bg-gray-200 dark:bg-gray-700 rounded-full h-2.5 mr-2"> | |
| <div id="completion-bar" class="bg-primary-600 h-2.5 rounded-full" style="width: 0%"></div> | |
| </div> | |
| <span id="completion-rate" class="font-bold">0%</span> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="font-medium mb-2">Calendar</h4> | |
| <div id="streak-calendar" class="grid grid-cols-7 gap-1"> | |
| <!-- Calendar days will be inserted here --> | |
| </div> | |
| </div> | |
| <div class="pt-4 border-t dark:border-gray-700"> | |
| <button id="mark-completed" class="w-full bg-primary-600 text-white py-2 rounded-lg hover:bg-primary-700 transition mb-2"> | |
| Mark as Completed Today | |
| </button> | |
| <button id="delete-streak" class="w-full bg-red-600 text-white py-2 rounded-lg hover:bg-red-700 transition"> | |
| Delete Streak | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Add Streak Modal --> | |
| <div id="add-streak-modal" class="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center hidden"> | |
| <div class="bg-white dark:bg-gray-800 rounded-lg p-6 w-full max-w-md"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="text-xl font-bold">Add New Streak</h3> | |
| <button id="close-add-streak-modal" class="text-gray-500 hover:text-gray-700 dark:hover:text-gray-300"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="block text-sm font-medium mb-1">Streak Name</label> | |
| <input id="streak-name" type="text" class="w-full px-3 py-2 border rounded-lg dark:bg-gray-700 dark:border-gray-600" placeholder="e.g. Morning Run"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium mb-1">Category</label> | |
| <select id="streak-category" class="w-full px-3 py-2 border rounded-lg dark:bg-gray-700 dark:border-gray-600"> | |
| <option value="health">Health & Fitness</option> | |
| <option value="learning">Learning</option> | |
| <option value="productivity">Productivity</option> | |
| <option value="mindfulness">Mindfulness</option> | |
| <option value="creativity">Creativity</option> | |
| <option value="other">Other</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium mb-1">Color</label> | |
| <div class="flex space-x-2"> | |
| <div class="color-option bg-blue-500 w-8 h-8 rounded-full cursor-pointer border-2 border-transparent hover:border-white" data-color="blue"></div> | |
| <div class="color-option bg-green-500 w-8 h-8 rounded-full cursor-pointer border-2 border-transparent hover:border-white" data-color="green"></div> | |
| <div class="color-option bg-purple-500 w-8 h-8 rounded-full cursor-pointer border-2 border-transparent hover:border-white" data-color="purple"></div> | |
| <div class="color-option bg-yellow-500 w-8 h-8 rounded-full cursor-pointer border-2 border-transparent hover:border-white" data-color="yellow"></div> | |
| <div class="color-option bg-pink-500 w-8 h-8 rounded-full cursor-pointer border-2 border-transparent hover:border-white" data-color="pink"></div> | |
| <div class="color-option bg-indigo-500 w-8 h-8 rounded-full cursor-pointer border-2 border-transparent hover:border-white" data-color="indigo"></div> | |
| </div> | |
| <input type="hidden" id="streak-color" value="blue"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium mb-1">Reminder</label> | |
| <div class="flex items-center"> | |
| <input id="streak-reminder" type="time" class="px-3 py-2 border rounded-lg dark:bg-gray-700 dark:border-gray-600 mr-2"> | |
| <label class="inline-flex items-center cursor-pointer"> | |
| <input type="checkbox" id="enable-reminder" class="sr-only peer"> | |
| <div class="relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-primary-300 dark:peer-focus:ring-primary-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-primary-600"></div> | |
| <span class="ms-3 text-sm font-medium">Enable</span> | |
| </label> | |
| </div> | |
| </div> | |
| <div class="pt-4"> | |
| <button id="save-streak" class="w-full bg-primary-600 text-white py-2 rounded-lg hover:bg-primary-700 transition"> | |
| Create Streak | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main App Container --> | |
| <div class="container mx-auto px-4 py-8 max-w-6xl"> | |
| <!-- Header --> | |
| <header class="flex justify-between items-center mb-8"> | |
| <div class="flex items-center"> | |
| <div class="mr-3 text-primary-600"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" viewBox="0 0 20 20" fill="currentColor"> | |
| <path fill-rule="evenodd" d="M12.395 2.553a1 1 0 00-1.45-.385c-.345.23-.614.558-.822.88-.214.33-.403.713-.57 1.116-.334.804-.614 1.768-.84 2.734a31.365 31.365 0 00-.613 3.58 2.64 2.64 0 01-.945-1.067c-.328-.68-.398-1.534-.398-2.654A1 1 0 005.05 6.05 6.981 6.981 0 003 11a7 7 0 1011.95-4.95c-.592-.591-.98-.985-1.348-1.467-.363-.476-.724-1.063-1.207-2.03zM12.12 15.12A3 3 0 017 13s.879.5 2.5.5c0-1 .5-4 1.25-4.5.5 1 .786 1.293 1.371 1.879A2.99 2.99 0 01113 13a2.99 2.99 0 01-.879 2.121z" clip-rule="evenodd" /> | |
| </svg> | |
| </div> | |
| <h1 class="text-2xl font-bold">StreakTracker</h1> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <button id="toggle-theme" class="p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700"> | |
| <i class="fas fa-moon dark:hidden"></i> | |
| <i class="fas fa-sun hidden dark:inline"></i> | |
| </button> | |
| <button id="auth-button" class="px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition"> | |
| Sign In | |
| </button> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> | |
| <!-- Streaks Section --> | |
| <div class="lg:col-span-2"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h2 class="text-xl font-bold">Your Streaks</h2> | |
| <button id="add-streak" class="px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition flex items-center"> | |
| <i class="fas fa-plus mr-2"></i> Add Streak | |
| </button> | |
| </div> | |
| <div id="streaks-container" class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <!-- Streak cards will be inserted here --> | |
| <!-- Example Streak Card (will be removed when JS loads) --> | |
| <div class="streak-card bg-white dark:bg-gray-800 rounded-lg p-4 shadow-md transition-all duration-300 border-l-4 border-primary-600"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h3 class="font-bold text-lg">Morning Run</h3> | |
| <span class="text-xs px-2 py-1 bg-primary-100 dark:bg-primary-900 text-primary-800 dark:text-primary-200 rounded-full">Health</span> | |
| </div> | |
| <div class="flex items-center justify-between mb-3"> | |
| <div class="flex items-center"> | |
| <div class="relative w-12 h-12 mr-3"> | |
| <svg class="w-full h-full" viewBox="0 0 36 36"> | |
| <path | |
| d="M18 2.0845 | |
| a 15.9155 15.9155 0 0 1 0 31.831 | |
| a 15.9155 15.9155 0 0 1 0 -31.831" | |
| fill="none" | |
| stroke="#e5e7eb" | |
| stroke-width="3" | |
| /> | |
| <path | |
| d="M18 2.0845 | |
| a 15.9155 15.9155 0 0 1 0 31.831 | |
| a 15.9155 15.9155 0 0 1 0 -31.831" | |
| fill="none" | |
| stroke="#0ea5e9" | |
| stroke-width="3" | |
| stroke-dasharray="70, 100" | |
| /> | |
| </svg> | |
| <div class="absolute inset-0 flex items-center justify-center font-bold text-sm">70%</div> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-500 dark:text-gray-400">Completion</p> | |
| <p class="font-bold">7/10 days</p> | |
| </div> | |
| </div> | |
| <div class="text-center"> | |
| <p class="text-sm text-gray-500 dark:text-gray-400">Current Streak</p> | |
| <p class="font-bold text-primary-600 flex items-center justify-center"> | |
| <i class="fas fa-fire streak-fire text-yellow-500 mr-1"></i> 5 days | |
| </p> | |
| </div> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <button class="text-sm text-primary-600 hover:underline">View Details</button> | |
| <div class="flex space-x-2"> | |
| <button class="p-2 text-green-500 hover:bg-green-100 dark:hover:bg-green-900 rounded-full"> | |
| <i class="fas fa-check"></i> | |
| </button> | |
| <button class="p-2 text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-full"> | |
| <i class="fas fa-ellipsis-h"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Another Example Streak Card --> | |
| <div class="streak-card bg-white dark:bg-gray-800 rounded-lg p-4 shadow-md transition-all duration-300 border-l-4 border-green-500"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h3 class="font-bold text-lg">Meditation</h3> | |
| <span class="text-xs px-2 py-1 bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 rounded-full">Mindfulness</span> | |
| </div> | |
| <div class="flex items-center justify-between mb-3"> | |
| <div class="flex items-center"> | |
| <div class="relative w-12 h-12 mr-3"> | |
| <svg class="w-full h-full" viewBox="0 0 36 36"> | |
| <path | |
| d="M18 2.0845 | |
| a 15.9155 15.9155 0 0 1 0 31.831 | |
| a 15.9155 15.9155 0 0 1 0 -31.831" | |
| fill="none" | |
| stroke="#e5e7eb" | |
| stroke-width="3" | |
| /> | |
| <path | |
| d="M18 2.0845 | |
| a 15.9155 15.9155 0 0 1 0 31.831 | |
| a 15.9155 15.9155 0 0 1 0 -31.831" | |
| fill="none" | |
| stroke="#10b981" | |
| stroke-width="3" | |
| stroke-dasharray="90, 100" | |
| /> | |
| </svg> | |
| <div class="absolute inset-0 flex items-center justify-center font-bold text-sm">90%</div> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-500 dark:text-gray-400">Completion</p> | |
| <p class="font-bold">9/10 days</p> | |
| </div> | |
| </div> | |
| <div class="text-center"> | |
| <p class="text-sm text-gray-500 dark:text-gray-400">Current Streak</p> | |
| <p class="font-bold text-green-600 flex items-center justify-center"> | |
| <i class="fas fa-fire streak-fire text-yellow-500 mr-1"></i> 12 days | |
| </p> | |
| </div> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <button class="text-sm text-primary-600 hover:underline">View Details</button> | |
| <div class="flex space-x-2"> | |
| <button class="p-2 text-green-500 hover:bg-green-100 dark:hover:bg-green-900 rounded-full"> | |
| <i class="fas fa-check"></i> | |
| </button> | |
| <button class="p-2 text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-full"> | |
| <i class="fas fa-ellipsis-h"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Milestones Section --> | |
| <div class="mt-8"> | |
| <h2 class="text-xl font-bold mb-4">Recent Milestones</h2> | |
| <div class="bg-white dark:bg-gray-800 rounded-lg p-4 shadow-md"> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> | |
| <div class="milestone-card bg-primary-50 dark:bg-primary-900 rounded-lg p-4 flex items-center"> | |
| <div class="bg-primary-100 dark:bg-primary-800 p-3 rounded-full mr-4"> | |
| <i class="fas fa-trophy text-primary-600 dark:text-primary-300 text-xl"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-500 dark:text-gray-300">7-day streak</p> | |
| <p class="font-bold">Morning Run</p> | |
| </div> | |
| </div> | |
| <div class="milestone-card bg-green-50 dark:bg-green-900 rounded-lg p-4 flex items-center"> | |
| <div class="bg-green-100 dark:bg-green-800 p-3 rounded-full mr-4"> | |
| <i class="fas fa-medal text-green-600 dark:text-green-300 text-xl"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-500 dark:text-gray-300">30-day streak</p> | |
| <p class="font-bold">Meditation</p> | |
| </div> | |
| </div> | |
| <div class="milestone-card bg-purple-50 dark:bg-purple-900 rounded-lg p-4 flex items-center"> | |
| <div class="bg-purple-100 dark:bg-purple-800 p-3 rounded-full mr-4"> | |
| <i class="fas fa-star text-purple-600 dark:text-purple-300 text-xl"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-500 dark:text-gray-300">Perfect week</p> | |
| <p class="font-bold">Reading</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Tasks and Stats Section --> | |
| <div> | |
| <!-- Daily Stats --> | |
| <div class="bg-white dark:bg-gray-800 rounded-lg p-4 shadow-md mb-6"> | |
| <h2 class="text-xl font-bold mb-4">Today's Stats</h2> | |
| <div class="space-y-4"> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-sm font-medium">Streaks Completed</span> | |
| <span class="text-sm font-bold">2/5</span> | |
| </div> | |
| <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5"> | |
| <div class="bg-primary-600 h-2.5 rounded-full" style="width: 40%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-sm font-medium">Tasks Completed</span> | |
| <span class="text-sm font-bold">3/8</span> | |
| </div> | |
| <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5"> | |
| <div class="bg-green-500 h-2.5 rounded-full" style="width: 37.5%"></div> | |
| </div> | |
| </div> | |
| <div class="pt-4 border-t dark:border-gray-700"> | |
| <div class="flex justify-between"> | |
| <span class="font-medium">Total Active Streaks:</span> | |
| <span class="font-bold text-primary-600">5</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span class="font-medium">Longest Streak:</span> | |
| <span class="font-bold text-green-600">30 days</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Tasks --> | |
| <div class="bg-white dark:bg-gray-800 rounded-lg p-4 shadow-md"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h2 class="text-xl font-bold">Today's Tasks</h2> | |
| <button id="add-task" class="p-2 text-primary-600 hover:bg-primary-100 dark:hover:bg-primary-900 rounded-full"> | |
| <i class="fas fa-plus"></i> | |
| </button> | |
| </div> | |
| <div id="tasks-container" class="space-y-2"> | |
| <!-- Task items will be inserted here --> | |
| <!-- Example Task Item --> | |
| <div class="task-item flex items-center p-3 hover:bg-gray-50 dark:hover:bg-gray-700 rounded-lg transition"> | |
| <button class="w-5 h-5 border rounded-full mr-3 flex items-center justify-center hover:border-primary-600"> | |
| <i class="fas fa-check text-xs opacity-0"></i> | |
| </button> | |
| <div class="flex-grow"> | |
| <p>Complete project presentation</p> | |
| <p class="text-xs text-gray-500 dark:text-gray-400">Due today</p> | |
| </div> | |
| <button class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-200"> | |
| <i class="fas fa-ellipsis-h"></i> | |
| </button> | |
| </div> | |
| <!-- Completed Task Example --> | |
| <div class="task-item completed flex items-center p-3 hover:bg-gray-50 dark:hover:bg-gray-700 rounded-lg transition"> | |
| <button class="w-5 h-5 border rounded-full mr-3 flex items-center justify-center bg-green-500 border-green-500 text-white"> | |
| <i class="fas fa-check text-xs"></i> | |
| </button> | |
| <div class="flex-grow"> | |
| <p>Buy groceries</p> | |
| <p class="text-xs text-gray-500 dark:text-gray-400">Completed</p> | |
| </div> | |
| <button class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-200"> | |
| <i class="fas fa-ellipsis-h"></i> | |
| </button> | |
| </div> | |
| <!-- Another Task Example --> | |
| <div class="task-item flex items-center p-3 hover:bg-gray-50 dark:hover:bg-gray-700 rounded-lg transition"> | |
| <button class="w-5 h-5 border rounded-full mr-3 flex items-center justify-center hover:border-primary-600"> | |
| <i class="fas fa-check text-xs opacity-0"></i> | |
| </button> | |
| <div class="flex-grow"> | |
| <p>Call mom</p> | |
| <p class="text-xs text-gray-500 dark:text-gray-400">Personal</p> | |
| </div> | |
| <button class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-200"> | |
| <i class="fas fa-ellipsis-h"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Add Task Form (hidden by default) --> | |
| <div id="add-task-form" class="mt-4 hidden"> | |
| <input type="text" placeholder="Add a new task..." class="w-full px-3 py-2 border rounded-lg dark:bg-gray-700 dark:border-gray-600 mb-2"> | |
| <div class="flex justify-between"> | |
| <button id="cancel-add-task" class="px-3 py-1 text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded"> | |
| Cancel | |
| </button> | |
| <button id="save-task" class="px-3 py-1 bg-primary-600 text-white rounded hover:bg-primary-700"> | |
| Add Task | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Motivational Quote --> | |
| <div class="mt-6 bg-gradient-to-r from-primary-500 to-primary-700 text-white rounded-lg p-4 shadow-md"> | |
| <div class="flex items-center mb-2"> | |
| <i class="fas fa-quote-left text-xl opacity-50 mr-3"></i> | |
| <p class="font-medium italic">"Success is the sum of small efforts, repeated day in and day out."</p> | |
| </div> | |
| <p class="text-right text-sm opacity-80">- Robert Collier</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // DOM Elements | |
| const authModal = document.getElementById('auth-modal'); | |
| const authButton = document.getElementById('auth-button'); | |
| const closeAuthModal = document.getElementById('close-auth-modal'); | |
| const toggleTheme = document.getElementById('toggle-theme'); | |
| const streakDetailsModal = document.getElementById('streak-details-modal'); | |
| const closeStreakModal = document.getElementById('close-streak-modal'); | |
| const addStreakModal = document.getElementById('add-streak-modal'); | |
| const addStreakButton = document.getElementById('add-streak'); | |
| const closeAddStreakModal = document.getElementById('close-add-streak-modal'); | |
| const streaksContainer = document.getElementById('streaks-container'); | |
| const addTaskButton = document.getElementById('add-task'); | |
| const addTaskForm = document.getElementById('add-task-form'); | |
| const cancelAddTask = document.getElementById('cancel-add-task'); | |
| const tasksContainer = document.getElementById('tasks-container'); | |
| const confettiContainer = document.getElementById('confetti-container'); | |
| const saveStreakButton = document.getElementById('save-streak'); | |
| const colorOptions = document.querySelectorAll('.color-option'); | |
| const streakColorInput = document.getElementById('streak-color'); | |
| const markCompletedButton = document.getElementById('mark-completed'); | |
| const deleteStreakButton = document.getElementById('delete-streak'); | |
| // Sample data | |
| let streaks = [ | |
| { | |
| id: 1, | |
| name: "Morning Run", | |
| category: "health", | |
| color: "blue", | |
| currentStreak: 5, | |
| longestStreak: 7, | |
| completionRate: 70, | |
| completedToday: false, | |
| history: [true, true, true, true, true, false, false, true, true, true] | |
| }, | |
| { | |
| id: 2, | |
| name: "Meditation", | |
| category: "mindfulness", | |
| color: "green", | |
| currentStreak: 12, | |
| longestStreak: 30, | |
| completionRate: 90, | |
| completedToday: true, | |
| history: [true, true, true, true, true, true, true, true, true, true] | |
| }, | |
| { | |
| id: 3, | |
| name: "Read 30 pages", | |
| category: "learning", | |
| color: "purple", | |
| currentStreak: 3, | |
| longestStreak: 5, | |
| completionRate: 60, | |
| completedToday: false, | |
| history: [true, true, true, false, false, true, true, false, true, true] | |
| } | |
| ]; | |
| let tasks = [ | |
| { id: 1, text: "Complete project presentation", category: "work", completed: false, due: "today" }, | |
| { id: 2, text: "Buy groceries", category: "personal", completed: true }, | |
| { id: 3, text: "Call mom", category: "personal", completed: false } | |
| ]; | |
| // Current streak being viewed in modal | |
| let currentStreakView = null; | |
| // Event Listeners | |
| authButton.addEventListener('click', () => authModal.classList.remove('hidden')); | |
| closeAuthModal.addEventListener('click', () => authModal.classList.add('hidden')); | |
| toggleTheme.addEventListener('click', () => { | |
| document.documentElement.classList.toggle('dark'); | |
| localStorage.setItem('theme', document.documentElement.classList.contains('dark') ? 'dark' : 'light'); | |
| }); | |
| addStreakButton.addEventListener('click', () => addStreakModal.classList.remove('hidden')); | |
| closeAddStreakModal.addEventListener('click', () => addStreakModal.classList.add('hidden')); | |
| closeStreakModal.addEventListener('click', () => streakDetailsModal.classList.add('hidden')); | |
| addTaskButton.addEventListener('click', () => { | |
| addTaskForm.classList.remove('hidden'); | |
| addTaskButton.classList.add('hidden'); | |
| }); | |
| cancelAddTask.addEventListener('click', () => { | |
| addTaskForm.classList.add('hidden'); | |
| addTaskButton.classList.remove('hidden'); | |
| }); | |
| // Color selection for new streak | |
| colorOptions.forEach(option => { | |
| option.addEventListener('click', () => { | |
| colorOptions.forEach(opt => opt.classList.remove('border-2', 'border-white')); | |
| option.classList.add('border-2', 'border-white'); | |
| streakColorInput.value = option.dataset.color; | |
| }); | |
| }); | |
| // Save new streak | |
| saveStreakButton.addEventListener('click', () => { | |
| const name = document.getElementById('streak-name').value.trim(); | |
| const category = document.getElementById('streak-category').value; | |
| const color = streakColorInput.value; | |
| if (name) { | |
| const newStreak = { | |
| id: Date.now(), | |
| name, | |
| category, | |
| color, | |
| currentStreak: 0, | |
| longestStreak: 0, | |
| completionRate: 0, | |
| completedToday: false, | |
| history: [] | |
| }; | |
| streaks.push(newStreak); | |
| renderStreaks(); | |
| addStreakModal.classList.add('hidden'); | |
| document.getElementById('streak-name').value = ''; | |
| } | |
| }); | |
| // Mark streak as completed | |
| markCompletedButton.addEventListener('click', () => { | |
| if (currentStreakView) { | |
| const today = new Date().toDateString(); | |
| const lastCompletion = currentStreakView.history.length > 0 ? | |
| new Date(currentStreakView.history[currentStreakView.history.length - 1].date).toDateString() : null; | |
| // Check if already completed today | |
| if (currentStreakView.completedToday) { | |
| alert('You already completed this streak today!'); | |
| return; | |
| } | |
| // Update streak data | |
| currentStreakView.completedToday = true; | |
| currentStreakView.history.push({ date: new Date().toISOString(), completed: true }); | |
| // Calculate new streak count | |
| if (lastCompletion === today || | |
| (lastCompletion && isConsecutiveDay(new Date(lastCompletion), new Date(today)))) { | |
| currentStreakView.currentStreak++; | |
| } else { | |
| currentStreakView.currentStreak = 1; | |
| } | |
| // Update longest streak if needed | |
| if (currentStreakView.currentStreak > currentStreakView.longestStreak) { | |
| currentStreakView.longestStreak = currentStreakView.currentStreak; | |
| // Check for milestone and celebrate | |
| if ([7, 30, 60, 90, 100].includes(currentStreakView.longestStreak)) { | |
| createConfetti(); | |
| } | |
| } | |
| // Update completion rate | |
| const completedCount = currentStreakView.history.filter(h => h.completed).length; | |
| currentStreakView.completionRate = Math.round((completedCount / currentStreakView.history.length) * 100) || 0; | |
| // Update UI | |
| renderStreaks(); | |
| renderStreakDetails(currentStreakView); | |
| // Show celebration for completing today | |
| createConfetti(); | |
| } | |
| }); | |
| // Delete streak | |
| deleteStreakButton.addEventListener('click', () => { | |
| if (currentStreakView && confirm('Are you sure you want to delete this streak?')) { | |
| streaks = streaks.filter(s => s.id !== currentStreakView.id); | |
| streakDetailsModal.classList.add('hidden'); | |
| renderStreaks(); | |
| } | |
| }); | |
| // Helper function to check consecutive days | |
| function isConsecutiveDay(prevDate, currentDate) { | |
| const oneDay = 24 * 60 * 60 * 1000; // hours*minutes*seconds*milliseconds | |
| return Math.abs(currentDate - prevDate) <= oneDay; | |
| } | |
| // Render all streaks | |
| function renderStreaks() { | |
| // Clear existing streaks (except the examples which we'll remove) | |
| streaksContainer.innerHTML = ''; | |
| // Sort streaks by completion status (completed today first) | |
| const sortedStreaks = [...streaks].sort((a, b) => { | |
| if (a.completedToday && !b.completedToday) return -1; | |
| if (!a.completedToday && b.completedToday) return 1; | |
| return 0; | |
| }); | |
| sortedStreaks.forEach(streak => { | |
| const streakCard = document.createElement('div'); | |
| streakCard.className = `streak-card bg-white dark:bg-gray-800 rounded-lg p-4 shadow-md transition-all duration-300 border-l-4 border-${streak.color}-500 ${streak.completedToday ? 'completed' : ''}`; | |
| // Category badge color mapping | |
| const categoryColors = { | |
| health: 'bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200', | |
| mindfulness: 'bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200', | |
| learning: 'bg-purple-100 dark:bg-purple-900 text-purple-800 dark:text-purple-200', | |
| productivity: 'bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200', | |
| creativity: 'bg-pink-100 dark:bg-pink-900 text-pink-800 dark:text-pink-200', | |
| other: 'bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200' | |
| }; | |
| // Category display names | |
| const categoryNames = { | |
| health: 'Health', | |
| mindfulness: 'Mindfulness', | |
| learning: 'Learning', | |
| productivity: 'Productivity', | |
| creativity: 'Creativity', | |
| other: 'Other' | |
| }; | |
| streakCard.innerHTML = ` | |
| <div class="flex justify-between items-start mb-2"> | |
| <h3 class="font-bold text-lg">${streak.name}</h3> | |
| <span class="text-xs px-2 py-1 ${categoryColors[streak.category]} rounded-full">${categoryNames[streak.category]}</span> | |
| </div> | |
| <div class="flex items-center justify-between mb-3"> | |
| <div class="flex items-center"> | |
| <div class="relative w-12 h-12 mr-3"> | |
| <svg class="w-full h-full" viewBox="0 0 36 36"> | |
| <path | |
| d="M18 2.0845 | |
| a 15.9155 15.9155 0 0 1 0 31.831 | |
| a 15.9155 15.9155 0 0 1 0 -31.831" | |
| fill="none" | |
| stroke="#e5e7eb" | |
| stroke-width="3" | |
| /> | |
| <path | |
| d="M18 2.0845 | |
| a 15.9155 15.9155 0 0 1 0 31.831 | |
| a 15.9155 15.9155 0 0 1 0 -31.831" | |
| fill="none" | |
| stroke="currentColor" | |
| stroke-width="3" | |
| stroke-dasharray="${streak.completionRate}, 100" | |
| /> | |
| </svg> | |
| <div class="absolute inset-0 flex items-center justify-center font-bold text-sm">${streak.completionRate}%</div> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-500 dark:text-gray-400">Completion</p> | |
| <p class="font-bold">${streak.history.filter(h => h.completed).length}/${streak.history.length || 1} days</p> | |
| </div> | |
| </div> | |
| <div class="text-center"> | |
| <p class="text-sm text-gray-500 dark:text-gray-400">Current Streak</p> | |
| <p class="font-bold text-${streak.color}-600 flex items-center justify-center"> | |
| ${streak.currentStreak > 0 ? `<i class="fas fa-fire streak-fire text-yellow-500 mr-1"></i> ${streak.currentStreak} days` : 'No streak yet'} | |
| </p> | |
| </div> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <button class="view-details text-sm text-primary-600 hover:underline" data-id="${streak.id}">View Details</button> | |
| <div class="flex space-x-2"> | |
| <button class="complete-streak p-2 ${streak.completedToday ? 'text-green-500' : 'text-gray-400'} hover:bg-green-100 dark:hover:bg-green-900 rounded-full" data-id="${streak.id}"> | |
| <i class="fas fa-check"></i> | |
| </button> | |
| <button class="p-2 text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-full"> | |
| <i class="fas fa-ellipsis-h"></i> | |
| </button> | |
| </div> | |
| </div> | |
| `; | |
| // Set the progress circle color | |
| const progressCircle = streakCard.querySelector('svg path:last-child'); | |
| progressCircle.style.stroke = getComputedStyle(document.documentElement).getPropertyValue(`--color-${streak.color}-500`) || `#${streak.color}`; | |
| streaksContainer.appendChild(streakCard); | |
| // Add event listeners to the buttons we just created | |
| streakCard.querySelector('.view-details').addEventListener('click', () => { | |
| currentStreakView = streak; | |
| renderStreakDetails(streak); | |
| streakDetailsModal.classList.remove('hidden'); | |
| }); | |
| streakCard.querySelector('.complete-streak').addEventListener('click', (e) => { | |
| e.stopPropagation(); | |
| currentStreakView = streak; | |
| if (streak.completedToday) { | |
| alert('You already completed this streak today!'); | |
| return; | |
| } | |
| // Update streak data | |
| streak.completedToday = true; | |
| streak.history.push({ date: new Date().toISOString(), completed: true }); | |
| // Calculate new streak count | |
| const today = new Date().toDateString(); | |
| const lastCompletion = streak.history.length > 1 ? | |
| new Date(streak.history[streak.history.length - 2].date).toDateString() : null; | |
| if (lastCompletion === today || | |
| (lastCompletion && isConsecutiveDay(new Date(lastCompletion), new Date(today)))) { | |
| streak.currentStreak++; | |
| } else { | |
| streak.currentStreak = 1; | |
| } | |
| // Update longest streak if needed | |
| if (streak.currentStreak > streak.longestStreak) { | |
| streak.longestStreak = streak.currentStreak; | |
| // Check for milestone and celebrate | |
| if ([7, 30, 60, 90, 100].includes(streak.longestStreak)) { | |
| createConfetti(); | |
| } | |
| } | |
| // Update completion rate | |
| const completedCount = streak.history.filter(h => h.completed).length; | |
| streak.completionRate = Math.round((completedCount / streak.history.length) * 100) || 0; | |
| // Update UI | |
| renderStreaks(); | |
| // Show celebration for completing today | |
| createConfetti(); | |
| }); | |
| }); | |
| } | |
| // Render streak details in modal | |
| function renderStreakDetails(streak) { | |
| document.getElementById('streak-modal-title').textContent = streak.name; | |
| document.getElementById('streak-count').textContent = `${streak.currentStreak} days`; | |
| document.getElementById('longest-streak').textContent = `${streak.longestStreak} days`; | |
| document.getElementById('completion-rate').textContent = `${streak.completionRate}%`; | |
| document.getElementById('completion-bar').style.width = `${streak.completionRate}%`; | |
| // Update mark completed button | |
| markCompletedButton.disabled = streak.completedToday; | |
| markCompletedButton.textContent = streak.completedToday ? 'Already Completed Today' : 'Mark as Completed Today'; | |
| markCompletedButton.className = streak.completedToday ? | |
| 'w-full bg-gray-300 text-gray-700 py-2 rounded-lg cursor-not-allowed' : | |
| 'w-full bg-primary-600 text-white py-2 rounded-lg hover:bg-primary-700 transition mb-2'; | |
| // Render calendar | |
| const calendarEl = document.getElementById('streak-calendar'); | |
| calendarEl.innerHTML = ''; | |
| // Get last 30 days | |
| const days = []; | |
| for (let i = 29; i >= 0; i--) { | |
| const date = new Date(); | |
| date.setDate(date.getDate() - i); | |
| days.push(date); | |
| } | |
| // Fill calendar with days | |
| days.forEach(day => { | |
| const dayEl = document.createElement('div'); | |
| dayEl.className = 'calendar-day text-xs text-center p-1 rounded'; | |
| // Check if this day is in streak history | |
| const dayStr = day.toISOString().split('T')[0]; | |
| const historyItem = streak.history.find(h => h.date.includes(dayStr)); | |
| if (historyItem) { | |
| dayEl.classList.add(historyItem.completed ? 'completed' : 'missed'); | |
| } | |
| dayEl.textContent = day.getDate(); | |
| calendarEl.appendChild(dayEl); | |
| }); | |
| } | |
| // Render tasks | |
| function renderTasks() { | |
| tasksContainer.innerHTML = ''; | |
| tasks.forEach(task => { | |
| const taskEl = document.createElement('div'); | |
| taskEl.className = `task-item flex items-center p-3 hover:bg-gray-50 dark:hover:bg-gray-700 rounded-lg transition ${task.completed ? 'completed' : ''}`; | |
| taskEl.innerHTML = ` | |
| <button class="complete-task w-5 h-5 border rounded-full mr-3 flex items-center justify-center ${task.completed ? 'bg-green-500 border-green-500 text-white' : 'hover:border-primary-600'}" data-id="${task.id}"> | |
| <i class="fas fa-check text-xs ${task.completed ? '' : 'opacity-0'}"></i> | |
| </button> | |
| <div class="flex-grow"> | |
| <p>${task.text}</p> | |
| ${task.due ? `<p class="text-xs text-gray-500 dark:text-gray-400">${task.due}</p>` : ''} | |
| </div> | |
| <button class="delete-task text-gray-400 hover:text-gray-600 dark:hover:text-gray-200" data-id="${task.id}"> | |
| <i class="fas fa-ellipsis-h"></i> | |
| </button> | |
| `; | |
| tasksContainer.appendChild(taskEl); | |
| // Add event listeners | |
| taskEl.querySelector('.complete-task').addEventListener('click', () => { | |
| task.completed = !task.completed; | |
| renderTasks(); | |
| if (task.completed) { | |
| // Small celebration for completing a task | |
| setTimeout(() => { | |
| taskEl.querySelector('.complete-task').classList.add('animate-bounce'); | |
| setTimeout(() => { | |
| taskEl.querySelector('.complete-task').classList.remove('animate-bounce'); | |
| }, 1000); | |
| }, 100); | |
| } | |
| }); | |
| taskEl.querySelector('.delete-task').addEventListener('click', () => { | |
| if (confirm('Delete this task?')) { | |
| tasks = tasks.filter(t => t.id !== task.id); | |
| renderTasks(); | |
| } | |
| }); | |
| }); | |
| } | |
| // Create confetti celebration | |
| function createConfetti() { | |
| confettiContainer.innerHTML = ''; | |
| confettiContainer.classList.remove('hidden'); | |
| const colors = ['#f87171', '#60a5fa', '#34d399', '#fbbf24', '#a78bfa', '#f472b6']; | |
| for (let i = 0; i < 50; i++) { | |
| const confetti = document.createElement('div'); | |
| confetti.className = 'confetti'; | |
| confetti.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)]; | |
| confetti.style.left = `${Math.random() * 100}%`; | |
| confetti.style.top = `${Math.random() * 100}%`; | |
| confetti.style.transform = `rotate(${Math.random() * 360}deg)`; | |
| confetti.style.width = `${Math.random() * 10 + 5}px`; | |
| confetti.style.height = `${Math.random() * 10 + 5}px`; | |
| confetti.style.animation = `confetti ${Math.random() * 3 + 2}s linear forwards`; | |
| confetti.style.animationDelay = `${Math.random() * 0.5}s`; | |
| confettiContainer.appendChild(confetti); | |
| } | |
| setTimeout(() => { | |
| confettiContainer.classList.add('hidden'); | |
| }, 5000); | |
| } | |
| // Save task | |
| document.getElementById('save-task').addEventListener('click', () => { | |
| const taskInput = document.querySelector('#add-task-form input'); | |
| const text = taskInput.value.trim(); | |
| if (text) { | |
| tasks.push({ | |
| id: Date.now(), | |
| text, | |
| completed: false | |
| }); | |
| renderTasks(); | |
| taskInput.value = ''; | |
| addTaskForm.classList.add('hidden'); | |
| addTaskButton.classList.remove('hidden'); | |
| } | |
| }); | |
| // Initialize | |
| function init() { | |
| // Check for saved theme preference | |
| if (localStorage.getItem('theme') === 'dark' || | |
| (!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches)) { | |
| document.documentElement.classList.add('dark'); | |
| } else { | |
| document.documentElement.classList.remove('dark'); | |
| } | |
| // Render initial data | |
| renderStreaks(); | |
| renderTasks(); | |
| // Remove example streaks (if any) | |
| setTimeout(() => { | |
| const exampleStreaks = document.querySelectorAll('.streak-card'); | |
| exampleStreaks.forEach(el => { | |
| if (!el.hasAttribute('data-id')) { | |
| el.remove(); | |
| } | |
| }); | |
| }, 100); | |
| } | |
| // Start the app | |
| init(); | |
| </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=kaushikkadari/streaktracker" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |