Pinboard

Running

App Files Files Community

SolarumAsteridion commited on 20 days ago

Commit

d197106

verified ·

1 Parent(s): c744306

Update index.html

Browse files

Files changed (1) hide show

index.html +256 -149

index.html CHANGED Viewed

@@ -3,28 +3,7 @@
 <head>
 <meta charset="UTF-8" />
 <meta name="viewport" content="width=device-width,initial-scale=1" />
-<title>LaTeX Notepad</title>
-<!-- ────────  MathJax  ──────── -->
-<script>
-window.MathJax = {
-  tex: {
-    inlineMath: [['$', '$'], ['\\(', '\\)']],
-    displayMath: [['$$', '$$'], ['\\[', '\\]']],
-    processEscapes: true,
-    processEnvironments: true,
-  },
-  options: { skipHtmlTags: ['script','noscript','style','textarea','pre'] }
-};
-</script>
-<script
-  id="MathJax-script"
-  async
-  src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js"
-></script>
-<!-- marked.js for Markdown -->
-<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
 <!-- Google fonts -->
 <link
@@ -36,7 +15,7 @@ window.MathJax = {
 /* ─────────────────────────────────────────
    COLOR SYSTEM (light / dark via variables)
    ───────────────────────────────────────── */
-:root {
   --desk-bg:         #fbf9f5;
   --desk-dot:        #e2dccd;
@@ -44,18 +23,25 @@ window.MathJax = {
   --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;
-}
-body.dark {
   --desk-bg:        #2c2a27;
   --desk-dot:       #3a3733;
@@ -63,15 +49,22 @@ body.dark {
   --paper-text:     #e9e7e2;
   --shadow:         rgba(0,0,0,.55);
-  --line:           rgba(110,103,94,.28);
   --perforation:    #6d6456;
-  --tbl-border:     #555048;
-  --blockquote-bg:  #38332e;
-  --blockquote-bar: #6a604e;
-  --code-bg:        #3a3530;
-  --code-border:    #514b42;
-  --inline-code-bg: #4a443d;
 }
 /* ─────────────────────────────────────────
@@ -85,17 +78,16 @@ body{
   background-size:14px 14px;
   font-family:'Crimson Text','Times New Roman',serif;
   color:var(--paper-text);
-  line-height:1.8;
   -webkit-font-smoothing:antialiased;
 }
 /* ─────────────────────────────────────────
-   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);
@@ -103,7 +95,6 @@ body{
   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%;
 }
 /* perforation holes */
@@ -121,77 +112,113 @@ body{
   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;
 }
-/* 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;
 }
-  /* put this anywhere after the existing #themeToggle rule */
-#themeToggle{
-  position:absolute;      /* you already have this */
-  z-index:10;             /* NEW – lift it above the curl */
-}
 #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}
-/* ───────── content area ───────── */
-#content{
-  min-height:520px;font-size:18px;position:relative;
-  padding:10px 0 10px 26px;overflow-wrap:break-word;hyphens:auto;
 }
-#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;
 }
-#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
 }
