Repository navigation
Expand file tree
/
Copy pathindex.html
More file actions
324 lines (308 loc) · 26 KB
/
Copy pathindex.html
File metadata and controls
324 lines (308 loc) · 26 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
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#F6F8FC">
<link rel="icon" href="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2048%2048'%3E%3Cdefs%3E%3ClinearGradient%20id='g'%20x1='0'%20y1='0'%20x2='1'%20y2='1'%3E%3Cstop%20offset='0'%20stop-color='%234285F4'/%3E%3Cstop%20offset='.5'%20stop-color='%2312B5CB'/%3E%3Cstop%20offset='1'%20stop-color='%2334A853'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect%20width='48'%20height='48'%20rx='12'%20fill='url(%23g)'/%3E%3Cg%20fill='%23ffffff'%3E%3Cpath%20d='M24%2026c0-7%204-13%204-13s4%206%204%2013-4%209-4%209-4-2-4-9Z'%20opacity='.96'/%3E%3Cpath%20d='M24%2026c0-7-4-13-4-13s-4%206-4%2013%204%209%204%209%204-2%204-9Z'%20opacity='.96'/%3E%3Cpath%20d='M24%2030c-3-5-9-8-9-8s0%207%204%2011%209%203%209%203-1-3-4-6Z'%20opacity='.82'/%3E%3Cpath%20d='M24%2030c3-5%209-8%209-8s0%207-4%2011-9%203-9%203%201-3%204-6Z'%20opacity='.82'/%3E%3C/g%3E%3C/svg%3E">
<title>Data Darśana — a way of seeing data in the AI era</title>
<style>
@font-face{font-family:'Manrope';font-weight:400;font-display:swap;src:url('fonts/manrope-400.woff2') format('woff2')}
@font-face{font-family:'Manrope';font-weight:500;font-display:swap;src:url('fonts/manrope-500.woff2') format('woff2')}
@font-face{font-family:'Manrope';font-weight:600;font-display:swap;src:url('fonts/manrope-600.woff2') format('woff2')}
@font-face{font-family:'Manrope';font-weight:700;font-display:swap;src:url('fonts/manrope-700.woff2') format('woff2')}
@font-face{font-family:'Manrope';font-weight:800;font-display:swap;src:url('fonts/manrope-800.woff2') format('woff2')}
/* latin-ext (variable) — supplies ś in Darśana and ī in Sarasvatī; declared last so it wins for these ranges */
@font-face{font-family:'Manrope';font-weight:200 800;font-display:swap;src:url('fonts/manrope-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
:root, :root[data-theme="light"]{
--blue:#1A73E8; --blue2:#4285F4; --teal:#12B5CB; --green:#34A853; --red:#EA4335; --yellow:#FBBC05;
--ink:#202124; --muted:#5F6368; --faint:#80868B; --gold:#B8860B; --line:#DADCE0;
--glass:rgba(255,255,255,.7); --enter-ink:#fff; --net-link:60,64,67;
--bg-grad:
radial-gradient(720px 640px at 27% 46%, rgba(66,133,244,.10), transparent 62%),
radial-gradient(560px 520px at 24% 76%, rgba(18,181,203,.09), transparent 60%),
radial-gradient(680px 600px at 78% 30%, rgba(251,188,5,.07), transparent 60%),
linear-gradient(180deg,#FDFEFF,#F1F5FB 78%);
}
:root[data-theme="dark"]{
/* dark navy + white gradient */
--blue:#8AB4F8; --blue2:#7AA9F7; --teal:#4FD0E0; --green:#67E0A3; --red:#F28B82; --yellow:#FDD663;
--ink:#EAF0FB; --muted:#A6B6D4; --faint:#6E80A6; --gold:#E8C271; --line:#2A3A5C;
--glass:rgba(255,255,255,.06); --enter-ink:#08152E; --net-link:170,196,238;
--bg-grad:
radial-gradient(920px 740px at 26% 42%, rgba(138,180,248,.18), transparent 60%),
radial-gradient(700px 560px at 82% 16%, rgba(255,255,255,.09), transparent 55%),
radial-gradient(820px 780px at 74% 106%, rgba(79,208,224,.12), transparent 60%),
linear-gradient(150deg,#060E22 0%,#0A1A3A 46%,#123055 100%);
}
:root{ --sans:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; --bi:92px; }
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden}
body{font-family:var(--sans);color:var(--ink);letter-spacing:-.01em;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
background:var(--bg-grad);background-attachment:fixed;transition:color .3s}
#net{position:fixed;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.emblem-wrap{position:fixed;left:0;top:0;bottom:0;width:50%;z-index:2;display:flex;align-items:center;justify-content:center;padding:5vh 2vw}
.emblem-stage{position:relative;width:min(84vh,760px);height:min(84vh,760px);max-width:94vw;
animation:rise 1.4s cubic-bezier(.2,.7,.2,1) both .1s, float 10s ease-in-out 1.4s infinite;transform-origin:center}
.frame{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(0 18px 50px rgba(66,133,244,.14))}
.figfallback{position:absolute;inset:0;width:100%;height:100%}
/* the dropped-in illustration (images/saraswati.png), centred inside the mandala.
mix-blend-mode:multiply lets a white-background silhouette sit cleanly on the light page. */
/* the illustration (transparent PNG), centred in the mandala */
.deity{position:absolute;left:50%;top:50%;transform:translate(-50%,-53%);height:63%;width:auto;max-width:86%;object-fit:contain;
filter:drop-shadow(0 16px 42px rgba(26,115,232,.22))}
/* OPTIONAL gradient tint (blue→teal→green fill). Add class "tinted" to .emblem-stage to enable:
it overlays a gradient masked by the same PNG on top of (and matched to) the image. */
.emblem-stage.tinted .deity{opacity:0}
.emblem-stage.tinted .tintfill{display:block}
.tintfill{display:none;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);height:74%;aspect-ratio:734/1048;
background:linear-gradient(158deg,#4285F4,#12B5CB 52%,#34A853);
-webkit-mask:url('images/saraswati.png') center/contain no-repeat;mask:url('images/saraswati.png') center/contain no-repeat;
filter:drop-shadow(0 16px 42px rgba(26,115,232,.22))}
.mandala,.halo{transform-box:fill-box;transform-origin:center}
.mandala{animation:spin 100s linear infinite}
.halo{animation:spinr 78s linear infinite}
.panel{position:fixed;z-index:3;top:0;left:50%;right:0;bottom:0;display:flex;flex-direction:column;justify-content:center;padding:6vh 5vw 6vh 2vw}
.content{display:flex;flex-direction:column;align-items:flex-start;text-align:left;max-width:560px}
.content>*{animation:rise 1s cubic-bezier(.2,.7,.2,1) both}
.brandrow{display:flex;align-items:center;gap:14px;animation-delay:.05s}
.brandrow .mark{width:64px;height:64px;flex:0 0 auto;animation:breathe 7s ease-in-out 1s infinite}
.titlestack{display:inline-flex;flex-direction:column}
.brandrow h1{font-size:clamp(40px,5.4vw,76px);font-weight:800;letter-spacing:-.03em;line-height:1;
background:linear-gradient(118deg, transparent 14%, rgba(255,255,255,.9) 24%, transparent 34%, transparent 58%, rgba(52,168,83,.5) 70%, transparent 80%),
linear-gradient(120deg,var(--blue2),var(--teal) 46%,var(--green));
background-size:240% 240%,100% 100%;background-repeat:no-repeat;background-position:175% -75%,0 0;
-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
filter:drop-shadow(0 3px 20px rgba(66,133,244,.22));animation:shine 8s ease-in-out infinite}
.tag{font-size:clamp(13px,1.6vw,18px);text-transform:uppercase;letter-spacing:.16em;color:var(--blue);font-weight:700;margin:14px 0 0;
width:96%;text-indent:14px;text-align:justify;text-align-last:justify;animation-delay:.13s}
.muse{font-size:14px;color:var(--muted);margin:22px 0 0 var(--bi);max-width:440px;line-height:1.6;animation-delay:.18s}
.muse b{color:var(--gold);font-weight:700}
.lead{font-size:clamp(16px,1.7vw,19px);line-height:1.65;color:var(--ink);margin:14px 0 0 var(--bi);max-width:460px;animation-delay:.24s}
.lead b{font-weight:700}
.lead.sub2{font-size:14.5px;color:var(--muted);margin-top:10px}
/* 3+2 grid: five stats wrap to a lonely 4+1 row in a flex line */
.stats{display:grid;grid-template-columns:repeat(3,max-content);gap:15px 26px;margin:26px 0 0 var(--bi);animation-delay:.3s}
.stat b{font-size:24px;font-weight:800;font-variant-numeric:tabular-nums;display:block;line-height:1;
background:linear-gradient(120deg,var(--blue2),var(--teal));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.stat span{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.cta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:32px;margin-left:var(--bi);animation-delay:.36s}
.cta .enter{margin:0}
.dl{display:inline-flex;align-items:center;gap:7px;text-decoration:none;font-weight:700;font-size:13.5px;color:var(--muted);
border:1px solid var(--line);border-radius:999px;padding:12px 17px;background:var(--glass);backdrop-filter:blur(6px);transition:.2s}
.dl:hover{color:var(--blue);border-color:var(--blue);transform:translateY(-1px)}
.ph{display:inline-flex;align-items:center;gap:6px;text-decoration:none;font-weight:700;font-size:13.5px;color:var(--muted);padding:12px 4px;transition:color .2s}
.ph:hover{color:var(--blue)} .ph .a{transition:transform .2s;font-weight:800} .ph:hover .a{transform:translateX(3px)}
.ph .lo{width:15px;height:15px;flex:0 0 auto}
.enter{align-self:flex-start;margin-left:var(--bi);display:inline-flex;align-items:center;gap:11px;margin-top:32px;text-decoration:none;
padding:14px 26px;border-radius:999px;font-weight:700;font-size:15.5px;color:var(--enter-ink);
background:linear-gradient(180deg,var(--blue2),var(--blue));
box-shadow:0 10px 30px rgba(26,115,232,.34), inset 0 1px 0 rgba(255,255,255,.35);
transition:transform .2s,box-shadow .2s;animation-delay:.36s}
.enter:hover{transform:translateY(-2px);box-shadow:0 16px 42px rgba(26,115,232,.46), inset 0 1px 0 rgba(255,255,255,.4)}
.enter .arrow{transition:transform .2s;font-weight:800}
.enter:hover .arrow{transform:translateX(4px)}
:root[data-theme="dark"] .enter{background:linear-gradient(180deg,#9CC0FF,#5B93F0);
box-shadow:0 12px 34px rgba(91,147,240,.42), inset 0 1px 0 rgba(255,255,255,.45)}
.qrbox{position:fixed;right:26px;bottom:20px;z-index:5;display:flex;align-items:center;gap:11px;
background:var(--glass);border:1px solid var(--line);border-radius:13px;padding:9px 13px 9px 9px;
backdrop-filter:blur(6px);animation:rise 1.2s both .8s}
.qrbox img{width:60px;height:60px;display:block;border-radius:7px;background:#fff;padding:4px}
.qrbox .t{font-size:11px;line-height:1.4;color:var(--muted)}
.qrbox .t b{display:block;color:var(--ink);font-weight:700;font-size:12.5px}
@media(max-width:920px){.qrbox{display:none}}
.social{position:fixed;top:20px;right:26px;z-index:5;display:flex;gap:9px;animation:rise 1.2s both .55s}
.social a{width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;
border:1px solid var(--line);border-radius:11px;color:var(--muted);background:var(--glass);backdrop-filter:blur(6px);
transition:color .2s,border-color .2s,transform .2s,background .2s}
.social a:hover{color:var(--blue);border-color:var(--blue);transform:translateY(-1px);background:color-mix(in srgb,var(--blue) 14%,var(--glass))}
.social a svg{width:17px;height:17px;display:block}
.social .tgl{width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);
border-radius:11px;color:var(--muted);background:var(--glass);backdrop-filter:blur(6px);cursor:pointer;font-size:16px;line-height:1;
transition:color .2s,border-color .2s,transform .2s,background .2s}
.social .tgl:hover{color:var(--blue);border-color:var(--blue);transform:translateY(-1px)}
footer{position:fixed;z-index:3;left:26px;bottom:20px;font-size:12px;color:var(--faint);animation:rise 1.3s both .7s}
footer b{color:var(--gold);font-weight:700} footer a{color:var(--muted);text-decoration:none} footer a:hover{color:var(--blue)}
@keyframes rise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes spinr{to{transform:rotate(-360deg)}}
@keyframes shine{0%{background-position:175% -75%,0 0}55%,100%{background-position:-75% 175%,0 0}}
@media (prefers-reduced-motion:reduce){*{animation:none!important}}
@media (max-width:920px){
.emblem-wrap{width:100%;align-items:center}
.emblem{width:min(76vw,420px);height:auto;opacity:.42}
.panel{width:100%;left:0;right:0;padding:0 30px;justify-content:center}
.content{align-items:center;text-align:center;max-width:600px}
.tag{text-align:center;text-align-last:center;text-indent:0}
.muse,.lead,.stats{margin-left:auto;margin-right:auto;text-align:center;justify-content:center}
.enter{align-self:center;margin-left:0} .cta{justify-content:center;margin-left:0}
.social{top:14px;right:14px}
footer{left:0;right:0;text-align:center}
}
</style>
</head>
<body>
<canvas id="net"></canvas>
<div class="emblem-wrap">
<div class="emblem-stage">
<!-- always-on lotus-mandala + knowledge-node halo frame -->
<svg class="frame" viewBox="0 0 440 440" fill="none" aria-hidden="true">
<defs>
<linearGradient id="gOuter" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#4285F4"/><stop offset="1" stop-color="#12B5CB"/></linearGradient>
<radialGradient id="gGlow" cx="0.5" cy="0.5" r="0.5"><stop offset="0" stop-color="#4285F4" stop-opacity="0.16"/><stop offset="1" stop-color="#4285F4" stop-opacity="0"/></radialGradient>
</defs>
<circle cx="220" cy="220" r="210" fill="url(#gGlow)"/>
<g class="mandala"><g id="petalsOuter"></g></g>
<g class="halo" id="halo"></g>
</svg>
<!-- the illustration (transparent images/saraswati.png), centred in the mandala.
For the gradient tint instead of the natural silhouette, add class "tinted" to .emblem-stage.
If the file is missing, onerror reveals the vector fallback below. -->
<img class="deity" src="images/saraswati-tint.png" alt="Sarasvatī playing the vīnā"
onerror="this.remove();var s=document.getElementById('emblemSvg');if(s)s.style.display='block'">
<div class="tintfill" aria-hidden="true"></div>
<svg id="emblemSvg" class="figfallback" style="display:none" viewBox="0 0 440 440" fill="none" aria-label="Sarasvatī with a vīnā">
<defs>
<linearGradient id="gFig" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#5468C6"/><stop offset="1" stop-color="#1A73E8"/></linearGradient>
<linearGradient id="gVeena" x1="0" y1="1" x2="1" y2="0"><stop offset="0" stop-color="#B8791C"/><stop offset="1" stop-color="#F2C063"/></linearGradient>
<radialGradient id="gHead" cx="0.5" cy="0.5" r="0.5"><stop offset="0" stop-color="#FFF6DA" stop-opacity="0.95"/><stop offset="0.65" stop-color="#FFE08A" stop-opacity="0.28"/><stop offset="1" stop-color="#FFE08A" stop-opacity="0"/></radialGradient>
</defs>
<g id="figure">
<circle cx="220" cy="150" r="54" fill="url(#gHead)"/>
<circle cx="220" cy="150" r="50" fill="none" stroke="#E0A82E" stroke-opacity="0.4" stroke-width="1"/>
<g transform="translate(220 330)" fill="url(#gOuter)" fill-opacity="0.92" stroke="#fff" stroke-opacity="0.55" stroke-width="1">
<ellipse rx="9" ry="22" transform="rotate(-54) translate(0 -9)"/>
<ellipse rx="9" ry="23" transform="rotate(-27) translate(0 -11)"/>
<ellipse rx="10" ry="24" transform="translate(0 -12)"/>
<ellipse rx="9" ry="23" transform="rotate(27) translate(0 -11)"/>
<ellipse rx="9" ry="22" transform="rotate(54) translate(0 -9)"/>
</g>
<path d="M205 141 C 199 121 214 110 220 110 C 226 110 241 121 235 141 C 235 129 229 121 220 121 C 211 121 205 129 205 141 Z" fill="#2C3A73"/>
<path d="M220 118 C 231 118 239 128 239 141 C 239 153 233 162 226 166 C 238 171 246 179 250 193 C 258 221 262 251 270 300 C 274 322 280 336 282 344 C 250 352 190 352 158 344 C 160 336 166 322 170 300 C 178 251 182 221 190 193 C 194 179 202 171 214 166 C 207 162 201 153 201 141 C 201 128 209 118 220 118 Z" fill="url(#gFig)"/>
<path d="M206 181 C 189 202 177 242 169 276" stroke="url(#gFig)" stroke-width="10" fill="none" stroke-linecap="round"/>
<path d="M236 181 C 258 187 278 177 294 159" stroke="url(#gFig)" stroke-width="10" fill="none" stroke-linecap="round"/>
<path d="M210 136 L220 123 L230 136 Z" fill="url(#gVeena)"/>
<circle cx="220" cy="123" r="2.4" fill="#F2C063"/>
<circle cx="159" cy="286" r="22" fill="url(#gVeena)"/>
<circle cx="159" cy="286" r="22" fill="none" stroke="#fff" stroke-opacity="0.55" stroke-width="1.4"/>
<circle cx="159" cy="286" r="9" fill="#fff" fill-opacity="0.28"/>
<path d="M174 273 L 298 152" stroke="url(#gVeena)" stroke-width="8" stroke-linecap="round"/>
<circle cx="300" cy="150" r="9" fill="url(#gVeena)"/>
<path d="M169 277 L 296 154" stroke="#FFF4D6" stroke-opacity="0.65" stroke-width="1"/>
<path d="M179 281 L 301 159" stroke="#FFF4D6" stroke-opacity="0.4" stroke-width="1"/>
</g>
</svg>
</div>
</div>
<main class="panel">
<div class="content">
<div class="brandrow">
<svg class="mark" viewBox="0 0 48 48" fill="none" aria-hidden="true">
<path d="M24 26c0-7 4-13 4-13s4 6 4 13-4 9-4 9-4-2-4-9Z" fill="#1A73E8" opacity=".9"/>
<path d="M24 26c0-7-4-13-4-13s-4 6-4 13 4 9 4 9 4-2 4-9Z" fill="#4285F4" opacity=".9"/>
<path d="M24 30c-3-5-9-8-9-8s0 7 4 11 9 3 9 3-1-3-4-6Z" fill="#12B5CB" opacity=".85"/>
<path d="M24 30c3-5 9-8 9-8s0 7-4 11-9 3-9 3 1-3 4-6Z" fill="#34A853" opacity=".85"/>
<circle cx="24" cy="27" r="3.4" fill="#fff" stroke="#1A73E8" stroke-width="1.4"/>
</svg>
<div class="titlestack">
<h1>Data Darśana</h1>
<p class="tag" aria-label="An intelligent way of seeing data">An intelligent way of seeing data</p>
</div>
</div>
<p class="muse">In the spirit of <b>Sarasvatī</b> — goddess of knowledge, music, and flow — a clear way of seeing the data beneath modern AI.</p>
<p class="lead">A living map of the data architecture behind analytics, generative AI and agents — <b>every capability a node, every pattern a path between them.</b></p>
<p class="lead sub2">128 architecture patterns, most of them drawn, sorted by the work they serve and the generation they belong to — <b>proven, mainstream and frontier side by side.</b></p>
<div class="stats">
<div class="stat"><b>248</b><span>Capabilities</span></div>
<div class="stat"><b>6</b><span>Pillars</span></div>
<div class="stat"><b>128</b><span>Archetypes</span></div>
<div class="stat"><b>1,888</b><span>Connections</span></div>
<div class="stat"><b>112</b><span>Diagrams</span></div>
</div>
<div class="cta">
<a class="enter" href="app.html">Enter the map <span class="arrow">→</span></a>
<a class="dl" href="cheatsheets/data-darsana-cheatsheet.pdf" target="_blank" rel="noopener" title="Download the cheatsheet (PDF)">
<svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3v12"/><path d="m7 10 5 5 5-5"/><path d="M5 21h14"/></svg>
Cheatsheet PDF
</a>
<a class="ph" href="philosophy.html" title="The intent & philosophy behind Data Darśana"><svg class="lo" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 4.5C13.4 7.4 13.4 10.3 12 13 10.6 10.3 10.6 7.4 12 4.5Z"/><path d="M12 4.5C13.4 7.4 13.4 10.3 12 13 10.6 10.3 10.6 7.4 12 4.5Z" transform="rotate(-36 12 13)" opacity=".8"/><path d="M12 4.5C13.4 7.4 13.4 10.3 12 13 10.6 10.3 10.6 7.4 12 4.5Z" transform="rotate(36 12 13)" opacity=".8"/><path d="M12 4.5C13.4 7.4 13.4 10.3 12 13 10.6 10.3 10.6 7.4 12 4.5Z" transform="rotate(-68 12 13)" opacity=".55"/><path d="M12 4.5C13.4 7.4 13.4 10.3 12 13 10.6 10.3 10.6 7.4 12 4.5Z" transform="rotate(68 12 13)" opacity=".55"/><path d="M5 13.2C8 12.4 11 13 12 15.4 9 16.2 6 15.6 5 13.2Z" opacity=".92"/><path d="M19 13.2C16 12.4 13 13 12 15.4 15 16.2 18 15.6 19 13.2Z" opacity=".92"/></svg>Why Sarasvatī <span class="a">→</span></a>
</div>
</div>
</main>
<nav class="social" aria-label="Links">
<button class="tgl" id="themeToggle" type="button" title="Toggle light / dark" aria-label="Toggle theme">☾</button>
<a href="https://www.linkedin.com/in/sanjeevazad/" target="_blank" rel="noopener" title="Sanjeev Azad on LinkedIn" aria-label="LinkedIn">
<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M20.45 20.45h-3.56v-5.57c0-1.33-.03-3.04-1.85-3.04-1.85 0-2.14 1.45-2.14 2.94v5.67H9.35V9h3.41v1.56h.05c.48-.9 1.64-1.85 3.37-1.85 3.6 0 4.27 2.37 4.27 5.45v6.29zM5.34 7.43a2.07 2.07 0 1 1 0-4.13 2.07 2.07 0 0 1 0 4.13zM7.12 20.45H3.56V9h3.56v11.45zM22.22 0H1.77C.79 0 0 .77 0 1.72v20.56C0 23.23.79 24 1.77 24h20.45c.98 0 1.78-.77 1.78-1.72V1.72C24 .77 23.2 0 22.22 0z"/></svg>
</a>
<a href="https://github.com/AI-First-Community/data-darsana" target="_blank" rel="noopener" title="GitHub repository" aria-label="GitHub repository">
<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 .5C5.37.5 0 5.78 0 12.29c0 5.21 3.44 9.63 8.21 11.19.6.11.82-.26.82-.57 0-.28-.01-1.02-.02-2-3.34.72-4.04-1.61-4.04-1.61-.55-1.39-1.34-1.76-1.34-1.76-1.09-.74.08-.73.08-.73 1.2.08 1.84 1.24 1.84 1.24 1.07 1.83 2.81 1.3 3.5.99.11-.78.42-1.3.76-1.6-2.66-.3-5.47-1.33-5.47-5.93 0-1.31.47-2.38 1.24-3.22-.13-.3-.54-1.52.11-3.18 0 0 1.01-.32 3.3 1.23a11.5 11.5 0 0 1 6 0c2.29-1.55 3.3-1.23 3.3-1.23.65 1.66.24 2.88.12 3.18.77.84 1.23 1.91 1.23 3.22 0 4.61-2.82 5.62-5.5 5.92.43.37.82 1.1.82 2.22 0 1.61-.02 2.9-.02 3.29 0 .32.22.69.83.57A12.3 12.3 0 0 0 24 12.29C24 5.78 18.63.5 12 .5z"/></svg>
</a>
<a href="app.html" title="Open the map" aria-label="Open the map">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="3"/><circle cx="5" cy="6" r="2"/><circle cx="19" cy="7" r="2"/><circle cx="18" cy="18" r="2"/><path d="M7 7l3 4M17 8l-4 3M15 13l2 3"/></svg>
</a>
</nav>
<footer>Data Darśana · in the spirit of Sarasvatī · <a href="app.html"><b>Innovate with Sanjeev</b></a></footer>
<div class="qrbox">
<img src="images/qr-light.svg" alt="QR code — scan to open Data Darśana">
<div class="t"><b>Open on your phone</b>Scan to view the live map</div>
</div>
<script>
// ---- light / dark theme (dark = navy + white gradient) ----
window.NET = { link: '60,64,67' };
(function(){
var root=document.documentElement, btn=document.getElementById('themeToggle');
var EMB={ light:'images/saraswati-tint.png', dark:'images/saraswati-light.png' };
function apply(t){
root.setAttribute('data-theme', t);
window.NET.link = t==='dark' ? '170,196,238' : '60,64,67';
var img=document.querySelector('.deity'); if(img) img.src = EMB[t] || EMB.light;
if(btn) btn.textContent = t==='dark' ? '☀' : '☾';
var meta=document.querySelector('meta[name=theme-color]'); if(meta) meta.setAttribute('content', t==='dark' ? '#0B1A38' : '#F6F8FC');
try{ localStorage.setItem('darsana-theme', t); }catch(e){}
}
var saved='light'; try{ saved=localStorage.getItem('darsana-theme')||'light'; }catch(e){}
apply(saved);
if(btn) btn.onclick=function(){ apply(root.getAttribute('data-theme')==='dark'?'light':'dark'); };
})();
// ---- emblem frame: outer lotus petals + knowledge-node halo (built once, animated by CSS) ----
(function(){
const C=220, GOOG=['#4285F4','#EA4335','#FBBC05','#34A853','#12B5CB'];
function petal(ri,ro,w){return `M${C} ${C-ri} C ${C+w} ${C-ri-8} ${C+w} ${C-ro+22} ${C} ${C-ro} C ${C-w} ${C-ro+22} ${C-w} ${C-ri-8} ${C} ${C-ri} Z`;}
let po='';for(let i=0;i<16;i++)po+=`<path d="${petal(150,200,20)}" fill="url(#gOuter)" fill-opacity="0.85" stroke="#fff" stroke-opacity="0.5" stroke-width="1" transform="rotate(${i*22.5} ${C} ${C})"/>`;
document.getElementById('petalsOuter').innerHTML=po;
// halo: ring of knowledge nodes, linked
const R=210,N=12;let h='';const pts=[];
for(let i=0;i<N;i++){const a=-Math.PI/2+i/N*2*Math.PI;pts.push([C+Math.cos(a)*R,C+Math.sin(a)*R]);}
pts.forEach((p,i)=>{const q=pts[(i+1)%N];h+=`<line x1="${p[0].toFixed(1)}" y1="${p[1].toFixed(1)}" x2="${q[0].toFixed(1)}" y2="${q[1].toFixed(1)}" stroke="#4285F4" stroke-opacity="0.16" stroke-width="1"/>`;
h+=`<line x1="${p[0].toFixed(1)}" y1="${p[1].toFixed(1)}" x2="${C}" y2="${C}" stroke="#5F6368" stroke-opacity="0.07" stroke-width="1"/>`;});
pts.forEach((p,i)=>{h+=`<circle cx="${p[0].toFixed(1)}" cy="${p[1].toFixed(1)}" r="5.5" fill="${GOOG[i%GOOG.length]}"/><circle cx="${p[0].toFixed(1)}" cy="${p[1].toFixed(1)}" r="5.5" fill="none" stroke="#fff" stroke-width="1.4"/>`;});
document.getElementById('halo').innerHTML=h;
})();
// ---- soft knowledge-network background ----
(function(){
const c=document.getElementById('net'),x=c.getContext('2d');
const DPR=Math.min(window.devicePixelRatio||1,2);let W,H,pts;
const reduce=window.matchMedia&&window.matchMedia('(prefers-reduced-motion: reduce)').matches;
const COL=['26,115,232','18,181,203','52,168,83','251,188,5'];
function rnd(a,b){return a+Math.random()*(b-a);}
function size(){W=c.width=innerWidth*DPR;H=c.height=innerHeight*DPR;}
function make(){return{x:rnd(0,W),y:rnd(0,H),vx:rnd(-.06,.06)*DPR,vy:rnd(-.06,.06)*DPR,r:rnd(1.2,2.6)*DPR,c:COL[(Math.random()*COL.length)|0]};}
function init(){size();const n=Math.max(28,Math.min(64,Math.floor(innerWidth/26)));pts=[];for(let i=0;i<n;i++)pts.push(make());}
const LINK=(150*DPR)**2;
function frame(){
x.clearRect(0,0,W,H);
for(let i=0;i<pts.length;i++){const p=pts[i];p.x+=p.vx;p.y+=p.vy;
if(p.x<0)p.x+=W;if(p.x>W)p.x-=W;if(p.y<0)p.y+=H;if(p.y>H)p.y-=H;}
for(let i=0;i<pts.length;i++)for(let j=i+1;j<pts.length;j++){const a=pts[i],b=pts[j];const dx=a.x-b.x,dy=a.y-b.y,d2=dx*dx+dy*dy;
if(d2<LINK){x.strokeStyle='rgba('+(window.NET&&window.NET.link||'60,64,67')+','+(0.07*(1-d2/LINK)).toFixed(3)+')';x.lineWidth=DPR;x.beginPath();x.moveTo(a.x,a.y);x.lineTo(b.x,b.y);x.stroke();}}
for(let i=0;i<pts.length;i++){const p=pts[i];x.fillStyle='rgba('+p.c+',0.5)';x.beginPath();x.arc(p.x,p.y,p.r,0,6.2832);x.fill();}
if(!reduce)requestAnimationFrame(frame);
}
init();frame();
window.addEventListener('resize',init);
})();
</script>
</body>
</html>