snow-flow 3.4.36 → 3.4.39
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.
- package/README.md +412 -287
- package/dist/cli/deploy-artifact.js +2 -2
- package/dist/mcp/servicenow-deployment-mcp.js +1 -1
- package/dist/mcp/servicenow-mcp-server.js +2 -2
- package/dist/queen/agent-factory.js +134 -52
- package/dist/queen/servicenow-queen.d.ts +127 -2
- package/dist/queen/servicenow-queen.js +978 -618
- package/dist/services/widget-deployment-service.d.ts +1 -1
- package/dist/services/widget-deployment-service.js +1 -1
- package/dist/templates/claude-md-template.d.ts +1 -1
- package/dist/templates/claude-md-template.js +2 -2
- package/dist/types/servicenow.types.d.ts +1 -1
- package/dist/utils/dependency-detector.d.ts +1 -1
- package/dist/utils/dependency-detector.js +1 -1
- package/dist/utils/servicenow-client.d.ts +1 -1
- package/dist/utils/servicenow-client.js +4 -8
- package/package.json +1 -1
- package/website/components/README.md +419 -0
- package/website/components/code-display/CodeDisplay.css +583 -0
- package/website/components/code-display/CodeDisplay.html +200 -0
- package/website/components/code-display/CodeDisplay.js +375 -0
- package/website/components/code-display/CodeDisplay.jsx +268 -0
- package/website/components/demo/ComponentLibraryDemo.html +845 -0
- package/website/components/feature-cards/FeatureCards.css +573 -0
- package/website/components/feature-cards/FeatureCards.html +247 -0
- package/website/components/feature-cards/FeatureCards.js +382 -0
- package/website/components/feature-cards/FeatureCards.jsx +235 -0
- package/website/components/hero/Hero.css +558 -0
- package/website/components/hero/Hero.html +98 -0
- package/website/components/hero/Hero.js +415 -0
- package/website/components/hero/Hero.jsx +214 -0
- package/website/components/interactive/InteractiveElements.css +776 -0
- package/website/components/interactive/InteractiveElements.html +283 -0
- package/website/components/interactive/InteractiveElements.js +489 -0
- package/website/components/interactive/InteractiveElements.jsx +444 -0
- package/website/components/layout/LayoutComponents.css +697 -0
- package/website/components/layout/LayoutComponents.html +374 -0
- package/website/components/layout/LayoutComponents.js +447 -0
- package/website/components/layout/LayoutComponents.jsx +379 -0
- package/website/components/navigation/Navigation.css +383 -0
- package/website/components/navigation/Navigation.html +89 -0
- package/website/components/navigation/Navigation.js +248 -0
- package/website/components/navigation/Navigation.jsx +124 -0
- package/website/css/animations.css +854 -0
- package/website/css/style.css +916 -948
- package/website/index.html +394 -424
- package/website/js/animations.js +707 -0
- package/website/js/main.js +310 -383
- package/website/mcp-servers.html +310 -0
|
@@ -0,0 +1,845 @@
|
|
|
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>Snow-Flow Component Library - Complete Demo</title>
|
|
7
|
+
|
|
8
|
+
<!-- Import all component styles -->
|
|
9
|
+
<link rel="stylesheet" href="../navigation/Navigation.css">
|
|
10
|
+
<link rel="stylesheet" href="../hero/Hero.css">
|
|
11
|
+
<link rel="stylesheet" href="../feature-cards/FeatureCards.css">
|
|
12
|
+
<link rel="stylesheet" href="../code-display/CodeDisplay.css">
|
|
13
|
+
<link rel="stylesheet" href="../interactive/InteractiveElements.css">
|
|
14
|
+
<link rel="stylesheet" href="../layout/LayoutComponents.css">
|
|
15
|
+
|
|
16
|
+
<style>
|
|
17
|
+
/* Demo-specific styles */
|
|
18
|
+
body {
|
|
19
|
+
margin: 0;
|
|
20
|
+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
21
|
+
background: #ffffff;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.demo-section-header {
|
|
25
|
+
text-align: center;
|
|
26
|
+
padding: 3rem 0 2rem;
|
|
27
|
+
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
.demo-section-header h2 {
|
|
31
|
+
font-size: clamp(2rem, 4vw, 3rem);
|
|
32
|
+
font-weight: 800;
|
|
33
|
+
margin-bottom: 1rem;
|
|
34
|
+
background: linear-gradient(135deg, #000000 0%, #333333 100%);
|
|
35
|
+
-webkit-background-clip: text;
|
|
36
|
+
-webkit-text-fill-color: transparent;
|
|
37
|
+
background-clip: text;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.demo-section-header p {
|
|
41
|
+
font-size: 1.2rem;
|
|
42
|
+
color: #666666;
|
|
43
|
+
max-width: 600px;
|
|
44
|
+
margin: 0 auto;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
.demo-showcase {
|
|
48
|
+
background: #ffffff;
|
|
49
|
+
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
.toc-section {
|
|
53
|
+
background: linear-gradient(135deg, #1a1a1a 0%, #333333 100%);
|
|
54
|
+
color: white;
|
|
55
|
+
padding: 3rem 0;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
.toc-grid {
|
|
59
|
+
display: grid;
|
|
60
|
+
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
|
61
|
+
gap: 1.5rem;
|
|
62
|
+
max-width: 1200px;
|
|
63
|
+
margin: 0 auto;
|
|
64
|
+
padding: 0 2rem;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.toc-item {
|
|
68
|
+
background: rgba(255, 255, 255, 0.1);
|
|
69
|
+
padding: 1.5rem;
|
|
70
|
+
border-radius: 12px;
|
|
71
|
+
text-align: center;
|
|
72
|
+
text-decoration: none;
|
|
73
|
+
color: white;
|
|
74
|
+
transition: all 0.3s ease;
|
|
75
|
+
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
.toc-item:hover {
|
|
79
|
+
background: rgba(255, 255, 255, 0.15);
|
|
80
|
+
transform: translateY(-3px);
|
|
81
|
+
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
.toc-item h3 {
|
|
85
|
+
margin: 0 0 0.5rem 0;
|
|
86
|
+
font-size: 1.3rem;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
.toc-item p {
|
|
90
|
+
margin: 0;
|
|
91
|
+
opacity: 0.9;
|
|
92
|
+
font-size: 0.95rem;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
.footer-demo {
|
|
96
|
+
background: #0a0a0a;
|
|
97
|
+
color: white;
|
|
98
|
+
padding: 3rem 0;
|
|
99
|
+
text-align: center;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
.footer-demo h2 {
|
|
103
|
+
margin-bottom: 1rem;
|
|
104
|
+
color: white;
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
.footer-demo p {
|
|
108
|
+
color: #cccccc;
|
|
109
|
+
margin-bottom: 2rem;
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
.footer-links {
|
|
113
|
+
display: flex;
|
|
114
|
+
justify-content: center;
|
|
115
|
+
gap: 2rem;
|
|
116
|
+
flex-wrap: wrap;
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
.footer-links a {
|
|
120
|
+
color: #ffffff;
|
|
121
|
+
text-decoration: none;
|
|
122
|
+
padding: 0.75rem 1.5rem;
|
|
123
|
+
border: 1px solid rgba(255, 255, 255, 0.3);
|
|
124
|
+
border-radius: 25px;
|
|
125
|
+
transition: all 0.3s ease;
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
.footer-links a:hover {
|
|
129
|
+
background: rgba(255, 255, 255, 0.1);
|
|
130
|
+
border-color: rgba(255, 255, 255, 0.6);
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
@media (max-width: 768px) {
|
|
134
|
+
.toc-grid {
|
|
135
|
+
grid-template-columns: 1fr;
|
|
136
|
+
padding: 0 1rem;
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
.footer-links {
|
|
140
|
+
flex-direction: column;
|
|
141
|
+
align-items: center;
|
|
142
|
+
gap: 1rem;
|
|
143
|
+
}
|
|
144
|
+
}
|
|
145
|
+
</style>
|
|
146
|
+
</head>
|
|
147
|
+
<body>
|
|
148
|
+
<!-- Navigation Component -->
|
|
149
|
+
<nav class="sf-nav" id="sf-navigation">
|
|
150
|
+
<div class="sf-nav__container">
|
|
151
|
+
<div class="sf-nav__brand" id="sf-nav-brand">
|
|
152
|
+
<span class="sf-nav__logo">⚡</span>
|
|
153
|
+
<span class="sf-nav__brand-name">Snow-Flow</span>
|
|
154
|
+
</div>
|
|
155
|
+
|
|
156
|
+
<ul class="sf-nav__menu" id="sf-nav-menu">
|
|
157
|
+
<li class="sf-nav__item">
|
|
158
|
+
<a href="#hero" class="sf-nav__link sf-nav__link--active" data-section="hero">
|
|
159
|
+
Demo
|
|
160
|
+
<span class="sf-nav__link-indicator"></span>
|
|
161
|
+
</a>
|
|
162
|
+
</li>
|
|
163
|
+
<li class="sf-nav__item">
|
|
164
|
+
<a href="#navigation" class="sf-nav__link" data-section="navigation">
|
|
165
|
+
Navigation
|
|
166
|
+
<span class="sf-nav__link-indicator"></span>
|
|
167
|
+
</a>
|
|
168
|
+
</li>
|
|
169
|
+
<li class="sf-nav__item">
|
|
170
|
+
<a href="#features" class="sf-nav__link" data-section="features">
|
|
171
|
+
Features
|
|
172
|
+
<span class="sf-nav__link-indicator"></span>
|
|
173
|
+
</a>
|
|
174
|
+
</li>
|
|
175
|
+
<li class="sf-nav__item">
|
|
176
|
+
<a href="#code" class="sf-nav__link" data-section="code">
|
|
177
|
+
Code
|
|
178
|
+
<span class="sf-nav__link-indicator"></span>
|
|
179
|
+
</a>
|
|
180
|
+
</li>
|
|
181
|
+
<li class="sf-nav__item">
|
|
182
|
+
<a href="#interactive" class="sf-nav__link" data-section="interactive">
|
|
183
|
+
Interactive
|
|
184
|
+
<span class="sf-nav__link-indicator"></span>
|
|
185
|
+
</a>
|
|
186
|
+
</li>
|
|
187
|
+
<li class="sf-nav__item">
|
|
188
|
+
<a href="#layout" class="sf-nav__link" data-section="layout">
|
|
189
|
+
Layout
|
|
190
|
+
<span class="sf-nav__link-indicator"></span>
|
|
191
|
+
</a>
|
|
192
|
+
</li>
|
|
193
|
+
|
|
194
|
+
<li class="sf-nav__item">
|
|
195
|
+
<a href="https://github.com/groeimetai/snow-flow" class="sf-nav__cta">GitHub</a>
|
|
196
|
+
</li>
|
|
197
|
+
</ul>
|
|
198
|
+
|
|
199
|
+
<button class="sf-nav__hamburger" id="sf-nav-hamburger" aria-label="Toggle navigation menu">
|
|
200
|
+
<span></span>
|
|
201
|
+
<span></span>
|
|
202
|
+
<span></span>
|
|
203
|
+
</button>
|
|
204
|
+
</div>
|
|
205
|
+
|
|
206
|
+
<div class="sf-nav__progress">
|
|
207
|
+
<div class="sf-nav__progress-bar" id="sf-progress-bar"></div>
|
|
208
|
+
</div>
|
|
209
|
+
</nav>
|
|
210
|
+
|
|
211
|
+
<!-- Hero Section -->
|
|
212
|
+
<section class="sf-hero" id="hero">
|
|
213
|
+
<div class="sf-hero__background">
|
|
214
|
+
<div class="sf-hero__mesh" id="sf-hero-mesh"></div>
|
|
215
|
+
<div class="sf-hero__orb sf-hero__orb--1"></div>
|
|
216
|
+
<div class="sf-hero__orb sf-hero__orb--2"></div>
|
|
217
|
+
<div class="sf-hero__orb sf-hero__orb--3"></div>
|
|
218
|
+
</div>
|
|
219
|
+
|
|
220
|
+
<div class="sf-hero__container">
|
|
221
|
+
<div class="sf-hero__content">
|
|
222
|
+
<h1 class="sf-hero__title" id="sf-hero-title">Snow-Flow</h1>
|
|
223
|
+
<h2 class="sf-hero__subtitle" id="sf-hero-subtitle">Component Library</h2>
|
|
224
|
+
<p class="sf-hero__description" id="sf-hero-description">
|
|
225
|
+
A comprehensive collection of modern, accessible React and HTML components with a minimalist black & white design philosophy. Built for enterprise applications with performance and usability in mind.
|
|
226
|
+
</p>
|
|
227
|
+
|
|
228
|
+
<div class="sf-hero__actions" id="sf-hero-actions">
|
|
229
|
+
<button class="sf-hero__cta sf-hero__cta--primary" id="sf-hero-primary-cta" data-href="#toc">
|
|
230
|
+
Explore Components
|
|
231
|
+
<span class="sf-hero__cta-ripple"></span>
|
|
232
|
+
</button>
|
|
233
|
+
|
|
234
|
+
<button class="sf-hero__cta sf-hero__cta--secondary" id="sf-hero-secondary-cta" data-href="https://github.com/groeimetai/snow-flow">
|
|
235
|
+
View on GitHub
|
|
236
|
+
<span class="sf-hero__cta-arrow">→</span>
|
|
237
|
+
</button>
|
|
238
|
+
</div>
|
|
239
|
+
|
|
240
|
+
<div class="sf-hero__stats" id="sf-hero-stats">
|
|
241
|
+
<div class="sf-hero__stat">
|
|
242
|
+
<div class="sf-hero__stat-number">6</div>
|
|
243
|
+
<div class="sf-hero__stat-label">Component Sets</div>
|
|
244
|
+
</div>
|
|
245
|
+
<div class="sf-hero__stat">
|
|
246
|
+
<div class="sf-hero__stat-number">50+</div>
|
|
247
|
+
<div class="sf-hero__stat-label">Components</div>
|
|
248
|
+
</div>
|
|
249
|
+
<div class="sf-hero__stat">
|
|
250
|
+
<div class="sf-hero__stat-number">100%</div>
|
|
251
|
+
<div class="sf-hero__stat-label">Accessible</div>
|
|
252
|
+
</div>
|
|
253
|
+
<div class="sf-hero__stat">
|
|
254
|
+
<div class="sf-hero__stat-number">∞</div>
|
|
255
|
+
<div class="sf-hero__stat-label">Customizable</div>
|
|
256
|
+
</div>
|
|
257
|
+
</div>
|
|
258
|
+
</div>
|
|
259
|
+
|
|
260
|
+
<div class="sf-hero__scroll-indicator" id="sf-hero-scroll">
|
|
261
|
+
<div class="sf-hero__scroll-arrow">
|
|
262
|
+
<span></span>
|
|
263
|
+
<span></span>
|
|
264
|
+
<span></span>
|
|
265
|
+
</div>
|
|
266
|
+
<span class="sf-hero__scroll-text">Explore components</span>
|
|
267
|
+
</div>
|
|
268
|
+
</div>
|
|
269
|
+
</section>
|
|
270
|
+
|
|
271
|
+
<!-- Table of Contents -->
|
|
272
|
+
<section class="toc-section" id="toc">
|
|
273
|
+
<div class="sf-container sf-container--medium">
|
|
274
|
+
<div class="sf-stack sf-stack--vertical sf-stack--spacing-large">
|
|
275
|
+
<div style="text-align: center;">
|
|
276
|
+
<h2 style="font-size: 2.5rem; margin-bottom: 1rem;">Component Categories</h2>
|
|
277
|
+
<p style="font-size: 1.2rem; opacity: 0.9; max-width: 700px; margin: 0 auto;">
|
|
278
|
+
Each category contains carefully crafted components following our design system principles
|
|
279
|
+
</p>
|
|
280
|
+
</div>
|
|
281
|
+
|
|
282
|
+
<div class="toc-grid">
|
|
283
|
+
<a href="#navigation" class="toc-item">
|
|
284
|
+
<h3>🧭 Navigation</h3>
|
|
285
|
+
<p>Sticky headers, mobile menus, scroll indicators, and responsive navigation patterns</p>
|
|
286
|
+
</a>
|
|
287
|
+
|
|
288
|
+
<a href="#hero-demo" class="toc-item">
|
|
289
|
+
<h3>🎨 Hero Sections</h3>
|
|
290
|
+
<p>Full-height sections with animated backgrounds, typewriter effects, and call-to-actions</p>
|
|
291
|
+
</a>
|
|
292
|
+
|
|
293
|
+
<a href="#features" class="toc-item">
|
|
294
|
+
<h3>✨ Feature Cards</h3>
|
|
295
|
+
<p>Interactive cards with 3D effects, hover animations, and responsive grid layouts</p>
|
|
296
|
+
</a>
|
|
297
|
+
|
|
298
|
+
<a href="#code" class="toc-item">
|
|
299
|
+
<h3>💻 Code Display</h3>
|
|
300
|
+
<p>Terminal-style interfaces with syntax highlighting, copy functionality, and line numbers</p>
|
|
301
|
+
</a>
|
|
302
|
+
|
|
303
|
+
<a href="#interactive" class="toc-item">
|
|
304
|
+
<h3>🎛️ Interactive Elements</h3>
|
|
305
|
+
<p>Buttons, forms, toggles, progress bars, tooltips, and loading indicators</p>
|
|
306
|
+
</a>
|
|
307
|
+
|
|
308
|
+
<a href="#layout" class="toc-item">
|
|
309
|
+
<h3>📐 Layout Components</h3>
|
|
310
|
+
<p>Containers, grids, flexbox utilities, dividers, and spacing systems</p>
|
|
311
|
+
</a>
|
|
312
|
+
</div>
|
|
313
|
+
</div>
|
|
314
|
+
</div>
|
|
315
|
+
</section>
|
|
316
|
+
|
|
317
|
+
<!-- Navigation Demo Section -->
|
|
318
|
+
<section id="navigation" class="demo-showcase">
|
|
319
|
+
<div class="demo-section-header">
|
|
320
|
+
<h2>Navigation Components</h2>
|
|
321
|
+
<p>The navigation you're using right now is part of our component library!</p>
|
|
322
|
+
</div>
|
|
323
|
+
|
|
324
|
+
<div class="sf-container sf-container--large" style="padding: 3rem 2rem;">
|
|
325
|
+
<div class="sf-card sf-card--elevation-medium sf-card--padding-large">
|
|
326
|
+
<div class="sf-stack sf-stack--vertical sf-stack--spacing-medium">
|
|
327
|
+
<h3>Features Demonstrated Above:</h3>
|
|
328
|
+
<ul style="line-height: 1.8; color: #555;">
|
|
329
|
+
<li>✅ <strong>Sticky Header</strong> - Navigation stays at top during scroll</li>
|
|
330
|
+
<li>✅ <strong>Blur Backdrop</strong> - Glassmorphism effect on scroll</li>
|
|
331
|
+
<li>✅ <strong>Smooth Scroll Indicators</strong> - Active section highlighting</li>
|
|
332
|
+
<li>✅ <strong>Mobile Responsive</strong> - Hamburger menu on smaller screens</li>
|
|
333
|
+
<li>✅ <strong>Logo with Gradient</strong> - Animated Snow-Flow branding</li>
|
|
334
|
+
<li>✅ <strong>Progress Bar</strong> - Shows scroll progress through page</li>
|
|
335
|
+
</ul>
|
|
336
|
+
|
|
337
|
+
<div class="sf-divider sf-divider--dots">
|
|
338
|
+
<div class="sf-divider__dots">
|
|
339
|
+
<span></span>
|
|
340
|
+
<span></span>
|
|
341
|
+
<span></span>
|
|
342
|
+
</div>
|
|
343
|
+
</div>
|
|
344
|
+
|
|
345
|
+
<p style="color: #666; font-style: italic;">
|
|
346
|
+
The navigation automatically adapts to your content sections and provides smooth scrolling navigation. Try clicking different sections to see the smooth scroll behavior and active state management.
|
|
347
|
+
</p>
|
|
348
|
+
</div>
|
|
349
|
+
</div>
|
|
350
|
+
</div>
|
|
351
|
+
</section>
|
|
352
|
+
|
|
353
|
+
<!-- Hero Demo Section -->
|
|
354
|
+
<section id="hero-demo" class="demo-showcase" style="background: #f8f9fa;">
|
|
355
|
+
<div class="demo-section-header">
|
|
356
|
+
<h2>Hero Section Components</h2>
|
|
357
|
+
<p>The hero section above demonstrates all the key features</p>
|
|
358
|
+
</div>
|
|
359
|
+
|
|
360
|
+
<div class="sf-container sf-container--large" style="padding: 3rem 2rem;">
|
|
361
|
+
<div class="sf-grid sf-grid--gap-large" style="grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));">
|
|
362
|
+
<div class="sf-card sf-card--elevation-medium sf-card--padding-large">
|
|
363
|
+
<h3>🌊 Animated Backgrounds</h3>
|
|
364
|
+
<p>Mesh patterns with floating dots and gradient orbs create dynamic, non-distracting backgrounds that enhance the content.</p>
|
|
365
|
+
</div>
|
|
366
|
+
|
|
367
|
+
<div class="sf-card sf-card--elevation-medium sf-card--padding-large">
|
|
368
|
+
<h3>⌨️ Typewriter Effects</h3>
|
|
369
|
+
<p>Progressive text revelation with realistic typing animation and blinking cursor for engaging content presentation.</p>
|
|
370
|
+
</div>
|
|
371
|
+
|
|
372
|
+
<div class="sf-card sf-card--elevation-medium sf-card--padding-large">
|
|
373
|
+
<h3>🎯 Interactive CTAs</h3>
|
|
374
|
+
<p>Primary and secondary call-to-action buttons with ripple effects and hover animations that guide user attention.</p>
|
|
375
|
+
</div>
|
|
376
|
+
|
|
377
|
+
<div class="sf-card sf-card--elevation-medium sf-card--padding-large">
|
|
378
|
+
<h3>📊 Statistics Display</h3>
|
|
379
|
+
<p>Animated counters and statistics that appear with staggered timing to showcase key metrics effectively.</p>
|
|
380
|
+
</div>
|
|
381
|
+
</div>
|
|
382
|
+
</div>
|
|
383
|
+
</section>
|
|
384
|
+
|
|
385
|
+
<!-- Feature Cards Demo Section -->
|
|
386
|
+
<section id="features" class="demo-showcase">
|
|
387
|
+
<div class="demo-section-header">
|
|
388
|
+
<h2>Feature Cards</h2>
|
|
389
|
+
<p>Interactive cards with stunning 3D effects and animations</p>
|
|
390
|
+
</div>
|
|
391
|
+
|
|
392
|
+
<div class="sf-feature-cards sf-feature-cards--visible">
|
|
393
|
+
<div class="sf-feature-cards__container">
|
|
394
|
+
<div class="sf-feature-cards__grid">
|
|
395
|
+
<div class="sf-feature-card sf-feature-card--clickable sf-feature-card--visible" data-link="#code">
|
|
396
|
+
<div class="sf-feature-card__border">
|
|
397
|
+
<div class="sf-feature-card__border-top"></div>
|
|
398
|
+
<div class="sf-feature-card__border-right"></div>
|
|
399
|
+
<div class="sf-feature-card__border-bottom"></div>
|
|
400
|
+
<div class="sf-feature-card__border-left"></div>
|
|
401
|
+
</div>
|
|
402
|
+
<div class="sf-feature-card__glow"></div>
|
|
403
|
+
<div class="sf-feature-card__content">
|
|
404
|
+
<div class="sf-feature-card__icon-wrapper">
|
|
405
|
+
<div class="sf-feature-card__icon">🚀</div>
|
|
406
|
+
</div>
|
|
407
|
+
<div class="sf-feature-card__text">
|
|
408
|
+
<h3 class="sf-feature-card__title">Performance First</h3>
|
|
409
|
+
<p class="sf-feature-card__description">Optimized for speed with minimal bundle size and efficient rendering patterns.</p>
|
|
410
|
+
</div>
|
|
411
|
+
<div class="sf-feature-card__arrow">
|
|
412
|
+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
413
|
+
<path d="M7 17L17 7M17 7H7M17 7V17"/>
|
|
414
|
+
</svg>
|
|
415
|
+
</div>
|
|
416
|
+
</div>
|
|
417
|
+
<div class="sf-feature-card__ripple"></div>
|
|
418
|
+
</div>
|
|
419
|
+
|
|
420
|
+
<div class="sf-feature-card sf-feature-card--clickable sf-feature-card--visible" data-link="#interactive">
|
|
421
|
+
<div class="sf-feature-card__border">
|
|
422
|
+
<div class="sf-feature-card__border-top"></div>
|
|
423
|
+
<div class="sf-feature-card__border-right"></div>
|
|
424
|
+
<div class="sf-feature-card__border-bottom"></div>
|
|
425
|
+
<div class="sf-feature-card__border-left"></div>
|
|
426
|
+
</div>
|
|
427
|
+
<div class="sf-feature-card__glow"></div>
|
|
428
|
+
<div class="sf-feature-card__content">
|
|
429
|
+
<div class="sf-feature-card__icon-wrapper">
|
|
430
|
+
<div class="sf-feature-card__icon">♿</div>
|
|
431
|
+
</div>
|
|
432
|
+
<div class="sf-feature-card__text">
|
|
433
|
+
<h3 class="sf-feature-card__title">Accessibility Built-In</h3>
|
|
434
|
+
<p class="sf-feature-card__description">WCAG 2.1 compliant with screen reader support, keyboard navigation, and high contrast modes.</p>
|
|
435
|
+
</div>
|
|
436
|
+
<div class="sf-feature-card__arrow">
|
|
437
|
+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
438
|
+
<path d="M7 17L17 7M17 7H7M17 7V17"/>
|
|
439
|
+
</svg>
|
|
440
|
+
</div>
|
|
441
|
+
</div>
|
|
442
|
+
<div class="sf-feature-card__ripple"></div>
|
|
443
|
+
</div>
|
|
444
|
+
|
|
445
|
+
<div class="sf-feature-card sf-feature-card--clickable sf-feature-card--visible" data-link="#layout">
|
|
446
|
+
<div class="sf-feature-card__border">
|
|
447
|
+
<div class="sf-feature-card__border-top"></div>
|
|
448
|
+
<div class="sf-feature-card__border-right"></div>
|
|
449
|
+
<div class="sf-feature-card__border-bottom"></div>
|
|
450
|
+
<div class="sf-feature-card__border-left"></div>
|
|
451
|
+
</div>
|
|
452
|
+
<div class="sf-feature-card__glow"></div>
|
|
453
|
+
<div class="sf-feature-card__content">
|
|
454
|
+
<div class="sf-feature-card__icon-wrapper">
|
|
455
|
+
<div class="sf-feature-card__icon">📱</div>
|
|
456
|
+
</div>
|
|
457
|
+
<div class="sf-feature-card__text">
|
|
458
|
+
<h3 class="sf-feature-card__title">Mobile Responsive</h3>
|
|
459
|
+
<p class="sf-feature-card__description">Every component adapts beautifully to all screen sizes with mobile-first design principles.</p>
|
|
460
|
+
</div>
|
|
461
|
+
<div class="sf-feature-card__arrow">
|
|
462
|
+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
463
|
+
<path d="M7 17L17 7M17 7H7M17 7V17"/>
|
|
464
|
+
</svg>
|
|
465
|
+
</div>
|
|
466
|
+
</div>
|
|
467
|
+
<div class="sf-feature-card__ripple"></div>
|
|
468
|
+
</div>
|
|
469
|
+
</div>
|
|
470
|
+
</div>
|
|
471
|
+
<div class="sf-feature-cards__background">
|
|
472
|
+
<div class="sf-feature-cards__bg-grid"></div>
|
|
473
|
+
<div class="sf-feature-cards__bg-gradient"></div>
|
|
474
|
+
</div>
|
|
475
|
+
</div>
|
|
476
|
+
</section>
|
|
477
|
+
|
|
478
|
+
<!-- Code Display Demo Section -->
|
|
479
|
+
<section id="code" class="demo-showcase" style="background: #f8f9fa;">
|
|
480
|
+
<div class="demo-section-header">
|
|
481
|
+
<h2>Code Display Components</h2>
|
|
482
|
+
<p>Terminal-style code blocks with syntax highlighting</p>
|
|
483
|
+
</div>
|
|
484
|
+
|
|
485
|
+
<div class="sf-container sf-container--large" style="padding: 3rem 2rem;">
|
|
486
|
+
<div class="sf-stack sf-stack--vertical sf-stack--spacing-large">
|
|
487
|
+
<div class="sf-code-display sf-code-display--visible">
|
|
488
|
+
<div class="sf-code-display__header">
|
|
489
|
+
<div class="sf-code-display__window-controls">
|
|
490
|
+
<span class="sf-code-display__control sf-code-display__control--close"></span>
|
|
491
|
+
<span class="sf-code-display__control sf-code-display__control--minimize"></span>
|
|
492
|
+
<span class="sf-code-display__control sf-code-display__control--maximize"></span>
|
|
493
|
+
</div>
|
|
494
|
+
|
|
495
|
+
<div class="sf-code-display__title">
|
|
496
|
+
<span class="sf-code-display__icon">{}</span>
|
|
497
|
+
<span class="sf-code-display__filename">snow-flow-components.jsx</span>
|
|
498
|
+
</div>
|
|
499
|
+
|
|
500
|
+
<button class="sf-code-display__copy" data-target="demo-code">
|
|
501
|
+
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
502
|
+
<rect x="9" y="9" width="13" height="13" rx="2" ry="2"/>
|
|
503
|
+
<path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/>
|
|
504
|
+
</svg>
|
|
505
|
+
<span class="sf-code-display__copy-text">Copy</span>
|
|
506
|
+
</button>
|
|
507
|
+
</div>
|
|
508
|
+
|
|
509
|
+
<div class="sf-code-display__body">
|
|
510
|
+
<div class="sf-code-display__line-numbers">
|
|
511
|
+
<span class="sf-code-display__line-number">1</span>
|
|
512
|
+
<span class="sf-code-display__line-number">2</span>
|
|
513
|
+
<span class="sf-code-display__line-number">3</span>
|
|
514
|
+
<span class="sf-code-display__line-number">4</span>
|
|
515
|
+
<span class="sf-code-display__line-number">5</span>
|
|
516
|
+
<span class="sf-code-display__line-number">6</span>
|
|
517
|
+
<span class="sf-code-display__line-number">7</span>
|
|
518
|
+
<span class="sf-code-display__line-number">8</span>
|
|
519
|
+
<span class="sf-code-display__line-number">9</span>
|
|
520
|
+
<span class="sf-code-display__line-number">10</span>
|
|
521
|
+
<span class="sf-code-display__line-number">11</span>
|
|
522
|
+
<span class="sf-code-display__line-number">12</span>
|
|
523
|
+
</div>
|
|
524
|
+
|
|
525
|
+
<div class="sf-code-display__content">
|
|
526
|
+
<pre class="sf-code-display__pre">
|
|
527
|
+
<code class="sf-code-display__code language-javascript" id="demo-code">import { Button, Card, Grid, Container } from 'snow-flow';
|
|
528
|
+
|
|
529
|
+
export default function MyApp() {
|
|
530
|
+
return (
|
|
531
|
+
<Container maxWidth="1200px">
|
|
532
|
+
<Grid columns={3} gap="large">
|
|
533
|
+
<Card elevation="medium" padding="large">
|
|
534
|
+
<h2>Component 1</h2>
|
|
535
|
+
<Button variant="primary">Click me</Button>
|
|
536
|
+
</Card>
|
|
537
|
+
</Grid>
|
|
538
|
+
</Container>
|
|
539
|
+
);
|
|
540
|
+
}</code>
|
|
541
|
+
</pre>
|
|
542
|
+
</div>
|
|
543
|
+
</div>
|
|
544
|
+
|
|
545
|
+
<div class="sf-code-display__cursor"></div>
|
|
546
|
+
</div>
|
|
547
|
+
|
|
548
|
+
<div class="sf-grid sf-grid--gap-medium" style="grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));">
|
|
549
|
+
<div class="sf-card sf-card--elevation-medium sf-card--padding-medium">
|
|
550
|
+
<h4>🎨 Syntax Highlighting</h4>
|
|
551
|
+
<p>Custom black & white theme optimized for readability with support for multiple programming languages.</p>
|
|
552
|
+
</div>
|
|
553
|
+
<div class="sf-card sf-card--elevation-medium sf-card--padding-medium">
|
|
554
|
+
<h4>📋 Copy Functionality</h4>
|
|
555
|
+
<p>One-click copy with visual feedback. Try clicking the copy button above to see it in action!</p>
|
|
556
|
+
</div>
|
|
557
|
+
<div class="sf-card sf-card--elevation-medium sf-card--padding-medium">
|
|
558
|
+
<h4>🔢 Line Numbers</h4>
|
|
559
|
+
<p>Optional line numbers with hover effects for easy code reference and debugging assistance.</p>
|
|
560
|
+
</div>
|
|
561
|
+
</div>
|
|
562
|
+
</div>
|
|
563
|
+
</div>
|
|
564
|
+
</section>
|
|
565
|
+
|
|
566
|
+
<!-- Interactive Elements Demo Section -->
|
|
567
|
+
<section id="interactive" class="demo-showcase">
|
|
568
|
+
<div class="demo-section-header">
|
|
569
|
+
<h2>Interactive Elements</h2>
|
|
570
|
+
<p>Buttons, forms, and controls with advanced interactions</p>
|
|
571
|
+
</div>
|
|
572
|
+
|
|
573
|
+
<div class="sf-container sf-container--large" style="padding: 3rem 2rem;">
|
|
574
|
+
<div class="sf-grid sf-grid--gap-large" style="grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));">
|
|
575
|
+
<!-- Buttons Demo -->
|
|
576
|
+
<div class="sf-card sf-card--elevation-medium sf-card--padding-large">
|
|
577
|
+
<h3 style="margin-bottom: 1.5rem;">Gradient Buttons</h3>
|
|
578
|
+
<div class="sf-stack sf-stack--vertical sf-stack--spacing-small">
|
|
579
|
+
<button class="sf-button sf-button--primary sf-button--medium">
|
|
580
|
+
<span class="sf-button__content">Primary Button</span>
|
|
581
|
+
</button>
|
|
582
|
+
<button class="sf-button sf-button--secondary sf-button--medium">
|
|
583
|
+
<span class="sf-button__content">Secondary Button</span>
|
|
584
|
+
</button>
|
|
585
|
+
<button class="sf-button sf-button--ghost sf-button--medium">
|
|
586
|
+
<span class="sf-button__content">Ghost Button</span>
|
|
587
|
+
</button>
|
|
588
|
+
</div>
|
|
589
|
+
</div>
|
|
590
|
+
|
|
591
|
+
<!-- Form Inputs Demo -->
|
|
592
|
+
<div class="sf-card sf-card--elevation-medium sf-card--padding-large">
|
|
593
|
+
<h3 style="margin-bottom: 1.5rem;">Form Inputs</h3>
|
|
594
|
+
<div class="sf-stack sf-stack--vertical sf-stack--spacing-medium">
|
|
595
|
+
<div class="sf-input">
|
|
596
|
+
<label class="sf-input__label">Username</label>
|
|
597
|
+
<div class="sf-input__wrapper">
|
|
598
|
+
<input type="text" class="sf-input__field" placeholder="Enter username" />
|
|
599
|
+
<div class="sf-input__border"></div>
|
|
600
|
+
</div>
|
|
601
|
+
</div>
|
|
602
|
+
|
|
603
|
+
<div class="sf-input">
|
|
604
|
+
<label class="sf-input__label">Email</label>
|
|
605
|
+
<div class="sf-input__wrapper">
|
|
606
|
+
<input type="email" class="sf-input__field" placeholder="Enter email" />
|
|
607
|
+
<div class="sf-input__border"></div>
|
|
608
|
+
</div>
|
|
609
|
+
</div>
|
|
610
|
+
</div>
|
|
611
|
+
</div>
|
|
612
|
+
|
|
613
|
+
<!-- Toggles & Progress Demo -->
|
|
614
|
+
<div class="sf-card sf-card--elevation-medium sf-card--padding-large">
|
|
615
|
+
<h3 style="margin-bottom: 1.5rem;">Controls & Progress</h3>
|
|
616
|
+
<div class="sf-stack sf-stack--vertical sf-stack--spacing-medium">
|
|
617
|
+
<label class="sf-toggle sf-toggle--medium">
|
|
618
|
+
<input type="checkbox" class="sf-toggle__input" checked />
|
|
619
|
+
<span class="sf-toggle__slider">
|
|
620
|
+
<span class="sf-toggle__thumb"></span>
|
|
621
|
+
</span>
|
|
622
|
+
<span class="sf-toggle__label">Enable notifications</span>
|
|
623
|
+
</label>
|
|
624
|
+
|
|
625
|
+
<div class="sf-progress sf-progress--medium sf-progress--animated">
|
|
626
|
+
<div class="sf-progress__header">
|
|
627
|
+
<span class="sf-progress__label">Loading</span>
|
|
628
|
+
<span class="sf-progress__percent">75%</span>
|
|
629
|
+
</div>
|
|
630
|
+
<div class="sf-progress__track">
|
|
631
|
+
<div class="sf-progress__fill" style="width: 75%">
|
|
632
|
+
<div class="sf-progress__shimmer"></div>
|
|
633
|
+
</div>
|
|
634
|
+
</div>
|
|
635
|
+
</div>
|
|
636
|
+
</div>
|
|
637
|
+
</div>
|
|
638
|
+
|
|
639
|
+
<!-- Spinners & Tooltips Demo -->
|
|
640
|
+
<div class="sf-card sf-card--elevation-medium sf-card--padding-large">
|
|
641
|
+
<h3 style="margin-bottom: 1.5rem;">Feedback Elements</h3>
|
|
642
|
+
<div class="sf-stack sf-stack--vertical sf-stack--spacing-medium sf-stack--align-center">
|
|
643
|
+
<div class="sf-stack sf-stack--horizontal sf-stack--spacing-medium sf-stack--align-center">
|
|
644
|
+
<div class="sf-spinner sf-spinner--small sf-spinner--primary">
|
|
645
|
+
<div class="sf-spinner__circle"></div>
|
|
646
|
+
</div>
|
|
647
|
+
<div class="sf-spinner sf-spinner--medium sf-spinner--primary">
|
|
648
|
+
<div class="sf-spinner__circle"></div>
|
|
649
|
+
</div>
|
|
650
|
+
<div class="sf-spinner sf-spinner--large sf-spinner--primary">
|
|
651
|
+
<div class="sf-spinner__circle"></div>
|
|
652
|
+
</div>
|
|
653
|
+
</div>
|
|
654
|
+
|
|
655
|
+
<div class="sf-tooltip-trigger" data-tooltip="This is a helpful tooltip!" data-position="top">
|
|
656
|
+
<button class="sf-button sf-button--ghost sf-button--small">
|
|
657
|
+
<span class="sf-button__content">Hover for tooltip</span>
|
|
658
|
+
</button>
|
|
659
|
+
</div>
|
|
660
|
+
</div>
|
|
661
|
+
</div>
|
|
662
|
+
</div>
|
|
663
|
+
</div>
|
|
664
|
+
</section>
|
|
665
|
+
|
|
666
|
+
<!-- Layout Components Demo Section -->
|
|
667
|
+
<section id="layout" class="demo-showcase" style="background: #f8f9fa;">
|
|
668
|
+
<div class="demo-section-header">
|
|
669
|
+
<h2>Layout Components</h2>
|
|
670
|
+
<p>Building blocks for structured, responsive layouts</p>
|
|
671
|
+
</div>
|
|
672
|
+
|
|
673
|
+
<div class="sf-container sf-container--large" style="padding: 3rem 2rem;">
|
|
674
|
+
<div class="sf-stack sf-stack--vertical sf-stack--spacing-xl">
|
|
675
|
+
<!-- Grid Demo -->
|
|
676
|
+
<div>
|
|
677
|
+
<h3 style="margin-bottom: 1rem;">Responsive Grid System</h3>
|
|
678
|
+
<div class="sf-grid sf-grid--gap-medium sf-grid--responsive">
|
|
679
|
+
<div class="sf-card sf-card--elevation-low sf-card--padding-medium sf-text-center">
|
|
680
|
+
Grid Item 1
|
|
681
|
+
</div>
|
|
682
|
+
<div class="sf-card sf-card--elevation-low sf-card--padding-medium sf-text-center">
|
|
683
|
+
Grid Item 2
|
|
684
|
+
</div>
|
|
685
|
+
<div class="sf-card sf-card--elevation-low sf-card--padding-medium sf-text-center">
|
|
686
|
+
Grid Item 3
|
|
687
|
+
</div>
|
|
688
|
+
<div class="sf-card sf-card--elevation-low sf-card--padding-medium sf-text-center">
|
|
689
|
+
Grid Item 4
|
|
690
|
+
</div>
|
|
691
|
+
</div>
|
|
692
|
+
</div>
|
|
693
|
+
|
|
694
|
+
<!-- Dividers Demo -->
|
|
695
|
+
<div>
|
|
696
|
+
<h3 style="margin-bottom: 1rem;">Section Dividers</h3>
|
|
697
|
+
<div class="sf-card sf-card--padding-medium sf-card--border">
|
|
698
|
+
<p>Content above divider</p>
|
|
699
|
+
<div class="sf-divider sf-divider--line sf-divider--gradient"></div>
|
|
700
|
+
<p>Content with line divider</p>
|
|
701
|
+
<div class="sf-divider sf-divider--dots sf-divider--animated">
|
|
702
|
+
<div class="sf-divider__dots">
|
|
703
|
+
<span></span>
|
|
704
|
+
<span></span>
|
|
705
|
+
<span></span>
|
|
706
|
+
</div>
|
|
707
|
+
</div>
|
|
708
|
+
<p>Content with animated dots divider</p>
|
|
709
|
+
</div>
|
|
710
|
+
</div>
|
|
711
|
+
|
|
712
|
+
<!-- Flex Demo -->
|
|
713
|
+
<div>
|
|
714
|
+
<h3 style="margin-bottom: 1rem;">Flex Layouts</h3>
|
|
715
|
+
<div class="sf-card sf-card--padding-medium sf-card--border">
|
|
716
|
+
<div class="sf-flex sf-flex--row sf-flex--justify-between sf-flex--align-center">
|
|
717
|
+
<div class="sf-card sf-card--elevation-low sf-card--padding-small">Left</div>
|
|
718
|
+
<div class="sf-card sf-card--elevation-low sf-card--padding-small">Center</div>
|
|
719
|
+
<div class="sf-card sf-card--elevation-low sf-card--padding-small">Right</div>
|
|
720
|
+
</div>
|
|
721
|
+
</div>
|
|
722
|
+
</div>
|
|
723
|
+
|
|
724
|
+
<!-- Centering Demo -->
|
|
725
|
+
<div>
|
|
726
|
+
<h3 style="margin-bottom: 1rem;">Perfect Centering</h3>
|
|
727
|
+
<div class="sf-card sf-card--border" style="height: 150px;">
|
|
728
|
+
<div class="sf-center sf-h-full">
|
|
729
|
+
<div class="sf-card sf-card--elevation-medium sf-card--padding-medium">
|
|
730
|
+
<strong>Perfectly Centered Content</strong>
|
|
731
|
+
</div>
|
|
732
|
+
</div>
|
|
733
|
+
</div>
|
|
734
|
+
</div>
|
|
735
|
+
</div>
|
|
736
|
+
</div>
|
|
737
|
+
</section>
|
|
738
|
+
|
|
739
|
+
<!-- Footer -->
|
|
740
|
+
<footer class="footer-demo">
|
|
741
|
+
<div class="sf-container sf-container--medium">
|
|
742
|
+
<h2>Snow-Flow Component Library</h2>
|
|
743
|
+
<p>Modern, accessible, and performant components for your next project</p>
|
|
744
|
+
|
|
745
|
+
<div class="footer-links">
|
|
746
|
+
<a href="https://github.com/groeimetai/snow-flow">View on GitHub</a>
|
|
747
|
+
<a href="../navigation/Navigation.html">Navigation Docs</a>
|
|
748
|
+
<a href="../hero/Hero.html">Hero Docs</a>
|
|
749
|
+
<a href="../feature-cards/FeatureCards.html">Cards Docs</a>
|
|
750
|
+
<a href="../code-display/CodeDisplay.html">Code Docs</a>
|
|
751
|
+
<a href="../interactive/InteractiveElements.html">Interactive Docs</a>
|
|
752
|
+
<a href="../layout/LayoutComponents.html">Layout Docs</a>
|
|
753
|
+
</div>
|
|
754
|
+
|
|
755
|
+
<div class="sf-spacer sf-spacer--large"></div>
|
|
756
|
+
|
|
757
|
+
<p style="opacity: 0.7; font-size: 0.9rem;">
|
|
758
|
+
Built with ❤️ for the Snow-Flow ecosystem • MIT License
|
|
759
|
+
</p>
|
|
760
|
+
</div>
|
|
761
|
+
</footer>
|
|
762
|
+
|
|
763
|
+
<!-- Import all component scripts -->
|
|
764
|
+
<script src="../navigation/Navigation.js"></script>
|
|
765
|
+
<script src="../hero/Hero.js"></script>
|
|
766
|
+
<script src="../feature-cards/FeatureCards.js"></script>
|
|
767
|
+
<script src="../code-display/CodeDisplay.js"></script>
|
|
768
|
+
<script src="../interactive/InteractiveElements.js"></script>
|
|
769
|
+
<script src="../layout/LayoutComponents.js"></script>
|
|
770
|
+
|
|
771
|
+
<!-- Demo coordination script -->
|
|
772
|
+
<script>
|
|
773
|
+
// Coordinate all components for the demo
|
|
774
|
+
document.addEventListener('DOMContentLoaded', function() {
|
|
775
|
+
console.log('🎉 Snow-Flow Component Library Demo Loaded!');
|
|
776
|
+
console.log('📦 All components initialized and ready to use');
|
|
777
|
+
|
|
778
|
+
// Add smooth scrolling for footer links
|
|
779
|
+
const footerLinks = document.querySelectorAll('.footer-links a[href^="#"]');
|
|
780
|
+
footerLinks.forEach(link => {
|
|
781
|
+
link.addEventListener('click', function(e) {
|
|
782
|
+
e.preventDefault();
|
|
783
|
+
const href = this.getAttribute('href');
|
|
784
|
+
const target = document.querySelector(href);
|
|
785
|
+
if (target) {
|
|
786
|
+
const offset = 80;
|
|
787
|
+
const targetPosition = target.offsetTop - offset;
|
|
788
|
+
window.scrollTo({
|
|
789
|
+
top: targetPosition,
|
|
790
|
+
behavior: 'smooth'
|
|
791
|
+
});
|
|
792
|
+
}
|
|
793
|
+
});
|
|
794
|
+
});
|
|
795
|
+
|
|
796
|
+
// Initialize tooltips for demo
|
|
797
|
+
const tooltipTriggers = document.querySelectorAll('.sf-tooltip-trigger');
|
|
798
|
+
const tooltipContainer = document.createElement('div');
|
|
799
|
+
tooltipContainer.id = 'tooltip-container';
|
|
800
|
+
document.body.appendChild(tooltipContainer);
|
|
801
|
+
|
|
802
|
+
tooltipTriggers.forEach(trigger => {
|
|
803
|
+
const content = trigger.getAttribute('data-tooltip');
|
|
804
|
+
const position = trigger.getAttribute('data-position') || 'top';
|
|
805
|
+
|
|
806
|
+
if (!content) return;
|
|
807
|
+
|
|
808
|
+
trigger.addEventListener('mouseenter', function(e) {
|
|
809
|
+
showTooltip(e.target, content, position);
|
|
810
|
+
});
|
|
811
|
+
|
|
812
|
+
trigger.addEventListener('mouseleave', function() {
|
|
813
|
+
hideTooltips();
|
|
814
|
+
});
|
|
815
|
+
});
|
|
816
|
+
|
|
817
|
+
function showTooltip(trigger, content, position) {
|
|
818
|
+
hideTooltips();
|
|
819
|
+
|
|
820
|
+
const tooltip = document.createElement('div');
|
|
821
|
+
tooltip.className = `sf-tooltip sf-tooltip--${position} sf-tooltip--visible`;
|
|
822
|
+
|
|
823
|
+
const rect = trigger.getBoundingClientRect();
|
|
824
|
+
let x = rect.left + rect.width / 2;
|
|
825
|
+
let y = position === 'top' ? rect.top - 10 : rect.bottom + 10;
|
|
826
|
+
|
|
827
|
+
tooltip.innerHTML = `
|
|
828
|
+
<div class="sf-tooltip__content">${content}</div>
|
|
829
|
+
<div class="sf-tooltip__arrow"></div>
|
|
830
|
+
`;
|
|
831
|
+
|
|
832
|
+
tooltip.style.left = `${x}px`;
|
|
833
|
+
tooltip.style.top = `${y}px`;
|
|
834
|
+
|
|
835
|
+
document.body.appendChild(tooltip);
|
|
836
|
+
}
|
|
837
|
+
|
|
838
|
+
function hideTooltips() {
|
|
839
|
+
const tooltips = document.querySelectorAll('.sf-tooltip');
|
|
840
|
+
tooltips.forEach(tooltip => tooltip.remove());
|
|
841
|
+
}
|
|
842
|
+
});
|
|
843
|
+
</script>
|
|
844
|
+
</body>
|
|
845
|
+
</html>
|