codemini-cli 0.4.4 → 0.4.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,580 @@
1
+ <!doctype html>
2
+ <html lang="zh-CN">
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1">
6
+ <title>{{title}}</title>
7
+ <style>
8
+ :root {
9
+ color-scheme: light;
10
+ --bg: #ffffff;
11
+ --bg-muted: #f7f7f5;
12
+ --bg-hover: #f0f0ee;
13
+ --panel: #ffffff;
14
+ --text: #37352f;
15
+ --text-secondary: #787774;
16
+ --line: #e9e9e7;
17
+ --line-strong: #dfdfde;
18
+ --accent: #2383e2;
19
+ --accent-hover: #1b6ec2;
20
+ --accent-bg: #e8f0fe;
21
+ --red: #eb5757;
22
+ --red-bg: #ffefef;
23
+ --orange: #e9730c;
24
+ --orange-bg: #fff4e5;
25
+ --green: #4dab6f;
26
+ --green-bg: #edf7f0;
27
+ --gray: #9b9a97;
28
+ --gray-bg: #f1f1f0;
29
+ --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
30
+ --shadow-md: 0 2px 8px rgba(0,0,0,0.06);
31
+ --radius: 6px;
32
+ --radius-lg: 10px;
33
+ --transition: 120ms ease;
34
+ }
35
+ * { box-sizing: border-box; margin: 0; }
36
+ body {
37
+ background: var(--bg);
38
+ color: var(--text);
39
+ font: 14.5px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
40
+ -webkit-font-smoothing: antialiased;
41
+ -moz-osx-font-smoothing: grayscale;
42
+ }
43
+ /* ── Header ── */
44
+ header {
45
+ padding: 48px min(6vw, 80px) 28px;
46
+ border-bottom: 1px solid var(--line);
47
+ background: var(--bg);
48
+ }
49
+ h1, h2, h3, h4 { line-height: 1.25; color: var(--text); }
50
+ h1 { margin: 0 0 8px; font-size: clamp(26px, 3.5vw, 38px); font-weight: 700; letter-spacing: -0.02em; }
51
+ h2 { margin: 40px 0 16px; font-size: 22px; font-weight: 600; letter-spacing: -0.01em; }
52
+ h3 { margin: 20px 0 8px; font-size: 16px; font-weight: 600; }
53
+ a { color: var(--accent); text-decoration: none; transition: color var(--transition); }
54
+ a:hover { color: var(--accent-hover); text-decoration: underline; }
55
+ .meta {
56
+ color: var(--text-secondary);
57
+ font-size: 13px;
58
+ display: flex;
59
+ gap: 16px;
60
+ flex-wrap: wrap;
61
+ margin-top: 4px;
62
+ }
63
+ .meta span::before { content: ""; display: inline-block; width: 3px; height: 3px; border-radius: 50%; background: var(--gray); vertical-align: middle; margin-right: 8px; }
64
+ .meta span:first-child::before { display: none; }
65
+ /* ── Layout ── */
66
+ .layout {
67
+ display: grid;
68
+ grid-template-columns: minmax(200px, 260px) minmax(0, 1fr);
69
+ gap: 0;
70
+ min-height: calc(100vh - 140px);
71
+ }
72
+ /* ── Sidebar Nav ── */
73
+ nav {
74
+ position: sticky;
75
+ top: 0;
76
+ align-self: start;
77
+ height: calc(100vh - 140px);
78
+ overflow-y: auto;
79
+ border-right: 1px solid var(--line);
80
+ padding: 20px 12px 20px 0;
81
+ scrollbar-width: thin;
82
+ }
83
+ nav a {
84
+ display: flex;
85
+ align-items: center;
86
+ gap: 8px;
87
+ padding: 6px 12px;
88
+ border-radius: var(--radius);
89
+ text-decoration: none;
90
+ color: var(--text-secondary);
91
+ font-size: 13.5px;
92
+ font-weight: 500;
93
+ transition: all var(--transition);
94
+ border-bottom: none;
95
+ }
96
+ nav a:hover {
97
+ background: var(--bg-hover);
98
+ color: var(--text);
99
+ text-decoration: none;
100
+ }
101
+ nav a.active {
102
+ background: var(--bg-hover);
103
+ color: var(--text);
104
+ font-weight: 600;
105
+ }
106
+ nav a .nav-dot {
107
+ width: 6px;
108
+ height: 6px;
109
+ border-radius: 50%;
110
+ background: var(--line-strong);
111
+ flex-shrink: 0;
112
+ transition: background var(--transition);
113
+ }
114
+ nav a:hover .nav-dot,
115
+ nav a.active .nav-dot { background: var(--accent); }
116
+ /* ── Main Content ── */
117
+ main {
118
+ max-width: 920px;
119
+ padding: 8px min(5vw, 80px) 80px;
120
+ }
121
+ section {
122
+ padding: 4px 0 24px;
123
+ border-bottom: 1px solid var(--line);
124
+ }
125
+ section:last-child { border-bottom: none; }
126
+ /* ── Controls ── */
127
+ .controls { margin: 8px 0 24px; }
128
+ .controls-bar {
129
+ display: flex;
130
+ align-items: center;
131
+ gap: 8px;
132
+ flex-wrap: wrap;
133
+ }
134
+ input[type="search"] {
135
+ width: min(400px, 100%);
136
+ padding: 7px 12px 7px 32px;
137
+ border: 1px solid var(--line);
138
+ border-radius: var(--radius);
139
+ background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%239b9a97' stroke-width='2'%3E%3Ccircle cx='6' cy='6' r='4.5'/%3E%3Cpath d='M10 10l3 3'/%3E%3C/svg%3E") 10px center no-repeat;
140
+ color: var(--text);
141
+ font-size: 13.5px;
142
+ transition: border-color var(--transition), box-shadow var(--transition);
143
+ }
144
+ input[type="search"]:focus {
145
+ outline: none;
146
+ border-color: var(--accent);
147
+ box-shadow: 0 0 0 3px var(--accent-bg);
148
+ }
149
+ input[type="search"]::placeholder { color: var(--gray); }
150
+ .controls-bar button {
151
+ padding: 6px 14px;
152
+ border: 1px solid var(--line);
153
+ border-radius: var(--radius);
154
+ background: var(--bg);
155
+ color: var(--text-secondary);
156
+ cursor: pointer;
157
+ font-size: 12.5px;
158
+ font-weight: 500;
159
+ transition: all var(--transition);
160
+ }
161
+ .controls-bar button:hover {
162
+ background: var(--bg-hover);
163
+ color: var(--text);
164
+ border-color: var(--line-strong);
165
+ }
166
+ .no-results { color: var(--gray); padding: 32px 0; font-size: 14px; display: none; }
167
+ /* ── Cards ── */
168
+ .card {
169
+ border: 1px solid var(--line);
170
+ border-radius: var(--radius-lg);
171
+ background: var(--panel);
172
+ padding: 20px 24px;
173
+ margin: 16px 0;
174
+ transition: box-shadow var(--transition);
175
+ }
176
+ .card:hover { box-shadow: var(--shadow-md); }
177
+ /* ── Details (collapsible API cards) ── */
178
+ details.card summary {
179
+ cursor: pointer;
180
+ font-size: 15px;
181
+ font-weight: 600;
182
+ padding: 2px 0;
183
+ list-style: none;
184
+ display: flex;
185
+ align-items: center;
186
+ gap: 8px;
187
+ }
188
+ details.card summary::-webkit-details-marker { display: none; }
189
+ details.card summary::before {
190
+ content: "";
191
+ display: inline-block;
192
+ width: 0; height: 0;
193
+ border-left: 5px solid var(--text-secondary);
194
+ border-top: 4px solid transparent;
195
+ border-bottom: 4px solid transparent;
196
+ transition: transform var(--transition);
197
+ flex-shrink: 0;
198
+ }
199
+ details.card[open] summary::before { transform: rotate(90deg); }
200
+ details.card summary:hover { color: var(--accent); }
201
+ details.card[open] summary {
202
+ padding-bottom: 16px;
203
+ margin-bottom: 16px;
204
+ border-bottom: 1px solid var(--line);
205
+ }
206
+ /* ── Badges / Tags ── */
207
+ .tag, .badge {
208
+ display: inline-flex;
209
+ align-items: center;
210
+ gap: 4px;
211
+ border-radius: 4px;
212
+ padding: 1px 7px;
213
+ font-size: 11.5px;
214
+ font-weight: 600;
215
+ letter-spacing: 0.02em;
216
+ line-height: 20px;
217
+ white-space: nowrap;
218
+ }
219
+ .tag.extracted, .badge.extracted { color: var(--green); background: var(--green-bg); }
220
+ .tag.inferred, .badge.inferred { color: var(--orange); background: var(--orange-bg); }
221
+ .tag.unknown, .badge.unknown { color: var(--gray); background: var(--gray-bg); }
222
+ .tag.warn, .badge.warn { color: var(--orange); background: var(--orange-bg); }
223
+ .tag.danger, .badge.danger { color: var(--red); background: var(--red-bg); }
224
+ .tag.ok, .badge.ok { color: var(--green); background: var(--green-bg); }
225
+ /* ── Tables ── */
226
+ .table-wrap { overflow-x: auto; margin: 12px 0; border-radius: var(--radius); }
227
+ table, .spec-table, .sequence-table {
228
+ width: 100%;
229
+ border-collapse: collapse;
230
+ margin: 12px 0;
231
+ font-size: 13.5px;
232
+ }
233
+ th, td {
234
+ text-align: left;
235
+ vertical-align: top;
236
+ padding: 8px 12px;
237
+ border-bottom: 1px solid var(--line);
238
+ }
239
+ th {
240
+ color: var(--text-secondary);
241
+ font-size: 12px;
242
+ font-weight: 600;
243
+ text-transform: uppercase;
244
+ letter-spacing: 0.04em;
245
+ background: transparent;
246
+ }
247
+ tr:last-child td { border-bottom: none; }
248
+ tr:hover td { background: var(--bg-muted); }
249
+ /* ── Code ── */
250
+ code, pre {
251
+ font-family: "SFMono-Regular", "Menlo", "Consolas", "PT Mono", monospace;
252
+ }
253
+ code {
254
+ background: var(--bg-muted);
255
+ padding: 2px 5px;
256
+ border-radius: 3px;
257
+ font-size: 13px;
258
+ color: #eb5757;
259
+ }
260
+ pre {
261
+ overflow: auto;
262
+ padding: 16px;
263
+ border-radius: var(--radius);
264
+ background: #fafaf8;
265
+ border: 1px solid var(--line);
266
+ font-size: 13px;
267
+ line-height: 1.5;
268
+ }
269
+ /* ── Diagrams ── */
270
+ .diagram, .diagram-card {
271
+ overflow: auto;
272
+ border: 1px solid var(--line);
273
+ border-radius: var(--radius-lg);
274
+ background: var(--bg);
275
+ padding: 20px;
276
+ margin: 16px 0;
277
+ }
278
+ .diagram-card figcaption {
279
+ color: var(--text-secondary);
280
+ font-weight: 600;
281
+ font-size: 13px;
282
+ margin: 0 0 16px;
283
+ text-transform: uppercase;
284
+ letter-spacing: 0.04em;
285
+ }
286
+ .diagram svg { max-width: 100%; height: auto; }
287
+ .diagram-card svg { width: 100%; height: auto; }
288
+ /* ── Flow Steps ── */
289
+ .flow-steps {
290
+ display: grid;
291
+ gap: 2px;
292
+ margin: 12px 0;
293
+ padding: 0;
294
+ list-style: none;
295
+ counter-reset: step;
296
+ }
297
+ .flow-steps li {
298
+ counter-increment: step;
299
+ border: 1px solid var(--line);
300
+ border-radius: var(--radius);
301
+ background: var(--bg-muted);
302
+ padding: 14px 16px 14px 48px;
303
+ position: relative;
304
+ transition: background var(--transition);
305
+ }
306
+ .flow-steps li:hover { background: var(--bg-hover); }
307
+ .flow-steps li::before {
308
+ content: counter(step);
309
+ position: absolute;
310
+ left: 16px;
311
+ top: 14px;
312
+ width: 22px;
313
+ height: 22px;
314
+ border-radius: 50%;
315
+ background: var(--accent);
316
+ color: #fff;
317
+ font-size: 11px;
318
+ font-weight: 700;
319
+ display: flex;
320
+ align-items: center;
321
+ justify-content: center;
322
+ }
323
+ .flow-steps span { display: block; color: var(--text-secondary); margin-top: 4px; font-size: 13px; }
324
+ /* ── Dependency Map ── */
325
+ .dependency-map {
326
+ display: flex;
327
+ align-items: center;
328
+ gap: 6px;
329
+ flex-wrap: wrap;
330
+ margin: 12px 0;
331
+ }
332
+ .dep-node {
333
+ border: 1px solid var(--line);
334
+ border-radius: var(--radius);
335
+ background: var(--bg-muted);
336
+ padding: 8px 14px;
337
+ text-decoration: none;
338
+ font-size: 13px;
339
+ font-weight: 500;
340
+ transition: all var(--transition);
341
+ }
342
+ .dep-node:hover {
343
+ background: var(--bg-hover);
344
+ border-color: var(--line-strong);
345
+ text-decoration: none;
346
+ color: var(--accent);
347
+ }
348
+ .dep-edge { color: var(--line-strong); font-weight: 400; font-size: 16px; }
349
+ /* ── Misc ── */
350
+ .diagram-status { color: var(--text-secondary); font-size: 13px; margin: 8px 0 0; }
351
+ .placeholder { color: var(--gray); font-style: italic; }
352
+ ul, ol { padding-left: 20px; }
353
+ li { margin: 4px 0; }
354
+ strong { font-weight: 600; }
355
+ /* ── Back to Top ── */
356
+ #back-to-top {
357
+ position: fixed; bottom: 28px; right: 28px;
358
+ padding: 8px 16px; border-radius: var(--radius);
359
+ background: var(--panel); color: var(--accent);
360
+ border: 1px solid var(--line); box-shadow: var(--shadow-md);
361
+ text-decoration: none; font-size: 13px; font-weight: 500;
362
+ opacity: 0; pointer-events: none;
363
+ transition: opacity 0.2s, box-shadow 0.2s;
364
+ }
365
+ #back-to-top:hover { box-shadow: var(--shadow-sm); }
366
+ #back-to-top.visible { opacity: 1; pointer-events: auto; }
367
+ /* ── Responsive ── */
368
+ @media (max-width: 820px) {
369
+ .layout { grid-template-columns: 1fr; }
370
+ nav {
371
+ position: static;
372
+ height: auto;
373
+ border-right: none;
374
+ border-bottom: 1px solid var(--line);
375
+ padding: 12px;
376
+ display: flex;
377
+ gap: 4px;
378
+ overflow-x: auto;
379
+ scrollbar-width: none;
380
+ }
381
+ nav::-webkit-scrollbar { display: none; }
382
+ nav a { white-space: nowrap; padding: 6px 10px; }
383
+ nav a .nav-dot { display: none; }
384
+ header { padding: 28px 20px 20px; }
385
+ main { padding: 8px 20px 60px; }
386
+ #back-to-top { bottom: 12px; right: 12px; }
387
+ }
388
+ /* ── Print ── */
389
+ @media print {
390
+ nav, .controls-bar, #back-to-top, .no-results { display: none !important; }
391
+ .layout { grid-template-columns: 1fr; padding: 0; }
392
+ .card { box-shadow: none; break-inside: avoid; border: 1px solid #ddd; }
393
+ .diagram-card { box-shadow: none; }
394
+ body { background: #fff; }
395
+ header { background: #fff; padding: 20px 0; }
396
+ main { padding: 0; max-width: 100%; }
397
+ a { color: #333; }
398
+ code { color: #333; }
399
+ * { color-adjust: exact; -webkit-print-color-adjust: exact; }
400
+ }
401
+ </style>
402
+ </head>
403
+ <body>
404
+ <header>
405
+ <h1>{{title}}</h1>
406
+ <div class="meta">
407
+ <span>Workspace: {{workspace_name}}</span>
408
+ <span>Date: {{date}}</span>
409
+ <span>Generated: {{generated_at}}</span>
410
+ </div>
411
+ </header>
412
+ <div class="layout">
413
+ <nav aria-label="Report sections">
414
+ <a href="#summary"><span class="nav-dot"></span>Summary</a>
415
+ <a href="#architecture"><span class="nav-dot"></span>Architecture</a>
416
+ <a href="#interfaces"><span class="nav-dot"></span>Interfaces</a>
417
+ <a href="#requirements"><span class="nav-dot"></span>Requirements</a>
418
+ <a href="#flows"><span class="nav-dot"></span>Flows</a>
419
+ <a href="#domain"><span class="nav-dot"></span>Domain Model</a>
420
+ <a href="#security"><span class="nav-dot"></span>Security</a>
421
+ <a href="#errors"><span class="nav-dot"></span>Errors</a>
422
+ <a href="#nonfunctional"><span class="nav-dot"></span>Non-functional</a>
423
+ <a href="#questions"><span class="nav-dot"></span>Open Questions</a>
424
+ <a href="#evidence"><span class="nav-dot"></span>Evidence</a>
425
+ </nav>
426
+ <main>
427
+ <div class="controls">
428
+ <div class="controls-bar">
429
+ <input id="report-search" type="search" placeholder="Search APIs, modules, evidence...">
430
+ <button id="toggle-details" type="button">Expand all</button>
431
+ <button id="show-questions" type="button">Questions only</button>
432
+ </div>
433
+ <p class="no-results" id="no-results">No matching content found.</p>
434
+ </div>
435
+ <section id="summary">
436
+ <h2>Executive Summary</h2>
437
+ <!-- REQUIREMENTS_SUMMARY -->
438
+ <p class="placeholder">Pending summary.</p>
439
+ <!-- /REQUIREMENTS_SUMMARY -->
440
+ </section>
441
+ <section id="architecture">
442
+ <h2>System Architecture</h2>
443
+ <!-- REQUIREMENTS_ARCHITECTURE -->
444
+ <p class="placeholder">Pending architecture map.</p>
445
+ <!-- /REQUIREMENTS_ARCHITECTURE -->
446
+ </section>
447
+ <section id="interfaces">
448
+ <h2>Interface Inventory</h2>
449
+ <!-- REQUIREMENTS_INTERFACE_INVENTORY -->
450
+ <p class="placeholder">Pending interface inventory.</p>
451
+ <!-- /REQUIREMENTS_INTERFACE_INVENTORY -->
452
+ </section>
453
+ <section id="requirements">
454
+ <h2>Requirement Cards</h2>
455
+ <!-- REQUIREMENTS_API_CARDS -->
456
+ <p class="placeholder">Pending requirement cards.</p>
457
+ <!-- /REQUIREMENTS_API_CARDS -->
458
+ </section>
459
+ <section id="flows">
460
+ <h2>Core Flows</h2>
461
+ <!-- REQUIREMENTS_FLOWS -->
462
+ <p class="placeholder">Pending flow diagrams.</p>
463
+ <!-- /REQUIREMENTS_FLOWS -->
464
+ </section>
465
+ <section id="domain">
466
+ <h2>Domain Model And Data Ownership</h2>
467
+ <!-- REQUIREMENTS_DOMAIN_MODEL -->
468
+ <p class="placeholder">Pending domain model and data ownership.</p>
469
+ <!-- /REQUIREMENTS_DOMAIN_MODEL -->
470
+ </section>
471
+ <section id="security">
472
+ <h2>Permissions, Security, And Compliance</h2>
473
+ <!-- REQUIREMENTS_SECURITY -->
474
+ <p class="placeholder">Pending permissions, security, and compliance notes.</p>
475
+ <!-- /REQUIREMENTS_SECURITY -->
476
+ </section>
477
+ <section id="errors">
478
+ <h2>Error Handling And Edge Cases</h2>
479
+ <!-- REQUIREMENTS_ERROR_HANDLING -->
480
+ <p class="placeholder">Pending error handling and edge cases.</p>
481
+ <!-- /REQUIREMENTS_ERROR_HANDLING -->
482
+ </section>
483
+ <section id="nonfunctional">
484
+ <h2>Non-functional Requirements</h2>
485
+ <!-- REQUIREMENTS_NONFUNCTIONAL -->
486
+ <p class="placeholder">Pending non-functional requirements.</p>
487
+ <!-- /REQUIREMENTS_NONFUNCTIONAL -->
488
+ </section>
489
+ <section id="questions">
490
+ <h2>Open Questions</h2>
491
+ <!-- REQUIREMENTS_OPEN_QUESTIONS -->
492
+ <p class="placeholder">Pending open questions.</p>
493
+ <!-- /REQUIREMENTS_OPEN_QUESTIONS -->
494
+ </section>
495
+ <section id="evidence">
496
+ <h2>Source Evidence Index</h2>
497
+ <!-- REQUIREMENTS_EVIDENCE_INDEX -->
498
+ <p class="placeholder">Pending evidence index.</p>
499
+ <!-- /REQUIREMENTS_EVIDENCE_INDEX -->
500
+ </section>
501
+ </main>
502
+ </div>
503
+ <a href="#" id="back-to-top">Back to top</a>
504
+ <script>
505
+ (() => {
506
+ const search = document.querySelector('#report-search');
507
+ const noResults = document.querySelector('#no-results');
508
+ const sections = document.querySelectorAll('section[id]');
509
+ const cards = document.querySelectorAll('.card, details');
510
+ const tables = document.querySelectorAll('table');
511
+ const navLinks = document.querySelectorAll('nav a');
512
+
513
+ /* ── Scroll spy ── */
514
+ const observer = new IntersectionObserver(entries => {
515
+ entries.forEach(e => {
516
+ if (e.isIntersecting) {
517
+ navLinks.forEach(l => l.classList.toggle('active', l.getAttribute('href') === '#' + e.target.id));
518
+ }
519
+ });
520
+ }, { rootMargin: '-80px 0px -70% 0px', threshold: 0 });
521
+ sections.forEach(s => observer.observe(s));
522
+
523
+ /* ── Search ── */
524
+ search?.addEventListener('input', () => {
525
+ const query = search.value.trim().toLowerCase();
526
+ let anyVisible = false;
527
+ if (!query) {
528
+ cards.forEach(c => c.style.display = '');
529
+ tables.forEach(t => t.style.display = '');
530
+ sections.forEach(s => s.style.display = '');
531
+ noResults.style.display = 'none';
532
+ return;
533
+ }
534
+ sections.forEach(s => {
535
+ const inner = s.querySelectorAll('.card, details, table');
536
+ let sectionVisible = false;
537
+ inner.forEach(el => {
538
+ const matched = el.textContent.toLowerCase().includes(query);
539
+ el.style.display = matched ? '' : 'none';
540
+ if (matched) sectionVisible = true;
541
+ });
542
+ s.style.display = sectionVisible ? '' : 'none';
543
+ if (sectionVisible) anyVisible = true;
544
+ });
545
+ noResults.style.display = anyVisible ? 'none' : 'block';
546
+ });
547
+
548
+ /* ── Expand / Collapse all ── */
549
+ const toggleBtn = document.querySelector('#toggle-details');
550
+ let allOpen = false;
551
+ toggleBtn?.addEventListener('click', () => {
552
+ allOpen = !allOpen;
553
+ document.querySelectorAll('details.card').forEach(d => d.open = allOpen);
554
+ toggleBtn.textContent = allOpen ? 'Collapse all' : 'Expand all';
555
+ });
556
+
557
+ /* ── Show questions only ── */
558
+ const questionsBtn = document.querySelector('#show-questions');
559
+ let questionsOnly = false;
560
+ questionsBtn?.addEventListener('click', () => {
561
+ questionsOnly = !questionsOnly;
562
+ const target = document.querySelector('#questions');
563
+ if (questionsOnly) {
564
+ sections.forEach(s => s.style.display = s === target ? '' : 'none');
565
+ questionsBtn.textContent = 'Show all sections';
566
+ } else {
567
+ sections.forEach(s => s.style.display = '');
568
+ questionsBtn.textContent = 'Questions only';
569
+ }
570
+ });
571
+
572
+ /* ── Back to top ── */
573
+ const backToTop = document.querySelector('#back-to-top');
574
+ window.addEventListener('scroll', () => {
575
+ backToTop?.classList.toggle('visible', window.scrollY > 400);
576
+ }, { passive: true });
577
+ })();
578
+ </script>
579
+ </body>
580
+ </html>