From 41107652d157500f172b9e03dfa246e54954e7d8 Mon Sep 17 00:00:00 2001 From: Valentin Heiserer Date: Tue, 26 Aug 2025 01:26:50 +0200 Subject: [PATCH] refactor: update landing page layout and styles for Schafkopf Bot --- frontend/index.html | 4 +- frontend/src/App.svelte | 178 ++++++++++++++++++++++++++------ frontend/src/app.css | 89 ++++------------ frontend/src/lib/Counter.svelte | 10 -- 4 files changed, 168 insertions(+), 113 deletions(-) delete mode 100644 frontend/src/lib/Counter.svelte diff --git a/frontend/index.html b/frontend/index.html index b6c5f0a..d7fa7cb 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -2,9 +2,9 @@ - + - Vite + Svelte + TS + Schafkopf Bot — Play & Train
diff --git a/frontend/src/App.svelte b/frontend/src/App.svelte index f75b68a..8f50689 100644 --- a/frontend/src/App.svelte +++ b/frontend/src/App.svelte @@ -1,47 +1,159 @@ -
-
- - - - - - -
-

Vite + Svelte

+
+
+
+

Schafkopf Bot

+ +
+
-
- -
+
+
+

Play, train and analyse Schafkopf with an intelligent bot

+

A friendly opponent and coach for solo practice, teaching games and building your skills.

+
+ Play with the bot + See features +
+
-

- Check out SvelteKit, the official Svelte app framework powered by Vite! -

+ +
-

- Click on the Vite and Svelte logos to learn more -

+
+

Key features

+
+
+

Play against an AI

+

Fast opponents at multiple skill levels — perfect for solo training and testing strategies.

+
+
+

Hand analysis

+

Review played hands with suggestions and common mistakes highlighted to accelerate learning.

+
+
+

Compatible interfaces

+

Connect via chat platforms or a web interface — invite the bot to your games and tournaments.

+
+
+

Privacy-first

+

Local game history and optional anonymous usage — designed with player privacy in mind.

+
+
+
+ +
+

How it works

+
    +
  1. Start a new game and choose a difficulty.
    2. +
  2. Play hands while the bot offers optional hints and post-game analysis.
    3. +
  3. Export or review hands to track progress.
    4. +
+
+ +
+

Get early access

+

Interested in trying the bot or integrating it into a platform? Send a message and we'll reply with next steps.

+ Contact us +
+ +
+
+ © {new Date().getFullYear()} Schafkopf Bot — built with Svelte + +
+
diff --git a/frontend/src/app.css b/frontend/src/app.css index 61ba367..f496343 100644 --- a/frontend/src/app.css +++ b/frontend/src/app.css @@ -1,79 +1,32 @@ :root { - font-family: system-ui, Avenir, Helvetica, Arial, sans-serif; - line-height: 1.5; - font-weight: 400; + --font-family: system-ui, Avenir, Helvetica, Arial, sans-serif; + --bg: #0b0b0b; + --surface: #121212; + --text: #eaeaea; + --muted: #9aa3b2; + --accent: #7c6cff; +} - color-scheme: light dark; - color: rgba(255, 255, 255, 0.87); - background-color: #242424; - - font-synthesis: none; - text-rendering: optimizeLegibility; +* { box-sizing: border-box; } +html, body { height: 100%; } +body { + margin: 0; + font-family: var(--font-family); + color: var(--text); + background: linear-gradient(180deg, var(--bg), var(--surface)); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } -a { - font-weight: 500; - color: #646cff; - text-decoration: inherit; -} -a:hover { - color: #535bf2; -} +a { color: var(--accent); text-decoration: none; } +a:hover { opacity: 0.9; } -body { - margin: 0; - display: flex; - place-items: center; - min-width: 320px; - min-height: 100vh; -} +/* utility container used by App.svelte */ +.container { max-width: 1100px; margin: 0 auto; padding: 1.25rem; } -h1 { - font-size: 3.2em; - line-height: 1.1; -} - -.card { - padding: 2em; -} - -#app { - max-width: 1280px; - margin: 0 auto; - padding: 2rem; - text-align: center; -} - -button { - border-radius: 8px; - border: 1px solid transparent; - padding: 0.6em 1.2em; - font-size: 1em; - font-weight: 500; - font-family: inherit; - background-color: #1a1a1a; - cursor: pointer; - transition: border-color 0.25s; -} -button:hover { - border-color: #646cff; -} -button:focus, -button:focus-visible { - outline: 4px auto -webkit-focus-ring-color; -} +/* accessible focus styles */ +:focus { outline: 3px solid rgba(124,108,255,0.18); outline-offset: 2px; } @media (prefers-color-scheme: light) { - :root { - color: #213547; - background-color: #ffffff; - } - a:hover { - color: #747bff; - } - button { - background-color: #f9f9f9; - } + :root { --bg: #fafafa; --surface:#fff; --text:#111827; --muted:#556; } } diff --git a/frontend/src/lib/Counter.svelte b/frontend/src/lib/Counter.svelte deleted file mode 100644 index 37d75ce..0000000 --- a/frontend/src/lib/Counter.svelte +++ /dev/null @@ -1,10 +0,0 @@ - - -