-
Notifications
You must be signed in to change notification settings - Fork 0
/
1o1o.html
95 lines (92 loc) · 4.4 KB
/
1o1o.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<head>
<title>1on1off</title>
<link href="https://fonts.googleapis.com/css2?family=Archivo:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,700;1,700&display=swap">
<link rel="icon" href="1o1o.ico">
<script>
// global variables time
var sse = 0; // Seconds Since Eight
var tb = -1; // Time Balance
var tstate = 0; // current STATE of the timer. 0 = OFF, 1 = ON
var s = -50; //this has to be a global variable :sob:
function init1o1o(starthour) {
var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
s = today.getSeconds();
tb = - ((h-starthour)*3600 + m*60 + s - 1);
if (h < 8) {document.getElementById('timeleft').style = "z-index:1; margin-top:-80px; margin-right:15px; color:#aaf683; text-align:right; font-size:75pt; font-weight:700;";}
startTime();
}
function startTime() {
var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
if (today.getSeconds() - s == 2) {tb += ztm(tstate);} // corrects for only updating every like 1001ms
s = today.getSeconds();
sse = (h-8)*3600 + m*60 + s;
tb += ztm(tstate);
document.getElementById('timeleft').innerHTML = stt(tb);
h = checkTime(h);
m = checkTime(m);
s = checkTime(s);
// var datestring = today.getUTCFullYear() + "-" + checkTime(today.getUTCMonth() + 1) + "-" + checkTime(today.getUTCDate()) + " ";
document.getElementById('currenttime').innerHTML = h + ":" + m + ":" + s;
parityCheck();
var t = setTimeout(startTime, 1000);
}
function stt(i) { // turns i seconds into the time
var prty = "";
if (i == 0) {return "00:00:00";}
if (i > 0) {prty = "+";}
if (i < 0) {i = -i; prty = "−";}
var dh = checkTime(Math.floor(i/3600));
var dm = checkTime(Math.floor((i%3600)/60));
var ds = checkTime(Math.floor(i%60));
return prty + dh + ":" + dm + ":" + ds;
}
function ztm(j) { // turns 0 → -1
if (j == 0) {return -1;}
else {return j;}
}
function checkTime(k) {
if (k < 10) {k = "0" + k}; // add zero in front of numbers < 10
return k;
}
function parityCheck() {
if (tb == 1) {document.getElementById('timeleft').style = "z-index:1; margin-top:-80px; margin-right:15px; color:#aaf683; text-align:right; font-size:75pt; font-weight:700;";}
if (tb == 0) {document.getElementById('timeleft').style = "z-index:1; margin-top:-80px; margin-right:15px; color:#c0c0c0; text-align:right; font-size:75pt; font-weight:700;";}
if (tb == -1) {document.getElementById('timeleft').style = "z-index:1; margin-top:-80px; margin-right:15px; color:#a4243b; text-align:right; font-size:75pt; font-weight:700;";}
}
function toggle() {
if (tstate == 1) {
tstate = 0;
document.getElementById('togglebutton').src = "images/togon.svg";
document.getElementById('statusbutton').src = "images/statoff.svg";
console.log("1→0");
} else if (tstate == 0) {
tstate = 1;
document.getElementById('togglebutton').src = "images/togoff.svg";
document.getElementById('statusbutton').src = "images/staton.svg";
console.log("0→1");
}
}
function resetTb() {
tb = 0;
console.log("TB reset!");
document.getElementById('timeleft').innerHTML = stt(0);
parityCheck();
}
</script>
</head>
<body onload="init1o1o(9)" style="background-color:#222222"> <!-- Set this to the hour of the day you want to start the day at (8 → 8am)-->
<div class="containerdiv" style="position:absolute; font-family:Barlow; font-style:italic; left:0px; top:0px; width:480px; height:320px;">
<img src="images/1o1obg.svg" style="z-index:-1; position:absolute; left:0px; top:0px;"/>
<p id="currenttime" style="z-index:1; margin-top:1.45px; margin-right:65px; color:#ffffff; text-align:right; font-size:35pt; font-weight:700;">09:11:15</p>
<p id="timeleft" style="z-index:1; margin-top:-79.6px; margin-right:15px; color:#a4243b; text-align:right; font-size:75pt; font-weight:700;">100</p>
<img src="images/topmask1.svg" style="z-index:5; position:absolute; left:0px; top:0px;"/>
<img id="togglebutton" src="images/togon.svg" onclick="toggle()" style="z-index:11; position:absolute; left:292px; top:132px;" />
<img id="statusbutton" src="images/statoff.svg" style="z-index:11; position:absolute; left:16px; top:132px;" />
<img id="resetbutton" src="images/resetbtn.svg" ondblclick="resetTb()" style="z-index:11; position:absolute; left:252px; top:132px;" />
</div>
</body>