From a90fe4458cea8325b4356a234ef6ce4fc674a2c7 Mon Sep 17 00:00:00 2001
From: vinaysathwik-ai <vinaysathwik.m@gmail.com>
Date: Sun, 24 May 2026 15:01:01 +0530
Subject: [PATCH] feat: Add fullscreen focus session support.

---
 css/index.css | 156 ++++++++++++++++++++++++++++++++++++++++++++++++++
 index.html    |  25 ++++++++
 js/app.js     | 106 ++++++++++++++++++++++++++++++++++
 3 files changed, 287 insertions(+)

diff --git a/css/index.css b/css/index.css
index f5561bd..66192ed 100644
--- a/css/index.css
+++ b/css/index.css
@@ -4966,3 +4966,159 @@ body {
 @keyframes slideDown {
   to { opacity: 0; transform: translateY(10px); }
 }
+
+/* Focus Mode Enhancement Styles */
+.focus-warning-banner {
+  background-color: rgba(245, 158, 11, 0.1);
+  border: 1px solid var(--color-text-warning, #f59e0b);
+  border-radius: var(--border-radius-md, 8px);
+  padding: 12px 16px;
+  color: var(--color-text-warning, #f59e0b);
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  max-width: 600px;
+  margin: 0 auto 16px auto;
+  box-sizing: border-box;
+  animation: bannerSlideDown 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.warning-banner-icon {
+  font-size: 16px;
+  flex-shrink: 0;
+}
+
+.warning-banner-text {
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 1.4;
+  flex: 1;
+}
+
+.warning-banner-close {
+  background: none;
+  border: none;
+  color: inherit;
+  font-size: 20px;
+  cursor: pointer;
+  padding: 0 4px;
+  line-height: 1;
+  opacity: 0.8;
+  transition: opacity 0.2s;
+}
+
+.warning-banner-close:hover {
+  opacity: 1;
+}
+
+.focus-stats-row {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  padding: 8px 16px;
+  background: rgba(239, 68, 68, 0.08);
+  border: 1px dashed var(--color-text-danger, #ef4444);
+  border-radius: var(--border-radius-sm, 6px);
+  margin-top: -8px;
+  animation: bannerFadeIn 0.3s ease-out;
+}
+
+.focus-stat-label {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--color-text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.focus-stat-value {
+  font-size: 14px;
+  font-weight: 700;
+  color: var(--color-text-danger, #ef4444);
+}
+
+.focus-options-row {
+  display: flex;
+  gap: 16px;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  max-width: 600px;
+  margin-top: 4px;
+}
+
+.focus-option-toggle {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--color-text-secondary);
+  cursor: pointer;
+  user-select: none;
+}
+
+.focus-option-toggle input[type="checkbox"] {
+  cursor: pointer;
+  accent-color: var(--color-text-primary);
+  width: 14px;
+  height: 14px;
+  margin: 0;
+}
+
+#fullscreen-toggle-btn {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  padding: 6px 12px;
+  background: var(--color-background-secondary);
+  border: 1px solid var(--color-border-secondary);
+  color: var(--color-text-primary);
+  cursor: pointer;
+  border-radius: var(--border-radius-md, 8px);
+  transition: all 0.2s ease;
+}
+
+#fullscreen-toggle-btn:hover {
+  background: var(--color-border-tertiary);
+  border-color: var(--color-text-secondary);
+}
+
+/* Fullscreen customization */
+#focus-section:fullscreen {
+  padding: 40px;
+  background: var(--color-background-primary);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  overflow-y: auto;
+}
+
+#focus-section:fullscreen .focus-dashboard,
+#focus-section:fullscreen .focus-task-selector {
+  max-width: 600px;
+  width: 100%;
+}
+
+@keyframes bannerSlideDown {
+  from {
+    transform: translateY(-10px);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+@keyframes bannerFadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
diff --git a/index.html b/index.html
index 3333d17..f65df09 100644
--- a/index.html
+++ b/index.html
@@ -159,6 +159,11 @@ <h1 class="site-title">StudyPlan</h1>
 
       <!-- Focus Mode -->
       <div id="focus-section" class="focus-section hidden">
+        <div id="focus-warning-banner" class="focus-warning-banner hidden">
+          <span class="warning-banner-icon">⚠</span>
+          <span class="warning-banner-text">Focus lost! Please stay on this screen to complete your session.</span>
+          <button id="focus-warning-close" class="warning-banner-close" aria-label="Close warning">&times;</button>
+        </div>
         <div class="focus-dashboard">
           <div class="timer-container">
             <svg class="timer-svg" viewBox="0 0 100 100">
@@ -172,10 +177,30 @@ <h1 class="site-title">StudyPlan</h1>
             </svg>
             <div id="timer-text" class="timer-text">25:00</div>
           </div>
+          
+          <div id="focus-stats-row" class="focus-stats-row hidden">
+            <span class="focus-stat-label">⚠ Interruptions:</span>
+            <span id="interruption-count" class="focus-stat-value">0</span>
+          </div>
+
           <div class="timer-duration-row">
             <label for="timer-duration-input" class="timer-duration-label">Duration (min)</label>
             <input id="timer-duration-input" type="number" class="timer-duration-input" value="25" min="1" max="120">
           </div>
+
+          <div class="focus-options-row">
+            <label class="focus-option-toggle">
+              <input type="checkbox" id="enable-focus-protection" checked>
+              <span>Track Interruptions</span>
+            </label>
+            <button id="fullscreen-toggle-btn" class="btn" type="button">
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align: middle; margin-right: 4px;">
+                <path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"/>
+              </svg>
+              <span>Fullscreen</span>
+            </button>
+          </div>
+
           <div class="timer-controls">
             <button id="timer-start-btn" class="btn btn-primary">Start Focus</button>
             <button id="timer-pause-btn" class="btn hidden">Pause</button>
diff --git a/js/app.js b/js/app.js
index 787d08a..702b5bb 100644
--- a/js/app.js
+++ b/js/app.js
@@ -181,6 +181,74 @@ const timerStartBtn = document.getElementById('timer-start-btn');
 const timerPauseBtn = document.getElementById('timer-pause-btn');
 const timerResetBtn = document.getElementById('timer-reset-btn');
 
+// Focus Protection elements
+const enableFocusProtectionInput = document.getElementById('enable-focus-protection');
+const fullscreenToggleBtn = document.getElementById('fullscreen-toggle-btn');
+const focusStatsRow = document.getElementById('focus-stats-row');
+const interruptionCountEl = document.getElementById('interruption-count');
+const focusWarningBanner = document.getElementById('focus-warning-banner');
+const focusWarningClose = document.getElementById('focus-warning-close');
+
+// Focus Protection state & helper functions
+let focusProtectionActive = false;
+let interruptionsCount = 0;
+let lastFocusLossTime = 0;
+
+function handleFocusLoss() {
+  if (!focusProtectionActive) return;
+  const now = Date.now();
+  if (now - lastFocusLossTime < 1000) return;
+  lastFocusLossTime = now;
+
+  interruptionsCount++;
+  if (interruptionCountEl) {
+    interruptionCountEl.textContent = interruptionsCount;
+  }
+  if (focusWarningBanner) {
+    focusWarningBanner.classList.remove('hidden');
+  }
+  Toast.show('Focus lost! Please stay on this screen to complete your session.', 'warning');
+}
+
+function activateFocusTracking() {
+  if (focusProtectionActive) return;
+  focusProtectionActive = true;
+  interruptionsCount = 0;
+  if (interruptionCountEl) interruptionCountEl.textContent = '0';
+  if (focusStatsRow) focusStatsRow.classList.remove('hidden');
+  if (focusWarningBanner) focusWarningBanner.classList.add('hidden');
+
+  document.addEventListener('visibilitychange', handleFocusLoss);
+  window.addEventListener('blur', handleFocusLoss);
+}
+
+function cleanupFocusTracking() {
+  if (!focusProtectionActive) return;
+  focusProtectionActive = false;
+  document.removeEventListener('visibilitychange', handleFocusLoss);
+  window.removeEventListener('blur', handleFocusLoss);
+
+  if (focusWarningBanner) focusWarningBanner.classList.add('hidden');
+  if (focusStatsRow) focusStatsRow.classList.add('hidden');
+
+  if (document.fullscreenElement) {
+    if (document.exitFullscreen) {
+      document.exitFullscreen();
+    }
+  }
+}
+
+function toggleFullscreen() {
+  const section = document.getElementById('focus-section');
+  if (!document.fullscreenElement) {
+    if (section.requestFullscreen) section.requestFullscreen();
+    else if (section.webkitRequestFullscreen) section.webkitRequestFullscreen();
+    else if (section.msRequestFullscreen) section.msRequestFullscreen();
+  } else {
+    if (document.exitFullscreen) document.exitFullscreen();
+  }
+}
+
 // Task elements
 const focusTaskList = document.getElementById('focus-task-list');
 const activeFocusTask = document.getElementById('active-focus-task');
@@ -229,6 +297,18 @@ function startTimer() {
   timerStartBtn.classList.add('hidden');
   timerPauseBtn.classList.remove('hidden');
   
+  // Directly enter fullscreen mode when starting focus mode
+  const section = document.getElementById('focus-section');
+  if (section && !document.fullscreenElement) {
+    if (section.requestFullscreen) section.requestFullscreen();
+    else if (section.webkitRequestFullscreen) section.webkitRequestFullscreen();
+    else if (section.msRequestFullscreen) section.msRequestFullscreen();
+  }
+  
+  if (enableFocusProtectionInput && enableFocusProtectionInput.checked) {
+    activateFocusTracking();
+  }
+  
   timerInterval = setInterval(() => {
     timePassed += 1;
     timeLeft = TIME_LIMIT - timePassed;
@@ -262,6 +342,8 @@ function resetTimer() {
   timerPathRemaining.setAttribute("stroke-dasharray", "283 283");
   timerPauseBtn.classList.add('hidden');
   timerStartBtn.classList.remove('hidden');
+  
+  cleanupFocusTracking();
 }
 
 timerDurationInput.addEventListener('change', () => {
@@ -973,6 +1055,27 @@ store.subscribe(renderFocusTasks);
 store.subscribe(renderSidebarSubjects);
 
 document.addEventListener('DOMContentLoaded', () => {
+  // Focus Mode Enhancement Initializations
+  if (fullscreenToggleBtn) {
+    fullscreenToggleBtn.addEventListener('click', toggleFullscreen);
+  }
+
+  if (focusWarningClose) {
+    focusWarningClose.addEventListener('click', () => {
+      if (focusWarningBanner) focusWarningBanner.classList.add('hidden');
+    });
+  }
+
+  document.addEventListener('fullscreenchange', () => {
+    const isCurrentlyFullscreen = !!document.fullscreenElement;
+    if (fullscreenToggleBtn) {
+      const labelSpan = fullscreenToggleBtn.querySelector('span');
+      if (labelSpan) {
+        labelSpan.textContent = isCurrentlyFullscreen ? 'Exit Fullscreen' : 'Fullscreen';
+      }
+    }
+  });
+
   if (newSubjectColorsEl) {
     SUBJECT_COLORS.forEach(c => {
       const btn = document.createElement('button');
@@ -1040,6 +1143,7 @@ document.addEventListener('DOMContentLoaded', () => {
   }
 
   calendarBtn.addEventListener('click', () => {
+    if (focusProtectionActive) handleFocusLoss();
     currentView = 'calendar';
     document.querySelector('.cal-section').classList.remove('hidden');
     document.getElementById('tasks-section').classList.remove('hidden');
@@ -1049,6 +1153,7 @@ document.addEventListener('DOMContentLoaded', () => {
   });
 
   allTasksBtn.addEventListener('click', () => {
+    if (focusProtectionActive) handleFocusLoss();
     currentView = 'all-tasks';
     document.querySelector('.cal-section').classList.add('hidden');
     document.getElementById('tasks-section').classList.remove('hidden');
@@ -1058,6 +1163,7 @@ document.addEventListener('DOMContentLoaded', () => {
   });
 
   archivedTasksBtn.addEventListener('click', () => {
+    if (focusProtectionActive) handleFocusLoss();
     currentView = 'archived';
     document.querySelector('.cal-section').classList.add('hidden');
     document.getElementById('tasks-section').classList.remove('hidden');