create-template-html-css 2.0.0 → 2.0.2
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 +22 -0
- package/COMPONENTS-GALLERY.html +761 -0
- package/bin/cli.js +34 -0
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -5,6 +5,28 @@ All notable changes to this project will be documented in this file.
|
|
|
5
5
|
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
|
|
6
6
|
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
|
|
7
7
|
|
|
8
|
+
## [2.0.2] - 2026-02-05
|
|
9
|
+
|
|
10
|
+
### Fixed
|
|
11
|
+
- Added all 16 game templates to CLI interactive prompts (create and insert commands)
|
|
12
|
+
- Users can now select game templates from the interactive menu
|
|
13
|
+
- Previously only accessible via command flags
|
|
14
|
+
|
|
15
|
+
### Changed
|
|
16
|
+
- CLI now shows all 46 templates in interactive mode with 🎮 emoji for games
|
|
17
|
+
|
|
18
|
+
## [2.0.1] - 2026-02-05
|
|
19
|
+
|
|
20
|
+
### Added
|
|
21
|
+
- Interactive component gallery (COMPONENTS-GALLERY.html)
|
|
22
|
+
- Search functionality in gallery
|
|
23
|
+
- Copy-to-clipboard buttons for all commands
|
|
24
|
+
- Modern responsive design with animations
|
|
25
|
+
- Author credit updated
|
|
26
|
+
|
|
27
|
+
### Changed
|
|
28
|
+
- Updated .npmignore to exclude demo-games and .tgz files
|
|
29
|
+
|
|
8
30
|
## [2.0.0] - 2026-02-05
|
|
9
31
|
|
|
10
32
|
### Added
|
|
@@ -0,0 +1,761 @@
|
|
|
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>Create Template HTML/CSS - Component Gallery</title>
|
|
7
|
+
<style>
|
|
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
|
+
}
|
|
250
|
+
</style>
|
|
251
|
+
</head>
|
|
252
|
+
<body>
|
|
253
|
+
<div class="container">
|
|
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>
|
|
270
|
+
</div>
|
|
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>
|
|
283
|
+
</div>
|
|
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>
|
|
357
|
+
</div>
|
|
358
|
+
</div>
|
|
359
|
+
|
|
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>
|
|
366
|
+
</div>
|
|
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>
|
|
384
|
+
</div>
|
|
385
|
+
</div>
|
|
386
|
+
|
|
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>
|
|
403
|
+
</div>
|
|
404
|
+
</div>
|
|
405
|
+
|
|
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>
|
|
446
|
+
</div>
|
|
447
|
+
</div>
|
|
448
|
+
|
|
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>
|
|
483
|
+
|
|
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>
|
|
490
|
+
</div>
|
|
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>
|
|
516
|
+
</div>
|
|
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>
|
|
525
|
+
</div>
|
|
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>
|
|
559
|
+
</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>
|
|
568
|
+
</div>
|
|
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
|
+
});
|
|
758
|
+
});
|
|
759
|
+
</script>
|
|
760
|
+
</body>
|
|
761
|
+
</html>
|
package/bin/cli.js
CHANGED
|
@@ -179,6 +179,23 @@ program
|
|
|
179
179
|
{ name: "Counter (Click Handlers)", value: "counter" },
|
|
180
180
|
{ name: "Accordion (Toggle Content)", value: "accordion" },
|
|
181
181
|
{ name: "Tabs (Switch Sections)", value: "tabs" },
|
|
182
|
+
new inquirer.Separator(chalk.gray("─ Interactive Games")),
|
|
183
|
+
{ name: "🎮 Tic-Tac-Toe", value: "tic-tac-toe" },
|
|
184
|
+
{ name: "🎮 Memory Game", value: "memory-game" },
|
|
185
|
+
{ name: "🎮 Snake Game", value: "snake-game" },
|
|
186
|
+
{ name: "🎮 Guess Number", value: "guess-number" },
|
|
187
|
+
{ name: "🎮 2048", value: "game-2048" },
|
|
188
|
+
{ name: "🎮 Whack-a-Mole", value: "whack-a-mole" },
|
|
189
|
+
{ name: "🎮 Simon Says", value: "simon-says" },
|
|
190
|
+
{ name: "🎮 Rock-Paper-Scissors", value: "rock-paper-scissors" },
|
|
191
|
+
{ name: "🎮 Breakout", value: "breakout" },
|
|
192
|
+
{ name: "🎮 Tetris", value: "tetris" },
|
|
193
|
+
{ name: "🎮 Flappy Bird", value: "flappy-bird" },
|
|
194
|
+
{ name: "🎮 Connect Four", value: "connect-four" },
|
|
195
|
+
{ name: "🎮 Blackjack", value: "blackjack" },
|
|
196
|
+
{ name: "🎮 Slot Machine", value: "slot-machine" },
|
|
197
|
+
{ name: "🎮 Dice Game", value: "dice-game" },
|
|
198
|
+
{ name: "🎮 Pong", value: "pong" },
|
|
182
199
|
],
|
|
183
200
|
},
|
|
184
201
|
{
|
|
@@ -555,6 +572,23 @@ program
|
|
|
555
572
|
{ name: "Counter", value: "counter" },
|
|
556
573
|
{ name: "Accordion", value: "accordion" },
|
|
557
574
|
{ name: "Tabs", value: "tabs" },
|
|
575
|
+
new inquirer.Separator(chalk.gray("─ Interactive Games")),
|
|
576
|
+
{ name: "🎮 Tic-Tac-Toe", value: "tic-tac-toe" },
|
|
577
|
+
{ name: "🎮 Memory Game", value: "memory-game" },
|
|
578
|
+
{ name: "🎮 Snake Game", value: "snake-game" },
|
|
579
|
+
{ name: "🎮 Guess Number", value: "guess-number" },
|
|
580
|
+
{ name: "🎮 2048", value: "game-2048" },
|
|
581
|
+
{ name: "🎮 Whack-a-Mole", value: "whack-a-mole" },
|
|
582
|
+
{ name: "🎮 Simon Says", value: "simon-says" },
|
|
583
|
+
{ name: "🎮 Rock-Paper-Scissors", value: "rock-paper-scissors" },
|
|
584
|
+
{ name: "🎮 Breakout", value: "breakout" },
|
|
585
|
+
{ name: "🎮 Tetris", value: "tetris" },
|
|
586
|
+
{ name: "🎮 Flappy Bird", value: "flappy-bird" },
|
|
587
|
+
{ name: "🎮 Connect Four", value: "connect-four" },
|
|
588
|
+
{ name: "🎮 Blackjack", value: "blackjack" },
|
|
589
|
+
{ name: "🎮 Slot Machine", value: "slot-machine" },
|
|
590
|
+
{ name: "🎮 Dice Game", value: "dice-game" },
|
|
591
|
+
{ name: "🎮 Pong", value: "pong" },
|
|
558
592
|
],
|
|
559
593
|
},
|
|
560
594
|
{
|