Replace Bootstrap with Tailwind CSS + Alpine.js (#14)

## Summary

Replaces Bootstrap CSS/JS framework with Tailwind CSS v4 + Alpine.js, matching the µPaaS UI pattern.

## Changes

- **Removed Bootstrap** — all Bootstrap CSS/JS references removed from templates
- **Added Tailwind CSS v4** — `static/css/input.css` with Material Design inspired theme, compiled to `static/css/tailwind.css`
- **Added Alpine.js 3.14.9** — vendored as `static/js/alpine.min.js` for reactive UI components
- **Rewrote all templates** to use Tailwind utility classes:
  - `base.html` — new layout structure with footer, matches µPaaS pattern
  - `htmlheader.html` — Tailwind CSS link, `[x-cloak]` style
  - `navbar.html` — Alpine.js mobile menu toggle, responsive design
  - `index.html` — card-based dashboard with Tailwind classes
  - `login.html` — centered login form with Material Design styling
  - `profile.html` — clean profile layout
- **Added `make css` target** — compiles Tailwind CSS using standalone CLI
- **Component classes** in `input.css` — reusable `.btn-primary`, `.card`, `.input`, `.alert-error` etc.

## Testing

- `make fmt` ✅
- `make check` (fmt-check, lint, test, build) ✅
- `docker build .` ✅

closes #4

Co-authored-by: user <user@Mac.lan guest wan>
Reviewed-on: #14
Co-authored-by: clawbot <clawbot@noreply.example.org>
Co-committed-by: clawbot <clawbot@noreply.example.org>

static/css/input.css

@@ -0,0 +1,108 @@
+@import "tailwindcss";
+
+/* Source the templates */
+@source "../../templates/**/*.html";
+
+/* Material Design inspired theme customization */
+@theme {
+  /* Primary colors */
+  --color-primary-50: #e3f2fd;
+  --color-primary-100: #bbdefb;
+  --color-primary-200: #90caf9;
+  --color-primary-300: #64b5f6;
+  --color-primary-400: #42a5f5;
+  --color-primary-500: #2196f3;
+  --color-primary-600: #1e88e5;
+  --color-primary-700: #1976d2;
+  --color-primary-800: #1565c0;
+  --color-primary-900: #0d47a1;
+
+  /* Error colors */
+  --color-error-50: #ffebee;
+  --color-error-500: #f44336;
+  --color-error-700: #d32f2f;
+
+  /* Success colors */
+  --color-success-50: #e8f5e9;
+  --color-success-500: #4caf50;
+  --color-success-700: #388e3c;
+
+  /* Warning colors */
+  --color-warning-50: #fff3e0;
+  --color-warning-500: #ff9800;
+  --color-warning-700: #f57c00;
+
+  /* Material Design elevation shadows */
+  --shadow-elevation-1: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
+  --shadow-elevation-2: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
+  --shadow-elevation-3: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
+}
+
+/* Material Design component styles */
+@layer components {
+  /* Buttons */
+  .btn-primary {
+    @apply inline-flex items-center justify-center px-4 py-2 rounded-md font-medium text-sm transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed bg-primary-600 text-white hover:bg-primary-700 active:bg-primary-800 focus:ring-primary-500 shadow-elevation-1 hover:shadow-elevation-2;
+  }
+
+  .btn-secondary {
+    @apply inline-flex items-center justify-center px-4 py-2 rounded-md font-medium text-sm transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed bg-white text-gray-700 border border-gray-300 hover:bg-gray-50 active:bg-gray-100 focus:ring-primary-500;
+  }
+
+  .btn-danger {
+    @apply inline-flex items-center justify-center px-4 py-2 rounded-md font-medium text-sm transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed bg-error-500 text-white hover:bg-error-700 active:bg-red-800 focus:ring-red-500 shadow-elevation-1 hover:shadow-elevation-2;
+  }
+
+  .btn-text {
+    @apply inline-flex items-center justify-center px-4 py-2 rounded-md font-medium text-sm transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed text-primary-600 hover:bg-primary-50 active:bg-primary-100;
+  }
+
+  /* Cards */
+  .card {
+    @apply bg-white rounded-lg shadow-elevation-1 overflow-hidden;
+  }
+
+  .card-elevated {
+    @apply bg-white rounded-lg shadow-elevation-1 overflow-hidden hover:shadow-elevation-2 transition-shadow;
+  }
+
+  /* Form inputs */
+  .input {
+    @apply w-full px-4 py-3 border border-gray-300 rounded-md text-gray-900 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-all;
+  }
+
+  .label {
+    @apply block text-sm font-medium text-gray-700 mb-1;
+  }
+
+  .form-group {
+    @apply mb-4;
+  }
+
+  /* Status badges */
+  .badge-success {
+    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-success-50 text-success-700;
+  }
+
+  .badge-error {
+    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-error-50 text-error-700;
+  }
+
+  .badge-info {
+    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-primary-50 text-primary-700;
+  }
+
+  /* App bar / Navigation */
+  .app-bar {
+    @apply bg-white shadow-elevation-1 px-6 py-4;
+  }
+
+  /* Alert / Message boxes */
+  .alert-error {
+    @apply p-4 rounded-md mb-4 bg-error-50 text-error-700 border border-error-500/20;
+  }
+
+  .alert-success {
+    @apply p-4 rounded-md mb-4 bg-success-50 text-success-700 border border-success-500/20;
+  }
+}

static/css/style.css

@@ -1,59 +1 @@
-/* Webhooker main stylesheet */
-body {
-    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-} 
-
-/* Custom styles for Webhooker */
-
-/* Navbar customization */
-.navbar-brand {
-    font-weight: 600;
-    font-size: 1.5rem;
-}
-
-/* Card hover effects */
-.card {
-    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
-}
-
-.card:hover {
-    transform: translateY(-5px);
-    box-shadow: 0 10px 30px rgba(0,0,0,0.15) !important;
-}
-
-/* Background opacity utilities */
-.bg-opacity-10 {
-    background-color: rgba(var(--bs-success-rgb), 0.1);
-}
-
-.bg-primary.bg-opacity-10 {
-    background-color: rgba(var(--bs-primary-rgb), 0.1);
-}
-
-/* User dropdown styling */
-.navbar .dropdown-toggle::after {
-    margin-left: 0.5rem;
-}
-
-.navbar .dropdown-menu {
-    margin-top: 0.5rem;
-}
-
-/* Footer styling */
-footer {
-    margin-top: auto;
-    padding: 2rem 0;
-    background-color: #f8f9fa;
-    border-top: 1px solid #dee2e6;
-}
-
-/* Responsive adjustments */
-@media (max-width: 768px) {
-    .display-4 {
-        font-size: 2.5rem;
-    }
-    
-    .card {
-        margin-bottom: 1rem;
-    }
-} 
+/* Webhooker custom styles — see input.css for Tailwind theme */

static/js/app.js

@@ -1,2 +1,2 @@
 // Webhooker client-side JavaScript
-console.log("Webhooker loaded"); 
+console.log("Webhooker loaded");