Compare commits

...

3 Commits

Author SHA1 Message Date
beo3000 83a918979e mod layout
meta tags for google
2026-01-09 20:55:23 +01:00
beo3000 a3c53c02b9 home style optimization 2026-01-09 20:48:36 +01:00
beo3000 da88371454 mod theme handling 2026-01-09 19:37:02 +01:00
14 changed files with 436 additions and 77 deletions

View File

@ -8,6 +8,8 @@
<meta name="apple-mobile-web-app-status-bar-style" content="default" />
<meta name="apple-mobile-web-app-title" content="KOOGLE" />
<meta name="mobile-web-app-capable" content="yes" />
<meta name="robots" content="index, follow">
<meta name="googlebot" content="index, follow">
<link rel="manifest" href="manifest.webmanifest" />
<link rel="apple-touch-icon" href="icon-192.png" />
<base href="/" />

View File

@ -1,10 +1,16 @@
@using Koogle.Web.Services
@inherits LayoutComponentBase
<MudThemeProvider />
<MudThemeProvider Theme="_theme" />
<MudPopoverProvider />
<MudDialogProvider />
<MudSnackbarProvider />
@code {
// Default theme - configurable for future theme selection
private MudTheme _theme = CustomThemes.DefaultTheme;
}
<main>
@Body
</main>

View File

