create-template-html-css 1.9.0 → 2.0.1
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/CHANGELOG.md +80 -0
- package/COMPONENTS-GALLERY.html +735 -747
- package/README.md +179 -2
- package/bin/cli.js +15 -3
- package/package.json +1 -1
- package/templates/blackjack/index.html +97 -0
- package/templates/blackjack/script.js +381 -0
- package/templates/blackjack/style.css +452 -0
- package/templates/breakout/index.html +56 -0
- package/templates/breakout/script.js +387 -0
- package/templates/breakout/style.css +239 -0
- package/templates/connect-four/index.html +78 -0
- package/templates/connect-four/script.js +413 -0
- package/templates/connect-four/style.css +426 -0
- package/templates/dice-game/index.html +99 -0
- package/templates/dice-game/script.js +291 -0
- package/templates/dice-game/style.css +403 -0
- package/templates/flappy-bird/index.html +47 -0
- package/templates/flappy-bird/script.js +394 -0
- package/templates/flappy-bird/style.css +243 -0
- package/templates/game-2048/index.html +59 -0
- package/templates/game-2048/script.js +269 -0
- package/templates/game-2048/style.css +281 -0
- package/templates/pong/index.html +90 -0
- package/templates/pong/script.js +364 -0
- package/templates/pong/style.css +371 -0
- package/templates/rock-paper-scissors/index.html +84 -0
- package/templates/rock-paper-scissors/script.js +199 -0
- package/templates/rock-paper-scissors/style.css +295 -0
- package/templates/simon-says/index.html +64 -0
- package/templates/simon-says/script.js +206 -0
- package/templates/simon-says/style.css +250 -0
- package/templates/slot-machine/index.html +112 -0
- package/templates/slot-machine/script.js +238 -0
- package/templates/slot-machine/style.css +464 -0
- package/templates/tetris/index.html +84 -0
- package/templates/tetris/script.js +447 -0
- package/templates/tetris/style.css +286 -0
- package/templates/whack-a-mole/index.html +85 -0
- package/templates/whack-a-mole/script.js +172 -0
- package/{demo-games/snake-game → templates/whack-a-mole}/style.css +114 -97
- package/PUBLISH-GUIDE.md +0 -112
- package/create-template-html-css-1.8.0.tgz +0 -0
- package/demo-games/guess-number/index.html +0 -71
- package/demo-games/guess-number/script.js +0 -216
- package/demo-games/guess-number/style.css +0 -337
- package/demo-games/memory-game/index.html +0 -50
- package/demo-games/memory-game/script.js +0 -216
- package/demo-games/memory-game/style.css +0 -288
- package/demo-games/snake-game/index.html +0 -61
- package/demo-games/snake-game/script.js +0 -360
- package/demo-games/tic-tac-toe/index.html +0 -57
- package/demo-games/tic-tac-toe/script.js +0 -156
- package/demo-games/tic-tac-toe/style.css +0 -244
package/COMPONENTS-GALLERY.html
CHANGED
|
@@ -1,773 +1,761 @@
|
|
|
1
1
|
<!DOCTYPE html>
|
|
2
2
|
<html lang="en">
|
|
3
|
-
|
|
4
|
-
<meta charset="UTF-8"
|
|
5
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0"
|
|
6
|
-
<title>
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>Create Template HTML/CSS - Component Gallery</title>
|
|
7
7
|
<style>
|
|
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
|
-
border: none;
|
|
251
|
-
border-radius: 4px;
|
|
252
|
-
cursor: pointer;
|
|
253
|
-
font-size: 0.75rem;
|
|
254
|
-
opacity: 0;
|
|
255
|
-
transition: opacity 0.2s;
|
|
256
|
-
}
|
|
257
|
-
|
|
258
|
-
.code-block:hover .copy-btn {
|
|
259
|
-
opacity: 1;
|
|
260
|
-
}
|
|
261
|
-
|
|
262
|
-
.empty {
|
|
263
|
-
text-align: center;
|
|
264
|
-
padding: 60px 20px;
|
|
265
|
-
color: #718096;
|
|
266
|
-
}
|
|
267
|
-
|
|
268
|
-
.empty h2 {
|
|
269
|
-
margin-bottom: 10px;
|
|
270
|
-
}
|
|
271
|
-
|
|
272
|
-
.color-schemes-section {
|
|
273
|
-
margin: 60px 0;
|
|
274
|
-
padding: 40px;
|
|
275
|
-
background: rgba(102, 126, 234, 0.05);
|
|
276
|
-
border-radius: 12px;
|
|
277
|
-
}
|
|
278
|
-
|
|
279
|
-
.color-schemes-title {
|
|
280
|
-
font-size: 1.8rem;
|
|
281
|
-
margin-bottom: 30px;
|
|
282
|
-
text-align: center;
|
|
283
|
-
}
|
|
284
|
-
|
|
285
|
-
.schemes-grid {
|
|
286
|
-
display: grid;
|
|
287
|
-
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
288
|
-
gap: 20px;
|
|
289
|
-
}
|
|
290
|
-
|
|
291
|
-
.scheme-card {
|
|
292
|
-
background: white;
|
|
293
|
-
border-radius: 8px;
|
|
294
|
-
padding: 20px;
|
|
295
|
-
text-align: center;
|
|
296
|
-
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
|
297
|
-
transition: transform 0.2s, box-shadow 0.2s;
|
|
298
|
-
}
|
|
299
|
-
|
|
300
|
-
@media (prefers-color-scheme: dark) {
|
|
301
|
-
.scheme-card {
|
|
302
|
-
background: #2d3748;
|
|
303
|
-
}
|
|
304
|
-
}
|
|
305
|
-
|
|
306
|
-
.scheme-card:hover {
|
|
307
|
-
transform: translateY(-4px);
|
|
308
|
-
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
|
|
309
|
-
}
|
|
310
|
-
|
|
311
|
-
.scheme-preview {
|
|
312
|
-
display: flex;
|
|
313
|
-
gap: 10px;
|
|
314
|
-
margin-bottom: 15px;
|
|
315
|
-
justify-content: center;
|
|
316
|
-
height: 60px;
|
|
317
|
-
}
|
|
318
|
-
|
|
319
|
-
.color-swatch {
|
|
320
|
-
flex: 1;
|
|
321
|
-
border-radius: 6px;
|
|
322
|
-
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
|
323
|
-
}
|
|
324
|
-
|
|
325
|
-
.scheme-name {
|
|
326
|
-
font-size: 1.1rem;
|
|
327
|
-
font-weight: 700;
|
|
328
|
-
margin-bottom: 8px;
|
|
329
|
-
}
|
|
330
|
-
|
|
331
|
-
.scheme-description {
|
|
332
|
-
font-size: 0.85rem;
|
|
333
|
-
color: #718096;
|
|
334
|
-
line-height: 1.4;
|
|
335
|
-
}
|
|
336
|
-
|
|
337
|
-
footer {
|
|
338
|
-
border-top: 2px solid #e2e8f0;
|
|
339
|
-
padding: 40px;
|
|
340
|
-
text-align: center;
|
|
341
|
-
color: #718096;
|
|
342
|
-
margin-top: 60px;
|
|
343
|
-
}
|
|
344
|
-
|
|
345
|
-
.footer-links {
|
|
346
|
-
display: flex;
|
|
347
|
-
justify-content: center;
|
|
348
|
-
gap: 20px;
|
|
349
|
-
margin-top: 15px;
|
|
350
|
-
flex-wrap: wrap;
|
|
351
|
-
}
|
|
352
|
-
|
|
353
|
-
.footer-links a {
|
|
354
|
-
color: var(--primary);
|
|
355
|
-
text-decoration: none;
|
|
356
|
-
font-weight: 600;
|
|
357
|
-
transition: opacity 0.2s;
|
|
358
|
-
}
|
|
359
|
-
|
|
360
|
-
.footer-links a:hover {
|
|
361
|
-
opacity: 0.7;
|
|
362
|
-
}
|
|
363
|
-
|
|
364
|
-
.hidden {
|
|
365
|
-
display: none !important;
|
|
366
|
-
}
|
|
367
|
-
|
|
368
|
-
@media (max-width: 768px) {
|
|
369
|
-
h1 {
|
|
370
|
-
font-size: 2rem;
|
|
371
|
-
}
|
|
372
|
-
|
|
373
|
-
.gallery {
|
|
374
|
-
grid-template-columns: 1fr;
|
|
375
|
-
}
|
|
376
|
-
|
|
377
|
-
.controls {
|
|
378
|
-
flex-direction: column;
|
|
379
|
-
}
|
|
380
|
-
|
|
381
|
-
.search-input,
|
|
382
|
-
.filter-select {
|
|
383
|
-
width: 100%;
|
|
384
|
-
}
|
|
385
|
-
}
|
|
8
|
+
* {
|
|
9
|
+
margin: 0;
|
|
10
|
+
padding: 0;
|
|
11
|
+
box-sizing: border-box;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
body {
|
|
15
|
+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
|
|
16
|
+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
17
|
+
color: #333;
|
|
18
|
+
min-height: 100vh;
|
|
19
|
+
padding: 20px;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
.container {
|
|
23
|
+
max-width: 1400px;
|
|
24
|
+
margin: 0 auto;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
header {
|
|
28
|
+
text-align: center;
|
|
29
|
+
color: white;
|
|
30
|
+
margin-bottom: 40px;
|
|
31
|
+
padding: 40px 20px;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
header h1 {
|
|
35
|
+
font-size: 3rem;
|
|
36
|
+
margin-bottom: 10px;
|
|
37
|
+
text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
header p {
|
|
41
|
+
font-size: 1.2rem;
|
|
42
|
+
opacity: 0.9;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.stats {
|
|
46
|
+
display: flex;
|
|
47
|
+
justify-content: center;
|
|
48
|
+
gap: 30px;
|
|
49
|
+
margin-top: 20px;
|
|
50
|
+
flex-wrap: wrap;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.stat {
|
|
54
|
+
background: rgba(255,255,255,0.2);
|
|
55
|
+
padding: 15px 30px;
|
|
56
|
+
border-radius: 10px;
|
|
57
|
+
backdrop-filter: blur(10px);
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
.stat-number {
|
|
61
|
+
font-size: 2rem;
|
|
62
|
+
font-weight: bold;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
.stat-label {
|
|
66
|
+
font-size: 0.9rem;
|
|
67
|
+
opacity: 0.9;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
.category {
|
|
71
|
+
background: white;
|
|
72
|
+
border-radius: 15px;
|
|
73
|
+
padding: 30px;
|
|
74
|
+
margin-bottom: 30px;
|
|
75
|
+
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
.category-header {
|
|
79
|
+
display: flex;
|
|
80
|
+
align-items: center;
|
|
81
|
+
margin-bottom: 25px;
|
|
82
|
+
padding-bottom: 15px;
|
|
83
|
+
border-bottom: 3px solid #667eea;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
.category-icon {
|
|
87
|
+
font-size: 2rem;
|
|
88
|
+
margin-right: 15px;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
.category-title {
|
|
92
|
+
font-size: 1.8rem;
|
|
93
|
+
color: #667eea;
|
|
94
|
+
font-weight: 600;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
.category-count {
|
|
98
|
+
margin-left: auto;
|
|
99
|
+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
100
|
+
color: white;
|
|
101
|
+
padding: 5px 15px;
|
|
102
|
+
border-radius: 20px;
|
|
103
|
+
font-size: 0.9rem;
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
.components-grid {
|
|
107
|
+
display: grid;
|
|
108
|
+
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
|
|
109
|
+
gap: 20px;
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
.component-card {
|
|
113
|
+
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
|
|
114
|
+
border-radius: 12px;
|
|
115
|
+
padding: 25px;
|
|
116
|
+
transition: all 0.3s ease;
|
|
117
|
+
cursor: pointer;
|
|
118
|
+
position: relative;
|
|
119
|
+
overflow: hidden;
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
.component-card:hover {
|
|
123
|
+
transform: translateY(-5px);
|
|
124
|
+
box-shadow: 0 10px 25px rgba(102, 126, 234, 0.3);
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
.component-card::before {
|
|
128
|
+
content: '';
|
|
129
|
+
position: absolute;
|
|
130
|
+
top: 0;
|
|
131
|
+
left: 0;
|
|
132
|
+
right: 0;
|
|
133
|
+
height: 4px;
|
|
134
|
+
background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
.component-name {
|
|
138
|
+
font-size: 1.3rem;
|
|
139
|
+
font-weight: 600;
|
|
140
|
+
color: #333;
|
|
141
|
+
margin-bottom: 10px;
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
.component-description {
|
|
145
|
+
color: #666;
|
|
146
|
+
font-size: 0.95rem;
|
|
147
|
+
margin-bottom: 15px;
|
|
148
|
+
line-height: 1.5;
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
.component-command {
|
|
152
|
+
background: #2d3748;
|
|
153
|
+
color: #48bb78;
|
|
154
|
+
padding: 10px;
|
|
155
|
+
border-radius: 6px;
|
|
156
|
+
font-family: 'Courier New', monospace;
|
|
157
|
+
font-size: 0.85rem;
|
|
158
|
+
word-break: break-all;
|
|
159
|
+
position: relative;
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
.copy-btn {
|
|
163
|
+
position: absolute;
|
|
164
|
+
right: 10px;
|
|
165
|
+
top: 50%;
|
|
166
|
+
transform: translateY(-50%);
|
|
167
|
+
background: #48bb78;
|
|
168
|
+
color: white;
|
|
169
|
+
border: none;
|
|
170
|
+
padding: 5px 10px;
|
|
171
|
+
border-radius: 4px;
|
|
172
|
+
cursor: pointer;
|
|
173
|
+
font-size: 0.75rem;
|
|
174
|
+
transition: all 0.2s;
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
.copy-btn:hover {
|
|
178
|
+
background: #38a169;
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
.copy-btn.copied {
|
|
182
|
+
background: #667eea;
|
|
183
|
+
}
|
|
184
|
+
|
|
185
|
+
.search-box {
|
|
186
|
+
background: white;
|
|
187
|
+
padding: 20px;
|
|
188
|
+
border-radius: 15px;
|
|
189
|
+
margin-bottom: 30px;
|
|
190
|
+
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
|
|
191
|
+
}
|
|
192
|
+
|
|
193
|
+
.search-input {
|
|
194
|
+
width: 100%;
|
|
195
|
+
padding: 15px 20px;
|
|
196
|
+
font-size: 1.1rem;
|
|
197
|
+
border: 2px solid #e2e8f0;
|
|
198
|
+
border-radius: 10px;
|
|
199
|
+
outline: none;
|
|
200
|
+
transition: all 0.3s;
|
|
201
|
+
}
|
|
202
|
+
|
|
203
|
+
.search-input:focus {
|
|
204
|
+
border-color: #667eea;
|
|
205
|
+
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
|
|
206
|
+
}
|
|
207
|
+
|
|
208
|
+
.game-badge {
|
|
209
|
+
display: inline-block;
|
|
210
|
+
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
|
|
211
|
+
color: white;
|
|
212
|
+
padding: 3px 8px;
|
|
213
|
+
border-radius: 4px;
|
|
214
|
+
font-size: 0.7rem;
|
|
215
|
+
margin-left: 8px;
|
|
216
|
+
font-weight: 600;
|
|
217
|
+
}
|
|
218
|
+
|
|
219
|
+
footer {
|
|
220
|
+
text-align: center;
|
|
221
|
+
color: white;
|
|
222
|
+
padding: 40px 20px;
|
|
223
|
+
margin-top: 40px;
|
|
224
|
+
}
|
|
225
|
+
|
|
226
|
+
footer a {
|
|
227
|
+
color: white;
|
|
228
|
+
text-decoration: none;
|
|
229
|
+
font-weight: 600;
|
|
230
|
+
}
|
|
231
|
+
|
|
232
|
+
footer a:hover {
|
|
233
|
+
text-decoration: underline;
|
|
234
|
+
}
|
|
235
|
+
|
|
236
|
+
@media (max-width: 768px) {
|
|
237
|
+
header h1 {
|
|
238
|
+
font-size: 2rem;
|
|
239
|
+
}
|
|
240
|
+
|
|
241
|
+
.components-grid {
|
|
242
|
+
grid-template-columns: 1fr;
|
|
243
|
+
}
|
|
244
|
+
|
|
245
|
+
.stats {
|
|
246
|
+
flex-direction: column;
|
|
247
|
+
gap: 15px;
|
|
248
|
+
}
|
|
249
|
+
}
|
|
386
250
|
</style>
|
|
387
|
-
|
|
388
|
-
|
|
251
|
+
</head>
|
|
252
|
+
<body>
|
|
389
253
|
<div class="container">
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
<div class="stat">
|
|
407
|
-
<div class="stat-num">∞</div>
|
|
408
|
-
<div class="stat-label">Customizable</div>
|
|
409
|
-
</div>
|
|
410
|
-
</div>
|
|
411
|
-
</header>
|
|
412
|
-
|
|
413
|
-
<div class="controls">
|
|
414
|
-
<input type="text" id="search" class="search-input" placeholder="Search components..." />
|
|
415
|
-
<select id="categoryFilter" class="filter-select">
|
|
416
|
-
<option value="">All Categories</option>
|
|
417
|
-
<option value="basic">Basic Components</option>
|
|
418
|
-
<option value="auth">Authentication</option>
|
|
419
|
-
<option value="loading">Loading</option>
|
|
420
|
-
<option value="animation">Animations</option>
|
|
421
|
-
<option value="grid">Grid Layouts</option>
|
|
422
|
-
<option value="flex">Flexbox Layouts</option>
|
|
423
|
-
<option value="dom">DOM Manipulation</option>
|
|
424
|
-
</select>
|
|
425
|
-
<button class="btn" onclick="window.print()">🖨️ Print Gallery</button>
|
|
426
|
-
</div>
|
|
427
|
-
|
|
428
|
-
<div id="gallery" class="gallery"></div>
|
|
429
|
-
<div id="empty" class="empty hidden">
|
|
430
|
-
<h2>No components found</h2>
|
|
431
|
-
<p>Try adjusting your search or filter</p>
|
|
432
|
-
</div>
|
|
433
|
-
|
|
434
|
-
<!-- Color Schemes Section -->
|
|
435
|
-
<div class="color-schemes-section">
|
|
436
|
-
<h2 class="color-schemes-title">🎨 Color Schemes Preview</h2>
|
|
437
|
-
<div class="schemes-grid" id="colorSchemesGrid"></div>
|
|
438
|
-
</div>
|
|
439
|
-
|
|
440
|
-
<!-- CLI Flags Section -->
|
|
441
|
-
<div class="color-schemes-section" style="margin-top: 40px;">
|
|
442
|
-
<h2 class="color-schemes-title">⚡ One-Command Creation (Non-Interactive)</h2>
|
|
443
|
-
<p style="text-align: center; color: #666; margin-bottom: 20px;">
|
|
444
|
-
Create components instantly with all flags in a single command - no prompts needed!<br>
|
|
445
|
-
<small>Install globally with npm, or use npx to run without installation</small>
|
|
446
|
-
</p>
|
|
447
|
-
|
|
448
|
-
<div style="max-width: 900px; margin: 0 auto;">
|
|
449
|
-
<!-- Available Flags -->
|
|
450
|
-
<div style="background: #f8f9fa; padding: 20px; border-radius: 8px; margin-bottom: 20px;">
|
|
451
|
-
<h3 style="margin: 0 0 15px 0; color: #333;">📋 Available Flags:</h3>
|
|
452
|
-
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 15px;">
|
|
453
|
-
<div>
|
|
454
|
-
<code style="background: #e9ecef; padding: 4px 8px; border-radius: 4px; color: #495057;">-c, --component <type></code>
|
|
455
|
-
<div style="font-size: 0.9rem; color: #666; margin-top: 5px;">Component type (required)</div>
|
|
456
|
-
</div>
|
|
457
|
-
<div>
|
|
458
|
-
<code style="background: #e9ecef; padding: 4px 8px; border-radius: 4px; color: #495057;">-n, --name <name></code>
|
|
459
|
-
<div style="font-size: 0.9rem; color: #666; margin-top: 5px;">Project name (required)</div>
|
|
460
|
-
</div>
|
|
461
|
-
<div>
|
|
462
|
-
<code style="background: #e9ecef; padding: 4px 8px; border-radius: 4px; color: #495057;">--dark-mode</code>
|
|
463
|
-
<div style="font-size: 0.9rem; color: #666; margin-top: 5px;">Add dark mode support</div>
|
|
464
|
-
</div>
|
|
465
|
-
<div>
|
|
466
|
-
<code style="background: #e9ecef; padding: 4px 8px; border-radius: 4px; color: #495057;">--color-scheme <name></code>
|
|
467
|
-
<div style="font-size: 0.9rem; color: #666; margin-top: 5px;">Use preset colors</div>
|
|
468
|
-
</div>
|
|
469
|
-
<div>
|
|
470
|
-
<code style="background: #e9ecef; padding: 4px 8px; border-radius: 4px; color: #495057;">--primary-color <hex></code>
|
|
471
|
-
<div style="font-size: 0.9rem; color: #666; margin-top: 5px;">Custom primary color</div>
|
|
472
|
-
</div>
|
|
473
|
-
<div>
|
|
474
|
-
<code style="background: #e9ecef; padding: 4px 8px; border-radius: 4px; color: #495057;">--secondary-color <hex></code>
|
|
475
|
-
<div style="font-size: 0.9rem; color: #666; margin-top: 5px;">Custom secondary color</div>
|
|
476
|
-
</div>
|
|
254
|
+
<header>
|
|
255
|
+
<h1>🎨 Create Template HTML/CSS</h1>
|
|
256
|
+
<p>Interactive Component Gallery - v2.0.0</p>
|
|
257
|
+
<div class="stats">
|
|
258
|
+
<div class="stat">
|
|
259
|
+
<div class="stat-number">46</div>
|
|
260
|
+
<div class="stat-label">Total Templates</div>
|
|
261
|
+
</div>
|
|
262
|
+
<div class="stat">
|
|
263
|
+
<div class="stat-number">16</div>
|
|
264
|
+
<div class="stat-label">Interactive Games</div>
|
|
265
|
+
</div>
|
|
266
|
+
<div class="stat">
|
|
267
|
+
<div class="stat-number">30</div>
|
|
268
|
+
<div class="stat-label">UI Components</div>
|
|
269
|
+
</div>
|
|
477
270
|
</div>
|
|
478
|
-
|
|
479
|
-
|
|
480
|
-
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
|
|
271
|
+
</header>
|
|
272
|
+
|
|
273
|
+
<div class="search-box">
|
|
274
|
+
<input type="text" class="search-input" id="searchInput" placeholder="🔍 Search components... (e.g., button, game, form)">
|
|
275
|
+
</div>
|
|
276
|
+
|
|
277
|
+
<!-- Basic Components -->
|
|
278
|
+
<div class="category" data-category="basic">
|
|
279
|
+
<div class="category-header">
|
|
280
|
+
<span class="category-icon">📦</span>
|
|
281
|
+
<h2 class="category-title">Basic Components</h2>
|
|
282
|
+
<span class="category-count">9 templates</span>
|
|
487
283
|
</div>
|
|
488
|
-
|
|
489
|
-
|
|
490
|
-
|
|
491
|
-
|
|
492
|
-
|
|
493
|
-
|
|
494
|
-
|
|
495
|
-
|
|
496
|
-
|
|
497
|
-
|
|
284
|
+
<div class="components-grid">
|
|
285
|
+
<div class="component-card" data-name="button">
|
|
286
|
+
<h3 class="component-name">Button</h3>
|
|
287
|
+
<p class="component-description">Styled button component with hover effects</p>
|
|
288
|
+
<div class="component-command">
|
|
289
|
+
create-template create -c button -n my-button
|
|
290
|
+
<button class="copy-btn" onclick="copyCommand(this)">Copy</button>
|
|
291
|
+
</div>
|
|
292
|
+
</div>
|
|
293
|
+
<div class="component-card" data-name="card">
|
|
294
|
+
<h3 class="component-name">Card</h3>
|
|
295
|
+
<p class="component-description">Card component with image and content</p>
|
|
296
|
+
<div class="component-command">
|
|
297
|
+
create-template create -c card -n my-card
|
|
298
|
+
<button class="copy-btn" onclick="copyCommand(this)">Copy</button>
|
|
299
|
+
</div>
|
|
300
|
+
</div>
|
|
301
|
+
<div class="component-card" data-name="form">
|
|
302
|
+
<h3 class="component-name">Form</h3>
|
|
303
|
+
<p class="component-description">Form with input fields and validation</p>
|
|
304
|
+
<div class="component-command">
|
|
305
|
+
create-template create -c form -n my-form
|
|
306
|
+
<button class="copy-btn" onclick="copyCommand(this)">Copy</button>
|
|
307
|
+
</div>
|
|
308
|
+
</div>
|
|
309
|
+
<div class="component-card" data-name="navigation">
|
|
310
|
+
<h3 class="component-name">Navigation</h3>
|
|
311
|
+
<p class="component-description">Responsive navigation bar</p>
|
|
312
|
+
<div class="component-command">
|
|
313
|
+
create-template create -c navigation -n my-nav
|
|
314
|
+
<button class="copy-btn" onclick="copyCommand(this)">Copy</button>
|
|
315
|
+
</div>
|
|
316
|
+
</div>
|
|
317
|
+
<div class="component-card" data-name="modal">
|
|
318
|
+
<h3 class="component-name">Modal</h3>
|
|
319
|
+
<p class="component-description">Modal dialog component</p>
|
|
320
|
+
<div class="component-command">
|
|
321
|
+
create-template create -c modal -n my-modal
|
|
322
|
+
<button class="copy-btn" onclick="copyCommand(this)">Copy</button>
|
|
323
|
+
</div>
|
|
324
|
+
</div>
|
|
325
|
+
<div class="component-card" data-name="footer">
|
|
326
|
+
<h3 class="component-name">Footer</h3>
|
|
327
|
+
<p class="component-description">Footer section with links and info</p>
|
|
328
|
+
<div class="component-command">
|
|
329
|
+
create-template create -c footer -n my-footer
|
|
330
|
+
<button class="copy-btn" onclick="copyCommand(this)">Copy</button>
|
|
331
|
+
</div>
|
|
332
|
+
</div>
|
|
333
|
+
<div class="component-card" data-name="hero">
|
|
334
|
+
<h3 class="component-name">Hero</h3>
|
|
335
|
+
<p class="component-description">Hero section with CTA button</p>
|
|
336
|
+
<div class="component-command">
|
|
337
|
+
create-template create -c hero -n my-hero
|
|
338
|
+
<button class="copy-btn" onclick="copyCommand(this)">Copy</button>
|
|
339
|
+
</div>
|
|
340
|
+
</div>
|
|
341
|
+
<div class="component-card" data-name="slider">
|
|
342
|
+
<h3 class="component-name">Slider</h3>
|
|
343
|
+
<p class="component-description">Image carousel with navigation</p>
|
|
344
|
+
<div class="component-command">
|
|
345
|
+
create-template create -c slider -n my-slider
|
|
346
|
+
<button class="copy-btn" onclick="copyCommand(this)">Copy</button>
|
|
347
|
+
</div>
|
|
348
|
+
</div>
|
|
349
|
+
<div class="component-card" data-name="table">
|
|
350
|
+
<h3 class="component-name">Table</h3>
|
|
351
|
+
<p class="component-description">Data table with search and filtering</p>
|
|
352
|
+
<div class="component-command">
|
|
353
|
+
create-template create -c table -n my-table
|
|
354
|
+
<button class="copy-btn" onclick="copyCommand(this)">Copy</button>
|
|
355
|
+
</div>
|
|
356
|
+
</div>
|
|
498
357
|
</div>
|
|
358
|
+
</div>
|
|
499
359
|
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
|
|
503
|
-
|
|
360
|
+
<!-- Authentication Forms -->
|
|
361
|
+
<div class="category" data-category="auth">
|
|
362
|
+
<div class="category-header">
|
|
363
|
+
<span class="category-icon">🔐</span>
|
|
364
|
+
<h2 class="category-title">Authentication Forms</h2>
|
|
365
|
+
<span class="category-count">2 templates</span>
|
|
504
366
|
</div>
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
|
|
509
|
-
|
|
367
|
+
<div class="components-grid">
|
|
368
|
+
<div class="component-card" data-name="login">
|
|
369
|
+
<h3 class="component-name">Login</h3>
|
|
370
|
+
<p class="component-description">Login form with validation</p>
|
|
371
|
+
<div class="component-command">
|
|
372
|
+
create-template create -c login -n my-login
|
|
373
|
+
<button class="copy-btn" onclick="copyCommand(this)">Copy</button>
|
|
374
|
+
</div>
|
|
375
|
+
</div>
|
|
376
|
+
<div class="component-card" data-name="register">
|
|
377
|
+
<h3 class="component-name">Register</h3>
|
|
378
|
+
<p class="component-description">Register form with password requirements</p>
|
|
379
|
+
<div class="component-command">
|
|
380
|
+
create-template create -c register -n my-register
|
|
381
|
+
<button class="copy-btn" onclick="copyCommand(this)">Copy</button>
|
|
382
|
+
</div>
|
|
383
|
+
</div>
|
|
510
384
|
</div>
|
|
385
|
+
</div>
|
|
511
386
|
|
|
512
|
-
|
|
513
|
-
|
|
514
|
-
|
|
515
|
-
|
|
387
|
+
<!-- Loading Placeholders -->
|
|
388
|
+
<div class="category" data-category="loading">
|
|
389
|
+
<div class="category-header">
|
|
390
|
+
<span class="category-icon">⏳</span>
|
|
391
|
+
<h2 class="category-title">Loading Placeholders</h2>
|
|
392
|
+
<span class="category-count">1 template</span>
|
|
393
|
+
</div>
|
|
394
|
+
<div class="components-grid">
|
|
395
|
+
<div class="component-card" data-name="skeleton">
|
|
396
|
+
<h3 class="component-name">Skeleton</h3>
|
|
397
|
+
<p class="component-description">Skeleton loading placeholder with shimmer animation</p>
|
|
398
|
+
<div class="component-command">
|
|
399
|
+
create-template create -c skeleton -n my-skeleton
|
|
400
|
+
<button class="copy-btn" onclick="copyCommand(this)">Copy</button>
|
|
401
|
+
</div>
|
|
402
|
+
</div>
|
|
516
403
|
</div>
|
|
404
|
+
</div>
|
|
517
405
|
|
|
518
|
-
|
|
519
|
-
|
|
520
|
-
|
|
521
|
-
|
|
406
|
+
<!-- Animation Templates -->
|
|
407
|
+
<div class="category" data-category="animation">
|
|
408
|
+
<div class="category-header">
|
|
409
|
+
<span class="category-icon">✨</span>
|
|
410
|
+
<h2 class="category-title">Animation Templates</h2>
|
|
411
|
+
<span class="category-count">4 templates</span>
|
|
412
|
+
</div>
|
|
413
|
+
<div class="components-grid">
|
|
414
|
+
<div class="component-card" data-name="spinner">
|
|
415
|
+
<h3 class="component-name">Spinner</h3>
|
|
416
|
+
<p class="component-description">5 loading spinner variations</p>
|
|
417
|
+
<div class="component-command">
|
|
418
|
+
create-template create -c spinner -n my-spinner
|
|
419
|
+
<button class="copy-btn" onclick="copyCommand(this)">Copy</button>
|
|
420
|
+
</div>
|
|
421
|
+
</div>
|
|
422
|
+
<div class="component-card" data-name="animated-card">
|
|
423
|
+
<h3 class="component-name">Animated Card</h3>
|
|
424
|
+
<p class="component-description">6 interactive card animations</p>
|
|
425
|
+
<div class="component-command">
|
|
426
|
+
create-template create -c animated-card -n my-animated-card
|
|
427
|
+
<button class="copy-btn" onclick="copyCommand(this)">Copy</button>
|
|
428
|
+
</div>
|
|
429
|
+
</div>
|
|
430
|
+
<div class="component-card" data-name="typing-effect">
|
|
431
|
+
<h3 class="component-name">Typing Effect</h3>
|
|
432
|
+
<p class="component-description">Text typing animations</p>
|
|
433
|
+
<div class="component-command">
|
|
434
|
+
create-template create -c typing-effect -n my-typing
|
|
435
|
+
<button class="copy-btn" onclick="copyCommand(this)">Copy</button>
|
|
436
|
+
</div>
|
|
437
|
+
</div>
|
|
438
|
+
<div class="component-card" data-name="fade-gallery">
|
|
439
|
+
<h3 class="component-name">Fade Gallery</h3>
|
|
440
|
+
<p class="component-description">Image gallery with fade effects</p>
|
|
441
|
+
<div class="component-command">
|
|
442
|
+
create-template create -c fade-gallery -n my-gallery
|
|
443
|
+
<button class="copy-btn" onclick="copyCommand(this)">Copy</button>
|
|
444
|
+
</div>
|
|
445
|
+
</div>
|
|
522
446
|
</div>
|
|
523
|
-
</div>
|
|
524
447
|
</div>
|
|
525
|
-
</div>
|
|
526
|
-
</div>
|
|
527
448
|
|
|
528
|
-
|
|
529
|
-
|
|
530
|
-
|
|
531
|
-
|
|
532
|
-
|
|
533
|
-
|
|
534
|
-
|
|
535
|
-
|
|
536
|
-
|
|
537
|
-
|
|
538
|
-
|
|
449
|
+
<!-- Grid Layouts -->
|
|
450
|
+
<div class="category" data-category="grid">
|
|
451
|
+
<div class="category-header">
|
|
452
|
+
<span class="category-icon">📐</span>
|
|
453
|
+
<h2 class="category-title">Grid Layouts</h2>
|
|
454
|
+
<span class="category-count">3 templates</span>
|
|
455
|
+
</div>
|
|
456
|
+
<div class="components-grid">
|
|
457
|
+
<div class="component-card" data-name="grid-layout">
|
|
458
|
+
<h3 class="component-name">Grid Layout</h3>
|
|
459
|
+
<p class="component-description">CSS Grid patterns and examples</p>
|
|
460
|
+
<div class="component-command">
|
|
461
|
+
create-template create -c grid-layout -n my-grid
|
|
462
|
+
<button class="copy-btn" onclick="copyCommand(this)">Copy</button>
|
|
463
|
+
</div>
|
|
464
|
+
</div>
|
|
465
|
+
<div class="component-card" data-name="masonry-grid">
|
|
466
|
+
<h3 class="component-name">Masonry Grid</h3>
|
|
467
|
+
<p class="component-description">Pinterest-style masonry layout</p>
|
|
468
|
+
<div class="component-command">
|
|
469
|
+
create-template create -c masonry-grid -n my-masonry
|
|
470
|
+
<button class="copy-btn" onclick="copyCommand(this)">Copy</button>
|
|
471
|
+
</div>
|
|
472
|
+
</div>
|
|
473
|
+
<div class="component-card" data-name="dashboard-grid">
|
|
474
|
+
<h3 class="component-name">Dashboard Grid</h3>
|
|
475
|
+
<p class="component-description">Complete admin dashboard (Grid)</p>
|
|
476
|
+
<div class="component-command">
|
|
477
|
+
create-template create -c dashboard-grid -n my-dashboard
|
|
478
|
+
<button class="copy-btn" onclick="copyCommand(this)">Copy</button>
|
|
479
|
+
</div>
|
|
480
|
+
</div>
|
|
481
|
+
</div>
|
|
482
|
+
</div>
|
|
539
483
|
|
|
540
|
-
|
|
541
|
-
|
|
542
|
-
|
|
543
|
-
|
|
544
|
-
|
|
545
|
-
|
|
546
|
-
secondary: "#4ECDC4",
|
|
547
|
-
description: "Bold reds and teals - energetic and modern"
|
|
548
|
-
},
|
|
549
|
-
pastel: {
|
|
550
|
-
name: "Pastel",
|
|
551
|
-
primary: "#FFB3BA",
|
|
552
|
-
secondary: "#FFDFBA",
|
|
553
|
-
description: "Soft pinks and peaches - calm and friendly"
|
|
554
|
-
},
|
|
555
|
-
ocean: {
|
|
556
|
-
name: "Ocean",
|
|
557
|
-
primary: "#0066CC",
|
|
558
|
-
secondary: "#00CCFF",
|
|
559
|
-
description: "Deep blues and cyans - professional and cool"
|
|
560
|
-
},
|
|
561
|
-
sunset: {
|
|
562
|
-
name: "Sunset",
|
|
563
|
-
primary: "#FF6B35",
|
|
564
|
-
secondary: "#FFA500",
|
|
565
|
-
description: "Warm oranges and reds - energetic glow"
|
|
566
|
-
},
|
|
567
|
-
forest: {
|
|
568
|
-
name: "Forest",
|
|
569
|
-
primary: "#2D6A4F",
|
|
570
|
-
secondary: "#40916C",
|
|
571
|
-
description: "Green tones - natural and organic"
|
|
572
|
-
},
|
|
573
|
-
purple: {
|
|
574
|
-
name: "Purple",
|
|
575
|
-
primary: "#7209B7",
|
|
576
|
-
secondary: "#B5179E",
|
|
577
|
-
description: "Deep purples - elegant and premium"
|
|
578
|
-
},
|
|
579
|
-
minimal: {
|
|
580
|
-
name: "Minimal",
|
|
581
|
-
primary: "#1A1A1A",
|
|
582
|
-
secondary: "#666666",
|
|
583
|
-
description: "Grays and blacks - clean and simple"
|
|
584
|
-
},
|
|
585
|
-
coral: {
|
|
586
|
-
name: "Coral",
|
|
587
|
-
primary: "#FF6B9D",
|
|
588
|
-
secondary: "#FFA07A",
|
|
589
|
-
description: "Coral pinks and salmon - warm and playful"
|
|
590
|
-
},
|
|
591
|
-
teal: {
|
|
592
|
-
name: "Teal",
|
|
593
|
-
primary: "#008B8B",
|
|
594
|
-
secondary: "#20B2AA",
|
|
595
|
-
description: "Teal hues - balanced and professional"
|
|
596
|
-
},
|
|
597
|
-
neon: {
|
|
598
|
-
name: "Neon",
|
|
599
|
-
primary: "#FF006E",
|
|
600
|
-
secondary: "#00D9FF",
|
|
601
|
-
description: "Bright neon colors - bold and futuristic"
|
|
602
|
-
}
|
|
603
|
-
};
|
|
604
|
-
|
|
605
|
-
// Render color schemes
|
|
606
|
-
function renderColorSchemes() {
|
|
607
|
-
const grid = document.getElementById("colorSchemesGrid");
|
|
608
|
-
grid.innerHTML = "";
|
|
609
|
-
|
|
610
|
-
Object.entries(COLOR_SCHEMES).forEach(([key, scheme]) => {
|
|
611
|
-
const card = document.createElement("div");
|
|
612
|
-
card.className = "scheme-card";
|
|
613
|
-
card.innerHTML = `
|
|
614
|
-
<div class="scheme-preview">
|
|
615
|
-
<div class="color-swatch" style="background-color: ${scheme.primary};" title="${scheme.primary}"></div>
|
|
616
|
-
<div class="color-swatch" style="background-color: ${scheme.secondary};" title="${scheme.secondary}"></div>
|
|
484
|
+
<!-- Flexbox Layouts -->
|
|
485
|
+
<div class="category" data-category="flexbox">
|
|
486
|
+
<div class="category-header">
|
|
487
|
+
<span class="category-icon">📏</span>
|
|
488
|
+
<h2 class="category-title">Flexbox Layouts</h2>
|
|
489
|
+
<span class="category-count">3 templates</span>
|
|
617
490
|
</div>
|
|
618
|
-
<div class="
|
|
619
|
-
|
|
620
|
-
|
|
621
|
-
|
|
622
|
-
|
|
491
|
+
<div class="components-grid">
|
|
492
|
+
<div class="component-card" data-name="flex-layout">
|
|
493
|
+
<h3 class="component-name">Flex Layout</h3>
|
|
494
|
+
<p class="component-description">Flexbox patterns and examples</p>
|
|
495
|
+
<div class="component-command">
|
|
496
|
+
create-template create -c flex-layout -n my-flex
|
|
497
|
+
<button class="copy-btn" onclick="copyCommand(this)">Copy</button>
|
|
498
|
+
</div>
|
|
499
|
+
</div>
|
|
500
|
+
<div class="component-card" data-name="flex-cards">
|
|
501
|
+
<h3 class="component-name">Flex Cards</h3>
|
|
502
|
+
<p class="component-description">Equal-height card layouts</p>
|
|
503
|
+
<div class="component-command">
|
|
504
|
+
create-template create -c flex-cards -n my-cards
|
|
505
|
+
<button class="copy-btn" onclick="copyCommand(this)">Copy</button>
|
|
506
|
+
</div>
|
|
507
|
+
</div>
|
|
508
|
+
<div class="component-card" data-name="flex-dashboard">
|
|
509
|
+
<h3 class="component-name">Flex Dashboard</h3>
|
|
510
|
+
<p class="component-description">Complete admin dashboard (Flexbox)</p>
|
|
511
|
+
<div class="component-command">
|
|
512
|
+
create-template create -c flex-dashboard -n my-dashboard
|
|
513
|
+
<button class="copy-btn" onclick="copyCommand(this)">Copy</button>
|
|
514
|
+
</div>
|
|
515
|
+
</div>
|
|
623
516
|
</div>
|
|
624
|
-
|
|
625
|
-
|
|
626
|
-
|
|
627
|
-
|
|
628
|
-
|
|
629
|
-
|
|
630
|
-
|
|
517
|
+
</div>
|
|
518
|
+
|
|
519
|
+
<!-- DOM Manipulation Examples -->
|
|
520
|
+
<div class="category" data-category="dom">
|
|
521
|
+
<div class="category-header">
|
|
522
|
+
<span class="category-icon">🔄</span>
|
|
523
|
+
<h2 class="category-title">DOM Manipulation Examples</h2>
|
|
524
|
+
<span class="category-count">4 templates</span>
|
|
631
525
|
</div>
|
|
632
|
-
|
|
633
|
-
|
|
634
|
-
|
|
635
|
-
|
|
636
|
-
|
|
637
|
-
|
|
638
|
-
|
|
639
|
-
|
|
640
|
-
|
|
641
|
-
|
|
642
|
-
|
|
643
|
-
|
|
644
|
-
|
|
645
|
-
|
|
646
|
-
|
|
647
|
-
|
|
648
|
-
|
|
649
|
-
|
|
650
|
-
|
|
651
|
-
|
|
652
|
-
|
|
653
|
-
|
|
654
|
-
|
|
655
|
-
|
|
656
|
-
|
|
657
|
-
|
|
658
|
-
|
|
659
|
-
|
|
660
|
-
|
|
661
|
-
|
|
662
|
-
|
|
663
|
-
|
|
664
|
-
|
|
665
|
-
{ id: "hero", name: "Hero", cat: "basic", desc: "Eye-catching hero section", feat: ["Gradient bg", "CTA buttons", "Responsive"] },
|
|
666
|
-
{ id: "slider", name: "Slider", cat: "basic", desc: "Image carousel with navigation", feat: ["Auto-play", "Controls", "Touch support"] },
|
|
667
|
-
{ id: "table", name: "Table", cat: "basic", desc: "Data table with search", feat: ["Search function", "Sortable", "Responsive"] },
|
|
668
|
-
{ id: "login", name: "Login Form", cat: "auth", desc: "Professional login form", feat: ["Email validation", "Remember me", "Social buttons"] },
|
|
669
|
-
{ id: "register", name: "Register Form", cat: "auth", desc: "Registration with password strength", feat: ["Password strength", "Real-time feedback", "Username validation"] },
|
|
670
|
-
{ id: "skeleton", name: "Skeleton", cat: "loading", desc: "Loading placeholders with shimmer", feat: ["Shimmer effect", "Multiple layouts", "Toggle content"] },
|
|
671
|
-
{ id: "spinner", name: "Spinner", cat: "loading", desc: "5 loading spinner variations", feat: ["5 styles", "Smooth animation", "Customizable"] },
|
|
672
|
-
{ id: "animated-card", name: "Animated Card", cat: "animation", desc: "Interactive cards with hover animations", feat: ["6 animations", "Hover effects", "Content reveal"] },
|
|
673
|
-
{ id: "typing-effect", name: "Typing Effect", cat: "animation", desc: "Text typing animation", feat: ["Smooth typing", "Backspace", "Custom speed"] },
|
|
674
|
-
{ id: "fade-gallery", name: "Fade Gallery", cat: "animation", desc: "Image gallery with fade", feat: ["Fade effect", "Navigation", "Thumbnails"] },
|
|
675
|
-
{ id: "grid-layout", name: "Grid Layout", cat: "grid", desc: "CSS Grid patterns", feat: ["Multiple layouts", "Auto-fit", "Responsive"] },
|
|
676
|
-
{ id: "masonry-grid", name: "Masonry Grid", cat: "grid", desc: "Pinterest-style layout", feat: ["CSS columns", "Responsive", "Image support"] },
|
|
677
|
-
{ id: "dashboard-grid", name: "Dashboard Grid", cat: "grid", desc: "Admin dashboard with grid", feat: ["Widget layout", "Responsive", "Sidebar"] },
|
|
678
|
-
{ id: "flex-layout", name: "Flex Layout", cat: "flex", desc: "Flexbox patterns", feat: ["Flex containers", "Align items", "Wrap options"] },
|
|
679
|
-
{ id: "flex-cards", name: "Flex Cards", cat: "flex", desc: "Equal-height card layouts", feat: ["Equal heights", "Flexible", "Responsive"] },
|
|
680
|
-
{ id: "flex-dashboard", name: "Flex Dashboard", cat: "flex", desc: "Admin dashboard with flexbox", feat: ["Flexible layout", "Sidebar toggle", "Responsive"] },
|
|
681
|
-
{ id: "todo-list", name: "Todo List", cat: "dom", desc: "Interactive todo list", feat: ["Add/delete items", "Check off", "Local storage"] },
|
|
682
|
-
{ id: "counter", name: "Counter", cat: "dom", desc: "Click counter with history", feat: ["Increment/decrement", "Reset", "History"] },
|
|
683
|
-
{ id: "accordion", name: "Accordion", cat: "dom", desc: "Collapsible accordion", feat: ["Toggle content", "Smooth animation", "Multiple items"] },
|
|
684
|
-
{ id: "tabs", name: "Tabs", cat: "dom", desc: "Tabbed content switcher", feat: ["Tab switching", "Active states", "Keyboard support"] },
|
|
685
|
-
];
|
|
686
|
-
|
|
687
|
-
const gallery = document.getElementById("gallery");
|
|
688
|
-
const emptyDiv = document.getElementById("empty");
|
|
689
|
-
const searchInput = document.getElementById("search");
|
|
690
|
-
const categoryFilter = document.getElementById("categoryFilter");
|
|
691
|
-
|
|
692
|
-
function render(filtered) {
|
|
693
|
-
gallery.innerHTML = "";
|
|
694
|
-
if (filtered.length === 0) {
|
|
695
|
-
gallery.classList.add("hidden");
|
|
696
|
-
emptyDiv.classList.remove("hidden");
|
|
697
|
-
return;
|
|
698
|
-
}
|
|
699
|
-
gallery.classList.remove("hidden");
|
|
700
|
-
emptyDiv.classList.add("hidden");
|
|
701
|
-
|
|
702
|
-
filtered.forEach((c) => {
|
|
703
|
-
const card = document.createElement("div");
|
|
704
|
-
card.className = "card";
|
|
705
|
-
card.innerHTML = `
|
|
706
|
-
<div class="card-header">
|
|
707
|
-
<span class="card-title">${c.name}</span>
|
|
708
|
-
<span class="card-id">${c.id}</span>
|
|
526
|
+
<div class="components-grid">
|
|
527
|
+
<div class="component-card" data-name="todo-list">
|
|
528
|
+
<h3 class="component-name">Todo List</h3>
|
|
529
|
+
<p class="component-description">Interactive todo list with add/remove</p>
|
|
530
|
+
<div class="component-command">
|
|
531
|
+
create-template create -c todo-list -n my-todo
|
|
532
|
+
<button class="copy-btn" onclick="copyCommand(this)">Copy</button>
|
|
533
|
+
</div>
|
|
534
|
+
</div>
|
|
535
|
+
<div class="component-card" data-name="counter">
|
|
536
|
+
<h3 class="component-name">Counter</h3>
|
|
537
|
+
<p class="component-description">Click counter with history tracking</p>
|
|
538
|
+
<div class="component-command">
|
|
539
|
+
create-template create -c counter -n my-counter
|
|
540
|
+
<button class="copy-btn" onclick="copyCommand(this)">Copy</button>
|
|
541
|
+
</div>
|
|
542
|
+
</div>
|
|
543
|
+
<div class="component-card" data-name="accordion">
|
|
544
|
+
<h3 class="component-name">Accordion</h3>
|
|
545
|
+
<p class="component-description">Collapsible accordion component</p>
|
|
546
|
+
<div class="component-command">
|
|
547
|
+
create-template create -c accordion -n my-accordion
|
|
548
|
+
<button class="copy-btn" onclick="copyCommand(this)">Copy</button>
|
|
549
|
+
</div>
|
|
550
|
+
</div>
|
|
551
|
+
<div class="component-card" data-name="tabs">
|
|
552
|
+
<h3 class="component-name">Tabs</h3>
|
|
553
|
+
<p class="component-description">Tabbed content switcher</p>
|
|
554
|
+
<div class="component-command">
|
|
555
|
+
create-template create -c tabs -n my-tabs
|
|
556
|
+
<button class="copy-btn" onclick="copyCommand(this)">Copy</button>
|
|
557
|
+
</div>
|
|
558
|
+
</div>
|
|
709
559
|
</div>
|
|
710
|
-
|
|
711
|
-
|
|
712
|
-
|
|
713
|
-
|
|
714
|
-
|
|
715
|
-
|
|
716
|
-
|
|
717
|
-
<
|
|
718
|
-
|
|
719
|
-
<div class="code-block" style="margin: 6px 0; font-size: 0.85rem;">
|
|
720
|
-
create-template create -c ${c.id} -n my-${c.id}
|
|
721
|
-
<button class="copy-btn" onclick="copy(this)" style="font-size: 0.75rem;">Copy</button>
|
|
722
|
-
</div>
|
|
723
|
-
|
|
724
|
-
<div class="code-block" style="margin: 6px 0; font-size: 0.85rem;">
|
|
725
|
-
create-template create -c ${c.id} -n my-${c.id} --color-scheme ocean
|
|
726
|
-
<button class="copy-btn" onclick="copy(this)" style="font-size: 0.75rem;">Copy</button>
|
|
727
|
-
</div>
|
|
728
|
-
|
|
729
|
-
<div class="code-block" style="margin: 6px 0; font-size: 0.85rem;">
|
|
730
|
-
create-template create -c ${c.id} -n my-${c.id} --dark-mode --color-scheme sunset
|
|
731
|
-
<button class="copy-btn" onclick="copy(this)" style="font-size: 0.75rem;">Copy</button>
|
|
732
|
-
</div>
|
|
733
|
-
</div>
|
|
734
|
-
|
|
735
|
-
<!-- Local npm command -->
|
|
736
|
-
<div style="display: flex; gap: 10px; margin-top: 12px;">
|
|
737
|
-
<div class="code-block" style="flex: 1; opacity: 0.6; font-size: 0.85rem;">
|
|
738
|
-
npm run create -- -c ${c.id}
|
|
739
|
-
<button class="copy-btn" onclick="copy(this)" style="font-size: 0.75rem;">Local</button>
|
|
740
|
-
</div>
|
|
741
|
-
</div>
|
|
560
|
+
</div>
|
|
561
|
+
|
|
562
|
+
<!-- Interactive Games -->
|
|
563
|
+
<div class="category" data-category="games">
|
|
564
|
+
<div class="category-header">
|
|
565
|
+
<span class="category-icon">🎮</span>
|
|
566
|
+
<h2 class="category-title">Interactive Games</h2>
|
|
567
|
+
<span class="category-count">16 templates</span>
|
|
742
568
|
</div>
|
|
743
|
-
|
|
744
|
-
|
|
569
|
+
<div class="components-grid">
|
|
570
|
+
<div class="component-card" data-name="tic-tac-toe game">
|
|
571
|
+
<h3 class="component-name">Tic-Tac-Toe <span class="game-badge">GAME</span></h3>
|
|
572
|
+
<p class="component-description">Classic X and O game with score tracking</p>
|
|
573
|
+
<div class="component-command">
|
|
574
|
+
create-template create -c tic-tac-toe -n my-tictactoe
|
|
575
|
+
<button class="copy-btn" onclick="copyCommand(this)">Copy</button>
|
|
576
|
+
</div>
|
|
577
|
+
</div>
|
|
578
|
+
<div class="component-card" data-name="memory-game game">
|
|
579
|
+
<h3 class="component-name">Memory Game <span class="game-badge">GAME</span></h3>
|
|
580
|
+
<p class="component-description">Card matching game with difficulty levels</p>
|
|
581
|
+
<div class="component-command">
|
|
582
|
+
create-template create -c memory-game -n my-memory
|
|
583
|
+
<button class="copy-btn" onclick="copyCommand(this)">Copy</button>
|
|
584
|
+
</div>
|
|
585
|
+
</div>
|
|
586
|
+
<div class="component-card" data-name="snake-game game">
|
|
587
|
+
<h3 class="component-name">Snake Game <span class="game-badge">GAME</span></h3>
|
|
588
|
+
<p class="component-description">Classic snake with keyboard controls</p>
|
|
589
|
+
<div class="component-command">
|
|
590
|
+
create-template create -c snake-game -n my-snake
|
|
591
|
+
<button class="copy-btn" onclick="copyCommand(this)">Copy</button>
|
|
592
|
+
</div>
|
|
593
|
+
</div>
|
|
594
|
+
<div class="component-card" data-name="guess-number game">
|
|
595
|
+
<h3 class="component-name">Guess Number <span class="game-badge">GAME</span></h3>
|
|
596
|
+
<p class="component-description">Number guessing game with hints</p>
|
|
597
|
+
<div class="component-command">
|
|
598
|
+
create-template create -c guess-number -n my-guess
|
|
599
|
+
<button class="copy-btn" onclick="copyCommand(this)">Copy</button>
|
|
600
|
+
</div>
|
|
601
|
+
</div>
|
|
602
|
+
<div class="component-card" data-name="2048 game">
|
|
603
|
+
<h3 class="component-name">2048 <span class="game-badge">NEW</span></h3>
|
|
604
|
+
<p class="component-description">Tile-merging puzzle with undo & best score</p>
|
|
605
|
+
<div class="component-command">
|
|
606
|
+
create-template create -c game-2048 -n my-2048
|
|
607
|
+
<button class="copy-btn" onclick="copyCommand(this)">Copy</button>
|
|
608
|
+
</div>
|
|
609
|
+
</div>
|
|
610
|
+
<div class="component-card" data-name="whack-a-mole game arcade">
|
|
611
|
+
<h3 class="component-name">Whack-a-Mole <span class="game-badge">NEW</span></h3>
|
|
612
|
+
<p class="component-description">Arcade game with combos & difficulty levels</p>
|
|
613
|
+
<div class="component-command">
|
|
614
|
+
create-template create -c whack-a-mole -n my-whack
|
|
615
|
+
<button class="copy-btn" onclick="copyCommand(this)">Copy</button>
|
|
616
|
+
</div>
|
|
617
|
+
</div>
|
|
618
|
+
<div class="component-card" data-name="simon-says game memory">
|
|
619
|
+
<h3 class="component-name">Simon Says <span class="game-badge">NEW</span></h3>
|
|
620
|
+
<p class="component-description">Memory pattern game with sound effects</p>
|
|
621
|
+
<div class="component-command">
|
|
622
|
+
create-template create -c simon-says -n my-simon
|
|
623
|
+
<button class="copy-btn" onclick="copyCommand(this)">Copy</button>
|
|
624
|
+
</div>
|
|
625
|
+
</div>
|
|
626
|
+
<div class="component-card" data-name="rock-paper-scissors game">
|
|
627
|
+
<h3 class="component-name">Rock-Paper-Scissors <span class="game-badge">NEW</span></h3>
|
|
628
|
+
<p class="component-description">Classic hand game vs AI</p>
|
|
629
|
+
<div class="component-command">
|
|
630
|
+
create-template create -c rock-paper-scissors -n my-rps
|
|
631
|
+
<button class="copy-btn" onclick="copyCommand(this)">Copy</button>
|
|
632
|
+
</div>
|
|
633
|
+
</div>
|
|
634
|
+
<div class="component-card" data-name="breakout game arcade brick">
|
|
635
|
+
<h3 class="component-name">Breakout <span class="game-badge">NEW</span></h3>
|
|
636
|
+
<p class="component-description">Brick breaker with lives & level progression</p>
|
|
637
|
+
<div class="component-command">
|
|
638
|
+
create-template create -c breakout -n my-breakout
|
|
639
|
+
<button class="copy-btn" onclick="copyCommand(this)">Copy</button>
|
|
640
|
+
</div>
|
|
641
|
+
</div>
|
|
642
|
+
<div class="component-card" data-name="tetris game puzzle">
|
|
643
|
+
<h3 class="component-name">Tetris <span class="game-badge">NEW</span></h3>
|
|
644
|
+
<p class="component-description">Full Tetris with ghost preview & next piece</p>
|
|
645
|
+
<div class="component-command">
|
|
646
|
+
create-template create -c tetris -n my-tetris
|
|
647
|
+
<button class="copy-btn" onclick="copyCommand(this)">Copy</button>
|
|
648
|
+
</div>
|
|
649
|
+
</div>
|
|
650
|
+
<div class="component-card" data-name="flappy-bird game arcade">
|
|
651
|
+
<h3 class="component-name">Flappy Bird <span class="game-badge">NEW</span></h3>
|
|
652
|
+
<p class="component-description">Obstacle avoidance with realistic physics</p>
|
|
653
|
+
<div class="component-command">
|
|
654
|
+
create-template create -c flappy-bird -n my-flappy
|
|
655
|
+
<button class="copy-btn" onclick="copyCommand(this)">Copy</button>
|
|
656
|
+
</div>
|
|
657
|
+
</div>
|
|
658
|
+
<div class="component-card" data-name="connect-four game strategy">
|
|
659
|
+
<h3 class="component-name">Connect Four <span class="game-badge">NEW</span></h3>
|
|
660
|
+
<p class="component-description">4-in-a-row with AI (3 difficulty levels)</p>
|
|
661
|
+
<div class="component-command">
|
|
662
|
+
create-template create -c connect-four -n my-connect4
|
|
663
|
+
<button class="copy-btn" onclick="copyCommand(this)">Copy</button>
|
|
664
|
+
</div>
|
|
665
|
+
</div>
|
|
666
|
+
<div class="component-card" data-name="blackjack game card casino">
|
|
667
|
+
<h3 class="component-name">Blackjack <span class="game-badge">NEW</span></h3>
|
|
668
|
+
<p class="component-description">21 card game with betting & dealer AI</p>
|
|
669
|
+
<div class="component-command">
|
|
670
|
+
create-template create -c blackjack -n my-blackjack
|
|
671
|
+
<button class="copy-btn" onclick="copyCommand(this)">Copy</button>
|
|
672
|
+
</div>
|
|
673
|
+
</div>
|
|
674
|
+
<div class="component-card" data-name="slot-machine game casino">
|
|
675
|
+
<h3 class="component-name">Slot Machine <span class="game-badge">NEW</span></h3>
|
|
676
|
+
<p class="component-description">3-reel slots with jackpot & confetti</p>
|
|
677
|
+
<div class="component-command">
|
|
678
|
+
create-template create -c slot-machine -n my-slots
|
|
679
|
+
<button class="copy-btn" onclick="copyCommand(this)">Copy</button>
|
|
680
|
+
</div>
|
|
681
|
+
</div>
|
|
682
|
+
<div class="component-card" data-name="dice-game game strategy">
|
|
683
|
+
<h3 class="component-name">Dice Game <span class="game-badge">NEW</span></h3>
|
|
684
|
+
<p class="component-description">Race to 100 with strategic AI</p>
|
|
685
|
+
<div class="component-command">
|
|
686
|
+
create-template create -c dice-game -n my-dice
|
|
687
|
+
<button class="copy-btn" onclick="copyCommand(this)">Copy</button>
|
|
688
|
+
</div>
|
|
689
|
+
</div>
|
|
690
|
+
<div class="component-card" data-name="pong game arcade classic">
|
|
691
|
+
<h3 class="component-name">Pong <span class="game-badge">NEW</span></h3>
|
|
692
|
+
<p class="component-description">Classic paddle game with AI (4 difficulties)</p>
|
|
693
|
+
<div class="component-command">
|
|
694
|
+
create-template create -c pong -n my-pong
|
|
695
|
+
<button class="copy-btn" onclick="copyCommand(this)">Copy</button>
|
|
696
|
+
</div>
|
|
697
|
+
</div>
|
|
698
|
+
</div>
|
|
699
|
+
</div>
|
|
700
|
+
|
|
701
|
+
<footer>
|
|
702
|
+
<p>Made with ❤️ by <a href="https://github.com/benshabbat" target="_blank">DavidChen Benshabbat</a></p>
|
|
703
|
+
<p>
|
|
704
|
+
<a href="https://www.npmjs.com/package/create-template-html-css" target="_blank">📦 npm Package</a> |
|
|
705
|
+
<a href="https://github.com/benshabbat/create-template-html-css" target="_blank">🐙 GitHub Repo</a>
|
|
706
|
+
</p>
|
|
707
|
+
<p style="margin-top: 20px; opacity: 0.8;">v2.0.0 - 46 Templates Available</p>
|
|
708
|
+
</footer>
|
|
709
|
+
</div>
|
|
710
|
+
|
|
711
|
+
<script>
|
|
712
|
+
// Search functionality
|
|
713
|
+
const searchInput = document.getElementById('searchInput');
|
|
714
|
+
searchInput.addEventListener('input', (e) => {
|
|
715
|
+
const searchTerm = e.target.value.toLowerCase();
|
|
716
|
+
const cards = document.querySelectorAll('.component-card');
|
|
717
|
+
const categories = document.querySelectorAll('.category');
|
|
718
|
+
|
|
719
|
+
cards.forEach(card => {
|
|
720
|
+
const name = card.getAttribute('data-name').toLowerCase();
|
|
721
|
+
const description = card.querySelector('.component-description').textContent.toLowerCase();
|
|
722
|
+
const matches = name.includes(searchTerm) || description.includes(searchTerm);
|
|
723
|
+
card.style.display = matches ? 'block' : 'none';
|
|
724
|
+
});
|
|
725
|
+
|
|
726
|
+
// Hide empty categories
|
|
727
|
+
categories.forEach(category => {
|
|
728
|
+
const visibleCards = category.querySelectorAll('.component-card[style="display: block;"], .component-card:not([style*="display: none"])');
|
|
729
|
+
category.style.display = visibleCards.length > 0 ? 'block' : 'none';
|
|
730
|
+
});
|
|
731
|
+
});
|
|
732
|
+
|
|
733
|
+
// Copy command functionality
|
|
734
|
+
function copyCommand(btn) {
|
|
735
|
+
const command = btn.parentElement.textContent.replace('Copy', '').trim();
|
|
736
|
+
navigator.clipboard.writeText(command).then(() => {
|
|
737
|
+
btn.textContent = '✓ Copied';
|
|
738
|
+
btn.classList.add('copied');
|
|
739
|
+
setTimeout(() => {
|
|
740
|
+
btn.textContent = 'Copy';
|
|
741
|
+
btn.classList.remove('copied');
|
|
742
|
+
}, 2000);
|
|
743
|
+
});
|
|
744
|
+
}
|
|
745
|
+
|
|
746
|
+
// Add hover animations
|
|
747
|
+
document.querySelectorAll('.component-card').forEach(card => {
|
|
748
|
+
card.addEventListener('mouseenter', () => {
|
|
749
|
+
card.style.background = 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)';
|
|
750
|
+
card.querySelector('.component-name').style.color = 'white';
|
|
751
|
+
card.querySelector('.component-description').style.color = 'rgba(255,255,255,0.9)';
|
|
752
|
+
});
|
|
753
|
+
card.addEventListener('mouseleave', () => {
|
|
754
|
+
card.style.background = 'linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%)';
|
|
755
|
+
card.querySelector('.component-name').style.color = '#333';
|
|
756
|
+
card.querySelector('.component-description').style.color = '#666';
|
|
757
|
+
});
|
|
745
758
|
});
|
|
746
|
-
}
|
|
747
|
-
|
|
748
|
-
function copy(btn) {
|
|
749
|
-
const text = btn.parentElement.textContent.trim().split("\n")[0];
|
|
750
|
-
navigator.clipboard.writeText(text);
|
|
751
|
-
btn.textContent = "✓ Copied!";
|
|
752
|
-
setTimeout(() => (btn.textContent = "Copy"), 2000);
|
|
753
|
-
}
|
|
754
|
-
|
|
755
|
-
function filter() {
|
|
756
|
-
const search = searchInput.value.toLowerCase();
|
|
757
|
-
const cat = categoryFilter.value;
|
|
758
|
-
render(
|
|
759
|
-
components.filter(
|
|
760
|
-
(c) =>
|
|
761
|
-
(c.name.toLowerCase().includes(search) || c.desc.toLowerCase().includes(search) || c.feat.some((f) => f.toLowerCase().includes(search))) &&
|
|
762
|
-
(!cat || c.cat === cat),
|
|
763
|
-
),
|
|
764
|
-
);
|
|
765
|
-
}
|
|
766
|
-
|
|
767
|
-
searchInput.addEventListener("input", filter);
|
|
768
|
-
categoryFilter.addEventListener("change", filter);
|
|
769
|
-
render(components);
|
|
770
|
-
renderColorSchemes();
|
|
771
759
|
</script>
|
|
772
|
-
|
|
760
|
+
</body>
|
|
773
761
|
</html>
|