Spaces:
Running
Running
File size: 8,683 Bytes
8bdcead 88f2d7b f5fd69a 88f2d7b 8bdcead f5fd69a 8bdcead | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Productivity Tracker</title>
<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.iife.min.js"></script>
<script src="https://unpkg.com/feather-icons"></script>
<style>
.task-card {
transition: all 0.3s ease;
}
.task-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
}
.timer-display {
font-family: 'Courier New', monospace;
}
</style>
</head>
<body class="bg-gray-50 min-h-screen">
<div class="container mx-auto px-4 py-8">
<!-- Header -->
<header class="flex justify-between items-center mb-10">
<h1 class="text-3xl font-bold text-gray-800">Productivity Tracker</h1>
<nav>
<ul class="flex space-x-6">
<li><a href="index.html" class="text-gray-600 hover:text-gray-900">Home</a></li>
<li><a href="todo.html" class="text-gray-600 hover:text-gray-900">Todo</a></li>
</ul>
</nav>
</header>
<!-- Main Content -->
<main>
<!-- Timer Section -->
<section class="bg-white rounded-xl shadow-md p-6 mb-8">
<h2 class="text-2xl font-semibold mb-4">Task Timer</h2>
<div class="flex flex-col md:flex-row items-center justify-between">
<div class="timer-display text-5xl font-bold text-gray-800 mb-4 md:mb-0">
<span id="minutes">00</span>:<span id="seconds">00</span>
</div>
<div class="flex space-x-4">
<button id="startBtn" class="bg-green-500 hover:bg-green-600 text-white px-6 py-3 rounded-lg font-medium transition">
Start
</button>
<button id="pauseBtn" class="bg-yellow-500 hover:bg-yellow-600 text-white px-6 py-3 rounded-lg font-medium transition hidden">
Pause
</button>
<button id="resetBtn" class="bg-red-500 hover:bg-red-600 text-white px-6 py-3 rounded-lg font-medium transition">
Reset
</button>
</div>
</div>
</section>
<!-- Daily Missions -->
<section class="bg-white rounded-xl shadow-md p-6 mb-8">
<h2 class="text-2xl font-semibold mb-4">Daily Missions</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<!-- Mission 1 -->
<div class="task-card bg-blue-50 border border-blue-200 rounded-lg p-4">
<div class="flex justify-between items-start">
<h3 class="font-medium text-gray-800">Morning Routine</h3>
<span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">5 tasks</span>
</div>
<p class="text-sm text-gray-600 mt-2">Complete your morning routine efficiently</p>
<div class="mt-3 flex justify-between items-center">
<span class="text-sm text-gray-500">Target: 30 min</span>
<button class="text-blue-600 hover:text-blue-800 text-sm font-medium">Track</button>
</div>
</div>
<!-- Mission 2 -->
<div class="task-card bg-green-50 border border-green-200 rounded-lg p-4">
<div class="flex justify-between items-start">
<h3 class="font-medium text-gray-800">Work Focus Session</h3>
<span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded">3 tasks</span>
</div>
<p class="text-sm text-gray-600 mt-2">Deep work session without distractions</p>
<div class="mt-3 flex justify-between items-center">
<span class="text-sm text-gray-500">Target: 90 min</span>
<button class="text-green-600 hover:text-green-800 text-sm font-medium">Track</button>
</div>
</div>
<!-- Mission 3 -->
<div class="task-card bg-purple-50 border border-purple-200 rounded-lg p-4">
<div class="flex justify-between items-start">
<h3 class="font-medium text-gray-800">Evening Reflection</h3>
<span class="bg-purple-100 text-purple-800 text-xs px-2 py-1 rounded">2 tasks</span>
</div>
<p class="text-sm text-gray-600 mt-2">Reflect on your day and plan tomorrow</p>
<div class="mt-3 flex justify-between items-center">
<span class="text-sm text-gray-500">Target: 20 min</span>
<button class="text-purple-600 hover:text-purple-800 text-sm font-medium">Track</button>
</div>
</div>
</div>
</section>
<!-- Journal Section -->
<section class="bg-white rounded-xl shadow-md p-6">
<h2 class="text-2xl font-semibold mb-4">Daily Journal</h2>
<div class="mb-4">
<label for="journalEntry" class="block text-sm font-medium text-gray-700 mb-2">What did you accomplish today?</label>
<textarea id="journalEntry" rows="4" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Write your thoughts here..."></textarea>
</div>
<div class="flex justify-end">
<button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg font-medium transition">Save Entry</button>
</div>
</section>
</main>
<!-- Footer -->
<footer class="mt-12 text-center text-gray-500 text-sm">
<p>© 2023 Productivity Tracker. All rights reserved.</p>
</footer>
</div>
<script>
// Timer functionality
let timerInterval;
let totalSeconds = 0;
let isRunning = false;
const minutesElement = document.getElementById('minutes');
const secondsElement = document.getElementById('seconds');
const startBtn = document.getElementById('startBtn');
const pauseBtn = document.getElementById('pauseBtn');
const resetBtn = document.getElementById('resetBtn');
function updateTimerDisplay() {
const minutes = Math.floor(totalSeconds / 60);
const seconds = totalSeconds % 60;
minutesElement.textContent = minutes.toString().padStart(2, '0');
secondsElement.textContent = seconds.toString().padStart(2, '0');
}
function startTimer() {
if (!isRunning) {
isRunning = true;
startBtn.classList.add('hidden');
pauseBtn.classList.remove('hidden');
timerInterval = setInterval(() => {
totalSeconds++;
updateTimerDisplay();
}, 1000);
}
}
function pauseTimer() {
if (isRunning) {
isRunning = false;
clearInterval(timerInterval);
startBtn.classList.remove('hidden');
pauseBtn.classList.add('hidden');
}
}
function resetTimer() {
pauseTimer();
totalSeconds = 0;
updateTimerDisplay();
startBtn.classList.remove('hidden');
pauseBtn.classList.add('hidden');
}
startBtn.addEventListener('click', startTimer);
pauseBtn.addEventListener('click', pauseTimer);
resetBtn.addEventListener('click', resetTimer);
// Initialize timer display
updateTimerDisplay();
// Feather icons
feather.replace();
</script>
</body>
</html> |