JIYAJAIN30 · tejask011 · May 20, 2026 · Jun 5, 2026
diff --git a/index.html b/index.html
@@ -1,29 +1,47 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <title>Productivity Tracker</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Zen Mode - Productivity Tracker</title>
     <link rel="stylesheet" href="style.css">
 </head>
 <body>
 
     <div class="container">
-        <h1>📚 Productivity Tracker</h1>
+        <div id="zenStatus" class="zen-badge">
+            <span class="zen-dot"></span>
+            <span id="zenText">Zen Idle</span>
+        </div>
+
+        <h1>Productivity Tracker</h1>
 
-        <!-- Task Input -->
-        <input type="text" id="taskInput" placeholder="Enter your task">
-        <button onclick="addTask()">Add</button>
+        <div class="task-input-container">
+            <input type="text" id="taskInput" placeholder="Enter your task" onkeydown="if(event.key === 'Enter') addTask()">
+            <select id="taskPriority" title="Select Priority">
+                <option value="High">High</option>
+                <option value="Medium" selected>Medium</option>
+                <option value="Low">Low</option>
+            </select>
+            <button onclick="addTask()">Add</button>
+        </div>
 
-        <!-- Task List -->
         <ul id="taskList"></ul>
 
-        <!-- Progress -->
         <h3 id="progress">Progress: 0% (0/0 tasks completed)</h3>
 
-        <!-- Timer -->
         <div class="timer">
-            <h2 id="time">00:00:00</h2>
-            <button onclick="startTimer()">Start</button>
-            <button onclick="stopTimer()">Stop</button>
+            <div class="timer-presets">
+                <button onclick="setTimerPreset(25)" class="preset-btn">Focus (25m)</button>
+                <button onclick="setTimerPreset(5)" class="preset-btn">Break (5m)</button>
+                <button onclick="setCustomPreset()" class="preset-btn">Custom</button>
+            </div>
+
+            <h2 id="time">25:00</h2>
+
+            <button onclick="startTimer()" class="start-btn">Start</button>
+            <button onclick="stopTimer()" class="stop-btn">Stop</button>
+            <button onclick="resetTimer()" class="reset-btn">Reset</button>
         </div>
     </div>
 

diff --git a/script.js b/script.js
@@ -1,100 +1,161 @@
 let tasks = [];
 
-// ➤ Add Task
 function addTask() {
     let input = document.getElementById("taskInput");
     let taskText = input.value.trim();
-
     if (taskText === "") return;
 
-    tasks.push({ text: taskText, done: false });
+    if (tasks.some(t => t.text.toLowerCase() === taskText.toLowerCase())) {
+        alert("This task already exists!");
+        return;
+    }
+
+    tasks.push({ text: taskText, done: false, priority: document.getElementById("taskPriority").value });
     input.value = "";
     renderTasks();
 }
 
-// ➤ Render Tasks
 function renderTasks() {
     let list = document.getElementById("taskList");
     list.innerHTML = "";
 
+    const weight = { 'High': 3, 'Medium': 2, 'Low': 1 };
+    tasks.sort((a, b) => {
+        if (a.done !== b.done) return a.done - b.done;
+        return (weight[b.priority] || 2) - (weight[a.priority] || 2);
+    });
+
     tasks.forEach((task, index) => {
         let li = document.createElement("li");
-
         li.innerHTML = `
-            ${task.text}
-            <button onclick="toggleTask(${index})">✔</button>
-            <button onclick="deleteTask(${index})">❌</button>
+            <div>
+                <span>${task.text}</span>
+                <span class="priority-badge ${task.priority.toLowerCase()}">${task.priority}</span>
+            </div>
+            <div>
+                <button onclick="toggleTask(${index})">✓</button>
+                <button onclick="deleteTask(${index})">×</button>
+            </div>
         `;
-
         if (task.done) {
             li.style.textDecoration = "line-through";
             li.style.color = "gray";
         }
-
         list.appendChild(li);
     });
 
     updateProgress();
+    localStorage.setItem("tasks", JSON.stringify(tasks));
 }
 
