tangled vouch map with historical data
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>The tangled web of trust</title>
7 <link rel="icon" type="image/svg+xml" href="/favicon.svg">
8 <link rel="preconnect" href="https://fonts.googleapis.com">
9 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10 <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;700&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
11</head>
12<body>
13 <header>
14 <a href="/" class="logo">
15 <img src="https://assets.tangled.network/tangled_logotype_white_on_trans.svg" alt="tangled" height="28">
16 <span class="logo-badge">web of trust</span>
17 </a>
18 <nav>
19 <div id="search-wrap">
20 <input id="search-input" type="text" placeholder="Search handle..." autocomplete="off" spellcheck="false">
21 <div id="search-dropdown"></div>
22 </div>
23 <span id="header-stats"></span>
24 </nav>
25 </header>
26
27 <div id="main-area">
28 <div id="graph-container"></div>
29 <div id="sidebar"></div>
30 </div>
31 <div id="loading">Loading graph data...</div>
32 <div id="tooltip"></div>
33
34 <div id="controls">
35 <div id="controls-row">
36 <button class="filter-btn active" data-kind="vouch/vouch">
37 <span class="filter-dot" style="background:var(--vouch)"></span>vouch
38 </button>
39 <button class="filter-btn active" data-kind="vouch/denounce">
40 <span class="filter-dot" style="background:var(--denounce)"></span>denounce
41 </button>
42 <button class="filter-btn active" data-kind="vouch/mixed">
43 <span class="filter-dot" style="background:#df8e1d"></span>mixed
44 </button>
45 <button class="filter-btn" data-kind="follow">
46 <span class="filter-dot" style="background:var(--follow)"></span>follow
47 </button>
48 <div class="spacer"></div>
49 <div id="stats-row">
50 <span id="stat-nodes">0</span> nodes ·
51 <span id="stat-vouches">0</span> vouches ·
52 <span id="stat-denounces">0</span> denounces ·
53 <span id="stat-mixed">0</span> mixed ·
54 <span id="stat-follows">0</span> follows
55 </div>
56 </div>
57 </div>
58
59 <script type="module" src="/main.js"></script>
60</body>
61</html>