@ -1,4 +1,5 @@
@using Koogle.Web.Store.ClubState
@using Koogle.Web.Services
@using Koogle.Web.Store.ClubState
@inherits FluxorLayout
@inject IState<AuthState> AuthState
@ -98,43 +99,8 @@
await JS.InvokeVoidAsync("eval", "document.getElementById('logout-form').submit()");
}
private readonly MudTheme _theme = new()
{
PaletteLight = new PaletteLight
{
Primary = "#1976D2",
Secondary = "#424242",
AppbarBackground = "#1976D2",
Background = "#f5f5f5",
DrawerBackground = "#ffffff",
DrawerText = "#424242",
Success = "#4CAF50",
Warning = "#FF9800",
Error = "#F44336",
Info = "#2196F3"
},
PaletteDark = new PaletteDark
{
Primary = "#90CAF9",
Secondary = "#CE93D8",
AppbarBackground = "#1e1e1e",
Background = "#121212",
DrawerBackground = "#1e1e1e",
DrawerText = "#ffffff",
Surface = "#1e1e1e",
Success = "#81C784",
Warning = "#FFB74D",
Error = "#E57373",
Info = "#64B5F6"
},
// Typography = new Typography
// {
// Default = new Default
// {
// FontFamily = new[] { "Roboto", "Helvetica", "Arial", "sans-serif" }
// }
// }
};
// Default theme - can be changed per user in future
private MudTheme _theme = CustomThemes.DefaultTheme;
private void ClearAuthError()
{

View File

@ -1,10 +1,16 @@
@inherits LayoutComponentBase
@using Koogle.Web.Services
@inherits LayoutComponentBase
<MudThemeProvider />
<MudThemeProvider Theme="_theme" />
<MudPopoverProvider />
<MudDialogProvider />
<MudSnackbarProvider />
@code {
// Default theme for public pages - configurable for future theme selection
private MudTheme _theme = CustomThemes.DefaultTheme;
}
<MudLayout>
<MudMainContent>
<MudContainer MaxWidth="MaxWidth.ExtraLarge" Class="py-4">

View File

@ -9,43 +9,53 @@
<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;">
<MudGrid>
<MudItem xs="12" md="8">
<MudStack Spacing="4">
<MudStack Row AlignItems="AlignItems.Center" Spacing="2">
<MudIcon Icon="@Icons.Material.Filled.Sports" Size="Size.Large" />
<MudText Typo="Typo.caption" Style="opacity: 0.8;" Class="hero-subtitle">Vereinsverwaltung leicht gemacht</MudText>
</MudStack>
<MudText Typo="Typo.h3" Class="hero-title">
KOOGLE - Vereinsverwaltung leicht gemacht
</MudText>
<MudText Typo="Typo.h6" Style="opacity: 0.9;">
Die smarte Lösung für Kegelclubs
</MudText>
<MudStack Row Spacing="2" Class="mt-4">
<MudButton Variant="Variant.Outlined" Color="Color.Inherit" StartIcon="@Icons.Material.Filled.Info" Href="#features">
Mehr erfahren
</MudButton>
<div class="hero-section mb-8 rounded-lg">
<div class="hero-overlay">
<MudContainer MaxWidth="MaxWidth.Large" Class="pa-8">
<MudGrid>
<MudItem xs="12" md="8">
<MudStack Spacing="4">
<MudStack Spacing="3" Class="hero-stack">
<MudImage src="logo4.png" alt="KOOGLE Logo" Height="80" />
<MudText Typo="Typo.h3" Class="hero-title" Style="color: white;">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.
</MudText>
<MudStack Row Spacing="2" Class="mt-4">
<MudButton Variant="Variant.Outlined" Color="Color.Inherit" StartIcon="@Icons.Material.Filled.Info" Href="#features" Style="color: white; border-color: white;">
Mehr erfahren
</MudButton>
<AuthorizeView>
<Authorized>
<MudButton Variant="Variant.Filled" Color="Color.Success" StartIcon="@Icons.Material.Filled.Dashboard" Href="/dashboard">
zur Anwendung
</MudButton>
</Authorized>
<NotAuthorized>
<MudButton Variant="Variant.Filled" Color="Color.Success" StartIcon="@Icons.Material.Filled.Login" Href="/account/login">
Jetzt einloggen
</MudButton>
</NotAuthorized>
</AuthorizeView>
</MudStack>
</MudStack>
</MudItem>
</MudGrid>
</MudPaper>
<AuthorizeView>
<Authorized>
<MudButton Variant="Variant.Filled" Color="Color.Success" StartIcon="@Icons.Material.Filled.Dashboard" Href="/dashboard">
zur Anwendung
</MudButton>
</Authorized>
<NotAuthorized>
<MudButton Variant="Variant.Filled" Color="Color.Success" StartIcon="@Icons.Material.Filled.Login" Href="/account/login">
Jetzt einloggen
</MudButton>
<MudButton Variant="Variant.Filled" Color="Color.Warning" StartIcon="@Icons.Material.Filled.PersonAdd" Href="/account/register">
Kostenlos registrieren
</MudButton>
</NotAuthorized>
</AuthorizeView>
</MudStack>
<AuthorizeView>
<NotAuthorized>
<MudText Typo="Typo.caption" Style="color: white; opacity: 0.8;" Class="mt-2">
Registriere deinen eigenen Club kostenlos oder nutze den <MudLink Href="/account/login" Class="demo-link">Demo-Zugang</MudLink> zum Testen.
</MudText>
</NotAuthorized>
</AuthorizeView>
</MudStack>
</MudItem>
</MudGrid>
</MudContainer>
</div>
</div>
@* Features Section *@
<div id="features">
@ -238,6 +248,27 @@
}
<style>
.hero-section {
background-image: url('bg1.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
min-height: 400px;
position: relative;
}
.hero-overlay {
background: linear-gradient(135deg, rgba(26, 54, 93, 0.92) 0%, rgba(45, 90, 77, 0.75) 100%);
min-height: 400px;
display: flex;
align-items: center;
border-radius: inherit;
}
.hero-overlay .mud-typography {
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
.hero-subtitle {
font-size: 0.65rem !important;
}
@ -257,4 +288,26 @@
font-size: 2.2rem !important;
}
}
.hero-stack {
flex-direction: column;
align-items: center;
}
@@media (min-width: 600px) {
.hero-stack {
flex-direction: row;
align-items: flex-start;
justify-content: flex-start;
}
}
.demo-link {
color: #ff9800 !important;
font-weight: 600;
}
.demo-link:hover {
color: #ffb74d !important;
}
</style>

