From 5ba7449342a068063b834eb4c70b04858b9d67de Mon Sep 17 00:00:00 2001
From: MacDue <macdue@dueutil.tech>
Date: Fri, 24 Mar 2023 00:04:00 +0100
Subject: [PATCH] Base: Add radio buttons to the accent-color demo page

---
 Base/res/html/misc/accent-color.html | 108 ++++++++++++++++++---------
 1 file changed, 72 insertions(+), 36 deletions(-)

diff --git a/Base/res/html/misc/accent-color.html b/Base/res/html/misc/accent-color.html
index e4d5c17d2c..11786eeade 100644
--- a/Base/res/html/misc/accent-color.html
+++ b/Base/res/html/misc/accent-color.html
@@ -13,53 +13,89 @@
 
 <div>
   <b>System color</b><br>
-  <input type="checkbox" checked></input>
-  <input type="checkbox" ></input>
-  <input class="indeterminate" type="checkbox"></input>
-  <input type="checkbox" checked disabled></input>
-  <input type="checkbox" disabled></input>
-  <input class="indeterminate" type="checkbox" disabled></input>
+  <form>
+    <input type="checkbox" checked></input>
+    <input type="checkbox" ></input>
+    <input class="indeterminate" type="checkbox"></input>
+    <input type="checkbox" checked disabled></input>
+    <input type="checkbox" disabled></input>
+    <input class="indeterminate" type="checkbox" disabled></input>
 
-  <input class="big" type="checkbox" checked></input>
-  <input class="big" type="checkbox" ></input>
-  <input class="big indeterminate" type="checkbox"></input>
-  <input class="big" type="checkbox" checked disabled></input>
-  <input class="big" type="checkbox" disabled></input>
-  <input class="big indeterminate" type="checkbox" disabled></input>
+    <input class="big" type="checkbox" checked></input>
+    <input class="big" type="checkbox" ></input>
+    <input class="big indeterminate" type="checkbox"></input>
+    <input class="big" type="checkbox" checked disabled></input>
+    <input class="big" type="checkbox" disabled></input>
+    <input class="big indeterminate" type="checkbox" disabled></input>
+  </form>
+  <form>
+    <input type="radio" checked></input>
+    <input type="radio"></input>
+    <input type="radio" checked disabled></input>
+    <input type="radio" disabled></input>
+    <input class="big" type="radio" checked></input>
+    <input class="big" type="radio"></input>
+    <input class="big" type="radio" checked disabled></input>
+    <input class="big" type="radio" disabled></input>
+  </form>
 </div>
 <br>
 <div class="color-dark">
   <b>Dark accent color</b><br>
-  <input type="checkbox" checked></input>
-  <input type="checkbox" ></input>
-  <input class="indeterminate" type="checkbox"></input>
-  <input type="checkbox" checked disabled></input>
-  <input type="checkbox" disabled></input>
-  <input class="indeterminate" type="checkbox" disabled></input>
+  <form>
+    <input type="checkbox" checked></input>
+    <input type="checkbox" ></input>
+    <input class="indeterminate" type="checkbox"></input>
+    <input type="checkbox" checked disabled></input>
+    <input type="checkbox" disabled></input>
+    <input class="indeterminate" type="checkbox" disabled></input>
 
-  <input class="big" type="checkbox" checked></input>
-  <input class="big" type="checkbox" ></input>
-  <input class="big indeterminate" type="checkbox"></input>
-  <input class="big" type="checkbox" checked disabled></input>
-  <input class="big" type="checkbox" disabled></input>
-  <input class="big indeterminate" type="checkbox" disabled></input>
+    <input class="big" type="checkbox" checked></input>
+    <input class="big" type="checkbox" ></input>
+    <input class="big indeterminate" type="checkbox"></input>
+    <input class="big" type="checkbox" checked disabled></input>
+    <input class="big" type="checkbox" disabled></input>
+    <input class="big indeterminate" type="checkbox" disabled></input>
+  </form>
+  <form>
+    <input type="radio" checked></input>
+    <input type="radio"></input>
+    <input type="radio" checked disabled></input>
+    <input type="radio" disabled></input>
+    <input class="big" type="radio" checked></input>
+    <input class="big" type="radio"></input>
+    <input class="big" type="radio" checked disabled></input>
+    <input class="big" type="radio" disabled></input>
+  </form>
 </div>
 <br>
 <div class="color-light">
   <b>Light accent color</b><br>
-  <input type="checkbox" checked></input>
-  <input type="checkbox" ></input>
-  <input class="indeterminate" type="checkbox"></input>
-  <input type="checkbox" checked disabled></input>
-  <input type="checkbox" disabled></input>
-  <input class="indeterminate" type="checkbox" disabled></input>
+  <form>
+    <input type="checkbox" checked></input>
+    <input type="checkbox" ></input>
+    <input class="indeterminate" type="checkbox"></input>
+    <input type="checkbox" checked disabled></input>
+    <input type="checkbox" disabled></input>
+    <input class="indeterminate" type="checkbox" disabled></input>
 
-  <input class="big" type="checkbox" checked></input>
-  <input class="big" type="checkbox" ></input>
-  <input class="big indeterminate" type="checkbox"></input>
-  <input class="big" type="checkbox" checked disabled></input>
-  <input class="big" type="checkbox" disabled></input>
-  <input class="big indeterminate" type="checkbox" disabled></input>
+    <input class="big" type="checkbox" checked></input>
+    <input class="big" type="checkbox" ></input>
+    <input class="big indeterminate" type="checkbox"></input>
+    <input class="big" type="checkbox" checked disabled></input>
+    <input class="big" type="checkbox" disabled></input>
+    <input class="big indeterminate" type="checkbox" disabled></input>
+  </form>
+  <form>
+    <input type="radio" checked></input>
+    <input type="radio"></input>
+    <input type="radio" checked disabled></input>
+    <input type="radio" disabled></input>
+    <input class="big" type="radio" checked></input>
+    <input class="big" type="radio"></input>
+    <input class="big" type="radio" checked disabled></input>
+    <input class="big" type="radio" disabled></input>
+  </form>
 </div>
 <br>
 <script>