create-template-html-css 1.5.0 → 1.6.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 +76 -0
- package/INSERT-QUICK-REFERENCE.md +147 -0
- package/README.md +31 -1
- package/RELEASE-NOTES-v1.6.1.md +129 -0
- package/RELEASE-STATUS.md +203 -0
- package/RELEASE-v1.6.2.md +169 -0
- package/SECURITY-AUDIT.md +157 -0
- package/TEST-REPORT.md +110 -0
- package/VERIFICATION-REPORT.md +162 -0
- package/bin/cli.js +416 -260
- package/demo/css/accordion-component.css +135 -0
- package/demo/css/button-component.css +110 -0
- package/demo/css/card-component.css +381 -0
- package/demo/index.html +169 -0
- package/demo/js/accordion-component.js +31 -0
- package/demo/js/button-component.js +17 -0
- package/demo/js/card-component.js +124 -0
- package/package.json +6 -3
- package/src/generator.js +165 -74
- package/src/index.js +1 -1
- package/src/inserter.js +352 -146
- package/v1.6.2-IMPROVEMENTS.md +185 -0
- package/CONTRIBUTING.md +0 -62
- package/INSERT-DEMO.md +0 -171
- package/QUICKSTART.md +0 -195
- package/SECURITY.md +0 -95
- package/SHOWCASE.html +0 -342
- package/test-insert.html +0 -54
package/SHOWCASE.html
DELETED
|
@@ -1,342 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="he" dir="rtl">
|
|
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 - Showcase</title>
|
|
7
|
-
<style>
|
|
8
|
-
* {
|
|
9
|
-
margin: 0;
|
|
10
|
-
padding: 0;
|
|
11
|
-
box-sizing: border-box;
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
body {
|
|
15
|
-
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
16
|
-
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
17
|
-
min-height: 100vh;
|
|
18
|
-
padding: 40px 20px;
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
.container {
|
|
22
|
-
max-width: 1200px;
|
|
23
|
-
margin: 0 auto;
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
.header {
|
|
27
|
-
text-align: center;
|
|
28
|
-
color: white;
|
|
29
|
-
margin-bottom: 60px;
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
.header h1 {
|
|
33
|
-
font-size: 3rem;
|
|
34
|
-
margin-bottom: 20px;
|
|
35
|
-
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
.header p {
|
|
39
|
-
font-size: 1.3rem;
|
|
40
|
-
opacity: 0.9;
|
|
41
|
-
margin-bottom: 30px;
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
.badge {
|
|
45
|
-
display: inline-block;
|
|
46
|
-
background: rgba(255, 255, 255, 0.2);
|
|
47
|
-
padding: 8px 20px;
|
|
48
|
-
border-radius: 50px;
|
|
49
|
-
backdrop-filter: blur(10px);
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
.templates-grid {
|
|
53
|
-
display: grid;
|
|
54
|
-
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
55
|
-
gap: 30px;
|
|
56
|
-
margin-bottom: 60px;
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
.template-card {
|
|
60
|
-
background: white;
|
|
61
|
-
border-radius: 15px;
|
|
62
|
-
overflow: hidden;
|
|
63
|
-
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
|
|
64
|
-
transition: all 0.3s ease;
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
.template-card:hover {
|
|
68
|
-
transform: translateY(-10px);
|
|
69
|
-
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
.card-header {
|
|
73
|
-
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
74
|
-
color: white;
|
|
75
|
-
padding: 25px;
|
|
76
|
-
text-align: center;
|
|
77
|
-
}
|
|
78
|
-
|
|
79
|
-
.card-icon {
|
|
80
|
-
font-size: 3rem;
|
|
81
|
-
margin-bottom: 10px;
|
|
82
|
-
}
|
|
83
|
-
|
|
84
|
-
.card-title {
|
|
85
|
-
font-size: 1.8rem;
|
|
86
|
-
margin: 0;
|
|
87
|
-
}
|
|
88
|
-
|
|
89
|
-
.card-body {
|
|
90
|
-
padding: 25px;
|
|
91
|
-
}
|
|
92
|
-
|
|
93
|
-
.card-description {
|
|
94
|
-
color: #666;
|
|
95
|
-
line-height: 1.6;
|
|
96
|
-
margin-bottom: 20px;
|
|
97
|
-
}
|
|
98
|
-
|
|
99
|
-
.features {
|
|
100
|
-
list-style: none;
|
|
101
|
-
margin-bottom: 20px;
|
|
102
|
-
}
|
|
103
|
-
|
|
104
|
-
.features li {
|
|
105
|
-
color: #555;
|
|
106
|
-
padding: 8px 0;
|
|
107
|
-
border-bottom: 1px solid #eee;
|
|
108
|
-
}
|
|
109
|
-
|
|
110
|
-
.features li:last-child {
|
|
111
|
-
border-bottom: none;
|
|
112
|
-
}
|
|
113
|
-
|
|
114
|
-
.features li::before {
|
|
115
|
-
content: '✓';
|
|
116
|
-
color: #28a745;
|
|
117
|
-
font-weight: bold;
|
|
118
|
-
margin-left: 10px;
|
|
119
|
-
}
|
|
120
|
-
|
|
121
|
-
.installation {
|
|
122
|
-
background: white;
|
|
123
|
-
border-radius: 15px;
|
|
124
|
-
padding: 40px;
|
|
125
|
-
margin-bottom: 40px;
|
|
126
|
-
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
|
|
127
|
-
}
|
|
128
|
-
|
|
129
|
-
.installation h2 {
|
|
130
|
-
color: #333;
|
|
131
|
-
margin-bottom: 20px;
|
|
132
|
-
}
|
|
133
|
-
|
|
134
|
-
.code-block {
|
|
135
|
-
background: #2d3748;
|
|
136
|
-
color: #63b3ed;
|
|
137
|
-
padding: 20px;
|
|
138
|
-
border-radius: 10px;
|
|
139
|
-
font-family: 'Courier New', monospace;
|
|
140
|
-
overflow-x: auto;
|
|
141
|
-
margin: 15px 0;
|
|
142
|
-
}
|
|
143
|
-
|
|
144
|
-
.footer-section {
|
|
145
|
-
text-align: center;
|
|
146
|
-
color: white;
|
|
147
|
-
padding: 40px 0;
|
|
148
|
-
}
|
|
149
|
-
|
|
150
|
-
.footer-section a {
|
|
151
|
-
color: white;
|
|
152
|
-
text-decoration: none;
|
|
153
|
-
margin: 0 15px;
|
|
154
|
-
opacity: 0.8;
|
|
155
|
-
transition: opacity 0.3s ease;
|
|
156
|
-
}
|
|
157
|
-
|
|
158
|
-
.footer-section a:hover {
|
|
159
|
-
opacity: 1;
|
|
160
|
-
}
|
|
161
|
-
|
|
162
|
-
@media (max-width: 768px) {
|
|
163
|
-
.header h1 {
|
|
164
|
-
font-size: 2rem;
|
|
165
|
-
}
|
|
166
|
-
|
|
167
|
-
.templates-grid {
|
|
168
|
-
grid-template-columns: 1fr;
|
|
169
|
-
}
|
|
170
|
-
}
|
|
171
|
-
</style>
|
|
172
|
-
</head>
|
|
173
|
-
<body>
|
|
174
|
-
<div class="container">
|
|
175
|
-
<div class="header">
|
|
176
|
-
<div class="badge">🎨 Open Source</div>
|
|
177
|
-
<h1>Create Template HTML/CSS</h1>
|
|
178
|
-
<p>צור רכיבי UI מעוצבים תוך שניות עם CLI חזק</p>
|
|
179
|
-
</div>
|
|
180
|
-
|
|
181
|
-
<div class="installation">
|
|
182
|
-
<h2>🚀 התקנה והתחלה מהירה</h2>
|
|
183
|
-
<div class="code-block">
|
|
184
|
-
# Clone the repository<br>
|
|
185
|
-
git clone https://github.com/benshabbat/create-template-html-css.git<br>
|
|
186
|
-
cd create-template-html-css<br>
|
|
187
|
-
<br>
|
|
188
|
-
# Install dependencies<br>
|
|
189
|
-
npm install<br>
|
|
190
|
-
<br>
|
|
191
|
-
# Create a template<br>
|
|
192
|
-
npm run create
|
|
193
|
-
</div>
|
|
194
|
-
</div>
|
|
195
|
-
|
|
196
|
-
<h2 style="color: white; text-align: center; margin-bottom: 40px; font-size: 2.5rem;">
|
|
197
|
-
7 טמפלייטים מעוצבים ומוכנים לשימוש
|
|
198
|
-
</h2>
|
|
199
|
-
|
|
200
|
-
<div class="templates-grid">
|
|
201
|
-
<div class="template-card">
|
|
202
|
-
<div class="card-header">
|
|
203
|
-
<div class="card-icon">🔘</div>
|
|
204
|
-
<h3 class="card-title">Button</h3>
|
|
205
|
-
</div>
|
|
206
|
-
<div class="card-body">
|
|
207
|
-
<p class="card-description">
|
|
208
|
-
כפתורים מעוצבים עם מגוון סגנונות ואפקטים
|
|
209
|
-
</p>
|
|
210
|
-
<ul class="features">
|
|
211
|
-
<li>6 סוגי כפתורים שונים</li>
|
|
212
|
-
<li>אפקטי Hover מתקדמים</li>
|
|
213
|
-
<li>גרדיאנטים צבעוניים</li>
|
|
214
|
-
<li>אנימציות חלקות</li>
|
|
215
|
-
</ul>
|
|
216
|
-
</div>
|
|
217
|
-
</div>
|
|
218
|
-
|
|
219
|
-
<div class="template-card">
|
|
220
|
-
<div class="card-header">
|
|
221
|
-
<div class="card-icon">🃏</div>
|
|
222
|
-
<h3 class="card-title">Card</h3>
|
|
223
|
-
</div>
|
|
224
|
-
<div class="card-body">
|
|
225
|
-
<p class="card-description">
|
|
226
|
-
כרטיסים אלגנטיים עם תמונה, תוכן וכפתור פעולה
|
|
227
|
-
</p>
|
|
228
|
-
<ul class="features">
|
|
229
|
-
<li>Grid Responsive</li>
|
|
230
|
-
<li>אפקט הגדלת תמונה</li>
|
|
231
|
-
<li>צללים מתקדמים</li>
|
|
232
|
-
<li>עיצוב מודרני</li>
|
|
233
|
-
</ul>
|
|
234
|
-
</div>
|
|
235
|
-
</div>
|
|
236
|
-
|
|
237
|
-
<div class="template-card">
|
|
238
|
-
<div class="card-header">
|
|
239
|
-
<div class="card-icon">📝</div>
|
|
240
|
-
<h3 class="card-title">Form</h3>
|
|
241
|
-
</div>
|
|
242
|
-
<div class="card-body">
|
|
243
|
-
<p class="card-description">
|
|
244
|
-
טופס יצירת קשר מלא עם ולידציה בזמן אמת
|
|
245
|
-
</p>
|
|
246
|
-
<ul class="features">
|
|
247
|
-
<li>מגוון שדות קלט</li>
|
|
248
|
-
<li>ולידציה אוטומטית</li>
|
|
249
|
-
<li>אפקטי Focus מתקדמים</li>
|
|
250
|
-
<li>עיצוב נקי ומודרני</li>
|
|
251
|
-
</ul>
|
|
252
|
-
</div>
|
|
253
|
-
</div>
|
|
254
|
-
|
|
255
|
-
<div class="template-card">
|
|
256
|
-
<div class="card-header">
|
|
257
|
-
<div class="card-icon">🧭</div>
|
|
258
|
-
<h3 class="card-title">Navigation</h3>
|
|
259
|
-
</div>
|
|
260
|
-
<div class="card-body">
|
|
261
|
-
<p class="card-description">
|
|
262
|
-
תפריט ניווט responsive עם תמיכה מלאה במובייל
|
|
263
|
-
</p>
|
|
264
|
-
<ul class="features">
|
|
265
|
-
<li>Fixed למעלה</li>
|
|
266
|
-
<li>תפריט המבורגר</li>
|
|
267
|
-
<li>Smooth Scroll</li>
|
|
268
|
-
<li>הדגשת דף פעיל</li>
|
|
269
|
-
</ul>
|
|
270
|
-
</div>
|
|
271
|
-
</div>
|
|
272
|
-
|
|
273
|
-
<div class="template-card">
|
|
274
|
-
<div class="card-header">
|
|
275
|
-
<div class="card-icon">💬</div>
|
|
276
|
-
<h3 class="card-title">Modal</h3>
|
|
277
|
-
</div>
|
|
278
|
-
<div class="card-body">
|
|
279
|
-
<p class="card-description">
|
|
280
|
-
חלונות מודליים מעוצבים לכל מטרה
|
|
281
|
-
</p>
|
|
282
|
-
<ul class="features">
|
|
283
|
-
<li>3 סוגי מודלים</li>
|
|
284
|
-
<li>Backdrop Blur</li>
|
|
285
|
-
<li>אנימציות פתיחה</li>
|
|
286
|
-
<li>סגירה ב-ESC</li>
|
|
287
|
-
</ul>
|
|
288
|
-
</div>
|
|
289
|
-
</div>
|
|
290
|
-
|
|
291
|
-
<div class="template-card">
|
|
292
|
-
<div class="card-header">
|
|
293
|
-
<div class="card-icon">📄</div>
|
|
294
|
-
<h3 class="card-title">Footer</h3>
|
|
295
|
-
</div>
|
|
296
|
-
<div class="card-body">
|
|
297
|
-
<p class="card-description">
|
|
298
|
-
Footer מקצועי עם עמודות ורשתות חברתיות
|
|
299
|
-
</p>
|
|
300
|
-
<ul class="features">
|
|
301
|
-
<li>Grid Responsive</li>
|
|
302
|
-
<li>קישורים מאורגנים</li>
|
|
303
|
-
<li>פרטי קשר</li>
|
|
304
|
-
<li>אנימציות Scroll</li>
|
|
305
|
-
</ul>
|
|
306
|
-
</div>
|
|
307
|
-
</div>
|
|
308
|
-
|
|
309
|
-
<div class="template-card">
|
|
310
|
-
<div class="card-header">
|
|
311
|
-
<div class="card-icon">🎯</div>
|
|
312
|
-
<h3 class="card-title">Hero</h3>
|
|
313
|
-
</div>
|
|
314
|
-
<div class="card-body">
|
|
315
|
-
<p class="card-description">
|
|
316
|
-
3 סוגי Hero sections מרשימים לדף הבית
|
|
317
|
-
</p>
|
|
318
|
-
<ul class="features">
|
|
319
|
-
<li>גרדיאנט/תמונה רקע</li>
|
|
320
|
-
<li>אנימציות טקסט</li>
|
|
321
|
-
<li>אפקט Parallax</li>
|
|
322
|
-
<li>CTA Buttons</li>
|
|
323
|
-
</ul>
|
|
324
|
-
</div>
|
|
325
|
-
</div>
|
|
326
|
-
</div>
|
|
327
|
-
|
|
328
|
-
<div class="footer-section">
|
|
329
|
-
<h3 style="margin-bottom: 20px;">צור קשר ותרום</h3>
|
|
330
|
-
<div>
|
|
331
|
-
<a href="https://github.com/benshabbat/create-template-html-css">📦 GitHub</a>
|
|
332
|
-
<a href="https://github.com/benshabbat/create-template-html-css/issues">🐛 Issues</a>
|
|
333
|
-
<a href="CONTRIBUTING.md">🤝 Contributing</a>
|
|
334
|
-
<a href="LICENSE">📜 License</a>
|
|
335
|
-
</div>
|
|
336
|
-
<p style="margin-top: 30px; opacity: 0.8;">
|
|
337
|
-
Made with ❤️ by Ben Shabbat
|
|
338
|
-
</p>
|
|
339
|
-
</div>
|
|
340
|
-
</div>
|
|
341
|
-
</body>
|
|
342
|
-
</html>
|
package/test-insert.html
DELETED
|
@@ -1,54 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="en">
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="UTF-8">
|
|
5
|
-
<title>Test Page</title>
|
|
6
|
-
<link rel="stylesheet" href="button-component.css">
|
|
7
|
-
</head>
|
|
8
|
-
<body>
|
|
9
|
-
<h1>Welcome</h1>
|
|
10
|
-
<p>Test content</p>
|
|
11
|
-
<!-- BUTTON Component -->
|
|
12
|
-
<div class="container">
|
|
13
|
-
<h1>Button Component</h1>
|
|
14
|
-
|
|
15
|
-
<!-- Primary Button -->
|
|
16
|
-
<button class="btn btn-primary">Click Here</button>
|
|
17
|
-
|
|
18
|
-
<!-- Secondary Button -->
|
|
19
|
-
<button class="btn btn-secondary">Secondary</button>
|
|
20
|
-
|
|
21
|
-
<!-- Success Button -->
|
|
22
|
-
<button class="btn btn-success">Success</button>
|
|
23
|
-
|
|
24
|
-
<!-- Danger Button -->
|
|
25
|
-
<button class="btn btn-danger">Delete</button>
|
|
26
|
-
|
|
27
|
-
<!-- Outlined Button -->
|
|
28
|
-
<button class="btn btn-outlined">Outlined</button>
|
|
29
|
-
|
|
30
|
-
<!-- Disabled Button -->
|
|
31
|
-
<button class="btn btn-primary" disabled>Disabled</button>
|
|
32
|
-
</div>
|
|
33
|
-
|
|
34
|
-
<script id="button-script">
|
|
35
|
-
// BUTTON Component Script
|
|
36
|
-
// Button click animations
|
|
37
|
-
document.querySelectorAll('.btn').forEach(button => {
|
|
38
|
-
button.addEventListener('click', function(e) {
|
|
39
|
-
if (!this.disabled) {
|
|
40
|
-
console.log('Button clicked:', this.textContent);
|
|
41
|
-
|
|
42
|
-
// Ripple effect
|
|
43
|
-
const ripple = document.createElement('span');
|
|
44
|
-
ripple.classList.add('ripple');
|
|
45
|
-
this.appendChild(ripple);
|
|
46
|
-
|
|
47
|
-
setTimeout(() => ripple.remove(), 600);
|
|
48
|
-
}
|
|
49
|
-
});
|
|
50
|
-
});
|
|
51
|
-
|
|
52
|
-
</script>
|
|
53
|
-
</body>
|
|
54
|
-
</html>
|