Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Meeting Minutes Pro | Real-Time Collaboration</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> | |
| .sidebar-collapsed { | |
| width: 60px; | |
| } | |
| .sidebar-expanded { | |
| width: 260px; | |
| } | |
| .transcription-active { | |
| box-shadow: 0 0 0 2px #3b82f6; | |
| } | |
| .note-card:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); | |
| } | |
| .waveform { | |
| height: 30px; | |
| background: linear-gradient(90deg, #3b82f6 0%, #3b82f6 var(--progress, 0%), #e5e7eb var(--progress, 0%), #e5e7eb 100%); | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0.5; } | |
| } | |
| .pulse { | |
| animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; | |
| } | |
| .page { | |
| display: none; | |
| } | |
| .page.active { | |
| display: block; | |
| } | |
| .highlight-speaker { | |
| background-color: #eff6ff; | |
| border-left: 3px solid #3b82f6; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 text-gray-800 font-sans"> | |
| <div class="flex h-screen overflow-hidden"> | |
| <!-- Sidebar --> | |
| <div id="sidebar" class="sidebar-expanded bg-white shadow-md flex flex-col transition-all duration-300 ease-in-out"> | |
| <div class="p-4 border-b border-gray-200 flex items-center justify-between"> | |
| <div class="flex items-center space-x-2"> | |
| <i class="fas fa-clock text-blue-500 text-xl"></i> | |
| <span id="app-name" class="font-bold text-lg">Minutes Pro</span> | |
| </div> | |
| <button id="toggle-sidebar" class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-chevron-left"></i> | |
| </button> | |
| </div> | |
| <div class="flex-1 overflow-y-auto"> | |
| <div class="p-4"> | |
| <button id="new-meeting-btn" class="w-full bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded-lg flex items-center justify-center space-x-2"> | |
| <i class="fas fa-plus"></i> | |
| <span>New Meeting</span> | |
| </button> | |
| </div> | |
| <div class="px-4 py-2"> | |
| <h3 class="text-xs font-semibold text-gray-500 uppercase tracking-wider">Today</h3> | |
| <ul class="mt-2 space-y-1"> | |
| <li> | |
| <a href="#" class="nav-link flex items-center px-2 py-2 text-sm rounded-md active-meeting" data-page="meeting"> | |
| <i class="fas fa-microphone mr-3 text-blue-500"></i> | |
| <span>Team Standup</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="nav-link flex items-center px-2 py-2 text-sm rounded-md hover:bg-gray-100" data-page="meeting"> | |
| <i class="fas fa-check-circle mr-3 text-green-500"></i> | |
| <span>Project Review</span> | |
| </a> | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="px-4 py-2 mt-4"> | |
| <h3 class="text-xs font-semibold text-gray-500 uppercase tracking-wider">Upcoming</h3> | |
| <ul class="mt-2 space-y-1"> | |
| <li> | |
| <a href="#" class="nav-link flex items-center px-2 py-2 text-sm rounded-md hover:bg-gray-100" data-page="meeting"> | |
| <i class="fas fa-calendar-alt mr-3 text-purple-500"></i> | |
| <span>Client Demo (Tomorrow)</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="nav-link flex items-center px-2 py-2 text-sm rounded-md hover:bg-gray-100" data-page="meeting"> | |
| <i class="fas fa-calendar-alt mr-3 text-purple-500"></i> | |
| <span>Sprint Planning (Fri)</span> | |
| </a> | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="px-4 py-2 mt-4"> | |
| <h3 class="text-xs font-semibold text-gray-500 uppercase tracking-wider">Templates</h3> | |
| <ul class="mt-2 space-y-1"> | |
| <li> | |
| <a href="#" class="nav-link flex items-center px-2 py-2 text-sm rounded-md hover:bg-gray-100" data-page="templates"> | |
| <i class="fas fa-file-alt mr-3 text-yellow-500"></i> | |
| <span>Standup Meeting</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="nav-link flex items-center px-2 py-2 text-sm rounded-md hover:bg-gray-100" data-page="templates"> | |
| <i class="fas fa-file-alt mr-3 text-yellow-500"></i> | |
| <span>Retrospective</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="nav-link flex items-center px-2 py-2 text-sm rounded-md hover:bg-gray-100" data-page="templates"> | |
| <i class="fas fa-file-alt mr-3 text-yellow-500"></i> | |
| <span>Board Meeting</span> | |
| </a> | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="px-4 py-2 mt-4"> | |
| <h3 class="text-xs font-semibold text-gray-500 uppercase tracking-wider">Settings</h3> | |
| <ul class="mt-2 space-y-1"> | |
| <li> | |
| <a href="#" class="nav-link flex items-center px-2 py-2 text-sm rounded-md hover:bg-gray-100" data-page="settings"> | |
| <i class="fas fa-cog mr-3 text-gray-500"></i> | |
| <span>Preferences</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="nav-link flex items-center px-2 py-2 text-sm rounded-md hover:bg-gray-100" data-page="integrations"> | |
| <i class="fas fa-plug mr-3 text-blue-400"></i> | |
| <span>Integrations</span> | |
| </a> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="p-4 border-t border-gray-200"> | |
| <div class="flex items-center"> | |
| <div class="w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center text-white font-semibold">JD</div> | |
| <div class="ml-3"> | |
| <p class="text-sm font-medium">John Doe</p> | |
| <p class="text-xs text-gray-500">Free Plan</p> | |
| </div> | |
| <button class="ml-auto text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-cog"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="flex-1 flex flex-col overflow-hidden"> | |
| <!-- Meeting Page --> | |
| <div id="meeting-page" class="page active flex-1 flex flex-col overflow-hidden"> | |
| <!-- Top Bar --> | |
| <header class="bg-white shadow-sm z-10"> | |
| <div class="px-6 py-3 flex items-center justify-between"> | |
| <div class="flex items-center space-x-4"> | |
| <h1 class="text-xl font-semibold">Team Standup Meeting</h1> | |
| <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full">Live</span> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <button class="flex items-center space-x-1 text-gray-600 hover:text-gray-900"> | |
| <i class="fas fa-calendar-alt"></i> | |
| <span>Add to Calendar</span> | |
| </button> | |
| <button class="flex items-center space-x-1 text-gray-600 hover:text-gray-900"> | |
| <i class="fas fa-user-plus"></i> | |
| <span>Invite</span> | |
| </button> | |
| <div class="relative"> | |
| <button id="export-menu-button" class="flex items-center space-x-1 bg-blue-500 text-white px-3 py-1 rounded-lg hover:bg-blue-600"> | |
| <i class="fas fa-file-export"></i> | |
| <span>Export</span> | |
| <i class="fas fa-chevron-down ml-1 text-xs"></i> | |
| </button> | |
| <div id="export-menu" class="hidden absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg z-20"> | |
| <div class="py-1"> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"><i class="fas fa-file-pdf mr-2 text-red-500"></i> PDF</a> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"><i class="fas fa-file-word mr-2 text-blue-500"></i> Word</a> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"><i class="fab fa-google-drive mr-2 text-blue-400"></i> Google Docs</a> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"><i class="fas fa-file-alt mr-2 text-gray-500"></i> Text</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content Area --> | |
| <main class="flex-1 overflow-hidden flex"> | |
| <!-- Transcription Panel --> | |
| <div class="w-2/5 border-r border-gray-200 bg-white flex flex-col"> | |
| <div class="p-4 border-b border-gray-200 flex items-center justify-between"> | |
| <h2 class="font-semibold">Live Transcription</h2> | |
| <div class="flex items-center space-x-2"> | |
| <button id="transcription-control" class="bg-blue-500 text-white px-3 py-1 rounded-lg flex items-center space-x-1"> | |
| <i class="fas fa-microphone"></i> | |
| <span>Start</span> | |
| </button> | |
| <button class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-cog"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div id="transcription-container" class="flex-1 overflow-y-auto p-4 space-y-4"> | |
| <div class="waveform rounded mb-2"></div> | |
| <div class="transcription-entry bg-blue-50 p-3 rounded-lg"> | |
| <div class="flex items-start"> | |
| <div class="w-8 h-8 rounded-full bg-purple-500 flex items-center justify-center text-white font-semibold mr-3">SM</div> | |
| <div class="flex-1"> | |
| <div class="flex items-center justify-between"> | |
| <span class="font-medium">Sarah Miller</span> | |
| <span class="text-xs text-gray-500">10:02 AM</span> | |
| </div> | |
| <p class="mt-1">Good morning everyone. Let's start with updates from the design team.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="transcription-entry p-3 rounded-lg"> | |
| <div class="flex items-start"> | |
| <div class="w-8 h-8 rounded-full bg-green-500 flex items-center justify-center text-white font-semibold mr-3">AJ</div> | |
| <div class="flex-1"> | |
| <div class="flex items-center justify-between"> | |
| <span class="font-medium">Alex Johnson</span> | |
| <span class="text-xs text-gray-500">10:03 AM</span> | |
| </div> | |
| <p class="mt-1">We've completed the wireframes for the new dashboard. I'll share them in the channel after this meeting.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="transcription-entry p-3 rounded-lg"> | |
| <div class="flex items-start"> | |
| <div class="w-8 h-8 rounded-full bg-yellow-500 flex items-center justify-center text-white font-semibold mr-3">RK</div> | |
| <div class="flex-1"> | |
| <div class="flex items-center justify-between"> | |
| <span class="font-medium">Raj Kumar</span> | |
| <span class="text-xs text-gray-500">10:05 AM</span> | |
| </div> | |
| <p class="mt-1">The backend API is about 80% complete. We're just finishing up the authentication layer.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="transcription-entry bg-blue-50 p-3 rounded-lg"> | |
| <div class="flex items-start"> | |
| <div class="w-8 h-8 rounded-full bg-purple-500 flex items-center justify-center text-white font-semibold mr-3">SM</div> | |
| <div class="flex-1"> | |
| <div class="flex items-center justify-between"> | |
| <span class="font-medium">Sarah Miller</span> | |
| <span class="text-xs text-gray-500">10:07 AM</span> | |
| </div> | |
| <p class="mt-1">Great progress everyone. Let's aim to have a demo ready by Friday for the client review.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="transcription-entry p-3 rounded-lg"> | |
| <div class="flex items-start"> | |
| <div class="w-8 h-8 rounded-full bg-red-500 flex items-center justify-center text-white font-semibold mr-3">TP</div> | |
| <div class="flex-1"> | |
| <div class="flex items-center justify-between"> | |
| <span class="font-medium">Taylor Park</span> | |
| <span class="text-xs text-gray-500">10:08 AM</span> | |
| </div> | |
| <p class="mt-1">I'll coordinate with QA to make sure we have test cases ready for the new features.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-4 bg-gray-100 rounded-lg mt-4"> | |
| <div class="flex items-center"> | |
| <div class="w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center text-white font-semibold mr-3">AI</div> | |
| <div> | |
| <span class="font-medium">AI Summary</span> | |
| <p class="mt-1 text-sm">Key points: Design team completed wireframes, backend at 80%, aiming for Friday demo, QA coordination needed.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-4 border-t border-gray-200"> | |
| <div class="flex items-center space-x-2"> | |
| <input id="comment-input" type="text" placeholder="Add comment or action item..." class="flex-1 border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"> | |
| <button id="add-comment-btn" class="bg-blue-500 text-white p-2 rounded-lg hover:bg-blue-600"> | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Notes Panel --> | |
| <div class="flex-1 flex flex-col bg-gray-50"> | |
| <div class="p-4 border-b border-gray-200 bg-white flex items-center justify-between"> | |
| <h2 class="font-semibold">Meeting Notes</h2> | |
| <div class="flex items-center space-x-2"> | |
| <button class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-history"></i> | |
| </button> | |
| <button class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="flex-1 overflow-y-auto p-6"> | |
| <div class="max-w-3xl mx-auto"> | |
| <div class="mb-8"> | |
| <h1 class="text-2xl font-bold mb-2">Team Standup - June 10, 2023</h1> | |
| <div class="flex items-center text-sm text-gray-500 space-x-4"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-calendar-alt mr-1"></i> | |
| <span>10:00 AM - 10:30 AM</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="fas fa-users mr-1"></i> | |
| <span>5 participants</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mb-8"> | |
| <h2 class="text-lg font-semibold mb-3 flex items-center"> | |
| <i class="fas fa-check-circle mr-2 text-green-500"></i> | |
| Action Items | |
| </h2> | |
| <div id="action-items-container" class="space-y-3"> | |
| <div class="note-card bg-white p-4 rounded-lg shadow-sm border border-gray-200 transition-all duration-200"> | |
| <div class="flex items-start"> | |
| <div class="flex items-center h-5"> | |
| <input type="checkbox" class="h-4 w-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500"> | |
| </div> | |
| <div class="ml-3 flex-1"> | |
| <div class="flex items-center justify-between"> | |
| <span class="font-medium">Share wireframes in channel</span> | |
| <span class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded-full">Design</span> | |
| </div> | |
| <p class="text-sm text-gray-500 mt-1">Alex to share the completed dashboard wireframes with the team</p> | |
| <div class="mt-2 flex items-center text-xs text-gray-500"> | |
| <i class="fas fa-user mr-1"></i> | |
| <span class="mr-3">Alex Johnson</span> | |
| <i class="fas fa-calendar mr-1"></i> | |
| <span>Due: Today EOD</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="note-card bg-white p-4 rounded-lg shadow-sm border border-gray-200 transition-all duration-200"> | |
| <div class="flex items-start"> | |
| <div class="flex items-center h-5"> | |
| <input type="checkbox" class="h-4 w-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500"> | |
| </div> | |
| <div class="ml-3 flex-1"> | |
| <div class="flex items-center justify-between"> | |
| <span class="font-medium">Prepare test cases</span> | |
| <span class="text-xs bg-purple-100 text-purple-800 px-2 py-1 rounded-full">QA</span> | |
| </div> | |
| <p class="text-sm text-gray-500 mt-1">Coordinate with QA team for new feature testing</p> | |
| <div class="mt-2 flex items-center text-xs text-gray-500"> | |
| <i class="fas fa-user mr-1"></i> | |
| <span class="mr-3">Taylor Park</span> | |
| <i class="fas fa-calendar mr-1"></i> | |
| <span>Due: Wed</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="note-card bg-white p-4 rounded-lg shadow-sm border border-gray-200 transition-all duration-200"> | |
| <div class="flex items-start"> | |
| <div class="flex items-center h-5"> | |
| <input type="checkbox" class="h-4 w-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500"> | |
| </div> | |
| <div class="ml-3 flex-1"> | |
| <div class="flex items-center justify-between"> | |
| <span class="font-medium">Complete auth layer</span> | |
| <span class="text-xs bg-yellow-100 text-yellow-800 px-2 py-1 rounded-full">Backend</span> | |
| </div> | |
| <p class="text-sm text-gray-500 mt-1">Finish authentication implementation for API</p> | |
| <div class="mt-2 flex items-center text-xs text-gray-500"> | |
| <i class="fas fa-user mr-1"></i> | |
| <span class="mr-3">Raj Kumar</span> | |
| <i class="fas fa-calendar mr-1"></i> | |
| <span>Due: Thu</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mb-8"> | |
| <h2 class="text-lg font-semibold mb-3 flex items-center"> | |
| <i class="fas fa-sticky-note mr-2 text-blue-500"></i> | |
| Notes | |
| </h2> | |
| <div id="notes-container" class="space-y-4"> | |
| <div class="note-card bg-white p-4 rounded-lg shadow-sm border border-gray-200 transition-all duration-200"> | |
| <div class="flex items-center justify-between mb-2"> | |
| <span class="text-sm font-medium text-gray-700">Design Updates</span> | |
| <div class="flex space-x-2"> | |
| <button class="text-gray-400 hover:text-gray-600"> | |
| <i class="fas fa-pencil-alt text-xs"></i> | |
| </button> | |
| <button class="text-gray-400 hover:text-gray-600"> | |
| <i class="fas fa-trash-alt text-xs"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <p class="text-gray-600">Dashboard wireframes completed. Includes new analytics section and improved navigation. Need feedback from product team.</p> | |
| <div class="mt-3 flex items-center text-xs text-gray-500"> | |
| <i class="fas fa-user mr-1"></i> | |
| <span class="mr-3">Alex Johnson</span> | |
| <i class="fas fa-clock mr-1"></i> | |
| <span>10:03 AM</span> | |
| </div> | |
| </div> | |
| <div class="note-card bg-white p-4 rounded-lg shadow-sm border border-gray-200 transition-all duration-200"> | |
| <div class="flex items-center justify-between mb-2"> | |
| <span class="text-sm font-medium text-gray-700">Backend Progress</span> | |
| <div class="flex space-x-2"> | |
| <button class="text-gray-400 hover:text-gray-600"> | |
| <i class="fas fa-pencil-alt text-xs"></i> | |
| </button> | |
| <button class="text-gray-400 hover:text-gray-600"> | |
| <i class="fas fa-trash-alt text-xs"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <p class="text-gray-600">API development at 80%. Authentication layer is the remaining major component. Expect completion by Thursday.</p> | |
| <div class="mt-3 flex items-center text-xs text-gray-500"> | |
| <i class="fas fa-user mr-1"></i> | |
| <span class="mr-3">Raj Kumar</span> | |
| <i class="fas fa-clock mr-1"></i> | |
| <span>10:05 AM</span> | |
| </div> | |
| </div> | |
| <div class="note-card bg-white p-4 rounded-lg shadow-sm border border-gray-200 transition-all duration-200"> | |
| <div class="flex items-center justify-between mb-2"> | |
| <span class="text-sm font-medium text-gray-700">Demo Timeline</span> | |
| <div class="flex space-x-2"> | |
| <button class="text-gray-400 hover:text-gray-600"> | |
| <i class="fas fa-pencil-alt text-xs"></i> | |
| </button> | |
| <button class="text-gray-400 hover:text-gray-600"> | |
| <i class="fas fa-trash-alt text-xs"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <p class="text-gray-600">Target Friday for client demo. Need all components integrated by Thursday EOD for testing.</p> | |
| <div class="mt-3 flex items-center text-xs text-gray-500"> | |
| <i class="fas fa-user mr-1"></i> | |
| <span class="mr-3">Sarah Miller</span> | |
| <i class="fas fa-clock mr-1"></i> | |
| <span>10:07 AM</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mb-8"> | |
| <h2 class="text-lg font-semibold mb-3 flex items-center"> | |
| <i class="fas fa-lightbulb mr-2 text-yellow-500"></i> | |
| AI-Generated Insights | |
| </h2> | |
| <div class="bg-yellow-50 border border-yellow-100 rounded-lg p-4"> | |
| <div class="flex items-start"> | |
| <div class="w-8 h-8 rounded-full bg-yellow-100 flex items-center justify-center text-yellow-600 mr-3"> | |
| <i class="fas fa-robot"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-medium mb-2">Key Discussion Points</h3> | |
| <ul class="list-disc pl-5 space-y-1 text-sm"> | |
| <li>Design team has completed dashboard wireframes</li> | |
| <li>Backend API progress at 80%, authentication pending</li> | |
| <li>Client demo targeted for Friday</li> | |
| <li>QA coordination needed for test cases</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-4"> | |
| <div class="flex items-center mb-2"> | |
| <i class="fas fa-plus-circle text-blue-500 mr-2"></i> | |
| <span class="font-medium">Add New Note</span> | |
| </div> | |
| <textarea id="new-note-input" class="w-full border border-gray-300 rounded-lg p-3 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" rows="3" placeholder="Type your notes here..."></textarea> | |
| <div class="mt-2 flex justify-between items-center"> | |
| <div class="flex space-x-2"> | |
| <button class="px-3 py-1 bg-gray-100 text-gray-700 rounded-lg text-sm hover:bg-gray-200"> | |
| <i class="fas fa-tag mr-1"></i> Add Tag | |
| </button> | |
| <button class="px-3 py-1 bg-gray-100 text-gray-700 rounded-lg text-sm hover:bg-gray-200"> | |
| <i class="fas fa-user-plus mr-1"></i> Assign | |
| </button> | |
| </div> | |
| <button id="save-note-btn" class="px-4 py-1 bg-blue-500 text-white rounded-lg hover:bg-blue-600"> | |
| Save | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Right Panel --> | |
| <div class="w-80 border-l border-gray-200 bg-white flex flex-col"> | |
| <div class="p-4 border-b border-gray-200"> | |
| <h2 class="font-semibold">Meeting Details</h2> | |
| </div> | |
| <div class="flex-1 overflow-y-auto p-4"> | |
| <div class="space-y-6"> | |
| <div> | |
| <h3 class="text-sm font-medium text-gray-500 uppercase tracking-wider mb-2">Participants</h3> | |
| <div class="space-y-2"> | |
| <div class="flex items-center"> | |
| <div class="w-8 h-8 rounded-full bg-purple-500 flex items-center justify-center text-white font-semibold mr-3">SM</div> | |
| <div> | |
| <p class="text-sm font-medium">Sarah Miller</p> | |
| <p class="text-xs text-gray-500">Host</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-8 h-8 rounded-full bg-green-500 flex items-center justify-center text-white font-semibold mr-3">AJ</div> | |
| <div> | |
| <p class="text-sm font-medium">Alex Johnson</p> | |
| <p class="text-xs text-gray-500">Design Lead</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-8 h-8 rounded-full bg-yellow-500 flex items-center justify-center text-white font-semibold mr-3">RK</div> | |
| <div> | |
| <p class="text-sm font-medium">Raj Kumar</p> | |
| <p class="text-xs text-gray-500">Backend Dev</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-8 h-8 rounded-full bg-red-500 flex items-center justify-center text-white font-semibold mr-3">TP</div> | |
| <div> | |
| <p class="text-sm font-medium">Taylor Park</p> | |
| <p class="text-xs text-gray-500">QA Lead</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center text-white font-semibold mr-3">JD</div> | |
| <div> | |
| <p class="text-sm font-medium">John Doe</p> | |
| <p class="text-xs text-gray-500">Product Manager</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-sm font-medium text-gray-500 uppercase tracking-wider mb-2">Meeting Info</h3> | |
| <div class="space-y-2"> | |
| <div class="flex items-center text-sm"> | |
| <i class="fas fa-calendar-alt mr-2 text-gray-400"></i> | |
| <span>June 10, 2023</span> | |
| </div> | |
| <div class="flex items-center text-sm"> | |
| <i class="fas fa-clock mr-2 text-gray-400"></i> | |
| <span>10:00 AM - 10:30 AM (30 mins)</span> | |
| </div> | |
| <div class="flex items-center text-sm"> | |
| <i class="fas fa-link mr-2 text-gray-400"></i> | |
| <a href="#" class="text-blue-500 hover:underline">meet.minutespro.com/standup</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-sm font-medium text-gray-500 uppercase tracking-wider mb-2">Tags</h3> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="px-2 py-1 bg-blue-100 text-blue-800 text-xs rounded-full">Standup</span> | |
| <span class="px-2 py-1 bg-green-100 text-green-800 text-xs rounded-full">Design</span> | |
| <span class="px-2 py-1 bg-yellow-100 text-yellow-800 text-xs rounded-full">Backend</span> | |
| <span class="px-2 py-1 bg-purple-100 text-purple-800 text-xs rounded-full">QA</span> | |
| <span class="px-2 py-1 bg-pink-100 text-pink-800 text-xs rounded-full">Demo</span> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-sm font-medium text-gray-500 uppercase tracking-wider mb-2">Attachments</h3> | |
| <div class="space-y-2"> | |
| <div class="flex items-center p-2 border border-gray-200 rounded-lg"> | |
| <i class="fas fa-file-image text-blue-500 mr-2"></i> | |
| <div class="flex-1 truncate"> | |
| <p class="text-sm truncate">dashboard-wireframes.pdf</p> | |
| <p class="text-xs text-gray-500">2.4 MB</p> | |
| </div> | |
| <button class="text-gray-400 hover:text-gray-600"> | |
| <i class="fas fa-download"></i> | |
| </button> | |
| </div> | |
| <div class="flex items-center p-2 border border-gray-200 rounded-lg"> | |
| <i class="fas fa-file-code text-green-500 mr-2"></i> | |
| <div class="flex-1 truncate"> | |
| <p class="text-sm truncate">api-specs.md</p> | |
| <p class="text-xs text-gray-500">156 KB</p> | |
| </div> | |
| <button class="text-gray-400 hover:text-gray-600"> | |
| <i class="fas fa-download"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-sm font-medium text-gray-500 uppercase tracking-wider mb-2">Related Meetings</h3> | |
| <div class="space-y-2"> | |
| <a href="#" class="block p-2 hover:bg-gray-50 rounded-lg"> | |
| <p class="text-sm font-medium">Sprint Planning</p> | |
| <p class="text-xs text-gray-500">June 12, 10:00 AM</p> | |
| </a> | |
| <a href="#" class="block p-2 hover:bg-gray-50 rounded-lg"> | |
| <p class="text-sm font-medium">Client Demo</p> | |
| <p class="text-xs text-gray-500">June 14, 2:00 PM</p> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-4 border-t border-gray-200"> | |
| <button id="end-meeting-btn" class="w-full bg-gray-100 hover:bg-gray-200 text-gray-800 py-2 px-4 rounded-lg flex items-center justify-center space-x-2"> | |
| <i class="fas fa-stop-circle text-red-500"></i> | |
| <span>End Meeting</span> | |
| </button> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| <!-- Templates Page --> | |
| <div id="templates-page" class="page flex-1 flex flex-col overflow-hidden"> | |
| <header class="bg-white shadow-sm z-10"> | |
| <div class="px-6 py-3 flex items-center justify-between"> | |
| <h1 class="text-xl font-semibold">Meeting Templates</h1> | |
| <button id="new-template-btn" class="bg-blue-500 text-white px-4 py-1 rounded-lg hover:bg-blue-600"> | |
| <i class="fas fa-plus mr-1"></i> New Template | |
| </button> | |
| </div> | |
| </header> | |
| <main class="flex-1 overflow-y-auto bg-gray-50 p-6"> | |
| <div class="max-w-6xl mx-auto"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <!-- Template Card --> | |
| <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden hover:shadow-md transition-shadow duration-200"> | |
| <div class="p-4 border-b border-gray-200 bg-blue-50"> | |
| <div class="flex items-center justify-between"> | |
| <h3 class="font-semibold text-blue-800">Standup Meeting</h3> | |
| <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full">Default</span> | |
| </div> | |
| <p class="text-sm text-gray-600 mt-1">Daily team standup structure</p> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex items-center text-sm text-gray-500 mb-3"> | |
| <i class="fas fa-calendar-alt mr-2"></i> | |
| <span>Last used: Today</span> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="flex-1 bg-blue-500 text-white py-1 px-3 rounded text-sm hover:bg-blue-600"> | |
| <i class="fas fa-play mr-1"></i> Use | |
| </button> | |
| <button class="flex-1 bg-gray-100 text-gray-700 py-1 px-3 rounded text-sm hover:bg-gray-200"> | |
| <i class="fas fa-edit mr-1"></i> Edit | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Template Card --> | |
| <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden hover:shadow-md transition-shadow duration-200"> | |
| <div class="p-4 border-b border-gray-200 bg-purple-50"> | |
| <div class="flex items-center justify-between"> | |
| <h3 class="font-semibold text-purple-800">Retrospective</h3> | |
| <span class="bg-purple-100 text-purple-800 text-xs px-2 py-1 rounded-full">Team</span> | |
| </div> | |
| <p class="text-sm text-gray-600 mt-1">Sprint retrospective format</p> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex items-center text-sm text-gray-500 mb-3"> | |
| <i class="fas fa-calendar-alt mr-2"></i> | |
| <span>Last used: 2 days ago</span> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="flex-1 bg-blue-500 text-white py-1 px-3 rounded text-sm hover:bg-blue-600"> | |
| <i class="fas fa-play mr-1"></i> Use | |
| </button> | |
| <button class="flex-1 bg-gray-100 text-gray-700 py-1 px-3 rounded text-sm hover:bg-gray-200"> | |
| <i class="fas fa-edit mr-1"></i> Edit | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Template Card --> | |
| <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden hover:shadow-md transition-shadow duration-200"> | |
| <div class="p-4 border-b border-gray-200 bg-green-50"> | |
| <div class="flex items-center justify-between"> | |
| <h3 class="font-semibold text-green-800">Board Meeting</h3> | |
| <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full">Formal</span> | |
| </div> | |
| <p class="text-sm text-gray-600 mt-1">Formal board meeting structure</p> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex items-center text-sm text-gray-500 mb-3"> | |
| <i class="fas fa-calendar-alt mr-2"></i> | |
| <span>Last used: 1 week ago</span> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="flex-1 bg-blue-500 text-white py-1 px-3 rounded text-sm hover:bg-blue-600"> | |
| <i class="fas fa-play mr-1"></i> Use | |
| </button> | |
| <button class="flex-1 bg-gray-100 text-gray-700 py-1 px-3 rounded text-sm hover:bg-gray-200"> | |
| <i class="fas fa-edit mr-1"></i> Edit | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Template Card --> | |
| <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden hover:shadow-md transition-shadow duration-200"> | |
| <div class="p-4 border-b border-gray-200 bg-yellow-50"> | |
| <div class="flex items-center justify-between"> | |
| <h3 class="font-semibold text-yellow-800">Client Review</h3> | |
| <span class="bg-yellow-100 text-yellow-800 text-xs px-2 py-1 rounded-full">External</span> | |
| </div> | |
| <p class="text-sm text-gray-600 mt-1">Client project review format</p> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex items-center text-sm text-gray-500 mb-3"> | |
| <i class="fas fa-calendar-alt mr-2"></i> | |
| <span>Last used: 2 weeks ago</span> | |
| </极速赛车开奖直播官网 | |
| </html> |