| <!DOCTYPE html> |
| <html lang="en" class="dark"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>MyCommVault - Personal Data Dashboard</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"> |
| <style> |
| body { |
| font-family: 'Inter', sans-serif; |
| } |
| .active-tab { |
| border-bottom: 3px solid #3b82f6; |
| color: #3b82f6; |
| font-weight: 600; |
| } |
| .incoming-call { |
| background-color: rgba(16, 185, 129, 0.1); |
| } |
| .outgoing-call { |
| background-color: rgba(59, 130, 246, 0.1); |
| } |
| .missed-call { |
| background-color: rgba(239, 68, 68, 0.1); |
| } |
| .message-preview { |
| display: -webkit-box; |
| -webkit-line-clamp: 2; |
| -webkit-box-orient: vertical; |
| overflow: hidden; |
| } |
| @media (max-width: 640px) { |
| .stat-card { |
| width: 100%; |
| } |
| } |
| </style> |
| </head> |
| <body class="bg-gray-900 text-gray-100 min-h-screen"> |
| <div class="container mx-auto px-4 py-6"> |
| |
| <header class="flex justify-between items-center mb-8"> |
| <div class="flex items-center"> |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4" /> |
| </svg> |
| <h1 class="text-2xl font-bold ml-2">MyComm<span class="text-blue-500">Vault</span></h1> |
| </div> |
| <div class="flex items-center space-x-2"> |
| <div class="relative"> |
| <input type="email" id="gmail-account" placeholder="your.email@gmail.com" class="bg-gray-800 border border-gray-700 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 w-64"> |
| </div> |
| <button id="gmail-login" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center"> |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 24 24" fill="currentColor"> |
| <path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z" /> |
| </svg> |
| Connect Gmail |
| </button> |
| </div> |
| </header> |
|
|
| |
| <div class="border-b border-gray-700 mb-6"> |
| <nav class="flex space-x-8 overflow-x-auto"> |
| <button onclick="showSection('inbox')" id="inbox-tab" class="active-tab py-3 px-1 font-medium text-sm whitespace-nowrap">Inbox</button> |
| <button onclick="showSection('call-history')" id="call-history-tab" class="py-3 px-1 font-medium text-sm whitespace-nowrap text-gray-400 hover:text-gray-300">Call History</button> |
| <button onclick="showSection('messages')" id="messages-tab" class="py-3 px-1 font-medium text-sm whitespace-nowrap text-gray-400 hover:text-gray-300">Messages</button> |
| <button onclick="showSection('statistics')" id="statistics-tab" class="py-3 px-1 font-medium text-sm whitespace-nowrap text-gray-400 hover:text-gray-300">Statistics</button> |
| </nav> |
| </div> |
|
|
| |
| <main> |
| |
| <section id="inbox" class="section-content"> |
| <div class="mb-4 flex flex-col md:flex-row md:items-center justify-between"> |
| <h2 class="text-xl font-semibold mb-2 md:mb-0">Email Inbox</h2> |
| <div class="flex space-x-2"> |
| <div class="relative"> |
| <input type="text" placeholder="Search sender..." class="bg-gray-800 border border-gray-700 rounded-lg px-4 py-2 pl-10 focus:outline-none focus:ring-2 focus:ring-blue-500 w-full md:w-64"> |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-500 absolute left-3 top-2.5" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" /> |
| </svg> |
| </div> |
| <select class="bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"> |
| <option>All Dates</option> |
| <option>Today</option> |
| <option>Last 7 Days</option> |
| <option>This Month</option> |
| </select> |
| </div> |
| </div> |
| |
| <div class="bg-gray-800 rounded-lg overflow-hidden border border-gray-700"> |
| <div class="overflow-x-auto"> |
| <table class="min-w-full divide-y divide-gray-700"> |
| <thead class="bg-gray-750"> |
| <tr> |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">From</th> |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Subject</th> |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Date</th> |
| </tr> |
| </thead> |
| <tbody class="bg-gray-800 divide-y divide-gray-700"> |
| <tr class="hover:bg-gray-750 cursor-pointer"> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <div class="flex items-center"> |
| <div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-500 flex items-center justify-center text-white font-semibold">JD</div> |
| <div class="ml-4"> |
| <div class="text-sm font-medium">John Doe</div> |
| <div class="text-sm text-gray-400">john.doe@example.com</div> |
| </div> |
| </div> |
| </td> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <div class="text-sm font-medium">Meeting tomorrow at 10 AM</div> |
| <div class="text-sm text-gray-400">Hi there, let's discuss the project progress...</div> |
| </td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-400">Today, 09:42 AM</td> |
| </tr> |
| <tr class="hover:bg-gray-750 cursor-pointer"> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <div class="flex items-center"> |
| <div class="flex-shrink-0 h-10 w-10 rounded-full bg-green-500 flex items-center justify-center text-white font-semibold">AS</div> |
| <div class="ml-4"> |
| <div class="text-sm font-medium">Amazon Shopping</div> |
| <div class="text-sm text-gray-400">no-reply@amazon.com</div> |
| </div> |
| </div> |
| </td> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <div class="text-sm font-medium">Your Amazon order #12345 has shipped</div> |
| <div class="text-sm text-gray-400">Your recent order is on its way...</div> |
| </td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-400">Yesterday, 3:15 PM</td> |
| </tr> |
| <tr class="hover:bg-gray-750 cursor-pointer"> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <div class="flex items-center"> |
| <div class="flex-shrink-0 h-10 w-10 rounded-full bg-purple-500 flex items-center justify-center text-white font-semibold">LI</div> |
| <div class="ml-4"> |
| <div class="text-sm font-medium">LinkedIn</div> |
| <div class="text-sm text-gray-400">news@linkedin.com</div> |
| </div> |
| </div> |
| </td> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <div class="text-sm font-medium">5 new connection requests</div> |
| <div class="text-sm text-gray-400">You have 5 new connection requests waiting...</div> |
| </td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-400">Mar 12, 2023</td> |
| </tr> |
| <tr class="hover:bg-gray-750 cursor-pointer"> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <div class="flex items-center"> |
| <div class="flex-shrink-0 h-10 w-10 rounded-full bg-yellow-500 flex items-center justify-center text-white font-semibold">TW</div> |
| <div class="ml-4"> |
| <div class="text-sm font-medium">Twitter</div> |
| <div class="text-sm text-gray-400">info@twitter.com</div> |
| </div> |
| </div> |
| </td> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <div class="text-sm font-medium">Your weekly Twitter digest</div> |
| <div class="text-sm text-gray-400">Here's what you missed on Twitter this week...</div> |
| </td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-400">Mar 10, 2023</td> |
| </tr> |
| <tr class="hover:bg-gray-750 cursor-pointer"> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <div class="flex items-center"> |
| <div class="flex-shrink-0 h-10 w-10 rounded-full bg-red-500 flex items-center justify-center text-white font-semibold">YT</div> |
| <div class="ml-4"> |
| <div class="text-sm font-medium">YouTube</div> |
| <div class="text-sm text-gray-400">no-reply@youtube.com</div> |
| </div> |
| </div> |
| </td> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <div class="text-sm font-medium">New videos from channels you follow</div> |
| <div class="text-sm text-gray-400">Check out these new uploads from your subscriptions...</div> |
| </td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-400">Mar 8, 2023</td> |
| </tr> |
| <tr class="hover:bg-gray-750 cursor-pointer"> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <div class="flex items-center"> |
| <div class="flex-shrink-0 h-10 w-10 rounded-full bg-indigo-500 flex items-center justify-center text-white font-semibold">GS</div> |
| <div class="ml-4"> |
| <div class="text-sm font-medium">GitHub Support</div> |
| <div class="text-sm text-gray-400">support@github.com</div> |
| </div> |
| </div> |
| </td> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <div class="text-sm font-medium">Your repository access has been updated</div> |
| <div class="text-sm text-gray-400">You've been granted write access to the project repository...</div> |
| </td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-400">Mar 7, 2023</td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="call-history" class="section-content hidden"> |
| <div class="mb-4 flex flex-col md:flex-row md:items-center justify-between"> |
| <h2 class="text-xl font-semibold mb-2 md:mb-0">Call History</h2> |
| <div class="flex space-x-2"> |
| <div class="relative"> |
| <input type="text" placeholder="Search contacts..." class="bg-gray-800 border border-gray-700 rounded-lg px-4 py-2 pl-10 focus:outline-none focus:ring-2 focus:ring-blue-500 w-full md:w-64"> |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-500 absolute left-3 top-2.5" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" /> |
| </svg> |
| </div> |
| <select class="bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"> |
| <option>All Calls</option> |
| <option>Incoming</option> |
| <option>Outgoing</option> |
| <option>Missed</option> |
| </select> |
| </div> |
| </div> |
| |
| <div class="bg-gray-800 rounded-lg overflow-hidden border border-gray-700"> |
| <div class="overflow-x-auto"> |
| <table class="min-w-full divide-y divide-gray-700"> |
| <thead class="bg-gray-750"> |
| <tr> |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Type</th> |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Contact</th> |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Date/Time</th> |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Duration</th> |
| </tr> |
| </thead> |
| <tbody class="bg-gray-800 divide-y divide-gray-700"> |
| <tr class="incoming-call hover:bg-gray-750 cursor-pointer"> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <div class="flex items-center"> |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-green-500 mr-2" viewBox="0 0 20 20" fill="currentColor"> |
| <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" /> |
| </svg> |
| <span class="text-sm">Incoming</span> |
| </div> |
| </td> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <div class="flex items-center"> |
| <div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-500 flex items-center justify-center text-white font-semibold">JD</div> |
| <div class="ml-4"> |
| <div class="text-sm font-medium">John Doe</div> |
| <div class="text-sm text-gray-400">+1 (555) 123-4567</div> |
| </div> |
| </div> |
| </td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-400">Today, 11:23 AM</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-400">5:32</td> |
| </tr> |
| <tr class="outgoing-call hover:bg-gray-750 cursor-pointer"> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <div class="flex items-center"> |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-blue-500 mr-2" viewBox="0 0 20 20" fill="currentColor"> |
| <path fill-rule="evenodd" d="M3 17a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm3.293-7.707a1 1 0 011.414 0L9 10.586V3a1 1 0 112 0v7.586l1.293-1.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd" /> |
| </svg> |
| <span class="text-sm">Outgoing</span> |
| </div> |
| </td> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <div class="flex items-center"> |
| <div class="flex-shrink-0 h-10 w-10 rounded-full bg-purple-500 flex items-center justify-center text-white font-semibold">MS</div> |
| <div class="ml-4"> |
| <div class="text-sm font-medium">Mom</div> |
| <div class="text-sm text-gray-400">+1 (555) 987-6543</div> |
| </div> |
| </div> |
| </td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-400">Today, 09:15 AM</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-400">12:45</td> |
| </tr> |
| <tr class="missed-call hover:bg-gray-750 cursor-pointer"> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <div class="flex items-center"> |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-red-500 mr-2" viewBox="0 0 20 20" fill="currentColor"> |
| <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" /> |
| </svg> |
| <span class="text-sm">Missed</span> |
| </div> |
| </td> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <div class="flex items-center"> |
| <div class="flex-shrink-0 h-10 w-10 rounded-full bg-green-500 flex items-center justify-center text-white font-semibold">WB</div> |
| <div class="ml-4"> |
| <div class="text-sm font-medium">Work Boss</div> |
| <div class="text-sm text-gray-400">+1 (555) 789-0123</div> |
| </div> |
| </div> |
| </td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-400">Yesterday, 4:30 PM</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-400">--</td> |
| </tr> |
| <tr class="incoming-call hover:bg-gray-750 cursor-pointer"> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <div class="flex items-center"> |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-green-500 mr-2" viewBox="0 0 20 20" fill="currentColor"> |
| <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" /> |
| </svg> |
| <span class="text-sm">Incoming</span> |
| </div> |
| </td> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <div class="flex items-center"> |
| <div class="flex-shrink-0 h-10 w-10 rounded-full bg-yellow-500 flex items-center justify-center text-white font-semibold">DS</div> |
| <div class="ml-4"> |
| <div class="text-sm font-medium">Dr. Smith</div> |
| <div class="text-sm text-gray-400">+1 (555) 456-7890</div> |
| </div> |
| </div> |
| </td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-400">Yesterday, 2:15 PM</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-400">8:12</td> |
| </tr> |
| <tr class="outgoing-call hover:bg-gray-750 cursor-pointer"> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <div class="flex items-center"> |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-blue-500 mr-2" viewBox="0 0 20 20" fill="currentColor"> |
| <path fill-rule="evenodd" d="M3 17a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm3.293-7.707a1 1 0 011.414 0L9 10.586V3a1 1 0 112 0v7.586l1.293-1.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd" /> |
| </svg> |
| <span class="text-sm">Outgoing</span> |
| </div> |
| </td> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <div class="flex items-center"> |
| <div class="flex-shrink-0 h-10 w-10 rounded-full bg-red-500 flex items-center justify-center text-white font-semibold">PS</div> |
| <div class="ml-4"> |
| <div class="text-sm font-medium">Pizza Shop</div> |
| <div class="text-sm text-gray-400">+1 (555) 321-6547</div> |
| </div> |
| </div> |
| </td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-400">Mar 12, 2023, 6:45 PM</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-400">3:21</td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="messages" class="section-content hidden"> |
| <div class="mb-4 flex flex-col md:flex-row md:items-center justify-between"> |
| <h2 class="text-xl font-semibold mb-2 md:mb-0">Text Messages</h2> |
| <div class="flex space-x-2"> |
| <div class="relative"> |
| <input type="text" placeholder="Search messages..." class="bg-gray-800 border border-gray-700 rounded-lg px-4 py-2 pl-10 focus:outline-none focus:ring-2 focus:ring-blue-500 w-full md:w-64"> |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-500 absolute left-3 top-2.5" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" /> |
| </svg> |
| </div> |
| <select class="bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"> |
| <option>All Messages</option> |
| <option>Today</option> |
| <option>Last 7 Days</option> |
| <option>Unread</option> |
| </select> |
| </div> |
| </div> |
| |
| <div class="bg-gray-800 rounded-lg overflow-hidden border border-gray-700"> |
| <div class="overflow-x-auto"> |
| <table class="min-w-full divide-y divide-gray-700"> |
| <thead class="bg-gray-750"> |
| <tr> |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Contact</th> |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Message Preview</th> |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Date/Time</th> |
| </tr> |
| </thead> |
| <tbody class="bg-gray-800 divide-y divide-gray-700"> |
| <tr class="hover:bg-gray-750 cursor-pointer"> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <div class="flex items-center"> |
| <div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-500 flex items-center justify-center text-white font-semibold">JD</div> |
| <div class="ml-4"> |
| <div class="text-sm font-medium">John Doe</div> |
| <div class="text-sm text-gray-400">+1 (555) 123-4567</div> |
| </div> |
| </div> |
| </td> |
| <td class="px-6 py-4"> |
| <div class="text-sm font-medium">Meeting at 2 PM tomorrow</div> |
| <div class="text-sm text-gray-400 message-preview">Hey, just confirming our meeting tomorrow at the coffee shop. I'll bring the project documents we discussed last week.</div> |
| </td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-400">Today, 1:15 PM</td> |
| </tr> |
| <tr class="hover:bg-gray-750 cursor-pointer"> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <div class="flex items-center"> |
| <div class="flex-shrink-0 h-10 w-10 rounded-full bg-green-500 flex items-center justify-center text-white font-semibold">AM</div> |
| <div class="ml-4"> |
| <div class="text-sm font-medium">Amazon</div> |
| <div class="text-sm text-gray-400">AMAZON</div> |
| </div> |
| </div> |
| </td> |
| <td class="px-6 py-4"> |
| <div class="text-sm font-medium">Your package is out for delivery</div> |
| <div class="text-sm text-gray-400 message-preview">Your Amazon package #12345 is out for delivery today. Track your package: https://amzn.com/track/12345</div> |
| </td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-400">Today, 9:30 AM</td> |
| </tr> |
| <tr class="hover:bg-gray-750 cursor-pointer"> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <div class="flex items-center"> |
| <div class="flex-shrink-0 h-10 w-10 rounded-full bg-purple-500 flex items-center justify-center text-white font-semibold">MS</div> |
| <div class="ml-4"> |
| <div class="text-sm font-medium">Mom</div> |
| <div class="text-sm text-gray-400">+1 (555) 987-6543</div> |
| </div> |
| </div> |
| </td> |
| <td class="px-6 py-4"> |
| <div class="text-sm font-medium">Family dinner this weekend</div> |
| <div class="text-sm text-gray-400 message-preview">Hi honey! Just reminding you about family dinner this Sunday at 6 PM. Your aunt and uncle will be joining us too.</div> |
| </td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-400">Yesterday, 7:45 PM</td> |
| </tr> |
| <tr class="hover:bg-gray-750 cursor-pointer"> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <div class="flex items-center"> |
| <div class="flex-shrink-0 h-10 w-10 rounded-full bg-yellow-500 flex items-center justify-center text-white font-semibold">UB</div> |
| <div class="ml-4"> |
| <div class="text-sm font-medium">Uber</div> |
| <div class="text-sm text-gray-400">UBER</div> |
| </div> |
| </div> |
| </td> |
| <td class="px-6 py-4"> |
| <div class="text-sm font-medium">Your ride receipt</div> |
| <div class="text-sm text-gray-400 message-preview">Thanks for riding with Uber. Your trip on Mar 12 cost $14.25. View receipt: https://uber.com/receipt/12345</div> |
| </td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-400">Mar 12, 2023, 8:30 PM</td> |
| </tr> |
| <tr class="hover:bg-gray-750 cursor-pointer"> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <div class="flex items-center"> |
| <div class="flex-shrink-0 h-10 w-10 rounded-full bg-red-500 flex items-center justify-center text-white font-semibold">WB</div> |
| <div class="ml-4"> |
| <div class="text-sm font-medium">Work Boss</div> |
| <div class="text-sm text-gray-400">+1 (555) 789-0123</div> |
| </div> |
| </div> |
| </td> |
| <td class="px-6 py-4"> |
| <div class="text-sm font-medium">Project deadline moved</div> |
| <div class="text-sm text-gray-400 message-preview">Important: The deadline for the current project has been moved to next Friday. Please adjust your schedule accordingly.</div> |
| </td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-400">Mar 10, 2023, 4:20 PM</td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="statistics" class="section-content hidden"> |
| <h2 class="text-xl font-semibold mb-6">Communication Statistics</h2> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8"> |
| <div class="bg-gray-800 p-6 rounded-lg border border-gray-700"> |
| <h3 class="text-lg font-medium mb-4">Emails Received (Last 10 Days)</h3> |
| <canvas id="emailChart" height="250"></canvas> |
| </div> |
| <div class="bg-gray-800 p-6 rounded-lg border border-gray-700"> |
| <h3 class="text-lg font-medium mb-4">Call Duration (Last 10 Days)</h3> |
| <canvas id="callChart" height="250"></canvas> |
| </div> |
| </div> |
| |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4"> |
| <div class="stat-card bg-gray-800 p-4 rounded-lg border border-gray-700"> |
| <div class="flex items-center"> |
| <div class="p-3 rounded-full bg-blue-500/10 mr-4"> |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" /> |
| </svg> |
| </div> |
| <div> |
| <p class="text-sm text-gray-400">Emails Today</p> |
| <p class="text-2xl font-semibold">24</p> |
| </div> |
| </div> |
| </div> |
| <div class="stat-card bg-gray-800 p-4 rounded-lg border border-gray-700"> |
| <div class="flex items-center"> |
| <div class="p-3 rounded-full bg-green-500/10 mr-4"> |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" /> |
| </svg> |
| </div> |
| <div> |
| <p class="text-sm text-gray-400">Call Time Today</p> |
| <p class="text-2xl font-semibold">38 min</p> |
| </div> |
| </div> |
| </div> |
| <div class="stat-card bg-gray-800 p-4 rounded-lg border border-gray-700"> |
| <div class="flex items-center"> |
| <div class="p-3 rounded-full bg-purple-500/10 mr-4"> |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-purple-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" /> |
| </svg> |
| </div> |
| <div> |
| <p class="text-sm text-gray-400">Messages Today</p> |
| <p class="text-2xl font-semibold">12</p> |
| </div> |
| </div> |
| </div> |
| <div class="stat-card bg-gray-800 p-4 rounded-lg border border-gray-700"> |
| <div class="flex items-center"> |
| <div class="p-3 rounded-full bg-yellow-500/10 mr-4"> |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-yellow-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" /> |
| </svg> |
| </div> |
| <div> |
| <p class="text-sm text-gray-400">Avg. Response Time</p> |
| <p class="text-2xl font-semibold">2.4 hrs</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
| </main> |
| </div> |
|
|
| <script> |
| |
| function showSection(sectionId) { |
| |
| document.querySelectorAll('.section-content').forEach(section => { |
| section.classList.add('hidden'); |
| }); |
| |
| |
| document.querySelectorAll('nav button').forEach(tab => { |
| tab.classList.remove('active-tab'); |
| tab.classList.add('text-gray-400', 'hover:text-gray-300'); |
| }); |
| |
| |
| document.getElementById(sectionId).classList.remove('hidden'); |
| |
| |
| document.getElementById(`${sectionId}-tab`).classList.add('active-tab'); |
| document.getElementById(`${sectionId}-tab`).classList.remove('text-gray-400', 'hover:text-gray-300'); |
| |
| |
| if (sectionId === 'statistics') { |
| renderCharts(); |
| } |
| } |
| |
| |
| document.getElementById('gmail-login').addEventListener('click', function() { |
| this.innerHTML = ` |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2 animate-spin" viewBox="0 0 24 24" fill="none" stroke="currentColor"> |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" /> |
| </svg> |
| Connecting... |
| `; |
| |
| setTimeout(() => { |
| this.innerHTML = ` |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2 text-green-500" viewBox="0 0 20 20" fill="currentColor"> |
| <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" /> |
| </svg> |
| Gmail Connected |
| `; |
| this.classList.remove('bg-blue-600', 'hover:bg-blue-700'); |
| this.classList.add('bg-green-600', 'hover:bg-green-700'); |
| |
| |
| const email = document.getElementById('gmail-account').value || 'your Gmail account'; |
| setTimeout(() => { |
| alert(`Successfully fetched 24 emails from ${email}`); |
| }, 500); |
| }, 2000); |
| }); |
| |
| |
| function renderCharts() { |
| |
| const emailCtx = document.getElementById('emailChart').getContext('2d'); |
| const emailChart = new Chart(emailCtx, { |
| type: 'bar', |
| data: { |
| labels: ['Mar 3', 'Mar 4', 'Mar 5', 'Mar 6', 'Mar 7', 'Mar 8', 'Mar 9', 'Mar 10', 'Mar 11', 'Mar 12'], |
| datasets: [{ |
| label: 'Emails Received', |
| data: [12, 19, 15, 8, 11, 14, 17, 22, 18, 24], |
| backgroundColor: 'rgba(59, 130, 246, 0.7)', |
| borderColor: 'rgba(59, 130, 246, 1)', |
| borderWidth: 1 |
| }] |
| }, |
| options: { |
| responsive: true, |
| maintainAspectRatio: false, |
| scales: { |
| y: { |
| beginAtZero: true, |
| grid: { |
| color: 'rgba(55, 65, 81, 0.5)' |
| }, |
| ticks: { |
| color: 'rgba(156, 163, 175, 1)' |
| } |
| }, |
| x: { |
| grid: { |
| color: 'rgba(55, 65, 81, 0.5)' |
| }, |
| ticks: { |
| color: 'rgba(156, 163, 175, 1)' |
| } |
| } |
| }, |
| plugins: { |
| legend: { |
| labels: { |
| color: 'rgba(209, 213, 219, 1)' |
| } |
| } |
| } |
| } |
| }); |
| |
| |
| const callCtx = document.getElementById('callChart').getContext('2d'); |
| const callChart = new Chart(callCtx, { |
| type: 'line', |
| data: { |
| labels: ['Mar 3', 'Mar 4', 'Mar 5', 'Mar 6', 'Mar 7', 'Mar 8', 'Mar 9', 'Mar 10', 'Mar 11', 'Mar 12'], |
| datasets: [{ |
| label: 'Call Duration (minutes)', |
| data: [25, 32, 18, 27, 15, 22, 30, 28, 35, 38], |
| backgroundColor: 'rgba(16, 185, 129, 0.2)', |
| borderColor: 'rgba(16, 185, 129, 1)', |
| borderWidth: 2, |
| tension: 0.1, |
| fill: true |
| }] |
| }, |
| options: { |
| responsive: true, |
| maintainAspectRatio: false, |
| scales: { |
| y: { |
| beginAtZero: true, |
| grid: { |
| color: 'rgba(55, 65, 81, 0.5)' |
| }, |
| ticks: { |
| color: 'rgba(156, 163, 175, 1)' |
| } |
| }, |
| x: { |
| grid: { |
| color: 'rgba(55, 65, 81, 0.5)' |
| }, |
| ticks: { |
| color: 'rgba(156, 163, 175, 1)' |
| } |
| } |
| }, |
| plugins: { |
| legend: { |
| labels: { |
| color: 'rgba(209, 213, 219, 1)' |
| } |
| } |
| } |
| } |
| }); |
| } |
| |
| |
| document.addEventListener('DOMContentLoaded', function() { |
| showSection('inbox'); |
| }); |
| </script> |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=giggro/jojo" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
