86 lines
3.1 KiB
HTML
86 lines
3.1 KiB
HTML
<html>
|
|
|
|
<head>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<link rel="stylesheet" href="style.css">
|
|
</head>
|
|
|
|
<body onload="startTime()">
|
|
<header>
|
|
<h1>PicoClock</h1>
|
|
<p>Ayala & Ido's Clock Settings</p>
|
|
<p> State: <b><span id="time"></span></b> | 🌞Day: <span class="{day_light_class}">💡</span> | 🌚Night: <span
|
|
class="{night_light_class}">💡</span></p>
|
|
<nav> <a href="#" onclick="setTime()">🕰️ Set Time</a> <a href="#" onclick="toggle('day')">🌞 Toggle</a> <a
|
|
href="#" onclick="toggle('night')">🌚 Toggle</a> </nav>
|
|
</header>
|
|
<main>
|
|
<p> Working Mode: </p>
|
|
<input type="radio" id="auto" value="auto" {mode_auto} onclick="update_mode('auto')">
|
|
<label for="auto">Schedule</label>
|
|
<br>
|
|
<input type="radio" id="manual" value="manual" {mode_manual} onclick="update_mode('manual')">
|
|
<label for="manual">Manual</label><br>
|
|
<hr>
|
|
<div style="display: flex;">
|
|
<div style="width: 100%;">
|
|
<p>🌞 💡Is set to: {day_on_time}</p>
|
|
</div>
|
|
</div>
|
|
<div style="display:flex"> <input type="time" id="N2D" style="width:100%"> <button type="foo"
|
|
onclick="set_time_update('day', 'N2D')">SET</button> </div>
|
|
<div style="display: flex;">
|
|
<div style="width: 100%;">
|
|
<p>🌚💡Is set to: {night_on_time}</p>
|
|
</div>
|
|
</div>
|
|
<div style="display:flex"> <input type="time" id="D2N" style="width: 100%;"> <button type="foo"
|
|
onclick="set_time_update('night', 'D2N')">SET</button> </div>
|
|
</main>
|
|
<footer>
|
|
<p>Made with ❤️ by <a href="mailto:picoclock@sagi.dayanhub.com">ZeGoomba</a>. v0.0.1</p>
|
|
</footer>
|
|
</body>
|
|
<script>
|
|
function toggle(time) {
|
|
fetch(`/toggle_${time}/`).finally(reload).catch(console.error);
|
|
}
|
|
function setTime() {
|
|
d = new Date();
|
|
fetch(`/stime/${d.getHours()}:${d.getMinutes()}:${d.getSeconds()}/`).finally(reload).catch(console.error);
|
|
}
|
|
function update_mode(mode) {
|
|
fetch(`/update_mode/${mode}/`).finally(reload).catch(console.error);
|
|
}
|
|
function set_time_update(time, id) {
|
|
let el = document.getElementById(id);
|
|
let [h, m] = el.value.split(':').map(v => parseInt(v));
|
|
if (h && m) fetch(`/set_${time}_time/${h}/${m}/`).finally(reload).catch(console.error);
|
|
}
|
|
function startTime() {
|
|
let time = new Date();
|
|
time.setHours({time_h});
|
|
time.setMinutes({time_m});
|
|
time.setSeconds({time_s});
|
|
timeLoop(time);
|
|
}
|
|
function timeLoop(time) {
|
|
let h = time.getHours();
|
|
let m = time.getMinutes();
|
|
let s = time.getSeconds();
|
|
m = checkTime(m);
|
|
s = checkTime(s);
|
|
document.getElementById('time').innerHTML = h + ":" + m + ":" + s;
|
|
setTimeout(timeLoop, 1000, new Date(time.getTime() + 1000));
|
|
}
|
|
function checkTime(i) {
|
|
if (i < 10) {i = "0" + i};
|
|
return i;
|
|
}
|
|
function reload() {
|
|
location.reload();
|
|
}
|
|
</script>
|
|
|
|
</html>
|