web ui optical improvment

script-api.py

@@ -1303,20 +1303,15 @@ def render_index():
 
     cards = []
 
-
-
     for command_id, command in CONFIG["commands"].items():
 
-
         if not command.get(
             "web_enabled",
             False
         ):
-
             continue
 
 
-
         title = html.escape(
             command.get(
                 "web_title",
@@ -1325,7 +1320,6 @@ def render_index():
         )
 
 
-
         description = html.escape(
             command.get(
                 "description",
@@ -1334,146 +1328,69 @@ def render_index():
         )
 
 
-
         cards.append(
             f"""
+<div class="card">
+
 <form method="post"
-      action="/web/run/{command_id}"
+      action="/web/run/{command_id}">
-      class="card">
+
 
 <input type="hidden"
        name="csrf"
        value="{WEB_CSRF_TOKEN}">
 
 
-<h2>{title}</h2>
+<div class="card-title">
+{title}
+</div>
+
+
+<div class="card-description">
+{description}
+</div>
 
-<p>{description}</p>
 
 <button type="submit">
-Run
+▶ Ausführen
 </button>
 
+
 </form>
+
+</div>
 """
         )
 
 
-
     if not cards:
 
         cards.append(
-            "<p>No commands configured.</p>"
+            """
+<div class="empty">
+Keine Befehle verfügbar.
+</div>
+"""
         )
 
 
-
     return render_page(
 
-        "Raspberry Pi Script API",
+        "IR Steuerung",
 
+        """
+<div class="grid">
+"""
+        +
         "\n".join(cards)
-
+        +
-    )
+        """
-
+</div>
-
-
-
-
-def render_result(
-    command_id,
-    result
-):
-
-
-    body = f"""
-
-<p>
-<a href="/">
-Back
-</a>
-</p>
-
-
-<h2>
-{html.escape(command_id)}
-</h2>
-
-
-<table>
-
-
-<tr>
-<th>OK</th>
-<td>
-{html.escape(str(result.get("ok")))}
-</td>
-</tr>
-
-
-
-<tr>
-<th>Exit Code</th>
-<td>
-{html.escape(str(result.get("exit_code")))}
-</td>
-</tr>
-
-
-
-<tr>
-<th>Duration</th>
-<td>
-{html.escape(str(result.get("duration_ms")))}
-ms
-</td>
-</tr>
-
-
-
-<tr>
-<th>Request ID</th>
-<td>
-{html.escape(str(result.get("request_id")))}
-</td>
-</tr>
-
-
-</table>
-
-
-<h3>
-stdout
-</h3>
-
-
-<pre>
-{html.escape(result.get("stdout",""))}
-</pre>
-
-
-
-<h3>
-stderr
-</h3>
-
-
-<pre>
-{html.escape(result.get("stderr",""))}
-</pre>
-
 """
 
-
-    return render_page(
-        "Command Result",
-        body
     )
 
 
-
-
-
 def render_page(
     title,
     body
@@ -1488,6 +1405,7 @@ def render_page(
 
 <meta charset="utf-8">
 
+
 <title>
 {html.escape(title)}
 </title>
@@ -1499,111 +1417,305 @@ content="width=device-width, initial-scale=1">
 
 <style>
 
-body {{
 
-font-family:
+:root {{
-system-ui,
-sans-serif;
 
-margin:
+    --bg:
-2rem;
+    #111827;
 
-background:
+    --card:
-#f5f5f5;
+    #1f2937;
+
+    --card-hover:
+    #374151;
+
+    --text:
+    #f9fafb;
+
+    --secondary:
+    #9ca3af;
+
+    --accent:
+    #3b82f6;
+
+    --success:
+    #10b981;
+
+    --error:
+    #ef4444;
 
 }}
 
 
+
+* {{
+
+    box-sizing:
+    border-box;
+
+}}
+
+
+
+body {{
+
+    margin:
+    0;
+
+    padding:
+    20px;
+
+    min-height:
+    100vh;
+
+    background:
+    var(--bg);
+
+    color:
+    var(--text);
+
+    font-family:
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    sans-serif;
+
+}}
+
+
+
+h1 {{
+
+    font-size:
+    1.8rem;
+
+    margin-bottom:
+    25px;
+
+}}
+
+
+
+.grid {{
+
+    display:
+    grid;
+
+    grid-template-columns:
+    repeat(
+        auto-fit,
+        minmax(
+            220px,
+            1fr
+        )
+    );
+
+    gap:
+    20px;
+
+}}
+
+
+
 .card {{
 
-background:
+    background:
-white;
+    var(--card);
 
-padding:
+    border-radius:
-1rem;
+    16px;
 
-margin-bottom:
+    padding:
-1rem;
+    20px;
 
-border-radius:
+    box-shadow:
-10px;
+    0 8px 20px
-
+    rgba(
-max-width:
+        0,
-500px;
+        0,
-
+        0,
-box-shadow:
+        .25
-0 2px 5px rgba(0,0,0,.15);
+    );
 
 }}
 
 
+
+.card form {{
+
+    display:
+    flex;
+
+    flex-direction:
+    column;
+
+    gap:
+    12px;
+
+}}
+
+
+
+.card-title {{
+
+    font-size:
+    1.25rem;
+
+    font-weight:
+    600;
+
+}}
+
+
+
+.card-description {{
+
+    color:
+    var(--secondary);
+
+    min-height:
+    20px;
+
+}}
+
+
+
 button {{
 
-padding:
+    margin-top:
-0.7rem 1.5rem;
+    10px;
 
-font-size:
+    padding:
-1rem;
+    14px;
 
-cursor:
+    border:
-pointer;
+    none;
 
-border:
+    border-radius:
-0;
+    12px;
 
-border-radius:
+    background:
-8px;
+    var(--accent);
 
-background:
+    color:
-#222;
+    white;
 
-color:
+    font-size:
-white;
+    1rem;
+
+    font-weight:
+    600;
+
+    cursor:
+    pointer;
 
 }}
 
 
+
+button:hover {{
+
+    opacity:
+    .85;
+
+}}
+
+
+
+.success {{
+
+    border-left:
+    5px solid var(--success);
+
+}}
+
+
+
+.error {{
+
+    border-left:
+    5px solid var(--error);
+
+}}
+
+
+
+.status {{
+
+    margin:
+    15px 0;
+
+}}
+
+
+
 pre {{
 
-background:
+    background:
-#111;
+    #030712;
 
-color:
+    padding:
-white;
+    15px;
 
-padding:
+    border-radius:
-1rem;
+    10px;
 
-border-radius:
+    overflow:
-8px;
+    auto;
 
-overflow:
+    color:
-auto;
+    #d1d5db;
 
 }}
 
 
-table {{
 
-background:
+.back {{
-white;
 
-border-collapse:
+    display:
-collapse;
+    inline-block;
+
+    margin-top:
+    20px;
+
+    color:
+    white;
+
+    text-decoration:
+    none;
+
+    background:
+    #374151;
+
+    padding:
+    12px 18px;
+
+    border-radius:
+    10px;
 
 }}
 
 
-td,th {{
 
-border:
+.empty {{
-1px solid #ddd;
 
-padding:
+    background:
-0.5rem;
+    var(--card);
+
+    padding:
+    20px;
+
+    border-radius:
+    15px;
+
+    color:
+    var(--secondary);
 
 }}
 
+
+
 </style>
 
 
@@ -1623,13 +1735,12 @@ padding:
 
 </body>
 
+
 </html>
 """
 
 
 
-
-
 # ============================================================
 # Main
 # ============================================================