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,123 @@
|
|
|
1
|
+
// Animated Gallery Component JavaScript
|
|
2
|
+
|
|
3
|
+
// Intersection Observer for scroll animations
|
|
4
|
+
const observerOptions = {
|
|
5
|
+
root: null,
|
|
6
|
+
rootMargin: '0px',
|
|
7
|
+
threshold: 0.1
|
|
8
|
+
};
|
|
9
|
+
|
|
10
|
+
// Callback function for intersection observer
|
|
11
|
+
function handleIntersection(entries, observer) {
|
|
12
|
+
entries.forEach(entry => {
|
|
13
|
+
if (entry.isIntersecting) {
|
|
14
|
+
const delay = entry.target.dataset.delay || 0;
|
|
15
|
+
setTimeout(() => {
|
|
16
|
+
entry.target.classList.add('visible');
|
|
17
|
+
}, delay);
|
|
18
|
+
observer.unobserve(entry.target);
|
|
19
|
+
}
|
|
20
|
+
});
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
// Create observer
|
|
24
|
+
const observer = new IntersectionObserver(handleIntersection, observerOptions);
|
|
25
|
+
|
|
26
|
+
// Function to observe elements
|
|
27
|
+
function observeElements() {
|
|
28
|
+
const fadeInUpElements = document.querySelectorAll('.fade-in-up');
|
|
29
|
+
const slideInLeftElements = document.querySelectorAll('.slide-in-left');
|
|
30
|
+
|
|
31
|
+
fadeInUpElements.forEach(element => {
|
|
32
|
+
observer.observe(element);
|
|
33
|
+
});
|
|
34
|
+
|
|
35
|
+
slideInLeftElements.forEach(element => {
|
|
36
|
+
observer.observe(element);
|
|
37
|
+
});
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
// Replay animations
|
|
41
|
+
function replayAnimations() {
|
|
42
|
+
const animatedElements = document.querySelectorAll('.gallery-item, .scroll-item');
|
|
43
|
+
|
|
44
|
+
animatedElements.forEach(element => {
|
|
45
|
+
element.classList.remove('visible');
|
|
46
|
+
// Force reflow
|
|
47
|
+
void element.offsetWidth;
|
|
48
|
+
});
|
|
49
|
+
|
|
50
|
+
// Re-observe elements
|
|
51
|
+
setTimeout(() => {
|
|
52
|
+
observeElements();
|
|
53
|
+
}, 100);
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
// Initialize on DOM load
|
|
57
|
+
document.addEventListener('DOMContentLoaded', () => {
|
|
58
|
+
console.log('Animated Gallery Component initialized');
|
|
59
|
+
|
|
60
|
+
// Observe elements
|
|
61
|
+
observeElements();
|
|
62
|
+
|
|
63
|
+
// Replay button
|
|
64
|
+
const animateBtn = document.getElementById('animateBtn');
|
|
65
|
+
if (animateBtn) {
|
|
66
|
+
animateBtn.addEventListener('click', () => {
|
|
67
|
+
replayAnimations();
|
|
68
|
+
});
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
// Add click handlers to gallery items
|
|
72
|
+
const galleryItems = document.querySelectorAll('.gallery-item');
|
|
73
|
+
galleryItems.forEach((item, index) => {
|
|
74
|
+
item.addEventListener('click', () => {
|
|
75
|
+
console.log(`Gallery item ${index + 1} clicked`);
|
|
76
|
+
// You can add modal or lightbox functionality here
|
|
77
|
+
});
|
|
78
|
+
});
|
|
79
|
+
|
|
80
|
+
// Smooth scroll for horizontal gallery
|
|
81
|
+
const horizontalScroll = document.querySelector('.horizontal-scroll');
|
|
82
|
+
if (horizontalScroll) {
|
|
83
|
+
let isScrolling = false;
|
|
84
|
+
let scrollLeft = 0;
|
|
85
|
+
let startX = 0;
|
|
86
|
+
|
|
87
|
+
horizontalScroll.addEventListener('mousedown', (e) => {
|
|
88
|
+
isScrolling = true;
|
|
89
|
+
startX = e.pageX - horizontalScroll.offsetLeft;
|
|
90
|
+
scrollLeft = horizontalScroll.scrollLeft;
|
|
91
|
+
});
|
|
92
|
+
|
|
93
|
+
horizontalScroll.addEventListener('mouseleave', () => {
|
|
94
|
+
isScrolling = false;
|
|
95
|
+
});
|
|
96
|
+
|
|
97
|
+
horizontalScroll.addEventListener('mouseup', () => {
|
|
98
|
+
isScrolling = false;
|
|
99
|
+
});
|
|
100
|
+
|
|
101
|
+
horizontalScroll.addEventListener('mousemove', (e) => {
|
|
102
|
+
if (!isScrolling) return;
|
|
103
|
+
e.preventDefault();
|
|
104
|
+
const x = e.pageX - horizontalScroll.offsetLeft;
|
|
105
|
+
const walk = (x - startX) * 2;
|
|
106
|
+
horizontalScroll.scrollLeft = scrollLeft - walk;
|
|
107
|
+
});
|
|
108
|
+
}
|
|
109
|
+
});
|
|
110
|
+
|
|
111
|
+
// Parallax effect on scroll
|
|
112
|
+
window.addEventListener('scroll', () => {
|
|
113
|
+
const scrolled = window.pageYOffset;
|
|
114
|
+
const parallaxElements = document.querySelectorAll('.placeholder-image');
|
|
115
|
+
|
|
116
|
+
parallaxElements.forEach((element, index) => {
|
|
117
|
+
const speed = 0.5;
|
|
118
|
+
const yPos = -(scrolled * speed);
|
|
119
|
+
element.style.transform = `translateY(${yPos}px)`;
|
|
120
|
+
});
|
|
121
|
+
});
|
|
122
|
+
|
|
123
|
+
console.log('Gallery animations ready');
|
|
@@ -0,0 +1,309 @@
|
|
|
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, #141e30 0%, #243b55 100%);
|
|
10
|
+
min-height: 100vh;
|
|
11
|
+
color: white;
|
|
12
|
+
overflow-x: hidden;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
.container {
|
|
16
|
+
max-width: 1400px;
|
|
17
|
+
margin: 0 auto;
|
|
18
|
+
padding: 60px 20px;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
/* Header */
|
|
22
|
+
.header {
|
|
23
|
+
text-align: center;
|
|
24
|
+
margin-bottom: 80px;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.header h1 {
|
|
28
|
+
font-size: 4rem;
|
|
29
|
+
font-weight: 700;
|
|
30
|
+
margin-bottom: 20px;
|
|
31
|
+
background: linear-gradient(135deg, #667eea, #764ba2, #f093fb);
|
|
32
|
+
-webkit-background-clip: text;
|
|
33
|
+
-webkit-text-fill-color: transparent;
|
|
34
|
+
background-clip: text;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.subtitle {
|
|
38
|
+
font-size: 1.5rem;
|
|
39
|
+
color: rgba(255, 255, 255, 0.8);
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
/* Section Title */
|
|
43
|
+
.section-title {
|
|
44
|
+
font-size: 2.5rem;
|
|
45
|
+
text-align: center;
|
|
46
|
+
margin-bottom: 50px;
|
|
47
|
+
color: white;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
/* Gallery Grid */
|
|
51
|
+
.gallery-section {
|
|
52
|
+
margin-bottom: 100px;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
.gallery-grid {
|
|
56
|
+
display: grid;
|
|
57
|
+
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
|
|
58
|
+
gap: 30px;
|
|
59
|
+
padding: 20px;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
.gallery-item {
|
|
63
|
+
opacity: 0;
|
|
64
|
+
transform: translateY(50px);
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.gallery-item.visible {
|
|
68
|
+
animation: fadeInUp 0.8s ease forwards;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
@keyframes fadeInUp {
|
|
72
|
+
to {
|
|
73
|
+
opacity: 1;
|
|
74
|
+
transform: translateY(0);
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
.image-wrapper {
|
|
79
|
+
position: relative;
|
|
80
|
+
overflow: hidden;
|
|
81
|
+
border-radius: 20px;
|
|
82
|
+
cursor: pointer;
|
|
83
|
+
height: 400px;
|
|
84
|
+
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
|
|
85
|
+
transition: transform 0.4s ease, box-shadow 0.4s ease;
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
.image-wrapper:hover {
|
|
89
|
+
transform: translateY(-10px) scale(1.02);
|
|
90
|
+
box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6);
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
.placeholder-image {
|
|
94
|
+
width: 100%;
|
|
95
|
+
height: 100%;
|
|
96
|
+
display: flex;
|
|
97
|
+
align-items: center;
|
|
98
|
+
justify-content: center;
|
|
99
|
+
transition: transform 0.4s ease;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
.image-wrapper:hover .placeholder-image {
|
|
103
|
+
transform: scale(1.1);
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
.image-icon {
|
|
107
|
+
font-size: 6rem;
|
|
108
|
+
filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.3));
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
/* Gradient Backgrounds */
|
|
112
|
+
.gradient-1 {
|
|
113
|
+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
.gradient-2 {
|
|
117
|
+
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
.gradient-3 {
|
|
121
|
+
background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
.gradient-4 {
|
|
125
|
+
background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
.gradient-5 {
|
|
129
|
+
background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
.gradient-6 {
|
|
133
|
+
background: linear-gradient(135deg, #30cfd0 0%, #330867 100%);
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
.gradient-7 {
|
|
137
|
+
background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
.gradient-8 {
|
|
141
|
+
background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
.gradient-9 {
|
|
145
|
+
background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
.gradient-10 {
|
|
149
|
+
background: linear-gradient(135deg, #ff6e7f 0%, #bfe9ff 100%);
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
/* Overlay */
|
|
153
|
+
.overlay {
|
|
154
|
+
position: absolute;
|
|
155
|
+
bottom: 0;
|
|
156
|
+
left: 0;
|
|
157
|
+
right: 0;
|
|
158
|
+
background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
|
|
159
|
+
padding: 30px;
|
|
160
|
+
transform: translateY(100%);
|
|
161
|
+
transition: transform 0.4s ease;
|
|
162
|
+
}
|
|
163
|
+
|
|
164
|
+
.image-wrapper:hover .overlay {
|
|
165
|
+
transform: translateY(0);
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
.overlay h3 {
|
|
169
|
+
font-size: 1.8rem;
|
|
170
|
+
margin-bottom: 10px;
|
|
171
|
+
color: white;
|
|
172
|
+
}
|
|
173
|
+
|
|
174
|
+
.overlay p {
|
|
175
|
+
font-size: 1.1rem;
|
|
176
|
+
color: rgba(255, 255, 255, 0.9);
|
|
177
|
+
}
|
|
178
|
+
|
|
179
|
+
/* Horizontal Scroll Section */
|
|
180
|
+
.horizontal-section {
|
|
181
|
+
margin-bottom: 80px;
|
|
182
|
+
}
|
|
183
|
+
|
|
184
|
+
.horizontal-scroll {
|
|
185
|
+
display: flex;
|
|
186
|
+
gap: 30px;
|
|
187
|
+
overflow-x: auto;
|
|
188
|
+
padding: 20px;
|
|
189
|
+
scroll-behavior: smooth;
|
|
190
|
+
}
|
|
191
|
+
|
|
192
|
+
.horizontal-scroll::-webkit-scrollbar {
|
|
193
|
+
height: 10px;
|
|
194
|
+
}
|
|
195
|
+
|
|
196
|
+
.horizontal-scroll::-webkit-scrollbar-track {
|
|
197
|
+
background: rgba(255, 255, 255, 0.1);
|
|
198
|
+
border-radius: 10px;
|
|
199
|
+
}
|
|
200
|
+
|
|
201
|
+
.horizontal-scroll::-webkit-scrollbar-thumb {
|
|
202
|
+
background: linear-gradient(135deg, #667eea, #764ba2);
|
|
203
|
+
border-radius: 10px;
|
|
204
|
+
}
|
|
205
|
+
|
|
206
|
+
.scroll-item {
|
|
207
|
+
min-width: 300px;
|
|
208
|
+
opacity: 0;
|
|
209
|
+
transform: translateX(-50px);
|
|
210
|
+
}
|
|
211
|
+
|
|
212
|
+
.scroll-item.visible {
|
|
213
|
+
animation: slideInLeft 0.8s ease forwards;
|
|
214
|
+
}
|
|
215
|
+
|
|
216
|
+
@keyframes slideInLeft {
|
|
217
|
+
to {
|
|
218
|
+
opacity: 1;
|
|
219
|
+
transform: translateX(0);
|
|
220
|
+
}
|
|
221
|
+
}
|
|
222
|
+
|
|
223
|
+
.scroll-item .placeholder-image {
|
|
224
|
+
height: 300px;
|
|
225
|
+
border-radius: 15px;
|
|
226
|
+
margin-bottom: 15px;
|
|
227
|
+
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
|
|
228
|
+
transition: transform 0.3s ease;
|
|
229
|
+
}
|
|
230
|
+
|
|
231
|
+
.scroll-item:hover .placeholder-image {
|
|
232
|
+
transform: scale(1.05);
|
|
233
|
+
}
|
|
234
|
+
|
|
235
|
+
.scroll-item p {
|
|
236
|
+
text-align: center;
|
|
237
|
+
font-size: 1.2rem;
|
|
238
|
+
font-weight: 600;
|
|
239
|
+
}
|
|
240
|
+
|
|
241
|
+
/* Fade In Animation */
|
|
242
|
+
.fade-in {
|
|
243
|
+
opacity: 0;
|
|
244
|
+
animation: fadeIn 1s ease forwards;
|
|
245
|
+
}
|
|
246
|
+
|
|
247
|
+
@keyframes fadeIn {
|
|
248
|
+
to {
|
|
249
|
+
opacity: 1;
|
|
250
|
+
}
|
|
251
|
+
}
|
|
252
|
+
|
|
253
|
+
/* Controls */
|
|
254
|
+
.controls {
|
|
255
|
+
text-align: center;
|
|
256
|
+
padding: 40px;
|
|
257
|
+
}
|
|
258
|
+
|
|
259
|
+
.btn {
|
|
260
|
+
padding: 18px 50px;
|
|
261
|
+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
262
|
+
color: white;
|
|
263
|
+
border: none;
|
|
264
|
+
border-radius: 50px;
|
|
265
|
+
font-size: 1.2rem;
|
|
266
|
+
font-weight: 600;
|
|
267
|
+
cursor: pointer;
|
|
268
|
+
transition: all 0.3s ease;
|
|
269
|
+
text-transform: uppercase;
|
|
270
|
+
letter-spacing: 2px;
|
|
271
|
+
box-shadow: 0 10px 30px rgba(102, 126, 234, 0.4);
|
|
272
|
+
}
|
|
273
|
+
|
|
274
|
+
.btn:hover {
|
|
275
|
+
transform: translateY(-5px);
|
|
276
|
+
box-shadow: 0 15px 40px rgba(102, 126, 234, 0.6);
|
|
277
|
+
}
|
|
278
|
+
|
|
279
|
+
.btn:active {
|
|
280
|
+
transform: translateY(-2px);
|
|
281
|
+
}
|
|
282
|
+
|
|
283
|
+
/* Responsive Design */
|
|
284
|
+
@media (max-width: 768px) {
|
|
285
|
+
.header h1 {
|
|
286
|
+
font-size: 2.5rem;
|
|
287
|
+
}
|
|
288
|
+
|
|
289
|
+
.subtitle {
|
|
290
|
+
font-size: 1.2rem;
|
|
291
|
+
}
|
|
292
|
+
|
|
293
|
+
.gallery-grid {
|
|
294
|
+
grid-template-columns: 1fr;
|
|
295
|
+
gap: 20px;
|
|
296
|
+
}
|
|
297
|
+
|
|
298
|
+
.image-wrapper {
|
|
299
|
+
height: 350px;
|
|
300
|
+
}
|
|
301
|
+
|
|
302
|
+
.scroll-item {
|
|
303
|
+
min-width: 250px;
|
|
304
|
+
}
|
|
305
|
+
|
|
306
|
+
.scroll-item .placeholder-image {
|
|
307
|
+
height: 250px;
|
|
308
|
+
}
|
|
309
|
+
}
|
|
@@ -0,0 +1,164 @@
|
|
|
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}} - Grid Layout Component</title>
|
|
7
|
+
<link rel="stylesheet" href="style.css">
|
|
8
|
+
</head>
|
|
9
|
+
<body>
|
|
10
|
+
<div class="container">
|
|
11
|
+
<header class="page-header">
|
|
12
|
+
<h1>CSS Grid Layouts</h1>
|
|
13
|
+
<p>Modern responsive grid systems</p>
|
|
14
|
+
</header>
|
|
15
|
+
|
|
16
|
+
<!-- Basic Grid -->
|
|
17
|
+
<section class="section">
|
|
18
|
+
<h2 class="section-title">Basic Grid Layout</h2>
|
|
19
|
+
<div class="basic-grid">
|
|
20
|
+
<div class="grid-item item-1">
|
|
21
|
+
<span class="icon">📱</span>
|
|
22
|
+
<h3>Responsive</h3>
|
|
23
|
+
<p>Adapts to any screen size</p>
|
|
24
|
+
</div>
|
|
25
|
+
<div class="grid-item item-2">
|
|
26
|
+
<span class="icon">⚡</span>
|
|
27
|
+
<h3>Fast</h3>
|
|
28
|
+
<p>Lightning-fast performance</p>
|
|
29
|
+
</div>
|
|
30
|
+
<div class="grid-item item-3">
|
|
31
|
+
<span class="icon">🎨</span>
|
|
32
|
+
<h3>Beautiful</h3>
|
|
33
|
+
<p>Modern design patterns</p>
|
|
34
|
+
</div>
|
|
35
|
+
<div class="grid-item item-4">
|
|
36
|
+
<span class="icon">🔒</span>
|
|
37
|
+
<h3>Secure</h3>
|
|
38
|
+
<p>Enterprise-grade security</p>
|
|
39
|
+
</div>
|
|
40
|
+
</div>
|
|
41
|
+
</section>
|
|
42
|
+
|
|
43
|
+
<!-- Feature Grid -->
|
|
44
|
+
<section class="section">
|
|
45
|
+
<h2 class="section-title">Feature Grid</h2>
|
|
46
|
+
<div class="feature-grid">
|
|
47
|
+
<div class="feature-item hero-item">
|
|
48
|
+
<h3>Hero Feature</h3>
|
|
49
|
+
<p>This item spans multiple columns and rows, creating a focal point in your layout.</p>
|
|
50
|
+
<button class="btn">Explore</button>
|
|
51
|
+
</div>
|
|
52
|
+
<div class="feature-item">
|
|
53
|
+
<span class="icon">🚀</span>
|
|
54
|
+
<h4>Launch</h4>
|
|
55
|
+
</div>
|
|
56
|
+
<div class="feature-item">
|
|
57
|
+
<span class="icon">💡</span>
|
|
58
|
+
<h4>Ideas</h4>
|
|
59
|
+
</div>
|
|
60
|
+
<div class="feature-item">
|
|
61
|
+
<span class="icon">🎯</span>
|
|
62
|
+
<h4>Target</h4>
|
|
63
|
+
</div>
|
|
64
|
+
<div class="feature-item">
|
|
65
|
+
<span class="icon">📊</span>
|
|
66
|
+
<h4>Analytics</h4>
|
|
67
|
+
</div>
|
|
68
|
+
<div class="feature-item">
|
|
69
|
+
<span class="icon">🔧</span>
|
|
70
|
+
<h4>Tools</h4>
|
|
71
|
+
</div>
|
|
72
|
+
</div>
|
|
73
|
+
</section>
|
|
74
|
+
|
|
75
|
+
<!-- Auto-fit Grid -->
|
|
76
|
+
<section class="section">
|
|
77
|
+
<h2 class="section-title">Auto-Fit Grid</h2>
|
|
78
|
+
<div class="auto-grid">
|
|
79
|
+
<div class="auto-item">
|
|
80
|
+
<div class="auto-content">
|
|
81
|
+
<span class="number">01</span>
|
|
82
|
+
<h4>First</h4>
|
|
83
|
+
<p>Automatically adjusts</p>
|
|
84
|
+
</div>
|
|
85
|
+
</div>
|
|
86
|
+
<div class="auto-item">
|
|
87
|
+
<div class="auto-content">
|
|
88
|
+
<span class="number">02</span>
|
|
89
|
+
<h4>Second</h4>
|
|
90
|
+
<p>Flexible layout</p>
|
|
91
|
+
</div>
|
|
92
|
+
</div>
|
|
93
|
+
<div class="auto-item">
|
|
94
|
+
<div class="auto-content">
|
|
95
|
+
<span class="number">03</span>
|
|
96
|
+
<h4>Third</h4>
|
|
97
|
+
<p>Perfect spacing</p>
|
|
98
|
+
</div>
|
|
99
|
+
</div>
|
|
100
|
+
<div class="auto-item">
|
|
101
|
+
<div class="auto-content">
|
|
102
|
+
<span class="number">04</span>
|
|
103
|
+
<h4>Fourth</h4>
|
|
104
|
+
<p>Responsive design</p>
|
|
105
|
+
</div>
|
|
106
|
+
</div>
|
|
107
|
+
<div class="auto-item">
|
|
108
|
+
<div class="auto-content">
|
|
109
|
+
<span class="number">05</span>
|
|
110
|
+
<h4>Fifth</h4>
|
|
111
|
+
<p>Modern approach</p>
|
|
112
|
+
</div>
|
|
113
|
+
</div>
|
|
114
|
+
<div class="auto-item">
|
|
115
|
+
<div class="auto-content">
|
|
116
|
+
<span class="number">06</span>
|
|
117
|
+
<h4>Sixth</h4>
|
|
118
|
+
<p>Clean code</p>
|
|
119
|
+
</div>
|
|
120
|
+
</div>
|
|
121
|
+
</div>
|
|
122
|
+
</section>
|
|
123
|
+
|
|
124
|
+
<!-- Complex Grid -->
|
|
125
|
+
<section class="section">
|
|
126
|
+
<h2 class="section-title">Complex Grid Layout</h2>
|
|
127
|
+
<div class="complex-grid">
|
|
128
|
+
<div class="complex-item sidebar">
|
|
129
|
+
<h4>Sidebar</h4>
|
|
130
|
+
<ul>
|
|
131
|
+
<li>Dashboard</li>
|
|
132
|
+
<li>Projects</li>
|
|
133
|
+
<li>Tasks</li>
|
|
134
|
+
<li>Settings</li>
|
|
135
|
+
</ul>
|
|
136
|
+
</div>
|
|
137
|
+
<div class="complex-item header">
|
|
138
|
+
<h3>Header Section</h3>
|
|
139
|
+
<p>Welcome back!</p>
|
|
140
|
+
</div>
|
|
141
|
+
<div class="complex-item content">
|
|
142
|
+
<h4>Main Content</h4>
|
|
143
|
+
<p>This area can contain your primary content with flexible dimensions.</p>
|
|
144
|
+
</div>
|
|
145
|
+
<div class="complex-item widget-1">
|
|
146
|
+
<span class="icon">📈</span>
|
|
147
|
+
<strong>+25%</strong>
|
|
148
|
+
<small>Growth</small>
|
|
149
|
+
</div>
|
|
150
|
+
<div class="complex-item widget-2">
|
|
151
|
+
<span class="icon">👥</span>
|
|
152
|
+
<strong>1.2K</strong>
|
|
153
|
+
<small>Users</small>
|
|
154
|
+
</div>
|
|
155
|
+
<div class="complex-item footer">
|
|
156
|
+
<p>© 2026 Grid Layout</p>
|
|
157
|
+
</div>
|
|
158
|
+
</div>
|
|
159
|
+
</section>
|
|
160
|
+
</div>
|
|
161
|
+
|
|
162
|
+
<script src="script.js"></script>
|
|
163
|
+
</body>
|
|
164
|
+
</html>
|
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
// Grid Layout Component JavaScript
|
|
2
|
+
console.log('Grid Layout Component initialized');
|
|
3
|
+
|
|
4
|
+
document.addEventListener('DOMContentLoaded', () => {
|
|
5
|
+
// Add intersection observer for animation on scroll
|
|
6
|
+
const observerOptions = {
|
|
7
|
+
root: null,
|
|
8
|
+
rootMargin: '0px',
|
|
9
|
+
threshold: 0.1
|
|
10
|
+
};
|
|
11
|
+
|
|
12
|
+
const observer = new IntersectionObserver((entries) => {
|
|
13
|
+
entries.forEach(entry => {
|
|
14
|
+
if (entry.isIntersecting) {
|
|
15
|
+
entry.target.style.animation = 'slideUp 0.8s ease forwards';
|
|
16
|
+
observer.unobserve(entry.target);
|
|
17
|
+
}
|
|
18
|
+
});
|
|
19
|
+
}, observerOptions);
|
|
20
|
+
|
|
21
|
+
// Observe all sections
|
|
22
|
+
document.querySelectorAll('.section').forEach(section => {
|
|
23
|
+
observer.observe(section);
|
|
24
|
+
});
|
|
25
|
+
|
|
26
|
+
// Add click handlers to grid items
|
|
27
|
+
const gridItems = document.querySelectorAll('.grid-item, .feature-item, .auto-item');
|
|
28
|
+
gridItems.forEach(item => {
|
|
29
|
+
item.addEventListener('click', function() {
|
|
30
|
+
this.style.animation = 'pulse 0.5s ease';
|
|
31
|
+
setTimeout(() => {
|
|
32
|
+
this.style.animation = '';
|
|
33
|
+
}, 500);
|
|
34
|
+
});
|
|
35
|
+
});
|
|
36
|
+
|
|
37
|
+
// Sidebar navigation
|
|
38
|
+
const sidebarItems = document.querySelectorAll('.sidebar li');
|
|
39
|
+
sidebarItems.forEach(item => {
|
|
40
|
+
item.addEventListener('click', function() {
|
|
41
|
+
// Remove active class from all items
|
|
42
|
+
sidebarItems.forEach(i => i.style.fontWeight = 'normal');
|
|
43
|
+
// Add active class to clicked item
|
|
44
|
+
this.style.fontWeight = 'bold';
|
|
45
|
+
console.log('Navigation clicked:', this.textContent);
|
|
46
|
+
});
|
|
47
|
+
});
|
|
48
|
+
|
|
49
|
+
// Add hover effect sound (optional)
|
|
50
|
+
const allItems = document.querySelectorAll('.grid-item, .feature-item, .auto-item, .complex-item');
|
|
51
|
+
allItems.forEach(item => {
|
|
52
|
+
item.addEventListener('mouseenter', function() {
|
|
53
|
+
this.style.transition = 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)';
|
|
54
|
+
});
|
|
55
|
+
});
|
|
56
|
+
|
|
57
|
+
// Log grid layout info
|
|
58
|
+
console.log('Grid items loaded:', document.querySelectorAll('.grid-item').length);
|
|
59
|
+
console.log('Feature items loaded:', document.querySelectorAll('.feature-item').length);
|
|
60
|
+
console.log('Auto items loaded:', document.querySelectorAll('.auto-item').length);
|
|
61
|
+
});
|
|
62
|
+
|
|
63
|
+
// Add pulse animation style
|
|
64
|
+
const style = document.createElement('style');
|
|
65
|
+
style.textContent = `
|
|
66
|
+
@keyframes pulse {
|
|
67
|
+
0%, 100% {
|
|
68
|
+
transform: scale(1);
|
|
69
|
+
}
|
|
70
|
+
50% {
|
|
71
|
+
transform: scale(0.95);
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
`;
|
|
75
|
+
document.head.appendChild(style);
|