feat: Add comprehensive backend validation, toast notifications, and Tokyo Night theme

- Backend: Add server-side validation with go-playground/validator/v10
- Frontend: Add toast notifications for API errors with @zerodevx/svelte-toast
- UI: Complete Tokyo Night theme redesign with modern animations
- Docs: Update COMPLETE_DOCUMENTATION.md and README.md with all enhancements
- Validation: Email format, password strength, and input sanitization
- UX: Real-time error feedback, loading states, and responsive design

frontend/.gitignore

@@ -0,0 +1,23 @@
+node_modules
+
+# Output
+.output
+.vercel
+.netlify
+.wrangler
+/.svelte-kit
+/build
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Env
+.env
+.env.*
+!.env.example
+!.env.test
+
+# Vite
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*

frontend/.npmrc

@@ -0,0 +1 @@
+engine-strict=true

frontend/README.md

@@ -0,0 +1,42 @@
+# sv
+
+Everything you need to build a Svelte project, powered by [`sv`](https://github.com/sveltejs/cli).
+
+## Creating a project
+
+If you're seeing this, you've probably already done this step. Congrats!
+
+```sh
+# create a new project
+npx sv create my-app
+```
+
+To recreate this project with the same configuration:
+
+```sh
+# recreate this project
+npx sv create --template minimal --types ts --install npm .
+```
+
+## Developing
+
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+
+```sh
+npm run dev
+
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
+```
+
+## Building
+
+To create a production version of your app:
+
+```sh
+npm run build
+```
+
+You can preview the production build with `npm run preview`.
+
+> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.

frontend/package.json

@@ -0,0 +1,33 @@
+{
+	"name": "frontend",
+	"private": true,
+	"version": "0.0.1",
+	"type": "module",
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build",
+		"preview": "vite preview",
+		"prepare": "svelte-kit sync || echo ''",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
+	},
+	"devDependencies": {
+		"@sveltejs/adapter-static": "^3.0.1",
+		"@sveltejs/kit": "^2.49.1",
+		"@sveltejs/vite-plugin-svelte": "^6.2.1",
+		"@tailwindcss/postcss": "^4.1.18",
+		"@tailwindcss/typography": "^0.5.19",
+		"autoprefixer": "^10.4.23",
+		"postcss": "^8.5.6",
+		"svelte": "^5.45.6",
+		"svelte-check": "^4.3.4",
+		"tailwindcss": "^4.1.18",
+		"typescript": "^5.9.3",
+		"vite": "^7.2.6"
+	},
+	"dependencies": {
+		"@zerodevx/svelte-toast": "^0.9.6",
+		"sveltekit-superforms": "^2.29.1",
+		"zod": "^4.3.5"
+	}
+}

frontend/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    '@tailwindcss/postcss': {},
+    autoprefixer: {},
+  },
+}

frontend/src/app.css

@@ -0,0 +1,135 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  html {
+    background-color: #1a1b26;
+    color: #a9b1d6;
+  }
+
+  body {
+    background-color: #1a1b26;
+    color: #a9b1d6;
+    font-family: 'Inter', system-ui, sans-serif;
+  }
+
+  /* Scrollbar styling */
+  ::-webkit-scrollbar {
+    width: 8px;
+  }
+
+  ::-webkit-scrollbar-track {
+    background-color: #16161e;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background-color: #292e42;
+    border-radius: 9999px;
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    background-color: #565f89;
+  }
+}
+
+@layer components {
+  /* Custom button styles */
+  .btn-primary {
+    background-color: #7aa2f7;
+    color: white;
+    font-weight: 500;
+    padding: 0.5rem 1rem;
+    border-radius: 0.5rem;
+    transition: all 0.2s;
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  }
+
+  .btn-primary:hover {
+    background-color: #3b82f6;
+    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+  }
+
+  .btn-secondary {
+    background-color: #292e42;
+    color: #a9b1d6;
+    font-weight: 500;
+    padding: 0.5rem 1rem;
+    border-radius: 0.5rem;
+    transition: all 0.2s;
+  }
+
+  .btn-secondary:hover {
+    background-color: #364a82;
+  }
+
+  .btn-danger {
+    background-color: #f7768e;
+    color: white;
+    font-weight: 500;
+    padding: 0.5rem 1rem;
+    border-radius: 0.5rem;
+    transition: all 0.2s;
+  }
+
+  .btn-danger:hover {
+    background-color: #dc2626;
+  }
+
+  /* Card styles */
+  .card {
+    background-color: #16161e;
+    border: 1px solid #292e42;
+    border-radius: 0.75rem;
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    transition: all 0.3s;
+  }
+
+  .card:hover {
+    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+  }
+
+  .card-header {
+    border-bottom: 1px solid #292e42;
+    padding: 1.5rem;
+  }
+
+  .card-body {
+    padding: 1.5rem;
+  }
+
+  /* Input styles */
+  .input-field {
+    background-color: #1a1b26;
+    border: 1px solid #292e42;
+    border-radius: 0.5rem;
+    padding: 0.5rem 0.75rem;
+    color: #a9b1d6;
+    transition: all 0.2s;
+  }
+
+  .input-field:focus {
+    outline: none;
+    ring: 2px;
+    ring-color: #7aa2f7;
+    border-color: transparent;
+  }
+
+  .input-field::placeholder {
+    color: #565f89;
+  }
+
+  /* Navigation styles */
+  .nav-link {
+    color: #a9b1d6;
+    transition: color 0.2s;
+  }
+
+  .nav-link:hover {
+    color: #7aa2f7;
+  }
+
+  .nav-link.active {
+    color: #7aa2f7;
+  }
+}

