CLiC helper and fix lecturer flow

README.md

@@ -285,6 +285,16 @@ If you've found this useful and want to support the project, you can send a TNG
   <img src="./images/qr.jpeg" alt="TNG eWallet QR Code" width="400" />
 </div>
 
+## What is Defected CLiC?
+
+CLiC (MMU's student portal) sometimes shows incorrect start dates for classes. Even if the actual class day is a Tuesday, CLiC might show the preceding Monday as the start date.
+
+![Defected CLiC example](./images/defected-clic.png)
+
+As shown in the image above, the start date is listed as **30/03/2026** (Monday), but the day on the right clearly states **Tuesday** (which would be 31/03/2026).
+
+If you notice this discrepancy in your timetable, select **"Yes"** for **"Defected CLiC?"** in the extension. This ensures that Schedulr correctly calculates the first class date based on the day of the week rather than the potentially incorrect start date provided by CLiC.
+
 ## Credit 🎉
 
 This project was developed at [Hackerspace MMU](https://hackerspacemmu.rocks/). Also shoutout to a couple of friends who helped me out on this project.

docs/index.html

@@ -73,7 +73,7 @@ <h2>Import your CliC timetable into Google Calendar or any other calendar — in
                 </div>
 
                 <a href="https://chromewebstore.google.com/detail/schedulr/ofaflpillnejkhmkefmcpoamjeaghipp"
-                    class="extension-button" target="_blank" rel="noopener">
+                    class="extension-button" id="get-extension-btn" target="_blank" rel="noopener">
                     <i class="fab fa-chrome"></i> Get the extension
                 </a>
             </div>
@@ -142,7 +142,7 @@ <h1>What's this extension about? 📅</h1>
             <h1>Requirements 👀</h1>
             <p>
                 — MMU Student with <strong>"Active"</strong> current student status <strong>ONLY</strong><br>
-                — Chromium-based browser <strong>ONLY</strong> (Google Chrome, Brave, Edge, etc.)
+                — Chromium-based browser or Firefox <strong>ONLY</strong>
             </p>
 
             <h1>Installation 📦</h1>
@@ -200,9 +200,23 @@ <h1 id="key-binding">Key Binding ⌨️</h1>
 
             <h1>Project Status ⏳</h1>
             <p>
-                Schedulr version <strong>4.0.2</strong> is available on
+                Schedulr version <strong>4.1.0</strong> is available on
                 <a href="https://chromewebstore.google.com/detail/schedulr/ofaflpillnejkhmkefmcpoamjeaghipp"
-                    id="links">Chrome Web Store</a> as of now.
+                    id="links">Chrome Web Store</a> and <a href="https://addons.mozilla.org/en-US/firefox/addon/schedulr/" id="links">Firefox Add-ons</a> as of now.
+            </p>
+
+            <h1 id="defected-clic">Defected CLiC? ⚠️</h1>
+            <p>
+                CLiC (MMU's student portal) sometimes shows incorrect start dates for classes. Even if the actual class
+                day is a Tuesday, CLiC might show the preceding Monday as the start date.
+            </p>
+            <img src="assets/image/defected-clic.png" alt="Defected CLiC example"
+                style="width: 100%; max-width: 500px; border-radius: 8px; margin: 10px 0; border: 1px solid var(--ctp-surface1);">
+            <p>
+                If you notice this discrepancy in your timetable, select <strong>"Yes"</strong> for <strong>"Defected
+                    CLiC?"</strong> in the extension settings. This ensures that Schedulr correctly calculates the first
+                class date based on the day of the week rather than the potentially incorrect start date provided by
+                CLiC.
             </p>
 
             <h1>Contributing 🤝</h1>
@@ -292,7 +306,7 @@ <h1>Frequently Asked Questions 🤔</h1>
                     <span class="faq-icon">+</span>
                 </button>
                 <div class="faq-answer">
-                    <p>Google Chrome (and other Chromium-based browsers like Brave, Edge) as of now.</p>
+                    <p>Google Chrome, Chromium-based browsers (Brave, Edge, etc.), and Firefox.</p>
                 </div>
             </div>
 
@@ -357,7 +371,7 @@ <h1>Frequently Asked Questions 🤔</h1>
                     <span class="faq-icon">+</span>
                 </button>
                 <div class="faq-answer">
-                    <p>Definitely for Firefox, but the current focus is on Chrome and Chromium-based browsers.</p>
+                    <p>Firefox is now officially supported! Safari is on the roadmap but not currently a priority.</p>
                 </div>
             </div>
 

docs/scripts/menu.js

@@ -78,4 +78,13 @@
             }
         });
     });
+    // Browser detection for extension button
+    const getExtensionBtn = document.getElementById('get-extension-btn');
+    if (getExtensionBtn) {
+        const isFirefox = navigator.userAgent.includes("Firefox");
+        if (isFirefox) {
+            getExtensionBtn.href = "https://addons.mozilla.org/en-US/firefox/addon/schedulr/";
+            getExtensionBtn.innerHTML = '<i class="fab fa-firefox-browser"></i> Get the extension';
+        }
+    }
 })();

frontend/src/popup/popup.css

@@ -97,6 +97,26 @@ label {
     font-size: 14px;
 }
 
+.info-link {
+    font-size: 11px;
+    font-weight: 500;
+    color: var(--ctp-blue);
+    text-decoration: none;
+    margin-left: auto;
+    background: rgba(137, 180, 250, 0.1);
+    padding: 2px 10px;
+    border-radius: var(--radius-pill);
+    transition: var(--transition);
+    border: 1px solid rgba(137, 180, 250, 0.2);
+}
+
+.info-link:hover {
+    background: rgba(137, 180, 250, 0.2);
+    border-color: var(--ctp-blue);
+    color: var(--ctp-sapphire);
+    transform: translateY(-1px);
+}
+
 /* ── Header ── */
 .header-container {
     display: flex;

frontend/src/popup/popup.html

@@ -121,7 +121,7 @@ <h1>Schedulr</h1>
         <!-- Defected CLiC -->
         <form id="defectForm">
             <div class="form-card">
-                <p class="section-title"><i class="fa fa-triangle-exclamation section-icon"></i> Defected CLiC?</p>
+                <p class="section-title"><i class="fa fa-triangle-exclamation section-icon"></i> Defected CLiC? <a href="https://github.com/sycanz/schedulr#what-is-defected-clic" target="_blank" class="info-link">What's this?</a></p>
                 <div class="chip-group">
                     <input type="radio" id="yes" name="defected" value="yes">
                     <label for="yes" class="chip">Yes</label>