docs: Installer Guide - Documentation

docs/tools/.pages

@@ -1,5 +1,6 @@
 title: FlyByWire Tools
 nav:
     - Overview: index.md
+    - Installer: installer
     - SimBridge: simbridge
-    #- Installer: installer
+

docs/tools/index.md

@@ -12,11 +12,10 @@ Microsoft Flight Simulator experience when using FlyByWire aircraft add-ons.
     SimBridge is our custom-built solution to connect our aircraft to various external devices and 
     data the sim itself does not provide or is limited to access from within the sim.
 
-[//]: # (- <p style="font-size:24px;">[Installer]&#40;./installer&#41;</p>)
+
+- <p style="font-size:24px;">[Installer](./installer)</p>
 
-[//]: # ()
-[//]: # (    The FlyByWire Installer is a tool that allows you to install, update, and manage the FlyByWire )
-
-[//]: # (    Add-Ons and some selected other free open-source add-ons for Microsoft Flight Simulator.)
+    The FlyByWire Installer is a tool that allows you to install, update, and manage the FlyByWire 
+    Add-Ons and some selected other free open-source add-ons for Microsoft Flight Simulator.
 
 </div>

docs/tools/installer/.pages

@@ -0,0 +1,5 @@
+title: Installer
+nav:
+    - Overview: overview.md
+    - Developers: developers
+    - Settings: settings.md

docs/tools/installer/developers/.pages

@@ -0,0 +1,5 @@
+title: Developers
+nav:
+    - FlyByWire Simulations: flybywire.md
+    - Salty Simulations: salty.md
+    - FSLTL: fsltl.md

docs/tools/installer/developers/flybywire.md

@@ -0,0 +1,7 @@
+---
+title: FlyByWire Simulations
+descriptoin: FlyByWire Simulations is a community-driven group currently focused on creating the A320 family and the A380 for MSFS.
+---
+
+# FlyByWire Simulations
+FlyByWire Simulations is a community-driven group currently focused on creating the A320 family and the A380 for MSFS.

docs/tools/installer/developers/fsltl.md

@@ -0,0 +1,7 @@
+---
+title: FS Live Traffic Liveries (FSLTL)
+descriptoin: FSLTL is a free standalone real-time online traffic overhaul and VATSIM model-matching solution for MSFS.
+---
+
+# FS Live Traffic Liveries (FSLTL)
+FSLTL is a free standalone real-time online traffic overhaul and VATSIM model-matching solution for MSFS.

docs/tools/installer/developers/salty.md

@@ -0,0 +1,7 @@
+---
+title: Salty Simulations
+descriptoin: Saly Simulations is an open-source modification for the default MSFS 747-8, aiming to improve the lacking features and realism of the default aircraft.
+---
+
+# Salty Simulations
+Saly Simulations is an open-source modification for the default MSFS 747-8, aiming to improve the lacking features and realism of the default aircraft.

docs/tools/installer/index.md

@@ -1,3 +1,3 @@
 # Installer Guide
 
-[//]: # (TODO: Write this Installation Guide)
+[//]: # (TODO: Write the Installer Guide - Docs)

docs/tools/installer/overview.md

@@ -0,0 +1,62 @@
+---
+title: FlyByWire Installer Overview
+description: The FlyByWire Installer Overview is providing an interactive graphical overview of the FlyByWire Installer and its functions. 
+---
+
+# Installer Overview
+
+!!! note "Clickable Installer"
+    - Clickable overview of FlyByWire Installer
+    - Move the mouse over the button to get the name of the button.
+    - Click on the button to get a more detailed description of that button.
+
+<style>
+.imagemap {
+    position: relative;
+    display: inline-block;
+    /* background-color: rgba(255, 0, 0, .4); */
+    /* border: 1px solid yellow; */
+}
+.imagemap .imagemapname {
+  visibility: hidden;
+
+  background-color: rgba(29, 30, 38,.8);
+  color: rgba(212, 212, 213, 1);
+  text-align: center;
+  padding: 5px 0;
+  border-radius: 6px;
+
+  /* Position the tooltip text - see examples below! */
+  position: absolute;
+  z-index: 1;
+  width: 120px;
+  top: 0%;
+  left: 50%;
+  margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */
+}
+.imagemap:hover .imagemapname {
+    visibility: visible;
+}
+.imagemap:hover {
+    background-color: rgba(10, 144, 153, 0.30);
+    border: 1px solid black;
+}
+</style>
+
+<div style="position: relative;">
+    <img src="/tools/installer/assets/installer.png" class="skip-lightbox" style="width: 100%; height: auto;">
+
+    <!-- Developers -->
+    <a href="/tools/installer/developers/flybywire">
+    <div class="imagemap" style="position: absolute; left: 0%; top: 3.5%; width: 6.5%; height: 25%;">
+    </div>
+    </a>
+
+    <!-- Settings -->
+    <a href="/tools/installer/settings">
+    <div class="imagemap" style="position: absolute; left: 0%; top: 89.9%; width: 6.5%; height: 7%;">
+    </div>
+    </a>
+</div>
+
+---

docs/tools/installer/settings.md

@@ -0,0 +1,3 @@
+# Settings
+
+[//]: # (TODO: Write the Installer Guide - Docs SETTINGS TAB)