| <!DOCTYPE html> |
|
|
| <html class="dark" lang="en"><head> |
| <meta charset="utf-8"/> |
| <meta content="width=device-width, initial-scale=1.0" name="viewport"/> |
| <title>Citation Library | Sydeco LightML</title> |
| <script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script> |
| <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700&family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/> |
| <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/> |
| <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@100..900&family=Plus+Jakarta+Sans:wght@100..900&display=swap" rel="stylesheet"/> |
| <script id="tailwind-config"> |
| tailwind.config = { |
| darkMode: "class", |
| theme: { |
| extend: { |
| "colors": { |
| "primary-fixed-dim": "#e9c349", |
| "on-secondary": "#492905", |
| "on-secondary-fixed": "#2d1600", |
| "surface": "#0e131f", |
| "primary-container": "#d4af37", |
| "on-tertiary-container": "#3f4553", |
| "secondary-container": "#66411b", |
| "on-tertiary-fixed": "#161c27", |
| "inverse-on-surface": "#2b303d", |
| "surface-dim": "#0e131f", |
| "surface-container-high": "#252a37", |
| "secondary-fixed-dim": "#f1bc8c", |
| "secondary-fixed": "#ffdcbf", |
| "tertiary-fixed": "#dde2f3", |
| "secondary": "#f1bc8c", |
| "on-surface-variant": "#d0c5af", |
| "primary-fixed": "#ffe088", |
| "outline-variant": "#4d4635", |
| "inverse-primary": "#735c00", |
| "error": "#ffb4ab", |
| "tertiary-fixed-dim": "#c1c6d7", |
| "surface-tint": "#e9c349", |
| "on-secondary-container": "#e2ae7f", |
| "surface-bright": "#343946", |
| "tertiary-container": "#adb3c3", |
| "on-primary-container": "#554300", |
| "error-container": "#93000a", |
| "background": "#0e131f", |
| "surface-container-highest": "#303542", |
| "on-primary-fixed": "#241a00", |
| "on-primary": "#3c2f00", |
| "surface-container-low": "#161b28", |
| "on-primary-fixed-variant": "#574500", |
| "surface-container-lowest": "#090e1a", |
| "surface-container": "#1b1f2c", |
| "inverse-surface": "#dee2f4", |
| "surface-variant": "#303542", |
| "on-surface": "#dee2f4", |
| "on-error-container": "#ffdad6", |
| "on-tertiary-fixed-variant": "#414754", |
| "outline": "#99907c", |
| "tertiary": "#c9cedf", |
| "primary": "#f2ca50", |
| "on-secondary-fixed-variant": "#633f19", |
| "on-tertiary": "#2a303d", |
| "on-error": "#690005", |
| "on-background": "#dee2f4" |
| }, |
| "borderRadius": { |
| "DEFAULT": "0.125rem", |
| "lg": "0.25rem", |
| "xl": "0.5rem", |
| "full": "0.75rem" |
| }, |
| "spacing": { |
| "margin-mobile": "16px", |
| "container-max": "1440px", |
| "margin-tablet": "32px", |
| "gutter": "24px", |
| "margin-desktop": "64px", |
| "base": "8px" |
| }, |
| "fontFamily": { |
| "label-md": ["Plus Jakarta Sans"], |
| "headline-lg-mobile": ["Playfair Display"], |
| "headline-lg": ["Playfair Display"], |
| "headline-md": ["Playfair Display"], |
| "body-md": ["Plus Jakarta Sans"], |
| "body-lg": ["Plus Jakarta Sans"], |
| "label-sm": ["Plus Jakarta Sans"], |
| "display-lg": ["Playfair Display"] |
| }, |
| "fontSize": { |
| "label-md": ["14px", {"lineHeight": "1.4", "letterSpacing": "0.05em", "fontWeight": "600"}], |
| "headline-lg-mobile": ["28px", {"lineHeight": "1.2", "fontWeight": "600"}], |
| "headline-lg": ["32px", {"lineHeight": "1.2", "fontWeight": "600"}], |
| "headline-md": ["24px", {"lineHeight": "1.3", "fontWeight": "600"}], |
| "body-md": ["16px", {"lineHeight": "1.5", "fontWeight": "400"}], |
| "body-lg": ["18px", {"lineHeight": "1.6", "fontWeight": "400"}], |
| "label-sm": ["12px", {"lineHeight": "1.4", "fontWeight": "500"}], |
| "display-lg": ["48px", {"lineHeight": "1.1", "letterSpacing": "-0.02em", "fontWeight": "700"}] |
| } |
| }, |
| }, |
| } |
| </script> |
| <style> |
| .glass-panel { |
| background: rgba(14, 19, 31, 0.4); |
| backdrop-filter: blur(20px); |
| border: 1px solid rgba(242, 202, 80, 0.1); |
| } |
| .material-symbols-outlined { |
| font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; |
| vertical-align: middle; |
| } |
| .active-ring { |
| box-shadow: 0 0 15px rgba(242, 202, 80, 0.2); |
| } |
| .legal-table-row:hover { |
| background: rgba(242, 202, 80, 0.03); |
| transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1); |
| } |
| .gold-gradient-text { |
| background: linear-gradient(135deg, #f2ca50 0%, #e9c349 100%); |
| -webkit-background-clip: text; |
| -webkit-text-fill-color: transparent; |
| } |
| </style> |
| </head> |
| <body class="bg-background text-on-background font-body-md overflow-x-hidden"> |
| |
| <nav class="fixed top-0 w-full z-50 flex justify-between items-center px-6 md:px-margin-desktop h-20 bg-background/40 backdrop-blur-xl border-b border-outline-variant/10 shadow-sm"> |
| <div class="flex items-center gap-8"> |
| <span class="font-display-lg text-headline-md text-primary tracking-tight">Sydeco LightML</span> |
| <div class="hidden md:flex items-center gap-6"> |
| <a class="text-on-surface-variant font-medium hover:text-primary transition-colors duration-300" href="#">Dashboard</a> |
| <a class="text-primary font-bold border-b-2 border-primary pb-1 transition-colors duration-300" href="#">Clauses</a> |
| <a class="text-on-surface-variant font-medium hover:text-primary transition-colors duration-300" href="#">Analytics</a> |
| <a class="text-on-surface-variant font-medium hover:text-primary transition-colors duration-300" href="#">Risk Map</a> |
| </div> |
| </div> |
| <div class="flex items-center gap-4"> |
| <div class="relative group"> |
| <span class="material-symbols-outlined text-on-surface-variant cursor-pointer hover:text-primary transition-colors">notifications</span> |
| <span class="absolute -top-1 -right-1 w-2 h-2 bg-primary rounded-full"></span> |
| </div> |
| <span class="material-symbols-outlined text-on-surface-variant cursor-pointer hover:text-primary transition-colors">settings</span> |
| <button class="bg-primary text-on-primary-fixed px-4 py-2 rounded-lg font-label-md hover:brightness-110 transition-all shadow-lg shadow-primary/10">Secure Logout</button> |
| </div> |
| </nav> |
| |
| <aside class="fixed left-0 top-20 h-[calc(100vh-80px)] w-64 flex flex-col py-6 bg-surface-container/40 backdrop-blur-2xl border-r border-outline-variant/10 shadow-2xl hidden md:flex"> |
| <div class="px-6 mb-8 flex items-center gap-3"> |
| <div class="w-10 h-10 rounded bg-primary/20 flex items-center justify-center border border-primary/30"> |
| <span class="material-symbols-outlined text-primary" style="font-variation-settings: 'FILL' 1;">shield</span> |
| </div> |
| <div> |
| <p class="font-headline-md text-primary leading-tight text-[18px]">Sovereign Control</p> |
| <p class="text-label-sm text-on-surface-variant uppercase tracking-widest opacity-70">Enterprise Legal Intel</p> |
| </div> |
| </div> |
| <nav class="flex-1 flex flex-col gap-1"> |
| <a class="flex items-center gap-3 px-4 py-3 mx-2 text-on-surface-variant hover:bg-surface-variant/30 hover:text-primary rounded-lg transition-all group" href="#"> |
| <span class="material-symbols-outlined group-hover:scale-110 transition-transform">upload_file</span> |
| <span class="font-label-md">Portal</span> |
| </a> |
| <a class="flex items-center gap-3 px-4 py-3 mx-2 text-on-surface-variant hover:bg-surface-variant/30 hover:text-primary rounded-lg transition-all group" href="#"> |
| <span class="material-symbols-outlined group-hover:scale-110 transition-transform">lock</span> |
| <span class="font-label-md">Security Gate</span> |
| </a> |
| <a class="flex items-center gap-3 px-4 py-3 mx-2 bg-primary-container text-on-primary-container rounded-lg transition-all" href="#"> |
| <span class="material-symbols-outlined">analytics</span> |
| <span class="font-label-md">Risk Suite</span> |
| </a> |
| <a class="flex items-center gap-3 px-4 py-3 mx-2 text-on-surface-variant hover:bg-surface-variant/30 hover:text-primary rounded-lg transition-all group" href="#"> |
| <span class="material-symbols-outlined group-hover:scale-110 transition-transform">query_stats</span> |
| <span class="font-label-md">Telemetry</span> |
| </a> |
| <a class="flex items-center gap-3 px-4 py-3 mx-2 text-on-surface-variant hover:bg-surface-variant/30 hover:text-primary rounded-lg transition-all group" href="#"> |
| <span class="material-symbols-outlined group-hover:scale-110 transition-transform">admin_panel_settings</span> |
| <span class="font-label-md">Admin</span> |
| </a> |
| </nav> |
| <div class="px-6 mt-auto"> |
| <button class="w-full py-3 bg-gradient-to-r from-primary-container to-primary text-on-primary-container font-label-md rounded-lg shadow-lg shadow-primary/10 hover:scale-[1.02] active:scale-[0.98] transition-all"> |
| New Analysis |
| </button> |
| <div class="mt-6 flex flex-col gap-3 pt-6 border-t border-outline-variant/10"> |
| <a class="flex items-center gap-3 text-on-surface-variant hover:text-primary transition-colors" href="#"> |
| <span class="material-symbols-outlined text-[20px]">help_outline</span> |
| <span class="text-label-sm">Support</span> |
| </a> |
| <a class="flex items-center gap-3 text-on-surface-variant hover:text-primary transition-colors" href="#"> |
| <span class="material-symbols-outlined text-[20px]">history</span> |
| <span class="text-label-sm">Logs</span> |
| </a> |
| </div> |
| </div> |
| </aside> |
| |
| <main class="ml-0 md:ml-64 pt-24 min-h-screen px-margin-mobile md:px-margin-desktop pb-20"> |
| |
| <header class="mb-12"> |
| <div class="flex flex-col md:flex-row md:items-end justify-between gap-6"> |
| <div> |
| <nav class="flex items-center gap-2 text-label-sm text-on-surface-variant mb-4 uppercase tracking-tighter"> |
| <span>Legal Intel</span> |
| <span class="material-symbols-outlined text-[14px]">chevron_right</span> |
| <span class="text-primary">Citation Library</span> |
| </nav> |
| <h1 class="font-headline-lg text-headline-lg md:text-display-lg text-on-surface mb-2">Legal Authority <span class="gold-gradient-text">Verification</span></h1> |
| <p class="text-body-lg text-on-surface-variant max-w-2xl">A secure protocol for reviewing, verifying, and versioning legal citations within the sovereign intelligence architecture.</p> |
| </div> |
| <div class="flex gap-4"> |
| <div class="flex items-center gap-2 bg-surface-container-high px-4 py-2 rounded-full border border-outline-variant/20"> |
| <span class="w-2 h-2 rounded-full bg-primary animate-pulse"></span> |
| <span class="text-label-md text-on-surface">14 Pending Drafts</span> |
| </div> |
| </div> |
| </div> |
| </header> |
| |
| <div class="flex flex-col gap-8"> |
| <div class="flex border-b border-outline-variant/20"> |
| <button class="px-8 py-4 font-label-md border-b-2 border-primary text-primary transition-all" id="tab-queue" onclick="switchTab('queue')">Queue & Verification</button> |
| <button class="px-8 py-4 font-label-md text-on-surface-variant hover:text-primary border-b-2 border-transparent transition-all" id="tab-history" onclick="switchTab('history')">History & Versioning</button> |
| </div> |
| |
| <div class="space-y-6" id="content-queue"> |
| |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-6"> |
| <div class="glass-panel p-6 rounded-lg flex flex-col justify-between h-32"> |
| <span class="text-label-sm text-on-surface-variant uppercase tracking-widest">Total Verified</span> |
| <span class="font-display-lg text-headline-lg text-primary">1,284</span> |
| </div> |
| <div class="glass-panel p-6 rounded-lg flex flex-col justify-between h-32"> |
| <span class="text-label-sm text-on-surface-variant uppercase tracking-widest">Awaiting Review</span> |
| <span class="font-display-lg text-headline-lg text-secondary">14</span> |
| </div> |
| <div class="glass-panel p-6 rounded-lg flex flex-col justify-between h-32"> |
| <span class="text-label-sm text-on-surface-variant uppercase tracking-widest">Superseded</span> |
| <span class="font-display-lg text-headline-lg text-on-surface-variant">42</span> |
| </div> |
| <div class="glass-panel p-6 rounded-lg flex flex-col justify-between h-32 relative overflow-hidden"> |
| <span class="text-label-sm text-on-surface-variant uppercase tracking-widest relative z-10">Integrity Score</span> |
| <span class="font-display-lg text-headline-lg text-primary relative z-10">99.2%</span> |
| </div> |
| </div> |
| |
| <div class="glass-panel rounded-lg overflow-hidden"> |
| <div class="p-6 border-b border-outline-variant/10 flex flex-col md:flex-row md:items-center justify-between gap-4 bg-surface-container-low/50"> |
| <h3 class="font-headline-md text-headline-md text-on-surface">Verification Queue</h3> |
| <div class="flex gap-4"> |
| <div class="relative"> |
| <span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-on-surface-variant text-[20px]">search</span> |
| <input class="bg-surface-container-highest/50 border border-outline-variant/30 rounded-lg pl-10 pr-4 py-2 text-label-md text-on-surface w-64 focus:border-primary focus:ring-1 focus:ring-primary outline-none transition-all" placeholder="Search Jurisdiction..." type="text"/> |
| </div> |
| <button class="flex items-center gap-2 bg-surface-container-high hover:bg-surface-variant px-4 py-2 rounded-lg text-label-md transition-all"> |
| <span class="material-symbols-outlined text-[20px]">filter_list</span> |
| Filter |
| </button> |
| </div> |
| </div> |
| <div class="overflow-x-auto"> |
| <table class="w-full text-left border-collapse"> |
| <thead> |
| <tr class="bg-surface-container-low text-on-surface-variant border-b border-outline-variant/10"> |
| <th class="px-6 py-4 font-label-md">Status</th> |
| <th class="px-6 py-4 font-label-md">Jurisdiction</th> |
| <th class="px-6 py-4 font-label-md">Article / Title</th> |
| <th class="px-6 py-4 font-label-md">Source</th> |
| <th class="px-6 py-4 font-label-md">Last Verified</th> |
| <th class="px-6 py-4 font-label-md text-right">Actions</th> |
| </tr> |
| </thead> |
| <tbody class="divide-y divide-outline-variant/10"> |
| |
| <tr class="legal-table-row"> |
| <td class="px-6 py-6"> |
| <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold bg-secondary-container/40 text-secondary border border-secondary/20 uppercase tracking-widest">Draft</span> |
| </td> |
| <td class="px-6 py-6"> |
| <p class="font-label-md text-on-surface">Delaware, USA</p> |
| <p class="text-label-sm text-on-surface-variant opacity-70">Corporate Law</p> |
| </td> |
| <td class="px-6 py-6"> |
| <p class="font-label-md text-on-surface">Title 8, Section 102(b)(7)</p> |
| <p class="text-label-sm text-on-surface-variant truncate w-48">Liability Exculpation Clause...</p> |
| </td> |
| <td class="px-6 py-6"> |
| <a class="flex items-center gap-1 text-primary hover:underline text-label-md" href="#"> |
| delaware.gov/code |
| <span class="material-symbols-outlined text-[14px]">open_in_new</span> |
| </a> |
| </td> |
| <td class="px-6 py-6 text-on-surface-variant font-label-sm italic">Pending Review</td> |
| <td class="px-6 py-6 text-right"> |
| <div class="flex justify-end gap-2"> |
| <button class="p-2 hover:bg-primary/20 rounded-lg text-primary transition-all active:scale-95" onclick="toggleModal('verify')" title="Verify"> |
| <span class="material-symbols-outlined">verified</span> |
| </button> |
| <button class="p-2 hover:bg-on-surface-variant/10 rounded-lg text-on-surface-variant transition-all active:scale-95" title="Supersede"> |
| <span class="material-symbols-outlined">swap_horiz</span> |
| </button> |
| <button class="p-2 hover:bg-error-container/40 rounded-lg text-error transition-all active:scale-95" onclick="toggleModal('reject')" title="Reject"> |
| <span class="material-symbols-outlined">cancel</span> |
| </button> |
| </div> |
| </td> |
| </tr> |
| |
| <tr class="legal-table-row"> |
| <td class="px-6 py-6"> |
| <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold bg-primary-container/20 text-primary border border-primary/20 uppercase tracking-widest">Verified</span> |
| </td> |
| <td class="px-6 py-6"> |
| <p class="font-label-md text-on-surface">GDPR, EU</p> |
| <p class="text-label-sm text-on-surface-variant opacity-70">Data Protection</p> |
| </td> |
| <td class="px-6 py-6"> |
| <p class="font-label-md text-on-surface">Article 32</p> |
| <p class="text-label-sm text-on-surface-variant truncate w-48">Security of processing...</p> |
| </td> |
| <td class="px-6 py-6"> |
| <a class="flex items-center gap-1 text-primary hover:underline text-label-md" href="#"> |
| eur-lex.europa.eu |
| <span class="material-symbols-outlined text-[14px]">open_in_new</span> |
| </a> |
| </td> |
| <td class="px-6 py-6 text-on-surface-variant text-label-sm">Oct 12, 2024</td> |
| <td class="px-6 py-6 text-right"> |
| <div class="flex justify-end gap-2"> |
| <button class="p-2 hover:bg-on-surface-variant/10 rounded-lg text-on-surface-variant transition-all" title="View Version History"> |
| <span class="material-symbols-outlined">history</span> |
| </button> |
| <button class="p-2 hover:bg-on-surface-variant/10 rounded-lg text-on-surface-variant transition-all" title="Update"> |
| <span class="material-symbols-outlined">edit</span> |
| </button> |
| </div> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| <div class="p-4 bg-surface-container-low/30 flex justify-center items-center gap-4"> |
| <button class="p-2 rounded-lg hover:bg-surface-container-high transition-all"> |
| <span class="material-symbols-outlined">chevron_left</span> |
| </button> |
| <span class="text-label-sm text-on-surface-variant">Page 1 of 4</span> |
| <button class="p-2 rounded-lg hover:bg-surface-container-high transition-all"> |
| <span class="material-symbols-outlined">chevron_right</span> |
| </button> |
| </div> |
| </div> |
| </div> |
| |
| <div class="hidden space-y-8 animate-in fade-in duration-500" id="content-history"> |
| <div class="glass-panel p-8 rounded-lg"> |
| <h3 class="font-headline-md text-headline-md text-on-surface mb-8">Authority Versioning Timeline</h3> |
| <div class="relative space-y-12 before:absolute before:left-[11px] before:top-2 before:bottom-2 before:w-[2px] before:bg-outline-variant/20"> |
| |
| <div class="relative pl-10"> |
| <div class="absolute left-0 top-1 w-6 h-6 rounded-full bg-primary border-4 border-background active-ring"></div> |
| <div class="flex flex-col md:flex-row justify-between gap-4"> |
| <div> |
| <p class="font-label-md text-primary mb-1">V2.4.1 - Verified Current</p> |
| <p class="font-headline-md text-on-surface">Delaware Gen. Corp. Law § 102</p> |
| <p class="text-body-md text-on-surface-variant mt-2">Amended to include liability protections for senior officers as well as directors. Updated via official legislative digest.</p> |
| </div> |
| <div class="text-right"> |
| <p class="text-label-sm text-on-surface-variant uppercase tracking-widest">Verified By</p> |
| <p class="font-label-md text-on-surface">Senior Counsel (ID:772)</p> |
| <p class="text-label-sm text-on-surface-variant">2024-10-15 09:30 UTC</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </main> |
| |
| <footer class="w-full py-8 px-margin-desktop flex flex-col md:flex-row justify-between items-center bg-surface-container-lowest border-t border-outline-variant/5"> |
| <div class="flex items-center gap-6 mb-4 md:mb-0"> |
| <span class="font-display-lg text-label-md text-primary">Sydeco LightML</span> |
| <p class="font-label-sm text-label-sm text-secondary">© 2024 Sydeco LightML. Sovereign Intelligence Protocol.</p> |
| </div> |
| <div class="flex gap-8"> |
| <a class="text-label-sm text-on-tertiary-fixed-variant hover:text-primary transition-opacity duration-200" href="#">Privacy</a> |
| <a class="text-label-sm text-on-tertiary-fixed-variant hover:text-primary transition-opacity duration-200" href="#">Terms</a> |
| <a class="text-label-sm text-on-tertiary-fixed-variant hover:text-primary transition-opacity duration-200" href="#">Compliance</a> |
| <a class="text-label-sm text-on-tertiary-fixed-variant hover:text-primary transition-opacity duration-200" href="#">Security Documentation</a> |
| </div> |
| </footer> |
| |
| <div class="fixed inset-0 z-[100] hidden flex items-center justify-center p-6" id="modal-verify"> |
| <div class="absolute inset-0 bg-background/80 backdrop-blur-md"></div> |
| <div class="relative glass-panel w-full max-w-xl rounded-lg p-8 border-2 border-primary/20 shadow-[0_0_50px_rgba(242,202,80,0.15)]"> |
| <div class="flex justify-between items-start mb-6"> |
| <div> |
| <h2 class="font-headline-md text-headline-md text-primary">Confirm Verification</h2> |
| <p class="text-body-md text-on-surface-variant">Are you certain this source is accurate and legally binding?</p> |
| </div> |
| <button class="text-on-surface-variant hover:text-primary transition-colors" onclick="toggleModal('verify')"> |
| <span class="material-symbols-outlined">close</span> |
| </button> |
| </div> |
| <div class="space-y-4 mb-8"> |
| <div class="bg-surface-container-low p-4 rounded-lg border border-outline-variant/20"> |
| <p class="text-label-sm text-on-surface-variant uppercase tracking-widest mb-1">Citation Target</p> |
| <p class="font-label-md text-on-surface">Delaware Title 8, § 102(b)(7)</p> |
| </div> |
| <div> |
| <label class="block text-label-sm text-on-surface-variant uppercase tracking-widest mb-2">Internal Verification Notes</label> |
| <textarea class="w-full bg-surface-container-highest/50 border border-outline-variant/30 rounded-lg p-4 text-body-md text-on-surface outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-all" placeholder="Optional: add contextual notes for future reviewers..." rows="3"></textarea> |
| </div> |
| </div> |
| <div class="flex gap-4"> |
| <button class="flex-1 py-3 font-label-md text-on-surface-variant hover:bg-surface-container-high rounded-lg transition-all" onclick="toggleModal('verify')">Cancel</button> |
| <button class="flex-1 py-3 font-label-md bg-primary text-on-primary-fixed rounded-lg hover:brightness-110 shadow-lg shadow-primary/20 transition-all" onclick="confirmAction('Verified')">Confirm Verification</button> |
| </div> |
| </div> |
| </div> |
| |
| <div class="fixed inset-0 z-[100] hidden flex items-center justify-center p-6" id="modal-reject"> |
| <div class="absolute inset-0 bg-background/80 backdrop-blur-md"></div> |
| <div class="relative glass-panel w-full max-w-xl rounded-lg p-8 border-2 border-error/20 shadow-[0_0_50px_rgba(255,180,171,0.15)]"> |
| <div class="flex justify-between items-start mb-6"> |
| <div> |
| <h2 class="font-headline-md text-headline-md text-error">Reject Citation</h2> |
| <p class="text-body-md text-on-surface-variant">Please specify the reason for the rejection.</p> |
| </div> |
| <button class="text-on-surface-variant hover:text-primary transition-colors" onclick="toggleModal('reject')"> |
| <span class="material-symbols-outlined">close</span> |
| </button> |
| </div> |
| <div class="space-y-6 mb-8"> |
| <div> |
| <label class="block text-label-sm text-on-surface-variant uppercase tracking-widest mb-3">Rejection Category</label> |
| <div class="grid grid-cols-2 gap-3"> |
| <button class="px-4 py-2 text-label-md rounded-lg border border-outline-variant/30 hover:border-error hover:text-error transition-all text-left">Incorrect Source</button> |
| <button class="px-4 py-2 text-label-md rounded-lg border border-outline-variant/30 hover:border-error hover:text-error transition-all text-left">Typographical Error</button> |
| <button class="px-4 py-2 text-label-md rounded-lg border border-outline-variant/30 hover:border-error hover:text-error transition-all text-left">Outdated Legislation</button> |
| <button class="px-4 py-2 text-label-md rounded-lg border border-outline-variant/30 hover:border-error hover:text-error transition-all text-left">Formatting Violation</button> |
| </div> |
| </div> |
| <div> |
| <label class="block text-label-sm text-on-surface-variant uppercase tracking-widest mb-2">Detailed Reason</label> |
| <textarea class="w-full bg-surface-container-highest/50 border border-outline-variant/30 rounded-lg p-4 text-body-md text-on-surface outline-none focus:border-error focus:ring-1 focus:ring-error transition-all" placeholder="Explain the specific deficiency..." rows="4"></textarea> |
| </div> |
| </div> |
| <div class="flex gap-4"> |
| <button class="flex-1 py-3 font-label-md text-on-surface-variant hover:bg-surface-container-high rounded-lg transition-all" onclick="toggleModal('reject')">Cancel</button> |
| <button class="flex-1 py-3 font-label-md bg-error text-on-error rounded-lg hover:brightness-110 transition-all" onclick="confirmAction('Rejected')">Reject Authority</button> |
| </div> |
| </div> |
| </div> |
| <script> |
| function switchTab(tab) { |
| const queueTab = document.getElementById('tab-queue'); |
| const historyTab = document.getElementById('tab-history'); |
| const queueContent = document.getElementById('content-queue'); |
| const historyContent = document.getElementById('content-history'); |
| |
| if (tab === 'queue') { |
| queueTab.classList.add('border-primary', 'text-primary'); |
| queueTab.classList.remove('text-on-surface-variant'); |
| historyTab.classList.remove('border-primary', 'text-primary'); |
| historyTab.classList.add('text-on-surface-variant'); |
| queueContent.classList.remove('hidden'); |
| historyContent.classList.add('hidden'); |
| } else { |
| historyTab.classList.add('border-primary', 'text-primary'); |
| historyTab.classList.remove('text-on-surface-variant'); |
| queueTab.classList.remove('border-primary', 'text-primary'); |
| queueTab.classList.add('text-on-surface-variant'); |
| historyContent.classList.remove('hidden'); |
| queueContent.classList.add('hidden'); |
| } |
| } |
| |
| function toggleModal(type) { |
| const modal = document.getElementById(`modal-${type}`); |
| modal.classList.toggle('hidden'); |
| } |
| |
| function confirmAction(action) { |
| alert(`Authority ${action} successfully. Intelligence protocol updated.`); |
| toggleModal(action === 'Verified' ? 'verify' : 'reject'); |
| } |
| |
| |
| document.addEventListener('mousemove', (e) => { |
| const glass = document.querySelectorAll('.glass-panel'); |
| const x = (e.clientX / window.innerWidth - 0.5) * 10; |
| const y = (e.clientY / window.innerHeight - 0.5) * 10; |
| |
| glass.forEach(panel => { |
| panel.style.transform = `perspective(1000px) rotateX(${y * 0.1}deg) rotateY(${x * 0.1}deg)`; |
| }); |
| }); |
| </script> |
| </body></html> |
