UTC-Clock/time.html at main · Mprog-code/UTC-Clock · 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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>UTC & UAE Time (NTP Synced)</title>
  <style>
    body {
      margin: 0;
      background-color: black;
      color: limegreen;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      height: 100vh;
      font-family: monospace;
      padding-left: 5%;
    }
    .time-box {
      font-size: 5em;
      margin: 20px 0;
    }
    .label {
      font-size: 1.5em;
      color: white;
    }
    .status {
      font-size: 1em;
      color: gray;
      margin-top: 10px;
    }
    .error {
      color: red;
    }
  </style>
</head>
<body>
  <div class="time-box">
    <div class="label">UTC Time</div>
    <div id="utc-time">--:--:--</div>
  </div>

  <div class="time-box">
    <div class="label">UAE Time</div>
    <div id="uae-time">--:--:--</div>
  </div>

  <div id="status" class="status">Connecting to time server...</div>

  <script>

    const API_URL = "http://10.170.1.207:5000/api/time";


    async function fetchTimeFromServer() {
      const statusEl = document.getElementById("status");
      const utcEl = document.getElementById("utc-time");
      const uaeEl = document.getElementById("uae-time");

      try {
        const response = await fetch(API_URL, { cache: "no-store" });

        if (!response.ok) {
          throw new Error("API error: " + response.status);
        }

        const data = await response.json();

        if (data.error) {
          throw new Error(data.error);
        }

        utcEl.textContent = data.utc || "--:--:--";
        uaeEl.textContent = data.uae || "--:--:--";
        statusEl.textContent = "Time synced with NTP backend ✔";
        statusEl.classList.remove("error");
      } catch (err) {
        console.error("Failed to fetch time:", err);
        statusEl.textContent = "Failed to contact NTP backend ✖";
        statusEl.classList.add("error");
        utcEl.textContent = "--:--:--";
        uaeEl.textContent = "--:--:--";
      }
    }

    // Call immediately, then every second
    fetchTimeFromServer();
    setInterval(fetchTimeFromServer, 1000);
  </script>
</body>
</html>