This commit is contained in:
Bryce
2025-08-03 22:52:09 -07:00
parent 4fc595414e
commit 34d2913165
8 changed files with 338 additions and 321 deletions

View File

@@ -0,0 +1,18 @@
<!DOCTYPE html>
<html lang="en" data-theme="cupcake">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %}Email Organizer - Authentication{% endblock %}</title>
<script src="https://unpkg.com/htmx.org@1.9.12"></script>
<link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css" />
<link href="https://cdn.jsdelivr.net/npm/daisyui@5/themes.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
{% block head %}{% endblock %}
</head>
<body class="min-h-screen bg-base-200 flex items-center justify-center p-4">
{% block content %}{% endblock %}
</body>
</html>

View File

@@ -1,18 +1,9 @@
<!DOCTYPE html>
<html lang="en" data-theme="cupcake">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login - Email Organizer</title>
<script src="https://unpkg.com/htmx.org@1.9.12"></script>
<link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css" />
<link href="https://cdn.jsdelivr.net/npm/daisyui@5/themes.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
</head>
<body class="min-h-screen bg-base-200 flex items-center justify-center p-4">
<div class="card bg-base-100 shadow-xl w-full max-w-sm">
{% extends "auth/auth_base.html" %}
{% block title %}Login - Email Organizer{% endblock %}
{% block content %}
<div class="card bg-base-100 shadow-xl w-full max-w-sm">
<div class="card-body p-6">
<div class="text-center mb-6">
<h1 class="text-2xl font-bold text-primary">
@@ -67,6 +58,5 @@
</p>
</div>
</div>
</div>
</body>
</html>
</div>
{% endblock %}

View File

@@ -1,18 +1,9 @@
<!DOCTYPE html>
<html lang="en" data-theme="cupcake">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Create Account - Email Organizer</title>
<script src="https://unpkg.com/htmx.org@1.9.12"></script>
<link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css" />
<link href="https://cdn.jsdelivr.net/npm/daisyui@5/themes.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
</head>
<body class="min-h-screen bg-base-200 flex items-center justify-center p-4">
<div class="card bg-base-100 shadow-xl w-full max-w-md">
{% extends "auth/auth_base.html" %}
{% block title %}Create Account - Email Organizer{% endblock %}
{% block content %}
<div class="card bg-base-100 shadow-xl w-full max-w-md">
<div class="card-body p-6 max-w-sm">
<div class="text-center mb-6">
<h1 class="text-2xl font-bold text-primary">
@@ -120,6 +111,5 @@
</p>
</div>
</div>
</div>
</body>
</html>
</div>
{% endblock %}

33
app/templates/base.html Normal file
View File

@@ -0,0 +1,33 @@
<!DOCTYPE html>
<html lang="en" data-theme="cupcake">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %}Email Organizer - Prototype{% endblock %}</title>
<script src="https://unpkg.com/htmx.org@1.9.12"></script>
<link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css" />
<link href="https://cdn.jsdelivr.net/npm/daisyui@5/themes.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<style>
@keyframes shake {
0%, 100% { transform: translateX(0); }
10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
20%, 40%, 60%, 80% { transform: translateX(5px); }
}
.shake {
animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
}
</style>
{% block head %}{% endblock %}
</head>
<body class="min-h-screen flex flex-col" x-data="{}" x-on:open-modal.window="$refs.modal.showModal()"
x-on:close-modal.window="$refs.modal.close()">
{% block header %}{% endblock %}
{% block content %}{% endblock %}
{% block modal %}{% endblock %}
</body>
</html>

View File

