commit dd73fee1375fc49cdfb1e9809f4fb84eee9f880f
parent aa302bc8f78ec7447b59bd0d35db3953d7451637
Author: Martin Kloeckner <mjkloeckner@gmail.com>
Date: Sat, 29 Mar 2025 20:09:46 -0300
remove html checkboxes and use custom ones
Diffstat:
| M | data/index.html | | | 74 | ++++++++++++++++++++++++++++++++++++++++++++++++++------------------------ |
| M | data/main.js | | | 42 | +++++++++++++++++------------------------- |
| M | data/style.css | | | 101 | +++++++++++++++++++++++++++++++++++++++++++++++++++++++------------------------ |
3 files changed, 137 insertions(+), 80 deletions(-)
diff --git a/data/index.html b/data/index.html
@@ -14,11 +14,24 @@
<div id="main-toggle-div" onclick="handle_click('main-toggle')">
<table>
<tr style="vertical-align: bottom;">
- <td id="label-box">
+ <td>
Main output enabled
</td>
- <td>
- <input type="checkbox" id="main-output-checkbox"/>
+ <td id="main-checkbox-td">
+ <div id="main-checkbox" checked="">
+ <svg id="checkmark-svg"
+ version="1.0"
+ xmlns="http://www.w3.org/2000/svg"
+ viewBox="0 0 64.000000 64.000000"
+ preserveAspectRatio="xMidYMid meet">
+ <g transform="translate(0.000000,64.000000) scale(0.100000,-0.100000)"
+ fill="currentColor" stroke="currentColor">
+ <path d="M380 419 l-142 -211 -67 66 c-38 38 -75 66 -87 66 -25 0 -84 -60 -84
+ -86 0 -11 45 -65 113 -132 121 -121 145 -132 184 -89 49 54 343 502 343 523 0
+ 27 -62 74 -96 74 -16 0 -53 -48 -164 -211z"/>
+ </g>
+ </svg>
+ </div>
</td>
</tr>
</table>
@@ -27,11 +40,24 @@
<div id="timer-enable" onclick="handle_click('timer-toggle')">
<table>
<tr>
- <td id="label-box">
+ <td>
Timer enabled
</td>
- <td>
- <input type="checkbox" id="timer-checkbox"/>
+ <td id="timer-checkbox-td">
+ <div id="timer-checkbox" checked="">
+ <svg id="checkmark-svg"
+ version="1.0"
+ xmlns="http://www.w3.org/2000/svg"
+ viewBox="0 0 64.000000 64.000000"
+ preserveAspectRatio="xMidYMid meet">
+ <g transform="translate(0.000000,64.000000) scale(0.100000,-0.100000)"
+ fill="currentColor" stroke="currentColor">
+ <path d="M380 419 l-142 -211 -67 66 c-38 38 -75 66 -87 66 -25 0 -84 -60 -84
+ -86 0 -11 45 -65 113 -132 121 -121 145 -132 184 -89 49 54 343 502 343 523 0
+ 27 -62 74 -96 74 -16 0 -53 -48 -164 -211z"/>
+ </g>
+ </svg>
+ </div>
</td>
</tr>
</table>
@@ -66,51 +92,51 @@
<div id="info-div">
<table style="width: 100%; padding: 1em;">
<tr>
- <td style="text-align: left;">
+ <td>
WiFi SSID
</td>
- <td style="text-align: right;">
- <div id="wifi-ssid" style="font-family: monospace;"></div>
+ <td>
+ <div id="wifi-ssid"></div>
</td>
</tr>
<tr>
- <td style="text-align: left;">
+ <td>
WiFi Strength
</td>
- <td style="text-align: right;">
- <div id="wifi-rssi" style="font-family: monospace;"></div>
+ <td>
+ <div id="wifi-rssi"></div>
</td>
</tr>
<tr>
- <td style="text-align: left;">
+ <td>
Local domain
</td>
- <td style="text-align: right;">
- <a id="system-local-domain" style="font-family: monospace;"></a>
+ <td>
+ <a id="system-local-domain"></a>
</td>
</tr>
<tr>
- <td style="text-align: left;">
+ <td>
Local IP address
</td>
- <td style="text-align: right;">
- <a id="system-ip-addr" style="font-family: monospace;"></a>
+ <td>
+ <a id="system-ip-addr"></a>
</td>
</tr>
<tr>
- <td style="text-align: left;">
+ <td>
Last NTP sync
</td>
- <td style="text-align: right;">
- <div id="last-ntp-sync" style="font-family: monospace;"></div>
+ <td>
+ <div id="last-ntp-sync"></div>
</td>
</tr>
<tr>
- <td style="text-align: left;">
+ <td>
System time
</td>
- <td style="text-align: right;">
- <div id="system-time" style="font-family: monospace;"></div>
+ <td>
+ <div id="system-time"></div>
</td>
</tr>
</table>
diff --git a/data/main.js b/data/main.js
@@ -1,10 +1,9 @@
var received_data;
-var time_div, main_output_checkbox, system_local_domain, system_ip_addr, wifi_ssid, wifi_rssi;
+var main_checkbox, timer_checkbox;
+var time_div, system_local_domain, system_ip_addr, wifi_ssid, wifi_rssi;
var system_time, system_time_elem, last_ntp_sync, last_ntp_sync_elem;
-
var to_time, from_time, timer_save_button;
-// Convert to GMT-3 using Intl.DateTimeFormat
const time_formatter = new Intl.DateTimeFormat('en-GB', {
timeZone: 'America/Argentina/Buenos_Aires',
year: 'numeric',
@@ -72,10 +71,22 @@ function handle_click(cb) {
function update_system_time() {
socket.send("main-output-status");
+function timer_set_time() {
+ var query_json = new Object();
+
+ query_json.from = new Object();
+ query_json.from.hour = from_time.value.slice(0, 2);
+ query_json.from.minute = from_time.value.slice(3, 5);
+
+ query_json.to = new Object();
+ query_json.to.hour = to_time.value.slice(0, 2);
+ query_json.to.minute = to_time.value.slice(3, 5);
+ console.log(query_json);
}
function query_data() {
- main_output_checkbox = document.getElementById("main-output-checkbox");
+ main_checkbox = document.getElementById("main-checkbox");
+ timer_checkbox = document.getElementById("timer-checkbox");
system_local_domain = document.getElementById("system-local-domain");
last_ntp_sync_elem = document.getElementById("last-ntp-sync");
system_time_elem = document.getElementById("system-time");
@@ -85,28 +96,9 @@ function query_data() {
from_time = document.getElementById("from-time");
to_time = document.getElementById("to-time");
- timer_save_button = document.getElementById("timer-save");
- timer_save_button.addEventListener(
- "click",
- () => {
- socket.send("timer-set-values");
- socket.send(from_time.value)
- socket.send(to_time.value)
- console.log(from_time.value, to_time.value);
- },
- false,
- );
-
- /*
- to_time.addEventListener(
- "input",
- () => {
- console.log(to_time.value);
- },
- false,
- );
- */
+ timer_save_button = document.getElementById("timer-save");
+ timer_save_button.addEventListener( "click", timer_set_time, false);
// setInterval(update_system_time, 30*1000); // update time every 30 secs
}
diff --git a/data/style.css b/data/style.css
@@ -1,6 +1,4 @@
body {
- color: black;
- background-color: white;
margin: 3em auto 3em auto;
text-align: center;
font-family: "Nimbus Sans", "Nimbus Sans L", "Helvetica", Inter;
@@ -14,7 +12,7 @@ body {
#main-div {
max-width: 23em;
margin: auto auto;
- padding: 0em 10px;
+ padding: 0 10px;
}
table {
@@ -26,14 +24,13 @@ tr {
border-color: #3E3E42;
}
-#main-toggle-div {
- margin-bottom: 0.5em;
- cursor: pointer;
- user-select: none;
+td {
+ width: 100%;
}
#main-toggle-div {
- padding-top: 0.5em;
+ margin-bottom: 0.5em;
+ cursor: pointer;
padding: 1.25em 28px 1.00em 28px;
border-radius: 8px;
border: 1px solid #E3E3E3;
@@ -46,7 +43,6 @@ tr {
#timer-enable {
cursor: pointer;
- user-select: none;
padding: 27.5px 28px 16px 28px;
}
@@ -71,7 +67,7 @@ tr {
}
#from-time:hover, #to-time:hover {
- border-color: #3E3E42;
+ border-color: #828282;
}
#timer-save-div {
@@ -99,11 +95,7 @@ tr {
}
#timer-save:hover {
- border-color: black;
-}
-
-td {
- width: 100%;
+ border-color: #828282;
}
#buttons-div {
@@ -111,14 +103,7 @@ td {
margin-left: auto;
margin-right: auto;
font-size: 22px;
-}
-
-#main-output-checkbox, #timer-checkbox {
- width: 20px;
- height: 20px;
- cursor: pointer;
- margin: 0;
- padding: 0;
+ user-select: none;
}
hr {
@@ -133,6 +118,14 @@ hr {
padding: .20em;
text-wrap: nowrap;
}
+ td:nth-child(1) {
+ text-align: left;
+ user-select: none;
+ }
+ td:nth-child(2) {
+ text-align: right;
+ font-family: monospace;
+ }
}
a, a:visited {
@@ -159,23 +152,63 @@ h1 {
vertical-align: bottom;
}
+#main-checkbox, #timer-checkbox {
+ width: 20px;
+ height: 20px;
+ border: 1px solid #E3E3E3;
+ border-radius: 5px;
+ color: black;
+ text-align: center;
+ vertical-align: center;
+ cursor: pointer;
+ color: white;
+ svg {
+ display: none;
+ }
+}
+
+#main-checkbox:hover, #timer-checkbox:hover {
+ border: 1px solid #828282;
+}
+
+#main-checkbox[checked="1"], #timer-checkbox[checked="1"] {
+ background-color: #3584e4;
+ svg {
+ display: revert;
+ }
+}
+
+#checkmark-svg {
+ width: 14px;
+ height: 20px;
+}
+
+#main-checkbox-td, #timer-checkbox-td {
+ display: block;
+ padding: 0;
+ margin: 0;
+}
+
@media (prefers-color-scheme: dark) {
body {
color: white;
background-color: #17171A;
}
+
a, a:visited {
color: #56C8FF;
}
+
input {
color-scheme: dark;
}
+
#buttons-div {
border: none;
}
#main-toggle-div, #timer {
- background-color: #232327;
+ background-color: #232326;
border: none;
}
@@ -184,10 +217,10 @@ h1 {
}
#timer-save {
- border: 1px solid #999999;
+ border-color: #999999;
color: white;
background-color: #303033;
- border: 1px solid #3E3E42;
+ border-color: #3E3E42;
}
#timer-save:active {
@@ -195,13 +228,19 @@ h1 {
border: none;
}
- #main-output-checkbox:checked, #timer-checkbox:checked {
- accent-color: #56C8FF;
- }
-
#from-time, #to-time {
background-color: #303033;
color: white;
- border: 1px solid #3E3E42;
+ border-color: #3E3E42;
+ }
+
+ #main-checkbox, #timer-checkbox {
+ border-color: #3E3E42;
+ background-color: #303033;
+ }
+
+ #main-checkbox[checked="1"], #timer-checkbox[checked="1"] {
+ background-color: #56C8FF;
+ color: #004263;
}
}
