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
All checks were successful
check / check (push) Successful in 1m13s
Details

Browse Source 
- Remove all Bootstrap CSS/JS references from templates
- Add Tailwind CSS v4 with Material Design inspired theme (input.css)
- Compile tailwind.css with standalone CLI (committed to repo)
- Vendor Alpine.js 3.14.9 for reactive UI components
- Rewrite base.html to match µPaaS layout structure
- Rewrite htmlheader.html with Tailwind CSS link
- Rewrite navbar.html with Alpine.js mobile menu toggle
- Convert index.html to Tailwind utility classes
- Convert login.html to Tailwind utility classes
- Convert profile.html to Tailwind utility classes
- Add make css target for Tailwind compilation
- Add footer template with project links

closes #4
This commit is contained in:
user
2026-03-01 10:19:35 -08:00
parent f9a9569015
commit 56c032a63f
12 changed files with 329 additions and 293 deletions
Download Patch File Download Diff File Expand all files Collapse all files

113
templates/login.html
View File

@@ -2,86 +2,57 @@
{{define "title"}}Login - Webhooker{{end}}
{{define "head"}}
<style>
body {
background-color: #f8f9fa;
}
.login-container {
max-width: 400px;
margin: 100px auto;
}
.login-card {
background: white;
border-radius: 10px;
box-shadow: 0 0 20px rgba(0,0,0,0.1);
padding: 40px;
}
.login-header {
text-align: center;
margin-bottom: 30px;
}
.login-header h1 {
font-size: 2rem;
font-weight: 600;
color: #333;
}
.login-header p {
color: #666;
margin-top: 10px;
}
.form-control:focus {
border-color: #007bff;
box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
}
.btn-primary {
width: 100%;
padding: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.error-message {
margin-top: 15px;
}
</style>
{{end}}
{{define "content"}}
<div class="container">
<div class="login-container">
<div class="login-card">
<div class="login-header">
<h1>Webhooker</h1>
<p>Sign in to your account</p>
</div>
<div class="min-h-screen flex items-center justify-center py-12 px-4">
<div class="max-w-md w-full">
<div class="text-center mb-8">
<h1 class="text-3xl font-medium text-gray-900">Webhooker</h1>
<p class="mt-2 text-gray-600">Sign in to your account</p>
</div>
<div class="card p-8">
{{if .Error}}
<div class="alert alert-danger error-message" role="alert">
{{.Error}}
<div class="alert-error">
<div class="flex items-center">
<svg class="w-5 h-5 mr-2 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/>
</svg>
<span>{{.Error}}</span>
</div>
</div>
{{end}}
<form method="POST" action="/pages/login">
<div class="mb-3">
<label for="username" class="form-label">Username</label>
<input type="text" class="form-control" id="username" name="username"
placeholder="Enter your username" required autofocus>
</div>
<div class="mb-4">
<label for="password" class="form-label">Password</label>
<input type="password" class="form-control" id="password" name="password"
placeholder="Enter your password" required>
<form method="POST" action="/pages/login" class="space-y-6">
<div class="form-group">
<label for="username" class="label">Username</label>
<input
type="text"
id="username"
name="username"
required
autofocus
autocomplete="username"
placeholder="Enter your username"
class="input"
>
</div>
<button type="submit" class="btn btn-primary">Sign In</button>
<div class="form-group">
<label for="password" class="label">Password</label>
<input
type="password"
id="password"
name="password"
required
autocomplete="current-password"
placeholder="Enter your password"
class="input"
>
</div>
<button type="submit" class="btn-primary w-full py-3">Sign In</button>
</form>
<div class="mt-4 text-center text-muted">
<small>© 2025 Webhooker. All rights reserved.</small>
</div>
</div>
</div>
</div>
{{end}}
{{end}}