create-template-html-css 1.7.0 → 1.8.0
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 +102 -0
- package/COMPONENTS-GALLERY.html +660 -0
- package/PUBLISH-GUIDE.md +112 -0
- package/README.md +173 -1
- package/bin/cli.js +153 -5
- package/create-template-html-css-1.8.0.tgz +0 -0
- package/package.json +3 -2
- package/src/generator.js +204 -3
- package/src/inserter.js +7 -1
- package/templates/login/index.html +58 -0
- package/templates/login/script.js +83 -0
- package/templates/login/style.css +232 -0
- package/templates/navigation/index.html +51 -0
- package/templates/navigation/script.js +109 -3
- package/templates/navigation/style.css +269 -0
- package/templates/register/index.html +85 -0
- package/templates/register/script.js +205 -0
- package/templates/register/style.css +298 -0
- package/templates/skeleton/index.html +115 -0
- package/templates/skeleton/script.js +28 -0
- package/templates/skeleton/style.css +409 -0
- package/demo/css/accordion-component.css +0 -135
- package/demo/css/button-component.css +0 -110
- package/demo/css/card-component.css +0 -381
- package/demo/index.html +0 -169
- package/demo/js/accordion-component.js +0 -31
- package/demo/js/button-component.js +0 -17
- package/demo/js/card-component.js +0 -124
|
@@ -0,0 +1,298 @@
|
|
|
1
|
+
* {
|
|
2
|
+
margin: 0;
|
|
3
|
+
padding: 0;
|
|
4
|
+
box-sizing: border-box;
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
body {
|
|
8
|
+
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
9
|
+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
10
|
+
min-height: 100vh;
|
|
11
|
+
display: flex;
|
|
12
|
+
justify-content: center;
|
|
13
|
+
align-items: center;
|
|
14
|
+
padding: 20px;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
.container {
|
|
18
|
+
width: 100%;
|
|
19
|
+
max-width: 500px;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
.register-card {
|
|
23
|
+
background: white;
|
|
24
|
+
padding: 50px 40px;
|
|
25
|
+
border-radius: 20px;
|
|
26
|
+
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
|
|
27
|
+
animation: slideUp 0.5s ease-out;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
@keyframes slideUp {
|
|
31
|
+
from {
|
|
32
|
+
opacity: 0;
|
|
33
|
+
transform: translateY(30px);
|
|
34
|
+
}
|
|
35
|
+
to {
|
|
36
|
+
opacity: 1;
|
|
37
|
+
transform: translateY(0);
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
.register-title {
|
|
42
|
+
color: #333;
|
|
43
|
+
font-size: 2rem;
|
|
44
|
+
margin-bottom: 10px;
|
|
45
|
+
text-align: center;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.register-subtitle {
|
|
49
|
+
color: #666;
|
|
50
|
+
text-align: center;
|
|
51
|
+
margin-bottom: 35px;
|
|
52
|
+
font-size: 0.95rem;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
.register-form {
|
|
56
|
+
margin-bottom: 30px;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
.form-group {
|
|
60
|
+
margin-bottom: 20px;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
.form-group label {
|
|
64
|
+
display: block;
|
|
65
|
+
color: #333;
|
|
66
|
+
font-weight: 600;
|
|
67
|
+
margin-bottom: 8px;
|
|
68
|
+
font-size: 0.95rem;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
.form-group input[type="text"],
|
|
72
|
+
.form-group input[type="email"],
|
|
73
|
+
.form-group input[type="password"] {
|
|
74
|
+
width: 100%;
|
|
75
|
+
padding: 12px 15px;
|
|
76
|
+
border: 2px solid #e0e0e0;
|
|
77
|
+
border-radius: 10px;
|
|
78
|
+
font-size: 0.95rem;
|
|
79
|
+
transition: all 0.3s ease;
|
|
80
|
+
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
.form-group input[type="text"]:focus,
|
|
84
|
+
.form-group input[type="email"]:focus,
|
|
85
|
+
.form-group input[type="password"]:focus {
|
|
86
|
+
outline: none;
|
|
87
|
+
border-color: #667eea;
|
|
88
|
+
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
.password-requirements {
|
|
92
|
+
background: #f5f5f5;
|
|
93
|
+
padding: 12px 15px;
|
|
94
|
+
border-radius: 8px;
|
|
95
|
+
margin-top: 10px;
|
|
96
|
+
font-size: 0.85rem;
|
|
97
|
+
display: none;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
.password-requirements p {
|
|
101
|
+
color: #333;
|
|
102
|
+
font-weight: 600;
|
|
103
|
+
margin-bottom: 8px;
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
.password-requirements ul {
|
|
107
|
+
list-style: none;
|
|
108
|
+
padding-left: 0;
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
.password-requirements li {
|
|
112
|
+
color: #999;
|
|
113
|
+
margin-bottom: 5px;
|
|
114
|
+
padding-left: 20px;
|
|
115
|
+
position: relative;
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
.password-requirements li::before {
|
|
119
|
+
content: '✗';
|
|
120
|
+
position: absolute;
|
|
121
|
+
left: 0;
|
|
122
|
+
color: #ff6b6b;
|
|
123
|
+
font-weight: bold;
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
.password-requirements li.valid {
|
|
127
|
+
color: #51cf66;
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
.password-requirements li.valid::before {
|
|
131
|
+
content: '✓';
|
|
132
|
+
color: #51cf66;
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
.password-requirements.show {
|
|
136
|
+
display: block;
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
.password-match-message {
|
|
140
|
+
display: block;
|
|
141
|
+
font-size: 0.85rem;
|
|
142
|
+
margin-top: 5px;
|
|
143
|
+
min-height: 20px;
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
.password-match-message.error {
|
|
147
|
+
color: #ff6b6b;
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
.password-match-message.success {
|
|
151
|
+
color: #51cf66;
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
.checkbox-group {
|
|
155
|
+
display: flex;
|
|
156
|
+
align-items: flex-start;
|
|
157
|
+
gap: 10px;
|
|
158
|
+
margin-bottom: 15px;
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
.checkbox-group input[type="checkbox"] {
|
|
162
|
+
width: 18px;
|
|
163
|
+
height: 18px;
|
|
164
|
+
cursor: pointer;
|
|
165
|
+
accent-color: #667eea;
|
|
166
|
+
margin-top: 2px;
|
|
167
|
+
flex-shrink: 0;
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
.checkbox-group label {
|
|
171
|
+
margin: 0;
|
|
172
|
+
font-weight: 500;
|
|
173
|
+
cursor: pointer;
|
|
174
|
+
color: #666;
|
|
175
|
+
font-size: 0.9rem;
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
.terms-link {
|
|
179
|
+
color: #667eea;
|
|
180
|
+
text-decoration: none;
|
|
181
|
+
font-weight: 600;
|
|
182
|
+
transition: color 0.3s ease;
|
|
183
|
+
}
|
|
184
|
+
|
|
185
|
+
.terms-link:hover {
|
|
186
|
+
color: #764ba2;
|
|
187
|
+
text-decoration: underline;
|
|
188
|
+
}
|
|
189
|
+
|
|
190
|
+
.register-btn {
|
|
191
|
+
width: 100%;
|
|
192
|
+
padding: 14px;
|
|
193
|
+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
194
|
+
color: white;
|
|
195
|
+
border: none;
|
|
196
|
+
border-radius: 10px;
|
|
197
|
+
font-size: 1rem;
|
|
198
|
+
font-weight: 600;
|
|
199
|
+
cursor: pointer;
|
|
200
|
+
transition: all 0.3s ease;
|
|
201
|
+
box-shadow: 0 10px 25px rgba(102, 126, 234, 0.4);
|
|
202
|
+
}
|
|
203
|
+
|
|
204
|
+
.register-btn:hover:not(:disabled) {
|
|
205
|
+
transform: translateY(-2px);
|
|
206
|
+
box-shadow: 0 15px 35px rgba(102, 126, 234, 0.5);
|
|
207
|
+
}
|
|
208
|
+
|
|
209
|
+
.register-btn:active:not(:disabled) {
|
|
210
|
+
transform: translateY(0);
|
|
211
|
+
}
|
|
212
|
+
|
|
213
|
+
.register-btn:disabled {
|
|
214
|
+
opacity: 0.6;
|
|
215
|
+
cursor: not-allowed;
|
|
216
|
+
}
|
|
217
|
+
|
|
218
|
+
.form-divider {
|
|
219
|
+
display: flex;
|
|
220
|
+
align-items: center;
|
|
221
|
+
margin: 30px 0;
|
|
222
|
+
color: #999;
|
|
223
|
+
font-size: 0.85rem;
|
|
224
|
+
}
|
|
225
|
+
|
|
226
|
+
.form-divider::before,
|
|
227
|
+
.form-divider::after {
|
|
228
|
+
content: '';
|
|
229
|
+
flex: 1;
|
|
230
|
+
height: 1px;
|
|
231
|
+
background: #e0e0e0;
|
|
232
|
+
}
|
|
233
|
+
|
|
234
|
+
.form-divider span {
|
|
235
|
+
padding: 0 15px;
|
|
236
|
+
}
|
|
237
|
+
|
|
238
|
+
.social-buttons {
|
|
239
|
+
display: grid;
|
|
240
|
+
grid-template-columns: 1fr 1fr;
|
|
241
|
+
gap: 15px;
|
|
242
|
+
margin-bottom: 25px;
|
|
243
|
+
}
|
|
244
|
+
|
|
245
|
+
.social-btn {
|
|
246
|
+
padding: 12px;
|
|
247
|
+
border: 2px solid #e0e0e0;
|
|
248
|
+
background: white;
|
|
249
|
+
border-radius: 10px;
|
|
250
|
+
font-weight: 600;
|
|
251
|
+
cursor: pointer;
|
|
252
|
+
transition: all 0.3s ease;
|
|
253
|
+
display: flex;
|
|
254
|
+
align-items: center;
|
|
255
|
+
justify-content: center;
|
|
256
|
+
gap: 8px;
|
|
257
|
+
}
|
|
258
|
+
|
|
259
|
+
.social-btn:hover {
|
|
260
|
+
border-color: #667eea;
|
|
261
|
+
background: #f9f9f9;
|
|
262
|
+
}
|
|
263
|
+
|
|
264
|
+
.social-btn span {
|
|
265
|
+
color: #333;
|
|
266
|
+
font-size: 0.9rem;
|
|
267
|
+
}
|
|
268
|
+
|
|
269
|
+
.login-link {
|
|
270
|
+
text-align: center;
|
|
271
|
+
color: #666;
|
|
272
|
+
font-size: 0.95rem;
|
|
273
|
+
}
|
|
274
|
+
|
|
275
|
+
.login-link a {
|
|
276
|
+
color: #667eea;
|
|
277
|
+
text-decoration: none;
|
|
278
|
+
font-weight: 600;
|
|
279
|
+
transition: color 0.3s ease;
|
|
280
|
+
}
|
|
281
|
+
|
|
282
|
+
.login-link a:hover {
|
|
283
|
+
color: #764ba2;
|
|
284
|
+
}
|
|
285
|
+
|
|
286
|
+
@media (max-width: 480px) {
|
|
287
|
+
.register-card {
|
|
288
|
+
padding: 30px 25px;
|
|
289
|
+
}
|
|
290
|
+
|
|
291
|
+
.register-title {
|
|
292
|
+
font-size: 1.5rem;
|
|
293
|
+
}
|
|
294
|
+
|
|
295
|
+
.form-group {
|
|
296
|
+
margin-bottom: 15px;
|
|
297
|
+
}
|
|
298
|
+
}
|
|
@@ -0,0 +1,115 @@
|
|
|
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>Skeleton Loading</title>
|
|
7
|
+
<link rel="stylesheet" href="style.css" />
|
|
8
|
+
</head>
|
|
9
|
+
<body>
|
|
10
|
+
<div class="skeleton-container">
|
|
11
|
+
<!-- Card Skeleton -->
|
|
12
|
+
<div class="card-skeleton">
|
|
13
|
+
<div class="skeleton-image"></div>
|
|
14
|
+
<div class="skeleton-content">
|
|
15
|
+
<div class="skeleton-text skeleton-title"></div>
|
|
16
|
+
<div class="skeleton-text skeleton-description"></div>
|
|
17
|
+
<div class="skeleton-text skeleton-description short"></div>
|
|
18
|
+
<button class="skeleton-button"></button>
|
|
19
|
+
</div>
|
|
20
|
+
</div>
|
|
21
|
+
|
|
22
|
+
<!-- Article Skeleton -->
|
|
23
|
+
<div class="article-skeleton">
|
|
24
|
+
<div class="skeleton-avatar"></div>
|
|
25
|
+
<div class="article-content">
|
|
26
|
+
<div class="skeleton-text skeleton-author"></div>
|
|
27
|
+
<div class="skeleton-text skeleton-date"></div>
|
|
28
|
+
<div class="skeleton-text skeleton-headline"></div>
|
|
29
|
+
<div class="skeleton-text"></div>
|
|
30
|
+
<div class="skeleton-text"></div>
|
|
31
|
+
<div class="skeleton-text short"></div>
|
|
32
|
+
</div>
|
|
33
|
+
</div>
|
|
34
|
+
|
|
35
|
+
<!-- List Skeleton -->
|
|
36
|
+
<div class="list-skeleton">
|
|
37
|
+
<div class="list-item-skeleton">
|
|
38
|
+
<div class="skeleton-avatar small"></div>
|
|
39
|
+
<div class="list-item-content">
|
|
40
|
+
<div class="skeleton-text skeleton-name"></div>
|
|
41
|
+
<div class="skeleton-text skeleton-subtitle"></div>
|
|
42
|
+
</div>
|
|
43
|
+
</div>
|
|
44
|
+
<div class="list-item-skeleton">
|
|
45
|
+
<div class="skeleton-avatar small"></div>
|
|
46
|
+
<div class="list-item-content">
|
|
47
|
+
<div class="skeleton-text skeleton-name"></div>
|
|
48
|
+
<div class="skeleton-text skeleton-subtitle"></div>
|
|
49
|
+
</div>
|
|
50
|
+
</div>
|
|
51
|
+
<div class="list-item-skeleton">
|
|
52
|
+
<div class="skeleton-avatar small"></div>
|
|
53
|
+
<div class="list-item-content">
|
|
54
|
+
<div class="skeleton-text skeleton-name"></div>
|
|
55
|
+
<div class="skeleton-text skeleton-subtitle"></div>
|
|
56
|
+
</div>
|
|
57
|
+
</div>
|
|
58
|
+
</div>
|
|
59
|
+
|
|
60
|
+
<!-- Profile Skeleton -->
|
|
61
|
+
<div class="profile-skeleton">
|
|
62
|
+
<div class="skeleton-cover"></div>
|
|
63
|
+
<div class="profile-info">
|
|
64
|
+
<div class="skeleton-avatar large"></div>
|
|
65
|
+
<div class="skeleton-text skeleton-profile-name"></div>
|
|
66
|
+
<div class="skeleton-text skeleton-profile-bio"></div>
|
|
67
|
+
<div class="skeleton-button-group">
|
|
68
|
+
<button class="skeleton-button"></button>
|
|
69
|
+
<button class="skeleton-button"></button>
|
|
70
|
+
</div>
|
|
71
|
+
</div>
|
|
72
|
+
</div>
|
|
73
|
+
|
|
74
|
+
<!-- Grid Skeleton -->
|
|
75
|
+
<div class="grid-skeleton">
|
|
76
|
+
<div class="grid-item-skeleton">
|
|
77
|
+
<div class="skeleton-image grid-image"></div>
|
|
78
|
+
<div class="skeleton-text skeleton-grid-title"></div>
|
|
79
|
+
</div>
|
|
80
|
+
<div class="grid-item-skeleton">
|
|
81
|
+
<div class="skeleton-image grid-image"></div>
|
|
82
|
+
<div class="skeleton-text skeleton-grid-title"></div>
|
|
83
|
+
</div>
|
|
84
|
+
<div class="grid-item-skeleton">
|
|
85
|
+
<div class="skeleton-image grid-image"></div>
|
|
86
|
+
<div class="skeleton-text skeleton-grid-title"></div>
|
|
87
|
+
</div>
|
|
88
|
+
<div class="grid-item-skeleton">
|
|
89
|
+
<div class="skeleton-image grid-image"></div>
|
|
90
|
+
<div class="skeleton-text skeleton-grid-title"></div>
|
|
91
|
+
</div>
|
|
92
|
+
</div>
|
|
93
|
+
</div>
|
|
94
|
+
|
|
95
|
+
<!-- Controls -->
|
|
96
|
+
<div class="controls">
|
|
97
|
+
<button id="toggleBtn" class="toggle-button">Hide Skeletons</button>
|
|
98
|
+
</div>
|
|
99
|
+
|
|
100
|
+
<!-- Demo Content (Hidden by default) -->
|
|
101
|
+
<div id="content" class="content hidden">
|
|
102
|
+
<div class="card-demo">
|
|
103
|
+
<img src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?w=400&h=300&fit=crop" alt="Demo" />
|
|
104
|
+
<div class="card-content">
|
|
105
|
+
<h3>Amazing Product</h3>
|
|
106
|
+
<p>This is a demonstration of the loaded content after the skeleton loading animation completes.</p>
|
|
107
|
+
<p>The skeleton provides a smooth visual transition and reduces perceived wait time.</p>
|
|
108
|
+
<button>Learn More</button>
|
|
109
|
+
</div>
|
|
110
|
+
</div>
|
|
111
|
+
</div>
|
|
112
|
+
|
|
113
|
+
<script src="script.js"></script>
|
|
114
|
+
</body>
|
|
115
|
+
</html>
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
document.addEventListener('DOMContentLoaded', function () {
|
|
2
|
+
const toggleBtn = document.getElementById('toggleBtn');
|
|
3
|
+
const skeletonContainer = document.querySelector('.skeleton-container');
|
|
4
|
+
const content = document.getElementById('content');
|
|
5
|
+
|
|
6
|
+
let isShowingSkeletons = true;
|
|
7
|
+
|
|
8
|
+
toggleBtn.addEventListener('click', function () {
|
|
9
|
+
isShowingSkeletons = !isShowingSkeletons;
|
|
10
|
+
|
|
11
|
+
if (isShowingSkeletons) {
|
|
12
|
+
skeletonContainer.style.display = 'grid';
|
|
13
|
+
content.classList.add('hidden');
|
|
14
|
+
toggleBtn.textContent = 'Hide Skeletons';
|
|
15
|
+
} else {
|
|
16
|
+
skeletonContainer.style.display = 'none';
|
|
17
|
+
content.classList.remove('hidden');
|
|
18
|
+
toggleBtn.textContent = 'Show Skeletons';
|
|
19
|
+
}
|
|
20
|
+
});
|
|
21
|
+
|
|
22
|
+
// Simulate loading completion after 3 seconds (optional)
|
|
23
|
+
// setTimeout(() => {
|
|
24
|
+
// if (isShowingSkeletons) {
|
|
25
|
+
// toggleBtn.click();
|
|
26
|
+
// }
|
|
27
|
+
// }, 3000);
|
|
28
|
+
});
|