From 873bf8af23929e4118a2814e8107441f9198d8f0 Mon Sep 17 00:00:00 2001
From: Wolfgang <24637325+seeul8er@users.noreply.github.com>
Date: Tue, 13 Aug 2024 00:06:27 +0200
Subject: [PATCH] Added some content to main page

---
 css/dronebridge.css     | 15 ++++++++++++++-
 css/dronebridge.css.map |  2 +-
 imprint.html            |  2 +-
 index.html              | 36 ++++++++++++++++++++++++++++++++++--
 install.html            | 24 ++++++++++++------------
 scss/dronebridge.scss   | 15 ++++++++++++++-
 6 files changed, 76 insertions(+), 18 deletions(-)

diff --git a/css/dronebridge.css b/css/dronebridge.css
index 9e84578..9eaedd9 100644
--- a/css/dronebridge.css
+++ b/css/dronebridge.css
@@ -10,7 +10,10 @@
 
 .hero {
   text-align: center;
-  padding: 5rem;
+  padding-left: 6rem;
+  padding-right: 6rem;
+  margin-top: 3rem;
+  margin-bottom: 4rem;
 }
 
 .header {
@@ -100,4 +103,14 @@ input, select {
   background-color: #f63e3e;
 }
 
+.image-fullwidth {
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+  width: 100%;
+}
+
+li {
+  margin: auto;
+}
+
 /*# sourceMappingURL=dronebridge.css.map */
diff --git a/css/dronebridge.css.map b/css/dronebridge.css.map
index 2b4ce80..ca93a50 100644
--- a/css/dronebridge.css.map
+++ b/css/dronebridge.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../scss/dronebridge.scss"],"names":[],"mappings":"AAEA;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAEF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;AACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE","file":"dronebridge.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["../scss/dronebridge.scss"],"names":[],"mappings":"AAEA;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAEF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;AACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE","file":"dronebridge.css"}
\ No newline at end of file
diff --git a/imprint.html b/imprint.html
index 030faff..c5d27bb 100644
--- a/imprint.html
+++ b/imprint.html
@@ -19,7 +19,7 @@
 <div class="container">
     <div class="row header">
         <div class="one-third column">
-            <img class="u-pull-left logo" src="images/DroneBridgeLogo_noblue_tiny.svg" alt="DroneBridge for ESP32"/>
+            <a href="index.html"><img class="u-pull-left logo" src="images/DroneBridgeLogo_noblue_tiny.svg" alt="DroneBridge for ESP32"/></a>
         </div>
         <div class="two-thirds column nav">
             <nav class="u-pull-right">
diff --git a/index.html b/index.html
index b32950a..5e3028a 100644
--- a/index.html
+++ b/index.html
@@ -19,7 +19,7 @@
 <div class="container">
     <div class="row header">
         <div class="one-third column">
-            <img class="u-pull-left logo" src="images/DroneBridgeLogo_noblue_tiny.svg" alt="DroneBridge for ESP32"/>
+            <a href="index.html"><img class="u-pull-left logo" src="images/DroneBridgeLogo_noblue_tiny.svg" alt="DroneBridge for ESP32"/></a>
         </div>
         <div class="two-thirds column nav">
             <nav class="u-pull-right">
@@ -36,7 +36,39 @@ <h5 class="h5">A secure & transparent telemetry link with support for WiFi and E
         <div>ESP-NOW enables ranges of up to 1km</div>
     </div>
 
