Imrpove site

suchmememanyskill · Mar 12, 2024 · d0d80e8 · d0d80e8
1 parent 65abe29
commit d0d80e8
Showing 1 changed file with 31 additions and 12 deletions.
diff --git a/_site/index.html b/_site/index.html
@@ -24,7 +24,11 @@
     }
 
     .main a {
-      color: #F00;
+      color: #F44;
+    }
+
+    .install {
+      margin-bottom: 300px;
     }
 
     .install .iconify {
@@ -46,13 +50,22 @@
       document.getElementById("changelog-header-version").innerText += data.tag_name;
     }
 
+    function setInstallButton(esp){
+      document.getElementById("install-btn").innerHTML = `<esp-web-install-button manifest="https://suchmememanyskill.github.io/CYD-Klipper/${esp}.json"></esp-web-install-button>`;
+    }
+
+    function setInstallButtonDefault(){
+      setInstallButton("esp32-2432S028R")
+    }
+
     fetchChangelog();
+    window.onload = setInstallButtonDefault;
   </script>
 </head>
 
 <body>
   <section class="main">
-    <h2>CYD-Klipper <span class="iconify" data-icon="mdi-printer-3d" style="color: orange;"></span></h2>
+    <h2>CYD-Klipper <span class="iconify" data-icon="mdi-printer-3d" style="color: #F44;"></span></h2>
     <p>An implementation of a Klipper status display on an ESP32 + screen.<br>Uses Moonraker to fetch data.<br><a href="https://github.com/suchmememanyskill/CYD-Klipper">Source code is available on GitHub</a>.</p>
 
     <section class="changelog">
@@ -64,18 +77,24 @@ <h3 id="changelog-header"><span class="iconify" data-icon="mdi-hammer-wrench" st
       <h3><span class="iconify" data-icon="mdi-heart" style="color:orangered; filter: drop-shadow(0 0 0.75rem crimson);"></span> Donate</h3>
       <p>If you found this project helpful, please consider a donation to <a href="https://ko-fi.com/suchmememanyskill">my Ko-Fi</a>.<br>It would help out a lot in the development of this project, due to the need to buy the screens.<br>Thank you!</p>
     </section>
-
-    <section class="install">
-      <h3><span class="iconify" data-icon="mdi-download"></span> Install on ESP32-2432S028 (2.8" Resistive)</h3>
-      <p>Note: You may need to hold the 'BOOT' button on the device while pressing install.</p>
-      <esp-web-install-button
-        manifest="https://suchmememanyskill.github.io/CYD-Klipper/esp32-2432S028R.json"></esp-web-install-button>
+
+    <section class="issues">
+      <h3><span class="iconify" data-icon="mdi-github" style="color: white; filter: drop-shadow(0 0 0.75rem gray);"></span> Report Issues</h3>
+      <p>If you experience any issues with this project, or any feature requests for the project, please report them on the <a href="https://github.com/suchmememanyskill/CYD-Klipper/issues">issues tab on Github</a>.</p>
     </section>
+
     <section class="install">
-      <h3><span class="iconify" data-icon="mdi-download"></span> Install on ESP32-3248S035 (3.5" Capacitive)</h3>
-      <p>Note: You may need to hold the 'BOOT' button on the device while pressing install.</p>
-      <esp-web-install-button
-        manifest="https://suchmememanyskill.github.io/CYD-Klipper/esp32-3248S035C.json"></esp-web-install-button>
+      <h3><span class="iconify" data-icon="mdi-download"></span> Install</h3>
+      <p>Select your device from the list below and click 'Connect'.<br>Note: You may need to hold the 'BOOT' button on the device while pressing install.<br>The 2.8" Resistive and 3.5" Capacitive models are best suited (in my opinion) for CYD-Klipper.</p>
+      <select id="select-install-btn" onchange="setInstallButton(getElementById('select-install-btn').value)">
+        <option value="esp32-2432S024C-SD">ESP32-2432S024 (2.4" Capacitive)</option>
+        <option selected value="esp32-2432S028R">ESP32-2432S028 (2.8" Resistive)</option>
+        <option value="esp32-2432S032C-SD">ESP32-2432S032 (3.2" Capacitive)</option>
+        <option value="esp32-3248S035C">ESP32-3248S035 (3.5" Capacitive)</option>
+        <option value="esp32-4827S043C-SD">ESP32-4827S043 (4.3" 480x270 Capacitive)</option>
+        <option value="esp32-8048S043C-SD">ESP32-8048S043 (4.3" 800x480 Capacitive)</option>
+      </select>
+      <span id="install-btn"></span>
     </section>
   </section>
 </body>