wip

2025-11-22 21:53:03 -06:00 · 2025-11-22 21:53:03 -06:00 · bba62e3527
commit bba62e3527
parent 8631733274
18 changed files with 916 additions and 11 deletions
--- a/qrcode/.null-ls_343321_index.html
+++ b/qrcode/.null-ls_343321_index.html
@ -0,0 +1,135 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>QR Code</title>
+  <style>
+    body {
+      background: black;
+      color: lime;
+      font-family: sans-serif;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      flex-direction: column;
+      height: 100vh;
+      margin: 0;
+    }
+    .container {
+      text-align: center;
+      font-size: 4rem;
+    }
+    #input {
+      min-width: 90vw;
+      min-height: 5rem;
+      font-size: 2rem;
+      padding: 1rem;
+      margin-bottom: 1rem;
+      color: lime;
+      background: black;
+      border: 2px solid lime;
+      word-break: break-word;
+    }
+    #qrcode {
+      margin-top: 1rem;
+    }
+    .modal-overlay {
+      position: fixed;
+      top: 0; left: 0;
+      width: 100vw;
+      height: 100vh;
+      background: rgba(0, 0, 0, 0.75);
+      display: none;
+      justify-content: center;
+      align-items: center;
+      z-index: 1000;
+    }
+    .modal {
+      background: black;
+      border: 2px solid lime;
+      border-radius: 0.5rem;
+      padding: 2rem;
+      color: lime;
+      font-size: 1.5rem;
+      max-width: 90%;
+    }
+    .modal h2 {
+      color: #00ff00;
+    }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <div id="input" contenteditable="true"></div>
+    <div id="qrcode"></div>
+  </div>
+
+  <div id="modal-overlay" class="modal-overlay">
+    <div class="modal">
+      <h2>Help</h2>
+      <p>Type or paste your text and press <code>g</code> to generate a QR code.</p>
+      <ul>
+        <li><kbd>Ctrl</kbd> + <kbd>v</kbd> = Paste</li>
+        <li><kbd>Ctrl</kbd> + <kbd>c</kbd> = Copy</li>
+        <li><kbd>g</kbd> = Generate</li>
+        <li><kbd>?</kbd> = Help</li>
+        <li><kbd>Esc</kbd> = Exit input or close modal</li>
+      </ul>
+    </div>
+  </div>
+
+  <script src="https://cdn.jsdelivr.net/npm/qrcode/build/qrcode.min.js"></script>
+  <script>
+    const inputEl = document.getElementById('input');
+    const qrContainer = document.getElementById('qrcode');
+    const overlay = document.getElementById('modal-overlay');
+
+    function toggleModal() {
+      overlay.style.display = overlay.style.display === 'flex' ? 'none' : 'flex';
+    }
+
+    function hideModal() {
+      overlay.style.display = 'none';
+    }
+
+    function generateQR(text) {
+      qrContainer.innerHTML = '';
+      QRCode.toCanvas(text, { color: { dark: '#00FF00', light: '#000000' } }, (err, canvas) => {
+        if (err) return console.error(err);
+        qrContainer.appendChild(canvas);
+      });
+    }
+
+    async function getClipboardContents() {
+      try {
+        return await navigator.clipboard.readText();
+      } catch (err) {
+        console.error('Clipboard error:', err);
+      }
+    }
+
+    document.addEventListener('keydown', async (e) => {
+      if (overlay.style.display === 'flex' && e.key === 'Escape') return hideModal();
+      if (e.key === '?') return toggleModal();
+
+      if (e.ctrlKey && e.key === 'c') {
+        navigator.clipboard.writeText(inputEl.textContent);
+      } else if (e.ctrlKey && e.key === 'v') {
+        const contents = await getClipboardContents();
+        inputEl.textContent = contents;
+      } else if (e.key === 'g') {
+        generateQR(inputEl.textContent);
+      } else if (e.key === 'Escape') {
+        inputEl.blur();
+      } else if (!e.ctrlKey && !e.metaKey && !e.altKey) {
+        inputEl.focus();
+      }
+    });
+
+    overlay.addEventListener('click', e => {
+      if (e.target === overlay) hideModal();
+    });
+  </script>
+</body>
+</html>