Update index.html

index.html

@@ -53,6 +53,15 @@ window.MathJax = {
   --code-bg:         #f4f2ec;
   --code-border:     #e6e0d2;
   --inline-code-bg:  #f2efe8;
+
+  /* copy button theme vars */
+  --copy-bg:          var(--code-bg);
+  --copy-border:      var(--code-border);
+  --copy-color:       var(--paper-text);
+  --copy-hover-bg:    var(--blockquote-bg);
+  --copy-hover-border: var(--blockquote-bar);
+  --copy-success-bg:  #4a5f4a;
+  --copy-success-color:#fff;
 }
 
 body.dark {
@@ -72,6 +81,15 @@ body.dark {
   --code-bg:        #3a3530;
   --code-border:    #514b42;
   --inline-code-bg: #4a443d;
+
+  /* dark theme copy button vars */
+  --copy-bg:          var(--code-bg);
+  --copy-border:      var(--code-border);
+  --copy-color:       var(--paper-text);
+  --copy-hover-bg:    #4a443d; /* Darker gray for hover */
+  --copy-hover-border:#6a604e; /* Darker border for hover */
+  --copy-success-bg:  #4a5f4a; /* Consistent success color */
+  --copy-success-color:#fff;
 }
 
 /* ─────────────────────────────────────────
@@ -278,35 +296,51 @@ th{font-weight:600}
 
 /* ───────── copy button styles ───────── */
 .copy-btn {
-  display: inline-block;
+  display: inline-flex; /* Use flex for alignment */
+  align-items: center;
+  gap: 6px; /* Space between icon and text */
   margin-left: 10px;
-  padding: 4px 8px;
-  background: var(--code-bg);
-  border: 1px solid var(--code-border);
-  border-radius: 4px;
+  padding: 4px 10px;
+  background: var(--copy-bg);
+  border: 1px solid var(--copy-border);
+  color: var(--copy-color);
+  border-radius: 6px;
   font-family: 'PT Mono', monospace;
   font-size: 12px;
   cursor: pointer;
-  transition: all 0.2s;
+  transition: all 0.18s ease; /* Smoother transition */
   user-select: none;
 }
 .copy-btn:hover {
-  background: var(--blockquote-bg);
-  transform: translateY(-1px);
+  background: var(--copy-hover-bg);
+  border-color: var(--copy-hover-border);
+  transform: translateY(-1px); /* Subtle lift effect */
 }
 .copy-btn.copied {
-  background: #4a5f4a;
-  color: #fff;
-  border-color: #4a5f4a;
+  background: var(--copy-success-bg);
+  border-color: var(--copy-success-bg);
+  color: var(--copy-success-color);
 }
+
+/* header layout (updated to use span for title, avoid <p> spacing issues) */
 .section-header {
   display: flex;
   align-items: center;
-  gap: 8px;
-  margin-bottom: 0;
+  gap: 10px; /* Space between title and button */
+  margin: 6px 0 8px; /* Adjust vertical spacing */
 }
-.section-header strong {
-  margin: 0;
+.section-title {
+  font-family:'Libre Baskerville',serif;
+  font-weight:700;
+}
+.section-title::after {
+  content: " :"; /* Add colon after the title */
+  opacity:.85;
+}
+
+/* Optional: container for rendered blocks in final view */
+.rendered {
+  margin-bottom: 20px;
 }
 
 /* responsive & print */
@@ -390,52 +424,134 @@ function copyToClipboard(text, button) {
     setTimeout(() => {
       button.textContent = originalText;
       button.classList.remove('copied');
-    }, 2000);
+    }, 1500); /* Shorter timeout for feedback */
   }).catch(err => {
     console.error('Failed to copy:', err);
     alert('Failed to copy to clipboard');
   });
 }
 