frontend/src/app.d.ts

@@ -0,0 +1,13 @@
+// See https://svelte.dev/docs/kit/types#app.d.ts
+// for information about these interfaces
+declare global {
+	namespace App {
+		// interface Error {}
+		// interface Locals {}
+		// interface PageData {}
+		// interface PageState {}
+		// interface Platform {}
+	}
+}
+
+export {};

frontend/src/app.html

@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		<link rel="preconnect" href="https://fonts.googleapis.com">
+		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+		<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+		%sveltekit.head%
+	</head>
+	<body data-sveltekit-preload-data="hover">
+		<div style="display: contents">%sveltekit.body%</div>
+	</body>
+</html>

frontend/src/lib/api.ts

@@ -0,0 +1,170 @@
+import { showError } from './toast';
+
+const API_BASE = import.meta.env.DEV ? 'http://localhost:8080/api' : '/api';
+
+// Helper function to handle API responses and show error toasts
+async function handleResponse<T>(response: Response, errorMessage: string): Promise<T> {
+	if (!response.ok) {
+		let message = errorMessage;
+		try {
+			const errorData = await response.json();
+			if (errorData.error) {
+				message = errorData.error;
+			}
+		} catch (e) {
+			// If we can't parse JSON, use the default message
+		}
+		showError(message);
+		throw new Error(message);
+	}
+	return response.json();
+}
+
+export interface User {
+  id: string;
+  email: string;
+  username: string;
+}
+
+export interface AuthResponse {
+  token: string;
+  user: User;
+}
+
+export interface Ebook {
+  id: string;
+  title: string;
+  author: string | null;
+  isbn: string | null;
+  description: string | null;
+  file_path: string;
+  file_size: number | null;
+  mime_type: string | null;
+  cover_image_path: string | null;
+  created_at: string;
+  updated_at: string;
+}
+
+export interface ReadingProgress {
+  ebook_id: string;
+  user_id: string;
+  current_page: number;
+  total_pages: number | null;
+  last_read_at: string;
+}
+
+// Get stored token
+function getToken(): string | null {
+  if (typeof window !== 'undefined') {
+    return localStorage.getItem('auth_token');
+  }
+  return null;
+}
+
+// Create headers with auth
+function createHeaders(): Record<string, string> {
+  const headers: Record<string, string> = {
+    'Content-Type': 'application/json',
+  };
+
+  const token = getToken();
+  if (token) {
+    headers['Authorization'] = `Bearer ${token}`;
+  }
+
+  return headers;
+}
+
+// Auth functions
+export async function registerUser(email: string, username: string, password: string): Promise<AuthResponse> {
+  const response = await fetch(`${API_BASE}/auth/register`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ email, username, password }),
+  });
+  return handleResponse<AuthResponse>(response, 'Registration failed');
+}
+
+export async function loginUser(login: string, password: string): Promise<AuthResponse> {
+  const response = await fetch(`${API_BASE}/auth/login`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ login, password }),
+  });
+  return handleResponse<AuthResponse>(response, 'Login failed');
+}
+
+export async function getUserProfile(): Promise<User> {
+  const response = await fetch(`${API_BASE}/auth/profile`, {
+    headers: createHeaders(),
+  });
+  return handleResponse<User>(response, 'Failed to get profile');
+}
+
+export async function fetchEbooks(limit: number = 20, offset: number = 0): Promise<Ebook[]> {
+  const response = await fetch(`${API_BASE}/ebooks?limit=${limit}&offset=${offset}`, {
+    headers: createHeaders(),
+  });
+  return handleResponse<Ebook[]>(response, 'Failed to fetch ebooks');
+}
+
+export async function fetchEbook(id: string): Promise<Ebook> {
+  const response = await fetch(`${API_BASE}/ebooks/${id}`, {
+    headers: createHeaders(),
+  });
+  return handleResponse<Ebook>(response, 'Failed to fetch ebook');
+}
+
+export async function createEbook(data: Partial<Ebook>): Promise<Ebook> {
+  const response = await fetch(`${API_BASE}/ebooks`, {
+    method: 'POST',
+    headers: createHeaders(),
+    body: JSON.stringify(data),
+  });
+  return handleResponse<Ebook>(response, 'Failed to create ebook');
+}
+
+export async function updateEbook(id: string, data: Partial<Ebook>): Promise<Ebook> {
+  const response = await fetch(`${API_BASE}/ebooks/${id}`, {
+    method: 'PUT',
+    headers: createHeaders(),
+    body: JSON.stringify(data),
+  });
+  return handleResponse<Ebook>(response, 'Failed to update ebook');
+}
+
+export async function deleteEbook(id: string): Promise<void> {
+  const response = await fetch(`${API_BASE}/ebooks/${id}`, {
+    method: 'DELETE',
+    headers: createHeaders(),
+  });
+  if (!response.ok) {
+    let message = 'Failed to delete ebook';
+    try {
+      const errorData = await response.json();
+      if (errorData.error) {
+        message = errorData.error;
+      }
+    } catch (e) {
+      // If we can't parse JSON, use the default message
+    }
+    showError(message);
+    throw new Error(message);
+  }
+}
+
+export async function fetchReadingProgress(ebookId: string): Promise<ReadingProgress> {
+  const response = await fetch(`${API_BASE}/ebooks/${ebookId}/progress`, {
+    headers: createHeaders(),
+  });
+  return handleResponse<ReadingProgress>(response, 'Failed to fetch reading progress');
+}
+
+export async function updateReadingProgress(ebookId: string, currentPage: number, totalPages?: number): Promise<ReadingProgress> {
+  const response = await fetch(`${API_BASE}/ebooks/${ebookId}/progress`, {
+    method: 'PUT',
+    headers: createHeaders(),
+    body: JSON.stringify({ current_page: currentPage, total_pages: totalPages }),
+  });
+  return handleResponse<ReadingProgress>(response, 'Failed to update reading progress');
+}

