diff --git a/docs/de/FAQ/Clearing-mods.md b/docs/de/FAQ/Clearing-mods.md
new file mode 100644
index 00000000..eb4c9a06
--- /dev/null
+++ b/docs/de/FAQ/Clearing-mods.md
@@ -0,0 +1,38 @@
+## Warum muss ich meine Mods deaktivieren?
+
+In BeamMP stellt der Server, mit dem du dich verbindest, die notwendigen Mods bereit. Diese werden beim Verbinden automatisch heruntergeladen und aktiviert. Sind lokale Mods installiert und aktiviert, funktioniert BeamMP oft nicht richtig, selbst wenn du nur einen zusätzlichen Mod neben BeamMP hast.
+
+!!! warning
+
+ Entferne alle Mods, die du im Ordner BeamNG.Drive\content\ oder in Unterordnern abgelegt hast. Dieser Speicherort ist NICHT für die Installation von Mods vorgesehen und kann zu Problemen führen, wie in der Datei `DO_NOT_INSTALL_MODS_HERE.txt` im selben Verzeichnis beschrieben.
+
+ !!! quote "DO_NOT_INSTALL_MODS_HERE.txt"
+
+ Kopiere KEINE Mods in diesen Ordner: Dies kann zu beschädigten Mods, einer langsameren Installation von Updates, einem beschädigten Mod-Manager, einem beschädigten abgesicherten Modus und anderen Problemen führen.
+
+## Wie deaktiviere/entferne ich meine Mods?
+
+Es gibt drei Möglichkeiten, mögliche Probleme bei der Verwendung von BeamMP zu lösen.
+
+### 1. Mods deaktivieren
+
+Bevor du einem Server beitrittst, stelle sicher, dass du außer „multiplayerbeammp“ keine Mods aktiviert hast. Wenn das Spiel einfriert oder weiterhin Probleme auftreten, probiere den nächsten Schritt.
+
+### 2. Erstellen eines neuen Benutzerordners
+
+Öffne den Benutzerordner von BeamNG.Drive und benenne den Ordner der neuesten Version (z. B. 0.35) um, z. B. in 0.xx_OLD (0.35_OLD). Schließe BeamNG.drive, bevor du ihn umbenennst. 
+
+### 3. Entfernen von Mods aus dem content Ordnern.
+
+Um auf den Ordner Beamng.drive\content\ zuzugreifen und ihn von allen Mods zu bereinigen, öffne den Installationsort von BeamNG.drive. Klicke mit der rechten Maustaste auf den Ordner `content` und lösche ihn. Überprüfe anschließend die Spieldateien über Steam oder Epic Games. Dadurch werden die Dateien erneut heruntergeladen.
+
+Starte anschließend BeamNG.Drive über den BeamMP-Launcher. Im Repository sollte „multiplayerbeammp“ als einziger aktivierter Mod verfügbar sein. Im Hauptmenü findest du außerdem die Schaltfläche zum Aufrufen von BeamMP. Solltest du weiterhin Probleme beim Beitritt zu gemoddeten Servern haben, liegen wahrscheinlich defekte/veraltete Mods vor.
+
+### 4. BeamMP-Launcher Cache bereinigen
+
+Um zwischengespeicherte Mods aus den BeamMP-Verzeichnissen zu entfernen, gehe zum Installationsort deines BeamMP-Launchers. Standardmäßig lautet der Pfad „C:\Benutzer\AppData\BeamMP-Launcher“. Dort findest du den Ordner „Ressourcen“. Lösche diesen Ordner, um alle zwischengespeicherten Mods zu löschen. Dies kann hilfreich sein, wenn du mehr Speicherplatz auf deiner Festplatte benötigst oder veraltete BeamNG-Mods entfernen möchtest.
+
+!!! question "Meine Einstellungen und Konfigurationen sind weg! Wie kann ich sie wiederherstellen?"
+
+ Wenn du den Benutzerordner umbenannt hast, wurde das Spiel gezwungen, einen neuen, sauberen Benutzerordner zu erstellen. Du kannst die beiden Ordner „Einstellungen“ und „Fahrzeuge“ aus dem umbenannten Ordner (z. B. 0.34_OLD) in den neu erstellten Ordner kopieren.
+ Stelle sicher, dass BeamNG.Drive geschlossen ist, und ersetze alle Elemente am Zielort. Alle Konfigurationen und Einstellungen sollten nun wiederhergestellt sein.
diff --git a/docs/en/FAQ/march-28-outage.md b/docs/en/FAQ/march-28-outage.md
deleted file mode 100644
index 0b0d42ef..00000000
--- a/docs/en/FAQ/march-28-outage.md
+++ /dev/null
@@ -1,30 +0,0 @@
-# March 28, 2026 BeamMP Outage FAQ
-
-Temporary FAQ for the (currently) ongoing BeamMP outage that started on March 28th, 2026.
-
-**Last updated April 1st, 2026.**
-
-=== Help! My BeamMP launcher doesn't work!
- Try reinstalling the BeamMP launcher. To do so, follow the instructions below:
- 1. Go to [beammp.com](https://beammp.com/)
- 2. Click *Download Now*
- 3. Run the installer and follow instructions
-
- !!! note
-
- As of April 1st, 2026, the MSI installer is an "unrecognized app" according to Windows Defender SmartScreen.
-
- To bypass this warning, click *More info*, then click *Run anyway*.
-
-=== Help! My authkey(s) don't work anymore!
- As of April 1st, 2026, keymaster and auth systems are offline. This means that your authkeys won't work. To get around this, follow the instructions below:
- 1. Open your `ServerConfig.toml`, or wherever your server config is modified
- 2. Set `Private` to `true`. It should look like this: `Private = true`
- 3. This should fix the authkey issue.
-
- !!! note
-
- As of April 1st, 2026, BeamMP's auth systems are offline. Only guest accounts are available.
-
- Make sure your server allows guests.
-
diff --git a/docs/en/beamng/css-snippets.md b/docs/en/beamng/css-snippets.md
index 6d0a6a9a..a941961c 100644
--- a/docs/en/beamng/css-snippets.md
+++ b/docs/en/beamng/css-snippets.md
@@ -10,170 +10,266 @@
## Common variables
-=== BeamNG Orange
+=== "BeamNG CEF Orange"
- ```css
- var(--bng-orange) /*Common orange*/
- var(--bng-orange-shade1) /*70% opacity*/
- var(--bng-orange-shade2) /*40% opacity*/
- var(--bng-orange-shade1opaque)
- var(--bng-orange-shade2opaque)
- ```
+ ```css
+ var(--bng-orange) /*Common orange*/
+ var(--bng-orange-shade1) /*70% opacity*/
+ var(--bng-orange-shade2) /*40% opacity*/
+ var(--bng-orange-shade1opaque)
+ var(--bng-orange-shade2opaque)
+ ```
-=== Monochrome
+=== "Monochrome"
- ```css
- --- Monochrome
- var(--bng-black-8) /*80% opacity (duplicate --bng-black-o8)*/
- var(--bng-black-6) /*60% opacity (duplicate --bng-black-o6)*/
- var(--bng-black-4) /*40% opacity (duplicate --bng-black-o4)*/
- var(--bng-black-2) /*20% opacity (duplicate --bng-black-o2)*/
+ ```css
+ --- Monochrome
+ var(--bng-black-8) /*80% opacity (duplicate --bng-black-o8)*/
+ var(--bng-black-6) /*60% opacity (duplicate --bng-black-o6)*/
+ var(--bng-black-4) /*40% opacity (duplicate --bng-black-o4)*/
+ var(--bng-black-2) /*20% opacity (duplicate --bng-black-o2)*/
- var(--dark-neutral-grey)
- var(--neutral-grey)
- var(--light-neutral-grey)
- var(--dark-grey)
- var(--dark-grey-alpha) /*80% opacity*/
+ var(--dark-neutral-grey)
+ var(--neutral-grey)
+ var(--light-neutral-grey)
+ var(--dark-grey)
+ var(--dark-grey-alpha) /*80% opacity*/
- var(--black-1) /*70% opacity*/
- var(--black-2) /*40% opacity (duplicate --bng-black-o4)*/
+ var(--black-1) /*70% opacity*/
+ var(--black-2) /*40% opacity (duplicate --bng-black-o4)*/
- var(--white-1) /*80% opacity*/
- var(--white-2) /*40% opacity*/
- var(--white-3) /*20% opacity*/
- ```
+ var(--white-1) /*80% opacity*/
+ var(--white-2) /*40% opacity*/
+ var(--white-3) /*20% opacity*/
+ ```
-=== BeamNG UI Color Palette
+=== "BeamNG Vue UI Color Palette"
- === Orange
+ All of these support adding `-rgb` to the end of the variable name to convert them to raw red, green, blue values. Use -rgb like so: `rgba(var(--bng-orange-500-rgb), 0.5)` for 50% opacity bng-orange-500.
- ```css
- var(--bng-orange-50)
- var(--bng-orange-100)
- var(--bng-orange-200)
- var(--bng-orange-300)
- var(--bng-orange-b400)
- var(--bng-orange-500)
- var(--bng-orange-600)
- var(--bng-orange-700)
- var(--bng-orange-800)
- var(--bng-orange-900)
- ```
-
- === Cool Gray
+ === "Add Red"
- ```css
- var(--bng-cool-gray-50)
- var(--bng-cool-gray-100)
- var(--bng-cool-gray-200)
- var(--bng-cool-gray-300)
- var(--bng-cool-gray-400)
- var(--bng-cool-gray-500)
- var(--bng-cool-gray-600)
- var(--bng-cool-gray-700)
- var(--bng-cool-gray-800)
- var(--bng-cool-gray-900)
- ```
-
- === Ter Blue
- ```css
- var(--bng-ter-blue-50)
- var(--bng-ter-blue-100)
- var(--bng-ter-blue-200)
- var(--bng-ter-blue-300)
- var(--bng-ter-blue-400)
- var(--bng-ter-blue-500)
- var(--bng-ter-blue-600)
- var(--bng-ter-blue-700)
- var(--bng-ter-blue-800)
- var(--bng-ter-blue-900)
- ```
-
- === Add Blue
- ```css
- var(--bng-add-blue-50)
- var(--bng-add-blue-100)
- var(--bng-add-blue-200)
- var(--bng-add-blue-300)
- var(--bng-add-blue-400)
- var(--bng-add-blue-500)
- var(--bng-add-blue-600)
- var(--bng-add-blue-700)
- var(--bng-add-blue-800)
- var(--bng-add-blue-900)
- ```
-
- === Add Green
- ```css
- var(--bng-add-green-50)
- var(--bng-add-green-100)
- var(--bng-add-green-200)
- var(--bng-add-green-300)
- var(--bng-add-green-400)
- var(--bng-add-green-500)
- var(--bng-add-green-600)
- var(--bng-add-green-700)
- var(--bng-add-green-800)
- var(--bng-add-green-900)
- ```
-
- === Add Yellow
- ```css
- var(--bng-add-yellow-50)
- var(--bng-add-yellow-100)
- var(--bng-add-yellow-200)
- var(--bng-add-yellow-300)
- var(--bng-add-yellow-400)
- var(--bng-add-yellow-500)
- var(--bng-add-yellow-600)
- var(--bng-add-yellow-700)
- var(--bng-add-yellow-800)
- var(--bng-add-yellow-900)
- ```
-
- === Add Peach
- ```css
- var(--bng-add-peach-50)
- var(--bng-add-peach-100)
- var(--bng-add-peach-200)
- var(--bng-add-peach-300)
- var(--bng-add-peach-400)
- var(--bng-add-peach-500)
- var(--bng-add-peach-600)
- var(--bng-add-peach-700)
- var(--bng-add-peach-800)
- var(--bng-add-peach-900)
- ```
+ ```css
+ var(--bng-add-red-50)
+ var(--bng-add-red-100)
+ var(--bng-add-red-200)
+ var(--bng-add-red-300)
+ var(--bng-add-red-400)
+ var(--bng-add-red-500)
+ var(--bng-add-red-550)
+ var(--bng-add-red-600)
+ var(--bng-add-red-650)
+ var(--bng-add-red-700)
+ var(--bng-add-red-750)
+ var(--bng-add-red-800)
+ var(--bng-add-red-850)
+ var(--bng-add-red-900)
+ ```
+
+ === "Orange"
- === Add Red
- ```css
- var(--bng-add-red-50)
- var(--bng-add-red-100)
- var(--bng-add-red-200)
- var(--bng-add-red-300)
- var(--bng-add-red-400)
- var(--bng-add-red-500)
- var(--bng-add-red-600)
- var(--bng-add-red-700)
- var(--bng-add-red-800)
- var(--bng-add-red-900)
- ```
-
+ ```css
+ var(--bng-orange-50)
+ var(--bng-orange-100)
+ var(--bng-orange-200)
+ var(--bng-orange-300)
+ var(--bng-orange-400)
+ var(--bng-orange-500)
+ var(--bng-orange-550)
+ var(--bng-orange-600)
+ var(--bng-orange-650)
+ var(--bng-orange-700)
+ var(--bng-orange-750)
+ var(--bng-orange-800)
+ var(--bng-orange-850)
+ var(--bng-orange-900)
+ ```
+
+ === "Ter Peach"
-=== Extra color presets
+ ```css
+ var(--bng-ter-peach-50)
+ var(--bng-ter-peach-100)
+ var(--bng-ter-peach-200)
+ var(--bng-ter-peach-300)
+ var(--bng-ter-peach-400)
+ var(--bng-ter-peach-500)
+ var(--bng-ter-peach-550)
+ var(--bng-ter-peach-600)
+ var(--bng-ter-peach-650)
+ var(--bng-ter-peach-700)
+ var(--bng-ter-peach-750)
+ var(--bng-ter-peach-800)
+ var(--bng-ter-peach-850)
+ var(--bng-ter-peach-900)
+ ```
+
+ === "Ter Yellow"
- ```css
- var(--bng-filter-orange) /*Filter preset to force SVGs to use bng-orange*/
- var(--bng-black-o8) /*80% opacity*/
- var(--bng-black-o6) /*60% opacity*/
- var(--bng-black-o4) /*40% opacity*/
- var(--bng-black-o2) /*20% opacity*/
- ```
+ ```css
+ var(--bng-ter-yellow-50)
+ var(--bng-ter-yellow-100)
+ var(--bng-ter-yellow-200)
+ var(--bng-ter-yellow-300)
+ var(--bng-ter-yellow-400)
+ var(--bng-ter-yellow-500)
+ var(--bng-ter-yellow-550)
+ var(--bng-ter-yellow-600)
+ var(--bng-ter-yellow-650)
+ var(--bng-ter-yellow-700)
+ var(--bng-ter-yellow-750)
+ var(--bng-ter-yellow-800)
+ var(--bng-ter-yellow-850)
+ var(--bng-ter-yellow-900)
+ ```
+
+ === "Add Green"
-=== Corner rounding presets
+ ```css
+ var(--bng-add-green-50)
+ var(--bng-add-green-100)
+ var(--bng-add-green-200)
+ var(--bng-add-green-300)
+ var(--bng-add-green-400)
+ var(--bng-add-green-500)
+ var(--bng-add-green-600)
+ var(--bng-add-green-700)
+ var(--bng-add-green-800)
+ var(--bng-add-green-900)
+ ```
+
+ === "Baby Blue"
- ```css
- var(--bng-corners-1) /*0.25rem*/
- var(--bng-corners-2) /*0.50rem*/
- var(--bng-corners-3) /*1.00rem*/
- ```
+ ```css
+ var(--bng-add-babyblue-50)
+ var(--bng-add-babyblue-100)
+ var(--bng-add-babyblue-200)
+ var(--bng-add-babyblue-300)
+ var(--bng-add-babyblue-400)
+ var(--bng-add-babyblue-500)
+ var(--bng-add-babyblue-550)
+ var(--bng-add-babyblue-600)
+ var(--bng-add-babyblue-650)
+ var(--bng-add-babyblue-700)
+ var(--bng-add-babyblue-750)
+ var(--bng-add-babyblue-800)
+ var(--bng-add-babyblue-850)
+ var(--bng-add-babyblue-900)
+ ```
+
+ === "Add Blue"
+
+ ```css
+ var(--bng-add-blue-50)
+ var(--bng-add-blue-100)
+ var(--bng-add-blue-200)
+ var(--bng-add-blue-300)
+ var(--bng-add-blue-400)
+ var(--bng-add-blue-500)
+ var(--bng-add-blue-600)
+ var(--bng-add-blue-700)
+ var(--bng-add-blue-800)
+ var(--bng-add-blue-900)
+ ```
+
+ === "Indigo Blue"
+
+ ```css
+ var(--bng-add-indigoblue-50)
+ var(--bng-add-indigoblue-100)
+ var(--bng-add-indigoblue-200)
+ var(--bng-add-indigoblue-300)
+ var(--bng-add-indigoblue-400)
+ var(--bng-add-indigoblue-500)
+ var(--bng-add-indigoblue-550)
+ var(--bng-add-indigoblue-600)
+ var(--bng-add-indigoblue-650)
+ var(--bng-add-indigoblue-700)
+ var(--bng-add-indigoblue-750)
+ var(--bng-add-indigoblue-800)
+ var(--bng-add-indigoblue-850)
+ var(--bng-add-indigoblue-900)
+ ```
+
+ === "Add Magenta"
+
+ ```css
+ var(--bng-add-magenta-50)
+ var(--bng-add-magenta-100)
+ var(--bng-add-magenta-200)
+ var(--bng-add-magenta-300)
+ var(--bng-add-magenta-400)
+ var(--bng-add-magenta-500)
+ var(--bng-add-magenta-550)
+ var(--bng-add-magenta-600)
+ var(--bng-add-magenta-650)
+ var(--bng-add-magenta-700)
+ var(--bng-add-magenta-750)
+ var(--bng-add-magenta-800)
+ var(--bng-add-magenta-850)
+ var(--bng-add-magenta-900)
+ ```
+
+ === "Ter Blue Gray"
+
+ ```css
+ var(--bng-ter-blue-gray-50)
+ var(--bng-ter-blue-gray-100)
+ var(--bng-ter-blue-gray-200)
+ var(--bng-ter-blue-gray-300)
+ var(--bng-ter-blue-gray-400)
+ var(--bng-ter-blue-gray-500)
+ var(--bng-ter-blue-gray-550)
+ var(--bng-ter-blue-gray-600)
+ var(--bng-ter-blue-gray-650)
+ var(--bng-ter-blue-gray-700)
+ var(--bng-ter-blue-gray-750)
+ var(--bng-ter-blue-gray-800)
+ var(--bng-ter-blue-gray-850)
+ var(--bng-ter-blue-gray-900)
+ ```
+
+ === "Cool Gray"
+
+ ```css
+ var(--bng-cool-gray-50)
+ var(--bng-cool-gray-100)
+ var(--bng-cool-gray-200)
+ var(--bng-cool-gray-300)
+ var(--bng-cool-gray-400)
+ var(--bng-cool-gray-500)
+ var(--bng-cool-gray-550)
+ var(--bng-cool-gray-600)
+ var(--bng-cool-gray-650)
+ var(--bng-cool-gray-700)
+ var(--bng-cool-gray-750)
+ var(--bng-cool-gray-800)
+ var(--bng-cool-gray-850)
+ var(--bng-cool-gray-900)
+ ```
+
+ === "Other"
+
+ ```css
+ var(--bng-off-black) /*Used in Vue for buttons and some headers*/
+ var(--bng-off-white) /*Used in Vue for interactable elements*/
+ var(--bng-off-white-brighter) /*Used in Vue for headers*/
+ ```
+
+=== "Extra color presets"
+
+ ```css
+ var(--bng-filter-orange) /*Filter preset to force SVGs to use bng-orange*/
+ var(--bng-black-o8) /*80% opacity*/
+ var(--bng-black-o6) /*60% opacity*/
+ var(--bng-black-o4) /*40% opacity*/
+ var(--bng-black-o2) /*20% opacity*/
+ ```
+
+=== "Corner rounding presets"
+
+ ```css
+ var(--bng-corners-1) /*0.25rem*/
+ var(--bng-corners-2) /*0.50rem*/
+ var(--bng-corners-3) /*1.00rem*/
+ ```
diff --git a/docs/en/beamng/imgui-snippets.md b/docs/en/beamng/imgui-snippets.md
index 69464e3a..15524201 100644
--- a/docs/en/beamng/imgui-snippets.md
+++ b/docs/en/beamng/imgui-snippets.md
@@ -31,47 +31,47 @@ im.End()
## General
-=== Basic Formatting
+=== "Basic Formatting"
- ```lua
- im.Text("")
- im.TextWrapped("") -- automatic word wrap
- im.TextColored(im.ImVec4(0,1,0,1), "") -- R,G,B,A
- im.TextDisabled("") -- predefined style for disabled text
+ ```lua
+ im.Text("")
+ im.TextWrapped("") -- automatic word wrap
+ im.TextColored(im.ImVec4(0,1,0,1), "") -- R,G,B,A
+ im.TextDisabled("") -- predefined style for disabled text
- im.LabelText("", "")
- im.BulletText("") -- Bullet point with text
- im.SeparatorText("") -- Separator with centered text
+ im.LabelText("", "")
+ im.BulletText("") -- Bullet point with text
+ im.SeparatorText("") -- Separator with centered text
- im.Separator() -- might want a NewLine before these
- im.SameLine() -- horizontally append the following element to the previous element
- im.NewLine()
+ im.Separator() -- might want a NewLine before these
+ im.SameLine() -- horizontally append the following element to the previous element
+ im.NewLine()
- im.Spacing() -- small padding
- im.Indent()
- im.Unindent()
- ```
+ im.Spacing() -- small padding
+ im.Indent()
+ im.Unindent()
+ ```
-=== Inputs
+=== "Inputs"
- ```lua
- im.Button("", im.ImVec2(0,0)) -- 0 = fit to content
- im.SmallButton("") -- Fit to content and slightly less padding
- im.ArrowButton("", 0) -- arg 1: string is not actually used? arg 2: 0 = left, 1 = right, 2 = up, 3 = down
- im.InvisibleButton("", im.ImVec2(0,0), ...) -- used for imgui cursor positioning?
+ ```lua
+ im.Button("", im.ImVec2(0,0)) -- 0 = fit to content
+ im.SmallButton("") -- Fit to content and slightly less padding
+ im.ArrowButton("", 0) -- arg 1: string is not actually used? arg 2: 0 = left, 1 = right, 2 = up, 3 = down
+ im.InvisibleButton("", im.ImVec2(0,0), ...) -- used for imgui cursor positioning?
- im.Checkbox("", im.BoolPtr(false))
+ im.Checkbox("", im.BoolPtr(false))
- im.RadioButton1("", im.BoolPtr(false))
- im.RadioButton2("", im.IntPtr(), 0) -- arg. 3: 0 or 1 for disabled or enabled
- ```
+ im.RadioButton1("", im.BoolPtr(false))
+ im.RadioButton2("", im.IntPtr(), 0) -- arg. 3: 0 or 1 for disabled or enabled
+ ```
-=== Other
+=== "Other"
- ```lua
- im.Bullet()
+ ```lua
+ im.Bullet()
- im.ProgressBar(0.5, im.ImVec2(0,0), "") -- arg 2: 0 for default width and/or height
+ im.ProgressBar(0.5, im.ImVec2(0,0), "") -- arg 2: 0 for default width and/or height
- im.TextUnformatted("", "") -- Second argument seems to crash the game
- ```
+ im.TextUnformatted("", "") -- Second argument seems to crash the game
+ ```
diff --git a/docs/en/beamng/lua-snippets.md b/docs/en/beamng/lua-snippets.md
index 41a0c80e..a4c0ccc4 100644
--- a/docs/en/beamng/lua-snippets.md
+++ b/docs/en/beamng/lua-snippets.md
@@ -347,4 +347,35 @@ If multiple pages are provided, or the hook is triggered multiple times, then th
### Dialogue
-todo
+Dialogue is used in the *A Rocky Start* campaign to display information about a mission. It is a centered, vertically aligned popup with a specific layout. It does not support embedding HTML.
+
+```lua
+ui_missionInfo.openDialogue({
+ title = "Dialogue title",
+ type = "Custom", -- isn't actually displayed
+ typeName = "typeName",
+ data = {
+ {label = "objective", value = "reward"}
+ -- add more...
+ },
+ buttons = {
+ {action = "accept", text = "Accept", cmd = ""},
+ {action = 'decline',text = "Decline", cmd = ""}
+ -- add more...
+ }
+})
+
+ui_missionInfo.closeDialogue()
+```
+
+
+ 
+
+
+Only one Dialogue can be displayed at once. Any existing Dialogue is overridden.
+
+!!! info
+
+ `#!lua ui_missionInfo.closeDialogue()` must be used to close a dialogue.
+
+ Make sure you call this function when any button is pressed.
diff --git a/docs/en/beamng/snippets.md b/docs/en/beamng/snippets.md
deleted file mode 100644
index e5dea764..00000000
--- a/docs/en/beamng/snippets.md
+++ /dev/null
@@ -1,391 +0,0 @@
-!!! warning "This site is under construction!"
-
- This site is being actively worked on.
-
- Feel you could help? Please do by clicking on the page with a pencil on the right!
-
- This can be done any page too.
-
-# BeamNG.drive Code Snippets
-
-## Lua Code Snippets
-
-### World
-
-#### Drawing a marker & Vehicle detection
-
-Drawing markers in the map can be one of the best ways to indicate to the user that there is some form of interaction that they can do there.
-
-Drawing a marker is fairly easy. Here is an example of how the bus route marker is drawn:
-
-```lua
- local function createBusMarker(markerName)
- local marker = createObject('TSStatic')
- marker:setField('shapeName', 0, "art/shapes/interface/position_marker.dae")
- marker:setPosition(vec3(0, 0, 0))
- marker.scale = vec3(1, 1, 1)
- marker:setField('rotation', 0, '1 0 0 0')
- marker.useInstanceRenderData = true
- marker:setField('instanceColor', 0, '1 1 1 0')
- marker:setField('collisionType', 0, "Collision Mesh")
- marker:setField('decalType', 0, "Collision Mesh")
- marker:setField('playAmbient', 0, "1")
- marker:setField('allowPlayerStep', 0, "1")
- marker:setField('canSave', 0, "0")
- marker:setField('canSaveDynamicFields', 0, "1")
- marker:setField('renderNormals', 0, "0")
- marker:setField('meshCulling', 0, "0")
- marker:setField('originSort', 0, "0")
- marker:setField('forceDetail', 0, "-1")
- marker.canSave = false
- marker:registerObject(markerName)
- scenetree.MissionGroup:addObject(marker)
- return marker
- end
-
- -- this can then be called in a loop to setup your markers.
- -- NOTE: You should only do this once as part of your setup and not called on each frame.
- if #markers == 0 then
- for k,v in pairs(nameMarkers) do
- local mk = scenetree.findObject(v)
- if mk == nil then
- log('I', logTag,'Creating marker '..tostring(v))
- mk = createBusMarker(v)
- ScenarioObjectsGroup:addObject(mk.obj)
- end
- table.insert(markers, mk)
- end
- end
-```
-
-Here is a custom marker example from [BeamNG-FuelStations](https://github.com/BeamMP/BeamNG-FuelStations/tree/master):
-
-```lua
- local stations = [
- { "location": [ -778.813, 485.973, 23.46 ], "type":"gas" },
- { "location": [ 617.164, -192.107, 53.2 ], "type":"ev" },
- ]
-
- local function IsEntityInsideArea(pos1, pos2, radius)
- return pos1:distance(pos2) < radius
- end
-
- local onUpdate = function (dt)
- for k, spot in pairs(stations) do -- loop through all spots on the current map
- local bottomPos = vec3(spot.location[1], spot.location[2], spot.location[3])
- local topPos = bottomPos + vec3(0,0,2) -- offset vec to get top position (2m tall)
-
- local spotInRange = false -- is this spot in range? used for color
- local spotCompatible = false -- is this spot compatible?
-
- if activeVeh then -- we have a car and its ours (if in mp)
- local vehPos = activeVeh:getPosition()
-
- spotInRange = IsEntityInsideArea(vec3(vehPos.x, vehPos.y,vehPos.z), bottomPos, 1.5)
-
- spotCompatible = activeFuelType == "any" or spot.type == "any" or activeFuelType == spot.type
- end
-
- local spotColor = (spotInRange and spotCompatible) and activeColorMap[spot.type] or inactiveColorMap[spot.type] or ColorF(1,1,1,0.5)
-
- debugDrawer:drawCylinder(bottomPos:toPoint3F(), topPos:toPoint3F(), 1, spotColor) --bottom, top, radius, color
- end
- end
-```
-
-### UI snippets
-
-#### Toast Notifications, Top right of screen
-
-
- 
-
-
-```lua
---guihooks.trigger('toastrMsg', {type, title, msg, config = {timeOut}})
-guihooks.trigger('toastrMsg', {type = "info", title = "Info Message:", msg = "Info Message Text Here", config = {timeOut = 5000}})
-guihooks.trigger('toastrMsg', {type = "warning", title = "Warning Message:", msg = "Warning Message Text Here", config = {timeOut = 5000}})
-guihooks.trigger('toastrMsg', {type = "error", title = "Error Message:", msg = "Error Message Text Here", config = {timeOut = 5000}})
-```
-
-#### Message notifications, top left of screen by default in Messages app
-
-This requires the 'Messages' or 'Messages & Tasks' UI app. Icons can be found at `ui\ui-vue\src\assets\fonts\bngIcons\svg\`
-
-
- 
-
-
-```lua
---guihooks.trigger('Message', {msg, ttl, category, icon})
---ui_message(msg, ttl, category, icon)
-guihooks.trigger('Message', {msg = "Message Text Here", ttl = 5.0, category = "arrow_upward", icon = "arrow_upward"})
-guihooks.trigger('Message', {msg = "Message Text Here", ttl = 5.0, category = "arrow_downward", icon = "arrow_downward"})
-guihooks.trigger('Message', {msg = "Message Text Here", ttl = 5.0, category = "flag", icon = "flag"})
-guihooks.trigger('Message', {msg = "Message Text Here", ttl = 5.0, category = "check", icon = "check"})
-guihooks.trigger('Message', {msg = "Message Text Here", ttl = 5.0, category = "check_circle", icon = "check_circle"})
-guihooks.trigger('Message', {msg = "Message Text Here", ttl = 5.0, category = "warning", icon = "warning"})
-guihooks.trigger('Message', {msg = "Message Text Here", ttl = 5.0, category = "error", icon = "error"})
-guihooks.trigger('Message', {msg = "Message Text Here", ttl = 5.0, category = "directions_car", icon = "directions_car"})
-guihooks.trigger('Message', {msg = "Message Text Here", ttl = 5.0, category = "star", icon = "star"})
-guihooks.trigger('Message', {msg = "Message Text Here", ttl = 5.0, category = "timeline", icon = "timeline"})
-guihooks.trigger('Message', {msg = "Message Text Here", ttl = 5.0, category = "save", icon = "save"})
-guihooks.trigger('Message', {msg = "Message Text Here", ttl = 5.0, category = "settings", icon = "settings"})
-```
-
-#### Center large or small display flash
-
-
- 
-
-
-
- 
-
-
-```lua
---guihooks.trigger('ScenarioFlashMessage', {{msg, ttl, sound, big}} ) -- requires RaceCountdown ui app
-guihooks.trigger('ScenarioFlashMessage', {{"Message", 5.0, 0, true}} )
-guihooks.trigger('ScenarioFlashMessage', {{"Message Text Here", 5.0, 0, false}} )
-
---countdown example, when all executed at once, the items are queued and will follow eachother after the previous ttl expires
-guihooks.trigger('ScenarioFlashMessage', {{"3", 1.0, "Engine.Audio.playOnce('AudioGui', 'event:UI_Countdown1')", true}})
-guihooks.trigger('ScenarioFlashMessage', {{"2", 1.0, "Engine.Audio.playOnce('AudioGui', 'event:UI_Countdown2')", true}})
-guihooks.trigger('ScenarioFlashMessage', {{"1", 1.0, "Engine.Audio.playOnce('AudioGui', 'event:UI_Countdown3')", true}})
-guihooks.trigger('ScenarioFlashMessage', {{"GO!", 3.0, "Engine.Audio.playOnce('AudioGui', 'event:UI_CountdownGo')", true}})
-
---another sound example
-guihooks.trigger('ScenarioFlashMessage', {{"Teleported!", 3.0, "Engine.Audio.playOnce('AudioGui', 'event:UI_Checkpoint')", false}})
-```
-
-#### Center mid-size persistent display
-
-This requires the 'Race Realtime Display' UI app.
-
-
- 
-
-
-```lua
---guihooks.trigger('ScenarioRealtimeDisplay', {msg = msg} ) -- requires Race Realtime Display ui app
-guihooks.trigger('ScenarioRealtimeDisplay', {msg = "Message Text Here"} )
---these messages persist, clear with a blank string
---if you are running live data, this is a good one to update rapidly (think timers, distance calcs, et cetera)
-guihooks.trigger('ScenarioRealtimeDisplay', {msg = ""} )
-```
-
-#### Confirmation Dialog
-
-ConfirmationDialog is a simplistic popup with up to two buttons.
-
-```lua
--- Open a ConfirmationDialog with a title, body text, and up to two buttons
-guihooks.trigger("ConfirmationDialogOpen",
- "Example Title",
- "Example Body Text",
- "Okay",
- "", --gelua. empty string
- "Cancel",
- "" --gelua
-)
-
--- Close any open ConfirmationDialog with the provided title
-guihooks.trigger("ConfirmationDialogClose", "Example Title")
-```
-
-
- 
-
-
-Both fields of a button must be strings in order for the button to appear.
-
-If the Okay button is provided, pressing the *OK / Primary action* action is equivalent to pressing the Okay button.
-
-If the Cancel button is provided, pressing the *Menu* action is equivalent to pressing the Cancel button.
-
-HTML is supported and can be used to add images/icons, for example.
-
-Multiple can be displayed at once, displayed sequentially.
-
-!!! bug
-
- Providing no buttons prevents the player from escaping the dialog without using the console.
-
-!!! bug
-
- The SDF parts of the Minimap UI app remain visible while a ConfirmationDialog is active.
-
- `#!lua guihooks.trigger('ShowApps', false)` to hide UI apps can be used as a hacky workaround.
-
-
- 
-
-
-#### introPopupTutorial
-
-introPopupTutorial is a highly customizable popup that is largely defined with embedded HTML. It is standard to load from a standalone HTML file located in `/gameplay/tutorials/pages/*/content.html`.
-
-```lua
-guihooks.trigger("introPopupTutorial", {
- {
- content = readFile("/gameplay/tutorials/pages/template/content.html"):gsub("\r\n",""),
- flavour = "onlyOk"
- }
-})
-
-guihooks.trigger("introPopupClose")
-```
-
-
- 
-
-
-Flavours controls which buttons are displayed. Four flavours exist:
-
-* `withLogbook`
- * Buttons: Career Logbook, Okay
-* `onlyOk`
- * Buttons: Okay
-* `onlyLogbook`
- * Buttons: Career Logbook
-* `noButtons`
- * Provides no buttons
-
-!!! warning
-
- When using the noButtons flavour on the page, providing no extra JavaScript in the page content to close the popup causes a softlock. Pages are not combined into one popup in this flavour. It is not recommended to use this flavour.
-
-If multiple pages are provided, or the hook is triggered multiple times, then the pages are combined into the same popup. If the hook is triggered while a introPopup is active, or when a different introPopup type has already been triggered, then it is displayed in a separate popup after the existing popup is closed.
-
-#### introPopupCareer
-
-introPopupCareer is an easy to use, but open ended popup that supports embedding HTML, if needed.
-
-Flavours control which buttons are displayed and the default image aspect ratio. Four flavours exist:
-
-* `default`
- * Default image aspect ratio: 16x9
- * Buttons: Later, Okay
-* `welcome`
- * Default image aspect ratio: 16x9
- * Buttons: Career Logbook, Okay
-* `branch-info`
- * Default image aspect ratio: 16x9
- * Buttons: Career Logbook, Okay
-* `garage`
- * Buttons: Later, Okay
-
-```lua
-guihooks.trigger("introPopupCareer", {
- {
- title = "Example title",
- text = "Example text",
- image = "/gameplay/tutorials/pages/template/image.jpg",
- ratio = "16x9",
- flavour = "default"
- }
-})
-
-guihooks.trigger("introPopupClose")
-```
-
-
- 
-
-
-If multiple pages are provided, or the hook is triggered multiple times, then the pages are combined into the same popup. If the hook is triggered while a introPopup is active, or when a different introPopup type has already been triggered, then it is displayed in a separate popup after the existing popup is closed.
-
-!!! bug
-
- The background blur has a minimum height, causing popups with short content to have excess blur below its window. Two main workarounds exist:
-
- * Repeat `\n` and end with `#!html