-/* ======= markdown + latex pipeline ======= */
+/* ======= Markdown + LaTeX renderer ======= */
+function renderMdLatex(text) {
+  const store = [];
+  const PL = i => `%%LATEX_${i}%%`; /* Placeholder for LaTeX */
+  let idx = 0;
+  const keep = m => (store.push(m), PL(idx++)); /* Function to store and replace with placeholder */
+
+  // Protect LaTeX blocks before Markdown parsing
+  text = (text || '')
+    .replace(/\\\[[\s\S]*?\\\]/g, keep)   // \[ ... \]
+    .replace(/\$\$[\s\S]*?\$\$/g, keep)   // $$ ... $$
+    .replace(/\\\([\s\S]*?\\\)/g, keep)   // \( ... \)
+    .replace(/\$([^\$\n]+?)\$/g, keep);   // $ ... $ (inline math)
+
+  let html = marked.parse(text || ''); // Parse Markdown
+  
+  // Re-insert LaTeX blocks
+  store.forEach((latex, i) => { html = html.replaceAll(PL(i), latex); });
+  return html;
+}
+
+/* ======= processContent uses the new renderer ======= */
 function processContent(text){
   showProcessing();
+  content.innerHTML = renderMdLatex(text); /* Render with Markdown and LaTeX */
+
+  if (window.MathJax?.typesetPromise) {
+    MathJax.typesetPromise([content]).then(hideProcessing)
+      .catch(e => { console.error('MathJax error:', e); hideProcessing(); });
+  } else {
+    hideProcessing(); /* Hide if MathJax is not available */
+  }
+}
 
-  const store=[], PL=i=>`%%LATEX_${i}%%`; let idx=0;
-  const keep=m=>(store.push(m),PL(idx++));
+/* ======= Clean leading labels to avoid duplication ======= */
+function normalizeSection(s) {
+  if (!s) return '';
+  let out = s.trim();
 
-  text = text
-          .replace(/\\\[[\s\S]*?\\\]/g, keep)  // \[ ... \]
-          .replace(/\$\$[\s\S]*?\$\$/g, keep)  // $$ ... $$
-          .replace(/\\\([\s\S]*?\\\)/g, keep)  // \( ... \)
-          .replace(/\$([^\$\n]+?)\$/g,    keep); // $ ... $
+  // Remove common leading labels like "Question:", "Answer:", etc.
+  // This regex is more robust and handles various casings and separators.
+  out = out.replace(/^(?:\s*[-*_]*\s*)*(?:Question|Q|Problem|Prompt|Answer|Solution|Ans)\s*[:\-]?\s*/i, '');
 
-  let html = marked.parse(text);
-  store.forEach((latex,i)=>{html=html.replaceAll(PL(i),latex)});
-  content.innerHTML = html;
+  // Additional specific cleanups for common markdown bolding patterns
+  out = out.replace(/^\s*\*{0,2}Answer\*{0,2}\s*:\s*/i, '');
+  out = out.replace(/^\s*\*{0,2}Solution\*{0,2}\s*:\s*/i, '');
+  out = out.replace(/^\s*\*{0,2}Ans\*{0,2}\s*:\s*/i, '');
+  out = out.replace(/^\s*\*{0,2}Q\*{0,2}\s*:\s*/i, '');
+  out = out.replace(/^\s*\*{0,2}Question\*{0,2}\s*:\s*/i, '');
+  out = out.replace(/^\s*\*{0,2}Problem\*{0,2}\s*:\s*/i, '');
 
-  if(window.MathJax?.typesetPromise){
-    MathJax.typesetPromise([content]).then(hideProcessing)
-      .catch(e=>{console.error('MathJax error:',e);hideProcessing()});
-  }else{hideProcessing()}
+  return out.trim(); /* Return cleaned string */
 }
 
