john-okeefe
533f8747e3
- Add defer attribute to <script src="/static/main.js"> in 21 template files - Improves page load performance by allowing HTML parsing to continue without blocking - Maintains script execution order while enabling parallel resource loading - Remove duplicate defer attribute from header.templ line 264 - Add websocket.ts import to main.ts for module registration This optimization reduces page render blocking and improves perceived load times by allowing the browser to continue parsing HTML while the main.js bundle loads. The defer attribute ensures scripts execute in order after HTML parsing completes. Affected templates include: - Admin pages: admin, admin_library, admin_settings, admin_users - Content pages: analytics, bookshelf, collections, conflicts, custom_section - User pages: dashboard, devices, docs, index, login, profile, progress, queue, register - System pages: header, unlinked_books
123 lines
5.9 KiB
Templ
123 lines
5.9 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/main.js" defer></script>
|
|
<link href="/static/style.css" rel="stylesheet"/>
|
|
</head>
|
|
<body class="theme-tokyo-night" x-data="index" x-init="initIndexTheme(); checkAuthRedirect()">
|
|
<!-- 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" @change="changeTheme" class="px-3 py-2 border rounded text-sm" style="background-color: var(--bg-secondary); color: var(--text-primary); border-color: var(--border)">
|
|
<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>
|
|
}
|
|
</body>
|
|
</html>
|
|
}
|