<!DOCTYPE html>
<html lang="en" class="dark">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Legal Chat</title>
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
darkMode: 'class',
theme: {
extend: {
colors: {
dark: {
950: '#0a0a0a',
900: '#121212',
800: '#1a1a1a',
700: '#232323',
600: '#2d2d2d'
}
}
}
}
}
</script>
<style>
/* Custom Scrollbar */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: #1a1a1a;
border-radius: 4px;
}
::-webkit-scrollbar-thumb {
background: #2d2d2d;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #3d3d3d;
}
.fade-enter {
opacity: 0;
transform: translateY(20px);
}
.fade-enter-active {
opacity: 1;
transform: translateY(0);
transition: opacity 300ms, transform 300ms;
}
.fade-exit {
opacity: 1;
transform: translateY(0);
}
.fade-exit-active {
opacity: 0;
transform: translateY(-20px);
transition: opacity 300ms, transform 300ms;
}
</style>
</head>
<body class="bg-dark-950 text-gray-100 min-h-screen">
<!-- Role Selection Screen -->
<div id="roleSelection" class="container mx-auto p-4 max-w-4xl min-h-screen flex items-center justify-center">
<div class="bg-dark-900 rounded-xl shadow-lg shadow-black/20 p-8 w-full max-w-lg">
<h1 class="text-3xl font-bold text-center mb-8">Choose Your Role</h1>
<div class="grid gap-4">
<button class="role-btn bg-dark-800 hover:bg-dark-700 p-6 rounded-xl transition-all transform hover:scale-105 text-left" data-role="user">
<h3 class="text-xl font-semibold mb-2">User</h3>
<p class="text-gray-400">Get legal assistance and ask questions about your rights</p>
</button>
<button class="role-btn bg-dark-800 hover:bg-dark-700 p-6 rounded-xl transition-all transform hover:scale-105 text-left" data-role="ngo">
<h3 class="text-xl font-semibold mb-2">NGO Worker</h3>
<p class="text-gray-400">Manage cases and coordinate support for clients</p>
</button>
<button class="role-btn bg-dark-800 hover:bg-dark-700 p-6 rounded-xl transition-all transform hover:scale-105 text-left" data-role="advocate">
<h3 class="text-xl font-semibold mb-2">Advocate</h3>
<p class="text-gray-400">Handle legal cases and provide expert guidance</p>
</button>
</div>
</div>
</div>
<!-- Chat Interface -->
<div id="chatInterface" class="hidden">
<div class="container mx-auto p-4 max-w-4xl">
<!-- Back Button -->
<button id="backButton" class="mb-6 flex items-center gap-2 text-gray-400 hover:text-white transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M9.707 16.707a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414l6-6a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l4.293 4.293a1 1 0 010 1.414z" clip-rule="evenodd" />
</svg>
Change Role
</button>
<div class="bg-dark-900 rounded-xl shadow-lg shadow-black/20 p-6">
<!-- Role Selection -->
<div class="flex gap-4 mb-6 justify-center">
<button id="userRole" class="px-4 py-2 rounded-lg bg-blue-600 text-white hover:bg-blue-700 transition-colors">
User
</button>
<button id="ngoRole" class="px-4 py-2 rounded-lg bg-dark-700 text-gray-300 hover:bg-dark-600 transition-colors">
NGO Worker
</button>
<button id="advocateRole" class="px-4 py-2 rounded-lg bg-dark-700 text-gray-300 hover:bg-dark-600 transition-colors">
Advocate
</button>
</div>
<!-- Chat Area -->
<div id="messages" class="bg-dark-800 rounded-xl p-4 h-[500px] overflow-y-auto mb-4"></div>
<!-- Input Area -->
<div class="flex gap-3">
<input
type="text"
id="messageInput"
class="flex-1 bg-dark-800 text-gray-100 px-4 py-2 rounded-lg border border-dark-600 focus:outline-none focus:border-blue-500 transition-colors"
placeholder="Type your message..."
>
<button
id="sendButton"
class="bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-700 transition-colors flex items-center gap-2"
>
<span>Send</span>
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
<path d="M10.894 2.553a1 1 0 00-1.788 0l-7 14a1 1 0 001.169 1.409l5-1.429A1 1 0 009 15.571V11a1 1 0 112 0v4.571a1 1 0 00.725.962l5 1.428a1 1 0 001.17-1.408l-7-14z" />
</svg>
</button>
</div>
</div>
</div>
</div>
<script src="app.js"></script>
</body>
</html>