clock.github.io/countdown.html at main · hatofly/clock.github.io · 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
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CountDown</title>
    <style>
            body {
                font-family: 'Arial';
                transform: scale(0.9,1);


                margin: 0;
                color:black;
                background-color: white; /* 黒い背景 */
            }
            #event-name {
                font-size: 8vw; /* イベント名のフォントサイズを倍に */
                font-family: 'MS Gothic';

                font-weight: bold;
                color: black;


                word-wrap: break-word; /* 折り返しを許可 */
            }
            #event-date {
                font-size: 6vw; /* イベント日付のフォントサイズ */
                color: black;


                word-wrap: break-word; /* 折り返しを許可 */
            }
            #active_remain_time{
                font-size:3vw;
                font-weight:bold;

                background-color: black;
                color:white;
            }
            #countdown {
                font-size: 10vw; /* D, H, M, Sのフォントサイズを倍に */
                color: black;

                word-wrap: break-word; /* 折り返しを許可 */
            }
            small {
                font-size: 0.5em; /* smallタグでフォントサイズを小さく */
            }
        @media (prefers-color-scheme:dark)
        {

            body {
                font-family: 'Arial';
                transform: scale(0.9,1);


                margin: 0;
                color:white;
                background-color: black; /* 黒い背景 */
            }
            #event-name {
                font-size: 8vw; /* イベント名のフォントサイズを倍に */
                font-family: 'MS Gothic';

                font-weight: bold;
                color: white;


                word-wrap: break-word; /* 折り返しを許可 */
            }
            #event-date {
                font-size: 6vw; /* イベント日付のフォントサイズ */
                color: white;


                word-wrap: break-word; /* 折り返しを許可 */
            }
            #active_remain_time{
                font-size:3vw;
                font-weight:bold;

                background-color:white;
                color:black;
            }
            #countdown {
                font-size: 10vw; /* D, H, M, Sのフォントサイズを倍に */
                color: white;

                word-wrap: break-word; /* 折り返しを許可 */
            }
            small {
                font-size: 0.5em; /* smallタグでフォントサイズを小さく */
            }
        }
    </style>
</head>
<body>
<div><p></p></div>
<div id="event-name"><small>Add eventname and eventdate at the end of the URL<br> in the form of <pre>[URL]?eventname=hoge&eventdate=yyyy/mm/dd/hour:minute</pre></small></div>
<div id="event-date">No Date Specified</div>
<div><span id="active_remain_time" >ACTIVE REMAINING TIME:</span></div>
<div id="countdown"><span style="border: 0.2vw solid;"> D <small>d</small> H <small>h</small> M <small>m</small> S <small>s</small></span></div>

<script>
    function getQueryParams() {
        const params = new URLSearchParams(window.location.search);
        return {
            eventname: params.get('eventname') || '<small>Add eventname and eventdate at the end of the URL<br> in the form of <pre>[URL]?eventname=hoge&eventdate=yyyy/mm/dd/hour:minute</pre></small>',
            eventdate: params.get('eventdate') || 'No Date Specified' // hours:minutes形式
        };
    }

    function updateCountdown() {
        const { eventname, eventdate } = getQueryParams();

        // イベントの日付をパース
        const [year, month, day, hourMinute] = eventdate.split('/');
        let [hour, minute] = hourMinute.split(':').map(Number);

        // hour と minute を 0 埋めして 2 桁にする
        hour = String(hour).padStart(2, '0');
        minute = String(minute).padStart(2, '0');

        const eventTime = new Date(year, month - 1, day, hour, minute);

        // 現在の時刻
        const now = new Date();
        const timeDiff = eventTime - now;

        // 残り時間を計算
        const daysLeft = Math.floor(timeDiff / (1000 * 60 * 60 * 24));
        const hoursLeft = Math.floor((timeDiff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        const minutesLeft = Math.floor((timeDiff % (1000 * 60 * 60)) / (1000 * 60));
        const secondsLeft = Math.floor((timeDiff % (1000 * 60)) / 1000);

        // イベント名と日付を表示（hours:minutes形式に修正）
        document.getElementById('event-name').innerHTML = `▌${eventname}`;
        document.getElementById('event-date').innerHTML = `<small style="transform:scale(0.8,1)">SCHEDULED:</small> ${year}/${month}/${day} ${hour}:${minute}`;

        // カウントダウンの時間を表示し、d, h, m, sを<small>タグで囲む
        document.getElementById('countdown').innerHTML = `
        <span style="border:0.2vw solid;">
            ${daysLeft}<small>d</small>
            ${hoursLeft}<small>h</small>
            ${minutesLeft}<small>m</small>
            ${secondsLeft}<small>s</small>
        </span>`;
    }

    setInterval(updateCountdown, 1000); // 1秒ごとにカウントダウンを更新
</script>

</body>
</html>