-
Notifications
You must be signed in to change notification settings - Fork 16
Expand file tree
/
Copy pathindex.html
More file actions
138 lines (129 loc) · 6.67 KB
/
Copy pathindex.html
File metadata and controls
138 lines (129 loc) · 6.67 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Cyber Kelp</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight.js@11.9.0/styles/atom-one-dark.min.css" />
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/highlight.js@11.9.0/highlight.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/d3@7/dist/d3.min.js"></script>
</head>
<body>
<!-- ===== SPLASH SCREEN ===== -->
<div id="splash">
<div class="splash-bg"></div>
<div class="splash-waves">
<svg viewBox="0 0 1440 120" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
<path class="wave wave-1" d="M0,60 C240,100 480,20 720,60 C960,100 1200,20 1440,60 L1440,120 L0,120 Z"/>
<path class="wave wave-2" d="M0,75 C200,40 440,110 720,75 C1000,40 1240,110 1440,75 L1440,120 L0,120 Z"/>
<path class="wave wave-3" d="M0,90 C300,60 520,115 720,90 C920,65 1140,115 1440,90 L1440,120 L0,120 Z"/>
</svg>
</div>
<div class="splash-center">
<div class="wheel-wrap">
<svg class="ship-wheel" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="glow" x="-30%" y="-30%" width="160%" height="160%">
<feGaussianBlur stdDeviation="3.5" result="blur"/>
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
</filter>
<filter id="glow-strong" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur stdDeviation="6" result="blur"/>
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
</filter>
</defs>
<circle cx="100" cy="100" r="88" fill="none" stroke="#00c9b1" stroke-width="5" filter="url(#glow)" opacity="0.9"/>
<circle cx="100" cy="100" r="80" fill="none" stroke="#00c9b1" stroke-width="1.5" opacity="0.3"/>
<g stroke="#00c9b1" stroke-width="4" stroke-linecap="round" filter="url(#glow)" opacity="0.85">
<line x1="100" y1="100" x2="100" y2="16"/>
<line x1="100" y1="100" x2="100" y2="184"/>
<line x1="100" y1="100" x2="16" y2="100"/>
<line x1="100" y1="100" x2="184" y2="100"/>
<line x1="100" y1="100" x2="143.6" y2="143.6"/>
<line x1="100" y1="100" x2="56.4" y2="56.4"/>
<line x1="100" y1="100" x2="143.6" y2="56.4"/>
<line x1="100" y1="100" x2="56.4" y2="143.6"/>
</g>
<g fill="#00c9b1" filter="url(#glow)">
<circle cx="100" cy="12" r="5.5"/>
<circle cx="100" cy="188" r="5.5"/>
<circle cx="12" cy="100" r="5.5"/>
<circle cx="188" cy="100" r="5.5"/>
<circle cx="143.6" cy="143.6" r="5.5"/>
<circle cx="56.4" cy="56.4" r="5.5"/>
<circle cx="143.6" cy="56.4" r="5.5"/>
<circle cx="56.4" cy="143.6" r="5.5"/>
</g>
<circle cx="100" cy="100" r="22" fill="#0c1829" stroke="#00c9b1" stroke-width="4" filter="url(#glow)" opacity="0.95"/>
<circle cx="100" cy="100" r="13" fill="none" stroke="#00c9b1" stroke-width="1.5" opacity="0.5"/>
<circle cx="100" cy="100" r="5" fill="#00c9b1" filter="url(#glow-strong)"/>
</svg>
<div class="wheel-glow-ring"></div>
</div>
<h1 class="splash-title">CYBER KELP</h1>
<p class="splash-sub">Initialising…</p>
<div class="splash-bar-wrap"><div class="splash-bar"></div></div>
</div>
</div>
<!-- ===== END SPLASH ===== -->
<div id="app">
<aside id="sidebar">
<h1>⬡ Cyber Kelp</h1>
<div class="sidebar-scroll">
<input id="search" type="text" placeholder="Search… (/ or Ctrl+K)" autocomplete="off" spellcheck="false" title="Press / or Ctrl+K to focus" />
<div id="search-results"></div>
<nav id="tree"></nav>
</div>
</aside>
<main id="main">
<header id="breadcrumb">
<button id="menu-toggle" aria-label="Toggle navigation"><span></span></button>
<span id="breadcrumb-text">~/cyber-kelp</span>
<button id="graph-toggle" aria-label="Graph view" title="Graph View">
<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" width="14" height="14">
<circle cx="10" cy="4" r="2.5" stroke="currentColor" stroke-width="1.5"/>
<circle cx="3" cy="16" r="2.5" stroke="currentColor" stroke-width="1.5"/>
<circle cx="17" cy="16" r="2.5" stroke="currentColor" stroke-width="1.5"/>
<circle cx="10" cy="11" r="2" stroke="currentColor" stroke-width="1.5"/>
<line x1="10" y1="6.5" x2="10" y2="9" stroke="currentColor" stroke-width="1.2"/>
<line x1="8.5" y1="12.5" x2="4.5" y2="14" stroke="currentColor" stroke-width="1.2"/>
<line x1="11.5" y1="12.5" x2="15.5" y2="14" stroke="currentColor" stroke-width="1.2"/>
</svg>
Graph
</button>
</header>
<article id="content">Select a note from the left.</article>
</main>
</div>
<div id="sidebar-overlay"></div>
<!-- ===== GRAPH OVERLAY ===== -->
<div id="graph-overlay">
<div id="graph-bg"></div>
<header id="graph-header">
<div class="graph-header-left">
<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" width="16" height="16">
<circle cx="10" cy="4" r="2.5" stroke="currentColor" stroke-width="1.5"/>
<circle cx="3" cy="16" r="2.5" stroke="currentColor" stroke-width="1.5"/>
<circle cx="17" cy="16" r="2.5" stroke="currentColor" stroke-width="1.5"/>
<circle cx="10" cy="11" r="2" stroke="currentColor" stroke-width="1.5"/>
<line x1="10" y1="6.5" x2="10" y2="9" stroke="currentColor" stroke-width="1.2"/>
<line x1="8.5" y1="12.5" x2="4.5" y2="14" stroke="currentColor" stroke-width="1.2"/>
<line x1="11.5" y1="12.5" x2="15.5" y2="14" stroke="currentColor" stroke-width="1.2"/>
</svg>
<span class="graph-title">NODE GRAPH</span>
</div>
<span class="graph-hint">scroll to zoom · drag nodes · click to open</span>
<button id="graph-close">✕ Close</button>
</header>
<svg id="graph-svg"></svg>
<div id="graph-tooltip"></div>
</div>
<!-- ===== END GRAPH OVERLAY ===== -->
<script src="notesManifest.js"></script>
<script src="script.js"></script>
</body>
</html>