Replace Bootstrap with Tailwind CSS + Alpine.js (#14)
Some checks failed
check / check (push) Has been cancelled

## 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>
This commit was merged in pull request #14.
This commit is contained in:
2026-03-02 00:42:29 +01:00
committed by Jeffrey Paul
parent f9a9569015
commit 011ec270c2
12 changed files with 329 additions and 293 deletions

View File

@@ -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 */