Update index.html

index.html

@@ -5,7 +5,7 @@
 <meta name="viewport" content="width=device-width,initial-scale=1" />
 <title>LaTeX Notepad</title>
 
-<!-- MathJax -->
+<!-- ────────  MathJax  ──────── -->
 <script>
 window.MathJax = {
   tex: {
@@ -14,9 +14,7 @@ window.MathJax = {
     processEscapes: true,
     processEnvironments: true,
   },
-  options: {
-    skipHtmlTags: ['script', 'noscript', 'style', 'textarea', 'pre'],
-  },
+  options: { skipHtmlTags: ['script','noscript','style','textarea','pre'] }
 };
 </script>
 <script
@@ -25,259 +23,193 @@ window.MathJax = {
   src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js"
 ></script>
 
-<!-- marked.js -->
+<!-- marked.js for Markdown -->
 <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
 
-<!-- Google-fonts -->
+<!-- Google fonts -->
 <link
   href="https://fonts.googleapis.com/css2?family=Crimson+Text:wght@400;600&family=Libre+Baskerville:wght@400;700&family=PT+Mono&display=swap"
   rel="stylesheet"
 />
 
 <style>
-/* ----------- GLOBAL “DESK” BACKGROUND ---------- */
-html,
-body {
-  height: 100%;
-}
-body {
-  margin: 0;
-  background: #fbf9f5;
-  background-image: radial-gradient(#e2dccd 1px, transparent 1px);
-  background-size: 14px 14px;
-  font-family: 'Crimson Text', 'Times New Roman', serif;
-  color: #222;
-  line-height: 1.8;
-  -webkit-font-smoothing: antialiased;
+/* ─────────────────────────────────────────
+   COLOR SYSTEM (light / dark via variables)
+   ───────────────────────────────────────── */
+:root {
+  --desk-bg:         #fbf9f5;
+  --desk-dot:        #e2dccd;
+
+  --paper-bg:        #fffefa;
+  --paper-text:      #222;
+  --shadow:          rgba(0,0,0,.35);
+
+  --line:            rgba(201,190,170,.18);
+  --perforation:     #d0c6b7;
+
+  --tbl-border:      #d7cebf;
+  --blockquote-bg:   #fbf8f1;
+  --blockquote-bar:  #ccbfae;
+  --code-bg:         #f4f2ec;
+  --code-border:     #e6e0d2;
+  --inline-code-bg:  #f2efe8;
 }
 
-/* ------------- PAPER SHEET -------------------- */
-.container {
-  max-width: 840px;
-  margin: 40px auto;
-  padding: 40px 60px 60px;
-  background: #fffefa;                       /* warm paper colour */
-  border-radius: 12px 12px 10px 10px;
-  position: relative;
-  border: 1px solid #ede7db;
-
-  /* subtle inset shadow (feels like a notebook page) */
-  box-shadow:
-      0 18px 40px -22px rgba(0, 0, 0, 0.35),
-      inset 0 2px 6px rgba(0, 0, 0, 0.06);
-
-  /* tiny surface grain */
-  background-image:
-      url('data:image/svg+xml;utf8,\
-        <svg xmlns="http://www.w3.org/2000/svg" width=\"160\" height=\"160\" viewBox=\"0 0 40 40\" fill=\"%23dcd2c3\" opacity=\"0.35\">\
-          <circle cx=\"1\" cy=\"1\" r=\"0.5\"/><circle cx=\"13\" cy=\"7\" r=\"0.4\"/>\
-          <circle cx=\"27\" cy=\"4\" r=\"0.6\"/><circle cx=\"37\" cy=\"14\" r=\"0.5\"/>\
-          <circle cx=\"20\" cy=\"20\" r=\"0.7\"/><circle cx=\"6\" cy=\"28\" r=\"0.4\"/>\
-          <circle cx=\"32\" cy=\"32\" r=\"0.5\"/><circle cx=\"11\" cy=\"38\" r=\"0.7\"/>\
-        </svg>');
-  background-size: 160px 160px, 100% 100%;
-}
+body.dark {
+  --desk-bg:        #2c2a27;
+  --desk-dot:       #3a3733;
 
-/* perforation holes (left edge) */
-.container::before {
-  content: '';
-  position: absolute;
-  top: 26px;
-  bottom: 26px;
-  left: 30px;
-  width: 9px;
-  background-image: radial-gradient(
-    circle at center,
-    #d0c6b7 0px,
-    #d0c6b7 2px,
-    transparent 3px
-  );
-  background-size: 9px 28px;
-  background-repeat: repeat-y;
-  pointer-events: none;
-}
-/* curled top-right corner */
-.container::after {
-  content: '';
-  position: absolute;
-  top: 0;
-  right: 0;
-  width: 110px;
-  height: 110px;
-  background: linear-gradient(
-      135deg,
-      rgba(0, 0, 0, 0.08) 0%,
-      rgba(0, 0, 0, 0) 42%
-    ),
-    linear-gradient(
-      135deg,
-      #fffefa 0%,
-      #fffefa 50%,
-      rgba(255, 255, 255, 0) 51%
-    );
-  background-size: 100% 100%;
-  border-bottom-left-radius: 12px;
-  transform: translate(1px, -1px);
-  pointer-events: none;
-}
+  --paper-bg:       #302e2b;
+  --paper-text:     #e9e7e2;
+  --shadow:         rgba(0,0,0,.55);
 
-.header {
-  text-align: center;
-  margin-bottom: 34px;
-  padding-bottom: 18px;
-  border-bottom: 1px solid #f2ede3;
-}
-h1 {
-  font-family: 'Libre Baskerville', serif;
-  margin: 0;
-  font-size: 30px;
-  letter-spacing: 0.5px;
-}
-.subtitle {
-  font-family: 'PT Mono', monospace;
-  font-size: 14px;
-  letter-spacing: 1px;
-  color: #666;
-  margin-top: 6px;
-}
+  --line:           rgba(110,103,94,.28);
+  --perforation:    #6d6456;
 
-#content {
-  min-height: 520px;
-  font-size: 18px;
-  position: relative;
-  padding: 10px 0 10px 26px;          /* leave room for “margin” lines */
-  overflow-wrap: break-word;
-  hyphens: auto;
+  --tbl-border:     #555048;
+  --blockquote-bg:  #38332e;
+  --blockquote-bar: #6a604e;
+  --code-bg:        #3a3530;
+  --code-border:    #514b42;
+  --inline-code-bg: #4a443d;
 }
 
-/* faint horizontal ruled lines (lined paper) */
-#content::before {
-  content: '';
-  position: absolute;
-  inset: 0;
-  background: repeating-linear-gradient(
-    0deg,
-    transparent,
-    transparent 2.65em,
-    rgba(201, 190, 170, 0.18) 2.65em,
-    rgba(201, 190, 170, 0.18) 2.7em
-  );
-  pointer-events: none;
-  z-index: 1;
-}
-/* bring actual text above the ruled lines */
-#content * {
-  position: relative;
-  z-index: 2;
+/* ─────────────────────────────────────────
+   GLOBAL “DESK” BACKGROUND
+   ───────────────────────────────────────── */
+html,body{height:100%}
+body{
+  margin:0;
+  background: var(--desk-bg);
+  background-image: radial-gradient(var(--desk-dot) 1px,transparent 1px);
+  background-size:14px 14px;
+  font-family:'Crimson Text','Times New Roman',serif;
+  color:var(--paper-text);
+  line-height:1.8;
+  -webkit-font-smoothing:antialiased;
 }
 
-/* placeholder */
-.placeholder {
-  color: #888;
-  font-style: italic;
-  text-align: center;
-  padding: 110px 20px;
-  user-select: none;
+/* ─────────────────────────────────────────
+   PAPER SHEET
+   ───────────────────────────────────────── */
+.container{
+  max-width:840px;
+  margin:40px auto;
+  padding:40px 60px 60px;
+  background:var(--paper-bg);
+  color:var(--paper-text);
+  border:1px solid rgba(0,0,0,.05);
+  border-radius:12px 12px 10px 10px;
+  position:relative;
+  box-shadow:0 18px 40px -22px var(--shadow),
+             inset 0 2px 6px rgba(0,0,0,.06);
+  background-size:160px 160px,100% 100%;
 }
 
-/* markdown tweaks */
-blockquote {
-  border-left: 4px solid #ccbfae;
-  margin: 20px 0;
-  padding: 15px 26px;
-  background: #fbf8f1;
-  font-style: italic;
+/* perforation holes */
+.container::before{
+  content:'';
+  position:absolute;top:26px;bottom:26px;left:30px;width:9px;
+  background-image:radial-gradient(circle var(--perforation) 0%,var(--perforation) 2px,transparent 3px);
+  background-size:9px 28px;
+  background-repeat:repeat-y;
+  pointer-events:none;
 }
-code {
-  font-family: 'PT Mono', monospace;
-  background: #f2efe8;
-  padding: 2px 6px;
-  border-radius: 3px;
-  font-size: 0.9em;
+/* curled corner */
+.container::after{
+  content:'';position:absolute;top:0;right:0;width:110px;height:110px;
+  background:
+    linear-gradient(135deg,rgba(0,0,0,.08) 0%,rgba(0,0,0,0) 42%),
+    linear-gradient(135deg,var(--paper-bg) 0%,var(--paper-bg) 50%,rgba(255,255,255,0) 51%);
+  background-size:100% 100%;
+  border-bottom-left-radius:12px;
+  transform:translate(1px,-1px);
+  pointer-events:none;
 }
-pre {
-  background: #f4f2ec;
-  padding: 16px 20px;
-  border: 1px solid #e6e0d2;
-  border-radius: 6px;
-  overflow-x: auto;
-  font-family: 'PT Mono', monospace;
+
+/* dark-mode gradient uses the *same* var so stays consistent */
+
+/* ───────── theme toggle ───────── */
+#themeToggle{
+  position:absolute;top:12px;right:14px;
+  font-size:20px;background:none;border:none;cursor:pointer;
+  transition:transform .25s;
+  user-select:none;
 }
+#themeToggle:hover{transform:rotate(20deg)scale(1.15)}
+
+/* ───────── header ───────── */
+.header{text-align:center;margin-bottom:34px;padding-bottom:18px;border-bottom:1px solid rgba(0,0,0,.05)}
+h1{font-family:'Libre Baskerville',serif;margin:0;font-size:30px;letter-spacing:.5px}
+.subtitle{font-family:'PT Mono',monospace;font-size:14px;color:#666;margin-top:6px;letter-spacing:1px}
 
-/* ordered-list “a) / b)” style */
-ol {
-  counter-reset: item;
-  padding-left: 0;
-  list-style: none;
+/* ───────── content area ───────── */
+#content{
+  min-height:520px;font-size:18px;position:relative;
+  padding:10px 0 10px 26px;overflow-wrap:break-word;hyphens:auto;
 }
-ol > li {
-  counter-increment: item;
-  margin: 0.5em 0 0.5em 2em;
+#content::before{
+  content:'';position:absolute;inset:0;
+  background:repeating-linear-gradient(
+    0deg,
+    transparent,transparent 2.65em,
+    var(--line) 2.65em,var(--line) 2.7em);
+  pointer-events:none;z-index:1;
 }
-ol > li::before {
-  content: counter(item) ')';
-  display: inline-block;
-  width: 1.5em;
-  margin-left: -2em;
-  text-align: right;
-  font-weight: 600;
+#content *{position:relative;z-index:2}
+.placeholder{color:#888;font-style:italic;text-align:center;padding:110px 20px;user-select:none}
+
+/* ───────── markdown tweaks ───────── */
+blockquote{
+  border-left:4px solid var(--blockquote-bar);
+  margin:20px 0;padding:15px 26px;
+  background:var(--blockquote-bg);font-style:italic
 }
-ol ol > li::before {
-  content: counter(item, lower-alpha) ')';
+code{font-family:'PT Mono',monospace;background:var(--inline-code-bg);
+  padding:2px 6px;border-radius:3px;font-size:.9em}
+pre{background:var(--code-bg);padding:16px 20px;border:1px solid var(--code-border);
+  border-radius:6px;overflow-x:auto;font-family:'PT Mono',monospace}
+
+/* lists */
+ol{counter-reset:item;padding-left:0;list-style:none}
+ol>li{counter-increment:item;margin:.5em 0 .5em 2em}
+ol>li::before{content:counter(item)')';display:inline-block;width:1.5em;margin-left:-2em;text-align:right;font-weight:600}
+ol ol>li::before{content:counter(item,lower-alpha)')'}
+
+/* ───────── TABLES ───────── */
+table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;margin:1.2em 0}
+thead tr{border-bottom:1px solid var(--tbl-border)}
+tbody tr:not(:last-child){border-bottom:1px solid var(--tbl-border)}
+th,td{padding:.55em .8em;text-align:right}
+th{font-weight:600}
+
+/* ───────── processing badge ───────── */
+.processing{
+  position:fixed;top:20px;right:20px;background:#333;color:#fff;
+  padding:10px 20px;border-radius:6px;font-family:'PT Mono',monospace;
+  font-size:14px;opacity:0;transition:opacity .25s;z-index:2000
 }
+.processing.show{opacity:.9}
 
-/* processing badge */
-.processing {
-  position: fixed;
-  top: 20px;
-  right: 20px;
-  background: #333;
-  color: #fff;
-  padding: 10px 20px;
-  border-radius: 6px;
-  font-family: 'PT Mono', monospace;
-  font-size: 14px;
-  opacity: 0;
-  transition: opacity 0.25s;
-  z-index: 2000;
-}
-.processing.show {
-  opacity: 0.9;
+/* responsive & print */
+@media(max-width:768px){
+  .container{margin:20px 16px;padding:28px}
+  #content{font-size:16px}
+  h1{font-size:24px}
 }
-
-/* small screens */
-@media (max-width: 768px) {
-  .container {
-    margin: 20px 16px;
-    padding: 28px;
-  }
-  #content {
-    font-size: 16px;
-  }
-  h1 {
-    font-size: 24px;
-  }
-}
-
-/* print */
-@media print {
-  body {
-    background: #fff;
-  }
-  .container {
-    box-shadow: none !important;
-    border: none;
-  }
-  .header,
-  .processing,
-  .instructions {
-    display: none;
-  }
+@media print{
+  body{background:#fff}
+  .container{box-shadow:none;border:none}
+  .header,.processing,.instructions,#themeToggle{display:none}
 }
 </style>
 </head>
+
 <body>
   <div class="container">
+    <!-- theme icon -->
+    <button id="themeToggle" title="Toggle dark / light">🌙</button>
+
     <div class="header">
       <h1>LaTeX Notepad</h1>
       <div class="subtitle">press ctrl+v anywhere to render</div>
@@ -285,8 +217,7 @@ ol ol > li::before {
 
     <div id="content">
       <div class="placeholder">
-        Press <kbd>Ctrl</kbd>+<kbd>V</kbd> (or <kbd>⌘</kbd>+<kbd>V</kbd>) to paste
-        and render Markdown/LaTeX
+        Press <kbd>Ctrl</kbd>+<kbd>V</kbd> (or <kbd>⌘</kbd>+<kbd>V</kbd>) to paste and render Markdown / LaTeX
       </div>
     </div>
 
@@ -298,86 +229,82 @@ ol ol > li::before {
   <div class="processing">Processing…</div>
 
 <script>
-const content = document.getElementById('content');
-const processingIndicator = document.querySelector('.processing');
+/* ======= processing badge helpers ======= */
+const content        = document.getElementById('content');
+const processingNode = document.querySelector('.processing');
 
-/* ------------- helper: processing badge ---------------- */
-function showProcessing() {
-  processingIndicator.classList.add('show');
-}
-function hideProcessing() {
-  setTimeout(() => processingIndicator.classList.remove('show'), 300);
-}
+function showProcessing(){processingNode.classList.add('show')}
+function hideProcessing(){setTimeout(()=>processingNode.classList.remove('show'),300)}
 
-/* ------------- main “render” pipeline ------------------ */
-function processContent(text) {
+/* ======= markdown + latex pipeline ======= */
+function processContent(text){
   showProcessing();
 
-  /* protect LaTeX so marked.js doesn’t mangle it */
-  const store = [];
-  const PLACE = (i) => `%%LATEX_${i}%%`;
-  let idx = 0;
-
-  function keep(m) {
-    store.push(m);
-    return PLACE(idx++);
-  }
+  const store=[], PL=i=>`%%LATEX_${i}%%`; let idx=0;
+  const keep=m=>(store.push(m),PL(idx++));
 
-  /* Display: \[...\], $$...$$   then Inline: \(...\), $...$  */
   text = text
-    .replace(/\\\[[\s\S]*?\\\]/g, keep)
-    .replace(/\$\$[\s\S]*?\$\$/g, keep)
-    .replace(/\\\([\s\S]*?\\\)/g, keep)
-    /* single $…$ but NOT $$…$$ */
-    .replace(/\$([^\$\n]+?)\$/g, keep);
+          .replace(/\\\[[\s\S]*?\\\]/g, keep)  // \[ ... \]
+          .replace(/\$\$[\s\S]*?\$\$/g, keep)  // $$ ... $$
+          .replace(/\\\([\s\S]*?\\\)/g, keep)  // \( ... \)
+          .replace(/\$([^\$\n]+?)\$/g,    keep); // $ ... $
 
-  /* markdown → HTML */
   let html = marked.parse(text);
-
-  /* restore LaTeX */
-  store.forEach((latex, i) => {
-    html = html.replaceAll(PLACE(i), latex);
-  });
-
+  store.forEach((latex,i)=>{html=html.replaceAll(PL(i),latex)});
   content.innerHTML = html;
 
-  /* trigger MathJax */
-  if (window.MathJax?.typesetPromise) {
-    MathJax.typesetPromise([content]).then(hideProcessing).catch(e => {
-      console.error('MathJax error:', e);
-      hideProcessing();
-    });
-  } else {
-    hideProcessing();
-  }
+  if(window.MathJax?.typesetPromise){
+    MathJax.typesetPromise([content]).then(hideProcessing)
+      .catch(e=>{console.error('MathJax error:',e);hideProcessing()});
+  }else{hideProcessing()}
 }
 
-/* ------------- paste listeners ------------------------- */
-document.addEventListener('paste', (e) => {
+/* ======= paste listener ======= */
+document.addEventListener('paste',e=>{
   e.preventDefault();
-  const text = e.clipboardData.getData('text/plain');
-  if (text.trim()) processContent(text);
+  const txt=e.clipboardData.getData('text/plain');
+  if(txt.trim())processContent(txt);
 });
 
-/* subtle “rubber-band” hint if user clicks before any content */
-content.addEventListener('click', () => {
-  const ph = content.querySelector('.placeholder');
-  if (ph) {
-    ph.style.transform = 'scale(0.97)';
-    ph.style.transition = 'transform 0.12s';
-    setTimeout(() => (ph.style.transform = 'scale(1)'), 120);
+/* small “bounce” on placeholder click */
+content.addEventListener('click',()=>{
+  const ph=content.querySelector('.placeholder');
+  if(ph){
+    ph.style.transform='scale(.97)';
+    ph.style.transition='transform .12s';
+    setTimeout(()=>ph.style.transform='scale(1)',120);
   }
 });
 
-/* smooth initial fade-in */
-document.addEventListener('DOMContentLoaded', () => {
-  const sheet = document.querySelector('.container');
-  sheet.style.opacity = '0';
-  setTimeout(() => {
-    sheet.style.transition = 'opacity 0.6s ease';
-    sheet.style.opacity = '1';
-  }, 80);
+/* smooth fade in */
+document.addEventListener('DOMContentLoaded',()=>{
+  const sheet=document.querySelector('.container');
+  sheet.style.opacity='0';
+  setTimeout(()=>{sheet.style.transition='opacity .6s ease';sheet.style.opacity='1'},80);
 });
+
+/* ======= theme toggler ======= */
+const btn          = document.getElementById('themeToggle');
+const prefersDark  = window.matchMedia('(prefers-color-scheme: dark)');
+const savedTheme   = localStorage.getItem('note-theme');
+
+initTheme();
+btn.addEventListener('click',()=>{
+  document.body.classList.toggle('dark');
+  updateIcon();
+  localStorage.setItem('note-theme',document.body.classList.contains('dark')?'dark':'light');
+});
+function initTheme(){
+  if(savedTheme){
+    document.body.classList.toggle('dark',savedTheme==='dark');
+  }else if(prefersDark.matches){
+    document.body.classList.add('dark');
+  }
+  updateIcon();
+}
+function updateIcon(){
+  btn.textContent=document.body.classList.contains('dark')?'☀️':'🌙';
+}
 </script>
 </body>
 </html>