sneak/webhooker
1
0
Fork 0
Code Issues 4 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

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

Browse Source 
## 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:
clawbot
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
Download Patch File Download Diff File Expand all files Collapse all files

83
templates/profile.html
View File

@@ -3,51 +3,48 @@
{{define "title"}}Profile - Webhooker{{end}}
{{define "content"}}
<div class="container mt-5">
<div class="row">
<div class="col-lg-8 mx-auto">
<h1 class="mb-4">User Profile</h1>
<div class="card shadow-sm">
<div class="card-body">
<div class="row align-items-center mb-3">
<div class="col-auto">
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" fill="currentColor" class="bi bi-person-circle text-primary" viewBox="0 0 16 16">
<path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"/>
<path fill-rule="evenodd" d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1z"/>
</svg>
</div>
<div class="col">
<h3 class="mb-0">{{.User.Username}}</h3>
<p class="text-muted mb-0">User ID: {{.User.ID}}</p>
</div>
</div>
<hr>
<div class="row">
<div class="col-md-6">
<h5>Account Information</h5>
<dl class="row">
<dt class="col-sm-4">Username</dt>
<dd class="col-sm-8">{{.User.Username}}</dd>
<dt class="col-sm-4">Account Type</dt>
<dd class="col-sm-8">Standard User</dd>
</dl>
</div>
<div class="col-md-6">
<h5>Settings</h5>
<p class="text-muted">Profile settings and preferences will be available here.</p>
</div>
</div>
</div>
<div class="max-w-4xl mx-auto px-6 py-12">
<h1 class="text-2xl font-medium text-gray-900 mb-6">User Profile</h1>
<div class="card p-6">
<div class="flex items-center mb-6">
<div class="mr-4">
<svg class="w-16 h-16 text-primary-500" fill="currentColor" viewBox="0 0 16 16">
<path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"/>
<path fill-rule="evenodd" d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1z"/>
</svg>
</div>
<div class="mt-4">
<a href="/" class="btn btn-secondary">Back to Home</a>
<div>
<h2 class="text-xl font-medium text-gray-900">{{.User.Username}}</h2>
<p class="text-sm text-gray-500">User ID: {{.User.ID}}</p>
</div>
</div>
<hr class="border-gray-200 mb-6">
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<div>
<h3 class="text-lg font-medium text-gray-900 mb-3">Account Information</h3>
<dl class="space-y-3">
<div class="flex">
<dt class="w-32 text-sm font-medium text-gray-500">Username</dt>
<dd class="text-sm text-gray-900">{{.User.Username}}</dd>
</div>
<div class="flex">
<dt class="w-32 text-sm font-medium text-gray-500">Account Type</dt>
<dd class="text-sm text-gray-900">Standard User</dd>
</div>
</dl>
</div>
<div>
<h3 class="text-lg font-medium text-gray-900 mb-3">Settings</h3>
<p class="text-sm text-gray-500">Profile settings and preferences will be available here.</p>
</div>
</div>
</div>
<div class="mt-6">
<a href="/" class="btn-secondary">Back to Home</a>
</div>
</div>
{{end}}
{{end}}