create-template-html-css 1.2.2 → 1.4.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 +63 -0
- package/README.md +165 -1
- package/bin/cli.js +27 -3
- package/package.json +16 -8
- package/src/generator.js +1 -1
- package/src/inserter.js +1 -1
- package/templates/animated-card/index.html +85 -0
- package/templates/animated-card/script.js +37 -0
- package/templates/animated-card/style.css +254 -0
- package/templates/dashboard-grid/index.html +247 -0
- package/templates/dashboard-grid/script.js +157 -0
- package/templates/dashboard-grid/style.css +558 -0
- package/templates/fade-gallery/index.html +134 -0
- package/templates/fade-gallery/script.js +123 -0
- package/templates/fade-gallery/style.css +309 -0
- package/templates/flex-cards/index.html +276 -0
- package/templates/flex-cards/script.js +122 -0
- package/templates/flex-cards/style.css +556 -0
- package/templates/flex-dashboard/index.html +282 -0
- package/templates/flex-dashboard/script.js +149 -0
- package/templates/flex-dashboard/style.css +659 -0
- package/templates/flex-layout/index.html +185 -0
- package/templates/flex-layout/script.js +79 -0
- package/templates/flex-layout/style.css +336 -0
- package/templates/grid-layout/index.html +164 -0
- package/templates/grid-layout/script.js +75 -0
- package/templates/grid-layout/style.css +452 -0
- package/templates/masonry-grid/index.html +196 -0
- package/templates/masonry-grid/script.js +122 -0
- package/templates/masonry-grid/style.css +259 -0
- package/templates/spinner/index.html +56 -0
- package/templates/spinner/script.js +22 -0
- package/templates/spinner/style.css +207 -0
- package/templates/typing-effect/index.html +58 -0
- package/templates/typing-effect/script.js +247 -0
- package/templates/typing-effect/style.css +253 -0
|
@@ -0,0 +1,282 @@
|
|
|
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>{{name}} - Flex Dashboard Component</title>
|
|
7
|
+
<link rel="stylesheet" href="style.css">
|
|
8
|
+
</head>
|
|
9
|
+
<body>
|
|
10
|
+
<div class="dashboard">
|
|
11
|
+
<!-- Sidebar -->
|
|
12
|
+
<aside class="sidebar">
|
|
13
|
+
<div class="logo">
|
|
14
|
+
<h2>💼 FlexDash</h2>
|
|
15
|
+
</div>
|
|
16
|
+
<nav class="nav-menu">
|
|
17
|
+
<a href="#" class="nav-item active">
|
|
18
|
+
<span class="nav-icon">🏠</span>
|
|
19
|
+
<span class="nav-text">Dashboard</span>
|
|
20
|
+
</a>
|
|
21
|
+
<a href="#" class="nav-item">
|
|
22
|
+
<span class="nav-icon">📊</span>
|
|
23
|
+
<span class="nav-text">Analytics</span>
|
|
24
|
+
</a>
|
|
25
|
+
<a href="#" class="nav-item">
|
|
26
|
+
<span class="nav-icon">💰</span>
|
|
27
|
+
<span class="nav-text">Sales</span>
|
|
28
|
+
</a>
|
|
29
|
+
<a href="#" class="nav-item">
|
|
30
|
+
<span class="nav-icon">👥</span>
|
|
31
|
+
<span class="nav-text">Customers</span>
|
|
32
|
+
</a>
|
|
33
|
+
<a href="#" class="nav-item">
|
|
34
|
+
<span class="nav-icon">📦</span>
|
|
35
|
+
<span class="nav-text">Products</span>
|
|
36
|
+
</a>
|
|
37
|
+
<a href="#" class="nav-item">
|
|
38
|
+
<span class="nav-icon">⚙️</span>
|
|
39
|
+
<span class="nav-text">Settings</span>
|
|
40
|
+
</a>
|
|
41
|
+
</nav>
|
|
42
|
+
<div class="sidebar-footer">
|
|
43
|
+
<div class="user-profile">
|
|
44
|
+
<div class="user-avatar">👤</div>
|
|
45
|
+
<div class="user-info">
|
|
46
|
+
<div class="user-name">John Doe</div>
|
|
47
|
+
<div class="user-role">Administrator</div>
|
|
48
|
+
</div>
|
|
49
|
+
</div>
|
|
50
|
+
</div>
|
|
51
|
+
</aside>
|
|
52
|
+
|
|
53
|
+
<!-- Main Content -->
|
|
54
|
+
<main class="main-content">
|
|
55
|
+
<!-- Top Bar -->
|
|
56
|
+
<header class="top-bar">
|
|
57
|
+
<div class="top-bar-left">
|
|
58
|
+
<button class="menu-toggle" id="menuToggle">☰</button>
|
|
59
|
+
<h1>Dashboard Overview</h1>
|
|
60
|
+
</div>
|
|
61
|
+
<div class="top-bar-right">
|
|
62
|
+
<div class="search-box">
|
|
63
|
+
<input type="text" placeholder="Search...">
|
|
64
|
+
<span class="search-icon">🔍</span>
|
|
65
|
+
</div>
|
|
66
|
+
<button class="icon-btn">🔔</button>
|
|
67
|
+
<button class="icon-btn">✉️</button>
|
|
68
|
+
</div>
|
|
69
|
+
</header>
|
|
70
|
+
|
|
71
|
+
<!-- Stats Cards -->
|
|
72
|
+
<section class="stats-section">
|
|
73
|
+
<div class="stat-card stat-primary">
|
|
74
|
+
<div class="stat-content">
|
|
75
|
+
<div class="stat-icon">💵</div>
|
|
76
|
+
<div class="stat-details">
|
|
77
|
+
<div class="stat-label">Total Revenue</div>
|
|
78
|
+
<div class="stat-value">$54,239</div>
|
|
79
|
+
<div class="stat-change positive">↑ 12.5%</div>
|
|
80
|
+
</div>
|
|
81
|
+
</div>
|
|
82
|
+
</div>
|
|
83
|
+
|
|
84
|
+
<div class="stat-card stat-success">
|
|
85
|
+
<div class="stat-content">
|
|
86
|
+
<div class="stat-icon">👥</div>
|
|
87
|
+
<div class="stat-details">
|
|
88
|
+
<div class="stat-label">New Users</div>
|
|
89
|
+
<div class="stat-value">2,845</div>
|
|
90
|
+
<div class="stat-change positive">↑ 8.2%</div>
|
|
91
|
+
</div>
|
|
92
|
+
</div>
|
|
93
|
+
</div>
|
|
94
|
+
|
|
95
|
+
<div class="stat-card stat-warning">
|
|
96
|
+
<div class="stat-content">
|
|
97
|
+
<div class="stat-icon">🛒</div>
|
|
98
|
+
<div class="stat-details">
|
|
99
|
+
<div class="stat-label">Total Orders</div>
|
|
100
|
+
<div class="stat-value">1,923</div>
|
|
101
|
+
<div class="stat-change negative">↓ 3.1%</div>
|
|
102
|
+
</div>
|
|
103
|
+
</div>
|
|
104
|
+
</div>
|
|
105
|
+
|
|
106
|
+
<div class="stat-card stat-info">
|
|
107
|
+
<div class="stat-content">
|
|
108
|
+
<div class="stat-icon">📈</div>
|
|
109
|
+
<div class="stat-details">
|
|
110
|
+
<div class="stat-label">Growth Rate</div>
|
|
111
|
+
<div class="stat-value">94.6%</div>
|
|
112
|
+
<div class="stat-change positive">↑ 5.7%</div>
|
|
113
|
+
</div>
|
|
114
|
+
</div>
|
|
115
|
+
</div>
|
|
116
|
+
</section>
|
|
117
|
+
|
|
118
|
+
<!-- Main Dashboard Grid -->
|
|
119
|
+
<section class="dashboard-grid">
|
|
120
|
+
<!-- Chart Section -->
|
|
121
|
+
<div class="dashboard-card chart-section">
|
|
122
|
+
<div class="card-header">
|
|
123
|
+
<h3>Revenue Overview</h3>
|
|
124
|
+
<select class="filter-select">
|
|
125
|
+
<option>Last 7 days</option>
|
|
126
|
+
<option>Last 30 days</option>
|
|
127
|
+
<option>Last 90 days</option>
|
|
128
|
+
</select>
|
|
129
|
+
</div>
|
|
130
|
+
<div class="chart-container">
|
|
131
|
+
<div class="chart-bars">
|
|
132
|
+
<div class="chart-bar" style="height: 60%">
|
|
133
|
+
<span class="bar-label">Mon</span>
|
|
134
|
+
</div>
|
|
135
|
+
<div class="chart-bar" style="height: 80%">
|
|
136
|
+
<span class="bar-label">Tue</span>
|
|
137
|
+
</div>
|
|
138
|
+
<div class="chart-bar" style="height: 55%">
|
|
139
|
+
<span class="bar-label">Wed</span>
|
|
140
|
+
</div>
|
|
141
|
+
<div class="chart-bar" style="height: 90%">
|
|
142
|
+
<span class="bar-label">Thu</span>
|
|
143
|
+
</div>
|
|
144
|
+
<div class="chart-bar" style="height: 75%">
|
|
145
|
+
<span class="bar-label">Fri</span>
|
|
146
|
+
</div>
|
|
147
|
+
<div class="chart-bar" style="height: 85%">
|
|
148
|
+
<span class="bar-label">Sat</span>
|
|
149
|
+
</div>
|
|
150
|
+
<div class="chart-bar" style="height: 70%">
|
|
151
|
+
<span class="bar-label">Sun</span>
|
|
152
|
+
</div>
|
|
153
|
+
</div>
|
|
154
|
+
</div>
|
|
155
|
+
</div>
|
|
156
|
+
|
|
157
|
+
<!-- Activity Feed -->
|
|
158
|
+
<div class="dashboard-card activity-section">
|
|
159
|
+
<div class="card-header">
|
|
160
|
+
<h3>Recent Activity</h3>
|
|
161
|
+
<button class="view-all-btn">View All</button>
|
|
162
|
+
</div>
|
|
163
|
+
<div class="activity-feed">
|
|
164
|
+
<div class="activity-item">
|
|
165
|
+
<div class="activity-icon success">✓</div>
|
|
166
|
+
<div class="activity-content">
|
|
167
|
+
<div class="activity-title">New order received</div>
|
|
168
|
+
<div class="activity-desc">Order #12345 - $234.00</div>
|
|
169
|
+
<div class="activity-time">2 minutes ago</div>
|
|
170
|
+
</div>
|
|
171
|
+
</div>
|
|
172
|
+
|
|
173
|
+
<div class="activity-item">
|
|
174
|
+
<div class="activity-icon info">👤</div>
|
|
175
|
+
<div class="activity-content">
|
|
176
|
+
<div class="activity-title">New user registered</div>
|
|
177
|
+
<div class="activity-desc">John Smith joined</div>
|
|
178
|
+
<div class="activity-time">15 minutes ago</div>
|
|
179
|
+
</div>
|
|
180
|
+
</div>
|
|
181
|
+
|
|
182
|
+
<div class="activity-item">
|
|
183
|
+
<div class="activity-icon warning">⚠️</div>
|
|
184
|
+
<div class="activity-content">
|
|
185
|
+
<div class="activity-title">Low stock alert</div>
|
|
186
|
+
<div class="activity-desc">Product ABC running low</div>
|
|
187
|
+
<div class="activity-time">1 hour ago</div>
|
|
188
|
+
</div>
|
|
189
|
+
</div>
|
|
190
|
+
|
|
191
|
+
<div class="activity-item">
|
|
192
|
+
<div class="activity-icon success">💰</div>
|
|
193
|
+
<div class="activity-content">
|
|
194
|
+
<div class="activity-title">Payment received</div>
|
|
195
|
+
<div class="activity-desc">Invoice #789 paid</div>
|
|
196
|
+
<div class="activity-time">3 hours ago</div>
|
|
197
|
+
</div>
|
|
198
|
+
</div>
|
|
199
|
+
</div>
|
|
200
|
+
</div>
|
|
201
|
+
|
|
202
|
+
<!-- Top Products -->
|
|
203
|
+
<div class="dashboard-card products-section">
|
|
204
|
+
<div class="card-header">
|
|
205
|
+
<h3>Top Products</h3>
|
|
206
|
+
</div>
|
|
207
|
+
<div class="products-list">
|
|
208
|
+
<div class="product-row">
|
|
209
|
+
<div class="product-info">
|
|
210
|
+
<div class="product-icon">📱</div>
|
|
211
|
+
<div class="product-details">
|
|
212
|
+
<div class="product-name">Premium Phone</div>
|
|
213
|
+
<div class="product-category">Electronics</div>
|
|
214
|
+
</div>
|
|
215
|
+
</div>
|
|
216
|
+
<div class="product-stats">
|
|
217
|
+
<div class="product-sales">$12,450</div>
|
|
218
|
+
<div class="product-units">235 sold</div>
|
|
219
|
+
</div>
|
|
220
|
+
</div>
|
|
221
|
+
|
|
222
|
+
<div class="product-row">
|
|
223
|
+
<div class="product-info">
|
|
224
|
+
<div class="product-icon">💻</div>
|
|
225
|
+
<div class="product-details">
|
|
226
|
+
<div class="product-name">Laptop Pro</div>
|
|
227
|
+
<div class="product-category">Computers</div>
|
|
228
|
+
</div>
|
|
229
|
+
</div>
|
|
230
|
+
<div class="product-stats">
|
|
231
|
+
<div class="product-sales">$8,920</div>
|
|
232
|
+
<div class="product-units">156 sold</div>
|
|
233
|
+
</div>
|
|
234
|
+
</div>
|
|
235
|
+
|
|
236
|
+
<div class="product-row">
|
|
237
|
+
<div class="product-info">
|
|
238
|
+
<div class="product-icon">🎧</div>
|
|
239
|
+
<div class="product-details">
|
|
240
|
+
<div class="product-name">Headphones</div>
|
|
241
|
+
<div class="product-category">Audio</div>
|
|
242
|
+
</div>
|
|
243
|
+
</div>
|
|
244
|
+
<div class="product-stats">
|
|
245
|
+
<div class="product-sales">$6,340</div>
|
|
246
|
+
<div class="product-units">423 sold</div>
|
|
247
|
+
</div>
|
|
248
|
+
</div>
|
|
249
|
+
</div>
|
|
250
|
+
</div>
|
|
251
|
+
|
|
252
|
+
<!-- Quick Actions -->
|
|
253
|
+
<div class="dashboard-card actions-section">
|
|
254
|
+
<div class="card-header">
|
|
255
|
+
<h3>Quick Actions</h3>
|
|
256
|
+
</div>
|
|
257
|
+
<div class="quick-actions">
|
|
258
|
+
<button class="action-item">
|
|
259
|
+
<span class="action-icon">➕</span>
|
|
260
|
+
<span class="action-text">Add Product</span>
|
|
261
|
+
</button>
|
|
262
|
+
<button class="action-item">
|
|
263
|
+
<span class="action-icon">📦</span>
|
|
264
|
+
<span class="action-text">New Order</span>
|
|
265
|
+
</button>
|
|
266
|
+
<button class="action-item">
|
|
267
|
+
<span class="action-icon">👥</span>
|
|
268
|
+
<span class="action-text">Add User</span>
|
|
269
|
+
</button>
|
|
270
|
+
<button class="action-item">
|
|
271
|
+
<span class="action-icon">📊</span>
|
|
272
|
+
<span class="action-text">Reports</span>
|
|
273
|
+
</button>
|
|
274
|
+
</div>
|
|
275
|
+
</div>
|
|
276
|
+
</section>
|
|
277
|
+
</main>
|
|
278
|
+
</div>
|
|
279
|
+
|
|
280
|
+
<script src="script.js"></script>
|
|
281
|
+
</body>
|
|
282
|
+
</html>
|
|
@@ -0,0 +1,149 @@
|
|
|
1
|
+
// Flex Dashboard Component JavaScript
|
|
2
|
+
console.log('Flex Dashboard Component initialized');
|
|
3
|
+
|
|
4
|
+
document.addEventListener('DOMContentLoaded', () => {
|
|
5
|
+
// Menu toggle functionality
|
|
6
|
+
const menuToggle = document.getElementById('menuToggle');
|
|
7
|
+
const sidebar = document.querySelector('.sidebar');
|
|
8
|
+
|
|
9
|
+
menuToggle.addEventListener('click', () => {
|
|
10
|
+
sidebar.classList.toggle('collapsed');
|
|
11
|
+
console.log('Sidebar toggled');
|
|
12
|
+
});
|
|
13
|
+
|
|
14
|
+
// Navigation items
|
|
15
|
+
const navItems = document.querySelectorAll('.nav-item');
|
|
16
|
+
navItems.forEach(item => {
|
|
17
|
+
item.addEventListener('click', function(e) {
|
|
18
|
+
// Remove active class from all items
|
|
19
|
+
navItems.forEach(nav => nav.classList.remove('active'));
|
|
20
|
+
|
|
21
|
+
// Add active class to clicked item
|
|
22
|
+
this.classList.add('active');
|
|
23
|
+
|
|
24
|
+
console.log('Navigation clicked:', this.querySelector('.nav-text').textContent);
|
|
25
|
+
});
|
|
26
|
+
});
|
|
27
|
+
|
|
28
|
+
// Animate stat cards on load
|
|
29
|
+
const statCards = document.querySelectorAll('.stat-card');
|
|
30
|
+
statCards.forEach((card, index) => {
|
|
31
|
+
setTimeout(() => {
|
|
32
|
+
card.style.animation = 'slideInUp 0.6s ease forwards';
|
|
33
|
+
}, index * 100);
|
|
34
|
+
});
|
|
35
|
+
|
|
36
|
+
// Chart bar interactions
|
|
37
|
+
const chartBars = document.querySelectorAll('.chart-bar');
|
|
38
|
+
chartBars.forEach((bar, index) => {
|
|
39
|
+
bar.addEventListener('mouseenter', function() {
|
|
40
|
+
const height = this.style.height;
|
|
41
|
+
console.log(`Day ${index + 1} height:`, height);
|
|
42
|
+
});
|
|
43
|
+
});
|
|
44
|
+
|
|
45
|
+
// Filter select
|
|
46
|
+
const filterSelect = document.querySelector('.filter-select');
|
|
47
|
+
if (filterSelect) {
|
|
48
|
+
filterSelect.addEventListener('change', function() {
|
|
49
|
+
console.log('Filter changed to:', this.value);
|
|
50
|
+
|
|
51
|
+
// Animate chart bars again
|
|
52
|
+
chartBars.forEach((bar, index) => {
|
|
53
|
+
bar.style.animation = 'none';
|
|
54
|
+
setTimeout(() => {
|
|
55
|
+
bar.style.animation = `growUp 1s ease ${index * 0.1}s`;
|
|
56
|
+
}, 10);
|
|
57
|
+
});
|
|
58
|
+
});
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
// Activity items interaction
|
|
62
|
+
const activityItems = document.querySelectorAll('.activity-item');
|
|
63
|
+
activityItems.forEach(item => {
|
|
64
|
+
item.addEventListener('click', function() {
|
|
65
|
+
const title = this.querySelector('.activity-title').textContent;
|
|
66
|
+
console.log('Activity clicked:', title);
|
|
67
|
+
|
|
68
|
+
// Add pulse effect
|
|
69
|
+
this.style.transform = 'scale(0.98)';
|
|
70
|
+
setTimeout(() => {
|
|
71
|
+
this.style.transform = '';
|
|
72
|
+
}, 200);
|
|
73
|
+
});
|
|
74
|
+
});
|
|
75
|
+
|
|
76
|
+
// Product rows interaction
|
|
77
|
+
const productRows = document.querySelectorAll('.product-row');
|
|
78
|
+
productRows.forEach(row => {
|
|
79
|
+
row.addEventListener('click', function() {
|
|
80
|
+
const productName = this.querySelector('.product-name').textContent;
|
|
81
|
+
console.log('Product clicked:', productName);
|
|
82
|
+
});
|
|
83
|
+
});
|
|
84
|
+
|
|
85
|
+
// Quick action buttons
|
|
86
|
+
const actionItems = document.querySelectorAll('.action-item');
|
|
87
|
+
actionItems.forEach(item => {
|
|
88
|
+
item.addEventListener('click', function() {
|
|
89
|
+
const action = this.querySelector('.action-text').textContent;
|
|
90
|
+
console.log('Action:', action);
|
|
91
|
+
|
|
92
|
+
// Add animation
|
|
93
|
+
this.style.transform = 'scale(0.95)';
|
|
94
|
+
setTimeout(() => {
|
|
95
|
+
this.style.transform = '';
|
|
96
|
+
}, 200);
|
|
97
|
+
});
|
|
98
|
+
});
|
|
99
|
+
|
|
100
|
+
// Search functionality
|
|
101
|
+
const searchInput = document.querySelector('.search-box input');
|
|
102
|
+
if (searchInput) {
|
|
103
|
+
searchInput.addEventListener('input', function() {
|
|
104
|
+
console.log('Search query:', this.value);
|
|
105
|
+
});
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
// Icon buttons
|
|
109
|
+
const iconButtons = document.querySelectorAll('.icon-btn');
|
|
110
|
+
iconButtons.forEach(btn => {
|
|
111
|
+
btn.addEventListener('click', function() {
|
|
112
|
+
console.log('Icon button clicked:', this.textContent.trim());
|
|
113
|
+
|
|
114
|
+
// Add notification badge (example)
|
|
115
|
+
if (this.textContent.includes('🔔')) {
|
|
116
|
+
alert('You have 3 new notifications!');
|
|
117
|
+
}
|
|
118
|
+
});
|
|
119
|
+
});
|
|
120
|
+
|
|
121
|
+
console.log('Dashboard initialized with:', {
|
|
122
|
+
stats: statCards.length,
|
|
123
|
+
activities: activityItems.length,
|
|
124
|
+
products: productRows.length,
|
|
125
|
+
actions: actionItems.length
|
|
126
|
+
});
|
|
127
|
+
});
|
|
128
|
+
|
|
129
|
+
// Add animations
|
|
130
|
+
const style = document.createElement('style');
|
|
131
|
+
style.textContent = `
|
|
132
|
+
@keyframes slideInUp {
|
|
133
|
+
from {
|
|
134
|
+
opacity: 0;
|
|
135
|
+
transform: translateY(30px);
|
|
136
|
+
}
|
|
137
|
+
to {
|
|
138
|
+
opacity: 1;
|
|
139
|
+
transform: translateY(0);
|
|
140
|
+
}
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
@keyframes growUp {
|
|
144
|
+
from {
|
|
145
|
+
height: 0 !important;
|
|
146
|
+
}
|
|
147
|
+
}
|
|
148
|
+
`;
|
|
149
|
+
document.head.appendChild(style);
|