Skip to content

Commit ad5622b

Browse files
RingoMarRingoMar
committed
Feat: Added nightly and fixed css / time setter
1 parent e6beeac commit ad5622b

File tree

7 files changed

+279
-5
lines changed

7 files changed

+279
-5
lines changed

‎extended/index.html

-1
Original file line numberDiff line numberDiff line change
@@ -103,7 +103,6 @@
103103
const getDays = Math.floor(
104104
(Math.floor(Date.now() / 1000) - startTimeUnix) / 86400
105105
);
106-
console.log(getDays);
107106

108107
if (getDays > 0) {
109108
document.querySelector(".daysContaienr").classList.remove("hidden");

‎index.html

+10-1
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,16 @@
8484
}
8585
}
8686

87-
const timestampParam = new URLSearchParams(window.location.search).get("time");
87+
let timestampParam = new URLSearchParams(window.location.search)
88+
89+
if (!timestampParam.has("time")) {
90+
window.location.search = `${window.location.search
91+
}?time=${new Date().toISOString()}`;
92+
}
93+
94+
timestampParam = timestampParam.get("time")
95+
96+
8897
var startTimeUnix = timestampParam
8998
? Date.parse(timestampParam) / 1000
9099
: Date.parse(new Date().toISOString()) / 1000;

‎nightly/index.html

+112
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<meta name="language" content="EN" />
8+
<meta name="keywords"
9+
content="elapsed, obs, timer, countup, count, kai, kai cenat, elden ring, sunny, feelssunnyman, stream, streamer, chat, overlay, udner cam, white, count, countup " />
10+
<meta name="description" content="An elapse time counter for OBS" />
11+
<meta name="subject" content="Elapse Time" />
12+
<meta name="copyright" content="RingoMar" />
13+
<meta name="url" content="ringomar.github.io/timer" />
14+
<meta data-rh="true" name="twitter:card" content="summary_large_image" />
15+
<meta data-rh="true" property="og:image"
16+
content="https://ringomar.github.io/TheTimekeeper/img/docusaurus-social-card.jpg" />
17+
<meta data-rh="true" name="twitter:image"
18+
content="https://ringomar.github.io/TheTimekeeper/img/docusaurus-social-card.jpg" />
19+
<meta data-rh="true" property="og:url" content="https://ringomar.github.io/timer" />
20+
<meta data-rh="true" property="og:locale" content="en" />
21+
<meta name="rating" content="General" />
22+
<meta name="author" content="ringomar, github.com/ringomar" />
23+
<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon" />
24+
<title>Elapsed Timer - Nightly</title>
25+
<link rel="stylesheet" href="./nightly.css" />
26+
27+
<script async src="https://www.googletagmanager.com/gtag/js?id=G-0GS2KLZXCG"></script>
28+
<script>
29+
window.dataLayer = window.dataLayer || [];
30+
function gtag() {
31+
dataLayer.push(arguments);
32+
}
33+
gtag("js", new Date());
34+
35+
gtag("config", "G-0GS2KLZXCG");
36+
</script>
37+
</head>
38+
39+
<body>
40+
<div class="container">
41+
<div class="hours_time num">00</div>
42+
<div class="min_time num">00</div>
43+
<div class="sec_time num">00</div>
44+
<div class="hours telem">HOURS</div>
45+
<div class="min telem">MINUTES</div>
46+
<div class="sec telem">SECONDS</div>
47+
</div>
48+
49+
<script src="./urlMods.js"></script>
50+
51+
<script src="./modifactions.js"></script>
52+
53+
<script>
54+
const h = document.querySelector(".hours_time");
55+
const m = document.querySelector(".min_time");
56+
const s = document.querySelector(".sec_time");
57+
function pad(num) {
58+
if (num === -1) {
59+
return "00";
60+
} else {
61+
return (num < 10 ? "0" : "") + Math.round(num);
62+
}
63+
}
64+
65+
let timestampParam = new URLSearchParams(window.location.search);
66+
const stopParam = new URLSearchParams(window.location.search).get("stop");
67+
68+
if (!timestampParam.has("time")) {
69+
window.location.search = `${window.location.search
70+
}?time=${new Date().toISOString()}`;
71+
}
72+
73+
timestampParam = timestampParam.get("time");
74+
75+
var startTimeUnix = timestampParam
76+
? Date.parse(timestampParam) / 1000
77+
: Date.parse(new Date().toISOString()) / 1000;
78+
79+
function updateTimer() {
80+
let currentTime;
81+
82+
if (stopParam) {
83+
const parsedTime = Date.parse(stopParam);
84+
if (!isNaN(parsedTime)) {
85+
currentTime = parsedTime / 1000; // Convert milliseconds to seconds
86+
} else {
87+
console.error("Invalid date format for stopParam:", stopParam);
88+
currentTime = Math.floor(Date.now() / 1000); // Fallback to current time
89+
}
90+
} else {
91+
currentTime = Math.floor(Date.now() / 1000); // Fallback to current time
92+
}
93+
94+
// Calculate elapsed time
95+
var elapsedTime = currentTime - startTimeUnix;
96+
97+
var hours = Math.floor(elapsedTime / 3600);
98+
var minutes = Math.floor((elapsedTime % 3600) / 60);
99+
var seconds = elapsedTime % 60;
100+
101+
h.textContent = pad(hours);
102+
m.textContent = pad(minutes);
103+
s.textContent = pad(seconds);
104+
}
105+
106+
updateTimer();
107+
108+
setInterval(updateTimer, 1000);
109+
</script>
110+
</body>
111+
112+
</html>

