windows-desktop-clock-widget/index.html at main · AtomCode01/windows-desktop-clock-widget · 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
156
157
158
159
160
161
162
163
164
165
166
167
<!-- index.html - Your Clock Widget -->
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <!-- <title>Stylized Clock</title> -->
    <style>
      /* Important: Ensure your font file is in the same directory as index.html
         or provide the correct relative path (e.g., url("fonts/Anurati-Regular.otf")) */
      @font-face {
        font-family: "Anurati";
        src: url("Anurati-Regular.otf") format("opentype");
      }

      /* Add more custom fonts here the same way.
         Drop the font file next to index.html (or in a fonts/ folder)
         and register it like this:

      @font-face {
        font-family: "YourFontName";
        src: url("fonts/YourFontFile.otf") format("opentype");
      }
      */

      * {
        box-sizing: border-box;
      }

      html, body {
        -webkit-app-region: drag; /* makes the whole widget draggable */
      }

      body {
        margin: 0;
        background: transparent; /* transparent background */
        font-family: "Anurati", sans-serif;
        height: 100vh;
        width: 100vw;
        overflow: hidden;
      }

      #clockSvg {
        width: 100%;
        height: 100%;
        display: block;
        /* Replaces the old CSS text-shadow — works the same way on SVG text */
        filter: drop-shadow(1px 1px 3px rgba(0, 0, 0, 0.7));
      }

      /* Font sizes match the original design (relative to the default 16px
         root font-size): 4.5em/2em/1.4em respectively */
      text {
        text-anchor: middle;
        font-family: inherit;
      }

      .day {
        font-size: 4.5em;
        letter-spacing: 0.1em;
      }

      .date {
        font-size: 2em;
      }

      .time {
        font-size: 1.4em;
      }
    </style>
  </head>
  <body>
    <!-- viewBox matches the window's fixed 700x350 size set in main.js, so
         1 SVG unit = 1 CSS pixel and text positions stay predictable. -->
    <svg id="clockSvg" viewBox="0 0 700 350" preserveAspectRatio="xMidYMid meet">
      <defs>
        <!-- A single shared gradient definition. Real SVG fill — unlike CSS
             background-clip: text, this renders as a solid, crisp fill with
             no dependency on GPU compositing, so it looks right even with
             hardware acceleration disabled. -->
        <linearGradient id="textGrad" x1="0%" y1="0%" x2="100%" y2="0%">
          <stop id="gradStop1" offset="0%" stop-color="#ffffff" />
          <stop id="gradStop2" offset="100%" stop-color="#ffffff" />
        </linearGradient>
      </defs>

      <text id="dayText" class="day" x="350" y="145">SATURDAY</text>
      <text id="dateText" class="date" x="350" y="205">27 MARCH, 2021.</text>
      <text id="timeText" class="time" x="350" y="245">- 00:15 -</text>
    </svg>

    <script>
      const dayText = document.getElementById("dayText");
      const dateText = document.getElementById("dateText");
      const timeText = document.getElementById("timeText");

      function updateClock() {
        const now = new Date();
        const day = now
          .toLocaleDateString("en-US", { weekday: "long" })
          .toUpperCase();
        const date = now
          .toLocaleDateString("en-US", {
            day: "numeric",
            month: "long",
            year: "numeric",
          })
          .toUpperCase();
        const time = now.toLocaleTimeString([], {
          hour: "2-digit",
          minute: "2-digit",
        });

        dayText.textContent = day;
        dateText.textContent = date;
        timeText.textContent = `- ${time} -`;
      }

      // Update clock immediately on load and then every minute
      updateClock();
      setInterval(updateClock, 60000);

      // --- Apply settings (font + gradient color) from the main process ---
      const clockTextElements = [dayText, dateText, timeText];
      const gradStop1 = document.getElementById("gradStop1");
      const gradStop2 = document.getElementById("gradStop2");
      const textGrad = document.getElementById("textGrad");

      function applySettings(settings) {
        // If the user browsed a custom font file, register it as a
        // @font-face right here so the widget can actually use it — preset
        // fonts are already declared in the CSS above, but a custom one
        // only exists as embedded data in settings.
        if (settings.customFontName && settings.customFontDataUrl) {
          let styleEl = document.getElementById("customFontFace");
          if (!styleEl) {
            styleEl = document.createElement("style");
            styleEl.id = "customFontFace";
            document.head.appendChild(styleEl);
          }
          styleEl.textContent = `@font-face { font-family: "${settings.customFontName}"; src: url("${settings.customFontDataUrl}"); }`;
        }

        document.body.style.fontFamily = `${settings.font}, sans-serif`;

        // Update the shared gradient's two stops and its angle. With a real
        // SVG fill, this renders correctly whether the two colors are the
        // same (looks perfectly solid) or different (looks like a genuine
        // gradient) — no special-casing needed, unlike the old CSS approach.
        gradStop1.setAttribute("stop-color", settings.gradientStart);
        gradStop2.setAttribute("stop-color", settings.gradientEnd);
        textGrad.setAttribute(
          "gradientTransform",
          `rotate(${settings.gradientAngle}, 0.5, 0.5)`
        );

        clockTextElements.forEach((el) => {
          el.style.fill = "url(#textGrad)";
        });
      }

      // Load whatever settings were saved last time, as soon as the widget starts
      window.electronAPI.getSettings().then(applySettings);

      // Apply live updates the instant something changes in the Settings window
      window.electronAPI.onSettingsChanged(applySettings);
    </script>
  </body>
</html>