197 lines
8.5 KiB
HTML
197 lines
8.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<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 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>
|
|
<script>
|
|
tailwind.config = {
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
primary: '#8B5CF6', /* Purple 500 */
|
|
secondary: '#A78BFA', /* Purple 400 */
|
|
accent: '#C4B5FD', /* Purple 300 */
|
|
background: '#0F172A', /* Slate 900 */
|
|
surface: '#1E293B', /* Slate 800 */
|
|
text: '#F1F5F9', /* Slate 100 */
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style>
|
|
body {
|
|
background-color: #0F172A; /* background */
|
|
color: #F1F5F9; /* text */
|
|
font-family: 'Inter', sans-serif;
|
|
}
|
|
.sidebar {
|
|
background-color: #1E293B; /* surface */
|
|
border-right: 1px solid #334155; /* slate 700 */
|
|
}
|
|
.card {
|
|
background-color: #1E293B; /* surface */
|
|
border: 1px solid #334155; /* slate 700 */
|
|
}
|
|
/* Using DaisyUI classes instead of custom CSS */
|
|
.user-dropdown {
|
|
background-color: #1E293B; /* surface */
|
|
border: 1px solid #334155; /* slate 700 */
|
|
}
|
|
.modal-box {
|
|
background-color: #1E293B; /* surface */
|
|
border: 1px solid #334155; /* slate 700 */
|
|
}
|
|
.notification-badge {
|
|
background-color: #F87171; /* red 400 */
|
|
border-radius: 50%;
|
|
font-size: 0.75rem;
|
|
padding: 0.125rem 0.375rem;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="min-h-screen flex" x-data @open-add-folder-modal.window="document.getElementById('add-folder-modal').showModal()">
|
|
<!-- Sidebar -->
|
|
<div class="sidebar w-64 min-h-screen p-4 flex flex-col">
|
|
<div class="mb-8">
|
|
<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-secondary text-sm mt-1">AI-powered email organization</p>
|
|
</div>
|
|
|
|
<nav class="flex-grow menu bg-transparent">
|
|
<div class="active">
|
|
<a class="btn btn-ghost justify-start">
|
|
<i class="fas fa-folder mr-3"></i>
|
|
Folders
|
|
</a>
|
|
</div>
|
|
<div>
|
|
<a class="btn btn-ghost justify-start">
|
|
<i class="fas fa-inbox mr-3"></i>
|
|
Inbox
|
|
</a>
|
|
</div>
|
|
<div>
|
|
<a class="btn btn-ghost justify-start">
|
|
<i class="fas fa-cog mr-3"></i>
|
|
Settings
|
|
</a>
|
|
</div>
|
|
<div>
|
|
<a class="btn btn-ghost justify-start">
|
|
<i class="fas fa-chart-bar mr-3"></i>
|
|
Analytics
|
|
</a>
|
|
</div>
|
|
<div>
|
|
<a class="btn btn-ghost justify-start">
|
|
<i class="fas fa-question-circle mr-3"></i>
|
|
Help
|
|
</a>
|
|
</div>
|
|
</nav>
|
|
|
|
<div class="mt-auto pt-4 border-t border-slate-700">
|
|
<div>
|
|
<a class="btn btn-ghost justify-start">
|
|
<i class="fas fa-sign-out-alt mr-3"></i>
|
|
Logout
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Main Content -->
|
|
<div class="flex-1 flex flex-col">
|
|
<!-- Top Bar -->
|
|
<header class="border-b border-slate-700 p-4 flex justify-between items-center">
|
|
<div>
|
|
<h2 class="text-xl font-semibold">Folders</h2>
|
|
<p class="text-secondary text-sm">Manage your email organization rules</p>
|
|
</div>
|
|
|
|
<div class="flex items-center space-x-4">
|
|
<button class="relative p-2 rounded-full hover:bg-slate-700">
|
|
<i class="fas fa-bell"></i>
|
|
<span class="notification-badge absolute top-0 right-0">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-slate-700" @click="open = !open">
|
|
<div class="w-8 h-8 rounded-full bg-primary flex items-center justify-center">
|
|
<span class="font-semibold">U</span>
|
|
</div>
|
|
<span>User 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" x-show="open">
|
|
<a href="#" class="block px-4 py-2 text-sm hover:bg-slate-700">Profile</a>
|
|
<a href="#" class="block px-4 py-2 text-sm hover:bg-slate-700">Settings</a>
|
|
<a href="#" class="block px-4 py-2 text-sm hover:bg-slate-700">Logout</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Main Content Area -->
|
|
<main class="flex-1 p-6 overflow-auto">
|
|
<div class="flex justify-between items-center mb-6">
|
|
<div>
|
|
<h2 class="text-2xl font-semibold">Email Folders</h2>
|
|
<p class="text-secondary">Create and manage your email organization rules</p>
|
|
</div>
|
|
<button class="btn btn-primary" onclick="document.getElementById('add-folder-modal').showModal()">
|
|
<i class="fas fa-plus mr-2"></i>
|
|
Add Folder
|
|
</button>
|
|
</div>
|
|
|
|
<section id="folders-list" class="mb-12">
|
|
{% include 'partials/folders_list.html' %}
|
|
</section>
|
|
</main>
|
|
</div>
|
|
|
|
<!-- Add Folder Modal -->
|
|
<dialog id="add-folder-modal" class="modal">
|
|
<div class="modal-box">
|
|
<h3 class="font-bold text-lg mb-4">Add New Folder</h3>
|
|
<form id="add-folder-form" hx-post="/api/folders" hx-target="#folders-list" hx-swap="innerHTML" hx-on:htmx:after-request="document.getElementById('add-folder-modal').close(); document.getElementById('add-folder-form').reset();">
|
|
<div class="mb-4">
|
|
<label for="folder-name" class="block text-sm font-medium mb-1">Name</label>
|
|
<input type="text" id="folder-name" name="name" class="input input-bordered w-full" placeholder="e.g., Work, Personal, Newsletters" required>
|
|
</div>
|
|
<div class="mb-4">
|
|
<label for="folder-rule" class="block text-sm font-medium mb-1">Rule (Natural Language)</label>
|
|
<textarea id="folder-rule" name="rule_text" class="textarea textarea-bordered w-full h-24" placeholder="e.g., Move emails from 'newsletter@company.com' to this folder" required></textarea>
|
|
</div>
|
|
<div class="mb-4">
|
|
<label for="folder-priority" class="block text-sm font-medium mb-1">Priority</label>
|
|
<select id="folder-priority" name="priority" class="select select-bordered w-full">
|
|
<option value="1">High</option>
|
|
<option value="0" selected>Normal</option>
|
|
<option value="-1">Low</option>
|
|
</select>
|
|
</div>
|
|
<div class="modal-action">
|
|
<button type="button" class="btn btn-outline" onclick="document.getElementById('add-folder-modal').close()">Cancel</button>
|
|
<button type="submit" class="btn btn-primary">Add Folder</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</dialog>
|
|
|
|
</body>
|
|
</html>
|