Spaces:
Running
Running
| <html class="light" lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>NYAYA SETU — Legal Research Registry</title> | |
| <script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script> | |
| <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,600;0,700;1,600;1,700&family=Plus+Jakarta+Sans:wght@400;500;600;700&family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"> | |
| <script id="tailwind-config"> | |
| tailwind.config = { | |
| darkMode: "class", | |
| theme: { | |
| extend: { | |
| colors: { | |
| "on-secondary": "#ffffff", | |
| "surface-container-high": "#ece8e0", | |
| "surface-container": "#f2ede5", | |
| "on-tertiary-fixed-variant": "#4e3e6f", | |
| "tertiary": "#342554", | |
| "secondary-container": "#fed174", | |
| "primary-container": "#2c4a3e", | |
| "outline": "#727974", | |
| "on-tertiary-fixed": "#221141", | |
| "surface-container-highest": "#e7e2da", | |
| "secondary": "#795900", | |
| "on-surface": "#1d1c17", | |
| "secondary-fixed-dim": "#ecc165", | |
| "on-tertiary": "#ffffff", | |
| "error-container": "#ffdad6", | |
| "on-error-container": "#93000a", | |
| "surface-tint": "#466558", | |
| "error": "#ba1a1a", | |
| "surface-bright": "#fef9f1", | |
| "on-tertiary-container": "#bba8e1", | |
| "secondary-fixed": "#ffdfa0", | |
| "inverse-on-surface": "#f5f0e8", | |
| "primary": "#153328", | |
| "outline-variant": "#c1c8c3", | |
| "on-secondary-container": "#785800", | |
| "on-secondary-fixed": "#261a00", | |
| "on-primary-fixed": "#012016", | |
| "surface-variant": "#e7e2da", | |
| "on-surface-variant": "#414845", | |
| "on-primary-container": "#98b9a9", | |
| "tertiary-container": "#4b3b6c", | |
| "on-background": "#1d1c17", | |
| "inverse-surface": "#32302b", | |
| "surface-container-lowest": "#ffffff", | |
| "background": "#fef9f1", | |
| "tertiary-fixed-dim": "#d1bdf7", | |
| "on-primary": "#ffffff", | |
| "on-error": "#ffffff", | |
| "surface-dim": "#ded9d2", | |
| "on-secondary-fixed-variant": "#5c4300", | |
| "inverse-primary": "#adcebe", | |
| "tertiary-fixed": "#eaddff", | |
| "surface": "#fef9f1", | |
| "on-primary-fixed-variant": "#2f4d41", | |
| "surface-container-low": "#f8f3eb", | |
| "primary-fixed": "#c8eada", | |
| "primary-fixed-dim": "#adcebe" | |
| }, | |
| borderRadius: { | |
| DEFAULT: "1rem", | |
| lg: "2rem", | |
| xl: "3rem", | |
| full: "9999px" | |
| }, | |
| fontFamily: { | |
| headline: ["Cormorant Garamond", "serif"], | |
| body: ["Plus Jakarta Sans", "sans-serif"], | |
| label: ["Cormorant Garamond", "serif"] | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| .clay-card { | |
| background: #ffffff; | |
| box-shadow: 8px 8px 16px rgba(0, 0, 0, 0.08), inset 2px 2px 4px rgba(255, 255, 255, 0.8); | |
| border-radius: 24px; | |
| } | |
| .clay-inset { | |
| background: #f0ebe2; | |
| box-shadow: inset 4px 4px 8px rgba(0, 0, 0, 0.06), inset -4px -4px 8px rgba(255, 255, 255, 0.9); | |
| border-radius: 20px; | |
| } | |
| .clay-button-primary { | |
| background: #2c4a3e; | |
| box-shadow: 0 10px 20px -5px rgba(44, 74, 62, 0.4), inset 2px 2px 4px rgba(255, 255, 255, 0.3); | |
| transition: all 0.2s ease; | |
| cursor: pointer; | |
| } | |
| .clay-button-primary:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 12px 24px -5px rgba(44, 74, 62, 0.5), inset 2px 2px 4px rgba(255, 255, 255, 0.3); | |
| } | |
| .clay-button-primary:active { | |
| transform: scale(0.98); | |
| box-shadow: inset 4px 4px 8px rgba(0, 0, 0, 0.3); | |
| } | |
| .material-symbols-outlined { | |
| font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; | |
| } | |
| .custom-scrollbar::-webkit-scrollbar { | |
| width: 4px; | |
| } | |
| .custom-scrollbar::-webkit-scrollbar-track { | |
| background: transparent; | |
| } | |
| .custom-scrollbar::-webkit-scrollbar-thumb { | |
| background: #dcd7ce; | |
| border-radius: 10px; | |
| } | |
| textarea { | |
| resize: none; | |
| } | |
| textarea:focus { | |
| outline: none; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-[#F5F0E8] text-on-surface font-body h-screen flex overflow-hidden"> | |
| <!-- Left Side: Sidebar --> | |
| <aside class="w-64 h-full flex flex-col bg-primary/5 border-r border-primary/10 p-5 z-30 transition-all duration-300 overflow-y-auto custom-scrollbar" id="sidebar"> | |
| <!-- Brand Header --> | |
| <div class="flex items-center gap-2 mb-8 px-2"> | |
| <div class="w-12 h-12 clay-card flex items-center justify-center bg-primary text-secondary-container flex-shrink-0"> | |
| <span class="material-symbols-outlined text-2xl" style="font-variation-settings: 'FILL' 1;">gavel</span> | |
| </div> | |
| <div class="flex-1 min-w-0"> | |
| <h1 class="font-headline font-bold text-primary text-lg leading-tight tracking-tight truncate">NYAYA</h1> | |
| <p class="text-[9px] uppercase tracking-widest text-secondary font-bold opacity-70 truncate">Registry</p> | |
| </div> | |
| </div> | |
| <!-- Primary Action --> | |
| <button onclick="newChat()" class="clay-button-primary w-full py-2.5 px-4 flex items-center justify-center gap-2 text-white font-semibold text-sm rounded-lg mb-6 group"> | |
| <span class="material-symbols-outlined transition-transform group-hover:rotate-90">add_circle</span> | |
| <span>New Petition</span> | |
| </button> | |
| <!-- Navigation Links --> | |
| <nav class="space-y-2 mb-8"> | |
| <button onclick="showAnalytics()" class="w-full flex items-center gap-2 px-3 py-2.5 clay-card text-secondary font-semibold text-sm hover:bg-white/80 transition-colors"> | |
| <span class="material-symbols-outlined text-lg" style="font-variation-settings: 'FILL' 1;">analytics</span> | |
| <span>Analytics</span> | |
| </button> | |
| <a href="/court/ui" class="flex items-center gap-2 px-3 py-2.5 text-primary/60 hover:text-primary transition-colors font-medium text-sm"> | |
| <span class="material-symbols-outlined text-lg">balance</span> | |
| <span>Moot Court</span> | |
| </a> | |
| </nav> | |
| <!-- Session List Container --> | |
| <div class="flex-1 overflow-hidden flex flex-col min-h-0"> | |
| <h3 class="text-[10px] uppercase tracking-[0.15em] text-primary/40 font-bold px-3 mb-3">Sessions</h3> | |
| <div class="flex-1 overflow-y-auto space-y-3 px-1 custom-scrollbar" id="sessions-list"> | |
| <div class="sessions-empty text-xs text-primary/50 px-4 py-8 text-center">No active cases</div> | |
| </div> | |
| </div> | |
| <!-- Footer --> | |
| <div class="mt-auto pt-6 border-t border-primary/5 space-y-4"> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="text-[9px] font-bold bg-primary/10 text-primary px-2 py-1 rounded-full">BETA v2.4</span> | |
| <span class="text-[9px] font-bold bg-secondary/10 text-secondary px-2 py-1 rounded-full">VERIFIED AI</span> | |
| </div> | |
| <p class="text-[10px] text-primary/40 italic leading-relaxed">NyayaSetu provides research assistance. Consult a legal practitioner for professional advice.</p> | |
| </div> | |
| </aside> | |
| <!-- Main Content Area --> | |
| <main class="flex-1 flex flex-col h-full relative overflow-hidden" id="main-content"> | |
| <!-- Top Bar --> | |
| <header class="h-16 flex items-center justify-between px-10 z-20 bg-white/30 backdrop-blur-sm border-b border-primary/5"> | |
| <div class="flex items-center gap-3"> | |
| <h2 class="font-headline text-lg font-bold text-primary" id="topbar-title">Research Chamber</h2> | |
| <div class="flex items-center gap-2 bg-primary-container/5 px-3 py-1 rounded-full"> | |
| <span class="w-2 h-2 bg-green-500 rounded-full animate-pulse"></span> | |
| <span class="text-[10px] font-bold text-primary tracking-wide" id="status-text">READY</span> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Content Canvas --> | |
| <div class="flex-1 overflow-y-auto px-8 pb-20 custom-scrollbar relative"> | |
| <!-- Welcome Screen --> | |
| <section class="max-w-4xl mx-auto pt-8 flex flex-col items-center text-center screen active" id="screen-welcome"> | |
| <div class="relative mb-8"> | |
| <h1 class="font-headline text-3xl text-primary font-bold relative z-10">How may the registry assist you?</h1> | |
| <p class="text-primary/60 max-w-lg mx-auto mt-3 text-sm font-medium leading-relaxed"> | |
| AI-powered legal research for case discovery and precedent analysis. | |
| </p> | |
| </div> | |
| <!-- Suggestions Grid --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 w-full"> | |
| <button onclick="usesuggestion('List landmark Supreme Court rulings on property disputes')" class="clay-card p-4 text-left hover:scale-[1.02] transition-transform group"> | |
| <span class="material-symbols-outlined text-secondary mb-2 block text-2xl">gavel</span> | |
| <h4 class="font-bold text-primary text-sm mb-1">Analyze Precedents</h4> | |
| <p class="text-xs text-primary/50">Landmark rulings for property disputes.</p> | |
| </button> | |
| <button onclick="usesuggestion('Summarize the key provisions of the Digital Markets Act')" class="clay-card p-4 text-left hover:scale-[1.02] transition-transform"> | |
| <span class="material-symbols-outlined text-secondary mb-2 block text-2xl">description</span> | |
| <h4 class="font-bold text-primary text-sm mb-1">Summarize Act</h4> | |
| <p class="text-xs text-primary/50">Draft summary of legal bills.</p> | |
| </button> | |
| <button onclick="usesuggestion('How to draft a writ petition for fundamental rights violation')" class="clay-card p-4 text-left hover:scale-[1.02] transition-transform"> | |
| <span class="material-symbols-outlined text-secondary mb-2 block text-2xl">history_edu</span> | |
| <h4 class="font-bold text-primary text-sm mb-1">Draft Petition</h4> | |
| <p class="text-xs text-primary/50">Writ petition outlines.</p> | |
| </button> | |
| <button onclick="usesuggestion('Legal compliance checklist for labor laws')" class="clay-card p-4 text-left hover:scale-[1.02] transition-transform"> | |
| <span class="material-symbols-outlined text-secondary mb-2 block text-2xl">verified_user</span> | |
| <h4 class="font-bold text-primary text-sm mb-1">Legal Compliance</h4> | |
| <p class="text-xs text-primary/50">Statutory compliance checks.</p> | |
| </button> | |
| <button onclick="usesuggestion('Find Supreme Court cases on intellectual property rights')" class="clay-card p-4 text-left hover:scale-[1.02] transition-transform"> | |
| <span class="material-symbols-outlined text-secondary mb-2 block text-2xl">travel_explore</span> | |
| <h4 class="font-bold text-primary text-sm mb-1">Case Law Search</h4> | |
| <p class="text-xs text-primary/50">Citation and precedent lookup.</p> | |
| </button> | |
| <button onclick="usesuggestion('Section 301 of IPC and its recent amendments')" class="clay-card p-4 text-left hover:scale-[1.02] transition-transform"> | |
| <span class="material-symbols-outlined text-secondary mb-2 block text-2xl">auto_stories</span> | |
| <h4 class="font-bold text-primary text-sm mb-1">Statutory Guide</h4> | |
| <p class="text-xs text-primary/50">Act sections reference.</p> | |
| </button> | |
| </div> | |
| </section> | |
| <!-- Chat / Research State --> | |
| <section class="hidden max-w-4xl mx-auto pt-8 space-y-8 screen" id="screen-chat"> | |
| <div class="space-y-8" id="messages-list"></div> | |
| </section> | |
| <!-- Analytics State --> | |
| <section class="hidden max-w-4xl mx-auto pt-6 screen" id="screen-analytics"> | |
| <h3 class="font-headline text-2xl font-bold text-primary mb-6">Analytics</h3> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-5"> | |
| <div class="clay-card p-5 text-center relative overflow-hidden"> | |
| <p class="text-primary/50 text-xs font-bold uppercase tracking-wider mb-1">Queries</p> | |
| <p class="text-3xl font-headline font-bold text-primary" id="stat-total">1,284</p> | |
| </div> | |
| <div class="clay-card p-5 text-center relative overflow-hidden"> | |
| <p class="text-primary/50 text-xs font-bold uppercase tracking-wider mb-1">Accuracy</p> | |
| <p class="text-3xl font-headline font-bold text-secondary" id="stat-verified">99.2%</p> | |
| </div> | |
| <div class="clay-card p-5 text-center relative overflow-hidden"> | |
| <p class="text-primary/50 text-xs font-bold uppercase tracking-wider mb-1">Speed</p> | |
| <p class="text-3xl font-headline font-bold text-tertiary" id="stat-latency">0.8s</p> | |
| </div> | |
| </div> | |
| </section> | |
| </div> | |
| <!-- Sticky Input Area --> | |
| <div class="absolute bottom-0 left-0 right-0 bg-[#F5F0E8]/90 backdrop-blur-md px-8 py-4 z-40 border-t border-primary/5"> | |
| <div class="max-w-4xl mx-auto clay-inset p-1.5 flex items-end gap-2" id="petition-input"> | |
| <div class="flex-1 min-h-[40px] px-3 py-2"> | |
| <textarea id="query-input" class="w-full bg-transparent border-none focus:ring-0 text-primary placeholder-primary/30 font-normal custom-scrollbar text-xs" placeholder="Ask anything..." rows="1"></textarea> | |
| </div> | |
| <button onclick="submitQuery()" class="clay-button-primary px-4 py-1.5 rounded-md text-white font-semibold flex items-center gap-1.5 shadow-lg flex-shrink-0" id="send-btn"> | |
| <span class="material-symbols-outlined text-base">send</span> | |
| </button> | |
| </div> | |
| </div> | |
| </main> | |
| <script src="/static/app.js"></script> | |
| </body> | |
| </html> | |