diff --git a/.gitignore b/.gitignore
index 3bfa3977..de85f8ce 100644
--- a/.gitignore
+++ b/.gitignore
@@ -19,4 +19,9 @@ Thumbs.db
# Optional Editor configurations
.vscode/
.idea/
-studyplan.db
\ No newline at end of file
+studyplan.db
+
+# Tesseract OCR language data cache (downloaded at runtime)
+backend/.tesseract-cache/
+*.traineddata
+.gstack/
diff --git a/CHANGES.md b/CHANGES.md
new file mode 100644
index 00000000..cb2fd5de
--- /dev/null
+++ b/CHANGES.md
@@ -0,0 +1,88 @@
+# Changes — Image Task Extraction + Priority Board
+
+This document summarizes everything added/changed in this branch, for review and for the PR description.
+
+## Summary
+
+Two features, plus two bug fixes found while building them:
+
+1. **Image task extraction** — upload a photo/screenshot (WhatsApp message, LMS page, handwritten note, timetable) and get structured tasks extracted automatically, the same way pasted text already works.
+2. **Priority Board** — the top navbar "Tasks" link now opens a dedicated view that groups every task into High / Medium / Low priority columns, each with a consistent color. The calendar's deadline dots now use the same priority colors, and clicking a calendar date offers a way to jump straight to that day's tasks in the board.
+3. **Fix:** toast notifications (`Toast.show()` / `Toast.confirm()`) had no CSS anywhere in the project — they rendered as unstyled text at the bottom of the page instead of floating notifications, and never got removed from the DOM after their timeout (no animation existed to trigger the removal listener).
+4. **Fix:** the right-hand "Smart Paste" panel had `overflow: hidden` with no scroll — once its content grew taller than the fixed app height, whatever was below the fold (like the "Add to planner" button) became completely unreachable.
+
+---
+
+## 1. Image Task Extraction
+
+**Flow:** `Image upload → Gemini 2.5 Flash (multimodal vision) → structured tasks`, with automatic fallback to **Tesseract.js OCR + the existing heuristic parser** if Gemini fails 5 times in a row or no API key is configured. The fallback reason is always reported back to the UI.
+
+### New files
+- `backend/controllers/imageExtract.controller.js` — handles the upload, the 5-retry Gemini vision loop, and the OCR fallback path.
+- `backend/routers/imageExtract.router.js` — `POST /api/extract/image`, multer memory-storage upload (PNG/JPEG, 8MB max).
+- `backend/utils/nlpTextExtractor.js` — the existing ~200-line regex/heuristic NLP fallback, **moved out of `server.js`** (not rewritten) so both the text route and the new image route can share it without duplicating it.
+- `js/utils/imageExtract.js` — client-side upload UI logic (drag/drop, file picker, progress states, OCR-preview panel for fallback mode).
+
+### Files touched
+- `server.js` — two additive lines to mount the new router, plus the `nlpTextExtractor.js` extraction described above. No behavior changes (verified byte-identical output before/after the move).
+- `index.html` — new "Upload a photo or screenshot" section in the Smart Paste panel, separate from the existing text-paste drop zone (which is untouched).
+- `js/app.js` — one import + one init call for the new module.
+- `css/index.css` — new styles for the image upload UI, additive only.
+- `package.json` / `package-lock.json` — added `multer` and `tesseract.js`.
+- `.gitignore` — Tesseract's downloaded OCR language data (`*.traineddata`, `backend/.tesseract-cache/`) is excluded so it doesn't get committed.
+
+### Testing performed
+- Verified Gemini vision extraction end-to-end with real images (WhatsApp-style, notice-board style), including hashtag (`#urgent`) preservation.
+- Verified the "no API key" fallback path skips straight to OCR.
+- Verified the "5 failed attempts" fallback path (simulated with an invalid key) retries exactly 5 times, then falls back to OCR with a clear, human-readable reason.
+- Regression-tested the existing text-paste `/api/extract` route — unchanged output before/after the `nlpTextExtractor.js` move.
+
+---
+
+## 2. Priority Board
+
+### New UI
+- Clicking **Tasks** in the top navbar (previously duplicated the sidebar's "All Tasks" view) now opens a **Task Priority Board**: three columns (High / Medium / Low), each with a colored header/dot and a running count, cards color-coded to match.
+- Sidebar and Smart Paste panel stay visible — only the main calendar area is replaced.
+- **Colors are consistent app-wide:** red = high, amber = medium, green = low (reusing the existing `--color-text-danger` / `--color-text-warning` / `--color-text-success` design tokens).
+
+### Calendar integration
+- Calendar day dots now reflect task **priority** instead of subject color, so newly extracted/added tasks (from text or image) are automatically highlighted by urgency the moment they're added.
+- The calendar legend was updated to match (High/Medium/Low priority instead of the old "Study session"/"Deadline" labels).
+- Clicking a calendar date keeps its existing behavior (in-place task list + "mark day complete") **and** adds a new **"View in Task Board →"** button that jumps to the board pre-filtered to that date, with a "Clear filter" option.
+
+### Files touched
+- `index.html` — new `#priority-board-section` markup, updated calendar legend.
+- `js/app.js` — `showPriorityBoard()` / `hidePriorityBoard()` / `renderPriorityBoard()`, a `PRIORITY_COLORS` helper, the navbar "Tasks" handler rewired to the new view, and `hidePriorityBoard()` calls added to every other view-switch handler so views stay mutually exclusive.
+- `css/index.css` — new priority-board styles, additive only.
+
+### Testing performed
+- Seeded high/medium/low priority tasks and confirmed calendar dot colors and board columns match.
+- Confirmed checking a task complete in the board updates counts live.
+- Confirmed date-click → "View in Task Board" → correct date-filtered results → "Clear filter" round-trips correctly.
+- Regression-tested Calendar, All Tasks (sidebar), Focus Mode, and Profile views — all correctly hide the board when navigated away from, no console errors.
+
+---
+
+## 3. Bug fix: toast notifications had no CSS
+
+`js/utils/toast.js` (`Toast.show()`, `Toast.confirm()`) existed and was already used throughout the app, but `.toast-container`, `.toast-notification`, `.custom-confirm-backdrop`, and `.custom-confirm-modal` had **zero matching CSS anywhere in `css/index.css`**. Symptoms:
+- Toasts rendered as plain unstyled text at the very bottom of the page instead of a floating notification.
+- `.toast-hiding` had no animation, so the `animationend` listener that removes a toast from the DOM never fired — toasts leaked and could stack up indefinitely.
+
+Fixed with additive CSS only: fixed-position bottom-right toast container, colored by type, slide-in/out animation, and confirm-dialog backdrop/modal styling (`fadeOut`/`slideUp`/`slideDown` keyframes, which were referenced by `toast.js` but never defined).
+
+## 4. Bug fix: Smart Paste panel had no scroll
+
+`.panel` (the right-hand Smart Paste column) had `overflow: hidden` with a fixed-height parent (`.app { height: 720px }`). Once panel content grew past that height (easy to do now with the new image-upload section), anything below the fold — including the "Add to planner" button — became unreachable with no way to scroll to it. Fixed by changing `.panel` to `overflow-y: auto` (all three duplicate copies of the rule in the file, including the two dark-mode variants) and making `.panel-header` sticky so "Smart Paste" stays visible while scrolling.
+
+---
+
+## New dependencies
+
+- `multer` — multipart file upload handling for `/api/extract/image`.
+- `tesseract.js` — OCR fallback when Gemini vision is unavailable.
+
+## Not touched
+
+Everything else — auth, CSV/ICS export, subjects, existing task CRUD, focus mode timer, streaks — is unchanged. The one non-additive touch to pre-existing code is the `nlpTextExtractor.js` extraction from `server.js` (a verified behavior-preserving move, not a rewrite).
diff --git a/backend/controllers/imageExtract.controller.js b/backend/controllers/imageExtract.controller.js
new file mode 100644
index 00000000..8cc65e23
--- /dev/null
+++ b/backend/controllers/imageExtract.controller.js
@@ -0,0 +1,166 @@
+const path = require('path');
+const { GoogleGenAI } = require('@google/genai');
+const Tesseract = require('tesseract.js');
+const { nlpExtractTasksFromText } = require('../utils/nlpTextExtractor.js');
+
+// Keeps Tesseract's downloaded language data (~5MB) out of the project
+// root; it's cached here after the first OCR run instead of re-downloading
+// per request.
+const TESSERACT_CACHE_PATH = path.join(__dirname, '..', '.tesseract-cache');
+
+// Own Gemini client instance — reads the same process.env populated by
+// dotenv at server startup. Kept separate from server.js's own `ai`
+// instance so this controller has no import-time dependency on server.js
+// (avoids any risk of circular requires touching the existing routes).
+const ai = process.env.GEMINI_API_KEY
+ ? new GoogleGenAI({ apiKey: process.env.GEMINI_API_KEY })
+ : null;
+
+const MAX_VISION_ATTEMPTS = 5;
+
+function buildVisionPrompt() {
+ return `
+You are an AI study planner assistant. The attached image is a photo or screenshot a student took of an assignment notice — this could be a WhatsApp/LMS screenshot, a printed notice board photo, a handwritten note, or a timetable. The layout may be messy, rotated, or informal.
+
+Read the image and extract ALL tasks and deadlines you can find.
+Return ONLY a raw JSON array (no markdown, no backticks, no explanation).
+Each object must have: title (string), subject_name (string), due_at (ISO 8601 datetime), notes (string), confidence_score (number 0-100), priority ("low"|"medium"|"high"), icon (emoji).
+If a date is ambiguous or missing, make a reasonable guess and lower the confidence_score accordingly.
+IMPORTANT: Do not strip hashtags from the task description! If the image contains hashtag labels (e.g. #urgent, #Group), include them at the end of the 'title' field.
+Ignore chat UI chrome such as timestamps, read receipts, sender names, and profile pictures — focus only on assignment/deadline content.
+If the image contains no discernible tasks, return an empty JSON array [].
+`;
+}
+
+function parseModelJson(rawText) {
+ let text = (typeof rawText === 'function' ? rawText() : rawText || '').trim();
+ if (text.startsWith('```')) text = text.replace(/```json|```/g, '').trim();
+ const data = JSON.parse(text);
+ if (!Array.isArray(data)) throw new Error('Model response was not a JSON array');
+ return data;
+}
+
+async function tryGeminiVisionExtraction(buffer, mimeType) {
+ const prompt = buildVisionPrompt();
+ let lastError = null;
+
+ for (let attempt = 1; attempt <= MAX_VISION_ATTEMPTS; attempt++) {
+ try {
+ const response = await ai.models.generateContent({
+ model: 'gemini-2.5-flash',
+ contents: [
+ { text: prompt },
+ { inlineData: { mimeType, data: buffer.toString('base64') } },
+ ],
+ });
+
+ const tasks = parseModelJson(response.text);
+ return { tasks, attempts: attempt, error: null };
+ } catch (e) {
+ lastError = e;
+ console.error(`Image extraction attempt ${attempt}/${MAX_VISION_ATTEMPTS} failed:`, e.message);
+ }
+ }
+
+ return { tasks: null, attempts: MAX_VISION_ATTEMPTS, error: lastError };
+}
+
+function friendlyErrorMessage(error) {
+ const raw = error?.message || 'unknown error';
+ try {
+ const parsed = JSON.parse(raw);
+ return parsed?.error?.message || raw;
+ } catch {
+ return raw;
+ }
+}
+
+function cleanOcrText(rawText) {
+ return String(rawText || '')
+ .replace(/\r\n/g, '\n')
+ .replace(/[^\S\n]+/g, ' ')
+ .replace(/\n{3,}/g, '\n\n')
+ .trim();
+}
+
+async function runOcrFallback(buffer) {
+ const { data } = await Tesseract.recognize(buffer, 'eng', { cachePath: TESSERACT_CACHE_PATH });
+ return cleanOcrText(data.text);
+}
+
+async function extractFromImage(req, res) {
+ if (!req.file) {
+ return res.status(400).json({ error: 'No image file provided' });
+ }
+
+ const { buffer, mimetype } = req.file;
+
+ try {
+ if (ai) {
+ const { tasks, attempts, error } = await tryGeminiVisionExtraction(buffer, mimetype);
+
+ if (tasks) {
+ return res.json({
+ success: true,
+ method: 'gemini-vision',
+ attempts,
+ fallbackUsed: false,
+ tasks,
+ });
+ }
+
+ // 5 attempts exhausted — fall back to OCR, and report why.
+ return await respondWithOcrFallback(res, buffer, {
+ attempts,
+ reason: `Gemini vision extraction failed after ${attempts} attempt(s). Last error: ${friendlyErrorMessage(error)}`,
+ });
+ }
+
+ // No Gemini key configured at all — go straight to OCR fallback.
+ return await respondWithOcrFallback(res, buffer, {
+ attempts: 0,
+ reason: 'GEMINI_API_KEY is not configured, so image extraction cannot use Gemini vision. Falling back to local OCR + heuristic parsing.',
+ });
+ } catch (e) {
+ console.error('Unexpected error in image extraction:', e);
+ return res.status(500).json({ error: 'Unexpected server error during image extraction' });
+ }
+}
+
+async function respondWithOcrFallback(res, buffer, { attempts, reason }) {
+ try {
+ const ocrText = await runOcrFallback(buffer);
+
+ const tasks = ocrText.length > 5
+ ? nlpExtractTasksFromText(ocrText)
+ : [{
+ title: 'Could not read any text from this image',
+ subject_name: 'General',
+ due_at: new Date(Date.now() + 7 * 24 * 60 * 60 * 1000).toISOString(),
+ notes: 'OCR found little to no readable text — please try a clearer photo or enter this task manually.',
+ icon: '❓',
+ confidence_score: 10,
+ priority: 'medium',
+ }];
+
+ return res.json({
+ success: true,
+ method: 'ocr-fallback',
+ attempts,
+ fallbackUsed: true,
+ fallbackReason: reason,
+ ocrText,
+ tasks,
+ });
+ } catch (ocrError) {
+ console.error('OCR fallback failed:', ocrError);
+ return res.status(500).json({
+ success: false,
+ fallbackUsed: true,
+ fallbackReason: `${reason} OCR fallback also failed: ${ocrError.message}`,
+ error: 'Image extraction failed on both Gemini vision and the OCR fallback.',
+ });
+ }
+}
+
+module.exports = { extractFromImage };
diff --git a/backend/routers/imageExtract.router.js b/backend/routers/imageExtract.router.js
new file mode 100644
index 00000000..d8fd238b
--- /dev/null
+++ b/backend/routers/imageExtract.router.js
@@ -0,0 +1,38 @@
+const express = require('express');
+const multer = require('multer');
+const { extractFromImage } = require('../controllers/imageExtract.controller.js');
+
+const router = express.Router();
+
+// Memory storage only — the buffer is used in-process for the Gemini/OCR
+// call and discarded when the request ends, so there are no temp files
+// written to disk that would need cleanup.
+const upload = multer({
+ storage: multer.memoryStorage(),
+ limits: { fileSize: 8 * 1024 * 1024 }, // 8MB
+ fileFilter: (req, file, cb) => {
+ const allowed = ['image/png', 'image/jpeg'];
+ if (allowed.includes(file.mimetype)) {
+ cb(null, true);
+ } else {
+ cb(new Error('Only PNG and JPEG/JPG images are supported'));
+ }
+ },
+});
+
+router.post('/extract/image', (req, res, next) => {
+ upload.single('image')(req, res, (err) => {
+ if (err instanceof multer.MulterError) {
+ const message = err.code === 'LIMIT_FILE_SIZE'
+ ? 'Image is too large (max 8MB)'
+ : err.message;
+ return res.status(400).json({ error: message });
+ }
+ if (err) {
+ return res.status(400).json({ error: err.message });
+ }
+ next();
+ });
+}, extractFromImage);
+
+module.exports = router;
diff --git a/backend/utils/nlpTextExtractor.js b/backend/utils/nlpTextExtractor.js
new file mode 100644
index 00000000..e461f744
--- /dev/null
+++ b/backend/utils/nlpTextExtractor.js
@@ -0,0 +1,230 @@
+// ============================================================
+// INLINE NLP FALLBACK (moved verbatim from server.js so it can be
+// reused by both the text extraction route and the image extraction
+// route without duplicating ~200 lines of regex heuristics)
+// ============================================================
+
+function nlpAddDays(date, n) {
+ const d = new Date(date); d.setDate(d.getDate() + n); return d;
+}
+function nlpStartOf(date) {
+ const d = new Date(date); d.setHours(23, 59, 0, 0); return d;
+}
+function nlpWithTime(dateStr, t) {
+ const d = new Date(dateStr);
+ if (t) d.setHours(t.hours, t.minutes, 0, 0);
+ return d.toISOString();
+}
+
+function nlpExtractTime(lower) {
+ if (/\bmidnight\b/.test(lower)) return { hours: 0, minutes: 0 };
+ if (/\bnoon\b/.test(lower)) return { hours: 12, minutes: 0 };
+ let m = lower.match(/\b(\d{1,2}):(\d{2})\s*(am|pm)?\b/);
+ if (m) {
+ let h = parseInt(m[1]); const min = parseInt(m[2]); const mer = m[3];
+ if (mer === 'pm' && h < 12) h += 12;
+ if (mer === 'am' && h === 12) h = 0;
+ return { hours: h, minutes: min };
+ }
+ m = lower.match(/\b(\d{1,2})\s*(am|pm)\b/);
+ if (m) {
+ let h = parseInt(m[1]); const mer = m[2];
+ if (mer === 'pm' && h < 12) h += 12;
+ if (mer === 'am' && h === 12) h = 0;
+ return { hours: h, minutes: 0 };
+ }
+ return null;
+}
+
+const NLP_WEEKDAYS = ['sunday','monday','tuesday','wednesday','thursday','friday','saturday'];
+const NLP_MONTHS = {
+ jan:0,january:0,feb:1,february:1,mar:2,march:2,apr:3,april:3,may:4,
+ jun:5,june:5,jul:6,july:6,aug:7,august:7,sep:8,september:8,
+ oct:9,october:9,nov:10,november:10,dec:11,december:11
+};
+
+function nlpResolveYear(now, month, day, explicitYear = null) {
+ if (explicitYear) return new Date(explicitYear, month, day);
+ const c = new Date(now.getFullYear(), month, day);
+ if (c < now) c.setFullYear(c.getFullYear() + 1);
+ return c;
+}
+
+function nlpExtractDate(text, now = new Date()) {
+ const lower = text.toLowerCase();
+ const time = nlpExtractTime(lower);
+
+ if (/\btoday\b/.test(lower)) return nlpWithTime(nlpStartOf(now).toISOString(), time);
+ if (/\btonight\b/.test(lower)) return nlpWithTime(nlpStartOf(now).toISOString(), time);
+ if (/\bday after tomorrow\b/.test(lower)) return nlpWithTime(nlpStartOf(nlpAddDays(now, 2)).toISOString(), time);
+ if (/\btomorrow\b/.test(lower)) return nlpWithTime(nlpStartOf(nlpAddDays(now, 1)).toISOString(), time);
+
+ let m = lower.match(/\bin\s+(\d+|a|an|one|two|three|four|five|six|seven)\s+(day|days|week|weeks|month|months)\b/);
+ if (m) {
+ const wm = { a:1,an:1,one:1,two:2,three:3,four:4,five:5,six:6,seven:7 };
+ const n = isNaN(m[1]) ? (wm[m[1]] || 1) : parseInt(m[1]);
+ let d = new Date(now);
+ if (m[2].startsWith('day')) d = nlpAddDays(d, n);
+ else if (m[2].startsWith('week')) d = nlpAddDays(d, n * 7);
+ else d.setMonth(d.getMonth() + n);
+ return nlpWithTime(nlpStartOf(d).toISOString(), time);
+ }
+
+ const wdPattern = new RegExp(`\\b(next|this|on|coming)?\\s*(${NLP_WEEKDAYS.join('|')})\\b`);
+ m = lower.match(wdPattern);
+ if (m) {
+ const target = NLP_WEEKDAYS.indexOf(m[2]);
+ const cur = now.getDay();
+ let diff = target - cur;
+ if (diff <= 0) diff += 7;
+ return nlpWithTime(nlpStartOf(nlpAddDays(now, diff)).toISOString(), time);
+ }
+
+ const monthNames = Object.keys(NLP_MONTHS).join('|');
+ const ord = `(\\d{1,2})(?:st|nd|rd|th)?`;
+ m = lower.match(new RegExp(`\\b(${monthNames})\\s+${ord}\\b`));
+ if (m) return nlpWithTime(nlpStartOf(nlpResolveYear(now, NLP_MONTHS[m[1]], parseInt(m[2]))).toISOString(), time);
+ m = lower.match(new RegExp(`\\b${ord}\\s+(${monthNames})\\b`));
+ if (m) return nlpWithTime(nlpStartOf(nlpResolveYear(now, NLP_MONTHS[m[2]], parseInt(m[1]))).toISOString(), time);
+
+ m = lower.match(/\b(\d{1,2})[\/\-\.](\d{1,2})(?:[\/\-\.](\d{2,4}))?\b/);
+ if (m) {
+ const day = parseInt(m[1]), month = parseInt(m[2]) - 1;
+ const yr = m[3] ? (m[3].length === 2 ? 2000 + parseInt(m[3]) : parseInt(m[3])) : null;
+ return nlpWithTime(nlpStartOf(nlpResolveYear(now, month, day, yr)).toISOString(), time);
+ }
+
+ if (/\bend of (the\s+)?week\b/.test(lower) || /\bby (the\s+)?weekend\b/.test(lower)) {
+ const d = new Date(now); d.setDate(d.getDate() + (7 - d.getDay()));
+ return nlpStartOf(d).toISOString();
+ }
+ if (/\bend of (the\s+)?month\b/.test(lower)) {
+ return nlpStartOf(new Date(now.getFullYear(), now.getMonth() + 1, 0)).toISOString();
+ }
+ if (/\bend of (the\s+)?year\b/.test(lower)) {
+ return nlpStartOf(new Date(now.getFullYear(), 11, 31)).toISOString();
+ }
+ if (/\bnext month\b/.test(lower)) {
+ const d = new Date(now); d.setMonth(d.getMonth() + 1);
+ return nlpStartOf(d).toISOString();
+ }
+
+ return null;
+}
+
+const NLP_SUBJECT_KEYWORDS = {
+ 'Computer Science': ['cs','computer science','programming','code','coding','algorithm','data structure','software','python','java','javascript','html','database','sql','network','operating system','os','web','scheduling','lab report'],
+ 'Mathematics': ['maths','math','mathematics','calculus','algebra','statistics','probability','theorem','equation','integral','derivative','matrix','vector','problem set','pset','worksheet','integration'],
+ 'English Lit': ['english','literature','essay','novel','poem','poetry','shakespeare','writing','prose','narrative','analysis','literary','book report','reading','thesis','draft','revision'],
+ 'Physics': ['physics','mechanics','thermodynamics','optics','velocity','acceleration','force','energy','momentum','lab','experiment','wave','circuit','resistance','voltage'],
+};
+
+function nlpDetectSubject(text) {
+ const lower = text.toLowerCase();
+ const scores = {};
+ for (const [sub, kws] of Object.entries(NLP_SUBJECT_KEYWORDS)) {
+ scores[sub] = 0;
+ const subjectWords = sub.toLowerCase().split(/\s+/).filter(Boolean);
+ if (lower.includes(sub.toLowerCase())) scores[sub] += 12;
+ if (subjectWords.length > 1 && subjectWords.every(word => lower.includes(word))) scores[sub] += 8;
+ for (const kw of kws) {
+ const re = new RegExp(`\\b${kw.replace(/[.*+?^${}()|[\]\\]/g,'\\$&')}\\b`, 'gi');
+ const hits = lower.match(re);
+ if (hits) scores[sub] += hits.length * (kw.length > 5 ? 2 : 1);
+ }
+ }
+ if (/\benglish\s+lit\b|\blit\s+assignment\b/.test(lower)) scores['English Lit'] += 10;
+ if (/\bmaths?\b|\bmathematics\b/.test(lower)) scores['Mathematics'] += 10;
+ if (/\bphysics\b/.test(lower)) scores['Physics'] += 10;
+ const best = Object.entries(scores).sort((a, b) => b[1] - a[1])[0];
+ return best && best[1] > 0 ? best[0] : null;
+}
+
+const NLP_TASK_VERBS = ['submit','finish','complete','hand in','turn in','upload','send','write','prepare','present','review','read','study','draft','revise'];
+
+function nlpSplitSegments(text) {
+ return text.split(/[\n\r]+|(?<=\.)\s+(?=[A-Z])|\d+[.)]\s*/)
+ .map(s => s.trim()).filter(s => s.length > 8);
+}
+
+function nlpTaskScore(seg) {
+ const lower = seg.toLowerCase();
+ let s = 0;
+ for (const v of NLP_TASK_VERBS) if (lower.includes(v)) { s += 30; break; }
+ const sigs = ['due','deadline','by','before','submit','tomorrow','tonight','next','today','week','month',
+ 'monday','tuesday','wednesday','thursday','friday','saturday','sunday',
+ /\d+\/\d+/, /\d{1,2}(st|nd|rd|th)/];
+ for (const sig of sigs) if (sig instanceof RegExp ? sig.test(lower) : lower.includes(sig)) { s += 25; break; }
+ if (seg.length > 15 && seg.length < 300) s += 15;
+ if (nlpDetectSubject(seg)) s += 20;
+ const fillers = ['hi ','hello','hey ','dear ','regards','thanks','sincerely'];
+ for (const f of fillers) if (lower.startsWith(f)) { s -= 40; break; }
+ return Math.max(0, Math.min(100, s));
+}
+
+function nlpCleanTitle(seg) {
+ const labelMatch = seg.match(/#[\w-]+/g);
+ let cleaned = seg
+ .replace(/^(please|kindly|remember to|don't forget to|make sure to)\s+/i, '')
+ .replace(/\s+(by|before|due|on|at)\s+.*/i, '')
+ .trim().substring(0, 80);
+
+ if (labelMatch) {
+ // Re-append labels so frontend can still extract them
+ labelMatch.forEach(l => {
+ if (!cleaned.includes(l)) {
+ cleaned += ' ' + l;
+ }
+ });
+ }
+ return cleaned;
+}
+
+function nlpFallbackDate() {
+ const d = new Date(); d.setDate(d.getDate() + 7); d.setHours(23, 59, 0, 0);
+ return d.toISOString();
+}
+
+function nlpExtractTasksFromText(text) {
+ const now = new Date();
+ const segs = nlpSplitSegments(text);
+ const results = [];
+ const seen = new Set();
+
+ for (const seg of segs) {
+ if (nlpTaskScore(seg) < 30) continue;
+ const due_at = nlpExtractDate(seg, now) || nlpFallbackDate();
+ const subjectName = nlpDetectSubject(seg);
+ const rawTitle = nlpCleanTitle(seg);
+ if (!rawTitle || rawTitle.length < 4) continue;
+ const key = rawTitle.toLowerCase().substring(0, 20);
+ if (seen.has(key)) continue;
+ seen.add(key);
+ const confidence = Math.min(95, nlpTaskScore(seg) + (nlpExtractDate(seg, now) ? 10 : 0) + (subjectName ? 10 : 0));
+ results.push({
+ title: rawTitle.charAt(0).toUpperCase() + rawTitle.slice(1),
+ subject_name: subjectName || 'General',
+ due_at,
+ notes: 'Extracted by heuristic NLP parser.',
+ icon: { 'Computer Science':'💻','Mathematics':'📐','English Lit':'📖','Physics':'⚗️' }[subjectName] || '📚',
+ confidence_score: confidence,
+ priority: confidence > 70 ? 'high' : 'medium',
+ });
+ }
+
+ if (results.length === 0 && text.trim().length > 5) {
+ results.push({
+ title: text.trim().substring(0, 60),
+ subject_name: 'General',
+ due_at: nlpFallbackDate(),
+ notes: 'Could not parse details — please edit manually.',
+ icon: '❓',
+ confidence_score: 30,
+ priority: 'medium',
+ });
+ }
+
+ return results.slice(0, 10);
+}
+
+module.exports = { nlpExtractTasksFromText };
diff --git a/css/index.css b/css/index.css
index c4da7b8f..2a5f08bd 100644
--- a/css/index.css
+++ b/css/index.css
@@ -1017,7 +1017,17 @@ body {
display: flex;
flex-direction: column;
background: var(--color-background-secondary);
- overflow: hidden;
+ overflow-y: auto;
+ overflow-x: hidden;
+}
+
+.panel::-webkit-scrollbar {
+ width: 6px;
+}
+
+.panel::-webkit-scrollbar-thumb {
+ background: var(--color-border-secondary);
+ border-radius: 10px;
}
.panel.panel-collapsed {
@@ -1040,6 +1050,9 @@ body {
border-bottom: 1px solid var(--color-border-tertiary);
background: var(--color-background-primary);
flex-shrink: 0;
+ position: sticky;
+ top: 0;
+ z-index: 5;
display: flex;
align-items: flex-start;
gap: 10px;
@@ -2721,7 +2734,8 @@ body {
display: flex;
flex-direction: column;
background: var(--color-background-secondary);
- overflow: hidden;
+ overflow-y: auto;
+ overflow-x: hidden;
}
.panel-header {
@@ -2729,6 +2743,9 @@ body {
border-bottom: 1px solid var(--color-border-tertiary);
background: var(--color-background-primary);
flex-shrink: 0;
+ position: sticky;
+ top: 0;
+ z-index: 5;
}
.panel-title {
@@ -4143,7 +4160,8 @@ body {
display: flex;
flex-direction: column;
background: var(--color-background-secondary);
- overflow: hidden;
+ overflow-y: auto;
+ overflow-x: hidden;
}
.panel.panel-collapsed {
@@ -4177,6 +4195,9 @@ body {
border-bottom: 1px solid var(--color-border-tertiary);
background: var(--color-background-primary);
flex-shrink: 0;
+ position: sticky;
+ top: 0;
+ z-index: 5;
display: flex;
align-items: flex-start;
gap: 10px;
@@ -5260,6 +5281,484 @@ body {
.subject-sidebar-item:hover .delete-subject-btn {
opacity: 1;
}
+/* ================= IMAGE EXTRACTION (Smart Paste from photo/screenshot) ================= */
+
+.image-extract-section {
+ margin-top: 14px;
+}
+
+.image-extract-divider {
+ display: flex;
+ align-items: center;
+ text-align: center;
+ color: var(--color-text-tertiary);
+ font-size: 12px;
+ font-weight: 600;
+ text-transform: uppercase;
+ letter-spacing: 0.05em;
+ margin: 12px 0;
+}
+
+.image-extract-divider::before,
+.image-extract-divider::after {
+ content: "";
+ flex: 1;
+ border-bottom: 1px solid var(--color-border-tertiary);
+}
+
+.image-extract-divider span {
+ padding: 0 10px;
+}
+
+.image-drop-zone {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ gap: 6px;
+ padding: 20px 14px;
+ border: 1.5px dashed var(--color-border-secondary);
+ border-radius: var(--border-radius-md);
+ background: var(--color-background-secondary);
+ text-align: center;
+ transition: border-color 0.2s ease, background 0.2s ease;
+}
+
+.image-drop-zone--dragover {
+ border-color: var(--color-text-info);
+ background: var(--color-background-info);
+}
+
+.image-drop-icon {
+ font-size: 24px;
+}
+
+.image-drop-label {
+ font-weight: 600;
+ color: var(--color-text-primary);
+ font-size: 14px;
+}
+
+.image-drop-hint {
+ font-size: 12px;
+ color: var(--color-text-tertiary);
+ max-width: 260px;
+}
+
+.image-preview-card {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ margin-top: 10px;
+ padding: 8px;
+ border: 1px solid var(--color-border-tertiary);
+ border-radius: var(--border-radius-md);
+ background: var(--color-background-primary);
+}
+
+.image-preview-thumb {
+ width: 48px;
+ height: 48px;
+ object-fit: cover;
+ border-radius: var(--border-radius-sm);
+ flex: 0 0 auto;
+ background: var(--color-background-tertiary);
+}
+
+.image-preview-info {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ flex: 1;
+ gap: 8px;
+ min-width: 0;
+}
+
+.image-preview-name {
+ font-size: 12px;
+ color: var(--color-text-secondary);
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+.image-extract-btn {
+ width: 100%;
+ margin-top: 10px;
+}
+
+.image-extract-status {
+ margin-top: 10px;
+ padding: 8px 10px;
+ border-radius: var(--border-radius-sm);
+ font-size: 12px;
+ line-height: 1.5;
+ background: var(--color-background-info);
+ color: var(--color-text-info);
+ border: 1px solid var(--color-border-info);
+}
+
+.image-extract-status[data-tone="success"] {
+ background: var(--color-background-success);
+ color: var(--color-text-success);
+ border-color: var(--color-border-success);
+}
+
+.image-extract-status[data-tone="warning"] {
+ background: var(--color-background-warning);
+ color: var(--color-text-warning);
+ border-color: var(--color-border-warning, var(--color-border-secondary));
+}
+
+.image-extract-status[data-tone="error"] {
+ background: var(--color-background-danger);
+ color: var(--color-text-danger);
+ border-color: var(--color-border-danger);
+}
+
+.image-ocr-preview {
+ margin-top: 10px;
+}
+
+.image-ocr-toggle {
+ background: none;
+ border: none;
+ color: var(--color-text-info);
+ font-size: 12px;
+ font-weight: 600;
+ cursor: pointer;
+ padding: 4px 0;
+}
+
+.image-ocr-text {
+ margin-top: 6px;
+ padding: 10px;
+ border-radius: var(--border-radius-sm);
+ background: var(--color-background-tertiary);
+ color: var(--color-text-secondary);
+ font-size: 12px;
+ line-height: 1.5;
+ white-space: pre-wrap;
+ word-break: break-word;
+ max-height: 160px;
+ overflow-y: auto;
+}
+
+/* ================= TOAST NOTIFICATIONS ================= */
+/* Toast.show()/Toast.confirm() (js/utils/toast.js) had no matching CSS
+ anywhere in this file, so toasts rendered as unstyled inline content
+ at the bottom of the page instead of a floating overlay, and — since
+ .toast-hiding had no animation to fire 'animationend' — were never
+ actually removed from the DOM after their timeout. */
+
+.toast-container {
+ position: fixed;
+ bottom: 20px;
+ right: 20px;
+ z-index: 10000;
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+ max-width: 360px;
+ pointer-events: none;
+}
+
+.toast-notification {
+ display: flex;
+ align-items: flex-start;
+ gap: 10px;
+ padding: 12px 14px;
+ border-radius: var(--border-radius-md);
+ background: var(--color-background-primary);
+ border: 1px solid var(--color-border-tertiary);
+ box-shadow: var(--shadow-lg);
+ pointer-events: auto;
+ animation: toastSlideIn 0.25s ease-out;
+}
+
+.toast-notification.toast-success {
+ border-color: var(--color-border-success);
+ background: var(--color-background-success);
+}
+
+.toast-notification.toast-error {
+ border-color: var(--color-border-danger);
+ background: var(--color-background-danger);
+}
+
+.toast-notification.toast-warning {
+ border-color: var(--color-border-secondary);
+ background: var(--color-background-warning);
+}
+
+.toast-notification.toast-info {
+ border-color: var(--color-border-info);
+ background: var(--color-background-info);
+}
+
+.toast-icon {
+ font-size: 16px;
+ line-height: 1.4;
+ flex-shrink: 0;
+}
+
+.toast-message {
+ flex: 1;
+ font-size: 13px;
+ font-weight: 500;
+ color: var(--color-text-primary);
+ line-height: 1.4;
+}
+
+.toast-close {
+ flex-shrink: 0;
+ background: none;
+ border: none;
+ font-size: 16px;
+ line-height: 1;
+ color: var(--color-text-tertiary);
+ cursor: pointer;
+ padding: 0;
+}
+
+.toast-close:hover {
+ color: var(--color-text-primary);
+}
+
+.toast-notification.toast-hiding {
+ animation: toastSlideOut 0.2s ease-in forwards;
+}
+
+@keyframes toastSlideIn {
+ from { opacity: 0; transform: translateY(10px); }
+ to { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes toastSlideOut {
+ from { opacity: 1; transform: translateY(0); max-height: 100px; margin-top: 0; }
+ to { opacity: 0; transform: translateY(10px); max-height: 0; margin-top: -10px; }
+}
+
+/* Toast.confirm() modal — same missing-CSS gap as the toasts above. */
+.custom-confirm-backdrop {
+ position: fixed;
+ inset: 0;
+ background: rgba(0, 0, 0, 0.45);
+ z-index: 10001;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.custom-confirm-modal {
+ background: var(--color-background-primary);
+ border-radius: var(--border-radius-lg);
+ box-shadow: var(--shadow-lg);
+ width: 320px;
+ max-width: 90vw;
+ padding: 20px;
+}
+
+@keyframes fadeOut {
+ from { opacity: 1; }
+ to { opacity: 0; }
+}
+
+@keyframes slideUp {
+ from { opacity: 0; transform: translateY(16px); }
+ to { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes slideDown {
+ from { opacity: 1; transform: translateY(0); }
+ to { opacity: 0; transform: translateY(16px); }
+}
+
+/* ================= PRIORITY BOARD (navbar "Tasks") ================= */
+
+.priority-board-section {
+ flex: 1;
+ overflow-y: auto;
+ padding: 24px;
+ display: flex;
+ flex-direction: column;
+ gap: 20px;
+}
+
+.priority-board-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: flex-start;
+ flex-wrap: wrap;
+ gap: 12px;
+}
+
+.priority-board-title {
+ font-size: 24px;
+ font-weight: 700;
+ color: var(--color-text-primary);
+}
+
+.priority-board-subtitle {
+ margin: 8px 0 0;
+ color: var(--color-text-secondary);
+ line-height: 1.6;
+}
+
+.priority-board-date-filter {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ padding: 8px 12px;
+ border-radius: var(--border-radius-sm);
+ background: var(--color-background-info);
+ color: var(--color-text-info);
+ border: 1px solid var(--color-border-info);
+ font-size: 13px;
+}
+
+.priority-board-columns {
+ display: grid;
+ grid-template-columns: repeat(3, minmax(0, 1fr));
+ gap: 18px;
+ flex: 1;
+ min-height: 0;
+}
+
+@media (max-width: 900px) {
+ .priority-board-columns {
+ grid-template-columns: 1fr;
+ }
+}
+
+.priority-column {
+ display: flex;
+ flex-direction: column;
+ background: var(--color-background-primary);
+ border: 1px solid var(--color-border-tertiary);
+ border-radius: var(--border-radius-md);
+ box-shadow: var(--shadow-sm);
+ min-height: 0;
+ overflow: hidden;
+}
+
+.priority-column-header {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ padding: 14px 16px;
+ font-size: 14px;
+ font-weight: 700;
+ color: var(--color-text-primary);
+ border-bottom: 1px solid var(--color-border-tertiary);
+ flex-shrink: 0;
+}
+
+.priority-dot {
+ width: 10px;
+ height: 10px;
+ border-radius: 50%;
+ flex-shrink: 0;
+}
+
+.priority-column-high .priority-dot { background: var(--color-text-danger); }
+.priority-column-medium .priority-dot { background: var(--color-text-warning); }
+.priority-column-low .priority-dot { background: var(--color-text-success); }
+
+.priority-column-high { border-top: 3px solid var(--color-text-danger); }
+.priority-column-medium { border-top: 3px solid var(--color-text-warning); }
+.priority-column-low { border-top: 3px solid var(--color-text-success); }
+
+.priority-count {
+ margin-left: auto;
+ font-size: 12px;
+ font-weight: 700;
+ background: var(--color-background-tertiary);
+ color: var(--color-text-secondary);
+ padding: 2px 8px;
+ border-radius: 12px;
+}
+
+.priority-column-list {
+ overflow-y: auto;
+ padding: 14px;
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+}
+
+.priority-column-list::-webkit-scrollbar {
+ width: 6px;
+}
+
+.priority-column-list::-webkit-scrollbar-thumb {
+ background: var(--color-border-secondary);
+ border-radius: 10px;
+}
+
+.priority-column-empty {
+ color: var(--color-text-tertiary);
+ font-size: 13px;
+ text-align: center;
+ padding: 20px 8px;
+}
+
+.priority-task-card {
+ border: 1px solid var(--color-border-tertiary);
+ border-left: 3px solid var(--color-border-tertiary);
+ border-radius: var(--border-radius-sm);
+ padding: 10px 12px;
+ background: var(--color-background-secondary);
+}
+
+.priority-task-top {
+ display: flex;
+ align-items: flex-start;
+ gap: 8px;
+}
+
+.priority-task-check {
+ appearance: none;
+ -webkit-appearance: none;
+ width: 18px;
+ height: 18px;
+ border-radius: 5px;
+ border: 2px solid var(--color-border-secondary);
+ background: var(--color-background-primary);
+ cursor: pointer;
+ flex: 0 0 auto;
+ margin-top: 1px;
+}
+
+.priority-task-check:hover {
+ border-color: #16a34a;
+}
+
+.priority-task-title {
+ font-size: 13px;
+ font-weight: 600;
+ color: var(--color-text-primary);
+ line-height: 1.4;
+}
+
+.priority-task-meta {
+ margin-top: 6px;
+ padding-left: 26px;
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ flex-wrap: wrap;
+ font-size: 11px;
+ color: var(--color-text-tertiary);
+}
+
+.priority-task-subject {
+ font-weight: 600;
+ color: var(--color-text-secondary);
+}
+
+/* ================= REVIEW TABLE ================= */
+
.task-id {
font-size: 11.5px;
font-family: 'SF Mono', 'Fira Code', monospace;
@@ -5387,4 +5886,4 @@ body {
}
.review-table-wrap tbody tr:last-child { border-bottom: none; }
.review-table-wrap tbody tr:hover { background: var(--color-background-secondary); }
- .review-table-wrap td { padding: 14px 16px; vertical-align: middle; }
\ No newline at end of file
+ .review-table-wrap td { padding: 14px 16px; vertical-align: middle; }
diff --git a/index.html b/index.html
index 7248734b..85d3444a 100644
--- a/index.html
+++ b/index.html
@@ -216,8 +216,9 @@ StudyPlan
Su
Mo
Tu
We
Th
Fr
Sa
- Study session
- Deadline
+ High priority
+ Medium priority
+ Low priority
@@ -331,6 +332,46 @@ Account overview
+
+
+
+
+
+
+
+ High Priority
+ 0
+
+
+
+
+
+
+ Medium Priority
+ 0
+
+
+
+
+
+
+ Low Priority
+ 0
+
+
+
+
+
Account overview
+
+
+
diff --git a/js/app.js b/js/app.js
index 5f50a0be..20c4cfc5 100644
--- a/js/app.js
+++ b/js/app.js
@@ -3,8 +3,10 @@ import { extractTasksFromText } from './utils/api.js';
import { initGlobalErrorBoundary } from './utils/errorBoundary.js';
import { analyzeWorkload } from './utils/scheduler.js';
import { Toast } from './utils/toast.js';
+import { initImageExtract } from './utils/imageExtract.js';
initGlobalErrorBoundary();
+initImageExtract();
function getLabelColor(labelStr) {
const colors = ['#ef4444', '#f59e0b', '#3b82f6', '#8b5cf6', '#10b981', '#ec4899', '#14b8a6', '#f97316'];
@@ -86,7 +88,17 @@ function formatDuration(mins) {
let currentMonthDate = new Date();
let selectedDate = null;
-let currentView = 'calendar'; // 'calendar', 'all-tasks', 'archived'
+let currentView = 'calendar'; // 'calendar', 'all-tasks', 'archived', 'priority-board'
+let priorityBoardDate = null;
+
+const PRIORITY_COLORS = {
+ high: 'var(--color-text-danger)',
+ medium: 'var(--color-text-warning)',
+ low: 'var(--color-text-success)',
+};
+function getPriorityColor(priority) {
+ return PRIORITY_COLORS[priority] || PRIORITY_COLORS.medium;
+}
const tasksSection = document.getElementById('tasks-section');
const focusSection = document.getElementById('focus-section');
@@ -798,6 +810,7 @@ function showProfileSection() {
document.querySelector('.cal-section')?.classList.add('hidden');
document.getElementById('tasks-section')?.classList.add('hidden');
document.getElementById('focus-section')?.classList.add('hidden');
+ hidePriorityBoard();
profileSection?.classList.remove('hidden');
topbar?.classList.add('hidden');
renderProfileSection();
@@ -808,6 +821,90 @@ function hideProfileSection() {
topbar?.classList.remove('hidden');
}
+function showPriorityBoard(dateFilter = null) {
+ currentView = 'priority-board';
+ priorityBoardDate = dateFilter;
+ hideProfileSection();
+ document.querySelector('.cal-section')?.classList.add('hidden');
+ document.getElementById('tasks-section')?.classList.add('hidden');
+ document.getElementById('focus-section')?.classList.add('hidden');
+ document.getElementById('priority-board-section')?.classList.remove('hidden');
+ document.querySelectorAll('.sidebar .nav-item').forEach(el => el.classList.remove('active'));
+ const studyTimeEl = document.getElementById('daily-study-time');
+ if (studyTimeEl) studyTimeEl.style.display = 'none';
+ renderPriorityBoard();
+}
+
+function hidePriorityBoard() {
+ document.getElementById('priority-board-section')?.classList.add('hidden');
+}
+
+function renderPriorityBoard() {
+ const section = document.getElementById('priority-board-section');
+ if (!section || section.classList.contains('hidden')) return;
+
+ const dateFilterEl = document.getElementById('priority-board-date-filter');
+ const dateLabelEl = document.getElementById('priority-board-date-label');
+ if (priorityBoardDate) {
+ dateFilterEl?.classList.remove('hidden');
+ if (dateLabelEl) {
+ dateLabelEl.textContent = priorityBoardDate.toLocaleDateString('en-US', {
+ weekday: 'short', month: 'short', day: 'numeric',
+ });
+ }
+ } else {
+ dateFilterEl?.classList.add('hidden');
+ }
+
+ let tasks = store.tasks.filter(t => !t.archived && t.status !== 'Done');
+ if (priorityBoardDate) {
+ tasks = tasks.filter(t => t.due_at && store.isSameCalendarDate(new Date(t.due_at), priorityBoardDate));
+ }
+
+ const buckets = { high: [], medium: [], low: [] };
+ tasks.forEach(t => {
+ const p = buckets[t.priority] ? t.priority : 'medium';
+ buckets[p].push(t);
+ });
+
+ ['high', 'medium', 'low'].forEach(p => {
+ const listEl = document.getElementById(`priority-list-${p}`);
+ const countEl = document.getElementById(`priority-count-${p}`);
+ const items = buckets[p].sort((a, b) => new Date(a.due_at) - new Date(b.due_at));
+
+ if (countEl) countEl.textContent = items.length;
+ if (!listEl) return;
+
+ if (items.length === 0) {
+ listEl.innerHTML = `No ${p} priority tasks${priorityBoardDate ? ' on this date' : ''}
`;
+ return;
+ }
+
+ listEl.innerHTML = items.map(t => {
+ const sub = store.subjects.find(s => s.id === t.subject_id);
+ return `
+
+
+
+
${escapeHtml(t.title)}
+
+
+ ${sub ? escapeHtml(sub.name) : 'General'}
+ ${formatDate(t.due_at)}
+
+
+
`;
const emptyState = dueSoon.length === 0 && completed.length === 0
@@ -1466,6 +1564,15 @@ document.querySelectorAll('.task-item').forEach(taskEl => {
store.markPendingTasksForDateCompleted(selectedDate);
});
}
+
+ const viewInBoardBtn = document.getElementById('view-in-board-btn');
+ if (viewInBoardBtn) {
+ viewInBoardBtn.addEventListener('click', (e) => {
+ e.stopPropagation();
+ showPriorityBoard(selectedDate);
+ });
+ }
+
const bulkCompleteBtn =
document.getElementById('bulk-complete-btn');
@@ -1559,11 +1666,14 @@ function renderCalendar() {
let indicatorHtml = '';
if (dayTasks.length > 0) {
+ const PRIORITY_RANK = { high: 0, medium: 1, low: 2 };
+ const sortedDayTasks = [...dayTasks].sort(
+ (a, b) => (PRIORITY_RANK[a.priority] ?? 1) - (PRIORITY_RANK[b.priority] ?? 1)
+ );
indicatorHtml = ``;
- dayTasks.forEach((t, idx) => {
+ sortedDayTasks.forEach((t, idx) => {
if (idx > 2) return;
- const sub = store.subjects.find(s => s.id === t.subject_id) || store.subjects[0];
- indicatorHtml += `
`;
+ indicatorHtml += `
`;
});
indicatorHtml += `