create-template-html-css 1.2.2 → 1.3.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 +39 -0
- package/README.md +111 -1
- package/bin/cli.js +20 -3
- package/package.json +13 -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/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,247 @@
|
|
|
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}} - Dashboard Grid Component</title>
|
|
7
|
+
<link rel="stylesheet" href="style.css">
|
|
8
|
+
</head>
|
|
9
|
+
<body>
|
|
10
|
+
<div class="dashboard-container">
|
|
11
|
+
<!-- Sidebar -->
|
|
12
|
+
<aside class="sidebar">
|
|
13
|
+
<div class="logo">
|
|
14
|
+
<h2>📊 Dashboard</h2>
|
|
15
|
+
</div>
|
|
16
|
+
<nav class="nav-menu">
|
|
17
|
+
<a href="#" class="nav-item active">
|
|
18
|
+
<span class="icon">🏠</span>
|
|
19
|
+
<span>Home</span>
|
|
20
|
+
</a>
|
|
21
|
+
<a href="#" class="nav-item">
|
|
22
|
+
<span class="icon">📈</span>
|
|
23
|
+
<span>Analytics</span>
|
|
24
|
+
</a>
|
|
25
|
+
<a href="#" class="nav-item">
|
|
26
|
+
<span class="icon">💰</span>
|
|
27
|
+
<span>Revenue</span>
|
|
28
|
+
</a>
|
|
29
|
+
<a href="#" class="nav-item">
|
|
30
|
+
<span class="icon">👥</span>
|
|
31
|
+
<span>Users</span>
|
|
32
|
+
</a>
|
|
33
|
+
<a href="#" class="nav-item">
|
|
34
|
+
<span class="icon">⚙️</span>
|
|
35
|
+
<span>Settings</span>
|
|
36
|
+
</a>
|
|
37
|
+
</nav>
|
|
38
|
+
</aside>
|
|
39
|
+
|
|
40
|
+
<!-- Main Content -->
|
|
41
|
+
<main class="main-content">
|
|
42
|
+
<!-- Header -->
|
|
43
|
+
<header class="dashboard-header">
|
|
44
|
+
<div class="header-left">
|
|
45
|
+
<h1>Welcome Back!</h1>
|
|
46
|
+
<p>Here's what's happening with your business today</p>
|
|
47
|
+
</div>
|
|
48
|
+
<div class="header-right">
|
|
49
|
+
<button class="btn-icon">🔔</button>
|
|
50
|
+
<button class="btn-icon">⚙️</button>
|
|
51
|
+
<div class="user-avatar">👤</div>
|
|
52
|
+
</div>
|
|
53
|
+
</header>
|
|
54
|
+
|
|
55
|
+
<!-- Stats Grid -->
|
|
56
|
+
<section class="stats-grid">
|
|
57
|
+
<div class="stat-card card-1">
|
|
58
|
+
<div class="stat-icon">💵</div>
|
|
59
|
+
<div class="stat-info">
|
|
60
|
+
<h3>$45,231</h3>
|
|
61
|
+
<p>Total Revenue</p>
|
|
62
|
+
<div class="stat-change positive">
|
|
63
|
+
<span>↑ 12.5%</span>
|
|
64
|
+
</div>
|
|
65
|
+
</div>
|
|
66
|
+
</div>
|
|
67
|
+
|
|
68
|
+
<div class="stat-card card-2">
|
|
69
|
+
<div class="stat-icon">👥</div>
|
|
70
|
+
<div class="stat-info">
|
|
71
|
+
<h3>2,450</h3>
|
|
72
|
+
<p>Active Users</p>
|
|
73
|
+
<div class="stat-change positive">
|
|
74
|
+
<span>↑ 8.2%</span>
|
|
75
|
+
</div>
|
|
76
|
+
</div>
|
|
77
|
+
</div>
|
|
78
|
+
|
|
79
|
+
<div class="stat-card card-3">
|
|
80
|
+
<div class="stat-icon">🛒</div>
|
|
81
|
+
<div class="stat-info">
|
|
82
|
+
<h3>1,876</h3>
|
|
83
|
+
<p>Total Orders</p>
|
|
84
|
+
<div class="stat-change negative">
|
|
85
|
+
<span>↓ 3.1%</span>
|
|
86
|
+
</div>
|
|
87
|
+
</div>
|
|
88
|
+
</div>
|
|
89
|
+
|
|
90
|
+
<div class="stat-card card-4">
|
|
91
|
+
<div class="stat-icon">📊</div>
|
|
92
|
+
<div class="stat-info">
|
|
93
|
+
<h3>92.4%</h3>
|
|
94
|
+
<p>Conversion Rate</p>
|
|
95
|
+
<div class="stat-change positive">
|
|
96
|
+
<span>↑ 5.7%</span>
|
|
97
|
+
</div>
|
|
98
|
+
</div>
|
|
99
|
+
</div>
|
|
100
|
+
</section>
|
|
101
|
+
|
|
102
|
+
<!-- Charts and Activity -->
|
|
103
|
+
<section class="dashboard-grid">
|
|
104
|
+
<!-- Chart Card -->
|
|
105
|
+
<div class="dashboard-card chart-card">
|
|
106
|
+
<div class="card-header">
|
|
107
|
+
<h3>Revenue Overview</h3>
|
|
108
|
+
<select class="filter-select">
|
|
109
|
+
<option>Last 7 days</option>
|
|
110
|
+
<option>Last 30 days</option>
|
|
111
|
+
<option>Last 90 days</option>
|
|
112
|
+
</select>
|
|
113
|
+
</div>
|
|
114
|
+
<div class="chart-container">
|
|
115
|
+
<div class="chart-placeholder">
|
|
116
|
+
<div class="chart-bar" style="height: 60%"></div>
|
|
117
|
+
<div class="chart-bar" style="height: 75%"></div>
|
|
118
|
+
<div class="chart-bar" style="height: 55%"></div>
|
|
119
|
+
<div class="chart-bar" style="height: 85%"></div>
|
|
120
|
+
<div class="chart-bar" style="height: 70%"></div>
|
|
121
|
+
<div class="chart-bar" style="height: 90%"></div>
|
|
122
|
+
<div class="chart-bar" style="height: 80%"></div>
|
|
123
|
+
</div>
|
|
124
|
+
</div>
|
|
125
|
+
</div>
|
|
126
|
+
|
|
127
|
+
<!-- Activity Feed -->
|
|
128
|
+
<div class="dashboard-card activity-card">
|
|
129
|
+
<div class="card-header">
|
|
130
|
+
<h3>Recent Activity</h3>
|
|
131
|
+
<button class="view-all">View All</button>
|
|
132
|
+
</div>
|
|
133
|
+
<div class="activity-list">
|
|
134
|
+
<div class="activity-item">
|
|
135
|
+
<div class="activity-icon icon-success">✓</div>
|
|
136
|
+
<div class="activity-content">
|
|
137
|
+
<h4>New order received</h4>
|
|
138
|
+
<p>Order #12345 - $234.00</p>
|
|
139
|
+
<span class="time">2 minutes ago</span>
|
|
140
|
+
</div>
|
|
141
|
+
</div>
|
|
142
|
+
<div class="activity-item">
|
|
143
|
+
<div class="activity-icon icon-info">👤</div>
|
|
144
|
+
<div class="activity-content">
|
|
145
|
+
<h4>New user registered</h4>
|
|
146
|
+
<p>John Doe joined the platform</p>
|
|
147
|
+
<span class="time">15 minutes ago</span>
|
|
148
|
+
</div>
|
|
149
|
+
</div>
|
|
150
|
+
<div class="activity-item">
|
|
151
|
+
<div class="activity-icon icon-warning">⚠️</div>
|
|
152
|
+
<div class="activity-content">
|
|
153
|
+
<h4>Low stock alert</h4>
|
|
154
|
+
<p>Product ABC running low</p>
|
|
155
|
+
<span class="time">1 hour ago</span>
|
|
156
|
+
</div>
|
|
157
|
+
</div>
|
|
158
|
+
<div class="activity-item">
|
|
159
|
+
<div class="activity-icon icon-success">💰</div>
|
|
160
|
+
<div class="activity-content">
|
|
161
|
+
<h4>Payment received</h4>
|
|
162
|
+
<p>Invoice #789 paid</p>
|
|
163
|
+
<span class="time">3 hours ago</span>
|
|
164
|
+
</div>
|
|
165
|
+
</div>
|
|
166
|
+
</div>
|
|
167
|
+
</div>
|
|
168
|
+
|
|
169
|
+
<!-- Top Products -->
|
|
170
|
+
<div class="dashboard-card products-card">
|
|
171
|
+
<div class="card-header">
|
|
172
|
+
<h3>Top Products</h3>
|
|
173
|
+
</div>
|
|
174
|
+
<div class="products-list">
|
|
175
|
+
<div class="product-item">
|
|
176
|
+
<div class="product-info">
|
|
177
|
+
<div class="product-icon">📱</div>
|
|
178
|
+
<div>
|
|
179
|
+
<h4>Premium Phone</h4>
|
|
180
|
+
<p>Electronics</p>
|
|
181
|
+
</div>
|
|
182
|
+
</div>
|
|
183
|
+
<div class="product-stats">
|
|
184
|
+
<strong>$12,450</strong>
|
|
185
|
+
<span class="badge">235 sold</span>
|
|
186
|
+
</div>
|
|
187
|
+
</div>
|
|
188
|
+
<div class="product-item">
|
|
189
|
+
<div class="product-info">
|
|
190
|
+
<div class="product-icon">💻</div>
|
|
191
|
+
<div>
|
|
192
|
+
<h4>Laptop Pro</h4>
|
|
193
|
+
<p>Computers</p>
|
|
194
|
+
</div>
|
|
195
|
+
</div>
|
|
196
|
+
<div class="product-stats">
|
|
197
|
+
<strong>$8,920</strong>
|
|
198
|
+
<span class="badge">156 sold</span>
|
|
199
|
+
</div>
|
|
200
|
+
</div>
|
|
201
|
+
<div class="product-item">
|
|
202
|
+
<div class="product-info">
|
|
203
|
+
<div class="product-icon">🎧</div>
|
|
204
|
+
<div>
|
|
205
|
+
<h4>Wireless Headphones</h4>
|
|
206
|
+
<p>Audio</p>
|
|
207
|
+
</div>
|
|
208
|
+
</div>
|
|
209
|
+
<div class="product-stats">
|
|
210
|
+
<strong>$6,340</strong>
|
|
211
|
+
<span class="badge">423 sold</span>
|
|
212
|
+
</div>
|
|
213
|
+
</div>
|
|
214
|
+
</div>
|
|
215
|
+
</div>
|
|
216
|
+
|
|
217
|
+
<!-- Quick Actions -->
|
|
218
|
+
<div class="dashboard-card actions-card">
|
|
219
|
+
<div class="card-header">
|
|
220
|
+
<h3>Quick Actions</h3>
|
|
221
|
+
</div>
|
|
222
|
+
<div class="actions-grid">
|
|
223
|
+
<button class="action-btn">
|
|
224
|
+
<span class="action-icon">➕</span>
|
|
225
|
+
<span>Add Product</span>
|
|
226
|
+
</button>
|
|
227
|
+
<button class="action-btn">
|
|
228
|
+
<span class="action-icon">📦</span>
|
|
229
|
+
<span>New Order</span>
|
|
230
|
+
</button>
|
|
231
|
+
<button class="action-btn">
|
|
232
|
+
<span class="action-icon">👥</span>
|
|
233
|
+
<span>Add User</span>
|
|
234
|
+
</button>
|
|
235
|
+
<button class="action-btn">
|
|
236
|
+
<span class="action-icon">📊</span>
|
|
237
|
+
<span>View Reports</span>
|
|
238
|
+
</button>
|
|
239
|
+
</div>
|
|
240
|
+
</div>
|
|
241
|
+
</section>
|
|
242
|
+
</main>
|
|
243
|
+
</div>
|
|
244
|
+
|
|
245
|
+
<script src="script.js"></script>
|
|
246
|
+
</body>
|
|
247
|
+
</html>
|
|
@@ -0,0 +1,157 @@
|
|
|
1
|
+
// Dashboard Grid Component JavaScript
|
|
2
|
+
console.log('Dashboard Grid Component initialized');
|
|
3
|
+
|
|
4
|
+
document.addEventListener('DOMContentLoaded', () => {
|
|
5
|
+
// Navigation handling
|
|
6
|
+
const navItems = document.querySelectorAll('.nav-item');
|
|
7
|
+
navItems.forEach(item => {
|
|
8
|
+
item.addEventListener('click', function(e) {
|
|
9
|
+
e.preventDefault();
|
|
10
|
+
|
|
11
|
+
// Remove active class from all items
|
|
12
|
+
navItems.forEach(nav => nav.classList.remove('active'));
|
|
13
|
+
|
|
14
|
+
// Add active class to clicked item
|
|
15
|
+
this.classList.add('active');
|
|
16
|
+
|
|
17
|
+
console.log('Navigation:', this.textContent.trim());
|
|
18
|
+
});
|
|
19
|
+
});
|
|
20
|
+
|
|
21
|
+
// Animate stat cards on load
|
|
22
|
+
const statCards = document.querySelectorAll('.stat-card');
|
|
23
|
+
statCards.forEach((card, index) => {
|
|
24
|
+
card.style.animationDelay = `${index * 0.1}s`;
|
|
25
|
+
});
|
|
26
|
+
|
|
27
|
+
// Animate chart bars
|
|
28
|
+
const chartBars = document.querySelectorAll('.chart-bar');
|
|
29
|
+
chartBars.forEach((bar, index) => {
|
|
30
|
+
bar.style.animationDelay = `${index * 0.1}s`;
|
|
31
|
+
|
|
32
|
+
bar.addEventListener('mouseenter', function() {
|
|
33
|
+
// Show tooltip or value (can be expanded)
|
|
34
|
+
console.log('Chart bar clicked:', index + 1);
|
|
35
|
+
});
|
|
36
|
+
});
|
|
37
|
+
|
|
38
|
+
// Filter select handling
|
|
39
|
+
const filterSelect = document.querySelector('.filter-select');
|
|
40
|
+
if (filterSelect) {
|
|
41
|
+
filterSelect.addEventListener('change', function() {
|
|
42
|
+
console.log('Filter changed to:', this.value);
|
|
43
|
+
|
|
44
|
+
// Animate chart bars again
|
|
45
|
+
chartBars.forEach((bar, index) => {
|
|
46
|
+
bar.style.animation = 'none';
|
|
47
|
+
setTimeout(() => {
|
|
48
|
+
bar.style.animation = `growUp 1s ease ${index * 0.1}s`;
|
|
49
|
+
}, 10);
|
|
50
|
+
});
|
|
51
|
+
});
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
// Activity items interaction
|
|
55
|
+
const activityItems = document.querySelectorAll('.activity-item');
|
|
56
|
+
activityItems.forEach(item => {
|
|
57
|
+
item.addEventListener('click', function() {
|
|
58
|
+
const title = this.querySelector('h4').textContent;
|
|
59
|
+
console.log('Activity clicked:', title);
|
|
60
|
+
|
|
61
|
+
// Add pulse effect
|
|
62
|
+
this.style.transform = 'scale(0.98)';
|
|
63
|
+
setTimeout(() => {
|
|
64
|
+
this.style.transform = '';
|
|
65
|
+
}, 200);
|
|
66
|
+
});
|
|
67
|
+
});
|
|
68
|
+
|
|
69
|
+
// Product items interaction
|
|
70
|
+
const productItems = document.querySelectorAll('.product-item');
|
|
71
|
+
productItems.forEach(item => {
|
|
72
|
+
item.addEventListener('click', function() {
|
|
73
|
+
const productName = this.querySelector('h4').textContent;
|
|
74
|
+
console.log('Product clicked:', productName);
|
|
75
|
+
});
|
|
76
|
+
});
|
|
77
|
+
|
|
78
|
+
// Quick action buttons
|
|
79
|
+
const actionButtons = document.querySelectorAll('.action-btn');
|
|
80
|
+
actionButtons.forEach(btn => {
|
|
81
|
+
btn.addEventListener('click', function() {
|
|
82
|
+
const action = this.textContent.trim();
|
|
83
|
+
console.log('Action:', action);
|
|
84
|
+
|
|
85
|
+
// Add animation
|
|
86
|
+
this.style.transform = 'scale(0.95)';
|
|
87
|
+
setTimeout(() => {
|
|
88
|
+
this.style.transform = '';
|
|
89
|
+
}, 200);
|
|
90
|
+
|
|
91
|
+
// You can add modal or action functionality here
|
|
92
|
+
alert(`Action: ${action}`);
|
|
93
|
+
});
|
|
94
|
+
});
|
|
95
|
+
|
|
96
|
+
// Mobile sidebar toggle (if needed)
|
|
97
|
+
if (window.innerWidth <= 768) {
|
|
98
|
+
const logo = document.querySelector('.logo');
|
|
99
|
+
const sidebar = document.querySelector('.sidebar');
|
|
100
|
+
|
|
101
|
+
// Create hamburger button
|
|
102
|
+
const hamburger = document.createElement('button');
|
|
103
|
+
hamburger.innerHTML = '☰';
|
|
104
|
+
hamburger.style.cssText = `
|
|
105
|
+
position: fixed;
|
|
106
|
+
top: 20px;
|
|
107
|
+
left: 20px;
|
|
108
|
+
z-index: 1001;
|
|
109
|
+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
110
|
+
color: white;
|
|
111
|
+
border: none;
|
|
112
|
+
padding: 15px 20px;
|
|
113
|
+
border-radius: 10px;
|
|
114
|
+
font-size: 1.5rem;
|
|
115
|
+
cursor: pointer;
|
|
116
|
+
`;
|
|
117
|
+
|
|
118
|
+
document.body.appendChild(hamburger);
|
|
119
|
+
|
|
120
|
+
hamburger.addEventListener('click', () => {
|
|
121
|
+
sidebar.classList.toggle('active');
|
|
122
|
+
});
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
// Auto-update time (simulated)
|
|
126
|
+
setInterval(() => {
|
|
127
|
+
const timeElements = document.querySelectorAll('.time');
|
|
128
|
+
timeElements.forEach(el => {
|
|
129
|
+
// This is just a demo - in real app, you'd calculate actual time
|
|
130
|
+
console.log('Time updated');
|
|
131
|
+
});
|
|
132
|
+
}, 60000); // Update every minute
|
|
133
|
+
|
|
134
|
+
// Initialize tooltips or additional features
|
|
135
|
+
console.log('Dashboard fully loaded with', {
|
|
136
|
+
stats: statCards.length,
|
|
137
|
+
activities: activityItems.length,
|
|
138
|
+
products: productItems.length,
|
|
139
|
+
actions: actionButtons.length
|
|
140
|
+
});
|
|
141
|
+
});
|
|
142
|
+
|
|
143
|
+
// Real-time data simulation (optional)
|
|
144
|
+
function simulateRealtimeData() {
|
|
145
|
+
const statCards = document.querySelectorAll('.stat-card h3');
|
|
146
|
+
|
|
147
|
+
setInterval(() => {
|
|
148
|
+
statCards.forEach(stat => {
|
|
149
|
+
const currentValue = stat.textContent;
|
|
150
|
+
// Add your real-time update logic here
|
|
151
|
+
console.log('Real-time update:', currentValue);
|
|
152
|
+
});
|
|
153
|
+
}, 5000); // Update every 5 seconds
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
// Uncomment to enable real-time simulation
|
|
157
|
+
// simulateRealtimeData();
|