Spaces:
Running
Running
create an admin site: 1. have the left menu, top menu. 2. can managment the ai recording device's voice datas. 3. can manage the users and manage them roles with viewer, manager, admin. 4. can view the voice detail, replay it in player and view the ζεθ΅·γγ texts, and θ¦η΄ them. 5. can manage the prompts for ζεθ΅·γγ
67837cf
verified
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>VoiceSync Admin Suite</title> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="components/navbar.js"></script> | |
| <script src="components/sidebar.js"></script> | |
| </head> | |
| <body class="bg-gray-50 font-sans"> | |
| <custom-navbar></custom-navbar> | |
| <div class="flex h-[calc(100vh-64px)]"> | |
| <custom-sidebar></custom-sidebar> | |
| <main class="flex-1 p-6 overflow-y-auto"> | |
| <div id="dashboard" class="content-section active"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h1 class="text-2xl font-bold text-gray-800">Dashboard Overview</h1> | |
| <div class="flex space-x-2"> | |
| <button class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition"> | |
| <i data-feather="plus" class="w-4 h-4 mr-2"></i> | |
| Add Recording | |
| </button> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8"> | |
| <div class="bg-white p-6 rounded-lg shadow-sm border border-gray-100"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-gray-500 text-sm">Total Recordings</p> | |
| <h3 class="text-2xl font-bold mt-1">1,248</h3> | |
| </div> | |
| <div class="p-3 rounded-full bg-blue-50 text-blue-600"> | |
| <i data-feather="mic"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white p-6 rounded-lg shadow-sm border border-gray-100"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-gray-500 text-sm">Pending Transcriptions</p> | |
| <h3 class="text-2xl font-bold mt-1">42</h3> | |
| </div> | |
| <div class="p-3 rounded-full bg-yellow-50 text-yellow-600"> | |
| <i data-feather="clock"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white p-6 rounded-lg shadow-sm border border-gray-100"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-gray-500 text-sm">Active Users</p> | |
| <h3 class="text-2xl font-bold mt-1">78</h3> | |
| </div> | |
| <div class="p-3 rounded-full bg-green-50 text-green-600"> | |
| <i data-feather="users"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white p-6 rounded-lg shadow-sm border border-gray-100"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-gray-500 text-sm">Storage Used</p> | |
| <h3 class="text-2xl font-bold mt-1">64%</h3> | |
| </div> | |
| <div class="p-3 rounded-full bg-purple-50 text-purple-600"> | |
| <i data-feather="hard-drive"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white p-6 rounded-lg shadow-sm border border-gray-100 mb-8"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h2 class="text-lg font-semibold text-gray-800">Recent Recordings</h2> | |
| <a href="#" class="text-blue-600 text-sm hover:underline">View All</a> | |
| </div> | |
| <div class="overflow-x-auto"> | |
| <table class="min-w-full divide-y divide-gray-200"> | |
| <thead class="bg-gray-50"> | |
| <tr> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">ID</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Duration</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th> | |
| </tr> | |
| </thead> | |
| <tbody class="bg-white divide-y divide-gray-200"> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#REC-2849</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-06-15 14:30</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">12:45</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Transcribed</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| <button class="text-blue-600 hover:text-blue-900 mr-3">View</button> | |
| <button class="text-red-600 hover:text-red-900">Delete</button> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#REC-2848</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-06-15 11:22</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">08:12</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">Processing</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| <button class="text-blue-600 hover:text-blue-900 mr-3">View</button> | |
| <button class="text-red-600 hover:text-red-900">Delete</button> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#REC-2847</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-06-14 09:45</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">23:18</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Transcribed</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| <button class="text-blue-600 hover:text-blue-900 mr-3">View</button> | |
| <button class="text-red-600 hover:text-red-900">Delete</button> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="recordings" class="content-section hidden"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h1 class="text-2xl font-bold text-gray-800">Voice Recordings</h1> | |
| <div class="flex space-x-2"> | |
| <button class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition"> | |
| <i data-feather="plus" class="w-4 h-4 mr-2"></i> | |
| Add Recording | |
| </button> | |
| </div> | |
| </div> | |
| <div class="bg-white p-6 rounded-lg shadow-sm border border-gray-100"> | |
| <div class="mb-4 flex justify-between items-center"> | |
| <div class="flex items-center space-x-4"> | |
| <div class="relative w-64"> | |
| <input type="text" placeholder="Search recordings..." class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| <i data-feather="search" class="absolute left-3 top-2.5 text-gray-400"></i> | |
| </div> | |
| <select class="border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| <option>All Status</option> | |
| <option>Processing</option> | |
| <option>Transcribed</option> | |
| <option>Error</option> | |
| </select> | |
| </div> | |
| <div> | |
| <button class="px-3 py-2 border border-gray-300 rounded-md hover:bg-gray-50"> | |
| <i data-feather="filter" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <table class="min-w-full divide-y divide-gray-200"> | |
| <thead class="bg-gray-50"> | |
| <tr> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">ID</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Device</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Duration</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th> | |
| </tr> | |
| </thead> | |
| <tbody class="bg-white divide-y divide-gray-200"> | |
| <tr class="hover:bg-gray-50"> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#REC-2849</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Device #A42</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-06-15 14:30</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">12:45</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Transcribed</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| <button class="text-blue-600 hover:text-blue-900 mr-3">View</button> | |
| <button class="text-red-600 hover:text-red-900">Delete</button> | |
| </td> | |
| </tr> | |
| <tr class="hover:bg-gray-50"> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#REC-2848</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Device #B12</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-06-15 11:22</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">08:12</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">Processing</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| <button class="text-blue-600 hover:text-blue-900 mr-3">View</button> | |
| <button class="text-red-600 hover:text-red-900">Delete</button> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| <div class="mt-4 flex items-center justify-between"> | |
| <div class="text-sm text-gray-500"> | |
| Showing <span class="font-medium">1</span> to <span class="font-medium">10</span> of <span class="font-medium">24</span> results | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="px-3 py-1 border border-gray-300 rounded-md bg-gray-50 text-gray-700 hover:bg-gray-100"> | |
| Previous | |
| </button> | |
| <button class="px-3 py-1 border border-gray-300 rounded-md bg-blue-600 text-white"> | |
| 1 | |
| </button> | |
| <button class="px-3 py-1 border border-gray-300 rounded-md hover:bg-gray-100"> | |
| 2 | |
| </button> | |
| <button class="px-3 py-1 border border-gray-300 rounded-md hover:bg-gray-100"> | |
| 3 | |
| </button> | |
| <button class="px-3 py-1 border border-gray-300 rounded-md hover:bg-gray-100"> | |
| Next | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="transcriptions" class="content-section hidden"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h1 class="text-2xl font-bold text-gray-800">Transcriptions</h1> | |
| <div class="flex space-x-2"> | |
| <button class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition"> | |
| <i data-feather="refresh-cw" class="w-4 h-4 mr-2"></i> | |
| Refresh All | |
| </button> | |
| </div> | |
| </div> | |
| <div class="bg-white p-6 rounded-lg shadow-sm border border-gray-100"> | |
| <div class="flex mb-6"> | |
| <div class="w-1/2 pr-4"> | |
| <h3 class="text-lg font-semibold mb-2">Original Recording</h3> | |
| <div class="bg-gray-50 p-4 rounded-md border border-gray-200"> | |
| <div class="flex items-center space-x-4 mb-4"> | |
| <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center"> | |
| <i data-feather="mic" class="text-blue-600"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium">Meeting with Client</p> | |
| <p class="text-sm text-gray-500">Duration: 12:45 | Recorded: 2023-06-15</p> | |
| </div> | |
| </div> | |
| <div class="relative"> | |
| <div class="h-2 bg-gray-200 rounded-full overflow-hidden"> | |
| <div class="h-full bg-blue-600" style="width: 30%"></div> | |
| </div> | |
| <div class="flex justify-between mt-1 text-xs text-gray-500"> | |
| <span>0:00</span> | |
| <span>12:45</span> | |
| </div> | |
| <div class="flex justify-center mt-4 space-x-4"> | |
| <button class="p-2 rounded-full bg-gray-100 hover:bg-gray-200"> | |
| <i data-feather="skip-back" class="w-4 h-4"></i> | |
| </button> | |
| <button class="p-2 rounded-full bg-blue-600 text-white hover:bg-blue-700"> | |
| <i data-feather="play" class="w-4 h-4"></i> | |
| </button> | |
| <button class="p-2 rounded-full bg-gray-100 hover:bg-gray-200"> | |
| <i data-feather="skip-forward" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="w-1/2 pl-4"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <h3 class="text-lg font-semibold">Transcription</h3> | |
| <div class="flex space-x-2"> | |
| <button class="px-3 py-1 bg-gray-100 rounded-md text-sm hover:bg-gray-200"> | |
| <i data-feather="copy" class="w-3 h-3 mr-1"></i> Copy | |
| </button> | |
| <button class="px-3 py-1 bg-gray-100 rounded-md text-sm hover:bg-gray-200"> | |
| <i data-feather="download" class="w-3 h-3 mr-1"></i> Export | |
| </button> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 p-4 rounded-md border border-gray-200 h-full"> | |
| <div class="prose max-w-none"> | |
| <p><strong>Client:</strong> Hello, I wanted to discuss the new project requirements.</p> | |
| <p><strong>You:</strong> Yes, I've reviewed the initial specs. We can definitely implement those features.</p> | |
| <p><strong>Client:</strong> Great. What timeline are we looking at?</p> | |
| <p><strong>You:</strong> Based on the complexity, I'd estimate about 6 weeks for the MVP.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-6"> | |
| <h3 class="text-lg font-semibold mb-2">Summary</h3> | |
| <div class="bg-gray-50 p-4 rounded-md border border-gray-200"> | |
| <div class="prose max-w-none"> | |
| <p>The meeting focused on project requirements for the new client engagement. Key points discussed:</p> | |
| <ul> | |
| <li>Confirmed implementation of specified features</li> | |
| <li>Agreed on 6-week timeline for MVP delivery</li> | |
| <li>Discussed resource allocation and team structure</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="users" class="content-section hidden"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h1 class="text-2xl font-bold text-gray-800">User Management</h1> | |
| <div class="flex space-x-2"> | |
| <button class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition"> | |
| <i data-feather="plus" class="w-4 h-4 mr-2"></i> | |
| Add User | |
| </button> | |
| </div> | |
| </div> | |
| <div class="bg-white p-6 rounded-lg shadow-sm border border-gray-100"> | |
| <table class="min-w-full divide-y divide-gray-200"> | |
| <thead class="bg-gray-50"> | |
| <tr> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Name</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Email</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Role</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Last Active</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th> | |
| </tr> | |
| </thead> | |
| <tbody class="bg-white divide-y divide-gray-200"> | |
| <tr class="hover:bg-gray-50"> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10"> | |
| <img class="h-10 w-10 rounded-full" src="http://static.photos/person/200x200/1" alt=""> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900">John Smith</div> | |
| <div class="text-sm text-gray-500">Admin</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">john.smith@example.com</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-purple-100 text-purple-800">Admin</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2 hours ago</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| <button class="text-blue-600 hover:text-blue-900 mr-3">Edit</button> | |
| <button class="text-red-600 hover:text-red-900">Delete</button> | |
| </td> | |
| </tr> | |
| <tr class="hover:bg-gray-50"> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10"> | |
| <img class="h-10 w-10 rounded-full" src="http://static.photos/person/200x200/2" alt=""> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900">Sarah Johnson</div> | |
| <div class="text-sm text-gray-500">Manager</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">sarah.j@example.com</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">Manager</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">1 day ago</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| <button class="text-blue-600 hover:text-blue-900 mr-3">Edit</button> | |
| <button class="text-red-600 hover:text-red-900">Delete</button> | |
| </td> | |
| </tr> | |
| <tr class="hover:bg-gray-50"> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10"> | |
| <img class="h-10 w-10 rounded-full" src="http://static.photos/person/200x200/3" alt=""> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900">Michael Chen</div> | |
| <div class="text-sm text-gray-500">Viewer</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">michael.c@example.com</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Viewer</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">3 days ago</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| <button class="text-blue-600 hover:text-blue-900 mr-3">Edit</button> | |
| <button class="text-red-600 hover:text-red-900">Delete</button> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| <div class="mt-4 flex items-center justify-between"> | |
| <div class="text-sm text-gray-500"> | |
| Showing <span class="font-medium">1</span> to <span class="font-medium">3</span> of <span class="font-medium">12</span> results | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="px-3 py-1 border border-gray-300 rounded-md bg-gray-50 text-gray-700 hover:bg-gray-100"> | |
| Previous | |
| </button> | |
| <button class="px-3 py-1 border border-gray-300 rounded-md bg-blue-600 text-white"> | |
| 1 | |
| </button> | |
| <button class="px-3 py-1 border border-gray-300 rounded-md hover:bg-gray-100"> | |
| 2 | |
| </button> | |
| <button class="px-3 py-1 border border-gray-300 rounded-md hover:bg-gray-100"> | |
| 3 | |
| </button> | |
| <button class="px-3 py-1 border border-gray-300 rounded-md hover:bg-gray-100"> | |
| Next | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="prompts" class="content-section hidden"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h1 class="text-2xl font-bold text-gray-800">Transcription Prompts</h1> | |
| <div class="flex space-x-2"> | |
| <button class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition"> | |
| <i data-feather="plus" class="w-4 h-4 mr-2"></i> | |
| Add Prompt | |
| </button> | |
| </div> | |
| </div> | |
| <div class="bg-white p-6 rounded-lg shadow-sm border border-gray-100"> | |
| <div class="mb-6"> | |
| <h3 class="text-lg font-semibold mb-2">Default Prompt</h3> | |
| <textarea class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" rows="5">Transcribe the following audio recording accurately. Include speaker identification when possible. Format the transcription with timestamps every 2 minutes.</textarea> | |
| <div class="mt-2 flex justify-end"> | |
| <button class="px-4 py-2 bg-gray-100 rounded-md hover:bg-gray-200 mr-2">Reset</button> | |
| <button class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700">Save Changes</button> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <h3 class="text-lg font-semibold mb-2">Summary Prompt</h3> | |
| <textarea class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" rows="5">Provide a concise summary of the key points from this meeting. Include decisions made, action items, and any important deadlines. Structure the summary with bullet points.</textarea> | |
| <div class="mt-2 flex justify-end"> | |
| <button class="px-4 py-2 bg-gray-100 rounded-md hover:bg-gray-200 mr-2">Reset</button> | |
| <button class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700">Save Changes</button> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <h3 class="text-lg font-semibold mb-2">Custom Prompts</h3> | |
| <table class="min-w-full divide-y divide-gray-200"> | |
| <thead class="bg-gray-50"> | |
| <tr> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Name</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Description</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th> | |
| </tr> | |
| </thead> | |
| <tbody class="bg-white divide-y divide-gray-200"> | |
| <tr class="hover:bg-gray-50"> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Technical Meeting</td> | |
| <td class="px-6 py-4 text-sm text-gray-500">Optimized for technical discussions with code snippets</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| <button class="text-blue-600 hover:text-blue-900 mr-3">Edit</button> | |
| <button class="text-red-600 hover:text-red-900">Delete</button> | |
| </td> | |
| </tr> | |
| <tr class="hover:bg-gray-50"> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Client Call</td> | |
| <td class="px-6 py-4 text-sm text-gray-500">Focuses on action items and client requests</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| <button class="text-blue-600 hover:text-blue-900 mr-3">Edit</button> | |
| <button class="text-red-600 hover:text-red-900">Delete</button> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="devices" class="content-section hidden"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h1 class="text-2xl font-bold text-gray-800">Recording Devices</h1> | |
| <div class="flex space-x-2"> | |
| <button class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition"> | |
| <i data-feather="plus" class="w-4 h-4 mr-2"></i> | |
| Add Device | |
| </button> | |
| </div> | |
| </div> | |
| <div class="bg-white p-6 rounded-lg shadow-sm border border-gray-100"> | |
| <table class="min-w-full divide-y divide-gray-200"> | |
| <thead class="bg-gray-50"> | |
| <tr> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Device ID</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Name</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Location</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Last Active</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th> | |
| </tr> | |
| </thead> | |
| <tbody class="bg-white divide-y divide-gray-200"> | |
| <tr class="hover:bg-gray-50"> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#DEV-A42</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Conference Room A</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Floor 3, Room 301</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Online</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">5 minutes ago</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| <button class="text-blue-600 hover:text-blue-900 mr-3">Configure</button> | |
| <button class="text-red-600 hover:text-red-900">Deactivate</button> | |
| </td> | |
| </tr> | |
| <tr class="hover:bg-gray-50"> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#DEV-B12</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Executive Office</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Floor 5, Room 501</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">Offline</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2 days ago</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| <button class="text-blue-600 hover:text-blue-900 mr-3">Configure</button> | |
| <button class="text-red-600 hover:text-red-900">Deactivate</button> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| <div class="mt-4 flex items-center justify-between"> | |
| <div class="text-sm text-gray-500"> | |
| Showing <span class="font-medium">1</span> to <span class="font-medium">2</span> of <span class="font-medium">5</span> results | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="px-3 py-1 border border-gray-300 rounded-md bg-gray-50 text-gray-700 hover:bg-gray-100"> | |
| Previous | |
| </button> | |
| <button class="px-3 py-1 border border-gray-300 rounded-md bg-blue-600 text-white"> | |
| 1 | |
| </button> | |
| <button class="px-3 py-1 border border-gray-300 rounded-md hover:bg-gray-100"> | |
| 2 | |
| </button> | |
| <button class="px-3 py-1 border border-gray-300 rounded-md hover:bg-gray-100"> | |
| 3 | |
| </button> | |
| <button class="px-3 py-1 border border-gray-300 rounded-md hover:bg-gray-100"> | |
| Next | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| <script src="script.js"></script> | |
| <script> | |
| feather.replace(); | |
| </script> | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> |