Spaces:
Running
Running
| <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 ; | |
| animation-iteration-count: 1 ; | |
| transition-duration: 0.01ms ; | |
| } | |
| } | |
| </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">↓</div> | |
| <div class="arch-node">INGESTION — Medical Extraction Agent</div> | |
| <div class="arch-arrow">↓</div> | |
| <div class="arch-node">ANALYSIS — SSA Policy Agent</div> | |
| <div class="arch-arrow">↓</div> | |
| <div class="arch-node">SYNTHESIS — Legal Brief Writer Agent</div> |