Enhance frontend styling and accessibility features

- Updated .dockerignore to exclude backup directory with root-only permissions from build context.
- Added new CSS variables for card radius and transition duration in app.css.
- Implemented consistent focus ring styles for interactive elements to improve accessibility.
- Refactored card components across various pages to utilize a unified card style, enhancing visual consistency.
- Improved button styles with touch manipulation support for better user interaction on mobile devices.

.dockerignore

@@ -18,6 +18,9 @@ frontend-nuxt/.output
 # Runtime data (mounted at run time, not needed for build)
 grids
 
+# Backup dir often has root-only permissions; exclude from build context
+backup
+
 # Misc
 *.log
 .env*

frontend-nuxt/assets/css/app.css

@@ -46,6 +46,8 @@
 @theme {
   --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
   --font-mono: 'JetBrains Mono', ui-monospace, monospace;
+  --radius-card: 1rem;
+  --duration-transition: 200ms;
 }
 
 html,
@@ -54,6 +56,41 @@ body,
   height: 100%;
 }
 
+/* Consistent focus ring for interactive elements */
+@layer components {
+  .focus-ring:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 2px var(--color-base-100), 0 0 0 4px var(--color-primary);
+  }
+  button:focus-visible,
+  [type="button"]:focus-visible,
+  [type="submit"]:focus-visible,
+  [type="reset"]:focus-visible,
+  a[href]:focus-visible,
+  input:focus-visible,
+  select:focus-visible,
+  textarea:focus-visible,
+  [role="button"]:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 2px var(--color-base-100), 0 0 0 4px var(--color-primary);
+  }
+  /* Unified card style */
+  .card-app {
+    @apply rounded-xl shadow-xl border border-base-300/50 bg-base-100;
+  }
+  .card-app.card-bg-base-200 {
+    @apply bg-base-200;
+  }
+  /* Modal box aligned with cards */
+  .modal-box {
+    @apply rounded-xl border border-base-300/50;
+  }
+  /* Primary button: subtle transition, no per-page scale */
+  .btn-primary {
+    @apply transition-[transform,color,background-color] duration-200;
+  }
+}
+
 @keyframes login-card-in {
   from {
     opacity: 0;

frontend-nuxt/layouts/default.vue

@@ -60,7 +60,7 @@
                   </svg>
                 </summary>
                 <ul
-                  class="dropdown-content menu bg-base-200 rounded-box z-[1100] mt-2 w-52 border border-base-300/50 shadow-xl p-2"
+                  class="dropdown-content menu bg-base-200 rounded-xl z-[1100] mt-2 w-52 border border-base-300/50 shadow-xl p-2"
                 >
                   <li>
                     <NuxtLink to="/" :class="route.path === '/' ? 'active' : ''" @click="closeDropdown">

frontend-nuxt/pages/admin/index.vue

@@ -3,7 +3,7 @@
     <h1 class="text-2xl font-bold mb-6">Admin</h1>
 
     <template v-if="loading">
-      <div class="card bg-base-200 shadow-xl mb-6">
+      <div class="card card-app card-bg-base-200 mb-6">
         <div class="card-body">
           <Skeleton class="h-6 w-24 mb-4" />
           <div class="flex flex-col gap-2">
@@ -12,7 +12,7 @@
           </div>
         </div>
       </div>
-      <div class="card bg-base-200 shadow-xl mb-6">
+      <div class="card card-app card-bg-base-200 mb-6">
         <div class="card-body">
           <Skeleton class="h-6 w-20 mb-4" />
           <div class="overflow-x-auto">
@@ -20,7 +20,7 @@
           </div>
         </div>
       </div>
-      <div class="card bg-base-200 shadow-xl mb-6">
+      <div class="card card-app card-bg-base-200 mb-6">
         <div class="card-body">
           <Skeleton class="h-6 w-16 mb-4" />
           <div class="flex flex-col gap-3">
@@ -45,7 +45,7 @@
       </div>
     </div>
 
-    <div class="card bg-base-200 shadow-xl mb-6 transition-all duration-200">
+    <div class="card card-app card-bg-base-200 mb-6 transition-all duration-200">
       <div class="card-body">
         <h2 class="card-title gap-2">
           <icons-icon-users />
@@ -88,7 +88,7 @@
         </div>
     </div>
 
-    <div class="card bg-base-200 shadow-xl mb-6 transition-all duration-200">
+    <div class="card card-app card-bg-base-200 mb-6 transition-all duration-200">
       <div class="card-body">
         <h2 class="card-title gap-2">
           <icons-icon-map-pin />
@@ -145,7 +145,7 @@
       </div>
     </div>
 
-    <div class="card bg-base-200 shadow-xl mb-6 transition-all duration-200">
+    <div class="card card-app card-bg-base-200 mb-6 transition-all duration-200">
       <div class="card-body">
         <h2 class="card-title gap-2">
           <icons-icon-settings />
@@ -191,7 +191,7 @@
         </div>
     </div>
 
-    <div class="card bg-base-200 shadow-xl mb-6 transition-all duration-200">
+    <div class="card card-app card-bg-base-200 mb-6 transition-all duration-200">
       <div class="card-body">
         <h2 class="card-title gap-2">
           <icons-icon-alert-triangle />
@@ -226,8 +226,8 @@
                 </button>
               </form>
             </div>
-            <div class="border-t border-red-500/30 pt-4 mt-1 bg-error/5 rounded-lg p-3 -mx-1">
+            <div class="border-t border-error/30 pt-4 mt-1 bg-error/5 rounded-lg p-3 -mx-1">
-              <p class="text-sm font-medium text-error/90 mb-2">Danger zone</p>
+              <p class="text-sm font-medium text-error mb-2">Danger zone</p>
               <button class="btn btn-sm btn-error min-h-11 touch-manipulation" :disabled="wiping" @click="confirmWipe">
                 <span v-if="wiping" class="loading loading-spinner loading-sm" />
                 <span v-else>Wipe all data</span>

frontend-nuxt/pages/admin/maps/[id].vue

@@ -1,11 +1,11 @@
 <template>
-  <div class="container mx-auto p-4 max-w-lg">
+  <div class="container mx-auto p-4 max-w-2xl min-w-0">
     <h1 class="text-2xl font-bold mb-6">Edit map {{ id }}</h1>
 
     <form v-if="map" @submit.prevent="submit" class="flex flex-col gap-4">
       <fieldset class="fieldset">
         <label class="label" for="name">Name</label>
-        <input id="name" v-model="form.name" type="text" class="input" required />
+        <input id="name" v-model="form.name" type="text" class="input min-h-11 touch-manipulation" required />
       </fieldset>
       <fieldset class="fieldset">
         <label class="label cursor-pointer gap-2">
@@ -21,16 +21,16 @@
       </fieldset>
       <p v-if="error" class="text-error text-sm">{{ error }}</p>
       <div class="flex gap-2">
-        <button type="submit" class="btn btn-primary" :disabled="loading">
+        <button type="submit" class="btn btn-primary min-h-11 touch-manipulation" :disabled="loading">
           <span v-if="loading" class="loading loading-spinner loading-sm" />
           <span v-else>Save</span>
         </button>
-        <NuxtLink to="/admin" class="btn btn-ghost">Back</NuxtLink>
+        <NuxtLink to="/admin" class="btn btn-ghost min-h-11 touch-manipulation">Back</NuxtLink>
       </div>
     </form>
     <template v-else-if="mapsLoaded">
       <p class="text-base-content/70">Map not found.</p>
-      <NuxtLink to="/admin" class="btn btn-ghost mt-2">Back to Admin</NuxtLink>
+      <NuxtLink to="/admin" class="btn btn-ghost mt-2 min-h-11 touch-manipulation">Back to Admin</NuxtLink>
     </template>
     <p v-else class="text-base-content/70">Loading…</p>
   </div>

frontend-nuxt/pages/admin/users/[username].vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="container mx-auto p-4 max-w-lg">
+  <div class="container mx-auto p-4 max-w-2xl min-w-0">
     <h1 class="text-2xl font-bold mb-6">{{ isNew ? 'New user' : `Edit ${username}` }}</h1>
 
     <form @submit.prevent="submit" class="flex flex-col gap-4">
@@ -9,7 +9,7 @@
           id="user"
           v-model="form.user"
           type="text"
-          class="input"
+          class="input min-h-11 touch-manipulation"
           required
           :readonly="!isNew"
         />
@@ -30,15 +30,15 @@
       </fieldset>
       <p v-if="error" class="text-error text-sm">{{ error }}</p>
       <div class="flex gap-2">
-        <button type="submit" class="btn btn-primary" :disabled="loading">
+        <button type="submit" class="btn btn-primary min-h-11 touch-manipulation" :disabled="loading">
           <span v-if="loading" class="loading loading-spinner loading-sm" />
           <span v-else>Save</span>
         </button>
-        <NuxtLink to="/admin" class="btn btn-ghost">Back</NuxtLink>
+        <NuxtLink to="/admin" class="btn btn-ghost min-h-11 touch-manipulation">Back</NuxtLink>
         <button
           v-if="!isNew"
           type="button"
-          class="btn btn-error btn-outline ml-auto"
+          class="btn btn-error btn-outline ml-auto min-h-11 touch-manipulation"
           :disabled="loading"
           @click="confirmDelete"
         >

frontend-nuxt/pages/login.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="min-h-screen flex flex-col items-center justify-center bg-gradient-to-br from-base-200 via-base-300 to-primary/10 p-4 overflow-hidden">
-    <div class="card w-full max-w-sm bg-base-100 shadow-2xl ring-1 ring-base-300 login-card">
+    <div class="card card-app w-full max-w-sm login-card">
       <div class="card-body">
         <h1 class="card-title justify-center text-2xl">HnH Map</h1>
         <p class="text-center text-base-content/70 text-sm">Log in to continue</p>
@@ -23,7 +23,7 @@
               id="user"
               v-model="user"
               type="text"
-              class="input"
+              class="input min-h-11 touch-manipulation"
               required
               autocomplete="username"
             />
@@ -35,7 +35,7 @@
             autocomplete="current-password"
           />
           <p v-if="error" class="text-error text-sm">{{ error }}</p>
-          <button type="submit" class="btn btn-primary transition-all duration-200 hover:scale-[1.02]" :disabled="loading">
+          <button type="submit" class="btn btn-primary min-h-11 touch-manipulation" :disabled="loading">
             <span v-if="loading" class="loading loading-spinner loading-sm" />
             <span v-else>Log in</span>
           </button>

frontend-nuxt/pages/profile.vue

@@ -3,7 +3,7 @@
     <h1 class="text-2xl font-bold mb-6">Profile</h1>
 
     <!-- User info card -->
-    <div class="card bg-base-200 shadow-xl mb-6 transition-all duration-200">
+    <div class="card card-app card-bg-base-200 mb-6 transition-all duration-200">
       <div class="card-body">
         <template v-if="initialLoad">
           <div class="flex items-center gap-4">
@@ -80,7 +80,7 @@
     </div>
 
     <!-- Upload tokens -->
-    <div class="card bg-base-200 shadow-xl mb-6 transition-all duration-200">
+    <div class="card card-app card-bg-base-200 mb-6 transition-all duration-200">
       <div class="card-body">
         <template v-if="initialLoad">
           <Skeleton class="h-6 w-32 mb-2" />
@@ -116,14 +116,14 @@
           </ul>
           <p v-else class="text-sm mt-2">No tokens yet.</p>
           <p v-if="tokenError" class="text-error text-sm mt-2">{{ tokenError }}</p>
-          <button class="btn btn-primary btn-sm mt-2 min-h-11 touch-manipulation transition-all duration-200 hover:scale-[1.02]" :disabled="loadingTokens" @click="generateToken">
+          <button class="btn btn-primary btn-sm mt-2 min-h-11 touch-manipulation" :disabled="loadingTokens" @click="generateToken">
             {{ loadingTokens ? '…' : 'Generate token' }}
           </button>
         </template>
       </div>
     </div>
 
-    <div class="card bg-base-200 shadow-xl mb-6 transition-all duration-200">
+    <div class="card card-app card-bg-base-200 mb-6 transition-all duration-200">
       <div class="card-body">
         <h2 class="card-title gap-2">
           <icons-icon-settings />
@@ -136,7 +136,7 @@
             autocomplete="new-password"
           />
           <p v-if="passMsg" class="text-sm" :class="passOk ? 'text-success' : 'text-error'">{{ passMsg }}</p>
-          <button type="submit" class="btn btn-sm min-h-11 touch-manipulation transition-all duration-200 hover:scale-[1.02]" :disabled="loadingPass">Save password</button>
+          <button type="submit" class="btn btn-sm min-h-11 touch-manipulation" :disabled="loadingPass">Save password</button>
         </form>
       </div>
     </div>

frontend-nuxt/pages/setup.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="min-h-screen flex flex-col items-center justify-center bg-base-200 p-4">
+  <div class="min-h-screen flex flex-col items-center justify-center bg-gradient-to-br from-base-200 via-base-300 to-primary/10 p-4 overflow-hidden">
-    <div class="card w-full max-w-sm bg-base-100 shadow-xl">
+    <div class="card card-app w-full max-w-sm login-card">
       <div class="card-body">
         <h1 class="card-title justify-center">First-time setup</h1>
         <p class="text-sm text-base-content/80">
@@ -15,7 +15,7 @@
             autocomplete="current-password"
           />
           <p v-if="error" class="text-error text-sm">{{ error }}</p>
-          <button type="submit" class="btn btn-primary" :disabled="loading">
+          <button type="submit" class="btn btn-primary min-h-11 touch-manipulation" :disabled="loading">
             <span v-if="loading" class="loading loading-spinner loading-sm" />
             <span v-else>Create and log in</span>
           </button>