Hugging Face's logo

Spaces:
Its3sticks
/
space1
Running

App Files Community
space1 / index.html
Its3sticks's picture
Its3sticks
Add 2 files
166946d verified
raw
history blame contribute delete
52.4 kB
 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SimpleCRM - So Easy a Sales Guy Could Do It</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
.chat-container {
height: calc(100vh - 180px);
}
.search-results {
max-height: 300px;
overflow-y: auto;
}
.fade-in {
animation: fadeIn 0.3s ease-in-out;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.pulse {
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { opacity: 1; }
50% { opacity: 0.5; }
100% { opacity: 1; }
}
.sidebar-item:hover .sidebar-badge {
background-color: #3b82f6;
color: white;
}
.file-preview {
height: 200px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.integration-badge {
position: absolute;
top: -8px;
right: -8px;
background: white;
border-radius: 50%;
padding: 3px;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
</style>
</head>
<body class="bg-gray-50 font-sans">
<div class="flex h-screen overflow-hidden">
<!-- Sidebar -->
<div class="hidden md:flex md:flex-shrink-0">
<div class="flex flex-col w-64 bg-white border-r border-gray-200">
<div class="flex items-center justify-center h-16 px-4 bg-blue-600">
<h1 class="text-white font-bold text-xl">SimpleCRM</h1>
</div>
<div class="flex flex-col flex-grow px-4 py-4 overflow-y-auto">
<div class="space-y-1">
<div class="flex items-center px-2 py-3 text-sm font-medium rounded-md bg-blue-50 text-blue-700">
<i class="fas fa-home mr-3"></i>
Dashboard
</div>
<div class="sidebar-item flex items-center px-2 py-3 text-sm font-medium rounded-md text-gray-600 hover:bg-gray-50">
<i class="fas fa-users mr-3"></i>
Team Updates
<span class="sidebar-badge ml-auto inline-block px-2 text-xs font-medium rounded-full bg-gray-200 text-gray-800">12</span>
</div>
<div class="sidebar-item flex items-center px-2 py-3 text-sm font-medium rounded-md text-gray-600 hover:bg-gray-50">
<i class="fas fa-calendar-alt mr-3"></i>
Meetings
<span class="sidebar-badge ml-auto inline-block px-2 text-xs font-medium rounded-full bg-gray-200 text-gray-800">5</span>
</div>
<div class="sidebar-item flex items-center px-2 py-3 text-sm font-medium rounded-md text-gray-600 hover:bg-gray-50">
<i class="fas fa-file-contract mr-3"></i>
Proposals
<span class="sidebar-badge ml-auto inline-block px-2 text-xs font-medium rounded-full bg-gray-200 text-gray-800">3</span>
</div>
<div class="sidebar-item flex items-center px-2 py-3 text-sm font-medium rounded-md text-gray-600 hover:bg-gray-50">
<i class="fas fa-chart-line mr-3"></i>
Pipeline
</div>
<div class="sidebar-item flex items-center px-2 py-3 text-sm font-medium rounded-md text-gray-600 hover:bg-gray-50">
<i class="fas fa-search mr-3"></i>
Quick Search
</div>
<div class="sidebar-item flex items-center px-2 py-3 text-sm font-medium rounded-md text-gray-600 hover:bg-gray-50">
<i class="fas fa-file-alt mr-3"></i>
Team Templates
</div>
<div class="sidebar-item flex items-center px-2 py-3 text-sm font-medium rounded-md text-gray-600 hover:bg-gray-50">
<i class="fas fa-cog mr-3"></i>
Settings
</div>
</div>
<div class="mt-auto mb-4">
<div class="p-4 bg-blue-50 rounded-lg">
<p class="text-xs text-blue-700">Need to update your weekly report?</p>
<button class="mt-2 w-full bg-blue-600 text-white py-2 px-4 rounded-md text-sm font-medium hover:bg-blue-700">
Complete Weekly Update
</button>
</div>
<!-- Cloud Integrations -->
<div class="mt-4 p-3 bg-gray-50 rounded-lg">
<p class="text-xs font-medium text-gray-700 mb-2">Connected Clouds</p>
<div class="flex space-x-2">
<div class="relative">
<div class="h-8 w-8 bg-white rounded-full flex items-center justify-center shadow-sm">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/ab/Google_Drive_icon.svg/1024px-Google_Drive_icon.svg.png" class="h-5 w-5" alt="Google Drive">
</div>
<div class="integration-badge">
<div class="h-4 w-4 bg-green-500 rounded-full flex items-center justify-center">
<i class="fas fa-check text-white text-xs"></i>
</div>
</div>
</div>
<div class="relative">
<div class="h-8 w-8 bg-white rounded-full flex items-center justify-center shadow-sm">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5f/Microsoft_Office_logo_%282019%E2%80%93present%29.svg/1200px-Microsoft_Office_logo_%282019%E2%80%93present%29.svg.png" class="h-5 w-5" alt="Microsoft 365">
</div>
<div class="integration-badge">
<div class="h-4 w-4 bg-green-500 rounded-full flex items-center justify-center">
<i class="fas fa-check text-white text-xs"></i>
</div>
</div>
</div>
<button class="h-8 w-8 bg-gray-200 rounded-full flex items-center justify-center hover:bg-gray-300">
<i class="fas fa-plus text-gray-600 text-xs"></i>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Main Content -->
<div class="flex flex-col flex-1 overflow-hidden">
<!-- Top Navigation -->
<div class="flex items-center justify-between h-16 px-4 bg-white border-b border-gray-200">
<div class="flex items-center">
<button class="md:hidden text-gray-500 mr-2">
<i class="fas fa-bars"></i>
</button>
<h2 class="text-lg font-medium text-gray-800">Team Updates</h2>
</div>
<div class="flex items-center space-x-4">
<div class="relative">
<button id="search-btn" class="p-2 text-gray-500 hover:text-gray-700">
<i class="fas fa-search"></i>
</button>
<div id="search-modal" class="hidden absolute right-0 mt-2 w-80 bg-white rounded-md shadow-lg z-10">
<div class="p-4">
<input type="text" placeholder="Ask me anything..." class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
<div class="search-results mt-2 border-t border-gray-200">
<div class="p-3 text-sm text-gray-500">Try: "email syntax for initiative agency" or "last contact with PepsiCo"</div>
</div>
</div>
</div>
</div>
<div class="relative">
<button class="p-2 text-gray-500 hover:text-gray-700">
<i class="fas fa-bell"></i>
<span class="absolute top-0 right-0 h-2 w-2 rounded-full bg-red-500"></span>
</button>
</div>
<div class="flex items-center">
<img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
<span class="ml-2 text-sm font-medium text-gray-700 hidden md:inline">John Salesman</span>
</div>
</div>
</div>
<!-- Main Content Area -->
<div class="flex-1 overflow-auto p-4">
<div class="max-w-4xl mx-auto">
<!-- Dashboard Summary -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
<div class="bg-white p-4 rounded-lg shadow-sm border border-gray-200">
<h3 class="text-sm font-medium text-gray-500">Pending Updates</h3>
<p class="mt-1 text-2xl font-semibold text-blue-600">3</p>
<p class="mt-2 text-xs text-gray-500">From your team</p>
</div>
<div class="bg-white p-4 rounded-lg shadow-sm border border-gray-200">
<h3 class="text-sm font-medium text-gray-500">Active Deals</h3>
<p class="mt-1 text-2xl font-semibold text-green-600">12</p>
<p class="mt-2 text-xs text-gray-500">$1.2M potential</p>
</div>
<div class="bg-white p-4 rounded-lg shadow-sm border border-gray-200">
<h3 class="text-sm font-medium text-gray-500">Overdue Follow-ups</h3>
<p class="mt-1 text-2xl font-semibold text-red-600">2</p>
<p class="mt-2 text-xs text-gray-500">Needs attention</p>
</div>
</div>
<!-- Recent Updates -->
<div class="bg-white rounded-lg shadow-sm border border-gray-200 mb-6">
<div class="px-4 py-3 border-b border-gray-200">
<div class="flex items-center justify-between">
<h3 class="text-sm font-medium text-gray-800">Recent Team Updates</h3>
<button id="show-files-btn" class="text-xs font-medium text-blue-600 hover:text-blue-800">
<i class="fas fa-folder-open mr-1"></i> Show Linked Files
</button>
</div>
</div>
<div class="divide-y divide-gray-200">
<!-- Update Item -->
<div class="p-4">
<div class="flex items-start">
<img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
<div class="ml-3 flex-1">
<div class="flex items-center">
<p class="text-sm font-medium text-gray-900">Sarah Dealmaker</p>
<span class="ml-auto text-xs text-gray-500">2 hours ago</span>
</div>
<p class="text-sm text-gray-700 mt-1">Had a meeting with Amazon Prime brand manager at Rufus Initiative today. Presented package, next step is email and revised package for 2Q RFP. Rates must be around $20 CPM.</p>
<div class="mt-2 flex space-x-3">
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-blue-100 text-blue-800">Amazon</span>
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-green-100 text-green-800">Meeting</span>
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-purple-100 text-purple-800">RFP</span>
</div>
<!-- Linked Files Section (Hidden by default) -->
<div id="linked-files-1" class="hidden mt-3 border-t border-gray-200 pt-3">
<p class="text-xs font-medium text-gray-500 mb-2">AUTOMATICALLY FILED DOCUMENTS</p>
<div class="grid grid-cols-2 md:grid-cols-3 gap-2">
<div class="border border-gray-200 rounded-md p-2 hover:bg-gray-50 cursor-pointer">
<div class="file-preview bg-gray-100 rounded" style="background-image: url('https://cdn-icons-png.flaticon.com/512/136/136528.png')"></div>
<p class="text-xs font-medium text-gray-800 truncate mt-1">Amazon_RFP_2023Q2.docx</p>
<div class="flex items-center mt-1">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5f/Microsoft_Office_logo_%282019%E2%80%93present%29.svg/1200px-Microsoft_Office_logo_%282019%E2%80%93present%29.svg.png" class="h-3 w-3 mr-1" alt="">
<span class="text-xs text-gray-500">OneDrive</span>
</div>
</div>
<div class="border border-gray-200 rounded-md p-2 hover:bg-gray-50 cursor-pointer">
<div class="file-preview bg-gray-100 rounded" style="background-image: url('https://cdn-icons-png.flaticon.com/512/337/337946.png')"></div>
<p class="text-xs font-medium text-gray-800 truncate mt-1">Meeting_Notes_Amazon.pdf</p>
<div class="flex items-center mt-1">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/ab/Google_Drive_icon.svg/1024px-Google_Drive_icon.svg.png" class="h-3 w-3 mr-1" alt="">
<span class="text-xs text-gray-500">Google Drive</span>
</div>
</div>
<div class="border border-gray-200 rounded-md p-2 hover:bg-gray-50 cursor-pointer">
<div class="file-preview bg-gray-100 rounded" style="background-image: url('https://cdn-icons-png.flaticon.com/512/337/337932.png')"></div>
<p class="text-xs font-medium text-gray-800 truncate mt-1">Rufus_Initiative_Deck.pptx</p>
<div class="flex items-center mt-1">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/ab/Google_Drive_icon.svg/1024px-Google_Drive_icon.svg.png" class="h-3 w-3 mr-1" alt="">
<span class="text-xs text-gray-500">Google Drive</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Update Item -->
<div class="p-4">
<div class="flex items-start">
<img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1519244703995-f4e0f30006d5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
<div class="ml-3 flex-1">
<div class="flex items-center">
<p class="text-sm font-medium text-gray-900">Mike Closer</p>
<span class="ml-auto text-xs text-gray-500">4 hours ago</span>
</div>
<p class="text-sm text-gray-700 mt-1">Sent final proposal to PepsiCo for their summer campaign. Decision expected by Friday. Budget is $350K, our pricing is competitive at $18 CPM.</p>
<div class="mt-2 flex space-x-3">
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-red-100 text-red-800">PepsiCo</span>
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-yellow-100 text-yellow-800">Proposal</span>
</div>
<!-- Linked Files Section (Hidden by default) -->
<div id="linked-files-2" class="hidden mt-3 border-t border-gray-200 pt-3">
<p class="text-xs font-medium text-gray-500 mb-2">AUTOMATICALLY FILED DOCUMENTS</p>
<div class="grid grid-cols-2 md:grid-cols-3 gap-2">
<div class="border border-gray-200 rounded-md p-2 hover:bg-gray-50 cursor-pointer">
<div class="file-preview bg-gray-100 rounded" style="background-image: url('https://cdn-icons-png.flaticon.com/512/136/136528.png')"></div>
<p class="text-xs font-medium text-gray-800 truncate mt-1">PepsiCo_Summer_Campaign_Proposal.docx</p>
<div class="flex items-center mt-1">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5f/Microsoft_Office_logo_%282019%E2%80%93present%29.svg/1200px-Microsoft_Office_logo_%282019%E2%80%93present%29.svg.png" class="h-3 w-3 mr-1" alt="">
<span class="text-xs text-gray-500">OneDrive</span>
</div>
</div>
<div class="border border-gray-200 rounded-md p-2 hover:bg-gray-50 cursor-pointer">
<div class="file-preview bg-gray-100 rounded" style="background-image: url('https://cdn-icons-png.flaticon.com/512/337/337946.png')"></div>
<p class="text-xs font-medium text-gray-800 truncate mt-1">PepsiCo_Contract_Terms.pdf</p>
<div class="flex items-center mt-1">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/ab/Google_Drive_icon.svg/1024px-Google_Drive_icon.svg.png" class="h-3 w-3 mr-1" alt="">
<span class="text-xs text-gray-500">Google Drive</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Update Item -->
<div class="p-4">
<div class="flex items-start">
<img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
<div class="ml-3 flex-1">
<div class="flex items-center">
<p class="text-sm font-medium text-gray-900">John Salesman</p>
<span class="ml-auto text-xs text-gray-500">Yesterday</span>
</div>
<p class="text-sm text-gray-700 mt-1">Followed up with Hyundai on Q2 media plan. They're reviewing with procurement. Shared case studies from our work with Kia.</p>
<div class="mt-2 flex space-x-3">
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-blue-100 text-blue-800">Hyundai</span>
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-indigo-100 text-indigo-800">Follow-up</span>
</div>
<div class="mt-3 bg-gray-50 p-3 rounded-md text-xs">
<p class="font-medium text-gray-700">SimpleCRM Assistant:</p>
<p class="mt-1 text-gray-600">When do you plan to follow up again? Would you like me to set a reminder?</p>
<button class="mt-2 text-blue-600 text-xs font-medium">Set reminder</button>
</div>
<!-- Linked Files Section (Hidden by default) -->
<div id="linked-files-3" class="hidden mt-3 border-t border-gray-200 pt-3">
<p class="text-xs font-medium text-gray-500 mb-2">AUTOMATICALLY FILED DOCUMENTS</p>
<div class="grid grid-cols-2 md:grid-cols-3 gap-2">
<div class="border border-gray-200 rounded-md p-2 hover:bg-gray-50 cursor-pointer">
<div class="file-preview bg-gray-100 rounded" style="background-image: url('https://cdn-icons-png.flaticon.com/512/136/136528.png')"></div>
<p class="text-xs font-medium text-gray-800 truncate mt-1">Hyundai_Q2_Media_Plan.docx</p>
<div class="flex items-center mt-1">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5f/Microsoft_Office_logo_%282019%E2%80%93present%29.svg/1200px-Microsoft_Office_logo_%282019%E2%80%93present%29.svg.png" class="h-3 w-3 mr-1" alt="">
<span class="text-xs text-gray-500">OneDrive</span>
</div>
</div>
<div class="border border-gray-200 rounded-md p-2 hover:bg-gray-50 cursor-pointer">
<div class="file-preview bg-gray-100 rounded" style="background-image: url('https://cdn-icons-png.flaticon.com/512/337/337946.png')"></div>
<p class="text-xs font-medium text-gray-800 truncate mt-1">Kia_Case_Study.pdf</p>
<div class="flex items-center mt-1">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/ab/Google_Drive_icon.svg/1024px-Google_Drive_icon.svg.png" class="h-3 w-3 mr-1" alt="">
<span class="text-xs text-gray-500">Google Drive</span>
</div>
</div>
<div class="border border-gray-200 rounded-md p-2 hover:bg-gray-50 cursor-pointer">
<div class="file-preview bg-gray-100 rounded" style="background-image: url('https://cdn-icons-png.flaticon.com/512/337/337932.png')"></div>
<p class="text-xs font-medium text-gray-800 truncate mt-1">Procurement_Checklist.pptx</p>
<div class="flex items-center mt-1">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/ab/Google_Drive_icon.svg/1024px-Google_Drive_icon.svg.png" class="h-3 w-3 mr-1" alt="">
<span class="text-xs text-gray-500">Google Drive</span>
</div>
</div>
<div class="border border-gray-200 rounded-md p-2 hover:bg-gray-50 cursor-pointer">
<div class="file-preview bg-gray-100 rounded" style="background-image: url('https://cdn-icons-png.flaticon.com/512/136/136528.png')"></div>
<p class="text-xs font-medium text-gray-800 truncate mt-1">Follow-up_Email_Template.docx</p>
<div class="flex items-center mt-1">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5f/Microsoft_Office_logo_%282019%E2%80%93present%29.svg/1200px-Microsoft_Office_logo_%282019%E2%80%93present%29.svg.png" class="h-3 w-3 mr-1" alt="">
<span class="text-xs text-gray-500">OneDrive</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Team Templates Section -->
<div class="bg-white rounded-lg shadow-sm border border-gray-200 mb-6">
<div class="px-4 py-3 border-b border-gray-200">
<h3 class="text-sm font-medium text-gray-800">Team Templates & Formatting Rules</h3>
</div>
<div class="p-4">
<div class="mb-4">
<h4 class="text-xs font-medium text-gray-500 uppercase tracking-wider mb-2">Document Organization</h4>
<div class="space-y-2">
<div class="flex items-start">
<div class="flex-shrink-0 h-5 w-5 text-green-500 mt-0.5">
<i class="fas fa-check-circle"></i>
</div>
<p class="ml-2 text-sm text-gray-700">All client documents automatically filed under: <span class="font-medium">Clients/[Client Name]/[Year]/[Project Type]</span></p>
</div>
<div class="flex items-start">
<div class="flex-shrink-0 h-5 w-5 text-green-500 mt-0.5">
<i class="fas fa-check-circle"></i>
</div>
<p class="ml-2 text-sm text-gray-700">File naming convention: <span class="font-medium">[Client]_[Project]_[YYYYMMDD]_[Version].ext</span></p>
</div>
</div>
</div>
<div class="mb-4">
<h4 class="text-xs font-medium text-gray-500 uppercase tracking-wider mb-2">Standard Templates</h4>
<div class="grid grid-cols-2 md:grid-cols-4 gap-3">
<div class="border border-gray-200 rounded-md p-3 hover:bg-gray-50 cursor-pointer">
<div class="h-10 w-10 bg-blue-100 rounded-full flex items-center justify-center mx-auto">
<i class="fas fa-file-word text-blue-600"></i>
</div>
<p class="text-xs font-medium text-gray-800 text-center mt-2">Proposal</p>
</div>
<div class="border border-gray-200 rounded-md p-3 hover:bg-gray-50 cursor-pointer">
<div class="h-10 w-10 bg-red-100 rounded-full flex items-center justify-center mx-auto">
<i class="fas fa-file-powerpoint text-red-600"></i>
</div>
<p class="text-xs font-medium text-gray-800 text-center mt-2">Pitch Deck</p>
</div>
<div class="border border-gray-200 rounded-md p-3 hover:bg-gray-50 cursor-pointer">
<div class="h-10 w-10 bg-green-100 rounded-full flex items-center justify-center mx-auto">
<i class="fas fa-file-excel text-green-600"></i>
</div>
<p class="text-xs font-medium text-gray-800 text-center mt-2">Media Plan</p>
</div>
<div class="border border-gray-200 rounded-md p-3 hover:bg-gray-50 cursor-pointer">
<div class="h-10 w-10 bg-purple-100 rounded-full flex items-center justify-center mx-auto">
<i class="fas fa-file-pdf text-purple-600"></i>
</div>
<p class="text-xs font-medium text-gray-800 text-center mt-2">Case Study</p>
</div>
</div>
</div>
<div>
<h4 class="text-xs font-medium text-gray-500 uppercase tracking-wider mb-2">Cloud Integrations</h4>
<div class="space-y-3">
<div class="flex items-center p-3 bg-gray-50 rounded-md">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/ab/Google_Drive_icon.svg/1024px-Google_Drive_icon.svg.png" class="h-5 w-5 mr-3" alt="">
<div class="flex-1">
<p class="text-sm font-medium text-gray-800">Google Drive</p>
<p class="text-xs text-gray-500">Connected to team folder "Sales - Shared"</p>
</div>
<button class="text-blue-600 text-xs font-medium">Manage</button>
</div>
<div class="flex items-center p-3 bg-gray-50 rounded-md">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5f/Microsoft_Office_logo_%282019%E2%80%93present%29.svg/1200px-Microsoft_Office_logo_%282019%E2%80%93present%29.svg.png" class="h-5 w-5 mr-3" alt="">
<div class="flex-1">
<p class="text-sm font-medium text-gray-800">Microsoft 365</p>
<p class="text-xs text-gray-500">Connected to "Sales Team" SharePoint</p>
</div>
<button class="text-blue-600 text-xs font-medium">Manage</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Chat Input -->
<div class="border-t border-gray-200 bg-white p-4">
<div class="max-w-4xl mx-auto">
<div class="relative">
<textarea id="chat-input" rows="2" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none" placeholder="Type your update here... Had a meeting with [company], discussed [topic], next steps are..."></textarea>
<div class="absolute bottom-3 right-3 flex space-x-2">
<button id="attach-file-btn" class="p-1 text-gray-400 hover:text-gray-600">
<i class="fas fa-paperclip"></i>
</button>
<button id="send-btn" class="p-2 bg-blue-600 text-white rounded-full hover:bg-blue-700">
<i class="fas fa-paper-plane"></i>
</button>
</div>
</div>
<div id="assistant-prompt" class="mt-2 bg-blue-50 p-3 rounded-md text-sm hidden fade-in">
<p class="text-blue-700">I noticed you mentioned a meeting. Would you like me to:</p>
<div class="mt-2 flex space-x-2">
<button class="px-3 py-1 bg-blue-100 text-blue-700 rounded-full text-xs font-medium hover:bg-blue-200">Log meeting notes</button>
<button class="px-3 py-1 bg-blue-100 text-blue-700 rounded-full text-xs font-medium hover:bg-blue-200">Set next steps</button>
<button class="px-3 py-1 bg-blue-100 text-blue-700 rounded-full text-xs font-medium hover:bg-blue-200">Add to calendar</button>
<button class="px-3 py-1 bg-blue-100 text-blue-700 rounded-full text-xs font-medium hover:bg-blue-200">File documents</button>
</div>
</div>
<!-- File Attachment Modal -->
<div id="file-modal" class="hidden mt-3 bg-white border border-gray-200 rounded-lg shadow-sm p-4 fade-in">
<div class="flex items-center justify-between mb-3">
<h4 class="text-sm font-medium text-gray-800">Attach Files</h4>
<button id="close-file-modal" class="text-gray-400 hover:text-gray-600">
<i class="fas fa-times"></i>
</button>
</div>
<div class="grid grid-cols-2 gap-3 mb-3">
<button class="flex items-center justify-center p-3 border border-gray-200 rounded-md hover:bg-gray-50">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/ab/Google_Drive_icon.svg/1024px-Google_Drive_icon.svg.png" class="h-5 w-5 mr-2" alt="">
<span class="text-sm">Google Drive</span>
</button>
<button class="flex items-center justify-center p-3 border border-gray-200 rounded-md hover:bg-gray-50">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5f/Microsoft_Office_logo_%282019%E2%80%93present%29.svg/1200px-Microsoft_Office_logo_%282019%E2%80%93present%29.svg.png" class="h-5 w-5 mr-2" alt="">
<span class="text-sm">OneDrive</span>
</button>
</div>
<div class="border-t border-gray-200 pt-3">
<label class="block text-sm font-medium text-gray-700 mb-1">Or upload from device</label>
<div class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-md">
<div class="space-y-1 text-center">
<div class="flex text-sm text-gray-600">
<label class="relative cursor-pointer bg-white rounded-md font-medium text-blue-600 hover:text-blue-500 focus-within:outline-none">
<span>Upload a file</span>
<input type="file" class="sr-only">
</label>
<p class="pl-1">or drag and drop</p>
</div>
<p class="text-xs text-gray-500">PDF, DOCX, PPTX up to 10MB</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
// Toggle search modal
document.getElementById('search-btn').addEventListener('click', function() {
const modal = document.getElementById('search-modal');
modal.classList.toggle('hidden');
});
// Close search modal when clicking outside
document.addEventListener('click', function(event) {
const searchBtn = document.getElementById('search-btn');
const searchModal = document.getElementById('search-modal');
if (!searchBtn.contains(event.target) && !searchModal.contains(event.target)) {
searchModal.classList.add('hidden');
}
});
// Show assistant prompt when typing
const chatInput = document.getElementById('chat-input');
const assistantPrompt = document.getElementById('assistant-prompt');
chatInput.addEventListener('input', function() {
if (this.value.length > 10) {
assistantPrompt.classList.remove('hidden');
} else {
assistantPrompt.classList.add('hidden');
}
});
// Send message animation
document.getElementById('send-btn').addEventListener('click', function() {
if (chatInput.value.trim() !== '') {
this.innerHTML = '<i class="fas fa-circle-notch fa-spin"></i>';
this.classList.add('pulse');
// Simulate sending
setTimeout(() => {
this.innerHTML = '<i class="fas fa-check"></i>';
this.classList.remove('pulse');
chatInput.value = '';
assistantPrompt.classList.add('hidden');
// Reset after 2 seconds
setTimeout(() => {
this.innerHTML = '<i class="fas fa-paper-plane"></i>';
}, 2000);
}, 1000);
}
});
// Example of quick search functionality
const searchInput = document.querySelector('#search-modal input');
searchInput.addEventListener('keyup', function(e) {
if (e.key === 'Enter') {
const query = this.value.toLowerCase();
const resultsContainer = document.querySelector('.search-results');
// Clear previous results
resultsContainer.innerHTML = '';
// Simulate search results
if (query.includes('pepsi') || query.includes('pepsico')) {
resultsContainer.innerHTML = `
<div class="p-3 border-b border-gray-200 hover:bg-gray-50 cursor-pointer">
<div class="flex items-center">
<div class="flex-shrink-0 h-10 w-10 rounded-full bg-red-100 flex items-center justify-center">
<i class="fas fa-copyright text-red-500"></i>
</div>
<div class="ml-4">
<p class="text-sm font-medium text-gray-900">PepsiCo</p>
<p class="text-xs text-gray-500">Last contact: Today</p>
</div>
</div>
<div class="mt-2 text-xs text-gray-700">
<p>Marketing Manager: Jessica Smith (jessica.smith@pepsico.com)</p>
<p class="mt-1">Last proposal: $350K summer campaign</p>
</div>
<div class="mt-3 pt-3 border-t border-gray-200">
<p class="text-xs font-medium text-gray-500 mb-1">LINKED DOCUMENTS</p>
<div class="flex space-x-2">
<div class="flex items-center text-xs text-gray-600">
<img src="https://cdn-icons-png.flaticon.com/512/136/136528.png" class="h-4 w-4 mr-1" alt="">
<span>Proposal.docx</span>
</div>
<div class="flex items-center text-xs text-gray-600">
<img src="https://cdn-icons-png.flaticon.com/512/337/337946.png" class="h-4 w-4 mr-1" alt="">
<span>Contract.pdf</span>
</div>
</div>
</div>
</div>
`;
} else if (query.includes('email') && query.includes('syntax')) {
resultsContainer.innerHTML = `
<div class="p-3 border-b border-gray-200 hover:bg-gray-50 cursor-pointer">
<p class="text-sm font-medium text-gray-900">Email Templates</p>
<div class="mt-2 space-y-2">
<div class="text-xs p-2 bg-gray-100 rounded">
<p class="font-medium">Initial Outreach:</p>
<p class="mt-1">Subject: Exciting opportunity with [Your Company]</p>
<p class="mt-1">Hi [First Name], I wanted to share how we've helped similar companies...</p>
<div class="mt-2 flex items-center text-gray-500">
<img src="https://cdn-icons-png.flaticon.com/512/136/136528.png" class="h-3 w-3 mr-1" alt="">
<span class="text-xxs">Stored in: Templates/Email/Outreach.docx</span>
</div>
</div>
<div class="text-xs p-2 bg-gray-100 rounded">
<p class="font-medium">Follow-up:</p>
<p class="mt-1">Subject: Following up on our conversation</p>
<p class="mt-1">Hi [First Name], Just checking in to see if you had any questions...</p>
<div class="mt-2 flex items-center text-gray-500">
<img src="https://cdn-icons-png.flaticon.com/512/136/136528.png" class="h-3 w-3 mr-1" alt="">
<span class="text-xxs">Stored in: Templates/Email/Follow-up.docx</span>
</div>
</div>
</div>
</div>
`;
} else if (query.includes('hyundai') || query.includes('last proposal')) {
resultsContainer.innerHTML = `
<div class="p-3 border-b border-gray-200 hover:bg-gray-50 cursor-pointer">
<div class="flex items-center">
<div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center">
<i class="fas fa-car text-blue-500"></i>
</div>
<div class="ml-4">
<p class="text-sm font-medium text-gray-900">Hyundai</p>
<p class="text-xs text-gray-500">Last proposal: March 15, 2023</p>
</div>
</div>
<div class="mt-2 text-xs text-gray-700">
<p>Contact: Michael Cho (michael.cho@hyundai.com)</p>
<p class="mt-1">Status: Under review with procurement</p>
</div>
<div class="mt-3 pt-3 border-t border-gray-200">
<p class="text-xs font-medium text-gray-500 mb-1">LINKED DOCUMENTS</p>
<div class="grid grid-cols-2 gap-2">
<div class="flex items-center text-xs text-gray-600">
<img src="https://cdn-icons-png.flaticon.com/512/136/136528.png" class="h-4 w-4 mr-1" alt="">
<span>Q2_Media_Plan.docx</span>
</div>
<div class="flex items-center text-xs text-gray-600">
<img src="https://cdn-icons-png.flaticon.com/512/337/337946.png" class="h-4 w-4 mr-1" alt="">
<span>Kia_Case_Study.pdf</span>
</div>
<div class="flex items-center text-xs text-gray-600">
<img src="https://cdn-icons-png.flaticon.com/512/337/337932.png" class="h-4 w-4 mr-1" alt="">
<span>Pitch_Deck.pptx</span>
</div>
<div class="flex items-center text-xs text-gray-600">
<img src="https://cdn-icons-png.flaticon.com/512/136/136528.png" class="h-4 w-4 mr-1" alt="">
<span>Email_Thread.docx</span>
</div>
</div>
</div>
</div>
`;
} else {
resultsContainer.innerHTML = `
<div class="p-3 text-sm text-gray-500">
Try more specific queries like:
<ul class="list-disc pl-5 mt-1 space-y-1">
<li>"email syntax for initiative agency"</li>
<li>"last contact with PepsiCo"</li>
<li>"when was our last proposal to Hyundai"</li>
<li>"list our auto industry clients"</li>
<li>"show me documents for Amazon RFP"</li>
</ul>
</div>
`;
}
}
});
// Toggle linked files visibility
document.getElementById('show-files-btn').addEventListener('click', function() {
const fileSections = document.querySelectorAll('[id^="linked-files-"]');
fileSections.forEach(section => {
section.classList.toggle('hidden');
});
this.innerHTML = this.innerHTML.includes('Show') ?
'<i class="fas fa-folder mr-1"></i> Hide Linked Files' :
'<i class="fas fa-folder-open mr-1"></i> Show Linked Files';
});
// File attachment modal
const attachFileBtn = document.getElementById('attach-file-btn');
const fileModal = document.getElementById('file-modal');
const closeFileModal = document.getElementById('close-file-modal');
attachFileBtn.addEventListener('click', function() {
fileModal.classList.remove('hidden');
});
closeFileModal.addEventListener('click', function() {
fileModal.classList.add('hidden');
});
</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=Its3sticks/space1" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>