mirror of
https://github.com/thecyberlearn/victor-ai.git
synced 2026-08-18 12:33:04 +00:00
253 lines
11 KiB
HTML
253 lines
11 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 Agent - AI Email Management</title>
|
|
|
|
<!-- External Dependencies -->
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
|
|
|
|
<!-- Your Custom Files -->
|
|
<link rel="stylesheet" href="assets/css/styles.css">
|
|
</head>
|
|
|
|
<body>
|
|
<!-- Navigation Header -->
|
|
<nav class="bg-white shadow-sm border-b sticky top-0 z-50">
|
|
<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 gap-3">
|
|
<button onclick="goHome()" class="w-10 h-10 bg-indigo-100 rounded-lg flex items-center justify-center hover:bg-indigo-200 transition-colors">
|
|
<i class="fas fa-home text-indigo-600"></i>
|
|
</button>
|
|
<div class="w-10 h-10 bg-blue-600 rounded-xl flex items-center justify-center shadow-lg">
|
|
<i class="fas fa-envelope text-white text-lg"></i>
|
|
</div>
|
|
<div>
|
|
<h1 class="text-lg font-bold text-gray-800">Email Agent</h1>
|
|
<p class="text-sm text-gray-500">AI Email Management</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="hidden md:flex items-center gap-6">
|
|
<div class="text-right">
|
|
<p class="text-sm text-gray-500">Last sync</p>
|
|
<p class="font-semibold text-gray-800" id="lastSync">Just now</p>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<div class="w-2 h-2 bg-green-400 rounded-full animate-pulse"></div>
|
|
<span class="text-sm text-green-600 font-medium">Online</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Main Content -->
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6 bg-gray-50 min-h-screen">
|
|
|
|
<!-- Header Section -->
|
|
<div class="text-center mb-8">
|
|
<h1 class="text-3xl lg:text-4xl font-bold text-gray-800 mb-4">AI Email Management</h1>
|
|
</div>
|
|
|
|
<!-- Email Search & Filter -->
|
|
<div class="bg-white rounded-2xl p-6 mb-8 shadow-lg border border-gray-200">
|
|
<div class="flex items-center gap-3 mb-4">
|
|
<div class="w-10 h-10 bg-blue-600 rounded-lg flex items-center justify-center">
|
|
<i class="fas fa-search text-white"></i>
|
|
</div>
|
|
<h2 class="text-xl font-bold text-gray-800">Email Summary Search</h2>
|
|
</div>
|
|
|
|
<div class="flex flex-col sm:flex-row gap-3 mb-4">
|
|
<div class="flex-1">
|
|
<input
|
|
id="searchQuery"
|
|
type="text"
|
|
placeholder="Search emails by subject, sender, or content..."
|
|
class="w-full px-4 py-3 rounded-xl border border-gray-300 bg-white text-gray-800 placeholder-gray-500 focus:border-blue-400 focus:ring-2 focus:ring-blue-400/50 outline-none transition-all"
|
|
/>
|
|
</div>
|
|
<button
|
|
onclick="searchEmails()"
|
|
class="w-full sm:w-auto bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-xl font-semibold transition-all flex items-center justify-center gap-2 min-w-[120px]"
|
|
id="searchBtn"
|
|
>
|
|
<i class="fas fa-search"></i>
|
|
<span>Search</span>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Filter Buttons -->
|
|
<div class="flex flex-wrap gap-2">
|
|
<span class="text-sm text-gray-500 mr-2">Filter by:</span>
|
|
<button onclick="filterEmails('all')" class="filter-btn active text-xs bg-blue-100 hover:bg-blue-200 text-blue-700 px-3 py-1 rounded-full transition-colors" data-filter="all">
|
|
All Items
|
|
</button>
|
|
<button onclick="filterEmails('email')" class="filter-btn text-xs bg-gray-100 hover:bg-gray-200 text-gray-700 px-3 py-1 rounded-full transition-colors" data-filter="email">
|
|
<i class="fas fa-envelope mr-1"></i>Emails
|
|
</button>
|
|
<button onclick="filterEmails('pdf')" class="filter-btn text-xs bg-gray-100 hover:bg-gray-200 text-gray-700 px-3 py-1 rounded-full transition-colors" data-filter="pdf">
|
|
<i class="fas fa-file-pdf mr-1"></i>PDFs
|
|
</button>
|
|
<button onclick="filterEmails('image')" class="filter-btn text-xs bg-gray-100 hover:bg-gray-200 text-gray-700 px-3 py-1 rounded-full transition-colors" data-filter="image">
|
|
<i class="fas fa-image mr-1"></i>Images
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Stats Dashboard -->
|
|
<div class="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
|
|
<div class="bg-white rounded-xl p-4 shadow-lg border border-gray-200">
|
|
<div class="text-center">
|
|
<div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center mx-auto mb-2">
|
|
<i class="fas fa-envelope text-blue-600"></i>
|
|
</div>
|
|
<div class="text-2xl font-bold text-gray-800" id="totalCount">0</div>
|
|
<div class="text-sm text-gray-500">Total Items</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-white rounded-xl p-4 shadow-lg border border-gray-200">
|
|
<div class="text-center">
|
|
<div class="w-10 h-10 bg-orange-100 rounded-lg flex items-center justify-center mx-auto mb-2">
|
|
<i class="fas fa-exclamation-triangle text-orange-600"></i>
|
|
</div>
|
|
<div class="text-2xl font-bold text-gray-800" id="priorityCount">0</div>
|
|
<div class="text-sm text-gray-500">High Priority</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-white rounded-xl p-4 shadow-lg border border-gray-200">
|
|
<div class="text-center">
|
|
<div class="w-10 h-10 bg-green-100 rounded-lg flex items-center justify-center mx-auto mb-2">
|
|
<i class="fas fa-check-circle text-green-600"></i>
|
|
</div>
|
|
<div class="text-2xl font-bold text-gray-800" id="processedCount">0</div>
|
|
<div class="text-sm text-gray-500">Processed</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-white rounded-xl p-4 shadow-lg border border-gray-200">
|
|
<div class="text-center">
|
|
<div class="w-10 h-10 bg-purple-100 rounded-lg flex items-center justify-center mx-auto mb-2">
|
|
<i class="fas fa-robot text-purple-600"></i>
|
|
</div>
|
|
<div class="text-2xl font-bold text-gray-800" id="aiActionsCount">0</div>
|
|
<div class="text-sm text-gray-500">AI Analyzed</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Main Email Interface -->
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
|
|
|
<!-- Email List -->
|
|
<div class="lg:col-span-2">
|
|
<div class="bg-white rounded-2xl p-6 shadow-lg border border-gray-200">
|
|
<div class="flex items-center justify-between mb-6">
|
|
<h3 class="text-xl font-bold text-gray-800">Summarised Emails</h3>
|
|
<div class="flex items-center gap-2">
|
|
<button onclick="refreshEmails()" class="p-2 bg-gray-100 rounded-lg hover:bg-gray-200 transition-colors" title="Refresh">
|
|
<i class="fas fa-sync-alt text-gray-600"></i>
|
|
</button>
|
|
<button onclick="exportEmails()" class="text-sm bg-gray-100 hover:bg-gray-200 text-gray-700 px-3 py-2 rounded-lg transition-colors flex items-center gap-2" title="Export">
|
|
<i class="fas fa-download text-xs"></i>
|
|
Export
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Loading State -->
|
|
<div id="loadingState" class="hidden">
|
|
<div class="space-y-3">
|
|
<div class="loading-skeleton rounded-lg p-4 h-20"></div>
|
|
<div class="loading-skeleton rounded-lg p-4 h-20"></div>
|
|
<div class="loading-skeleton rounded-lg p-4 h-20"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Email List Container -->
|
|
<div id="emailList" class="space-y-3 custom-scrollbar max-h-96 overflow-y-auto">
|
|
<!-- Emails will be loaded here -->
|
|
</div>
|
|
|
|
<!-- Empty State -->
|
|
<div id="emptyState" class="text-center py-12">
|
|
<div class="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
|
<i class="fas fa-inbox text-gray-400 text-2xl"></i>
|
|
</div>
|
|
<h3 class="text-lg font-semibold text-gray-600 mb-2">No emails found</h3>
|
|
<p class="text-gray-500">Your processed emails will appear here</p>
|
|
<button onclick="loadEmails()" class="mt-4 bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg transition-colors">
|
|
Load Emails
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- AI Actions Panel -->
|
|
<div class="space-y-6">
|
|
|
|
<!-- Quick Actions -->
|
|
<div class="bg-white rounded-2xl p-6 shadow-lg border border-gray-200">
|
|
<h3 class="text-lg font-bold text-gray-800 mb-4">Quick Actions</h3>
|
|
<div class="space-y-3">
|
|
<button onclick="loadEmails()" class="w-full p-3 bg-blue-600 hover:bg-blue-700 rounded-lg text-white font-medium transition-colors flex items-center gap-3">
|
|
<i class="fas fa-refresh"></i>
|
|
<span>Refresh Emails</span>
|
|
</button>
|
|
<button onclick="filterEmails('email')" class="w-full p-3 bg-green-600 hover:bg-green-700 rounded-lg text-white font-medium transition-colors flex items-center gap-3">
|
|
<i class="fas fa-envelope"></i>
|
|
<span>Show Emails Only</span>
|
|
</button>
|
|
<button onclick="filterEmails('pdf')" class="w-full p-3 bg-red-600 hover:bg-red-700 rounded-lg text-white font-medium transition-colors flex items-center gap-3">
|
|
<i class="fas fa-file-pdf"></i>
|
|
<span>Show PDFs Only</span>
|
|
</button>
|
|
<button onclick="filterEmails('image')" class="w-full p-3 bg-purple-600 hover:bg-purple-700 rounded-lg text-white font-medium transition-colors flex items-center gap-3">
|
|
<i class="fas fa-image"></i>
|
|
<span>Show Images Only</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Email Detail Modal -->
|
|
<div id="emailModal" class="hidden fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4">
|
|
<div class="bg-white rounded-2xl max-w-4xl w-full max-h-[80vh] overflow-hidden">
|
|
<div class="p-6 border-b border-gray-200">
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center">
|
|
<i class="fas fa-envelope text-blue-600"></i>
|
|
</div>
|
|
<h3 class="text-lg font-bold text-gray-800">Email Details</h3>
|
|
</div>
|
|
<button onclick="closeEmailModal()" class="text-gray-400 hover:text-gray-600">
|
|
<i class="fas fa-times"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="p-6 overflow-y-auto custom-scrollbar" id="emailContent">
|
|
<!-- Email details will be loaded here -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Scripts at the end -->
|
|
<script src="assets/js/utils.js"></script>
|
|
<script src="assets/js/navigation.js"></script>
|
|
<script src="assets/js/email-agent.js"></script>
|
|
</body>
|
|
</html> |