add statistics

astro.config.mjs

@@ -43,8 +43,6 @@ export default defineConfig({
 
       WEBHOOK_ENDPOINT: envField.string({ context: 'server', access: 'secret', optional: true }),
 
-      YOUTUBE_INTRO_LINK: envField.string({ context: 'server', access: 'secret', optional: true }),
-
       TEAMSPEAK_LINK: envField.string({ context: 'server', access: 'secret', default: 'http://example.com' }),
       DISCORD_LINK: envField.string({ context: 'server', access: 'secret', default: 'http://example.com' }),
       PAYPAL_LINK: envField.string({ context: 'server', access: 'secret', default: 'http://example.com' }),

src/icons/crosshairs.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24" fill="currentColor" viewBox="0 0 512 512"><path d="M256 0c17.7 0 32 14.3 32 32V42.4c93.7 13.9 167.7 88 181.6 181.6H480c17.7 0 32 14.3 32 32s-14.3 32-32 32H469.6c-13.9 93.7-88 167.7-181.6 181.6V480c0 17.7-14.3 32-32 32s-32-14.3-32-32V469.6C130.3 455.7 56.3 381.7 42.4 288H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H42.4C56.3 130.3 130.3 56.3 224 42.4V32c0-17.7 14.3-32 32-32zM107.4 288c12.5 58.3 58.4 104.1 116.6 116.6V384c0-17.7 14.3-32 32-32s32 14.3 32 32v20.6c58.3-12.5 104.1-58.4 116.6-116.6H384c-17.7 0-32-14.3-32-32s14.3-32 32-32h20.6C392.1 165.7 346.3 119.9 288 107.4V128c0 17.7-14.3 32-32 32s-32-14.3-32-32V107.4C165.7 119.9 119.9 165.7 107.4 224H128c17.7 0 32 14.3 32 32s-14.3 32-32 32H107.4zM256 224a32 32 0 1 1 0 64 32 32 0 1 1 0-64z"/></svg>

src/icons/skull.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M10.5 15.75h3l-1.5-3zM8.5 13q.825 0 1.413-.587T10.5 11t-.587-1.412T8.5 9t-1.412.588T6.5 11t.588 1.413T8.5 13m7 0q.825 0 1.413-.587T17.5 11t-.587-1.412T15.5 9t-1.412.588T13.5 11t.588 1.413T15.5 13M6 22v-4.25q-.975-.425-1.713-1.137T3.037 15t-.775-1.925T2 11q0-3.95 2.8-6.475T12 2t7.2 2.525T22 11q0 1.05-.262 2.075T20.963 15t-1.25 1.613T18 17.75V22h-3v-2h-2v2h-2v-2H9v2z"/></svg>

src/pages/index.astro

@@ -3,9 +3,10 @@ import WebsiteLayout from '@layouts/website/WebsiteLayout.astro';
 import Countdown from '@app/website/index/Countdown.svelte';
 import Craftattack from '@assets/img/craftattack.webp';
 import Background from '@assets/img/background.webp';
-import { START_DATE, YOUTUBE_INTRO_LINK } from 'astro:env/server';
+import { START_DATE } from 'astro:env/server';
 import { getSetting, SettingKey } from '@util/settings';
 import { db } from '@db/database.ts';
+import { Icon } from 'astro-icon/components';
 
 const signupEnabled = await getSetting(db, SettingKey.SignupEnabled, false);
 const signupInfoMessage = await getSetting(db, SettingKey.SignupInfoMessage);
@@ -69,23 +70,6 @@ const information = [
     </div>
   </div>
 
-  {
-    YOUTUBE_INTRO_LINK && (
-      <div class="bg-base-300 w-full py-12 flex justify-center">
-        <iframe
-          width="624"
-          height="351"
-          src={YOUTUBE_INTRO_LINK}
-          title="YouTube video player"
-          frameborder="0"
-          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-          referrerpolicy="strict-origin-when-cross-origin"
-          allowfullscreen
-        />
-      </div>
-    )
-  }
-
   <div class="flex justify-center py-20 bg-base-200">
     <div class="card bg-base-100 shadow-lg w-11/12 xl:w-5/12 p-10">
       <div>
@@ -111,4 +95,58 @@ const information = [
       </div>
     </div>
   </div>
+
+  <div class="flex flex-col xl:flex-row justify-center items-center py-20 bg-base-100">
+    <div>
+      <h3 class="text-center text-2xl mb-6">2024/2025 in Zahlen</h3>
+      <div class="flex flex-col lg:flex-row gap-4">
+        <div class="stats stats-vertical xl:stats-horizontal shadow">
+          <div class="stat">
+            <div class="stat-figure">
+              <Icon name="heroicons:wrench-screwdriver-solid" size="1.5em" />
+            </div>
+            <div class="stat-title">Abgebaute Blöcke</div>
+            <div class="stat-value">17M</div>
+            <div class="stat-desc"><span class="underline">2.4M</span> davon Nehterrack</div>
+          </div>
+          <div class="stat">
+            <div class="stat-figure">
+              <Icon name="heroicons:users-solid" size="1.5em" />
+            </div>
+            <div class="stat-title">Teilnehmer</div>
+            <div class="stat-value">161</div>
+            <div class="stat-desc">&#8203;</div>
+          </div>
+        </div>
+        <div class="stats stats-vertical xl:stats-horizontal shadow h-min xl:h-[initial]">
+          <div class="stat">
+            <div class="stat-figure">
+              <Icon name="heroicons:clock-solid" size="1.5em" />
+            </div>
+            <div class="stat-title">Gesamtspielzeit</div>
+            <div class="stat-value">276 Tage</div>
+            <div class="stat-desc">&#8203;</div>
+          </div>
+        </div>
+        <div class="stats stats-vertical xl:stats-horizontal shadow">
+          <div class="stat">
+            <div class="stat-figure">
+              <Icon name="crosshairs" size="1.5em" />
+            </div>
+            <div class="stat-title">Getötete Monster</div>
+            <div class="stat-value">751K</div>
+            <div class="stat-desc">&#8203;</div>
+          </div>
+          <div class="stat">
+            <div class="stat-figure">
+              <Icon name="skull" size="1.5em" />
+            </div>
+            <div class="stat-title">Spieler Tode</div>
+            <div class="stat-value">2468</div>
+            <div class="stat-desc"><span class="underline">544</span> davon durch andere Spieler</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </WebsiteLayout>