frontend/src/lib/assets/favicon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="107" height="128" viewBox="0 0 107 128"><title>svelte-logo</title><path d="M94.157 22.819c-10.4-14.885-30.94-19.297-45.792-9.835L22.282 29.608A29.92 29.92 0 0 0 8.764 49.65a31.5 31.5 0 0 0 3.108 20.231 30 30 0 0 0-4.477 11.183 31.9 31.9 0 0 0 5.448 24.116c10.402 14.887 30.942 19.297 45.791 9.835l26.083-16.624A29.92 29.92 0 0 0 98.235 78.35a31.53 31.53 0 0 0-3.105-20.232 30 30 0 0 0 4.474-11.182 31.88 31.88 0 0 0-5.447-24.116" style="fill:#ff3e00"/><path d="M45.817 106.582a20.72 20.72 0 0 1-22.237-8.243 19.17 19.17 0 0 1-3.277-14.503 18 18 0 0 1 .624-2.435l.49-1.498 1.337.981a33.6 33.6 0 0 0 10.203 5.098l.97.294-.09.968a5.85 5.85 0 0 0 1.052 3.878 6.24 6.24 0 0 0 6.695 2.485 5.8 5.8 0 0 0 1.603-.704L69.27 76.28a5.43 5.43 0 0 0 2.45-3.631 5.8 5.8 0 0 0-.987-4.371 6.24 6.24 0 0 0-6.698-2.487 5.7 5.7 0 0 0-1.6.704l-9.953 6.345a19 19 0 0 1-5.296 2.326 20.72 20.72 0 0 1-22.237-8.243 19.17 19.17 0 0 1-3.277-14.502 17.99 17.99 0 0 1 8.13-12.052l26.081-16.623a19 19 0 0 1 5.3-2.329 20.72 20.72 0 0 1 22.237 8.243 19.17 19.17 0 0 1 3.277 14.503 18 18 0 0 1-.624 2.435l-.49 1.498-1.337-.98a33.6 33.6 0 0 0-10.203-5.1l-.97-.294.09-.968a5.86 5.86 0 0 0-1.052-3.878 6.24 6.24 0 0 0-6.696-2.485 5.8 5.8 0 0 0-1.602.704L37.73 51.72a5.42 5.42 0 0 0-2.449 3.63 5.79 5.79 0 0 0 .986 4.372 6.24 6.24 0 0 0 6.698 2.486 5.8 5.8 0 0 0 1.602-.704l9.952-6.342a19 19 0 0 1 5.295-2.328 20.72 20.72 0 0 1 22.237 8.242 19.17 19.17 0 0 1 3.277 14.503 18 18 0 0 1-8.13 12.053l-26.081 16.622a19 19 0 0 1-5.3 2.328" style="fill:#fff"/></svg>

