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,17 +26,17 @@
 
             <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>
-            <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
                     class="qrcode"
                     style="padding: 1rem; background: white; border-radius: 8px"
@@ -54,6 +54,15 @@
                     });
                 </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>
             <div class="route-list">

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>
-        <meta charset="UTF-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <title>QRCode queue</title>
-        <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 %}
+{% endif %} {% endblock %}
-    </body>
-</html>

templates/queue.html

@@ -1,23 +1,10 @@
-<!DOCTYPE html>
+{% extends "base.html" %} {% block title %}Queue Input{% endblock %} {% block
-<html lang="en">
+content %}
-    <head>
-        <meta charset="UTF-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <title>Queue Input</title>
-        <link
-            rel="stylesheet"
-            href="{{ url_for('static', path='style.css') }}"
-        />
-    </head>
-    <body>
 <div class="queue-title">
     <h1 style="margin: 0">Add Links</h1>
     <div>
         <a href="/" class="btn" style="margin: 0">&larr; Home</a>
-                <a
+        <a href="javascript:location.reload()" class="btn" style="margin: 0"
-                    href="javascript:location.reload()"
-                    class="btn"
-                    style="margin: 0"
             >Reload</a
         >
     </div>
@@ -43,6 +30,4 @@
 </script>
 {% from "macros.html" import qrcode_queue %} {% if queue_items %}
 <p>total: {{ queue_items|length }}</p>
-        {% endif %} {{ qrcode_queue(queue_items) }}
+{% endif %} {{ qrcode_queue(queue_items) }} {% endblock %}
-    </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;