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

home style optimization

This commit is contained in:
beo3000 2026-01-09 20:48:36 +01:00
parent da88371454
commit a3c53c02b9
9 changed files with 102 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -9,43 +9,53 @@
<MudContainer MaxWidth="MaxWidth.Large" Class="py-8"> <MudContainer MaxWidth="MaxWidth.Large" Class="py-8">
@* Hero Section *@ @* Hero Section *@
<MudPaper Class="pa-8 mb-8 rounded-lg" Style="background: linear-gradient(135deg, #1a365d 0%, #2d5a4d 100%); color: white;"> <div class="hero-section mb-8 rounded-lg">
<MudGrid> <div class="hero-overlay">
<MudItem xs="12" md="8"> <MudContainer MaxWidth="MaxWidth.Large" Class="pa-8">
<MudStack Spacing="4"> <MudGrid>
<MudStack Row AlignItems="AlignItems.Center" Spacing="2"> <MudItem xs="12" md="8">
<MudIcon Icon="@Icons.Material.Filled.Sports" Size="Size.Large" /> <MudStack Spacing="4">
<MudText Typo="Typo.caption" Style="opacity: 0.8;" Class="hero-subtitle">Vereinsverwaltung leicht gemacht</MudText> <MudStack Spacing="3" Class="hero-stack">
</MudStack> <MudImage src="logo4.png" alt="KOOGLE Logo" Height="80" />
<MudText Typo="Typo.h3" Class="hero-title"> <MudText Typo="Typo.h3" Class="hero-title" Style="color: white;">Die smarte Lösung für Kegelclubs</MudText>
KOOGLE - Vereinsverwaltung leicht gemacht </MudStack>
</MudText> <MudText Typo="Typo.h6" Style="color: white; opacity: 0.9;">
<MudText Typo="Typo.h6" Style="opacity: 0.9;"> Mehr Zeit fürs Kegeln, weniger für den Papierkram.
Die smarte Lösung für Kegelclubs </MudText>
</MudText> <MudStack Row Spacing="2" Class="mt-4">
<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;">
<MudButton Variant="Variant.Outlined" Color="Color.Inherit" StartIcon="@Icons.Material.Filled.Info" Href="#features"> Mehr erfahren
Mehr erfahren </MudButton>
</MudButton>
<AuthorizeView>
<AuthorizeView> <Authorized>
<Authorized> <MudButton Variant="Variant.Filled" Color="Color.Success" StartIcon="@Icons.Material.Filled.Dashboard" Href="/dashboard">
<MudButton Variant="Variant.Filled" Color="Color.Success" StartIcon="@Icons.Material.Filled.Dashboard" Href="/dashboard"> zur Anwendung
zur Anwendung </MudButton>
</MudButton> </Authorized>
</Authorized> <NotAuthorized>
<NotAuthorized> <MudButton Variant="Variant.Filled" Color="Color.Success" StartIcon="@Icons.Material.Filled.Login" Href="/account/login">
<MudButton Variant="Variant.Filled" Color="Color.Success" StartIcon="@Icons.Material.Filled.Login" Href="/account/login"> Jetzt einloggen
Jetzt einloggen </MudButton>
</MudButton> <MudButton Variant="Variant.Filled" Color="Color.Warning" StartIcon="@Icons.Material.Filled.PersonAdd" Href="/account/register">
</NotAuthorized> Kostenlos registrieren
</AuthorizeView> </MudButton>
</MudStack> </NotAuthorized>
</MudStack> </AuthorizeView>
</MudItem> </MudStack>
</MudGrid> <AuthorizeView>
</MudPaper> <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 *@ @* Features Section *@
<div id="features"> <div id="features">
@ -238,6 +248,23 @@
} }
<style> <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.85) 0%, rgba(45, 90, 77, 0.85) 100%);
min-height: 400px;
display: flex;
align-items: center;
border-radius: inherit;
}
.hero-subtitle { .hero-subtitle {
font-size: 0.65rem !important; font-size: 0.65rem !important;
} }
@ -257,4 +284,26 @@
font-size: 2.2rem !important; 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> </style>

4
src/Koogle.Web/Koogle.Web.csproj
View File

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

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

@ -22,7 +22,7 @@ namespace Koogle.Web.Services
PaletteDark = new PaletteDark PaletteDark = new PaletteDark
{ {
Primary = "#90CAF9", Primary = "#90CAF9",
Secondary = "#CE93D8", Secondary = "#809C9F",
AppbarBackground = "#1e1e1e", AppbarBackground = "#1e1e1e",
Background = "#121212", Background = "#121212",
DrawerBackground = "#1e1e1e", DrawerBackground = "#1e1e1e",

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>
Side by Side

After

Width:  |  Height:  |  Size: 688 B

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 MiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.0 MiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 MiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 87 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 109 KiB