feat: redesign the clock as a full page display

index.html

@@ -12,29 +12,19 @@
       reference-height="1080"
       orientation="auto"
     >
-      <div id="app">
-        <app-header class="header" show-date></app-header>
-        <main class="content">
-          <section class="current">
-            <div class="city" data-location>--</div>
-            <div class="time-wrapper">
-              <span class="time" data-time>--:--</span>
-              <span class="clock-period" data-period>--</span>
-            </div>
-            <div class="status-row">
-              <span class="date" data-date>--</span>
-              <div class="temperature-wrapper">
-                <img
-                  src="static/images/icons/clear.svg"
-                  alt="weather icon"
-                  class="temperature-icon"
-                  data-weather-icon
-                />
-                <span class="temperature" data-temperature>--°</span>
-              </div>
-            </div>
-          </section>
-        </main>
+      <div class="clock">
+        <p class="clock-place" data-location>--</p>
+        <div class="clock-time">
+          <span class="clock-time-value" data-time>--:--</span>
+          <span class="clock-time-period" data-period></span>
+        </div>
+        <div class="clock-meta">
+          <span data-date>--</span>
+          <span class="clock-weather" data-weather>
+            <img class="clock-weather-icon" alt="" data-weather-icon />
+            <span data-temperature>--°</span>
+          </span>
+        </div>
       </div>
     </auto-scaler>
     <script type="module" src="/src/main.ts"></script>

screenly.yml

@@ -43,6 +43,23 @@ settings:
     help_text: |
       Override the default timezone with a supported timezone identifier (e.g., Europe/London, America/New_York). Defaults to the system timezone if left blank.
       You can find the available timezones here: https://momentjs.com/timezone/
+  style:
+    type: string
+    default_value: traditional
+    title: Style
+    optional: true
+    help_text:
+      properties:
+        help_text: Select the visual style for the clock.
+        options:
+        - label: Traditional
+          value: traditional
+        - label: Modern
+          value: modern
+        - label: Minimal
+          value: minimal
+        type: select
+      schema_version: 1
   tag_manager_id:
     type: string
     default_value: GTM-P98SPZ9Z

screenly_qc.yml

@@ -43,6 +43,23 @@ settings:
     help_text: |
       Override the default timezone with a supported timezone identifier (e.g., Europe/London, America/New_York). Defaults to the system timezone if left blank.
       You can find the available timezones here: https://momentjs.com/timezone/
+  style:
+    type: string
+    default_value: traditional
+    title: Style
+    optional: true
+    help_text:
+      properties:
+        help_text: Select the visual style for the clock.
+        options:
+        - label: Traditional
+          value: traditional
+        - label: Modern
+          value: modern
+        - label: Minimal
+          value: minimal
+        type: select
+      schema_version: 1
   tag_manager_id:
     type: string
     default_value: GTM-P98SPZ9Z