fix install page

* fix install page
huizebruin · Jul 8, 2024 · dd7e551 · dd7e551
1 parent 0efacc7
commit dd7e551
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 7 deletions.
diff --git a/static/Installation.html b/static/Installation.html
@@ -51,13 +51,13 @@ <h2 id="Installation">Installation</h2>
           You can use the button below to install the <b>S0tool</b> firmware directly to your device via USB from the
           browser.<br>
 
-
+<br>
         <h2 id="s0tool-Installation">S0tool Installation</h2>
-
-          Pick your product to turn it into a S0tool for Home Assistant.
+        <br>
+          Pick your product to turn it into a S0tool for Home Assistant.<br>
 
           No programming or other software required.
-
+        <br><br>
 
         <div class="radios">
           <label>
@@ -226,16 +226,16 @@ <h3>S0tool blank</h3>
             <p><img src="./assets/esp82.jpg" class="img-fluid" alt="s0tool-wipeesp"> </p>
             </p>
           </div>
-          <div class="hidden info s0tool-blank">
+
+          <div class="hidden info s0tool-standard-flux">
             <h3>s0tool-standard-flux</h3>
             <p>
               s0tool-standard-flux sensor like the Dekaim Flussostato Acqua<br>
-            <p><img src="./assets/icon.ico" class="img-fluid" alt="s0tool-standard-flux"> </p>
+              <p><img src="./assets/esp82.jpg" class="img-fluid" alt="s0tool-noimage"> </p>
             </p>
           </div>
 
 
-          s0tool-standard-flux
         </center>
         <hr>
 

diff --git a/static/styles.css b/static/styles.css
@@ -41,4 +41,59 @@ footer {
 
 .content-section {
     margin: 20px 0;
+}
+.radios {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: center;
+}
+
+.radios label {
+    padding: 12px;
+    cursor: pointer;
+    width: calc(33.3% - 16px);
+    display: block;
+    position: relative;
+}
+
+.radios input {
+    position: absolute;
+    top: 1px;
+    left: 1px;
+}
+
+.radios img {
+    display: block;
+    width: calc(100% - 8px);
+    border: 4px solid #01ab7e;
+    aspect-ratio: 1;
+}
+
+input:checked+img {
+    border-color: #01ab7e;
+}
+
+.special::after {
+    content: "Special";
+    background-color: #f44336;
+    color: #fff;
+    padding: 1px 4px;
+    border-radius: 4px;
+    font-size: 0.7em;
+    position: absolute;
+    top: 5px;
+    left: 25px;
+}
+
+body .special {
+    display: none;
+}
+
+body.show-special .special {
+    display: initial;
+}
+
+.hidden {
+    display: none;
 }