added html contents as file

README.md

@@ -42,13 +42,10 @@ It will provide a webpage for updating the firmware/filesystem of `ESP8266` or `
 ### Install
 
 This Library is available in `Arduino Library Repository` and `PIO` and you can install it from: 
-- Arduino IDE Library Manager
-
-<img width="500" src="image.png" alt="Arduino library manager"/>
 
-- PlatformIO Libraries
-
-<img width="500" src="image-1.png" alt="pltformio library"/>
+| Arduino IDE Library Manager | PlatformIO Libraries |
+|:---:|:---:|
+|<img width="500" src="previews/arduino.png" alt="Arduino library manager"/>|<img width="500" src="previews/pio.png" alt="pltformio library"/>|
 
 `ipdotsetaf/ESPAsyncHTTPUpdateServer@^2.0.0`
 ### Setup
@@ -82,42 +79,35 @@ _updateServer.setup(&_server, "/customroute", "username", "password");
 
 ### Styling and Customizing OTA Page
 
-<table>
-  <tr>
-    <td>OTA Mode</td>
-    <td>Stylized</td>
-    <td>Minimal(default)</td>
- </tr>
- <tr>
-    <td>Default</td>
-    <td><img width="450" src="image-2.png" alt="Stylized OTA Page"/></td>
-    <td><img width="450" src="image-3.png" alt="Minimal OTA Page"/></td>
-  </tr>
-  <tr>
-    <td>Firmware Only</td>
-    <td><img width="450" src="image-4_s_firmware.png" alt="Stylized OTA Firmware Only Page"/></td>
-    <td><img width="450" src="image-4_n_firmware.png" alt="Minimal OTA Firmware Only Page"/></td>
-  </tr> 
-  <tr>
-    <td>Filesystem Only</td>
-    <td><img width="450" src="image-4_s_filesystem.png" alt="Stylized OTA Filesystem OnlyPage"/></td>
-    <td><img width="450" src="image-4_n_filesystem.png" alt="Minimal OTA Filesystem Only Page"/></td>
-  </tr>     
-</table>
+| Stylized | Minimal |
+|:---:|:---:|
+|<img width="450" src="previews/stylized.png" alt="Stylized OTA Page"/> | <img width="450" src="previews/minimal.png" alt="Minimal OTA Page"/> |
 
 > [!IMPORTANT]
 > By default styling is disabled to save ~350 bytes of flash memory.
 >
 > You can enable the styling by adding the `-DESPASYNCHTTPUPDATESERVER_PRETTY` Build Flag to your environment.
+
+### Customizing OTA Page
+
+> [!IMPORTANT]
+> Adding the `-DESPASYNCHTTPUPDATESERVER_MODE` Build Flag to choose different update mode. choose the right value based on your needs: 
 >
-> Adding the `-DESPASYNCHTTPUPDATESERVER_MODE` Build Flag to choose different update mode. this flag has three values:
-> 
-> `-DESPASYNCHTTPUPDATESERVER_MODE=0` firmware and filesystem, which is the default.
-> 
-> `-DESPASYNCHTTPUPDATESERVER_MODE=1` update firmware only.
-> 
-> `-DESPASYNCHTTPUPDATESERVER_MODE=2` update filesystem only.
+> | Update mode | value |
+> |:---:|:---:|
+> |Firmaware and FileSystem|0|
+> |Firmaware only|1|
+> |FileSystem only|2|
+
+#### Modifying Htmls
+
+in case you liked to modify the html of any of the pages, you need to run the `scripts/codeGenerator.py` afterwards so html contents get processed and placed in the source.
 
+Instructions:
+1. Make sure you have python installed
+2. In your python environment run the following
+3. `pip install -r requirements.txt`
+4. `python codeGenerator.py`
 
 ### Selecting FileSystem
 > [!IMPORTANT]

scripts/codeGenerator.py

@@ -0,0 +1,83 @@
+import re
+import gzip
+import htmlmin
+import csscompressor
+
+def minify_html(content):
+    """Minifies HTML and embedded CSS within <style> tags."""
+
+    # Minify inline <style> CSS
+    def minify_css_in_style_tags(match):
+        css_content = match.group(1)
+        return f"<style>{csscompressor.compress(css_content)}</style>"
+
+    # Apply CSS minification to <style> blocks
+    content = re.sub(r"<style>(.*?)</style>", minify_css_in_style_tags, content, flags=re.DOTALL)
+
+    # Minify the entire HTML
+    return htmlmin.minify(content, remove_empty_space=True, remove_all_empty_space=True)
+
+def gzip_compress(content):
+    """Gzips the given content."""
+    return gzip.compress(content.encode('utf-8'))
+
+def convert_to_decimal(byte_data):
+    """Converts bytes to a comma-separated decimal list."""
+    return ",".join(str(b) for b in byte_data)
+
+def process_file(file_path):
+    """Processes input HTML files and returns minified, gzipped, and decimal-converted data."""
+    with open(file_path, "r", encoding="utf-8") as f:
+        content = f.read()
+
+    minified = minify_html(content)
+    gzipped = gzip_compress(minified)
+    decimal_data = convert_to_decimal(gzipped)
+
+    return decimal_data
+
+def update_cpp_file(destination_file):
+    """Updates the .cpp file with generated data between the start and end markers."""
+    start_marker = "//generated code start"
+    end_marker = "//generated code end"
+
+    with open(destination_file, "r", encoding="utf-8") as f:
+        cpp_content = f.read()
+
+    pattern = re.compile(f"{start_marker}.*?{end_marker}", re.DOTALL)
+    if not pattern.search(cpp_content):
+        raise ValueError("Start and End markers not found in the destination file.")
+
+    generated_code = f"""{start_marker}
+#if ESPASYNCHTTPUPDATESERVER_MODE == 0
+    #ifdef ESPASYNCHTTPUPDATESERVER_PRETTY
+        static const uint8_t serverIndex[] PROGMEM = {{ {process_file("../www/stylized.html")} }};
+    #else
+        static const uint8_t serverIndex[] PROGMEM = {{ {process_file("../www/minimal.html")} }};
+    #endif
+#elif ESPASYNCHTTPUPDATESERVER_MODE == 1
+    #ifdef ESPASYNCHTTPUPDATESERVER_PRETTY
+        static const uint8_t serverIndex[] PROGMEM = {{ {process_file("../www/stylized-flash.html")} }};
+    #else
+        static const uint8_t serverIndex[] PROGMEM = {{ {process_file("../www/minimal-flash.html")} }};
+    #endif
+#elif ESPASYNCHTTPUPDATESERVER_MODE == 2
+    #ifdef ESPASYNCHTTPUPDATESERVER_PRETTY
+        static const uint8_t serverIndex[] PROGMEM = {{ {process_file("../www/stylized-fs.html")} }};
+    #else
+        static const uint8_t serverIndex[] PROGMEM = {{ {process_file("../www/minimal-fs.html")} }};
+    #endif
+#endif
+{end_marker}"""
+
+    updated_content = pattern.sub(generated_code, cpp_content)
+
+    with open(destination_file, "w", encoding="utf-8") as f:
+        f.write(updated_content)
+
+if __name__ == "__main__":
+    destination_file = "../src/ESPAsyncHTTPUpdateServer.cpp"  # Change to your actual .cpp file
+
+    update_cpp_file(destination_file)
+
+    print(f"Updated {destination_file} with generated code.")

scripts/requirements.txt

@@ -0,0 +1,2 @@
+htmlmin
+csscompressor