chk
/
KoogleApp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

design koogle -> GoodWood

This commit is contained in:
beo3000 2026-01-11 14:39:50 +01:00
parent c6e89ecdb6
commit 799474e9b9
28 changed files with 104 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
CLAUDE.md
View File

@ -8,7 +8,7 @@ The development guidelines to consider are descibed in [docs/development_guideli
Blazor Server app (.NET 9.0) with Clean Architecture: Domain, Application, Infrastructure, Web layers. Uses ASP.NET Core Identity with dual DbContext pattern (AppDbContext for domain, AppIdentityDbContext for auth), MudBlazor UI, and Fluxor state management.
The name for the App is KOOGLE. Koogle is an app for club management.
The name for the App is GOODWOOD. GoodWood is an app for club management.
### Functional
- Club management

2
KoogleApp.sln
View File

@ -26,6 +26,8 @@ Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "docs", "docs", "{63E5B7FE-3
ProjectSection(SolutionItems) = preProject
docs\build.md = docs\build.md
CLAUDE.md = CLAUDE.md
design.md = design.md
..\..\..\..\Users\d-chrka\Downloads\Moodboard.png = ..\..\..\..\Users\d-chrka\Downloads\Moodboard.png
todos.md = todos.md
EndProjectSection
EndProject

0
design.md Normal file
View File

2
src/Koogle.Web/Components/Layout/EmptyLayout.razor
View File

@ -8,7 +8,7 @@
@code {
// Default theme - configurable for future theme selection
private MudTheme _theme = CustomThemes.DefaultTheme;
private MudTheme _theme = CustomThemes.GoodwoodTheme;
}
<main>

4
src/Koogle.Web/Components/Layout/MainLayout.razor
View File

@ -22,7 +22,7 @@
<MudLayout>
<MudAppBar Elevation="1" Dense="true" Style="background: linear-gradient(135deg, #1a365d 0%, #2d5a4d 100%); color: white;">
<MudAppBar Elevation="1" Dense="true" Style="background: linear-gradient(135deg, #1B3022 0%, #4A5D4E 100%); color: white;">
<MudIconButton Icon="@Icons.Material.Filled.Menu" Color="Color.Inherit" Edge="Edge.Start" OnClick="ToggleDrawer" />
<MudText Typo="Typo.h6">KOOGLE</MudText>
<MudSpacer/>
@ -100,7 +100,7 @@
}
// Default theme - can be changed per user in future
private MudTheme _theme = CustomThemes.DefaultTheme;
private MudTheme _theme = CustomThemes.GoodwoodTheme;
private void ClearAuthError()
{

10
src/Koogle.Web/Components/Layout/PublicLayout.razor
View File

@ -8,7 +8,7 @@
<MudSnackbarProvider />
<MudLayout>
<MudAppBar Elevation="1" Style="background: linear-gradient(135deg, #1a365d 0%, #2d5a4d 100%);">
<MudAppBar Elevation="1" Style="background: linear-gradient(135deg, #1B3022 0%, #4A5D4E 100%);">
@* Mobile Menu Button (unter lg: 1280px) - LINKS *@
<MudIconButton Icon="@Icons.Material.Filled.Menu" Color="Color.Inherit" Class="mobile-only" OnClick="ToggleDrawer" />
@ -23,8 +23,8 @@
<AuthorizeView>
<Authorized>
<MudButton Href="/dashboard" Variant="Variant.Filled" Color="Color.Success" StartIcon="@Icons.Material.Filled.Dashboard">
Dashboard
<MudButton Href="/dashboard" Variant="Variant.Filled" Color="Color.Secondary" StartIcon="@Icons.Material.Filled.Dashboard">
&Uuml;bersicht
</MudButton>
</Authorized>
<NotAuthorized>
@ -40,7 +40,7 @@
@* Logo - RECHTS *@
<MudLink Href="/" Class="d-flex align-center" Style="text-decoration: none;">
<MudPaper Class="pa-0 rounded-lg" Style="background: #2d5a4d;" Elevation="2">
<MudImage Src="logo6_bg.png" Alt="KOOGLE" Height="32" />
<MudImage Src="gw_app_icon2.png" Alt="KOOGLE" Height="32" />
</MudPaper>
</MudLink>
</MudAppBar>
@ -93,7 +93,7 @@
</MudLayout>
@code {
private MudTheme _theme = CustomThemes.DefaultTheme;
private MudTheme _theme = CustomThemes.GoodwoodTheme;
private bool _drawerOpen;
private void ToggleDrawer() => _drawerOpen = !_drawerOpen;

2
src/Koogle.Web/Components/Pages/About.razor
View File

@ -6,7 +6,7 @@
<MudContainer MaxWidth="MaxWidth.Large" Class="py-8">
@* Hero Section *@
<MudPaper Class="pa-8 mb-8 rounded-lg" Style="background: linear-gradient(135deg, #1a365d 0%, #2d5a4d 100%); color: white;">
<MudPaper Class="pa-8 mb-8 rounded-lg" Style="background: linear-gradient(135deg, #1B3022 0%, #4A5D4E 100%); color: white;">
<MudText Typo="Typo.h4" Class="font-weight-bold mb-2">Von der Totenkiste zum Cloud-System</MudText>
<MudText Typo="Typo.h6" Style="opacity: 0.9;">Unsere Story</MudText>
</MudPaper>

4
src/Koogle.Web/Components/Pages/Blog.razor
View File

@ -6,7 +6,7 @@
<MudContainer MaxWidth="MaxWidth.Large" Class="py-8">
@* Hero Section *@
<MudPaper Class="pa-8 mb-8 rounded-lg" Style="background: linear-gradient(135deg, #1a365d 0%, #2d5a4d 100%); color: white;">
<MudPaper Class="pa-8 mb-8 rounded-lg" Style="background: linear-gradient(135deg, #1B3022 0%, #4A5D4E 100%); color: white;">
<MudText Typo="Typo.h4" Class="font-weight-bold mb-2">Blog</MudText>
<MudText Typo="Typo.h6" Style="opacity: 0.9;">Neuigkeiten rund um KOOGLE</MudText>
</MudPaper>
@ -30,7 +30,7 @@
</MudPaper>
@* Newsletter Teaser *@
<MudPaper Class="pa-6 rounded-lg" Style="background: linear-gradient(135deg, #1a365d 0%, #2d5a4d 100%); color: white;">
<MudPaper Class="pa-6 rounded-lg" Style="background:linear-gradient(135deg, #1B3022 0%, #4A5D4E 100%); color: white;">
<MudText Typo="Typo.h6" Align="Align.Center" Class="font-weight-bold mb-2">
Bleib auf dem Laufenden!
</MudText>

27
src/Koogle.Web/Components/Pages/Home.razor
View File

@ -8,7 +8,7 @@
<MudContainer MaxWidth="MaxWidth.Large" Class="py-0">
<MudImage src="logo6_bg.png" alt="KOOGLE Logo" Height="80" />
@* Hero Section *@
<div class="hero-section mb-8 rounded-lg">
<div class="hero-overlay">
@ -17,7 +17,8 @@
<MudItem xs="12" md="8">
<MudStack Spacing="4">
<MudStack Spacing="3" Class="hero-stack">
<MudText Typo="Typo.h3" Class="hero-title" Style="color: white;">KOOGLE - Die smarte Lösung für Kegelclubs</MudText>
<MudImage src="logo7.png" alt="GoodWood Logo" Height="120" />
<MudText Typo="Typo.h3" Class="hero-title" Style="color: white;">GOODWOOD - Die smarte Lösung für Kegelclubs</MudText>
</MudStack>
<MudText Typo="Typo.h6" Style="color: white; opacity: 0.9;">
Mehr Zeit fürs Kegeln, weniger für den Papierkram.
@ -29,7 +30,7 @@
<AuthorizeView>
<Authorized>
<MudButton Variant="Variant.Filled" Color="Color.Success" StartIcon="@Icons.Material.Filled.Dashboard" Href="/dashboard">
<MudButton Variant="Variant.Filled" Color="Color.Secondary" StartIcon="@Icons.Material.Filled.Dashboard" Href="/dashboard">
zur Anwendung
</MudButton>
</Authorized>
@ -62,7 +63,7 @@
@* Features Section *@
<div id="features">
<MudText Typo="Typo.h5" Class="mb-4 font-weight-bold" Color="Color.Primary">
Deine Vorteile mit KOOGLE
Deine Vorteile mit GoodWood
</MudText>
@ -234,14 +235,14 @@
<MudStack Row AlignItems="AlignItems.Center" Spacing="2">
<MudIcon Icon="@Icons.Material.Filled.Circle" Color="Color.Success" Size="Size.Small" />
<MudText>
Schon über <strong>1</strong> Kegelclubs vertrauen auf KOOGLE. ;-)
Schon über <strong>1</strong> Kegelclubs vertrauen auf GoodWood. ;-)
</MudText>
</MudStack>
</MudPaper>
@* Footer Slogan *@
<MudPaper Class="pa-6 rounded-lg" Style="background: linear-gradient(135deg, #1a365d 0%, #2d5a4d 100%); color: white;">
<MudPaper Class="pa-6 rounded-lg" Style="background: linear-gradient(135deg, #1B3022 0%, #4A5D4E 100%); color: white;">
<MudText Typo="Typo.h5" Align="Align.Center" Class="font-weight-bold">
"Weniger Verwaltung, mehr Kegeln!"
</MudText>
@ -271,12 +272,22 @@
position: relative;
}
.hero-overlay {
background: linear-gradient(135deg, rgba(26, 54, 93, 0.92) 0%, rgba(45, 90, 77, 0.75) 100%);
/* .hero-overlay {
background: linear-gradient(135deg, #1B3022 0%, #4A5D4E 100%);
min-height: 400px;
display: flex;
align-items: center;
border-radius: inherit;
} */
.hero-overlay {
/* Wir nutzen RGBA, um die Farben des Moodboards mit Transparenz zu mischen */
/* 0.85 bedeutet 85% Deckkraft - das Bild schimmert dezent durch */
background: linear-gradient(135deg, rgba(27, 48, 34, 0.85) 0%, rgba(74, 93, 78, 0.7) 100%);
min-height: 400px;
display: flex;
align-items: center;
border-radius: inherit;
width: 100%; /* Sicherstellen, dass es die volle Breite einnimmt */
}
.hero-overlay .mud-typography {

4
src/Koogle.Web/Components/Pages/Preise.razor
View File

@ -6,7 +6,7 @@
<MudContainer MaxWidth="MaxWidth.Large" Class="py-8">
@* Hero Section *@
<MudPaper Class="pa-8 mb-8 rounded-lg" Style="background: linear-gradient(135deg, #1a365d 0%, #2d5a4d 100%); color: white;">
<MudPaper Class="pa-8 mb-8 rounded-lg" Style="background: linear-gradient(135deg, #1B3022 0%, #4A5D4E 100%); color: white;">
<MudText Typo="Typo.h4" Class="font-weight-bold mb-2">Preise</MudText>
<MudText Typo="Typo.h6" Style="opacity: 0.9;">Faire Konditionen für alle Kegelvereine</MudText>
</MudPaper>
@ -40,7 +40,7 @@
</MudPaper>
@* CTA *@
<MudPaper Class="pa-6 rounded-lg" Style="background: linear-gradient(135deg, #1a365d 0%, #2d5a4d 100%); color: white;">
<MudPaper Class="pa-6 rounded-lg" Style="background: linear-gradient(135deg, #1B3022 0%, #4A5D4E 100%); color: white;">
<MudText Typo="Typo.h6" Align="Align.Center" Class="font-weight-bold mb-4">
Worauf wartest du noch?
</MudText>

64
src/Koogle.Web/Services/CustomThemes.cs
View File

@ -42,6 +42,70 @@ namespace Koogle.Web.Services
// }
};
public static readonly MudTheme GoodwoodTheme = new()
{
PaletteLight = new PaletteLight()
{
// Hintergrund & Oberflächen (Moodboard: Soft Sand #F5F2ED)
Background = "#F5F2ED",
Surface = "#FFFFFF",
AppbarBackground = "#1B3022", // Deep Forest Green für Kontrast
AppbarText = "#F5F2ED",
// Markenfarben
Primary = "#1B3022", // Deep Forest Green
PrimaryContrastText = "#F5F2ED",
Secondary = "#B66D35", // Burnt Ochre / Wood
SecondaryContrastText = "#FFFFFF",
Tertiary = "#4A5D4E", // Ein weicheres Waldgrün für Akzente
// Status & Feedback
Info = "#4A708B",
Success = "#6B8E23", // Olive-Grün passend zum Naturthema
Warning = "#D2691E",
Error = "#8B0000",
// Texte & Linien
TextPrimary = "#1A1A1A",
TextSecondary = "#4A5D4E",
Divider = "rgba(27, 48, 34, 0.12)",
LinesDefault = "rgba(27, 48, 34, 0.2)",
DrawerBackground = "#F5F2ED",
DrawerText = "#1B3022",
DrawerIcon = "#1B3022",
},
PaletteDark = new PaletteDark()
{
// Dark Mode Umkehrung für professionelle Software
Background = "#121A14", // Extrem dunkles Grün/Schwarz
Surface = "#1B3022",
Primary = "#F5F2ED", // Im Darkmode wird Sand zur Kontrastfarbe
Secondary = "#B66D35",
AppbarBackground = "#0D1811",
TextPrimary = "#F5F2ED",
TextSecondary = "rgba(245, 242, 237, 0.7)",
DrawerBackground = "#0D1811",
},
LayoutProperties = new LayoutProperties()
{
DefaultBorderRadius = "6px", // Etwas weicher als Standard, aber modern flach
AppbarHeight = "64px",
},
Typography = new Typography()
{
Default = new DefaultTypography
{
FontFamily = new[] { "Inter", "Roboto", "Helvetica", "Arial", "sans-serif" },
FontSize = ".875rem",
FontWeight = "400"
},
H1 = new H1Typography { FontWeight = "700", FontSize = "3.5rem", LetterSpacing = "-.02em" },
H2 = new H2Typography { FontWeight = "600", FontSize = "2.5rem", LetterSpacing = "-.01em" },
Button = new ButtonTypography { FontWeight = "600", TextTransform = "none" } // "none" wirkt moderner als All-Caps
}
};
public static readonly MudTheme SandstoneTheme = new()
{
PaletteLight = new PaletteLight()

BIN
src/Koogle.Web/wwwroot/GW-removebg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 164 KiB

BIN
src/Koogle.Web/wwwroot/GW.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 MiB

BIN
src/Koogle.Web/wwwroot/bg1.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.3 MiB

After

Width:  |  Height:  |  Size: 865 KiB

BIN
src/Koogle.Web/wwwroot/favicon.ico
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 15 KiB

BIN
src/Koogle.Web/wwwroot/gw_app_icon2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 239 KiB

BIN
src/Koogle.Web/wwwroot/icons/android-chrome-192x192.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 40 KiB

BIN
src/Koogle.Web/wwwroot/icons/android-chrome-512x512.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 178 KiB

BIN
src/Koogle.Web/wwwroot/icons/apple-touch-icon.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.4 KiB

After

Width:  |  Height:  |  Size: 36 KiB

BIN
src/Koogle.Web/wwwroot/icons/favicon-16x16.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 425 B

After

Width:  |  Height:  |  Size: 782 B

BIN
src/Koogle.Web/wwwroot/icons/favicon-32x32.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 793 B

After

Width:  |  Height:  |  Size: 2.2 KiB

BIN
src/Koogle.Web/wwwroot/icons/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

BIN
src/Koogle.Web/wwwroot/icons/icon-192x192.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.0 KiB

After

Width:  |  Height:  |  Size: 9.5 KiB

BIN
src/Koogle.Web/wwwroot/icons/icon-512x512.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 18 KiB

After

Width:  |  Height:  |  Size: 40 KiB

BIN
src/Koogle.Web/wwwroot/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 MiB

BIN
src/Koogle.Web/wwwroot/logo7.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 454 KiB

BIN
src/Koogle.Web/wwwroot/logo7_pins.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 174 KiB

10
src/Koogle.Web/wwwroot/manifest.webmanifest
View File

@ -1,11 +1,11 @@
{
"name": "KOOGLE",
"short_name": "KOOGLE",
"description": "Koogle Club Management App",
"name": "GOODWOOD",
"short_name": "GOODWOOD",
"description": "GoodWood Kegel & Vereinsverwaltung",
"start_url": "/",
"display": "standalone",
"background_color": "#2c3e50",
"theme_color": "#2c3e50",
"background_color": "#F5F2ED",
"theme_color": "#F5F2ED",
"icons": [
{
"src": "/icons/icon-192x192.png",