reworked and updated introduction page

SubBox/wwwroot/css/tutorial.css

@@ -10,7 +10,7 @@
 
 section {
     display: flex;
-    height: 540px;
+    height: 48%;
     width: 100%;
     padding: 0px;
     justify-content: center;
@@ -27,7 +27,7 @@ button {
 }
 
 .refreshButton {
-    color: #fafafa;
+    color: #131313;
     transition: transform 1s;
 }
 
@@ -58,13 +58,76 @@ li {
     line-height: 24px;
 }
 
+.sidebar {
+    position: fixed;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    width: 20px;
+    height: 210px;
+    top: calc(50% - 105px);
+    left: 20px;
+    background-color: transparent;
+}
+
+    .sidebar div {
+        width: 15px;
+        height: 15px;
+        margin-top: 10px;
+        margin-bottom: 10px;
+        border-radius: 7.5px;
+        background-color: #666666;
+        cursor: pointer;
+    }
+
+    .sidebar .activeSidebarNote {
+        background-color: #131313;
+    }
+
+.slide {
+    position: fixed;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+    background: #fafafa;
+}
+
+.titleSection {
+    background-color: #db4437; 
+    color: #fafafa; 
+    height: 50%;
+}
+
+.scrollHint {
+    height: 2%;
+    background-color: #fafafa;
+    font-size: 14pt;
+    box-shadow: #13131333 0px 0px 10px 0px;
+    cursor: pointer;
+}
+
+    .scrollHint div {
+        font-size: 24pt;
+    }
+
+    .scrollHint:hover {
+        background-color: #db4437;
+        color: #fafafa;
+    }
+
 .miniSection {
-    height: 100px;
-    background-color: #131313;
+    height: 4%;
+    background-color: #fafafa;
+    font-size: 14pt;
+    box-shadow: #13131333 0px 0px 10px 0px;
 }
 
 .miniSection p {
-    color: #fafafa;
+    color: #131313;
     font-size: 20px;
     display: flex;
     justify-content: center;
@@ -74,7 +137,7 @@ li {
 .miniSection a {
     margin-left: 5px;
     margin-right: 5px;
-    color: #fafafa;
+    color: #131313;
     text-decoration: none;
     font-size: 20px;
 }
@@ -114,6 +177,7 @@ li {
 }
 
 .EndSection {
+    height: 100%;
     pointer-events: none;
     background: linear-gradient(to right, #db4437 50%, #fafafa 50%);
     background-size: 200% 100%;
@@ -212,7 +276,7 @@ li {
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    color: #fafafa;
+    color: #131313;
     background: transparent;
     width: 40px;
     height: 40px;

SubBox/wwwroot/js/tutorial.js

@@ -1,4 +1,8 @@
 var app = new Vue({
+    data: {
+        slide: 0,
+        lastSlideChange: null,
+    },
     methods: {
         async leave() {
             await fetch("api/values/firstdone", { method: "POST" });
@@ -13,5 +17,28 @@ var app = new Vue({
         page.addEventListener("contextmenu", function (event) {
             event.preventDefault();
         }, false);
+
+        this.lastSlideChange = Date.now();
+
+        window.addEventListener('wheel', function(event) {
+            var newTime = Date.now();
+
+            if (newTime - app.lastSlideChange > 300) {
+                if (event.deltaY > 0) {
+                    app.slide++;
+                } else {
+                    app.slide--;
+                }
+
+                if (app.slide < 0) {
+                    app.slide = 0;
+                } else if (app.slide > 5) {
+                    app.slide = 5;
+                }
+
+                app.lastSlideChange = newTime;
+            }
+
+        });
     }
 });