From a8b98c9226adfa693ff9d2197339125fbf5b2dd8 Mon Sep 17 00:00:00 2001
From: Daniel Stock <daniel.stock@tooloop.de>
Date: Fri, 31 May 2024 15:01:11 +0200
Subject: [PATCH] make the fallback page useful, fixes #3

---
 index.html | 168 +++++++++++++++++++++++++++++++++++++++++++++++++----
 1 file changed, 156 insertions(+), 12 deletions(-)
diff --git a/index.html b/index.html
index 4b90ff9..d4629d2 100644
--- a/index.html
+++ b/index.html
@@ -6,32 +6,176 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Tooloop Kiosk Browser</title>
     <style>
-        * {
-            font-family: system-ui, sans-serif;
-            font-weight: lighter;
-        }
-
         html,
         body {
-            background-color: black;
+            font-family: system-ui, sans-serif;
             display: flex;
             height: 100%;
             width: 100%;
             align-items: center;
             justify-content: center;
             flex-direction: column;
+            font-size: 18px;
+            color: white;
+            margin: 0;
+            padding: 0;
         }
-        
-        h1, p {
-            color: darkslateblue;
-            margin: 0.25em;
+
+        html {
+            /* background-color: #000; */
+            background-image: url('images/icon-512.png');
+            background-position: center center;
+            background-size: cover;
+            background-attachment: fixed;
+        }
+
+        body {
+            backdrop-filter: blur(10px) brightness(50%);
+        }
+
+        h1,
+        h2 {
+            line-height: 1;
+            margin: 1rem 0 1.333rem 0;
+        }
+
+        p {
+            line-height: 1.333;
+            margin: 1rem 0;
+        }
+
+        pre,
+        code {
+            background-color: hsl(0, 0%, 25%);
+            color: #f2f2f2;
+            font-size: 0.9rem;
+            padding: 0.1666em 0.333em;
+        }
+
+        pre {
+            overflow: auto;
+        }
+
+        #info {
+            max-width: 1280px;
+            margin: 0;
+            padding: 0 4rem;
+            height: 540px;
+            display: flex;
+            flex-direction: column;
+        }
+
+        #header {
+            display: flex;
+            align-items: center;
+            gap: 1rem;
+            margin-bottom: 2rem;
+        }
+
+        #header img {
+            width: 3rem;
+            height: 3rem;
+        }
+
+        #header h1 {
+            font-weight: 400;
+        }
+
+        .columns {
+            display: flex;
+            gap: 2rem;
+            flex-grow: 1;
+            max-height: 100%;
+        }
+
+        .card {
+            width: calc(calc(50% - 5rem));
+            color: black;
+            background-color: white;
+            padding: 1.1666rem 2rem;
+            border-radius: 0.5rem;
+            overflow: auto;
+        }
+
+        .card h2 {
+            color: #E6004D;
+            font-weight: 500;
+        }
+
+
+        @media screen and (max-width: 1024px) {
+
+            body,
+            html {
+                display: block;
+                /* height: auto; */
+            }
+
+            #info {
+                height: initial;
+                padding: 1rem;
+            }
+
+            .columns {
+                display: block;
+            }
+
+            .card {
+                width: calc(100% - 4rem);
+            }
+
+            .card+.card {
+                margin-top: 1rem;
+            }
+
+            pre {
+                white-space: preserve;
+            }
         }
     </style>
 </head>
 
 <body>
-    <h1>Tooloop Kiosk Browser</h1>
-    <p>www.tooloop.de</p>
+    <main id="info">
+
+        <div id="header" role="banner">
+            <img src="images/icon-512.png" alt="Application Icon" role="presentation">
+            <h1>Tooloop Kiosk Browser</h1>
+        </div>
+
+
+        <div class="columns">
+            <article class="card">
+                <h2>Add your content</h2>
+                <p>You can load a local page or an online ressource.</p>
+                <p>
+                    Put your local content in <code>/assets/data/index.html</code>
+                    or configure a URL in the config file (&rarr; see <i>Configuration</i>).
+                </p>
+            </article>
+
+            <article class="card">
+                <h2>Configuration</h2>
+                <p>If you need a config file, put it in either of these locations:</p>
+                <ol>
+                    <li><code>/assets/presentation/config.json</code></li>
+                    <li>The application folder</li>
+                </ol>
+                <p>Here is an example:</p>
+                <p>
+                <pre><code>{
+    "url": "https://www.tooloop.de",
+    "allowedDomains": [
+        "tooloop.de",
+        "www.tooloop.de"
+    ],
+    "logPath": "/assets/logs/Tooloop-Kiosk-Browser.log"
+}</code></pre>
+                </p>
+            </article>
+        </div>
+
+    </main>
 </body>
 
 </html>
\ No newline at end of file
