SFBadSteben/schachfreunde-badsteben
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Adds chess analysis page

Browse Source 
Adds a new page for chess analysis, powered by lichess.org,
and integrates it into the navigation menu. Also adds daily
puzzle snippet to home page. Updates hero image to correct gif.
This commit is contained in:
Tobias Feigel
2025-09-06 15:28:18 +02:00
parent 38c24ef11a
commit 89debde29c
10 changed files with 127 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.prettierrc
+1 -13
View File
@@ -1,17 +1,5 @@
{
"tabWidth": 2,
"singleQuote": true,
"printWidth": 120,
"plugins": ["@prettier/plugin-php"],
"overrides": [
{
"files": "*.php",
"options": {
"parser": "php",
"tabWidth": 2,
"printWidth": 120,
"singleQuote": true
}
}
]
"printWidth": 120
}
assets/img/Hort-Martius.gif
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.6 MiB

After

Width:  |  Height:  |  Size: 372 KiB

content/3_spielbetrieb/3_analyse/analyse.txt
+3
View File
@@ -0,0 +1,3 @@
Title: Analyse
----
site/snippets/analyse.php
+9
View File
@@ -0,0 +1,9 @@
<h2>Schachanalyse</h2>
<p>powered by lichess.org</p>
<div class="w-full flex justify-center mt-4">
<iframe
src="https://lichess.org/embed/analysis?theme=blue&bg=light&pieceSet=staunty"
style="width: 100%; aspect-ratio: 4/4;"
frameborder="0">
</iframe>
</div>
site/snippets/hero.php
+1 -1
View File
@@ -49,7 +49,7 @@
<!-- Rechte Spalte - GIF -->
<div class="w-3/4 md:w-1/2">
<div class="rounded-lg overflow-hidden shadow-xl">
<img src="/assets/img/Hort-Martius-2.gif"
<img src="/assets/img/Hort-Martius.gif"
alt="Animation"
class="w-full h-auto">
</div>
site/snippets/navbar.php
+8 -2
View File
@@ -99,6 +99,8 @@
<a href="https://www.ligamanager.schachbund-bayern.de/hof/ergebnisse/spielplan.htm?ligaId=2392"
class="block px-4 py-2 text-m text-gray-700 hover:bg-gray-100"
target="_blank">B-Klasse</a>
<a href="/spielbetrieb/analyse"
class="block px-4 py-2 text-m text-gray-700 hover:bg-gray-100">Analyse</a>
</div>
</div>
</div>
@@ -133,8 +135,8 @@
<!-- Einfacher Menüpunkt --><a href="/termine"
class="font-bold px-3 py-2 rounded-md text-gray-700 transition-colors hover:text-blue-600">Termine</a>
<!-- Einfacher Menüpunkt --><a href="/kontakt"
class="font-bold px-3 py-2 rounded-md text-gray-700 transition-colors hover:text-blue-600">Kontakt</a>
</div>
class="font-bold px-3 py-2 rounded-md text-gray-700 transition-colors hover:text-blue-600">Kontakt</a>
</div>
</div>
<!-- Social Media Icons (Rechts) - Nur Desktop -->
<div class="hidden items-center space-x-3 lg:flex">
@@ -205,6 +207,8 @@
class="block px-3 py-2 text-sm text-gray-600 hover:text-blue-600">A-Klasse</a>
<a href="https://www.ligamanager.schachbund-bayern.de/hof/ergebnisse/spielplan.htm?ligaId=2392"
class="block px-3 py-2 text-sm text-gray-600 hover:text-blue-600">B-Klasse</a>
<a href="/spielbetrieb/analyse"
class="block px-3 py-2 text-sm text-gray-600 hover:text-blue-600">Analyse</a>
</div>
</div>
<!-- Mobile Dropdown 2 -->
@@ -239,6 +243,8 @@
class="block rounded-md px-3 py-2 font-medium text-gray-700 hover:text-blue-600">Termine</a>
<a href="/kontakt"
class="block rounded-md px-3 py-2 font-medium text-gray-700 hover:text-blue-600">Kontakt</a>
<a href="/spielbetrieb/analyse"
class="block rounded-md px-3 py-2 font-medium text-gray-700 hover:text-blue-600">Analyse</a>
<!-- Social Media Icons im Mobile Menu -->
<div class="mt-4 border-t pt-4">
<div class="px-3 py-2">
site/snippets/puzzle.php
+29
View File
@@ -0,0 +1,29 @@
<div class="container mx-auto py-8">
<h2>Training & Lichess TV</h2>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 w-full">
<!-- Erste Spalte - Lichess Training -->
<div class="w-full flex flex-col items-center">
<h3 class="text-lg font-semibold mb-3 text-gray-800">Tägliches Rätsel</h3>
<iframe
src="https://lichess.org/training/frame?theme=blue&bg=light&pieceSet=staunty"
style="width:400px; aspect-ratio: 10/11;"
allowtransparency="true"
frameborder="0"
scrolling="no">
</iframe>
</div>
<!-- Zweite Spalte - Lichess Puzzle -->
<div class="w-full flex flex-col items-center">
<h3 class="text-lg font-semibold mb-3 text-gray-800">Lichess TV</h3>
<iframe
src="https://lichess.org/tv/frame?theme=blue&bg=light&pieceSet=staunty"
style="width:390px; aspect-ratio: 10/11"
allowtransparency="true"
frameborder="0"
scrolling="no">
</iframe>
</div>
</div>
</div>
site/templates/analyse.php
+5
View File
@@ -0,0 +1,5 @@
<?php snippet('layout', slots: true) ?>
<?php snippet('analyse') ?>
<?php endsnippet() ?>
site/templates/home.php
+7 -8
View File
@@ -1,16 +1,15 @@
<?php snippet('layout', slots: true) ?>
<?php snippet('layout', slots: true); ?>
<h1>Herzlich Willkommen!</h1>
<?= $page->text()->kirbytext() ?>
<?php snippet('home-news', [
'news' => page('news')
->children()
->limit(3)
->sortBy('date', 'desc')
]) ?>
'news' => page('news')->children()->limit(3)->sortBy('date', 'desc'),
]); ?>
<?php snippet('home-termine') ?>
<?php snippet('home-termine'); ?>
<?php endsnippet() ?>
<?php snippet('puzzle'); ?>
<?php endsnippet(); ?>
src/css/input.css
+64 -65
View File
@@ -1,77 +1,76 @@
@import "tailwindcss";
@import 'tailwindcss';
@theme {
--font-display: "Roboto", "sans-serif";
--font-sans: 'Ubuntu', sans-serif;
--font-serif: 'Roboto', sans-serif;
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
monospace;
--color-sf_blau-50: #ebeef4;
--color-sf_blau-100: #c7cee4;
--color-sf_blau-200: #a3afd4;
--color-sf_blau-300: #7e91c5;
--color-sf_blau-400: #5574b5;
--color-sf_blau-500: #1d59a5;
--color-sf_blau-600: #1b5197;
--color-sf_blau-700: #184a89;
--color-sf_blau-800: #16437c;
--color-sf_blau-900: #143c6f;
--color-sf_blau-950: #113562;
--color-sf_gelb-50: #fdf4ec;
--color-sf_gelb-100: #fee5c9;
--color-sf_gelb-200: #fed6a6;
--color-sf_gelb-300: #fbc883;
--color-sf_gelb-400: #f6b95f;
--color-sf_gelb-500: #f0ab38;
--color-sf_gelb-600: #dc9d33;
--color-sf_gelb-700: #c88e2f;
--color-sf_gelb-800: #b4802a;
--color-sf_gelb-900: #a17326;
--color-sf_gelb-950: #8e6521;
--color-sf_grau-50: #ededed;
--color-sf_grau-100: #cdcdcd;
--color-sf_grau-200: #adadad;
--color-sf_grau-300: #8f8f8f;
--color-sf_grau-400: #717171;
--color-sf_grau-500: #555555;
--color-sf_grau-600: #4e4e4e;
--color-sf_grau-700: #474747;
--color-sf_grau-800: #404040;
--color-sf_grau-900: #393939;
--color-sf_grau-950: #323232;
--font-display: 'Roboto', 'sans-serif';
--font-sans: 'Ubuntu', sans-serif;
--font-serif: 'Roboto', sans-serif;
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
--color-sf_blau-50: #ebeef4;
--color-sf_blau-100: #c7cee4;
--color-sf_blau-200: #a3afd4;
--color-sf_blau-300: #7e91c5;
--color-sf_blau-400: #5574b5;
--color-sf_blau-500: #1d59a5;
--color-sf_blau-600: #1b5197;
--color-sf_blau-700: #184a89;
--color-sf_blau-800: #16437c;
--color-sf_blau-900: #143c6f;
--color-sf_blau-950: #113562;
--color-sf_gelb-50: #fdf4ec;
--color-sf_gelb-100: #fee5c9;
--color-sf_gelb-200: #fed6a6;
--color-sf_gelb-300: #fbc883;
--color-sf_gelb-400: #f6b95f;
--color-sf_gelb-500: #f0ab38;
--color-sf_gelb-600: #dc9d33;
--color-sf_gelb-700: #c88e2f;
--color-sf_gelb-800: #b4802a;
--color-sf_gelb-900: #a17326;
--color-sf_gelb-950: #8e6521;
--color-sf_grau-50: #ededed;
--color-sf_grau-100: #cdcdcd;
--color-sf_grau-200: #adadad;
--color-sf_grau-300: #8f8f8f;
--color-sf_grau-400: #717171;
--color-sf_grau-500: #555555;
--color-sf_grau-600: #4e4e4e;
--color-sf_grau-700: #474747;
--color-sf_grau-800: #404040;
--color-sf_grau-900: #393939;
--color-sf_grau-950: #323232;
}
@layer components {
p {
@apply text-xl font-serif;
}
p {
@apply text-xl font-serif;
}
h1 {
@apply text-6xl font-sans py-8;
}
h1 {
@apply text-6xl font-sans py-8;
}
h2 {
@apply text-3xl font-sans py-4;
}
h2 {
@apply text-3xl font-sans py-4;
}
h3 {
@apply text-2xl font-sans font-bold pb-4 pt-8;
}
h3 {
@apply text-2xl font-sans font-bold pb-4 pt-8;
}
.blockpage p {
@apply py-4;
}
.blockpage p {
@apply py-4;
}
.impressum h2 {
@apply text-3xl pt-12;
}
.impressum h2 {
@apply text-3xl pt-12;
}
p a {
@apply text-sf_blau-500 font-bold hover:text-sf_gelb-600;
}
p a {
@apply text-sf_blau-500 font-bold hover:text-sf_gelb-600;
}
.honeypot {
position: absolute;
left: -9999px;
}
}
.honeypot {
position: absolute;
left: -9999px;
}
}