View File

@ -6,6 +6,10 @@
<ImplicitUsings>enable</ImplicitUsings>
</PropertyGroup>
<ItemGroup>
<Content Include="logo.svg" />
</ItemGroup>
<ItemGroup>
<PackageReference Include="Blazor-ApexCharts" Version="6.0.2" />
<PackageReference Include="Fluxor.Blazor.Web" Version="6.9.0" />

View File

@ -0,0 +1,308 @@
using MudBlazor;
namespace Koogle.Web.Services
{
public static class CustomThemes
{
public static readonly MudTheme DefaultTheme = new()
{
PaletteLight = new PaletteLight
{
Primary = "#1976D2",
Secondary = "#424242",
AppbarBackground = "#1976D2",
Background = "#f5f5f5",
DrawerBackground = "#ffffff",
DrawerText = "#424242",
Success = "#4CAF50",
Warning = "#FF9800",
Error = "#F44336",
Info = "#2196F3"
},
PaletteDark = new PaletteDark
{
Primary = "#90CAF9",
Secondary = "#809C9F",
AppbarBackground = "#1e1e1e",
Background = "#121212",
DrawerBackground = "#1e1e1e",
DrawerText = "#ffffff",
Surface = "#1e1e1e",
Success = "#81C784",
Warning = "#FFB74D",
Error = "#E57373",
Info = "#64B5F6"
},
// Typography = new Typography
// {
// Default = new Default
// {
// FontFamily = new[] { "Roboto", "Helvetica", "Arial", "sans-serif" }
// }
// }
};
public static readonly MudTheme SandstoneTheme = new()
{
PaletteLight = new PaletteLight()
{
TableHover = "rgba(0,0,0,0.0392156862745098)",
OverlayLight = "rgba(255,255,255,0.4980392156862745)",
OverlayDark = "rgba(33,33,33,0.4980392156862745)",
GrayDarker = "#616161",
GrayDark = "#757575",
GrayLighter = "#E0E0E0",
GrayLight = "#BDBDBD",
GrayDefault = "#9E9E9E",
RippleOpacitySecondary = 0.2,
RippleOpacity = 0.1,
HoverOpacity = 0.06,
Surface = "#fdeec8ff",
Background = "rgba(255,255,255,1)",
BackgroundGray = "rgba(245,245,245,1)",
ErrorContrastText = "rgba(255,255,255,1)",
LinesInputs = "rgba(189,189,189,1)",
ActionDisabled = "rgba(0,0,0,0.25882352941176473)",
TextDisabled = "rgba(0,0,0,0.3764705882352941)",
TableStriped = "rgba(0,0,0,0.0196078431372549)",
LinesDefault = "rgba(0,0,0,0.11764705882352941)",
ActionDisabledBackground = "rgba(0,0,0,0.11764705882352941)",
TableLines = "rgba(224,224,224,1)",
Divider = "rgba(224,224,224,1)",
DividerLight = "rgba(0,0,0,0.8)",
Error = "rgba(244,67,54,1)",
ActionDefault = "rgba(0,0,0,0.5372549019607843)",
DarkLighten = "rgb(87,87,87)",
ErrorLighten = "rgb(246,96,85)",
ErrorDarken = "rgb(242,28,13)",
DarkDarken = "rgb(46,46,46)",
White = "#fff",
WarningDarken = "#623218",
TertiaryLighten = "#f3daa4ff",
Warning = "#f47c3c",
PrimaryContrastText = "#d6dfe7",
SecondaryContrastText = "#e8e8e6",
TertiaryContrastText = "#f8f9fa",
Tertiary = "#c9ae74ff",
SuccessDarken = "#3b4f1e",
SecondaryDarken = "#393835",
TextSecondary = "#393835",
Success = "#93c54b",
Secondary = "#8e8c84",
DrawerText = "#8e8c84",
DrawerIcon = "#8e8c84",
TertiaryDarken = "#705825ff",
TextPrimary = "#142536",
PrimaryDarken = "#142536",
InfoDarken = "#10445a",
Dark = "#3e3f3a",
Primary = "#325d88",
AppbarText = "#325d88",
WarningContrastText = "#fde5d8",
WarningLighten = "#fde5d8",
Info = "#29abe0",
DarkContrastText = "#ced4da",
SuccessContrastText = "#e9f3db",
SuccessLighten = "#e9f3db",
SecondaryLighten = "#e8e8e6",
DrawerBackground = "#c9ae74ff",
PrimaryLighten = "#d6dfe7",
AppbarBackground = "#d6dfe7",
InfoContrastText = "#d4eef9",
InfoLighten = "#d4eef9",
Black = "#000",
},
PaletteDark = new PaletteDark()
{
Surface = "rgba(55,55,64,1)",
Background = "rgba(50,51,61,1)",
BackgroundGray = "rgba(39,39,47,1)",
ErrorContrastText = "rgba(255,255,255,1)",
LinesInputs = "rgba(255,255,255,0.2980392156862745)",
ActionDisabled = "rgba(255,255,255,0.25882352941176473)",
TextDisabled = "rgba(255,255,255,0.2)",
TableStriped = "rgba(255,255,255,0.2)",
LinesDefault = "rgba(255,255,255,0.11764705882352941)",
ActionDisabledBackground = "rgba(255,255,255,0.11764705882352941)",
TableLines = "rgba(255,255,255,0.11764705882352941)",
Divider = "rgba(255,255,255,0.11764705882352941)",
DividerLight = "rgba(255,255,255,0.058823529411764705)",
Error = "rgba(244,67,54,1)",
ActionDefault = "rgba(173,173,177,1)",
DarkLighten = "rgb(56,56,67)",
ErrorLighten = "rgb(246,96,85)",
ErrorDarken = "rgb(242,28,13)",
DarkDarken = "rgb(23,23,28)",
White = "#fff",
WarningDarken = "#f8b08a",
TertiaryLighten = "#f7e3b2ff",
Warning = "#f47c3c",
PrimaryContrastText = "#e2e4e7ff",
SecondaryContrastText = "#e2e4e7ff",
TertiaryContrastText = "#e2e4e7ff",
Tertiary = "#c9ae74ff",
SuccessDarken = "#bedc93",
SecondaryDarken = "#bbbab5",
TextSecondary = "#bbbab5",
Success = "#93c54b",
Secondary = "#8e8c84",
DrawerText = "#8e8c84",
DrawerIcon = "#8e8c84",
TertiaryDarken = "#886c30ff",
TextPrimary = "#849eb8",
PrimaryDarken = "#849eb8",
InfoDarken = "#7fcdec",
Dark = "#3e3f3a",
Primary = "#325d88",
AppbarText = "#325d88",
WarningContrastText = "#31190c",
WarningLighten = "#31190c",
Info = "#29abe0",
DarkContrastText = "#1f201d",
SuccessContrastText = "#1d270f",
SuccessLighten = "#1d270f",
SecondaryLighten = "#1c1c1a",
DrawerBackground = "#1c1c1a",
PrimaryLighten = "#0a131b",
AppbarBackground = "#0a131b",
InfoContrastText = "#08222d",
InfoLighten = "#08222d",
Black = "#000",
},
LayoutProperties = new LayoutProperties()
{
AppbarHeight = "64px",
DefaultBorderRadius = "4px",
DrawerMiniWidthLeft = "56px",
DrawerMiniWidthRight = "56px",
DrawerWidthLeft = "240px",
DrawerWidthRight = "240px",
},
Typography = new Typography()
{
Default = new DefaultTypography
{
FontFamily = ["Roboto", "Helvetica", "Arial", "sans-serif"],
FontWeight = "400",
FontSize = ".875rem",
LineHeight = "1.43",
LetterSpacing = ".01071em",
TextTransform = "none",
},
H1 = new H1Typography
{
FontWeight = "300",
FontSize = "6rem",
LineHeight = "1.167",
LetterSpacing = "-.01562em",
TextTransform = "none",
},
H2 = new H2Typography
{
FontWeight = "300",
FontSize = "3.75rem",
LineHeight = "1.2",
LetterSpacing = "-.00833em",
TextTransform = "none",
},
H3 = new H3Typography
{
FontWeight = "400",
FontSize = "3rem",
LineHeight = "1.167",
LetterSpacing = "0",
TextTransform = "none",
},
H4 = new H4Typography
{
FontWeight = "400",
FontSize = "2.125rem",
LineHeight = "1.235",
LetterSpacing = ".00735em",
TextTransform = "none",
},
H5 = new H5Typography
{
FontWeight = "400",
FontSize = "1.5rem",
LineHeight = "1.334",
LetterSpacing = "0",
TextTransform = "none",
},
H6 = new H6Typography
{
FontWeight = "500",
FontSize = "1.25rem",
LineHeight = "1.6",
LetterSpacing = ".0075em",
TextTransform = "none",
},
Subtitle1 = new Subtitle1Typography
{
FontWeight = "400",
FontSize = "1rem",
LineHeight = "1.75",
LetterSpacing = ".00938em",
TextTransform = "none",
},
Subtitle2 = new Subtitle2Typography
{
FontWeight = "500",
FontSize = ".875rem",
LineHeight = "1.57",
LetterSpacing = ".00714em",
TextTransform = "none",
},
Body1 = new Body1Typography
{
FontWeight = "400",
FontSize = "1rem",
LineHeight = "1.5",
LetterSpacing = ".00938em",
TextTransform = "none",
},
Body2 = new Body2Typography
{
FontWeight = "400",
FontSize = ".875rem",
LineHeight = "1.43",
LetterSpacing = ".01071em",
TextTransform = "none",
},
Button = new ButtonTypography
{
FontWeight = "500",
FontSize = ".875rem",
LineHeight = "1.75",
LetterSpacing = ".02857em",
TextTransform = "uppercase",
},
Caption = new CaptionTypography
{
FontWeight = "400",
FontSize = ".75rem",
LineHeight = "1.66",
LetterSpacing = ".03333em",
TextTransform = "none",
},
Overline = new OverlineTypography
{
FontWeight = "400",
FontSize = ".75rem",
LineHeight = "2.66",
LetterSpacing = ".08333em",
TextTransform = "none",
},
},
ZIndex = new ZIndex()
{
AppBar = 1300,
Dialog = 1400,
Drawer = 1100,
Popover = 1200,
Snackbar = 1500,
Tooltip = 1600,
},
};
}
}

12
src/Koogle.Web/logo.svg Normal file
View File

@ -0,0 +1,12 @@
<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="256" cy="256" r="230" stroke="#1a365d" stroke-width="30" fill="none" />
<path d="M140 150V362M140 280L210 210M140 280L215 362" stroke="#1a365d" stroke-width="40" stroke-linecap="round" stroke-linejoin="round"/>
<circle cx="310" cy="290" r="75" fill="#e67e22" />
<path d="M330 225C330 225 380 225 390 185C350 175 330 225 330 225Z" fill="#2d5a4d" />
<path d="M330 225L390 185" stroke="white" stroke-width="2" />
<text x="256" y="460" font-family="Arial, sans-serif" font-size="60" font-weight="bold" fill="#1a365d" text-anchor="middle">koogle</text>
</svg>

After

Width:  |  Height:  |  Size: 688 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.0 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 87 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 109 KiB

View File

@ -0,0 +1,2 @@
User-agent: *
Allow: /