‎nightly/modifactions.js

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
// @ts-nocheck
2+
3+
const contain = document.querySelector(".container");
4+
5+
contain.addEventListener(
6+
"contextmenu",
7+
function (ev) {
8+
ev.preventDefault();
9+
10+
let stopParam = new URLSearchParams(window.location.search);
11+
12+
if (stopParam.has("stop")) {
13+
stopParam.delete("stop");
14+
} else {
15+
stopParam.set("stop", new Date().toISOString());
16+
}
17+
18+
window.location.search = stopParam.toString();
19+
20+
return false;
21+
},
22+
false
23+
);
24+
25+
document.addEventListener("keydown", function (event) {
26+
// Check if the pressed key is 'r' (key code 82)
27+
if (event.key === "r" || event.keyCode === 82) {
28+
let stopParam = new URLSearchParams(window.location.search);
29+
30+
if (stopParam.has("stop")) {
31+
stopParam.set("stop", new Date().toISOString());
32+
}
33+
stopParam.set("time", new Date().toISOString());
34+
window.location.search = stopParam.toString();
35+
}
36+
});

‎nightly/nightly.css

+98
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
html {
2+
user-select: none;
3+
}
4+
5+
body {
6+
/* background-color: #212121; */
7+
font-family: Arial, sans-serif;
8+
margin: 0;
9+
color: white;
10+
}
11+
12+
.container {
13+
14+
transition: all 1s ease-in;
15+
display: grid;
16+
grid-template-columns: repeat(3, 1fr);
17+
grid-template-rows: 1.5fr 0.5fr;
18+
gap: 0px 0px;
19+
grid-auto-flow: row;
20+
grid-template-areas:
21+
"hours_time min_time sec_time"
22+
"hours min sec";
23+
justify-content: space-evenly;
24+
overflow: hidden;
25+
}
26+
27+
.hours_time {
28+
grid-area: hours_time;
29+
}
30+
31+
.min_time {
32+
grid-area: min_time;
33+
}
34+
35+
.sec_time {
36+
grid-area: sec_time;
37+
}
38+
39+
.hours {
40+
grid-area: hours;
41+
}
42+
43+
.min {
44+
grid-area: min;
45+
}
46+
47+
.sec {
48+
grid-area: sec;
49+
}
50+
51+
.num {
52+
53+
color: rgba(101, 150, 159);
54+
/* text-shadow: 2px 2px 10px rgba(255, 255, 255, 0.9), 0px 0px 5px rgba(255, 255, 255, 0.8); */
55+
-webkit-text-stroke: 2px #4A5E79;
56+
text-align: center;
57+
font-size: 4cm;
58+
font-weight: 600;
59+
animation: jello-load 1s ease-in 0s 1 normal none;
60+
}
61+
62+
@keyframes jello-load {
63+
0% {
64+
transform: scale3d(1, 1, 1);
65+
}
66+
67+
30% {
68+
transform: scale3d(1.25, 0.75, 1);
69+
}
70+
71+
40% {
72+
transform: scale3d(0.75, 1.25, 1);
73+
}
74+
75+
50% {
76+
transform: scale3d(1.15, 0.85, 1);
77+
}
78+
79+
65% {
80+
transform: scale3d(0.95, 1.05, 1);
81+
}
82+
83+
75% {
84+
transform: scale3d(1.05, 0.95, 1);
85+
}
86+
87+
100% {
88+
transform: scale3d(1, 1, 1);
89+
}
90+
}
91+
92+
.telem {
93+
color: #79ADAB;
94+
/* -webkit-text-stroke: 2px #FF3434; */
95+
text-align: center;
96+
font-size: calc(0.3 * 4cm);
97+
font-weight: 600;
98+
}

‎nightly/urlMods.js

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
document.addEventListener("DOMContentLoaded", function () {
2+
const timestampStroke = new URLSearchParams(window.location.search).get(
3+
"stroke"
4+
);
5+
const containerSelect = document.querySelectorAll(".num");
6+
7+
const strokeAmount =
8+
// @ts-ignore
9+
timestampStroke === null || isNaN(timestampStroke) || timestampStroke > 10
10+
? "2"
11+
: timestampStroke;
12+
containerSelect.forEach((i) => {
13+
// @ts-ignore
14+
i.style.webkitTextStroke = `${strokeAmount}px #a6ffd8`;
15+
// @ts-ignore
16+
i.style.textStroke = `${strokeAmount}px #a6ffd8`;
17+
});
18+
});

‎style.css

+5-3
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,6 @@ body {
1515
"hours_time min_time sec_time"
1616
"hours min sec";
1717
justify-content: space-evenly;
18-
text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.9), 0px 0px 5px rgba(255, 255, 255, 0.8);
19-
-webkit-text-stroke: 2px black;
2018
}
2119

2220
.hours_time {
@@ -44,13 +42,17 @@ body {
4442
}
4543

4644
.num {
45+
text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.9), 0px 0px 5px rgba(255, 255, 255, 0.8);
46+
-webkit-text-stroke: 2px black;
4747
text-align: center;
4848
font-size: 4cm;
4949
font-weight: 600;
5050
}
5151

5252
.telem {
53+
text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.9), 0px 0px 5px rgba(255, 255, 255, 0.8);
54+
-webkit-text-stroke: 1.3px rgb(20, 20, 20);
5355
text-align: center;
5456
font-size: calc(0.3 * 4cm);
5557
font-weight: 600;
56-
}
58+
}

0 commit comments

Comments
 (0)