@@ -1,110 +1,14 @@
<!DOCTYPE html>
<html lang="en" data-theme="cupcake">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Email Organizer - Prototype</title>
<script src="https://unpkg.com/htmx.org@1.9.12"></script>
<link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css" />
<link href="https://cdn.jsdelivr.net/npm/daisyui@5/themes.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<style>
@keyframes shake {
0%, 100% { transform: translateX(0); }
10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
20%, 40%, 60%, 80% { transform: translateX(5px); }
}
.shake {
animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
}
</style>
</head>
<body class="min-h-screen flex flex-col" x-data="{}" x-on:open-modal.window="$refs.modal.showModal()"
x-on:close-modal.window="$refs.modal.close()">
<header class="bg-base-100 border-b border-base-300 p-4 flex justify-between shadow-sm fixed top-0 left-0 right-0 z-20">
<div>
<h1 class="text-2xl font-bold text-primary flex items-center">
<i class="fas fa-envelope mr-2"></i>
Email Organizer
</h1>
<p class="text-sm mt-1 text-base-content/70">AI-powered email organization</p>
</div>
{% extends "base.html" %}
<div class="flex items-center space-x-4">
<button class="relative p-2 rounded-full hover:bg-base-300 btn-circle">
<i class="fas fa-bell"></i>
<span class="badge badge-sm badge-secondary absolute -top-1 -right-1">3</span>
</button>
{% block title %}Email Organizer - Prototype{% endblock %}
<div class="relative" x-data="{ open: false }" @click.outside="open = false">
<button id="user-menu-button" class="flex items-center space-x-2 p-2 rounded-lg hover:bg-base-300"
@click="open = !open">
<div class="w-8 h-8 rounded-full bg-primary flex items-center justify-center">
<span class="font-semibold text-primary-content">{{ current_user.first_name[0] }}{{
current_user.last_name[0] }}</span>
</div>
<span class="hidden md:inline">{{ current_user.first_name }} {{ current_user.last_name }}</span>
<i class="fas fa-chevron-down"></i>
</button>
{% block header %}
{% include "partials/header.html" %}
{% endblock %}
<!-- User Dropdown -->
<div id="user-dropdown"
class="user-dropdown absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1 bg-base-100 z-10"
x-show="open">
<a href="#" class="block px-4 py-2 text-sm hover:bg-base-300">Profile</a>
<a href="#" class="block px-4 py-2 text-sm hover:bg-base-300">Settings</a>
<a href="{{ url_for('auth.logout') }}" class="block px-4 py-2 text-sm hover:bg-base-300">Logout</a>
</div>
</div>
</div>
</header>
<div class="flex">
<div class="sidebar w-64 p-4 flex flex-col bg-base-200 shadow-lg fixed top-16 left-0 bottom-0 z-10">
<nav class="flex-grow menu bg-transparent rounded-lg">
<div class="active">
<a class="btn btn-ghost justify-start">
<i class="fas fa-folder mr-3 text-primary"></i>
Folders
</a>
</div>
<div>
<a class="btn btn-ghost justify-start">
<i class="fas fa-inbox mr-3 text-secondary"></i>
Inbox
</a>
</div>
<div>
<a class="btn btn-ghost justify-start">
<i class="fas fa-cog mr-3 text-accent"></i>
Settings
</a>
</div>
<div>
<a class="btn btn-ghost justify-start">
<i class="fas fa-chart-bar mr-3 text-info"></i>
Analytics
</a>
</div>
<div>
<a class="btn btn-ghost justify-start">
<i class="fas fa-question-circle mr-3 text-warning"></i>
Help
</a>
</div>
</nav>
<div class="mt-auto pt-4 border-t border-base-300">
<div>
<a href="{{ url_for('auth.logout') }}" class="btn btn-ghost justify-start">
<i class="fas fa-sign-out-alt mr-3 text-error"></i>
Logout
</a>
</div>
</div>
</div>
{% block content %}
<div class="flex">
{% include "partials/sidebar.html" %}
<!-- Main Content -->
<div class="flex-1 ml-64 mt-16 flex flex-col">
@@ -129,12 +33,9 @@
</section>
</main>
</div>
</div>
<!-- Modal Holder -->
<dialog id="modal-holder" x-ref="modal" class="modal">
<!-- Modals will be loaded here via HTMX -->
</dialog>
</div>
{% endblock %}
</body>
</html>
{% block modal %}
{% include "partials/modal_holder.html" %}
{% endblock %}

View File

@@ -0,0 +1,37 @@
<header class="bg-base-100 border-b border-base-300 p-4 flex justify-between shadow-sm fixed top-0 left-0 right-0 z-20">
<div>
<h1 class="text-2xl font-bold text-primary flex items-center">
<i class="fas fa-envelope mr-2"></i>
Email Organizer
</h1>
<p class="text-sm mt-1 text-base-content/70">AI-powered email organization</p>
</div>
<div class="flex items-center space-x-4">
<button class="relative p-2 rounded-full hover:bg-base-300 btn-circle">
<i class="fas fa-bell"></i>
<span class="badge badge-sm badge-secondary absolute -top-1 -right-1">3</span>
</button>
<div class="relative" x-data="{ open: false }" @click.outside="open = false">
<button id="user-menu-button" class="flex items-center space-x-2 p-2 rounded-lg hover:bg-base-300"
@click="open = !open">
<div class="w-8 h-8 rounded-full bg-primary flex items-center justify-center">
<span class="font-semibold text-primary-content">{{ current_user.first_name[0] }}{{
current_user.last_name[0] }}</span>
</div>
<span class="hidden md:inline">{{ current_user.first_name }} {{ current_user.last_name }}</span>
<i class="fas fa-chevron-down"></i>
</button>
<!-- User Dropdown -->
<div id="user-dropdown"
class="user-dropdown absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1 bg-base-100 z-10"
x-show="open">
<a href="#" class="block px-4 py-2 text-sm hover:bg-base-300">Profile</a>
<a href="#" class="block px-4 py-2 text-sm hover:bg-base-300">Settings</a>
<a href="{{ url_for('auth.logout') }}" class="block px-4 py-2 text-sm hover:bg-base-300">Logout</a>
</div>
</div>
</div>
</header>

View File

@@ -0,0 +1,4 @@
<!-- Modal Holder -->
<dialog id="modal-holder" x-ref="modal" class="modal">
<!-- Modals will be loaded here via HTMX -->
</dialog>

View File

@@ -0,0 +1,44 @@
<div class="sidebar w-64 p-4 flex flex-col bg-base-200 shadow-lg fixed top-16 left-0 bottom-0 z-10">
<nav class="flex-grow menu bg-transparent rounded-lg">
<div class="active">
<a class="btn btn-ghost justify-start">
<i class="fas fa-folder mr-3 text-primary"></i>
Folders
</a>
</div>
<div>
<a class="btn btn-ghost justify-start">
<i class="fas fa-inbox mr-3 text-secondary"></i>
Inbox
</a>
</div>
<div>
<a class="btn btn-ghost justify-start">
<i class="fas fa-cog mr-3 text-accent"></i>
Settings
</a>
</div>
<div>
<a class="btn btn-ghost justify-start">
<i class="fas fa-chart-bar mr-3 text-info"></i>
Analytics
</a>
</div>
<div>
<a class="btn btn-ghost justify-start">
<i class="fas fa-question-circle mr-3 text-warning"></i>
Help
</a>
</div>
</nav>
<div class="mt-auto pt-4 border-t border-base-300">
<div>
<a href="{{ url_for('auth.logout') }}" class="btn btn-ghost justify-start">
<i class="fas fa-sign-out-alt mr-3 text-error"></i>
Logout
</a>
</div>
</div>
</div>