fixing(client)

client/web-app/src/jsMain/kotlin/Main.kt

@@ -1,11 +0,0 @@
-import at.mocode.client.ui.App
-import androidx.compose.ui.ExperimentalComposeUiApi
-import androidx.compose.ui.window.CanvasBasedWindow
-
-@OptIn(ExperimentalComposeUiApi::class)
-fun main() {
-    CanvasBasedWindow(canvasElementId = "root") {
-        App()
-    }
-}
-

client/web-app/src/jsMain/kotlin/at/mocode/client/web/AppStylesheet.kt

@@ -0,0 +1,121 @@
+@file:OptIn(org.jetbrains.compose.web.ExperimentalComposeWebApi::class)
+
+package at.mocode.client.web
+
+import org.jetbrains.compose.web.css.*
+
+object AppStylesheet : StyleSheet() {
+    val container by style {
+        display(DisplayStyle.Flex)
+        flexDirection(FlexDirection.Column)
+        minHeight(100.vh)
+        fontFamily("'Segoe UI', system-ui, sans-serif")
+        margin(0.px)
+        padding(0.px)
+        backgroundColor(Color("#f5f5f5"))
+    }
+
+    val header by style {
+        backgroundColor(Color("#1976d2"))
+        color(Color.white)
+        padding(20.px)
+        textAlign("center")
+        property("box-shadow", "0 2px 4px rgba(0,0,0,0.1)")
+    }
+
+    val main by style {
+        flex(1)
+        display(DisplayStyle.Flex)
+        justifyContent(JustifyContent.Center)
+        alignItems(AlignItems.Center)
+        padding(40.px, 20.px)
+    }
+
+    val footer by style {
+        backgroundColor(Color("#333"))
+        color(Color.white)
+        textAlign("center")
+        padding(20.px)
+        fontSize(14.px)
+    }
+
+    val card by style {
+        backgroundColor(Color.white)
+        borderRadius(12.px)
+        property("box-shadow", "0 4px 6px rgba(0, 0, 0, 0.1)")
+        padding(32.px)
+        maxWidth(500.px)
+        width(100.percent)
+        textAlign("center")
+    }
+
+    val button by style {
+        border(0.px)
+        borderRadius(8.px)
+        padding(12.px, 24.px)
+        fontSize(16.px)
+        fontWeight("bold")
+        cursor("pointer")
+        property("transition", "all 0.2s ease")
+        width(100.percent)
+        marginBottom(20.px)
+    }
+
+    val buttonHover by style {
+        transform { scale(1.02) }
+    }
+
+    val buttonDisabled by style {
+        opacity(0.6)
+        cursor("not-allowed")
+    }
+
+    val primaryButton by style {
+        backgroundColor(Color("#1976d2"))
+        color(Color.white)
+
+        hover(self) style {
+            backgroundColor(Color("#1565c0"))
+        }
+    }
+
+    val successMessage by style {
+        backgroundColor(Color("#e8f5e8"))
+        color(Color("#2e7d32"))
+        padding(16.px)
+        borderRadius(8.px)
+        marginTop(16.px)
+        border(1.px, LineStyle.Solid, Color("#c8e6c9"))
+    }
+
+    val errorMessage by style {
+        backgroundColor(Color("#ffebee"))
+        color(Color("#c62828"))
+        padding(16.px)
+        borderRadius(8.px)
+        marginTop(16.px)
+        border(1.px, LineStyle.Solid, Color("#ffcdd2"))
+    }
+
+    val spinner by style {
+        display(DisplayStyle.InlineBlock)
+        width(16.px)
+        height(16.px)
+        border(2.px, LineStyle.Solid, Color("#f3f3f3"))
+        property("border-top", "2px solid #1976d2")
+        borderRadius(50.percent)
+        property("animation", "spin 1s linear infinite")
+        marginRight(8.px)
+        property("vertical-align", "middle")
+    }
+
+    @Suppress("unused")
+    private val spinKeyframes = keyframes {
+        0.percent {
+            transform { rotate(0.deg) }
+        }
+        100.percent {
+            transform { rotate(360.deg) }
+        }
+    }
+}

