Subathon-Timer/index.html at main · romestylez/Subathon-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
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
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Subathon Timer</title>
  <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Knewave&display=swap" rel="stylesheet">

  <style>
    @font-face {
      font-family: 'BOZART';
      src: url('fonts/BOZART.ttf') format('truetype');
      font-weight: normal;
      font-style: normal;
    }

    body {
      background: transparent;
      margin: 0;
      overflow: hidden;
    }

    #wrapper {
      position: relative;            /* Referenz für den absolut positionierten "Paused"-Text */
      display: inline-block;
      text-align: left;
    }

    #timer {
      font-family: 'BOZART', sans-serif;
      font-size: 120px;
      color: #005fa3;
      font-weight: bold;
      margin-left: 5px;
	  margin-top: 15px;
      display: flex;
      align-items: center;
      text-shadow:
        -1px -1px 0 #000,
         1px -1px 0 #000,
        -1px  1px 0 #000,
         1px  1px 0 #000;
    }


    #pause-icon {
      width: 65px;          /* gleiche Wirkung wie bisherige Textgröße */
      height: auto;
      fill: #005fa3;        /* gleiche Farbe wie die Uhr */
      filter: drop-shadow(-1px -1px 0 #000)
      drop-shadow(1px -1px 0 #000)
      drop-shadow(-1px 1px 0 #000)
      drop-shadow(1px 1px 0 #000);
      margin-right: 20px;
}

/* Noch langsamer & smoother */
.pulse-paused,
.pulse-time {
  animation: pausePulse 6.5s ease-in-out infinite;
}

@keyframes pausePulse {
  0%   { opacity: 1; }
  50%  { opacity: 0.65; }
  100% { opacity: 1; }
}

    #timer .hm {
      display: inline-block;
    }

    #timer .seconds {
      font-size: 40px;
      position: relative;
      top: 35px;
      left: 0px;
      margin-left: 8px;
      min-width: 55px;
      text-align: left;
    }
  </style>
</head>
<body>
  <div id="wrapper">
    <div id="timer">
      <span id="pause-indicator">
  <svg id="pause-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">
    <path d="M48 32C21.5 32 0 53.5 0 80L0 432c0 26.5 21.5 48 48 48l64 0c26.5 0 48-21.5 48-48l0-352c0-26.5-21.5-48-48-48L48 32zm224 0c-26.5 0-48 21.5-48 48l0 352c0 26.5 21.5 48 48 48l64 0c26.5 0 48-21.5 48-48l0-352c0-26.5-21.5-48-48-48l-64 0z"/>
  </svg>
</span>

      <span class="hm">00:00</span>
      <span class="seconds">00</span>
    </div>

  </div>

<script src="https://cdn.socket.io/4.5.4/socket.io.min.js"></script>
<script>
const BASE = "http://subathon.smtxlost.tv:5000";
const socket = io(BASE);

const hmSpan     = document.querySelector("#timer .hm");
const secSpan    = document.querySelector("#timer .seconds");
const pauseIcon  = document.getElementById("pause-indicator");

function formatTime(seconds) {
  let h = Math.floor(seconds / 3600);
  let m = Math.floor((seconds % 3600) / 60);
  let s = seconds % 60;
  return {
    hm: `${String(h).padStart(2,"0")}:${String(m).padStart(2,"0")}`,
    s:  `${String(s).padStart(2,"0")}`
  };
}

function updateTimer(data) {
  const t = formatTime(data.remaining);
  hmSpan.textContent = t.hm;
  secSpan.textContent = t.s;

  const show = !!data.paused;

  // Pause Icon sichtbar/unsichtbar
  pauseIcon.style.display = show ? "inline-block" : "none";

  // Pulse-Klasse ein/aus
  if (show) {
  pauseIcon.classList.add("pulse-paused");
  hmSpan.classList.add("pulse-time");
  secSpan.classList.add("pulse-time");
} else {
  pauseIcon.classList.remove("pulse-paused");
  hmSpan.classList.remove("pulse-time");
  secSpan.classList.remove("pulse-time");
}

}

// Socket Listener WIEDER AUF ROOT-LEVEL
socket.on("timer_update", updateTimer);

// initialen Status laden
fetch(BASE + "/state")
  .then(r => r.json())
  .then(updateTimer);
</script>

</body>
</html>