Add initial onboarding app package

2026-04-27 20:41:37 +02:00 · 2023-12-19 09:13:33 +01:00
parent 4663645212
commit 70dd482276
9 changed files with 369 additions and 0 deletions
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Welcome to Tooloop OS</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+
+<body>
+
+    <div id="slider"></div>
+
+    <template id="slide-template">
+        <div class="slide">
+            <section class="image"></section>
+            <section class="description">
+                <h1></h1>
+                <p></p>
+            </section>
+        </div>
+    </template>
+
+    <nav>
+        <button class="slide-button previous" onclick="slider.previous(); slider.stop();">
+            <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-chevron-left" width="24"
+                height="24" viewBox="0 0 24 24" stroke-width="1.5" fill="none" stroke-linecap="miter"
+                stroke-linejoin="miter">
+                <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+                <path d="M15 6l-6 6l6 6" />
+            </svg>
+        </button>
+
+        <button class="slide-button next" onclick="slider.next(); slider.stop();">
+            <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-chevron-right" width="24"
+                height="24" viewBox="0 0 24 24" stroke-width="1.5" fill="none" stroke-linecap="miter"
+                stroke-linejoin="miter">
+                <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+                <path d="M9 6l6 6l-6 6" />
+            </svg>
+        </button>
+
+        <button class="close-button" onclick="window.close();">
+            <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-x" width="24" height="24"
+                viewBox="0 0 24 24" stroke-width="1.5" fill="none" stroke-linecap="round"
+                stroke-linejoin="round">
+                <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+                <path d="M18 6l-12 12" />
+                <path d="M6 6l12 12" />
+            </svg>
+        </button>
+    </nav>
+
+    <script src="slides/slides.js"></script>
+    <script src="Slider.js"></script>
+
+    <script>
+        var slider = new Slider("#slider", "#slide-template", slides, 12000);
+        // var scale = document.querySelector("html").clientWidth > 1920 ? 2.0 : 1.0;
+        // document.querySelector(':root').style.setProperty("--scale", scale);
+    </script>
+
+</body>
+
+</html>