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,156 @@
+:root {
+    --font-size: 18px;
+    --light-grey: #f2f2f2;
+    --medium-grey: #999999;
+    --dark-grey: #333333;
+    --pink: #E6004C;
+    --width: 800px;
+    --height: 600px;
+    --scale: 1.0;
+}
+
+html {
+    background-color: var(--dark-grey);
+}
+
+body {
+    width: var(--width);
+    height: var(--height);
+    transform: scale(var(--scale));
+    transform-origin: 0 0;
+
+    background-color: white;
+
+    margin: 0;
+    padding: 0;
+    font-size: var(--font-size);
+    position: absolute;
+    inset: 0;
+
+    font-family: 'Clear Sans', system-ui, sans-serif;
+}
+
+nav {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+}
+
+button {
+    pointer-events: all;
+    position: absolute;
+    padding: 0;
+    width: 2rem;
+    height: 2rem;
+    border: none;
+    background: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+button:hover {
+    background: var(--light-grey);
+}
+
+button:active {
+    background: var(--medium-grey);
+}
+
+button.close-button {
+    top: 1rem;
+    right: 1rem;
+}
+button.close-button:hover {
+    background-color: rgba(255,255,255, 0.1);
+}
+
+button.close-button svg {
+    stroke: white;
+}
+
+button.slide-button {
+    bottom: calc((var(--height) / 4 - 2rem) / 2);
+}
+
+button.slide-button svg {
+    stroke: var(--pink);
+}
+
+button.slide-button.previous {
+    left: 1rem;
+}
+
+button.slide-button.next {
+    right: 1rem;
+}
+
+#slider {
+    display: flex;
+    flex-direction: row;
+    overflow-x: auto;
+    overflow-y: none;
+    scroll-snap-type: x mandatory;
+    scroll-behavior: smooth;
+
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+}
+
+#slider::-webkit-scrollbar {
+    display: none;
+}
+
+.slide {
+    scroll-snap-align: center;
+    display: flex;
+    flex-direction: column;
+    flex-shrink: 0;
+    width: var(--width);
+    height: var(--height);
+}
+
+.slide .image {
+    background-color: var(--light-grey);
+    height: calc(var(--height) * 3 / 4);
+}
+.slide.no-text .image {
+    height: var(--height);
+}
+
+.slide .image img,
+.slide .image video {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.slide.no-text .description {
+    display: none;
+}
+.slide .description {
+    position: relative;
+    padding: 1rem 8rem;
+    height: calc(var(--height) / 4);
+
+    overflow: auto;
+}
+
+.slide .description h1,
+.slide .description p {
+    margin: 0.5rem 0;
+}
+
+.slide .description h1 {
+    font-size: 1.5rem;
+}
+
+
+.slide .description h1:first-child {
+    margin-top: 0;
+}
+
+.slide .description p:last-of-type {
+    margin-bottom: 0;
+}