Facelift

+ Light/Dark Mode + Theme Toggle
2026-02-23 15:50:46 +02:00 · 2022-05-19 01:42:06 +03:00
parent 0c5aaff479
commit 161973ea13
6 changed files with 149 additions and 65 deletions
--- a/templates/pages/index.html
+++ b/templates/pages/index.html
@@ -1,5 +1,59 @@
 {{ template "inc/header.html" .}}

+<style>
+
+</style>
+
 <body>
-    {{ template "inc/footer.html" .}}
-</body>
+
+    <main id="main-card" class="container rounded mt-5">
+        <div class="p-3">
+            <div class="logo-container w-100 d-flex mb-4">
+                <img src="/static/img/logo_transparent.png" alt="Logo" style="max-width: 50%; margin: 0 auto;"
+                    class="mx-auto">
+            </div>
+
+            <div class="form-group my-4">
+                <div class="search-action input-group">
+                    <input type="text" class="form-control form-control-lg" placeholder="What's your pad?"
+                        aria-label="What's your pad?" aria-describedby="pad-name-button" id="pad-name">
+                    <button class="btn btn-primary" type="button" id="pad-name-button">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor"
+                            class="bi bi-box-arrow-in-down" viewBox="0 0 16 16">
+                            <path fill-rule="evenodd"
+                                d="M3.5 6a.5.5 0 0 0-.5.5v8a.5.5 0 0 0 .5.5h9a.5.5 0 0 0 .5-.5v-8a.5.5 0 0 0-.5-.5h-2a.5.5 0 0 1 0-1h2A1.5 1.5 0 0 1 14 6.5v8a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 2 14.5v-8A1.5 1.5 0 0 1 3.5 5h2a.5.5 0 0 1 0 1h-2z" />
+                            <path fill-rule="evenodd"
+                                d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z" />
+                        </svg>
+                    </button>
+                </div>
+            </div>
+
+            <div class="why mb-4">
+                <p>
+                    Ever wanted to transport information across platforms
+                    without the hassle of loading times, sending files, logins, etc?
+                </p>
+                <p>
+                    <b>FreePad</b> can easily store text information in any predefined url,
+                    just write it in the box above and get to the right page, write anything in
+                    and access the same address on any other device to get your info!
+                </p>
+            </div>
+        </div>
+
+        <footer class="text-muted py-5 border-top text-center">
+            <p class="mb-1">
+                FreePad by <a href="https://justkato.me/">©Kato Twofold</a>
+            </p>
+            <p class="mb-0">
+                FreePad is freely available over on our <a href="https://github.com/JustKato/FreePad">GitHub</a>
+            </p>
+        </footer>
+
+    </main>
+
+    {{ template "inc/theme-toggle.html" .}}
+</body>
+
+{{ template "inc/footer.html" .}}
--- a/templates/pages/page.html
+++ b/templates/pages/page.html
@@ -1,55 +1,32 @@
 {{ template "inc/header.html" .}}

 <style>
-    .qrImage[src=""] {
-        display: none;
-    }
+
 </style>

 <body>

-    <div class="container is-fullhd p-4 mb-6" style="min-height: 35rem; height: calc(100vh - 18rem)">
-        <h1 class="title">FreePad</h1>
-        <img class="qrImage" src="" alt="" style="position: fixed;top: 1rem;left: 1rem;max-width: 13vw;">
-        <h2 class="subtitle">Reading from <code>{{.domain_base}}/{{.title}}</code></h2>
-
-        <hr>
-
-        <div class="content">
-            <div class="block">
-                <a href="/" class="button is-light">Back Home</a>
-                <a href="javascript:fetchMyQr()" class="button is-primary">QR</a>
-                <a href="javascript:updateSelf()" class="button is-success">Save</a>
-                <p class="mt-3">Status: <code class="has-text-primary" id="status-indicator">Loaded</code></p>
+    <main id="main-card" class="container rounded mt-5">
+        <div class="p-3">
+            <div class="why mb-4">
+                <p>
+                    [PLACEHOLDER TEXT] [PLACEHOLDER TEXT] [PLACEHOLDER TEXT]
+                    [PLACEHOLDER TEXT] [PLACEHOLDER TEXT] [PLACEHOLDER TEXT]
+                    [PLACEHOLDER TEXT] [PLACEHOLDER TEXT] [PLACEHOLDER TEXT]
+                    [PLACEHOLDER TEXT] [PLACEHOLDER TEXT] [PLACEHOLDER TEXT]
+                    [PLACEHOLDER TEXT] [PLACEHOLDER TEXT] [PLACEHOLDER TEXT]
+                    [PLACEHOLDER TEXT] [PLACEHOLDER TEXT] [PLACEHOLDER TEXT]
+                    [PLACEHOLDER TEXT] [PLACEHOLDER TEXT] [PLACEHOLDER TEXT]
+                    [PLACEHOLDER TEXT] [PLACEHOLDER TEXT] [PLACEHOLDER TEXT]
+                    [PLACEHOLDER TEXT] [PLACEHOLDER TEXT] [PLACEHOLDER TEXT]
+                    [PLACEHOLDER TEXT] [PLACEHOLDER TEXT] [PLACEHOLDER TEXT]
+                </p>
            </div>
-            <textarea class="input" name="post_content" id="post_content" onchange="updateSelf()">{{.post_content}}</textarea>
        </div>
-    </div>

-    <script>
+    </main>

-        async function fetchMyQr() {
-            let qrCode = await getQr(window.location.href)
-            .catch( err => {
-                console.error(err);
-            })
-            console.log(qrCode);
-            if ( !!qrCode.qr ) {
-                document.querySelectorAll(`.qrImage`).forEach( img => {
-                    console.log(img);
-                    console.log(qrCode.qr);
-                    img.src = qrCode.qr;
-                })
-            }
-
-        }
-
-        function updateSelf() {
-            updatePost({{.title}})
-        }
-    </script>
-
-    {{ template "inc/footer.html" .}}
+    {{ template "inc/theme-toggle.html" .}}
 </body>

-<script src="https://raw.githubusercontent.com/scotch-io/javascript-modal/master/Modal.js"></script>
+{{ template "inc/footer.html" .}}