frontend/src/lib/auth.ts

@@ -0,0 +1,53 @@
+import { writable } from 'svelte/store';
+import type { User } from './api';
+
+export interface AuthState {
+  user: User | null;
+  token: string | null;
+  loading: boolean;
+}
+
+function createAuthStore() {
+  const initialState: AuthState = {
+    user: null,
+    token: null,
+    loading: true,
+  };
+
+  const { subscribe, set, update } = writable<AuthState>(initialState);
+
+  return {
+    subscribe,
+    login: (token: string, user: User) => {
+      if (typeof window !== 'undefined') {
+        localStorage.setItem('auth_token', token);
+      }
+      set({ user, token, loading: false });
+    },
+    logout: () => {
+      if (typeof window !== 'undefined') {
+        localStorage.removeItem('auth_token');
+      }
+      set({ user: null, token: null, loading: false });
+    },
+    setLoading: (loading: boolean) => {
+      update(state => ({ ...state, loading }));
+    },
+    initialize: () => {
+      if (typeof window !== 'undefined') {
+        const token = localStorage.getItem('auth_token');
+        if (token) {
+          // Token exists, but we need to validate it by fetching profile
+          // For now, just set loading to false and let components handle
+          set({ user: null, token, loading: false });
+        } else {
+          set({ user: null, token: null, loading: false });
+        }
+      } else {
+        set({ user: null, token: null, loading: false });
+      }
+    },
+  };
+}
+
+export const authStore = createAuthStore();

frontend/src/lib/index.ts

@@ -0,0 +1 @@
+// place files you want to import through the `$lib` alias in this folder.

frontend/src/lib/toast.ts

@@ -0,0 +1,21 @@
+import { toast } from '@zerodevx/svelte-toast';
+
+export function showError(message: string) {
+	toast.push(message, {
+		theme: {
+			'--toastBackground': '#f7768e',
+			'--toastBarBackground': '#f7768e',
+			'--toastColor': '#1a1b26',
+		}
+	});
+}
+
+export function showSuccess(message: string) {
+	toast.push(message, {
+		theme: {
+			'--toastBackground': '#9ece6a',
+			'--toastBarBackground': '#9ece6a',
+			'--toastColor': '#1a1b26',
+		}
+	});
+}

frontend/src/routes/+layout.svelte

