timer/down.html at main · RingoMar/timer · GitHub

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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="language" content="EN" />
    <meta name="keywords" content="elapsed, obs, timer, countup, count, " />
    <meta name="description" content="An elapse time counter for OBS" />
    <meta name="subject" content="Elapse Time" />
    <meta name="copyright" content="RingoMar" />
    <meta name="url" content="ringomar.github.io/timer" />
    <meta name="rating" content="General" />
    <meta name="author" content="ringomar, github.com/ringomar" />
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    <title>Remaining Timer</title>
    <link rel="stylesheet" href="styles_down.css" />
</head>

<body>
    <div class="container shadow">
        <div class="hours_time num">00</div>
        <div class="min_time num">00</div>
        <div class="sec_time num">00</div>
        <div class="hours telem">HOURS</div>
        <div class="min telem">MINUTES</div>
        <div class="sec telem">SECONDS</div>
    </div>

    <script>
        // configurations

        /*
        Stroke: Number
        Set the outline of the numbers & text of the timer
        */

        document.addEventListener("DOMContentLoaded", function () {
            const timestampStroke = new URLSearchParams(window.location.search).get(
                "stroke"
            );
            const resetWhite = new URLSearchParams(window.location.search).get(
                "white"
            );

            const containerSelect = document.querySelectorAll(".num");
            const containers = document.querySelectorAll(".container");


            if (resetWhite === "true") {
                containers.forEach(i => {
                    i.classList.remove('shadow');

                    i.style.webkitTextStroke = "0 !important";
                    i.style.textStroke = "0 !important";
                });

            } else {

                const strokeAmount =
                    timestampStroke === null || isNaN(timestampStroke) || timestampStroke > 10
                        ? "2"
                        : timestampStroke;
                containerSelect.forEach(i => {

                    i.style.webkitTextStroke = `${strokeAmount}px black`;
                    i.style.textStroke = `${strokeAmount}px black`;
                });
            }
        });
    </script>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const whiteparams = new URLSearchParams(window.location.search).get(
                "white"
            );

            if (whiteparams) {
                document.getElementsByClassName("container")[0].style.textShadow = "None !important";
            }
        });

    </script>

    <script>
        const s = document.querySelector(".sec_time");
        const m = document.querySelector(".min_time");
        const h = document.querySelector(".hours_time");

        function pad(num) {
            return ((num < 10 ? "0" : "") + num);
        }

        function updateTimer() {
            const timestampParam = new URLSearchParams(window.location.search).get(
                "time"
            );
            var targetTimeUnix = timestampParam
                ? Date.parse(timestampParam) / 1000
                : Date.now() / 1000;

            var currentTime = Math.floor(Date.now() / 1000);
            var remainingTime = Math.max(0, targetTimeUnix - currentTime);

            var hours = Math.floor(remainingTime / 3600);
            var minutes = Math.floor((remainingTime % 3600) / 60);
            var seconds = remainingTime % 60;

            h.textContent = pad(hours);
            m.textContent = pad(minutes);
            s.textContent = pad(seconds);
        }

        updateTimer();
        setInterval(updateTimer, 1000);
    </script>
</body>

</html>