template

static/css/components.css

@@ -130,6 +130,7 @@ textarea.form-control {
   align-items: center;
   margin-bottom: 2rem;
   box-sizing: border-box;
+  border-radius: var(--border-radius);
 }
 
 .nav-brand {

static/css/pages/pastepad.css

@@ -50,3 +50,7 @@
   width: 100%; /* Ensure full width */
   box-sizing: border-box;
 }
+
+.navbar:has( ~ .container .pastepad-container) {
+  max-width: 1000px;
+}

static/css/pages/queue.css

@@ -70,3 +70,7 @@ details:has(.route-list) {
 .queue-form textarea {
   resize: vertical;
 }
+
+.navbar:has(~ .container .queue-title) {
+  max-width: 800px;
+}

static/css/pages/trail.css

@@ -19,3 +19,9 @@
   color: #666;
   margin-top: 20px;
 }
+.trail-next {
+  max-width: 80%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

static/js/pastepad.js

@@ -78,7 +78,7 @@ document.addEventListener("DOMContentLoaded", () => {
                     <strong>${safeName}</strong>
                     <div class="actions">
                         <button onclick="editPaste('${safeName}')" class="btn-sm">Edit</button>
-                        <a href="/api/pastepad/${safeName}/raw" target="_blank" class="btn-sm">Raw</a>
+                        <a href="/api/pastepad/${safeName}/raw" target="_blank" class="btn btn-sm">Raw</a>
                         <button onclick="deletePaste('${safeName}')" class="btn-sm btn-danger">Delete</button>
                     </div>
                 </div>

templates/index.html

@@ -17,7 +17,7 @@
                 <h2>Input (PC)</h2>
                 <p>
                     Paste your OneTab export or list of links here to add them
-                    to the queue.
+                    to the queue
                 </p>
                 <div class="actions">
                     <a href="/queuein" class="btn">Add Links</a>
@@ -26,33 +26,42 @@
 
             <div class="card">
                 <h2>Output (Mobile)</h2>
-                <p>Open these on your phone to consume the queue.</p>
+                <p>Open these on your phone to consume the queue</p>
                 <div class="actions">
                     <a href="/q" class="btn">Reader (QR)</a>
                     <a href="/t" class="btn">Trail (Focus)</a>
                     <a href="/r" class="btn">Next Link</a>
                 </div>
             </div>
-        </div>
+
-        <div class="card" style="margin-block: 1em">
+            <div class="card">
-            <h2>Scan this page</h2>
+                <h2>Scan this page</h2>
-            <p>Connect your phone to the same Wi-Fi and scan this.</p>
+                <p>Connect your phone to the same Wi-Fi and scan this</p>
-            <div
+                <div
-                class="qrcode"
+                    class="qrcode"
-                style="padding: 1rem; background: white; border-radius: 8px"
+                    style="padding: 1rem; background: white; border-radius: 8px"
-                id="page_url"
+                    id="page_url"
-            ></div>
+                ></div>
-            <script src="https://cdn.jsdelivr.net/npm/[email protected]/qrcode.js"></script>
+                <script src="https://cdn.jsdelivr.net/npm/[email protected]/qrcode.js"></script>
-            <script>
+                <script>
-                new QRCode(document.getElementById("page_url"), {
+                    new QRCode(document.getElementById("page_url"), {
-                    text: "{{ page_url }}",
+                        text: "{{ page_url }}",
-                    width: 256,
+                        width: 256,
-                    height: 256,
+                        height: 256,
-                    colorDark: "#000000",
+                        colorDark: "#000000",
-                    colorLight: "#ffffff",
+                        colorLight: "#ffffff",
-                    correctLevel: QRCode.CorrectLevel.L,
+                        correctLevel: QRCode.CorrectLevel.L,
-                });
+                    });
-            </script>
+                </script>
+            </div>
+
+            <div class="card">
+                <h2>PastePad</h2>
+                <p>Paste your clipboard or any text and manage them!</p>
+                <div class="actions">
+                    <a href="/pastepad" class="btn">Visit</a>
+                </div>
+            </div>
         </div>
         <details>
             <summary>System Routes</summary>

templates/qq.html

@@ -1,19 +1,6 @@
-<!DOCTYPE html>
+{% extends "base.html" %} {% block title %}QRCode queue{% endblock %} {% block
-<html lang="en">
+content %} {% from "macros.html" import qrcode_queue %} {% if queue_items %}
-    <head>
+<p>total: {{ queue_items|length }}</p>
-        <meta charset="UTF-8" />
+{{ qrcode_queue(queue_items) }} {% else %}
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+<p>empty</p>
-        <title>QRCode queue</title>
+{% endif %} {% endblock %}
-        <link
-            rel="stylesheet"
-            href="{{ url_for('static', path='style.css') }}"
-        />
-    </head>
-    <body>
-        {% from "macros.html" import qrcode_queue %} {% if queue_items %}
-        <p>total: {{ queue_items|length }}</p>
-        {{ qrcode_queue(queue_items) }} {% else %}
-        <p>empty</p>
-        {% endif %}
-    </body>
-</html>

templates/queue.html

@@ -1,48 +1,33 @@
-<!DOCTYPE html>
+{% extends "base.html" %} {% block title %}Queue Input{% endblock %} {% block
-<html lang="en">
+content %}
-    <head>
+<div class="queue-title">
-        <meta charset="UTF-8" />
+    <h1 style="margin: 0">Add Links</h1>
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <div>
-        <title>Queue Input</title>
+        <a href="/" class="btn" style="margin: 0">&larr; Home</a>
-        <link
+        <a href="javascript:location.reload()" class="btn" style="margin: 0"
-            rel="stylesheet"
+            >Reload</a
-            href="{{ url_for('static', path='style.css') }}"
+        >
-        />
+    </div>
-    </head>
+</div>
-    <body>
+<form method="POST" action="/queuein" class="queue-form">
-        <div class="queue-title">
+    <textarea id="lines" rows="20" cols="100" name="lines"></textarea>
-            <h1 style="margin: 0">Add Links</h1>
+    <input type="submit" value="ahh" />
-            <div>
+</form>
-                <a href="/" class="btn" style="margin: 0">&larr; Home</a>
+<script>
-                <a
+    // lifted from google search ai
-                    href="javascript:location.reload()"
+    /**@type {HTMLTextAreaElement} */
-                    class="btn"
+    (document.getElementById("lines")).addEventListener(
-                    style="margin: 0"
+        "keydown",
-                    >Reload</a
+        function (e) {
-                >
+            // Check for Ctrl+Enter (Windows/Linux) or Command+Enter (Mac)
-            </div>
+            if ((e.ctrlKey || e.metaKey) && e.key === "Enter") {
-        </div>
+                e.preventDefault(); // Prevent the default newline character
-        <form method="POST" action="/queuein" class="queue-form">
+                // Submit the form associated with this textarea
-            <textarea id="lines" rows="20" cols="100" name="lines"></textarea>
+                this.form.submit();
-            <input type="submit" value="ahh" />
+            }
-        </form>
+        }
-        <script>
+    );
-            // lifted from google search ai
+</script>
-            /**@type {HTMLTextAreaElement} */
+{% from "macros.html" import qrcode_queue %} {% if queue_items %}
-            (document.getElementById("lines")).addEventListener(
+<p>total: {{ queue_items|length }}</p>
-                "keydown",
+{% endif %} {{ qrcode_queue(queue_items) }} {% endblock %}
-                function (e) {
-                    // Check for Ctrl+Enter (Windows/Linux) or Command+Enter (Mac)
-                    if ((e.ctrlKey || e.metaKey) && e.key === "Enter") {
-                        e.preventDefault(); // Prevent the default newline character
-                        // Submit the form associated with this textarea
-                        this.form.submit();
-                    }
-                }
-            );
-        </script>
-        {% from "macros.html" import qrcode_queue %} {% if queue_items %}
-        <p>total: {{ queue_items|length }}</p>
-        {% endif %} {{ qrcode_queue(queue_items) }}
-    </body>
-</html>

templates/trail.html

@@ -15,15 +15,7 @@
         <div class="trail-container">
             <div class="trail-count">{{ queue_length }}</div>
             <p>items left</p>
-
+            <p class="trail-next">
-            <p
-                style="
-                    max-width: 80%;
-                    overflow: hidden;
-                    text-overflow: ellipsis;
-                    white-space: nowrap;
-                "
-            >
                 Next:
                 <a
                     href="{{ current_link }}"
@@ -39,7 +31,7 @@
         <script>
             window.addEventListener("load", () => {
                 document.body.addEventListener("click", (e) => {
-                    if (e.target.tagName === "A") return;
+                    if (!e.target || e.target.tagName === "A") return;
                     // now this is not the new updated
                     const newTab = window.open("", "_blank");
 
@@ -54,7 +46,7 @@
                         // Trigger the message event to run the swap on the next tick
                         newTab.postMessage("");
 
-                        // background
+                        // background. This block is racing with the slow internet.
                         if (newTab.document.body) {
                             newTab.document.body.style.backgroundColor =
                                 getComputedStyle(document.body).backgroundColor;