@@ -0,0 +1,93 @@
+<script lang="ts">
+	import favicon from '$lib/assets/favicon.svg';
+	import { authStore } from '$lib/auth';
+	import { onMount } from 'svelte';
+	import { SvelteToast } from '@zerodevx/svelte-toast';
+	import '../app.css';
+
+	let { children } = $props();
+
+	// Initialize auth state on mount
+	onMount(() => {
+		authStore.initialize();
+	});
+
+	// Subscribe to auth state
+	let auth = $state({ user: null as any, token: null as string | null, loading: true });
+	authStore.subscribe((state) => {
+		auth = state;
+	});
+
+	function logout() {
+		authStore.logout();
+	}
+</script>
+
+<svelte:head>
+	<link rel="icon" href={favicon} />
+</svelte:head>
+
+{#if auth.loading}
+	<div class="min-h-screen flex items-center justify-center bg-gradient-to-br from-tokyo-bg to-tokyo-bg-dark">
+		<div class="text-center">
+			<div class="animate-spin rounded-full h-16 w-16 border-4 border-tokyo-bg-highlight border-t-tokyo-blue mx-auto mb-4"></div>
+			<p class="text-tokyo-fg-dark animate-pulse">Loading your library...</p>
+		</div>
+	</div>
+{:else if !auth.token}
+	<!-- Auth required -->
+	<div class="min-h-screen flex items-center justify-center bg-gradient-to-br from-tokyo-bg to-tokyo-bg-dark">
+		<div class="text-center animate-slide-in">
+			<div class="mb-8">
+				<h1 class="text-4xl font-bold text-tokyo-fg mb-2">📚 Ebook Reader</h1>
+				<p class="text-tokyo-fg-dark text-lg">Your personal digital library</p>
+			</div>
+			<div class="space-x-6">
+				<a
+					href="/login"
+					class="btn-primary inline-flex items-center text-sm font-medium shadow-lg hover:shadow-tokyo-purple/25"
+				>
+					Sign In
+				</a>
+				<a
+					href="/register"
+					class="btn-secondary inline-flex items-center text-sm font-medium"
+				>
+					Create Account
+				</a>
+			</div>
+			<div class="mt-12 text-tokyo-fg-dark text-sm">
+				<p>Organize • Read • Enjoy</p>
+			</div>
+		</div>
+	</div>
+{:else}
+	<!-- Authenticated user -->
+	<header class="bg-tokyo-bg-dark border-b border-tokyo-bg-highlight shadow-lg">
+		<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+			<div class="flex justify-between items-center py-4">
+				<div class="flex items-center space-x-4">
+					<h1 class="text-2xl font-bold text-tokyo-fg">📚 Ebook Reader</h1>
+					<span class="hidden sm:inline text-sm text-tokyo-fg-dark">•</span>
+					<span class="hidden sm:inline text-sm text-tokyo-fg-dark">Welcome back, {auth.user?.username}</span>
+				</div>
+				<div class="flex items-center space-x-4">
+					<span class="text-sm text-tokyo-fg">Hello, <span class="text-tokyo-cyan font-medium">{auth.user?.username}</span></span>
+					<button
+						onclick={logout}
+						class="btn-danger inline-flex items-center text-sm font-medium shadow-lg hover:shadow-tokyo-red/25 transition-all duration-200"
+					>
+						Sign Out
+					</button>
+				</div>
+			</div>
+		</div>
+	</header>
+
+	<main class="max-w-7xl mx-auto py-8 sm:px-6 lg:px-8 min-h-[calc(100vh-80px)]">
+		{@render children()}
+	</main>
+{/if}
+
+<!-- Toast notifications -->
+<SvelteToast />

frontend/src/routes/+page.svelte

@@ -0,0 +1,105 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { fetchEbooks, type Ebook } from '$lib/api';
+
+  let ebooks: Ebook[] = [];
+  let loading = true;
+  let error: string | null = null;
+
+  onMount(async () => {
+    try {
+      ebooks = await fetchEbooks();
+    } catch (err) {
+      error = err instanceof Error ? err.message : 'Failed to load ebooks';
+    } finally {
+      loading = false;
+    }
+  });
+</script>
+
+<main class="container mx-auto px-4 py-8">
+  <div class="mb-12 text-center">
+    <h1 class="text-4xl font-bold text-tokyo-fg mb-2 animate-fade-in">📚 Your Ebook Library</h1>
+    <p class="text-tokyo-fg-dark text-lg">Discover and organize your digital reading collection</p>
+  </div>
+
+  {#if loading}
+    <div class="flex flex-col items-center justify-center py-16">
+      <div class="animate-spin rounded-full h-12 w-12 border-4 border-tokyo-bg-highlight border-t-tokyo-cyan mb-4"></div>
+      <p class="text-tokyo-fg-dark animate-pulse">Loading your ebooks...</p>
+    </div>
+  {:else if error}
+    <div class="card max-w-md mx-auto text-center">
+      <div class="card-body">
+        <div class="text-4xl mb-4">⚠️</div>
+        <h3 class="text-xl font-semibold text-tokyo-red mb-2">Oops! Something went wrong</h3>
+        <p class="text-tokyo-fg-dark">{error}</p>
+      </div>
+    </div>
+  {:else if ebooks.length === 0}
+    <div class="card max-w-lg mx-auto text-center">
+      <div class="card-body">
+        <div class="text-6xl mb-4">📖</div>
+        <h3 class="text-2xl font-semibold text-tokyo-fg mb-2">Welcome to your library!</h3>
+        <p class="text-tokyo-fg-dark mb-6">You haven't added any ebooks yet. Start building your collection by uploading your favorite books.</p>
+        <button class="btn-primary">Add Your First Ebook</button>
+      </div>
+    </div>
+  {:else}
+    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
+      {#each ebooks as ebook (ebook.id)}
+        <div class="card group hover:scale-105 transition-all duration-300 animate-slide-in">
+          <div class="aspect-[3/4] bg-gradient-to-br from-tokyo-bg-highlight to-tokyo-bg-selection flex items-center justify-center relative overflow-hidden">
+            {#if ebook.cover_image_path}
+              <img
+                src={ebook.cover_image_path}
+                alt="{ebook.title} cover"
+                class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-300"
+              />
+              <div class="absolute inset-0 bg-gradient-to-t from-tokyo-bg-dark/50 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
+            {:else}
+              <div class="text-tokyo-fg-dark text-center p-6">
+                <div class="text-4xl mb-3">📚</div>
+                <div class="text-tokyo-fg text-sm font-medium">No Cover</div>
+              </div>
+            {/if}
+          </div>
+          <div class="card-body">
+            <h3 class="font-bold text-lg text-tokyo-fg mb-2 line-clamp-2 group-hover:text-tokyo-cyan transition-colors duration-200">
+              {ebook.title}
+            </h3>
+            {#if ebook.author}
+              <p class="text-tokyo-cyan text-sm mb-3 font-medium">by {ebook.author}</p>
+            {/if}
+            {#if ebook.description}
+              <p class="text-tokyo-fg-dark text-sm line-clamp-3 leading-relaxed">{ebook.description}</p>
+            {/if}
+            <div class="mt-4 pt-3 border-t border-tokyo-bg-highlight">
+              <div class="flex justify-between items-center text-xs text-tokyo-fg-dark">
+                <span>{new Date(ebook.created_at).toLocaleDateString()}</span>
+                {#if ebook.file_size}
+                  <span>{Math.round(ebook.file_size / 1024 / 1024)}MB</span>
+                {/if}
+              </div>
+            </div>
+          </div>
+        </div>
+      {/each}
+    </div>
+  {/if}
+</main>
+
+<style>
+  .line-clamp-2 {
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+  .line-clamp-3 {
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+</style>

frontend/src/routes/login/+page.svelte

@@ -0,0 +1,105 @@
+<script lang="ts">
+  import { authStore } from '$lib/auth';
+  import { loginUser } from '$lib/api';
+  import { goto } from '$app/navigation';
+
+  let username = '';
+  let password = '';
+  let loading = false;
+  let error = '';
+
+  async function handleSubmit() {
+    if (!username || !password) return;
+
+    loading = true;
+    error = '';
+
+    try {
+      const response = await loginUser(username, password);
+      authStore.login(response.token, response.user);
+      goto('/');
+    } catch (err) {
+      error = err instanceof Error ? err.message : 'Login failed';
+    } finally {
+      loading = false;
+    }
+  }
+</script>
+
+<svelte:head>
+  <title>Login - Ebook Reader</title>
+</svelte:head>
+
+<div class="min-h-screen flex items-center justify-center bg-gradient-to-br from-tokyo-bg to-tokyo-bg-dark py-12 px-4 sm:px-6 lg:px-8">
+  <div class="max-w-md w-full animate-slide-in">
+    <div class="card">
+      <div class="card-header text-center">
+        <div class="text-4xl mb-4">🔐</div>
+        <h2 class="text-2xl font-bold text-tokyo-fg">
+          Welcome Back
+        </h2>
+        <p class="text-tokyo-fg-dark mt-2">Sign in to access your library</p>
+      </div>
+      <div class="card-body">
+        <form class="space-y-6" on:submit|preventDefault={handleSubmit}>
+          <div class="space-y-4">
+            <div>
+              <label for="username" class="block text-sm font-medium text-tokyo-fg mb-2">
+                Username or Email
+              </label>
+              <input
+                id="username"
+                name="username"
+                type="text"
+                required
+                class="input-field w-full"
+                placeholder="Enter your username or email"
+                bind:value={username}
+              />
+            </div>
+            <div>
+              <label for="password" class="block text-sm font-medium text-tokyo-fg mb-2">
+                Password
+              </label>
+              <input
+                id="password"
+                name="password"
+                type="password"
+                required
+                class="input-field w-full"
+                placeholder="Enter your password"
+                bind:value={password}
+              />
+            </div>
+          </div>
+
+          {#if error}
+            <div class="bg-tokyo-red/10 border border-tokyo-red/20 rounded-lg p-4">
+              <div class="flex items-center">
+                <div class="text-tokyo-red mr-2">⚠️</div>
+                <div class="text-sm text-tokyo-red">{error}</div>
+              </div>
+            </div>
+          {/if}
+
+          <button
+            type="submit"
+            disabled={loading}
+            class="btn-primary w-full flex justify-center items-center disabled:opacity-50 disabled:cursor-not-allowed"
+          >
+            {#if loading}
+              <div class="animate-spin rounded-full h-4 w-4 border-2 border-white border-t-transparent mr-2"></div>
+            {/if}
+            {loading ? 'Signing in...' : 'Sign In'}
+          </button>
+
+          <div class="text-center">
+            <a href="/register" class="text-tokyo-blue hover:text-tokyo-cyan transition-colors duration-200 text-sm">
+              Don't have an account? Create one here
+            </a>
+          </div>
+        </form>
+      </div>
+    </div>
+  </div>
+</div>

frontend/src/routes/register/+page.server.ts

@@ -0,0 +1,38 @@
+import { superValidate } from 'sveltekit-superforms/server';
+import { z } from 'zod';
+import { registerUser } from '$lib/api';
+import { redirect, fail } from '@sveltejs/kit';
+
+const schema = z.object({
+  email: z.string().email('Invalid email address'),
+  username: z.string().min(3, 'Username must be at least 3 characters'),
+  password: z.string().min(8, 'Password must be at least 8 characters').regex(/^(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/, 'Password must include at least one uppercase letter, one number, and one symbol'),
+  confirmPassword: z.string(),
+}).refine(data => data.password === data.confirmPassword, {
+  message: "Passwords do not match",
+  path: ["confirmPassword"],
+});
+
+type FormData = z.infer<typeof schema>;
+
+export const load = async () => {
+  const form = await superValidate(schema);
+  return { form };
+};
+
+export const actions = {
+  default: async ({ request }) => {
+    const form = await superValidate(request, schema);
+    if (!form.valid) {
+      return fail(400, { form });
+    }
+    const data = form.data as FormData;
+    try {
+      await registerUser(data.email, data.username, data.password);
+      throw redirect(302, '/login');
+    } catch (err) {
+      if (err instanceof Response) throw err;
+      return fail(500, { form, error: err instanceof Error ? err.message : 'Registration failed' });
+    }
+  },
+};

frontend/src/routes/register/+page.svelte

@@ -0,0 +1,124 @@
+<script lang="ts">
+  import { superForm } from 'sveltekit-superforms';
+  import { page } from '$app/stores';
+
+  let { form, errors, enhance, submitting } = superForm($page.data.form);
+</script>
+
+<svelte:head>
+  <title>Register - Ebook Reader</title>
+</svelte:head>
+
+<div class="min-h-screen flex items-center justify-center bg-gradient-to-br from-tokyo-bg to-tokyo-bg-dark py-12 px-4 sm:px-6 lg:px-8">
+  <div class="max-w-md w-full animate-slide-in">
+    <div class="card">
+      <div class="card-header text-center">
+        <div class="text-4xl mb-4">✨</div>
+        <h2 class="text-2xl font-bold text-tokyo-fg">
+          Join Our Library
+        </h2>
+        <p class="text-tokyo-fg-dark mt-2">Create your account to start reading</p>
+      </div>
+      <div class="card-body">
+        <form class="space-y-6" method="POST" use:enhance>
+          <div class="space-y-4">
+            <div>
+              <label for="email" class="block text-sm font-medium text-tokyo-fg mb-2">
+                Email Address
+              </label>
+              <input
+                id="email"
+                name="email"
+                type="email"
+                required
+                class="input-field w-full"
+                placeholder="Enter your email"
+                bind:value={$form.email}
+              />
+              {#if $errors.email}
+                <p class="text-tokyo-red text-sm mt-1">{$errors.email}</p>
+              {/if}
+            </div>
+            <div>
+              <label for="username" class="block text-sm font-medium text-tokyo-fg mb-2">
+                Username
+              </label>
+              <input
+                id="username"
+                name="username"
+                type="text"
+                required
+                class="input-field w-full"
+                placeholder="Choose a username"
+                bind:value={$form.username}
+              />
+              {#if $errors.username}
+                <p class="text-tokyo-red text-sm mt-1">{$errors.username}</p>
+              {/if}
+            </div>
+            <div>
+              <label for="password" class="block text-sm font-medium text-tokyo-fg mb-2">
+                Password
+              </label>
+              <input
+                id="password"
+                name="password"
+                type="password"
+                required
+                class="input-field w-full"
+                placeholder="Create a password"
+                bind:value={$form.password}
+              />
+              {#if $errors.password}
+                <p class="text-tokyo-red text-sm mt-1">{$errors.password}</p>
+              {/if}
+            </div>
+            <div>
+              <label for="confirmPassword" class="block text-sm font-medium text-tokyo-fg mb-2">
+                Confirm Password
+              </label>
+              <input
+                id="confirmPassword"
+                name="confirmPassword"
+                type="password"
+                required
+                class="input-field w-full"
+                placeholder="Confirm your password"
+                bind:value={$form.confirmPassword}
+              />
+              {#if $errors.confirmPassword}
+                <p class="text-tokyo-red text-sm mt-1">{$errors.confirmPassword}</p>
+              {/if}
+            </div>
+          </div>
+
+          {#if $page.data.error}
+            <div class="bg-tokyo-red/10 border border-tokyo-red/20 rounded-lg p-4">
+              <div class="flex items-center">
+                <div class="text-tokyo-red mr-2">⚠️</div>
+                <div class="text-sm text-tokyo-red">{$page.data.error}</div>
+              </div>
+            </div>
+          {/if}
+
+          <button
+            type="submit"
+            disabled={$submitting}
+            class="btn-primary w-full flex justify-center items-center disabled:opacity-50 disabled:cursor-not-allowed"
+          >
+            {#if $submitting}
+              <div class="animate-spin rounded-full h-4 w-4 border-2 border-white border-t-transparent mr-2"></div>
+            {/if}
+            {$submitting ? 'Creating account...' : 'Create Account'}
+          </button>
+
+          <div class="text-center">
+            <a href="/login" class="text-tokyo-blue hover:text-tokyo-cyan transition-colors duration-200 text-sm">
+              Already have an account? Sign in here
+            </a>
+          </div>
+        </form>
+      </div>
+    </div>
+  </div>
+</div>

frontend/static/robots.txt

@@ -0,0 +1,3 @@
+# allow crawling everything by default
+User-agent: *
+Disallow:

frontend/svelte.config.js

@@ -0,0 +1,16 @@
+import adapter from '@sveltejs/adapter-static';
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+	kit: {
+		adapter: adapter({
+			pages: 'build',
+			assets: 'build',
+			fallback: 'index.html',
+			precompress: false,
+			strict: true
+		})
+	}
+};
+
+export default config;

frontend/tailwind.config.js

@@ -0,0 +1,45 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ['./src/**/*.{html,js,svelte,ts}'],
+  theme: {
+    extend: {
+      colors: {
+        tokyo: {
+          bg: '#1a1b26',
+          'bg-dark': '#16161e',
+          'bg-highlight': '#292e42',
+          'bg-selection': '#364a82',
+          fg: '#a9b1d6',
+          'fg-dark': '#565f89',
+          'fg-light': '#c0caf5',
+          red: '#f7768e',
+          orange: '#ff9e64',
+          yellow: '#e0af68',
+          green: '#9ece6a',
+          cyan: '#7dcfff',
+          blue: '#7aa2f7',
+          purple: '#bb9af7',
+          magenta: '#c0caf5',
+        },
+      },
+      fontFamily: {
+        sans: ['Inter', 'system-ui', 'sans-serif'],
+      },
+      animation: {
+        'fade-in': 'fadeIn 0.5s ease-in-out',
+        'slide-in': 'slideIn 0.3s ease-out',
+      },
+      keyframes: {
+        fadeIn: {
+          '0%': { opacity: '0' },
+          '100%': { opacity: '1' },
+        },
+        slideIn: {
+          '0%': { transform: 'translateY(-10px)', opacity: '0' },
+          '100%': { transform: 'translateY(0)', opacity: '1' },
+        },
+      },
+    },
+  },
+  plugins: [],
+}

frontend/tsconfig.json

@@ -0,0 +1,20 @@
+{
+	"extends": "./.svelte-kit/tsconfig.json",
+	"compilerOptions": {
+		"rewriteRelativeImportExtensions": true,
+		"allowJs": true,
+		"checkJs": true,
+		"esModuleInterop": true,
+		"forceConsistentCasingInFileNames": true,
+		"resolveJsonModule": true,
+		"skipLibCheck": true,
+		"sourceMap": true,
+		"strict": true,
+		"moduleResolution": "bundler"
+	}
+	// Path aliases are handled by https://svelte.dev/docs/kit/configuration#alias
+	// except $lib which is handled by https://svelte.dev/docs/kit/configuration#files
+	//
+	// To make changes to top-level options such as include and exclude, we recommend extending
+	// the generated config; see https://svelte.dev/docs/kit/configuration#typescript
+}

frontend/vite.config.ts

@@ -0,0 +1,6 @@
+import { sveltekit } from '@sveltejs/kit/vite';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+	plugins: [sveltekit()]
+});