-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;
@@ -199,11 +226,14 @@ th{font-weight:600}
 }
 .processing.show{opacity:.9}
 /* responsive & print */
 @media(max-width:768px){
-  .container{margin:20px 16px;padding:28px}
-  #content{font-size:16px}
   h1{font-size:24px}
 }
 @media print{
   body{background:#fff}
@@ -219,100 +249,177 @@ th{font-weight:600}
     <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>
     </div>
-    <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
       </div>
     </div>
-    <div class="instructions" style="text-align:center;font-family:'PT Mono',monospace;font-size:14px;color:#666;font-style:italic;margin-top:22px;">
-      Tip: you can paste raw Markdown or TeX – it will be rendered instantly ✨
     </div>
   </div>
   <div class="processing">Processing…</div>
 <script>
-/* ======= processing badge helpers ======= */
-const content        = document.getElementById('content');
 const processingNode = document.querySelector('.processing');
-function showProcessing(){processingNode.classList.add('show')}
-function hideProcessing(){setTimeout(()=>processingNode.classList.remove('show'),300)}
-/* ======= markdown + latex pipeline ======= */
-function processContent(text){
-  showProcessing();
-  const store=[], PL=i=>`%%LATEX_${i}%%`; let idx=0;
-  const keep=m=>(store.push(m),PL(idx++));
-  text = text
-          .replace(/\\\[[\s\S]*?\\\]/g, keep)  // \[ ... \]
-          .replace(/\$\$[\s\S]*?\$\$/g, keep)  // $$ ... $$
-          .replace(/\\\([\s\S]*?\\\)/g, keep)  // \( ... \)
-          .replace(/\$([^\$\n]+?)\$/g,    keep); // $ ... $
-  let html = marked.parse(text);
-  store.forEach((latex,i)=>{html=html.replaceAll(PL(i),latex)});
-  content.innerHTML = html;
-  if(window.MathJax?.typesetPromise){
-    MathJax.typesetPromise([content]).then(hideProcessing)
-      .catch(e=>{console.error('MathJax error:',e);hideProcessing()});
-  }else{hideProcessing()}
 }
 /* ======= paste listener ======= */
-document.addEventListener('paste',e=>{
-  e.preventDefault();
-  const txt=e.clipboardData.getData('text/plain');
-  if(txt.trim())processContent(txt);
 });
-/* 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 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>

 <head>
 <meta charset="UTF-8" />
 <meta name="viewport" content="width=device-width,initial-scale=1" />
+<title>Question Sticky Board</title>
 <!-- Google fonts -->
 <link
 /* ─────────────────────────────────────────
    COLOR SYSTEM (light / dark via variables)
    ───────────────────────────────────────── */
+:root{
   --desk-bg:         #fbf9f5;
   --desk-dot:        #e2dccd;
   --paper-text:      #222;
   --shadow:          rgba(0,0,0,.35);
   --perforation:     #d0c6b7;
+  --board-line:      rgba(201,190,170,.18);
+  /* sticky colors */
+  --note-yellow:     #fff6a8;
+  --note-mint:       #d8f7e6;
+  --note-blush:      #ffe3e0;
+  --note-blue:       #e6f0ff;
+  --note-border:     rgba(0,0,0,.08);
+  --note-bar:        rgba(0,0,0,.04);
+  --note-text:       #2b2b2b;
+  --btn-fg:          #444;
+  --btn-fg-dim:      #666;
+  --btn-bg-hover:    rgba(0,0,0,.08);
+}
+body.dark{
   --desk-bg:        #2c2a27;
   --desk-dot:       #3a3733;
   --paper-text:     #e9e7e2;
   --shadow:         rgba(0,0,0,.55);
   --perforation:    #6d6456;
+  --board-line:     rgba(110,103,94,.28);
+  --note-yellow:    #6b6434;
+  --note-mint:      #3f5a50;
+  --note-blush:     #5b3f3c;
+  --note-blue:      #3e4c63;
+  --note-border:    rgba(0,0,0,.25);
+  --note-bar:       rgba(255,255,255,.05);
+  --note-text:      #f1efe9;
+  --btn-fg:         #ddd;
+  --btn-fg-dim:     #aaa;
+  --btn-bg-hover:   rgba(255,255,255,.1);
 }
 /* ─────────────────────────────────────────
   background-size:14px 14px;
   font-family:'Crimson Text','Times New Roman',serif;
   color:var(--paper-text);
   -webkit-font-smoothing:antialiased;
 }
 /* ─────────────────────────────────────────
+   PAPER CONTAINER
    ───────────────────────────────────────── */
 .container{
+  max-width:1100px;
   margin:40px auto;
+  padding:34px 34px 40px 50px;
   background:var(--paper-bg);
   color:var(--paper-text);
   border:1px solid rgba(0,0,0,.05);
   position:relative;
   box-shadow:0 18px 40px -22px var(--shadow),
              inset 0 2px 6px rgba(0,0,0,.06);
 }
 /* perforation holes */
   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%);
   border-bottom-left-radius:12px;
   pointer-events:none;
 }
+/* theme toggle */
 #themeToggle{
+  position:absolute;top:12px;right:14px;z-index:10;
   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:18px;padding-bottom:14px;border-bottom:1px solid rgba(0,0,0,.05)}
+h1{font-family:'Libre Baskerville',serif;margin:0;font-size:28px;letter-spacing:.4px}
 .subtitle{font-family:'PT Mono',monospace;font-size:14px;color:#666;margin-top:6px;letter-spacing:1px}
+/* board */
+#board{
+  min-height:520px;
+  position:relative;
+  padding:18px 6px 10px 6px;
+  display:grid;
+  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
+  gap:16px;
+  overflow:visible;
 }
