Spaces:
Running
Running
Make me a study habit tracker schedule, as well as for boxing and going to the gym I would to also add a study hour counter Davie “generator a daily tip, generator motivation, active motivation a little section for my Spotify account for meto put music while I study or YouTube as well as a full calendar where I can describe what I did in my day I’d like this to inform of checklist, for example, have I studied an hour checklist have I worked out checklist have I done boxing checklist have I went to church checklist I’d like it to be in a form of a checklist and very easy to use and understand I would not like to be very difficult to use. I’d like it to be very aesthetically, pleasing to the eye with popping colors and smooth transitions for it tobe very nicely presented and to have animations when I click on something like a celebrity animation when I click on a checklist, for example, and for prevention of ejaculation at the very bottom and motivational quotes, of course for me to keep going - Initial Deployment
6dac98c
verified
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Ultimate Productivity Tracker</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: '#6366f1', | |
| secondary: '#8b5cf6', | |
| accent: '#ec4899', | |
| dark: '#1e293b', | |
| light: '#f8fafc' | |
| }, | |
| animation: { | |
| 'bounce-slow': 'bounce 1.5s infinite', | |
| 'pulse-slow': 'pulse 3s infinite', | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| @keyframes checkmark { | |
| 0% { transform: scale(0); opacity: 0; } | |
| 80% { transform: scale(1.2); opacity: 0.8; } | |
| 100% { transform: scale(1); opacity: 1; } | |
| } | |
| .checkmark-animation { | |
| animation: checkmark 0.5s ease-out; | |
| } | |
| .fade-in { | |
| animation: fadeIn 0.5s ease-in; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .card-hover { | |
| transition: all 0.3s ease; | |
| } | |
| .card-hover: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); | |
| } | |
| .progress-bar { | |
| transition: width 1s ease-in-out; | |
| } | |
| .habit-item { | |
| transition: all 0.3s ease; | |
| } | |
| .habit-item:hover { | |
| background-color: rgba(99, 102, 241, 0.1); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gradient-to-br from-gray-50 to-gray-100 min-h-screen font-sans"> | |
| <div class="container mx-auto px-4 py-8 max-w-6xl"> | |
| <!-- Header --> | |
| <header class="flex flex-col md:flex-row justify-between items-center mb-8"> | |
| <div class="text-center md:text-left mb-4 md:mb-0"> | |
| <h1 class="text-3xl md:text-4xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-primary to-accent"> | |
| Ultimate Productivity Tracker | |
| </h1> | |
| <p class="text-gray-600">Your all-in-one success companion</p> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <div class="text-center bg-white p-3 rounded-xl shadow-md"> | |
| <p class="text-sm text-gray-500">Today is</p> | |
| <p id="current-date" class="font-bold text-primary"></p> | |
| </div> | |
| <div class="text-center bg-white p-3 rounded-xl shadow-md"> | |
| <p class="text-sm text-gray-500">Study Streak</p> | |
| <p class="font-bold text-secondary">3 days 🔥</p> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Grid --> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> | |
| <!-- Left Column --> | |
| <div class="lg:col-span-2 space-y-6"> | |
| <!-- Daily Checklist --> | |
| <div class="bg-white rounded-2xl shadow-lg overflow-hidden card-hover"> | |
| <div class="bg-gradient-to-r from-primary to-secondary p-4"> | |
| <h2 class="text-xl font-bold text-white">Daily Habits Checklist</h2> | |
| </div> | |
| <div class="p-4"> | |
| <div class="space-y-3"> | |
| <!-- Study Hour Counter --> | |
| <div class="habit-item flex items-center justify-between p-3 rounded-lg border border-gray-200"> | |
| <div class="flex items-center space-x-3"> | |
| <input type="checkbox" id="study-checkbox" class="w-5 h-5 rounded-full border-2 border-primary focus:ring-primary"> | |
| <label for="study-checkbox" class="font-medium">Study Session</label> | |
| </div> | |
| <div class="flex items-center space-x-2"> | |
| <button onclick="decrementStudyHours()" class="w-8 h-8 rounded-full bg-gray-200 flex items-center justify-center hover:bg-gray-300"> | |
| <i class="fas fa-minus text-gray-600"></i> | |
| </button> | |
| <span id="study-hours" class="font-bold">0</span> | |
| <span>hours</span> | |
| <button onclick="incrementStudyHours()" class="w-8 h-8 rounded-full bg-gray-200 flex items-center justify-center hover:bg-gray-300"> | |
| <i class="fas fa-plus text-gray-600"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Workout Items --> | |
| <div class="habit-item flex items-center p-3 rounded-lg border border-gray-200"> | |
| <input type="checkbox" id="gym-checkbox" class="w-5 h-5 rounded-full border-2 border-primary focus:ring-primary mr-3"> | |
| <label for="gym-checkbox" class="font-medium">Gym Workout</label> | |
| </div> | |
| <div class="habit-item flex items-center p-3 rounded-lg border border-gray-200"> | |
| <input type="checkbox" id="boxing-checkbox" class="w-5 h-5 rounded-full border-2 border-primary focus:ring-primary mr-3"> | |
| <label for="boxing-checkbox" class="font-medium">Boxing Session</label> | |
| </div> | |
| <div class="habit-item flex items-center p-3 rounded-lg border border-gray-200"> | |
| <input type="checkbox" id="church-checkbox" class="w-5 h-5 rounded-full border-2 border-primary focus:ring-primary mr-3"> | |
| <label for="church-checkbox" class="font-medium">Attend Church</label> | |
| </div> | |
| <div class="habit-item flex items-center p-3 rounded-lg border border-gray-200"> | |
| <input type="checkbox" id="meditation-checkbox" class="w-5 h-5 rounded-full border-2 border-primary focus:ring-primary mr-3"> | |
| <label for="meditation-checkbox" class="font-medium">Meditation</label> | |
| </div> | |
| <div class="habit-item flex items-center p-3 rounded-lg border border-gray-200"> | |
| <input type="checkbox" id="reading-checkbox" class="w-5 h-5 rounded-full border-2 border-primary focus:ring-primary mr-3"> | |
| <label for="reading-checkbox" class="font-medium">Read 10 Pages</label> | |
| </div> | |
| </div> | |
| <!-- Progress Bar --> | |
| <div class="mt-6"> | |
| <div class="flex justify-between mb-2"> | |
| <span class="text-sm font-medium">Daily Progress</span> | |
| <span id="progress-percentage" class="text-sm font-medium">0%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> | |
| <div id="progress-bar" class="progress-bar bg-primary h-2.5 rounded-full" style="width: 0%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Calendar Section --> | |
| <div class="bg-white rounded-2xl shadow-lg overflow-hidden card-hover"> | |
| <div class="bg-gradient-to-r from-secondary to-accent p-4"> | |
| <h2 class="text-xl font-bold text-white">Daily Journal</h2> | |
| </div> | |
| <div class="p-4"> | |
| <div class="mb-4"> | |
| <label for="calendar-date" class="block text-sm font-medium text-gray-700 mb-1">Select Date</label> | |
| <input type="date" id="calendar-date" class="w-full p-2 border border-gray-300 rounded-md focus:ring-primary focus:border-primary"> | |
| </div> | |
| <div class="mb-4"> | |
| <label for="daily-summary" class="block text-sm font-medium text-gray-700 mb-1">Today's Summary</label> | |
| <textarea id="daily-summary" rows="4" class="w-full p-3 border border-gray-300 rounded-md focus:ring-primary focus:border-primary" placeholder="What did you accomplish today? How did you feel?"></textarea> | |
| </div> | |
| <button onclick="saveJournalEntry()" class="w-full bg-primary hover:bg-primary-dark text-white py-2 px-4 rounded-md transition duration-300 flex items-center justify-center"> | |
| <i class="fas fa-save mr-2"></i> Save Entry | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Right Column --> | |
| <div class="space-y-6"> | |
| <!-- Motivation Card --> | |
| <div class="bg-white rounded-2xl shadow-lg overflow-hidden card-hover"> | |
| <div class="bg-gradient-to-r from-accent to-pink-500 p-4"> | |
| <h2 class="text-xl font-bold text-white">Daily Motivation</h2> | |
| </div> | |
| <div class="p-4"> | |
| <div id="motivation-quote" class="text-center italic text-gray-700 mb-4 fade-in"> | |
| "Success is the sum of small efforts repeated day in and day out." - Robert Collier | |
| </div> | |
| <div class="flex justify-between"> | |
| <button onclick="newMotivationalQuote()" class="bg-secondary hover:bg-secondary-dark text-white py-2 px-4 rounded-md transition duration-300 flex items-center"> | |
| <i class="fas fa-sync-alt mr-2"></i> New Quote | |
| </button> | |
| <button onclick="speakMotivation()" class="bg-gray-200 hover:bg-gray-300 text-gray-800 py-2 px-4 rounded-md transition duration-300 flex items-center"> | |
| <i class="fas fa-volume-up mr-2"></i> Speak | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Daily Tip --> | |
| <div class="bg-white rounded-2xl shadow-lg overflow-hidden card-hover"> | |
| <div class="bg-gradient-to-r from-purple-500 to-indigo-600 p-4"> | |
| <h2 class="text-xl font-bold text-white">Daily Productivity Tip</h2> | |
| </div> | |
| <div class="p-4"> | |
| <div id="daily-tip" class="fade-in"> | |
| <p class="font-medium mb-2">Pomodoro Technique:</p> | |
| <p class="text-sm text-gray-600">Study for 25 minutes, then take a 5-minute break. After four sessions, take a longer 15-30 minute break.</p> | |
| </div> | |
| <button onclick="newDailyTip()" class="mt-3 w-full bg-indigo-100 hover:bg-indigo-200 text-indigo-800 py-2 px-4 rounded-md transition duration-300 flex items-center justify-center"> | |
| <i class="fas fa-lightbulb mr-2"></i> New Tip | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Media Player --> | |
| <div class="bg-white rounded-2xl shadow-lg overflow-hidden card-hover"> | |
| <div class="bg-gradient-to-r from-blue-500 to-teal-400 p-4"> | |
| <h2 class="text-xl font-bold text-white">Focus Music</h2> | |
| </div> | |
| <div class="p-4"> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Select Platform</label> | |
| <div class="flex space-x-2"> | |
| <button onclick="setMediaPlatform('spotify')" class="flex-1 bg-green-600 hover:bg-green-700 text-white py-2 px-3 rounded-md text-sm flex items-center justify-center"> | |
| <i class="fab fa-spotify mr-2"></i> Spotify | |
| </button> | |
| <button onclick="setMediaPlatform('youtube')" class="flex-1 bg-red-600 hover:bg-red-700 text-white py-2 px-3 rounded-md text-sm flex items-center justify-center"> | |
| <i class="fab fa-youtube mr-2"></i> YouTube | |
| </button> | |
| </div> | |
| </div> | |
| <div id="media-input-section"> | |
| <label for="media-link" class="block text-sm font-medium text-gray-700 mb-1">Paste your link</label> | |
| <input type="text" id="media-link" placeholder="https://..." class="w-full p-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500 mb-2"> | |
| <button onclick="playMedia()" class="w-full bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded-md transition duration-300 flex items-center justify-center"> | |
| <i class="fas fa-play mr-2"></i> Play | |
| </button> | |
| </div> | |
| <div id="media-player" class="mt-4 hidden"> | |
| <iframe id="media-frame" class="w-full rounded-lg" height="80" frameborder="0" allowfullscreen></iframe> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Weekly Stats --> | |
| <div class="bg-white rounded-2xl shadow-lg overflow-hidden card-hover"> | |
| <div class="bg-gradient-to-r from-amber-500 to-orange-500 p-4"> | |
| <h2 class="text-xl font-bold text-white">Weekly Stats</h2> | |
| </div> | |
| <div class="p-4"> | |
| <div class="grid grid-cols-3 gap-2 text-center"> | |
| <div class="bg-amber-50 p-2 rounded-lg"> | |
| <p class="text-xs text-amber-800">Study Hours</p> | |
| <p class="font-bold text-amber-600">12.5</p> | |
| </div> | |
| <div class="bg-orange-50 p-2 rounded-lg"> | |
| <p class="text-xs text-orange-800">Workouts</p> | |
| <p class="font-bold text-orange-600">5</p> | |
| </div> | |
| <div class="bg-red-50 p-2 rounded-lg"> | |
| <p class="text-xs text-red-800">Boxing</p> | |
| <p class="font-bold text-red-600">3</p> | |
| </div> | |
| </div> | |
| <div class="mt-3"> | |
| <p class="text-sm text-gray-600 text-center">You're on track for a productive week!</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Prevention Section --> | |
| <div class="mt-8 bg-white rounded-2xl shadow-lg overflow-hidden card-hover"> | |
| <div class="bg-gradient-to-r from-rose-600 to-pink-600 p-4"> | |
| <h2 class="text-xl font-bold text-white">Discipline & Focus</h2> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex flex-col md:flex-row md:items-center md:justify-between"> | |
| <div class="mb-4 md:mb-0"> | |
| <h3 class="font-medium text-gray-800">Prevention of Ejaculation</h3> | |
| <p class="text-sm text-gray-600">Current streak: <span class="font-bold text-rose-600">7 days</span></p> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button onclick="resetStreak()" class="bg-rose-100 hover:bg-rose-200 text-rose-800 py-2 px-4 rounded-md text-sm transition duration-300 flex items-center"> | |
| <i class="fas fa-redo mr-2"></i> Reset | |
| </button> | |
| <button onclick="incrementStreak()" class="bg-green-100 hover:bg-green-200 text-green-800 py-2 px-4 rounded-md text-sm transition duration-300 flex items-center"> | |
| <i class="fas fa-plus mr-2"></i> Add Day | |
| </button> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-sm font-medium">Monthly Goal (30 days)</span> | |
| <span class="text-sm font-medium">23%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-green-500 h-2 rounded-full" style="width: 23%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Set current date | |
| const now = new Date(); | |
| document.getElementById('current-date').textContent = now.toLocaleDateString('en-US', { weekday: 'long', month: 'long', day: 'numeric' }); | |
| document.getElementById('calendar-date').valueAsDate = now; | |
| // Checkbox functionality with animations | |
| const checkboxes = document.querySelectorAll('input[type="checkbox"]'); | |
| checkboxes.forEach(checkbox => { | |
| checkbox.addEventListener('change', function() { | |
| if (this.checked) { | |
| const label = this.nextElementSibling; | |
| label.classList.add('line-through', 'text-gray-400'); | |
| // Create checkmark animation | |
| const checkmark = document.createElement('span'); | |
| checkmark.innerHTML = '<i class="fas fa-check text-green-500"></i>'; | |
| checkmark.classList.add('checkmark-animation', 'ml-2'); | |
| label.appendChild(checkmark); | |
| // Remove checkmark after animation | |
| setTimeout(() => { | |
| checkmark.remove(); | |
| }, 1000); | |
| } else { | |
| this.nextElementSibling.classList.remove('line-through', 'text-gray-400'); | |
| } | |
| updateProgress(); | |
| }); | |
| }); | |
| // Study hour counter | |
| let studyHours = 0; | |
| function incrementStudyHours() { | |
| studyHours += 0.5; | |
| document.getElementById('study-hours').textContent = studyHours; | |
| document.getElementById('study-checkbox').checked = studyHours > 0; | |
| updateProgress(); | |
| } | |
| function decrementStudyHours() { | |
| if (studyHours > 0) { | |
| studyHours -= 0.5; | |
| document.getElementById('study-hours').textContent = studyHours; | |
| document.getElementById('study-checkbox').checked = studyHours > 0; | |
| updateProgress(); | |
| } | |
| } | |
| // Progress tracking | |
| function updateProgress() { | |
| const totalHabits = 6; // Total number of checkboxes | |
| const checkedHabits = document.querySelectorAll('input[type="checkbox"]:checked').length; | |
| const progressPercentage = Math.round((checkedHabits / totalHabits) * 100); | |
| document.getElementById('progress-percentage').textContent = `${progressPercentage}%`; | |
| document.getElementById('progress-bar').style.width = `${progressPercentage}%`; | |
| // Change color based on progress | |
| if (progressPercentage < 30) { | |
| document.getElementById('progress-bar').classList.remove('bg-primary', 'bg-green-500', 'bg-yellow-500'); | |
| document.getElementById('progress-bar').classList.add('bg-red-500'); | |
| } else if (progressPercentage < 70) { | |
| document.getElementById('progress-bar').classList.remove('bg-primary', 'bg-red-500', 'bg-green-500'); | |
| document.getElementById('progress-bar').classList.add('bg-yellow-500'); | |
| } else if (progressPercentage < 100) { | |
| document.getElementById('progress-bar').classList.remove('bg-primary', 'bg-red-500', 'bg-yellow-500'); | |
| document.getElementById('progress-bar').classList.add('bg-green-500'); | |
| } else { | |
| document.getElementById('progress-bar').classList.remove('bg-red-500', 'bg-yellow-500', 'bg-green-500'); | |
| document.getElementById('progress-bar').classList.add('bg-primary'); | |
| } | |
| } | |
| // Motivational quotes | |
| const motivationalQuotes = [ | |
| "The only way to do great work is to love what you do. - Steve Jobs", | |
| "Success is not final, failure is not fatal: It is the courage to continue that counts. - Winston Churchill", | |
| "Don't watch the clock; do what it does. Keep going. - Sam Levenson", | |
| "The secret of getting ahead is getting started. - Mark Twain", | |
| "You are never too old to set another goal or to dream a new dream. - C.S. Lewis", | |
| "Believe you can and you're halfway there. - Theodore Roosevelt", | |
| "It always seems impossible until it's done. - Nelson Mandela", | |
| "Strength does not come from physical capacity. It comes from an indomitable will. - Mahatma Gandhi", | |
| "Discipline is choosing between what you want now and what you want most. - Abraham Lincoln", | |
| "The pain of discipline is far less than the pain of regret. - Unknown" | |
| ]; | |
| function newMotivationalQuote() { | |
| const quoteElement = document.getElementById('motivation-quote'); | |
| quoteElement.classList.remove('fade-in'); | |
| void quoteElement.offsetWidth; // Trigger reflow | |
| quoteElement.classList.add('fade-in'); | |
| const randomQuote = motivationalQuotes[Math.floor(Math.random() * motivationalQuotes.length)]; | |
| quoteElement.textContent = randomQuote; | |
| } | |
| function speakMotivation() { | |
| const quote = document.getElementById('motivation-quote').textContent; | |
| const utterance = new SpeechSynthesisUtterance(quote); | |
| utterance.rate = 0.9; | |
| speechSynthesis.speak(utterance); | |
| } | |
| // Daily tips | |
| const dailyTips = [ | |
| { | |
| title: "Pomodoro Technique", | |
| content: "Study for 25 minutes, then take a 5-minute break. After four sessions, take a longer 15-30 minute break." | |
| }, | |
| { | |
| title: "Active Recall", | |
| content: "Test yourself frequently instead of just re-reading material. This strengthens memory retention." | |
| }, | |
| { | |
| title: "Spaced Repetition", | |
| content: "Review material at increasing intervals to maximize long-term retention." | |
| }, | |
| { | |
| title: "Workout Timing", | |
| content: "Schedule workouts in the morning to boost energy and focus for the rest of the day." | |
| }, | |
| { | |
| title: "Hydration", | |
| content: "Drink a glass of water every hour to maintain optimal brain function during study sessions." | |
| }, | |
| { | |
| title: "Posture Check", | |
| content: "Maintain good posture while studying to reduce fatigue and increase focus." | |
| } | |
| ]; | |
| function newDailyTip() { | |
| const tipElement = document.getElementById('daily-tip'); | |
| tipElement.classList.remove('fade-in'); | |
| void tipElement.offsetWidth; // Trigger reflow | |
| tipElement.classList.add('fade-in'); | |
| const randomTip = dailyTips[Math.floor(Math.random() * dailyTips.length)]; | |
| tipElement.innerHTML = `<p class="font-medium mb-2">${randomTip.title}:</p><p class="text-sm text-gray-600">${randomTip.content}</p>`; | |
| } | |
| // Media player | |
| let currentPlatform = 'spotify'; | |
| function setMediaPlatform(platform) { | |
| currentPlatform = platform; | |
| document.getElementById('media-link').placeholder = platform === 'spotify' | |
| ? "Paste Spotify playlist link" | |
| : "Paste YouTube video/playlist link"; | |
| } | |
| function playMedia() { | |
| const mediaLink = document.getElementById('media-link').value.trim(); | |
| if (!mediaLink) return; | |
| const mediaPlayer = document.getElementById('media-player'); | |
| const mediaFrame = document.getElementById('media-frame'); | |
| if (currentPlatform === 'spotify') { | |
| // Extract Spotify ID from link | |
| let spotifyId; | |
| if (mediaLink.includes('open.spotify.com')) { | |
| const parts = mediaLink.split('/'); | |
| spotifyId = parts[parts.length - 1].split('?')[0]; | |
| } else { | |
| spotifyId = mediaLink; | |
| } | |
| mediaFrame.src = `https://open.spotify.com/embed/${spotifyId}`; | |
| mediaFrame.height = '80'; | |
| } else { // YouTube | |
| // Extract YouTube ID from various link formats | |
| let videoId = mediaLink.split('v=')[1]; | |
| if (!videoId) videoId = mediaLink.split('/').pop(); | |
| if (videoId.includes('&')) videoId = videoId.split('&')[0]; | |
| if (videoId.includes('?')) videoId = videoId.split('?')[0]; | |
| mediaFrame.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`; | |
| mediaFrame.height = '200'; | |
| } | |
| mediaPlayer.classList.remove('hidden'); | |
| } | |
| // Journal functionality | |
| function saveJournalEntry() { | |
| const date = document.getElementById('calendar-date').value; | |
| const summary = document.getElementById('daily-summary').value; | |
| if (!summary.trim()) { | |
| alert("Please enter some text for your journal entry."); | |
| return; | |
| } | |
| // In a real app, you would save this to a database | |
| console.log(`Journal entry saved for ${date}:`, summary); | |
| alert("Journal entry saved successfully!"); | |
| document.getElementById('daily-summary').value = ''; | |
| } | |
| // Streak functionality | |
| let streakDays = 7; | |
| function incrementStreak() { | |
| streakDays++; | |
| updateStreakDisplay(); | |
| } | |
| function resetStreak() { | |
| if (confirm("Are you sure you want to reset your streak?")) { | |
| streakDays = 0; | |
| updateStreakDisplay(); | |
| } | |
| } | |
| function updateStreakDisplay() { | |
| document.querySelector('.text-rose-600').textContent = `${streakDays} days`; | |
| const percentage = Math.round((streakDays / 30) * 100); | |
| document.querySelector('.bg-green-500').style.width = `${percentage}%`; | |
| document.querySelector('.text-sm.font-medium:last-child').textContent = `${percentage}%`; | |
| } | |
| // Initialize | |
| updateProgress(); | |
| </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=smartestdaddy/mysite" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |