ui

ht_booking/assets/views/admin/booking_form.html

@@ -10,54 +10,57 @@
     <h1 class="text-2xl font-bold">
       {% if mode == "edit" %}{{ t(key="edit-booking", lang=lang) }}{% else %}{{ t(key="add-booking", lang=lang) }}{% endif %}
     </h1>
-    <a href="/admin" class="text-sm text-blue-600 hover:underline">&larr; {{ t(key="back-to-calendar", lang=lang) }}</a>
+    <a href="/admin" class="btn btn-ghost btn-sm">« {{ t(key="back-to-calendar", lang=lang) }}</a>
   </div>
 
-  <form method="post" action="{{ action }}" class="space-y-3 rounded-lg border bg-white p-4">
-    <input type="hidden" name="court_id" value="{{ court_id }}">
-    <div class="text-sm text-gray-600">{{ t(key="court-label", lang=lang) }}: <strong>{{ court_name }}</strong></div>
-    <div>
-      <label class="block text-sm text-gray-600">{{ t(key="date", lang=lang) }}</label>
-      <input type="date" name="date" value="{{ date }}" required class="w-full rounded border-gray-300 text-sm">
+  <div class="card border border-gray-200 bg-white shadow-sm">
+    <div class="card-body">
+      <form method="post" action="{{ action }}" class="space-y-2">
+        <input type="hidden" name="court_id" value="{{ court_id }}">
+        <div class="text-sm text-gray-600">
+          {{ t(key="court-label", lang=lang) }}: <strong>{{ court_name }}</strong>
+        </div>
+        <div class="form-control">
+          <label class="label"><span class="label-text">{{ t(key="date", lang=lang) }}</span></label>
+          <input type="date" name="date" value="{{ date }}" required class="input input-bordered w-full">
+        </div>
+        <div class="form-control">
+          <label class="label"><span class="label-text">{{ t(key="hour", lang=lang) }}</span></label>
+          <select name="hour" class="select select-bordered w-full">
+            {% for h in hours %}
+            <option value="{{ h.v }}" {% if h.v == hour %}selected{% endif %}>{{ h.label }}</option>
+            {% endfor %}
+          </select>
+        </div>
+        <div class="form-control">
+          <label class="label"><span class="label-text">{{ t(key="booking-color", lang=lang) }}</span></label>
+          <input type="color" name="color" value="{{ color }}"
+            class="h-10 w-20 cursor-pointer rounded border border-gray-300">
+        </div>
+        <div class="form-control">
+          <label class="label"><span class="label-text">{{ t(key="booking-name", lang=lang) }}</span></label>
+          <input name="name" value="{{ name }}" required class="input input-bordered w-full">
+        </div>
+        <div class="form-control">
+          <label class="label"><span class="label-text">{{ t(key="booking-contact", lang=lang) }}</span></label>
+          <input name="contact" value="{{ contact }}" class="input input-bordered w-full">
+        </div>
+        <div class="form-control">
+          <label class="label"><span class="label-text">{{ t(key="booking-note", lang=lang) }}</span></label>
+          <textarea name="note" rows="3" class="textarea textarea-bordered w-full">{{ note }}</textarea>
+        </div>
+        <div class="flex items-center gap-2 pt-2">
+          <button class="btn btn-neutral">{{ t(key="save", lang=lang) }}</button>
+          <a href="/admin" class="btn btn-ghost">{{ t(key="cancel", lang=lang) }}</a>
+        </div>
+      </form>
     </div>
-    <div>
-      <label class="block text-sm text-gray-600">{{ t(key="hour", lang=lang) }}</label>
-      <select name="hour" class="w-full rounded border-gray-300 text-sm">
-        {% for h in hours %}
-        <option value="{{ h.v }}" {% if h.v == hour %}selected{% endif %}>{{ h.label }}</option>
-        {% endfor %}
-      </select>
-    </div>
-    <div>
-      <label class="block text-sm text-gray-600">{{ t(key="booking-color", lang=lang) }}</label>
-      <input type="color" name="color" value="{{ color }}" class="h-9 w-16 rounded border-gray-300">
-    </div>
-    <div>
-      <label class="block text-sm text-gray-600">{{ t(key="booking-name", lang=lang) }}</label>
-      <input name="name" value="{{ name }}" required class="w-full rounded border-gray-300 text-sm">
-    </div>
-    <div>
-      <label class="block text-sm text-gray-600">{{ t(key="booking-contact", lang=lang) }}</label>
-      <input name="contact" value="{{ contact }}" class="w-full rounded border-gray-300 text-sm">
-    </div>
-    <div>
-      <label class="block text-sm text-gray-600">{{ t(key="booking-note", lang=lang) }}</label>
-      <textarea name="note" rows="3" class="w-full rounded border-gray-300 text-sm">{{ note }}</textarea>
-    </div>
-    <div class="flex items-center gap-2">
-      <button class="rounded bg-gray-900 px-4 py-2 text-sm text-white hover:bg-gray-700">
-        {{ t(key="save", lang=lang) }}
-      </button>
-      <a href="/admin" class="rounded border px-4 py-2 text-sm hover:bg-gray-100">{{ t(key="cancel", lang=lang) }}</a>
-    </div>
-  </form>
+  </div>
 
   {% if mode == "edit" %}
   <form method="post" action="/admin/booking/{{ booking_id }}/delete" class="mt-3"
     onsubmit="return confirm('{{ t(key="confirm-delete", lang=lang) }}');">
-    <button class="rounded bg-red-600 px-4 py-2 text-sm text-white hover:bg-red-700">
-      {{ t(key="delete", lang=lang) }}
-    </button>
+    <button class="btn btn-outline btn-error btn-sm">{{ t(key="delete", lang=lang) }}</button>
   </form>
   {% endif %}
 </div>

ht_booking/assets/views/admin/courts.html

@@ -5,36 +5,42 @@
 {% block content %}
 <div class="mb-4 flex items-center justify-between">
   <h1 class="text-2xl font-bold">{{ t(key="manage-courts", lang=lang) }}</h1>
-  <a href="/admin" class="text-sm text-blue-600 hover:underline">&larr; {{ t(key="back-to-calendar", lang=lang) }}</a>
+  <a href="/admin" class="btn btn-ghost btn-sm">« {{ t(key="back-to-calendar", lang=lang) }}</a>
 </div>
 
 {% if name_error %}
-<div class="mb-3 rounded bg-red-100 px-3 py-2 text-sm text-red-700">{{ t(key="court-delete-error", lang=lang) }}</div>
+<div class="alert alert-error mb-4">
+  <span>{{ t(key="court-delete-error", lang=lang) }}</span>
+</div>
 {% endif %}
 
-<div class="mb-6 overflow-auto rounded-lg border bg-white">
-  <table class="w-full text-sm">
+<div class="mb-6 overflow-x-auto rounded-lg border border-gray-200 bg-white shadow-sm">
+  <table class="table">
     <thead>
-      <tr class="bg-gray-100 text-left">
-        <th class="p-2">{{ t(key="court-name", lang=lang) }}</th>
-        <th class="p-2">{{ t(key="court-surface", lang=lang) }}</th>
-        <th class="p-2">{{ t(key="court-indoor", lang=lang) }}</th>
-        <th class="p-2">{{ t(key="court-remove", lang=lang) }}</th>
+      <tr>
+        <th>{{ t(key="court-name", lang=lang) }}</th>
+        <th>{{ t(key="court-surface", lang=lang) }}</th>
+        <th>{{ t(key="court-indoor", lang=lang) }}</th>
+        <th class="text-right">{{ t(key="court-remove", lang=lang) }}</th>
       </tr>
     </thead>
     <tbody>
       {% for c in courts %}
-      <tr class="border-t">
-        <td class="p-2">{{ c.name }}</td>
-        <td class="p-2">{{ c.surface }}</td>
-        <td class="p-2">{{ c.indoor }}</td>
-        <td class="p-2">
-          <form method="post" action="/admin/courts/{{ c.id }}/delete"
+      <tr>
+        <td class="font-medium">{{ c.name }}</td>
+        <td>{{ c.surface }}</td>
+        <td>
+          {% if c.indoor %}
+          <span class="badge badge-success badge-sm">✓</span>
+          {% else %}
+          <span class="badge badge-ghost badge-sm">—</span>
+          {% endif %}
+        </td>
+        <td class="text-right">
+          <form method="post" action="/admin/courts/{{ c.id }}/delete" class="inline"
             data-court-name="{{ c.name }}" onsubmit="return promptCourtDelete(this);">
             <input type="hidden" name="confirm_name">
-            <button class="rounded bg-red-600 px-3 py-1 text-sm text-white hover:bg-red-700">
-              {{ t(key="delete", lang=lang) }}
-            </button>
+            <button class="btn btn-error btn-sm">{{ t(key="delete", lang=lang) }}</button>
           </form>
         </td>
       </tr>
@@ -43,24 +49,27 @@
   </table>
 </div>
 
-<div class="max-w-md rounded-lg border bg-white p-4">
-  <h2 class="mb-3 font-semibold">{{ t(key="add-court", lang=lang) }}</h2>
-  <form method="post" action="/admin/courts" class="space-y-3">
-    <div>
-      <label class="block text-sm text-gray-600">{{ t(key="court-name", lang=lang) }}</label>
-      <input name="name" required class="w-full rounded border-gray-300 text-sm">
-    </div>
-    <div>
-      <label class="block text-sm text-gray-600">{{ t(key="court-surface", lang=lang) }}</label>
-      <input name="surface" class="w-full rounded border-gray-300 text-sm">
-    </div>
-    <label class="flex items-center gap-2 text-sm">
-      <input type="checkbox" name="indoor" value="1"> {{ t(key="court-indoor", lang=lang) }}
-    </label>
-    <button class="rounded bg-gray-900 px-4 py-2 text-sm text-white hover:bg-gray-700">
-      {{ t(key="add-court", lang=lang) }}
-    </button>
-  </form>
+<div class="card max-w-md border border-gray-200 bg-white shadow-sm">
+  <div class="card-body">
+    <h2 class="card-title text-base">{{ t(key="add-court", lang=lang) }}</h2>
+    <form method="post" action="/admin/courts" class="space-y-2">
+      <div class="form-control">
+        <label class="label"><span class="label-text">{{ t(key="court-name", lang=lang) }}</span></label>
+        <input name="name" required class="input input-bordered w-full">
+      </div>
+      <div class="form-control">
+        <label class="label"><span class="label-text">{{ t(key="court-surface", lang=lang) }}</span></label>
+        <input name="surface" class="input input-bordered w-full">
+      </div>
+      <div class="form-control">
+        <label class="label cursor-pointer justify-start gap-3">
+          <input type="checkbox" name="indoor" value="1" class="checkbox checkbox-sm">
+          <span class="label-text">{{ t(key="court-indoor", lang=lang) }}</span>
+        </label>
+      </div>
+      <button class="btn btn-neutral mt-1">{{ t(key="add-court", lang=lang) }}</button>
+    </form>
+  </div>
 </div>
 {% endblock content %}
 

ht_booking/assets/views/admin/login.html

@@ -3,23 +3,27 @@
 {% block title %}{{ t(key="login-title", lang=lang) }}{% endblock title %}
 
 {% block content %}
-<div class="mx-auto mt-8 max-w-sm rounded-lg border bg-white p-6">
-  <h1 class="mb-4 text-xl font-bold">{{ t(key="login-title", lang=lang) }}</h1>
-  {% if error %}
-  <div class="mb-3 rounded bg-red-100 px-3 py-2 text-sm text-red-700">{{ t(key="login-error", lang=lang) }}</div>
-  {% endif %}
-  <form method="post" action="/admin/login" class="space-y-3">
-    <div>
-      <label class="block text-sm text-gray-600">{{ t(key="email", lang=lang) }}</label>
-      <input type="email" name="email" required class="w-full rounded border-gray-300 text-sm">
+<div class="mx-auto mt-8 max-w-sm">
+  <div class="card border border-gray-200 bg-white shadow-sm">
+    <div class="card-body">
+      <h1 class="card-title">{{ t(key="login-title", lang=lang) }}</h1>
+      {% if error %}
+      <div class="alert alert-error">
+        <span>{{ t(key="login-error", lang=lang) }}</span>
+      </div>
+      {% endif %}
+      <form method="post" action="/admin/login" class="space-y-2">
+        <div class="form-control">
+          <label class="label"><span class="label-text">{{ t(key="email", lang=lang) }}</span></label>
+          <input type="email" name="email" required class="input input-bordered w-full">
+        </div>
+        <div class="form-control">
+          <label class="label"><span class="label-text">{{ t(key="password", lang=lang) }}</span></label>
+          <input type="password" name="password" required class="input input-bordered w-full">
+        </div>
+        <button class="btn btn-neutral mt-2 w-full">{{ t(key="login-button", lang=lang) }}</button>
+      </form>
     </div>
-    <div>
-      <label class="block text-sm text-gray-600">{{ t(key="password", lang=lang) }}</label>
-      <input type="password" name="password" required class="w-full rounded border-gray-300 text-sm">
-    </div>
-    <button class="w-full rounded bg-gray-900 py-2 text-sm text-white hover:bg-gray-700">
-      {{ t(key="login-button", lang=lang) }}
-    </button>
-  </form>
+  </div>
 </div>
 {% endblock content %}