-// ➤ Toggle Task
 function toggleTask(index) {
     tasks[index].done = !tasks[index].done;
     renderTasks();
 }
 
-// ➤ Delete Task
 function deleteTask(index) {
     tasks.splice(index, 1);
     renderTasks();
 }
 
-// ➤ Progress Calculation
 function updateProgress() {
     let total = tasks.length;
-
     if (total === 0) {
-        document.getElementById("progress").innerText =
-            "Progress: 0% (0/0 tasks completed)";
+        document.getElementById("progress").innerText = "Progress: 0% (0/0 tasks completed)";
         return;
     }
-
-    let doneTasks = tasks.filter(task => task.done).length;
-    let percent = Math.round((doneTasks / total) * 100);
-
-    document.getElementById("progress").innerText =
-        `Progress: ${percent}% (${doneTasks}/${total} tasks completed)`;
+    let done = tasks.filter(t => t.done).length;
+    document.getElementById("progress").innerText = `Progress: ${Math.round((done / total) * 100)}% (${done}/${total} tasks completed)`;
 }
 
-
-
-// ⏱️ Timer
-let seconds = 0;
+let seconds = 1500;
+let currentPresetMins = 25;
 let timer = null;
 
 function startTimer() {
-    if (timer !== null) return; // prevent multiple timers
+    if (timer !== null) return;
+
+    const badge = document.getElementById("zenStatus");
+    if (badge) {
+        badge.classList.add("active");
+        document.getElementById("zenText").innerText = "Zen Active";
+    }
 
     timer = setInterval(() => {
-        seconds++;
-        updateTime();
+        if (seconds > 0) {
+            seconds--;
+            updateTime();
+            if (seconds === 0) {
+                stopTimer();
+                alert("Time is up! Focus session completed.");
+            }
+        } else {
+            seconds++;
+            updateTime();
+        }
     }, 1000);
 }
 
 function stopTimer() {
     clearInterval(timer);
     timer = null;
+
+    const badge = document.getElementById("zenStatus");
+    if (badge) {
+        badge.classList.remove("active");
+        document.getElementById("zenText").innerText = "Zen Idle";
+    }
 }
 
 function updateTime() {
     let hrs = Math.floor(seconds / 3600);
     let mins = Math.floor((seconds % 3600) / 60);
     let secs = seconds % 60;
+    document.getElementById("time").innerText = hrs > 0 ? 
+        `${pad(hrs)}:${pad(mins)}:${pad(secs)}` : `${pad(mins)}:${pad(secs)}`;
+}
+
+function pad(num) { return num < 10 ? "0" + num : num; }
+
+function resetTimer() {
+    stopTimer();
+    seconds = currentPresetMins * 60;
+    updateTime();
+}
+
+function setTimerPreset(mins) {
+    stopTimer();
+    currentPresetMins = mins;
+    seconds = mins * 60;
+    updateTime();
+}
 
-    document.getElementById("time").innerText =
-        `${pad(hrs)}:${pad(mins)}:${pad(secs)}`;
+function setCustomPreset() {
+    let mins = prompt("Enter custom duration in minutes:", currentPresetMins);
+    if (mins === null) return;
+    let val = parseInt(mins, 10);
+    if (isNaN(val) || val <= 0) {
+        alert("Please enter a valid positive number!");
+        return;
+    }
+    setTimerPreset(val);
 }
 
-function pad(num) {
-    return num < 10 ? "0" + num : num;
-}
+document.addEventListener("visibilitychange", () => {
+    if (document.hidden && timer !== null) {
+        document.title = "Return to Zen Mode...";
+    } else {
+        document.title = "Zen Mode - Productivity Tracker";
+        if (timer !== null) {
+            alert("Welcome back to your Zen session! Keep focusing and avoid distractions.");
+        }
+    }
+});
+
+const savedTasks = localStorage.getItem("tasks");
+if (savedTasks) {
+    tasks = JSON.parse(savedTasks);
+    tasks.forEach(t => { if (!t.priority) t.priority = 'Medium'; });
+    renderTasks();
+}
+updateTime();