-    <div class="container u-full-width center-all">
+    <div class="container">
+        <h5>Features</h5>
+        <ul>
+            <li>Up to 150m range using standard WiFi</li>
+            <li>Up to 1km of range using ESP-NOW or Wi-Fi LR Mode</li>
+            <li>Fully encrypted in WiFi & ESP-NOW (AES-GCM 256 bit)</li>
+            <li>High data rates (250kbit ESP-NOW & 11Mbit WiFi mode)</li>
+            <li>Bidirectional</li>
+            <li>Support for MAVLink, MSP & LTM telemetry</li>
+            <li>Support for any payload using transparent option</li>
+            <li>Supported by QGroundControl, Mission Planner, mwptools, impload etc.</li>
+            <li>Easy to set up: Power connection + UART connection to flight controller</li>
+            <li>Fully configurable through an easy-to-use web interface</li>
+            <li>Parsing modes for reduced packet loss</li>
+            <li>Ideal for central drone swarm control</li>
+            <li>Reliable</li>
+            <li>Low latency</li>
+            <li>Affordable</li>
+            <li>Weight: <8 g</li>
+        </ul>
+    </div>
+
+    <div class="container">
+        <img class="image-fullwidth" src="https://raw.githubusercontent.com/DroneBridge/ESP32/master/wiki/DB_ESP32_NOW_Illistration.png"/>
+    </div>
+
+    <div>
+        <p>A firmware for the popular ESP32 modules from Espressif Systems. Probably the cheapest way to communicate with your drone, UAV, UAS, ground-based vehicle.
+        <br>It also allows for a fully transparent serial to WiFi pass-through link with variable packet size.</p>
+        <p>DroneBridge for ESP32 is a telemetry/low data rate-only solution. There is no support for cameras connected to the ESP32 since it does not support video encoding.</p>
+    </div>
+
+    <div style="margin-top: 5rem" class="container u-full-width center-all">
         <button class="button-primary" onclick="location.href='https://github.com/DroneBridge/ESP32'">
             Learn More!
         </button>
diff --git a/install.html b/install.html
index 1ffafdd..4fdf203 100644
--- a/install.html
+++ b/install.html
@@ -19,7 +19,7 @@
 <div class="container">
     <div class="row header">
         <div class="one-third column">
-            <img class="u-pull-left logo" src="images/DroneBridgeLogo_noblue_tiny.svg" alt="DroneBridge for ESP32"/>
+            <a href="index.html"><img class="u-pull-left logo" src="images/DroneBridgeLogo_noblue_tiny.svg" alt="DroneBridge for ESP32"/></a>
         </div>
         <div class="two-thirds column nav">
             <nav class="u-pull-right">
@@ -31,31 +31,31 @@
         </div>
     </div>
 
-    <div style="margin-top: 5rem" class="container center-all">
-        <div>
-            This page is under construction. More to come in the future!
-        </div>
-    </div>
-
     <div class="container hero">
         <h5 class="h5">Online Serial Flashing Tool<br>DroneBridge for ESP32</h5>
         <div>This is not working for now. Come back later :(</div>
     </div>
     <div class="container center-all">
         <div>
-            <label for="Version">Version</label>
+            <label for="conn_status">1. Connect ESP32</label>
+            <div id="conn_status">Not connected...</div>
+        </div>
+        <div>
+            <label for="Version">2. Select DroneBridge for ESP32 Version</label>
             <select id="Version">
-                <option>v1.5</option>
-                <option>v2.0RC1</option>
-                <option>v2.0RC2</option>
+                <option>v2.0RC2 (pre-release)</option>
+                <option>v2.0RC1 (pre-release)</option>
+                <option>v1.5 (stable)</option>
             </select>
         </div>
         <div>
-            <label for="HW">Hardware</label>
+            <label for="HW">3. Choose Hardware Target</label>
             <select id="HW">
                 <option>Official HW1.x Board</option>
+                <option>Official HW1.x Board (USBSerial)</option>
                 <option>Generic ESP32</option>
                 <option>Generic ESP32C3</option>
+                <option>Generic ESP32C3 (USBSerial)</option>
                 <option>Generic ESP32C6</option>
                 <option>Generic ESP32S2</option>
                 <option>Generic ESP32S3</option>
diff --git a/scss/dronebridge.scss b/scss/dronebridge.scss
index 5fcb8b1..a6ec4ed 100644
--- a/scss/dronebridge.scss
+++ b/scss/dronebridge.scss
@@ -12,7 +12,10 @@
 
 .hero {
   text-align: center;
-  padding: 5rem;
+  padding-left: 6rem;
+  padding-right: 6rem;
+  margin-top: 3rem;
+  margin-bottom: 4rem;
 }
 
 .header {
@@ -100,3 +103,13 @@ input, select {
 .dot_red {
   background-color: #f63e3e
 }
+
+.image-fullwidth {
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+  width: 100%;
+}
+
+li {
+  margin: auto;
+}