john-okeefe
656261af4f
Remove <style> tags from index, login, and register templates. All theme CSS variables now come from centralized input.css, eliminating duplicate theme definitions across templates.
156 lines
8.6 KiB
Templ
156 lines
8.6 KiB
Templ
package templates
|
|
|
|
templ Index(loggedIn bool) {
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Bookhoard - Home</title>
|
|
<script src="/static/htmx.min.js"></script>
|
|
<script src="/static/toast.js"></script>
|
|
<link href="/static/style.css" rel="stylesheet">
|
|
</head>
|
|
<body class="theme-tokyo-night">
|
|
<!-- Hero Section -->
|
|
<div class="relative overflow-hidden">
|
|
<div class="absolute inset-0 bg-gradient-to-r from-blue-600 to-purple-700 opacity-10"></div>
|
|
<div class="relative max-w-7xl mx-auto px-4 py-16 sm:px-6 sm:py-24 lg:py-32 lg:px-8">
|
|
<div class="flex justify-between items-start mb-8">
|
|
<div></div>
|
|
<select id="theme-select" class="px-3 py-2 border rounded text-sm" style="background-color: var(--bg-secondary); color: var(--text-primary); border-color: var(--border)" onchange="changeTheme()">
|
|
<option value="tokyo-night">Tokyo Night</option>
|
|
<option value="dracula">Dracula</option>
|
|
<option value="nord">Nord</option>
|
|
<option value="solarized-dark">Solarized Dark</option>
|
|
<option value="monokai">Monokai</option>
|
|
<option value="one-dark-pro">One Dark Pro</option>
|
|
<option value="material-dark">Material Dark</option>
|
|
<option value="catppuccin-mocha">Catppuccin Mocha</option>
|
|
<option value="catppuccin-macchiato">Catppuccin Macchiato</option>
|
|
<option value="catppuccin-frappe">Catppuccin Frappé</option>
|
|
<option value="catppuccin-latte">Catppuccin Latte</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="text-center">
|
|
<h1 class="text-4xl sm:text-6xl lg:text-7xl font-extrabold" style="color: var(--text-primary)">
|
|
📚 Bookhoard
|
|
</h1>
|
|
<p class="mt-6 max-w-2xl mx-auto text-xl" style="color: var(--text-secondary)">
|
|
Your personal ebook management system. Track reading progress, organize your library, and enjoy beautiful themes.
|
|
</p>
|
|
<div class="mt-10">
|
|
<a href="#auth" class="btn-primary px-8 py-3 rounded-lg font-medium text-lg">
|
|
Get Started
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Features Section -->
|
|
<div class="py-16" style="background-color: var(--bg-secondary)">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="text-center mb-12">
|
|
<h2 class="text-3xl font-extrabold" style="color: var(--text-primary)">Why Bookhoard?</h2>
|
|
<p class="mt-4 text-lg" style="color: var(--text-secondary)">Discover the features that make ebook management effortless</p>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
|
<div class="card p-6 rounded-xl border">
|
|
<div class="text-center">
|
|
<div class="mx-auto w-12 h-12 bg-blue-500 rounded-lg flex items-center justify-center mb-4">
|
|
<span class="text-white text-2xl">📖</span>
|
|
</div>
|
|
<h3 class="text-lg font-semibold mb-2" style="color: var(--text-primary)">Reading Progress</h3>
|
|
<p style="color: var(--text-secondary)">Track your reading progress across all your ebooks with detailed statistics.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card p-6 rounded-xl border">
|
|
<div class="text-center">
|
|
<div class="mx-auto w-12 h-12 bg-purple-500 rounded-lg flex items-center justify-center mb-4">
|
|
<span class="text-white text-2xl">🎨</span>
|
|
</div>
|
|
<h3 class="text-lg font-semibold mb-2" style="color: var(--text-primary)">Beautiful Themes</h3>
|
|
<p style="color: var(--text-secondary)">Choose from 11 stunning themes including Tokyo Night, Dracula, and Catppuccin variants.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card p-6 rounded-xl border">
|
|
<div class="text-center">
|
|
<div class="mx-auto w-12 h-12 bg-green-500 rounded-lg flex items-center justify-center mb-4">
|
|
<span class="text-white text-2xl">⚡</span>
|
|
</div>
|
|
<h3 class="text-lg font-semibold mb-2" style="color: var(--text-primary)">Fast & Modern</h3>
|
|
<p style="color: var(--text-secondary)">Built with Go and HTMX for lightning-fast performance and smooth interactions.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Auth Section -->
|
|
if !loggedIn {
|
|
<div id="auth" class="py-16">
|
|
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="text-center mb-12">
|
|
<h2 class="text-3xl font-extrabold" style="color: var(--text-primary)">Join Bookhoard Today</h2>
|
|
<p class="mt-4 text-lg" style="color: var(--text-secondary)">Sign in to start managing your ebook library</p>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 gap-8">
|
|
<div class="card p-8 rounded-xl border">
|
|
<h3 class="text-2xl font-semibold mb-6 text-center" style="color: var(--text-primary)">Login</h3>
|
|
<form hx-post="/api/auth/login" hx-target="#auth-result" hx-swap="innerHTML">
|
|
<div class="space-y-4">
|
|
<div>
|
|
<label class="block text-sm font-medium mb-1" style="color: var(--text-secondary)">Email or Username</label>
|
|
<input type="text" name="login" class="w-full px-3 py-2 border rounded-lg" style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border)" required>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium mb-1" style="color: var(--text-secondary)">Password</label>
|
|
<input type="password" name="password" class="w-full px-3 py-2 border rounded-lg" style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border)" required>
|
|
</div>
|
|
<button type="submit" class="w-full btn-primary py-2 rounded-lg font-medium">
|
|
Sign In
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="auth-result" class="mt-8 text-center"></div>
|
|
</div>
|
|
</div>
|
|
}
|
|
|
|
<script src="/static/theme.js"></script>
|
|
<script>
|
|
// Auto-redirect to bookshelf if user is logged in
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const token = localStorage.getItem('token');
|
|
if (token) {
|
|
// Validate token by checking profile
|
|
fetch('/api/auth/profile', {
|
|
headers: {
|
|
'Authorization': `Bearer ${token}`
|
|
}
|
|
})
|
|
.then(response => {
|
|
if (response.ok) {
|
|
// Token is valid, redirect to bookshelf
|
|
window.location.href = '/bookshelf';
|
|
}
|
|
})
|
|
.catch(error => {
|
|
// Silently fail - user stays on homepage
|
|
console.log('Not logged in');
|
|
});
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|
|
} |