-/* ======= Image to Base64 converter ======= */
-async function imageToBase64(file) {
-  return new Promise((resolve, reject) => {
-    const reader = new FileReader();
-    reader.onload = () => {
-      // Ensure it's a valid data URL and extract base64 part
-      if (reader.result && reader.result.includes(',')) {
-        const base64 = reader.result.split(',')[1];
-        resolve(base64);
-      } else {
-        reject(new Error("Failed to read file as Data URL."));
-      }
-    };
-    reader.onerror = () => reject(reader.error);
-    reader.readAsDataURL(file);
-  });
+/* ======= UI Helpers for Streaming (updated headers & copy buttons) ======= */
+let currentQuestion = '';
+let currentAnswer = '';
+
+function beginStreamingUI(question){
+  currentQuestion = normalizeSection(question); /* Normalize question text */
+  currentAnswer = ''; /* Reset answer when starting a new question */
+
+  /* Set up the initial streaming UI with copy buttons */
+  content.innerHTML = `
+    <div>
+      <div class="section-header">
+        <span class="section-title">Question</span>
+        <button class="copy-btn" onclick="copyToClipboard(currentQuestion, this)">📋 Copy</button>
+      </div>
+      <div class="mono-stream" id="qStream"></div>
+
+      <hr style="opacity:.35; margin: 20px 0;">
+
+      <div class="section-header">
+        <span class="section-title">Answer</span>
+        <button class="copy-btn" onclick="copyToClipboard(currentAnswer, this)">📋 Copy</button>
+      </div>
+      <div class="mono-stream" id="aStream">(generating...)</div>
+    </div>`;
+
+  const qEl = document.getElementById('qStream');
+  const aEl = document.getElementById('aStream');
+  qEl.textContent = currentQuestion; /* Display the normalized question */
+  aEl.textContent = ''; /* Clear "(generating...)" initially */
+  return { qEl, aEl }; /* Return elements for updating */
+}
+
+function finalizeStreaming(question, fullAnswer){
+  currentQuestion = normalizeSection(question); /* Normalize question text */
+  currentAnswer  = normalizeSection(fullAnswer); /* Normalize answer text */
+
+  /* Build the final HTML structure with proper rendering and copy buttons */
+  content.innerHTML = `
+    <div class="section-header">
+      <span class="section-title">Question</span>
+      <button class="copy-btn" onclick="copyToClipboard(currentQuestion, this)">📋 Copy</button>
+    </div>
+    <div id="qRender" class="rendered"></div>
+
+    <hr style="opacity:.35; margin: 20px 0;">
+
+    <div class="section-header">
+      <span class="section-title">Answer</span>
+      <button class="copy-btn" onclick="copyToClipboard(currentAnswer, this)">📋 Copy</button>
+    </div>
+    <div id="aRender" class="rendered"></div>
+  `;
+
+  /* Render Markdown+LaTeX into the respective blocks */
+  const qRender = document.getElementById('qRender');
+  const aRender = document.getElementById('aRender');
+  qRender.innerHTML = renderMdLatex(currentQuestion); /* Render question */
+  aRender.innerHTML = renderMdLatex(currentAnswer); /* Render answer */
+
+  /* Apply MathJax typesetting to the rendered blocks */
+  if (window.MathJax?.typesetPromise) {
+    MathJax.typesetPromise([qRender, aRender]).then(hideProcessing) /* Hide processing indicator on success */
+      .catch(e => { console.error('MathJax error:', e); hideProcessing(); }); /* Hide on error */
+  } else {
+    hideProcessing(); /* Hide if MathJax is not available */
+  }
 }
 
 /* ======= OCR with Nebius API ======= */
@@ -457,20 +573,18 @@ async function ocrImage(base64Image) {
         'Authorization': `Bearer ${nebiusKey}`
       },
       body: JSON.stringify({
-        model: 'google/gemma-3-27b-it',
+        model: 'google/gemma-3-27b-it', /* Model for OCR */
         messages: [
           {
             role: 'system',
-            content: 'GIVE AS TEXT WITH LATEX like $this$ or $$this$$. NEVER USE \\itemize, \\begin{itemize}, \\end{itemize}, \\item or any list environments. Use plain text with numbers or letters for lists. DO NOT SOLVE THE QUESTION. DO NOT OUTPUT ANYTHING BUT THE EXACT FORMAT OF THE QUESTION AS IT APPEARS IN THE IMAGE.'
+            /* Enhanced prompt to prevent list environments and ensure raw LaTeX output */
+            content: 'OUTPUT ONLY the question text as plain text with LaTeX like $...$ or $$...$$. Do NOT SOLVE. NEVER use LaTeX list environments: \\itemize, \\enumerate, \\description, \\items or \\item. No bullet or numbered lists in LaTeX. If you need a list, write plain lines prefixed with "1) ", "a) " etc as text.'
           },
           {
             role: 'user',
             content: [
               { type: 'text', text: 'Image:' },
-              {
-                type: 'image_url',
-                image_url: { url: `data:image/png;base64,${base64Image}` } // Assuming PNG, adjust if needed
-              }
+              { type: 'image_url', image_url: { url: `data:image/png;base64,${base64Image}` } } /* Image data */
             ]
           }
         ]
@@ -483,7 +597,7 @@ async function ocrImage(base64Image) {
     }
 
     const data = await response.json();
-    return data.choices[0].message.content;
+    return data.choices[0].message.content; /* Return extracted text */
   } catch (error) {
     console.error('OCR Error:', error);
     alert('Error during OCR: ' + error.message);
@@ -491,58 +605,6 @@ async function ocrImage(base64Image) {
   }
 }
 
-/* ======= UI Helpers for Streaming ======= */
-let currentQuestion = '';
-let currentAnswer = '';
-
-function beginStreamingUI(question){
-  currentQuestion = question;
-  currentAnswer = '';
-  
-  // Show a lightweight, non-MathJax view while the model streams
-  content.innerHTML = `
-    <div>
-      <div class="section-header">
-        <p><strong>Question</strong>:</p>
-        <button class="copy-btn" onclick="copyToClipboard(currentQuestion, this)">📋 Copy</button>
-      </div>
-      <div class="mono-stream" id="qStream"></div>
-      <hr style="opacity:.35; margin: 20px 0;">
-      <div class="section-header">
-        <p><strong>Answer</strong>:</p>
-        <button class="copy-btn" onclick="copyToClipboard(currentAnswer, this)">📋 Copy</button>
-      </div>
-      <div class="mono-stream" id="aStream">(generating...)</div>
-    </div>`;
-  const qEl = document.getElementById('qStream');
-  const aEl = document.getElementById('aStream');
-  qEl.textContent = question;   // plain text now; pretty render later
-  aEl.textContent = '';         // clear "(generating...)"
-  return { qEl, aEl };
-}
-
-function finalizeStreaming(question, fullAnswer){
-  currentQuestion = question;
-  currentAnswer = fullAnswer;
-  
-  // Create HTML with copy buttons
-  const htmlContent = `
-<div class="section-header">
-  <strong>Question</strong>:
-  <button class="copy-btn" onclick="copyToClipboard(currentQuestion, this)">📋 Copy</button>
-</div>
-<div style="margin-bottom: 20px;">${question}</div>
-
-<div class="section-header">
-  <strong>Answer</strong>:
-  <button class="copy-btn" onclick="copyToClipboard(currentAnswer, this)">📋 Copy</button>
-</div>
-<div>${fullAnswer}</div>`;
-  
-  // Process the content with Markdown and MathJax
-  processContent(htmlContent);
-}
-
 /* ======= Solve with Cerebras API (Streaming Optimization) ======= */
 async function solveQuestion(question) {
   const cerebrasKey = localStorage.getItem('cerebras-api-key');
@@ -552,26 +614,25 @@ async function solveQuestion(question) {
   }
 
   showProcessing('Solving the question...');
-  const ui = beginStreamingUI(question); // Prepare the lightweight streaming UI
+  const ui = beginStreamingUI(question); /* Prepare the UI for streaming */
 
   try {
     const response = await fetch('https://api.cerebras.ai/v1/chat/completions', {
       method: 'POST',
       headers: {
         'Content-Type': 'application/json',
-        'Accept': 'text/event-stream',
+        'Accept': 'text/event-stream', /* Request server-sent events */
         'Authorization': `Bearer ${cerebrasKey}`
       },
       body: JSON.stringify({
         model: 'gpt-oss-120b',
         stream: true,
         max_tokens: 65536,
-        temperature: 0.1, // Set temperature to 0.1
-        reasoning_effort: 'medium', // Set reasoning_effort to 'medium'
-        // top_p: 1, // Removed as per user's request
+        temperature: 0.1, /* Lower temperature for more deterministic answers */
+        reasoning_effort: 'medium', /* Medium reasoning effort */
         messages: [
           { role: 'system', content: 'Solve this Question. Provide a clear, step-by-step solution.' },
-          { role: 'user', content: question }
+          { role: 'user', content: question } /* User's question */
         ]
       })
     });
@@ -584,66 +645,63 @@ async function solveQuestion(question) {
     const reader  = response.body.getReader();
     const decoder = new TextDecoder();
     let fullAnswer = '';
-    let buffer = '';                // buffer for partial SSE frames
+    let buffer = '';                /* Buffer for partial Server-Sent Events (SSE) frames */
     let lastFlushTime = 0;
-    const flushThrottle = 120;      // milliseconds to wait between DOM updates
+    const flushThrottle = 120;      /* Milliseconds to wait between DOM updates to prevent jank */
 
+    /* Helper to update the UI during streaming */
     const flushUI = () => {
-      // Update the lightweight streaming area without MathJax
-      ui.aEl.textContent = fullAnswer;
-      currentAnswer = fullAnswer; // Update global variable for copy button
-      lastFlushTime = performance.now();
+      ui.aEl.textContent = fullAnswer; /* Update the answer display */
+      currentAnswer = fullAnswer; /* Update global variable for copy button */
+      lastFlushTime = performance.now(); /* Record time of last update */
     };
 
     while (true) {
       const { done, value } = await reader.read();
-      if (done) break;
+      if (done) break; /* Exit loop if stream is done */
 
-      buffer += decoder.decode(value, { stream: true });
-      // SSE events are typically separated by '\n\n'
-      const events = buffer.split('\n\n');
-      buffer = events.pop() || ''; // Keep any incomplete event for the next chunk
+      buffer += decoder.decode(value, { stream: true }); /* Append decoded data */
+      const events = buffer.split('\n\n'); /* Split buffer by SSE frame delimiter */
+      buffer = events.pop() || ''; /* Keep any incomplete event for the next chunk */
 
       for (const evt of events) {
-        // Find the 'data:' line, which contains the JSON payload
-        const dataLine = evt.split('\n').find(line => line.trim().startsWith('data: '));
+        const dataLine = evt.split('\n').find(line => line.trim().startsWith('data: ')); /* Find data line */
         if (!dataLine) continue;
         
-        const data = dataLine.slice(6).trim(); // Remove 'data: ' prefix
-        if (data === '[DONE]') continue; // End of stream marker
+        const data = dataLine.slice(6).trim(); /* Extract JSON data */
+        if (data === '[DONE]') continue; /* Ignore end-of-stream marker */
 
         try {
           const parsed = JSON.parse(data);
-          // Extract content, being flexible with potential API response structures
+          /* Extract content delta from potential response structures */
           const deltaContent = parsed.choices?.[0]?.delta?.content
                              ?? parsed.choices?.[0]?.message?.content
-                             ?? parsed.choices?.[0]?.text // Some APIs might use 'text'
+                             ?? parsed.choices?.[0]?.text /* Fallback for other potential fields */
                              ?? '';
 
           if (deltaContent) {
-            fullAnswer += deltaContent;
-            // Throttle DOM updates to prevent excessive rendering and jank
+            fullAnswer += deltaContent; /* Append new content */
+            /* Throttle DOM updates to keep UI responsive */
             if (performance.now() - lastFlushTime > flushThrottle) {
               flushUI();
             }
           }
         } catch (e) {
-          // Ignore errors parsing JSON chunks if it's just partial data
+          /* Log errors parsing chunks, but continue streaming */
           console.error('Error parsing stream chunk data:', e, 'Chunk:', data);
         }
       }
     }
 
-    // Final flush to ensure all streamed content is displayed in the lightweight view
-    flushUI();
+    flushUI(); /* Final flush to display any remaining content */
 
-    // Once streaming is complete, perform the final, heavier render with Markdown and MathJax
+    /* After streaming, perform the final heavy render with Markdown and MathJax */
     finalizeStreaming(question, fullAnswer);
-    return fullAnswer;
+    return fullAnswer; /* Return the complete answer */
   } catch (error) {
     console.error('Solving Error:', error);
     alert('Error during solving: ' + error.message);
-    hideProcessing(); // Ensure the processing indicator is hidden on error
+    hideProcessing(); /* Ensure processing indicator is hidden on error */
     return null;
   }
 }
@@ -651,52 +709,70 @@ async function solveQuestion(question) {
 /* ======= Process image pipeline ======= */
 async function processImage(file) {
   try {
-    // Convert image to base64
+    /* Convert image file to base64 string */
     const base64 = await imageToBase64(file);
     
-    // OCR the image
+    /* OCR the image to get question text */
     const ocrText = await ocrImage(base64);
     if (!ocrText) {
-      hideProcessing();
+      /* Error handled within ocrImage, which calls hideProcessing */
       return;
     }
 
-    // Solve the question
+    /* Solve the question using the extracted text */
     const answer = await solveQuestion(ocrText);
-    // The solveQuestion function now handles hiding the processing indicator
-    // unless an error occurred, in which case it was hidden earlier.
+    /* solveQuestion handles hiding the processing indicator */
 
   } catch (error) {
     console.error('Image processing error:', error);
     alert('Error processing image: ' + error.message);
-    hideProcessing();
+    hideProcessing(); /* Ensure processing indicator is hidden on error */
   }
 }
 
+/* ======= Image to Base64 converter ======= */
+async function imageToBase64(file) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => {
+      /* Ensure it's a valid data URL and extract base64 part */
+      if (reader.result && reader.result.includes(',')) {
+        const base64 = reader.result.split(',')[1];
+        resolve(base64);
+      } else {
+        reject(new Error("Failed to read file as Data URL."));
+      }
+    };
+    reader.onerror = () => reject(reader.error); /* Reject on reader error */
+    reader.readAsDataURL(file); /* Read file as Data URL */
+  });
+}
+
+
 /* ======= FIXED paste listener - allows normal paste in input fields ======= */
 document.addEventListener('paste', async (e) => {
-  // Check if we're pasting into an input, textarea, or contenteditable element
+  /* Check if the paste event is happening inside an input, textarea, or contenteditable element */
   const activeElement = document.activeElement;
   const isInputField = activeElement && (
     activeElement.tagName === 'INPUT' || 
     activeElement.tagName === 'TEXTAREA' || 
-    activeElement.isContentEditable === true // Use isContentEditable for modern check
+    activeElement.isContentEditable === true /* Modern check for editable content */
   );
   
-  // If pasting into an input field, let the browser handle it normally
+  /* If pasting into an input field, let the browser handle it normally */
   if (isInputField) {
-    return; // Don't prevent default, let normal paste happen
+    return; /* Do not intercept, allow default paste behavior */
   }
   
-  // Otherwise, handle custom paste logic
-  e.preventDefault();
+  /* Otherwise, handle custom paste logic for the content area */
+  e.preventDefault(); /* Prevent default paste behavior */
   
-  // Check for image files first
+  /* Check for image files first in the clipboard data */
   const items = Array.from(e.clipboardData.items);
   const imageItem = items.find(item => item.type.startsWith('image/'));
   
   if (imageItem) {
-    // Handle image paste
+    /* Handle image paste: convert to base64, OCR, and solve */
     const file = imageItem.getAsFile();
     if (file) {
       await processImage(file);
@@ -704,9 +780,11 @@ document.addEventListener('paste', async (e) => {
       alert("Could not get image file from clipboard.");
     }
   } else {
-    // Handle text paste (existing functionality)
+    /* Handle text paste: process it directly */
     const txt = e.clipboardData.getData('text/plain');
-    if (txt.trim()) processContent(txt);
+    if (txt.trim()) {
+      processContent(txt); /* Use the processContent function for direct text pastes */
+    }
   }
 });
 
@@ -717,34 +795,35 @@ const nebiusKeyInput = document.getElementById('nebiusKey');
 const cerebrasKeyInput = document.getElementById('cerebrasKey');
 
 settingsBtn.addEventListener('click', () => {
-  // Load existing keys
+  /* Load existing API keys from localStorage when modal is opened */
   nebiusKeyInput.value = localStorage.getItem('nebius-api-key') || '';
   cerebrasKeyInput.value = localStorage.getItem('cerebras-api-key') || '';
-  settingsModal.classList.add('show');
+  settingsModal.classList.add('show'); /* Show the modal */
 });
 
 function closeSettings() {
-  settingsModal.classList.remove('show');
+  settingsModal.classList.remove('show'); /* Hide the modal */
 }
 
 function saveSettings() {
   const nebiusKey = nebiusKeyInput.value.trim();
   const cerebrasKey = cerebrasKeyInput.value.trim();
   
+  /* Save keys to localStorage if they are provided */
   if (nebiusKey) localStorage.setItem('nebius-api-key', nebiusKey);
   if (cerebrasKey) localStorage.setItem('cerebras-api-key', cerebrasKey);
   
-  closeSettings();
-  alert('API keys saved successfully!');
+  closeSettings(); /* Close the modal */
+  alert('API keys saved successfully!'); /* Confirmation */
 }
 
-// Close modal on escape or background click
+/* Close modal on escape key press or background click */
 settingsModal.addEventListener('click', (e) => {
-  if (e.target === settingsModal) closeSettings();
+  if (e.target === settingsModal) closeSettings(); /* Close if background clicked */
 });
 document.addEventListener('keydown', (e) => {
   if (e.key === 'Escape' && settingsModal.classList.contains('show')) {
-    closeSettings();
+    closeSettings(); /* Close if Escape key pressed and modal is shown */
   }
 });
 
@@ -758,7 +837,7 @@ content.addEventListener('click',()=>{
   }
 });
 
-/* smooth fade in */
+/* smooth fade in animation for the container */
 document.addEventListener('DOMContentLoaded',()=>{
   const sheet=document.querySelector('.container');
   sheet.style.opacity='0';
@@ -770,23 +849,27 @@ const btn          = document.getElementById('themeToggle');
 const prefersDark  = window.matchMedia('(prefers-color-scheme: dark)');
 const savedTheme   = localStorage.getItem('note-theme');
 
-initTheme();
+initTheme(); /* Initialize theme on load */
 btn.addEventListener('click',()=>{
-  document.body.classList.toggle('dark');
-  updateIcon();
-  localStorage.setItem('note-theme',document.body.classList.contains('dark')?'dark':'light');
+  document.body.classList.toggle('dark'); /* Toggle dark class on body */
+  updateIcon(); /* Update theme toggle icon */
+  localStorage.setItem('note-theme',document.body.classList.contains('dark')?'dark':'light'); /* Save theme preference */
 });
+
 function initTheme(){
+  /* Set initial theme based on saved preference or system preference */
   if(savedTheme){
     document.body.classList.toggle('dark',savedTheme==='dark');
   }else if(prefersDark.matches){
     document.body.classList.add('dark');
   }
-  updateIcon();
+  updateIcon(); /* Set initial icon */
 }
+
 function updateIcon(){
+  /* Update the moon/sun icon based on current theme */
   btn.textContent=document.body.classList.contains('dark')?'☀️':'🌙';
 }
 </script>
 </body>
-</html>
+</html>