Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Advocate Dashboard</title> | |
| <link rel="stylesheet" href="/static/css/entrance.css"> | |
| <script src="/static/js/entrance.js" defer></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| :root { | |
| --primary: #2a5298; | |
| --secondary: #1e3c72; | |
| --accent: #e67e22; | |
| } | |
| body { | |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | |
| margin: 0; | |
| background: #f5f7fa; | |
| } | |
| .header { | |
| background: linear-gradient(135deg, var(--secondary), var(--primary)); | |
| color: white; | |
| padding: 1rem 2rem; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| position: relative; | |
| z-index: 1000; | |
| } | |
| .profile { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| .profile img { | |
| width: 40px; | |
| height: 40px; | |
| border-radius: 50%; | |
| border: 2px solid rgba(255, 255, 255, 0.3); | |
| } | |
| .container { | |
| display: grid; | |
| grid-template-columns: 250px 1fr; | |
| min-height: calc(100vh - 70px); | |
| } | |
| .sidebar { | |
| background: white; | |
| padding: 1.5rem; | |
| box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1); | |
| } | |
| .sidebar a { | |
| display: block; | |
| padding: 10px; | |
| color: #555; | |
| text-decoration: none; | |
| border-radius: 5px; | |
| margin-bottom: 5px; | |
| } | |
| .sidebar a:hover, | |
| .sidebar a.active { | |
| background: #e6f0ff; | |
| color: var(--primary); | |
| } | |
| .main-content { | |
| padding: 2rem; | |
| } | |
| .card { | |
| background: white; | |
| border-radius: 8px; | |
| padding: 1.5rem; | |
| margin-bottom: 1.5rem; | |
| box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); | |
| } | |
| .stats { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); | |
| gap: 1rem; | |
| } | |
| .stat-item { | |
| text-align: center; | |
| padding: 1rem; | |
| border-radius: 8px; | |
| background: #f8f9fa; | |
| } | |
| .stat-item h3 { | |
| color: var(--primary); | |
| margin: 0; | |
| } | |
| .case-list { | |
| display: grid; | |
| gap: 1rem; | |
| } | |
| .case-item { | |
| padding: 1rem; | |
| border-left: 4px solid var(--accent); | |
| background: white; | |
| border-radius: 4px; | |
| } | |
| .case-item h4 { | |
| margin: 0; | |
| color: var(--secondary); | |
| } | |
| .case-meta { | |
| display: flex; | |
| gap: 1rem; | |
| color: #666; | |
| font-size: 0.9rem; | |
| } | |
| .resources-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); | |
| gap: 1rem; | |
| } | |
| .resource-card { | |
| border: 1px solid #ddd; | |
| border-radius: 8px; | |
| padding: 1rem; | |
| transition: all 0.3s; | |
| } | |
| .resource-card:hover { | |
| border-color: var(--primary); | |
| box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); | |
| } | |
| /* Chatbot button */ | |
| .chatbot-btn { | |
| position: fixed; | |
| bottom: 2rem; | |
| right: 2rem; | |
| background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%); | |
| color: white; | |
| width: 60px; | |
| height: 60px; | |
| border-radius: 50%; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| box-shadow: 0 4px 20px rgba(30, 60, 114, 0.3); | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| z-index: 90; | |
| } | |
| .chatbot-btn:hover { | |
| transform: scale(1.1); | |
| box-shadow: 0 6px 25px rgba(30, 60, 114, 0.4); | |
| } | |
| .chatbot-btn i { | |
| font-size: 1.5rem; | |
| } | |
| /* --- USER DROPDOWN --- */ | |
| .user-profile-menu { | |
| position: relative; | |
| cursor: pointer; | |
| } | |
| .profile { | |
| cursor: pointer; | |
| transition: opacity 0.3s; | |
| } | |
| .profile:hover { | |
| opacity: 0.9; | |
| } | |
| .dropdown-menu { | |
| position: absolute; | |
| top: 100%; | |
| right: 0; | |
| width: 220px; | |
| background: white; | |
| border-radius: 8px; | |
| box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15); | |
| display: none; | |
| flex-direction: column ; | |
| overflow: hidden; | |
| z-index: 2000; | |
| margin-top: 10px; | |
| border: 1px solid #e0e4e8; | |
| } | |
| .dropdown-menu.show { | |
| display: flex ; | |
| animation: fadeIn 0.2s ease-out; | |
| } | |
| @keyframes fadeIn { | |
| from { | |
| opacity: 0; | |
| transform: translateY(10px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| .dropdown-item { | |
| padding: 1rem; | |
| color: #333; | |
| text-decoration: none; | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| transition: background 0.2s; | |
| border-bottom: 1px solid #f0f0f0; | |
| } | |
| .dropdown-item:last-child { | |
| border-bottom: none; | |
| } | |
| .dropdown-item:hover { | |
| background: #f8f9fa; | |
| color: #2a5298; | |
| } | |
| .dropdown-item.role-info { | |
| background: #f1f4f8; | |
| font-weight: 500; | |
| color: #4a5568; | |
| cursor: default; | |
| } | |
| .dropdown-item.usage-info { | |
| background: #fff5f5; | |
| font-size: 0.85rem; | |
| color: #e53e3e; | |
| font-weight: 600; | |
| display: none; | |
| } | |
| .logout-action { | |
| color: #e53e3e ; | |
| font-weight: 500; | |
| } | |
| .logout-action i { | |
| margin-right: 8px; | |
| } | |
| .logout-action:hover { | |
| background: #fff5f5; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <header class="header"> | |
| <h1>Advocate Dashboard</h1> | |
| <div class="user-profile-menu" id="userProfileMenu"> | |
| <div class="profile"> | |
| <span>Adv. Rahul Sharma</span> | |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Profile"> | |
| <i class="fas fa-chevron-down" style="font-size: 0.8rem; margin-left: 10px; opacity: 0.8;"></i> | |
| </div> | |
| <div class="dropdown-menu" id="dropdownMenu"> | |
| <div class="dropdown-item role-info"> | |
| Role: Advocate | |
| </div> | |
| <div class="dropdown-item usage-info" id="usageInfo"> | |
| Questions Remaining: <span id="remainingCount">--</span> | |
| </div> | |
| <div class="dropdown-item logout-action" id="headerLogoutBtn" style="cursor: pointer;"> | |
| <i class="fas fa-sign-out-alt"></i> Logout | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <div class="container"> | |
| <aside class="sidebar"> | |
| <a href="advocatedashboard.html" class="active"><i class="fas fa-home"></i> Dashboard</a> | |
| <a href="advocateresources.html" id="resources"><i class="fas fa-book"></i> Legal Resources</a> | |
| </aside> | |
| <main class="main-content"> | |
| <div class="card"> | |
| <h2>Today's Overview</h2> | |
| <div class="stats"> | |
| <div class="stat-item"> | |
| <h3>12</h3> | |
| <p>Active Cases</p> | |
| </div> | |
| <div class="stat-item"> | |
| <h3>3</h3> | |
| <p>Today's Hearings</p> | |
| </div> | |
| <div class="stat-item"> | |
| <h3>5</h3> | |
| <p>Pending Filings</p> | |
| </div> | |
| <div class="stat-item"> | |
| <h3>2</h3> | |
| <p>Urgent Matters</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="card"> | |
| <h2>Upcoming Hearings</h2> | |
| <div class="case-list"> | |
| <div class="case-item"> | |
| <h4>State vs. Kumar - Bail Hearing</h4> | |
| <div class="case-meta"> | |
| <span><i class="fas fa-hashtag"></i> CR-2024-0785</span> | |
| <span><i class="fas fa-clock"></i> Today, 11:30 AM</span> | |
| <span><i class="fas fa-map-marker-alt"></i> Courtroom 3</span> | |
| </div> | |
| </div> | |
| <div class="case-item"> | |
| <h4>M/s. ABC Corp vs. XYZ Ltd</h4> | |
| <div class="case-meta"> | |
| <span><i class="fas fa-hashtag"></i> CS-2024-0456</span> | |
| <span><i class="fas fa-clock"></i> Tomorrow, 2:15 PM</span> | |
| <span><i class="fas fa-map-marker-alt"></i> Courtroom 5</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="card"> | |
| <h2>Recent Case Updates</h2> | |
| <div class="case-list"> | |
| <div class="case-item"> | |
| <h4>Patel vs. State - Judgment Reserved</h4> | |
| <div class="case-meta"> | |
| <span><i class="fas fa-hashtag"></i> CR-2024-0123</span> | |
| <span>Hon'ble Justice Verma</span> | |
| </div> | |
| <p>Final arguments completed. Judgment expected within 15 days.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| <!-- Chatbot Button --> | |
| <div class="chatbot-btn" id="chatbotButton"> | |
| <i class="fas fa-robot"></i> | |
| </div> | |
| <script> | |
| // --- User Profile Dropdown Logic --- | |
| const userProfileMenu = document.getElementById('userProfileMenu'); | |
| const dropdownMenu = document.getElementById('dropdownMenu'); | |
| const sidebarLogoutBtn = document.getElementById('logoutBtn'); | |
| const headerLogoutBtn = document.getElementById('headerLogoutBtn'); | |
| async function checkUserStatus() { | |
| const token = localStorage.getItem('token'); | |
| if (!token) return; | |
| try { | |
| const response = await fetch('/api/user-status', { | |
| headers: { 'Authorization': `Bearer ${token}` } | |
| }); | |
| const status = await response.json(); | |
| const usageInfo = document.getElementById('usageInfo'); | |
| if (status.is_admin) { | |
| usageInfo.style.display = 'none'; | |
| } else { | |
| usageInfo.style.display = 'flex'; | |
| const remaining = Math.max(0, 2 - status.question_count); | |
| document.getElementById('remainingCount').innerText = remaining; | |
| } | |
| } catch (err) { | |
| console.error('Failed to fetch user status:', err); | |
| } | |
| } | |
| checkUserStatus(); | |
| userProfileMenu.addEventListener('click', (e) => { | |
| e.stopPropagation(); | |
| dropdownMenu.classList.toggle('show'); | |
| }); | |
| document.addEventListener('click', () => { | |
| if (dropdownMenu.classList.contains('show')) { | |
| dropdownMenu.classList.remove('show'); | |
| } | |
| }); | |
| function performLogout() { | |
| if (window.dashboardEntrance) { | |
| window.dashboardEntrance.logout(); | |
| } else { | |
| localStorage.removeItem('token'); | |
| window.location.href = "/role"; | |
| } | |
| } | |
| headerLogoutBtn.addEventListener('click', performLogout); | |
| if (sidebarLogoutBtn) { | |
| sidebarLogoutBtn.addEventListener("click", function (e) { | |
| e.preventDefault(); | |
| performLogout(); | |
| }); | |
| } | |
| document.getElementById('resources').addEventListener('click', function () { | |
| window.location.href = 'advocateresources.html'; | |
| }); | |
| document.getElementById("chatbotButton").addEventListener("click", function () { | |
| // Here you would typically open a chatbot modal or redirect to a chatbot page | |
| alert("Advocate Assistant Chatbot is opening..."); | |
| window.location.href = "/advocatechatbot.html"; | |
| }); | |
| </script> | |
| </body> | |
| </html> |