From b287db4d0a57e8a07d30b756ce0bea30da5ef4e3 Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp@philippdormann.de>
Date: Sat, 15 Apr 2023 20:34:14 +0200
Subject: [PATCH] pin clock to bottom

---
 src/Beamershow.svelte | 452 ++++++++++++++++++++++--------------------
 1 file changed, 233 insertions(+), 219 deletions(-)

diff --git a/src/Beamershow.svelte b/src/Beamershow.svelte
index 6061ab1..fa40d24 100644
--- a/src/Beamershow.svelte
+++ b/src/Beamershow.svelte
@@ -140,230 +140,244 @@
   class="min-h-screen flex items-center justify-center bg-gray-100"
   style="background-image: url('/beamershow_background.png');background-position: center;background-size: contain;background-repeat:no-repeat;"
 >
-  <div style="width:55vw;">
-    {#if current_page === "general"}
-      <div transition:slide|local>
-        <h1
-          class="mr-6 text-7xl font-semibold text-center text-gray-900 font-mono"
-        >
-          {hours}:{minutes}:{seconds}
-        </h1>
-        <!--  -->
-        <div class="flex flex-wrap -mx-1 overflow-hidden mt-5">
-          <div class="my-1 px-1 w-full overflow-hidden sm:w-1/2 md:w-1/3">
-            <h1 class="text-5xl font-semibold text-center text-gray-900">
-              {general.total_runners || "0"}
-            </h1>
-            <h1 class="text-2xl font-semibold text-center text-gray-900">
-              {$_("laeufer")}
-            </h1>
-          </div>
-          <div class="my-1 px-1 w-full overflow-hidden sm:w-1/2 md:w-1/3">
-            <h1 class="text-5xl font-semibold text-center text-gray-900">
-              {general.total_distance || "0"}
-            </h1>
-            <h1 class="text-2xl font-semibold text-center text-gray-900">
-              {$_("kilometer-gesamt")}
-            </h1>
-          </div>
-          <div class="my-1 px-1 w-full overflow-hidden sm:w-1/2 md:w-1/3">
-            <h1 class="text-5xl font-semibold text-center text-gray-900">
-              {general.total_donation || "0"} €
-            </h1>
-            <h1 class="text-2xl font-semibold text-center text-gray-900">
-              {$_("spendensumme")}
-            </h1>
+  <div class="w-full">
+    <div style="width:55vw;" class="mx-auto">
+      <!--  -->
+      {#if current_page === "general"}
+        <div transition:slide|local>
+          <h1 class="mr-6 text-7xl font-semibold text-center text-gray-900">
+            Statistiken
+          </h1>
+          <!--  -->
+          <div class="flex flex-wrap -mx-1 overflow-hidden mt-5">
+            <div class="my-1 px-1 w-full overflow-hidden sm:w-1/2 md:w-1/3">
+              <h1 class="text-5xl font-semibold text-center text-gray-900">
+                {general.total_runners || "0"}
+              </h1>
+              <h1 class="text-2xl font-semibold text-center text-gray-900">
+                {$_("laeufer")}
+              </h1>
+            </div>
+            <div class="my-1 px-1 w-full overflow-hidden sm:w-1/2 md:w-1/3">
+              <h1 class="text-5xl font-semibold text-center text-gray-900">
+                {general.total_distance || "0"}
+              </h1>
+              <h1 class="text-2xl font-semibold text-center text-gray-900">
+                {$_("kilometer-gesamt")}
+              </h1>
+            </div>
+            <div class="my-1 px-1 w-full overflow-hidden sm:w-1/2 md:w-1/3">
+              <h1 class="text-5xl font-semibold text-center text-gray-900">
+                {general.total_donation || "0"} €
+              </h1>
+              <h1 class="text-2xl font-semibold text-center text-gray-900">
+                {$_("spendensumme")}
+              </h1>
+            </div>
           </div>
         </div>
-      </div>
-    {:else if current_page === "runners_distance"}
-      <div transition:slide|local>
-        <h1 class="mr-6 text-7xl font-semibold text-center text-gray-900 mb-5">
-          {$_("top-laeufer")} ({$_("distanz")})
-        </h1>
-        <table class="table p-4 bg-white shadow rounded-lg w-full">
-          <thead>
-            <tr>
-              <th
-                class="border p-4 dark:border-dark-5 whitespace-nowrap font-normal text-gray-900"
-              >
-                {$_("platz")}
-              </th>
-              <th
-                class="border p-4 dark:border-dark-5 whitespace-nowrap font-normal text-gray-900"
-              >
-                {$_("laeufer")}
-              </th>
-              <th
-                class="border p-4 dark:border-dark-5 whitespace-nowrap font-normal text-gray-900"
-              >
-                {$_("organisation")}
-              </th>
-              <th
-                class="border p-4 dark:border-dark-5 whitespace-nowrap font-normal text-gray-900"
-              >
-                {$_("kilometer")}
-              </th>
-            </tr>
-          </thead>
-          <tbody>
-            {#each runners as r, i}
-              <tr class="text-gray-700">
-                <td class="border p-4 dark:border-dark-5">
-                  {i + 1}
-                </td>
-                <td class="border p-4 dark:border-dark-5">
-                  {r.firstname}
-                  {r.lastname}
-                </td>
-                <td class="border p-4 dark:border-dark-5">
-                  {r.group.name}
-                </td>
-                <td class="border p-4 dark:border-dark-5">
-                  {r.distance / 1000} km
-                </td>
+      {:else if current_page === "runners_distance"}
+        <div transition:slide|local>
+          <h1
+            class="mr-6 text-7xl font-semibold text-center text-gray-900 mb-5"
+          >
+            {$_("top-laeufer")} ({$_("distanz")})
+          </h1>
+          <table class="table p-4 bg-white shadow rounded-lg w-full">
+            <thead>
+              <tr>
+                <th
+                  class="border p-4 dark:border-dark-5 whitespace-nowrap font-normal text-gray-900"
+                >
+                  {$_("platz")}
+                </th>
+                <th
+                  class="border p-4 dark:border-dark-5 whitespace-nowrap font-normal text-gray-900"
+                >
+                  {$_("laeufer")}
+                </th>
+                <th
+                  class="border p-4 dark:border-dark-5 whitespace-nowrap font-normal text-gray-900"
+                >
+                  {$_("organisation")}
+                </th>
+                <th
+                  class="border p-4 dark:border-dark-5 whitespace-nowrap font-normal text-gray-900"
+                >
+                  {$_("kilometer")}
+                </th>
               </tr>
-            {/each}
-          </tbody>
-        </table>
-      </div>
-    {:else if current_page === "runners_laptime"}
-      <div transition:slide|local>
-        <h1 class="mr-6 text-7xl font-semibold text-center text-gray-900 mb-5">
-          {$_("top-laeufer")} ({$_("rundenzeit")})
-        </h1>
-        <table class="table p-4 bg-white shadow rounded-lg w-full">
-          <thead>
-            <tr>
-              <th
-                class="border p-4 dark:border-dark-5 whitespace-nowrap font-normal text-gray-900"
-              >
-                {$_("platz")}
-              </th>
-              <th
-                class="border p-4 dark:border-dark-5 whitespace-nowrap font-normal text-gray-900"
-              >
-                {$_("laeufer")}
-              </th>
-              <th
-                class="border p-4 dark:border-dark-5 whitespace-nowrap font-normal text-gray-900"
-              >
-                {$_("organisation")}
-              </th>
-              <th
-                class="border p-4 dark:border-dark-5 whitespace-nowrap font-normal text-gray-900"
-              >
-                {$_("schnellste-rundenzeit")}
-              </th>
-            </tr>
-          </thead>
-          <tbody>
-            {#each runners_by_laptime as r, i}
-              <tr class="text-gray-700">
-                <td class="border p-4 dark:border-dark-5">
-                  {i + 1}
-                </td>
-                <td class="border p-4 dark:border-dark-5">
-                  {r.firstname}
-                  {r.lastname}
-                </td>
-                <td class="border p-4 dark:border-dark-5">
-                  {r.group.name}
-                </td>
-                <td class="border p-4 dark:border-dark-5">
-                  {format_laptime(r.minLaptime)}
-                </td>
+            </thead>
+            <tbody>
+              {#each runners as r, i}
+                <tr class="text-gray-700">
+                  <td class="border p-4 dark:border-dark-5">
+                    {i + 1}
+                  </td>
+                  <td class="border p-4 dark:border-dark-5">
+                    {r.firstname}
+                    {r.lastname}
+                  </td>
+                  <td class="border p-4 dark:border-dark-5">
+                    {r.group.name}
+                  </td>
+                  <td class="border p-4 dark:border-dark-5">
+                    {r.distance / 1000} km
+                  </td>
+                </tr>
+              {/each}
+            </tbody>
+          </table>
+        </div>
+      {:else if current_page === "runners_laptime"}
+        <div transition:slide|local>
+          <h1
+            class="mr-6 text-7xl font-semibold text-center text-gray-900 mb-5"
+          >
+            {$_("top-laeufer")} ({$_("rundenzeit")})
+          </h1>
+          <table class="table p-4 bg-white shadow rounded-lg w-full">
+            <thead>
+              <tr>
+                <th
+                  class="border p-4 dark:border-dark-5 whitespace-nowrap font-normal text-gray-900"
+                >
+                  {$_("platz")}
+                </th>
+                <th
+                  class="border p-4 dark:border-dark-5 whitespace-nowrap font-normal text-gray-900"
+                >
+                  {$_("laeufer")}
+                </th>
+                <th
+                  class="border p-4 dark:border-dark-5 whitespace-nowrap font-normal text-gray-900"
+                >
+                  {$_("organisation")}
+                </th>
+                <th
+                  class="border p-4 dark:border-dark-5 whitespace-nowrap font-normal text-gray-900"
+                >
+                  {$_("schnellste-rundenzeit")}
+                </th>
               </tr>
-            {/each}
-          </tbody>
-        </table>
-      </div>
-    {:else if current_page === "orgs_distance"}
-      <div transition:slide|local>
-        <h1 class="mr-6 text-7xl font-semibold text-center text-gray-900 mb-5">
-          {$_("top-organsiationen")}
-        </h1>
-        <table class="table p-4 bg-white shadow rounded-lg w-full">
-          <thead>
-            <tr>
-              <th
-                class="border p-4 dark:border-dark-5 whitespace-nowrap font-normal text-gray-900"
-              >
-                {$_("platz")}
-              </th>
-              <th
-                class="border p-4 dark:border-dark-5 whitespace-nowrap font-normal text-gray-900"
-              >
-                {$_("organsiation")}
-              </th>
-              <th
-                class="border p-4 dark:border-dark-5 whitespace-nowrap font-normal text-gray-900"
-              >
-                {$_("kilometer")}
-              </th>
-            </tr>
-          </thead>
-          <tbody>
-            {#each orgs as o, i}
-              <tr class="text-gray-700">
-                <td class="border p-4 dark:border-dark-5">
-                  {i + 1}
-                </td>
-                <td class="border p-4 dark:border-dark-5">
-                  {o.name}
-                </td>
-                <td class="border p-4 dark:border-dark-5">
-                  {o.distance / 1000} km
-                </td>
+            </thead>
+            <tbody>
+              {#each runners_by_laptime as r, i}
+                <tr class="text-gray-700">
+                  <td class="border p-4 dark:border-dark-5">
+                    {i + 1}
+                  </td>
+                  <td class="border p-4 dark:border-dark-5">
+                    {r.firstname}
+                    {r.lastname}
+                  </td>
+                  <td class="border p-4 dark:border-dark-5">
+                    {r.group.name}
+                  </td>
+                  <td class="border p-4 dark:border-dark-5">
+                    {format_laptime(r.minLaptime)}
+                  </td>
+                </tr>
+              {/each}
+            </tbody>
+          </table>
+        </div>
+      {:else if current_page === "orgs_distance"}
+        <div transition:slide|local>
+          <h1
+            class="mr-6 text-7xl font-semibold text-center text-gray-900 mb-5"
+          >
+            {$_("top-organsiationen")}
+          </h1>
+          <table class="table p-4 bg-white shadow rounded-lg w-full">
+            <thead>
+              <tr>
+                <th
+                  class="border p-4 dark:border-dark-5 whitespace-nowrap font-normal text-gray-900"
+                >
+                  {$_("platz")}
+                </th>
+                <th
+                  class="border p-4 dark:border-dark-5 whitespace-nowrap font-normal text-gray-900"
+                >
+                  {$_("organsiation")}
+                </th>
+                <th
+                  class="border p-4 dark:border-dark-5 whitespace-nowrap font-normal text-gray-900"
+                >
+                  {$_("kilometer")}
+                </th>
               </tr>
-            {/each}
-          </tbody>
-        </table>
-      </div>
-    {:else if current_page === "teams_distance"}
-      <div transition:slide|local>
-        <h1 class="mr-6 text-7xl font-semibold text-center text-gray-900 mb-5">
-          {$_("top-teams")}
-        </h1>
-        <table class="table p-4 bg-white shadow rounded-lg w-full">
-          <thead>
-            <tr>
-              <th
-                class="border p-4 dark:border-dark-5 whitespace-nowrap font-normal text-gray-900"
-              >
-                {$_("platz")}
-              </th>
-              <th
-                class="border p-4 dark:border-dark-5 whitespace-nowrap font-normal text-gray-900"
-              >
-                {$_("team")}
-              </th>
-              <th
-                class="border p-4 dark:border-dark-5 whitespace-nowrap font-normal text-gray-900"
-              >
-                {$_("kilometer")}
-              </th>
-            </tr>
-          </thead>
-          <tbody>
-            {#each teams as t, i}
-              <tr class="text-gray-700">
-                <td class="border p-4 dark:border-dark-5">
-                  {i + 1}
-                </td>
-                <td class="border p-4 dark:border-dark-5">
-                  {t.name}
-                </td>
-                <td class="border p-4 dark:border-dark-5">
-                  {t.distance / 1000} km
-                </td>
+            </thead>
+            <tbody>
+              {#each orgs as o, i}
+                <tr class="text-gray-700">
+                  <td class="border p-4 dark:border-dark-5">
+                    {i + 1}
+                  </td>
+                  <td class="border p-4 dark:border-dark-5">
+                    {o.name}
+                  </td>
+                  <td class="border p-4 dark:border-dark-5">
+                    {o.distance / 1000} km
+                  </td>
+                </tr>
+              {/each}
+            </tbody>
+          </table>
+        </div>
+      {:else if current_page === "teams_distance"}
+        <div transition:slide|local>
+          <h1
+            class="mr-6 text-7xl font-semibold text-center text-gray-900 mb-5"
+          >
+            {$_("top-teams")}
+          </h1>
+          <table class="table p-4 bg-white shadow rounded-lg w-full">
+            <thead>
+              <tr>
+                <th
+                  class="border p-4 dark:border-dark-5 whitespace-nowrap font-normal text-gray-900"
+                >
+                  {$_("platz")}
+                </th>
+                <th
+                  class="border p-4 dark:border-dark-5 whitespace-nowrap font-normal text-gray-900"
+                >
+                  {$_("team")}
+                </th>
+                <th
+                  class="border p-4 dark:border-dark-5 whitespace-nowrap font-normal text-gray-900"
+                >
+                  {$_("kilometer")}
+                </th>
               </tr>
-            {/each}
-          </tbody>
-        </table>
-      </div>
-    {:else}
-      <!-- content here -->
-    {/if}
+            </thead>
+            <tbody>
+              {#each teams as t, i}
+                <tr class="text-gray-700">
+                  <td class="border p-4 dark:border-dark-5">
+                    {i + 1}
+                  </td>
+                  <td class="border p-4 dark:border-dark-5">
+                    {t.name}
+                  </td>
+                  <td class="border p-4 dark:border-dark-5">
+                    {t.distance / 1000} km
+                  </td>
+                </tr>
+              {/each}
+            </tbody>
+          </table>
+        </div>
+      {:else}
+        <!-- content here -->
+      {/if}
+    </div>
   </div>
+  <h1
+    class="text-5xl font-semibold text-center text-gray-900 font-mono bottom-2 w-full fixed"
+  >
+    {hours}:{minutes}:{seconds}
+  </h1>
 </div>