Spaces:
Running
Running
| <html lang="en"> | |
| <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 --> | |
| <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script> | |
| <!-- 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; | |
| } | |
| /* ------------- 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%; | |
| } | |
| /* 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; | |
| } | |
| .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; | |
| } | |
| #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; | |
| } | |
| /* 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; | |
| } | |
| /* placeholder */ | |
| .placeholder { | |
| color: #888; | |
| font-style: italic; | |
| text-align: center; | |
| padding: 110px 20px; | |
| user-select: none; | |
| } | |
| /* markdown tweaks */ | |
| blockquote { | |
| border-left: 4px solid #ccbfae; | |
| margin: 20px 0; | |
| padding: 15px 26px; | |
| background: #fbf8f1; | |
| font-style: italic; | |
| } | |
| code { | |
| font-family: 'PT Mono', monospace; | |
| background: #f2efe8; | |
| padding: 2px 6px; | |
| border-radius: 3px; | |
| font-size: 0.9em; | |
| } | |
| pre { | |
| background: #f4f2ec; | |
| padding: 16px 20px; | |
| border: 1px solid #e6e0d2; | |
| border-radius: 6px; | |
| overflow-x: auto; | |
| font-family: 'PT Mono', monospace; | |
| } | |
| /* ordered-list “a) / b)” style */ | |
| ol { | |
| counter-reset: item; | |
| padding-left: 0; | |
| list-style: none; | |
| } | |
| ol > li { | |
| counter-increment: item; | |
| margin: 0.5em 0 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) ')'; | |
| } | |
| /* 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; | |
| } | |
| /* 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 ; | |
| border: none; | |
| } | |
| .header, | |
| .processing, | |
| .instructions { | |
| display: none; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <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> | |
| const content = document.getElementById('content'); | |
| const processingIndicator = document.querySelector('.processing'); | |
| /* ------------- helper: processing badge ---------------- */ | |
| function showProcessing() { | |
| processingIndicator.classList.add('show'); | |
| } | |
| function hideProcessing() { | |
| setTimeout(() => processingIndicator.classList.remove('show'), 300); | |
| } | |
| /* ------------- main “render” 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++); | |
| } | |
| /* 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); | |
| /* markdown → HTML */ | |
| let html = marked.parse(text); | |
| /* restore LaTeX */ | |
| store.forEach((latex, i) => { | |
| html = html.replaceAll(PLACE(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(); | |
| } | |
| } | |
| /* ------------- paste listeners ------------------------- */ | |
| document.addEventListener('paste', (e) => { | |
| e.preventDefault(); | |
| const text = e.clipboardData.getData('text/plain'); | |
| if (text.trim()) processContent(text); | |
| }); | |
| /* 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); | |
| } | |
| }); | |
| /* 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); | |
| }); | |
| </script> | |
| </body> | |
| </html> |