1<body class="bg-gray-100 text-sm">
2 <header class="border-b bg-white shadow-sm">
3 <div class="container mx-auto flex items-center justify-between px-4 py-2">
4 <div class="flex items-center space-x-3">
5 <div class="rounded-lg border border-orange-200 bg-orange-50 p-2">
6 <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-orange-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
7 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="{2}" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
8 </svg>
9 </div>
10 <div class="flex flex-col">
11 <h1 class="text-sm font-bold text-gray-800">AI Widgets Hub</h1>
12 <span class="text-xs text-gray-500">Enterprise Tools</span>
13 </div>
14 </div>
15 <div class="flex items-center space-x-4">
16 <button class="rounded-full p-2 text-gray-600 hover:bg-gray-100">
17 <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
18 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="{2}" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
19 </svg>
20 </button>
21 <button class="px-3 py-1.5 text-sm text-gray-700 hover:text-orange-400">Login</button>
22 </div>
23 </div>
24 </header>
25
26 <main class="flex min-h-screen w-full">
27 <div class="w-2/3 p-4">
28 <div class="mb-4 flex space-x-3 rounded-lg border border-gray-200 bg-white p-2 text-xs shadow-md">
29 <button class="rounded-md border border-gray-200 bg-gray-100 px-3 py-1.5 text-gray-700 hover:bg-gray-200">Transcriber</button>
30 <button class="rounded-md px-3 py-1.5 hover:bg-gray-50">Widget 2</button>
31 <button class="rounded-md px-3 py-1.5 hover:bg-gray-50">Widget 3</button>
32 </div>
33
34 <div class="rounded-lg border border-gray-200 bg-white p-4 shadow-md">
35 <h2 class="mb-3 text-base font-bold">Video Transcriber</h2>
36 <input type="text" placeholder="Enter YouTube URL" class="mb-3 w-full rounded-md border border-gray-300 p-2 text-sm outline-none focus:border-gray-400 focus:ring-2 focus:ring-gray-200" />
37 <button class="rounded-md border border-gray-200 bg-gray-100 px-3 py-1.5 text-sm text-gray-700 hover:bg-gray-200">Transcribe</button>
38 <div class="mt-3 h-64 rounded-md border border-gray-200 bg-gray-50 p-3">
39 <p class="text-sm text-gray-500">Transcription will appear here...</p>
40 </div>
41 </div>
42 </div>
43
44 <!-- Right Column - Simplified structure -->
45 <div class="w-1/3 bg-gray-50">
46 <div class="p-4">
47 <div class="rounded-lg border border-gray-200 bg-white p-4 shadow-md">
48 <h3 class="p-4 pb-3 text-base font-bold">System Chat</h3>
49 <div class="mx-4 mb-3 h-96 overflow-y-auto rounded-md border border-gray-200 bg-gray-50 p-3">
50 <div class="mb-3">
51 <p class="inline-block rounded-lg border border-gray-200 bg-gray-100 p-2 text-sm text-gray-700">Hello! How can I help you today?</p>
52 </div>
53 <div class="mb-3 text-right">
54 <p class="inline-block rounded-lg bg-gray-200 p-2 text-sm text-gray-700">What's the system status?</p>
55 </div>
56 <div class="mb-3">
57 <p class="inline-block rounded-lg border border-gray-200 bg-gray-100 p-2 text-sm text-gray-700">All systems operational. CPU usage at 23%, Memory at 45%.</p>
58 </div>
59 </div>
60 <div class="p-4 pt-0">
61 <textarea placeholder="Type your message..." class="mb-2 w-full resize-none rounded-md border border-gray-300 p-2 text-sm outline-none focus:border-gray-400 focus:ring-2 focus:ring-gray-200" rows="2"></textarea>
62 <button class="w-full rounded-md border border-gray-200 bg-gray-100 px-3 py-1.5 text-sm text-gray-700 hover:bg-gray-200">Send</button>
63 </div>
64 </div>
65 </div>
66 </div>
67 </main>
68</body>
69Created on 11/3/2024