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,196 @@
|
|
|
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}} - Masonry Grid Component</title>
|
|
7
|
+
<link rel="stylesheet" href="style.css">
|
|
8
|
+
</head>
|
|
9
|
+
<body>
|
|
10
|
+
<div class="container">
|
|
11
|
+
<header class="header">
|
|
12
|
+
<h1>Masonry Grid Gallery</h1>
|
|
13
|
+
<p>Pinterest-style dynamic layout</p>
|
|
14
|
+
<div class="filter-buttons">
|
|
15
|
+
<button class="filter-btn active" data-filter="all">All</button>
|
|
16
|
+
<button class="filter-btn" data-filter="design">Design</button>
|
|
17
|
+
<button class="filter-btn" data-filter="photo">Photo</button>
|
|
18
|
+
<button class="filter-btn" data-filter="art">Art</button>
|
|
19
|
+
</div>
|
|
20
|
+
</header>
|
|
21
|
+
|
|
22
|
+
<div class="masonry-grid" id="masonryGrid">
|
|
23
|
+
<!-- Design Items -->
|
|
24
|
+
<div class="masonry-item design" data-category="design">
|
|
25
|
+
<div class="item-content gradient-1">
|
|
26
|
+
<span class="category-tag">Design</span>
|
|
27
|
+
<div class="item-info">
|
|
28
|
+
<h3>Modern UI Design</h3>
|
|
29
|
+
<p>Beautiful interface concepts</p>
|
|
30
|
+
<div class="item-meta">
|
|
31
|
+
<span>🎨 Design</span>
|
|
32
|
+
<span>❤️ 234</span>
|
|
33
|
+
</div>
|
|
34
|
+
</div>
|
|
35
|
+
</div>
|
|
36
|
+
</div>
|
|
37
|
+
|
|
38
|
+
<div class="masonry-item photo" data-category="photo">
|
|
39
|
+
<div class="item-content gradient-2">
|
|
40
|
+
<span class="category-tag">Photo</span>
|
|
41
|
+
<div class="item-info">
|
|
42
|
+
<h3>Nature Photography</h3>
|
|
43
|
+
<p>Stunning landscapes</p>
|
|
44
|
+
<div class="item-meta">
|
|
45
|
+
<span>📷 Photo</span>
|
|
46
|
+
<span>❤️ 567</span>
|
|
47
|
+
</div>
|
|
48
|
+
</div>
|
|
49
|
+
</div>
|
|
50
|
+
</div>
|
|
51
|
+
|
|
52
|
+
<div class="masonry-item art tall" data-category="art">
|
|
53
|
+
<div class="item-content gradient-3">
|
|
54
|
+
<span class="category-tag">Art</span>
|
|
55
|
+
<div class="item-info">
|
|
56
|
+
<h3>Digital Art Collection</h3>
|
|
57
|
+
<p>Creative illustrations and paintings</p>
|
|
58
|
+
<div class="item-meta">
|
|
59
|
+
<span>🖼️ Art</span>
|
|
60
|
+
<span>❤️ 892</span>
|
|
61
|
+
</div>
|
|
62
|
+
</div>
|
|
63
|
+
</div>
|
|
64
|
+
</div>
|
|
65
|
+
|
|
66
|
+
<div class="masonry-item design" data-category="design">
|
|
67
|
+
<div class="item-content gradient-4">
|
|
68
|
+
<span class="category-tag">Design</span>
|
|
69
|
+
<div class="item-info">
|
|
70
|
+
<h3>Logo Design</h3>
|
|
71
|
+
<p>Brand identity concepts</p>
|
|
72
|
+
<div class="item-meta">
|
|
73
|
+
<span>🎨 Design</span>
|
|
74
|
+
<span>❤️ 445</span>
|
|
75
|
+
</div>
|
|
76
|
+
</div>
|
|
77
|
+
</div>
|
|
78
|
+
</div>
|
|
79
|
+
|
|
80
|
+
<div class="masonry-item photo tall" data-category="photo">
|
|
81
|
+
<div class="item-content gradient-5">
|
|
82
|
+
<span class="category-tag">Photo</span>
|
|
83
|
+
<div class="item-info">
|
|
84
|
+
<h3>Urban Photography</h3>
|
|
85
|
+
<p>City life captured in stunning detail</p>
|
|
86
|
+
<div class="item-meta">
|
|
87
|
+
<span>📷 Photo</span>
|
|
88
|
+
<span>❤️ 678</span>
|
|
89
|
+
</div>
|
|
90
|
+
</div>
|
|
91
|
+
</div>
|
|
92
|
+
</div>
|
|
93
|
+
|
|
94
|
+
<div class="masonry-item design" data-category="design">
|
|
95
|
+
<div class="item-content gradient-6">
|
|
96
|
+
<span class="category-tag">Design</span>
|
|
97
|
+
<div class="item-info">
|
|
98
|
+
<h3>Web Design</h3>
|
|
99
|
+
<p>Responsive layouts</p>
|
|
100
|
+
<div class="item-meta">
|
|
101
|
+
<span>🎨 Design</span>
|
|
102
|
+
<span>❤️ 321</span>
|
|
103
|
+
</div>
|
|
104
|
+
</div>
|
|
105
|
+
</div>
|
|
106
|
+
</div>
|
|
107
|
+
|
|
108
|
+
<div class="masonry-item art" data-category="art">
|
|
109
|
+
<div class="item-content gradient-7">
|
|
110
|
+
<span class="category-tag">Art</span>
|
|
111
|
+
<div class="item-info">
|
|
112
|
+
<h3>Abstract Art</h3>
|
|
113
|
+
<p>Modern expressions</p>
|
|
114
|
+
<div class="item-meta">
|
|
115
|
+
<span>🖼️ Art</span>
|
|
116
|
+
<span>❤️ 756</span>
|
|
117
|
+
</div>
|
|
118
|
+
</div>
|
|
119
|
+
</div>
|
|
120
|
+
</div>
|
|
121
|
+
|
|
122
|
+
<div class="masonry-item photo" data-category="photo">
|
|
123
|
+
<div class="item-content gradient-8">
|
|
124
|
+
<span class="category-tag">Photo</span>
|
|
125
|
+
<div class="item-info">
|
|
126
|
+
<h3>Portrait Photography</h3>
|
|
127
|
+
<p>Capturing emotions</p>
|
|
128
|
+
<div class="item-meta">
|
|
129
|
+
<span>📷 Photo</span>
|
|
130
|
+
<span>❤️ 923</span>
|
|
131
|
+
</div>
|
|
132
|
+
</div>
|
|
133
|
+
</div>
|
|
134
|
+
</div>
|
|
135
|
+
|
|
136
|
+
<div class="masonry-item design tall" data-category="design">
|
|
137
|
+
<div class="item-content gradient-9">
|
|
138
|
+
<span class="category-tag">Design</span>
|
|
139
|
+
<div class="item-info">
|
|
140
|
+
<h3>App Design</h3>
|
|
141
|
+
<p>Mobile application interfaces with modern aesthetics</p>
|
|
142
|
+
<div class="item-meta">
|
|
143
|
+
<span>🎨 Design</span>
|
|
144
|
+
<span>❤️ 534</span>
|
|
145
|
+
</div>
|
|
146
|
+
</div>
|
|
147
|
+
</div>
|
|
148
|
+
</div>
|
|
149
|
+
|
|
150
|
+
<div class="masonry-item art" data-category="art">
|
|
151
|
+
<div class="item-content gradient-10">
|
|
152
|
+
<span class="category-tag">Art</span>
|
|
153
|
+
<div class="item-info">
|
|
154
|
+
<h3>3D Art</h3>
|
|
155
|
+
<p>Stunning renders</p>
|
|
156
|
+
<div class="item-meta">
|
|
157
|
+
<span>🖼️ Art</span>
|
|
158
|
+
<span>❤️ 612</span>
|
|
159
|
+
</div>
|
|
160
|
+
</div>
|
|
161
|
+
</div>
|
|
162
|
+
</div>
|
|
163
|
+
|
|
164
|
+
<div class="masonry-item photo" data-category="photo">
|
|
165
|
+
<div class="item-content gradient-11">
|
|
166
|
+
<span class="category-tag">Photo</span>
|
|
167
|
+
<div class="item-info">
|
|
168
|
+
<h3>Travel Photography</h3>
|
|
169
|
+
<p>World adventures</p>
|
|
170
|
+
<div class="item-meta">
|
|
171
|
+
<span>📷 Photo</span>
|
|
172
|
+
<span>❤️ 834</span>
|
|
173
|
+
</div>
|
|
174
|
+
</div>
|
|
175
|
+
</div>
|
|
176
|
+
</div>
|
|
177
|
+
|
|
178
|
+
<div class="masonry-item design" data-category="design">
|
|
179
|
+
<div class="item-content gradient-12">
|
|
180
|
+
<span class="category-tag">Design</span>
|
|
181
|
+
<div class="item-info">
|
|
182
|
+
<h3>Typography</h3>
|
|
183
|
+
<p>Font design showcase</p>
|
|
184
|
+
<div class="item-meta">
|
|
185
|
+
<span>🎨 Design</span>
|
|
186
|
+
<span>❤️ 445</span>
|
|
187
|
+
</div>
|
|
188
|
+
</div>
|
|
189
|
+
</div>
|
|
190
|
+
</div>
|
|
191
|
+
</div>
|
|
192
|
+
</div>
|
|
193
|
+
|
|
194
|
+
<script src="script.js"></script>
|
|
195
|
+
</body>
|
|
196
|
+
</html>
|
|
@@ -0,0 +1,122 @@
|
|
|
1
|
+
// Masonry Grid Component JavaScript
|
|
2
|
+
console.log('Masonry Grid Component initialized');
|
|
3
|
+
|
|
4
|
+
document.addEventListener('DOMContentLoaded', () => {
|
|
5
|
+
const filterButtons = document.querySelectorAll('.filter-btn');
|
|
6
|
+
const masonryItems = document.querySelectorAll('.masonry-item');
|
|
7
|
+
|
|
8
|
+
// Filter functionality
|
|
9
|
+
filterButtons.forEach(button => {
|
|
10
|
+
button.addEventListener('click', function() {
|
|
11
|
+
// Remove active class from all buttons
|
|
12
|
+
filterButtons.forEach(btn => btn.classList.remove('active'));
|
|
13
|
+
|
|
14
|
+
// Add active class to clicked button
|
|
15
|
+
this.classList.add('active');
|
|
16
|
+
|
|
17
|
+
const filterValue = this.getAttribute('data-filter');
|
|
18
|
+
|
|
19
|
+
// Filter items with animation
|
|
20
|
+
masonryItems.forEach((item, index) => {
|
|
21
|
+
const category = item.getAttribute('data-category');
|
|
22
|
+
|
|
23
|
+
if (filterValue === 'all' || category === filterValue) {
|
|
24
|
+
// Show item with staggered animation
|
|
25
|
+
setTimeout(() => {
|
|
26
|
+
item.classList.remove('hidden');
|
|
27
|
+
item.style.animation = 'fadeInUp 0.6s ease forwards';
|
|
28
|
+
}, index * 50);
|
|
29
|
+
} else {
|
|
30
|
+
// Hide item
|
|
31
|
+
item.style.animation = 'fadeOut 0.3s ease forwards';
|
|
32
|
+
setTimeout(() => {
|
|
33
|
+
item.classList.add('hidden');
|
|
34
|
+
}, 300);
|
|
35
|
+
}
|
|
36
|
+
});
|
|
37
|
+
|
|
38
|
+
console.log('Filter applied:', filterValue);
|
|
39
|
+
});
|
|
40
|
+
});
|
|
41
|
+
|
|
42
|
+
// Add click handlers to masonry items
|
|
43
|
+
masonryItems.forEach(item => {
|
|
44
|
+
item.addEventListener('click', function() {
|
|
45
|
+
const title = this.querySelector('h3').textContent;
|
|
46
|
+
console.log('Item clicked:', title);
|
|
47
|
+
|
|
48
|
+
// Add pulse effect
|
|
49
|
+
this.style.animation = 'pulse 0.5s ease';
|
|
50
|
+
setTimeout(() => {
|
|
51
|
+
this.style.animation = '';
|
|
52
|
+
}, 500);
|
|
53
|
+
|
|
54
|
+
// You can add modal or detailed view here
|
|
55
|
+
});
|
|
56
|
+
});
|
|
57
|
+
|
|
58
|
+
// Like button functionality (if you want to add interactive hearts)
|
|
59
|
+
const metaItems = document.querySelectorAll('.item-meta span:last-child');
|
|
60
|
+
metaItems.forEach(meta => {
|
|
61
|
+
meta.style.cursor = 'pointer';
|
|
62
|
+
meta.addEventListener('click', function(e) {
|
|
63
|
+
e.stopPropagation();
|
|
64
|
+
const currentLikes = parseInt(this.textContent.match(/\d+/)[0]);
|
|
65
|
+
const newLikes = currentLikes + 1;
|
|
66
|
+
this.textContent = `❤️ ${newLikes}`;
|
|
67
|
+
|
|
68
|
+
// Add animation
|
|
69
|
+
this.style.transform = 'scale(1.3)';
|
|
70
|
+
setTimeout(() => {
|
|
71
|
+
this.style.transform = 'scale(1)';
|
|
72
|
+
}, 300);
|
|
73
|
+
});
|
|
74
|
+
});
|
|
75
|
+
|
|
76
|
+
// Intersection Observer for lazy animation
|
|
77
|
+
const observerOptions = {
|
|
78
|
+
root: null,
|
|
79
|
+
rootMargin: '0px',
|
|
80
|
+
threshold: 0.1
|
|
81
|
+
};
|
|
82
|
+
|
|
83
|
+
const observer = new IntersectionObserver((entries) => {
|
|
84
|
+
entries.forEach(entry => {
|
|
85
|
+
if (entry.isIntersecting) {
|
|
86
|
+
entry.target.style.opacity = '1';
|
|
87
|
+
entry.target.style.transform = 'translateY(0)';
|
|
88
|
+
}
|
|
89
|
+
});
|
|
90
|
+
}, observerOptions);
|
|
91
|
+
|
|
92
|
+
masonryItems.forEach(item => {
|
|
93
|
+
observer.observe(item);
|
|
94
|
+
});
|
|
95
|
+
|
|
96
|
+
console.log('Total items:', masonryItems.length);
|
|
97
|
+
});
|
|
98
|
+
|
|
99
|
+
// Add fadeOut animation style
|
|
100
|
+
const style = document.createElement('style');
|
|
101
|
+
style.textContent = `
|
|
102
|
+
@keyframes fadeOut {
|
|
103
|
+
from {
|
|
104
|
+
opacity: 1;
|
|
105
|
+
transform: translateY(0);
|
|
106
|
+
}
|
|
107
|
+
to {
|
|
108
|
+
opacity: 0;
|
|
109
|
+
transform: translateY(-20px);
|
|
110
|
+
}
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
@keyframes pulse {
|
|
114
|
+
0%, 100% {
|
|
115
|
+
transform: scale(1);
|
|
116
|
+
}
|
|
117
|
+
50% {
|
|
118
|
+
transform: scale(0.98);
|
|
119
|
+
}
|
|
120
|
+
}
|
|
121
|
+
`;
|
|
122
|
+
document.head.appendChild(style);
|
|
@@ -0,0 +1,259 @@
|
|
|
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, #0f0c29 0%, #302b63 50%, #24243e 100%);
|
|
10
|
+
min-height: 100vh;
|
|
11
|
+
padding: 40px 20px;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
.container {
|
|
15
|
+
max-width: 1400px;
|
|
16
|
+
margin: 0 auto;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
/* Header */
|
|
20
|
+
.header {
|
|
21
|
+
text-align: center;
|
|
22
|
+
padding: 60px 20px;
|
|
23
|
+
margin-bottom: 60px;
|
|
24
|
+
animation: fadeInDown 0.8s ease;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.header h1 {
|
|
28
|
+
font-size: 4rem;
|
|
29
|
+
color: white;
|
|
30
|
+
margin-bottom: 15px;
|
|
31
|
+
font-weight: 700;
|
|
32
|
+
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
.header p {
|
|
36
|
+
font-size: 1.5rem;
|
|
37
|
+
color: rgba(255, 255, 255, 0.8);
|
|
38
|
+
margin-bottom: 40px;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
/* Filter Buttons */
|
|
42
|
+
.filter-buttons {
|
|
43
|
+
display: flex;
|
|
44
|
+
gap: 15px;
|
|
45
|
+
justify-content: center;
|
|
46
|
+
flex-wrap: wrap;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
.filter-btn {
|
|
50
|
+
padding: 12px 30px;
|
|
51
|
+
background: rgba(255, 255, 255, 0.1);
|
|
52
|
+
backdrop-filter: blur(10px);
|
|
53
|
+
border: 2px solid rgba(255, 255, 255, 0.2);
|
|
54
|
+
border-radius: 30px;
|
|
55
|
+
color: white;
|
|
56
|
+
font-size: 1rem;
|
|
57
|
+
font-weight: 600;
|
|
58
|
+
cursor: pointer;
|
|
59
|
+
transition: all 0.3s ease;
|
|
60
|
+
text-transform: uppercase;
|
|
61
|
+
letter-spacing: 1px;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
.filter-btn:hover {
|
|
65
|
+
background: rgba(255, 255, 255, 0.2);
|
|
66
|
+
transform: translateY(-3px);
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
.filter-btn.active {
|
|
70
|
+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
71
|
+
border-color: transparent;
|
|
72
|
+
box-shadow: 0 5px 20px rgba(102, 126, 234, 0.4);
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
/* Masonry Grid */
|
|
76
|
+
.masonry-grid {
|
|
77
|
+
column-count: 4;
|
|
78
|
+
column-gap: 25px;
|
|
79
|
+
padding: 20px;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
.masonry-item {
|
|
83
|
+
break-inside: avoid;
|
|
84
|
+
margin-bottom: 25px;
|
|
85
|
+
opacity: 0;
|
|
86
|
+
animation: fadeInUp 0.6s ease forwards;
|
|
87
|
+
transition: all 0.3s ease;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
.masonry-item.hidden {
|
|
91
|
+
display: none;
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
/* Stagger animation delays */
|
|
95
|
+
.masonry-item:nth-child(1) { animation-delay: 0.1s; }
|
|
96
|
+
.masonry-item:nth-child(2) { animation-delay: 0.2s; }
|
|
97
|
+
.masonry-item:nth-child(3) { animation-delay: 0.3s; }
|
|
98
|
+
.masonry-item:nth-child(4) { animation-delay: 0.4s; }
|
|
99
|
+
.masonry-item:nth-child(5) { animation-delay: 0.5s; }
|
|
100
|
+
.masonry-item:nth-child(6) { animation-delay: 0.6s; }
|
|
101
|
+
.masonry-item:nth-child(7) { animation-delay: 0.7s; }
|
|
102
|
+
.masonry-item:nth-child(8) { animation-delay: 0.8s; }
|
|
103
|
+
.masonry-item:nth-child(9) { animation-delay: 0.9s; }
|
|
104
|
+
.masonry-item:nth-child(10) { animation-delay: 1s; }
|
|
105
|
+
.masonry-item:nth-child(11) { animation-delay: 1.1s; }
|
|
106
|
+
.masonry-item:nth-child(12) { animation-delay: 1.2s; }
|
|
107
|
+
|
|
108
|
+
/* Item Content */
|
|
109
|
+
.item-content {
|
|
110
|
+
position: relative;
|
|
111
|
+
border-radius: 20px;
|
|
112
|
+
overflow: hidden;
|
|
113
|
+
cursor: pointer;
|
|
114
|
+
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
|
115
|
+
padding: 30px;
|
|
116
|
+
min-height: 250px;
|
|
117
|
+
display: flex;
|
|
118
|
+
flex-direction: column;
|
|
119
|
+
justify-content: flex-end;
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
.masonry-item.tall .item-content {
|
|
123
|
+
min-height: 400px;
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
.item-content::before {
|
|
127
|
+
content: '';
|
|
128
|
+
position: absolute;
|
|
129
|
+
inset: 0;
|
|
130
|
+
background: rgba(0, 0, 0, 0.3);
|
|
131
|
+
transition: background 0.3s ease;
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
.item-content:hover::before {
|
|
135
|
+
background: rgba(0, 0, 0, 0.5);
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
.item-content:hover {
|
|
139
|
+
transform: translateY(-8px);
|
|
140
|
+
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
/* Category Tag */
|
|
144
|
+
.category-tag {
|
|
145
|
+
position: absolute;
|
|
146
|
+
top: 20px;
|
|
147
|
+
right: 20px;
|
|
148
|
+
background: rgba(255, 255, 255, 0.2);
|
|
149
|
+
backdrop-filter: blur(10px);
|
|
150
|
+
padding: 8px 20px;
|
|
151
|
+
border-radius: 20px;
|
|
152
|
+
color: white;
|
|
153
|
+
font-size: 0.9rem;
|
|
154
|
+
font-weight: 600;
|
|
155
|
+
z-index: 2;
|
|
156
|
+
border: 1px solid rgba(255, 255, 255, 0.3);
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
/* Item Info */
|
|
160
|
+
.item-info {
|
|
161
|
+
position: relative;
|
|
162
|
+
z-index: 2;
|
|
163
|
+
color: white;
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
.item-info h3 {
|
|
167
|
+
font-size: 1.8rem;
|
|
168
|
+
margin-bottom: 10px;
|
|
169
|
+
font-weight: 700;
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
.item-info p {
|
|
173
|
+
font-size: 1.1rem;
|
|
174
|
+
margin-bottom: 20px;
|
|
175
|
+
opacity: 0.95;
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
.item-meta {
|
|
179
|
+
display: flex;
|
|
180
|
+
gap: 20px;
|
|
181
|
+
font-size: 1rem;
|
|
182
|
+
opacity: 0.9;
|
|
183
|
+
}
|
|
184
|
+
|
|
185
|
+
/* Gradient Backgrounds */
|
|
186
|
+
.gradient-1 { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
|
|
187
|
+
.gradient-2 { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); }
|
|
188
|
+
.gradient-3 { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); }
|
|
189
|
+
.gradient-4 { background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); }
|
|
190
|
+
.gradient-5 { background: linear-gradient(135deg, #fa709a 0%, #fee140 100%); }
|
|
191
|
+
.gradient-6 { background: linear-gradient(135deg, #30cfd0 0%, #330867 100%); }
|
|
192
|
+
.gradient-7 { background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%); }
|
|
193
|
+
.gradient-8 { background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%); }
|
|
194
|
+
.gradient-9 { background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%); }
|
|
195
|
+
.gradient-10 { background: linear-gradient(135deg, #ff6e7f 0%, #bfe9ff 100%); }
|
|
196
|
+
.gradient-11 { background: linear-gradient(135deg, #e0c3fc 0%, #8ec5fc 100%); }
|
|
197
|
+
.gradient-12 { background: linear-gradient(135deg, #f77062 0%, #fe5196 100%); }
|
|
198
|
+
|
|
199
|
+
/* Animations */
|
|
200
|
+
@keyframes fadeInDown {
|
|
201
|
+
from {
|
|
202
|
+
opacity: 0;
|
|
203
|
+
transform: translateY(-30px);
|
|
204
|
+
}
|
|
205
|
+
to {
|
|
206
|
+
opacity: 1;
|
|
207
|
+
transform: translateY(0);
|
|
208
|
+
}
|
|
209
|
+
}
|
|
210
|
+
|
|
211
|
+
@keyframes fadeInUp {
|
|
212
|
+
from {
|
|
213
|
+
opacity: 0;
|
|
214
|
+
transform: translateY(30px);
|
|
215
|
+
}
|
|
216
|
+
to {
|
|
217
|
+
opacity: 1;
|
|
218
|
+
transform: translateY(0);
|
|
219
|
+
}
|
|
220
|
+
}
|
|
221
|
+
|
|
222
|
+
/* Responsive Design */
|
|
223
|
+
@media (max-width: 1200px) {
|
|
224
|
+
.masonry-grid {
|
|
225
|
+
column-count: 3;
|
|
226
|
+
}
|
|
227
|
+
}
|
|
228
|
+
|
|
229
|
+
@media (max-width: 900px) {
|
|
230
|
+
.masonry-grid {
|
|
231
|
+
column-count: 2;
|
|
232
|
+
}
|
|
233
|
+
|
|
234
|
+
.header h1 {
|
|
235
|
+
font-size: 3rem;
|
|
236
|
+
}
|
|
237
|
+
}
|
|
238
|
+
|
|
239
|
+
@media (max-width: 600px) {
|
|
240
|
+
.masonry-grid {
|
|
241
|
+
column-count: 1;
|
|
242
|
+
}
|
|
243
|
+
|
|
244
|
+
.header h1 {
|
|
245
|
+
font-size: 2.5rem;
|
|
246
|
+
}
|
|
247
|
+
|
|
248
|
+
.header p {
|
|
249
|
+
font-size: 1.2rem;
|
|
250
|
+
}
|
|
251
|
+
|
|
252
|
+
.item-info h3 {
|
|
253
|
+
font-size: 1.5rem;
|
|
254
|
+
}
|
|
255
|
+
|
|
256
|
+
.masonry-item.tall .item-content {
|
|
257
|
+
min-height: 300px;
|
|
258
|
+
}
|
|
259
|
+
}
|
|
@@ -0,0 +1,56 @@
|
|
|
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}} - Loading Spinner Component</title>
|
|
7
|
+
<link rel="stylesheet" href="style.css">
|
|
8
|
+
</head>
|
|
9
|
+
<body>
|
|
10
|
+
<div class="container">
|
|
11
|
+
<h1>Loading Spinners</h1>
|
|
12
|
+
|
|
13
|
+
<!-- Circle Spinner -->
|
|
14
|
+
<div class="spinner-group">
|
|
15
|
+
<h3>Circle Spinner</h3>
|
|
16
|
+
<div class="spinner spinner-circle"></div>
|
|
17
|
+
</div>
|
|
18
|
+
|
|
19
|
+
<!-- Dots Spinner -->
|
|
20
|
+
<div class="spinner-group">
|
|
21
|
+
<h3>Bouncing Dots</h3>
|
|
22
|
+
<div class="spinner spinner-dots">
|
|
23
|
+
<div class="dot"></div>
|
|
24
|
+
<div class="dot"></div>
|
|
25
|
+
<div class="dot"></div>
|
|
26
|
+
</div>
|
|
27
|
+
</div>
|
|
28
|
+
|
|
29
|
+
<!-- Pulse Spinner -->
|
|
30
|
+
<div class="spinner-group">
|
|
31
|
+
<h3>Pulse Loader</h3>
|
|
32
|
+
<div class="spinner spinner-pulse"></div>
|
|
33
|
+
</div>
|
|
34
|
+
|
|
35
|
+
<!-- Bar Spinner -->
|
|
36
|
+
<div class="spinner-group">
|
|
37
|
+
<h3>Bar Loader</h3>
|
|
38
|
+
<div class="spinner spinner-bars">
|
|
39
|
+
<div class="bar"></div>
|
|
40
|
+
<div class="bar"></div>
|
|
41
|
+
<div class="bar"></div>
|
|
42
|
+
<div class="bar"></div>
|
|
43
|
+
<div class="bar"></div>
|
|
44
|
+
</div>
|
|
45
|
+
</div>
|
|
46
|
+
|
|
47
|
+
<!-- Gradient Spinner -->
|
|
48
|
+
<div class="spinner-group">
|
|
49
|
+
<h3>Gradient Ring</h3>
|
|
50
|
+
<div class="spinner spinner-gradient"></div>
|
|
51
|
+
</div>
|
|
52
|
+
</div>
|
|
53
|
+
|
|
54
|
+
<script src="script.js"></script>
|
|
55
|
+
</body>
|
|
56
|
+
</html>
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
// Loading Spinner Component JavaScript
|
|
2
|
+
console.log('Loading Spinner Component initialized');
|
|
3
|
+
|
|
4
|
+
// Optional: Simulate loading state
|
|
5
|
+
document.addEventListener('DOMContentLoaded', () => {
|
|
6
|
+
console.log('All spinners are animated and ready');
|
|
7
|
+
});
|
|
8
|
+
|
|
9
|
+
// Example function to show/hide spinner
|
|
10
|
+
function showSpinner(spinnerId) {
|
|
11
|
+
const spinner = document.getElementById(spinnerId);
|
|
12
|
+
if (spinner) {
|
|
13
|
+
spinner.style.display = 'block';
|
|
14
|
+
}
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
function hideSpinner(spinnerId) {
|
|
18
|
+
const spinner = document.getElementById(spinnerId);
|
|
19
|
+
if (spinner) {
|
|
20
|
+
spinner.style.display = 'none';
|
|
21
|
+
}
|
|
22
|
+
}
|