bharatgraph / frontend /index.html
abinazebinoy's picture
fix(B-25): remove incorrect D3 7.9.0 SRI hash that silently blocked graph visualisation
c4a33c8
Raw
History Blame Contribute Delete
8.65 kB
<!DOCTYPE html>
<html lang="en" data-theme="dark">
<head>
<!-- B-13 FIX: BHARATGRAPH_API_URL must be defined before api.js loads -->
<!-- Was at bottom of body -- race condition when api.js ran first -->
<script>
(function() {
var h = window.location.hostname;
window.BHARATGRAPH_API_URL = (h === "localhost" || h === "127.0.0.1" || h === "")
? "http://localhost:8000"
: "https://abinazebinoly-bharatgraph.hf.space";
})();
</script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="BharatGraph -- AI-powered public transparency and institutional intelligence platform for India.">
<meta name="theme-color" content="#0A0F2E">
<title>BharatGraph -- Public Transparency Intelligence</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://abinazebinoly-bharatgraph.hf.space">
<link rel="dns-prefetch" href="https://abinazebinoly-bharatgraph.hf.space">
<link rel="stylesheet" href="css/design-system.css">
<link rel="stylesheet" href="css/components.css">
<!-- B-25 FIX: wrong SRI hash removed -- browsers refused to load D3 -->
<!-- breaking ALL graph visualisation (relationship graph, zoom, nodes) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.9.0/d3.min.js"
onerror="window._d3Failed=true;console.warn('D3 CDN failed')"
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body>
<nav class="navbar">
<div class="container">
<div class="navbar__inner">
<a class="navbar__brand" href="#/" onclick="Router.navigate('/');return false;">
<div>
<div class="navbar__logo-text">BHARATGRAPH</div>
<div class="navbar__tagline">Public Transparency Intelligence</div>
</div>
</a>
<nav id="main-nav" class="navbar__nav" aria-label="Main navigation">
<a class="navbar__nav-link" data-route="/"
href="#/" onclick="Router.navigate('/');return false;" data-i18n="nav_home" data-i18n-default="Home">Home</a>
<a class="navbar__nav-link" data-route="/search"
href="#/search" onclick="Router.navigate('/search');return false;" data-i18n="nav_search" data-i18n-default="Search">Search</a>
<a class="navbar__nav-link" data-route="/live-feed"
href="#/live-feed" onclick="Router.navigate('/live-feed');return false;" data-i18n="nav_feed" data-i18n-default="Live Feed">Live Feed</a>
<a class="navbar__nav-link" data-route="/about"
href="#/about" onclick="Router.navigate('/about');return false;" data-i18n="nav_about" data-i18n-default="About">About</a>
</nav>
<!-- UI-1 FIX: hamburger button for mobile navigation -->
<button id="nav-toggle" class="navbar__hamburger" aria-label="Open navigation"
onclick="document.getElementById('main-nav').classList.toggle('navbar__nav--open')"
style="display:none;background:none;border:none;cursor:pointer;
padding:8px;color:var(--text-primary);font-size:20px">
&#9776;
</button>
<div class="navbar__controls">
<select id="navbar-lang-select"
style="background:var(--bg-tertiary);border:1px solid var(--border-color);
border-radius:var(--radius-md);padding:var(--space-1) var(--space-2);
color:var(--text-secondary);font-size:var(--font-size-xs);cursor:pointer"
onchange="State.language=this.value; if(window.applyLanguage) applyLanguage(this.value); var _ls=document.getElementById('lang-select'); if(_ls) _ls.value=this.value;">
<option value="en">EN -- English</option>
<option value="hi">HI -- हिन्दी</option>
<option value="ta">TA -- தமிழ்</option>
<option value="te">TE -- తెలుగు</option>
<option value="kn">KN -- ಕನ್ನಡ</option>
<option value="ml">ML -- മലയാളം</option>
<option value="mr">MR -- मराठी</option>
<option value="bn">BN -- বাংলা</option>
<option value="gu">GU -- ગુજરાતી</option>
<option value="pa">PA -- ਪੰਜਾਬੀ</option>
<option value="or">OR -- ଓଡ଼ିଆ</option>
<option value="as">AS -- অসমীয়া</option>
<option value="ur">UR -- اردو</option>
<option value="sd">SD -- سنڌي</option>
<option value="kok">KOK -- कोंकणी</option>
<option value="mai">MAI -- मैथिली</option>
<option value="ne">NE -- नेपाली</option>
<option value="doi">DOI -- डोगरी</option>
<option value="sa">SA -- संस्कृतम्</option>
<option value="mni">MNI -- মৈতৈলোন্</option>
<option value="sat">SAT -- ṥṁṭtāḷi</option>
<option value="ks">KS -- کٲشہر</option>
</select>
<button class="btn btn--ghost btn--sm" id="theme-btn"
onclick="toggleTheme()" aria-label="Toggle theme">
Light
</button>
</div>
</div>
</div>
</nav>
<main id="app-main" role="main" aria-live="polite">
<div style="display:flex;align-items:center;justify-content:center;
min-height:60vh;flex-direction:column;gap:16px">
<div class="spinner" style="width:40px;height:40px"></div>
<p style="color:var(--text-muted);font-size:14px">Loading BharatGraph...</p>
</div>
</main>
<footer style="border-top:1px solid var(--border-color);
padding:var(--space-8) 0;margin-top:var(--space-16)">
<div class="container">
<div style="display:flex;align-items:center;justify-content:space-between;
flex-wrap:wrap;gap:var(--space-4)">
<div>
<div style="font-weight:600;color:var(--accent-primary);
margin-bottom:var(--space-1)">BHARATGRAPH</div>
<div style="font-size:var(--font-size-xs);color:var(--text-muted)">
Public Transparency Intelligence Platform
</div>
</div>
<div style="font-size:var(--font-size-xs);color:var(--text-muted);
text-align:right;line-height:var(--line-height-relaxed)">
All data from official government sources.<br>
Outputs are analytical indicators, not legal findings.<br>
MIT License -- Open Source
</div>
</div>
<div style="margin-top:var(--space-4);padding-top:var(--space-4);
border-top:1px solid var(--border-color);
display:flex;align-items:center;justify-content:space-between;
flex-wrap:wrap;gap:var(--space-3)">
<div style="font-size:var(--font-size-xs);color:var(--text-muted)">
<span id="api-status-dot" style="display:inline-block;width:8px;height:8px;
border-radius:50%;background:var(--color-risk-moderate);
margin-right:6px"></span>
API: <span id="api-status-text">checking...</span>
</div>
<div style="display:flex;gap:var(--space-4)">
<a href="https://github.com/abinaze/bharatgraph" target="_blank"
style="font-size:var(--font-size-xs);color:var(--text-muted)">GitHub</a>
<a href="#/about" onclick="Router.navigate('/about');return false;"
style="font-size:var(--font-size-xs);color:var(--text-muted)">Legal</a>
</div>
</div>
</div>
</footer>
<div class="toast-container" id="toast-container" aria-live="polite"></div>
<script src="js/router.js"></script>
<script src="js/api.js"></script>
<script src="js/components.js"></script>
<script src="js/graph.js"></script>
<script src="js/timeline.js"></script>
<script src="js/evidence_panel.js"></script>
<script src="js/app.js"></script>
<script>
// Health check handled by app.js initApp() with exponential backoff
navigator.serviceWorker.register("./sw.js", { scope: "./" }).catch(() => {});
</script>
<script>
// app.js registers routes and calls Router.init() via DOMContentLoaded
// No duplicate init needed here
</script>
</body>
</html>