commit ae4b380c35e5a4e0ccb8ea18eedde673f7e47826
parent d367accd2a7b714b22bec0bb2cb9bad88bbda506
Author: Martin Kloeckner <mjkloeckner@gmail.com>
Date: Tue, 25 Mar 2025 10:31:28 -0300
update `index.html` and `style.css`: add timer section
Diffstat:
| M | data/index.html | | | 56 | ++++++++++++++++++++++++++++++++++++++++---------------- |
| M | data/style.css | | | 100 | ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++------------------- |
2 files changed, 116 insertions(+), 40 deletions(-)
diff --git a/data/index.html b/data/index.html
@@ -9,33 +9,57 @@
</head>
<body>
<div id="main-div">
- <h1 id="title">ESP8266 Web Server</h1>
+ <h1 id="title">ESP8266 Remote Panel</h1>
<div id="buttons-div">
<div id="main-toggle-div" onclick="handle_click('main-toggle')">
<table>
<tr style="vertical-align: bottom;">
<td id="label-box">
- Main output enable
+ Main output enabled
</td>
<td>
- <input type="checkbox" id="main-output-checkbox" name="main-output-checkbox"/>
+ <input type="checkbox" id="main-output-checkbox"/>
</td>
</tr>
</table>
</div>
-
- <!-- <div id="timer-div" onclick="handle_click('timer-toggle)"> -->
- <!-- <table> -->
- <!-- <tr style="vertical-align: bottom;"> -->
- <!-- <td id="label-box"> -->
- <!-- Timer enabled -->
- <!-- </td> -->
- <!-- <td> -->
- <!-- <input type="checkbox" id="timer-checkbox" name="timer-checkbox"/> -->
- <!-- </td> -->
- <!-- </tr> -->
- <!-- </table> -->
- <!-- </div> -->
+ <div id="timer-div">
+ <table>
+ <tr id="timer-div2" onclick="handle_click('timer-toggle)">
+ <td id="label-box" style="padding: 0 0 .65em 0;">
+ Timer enabled
+ </td>
+ <td style="text-align: right; padding: 0 0 .65em 0;">
+ <input type="checkbox" id="timer-checkbox"/>
+ </td>
+ </tr>
+ <tr>
+ <td style="padding: 0.85em 0 .25em 0;">
+ From
+ </td>
+ <td style="padding: 0.85em 0 .25em 0;">
+ <input id="from-time" type="time" value="18:00"/>
+ </td>
+ </tr>
+ <tr>
+ <td>
+ Until
+ </td>
+ <td>
+ <input id="to-time" type="time" value="00:00"/>
+ </td>
+ </tr>
+ <!-- <tr> -->
+ <!-- <td> -->
+ <!-- </td> -->
+ <!-- <td> -->
+ <!-- <div id="save-timer-button"> -->
+ <!-- save -->
+ <!-- </div> -->
+ <!-- </td> -->
+ <!-- </tr> -->
+ </table>
+ </div>
</div>
<div id="info-div">
diff --git a/data/style.css b/data/style.css
@@ -4,7 +4,7 @@ body {
margin: 3em auto 3em auto;
text-align: center;
font-family: "Nimbus Sans", "Nimbus Sans L", "Helvetica", Inter;
- font-size: 18px;
+ font-size: 20px;
}
#title {
@@ -15,22 +15,48 @@ body {
max-width: 25em;
min-height: 85vh;
margin: auto auto;
- border-radius: 10px;
+ padding: 0em 0.2em;
+}
+
+table {
+ border-collapse: collapse;
+}
+
+tr {
+ vertical-align: bottom;
+ border-color: #3E3E42;
}
#main-toggle-div {
+ margin-bottom: 0.5em;
+ cursor: pointer;
+ user-select: none;
+}
+
+#main-toggle-div, #timer-div {
+ padding-top: 0.5em;
+ padding: 1.25em 1.50em 1.00em 1.50em;
+ border-radius: 8px;
+ border: 1px solid #E3E3E3;
+}
+
+#timer-div {
+ padding: 1.25em 1.50em 1.25em 1.50em;
+}
+
+#timer-div2 {
+ border-bottom: 1px solid #E3E3E3;
cursor: pointer;
user-select: none;
- /* padding: 1em 0em 1em 0em; */
- padding: 1.20em 1.70em 1em 1.70em;
}
#buttons-div {
text-align: left;
margin-left: auto;
margin-right: auto;
- border-radius: 14px;
- border: 1px solid #BCCCDC;
+ /* border-radius: 14px; */
+ /* border: 1px solid #BCCCDC; */
+ font-size: 22px;
}
#label-box {
@@ -46,50 +72,76 @@ body {
padding: 0;
}
-#timer-div {
- padding-top: 0.5em;
- padding: 0.5em 1.70em 1em 1.70em;
- cursor: pointer;
- user-select: none;
+hr {
+ margin-top: 0;
+ margin-bottom: 0;
}
#info-div {
- padding-top: .5em;
+ padding: 1.75em 1em 1em 1em;
font-size: 16px;
+ td {
+ padding: .20em;
+ }
}
a, a:visited {
color: #00E;
}
+h1 {
+ font-size: 36px;
+}
+
+#save-button {
+ padding: 0.25em 0 0 0;
+ text-align: right;
+}
+
+#save-timer-button {
+ border: 1px solid grey;
+ border-radius: 2px;
+ text-align: center;
+ margin-top: 0.35em;
+ font-size: 16px;
+ color: black;
+ background-color: white;
+ vertical-align: bottom;
+}
+
@media (prefers-color-scheme: dark) {
body {
- color: #E2E2E2;
+ color: white;
background-color: #202020;
}
a, a:visited {
color: #56C8FF;
}
- #main-toggle-div {
- border-color: #E2E2E2;
+ #buttons-div {
+ /* background-color: #303033; */
+ border: none;
}
+ #main-toggle-div, #timer-div {
+ background-color: #303033;
+ border: none;
+ }
+
+ #timer-div2 {
+ border-bottom-color: #3E3E42;
+ }
+
+ /*
#main-output-checkbox, #timer-checkbox {
appearance: none;
background-color: #E2E2E2;
border-radius: 2px;
margin-bottom: -1px;
- /* margin: 0; */
- /* padding: 0; */
- /* width: 20px; */
- /* height: 20px; */
+ -webkit-margin-after: 0px;
}
+ */
#main-output-checkbox:checked, #timer-checkbox:checked {
- appearance: revert;
+ /* appearance: revert; */
accent-color: #56C8FF;
- /* margin-bottom: 1px; */
- /* padding: 0; */
- /* width: 20px; */
- /* height: 20px; */
}
}
