From 853f144ee4a59fabff904d29aec54b61b4ff77b3 Mon Sep 17 00:00:00 2001 From: StefanMoCoAt Date: Sun, 29 Jun 2025 23:43:31 +0200 Subject: [PATCH] (fix) Startseite erstellt --- .../kotlin/at/mocode/compose/App.kt | 300 +++++++++++++++++- 1 file changed, 292 insertions(+), 8 deletions(-) diff --git a/composeApp/src/commonMain/kotlin/at/mocode/compose/App.kt b/composeApp/src/commonMain/kotlin/at/mocode/compose/App.kt index 8c72a269..6e4e2608 100644 --- a/composeApp/src/commonMain/kotlin/at/mocode/compose/App.kt +++ b/composeApp/src/commonMain/kotlin/at/mocode/compose/App.kt @@ -1,25 +1,309 @@ package at.mocode.compose import androidx.compose.animation.AnimatedVisibility -import androidx.compose.foundation.layout.Column -import androidx.compose.foundation.layout.fillMaxWidth -import androidx.compose.material.MaterialTheme +import androidx.compose.foundation.background +import androidx.compose.foundation.layout.* +import androidx.compose.foundation.lazy.LazyColumn +import androidx.compose.foundation.shape.RoundedCornerShape +import androidx.compose.material.* import androidx.compose.runtime.* import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier +import androidx.compose.ui.graphics.Color +import androidx.compose.ui.text.font.FontWeight +import androidx.compose.ui.text.style.TextAlign +import androidx.compose.ui.unit.dp +import androidx.compose.ui.unit.sp import org.jetbrains.compose.ui.tooling.preview.Preview - @Composable @Preview fun App() { - MaterialTheme { - var showContent by remember { mutableStateOf(false) } - Column(Modifier.fillMaxWidth(), horizontalAlignment = Alignment.CenterHorizontally) { + MaterialTheme( + colors = lightColors( + primary = Color(0xFF2E7D32), + primaryVariant = Color(0xFF1B5E20), + secondary = Color(0xFF8BC34A), + background = Color(0xFFF1F8E9) + ) + ) { + HomePage() + } +} - AnimatedVisibility(showContent) { +@Composable +fun HomePage() { + LazyColumn( + modifier = Modifier + .fillMaxSize() + .background(MaterialTheme.colors.background), + contentPadding = PaddingValues(16.dp), + verticalArrangement = Arrangement.spacedBy(16.dp) + ) { + item { + // Header Section + HeaderSection() + } + item { + // Welcome Card + WelcomeCard() + } + + item { + // Quick Actions + QuickActionsSection() + } + + item { + // Features Overview + FeaturesSection() + } + + item { + // Footer + FooterSection() + } + } +} + +@Composable +fun HeaderSection() { + Card( + modifier = Modifier.fillMaxWidth(), + elevation = 4.dp, + backgroundColor = MaterialTheme.colors.primary + ) { + Column( + modifier = Modifier.padding(24.dp), + horizontalAlignment = Alignment.CenterHorizontally + ) { + Text( + text = "πŸ†", + style = MaterialTheme.typography.h2, + textAlign = TextAlign.Center + ) + Spacer(modifier = Modifier.height(8.dp)) + Text( + text = "Meldestelle", + style = MaterialTheme.typography.h3.copy( + color = Color.White, + fontWeight = FontWeight.Bold + ), + textAlign = TextAlign.Center + ) + Text( + text = "Turnierverwaltungssystem", + style = MaterialTheme.typography.subtitle1.copy( + color = Color.White.copy(alpha = 0.9f) + ), + textAlign = TextAlign.Center + ) + } + } +} + +@Composable +fun WelcomeCard() { + Card( + modifier = Modifier.fillMaxWidth(), + elevation = 2.dp + ) { + Column( + modifier = Modifier.padding(20.dp) + ) { + Text( + text = "Willkommen bei der Meldestelle", + style = MaterialTheme.typography.h5.copy( + fontWeight = FontWeight.Bold, + color = MaterialTheme.colors.primary + ) + ) + Spacer(modifier = Modifier.height(8.dp)) + Text( + text = "Ihr zentrales System fΓΌr die Verwaltung von Reitturnieren. " + + "Verwalten Sie Turniere, Anmeldungen, Teilnehmer und alle " + + "wichtigen Informationen rund um Ihre Veranstaltungen.", + style = MaterialTheme.typography.body1, + lineHeight = 24.sp + ) + } + } +} + +@Composable +fun QuickActionsSection() { + Column { + Text( + text = "Schnellzugriff", + style = MaterialTheme.typography.h6.copy( + fontWeight = FontWeight.Bold, + color = MaterialTheme.colors.primary + ), + modifier = Modifier.padding(bottom = 12.dp) + ) + + Row( + modifier = Modifier.fillMaxWidth(), + horizontalArrangement = Arrangement.spacedBy(12.dp) + ) { + QuickActionCard( + title = "Neues Turnier", + emoji = "βž•", + modifier = Modifier.weight(1f) + ) + QuickActionCard( + title = "Turniere anzeigen", + emoji = "πŸ“‹", + modifier = Modifier.weight(1f) + ) + } + + Spacer(modifier = Modifier.height(12.dp)) + + Row( + modifier = Modifier.fillMaxWidth(), + horizontalArrangement = Arrangement.spacedBy(12.dp) + ) { + QuickActionCard( + title = "Anmeldungen", + emoji = "πŸ‘₯", + modifier = Modifier.weight(1f) + ) + QuickActionCard( + title = "Berichte", + emoji = "πŸ“Š", + modifier = Modifier.weight(1f) + ) + } + } +} + +@Composable +fun QuickActionCard( + title: String, + emoji: String, + modifier: Modifier = Modifier +) { + Card( + modifier = modifier, + elevation = 2.dp, + backgroundColor = MaterialTheme.colors.secondary.copy(alpha = 0.1f) + ) { + Column( + modifier = Modifier.padding(16.dp), + horizontalAlignment = Alignment.CenterHorizontally + ) { + Text( + text = emoji, + style = MaterialTheme.typography.h4, + textAlign = TextAlign.Center + ) + Spacer(modifier = Modifier.height(8.dp)) + Text( + text = title, + style = MaterialTheme.typography.body2.copy( + fontWeight = FontWeight.Medium + ), + textAlign = TextAlign.Center + ) + } + } +} + +@Composable +fun FeaturesSection() { + Column { + Text( + text = "Funktionen", + style = MaterialTheme.typography.h6.copy( + fontWeight = FontWeight.Bold, + color = MaterialTheme.colors.primary + ), + modifier = Modifier.padding(bottom = 12.dp) + ) + + val features = listOf( + FeatureItem("Turnierverwaltung", "Erstellen und verwalten Sie Reitturniere mit allen Details", "πŸ‡"), + FeatureItem("Teilnehmerverwaltung", "Verwalten Sie Reiter, Pferde und Vereine", "πŸ‘₯"), + FeatureItem("Anmeldungen", "Bearbeiten Sie Turnieranmeldungen und Nennungen", "πŸ“"), + FeatureItem("PlΓ€tze & Richter", "Verwalten Sie Austragungsorte und Richter", "πŸ“"), + FeatureItem("Ergebnisse", "Erfassen und verwalten Sie Turnierergebnisse", "πŸ†"), + FeatureItem("Berichte", "Erstellen Sie detaillierte Berichte und Statistiken", "πŸ“Š") + ) + + features.forEach { feature -> + FeatureCard(feature) + Spacer(modifier = Modifier.height(8.dp)) + } + } +} + +@Composable +fun FeatureCard(feature: FeatureItem) { + Card( + modifier = Modifier.fillMaxWidth(), + elevation = 1.dp + ) { + Row( + modifier = Modifier.padding(16.dp), + verticalAlignment = Alignment.CenterVertically + ) { + Text( + text = feature.emoji, + style = MaterialTheme.typography.h5, + modifier = Modifier.size(24.dp) + ) + Spacer(modifier = Modifier.width(16.dp)) + Column(modifier = Modifier.weight(1f)) { + Text( + text = feature.title, + style = MaterialTheme.typography.subtitle2.copy( + fontWeight = FontWeight.Medium + ) + ) + Text( + text = feature.description, + style = MaterialTheme.typography.body2.copy( + color = MaterialTheme.colors.onSurface.copy(alpha = 0.7f) + ) + ) } } } } + +@Composable +fun FooterSection() { + Card( + modifier = Modifier.fillMaxWidth(), + elevation = 1.dp, + backgroundColor = MaterialTheme.colors.primary.copy(alpha = 0.05f) + ) { + Column( + modifier = Modifier.padding(20.dp), + horizontalAlignment = Alignment.CenterHorizontally + ) { + Text( + text = "Meldestelle v1.0.0", + style = MaterialTheme.typography.body2.copy( + fontWeight = FontWeight.Medium, + color = MaterialTheme.colors.primary + ) + ) + Spacer(modifier = Modifier.height(4.dp)) + Text( + text = "Turnierverwaltungssystem fΓΌr Reitsport", + style = MaterialTheme.typography.caption.copy( + color = MaterialTheme.colors.onSurface.copy(alpha = 0.6f) + ) + ) + } + } +} + +data class FeatureItem( + val title: String, + val description: String, + val emoji: String +)