anycoder-49a30d2d / index.html
caustino's picture
Upload folder using huggingface_hub
de8f45a verified
Raw History Blame Contribute Delete
33.9 kB
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Caustin IP & Public Trust Platform</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,200..900;1,9..40,200..900&family=Space+Grotesk:wght@300..700&display=swap" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.7/dist/chart.umd.min.js"></script> <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.js"></script> <style> :root { --bg: #f0f2f5; --fg: #0f172a; --muted: #64748b; --accent: #0891b2; --accent-warm: #d97706; --accent-deep: #1a2a4a; --accent-purple: #7e22ce; --card: #ffffff; --border: #e2e8f0; --sidebar-bg: #ffffff; --header-bg: #ffffff; --success: #16a34a; --radius: 12px; --shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04); } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: 'DM Sans', sans-serif; background: var(--bg); color: var(--fg); min-height: 100vh; overflow-x: hidden; } h1, h2, h3, h4 { font-family: 'Space Grotesk', sans-serif; letter-spacing: -0.02em; } body::before { content: ''; position: fixed; top: -50%; right: -30%; width: 80vw; height: 80vw; background: radial-gradient(circle, rgba(8, 145, 178, 0.04) 0%, transparent 60%); pointer-events: none; z-index: 0; } body::after { content: ''; position: fixed; bottom: -40%; left: -20%; width: 70vw; height: 70vw; background: radial-gradient(circle, rgba(217, 119, 6, 0.03) 0%, transparent 60%); pointer-events: none; z-index: 0; } /* Header */ .header { background: var(--header-bg); border-bottom: 1px solid var(--border); box-shadow: var(--shadow); position: sticky; top: 0; z-index: 100; } .header-inner { max-width: 1440px; margin: 0 auto; padding: 0.75rem 1.5rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; } .header-left { display: flex; align-items: center; gap: 0.75rem; } .header-logo { width: 40px; height: 40px; background: linear-gradient(135deg, var(--accent), #06b6d4); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: white; flex-shrink: 0; box-shadow: 0 2px 8px rgba(8, 145, 178, 0.3); } .header-title { font-size: 1.15rem; font-weight: 700; color: var(--fg); line-height: 1.2; } .header-subtitle { font-size: 0.75rem; color: var(--muted); font-weight: 400; } .header-right { display: flex; align-items: center; gap: 1rem; } .header-badge { font-size: 0.7rem; background: linear-gradient(135deg, #ecfdf5, #d1fae5); color: #065f46; padding: 0.25rem 0.75rem; border-radius: 999px; font-weight: 600; border: 1px solid #a7f3d0; display: flex; align-items: center; } .built-with { font-size: 0.75rem; color: var(--muted); text-decoration: none; transition: color 0.2s; } .built-with:hover { color: var(--accent); } /* Layout */ .app-layout { display: flex; min-height: calc(100vh - 60px); position: relative; z-index: 1; } /* Sidebar */ .sidebar { width: 260px; background: var(--sidebar-bg); border-right: 1px solid var(--border); padding: 1.25rem 0.75rem; flex-shrink: 0; position: sticky; top: 60px; height: calc(100vh - 60px); overflow-y: auto; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .sidebar-label { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); padding: 0 0.75rem; margin-bottom: 0.75rem; } .sidebar-nav { list-style: none; display: flex; flex-direction: column; gap: 2px; } .sidebar-nav li button { width: 100%; display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 0.75rem; font-size: 0.85rem; font-weight: 500; color: var(--muted); background: transparent; border: none; border-radius: 8px; cursor: pointer; transition: all 0.2s; font-family: inherit; text-align: left; } .sidebar-nav li button:hover { background: #f1f5f9; color: var(--fg); } .sidebar-nav li button.active { background: linear-gradient(135deg, #ecfeff, #e0f7fa); color: var(--accent); font-weight: 600; box-shadow: inset 3px 0 0 var(--accent); } .sidebar-nav li button svg, .sidebar-nav li button i { width: 18px; height: 18px; flex-shrink: 0; } .sidebar-section { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--border); } .sidebar-info-card { margin-top: 1.5rem; background: linear-gradient(135deg, #f0f9ff, #ecfeff); border: 1px solid #bae6fd; border-radius: var(--radius); padding: 1rem; font-size: 0.75rem; color: #0c4a6e; line-height: 1.5; } .sidebar-info-card strong { display: block; margin-bottom: 0.25rem; font-size: 0.8rem; } /* Main content */ .main-content { flex: 1; padding: 1.5rem; max-width: 1200px; min-width: 0; } /* Cards */ .card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow-md); padding: 1.5rem; border: 1px solid var(--border); transition: box-shadow 0.2s; } .card:hover { box-shadow: var(--shadow-lg); } .card h3 { font-size: 1.1rem; font-weight: 700; margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem; } .card h3 svg { width: 20px; height: 20px; color: var(--accent); } /* Stat cards grid */ .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 1.5rem; } .stat-card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.25rem; border: 1px solid var(--border); border-left: 4px solid var(--accent); display: flex; align-items: center; gap: 1rem; transition: transform 0.2s, box-shadow 0.2s; position: relative; overflow: hidden; } .stat-card::after { content: ''; position: absolute; top: 0; right: 0; width: 80px; height: 80px; background: radial-gradient(circle at top right, currentColor, transparent); opacity: 0.03; pointer-events: none; } .stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); } .stat-card.border-blue { border-left-color: var(--accent); } .stat-card.border-amber { border-left-color: var(--accent-warm); } .stat-card.border-teal { border-left-color: #0d9488; } .stat-card.border-purple { border-left-color: var(--accent-purple); } .stat-icon { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .stat-icon.blue { background: #ecfeff; color: var(--accent); } .stat-icon.amber { background: #fffbeb; color: var(--accent-warm); } .stat-icon.teal { background: #f0fdfa; color: #0d9488; } .stat-icon.purple { background: #faf5ff; color: var(--accent-purple); } .stat-icon svg { width: 22px; height: 22px; } .stat-label { font-size: 0.75rem; font-weight: 500; color: var(--muted); margin-bottom: 0.15rem; } .stat-value { font-family: 'Space Grotesk', sans-serif; font-size: 1.5rem; font-weight: 700; line-height: 1.2; } .stat-sub { font-size: 0.7rem; color: var(--muted); margin-top: 0.1rem; } /* Charts grid */ .charts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-bottom: 1.5rem; } .chart-container { position: relative; width: 100%; height: 300px; } .chart-container.tall { height: 400px; } .chart-container.short { height: 200px; } /* Tables */ .data-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; } .data-table thead { background: #f8fafc; } .data-table th { padding: 0.75rem 1rem; text-align: left; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); border-bottom: 1px solid var(--border); } .data-table td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--border); color: #475569; } .data-table tbody tr { transition: background 0.15s; } .data-table tbody tr:hover { background: #f8fafc; } .data-table td:first-child { font-weight: 600; color: var(--fg); } .badge { display: inline-flex; align-items: center; padding: 0.15rem 0.6rem; font-size: 0.7rem; font-weight: 600; border-radius: 999px; } .badge-green { background: #dcfce7; color: #166534; } .badge-amber { background: #fef3c7; color: #92400e; } .badge-blue { background: #dbeafe; color: #1e40af; } .badge-red { background: #fee2e2; color: #991b1b; } /* Compliance sections */ .compliance-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; } .compliance-list { list-style: none; font-size: 0.85rem; color: #475569; } .compliance-list li { padding: 0.4rem 0; display: flex; align-items: flex-start; gap: 0.5rem; line-height: 1.5; } .compliance-list li .check { color: var(--success); font-weight: 700; flex-shrink: 0; } /* Info boxes */ .info-box { border: 1px solid var(--border); border-radius: 10px; padding: 1.25rem; background: #fafbfc; } .info-box h4 { font-weight: 700; font-size: 0.95rem; margin-bottom: 0.5rem; } .info-box p { font-size: 0.8rem; color: var(--muted); line-height: 1.6; } .info-box p strong { color: var(--fg); } /* Key-value pairs */ .kv-list { display: flex; flex-direction: column; gap: 0.5rem; } .kv-row { display: flex; justify-content: space-between; align-items: center; font-size: 0.85rem; padding: 0.35rem 0; border-bottom: 1px dashed #e2e8f0; } .kv-row:last-child { border-bottom: none; } .kv-row span:last-child { font-weight: 700; } /* Document cards */ .doc-card { border: 1px solid var(--border); border-radius: 10px; padding: 1.25rem; margin-bottom: 1rem; transition: border-color 0.2s, box-shadow 0.2s; background: var(--card); } .doc-card:hover { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); } .doc-card h4 { font-weight: 700; font-size: 0.95rem; margin-bottom: 0.35rem; } .doc-card p { font-size: 0.8rem; color: var(--muted); line-height: 1.6; } .doc-card .doc-status { font-size: 0.75rem; font-weight: 600; margin-bottom: 0.5rem; } .doc-card ul { list-style: disc; padding-left: 1.25rem; font-size: 0.8rem; color: var(--muted); margin-top: 0.5rem; } .doc-card ul li { margin-bottom: 0.25rem; } /* Tab content transitions */ .tab-content { display: none; animation: fadeSlideIn 0.35s ease; } .tab-content.active { display: block; } @keyframes fadeSlideIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* Section spacing */ .section-stack { display: flex; flex-direction: column; gap: 1.5rem; } /* Mobile hamburger */ .mobile-toggle { display: none; background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 0.5rem; cursor: pointer; color: var(--fg); } .mobile-toggle svg { width: 20px; height: 20px; } /* Overlay for mobile sidebar */ .sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.3); z-index: 49; } .sidebar-overlay.active { display: block; } /* Responsive */ @media (max-width: 1024px) { .stats-grid { grid-template-columns: repeat(2, 1fr); } .charts-grid { grid-template-columns: 1fr; } .compliance-grid { grid-template-columns: 1fr; } } @media (max-width: 768px) { .mobile-toggle { display: flex; align-items: center; justify-content: center; } .sidebar { position: fixed; left: 0; top: 60px; z-index: 50; transform: translateX(-100%); box-shadow: var(--shadow-lg); } .sidebar.open { transform: translateX(0); } .main-content { padding: 1rem; } .stats-grid { grid-template-columns: 1fr; } .header-subtitle { display: none; } .data-table { font-size: 0.75rem; } .data-table th, .data-table td { padding: 0.5rem 0.6rem; } } @media (max-width: 480px) { .header-title { font-size: 0.95rem; } .stat-value { font-size: 1.2rem; } } /* Scrollbar styling */ .sidebar::-webkit-scrollbar { width: 4px; } .sidebar::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; } /* Pulse animation */ @keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } .pulse-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--success); display: inline-block; animation: pulse-dot 2s ease-in-out infinite; margin-right: 0.35rem; } /* Architecture diagram styles */ .arch-flow { display: flex; flex-direction: column; gap: 0.5rem; align-items: center; padding: 1rem; } .arch-node { background: linear-gradient(135deg, #f0f9ff, #ecfeff); border: 1px solid #bae6fd; border-radius: 8px; padding: 0.6rem 1.2rem; font-size: 0.8rem; font-weight: 600; color: #0c4a6e; text-align: center; min-width: 200px; transition: transform 0.2s, box-shadow 0.2s; } .arch-node:hover { transform: scale(1.03); box-shadow: 0 4px 12px rgba(8, 145, 178, 0.15); } .arch-arrow { color: var(--accent); font-size: 1.2rem; line-height: 1; } /* Progress bar */ .progress-bar { width: 100%; height: 6px; background: #e2e8f0; border-radius: 3px; overflow: hidden; margin-top: 0.5rem; } .progress-fill { height: 100%; border-radius: 3px; transition: width 1s cubic-bezier(0.4, 0, 0.2, 1); } .progress-fill.blue { background: linear-gradient(90deg, var(--accent), #06b6d4); } .progress-fill.amber { background: linear-gradient(90deg, var(--accent-warm), #f59e0b); } .progress-fill.teal { background: linear-gradient(90deg, #0d9488, #14b8a6); } .progress-fill.purple { background: linear-gradient(90deg, var(--accent-purple), #a855f7); } /* Compliance score ring */ .score-ring-container { display: flex; align-items: center; justify-content: center; gap: 2rem; flex-wrap: wrap; padding: 1rem 0; } .score-ring { position: relative; width: 120px; height: 120px; display: flex; align-items: center; justify-content: center; flex-direction: column; } .score-ring svg { position: absolute; top: 0; left: 0; transform: rotate(-90deg); } .score-ring .score-value { font-family: 'Space Grotesk', sans-serif; font-size: 1.5rem; font-weight: 700; z-index: 1; } .score-ring .score-label { font-size: 0.65rem; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; z-index: 1; } /* Timeline */ .timeline { position: relative; padding-left: 2rem; } .timeline::before { content: ''; position: absolute; left: 8px; top: 0; bottom: 0; width: 2px; background: linear-gradient(to bottom, var(--accent), #bae6fd); border-radius: 1px; } .timeline-item { position: relative; padding-bottom: 1.25rem; } .timeline-item::before { content: ''; position: absolute; left: -1.65rem; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); border: 2px solid white; box-shadow: 0 0 0 2px var(--accent); } .timeline-item.completed::before { background: var(--success); box-shadow: 0 0 0 2px var(--success); } .timeline-item .tl-date { font-size: 0.7rem; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; } .timeline-item .tl-title { font-size: 0.9rem; font-weight: 700; margin: 0.15rem 0; } .timeline-item .tl-desc { font-size: 0.8rem; color: var(--muted); line-height: 1.5; } /* Toast notification */ .toast-container { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 200; display: flex; flex-direction: column; gap: 0.5rem; } .toast { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 0.75rem 1.25rem; box-shadow: var(--shadow-lg); font-size: 0.85rem; display: flex; align-items: center; gap: 0.5rem; animation: toastIn 0.4s ease, toastOut 0.4s ease 3s forwards; max-width: 340px; } .toast svg { width: 18px; height: 18px; color: var(--success); flex-shrink: 0; } @keyframes toastIn { from { opacity: 0; transform: translateY(20px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes toastOut { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(10px); } } /* Floating particles */ .particle-canvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; } /* Search bar */ .search-bar { display: flex; align-items: center; gap: 0.5rem; background: #f8fafc; border: 1px solid var(--border); border-radius: 8px; padding: 0.5rem 0.75rem; margin-bottom: 1.5rem; transition: border-color 0.2s, box-shadow 0.2s; } .search-bar:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.1); } .search-bar svg { width: 16px; height: 16px; color: var(--muted); flex-shrink: 0; } .search-bar input { border: none; background: transparent; font-family: inherit; font-size: 0.85rem; color: var(--fg); outline: none; width: 100%; } .search-bar input::placeholder { color: #94a3b8; } /* Metric highlight */ .metric-highlight { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.7rem; font-weight: 600; padding: 0.15rem 0.5rem; border-radius: 4px; } .metric-up { background: #dcfce7; color: #166534; } .metric-down { background: #fee2e2; color: #991b1b; } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } </style> </head> <body> <!-- Floating particle canvas --> <canvas class="particle-canvas" id="particleCanvas"></canvas> <!-- Toast container --> <div class="toast-container" id="toastContainer"></div> <!-- Header --> <header class="header" role="banner"> <div class="header-inner"> <div class="header-left"> <button class="mobile-toggle" onclick="toggleSidebar()" aria-label="Toggle navigation"> <i data-lucide="menu"></i> </button> <div class="header-logo" aria-hidden="true"> <i data-lucide="scale" style="width:22px;height:22px;"></i> </div> <div> <div class="header-title">Caustin IP & Public Trust Platform</div> <div class="header-subtitle">Comprehensive Legal Research & Visualization Platform</div> </div> </div> <div class="header-right"> <span class="header-badge"><span class="pulse-dot"></span>System Active</span> <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" rel="noopener" class="built-with">Built with anycoder</a> </div> </div> </header> <div class="app-layout"> <!-- Sidebar overlay for mobile --> <div class="sidebar-overlay" id="sidebarOverlay" onclick="toggleSidebar()"></div> <!-- Sidebar --> <nav class="sidebar" id="sidebar" role="navigation" aria-label="Main navigation"> <div class="search-bar"> <i data-lucide="search"></i> <input type="text" placeholder="Search platform..." id="sidebarSearch" oninput="filterNav(this.value)" aria-label="Search navigation"> </div> <div class="sidebar-label">Navigation</div> <ul class="sidebar-nav" id="mainNav"> <li> <button class="active" data-tab="dashboard" onclick="switchTab('dashboard', this)"><i data-lucide="layout-dashboard"></i> Dashboard</button> </li> <li> <button data-tab="litigation" onclick="switchTab('litigation', this)"><i data-lucide="activity"></i> Litigation Analytics</button> </li> <li> <button data-tab="ip" onclick="switchTab('ip', this)"><i data-lucide="file-text"></i> IP Architecture</button> </li> <li> <button data-tab="compliance" onclick="switchTab('compliance', this)"><i data-lucide="shield"></i> Compliance Center</button> </li> <li> <button data-tab="documents" onclick="switchTab('documents', this)"><i data-lucide="book-open"></i> Documents</button> </li> <li> <button data-tab="timeline" onclick="switchTab('timeline', this)"><i data-lucide="clock"></i> Timeline</button> </li> </ul> <div class="sidebar-section"> <div class="sidebar-label">Quick Links</div> <ul class="sidebar-nav" id="quickNav"> <li> <button onclick="switchTab('ip', document.querySelector('[data-tab=ip]'))"><i data-lucide="lock"></i> PQC Crypto Stack</button> </li> <li> <button onclick="switchTab('litigation', document.querySelector('[data-tab=litigation]'))"><i data-lucide="trending-up"></i> Trend Analysis</button> </li> <li> <button onclick="switchTab('compliance', document.querySelector('[data-tab=compliance]'))"><i data-lucide="check-circle"></i> Audit Status</button> </li> </ul> </div> <div class="sidebar-info-card"> <strong>Platform Status</strong> All systems operational. Post-quantum cryptographic layer active. Last audit: 2025-01-15. </div> </nav> <!-- Main Content --> <main class="main-content" role="main"> <!-- Dashboard Tab --> <div class="tab-content active section-stack" id="tab-dashboard"> <!-- Stat Cards --> <div class="stats-grid"> <div class="stat-card border-blue"> <div class="stat-icon blue"><i data-lucide="activity"></i></div> <div> <div class="stat-label">Maryland IDEA Disputes</div> <div class="stat-value">72.6/10K</div> <div class="stat-sub">vs National Avg: 32.4 <span class="metric-highlight metric-up">+124%</span></div> <div class="progress-bar"> <div class="progress-fill blue" style="width:0%" data-target="72.6"></div> </div> </div> </div> <div class="stat-card border-amber"> <div class="stat-icon amber"><i data-lucide="users"></i></div> <div> <div class="stat-label">ADA Employment Charges</div> <div class="stat-value">29,000</div> <div class="stat-sub">33% of all EEOC charges <span class="metric-highlight metric-up">+32%</span></div> <div class="progress-bar"> <div class="progress-fill amber" style="width:0%" data-target="33"></div> </div> </div> </div> <div class="stat-card border-teal"> <div class="stat-icon teal"><i data-lucide="shield"></i></div> <div> <div class="stat-label">HIPAA Genetic Breaches</div> <div class="stat-value">42</div> <div class="stat-sub">+35% annual growth <span class="metric-highlight metric-down">Critical</span></div> <div class="progress-bar"> <div class="progress-fill teal" style="width:0%" data-target="42"></div> </div> </div> </div> <div class="stat-card border-purple"> <div class="stat-icon purple"><i data-lucide="scale"></i></div> <div> <div class="stat-label">GINA Enforcement</div> <div class="stat-value">380</div> <div class="stat-sub">+35% YoY growth <span class="metric-highlight metric-up">+35%</span></div> <div class="progress-bar"> <div class="progress-fill purple" style="width:0%" data-target="38"></div> </div> </div> </div> </div> <!-- Charts --> <div class="charts-grid"> <div class="card"> <h3><i data-lucide="trending-up"></i> Litigation Trends (2011-2024)</h3> <div class="chart-container"> <canvas id="litigationLineChart"></canvas> </div> </div> <div class="card"> <h3><i data-lucide="pie-chart"></i> Compliance Overview</h3> <div class="chart-container"> <canvas id="complianceBarChart"></canvas> </div> </div> </div> <!-- Cases Table --> <div class="card"> <h3><i data-lucide="list"></i> Active Litigation Cases</h3> <div style="overflow-x:auto;"> <table class="data-table"> <thead> <tr> <th>Case ID</th> <th>Type</th> <th>Status</th> <th>Jurisdiction</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td>25-1222</td> <td>ADA/SSI</td> <td><span class="badge badge-green"><span class="pulse-dot"></span>Active</span></td> <td>M.D. Maryland</td> <td>Disability benefits dispute</td> </tr> <tr> <td>25-1224</td> <td>Employment</td> <td><span class="badge badge-green"><span class="pulse-dot"></span>Active</span></td> <td>D. Maryland</td> <td>Workplace discrimination</td> </tr> <tr> <td>25-1522</td> <td>Administrative</td> <td><span class="badge badge-amber">Under Review</span></td> <td>SSA ODAR</td> <td>Procedure violations</td> </tr> <tr> <td>24-3283</td> <td>Constitutional</td> <td><span class="badge badge-blue">Pending</span></td> <td>4th Circuit</td> <td>Fifth Amendment takings</td> </tr> <tr> <td>24-4101</td> <td>GINA</td> <td><span class="badge badge-red">Urgent</span></td> <td>EEOC</td> <td>Genetic data misuse in employment</td> </tr> <tr> <td>24-2756</td> <td>HIPAA</td> <td><span class="badge badge-green"><span class="pulse-dot"></span>Active</span></td> <td>HHS OCR</td> <td>PHI breach notification failure</td> </tr> </tbody> </table> </div> </div> </div> <!-- Litigation Tab --> <div class="tab-content section-stack" id="tab-litigation"> <div class="card"> <h3><i data-lucide="bar-chart-3"></i> IDEA Dispute Resolution Trends (2011-2024)</h3> <p style="font-size:0.85rem;color:var(--muted);line-height:1.7;margin-bottom:1rem;"> Due process complaints increased 78.5% over 11 years. Maryland rate (72.6 events/10K) is 2.24x national average (32.4). Settlements represent ~60% of resolved cases with growing parent advocacy and IEP dispute complexity. </p> <div class="chart-container tall"> <canvas id="ideaBarChart"></canvas> </div> </div> <div class="charts-grid"> <div class="card"> <h3><i data-lucide="users"></i> ADA Employment Litigation</h3> <p style="font-size:0.85rem;color:var(--muted);line-height:1.7;margin-bottom:1rem;"> ~29,000 ADA charges annually (33% of all EEOC charges). Retaliation charges represent ~50% of all EEOC charges. 5-year growth: +32% (2020-2024). Mitigating measures litigation increasing post-ADAAA (2008). </p> <div class="kv-list"> <div class="kv-row"><span>Current Annual Charges</span><span>29,000</span></div> <div class="kv-row"><span>% of Total EEOC Charges</span><span>33%</span></div> <div class="kv-row"><span>Retaliation Cases</span><span>~50%</span></div> <div class="kv-row"><span>5-Year Growth</span><span>+32%</span></div> <div class="kv-row"><span>Avg. Settlement Value</span><span>$45,200</span></div> <div class="kv-row"><span>Favorable Outcome Rate</span><span>62%</span></div> </div> </div> <div class="card"> <h3><i data-lucide="shield"></i> Section 504 Compliance</h3> <p style="font-size:0.85rem;color:var(--muted);line-height:1.7;margin-bottom:1rem;"> Estimated 5,000-7,000 annual complaints across all sectors. Education: 60%, Healthcare: 20%, Social Services: 15%. </p> <div class="chart-container short"> <canvas id="section504PieChart"></canvas> </div> </div> </div> <div class="card"> <h3><i data-lucide="gavel"></i> EEOC Charge Breakdown by Type (2024)</h3> <div class="chart-container"> <canvas id="eeocChart"></canvas> </div> </div> </div> <!-- IP Architecture Tab --> <div class="tab-content section-stack" id="tab-ip"> <div class="card"> <h3><i data-lucide="lock"></i> GPRS-Secure++ Quantum-Resistant Architecture</h3> <p style="font-size:0.85rem;color:var(--muted);line-height:1.7;margin-bottom:1.5rem;"> A comprehensive quantum-resistant cryptographic stack designed for genomic-phenotypic risk scoring systems with full regulatory compliance for HIPAA, GINA, ADA, and SSA requirements. </p> <!-- Workflow diagram --> <div style="margin-bottom:1.5rem;"> <h4 style="font-size:0.9rem;font-weight:700;margin-bottom:0.75rem;">Multi-Agent Workflow Pipeline</h4> <div class="arch-flow"> <div class="arch-node">IDLE — Case Submitted</div> <div class="arch-arrow">&#8595;</div> <div class="arch-node">INGESTION — Medical Extraction Agent</div> <div class="arch-arrow">&#8595;</div> <div class="arch-node">ANALYSIS — SSA Policy Agent</div> <div class="arch-arrow">&#8595;</div> <div class="arch-node">SYNTHESIS — Legal Brief Writer Agent</div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Caustin IP & Public Trust Platform</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link
href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,200..900;1,9..40,200..900&family=Space+Grotesk:wght@300..700&display=swap"
rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.7/dist/chart.umd.min.js"></script>
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.js"></script>
<style>
:root {
--bg: #f0f2f5;
--fg: #0f172a;
--muted: #64748b;
--accent: #0891b2;
--accent-warm: #d97706;
--accent-deep: #1a2a4a;
--accent-purple: #7e22ce;
--card: #ffffff;
--border: #e2e8f0;
--sidebar-bg: #ffffff;
--header-bg: #ffffff;
--success: #16a34a;
--radius: 12px;
--shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
font-family: 'DM Sans', sans-serif;
background: var(--bg);
color: var(--fg);
min-height: 100vh;
overflow-x: hidden;
}
h1, h2, h3, h4 {
font-family: 'Space Grotesk', sans-serif;
letter-spacing: -0.02em;
}
body::before {
content: '';
position: fixed;
top: -50%;
right: -30%;
width: 80vw;
height: 80vw;
background: radial-gradient(circle, rgba(8, 145, 178, 0.04) 0%, transparent 60%);
pointer-events: none;
z-index: 0;
}
body::after {
content: '';
position: fixed;
bottom: -40%;
left: -20%;
width: 70vw;
height: 70vw;
background: radial-gradient(circle, rgba(217, 119, 6, 0.03) 0%, transparent 60%);
pointer-events: none;
z-index: 0;
}
/* Header */
.header {
background: var(--header-bg);
border-bottom: 1px solid var(--border);
box-shadow: var(--shadow);
position: sticky;
top: 0;
z-index: 100;
}
.header-inner {
max-width: 1440px;
margin: 0 auto;
padding: 0.75rem 1.5rem;
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
flex-wrap: wrap;
}
.header-left {
display: flex;
align-items: center;
gap: 0.75rem;
}