+#board::before{
+  content:'';
+  position:absolute;inset:0 6px;
   background:repeating-linear-gradient(
     0deg,
+    transparent,transparent 2.8em,
+    var(--board-line) 2.8em,var(--board-line) 2.85em);
+  pointer-events:none;z-index:1;border-radius:8px;
+}
+#board > *{position:relative;z-index:2}
+/* placeholder */
+.placeholder{
+  color:#888;font-style:italic;text-align:center;
+  padding:120px 20px;user-select:none;grid-column:1/-1
+}
+/* sticky notes */
+.sticky{
+  position:relative;
+  border:1px solid var(--note-border);
+  border-radius:10px;
+  color:var(--note-text);
+  box-shadow:
+    0 10px 26px -16px var(--shadow),
+    inset 0 1px 0 rgba(255,255,255,.35);
+  transform:rotate(var(--tilt,0deg)) scale(1);
+  transition:transform .12s ease, box-shadow .12s ease, opacity .16s ease;
+  animation:pop .18s ease-out;
 }
+.sticky:hover{
+  transform:rotate(var(--tilt,0deg)) translateY(-2px) scale(1.01);
+  box-shadow:
+    0 14px 32px -18px var(--shadow),
+    inset 0 1px 0 rgba(255,255,255,.45);
+}
+@keyframes pop{from{transform:scale(.96);opacity:0}to{transform:scale(1);opacity:1}}
+.sticky.note-yellow{background:linear-gradient(180deg,var(--note-yellow),color-mix(in oklab,var(--note-yellow) 85%, #000 15%))}
+.sticky.note-mint  {background:linear-gradient(180deg,var(--note-mint),  color-mix(in oklab,var(--note-mint)   85%, #000 15%))}
+.sticky.note-blush {background:linear-gradient(180deg,var(--note-blush), color-mix(in oklab,var(--note-blush)  85%, #000 15%))}
+.sticky.note-blue  {background:linear-gradient(180deg,var(--note-blue),  color-mix(in oklab,var(--note-blue)   85%, #000 15%))}
+.sticky .bar{
+  display:flex;align-items:center;justify-content:space-between;
+  padding:6px 8px 4px 10px;
+  background:var(--note-bar);
+  border-top-left-radius:10px;border-top-right-radius:10px;
+  font-family:'PT Mono',monospace;
+  font-size:12px;letter-spacing:.3px
+}
+.badge{
+  background:rgba(0,0,0,.08);
+  padding:2px 6px;border-radius:999px;font-weight:600;
+}
+body.dark .badge{background:rgba(255,255,255,.12)}
+.sticky img{
+  width:100%;height:auto;display:block;
+  border-bottom-left-radius:10px;border-bottom-right-radius:10px;
+  background:
+    linear-gradient(180deg,rgba(255,255,255,.25),rgba(255,255,255,0));
+}
+/* delete button */
+.btn-del{
+  position:absolute;top:6px;right:6px;
+  width:26px;height:26px;border-radius:50%;
+  border:1px solid var(--note-border);
+  background:rgba(255,255,255,.35);
+  color:var(--btn-fg);font-weight:700;line-height:24px;text-align:center;
+  cursor:pointer;backdrop-filter:saturate(120%) blur(2px);
+  display:flex;align-items:center;justify-content:center;
+  opacity:.85;transition:background .12s, transform .12s, opacity .12s;
 }
+.btn-del:hover{background:var(--btn-bg-hover);transform:scale(1.06);opacity:1}
+.btn-del:active{transform:scale(.96)}
+/* processing badge */
 .processing{
   position:fixed;top:20px;right:20px;background:#333;color:#fff;
   padding:10px 20px;border-radius:6px;font-family:'PT Mono',monospace;
 }
 .processing.show{opacity:.9}
+/* instructions */
+.instructions{ text-align:center;font-family:'PT Mono',monospace;font-size:14px;color:#666;font-style:italic;margin-top:16px }
 /* responsive & print */
 @media(max-width:768px){
+  .container{margin:20px 16px;padding:24px}
   h1{font-size:24px}
+  #board{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
 }
 @media print{
   body{background:#fff}
     <button id="themeToggle" title="Toggle dark / light">🌙</button>
     <div class="header">
+      <h1>Question Sticky Board</h1>
+      <div class="subtitle">press ctrl+v anywhere to paste images of questions</div>
     </div>
+    <div id="board">
       <div class="placeholder">
+        Press <kbd>Ctrl</kbd>+<kbd>V</kbd> (or <kbd>⌘</kbd>+<kbd>V</kbd>) to paste screenshots/images.<br/>
+        You can also drag &amp; drop images here.
       </div>
     </div>
+    <div class="instructions">
+      Tip: each image becomes a sticky. Click the tiny × to delete.
     </div>
   </div>
   <div class="processing">Processing…</div>
 <script>
+/* ======= helpers ======= */
+const board          = document.getElementById('board');
 const processingNode = document.querySelector('.processing');
+const themeBtn       = document.getElementById('themeToggle');
+let noteCount = 0;
+function showProcessing(){ processingNode.classList.add('show') }
+function hideProcessing(){ setTimeout(()=>processingNode.classList.remove('show'),250) }
+function removePlaceholder(){
+  const ph = board.querySelector('.placeholder');
+  if(ph) ph.remove();
+}
+function randTilt(){
+  // small friendly tilt between -2.2deg and 2.2deg
+  const d = (Math.random()*4.4 - 2.2).toFixed(2);
+  return d + 'deg';
+}
+function pickColorClass(){
+  const choices = ['note-yellow','note-mint','note-blush','note-blue'];
+  return choices[Math.floor(Math.random()*choices.length)];
+}
+/* ======= create sticky from an image URL ======= */
+function createSticky(src, isBlobUrl=false){
+  removePlaceholder();
+  noteCount++;
+  const wrap = document.createElement('div');
+  const colorClass = pickColorClass();
+  wrap.className = `sticky ${colorClass}`;
+  wrap.style.setProperty('--tilt', randTilt());
+  // header bar
+  const bar = document.createElement('div');
+  bar.className = 'bar';
+  bar.innerHTML = `<span class="badge">Q${noteCount}</span><span style="opacity:.7">pasted</span>`;
+  // image
+  const img = document.createElement('img');
+  img.alt = `Question ${noteCount}`;
+  img.src = src;
+  // delete button
+  const btn = document.createElement('button');
+  btn.className = 'btn-del';
+  btn.setAttribute('aria-label','Delete sticky');
+  btn.textContent = '×';
+  btn.addEventListener('click',()=>{
+    wrap.style.opacity = '0';
+    wrap.style.transform = 'scale(.96)';
+    setTimeout(()=>{
+      // release blob URL to avoid memory leaks
+      if(isBlobUrl) URL.revokeObjectURL(src);
+      wrap.remove();
+      if(!board.querySelector('.sticky')){
+        // restore placeholder if empty
+        const ph = document.createElement('div');
+        ph.className = 'placeholder';
+        ph.innerHTML = `Press <kbd>Ctrl</kbd>+<kbd>V</kbd> (or <kbd>⌘</kbd>+<kbd>V</kbd>) to paste screenshots/images.<br/>You can also drag &amp; drop images here.`;
+        board.appendChild(ph);
+      }
+    },140);
+  });
+  wrap.appendChild(bar);
+  wrap.appendChild(img);
+  wrap.appendChild(btn);
+  board.prepend(wrap); // newest on top
+}
+/* ======= handle pasted images ======= */
+function filesFromClipboard(dataTransfer){
+  const items = dataTransfer?.items || [];
+  const files = [];
+  for(const it of items){
+    if(it.kind === 'file' && it.type.startsWith('image/')){
+      const f = it.getAsFile();
+      if(f) files.push(f);
+    }
+  }
+  return files;
+}
+async function handleImages(files){
+  if(!files.length){
+    // no images, brief nudge
+    processingNode.textContent = 'No images found in clipboard';
+    showProcessing(); hideProcessing();
+    processingNode.textContent = 'Processing…';
+    return;
+  }
+  showProcessing();
+  for(const file of files){
+    const url = URL.createObjectURL(file);
+    createSticky(url, true);
+  }
+  hideProcessing();
 }
 /* ======= paste listener ======= */
+document.addEventListener('paste', e=>{
+  const files = filesFromClipboard(e.clipboardData);
+  if(files.length){ e.preventDefault(); handleImages(files); }
 });
+/* ======= drag & drop (optional bonus) ======= */
+board.addEventListener('dragover', e=>{
+  e.preventDefault();
+  board.style.outline = '2px dashed rgba(0,0,0,.2)';
 });
+board.addEventListener('dragleave', ()=>{
+  board.style.outline = 'none';
+});
+board.addEventListener('drop', e=>{
+  e.preventDefault();
+  board.style.outline = 'none';
+  const dtFiles = [...(e.dataTransfer?.files || [])].filter(f=>f.type.startsWith('image/'));
+  handleImages(dtFiles);
 });
 /* ======= theme toggler ======= */
 const prefersDark  = window.matchMedia('(prefers-color-scheme: dark)');
 const savedTheme   = localStorage.getItem('note-theme');
 initTheme();
+themeBtn.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(){
+  themeBtn.textContent = document.body.classList.contains('dark') ? '☀️' : '🌙';
 }
+/* ======= 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);
+});
 </script>
 </body>
 </html>