anycoder-60f3619d / index.html
caustino's picture
Upload folder using huggingface_hub
a482926 verified
Raw
History Blame Contribute Delete
23.7 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SSA Discovery | Subchapter V & Daubert Compliance</title>
<!-- Import Inter Font for modern UI -->
<link href="https://fonts.googleapis.com/css2?family=Inter:300,400,500,600,700&display=swap" rel="stylesheet">
<!-- Import FontAwesome for Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
/* --- CSS VARIABLES & THEME --- */
:root {
--primary: #2563eb;
--primary-dark: #1e40af;
--secondary: #0f172a;
--accent: #10b981;
--danger: #ef4444;
--warning: #f59e0b;
--bg-body: #f8fafc;
--bg-card: #ffffff;
--text-main: #1e293b;
--text-muted: #64748b;
--border: #e2e8f0;
--shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
--radius: 8px;
--sidebar-width: 280px;
--sidebar-width-collapsed: 0px;
}
/* --- RESET & BASE --- */
* {
box-sizing: box-sizing;
margin: 0;
padding: 0;
}
body {
font-family: 'Inter', sans-serif;
background-color: var(--bg-body);
color: var(--text-main);
display: flex;
height: 100vh;
overflow: hidden;
}
a {
text-decoration: none;
color: inherit;
transition: 0.2s;
}
/* --- LAYOUT --- */
.app-container {
display: flex;
width: 100%;
height: 100%;
}
/* --- SIDEBAR --- */
.sidebar {
width: var(--sidebar-width);
background-color: var(--bg-card);
border-right: 1px solid var(--border);
display: flex;
flex-direction: column;
padding: 1.5rem;
transition: transform 0.3s ease;
z-index: 10;
position: relative;
}
.brand {
font-weight: 700;
font-size: 1.1rem;
color: var(--primary);
margin-bottom: 2rem;
display: flex;
align-items: center;
gap: 10px;
}
.nav-section-title {
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--text-muted);
margin-top: 1.5rem;
margin-bottom: 0.5rem;
font-weight: 600;
}
.nav-links {
list-style: none;
flex-grow: 1;
}
.nav-item {
margin-bottom: 0.25rem;
}
.nav-link {
display: flex;
align-items: center;
padding: 0.6rem 0.8rem;
color: var(--text-muted);
border-radius: var(--radius);
font-weight: 500;
gap: 10px;
font-size: 0.9rem;
}
.nav-link:hover,
.nav-link.active {
background-color: #f1f5f9;
color: var(--primary);
font-weight: 600;
}
.nav-link i {
width: 20px;
text-align: center;
}
.sidebar-footer {
margin-top: auto;
border-top: 1px solid var(--border);
padding-top: 1rem;
}
.anycoder-link {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.8rem;
color: var(--text-muted);
font-weight: 500;
padding: 0.6rem 0.8rem;
border-radius: var(--radius);
background: #f1f5f9;
border: 1px solid var(--border);
}
.anycoder-link:hover {
color: var(--primary);
border-color: var(--primary);
}
/* --- MAIN CONTENT --- */
.main-content {
flex-grow: 1;
background-color: var(--bg-body);
overflow-y: auto;
padding: 2rem;
position: relative;
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 2rem;
}
.header-title h1 {
font-size: 1.5rem;
font-weight: 600;
color: var(--text-main);
}
.header-title p {
color: var(--text-muted);
font-size: 0.9rem;
margin-top: 4px;
}
.user-profile {
display: flex;
align-items: center;
gap: 1rem;
background: var(--bg-card);
padding: 0.5rem 1rem;
border-radius: 50px;
border: 1px solid var(--border);
box-shadow: var(--shadow);
}
.badge {
padding: 4px 8px;
border-radius: 4px;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
}
.badge-secure {
background: var(--accent);
color: white;
}
.badge-warning {
background: var(--warning);
color: white;
}
.badge-estate {
background: var(--secondary);
color: white;
}
/* --- GRID & CARDS --- */
.dashboard-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
}
.card {
background: var(--bg-card);
border-radius: var(--radius);
padding: 1.5rem;
box-shadow: var(--shadow);
border: 1px solid var(--border);
transition: transform 0.2s;
}
.card:hover {
transform: translateY(-2px);
}
.card-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
color: var(--text-muted);
font-size: 0.85rem;
font-weight: 600;
border-bottom: 1px solid #f1f5f9;
padding-bottom: 0.5rem;
}
/* --- DAUBERT / REPRODUCIBILITY WORKFLOW --- */
.workflow-container {
grid-column: span 2;
display: flex;
flex-direction: column;
gap: 1rem;
}
.workflow-step {
display: flex;
align-items: center;
gap: 1rem;
padding: 1rem;
background: #f8fafc;
border-radius: var(--radius);
border-left: 4px solid var(--border);
transition: 0.3s ease;
}
.workflow-step.active {
border-left-color: var(--primary);
background: #eff6ff;
}
.workflow-step.completed {
border-left-color: var(--accent);
}
.workflow-step.daubert-check {
border-left-color: var(--warning);
background: #fff7ed;
}
.workflow-step.pqc {
border-left-color: var(--secondary);
background: #f1f5f9;
}
.step-icon {
width: 30px;
height: 30px;
background: var(--primary);
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.8rem;
}
.step-content {
flex-grow: 1;
}
.step-title {
font-weight: 600;
color: var(--text-main);
}
.step-desc {
font-size: 0.85rem;
color: var(--text-muted);
}
/* --- CERTIORARI LIST --- */
.cert-list {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.cert-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.8rem;
background: #f8fafc;
border-radius: 4px;
border: 1px solid transparent;
cursor: pointer;
}
.cert-item:hover {
border-color: var(--border);
background: #fff;
}
.cert-theory {
font-weight: 500;
font-size: 0.9rem;
}
.cert-status {
font-size: 0.75rem;
color: var(--text-muted);
text-transform: uppercase;
}
/* --- DATA TABLE --- */
.data-table {
width: 100%;
border-collapse: collapse;
font-size: 0.85rem;
}
.data-table th {
text-align: left;
color: var(--text-muted);
padding: 0.8rem 0.5rem;
border-bottom: 1px solid var(--border);
font-weight: 600;
}
.data-table td {
padding: 0.8rem 0.5rem;
border-bottom: 1px solid #f1f5f9;
}
.confidence-bar {
height: 6px;
background: #e2e8f0;
border-radius: 3px;
width: 80px;
overflow: hidden;
}
.confidence-fill {
height: 100%;
background: var(--primary);
}
/* --- MOBILE RESPONSIVENESS --- */
@media (max-width: 1024px) {
.dashboard-grid {
grid-template-columns: 1fr;
}
.workflow-container {
grid-column: span 1;
}
}
@media (max-width: 768px) {
.sidebar {
position: absolute;
transform: translateX(-100%);
height: 100%;
box-shadow: var(--shadow);
}
.sidebar.open {
transform: translateX(0);
}
.mobile-menu-btn {
display: block;
font-size: 1.5rem;
cursor: pointer;
color: var(--text-main);
}
.header-title h1 {
font-size: 1.2rem;
}
}
/* --- UTILITIES --- */
.btn {
padding: 0.6rem 1.2rem;
border-radius: var(--radius);
border: none;
cursor: pointer;
font-weight: 500;
font-size: 0.9rem;
transition: 0.2s;
}
.btn-primary {
background: var(--primary);
color: white;
}
.btn-primary:hover {
background: var(--primary-dark);
}
.btn-outline {
background: transparent;
border: 1px solid var(--border);
color: var(--text-main);
}
.btn-outline:hover {
background: #f1f5f9;
}
/* --- ANIMATION --- */
@keyframes pulse {
0% {
opacity: 1;
}
50% {
opacity: 0.5;
}
100% {
opacity: 1;
}
}
.processing {
animation: pulse 1.5s infinite;
}
.manifest-tag {
font-family: monospace;
background: #f1f5f9;
padding: 2px 6px;
border-radius: 3px;
font-size: 0.75rem;
color: var(--text-muted);
}
</style>
</head>
<body>
<div class="app-container">
<!-- SIDEBAR -->
<nav class="sidebar" id="sidebar">
<div class="brand">
<i class="fa-solid fa-network-wired"></i>
SSA Discovery
</div>
<!-- TRACK A: FINANCE -->
<div class="nav-section-title">Track A: Bankruptcy (Subchapter V)</div>
<ul class="nav-links">
<li class="nav-item"><a href="#" class="nav-link active"><i class="fa-solid fa-chart-line"></i> Dashboard</a></li>
<li class="nav-item"><a href="#" class="nav-link"><i class="fa-solid fa-file-contract"></i> Creditor Matrix</a></li>
<li class="nav-item"><a href="#" class="nav-link"><i class="fa-solid fa-gem"></i> IP Asset Valuation</a></li>
</ul>
<!-- TRACK B: SCIENCE -->
<div class="nav-section-title">Track B: Scientific Core</div>
<ul class="nav-links">
<li class="nav-item"><a href="#" class="nav-link"><i class="fa-solid fa-dna"></i> PRS Stratification</a></li>
<li class="nav-item"><a href="#" class="nav-link"><i class="fa-solid fa-flask"></i> Daubert Engine</a></li>
<li class="nav-item"><a href="#" class="nav-link"><i class="fa-solid fa-shield-check"></i> Geno-Pheno Pipeline</a></li>
</ul>
<!-- TRACK C: LITIGATION -->
<div class="nav-section-title">Track C: Litigation</div>
<ul class="nav-links">
<li class="nav-item"><a href="#" class="nav-link"><i class="fa-solid fa-landmark"></i> Certiorari Petitions</a></li>
<li class="nav-item"><a href="#" class="nav-link"><i class="fa-solid fa-folder-open"></i> Case Registry</a></li>
<li class="nav-item"><a href="#" class="nav-link"><i class="fa-solid fa-robot"></i> Gov-LLM Tools</a></li>
</ul>
<div class="sidebar-footer">
<a href="https://huggingface.co/spaces/akhaliq/anycoder" class="anycoder-link" target="_blank">
<i class="fa-solid fa-code"></i> Built with anycoder
</a>
</div>
</nav>
<!-- MAIN CONTENT -->
<main class="main-content">
<!-- HEADER -->
<div class="header">
<div class="header-title">
<i class="fa-solid fa-bars mobile-menu-btn" onclick="toggleSidebar()" style="display:none; margin-right: 1rem;"></i>
<h1>Estate Asset: #2024-SSA-8921</h1>
<p>Subject: Subchapter V Estate / Neurogenetic Disability Claim</p>
</div>
<div class="user-profile">
<div class="badge badge-secure">Kyber-768 Active</div>
<div class="badge badge-warning">Audit Mode</div>
<div class="badge badge-estate">Estate Asset</div>
<div style="font-weight: 600; font-size: 0.9rem;">Dr. A. Reviewer</div>
<i class="fa-solid fa-circle-user" style="color: var(--text-muted);"></i>
</div>
</div>
<!-- DASHBOARD GRID -->
<div class="dashboard-grid">
<!-- DAUBERT / REPRODUCIBILITY WORKFLOW (Left Column) -->
<div class="card workflow-container">
<div class="card-header">
<span>Daubert Compliance & Reproducibility Engine</span>
<span class="badge badge-secure">Validating</span>
</div>
<!-- Step 1: Data Integrity -->
<div class="workflow-step completed">
<div class="step-icon"><i class="fa-solid fa-check"></i></div>
<div class="step-content">
<div class="step-title">Cryptographic Provenance</div>
<div class="step-desc">SHA3-256 Hash Verified. Chain of Custody: Immutable.</div>
</div>
</div>
<!-- Step 2: Statistical Methodology -->
<div class="workflow-step completed">
<div class="step-icon"><i class="fa-solid fa-check"></i></div>
<div class="step-content">
<div class="step-title">Statistical Calibration</div>
<div class="step-desc">PRS-CSx Recalibration Complete. Ancestry: EUR (PCA Matched).</div>
</div>
</div>
<!-- Step 3: Geno-Pheno Pipeline -->
<div class="workflow-step daubert-check">
<div class="step-icon processing"><i class="fa-solid fa-spinner"></i></div>
<div class="step-content">
<div class="step-title">Geno-Pheno Journal Mining</div>
<div class="step-desc">Mining PubMed/CourtListener for PQC-GPRS tools...</div>
</div>
</div>
<!-- Step 4: Certiorari Synthesis -->
<div class="workflow-step pqc">
<div class="step-icon"><i class="fa-solid fa-lock"></i></div>
<div class="step-content">
<div class="step-title>Petition Synthesis (5 Theories)</div>
<div class="step-desc">Pending Manifest Validation...</div>
</div>
</div>
</div>
<!-- CERTIORARI PETITIONS (Right Column Top) -->
<div class="card">
<div class="card-header">
<span>5 Certiorari Petitions (28 U.S.C. §1257)</span>
<i class="fa-solid fa-landmark"></i>
</div>
<div class="cert-list">
<div class="cert-item">
<div>
<div class="cert-theory">Administrative Accessibility</div>
<div class="cert-status">Mathews v. Eldridge / Tennessee v. Lane</div>
</div>
<div style="color: var(--accent);"><i class="fa-solid fa-check-circle"></i></div>
</div>
<div class="cert-item">
<div>
<div class="cert-theory">Evidentiary Exclusion of PRS</div>
<div class="cert-status">Daubert / Kumho Tire</div>
</div>
<div style="color: var(--accent);"><i class="fa-solid fa-check-circle"></i></div>
</div>
<div class="cert-item">
<div>
<div class="cert-theory">Unlawful Detention</div>
<div class="cert-status">Youngberg / O'Connor</div>
</div>
<div style="color: var(--warning);"><i class="fa-solid fa-circle"></i></div>
</div>
<div class="cert-item">
<div>
<div class="cert-theory">Gov-LLM Accessibility</div>
<div class="cert-status">ADA Title II + §504</div>
</div>
<div style="color: var(--warning);"><i class="fa-solid fa-circle"></i></div>
</div>
<div class="cert-item">
<div>
<div class="cert-theory">Credibility Discounting</div>
<div class="cert-status">APA §706 / SSR 16-4p</div>
</div>
<div style="color: var(--warning);"><i class="fa-solid fa-circle"></i></div>
</div>
</div>
<div style="margin-top: 1rem; border-top: 1px solid var(--border); padding-top: 0.8rem;">
<button class="btn btn-outline" style="width: 100%; font-size: 0.8rem;" onclick="alert('Downloading Petition Package (PDF)...')">
<i class="fa-solid fa-download"></i> Export Petitions
</button>
</div>
</div>
<!-- GENOMIC DATA / PRS STRATIFICATION (Bottom Full Width) -->
<div class="card" style="grid-column: span 3;">
<div class="card-header">
<span>Probabilistic Risk Stratification (PRS)</span>
<div style="display: flex; gap: 0.5rem;">
<button class="btn btn-outline" onclick="alert('Downloading Reproducibility Manifest JSON...')">
<i class="fa-solid fa-file-code"></i> Manifest
</button>
<button class="btn btn-primary" onclick="alert('Exporting Evidence Trace...')">
<i class="fa-solid fa-download"></i> Export Evidence
</button>
</div>
</div>
<table class="data-table">
<thead>
<tr>
<th>SNP ID</th>
<th>Allele</th>
<th>Effect Size</th>
<th>Confidence</th>
<th>Source (DOI)</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>rs4680 (COMT)</td>
<td>Val/Val</td>
<td>0.45</td>
<td>
<div class="confidence-bar">
<div class="confidence-fill" style="width: 90%;"></div>
</div>
</td>
<td>10.1038/ng.3945</td>
<td style="color: var(--accent);">Verified</td>
</tr>
<tr>
<td>rs10838543</td>
<td>A/A</td>
<td>0.12</td>
<td>
<div class="confidence-bar">
<div class="confidence-fill" style="width: 75%;"></div>
</div>
</td>
<td>10.1001/psych.2023</td>
<td style="color: var(--accent);">Verified</td>
</tr>
<tr>
<td>rs1234567</td>
<td>G/T</td>
<td>0.03</td>
<td>
<div class="confidence-bar">
<div class="confidence-fill" style="width: 40%;"></div>
</div>
</td>
<td>Pending Review</td>
<td style="color: var(--warning);">Low Confidence</td>
</tr>
<tr>
<td>rs987654</td>
<td>C/C</td>
<td>0.82</td>
<td>
<div class="confidence-bar">
<div class="confidence-fill" style="width: 95%;"></div>
</div>
</td>
<td>10.1016/j.cell.2022</td>
<td style="color: var(--accent);">Verified</td>
</tr>
</tbody>
</table>
<div style="margin-top: 1rem; font-size: 0.8rem; color: var(--text-muted);">
<i class="fa-solid fa-circle-info"></i> <strong>Note:</strong> This data is presented as
<strong>probabilistic risk stratification</strong> rather than diagnostic certainty. It does not establish
legal incapacity.
</div>
</div>
<!-- IP ASSET VALUATION (Bottom Right) -->
<div class="card">
<div class="card-header">
<span>IP Asset Valuation (Estate)</span>
<i class="fa-solid fa-gem"></i>
</div>
<div style="margin-bottom: 1rem;">
<h3 style="font-size: 1.2rem;">Total Estimated Value</h3>
<div style="font-size: 2rem; font-weight: 700; color: var(--primary);">$1,250,000</div>
<p style="color: var(--text-muted); font-size: 0.85rem;">Includes: Gov-LLM Algo, PRS Engine, UI Codebase</p>
</div>
<div style="margin-top: 1rem; border-top: 1px solid var(--border); padding-top: 1rem;">
<div style="display: flex; justify-content: space-between; margin-bottom: 0.5rem;">
<span>Trustee Status</span>
<span style="font-weight: 600;">Pending Review</span>
</div>
<div style="display: flex; justify-content: space-between; margin-bottom: 0.5rem;">
<span>Valuation Method</span>
<span class="manifest-tag">Income Approach</span>
</div>
</div>
</div>
</div>
</main>
</div>
<script>
// --- Mobile Sidebar Logic ---
function toggleSidebar() {
const sidebar = document.getElementById('sidebar');
sidebar.classList.toggle('open');
// Adjust media query logic for JS
if (window.innerWidth > 768) {
sidebar.style.transform = sidebar.classList.contains('open') ? 'translateX(0)' : 'translateX(-100%';
}
}
// --- Dynamic Check for Mobile Menu Button ---
function checkMobile() {
const btn = document.querySelector('.mobile-menu-btn');
if (window.innerWidth <= 768) {
btn.style.display = 'block';
} else {
btn.style.display = 'none';
document.getElementById('sidebar').style.transform = 'translateX(0)';
}
}
window.addEventListener('resize', checkMobile);
checkMobile(); // Initial check
// --- Mock Workflow Progression ---
// Simulates the Daubert compliance check
const workflowSteps = document.querySelectorAll('.workflow-step');
setTimeout(() => {
// Step 3 is already active (Reproducibility)
const step3 = workflowSteps[2];
step3.classList.add('completed');
step3.classList.remove('daubert-check');
step3.querySelector('.step-icon').innerHTML = '<i class="fa-solid fa-check"></i>';
step3.querySelector('.step-desc').innerText = "Pipeline Complete: 30 Tools Discovered.";
// Step 4 becomes active
const step4 = workflowSteps[3];
step4.classList.add('active');
step4.querySelector('.step-icon').classList.remove('processing');
step4.querySelector('.step-icon').innerHTML = '<i class="fa-solid fa-spinner"></i>';
step4.querySelector('.step-icon').classList.add('processing');
step4.querySelector('.step-desc').innerText = "Synthesizing Certiorari Petitions...";
}, 3000);
// --- Navigation Click Handling ---
const navLinks = document.querySelectorAll('.nav-link');
navLinks.forEach(link => {
link.addEventListener('click', (e) => {
e.preventDefault();
navLinks.forEach(l => l.classList.remove('active'));
link.classList.add('active');
// Simple view simulation
if(link.innerText.includes('Creditor Matrix')) {
alert('Opening Creditor Matrix Generator (Subchapter V)...');
} else if(link.innerText.includes('Certiorari Petition')) {
alert('Loading Certiorari Petition Builder (28 U.S.C. §1257)...');
}
});
});
</script>
</body>
</html>