Better Footer with social links #3311 (#3361)

* Added footer

* Update README.md

* Update index.html

* Update index.html

* Add files via upload

* Delete images/mail.jpg

* Update README.md

* Update sd-card/html/index.html

* Update docs/index.html

---------

Co-authored-by: CaCO3 <caco3@ruinelli.ch>

README.md

@@ -1,4 +1,35 @@
-# AI on the Edge Device: Digitizing Your non-digital meters with an ESP32-CAM
+<h1 align="center">AI on the Edge Device: Digitizing Your non-digital meters with an ESP32-CAM</h1>
+<br>
+<br>
+
+## Table of Contents
+- [Key Features 🚀](#key-features-)
+- [Workflow 🔧](#workflow-)
+- [Impressions 📷](#impressions-)
+  - [AI-on-the-edge-device on a Water Meter 💧](#ai-on-the-edge-device-on-a-water-meter-)
+  - [Web Interface (Water Meter) 💻](#web-interface-water-meter-)
+  - [AI-on-the-edge-device on an Electrical Power Meter ⚡](#ai-on-the-edge-device-on-an-electrical-power-meter-)
+- [Setup 🛠️](#setup-%EF%B8%8F)
+- [Download 🔽](#download-)
+- [Flashing the ESP32 💾](#flashing-the-esp32-)
+- [Flashing the SD Card 💾](#flashing-the-sd-card-)
+- [Casing 🛠️](#casing-%EF%B8%8F)
+- [Donate ☕](#donate-)
+- [Support 💬](#support-)
+- [Changes and History 📜](#changes-and-history-)
+- [Build It Yourself 🔨](#build-it-yourself-)
+- [Tools 🛠️](#tools-%EF%B8%8F)
+- [Additional Ideas 💡](#additional-ideas-)
+- [Our Contributors ❤️](#our-contributors-%EF%B8%8F)
+
+<p align="center">
+    <a href="#top">
+        <img src="https://img.shields.io/badge/Back%20to%20Top-000000?style=for-the-badge&logo=github&logoColor=white" alt="Back to Top">
+    </a>
+</p>
+
+
+
 
 [![made-with-c++](https://img.shields.io/badge/Made%20with-C++-1f425f.svg)](https://github.com/jomjol/AI-on-the-edge-device/tree/main/code)
 [![Doc](https://img.shields.io/badge/Doc-MkDocs-526CFE.svg)](https://jomjol.github.io/AI-on-the-edge-device-docs/)
@@ -20,6 +51,8 @@ All you need is an [ESP32 board with a supported camera](https://jomjol.github.i
 
 ---
 
+<br>
+
 ## Key Features 🚀
 - 🔗 **Tensorflow Lite (TFLite) integration** – including an easy-to-use wrapper.
 - 📸 **Inline image processing** (feature detection, alignment, ROI extraction).
@@ -32,6 +65,8 @@ All you need is an [ESP32 board with a supported camera](https://jomjol.github.i
 - 📡 **MQTT protocol** support.
 - 📥 **REST API** available for data access.
 
+<br>
+
 ## Workflow 🔧
 The device captures a photo of your meter at set intervals. It then extracts the Regions of Interest (ROIs) from the image and runs them through artificial intelligence. As a result, you get the digitized value of your meter.
 
@@ -46,25 +81,31 @@ There are several options for what to do with that value:
 
 ---
 
+<br>
+
 ## Impressions 📷
 
-### AI-on-the-edge-device on a Water Meter 💧
++ ### AI-on-the-edge-device on a Water Meter 💧
-<p align="center">
+  <p align="center">
-  <img src="https://raw.githubusercontent.com/jomjol/AI-on-the-edge-device/master/images/watermeter_all.jpg" width="200"><img src="https://raw.githubusercontent.com/jomjol/AI-on-the-edge-device/master/images/main.jpg" width="200"><img src="https://raw.githubusercontent.com/jomjol/AI-on-the-edge-device/master/images/size.png" width="200"> 
+    <img src="https://raw.githubusercontent.com/jomjol/AI-on-the-edge-device/master/images/watermeter_all.jpg" width="200"><img 
-</p>
+  src="https://raw.githubusercontent.com/jomjol/AI-on-the-edge-device/master/images/main.jpg" width="200"><img 
+  src="https://raw.githubusercontent.com/jomjol/AI-on-the-edge-device/master/images/size.png" width="200"> 
+  </p>
 
-### Web Interface (Water Meter) 💻
++ ### Web Interface (Water Meter) 💻
-<p align="center">
+  <p align="center">
     <img src="https://raw.githubusercontent.com/jomjol/AI-on-the-edge-device/master/images/watermeter.jpg" width="600"> 
-</p>
+  </p>
 
-### AI-on-the-edge-device on an Electrical Power Meter ⚡
++ ### AI-on-the-edge-device on an Electrical Power Meter ⚡
-<p align="center">
+  <p align="center">
     <img src="https://raw.githubusercontent.com/jomjol/AI-on-the-edge-device/master/images/powermeter.jpg" width="600"> 
-</p>
+  </p>
 
 ---
 
+<br>
+
 ## Setup 🛠️
 There is growing [documentation](https://jomjol.github.io/AI-on-the-edge-device-docs/) which provides you with a lot of information. Head there to get started, set it up, and configure it.
 
@@ -86,11 +127,15 @@ For further background information, head to:
 
 ---
 
+<br>
+
 ## Download 🔽
 The latest available version can be found on the [Releases page](https://github.com/jomjol/AI-on-the-edge-device/releases).
 
 ---
 
+<br>
+
 ## Flashing the ESP32 💾
 Initially, you will have to flash the ESP32 via a USB connection. Later updates are possible directly over the air (OTA using Wi-Fi).
 
@@ -104,6 +149,8 @@ See the [documentation](https://jomjol.github.io/AI-on-the-edge-device-docs/Inst
 
 ---
 
+<br>
+
 ## Flashing the SD Card 💾
 The SD card can be set up automatically after the firmware is installed. See the [documentation](https://jomjol.github.io/AI-on-the-edge-device-docs/Installation/#remote-setup-using-the-built-in-access-point) for details. For this to work, the SD card must be FAT formatted (which is the default on a new SD card).
 
@@ -111,6 +158,8 @@ Alternatively, the SD card can still be set up manually. See the [documentation]
 
 ---
 
+<br>
+
 ## Casing 🛠️
 Various 3D-printable housings can be found here:
 - 💧 [Water Meter](https://www.thingiverse.com/thing:4573481)
@@ -120,6 +169,8 @@ Various 3D-printable housings can be found here:
 
 ---
 
+<br>
+
 ## Donate ☕
 If you'd like to support the developer with a cup of coffee, you can do so via [PayPal](https://www.paypal.com/donate?hosted_button_id=8TRSVYNYKDSWL).
 
@@ -129,6 +180,8 @@ If you'd like to support the developer with a cup of coffee, you can do so via [
 
 ---
 
+<br>
+
 ## Support 💬
 If you have any technical problems, please search the [discussions](https://github.com/jomjol/AI-on-the-edge-device/discussions). In case you find a bug or have a feature request, please open an [issue](https://github.com/jomjol/AI-on-the-edge-device/issues).
 
@@ -139,27 +192,37 @@ For any other issues, you can contact the developer via email:
 
 ---
 
+<br>
+
 ## Changes and History 📜
 See the [Changelog](Changelog.md) for detailed information.
 
 ---
 
+<br>
+
 ## Build It Yourself 🔨
 See the [Build Instructions](code/README.md) for step-by-step guidance.
 
 ---
 
+<br>
+
 ## Tools 🛠️
 * Logfile downloader and combiner (Thanks to [reserve85](https://github.com/reserve85))  
   * It can be found at ['/tools/logfile-tool'](https://github.com/jomjol/AI-on-the-edge-device/tree/main/tools/logfile-tool).
 
 ---
 
+<br>
+
 ## Additional Ideas 💡
 There are some ideas and feature requests which are not currently being pursued—mainly due to capacity constraints on the part of the developers. These features are collected in the [issues](https://github.com/jomjol/AI-on-the-edge-device/issues) and in [FeatureRequest.md](FeatureRequest.md).
 
 ---
 
+<br>
+
 ## Our Contributors ❤️
 <!-- Do not manually edit this section! It should get updated using the Github action "Manually update contributors list" -->
 <!-- readme: contributors -start -->

docs/index.html

@@ -3,6 +3,29 @@
    <link rel="icon" href="https://raw.githubusercontent.com/jomjol/AI-on-the-edge-device/master/images/icon/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <script type="module" src="https://unpkg.com/esp-web-tools@9.0.3/dist/web/install-button.js?module"></script>
+   <style>
+      .footer {
+         display: flex;
+         justify-content: space-between;
+         align-items: center;
+         padding: 20px;
+         background-color: #d8d8d8;
+         margin-top: 20px;
+      }
+      .footer-section {
+         display: flex;
+         align-items: center;
+      }
+      .footer-section img {
+         width: 24px;
+         height: 24px;
+         margin-left: 10px;
+      }
+      .donation-cards img {
+         height: 20px;
+         margin-right: 5px;
+      }
+   </style>
    <body style="padding: 20px; padding-left: 60px; padding-right: 60px;">
 
    <table>
@@ -34,5 +57,27 @@
       <p><esp-web-install-button manifest="manifest.json"></esp-web-install-button></p>
       <hr>
       <p style="font-size: small;">Installer and Console powered by <a href=https://esphome.github.io/esp-web-tools/ target=_blank>ESP Web Tools</a></p>
+
+   <div class="footer">
+      <div class="footer-section">
+       <span>Support & Contact Us</span>
+       <a href="https://github.com/jomjol/AI-on-the-edge-device" target="_blank" title="GitHub">
+          <img src="https://github.com/jomjol/AI-on-the-edge-device/images/github-logo.png" alt="GitHub">
+       </a>
+          <img src="https://github.com/jomjol/AI-on-the-edge-device/images/gmail-logo.png" alt="Email">
+       </a>
+       <a href="https://github.com/jomjol/AI-on-the-edge-device/discussions" target="_blank" title="GitHub">
+          <img src="https://github.com/jomjol/AI-on-the-edge-device/images/discussion-logo" alt="GitHub">
+       </a>
+	
+    </div>
+      <div class="footer-section">
+         <span>Donations</span>
+         <a href="https://www.paypal.com/donate?hosted_button_id=8TRSVYNYKDSWL" target="_blank" title="Donate via PayPal">
+            <img src="https://github.com/jomjol/AI-on-the-edge-device/images/paypal.png" alt="PayPal" style="width: 60px; height: auto;">
+         </a>
+      </div>
+   </div>
+
    </body>
 </html>

sd-card/html/index.html

@@ -69,6 +69,30 @@
         return "";
         }        
     </script>
+    <style>
+        /* Add these styles to your existing CSS file or in a <style> tag in the head */
+        .footer {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 20px;
+            background-color: #d8d8d8;
+            margin-top: 20px;
+        }
+        .footer-section {
+            display: flex;
+            align-items: center;
+        }
+        .footer-section img {
+            width: 24px;
+            height: 24px;
+            margin-left: 10px;
+        }
+        .donation-cards img {
+            height: 20px;
+            margin-right: 5px;
+        }
+    </style>
 </head>
 
 <body>
@@ -146,6 +170,27 @@
 
 <span id="Version" style="font-size: 10px; margin-top: -5px;padding-left: 10px;">Loading version...</span>
 
+<div class="footer">
+    <div class="footer-section">
+       <span>Support & Contact Us</span>
+       <a href="https://github.com/jomjol/AI-on-the-edge-device" target="_blank" title="GitHub">
+          <img src="https://github.com/jomjol/AI-on-the-edge-device/images/github-logo.png" alt="GitHub">
+       </a>
+          <img src="https://github.com/jomjol/AI-on-the-edge-device/images/gmail-logo.png" alt="Email">
+       </a>
+       <a href="https://github.com/jomjol/AI-on-the-edge-device/discussions" target="_blank" title="GitHub">
+          <img src="https://github.com/jomjol/AI-on-the-edge-device/images/discussion-logo" alt="GitHub">
+       </a>
+	
+    </div>
+    <div class="footer-section">
+       <span>Donations</span>
+       <a href="https://www.paypal.com/donate?hosted_button_id=8TRSVYNYKDSWL" target="_blank" title="Donate via PayPal">
+          <img src="https://github.com/jomjol/AI-on-the-edge-device/images/paypal.png" alt="PayPal" style="width: 60px; height: auto;">
+       </a>
+    </div>
+ </div>
+
 <script type="text/javascript">
     LoadHostname();
     LoadFwVersion();