client/web-app/src/jsMain/kotlin/at/mocode/client/web/Main.kt

@@ -0,0 +1,95 @@
+package at.mocode.client.web
+
+import androidx.compose.runtime.*
+import org.jetbrains.compose.web.css.*
+import org.jetbrains.compose.web.dom.*
+import org.jetbrains.compose.web.renderComposable
+import at.mocode.client.ui.components.PingTestComponent
+
+fun main() {
+    renderComposable(rootElementId = "root") {
+        Style(AppStylesheet)
+        MeldestelleWebApp()
+    }
+}
+
+@Composable
+fun MeldestelleWebApp() {
+    val pingComponent = remember { PingTestComponent() }
+    var pingState by remember { mutableStateOf(pingComponent.state) }
+
+    LaunchedEffect(pingComponent) {
+        pingComponent.onStateChanged = { newState ->
+            pingState = newState
+        }
+    }
+
+    DisposableEffect(pingComponent) {
+        onDispose {
+            pingComponent.dispose()
+        }
+    }
+
+    Div(attrs = {
+        classes(AppStylesheet.container)
+    }) {
+        Header(attrs = { classes(AppStylesheet.header) }) {
+            H1 { Text("Meldestelle Web App") }
+        }
+
+        Main(attrs = { classes(AppStylesheet.main) }) {
+            PingTestWebView(
+                state = pingState,
+                onTestConnection = { pingComponent.testConnection() }
+            )
+        }
+
+        Footer(attrs = { classes(AppStylesheet.footer) }) {
+            P { Text("© 2025 Meldestelle - Powered by Kotlin Multiplatform") }
+        }
+    }
+}
+
+@Composable
+fun PingTestWebView(
+    state: at.mocode.client.ui.components.PingTestState,
+    onTestConnection: () -> Unit
+) {
+    Div(attrs = { classes(AppStylesheet.card) }) {
+        H2 { Text("Backend Verbindungstest") }
+
+        Button(
+            attrs = {
+                classes(AppStylesheet.button, AppStylesheet.primaryButton)
+                if (state.isLoading) {
+                    attr("disabled", "")
+                }
+                onClick { onTestConnection() }
+            }
+        ) {
+            if (state.isLoading) {
+                Span(attrs = { classes(AppStylesheet.spinner) }) {}
+                Text(" Testing...")
+            } else {
+                Text("Ping Backend Service")
+            }
+        }
+
+        // Status Anzeige
+        when {
+            state.isConnected -> {
+                Div(attrs = { classes(AppStylesheet.successMessage) }) {
+                    Span { Text("✅ ") }
+                    Text("Verbindung erfolgreich: ${state.response?.status}")
+                }
+            }
+
+            state.error != null -> {
+                Div(attrs = { classes(AppStylesheet.errorMessage) }) {
+                    Span { Text("❌ ") }
+                    Text("Fehler: ${state.error}")
+                }
+            }
+        }
+    }
+}

client/web-app/src/jsMain/resources/index.html

@@ -1,12 +1,19 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="de">
 <head>
     <meta charset="UTF-8">
-    <title>Meldestelle Pro</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Meldestelle Web App</title>
+    <meta name="description" content="Meldestelle - Vereinsverwaltung für Pferdesport">
+    <link rel="icon" type="image/x-icon" href="/favicon.ico">
 </head>
 <body>
-<canvas id="root"></canvas>
-<script src="MeldestelleWebApp.js"></script>
+<div id="root">
+    <div style="display: flex; justify-content: center; align-items: center; height: 100vh; font-family: system-ui;">
+        <div>Loading...</div>
+    </div>
+</div>
+<script src="web-app.js"></script>
 </body>
 </html>
+