[onboarding] slide texts, videos, thumbnail

onboarding/package/DEBIAN/control

@@ -4,11 +4,10 @@ Maintainer: Tooloop Multimedia
 Homepage: https://www.tooloop.de
 Bugs: https://github.com/Tooloop/Tooloop-Packages
 Section: tooloop/presentation
-Architecture: amd64
+Architecture: any
 Depends: chromium-browser
-Suggests: tooloop-nginx
 Name: Onboarding
 Description: Tipps and first steps
  Learn how to find your way in Tooloop OS.
-Thumbnail: onboarding-thumbnail.jpg
+Thumbnail: onboarding-thumbnail.png
 

onboarding/package/assets/data/css/styles.css

@@ -187,9 +187,11 @@ button.slide-button.next {
 }
 
 .slide .description code {
-    background-color: var(--medium-grey);
-    padding: 0.15rem 0.5rem;
-    color: white;
+    background-color: #ddd;
+    padding: 0.1rem 0.3rem;
+    color: var(--dark-grey);
+    font-size: 0.888rem;
+    border-radius: 2px;
 }
 
 .progressBar {

onboarding/package/assets/data/js/Slider.js

@@ -79,7 +79,8 @@ class Slider {
 
         // keyboard shortcuts
         document.addEventListener("keydown", (e) => {
-            e.preventDefault();
+            if (e.code === "ArrowLeft" || e.code === "ArrowRight")
+                e.preventDefault();
         });
         document.addEventListener("keyup", (e) => {
             if (e.code === "ArrowLeft") this.previous();

onboarding/package/assets/data/slides/slides.js

@@ -1,20 +1,35 @@
 var slides = [
     {
-        image: "Hello World.mp4",
+        image: "Hello world.mp4",
     },
     {
-        image: "placeholder-16x9.png",
-        title: "Mouse cursor",
-        description: `Your mouse cursor is hidden. It will show up if you move it. Click on the desktop to access the _menu_.`
+        image: "System menu.mp4",
+        title: "The system menu",
+        description: `Your mouse cursor is hidden. It will only show up if you move it.  
+        Click on the desktop to open the menu.`
     },
     {
-        image: "placeholder-16x9.png",
-        title: "Network access",
-        description: `Tooloop Boxes can be managed over the network. Just type the IP-address of this box into your browser.`
+        image: "System settings.mp4",
+        title: "System settings",
+        description: `Reach for the settings app to configure and monitor this computer.  
+        It’s browser-based so you can use it remotely.`
     },
     {
-        image: "placeholder-16x9.png",
-        title: "Documentation",
-        description: `You can find manuals and information at **tooloop-os.org**.`
+        image: "File management.mp4",
+        title: "File management",
+        description: `Tooloop OS is designed to be maintained over network.  
+        Administrate over \`SSH\` and manage files using \`SFTP\` or \`AFP\`.  
+        You can of course also use a USB flash drive.`
     },
+    {
+        image: "Automation.mp4",
+        title: "Automation",
+        description: `Integrate Tooloop Boxes with your automation system.  
+        Almost everything Tooloop OS can do can also be done via REST.`,
+    },
+    {
+        image: "Shortcuts.mp4",
+        title: "Shortcuts for your convenience",
+        description: `There are some handy keyboard shortcuts and terminal commands starting with _tooloop_, e. g. \`tooloop-presentation-start\`.`,
+    }
 ]