Updated 3 files and added 7 files (automated)

10 files changed, 456 insertions, 1 deletions

diff --git a/_icons/_mdi/content.svg b/_icons/_mdi/content.svg
new file mode 100644
index 0000000..d7d532e
--- /dev/null
+++ b/_icons/_mdi/content.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><g><rect fill="none" height="24" width="24"/></g><g><path d="M22,3l-1.67,1.67L18.67,3L17,4.67L15.33,3l-1.66,1.67L12,3l-1.67,1.67L8.67,3L7,4.67L5.33,3L3.67,4.67L2,3v16 c0,1.1,0.9,2,2,2l16,0c1.1,0,2-0.9,2-2V3z M11,19H4v-6h7V19z M20,19h-7v-2h7V19z M20,15h-7v-2h7V15z M20,11H4V8h16V11z"/></g></svg>
\ No newline at end of file
diff --git a/_icons/_mdi/magic.svg b/_icons/_mdi/magic.svg
new file mode 100644
index 0000000..cd16ddd
--- /dev/null
+++ b/_icons/_mdi/magic.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M22 2l-2.5 1.4L17 2l1.4 2.5L17 7l2.5-1.4L22 7l-1.4-2.5zm-7.63 5.29c-.39-.39-1.02-.39-1.41 0L1.29 18.96c-.39.39-.39 1.02 0 1.41l2.34 2.34c.39.39 1.02.39 1.41 0L16.7 11.05c.39-.39.39-1.02 0-1.41l-2.33-2.35zm-1.03 5.49l-2.12-2.12 2.44-2.44 2.12 2.12-2.44 2.44z"/></svg>
\ No newline at end of file
diff --git a/_icons/_mdi/wave.svg b/_icons/_mdi/wave.svg
new file mode 100644
index 0000000..eed51bb
--- /dev/null
+++ b/_icons/_mdi/wave.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><rect fill="none" height="24" width="24"/><path d="M23,17c0,3.31-2.69,6-6,6v-1.5c2.48,0,4.5-2.02,4.5-4.5H23z M1,7c0-3.31,2.69-6,6-6v1.5C4.52,2.5,2.5,4.52,2.5,7H1z M8.01,4.32l-4.6,4.6c-3.22,3.22-3.22,8.45,0,11.67s8.45,3.22,11.67,0l7.07-7.07c0.49-0.49,0.49-1.28,0-1.77 c-0.49-0.49-1.28-0.49-1.77,0l-4.42,4.42l-0.71-0.71l6.54-6.54c0.49-0.49,0.49-1.28,0-1.77s-1.28-0.49-1.77,0l-5.83,5.83l-0.71-0.71 l6.89-6.89c0.49-0.49,0.49-1.28,0-1.77s-1.28-0.49-1.77,0l-6.89,6.89L11.02,9.8l5.48-5.48c0.49-0.49,0.49-1.28,0-1.77 s-1.28-0.49-1.77,0l-7.62,7.62c1.22,1.57,1.11,3.84-0.33,5.28l-0.71-0.71c1.17-1.17,1.17-3.07,0-4.24l-0.35-0.35l4.07-4.07 c0.49-0.49,0.49-1.28,0-1.77C9.29,3.83,8.5,3.83,8.01,4.32z"/></svg>
\ No newline at end of file
diff --git a/_icons/content.svg b/_icons/content.svg
new file mode 100644
index 0000000..7485c66
--- /dev/null
+++ b/_icons/content.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 96 960 960" width="48"><path d="M317 833V666l135 83-135 84Zm205-370q-40 0-68-27.865t-28-67.841q0-39.059 28-67.676Q482 271 522 271h31v22h-31q-31.917 0-52.958 21.194Q448 335.387 448 367.235 448 400 469.125 420.5T522 441h31v22h-31Zm129 0v-22h31q31.917 0 52.958-20.735 21.042-20.736 21.042-53Q756 335 734.875 314T682 293h-31v-22h31q40 0 68 28.323 28 28.324 28 67.883t-28 67.676Q722 463 682 463h-31Zm-110-85v-22h122v22H541Zm75 234v-41h192q14 0 23-9t9-23V253q0-14-9-23t-23-9H393q-14 0-23 9t-9 23v288h-35V253q0-26.5 19.75-46.75T393 186h415q26.5 0 46.75 20.25T875 253v292q0 27.5-20.25 47.25T808 612H616ZM153 965q-27.5 0-47.25-19.75T86 898V600q0-26.5 19.75-46.75T153 533h415q26.5 0 46.75 20.25T635 600v298q0 27.5-20.25 47.25T568 965H153Zm0-35h415q14 0 23-9t9-23V600q0-14-9-23t-23-9H153q-14 0-23 9t-9 23v298q0 14 9 23t23 9Zm447-534ZM360 749Z" fill="#000000"/></svg>
\ No newline at end of file
diff --git a/_icons/magic.svg b/_icons/magic.svg
new file mode 100644
index 0000000..f8adc37
--- /dev/null
+++ b/_icons/magic.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 96 960 960" width="48"><path d="m391.769 696.615 54.488-119.197 118.512-54.803-118.512-54.246-54.488-117.984-54.561 117.984-118.669 54.246 118.669 54.803 54.561 119.197Zm0 105.231-86.923-191.538-192.308-87.693 192.308-86.923 86.923-192.308 87.692 192.308L671 522.615l-191.539 87.693-87.692 191.538Zm316.693 105.77-43.51-96.25-95.721-43.75 95.385-43.077 43.846-96.154 43.846 96.154 96.154 43.077-96.25 43.75-43.75 96.25ZM391.769 522.615Z" fill="#000000"/></svg>
\ No newline at end of file
diff --git a/_icons/wave.svg b/_icons/wave.svg
new file mode 100644
index 0000000..530e3fc
--- /dev/null
+++ b/_icons/wave.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 96 960 960" width="48"><path d="M710 1026q81 0 148-64t72-157h-41q-7 72-57.5 123T710 984v42ZM31 346h41q7-71 57-122.5T251 167v-41q-90 5-152.5 68T31 346Zm182 522q-90-90-89.5-197T213 472l141-139q19-19 43-19t43 19q10 10 12.5 27t-6.5 34l140-141q20-19 44.5-18.5T674 253q10 11 12 25.5t-5 29.5l43-43q15-20 41-18.5t47 22.5q21 20 16.5 44T799 364q11-6 27-2.5t29 18.5q17 19 18 43t-14 39l-74 74q17-10 33.5-11t31.5 13q18 19 19 43.5T851 625L609 868q-92 89-199 89.5T213 868Zm26-26q39 40 83 60.5t89 20.5q45 0 89-20.5t83-60.5l242-241q9-8 9-18.5t-9-18.5q-8-9-18-9t-18 9L628 723l-41-38 243-243q9-8 9-18.5t-9-18.5q-8-9-18.5-9t-18.5 9L578 620l-38-41 247-248q9-8 8-18.5t-8-18.5q-9-9-19-9t-18 9L502 541l-41-38 189-188q8-8 7.5-18.5T650 278q-10-8-20-8.5t-18 8.5L372 517q24 52 21.5 107T356 735l-35-33q25-50 24-101t-33-104l103-104q8-8 8-18t-8-17q-8-9-18.5-9t-18.5 9L239 498q-40 39-60.5 83T158 670q0 45 20.5 89t60.5 83Z" fill="#000000"/></svg>
\ No newline at end of file
diff --git a/includes/header.php b/includes/header.php
index 732ebf8..303fa14 100644
--- a/includes/header.php
+++ b/includes/header.php
@@ -240,6 +240,11 @@ if (isset($_GET["__"])) {
             background-image: linear-gradient(45deg, rgba(214, 224, 18, 0.75) 0%, #bf763d 100%);
         }
 
+        .modal {
+            backdrop-filter: blur(10px);
+            -webkit-backdrop-filter: blur(10px);
+        }
+
         <?php if (isset($_PROFILE) && $_PROFILE["plus"] && (str_starts_with($_SERVER["REQUEST_URI"], "/articles/") || str_starts_with($_SERVER["REQUEST_URI"], "/people/"))): ?>
         @media print {
             #footer {
@@ -862,4 +867,5 @@ if (isset($_GET["__"])) {
 </style>
 
 <?php endif; ?>
-<div class="bg-white">
\ No newline at end of file
+<div class="bg-white">
+<?php require_once $_SERVER['DOCUMENT_ROOT'] . "/includes/oobe.php"; ?>
\ No newline at end of file
diff --git a/includes/oobe.php b/includes/oobe.php
new file mode 100644
index 0000000..5971015
--- /dev/null
+++ b/includes/oobe.php
@@ -0,0 +1,359 @@
+<?php $price = (float)trim(file_get_contents($_SERVER['DOCUMENT_ROOT'] . "/plusprice")); ?>
+<div class="modal" data-bs-backdrop="static" data-bs-keyboard="false" id="oobe">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-body">
+                <div id="oobe-page-1" class="oobe-page">
+                    <div style="text-align: center;">
+                        <img style="width: 64px;" src="/icons/wave.svg">
+                        <h3 style="margin-top: 5px;"><?= l("lang_oobe_pages_0_title") ?></h3>
+
+                        <div style="height: 228px;">
+                            <p style="margin-top: 10px;">
+                                <?= l("lang_oobe_pages_0_description") ?>
+                            </p>
+                        </div>
+
+                        <div style="display: grid; grid-template-columns: 1fr 1fr 1fr;">
+                            <div></div>
+                            <div style="display: flex; justify-content: center; align-items: center; width: 100%;">
+                                <div style="width: 12px; height: 12px; background-color: var(--palette-9); border-radius: 999px; margin-right: 5px;"></div>
+                                <div style="width: 12px; height: 12px; background-color: var(--palette-3); border-radius: 999px; margin-right: 5px;"></div>
+                                <div style="width: 12px; height: 12px; background-color: var(--palette-3); border-radius: 999px; margin-right: 5px;"></div>
+                                <div style="width: 12px; height: 12px; background-color: var(--palette-3); border-radius: 999px; margin-right: 5px;"></div>
+                                <div style="width: 12px; height: 12px; background-color: var(--palette-3); border-radius: 999px; margin-right: 5px;"></div>
+                                <div style="width: 12px; height: 12px; background-color: var(--palette-3); border-radius: 999px;"></div>
+                            </div>
+                            <div style="display: flex; justify-content: end; width: 100%;">
+                                <a onclick="page(2);" class="btn btn-primary"><?= l("lang_oobe_next") ?></a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div id="oobe-page-2" class="oobe-page" style="display: none;">
+                    <div style="text-align: center;">
+                        <img style="width: 64px;" src="/icons/content.svg">
+                        <h3 style="margin-top: 5px;"><?= l("lang_oobe_pages_1_title") ?></h3>
+
+                        <div style="height: 228px;">
+                            <p style="margin-top: 10px;">
+                                <img src="/icons/people.svg" style="width: 24px; vertical-align: middle;"><span style="vertical-align: middle; margin-left: 5px;"><?= l("lang_oobe_pages_1_items_0") ?></span><br>
+                                <img src="/icons/articles.svg" style="width: 24px; vertical-align: middle;"><span style="vertical-align: middle; margin-left: 5px;"><?= l("lang_oobe_pages_1_items_1") ?></span><br>
+                                <img src="/icons/gallery.svg" style="width: 24px; vertical-align: middle;"><span style="vertical-align: middle; margin-left: 5px;"><?= l("lang_oobe_pages_1_items_2") ?></span>
+                            </p>
+                        </div>
+
+                        <div style="display: grid; grid-template-columns: 1fr 1fr 1fr;">
+                            <div style="display: flex; justify-content: start; width: 100%;">
+                                <a onclick="page(1, true);" class="btn btn-outline-primary"><?= l("lang_oobe_back") ?></a>
+                            </div>
+                            <div style="display: flex; justify-content: center; align-items: center; width: 100%;">
+                                <div style="width: 12px; height: 12px; background-color: var(--palette-9); border-radius: 999px; margin-right: 5px;"></div>
+                                <div style="width: 12px; height: 12px; background-color: var(--palette-9); border-radius: 999px; margin-right: 5px;"></div>
+                                <div style="width: 12px; height: 12px; background-color: var(--palette-3); border-radius: 999px; margin-right: 5px;"></div>
+                                <div style="width: 12px; height: 12px; background-color: var(--palette-3); border-radius: 999px; margin-right: 5px;"></div>
+                                <div style="width: 12px; height: 12px; background-color: var(--palette-3); border-radius: 999px; margin-right: 5px;"></div>
+                                <div style="width: 12px; height: 12px; background-color: var(--palette-3); border-radius: 999px;"></div>
+                            </div>
+                            <div style="display: flex; justify-content: end; width: 100%;">
+                                <a onclick="page(3);" class="btn btn-primary"><?= l("lang_oobe_next") ?></a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div id="oobe-page-3" class="oobe-page" style="display: none;">
+                    <div style="text-align: center;">
+                        <img style="width: 64px;" src="/icons/profiles.svg">
+                        <h3 style="margin-top: 5px;"><?= l("lang_oobe_pages_2_title") ?></h3>
+
+                        <div style="height: 228px;">
+                            <p style="margin-top: 10px;">
+                                <?= l("lang_oobe_pages_2_description") ?>
+                            </p>
+
+                            <div class="card" style="margin-bottom: 20px; text-align: left; background-color: var(--palette-3);">
+                                <div class="card-body"><?= l("lang_oobe_pages_2_tip") ?></div>
+                            </div>
+                        </div>
+
+                        <div style="display: grid; grid-template-columns: 1fr 1fr 1fr;">
+                            <div style="display: flex; justify-content: start; width: 100%;">
+                                <a onclick="page(2, true);" class="btn btn-outline-primary"><?= l("lang_oobe_back") ?></a>
+                            </div>
+                            <div style="display: flex; justify-content: center; align-items: center; width: 100%;">
+                                <div style="width: 12px; height: 12px; background-color: var(--palette-9); border-radius: 999px; margin-right: 5px;"></div>
+                                <div style="width: 12px; height: 12px; background-color: var(--palette-9); border-radius: 999px; margin-right: 5px;"></div>
+                                <div style="width: 12px; height: 12px; background-color: var(--palette-9); border-radius: 999px; margin-right: 5px;"></div>
+                                <div style="width: 12px; height: 12px; background-color: var(--palette-3); border-radius: 999px; margin-right: 5px;"></div>
+                                <div style="width: 12px; height: 12px; background-color: var(--palette-3); border-radius: 999px; margin-right: 5px;"></div>
+                                <div style="width: 12px; height: 12px; background-color: var(--palette-3); border-radius: 999px;"></div>
+                            </div>
+                            <div style="display: flex; justify-content: end; width: 100%;">
+                                <a onclick="page(4);" class="btn btn-primary"><?= l("lang_oobe_next") ?></a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div id="oobe-page-4" class="oobe-page" style="display: none;">
+                    <div style="text-align: center;">
+                        <img style="width: 64px;" src="/icons/dashboard.svg">
+                        <h3 style="margin-top: 5px;"><?= l("lang_oobe_pages_3_title") ?></h3>
+
+                        <div style="height: 228px;">
+                            <p style="margin-top: 10px;">
+                                <?= l("lang_oobe_pages_3_description") ?>
+                            </p>
+
+                            <div class="card" style="margin-bottom: 20px; text-align: left; background-color: var(--palette-3);">
+                                <div class="card-body"><?= l("lang_oobe_pages_3_tip") ?></div>
+                            </div>
+                        </div>
+
+                        <div style="display: grid; grid-template-columns: 1fr 1fr 1fr;">
+                            <div style="display: flex; justify-content: start; width: 100%;">
+                                <a onclick="page(3, true);" class="btn btn-outline-primary"><?= l("lang_oobe_back") ?></a>
+                            </div>
+                            <div style="display: flex; justify-content: center; align-items: center; width: 100%;">
+                                <div style="width: 12px; height: 12px; background-color: var(--palette-9); border-radius: 999px; margin-right: 5px;"></div>
+                                <div style="width: 12px; height: 12px; background-color: var(--palette-9); border-radius: 999px; margin-right: 5px;"></div>
+                                <div style="width: 12px; height: 12px; background-color: var(--palette-9); border-radius: 999px; margin-right: 5px;"></div>
+                                <div style="width: 12px; height: 12px; background-color: var(--palette-9); border-radius: 999px; margin-right: 5px;"></div>
+                                <div style="width: 12px; height: 12px; background-color: var(--palette-3); border-radius: 999px; margin-right: 5px;"></div>
+                                <div style="width: 12px; height: 12px; background-color: var(--palette-3); border-radius: 999px;"></div>
+                            </div>
+                            <div style="display: flex; justify-content: end; width: 100%;">
+                                <a onclick="page(5);" class="btn btn-primary"><?= l("lang_oobe_next") ?></a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div id="oobe-page-5" class="oobe-page" style="display: none;">
+                    <div style="text-align: center;">
+                        <img style="width: 64px;" src="/icons/smartphone.svg">
+                        <h3 style="margin-top: 5px;"><?= l("lang_oobe_pages_4_title") ?></h3>
+
+                        <div style="height: 228px;">
+                            <p style="margin-top: 10px;">
+                                <?= l("lang_oobe_pages_4_description") ?>
+                            </p>
+
+                            <div class="card" style="margin-bottom: 20px; text-align: left; background-color: var(--palette-3);">
+                                <div class="card-body"><?= l("lang_oobe_pages_4_tip") ?></div>
+                            </div>
+                        </div>
+
+                        <div style="display: grid; grid-template-columns: 1fr 1fr 1fr;">
+                            <div style="display: flex; justify-content: start; width: 100%;">
+                                <a onclick="page(4, true);" class="btn btn-outline-primary"><?= l("lang_oobe_back") ?></a>
+                            </div>
+                            <div style="display: flex; justify-content: center; align-items: center; width: 100%;">
+                                <div style="width: 12px; height: 12px; background-color: var(--palette-9); border-radius: 999px; margin-right: 5px;"></div>
+                                <div style="width: 12px; height: 12px; background-color: var(--palette-9); border-radius: 999px; margin-right: 5px;"></div>
+                                <div style="width: 12px; height: 12px; background-color: var(--palette-9); border-radius: 999px; margin-right: 5px;"></div>
+                                <div style="width: 12px; height: 12px; background-color: var(--palette-9); border-radius: 999px; margin-right: 5px;"></div>
+                                <div style="width: 12px; height: 12px; background-color: var(--palette-9); border-radius: 999px; margin-right: 5px;"></div>
+                                <div style="width: 12px; height: 12px; background-color: var(--palette-3); border-radius: 999px;"></div>
+                            </div>
+                            <div style="display: flex; justify-content: end; width: 100%;">
+                                <a onclick="page(6);" class="btn btn-primary"><?= l("lang_oobe_next") ?></a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div id="oobe-page-6" class="oobe-page" style="display: none;">
+                    <div style="text-align: center;">
+                        <img style="width: 64px;" src="/icons/subscription.svg">
+                        <h3 style="margin-top: 5px;"><?= l("lang_oobe_pages_5_title") ?></h3>
+
+                        <div style="height: 228px;">
+                            <p style="margin-top: 10px;">
+                                <?= l("lang_oobe_pages_5_description") ?>
+                            </p>
+
+                            <div class="promo-wrapper promo-plus" style="text-align: left;">
+                                <div class="card promo-item">
+                                    <div class="card-body" style="padding: 5px 10px;">
+                                        <img src="/logo-plus-trim.svg" style="width: 36px;vertical-align: middle;"><span style="display:inline-block;font-size:24px;font-family: 'Josefin Sans', sans-serif; font-weight: bold; vertical-align: middle;margin-left: 5px; margin-top: 5px;">Delta</span><span class="badge badge-plus rounded-pill" style="font-size: 12px; vertical-align: middle;margin-top: 5px;margin-left:5px;">PLUS</span>
+                                        <span style="float: right; margin-top: 10px;"><?= str_replace("%1", coinsToEur($price), l("lang_plus_subscribe_monthly")) ?></span>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <div class="promo-wrapper promo-ultra" style="text-align: left; margin-top: 10px;">
+                                <div class="card promo-item">
+                                    <div class="card-body" style="padding: 5px 10px;">
+                                        <img src="/logo-ultra-trim.svg" style="width: 36px;vertical-align: middle;"><span style="display:inline-block;font-size:24px;font-family: 'Josefin Sans', sans-serif; font-weight: bold; vertical-align: middle;margin-left: 5px; margin-top: 5px;">Delta</span><span class="badge badge-ultra rounded-pill" style="font-size: 12px; vertical-align: middle;margin-top: 5px;margin-left:5px;">ULTRA</span>
+                                        <span style="float: right; margin-top: 10px;"><?= str_replace("%1", coinsToEur($price * 2), l("lang_plus_subscribe_monthly")) ?></span>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div style="display: grid; grid-template-columns: 1fr 1fr 1fr;">
+                            <div style="display: flex; justify-content: start; width: 100%;">
+                                <a onclick="page(5, true);" class="btn btn-outline-primary"><?= l("lang_oobe_back") ?></a>
+                            </div>
+                            <div style="display: flex; justify-content: center; align-items: center; width: 100%;">
+                                <div style="width: 12px; height: 12px; background-color: var(--palette-9); border-radius: 999px; margin-right: 5px;"></div>
+                                <div style="width: 12px; height: 12px; background-color: var(--palette-9); border-radius: 999px; margin-right: 5px;"></div>
+                                <div style="width: 12px; height: 12px; background-color: var(--palette-9); border-radius: 999px; margin-right: 5px;"></div>
+                                <div style="width: 12px; height: 12px; background-color: var(--palette-9); border-radius: 999px; margin-right: 5px;"></div>
+                                <div style="width: 12px; height: 12px; background-color: var(--palette-9); border-radius: 999px; margin-right: 5px;"></div>
+                                <div style="width: 12px; height: 12px; background-color: var(--palette-9); border-radius: 999px;"></div>
+                            </div>
+                            <div style="display: flex; justify-content: end; width: 100%;">
+                                <a onclick="page(7);" class="btn btn-primary"><?= l("lang_oobe_next") ?></a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div id="oobe-page-7" class="oobe-page" style="display: none;">
+                    <div style="text-align: center;">
+                        <img style="width: 64px;" src="/icons/magic.svg">
+                        <h3 style="margin-top: 5px;"><?= l("lang_oobe_pages_6_title") ?></h3>
+
+                        <div style="height: 228px;">
+                            <p style="margin-top: 10px;">
+                                <?= l("lang_oobe_pages_6_description") ?>
+                            </p>
+                        </div>
+
+                        <div style="display: grid; grid-template-columns: 1fr 1fr 1fr;">
+                            <div style="display: flex; justify-content: start; width: 100%;"></div>
+                            <div style="display: flex; justify-content: center; align-items: center; width: 100%;"></div>
+                            <div style="display: flex; justify-content: end; width: 100%;">
+                                <a onclick="localStorage.setItem('oobe', '1');" data-bs-dismiss="modal" class="btn btn-primary"><?= l("lang_oobe_finish") ?></a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<style>
+    @keyframes fade-out {
+        0% {
+            left: 0;
+            opacity: 1;
+        }
+        100% {
+            left: -5%;
+            opacity: 0;
+        }
+    }
+
+    @keyframes fade-in {
+        0% {
+            right: -5%;
+            opacity: 0;
+        }
+        100% {
+            right: 0;
+            opacity: 1;
+        }
+    }
+
+    @keyframes fade-out-back {
+        0% {
+            right: 0;
+            opacity: 1;
+        }
+        100% {
+            right: -5%;
+            opacity: 0;
+        }
+    }
+
+    @keyframes fade-in-back {
+        0% {
+            left: -5%;
+            opacity: 0;
+        }
+        100% {
+            left: 0;
+            opacity: 1;
+        }
+    }
+
+    .oobe-page {
+        position: relative;
+    }
+
+    .oobe-page.hiding {
+        pointer-events: none;
+        animation-name: fade-out;
+        animation-direction: normal;
+        animation-duration: 200ms;
+        animation-fill-mode: forwards;
+        animation-iteration-count: infinite;
+        animation-timing-function: linear;
+    }
+
+    .oobe-page.showing {
+        pointer-events: none;
+        animation-name: fade-in;
+        animation-direction: normal;
+        animation-duration: 200ms;
+        animation-fill-mode: forwards;
+        animation-iteration-count: infinite;
+        animation-timing-function: linear;
+    }
+
+    .oobe-page.hiding-back {
+        pointer-events: none;
+        animation-name: fade-out-back;
+        animation-direction: normal;
+        animation-duration: 200ms;
+        animation-fill-mode: forwards;
+        animation-iteration-count: infinite;
+        animation-timing-function: linear;
+    }
+
+    .oobe-page.showing-back {
+        pointer-events: none;
+        animation-name: fade-in-back;
+        animation-direction: normal;
+        animation-duration: 200ms;
+        animation-fill-mode: forwards;
+        animation-iteration-count: infinite;
+        animation-timing-function: linear;
+    }
+</style>
+
+<script>
+    function page(n, back) {
+        if (back) {
+            document.getElementById("oobe-page-" + (n + 1)).classList.add("hiding-back");
+            setTimeout(() => {
+                document.getElementById("oobe-page-" + (n + 1)).classList.remove("hiding-back");
+                document.getElementById("oobe-page-" + (n + 1)).style.display = "none";
+                document.getElementById("oobe-page-" + n).classList.add("showing-back");
+                document.getElementById("oobe-page-" + n).style.display = "";
+                setTimeout(() => {
+                    document.getElementById("oobe-page-" + n).classList.remove("showing-back");
+                }, 200);
+            }, 200);
+        } else {
+            document.getElementById("oobe-page-" + (n - 1)).classList.add("hiding");
+            setTimeout(() => {
+                document.getElementById("oobe-page-" + (n - 1)).classList.remove("hiding");
+                document.getElementById("oobe-page-" + (n - 1)).style.display = "none";
+                document.getElementById("oobe-page-" + n).classList.add("showing");
+                document.getElementById("oobe-page-" + n).style.display = "";
+                setTimeout(() => {
+                    document.getElementById("oobe-page-" + n).classList.remove("showing");
+                }, 200);
+            }, 200);
+        }
+    }
+
+    const oobe = new bootstrap.Modal(document.getElementById("oobe"));
+
+    if (localStorage.getItem("oobe") !== "1") {
+        localStorage.removeItem("oobe");
+        oobe.show();
+        document.getElementById("oobe").classList.add("fade");
+    }
+</script>
\ No newline at end of file
diff --git a/lang/en.json b/lang/en.json
index 542c50d..8cdf6f9 100644
--- a/lang/en.json
+++ b/lang/en.json
@@ -1066,5 +1066,47 @@
       "notify": "Author will be notified of the decision taken"
     },
     "search": "Search objects in the Delta database..."
+  },
+  "oobe": {
+    "next": "Next",
+    "back": "Back",
+    "finish": "Done",
+    "pages": [
+      {
+        "title": "Welcome to Delta",
+        "description": "Your family, united again."
+      },
+      {
+        "title": "Here's what you'll find",
+        "items": [
+          "Content about people",
+          "Family knowledge",
+          "Beautiful photos"
+        ]
+      },
+      {
+        "title": "There you are",
+        "description": "You might already have your own page on Delta, you can find it once you are on board. If it's not there, you can ask for it to be created as well!",
+        "tip": "All your edits and requests will get reviewed by the administrators."
+      },
+      {
+        "title": "This is your home",
+        "description": "All Delta users have their own personal place called \"profile\". This is where they can share anything they want for all users to see!",
+        "tip": "You can access your profile by clicking on your icon (you might have to open the menu first)."
+      },
+      {
+        "title": "Bring knowledge with you",
+        "description": "Download the Delta for Android application and enjoy Delta wherever you are with a single tap on your phone.",
+        "tip": "The Delta for Android application is not yet available, but we will let you know once it is."
+      },
+      {
+        "title": "Help us keep Delta running",
+        "description": "Delta is free to use, however it costs a lot to operate. You can help us keep Delta free for everyone by subscribing to Delta Plus or Delta Ultra."
+      },
+      {
+        "title": "There you have it",
+        "description": "You are now ready to use Delta. You can use the integrated support feature if you need it. Click on Done to access Delta."
+      }
+    ]
   }
 }
