Spaces:

ACLASCollege
/

aegis-graph-final

Running

App Files Files Community

ACLASCollege commited on May 7

Commit

b1da891

verified ·

1 Parent(s): 5b2388d

chore: professionalize branding

Browse files

Files changed (1) hide show

index.html +487 -174

index.html CHANGED Viewed

@@ -1,174 +1,487 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Aegis-Verify | Sovereign Academic Integrity Protocol</title>
-    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;800&family=JetBrains+Mono&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --primary: #00f2ff;
-            --accent: #7000ff;
-            --bg: #03050a;
-            --card: rgba(255, 255, 255, 0.03);
-            --border: rgba(255, 255, 255, 0.1);
-        }
-        body {
-            background: var(--bg);
-            background-image:
-                radial-gradient(circle at 20% 30%, rgba(0, 242, 255, 0.05) 0%, transparent 50%),
-                radial-gradient(circle at 80% 70%, rgba(112, 0, 255, 0.05) 0%, transparent 50%);
-            color: #fff;
-            font-family: 'Outfit', sans-serif;
-            margin: 0;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            justify-content: center;
-            min-height: 100vh;
-            overflow: hidden;
-        }
-        .glass-card {
-            background: var(--card);
-            backdrop-filter: blur(40px);
-            border: 1px solid var(--border);
-            border-radius: 32px;
-            padding: 60px;
-            width: 90%;
-            max-width: 700px;
-            text-align: center;
-            box-shadow: 0 40px 100px rgba(0,0,0,0.5);
-            animation: fadeIn 1s ease-out;
-        }
-        @keyframes fadeIn {
-            from { opacity: 0; transform: translateY(20px); }
-            to { opacity: 1; transform: translateY(0); }
-        }
-        .logo-badge {
-            width: 80px;
-            height: 80px;
-            background: linear-gradient(135deg, var(--primary), var(--accent));
-            border-radius: 20px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            margin: 0 auto 30px;
-            box-shadow: 0 0 30px rgba(0, 242, 255, 0.3);
-        }
-        h1 {
-            font-size: 3.5rem;
-            margin: 0 0 10px;
-            letter-spacing: -2px;
-            font-weight: 800;
-        }
-        p.description {
-            font-size: 1.2rem;
-            color: rgba(255, 255, 255, 0.6);
-            margin-bottom: 50px;
-        }
-        .upload-area {
-            border: 2px dashed var(--border);
-            border-radius: 24px;
-            padding: 80px 40px;
-            transition: 0.3s;
-            cursor: pointer;
-            position: relative;
-            overflow: hidden;
-        }
-        .upload-area:hover {
-            border-color: var(--primary);
-            background: rgba(0, 242, 255, 0.02);
-            transform: scale(1.02);
-        }
-        .upload-icon {
-            font-size: 50px;
-            margin-bottom: 20px;
-            display: block;
-        }
-        .upload-text {
-            font-size: 1.2rem;
-            font-weight: 600;
-            color: var(--primary);
-        }
-        .nav-footer {
-            margin-top: 60px;
-            display: flex;
-            gap: 30px;
-            opacity: 0.5;
-            transition: 0.3s;
-        }
-        .nav-footer:hover { opacity: 1; }
-        .nav-footer a { color: #fff; text-decoration: none; font-size: 14px; font-weight: 600; }
-        /* Scanning Animation overlay */
-        .scan-bar {
-            position: absolute;
-            top: 0; left: 0; width: 100%; height: 2px;
-            background: var(--primary);
-            box-shadow: 0 0 15px var(--primary);
-            display: none;
-            animation: scanLine 2s linear infinite;
-        }
-        @keyframes scanLine {
-            0% { top: 0%; }
-            100% { top: 100%; }
-        }
-    </style>
-</head>
-<body>
-    <div class="glass-card">
-        <div class="logo-badge">
-            <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path></svg>
-        </div>
-        <h1>Aegis-Verify</h1>
-        <p class="description">Sovereign Protocol for Global Academic Integrity.</p>
-        <div class="upload-area" id="dropZone">
-            <div class="scan-bar" id="scanBar"></div>
-            <span class="upload-icon">📄</span>
-            <span class="upload-text">Drop Academic Certificate Here</span>
-            <p style="font-size: 0.9rem; color: rgba(255,255,255,0.4); margin-top: 15px;">Supports PDF, JPEG, or JSON-LD Attestations</p>
-        </div>
-    </div>
-    <div class="nav-footer">
-        <a href="https://aclas.college/">ACLAS COLLEGE</a>
-        <a href="https://github.com/aclascollege/aegis-graph">GITHUB</a>
-        <a href="https://huggingface.co/spaces/ACLASCollege/aegis-graph-final">SPACE</a>
-    </div>
-    <script>
-        const dropZone = document.getElementById('dropZone');
-        const scanBar = document.getElementById('scanBar');
-        dropZone.onclick = () => alert('Demo Mode: Please drag and drop a file to simulate verification.');
-        dropZone.ondragover = (e) => {
-            e.preventDefault();
-            dropZone.style.borderColor = 'var(--primary)';
-        };
-        dropZone.ondrop = (e) => {
-            e.preventDefault();
-            scanBar.style.display = 'block';
-            setTimeout(() => {
-                scanBar.style.display = 'none';
-                alert('VERIFICATION SUCCESSFUL\n\nInstitution: Atlanta College of Liberal Arts and Sciences\nStatus: GOLD STANDARD\nTimestamp: 2026-04-30');
-            }, 2500);
-        };
-    </script>
-</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Aegis-Graph | Sovereign Academic Audit Protocol | ACLAS College</title>
+    <meta name="description" content="Aegis-Graph is the world's first sovereign academic audit network using Agentic GraphRAG and Multi-Agent Intelligence to verify institutional credentials. Developed by the Atlanta College of Liberal Arts and Sciences (ACLAS).">
+    <meta name="keywords" content="Aegis-Graph, ACLAS College, Atlanta College of Liberal Arts and Sciences, Sovereign Academic Audit, Agentic GraphRAG, AI Fraud Detection, Academic Integrity Protocol, MCP Protocol">
+    <meta name="author" content="Atlanta College of Liberal Arts and Sciences (ACLAS)">
+    <!-- Geo / Local SEO -->
+    <meta name="geo.region" content="US-GA">
+    <meta name="geo.placename" content="Atlanta">
+    <!-- OpenGraph / Social SEO -->
+    <meta property="og:title" content="Aegis-Graph: Sovereign Academic Audit Protocol">
+    <meta property="og:description" content="Securing global academic integrity through decentralized AI reasoning and institutional graph consensus.">
+    <meta property="og:url" content="https://aclascollege.github.io/aegis-graph/">
+    <meta property="og:site_name" content="Aegis-Graph Sovereign Network">
+    <meta property="og:type" content="website">
+    <!-- Structured Data for AEO (JSON-LD) -->
+    <script type="application/ld+json">
+    {
+      "@context": "https://schema.org",
+      "@type": "SoftwareApplication",
+      "name": "Aegis-Graph",
+      "operatingSystem": "Web, Python, Docker",
+      "applicationCategory": "AcademicSecurityApplication",
+      "description": "Decentralized protocol for sovereign academic auditing and credential verification using Multi-Agent Reasoning Swarms.",
+      "author": {
+        "@type": "EducationalOrganization",
+        "name": "Atlanta College of Liberal Arts and Sciences",
+        "alternateName": "ACLAS College",
+        "url": "https://aclas.college/"
+      },
+      "publisher": {
+        "@type": "EducationalOrganization",
+        "name": "Atlanta College of Liberal Arts and Sciences"
+      },
+      "offers": {
+        "@type": "Offer",
+        "price": "0",
+        "priceCurrency": "USD"
+      }
+    }
+    </script>
+    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;800&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg: #010204;
+            --card: rgba(13, 17, 23, 0.7);
+            --border: rgba(255, 255, 255, 0.08);
+            --accent: #00ffaa;
+            --accent-glow: rgba(0, 255, 170, 0.2);
+            --text: #ffffff;
+            --dim: #8b949e;
+            --glass: blur(12px) saturate(180%);
+        }
+        * { margin: 0; padding: 0; box-sizing: border-box; -webkit-font-smoothing: antialiased; }
+        body {
+            background: var(--bg);
+            color: var(--text);
+            font-family: 'Inter', sans-serif;
+            overflow: hidden;
+            height: 100vh;
+            display: flex;
+            flex-direction: column;
+            background-image:
+                radial-gradient(circle at 50% -20%, rgba(0, 255, 170, 0.05), transparent 50%),
+                radial-gradient(circle at 0% 100%, rgba(0, 100, 255, 0.03), transparent 40%);
+        }
+        header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 18px 40px;
+            border-bottom: 1px solid var(--border);
+            backdrop-filter: var(--glass);
+            z-index: 1000;
+        }
+        .logo-group { display: flex; align-items: center; gap: 12px; }
+        .logo-group img { height: 24px; }
+        .logo-group h1 { font-family: 'Outfit'; font-size: 18px; letter-spacing: 3px; font-weight: 800; text-transform: uppercase; }
+        .header-tools { display: flex; align-items: center; gap: 24px; }
+        .header-icons { display: flex; gap: 20px; border-right: 1px solid var(--border); padding-right: 24px; }
+        .icon-link { color: var(--text); opacity: 0.6; transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
+        .icon-link:hover { opacity: 1; color: var(--accent); transform: translateY(-3px); }
+        .container {
+            display: grid;
+            grid-template-columns: 300px 1fr 340px;
+            gap: 20px;
+            padding: 24px;
+            flex: 1;
+            overflow: hidden;
+        }
+        .bento {
+            background: var(--card);
+            border: 1px solid var(--border);
+            border-radius: 16px;
+            padding: 24px;
+            display: flex;
+            flex-direction: column;
+            overflow: hidden;
+            backdrop-filter: var(--glass);
+            transition: 0.3s;
+        }
+        .bento:hover { border-color: rgba(0, 255, 170, 0.3); }
+        .label {
+            font-size: 10px;
+            color: var(--dim);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            margin-bottom: 16px;
+            font-weight: 700;
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+        .label::after { content: ''; flex: 1; height: 1px; background: var(--border); }
+        .agent-card {
+            background: rgba(255, 255, 255, 0.03);
+            border: 1px solid var(--border);
+            padding: 16px;
+            border-radius: 12px;
+            margin-bottom: 12px;
+            transition: 0.3s;
+        }
+        .agent-card:hover { background: rgba(255, 255, 255, 0.05); }
+        .energy-bar { height: 3px; background: rgba(255, 255, 255, 0.05); margin-top: 10px; overflow: hidden; border-radius: 2px; }
+        .energy-fill { height: 100%; background: var(--accent); width: 0%; transition: width 1s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 0 10px var(--accent); }
+        .drop-zone {
+            width: 100%;
+            height: 100%;
+            border: 2px dashed var(--border);
+            border-radius: 20px;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+            transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+            background: rgba(255, 255, 255, 0.01);
+        }
+        .drop-zone:hover { border-color: var(--accent); background: rgba(0, 255, 170, 0.03); transform: scale(0.99); }
+        .terminal {
+            background: rgba(0, 0, 0, 0.4);
+            border-radius: 12px;
+            padding: 20px;
+            font-family: 'JetBrains Mono', monospace;
+            font-size: 11px;
+            flex: 1;
+            overflow-y: auto;
+            line-height: 1.7;
+            color: var(--dim);
+            border: 1px solid var(--border);
+        }
+        .terminal::-webkit-scrollbar { width: 4px; }
+        .terminal::-webkit-scrollbar-thumb { background: var(--border); border-radius: 10px; }
+        .btn-main {
+            background: var(--accent);
+            color: #000;
+            border: none;
+            padding: 14px 28px;
+            border-radius: 8px;
+            font-weight: 700;
+            font-size: 13px;
+            cursor: pointer;
+            font-family: 'Outfit';
+            letter-spacing: 1px;
+            transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        }
+        .btn-main:hover { transform: translateY(-2px); box-shadow: 0 8px 25px var(--accent-glow); filter: brightness(1.1); }
+        .btn-main:active { transform: translateY(0); }
+        .meta-item { background: rgba(255, 255, 255, 0.02); padding: 14px; border-radius: 10px; border: 1px solid var(--border); }
+        .meta-val { font-size: 14px; font-weight: 700; color: var(--accent); margin-top: 6px; font-family: 'JetBrains Mono'; }
+        .custom-dropdown {
+            position: relative;
+            cursor: pointer;
+            font-size: 13px;
+            font-weight: 600;
+            min-width: 130px;
+            z-index: 2000;
+        }
+        .dropdown-selected {
+            padding: 8px 16px;
+            background: rgba(255, 255, 255, 0.05);
+            border: 1px solid var(--border);
+            border-radius: 8px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            transition: 0.3s;
+        }
+        .dropdown-selected:hover {
+            background: rgba(255, 255, 255, 0.08);
+            border-color: rgba(255, 255, 255, 0.2);
+        }
+        .dropdown-options {
+            position: absolute;
+            top: calc(100% + 8px);
+            right: 0;
+            background: #0d1117;
+            border: 1px solid var(--border);
+            border-radius: 12px;
+            overflow: hidden;
+            display: none;
+            flex-direction: column;
+            min-width: 100%;
+            box-shadow: 0 10px 30px rgba(0,0,0,0.5);
+            backdrop-filter: var(--glass);
+        }
+        .custom-dropdown.open .dropdown-options {
+            display: flex;
+            animation: dropdownFade 0.2s ease-out;
+        }
+        @keyframes dropdownFade {
+            from { opacity: 0; transform: translateY(-10px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        .dropdown-option {
+            padding: 10px 20px;
+            transition: 0.3s;
+            white-space: nowrap;
+        }
+        .dropdown-option:hover {
+            background: var(--accent);
+            color: #000;
+        }
+        .modal {
+            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
+            background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(20px);
+            display: none; justify-content: center; align-items: center; z-index: 3000;
+        }
+        .report {
+            background: #ffffff; color: #000; width: 540px; padding: 60px;
+            border-radius: 24px; box-shadow: 0 30px 60px rgba(0,0,0,0.5);
+            animation: modalPop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+        }
+        @keyframes modalPop { from { transform: scale(0.9) translateY(20px); opacity: 0; } to { transform: scale(1) translateY(0); opacity: 1; } }
+    </style>
+</head>
+<body>
+    <header>
+        <div class="logo-group">
+            <img src="assets/logo-new.png" alt="Logo">
+            <h1>AEGIS-GRAPH <span style="font-size: 9px; color:var(--accent); opacity: 0.8;">SOVEREIGN_NODE v2.15</span></h1>
+        </div>
+        <div class="header-tools">
+            <div class="header-icons">
+                <a href="https://aclas.college" target="_blank" class="icon-link" title="Institution">
+                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 21h18M3 10h18M5 10V7a3 3 0 0 1 3-3h8a3 3 0 0 1 3 3v3M4 10v11M20 10v11M10 14v4M14 14v4"/></svg>
+                </a>
+                <a href="https://docs.aclas.college/aegis-graph" target="_blank" class="icon-link" title="GitBook Documentation">
+                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20M4 19.5A2.5 2.5 0 0 0 6.5 22H20M4 19.5V3A2.5 2.5 0 0 1 6.5 0.5H20v16.5H6.5a2.5 2.5 0 0 0-2.5 2.5z"/></svg>
+                </a>
+                <a href="https://github.com/aclascollege/aegis-graph" target="_blank" class="icon-link" title="GitHub Repository">
+                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"/></svg>
+                </a>
+            </div>
+            <div class="custom-dropdown" id="lang-dropdown">
+                <div class="dropdown-selected" id="lang-current">English <span style="font-size: 8px;">▼</span></div>
+                <div class="dropdown-options">
+                    <div class="dropdown-option" data-value="en">English</div>
+                    <div class="dropdown-option" data-value="cn">简体中文</div>
+                    <div class="dropdown-option" data-value="es">Español</div>
+                    <div class="dropdown-option" data-value="fr">Français</div>
+                    <div class="dropdown-option" data-value="de">Deutsch</div>
+                    <div class="dropdown-option" data-value="jp">日本語</div>
+                    <div class="dropdown-option" data-value="kr">한국어</div>
+                    <div class="dropdown-option" data-value="pt">Português</div>
+                </div>
+            </div>
+            <button class="btn-main" id="audit-btn" data-i18n="btn_audit">START AUDIT</button>
+        </div>
+    </header>
+    <div class="container">
+        <div class="bento" style="grid-row: span 2;">
+            <p class="label" data-i18n="label_agents">System Swarm</p>
+            <div class="agent-card"><div style="display:flex; justify-content:space-between; font-size:12px; font-weight: 600;"><span data-i18n="agent_v">Vision Forensics</span><span id="v-status" style="color:var(--dim)">IDLE</span></div><div class="energy-bar"><div class="energy-fill" id="v-fill"></div></div></div>
+            <div class="agent-card"><div style="display:flex; justify-content:space-between; font-size:12px; font-weight: 600;"><span data-i18n="agent_g">Graph Navigator</span><span id="g-status" style="color:var(--dim)">IDLE</span></div><div class="energy-bar"><div class="energy-fill" id="g-fill"></div></div></div>
+            <div class="agent-card"><div style="display:flex; justify-content:space-between; font-size:12px; font-weight: 600;"><span data-i18n="agent_l">Logic Auditor</span><span id="l-status" style="color:var(--dim)">IDLE</span></div><div class="energy-bar"><div class="energy-fill" id="l-fill"></div></div></div>
+            <div style="margin-top: auto; padding: 20px; background: rgba(0, 255, 170, 0.03); border-radius: 12px; border: 1px solid var(--border);">
+                <p class="label" data-i18n="label_node_title" style="margin-bottom: 8px;">Active Node</p>
+                <p style="font-size: 13px; font-weight: 800; color:var(--accent); font-family: 'Outfit';">AEGIS_SOV_7822</p>
+                <p style="font-size: 11px; color:var(--dim); line-height: 1.5; margin-top: 4px;">Maintained by the <a href="https://aclas.college" style="color:var(--accent); text-decoration: underline;">Atlanta College of Liberal Arts and Sciences</a>. Global sovereign research partner.</p>
+                <a href="https://github.com/aclascollege/aegis-graph" target="_blank" style="font-size: 10px; color: var(--accent); text-decoration: none; margin-top: 12px; display: inline-block; font-weight: 700; letter-spacing: 0.5px;">PROTOCOL SOURCE ↗</a>
+            </div>
+        </div>
+        <div class="bento"><p class="label" data-i18n="label_hub">Evidence Processing</p><div class="center-hub" style="height: 100%;"><div class="drop-zone" id="drop-zone"><div style="font-size: 32px; color: var(--accent); margin-bottom: 12px;">✧</div><p style="font-size: 15px; font-weight: 700; font-family: 'Outfit'; letter-spacing: 1px;" data-i18n="drop_text">INGEST CREDENTIAL</p><p style="font-size: 10px; color: var(--dim); margin-top: 4px;">PDF, JPG, PNG SUPPORTED</p><p style="font-size: 9px; color: #ffcc66; margin-top: 8px; max-width: 260px; line-height: 1.4;">DEMO MODE: local preview only. Final credential verification requires a server-signed audit.</p><input type="file" id="f-input" accept=".pdf,image/png,image/jpeg" style="display: none"></div></div></div>
+        <div class="bento" style="grid-row: span 2;"><p class="label" data-i18n="label_telemetry">Live Telemetry</p><div class="terminal" id="console"><div>[SYSTEM] Sovereign Node Active. Waiting for ingestion...</div></div></div>
+        <div class="bento">
+            <p class="label" data-i18n="label_metadata">Sovereign Analytics</p>
+            <div class="meta-grid" style="display: grid; grid-template-columns: 1fr 1fr; gap: 12px;">
+                <div class="meta-item"><span class="label" style="margin-bottom:0; font-size: 8px;" data-i18n="meta_issuer">Issuer</span><div class="meta-val" id="m-issuer">--</div></div>
+                <div class="meta-item"><span class="label" style="margin-bottom:0; font-size: 8px;" data-i18n="meta_status">Status</span><div class="meta-val" id="m-status">--</div></div>
+            </div>
+        </div>
+    </div>
+    <div class="modal" id="modal"><div class="report" id="rep-body"></div></div>
+    <script>
+        const i18n = {
+            en: { btn_audit: "START AUDIT", label_agents: "System Agents", agent_v: "Vision Forensics", agent_g: "Graph Navigator", agent_l: "Logic Auditor", label_node_title: "Institutional Node", label_hub: "Evidence Processing", drop_text: "Ingest Credential", label_telemetry: "Live Telemetry", label_metadata: "Metadata Analytics", meta_issuer: "Issuer", meta_status: "Status", verdict_ok: "VERIFIED APPROVED", verdict_no: "AUDIT REJECTED" },
+            cn: { btn_audit: "开始审计", label_agents: "系统代理", agent_v: "视觉法证", agent_g: "图谱导航", agent_l: "逻辑审计", label_node_title: "主权节点", label_hub: "证据处理中心", drop_text: "载入凭证", label_telemetry: "实时遥测", label_metadata: "元数据分析", meta_issuer: "签发机构", meta_status: "状态", verdict_ok: "核验通过", verdict_no: "审计拒绝" },
+            es: { btn_audit: "INICIAR AUDITORÍA", label_agents: "Agentes de Sistema", agent_v: "Forense Visual", agent_g: "Navegador de Grafos", agent_l: "Auditor Lógico", label_node_title: "Nodo Institucional", label_hub: "Procesamiento", drop_text: "Ingresar Credencial", label_telemetry: "Telemetría", label_metadata: "Metadatos", meta_issuer: "Emisor", meta_status: "Estado", verdict_ok: "VERIFICADO", verdict_no: "RECHAZADO" },
+            fr: { btn_audit: "LANCER L'AUDIT", label_agents: "Agents Système", agent_v: "Forensique Visuelle", agent_g: "Navigateur", agent_l: "Auditeur Logique", label_node_title: "Nœud Institutionnel", label_hub: "Traitement", drop_text: "Ingérer", label_telemetry: "Télémétrie", label_metadata: "Métadonnées", meta_issuer: "Émetteur", meta_status: "Statut", verdict_ok: "VERIFIÉ", verdict_no: "REJETÉ" },
+            de: { btn_audit: "AUDIT STARTEN", label_agents: "System-Agenten", agent_v: "Visuelle Forensik", agent_g: "Graph-Navigator", agent_l: "Logik-Auditor", label_node_title: "Institutioneller Knoten", label_hub: "Verarbeitung", drop_text: "Nachweis Einreichen", label_telemetry: "Telemetrie", label_metadata: "Metadaten", meta_issuer: "Aussteller", meta_status: "Status", verdict_ok: "VERIFIZIERT", verdict_no: "ABGELEHNT" },
+            jp: { btn_audit: "監査開始", label_agents: "システムエージェント", agent_v: "視覚法医学", agent_g: "グラフナビ", agent_l: "ロジック監査", label_node_title: "機関ノード", label_hub: "証拠処理", drop_text: "資格情報を入れる", label_telemetry: "テレメトリ", label_metadata: "メタデータ", meta_issuer: "発行者", meta_status: "ステータス", verdict_ok: "検証承認", verdict_no: "拒否" },
+            kr: { btn_audit: "감사 시작", label_agents: "시스템 에이전트", agent_v: "시각적 법의학", agent_g: "그래프 탐색", agent_l: "논리 감사", label_node_title: "기관 노드", label_hub: "증거 처리", drop_text: "자격 증명 제출", label_telemetry: "원격 측정", label_metadata: "메타데이터", meta_issuer: "발행자", meta_status: "상태", verdict_ok: "검증 승인", verdict_no: "거부" },
+            pt: { btn_audit: "INICIAR AUDITORIA", label_agents: "Agentes de Sistema", agent_v: "Forense Visual", agent_g: "Navegador", agent_l: "Auditor Lógico", label_node_title: "Nó Institucional", label_hub: "Processamento", drop_text: "Inserir Credencial", label_telemetry: "Telemetria", label_metadata: "Metadados", meta_issuer: "Emissor", meta_status: "Estado", verdict_ok: "APROVADO", verdict_no: "REJEITADO" }
+        };
+        const dropdown = document.getElementById('lang-dropdown');
+        const langCurrent = document.getElementById('lang-current');
+        let currentLang = 'en';
+        dropdown.onclick = (e) => {
+            dropdown.classList.toggle('open');
+            e.stopPropagation();
+        };
+        // Close dropdown when clicking outside
+        window.addEventListener('click', (e) => {
+            if (!dropdown.contains(e.target)) {
+                dropdown.classList.remove('open');
+            }
+        });
+        document.querySelectorAll('.dropdown-option').forEach(opt => {
+            opt.onclick = (e) => {
+                currentLang = opt.getAttribute('data-value');
+                langCurrent.replaceChildren();
+                langCurrent.appendChild(document.createTextNode(`${opt.innerText} `));
+                const arrow = document.createElement('span');
+                arrow.style.fontSize = '8px';
+                arrow.innerText = '▼';
+                langCurrent.appendChild(arrow);
+                document.querySelectorAll('[data-i18n]').forEach(el => {
+                    const key = el.getAttribute('data-i18n');
+                    if(i18n[currentLang][key]) el.innerText = i18n[currentLang][key];
+                });
+                e.stopPropagation();
+                dropdown.classList.remove('open');
+            };
+        });
+        const btn = document.getElementById('audit-btn');
+        const cons = document.getElementById('console');
+        let file = null;
+        function log(msg) {
+            const d = document.createElement('div');
+            const prompt = document.createElement('span');
+            prompt.style.color = 'var(--accent)';
+            prompt.innerText = '> ';
+            d.appendChild(prompt);
+            d.appendChild(document.createTextNode(msg));
+            cons.appendChild(d); cons.scrollTop = cons.scrollHeight;
+        }
+        document.getElementById('f-input').onchange = (e) => {
+            if(e.target.files.length) {
+                file = e.target.files[0];
+                const dropZone = document.getElementById('drop-zone');
+                dropZone.replaceChildren();
+                const check = document.createElement('div');
+                check.style.color = 'var(--accent)';
+                check.innerText = '✓';
+                dropZone.appendChild(check);
+                const name = document.createElement('p');
+                name.style.fontSize = '10px';
+                name.innerText = file.name;
+                dropZone.appendChild(name);
+                const note = document.createElement('p');
+                note.style.fontSize = '9px';
+                note.style.color = '#ffcc66';
+                note.style.marginTop = '8px';
+                note.innerText = 'Demo intake only; no browser-side approval will be issued.';
+                dropZone.appendChild(note);
+                log(`INGESTED: ${file.name}`);
+            }
+        };
+        document.getElementById('drop-zone').onclick = () => document.getElementById('f-input').click();
+        btn.onclick = async () => {
+            if(!file) return;
+            btn.disabled = true;
+            log("INIT: Preparing local demo intake...");
+            // Vision Agent
+            document.getElementById('v-fill').style.width = "100%";
+            log("VISION: Demo animation only; document bytes are not authenticated in-browser...");
+            await new Promise(r => setTimeout(r, 800));
+            // Graph Agent
+            document.getElementById('g-fill').style.width = "100%";
+            log("GRAPH: Skipping browser-side registry approval; server audit required...");
+            await new Promise(r => setTimeout(r, 1500)); // Simulating a deeper search
+            // Logic Agent
+            document.getElementById('l-fill').style.width = "100%";
+            log("LOGIC: Refusing automatic approval without signed server evidence...");
+            await new Promise(r => setTimeout(r, 800));
+            await finish();
+        };
+        async function finish() {
+            let verdict = 'NEEDS_REVIEW';
+            let reason = 'DEMO MODE: This browser-only page does not read or authenticate document contents. A professional credential decision requires OCR/forensics, issuer registry checks, revocation checks, and a server-signed audit certificate.';
+            let status_code = 'DEMO_ONLY';
+            let issuer = 'UNVERIFIED';
+            let ror_id = '--';
+            const allowedTypes = ['application/pdf', 'image/png', 'image/jpeg'];
+            const fileTypeKnown = allowedTypes.includes(file.type);
+            if (!fileTypeKnown) {
+                verdict = 'REJECTED';
+                status_code = 'UNSUPPORTED_TYPE';
+                reason = 'Unsupported file type. Upload a PDF, PNG, or JPEG credential for a production server-side audit.';
+                log('SYSTEM: REJECTED - Unsupported file type for audit intake.');
+            } else {
+                log('SYSTEM: DEMO ONLY - File content was not sent to a trusted audit service.');
+                log('SYSTEM: NEEDS REVIEW - No browser-side approval is issued.');
+            }
+            const modal = document.getElementById('modal');
+            modal.style.display = 'flex';
+            const t = i18n[currentLang];
+            document.getElementById('m-issuer').innerText = issuer;
+            document.getElementById('m-status').innerText = status_code;
+            const verdictTitle = verdict === 'REJECTED' ? t.verdict_no : 'SERVER AUDIT REQUIRED';
+            const verdictColor = verdict === 'REJECTED' ? '#ff3366' : '#ffcc66';
+            const report = document.getElementById('rep-body');
+            report.replaceChildren();
+            const title = document.createElement('h2');
+            title.style.color = verdictColor;
+            title.innerText = verdictTitle;
+            report.appendChild(title);
+            const summary = document.createElement('p');
+            summary.style.margin = '20px 0';
+            summary.style.lineHeight = '1.6';
+            summary.innerText = reason;
+            report.appendChild(summary);
+            const details = document.createElement('div');
+            details.style.borderTop = '1px solid #eee';
+            details.style.paddingTop = '15px';
+            details.style.fontSize = '11px';
+            details.style.color = '#666';
+            details.style.marginBottom = '20px';
+            details.innerText = `ROR ID: ${ror_id}\nAudit Trace: LOCAL-DEMO-NOT-SIGNED`;
+            report.appendChild(details);
+            const done = document.createElement('button');
+            done.className = 'btn-main';
+            done.style.width = '100%';
+            done.innerText = 'DONE';
+            done.onclick = () => location.reload();
+            report.appendChild(done);
+        }
+    </script>
+</body>
+</html>