\ No newline at end of file
diff --git a/lang/fr.json b/lang/fr.json
index 3f2bdc6..a2a1376 100644
--- a/lang/fr.json
+++ b/lang/fr.json
@@ -1066,5 +1066,47 @@
       "notify": "L'auteur sera notifié de la décision price"
     },
     "search": "Rechercher des objets dans la base de données Delta..."
+  },
+  "oobe": {
+    "next": "Suivant",
+    "back": "Retour",
+    "finish": "Terminer",
+    "pages": [
+      {
+        "title": "Bienvenue sur Delta",
+        "description": "Votre famille, à nouveau réunie."
+      },
+      {
+        "title": "Vous pourrez trouver tout ça",
+        "items": [
+          "Contenu sur des personnes",
+          "Connaissances familiales",
+          "Magnifiques photos"
+        ]
+      },
+      {
+        "title": "Vous voilà",
+        "description": "Vous avez peut-être déjà votre propre page sur Delta, vous pourrez la trouver une fois à bord. Si elle n'est pas là, vous pouvez demander à ce qu'elle soit créée !",
+        "tip": "Toutes vos modifications et demandes seront relues par les administrateur·ice·s."
+      },
+      {
+        "title": "C'est chez vous",
+        "description": "Tous les utilisateurs de Delta ont accès à leur espace personnel nommé « profil ». C'est là qu'ils peuvent partager ce qu'ils veulent à la vue de tous !",
+        "tip": "Vous pouvez accéder à votre profil en cliquant sur votre icône (vous pourriez d'abord avoir besoin d'ouvrir un menu)."
+      },
+      {
+        "title": "Emportez la connaissance avec vous",
+        "description": "Téléchargez l'application Delta pour Android et profitez de Delta n'importe où avec un seul appui sur votre téléphone.",
+        "tip": "L'application Delta pour Android n'est pas encore disponible, mais nous vous indiqueront quand elle le sera."
+      },
+      {
+        "title": "Aidez-nous à maintenir Delta en vie",
+        "description": "Utiliser Delta est gratuit, mais son fonctionnement à un coût. Vous pouvez nous aider à garder Delta gratuit pour tou·te·s en vous abonnant à Delta Plus ou Delta Ultra."
+      },
+      {
+        "title": "Et voilà",
+        "description": "Vous êtes désormais prêt·e à utiliser Delta. Vous pouvez utiliser l'option d'aide intégrée si besoin. Cliquez sur Terminer pour accéder à Delta."
+      }
+    ]
   }
 }
\ No newline at end of file