appscms-tools-theme 5.2.2 → 5.2.3
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.
- checksums.yaml +4 -4
- data/_data/feature/en/3_shop_posters.json +456 -1
- data/_data/home/en/ens.json +4 -4
- data/_data/templates.json +17459 -0
- data/_data/vintage/en/test.json +142 -0
- data/_includes/.DS_Store +0 -0
- data/_includes/appscms/footer/ai-image-tools-footer.html +14 -0
- data/_includes/appscms/head/head.html +61 -36
- data/_includes/appscms/headings/ai-image-tools-headings.html +24 -0
- data/_includes/appscms/navbars/ai-image-tools-navbar.html +446 -0
- data/_includes/appscms/scripts/script.html +17 -3
- data/_layouts/ai-image-generator.html +307 -0
- data/_layouts/ai-image-home.html +160 -0
- data/_layouts/ai-image-pricing.html +366 -0
- data/assets/css/ai-image-generator.css +547 -0
- data/assets/css/ai-image-home.css +760 -0
- data/assets/css/appscms-variables.css +1 -1
- data/assets/js/appscms-login.js +1 -1
- data/assets/js/get-credits.js +91 -0
- metadata +13 -2
|
@@ -0,0 +1,307 @@
|
|
|
1
|
+
{% assign file = page.fileName %}
|
|
2
|
+
{% assign lang = page.lang %}
|
|
3
|
+
{% assign folder = page.folderName %}
|
|
4
|
+
{% assign pageData = site.data[folder][lang][file] %}
|
|
5
|
+
<!DOCTYPE html>
|
|
6
|
+
<html lang="{{ page.lang }}">
|
|
7
|
+
{%- include appscms/head/head.html -%}
|
|
8
|
+
|
|
9
|
+
<body data-developer-key="{{ site.developerKey }}" data-client-id="{{ site.clientId }}" data-app-id="{{ site.appId }}"
|
|
10
|
+
data-dropbox-apikey="{{ site.dropboxapikey }}">
|
|
11
|
+
<div class="container">
|
|
12
|
+
|
|
13
|
+
{%- include /appscms/navbars/ai-image-tools-navbar.html -%}
|
|
14
|
+
|
|
15
|
+
{%- include /appscms/headings/ai-image-tools-headings.html -%}
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
<main class="main-container">
|
|
19
|
+
<div class="left-panel">
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
<div class="file-info">
|
|
23
|
+
<div>
|
|
24
|
+
<div class="file-info-text" style="font-weight: 600;">Input image</div>
|
|
25
|
+
|
|
26
|
+
</div>
|
|
27
|
+
|
|
28
|
+
<button class="select-file-btn"><svg width="15px" data-v-de957b30="" class="w-3.5 h-3.5" fill="none"
|
|
29
|
+
stroke="currentColor" viewBox="0 0 24 24">
|
|
30
|
+
<path data-v-de957b30="" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
31
|
+
d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"></path>
|
|
32
|
+
</svg> Select File</button>
|
|
33
|
+
</div>
|
|
34
|
+
|
|
35
|
+
<div class="upload-area">
|
|
36
|
+
<div class="upload-icon"><svg style="color: #999" xmlns="http://www.w3.org/2000/svg" width="30"
|
|
37
|
+
height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
|
|
38
|
+
stroke-linecap="round" stroke-linejoin="round"
|
|
39
|
+
class="lucide lucide-image-plus h-10 w-10 text-zinc-500 mb-2">
|
|
40
|
+
<path d="M16 5h6"></path>
|
|
41
|
+
<path d="M19 2v6"></path>
|
|
42
|
+
<path d="M21 11.5V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7.5"></path>
|
|
43
|
+
<path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"></path>
|
|
44
|
+
<circle cx="9" cy="9" r="2"></circle>
|
|
45
|
+
</svg></div>
|
|
46
|
+
<div class="upload-text">Drag and drop an image here, or click to select</div>
|
|
47
|
+
<div class="upload-hint">PNG, JPG, JPEG, WebP • Max 10MB</div>
|
|
48
|
+
</div>
|
|
49
|
+
|
|
50
|
+
<div class="settings">
|
|
51
|
+
<label class="setting-label">Model</label>
|
|
52
|
+
<select class="select-box" id="modelSelect">
|
|
53
|
+
<option value="nano_banana">Nano Banana</option>
|
|
54
|
+
<option value="nano_banana_pro">Nano Banana Pro</option>
|
|
55
|
+
</select>
|
|
56
|
+
</div>
|
|
57
|
+
|
|
58
|
+
<div class="settings d-none">
|
|
59
|
+
<label class="setting-label">Additional Prompt</label>
|
|
60
|
+
<textarea name="" id="additionalPrompt"></textarea>
|
|
61
|
+
</div>
|
|
62
|
+
|
|
63
|
+
<div class="settings">
|
|
64
|
+
<label class="setting-label">Output</label>
|
|
65
|
+
<select class="select-box" id="outputFormat">
|
|
66
|
+
<option value="png">PNG</option>
|
|
67
|
+
<option value="jpg">JPG</option>
|
|
68
|
+
</select>
|
|
69
|
+
</div>
|
|
70
|
+
|
|
71
|
+
<button class="generate-btn">Generate Image</button>
|
|
72
|
+
</div>
|
|
73
|
+
|
|
74
|
+
<div class="right-panel">
|
|
75
|
+
<div class="preview-tabs">
|
|
76
|
+
<button class="preview-tab active">Preview</button>
|
|
77
|
+
</div>
|
|
78
|
+
|
|
79
|
+
<div class="preview-area">
|
|
80
|
+
<div class="preview-placeholder">
|
|
81
|
+
<div class="preview-placeholder-icon"><svg width="80px" style="color: #999" data-v-de957b30=""
|
|
82
|
+
class="w-16 h-16 text-[#09090b]/20" fill="none" stroke="currentColor"
|
|
83
|
+
viewBox="0 0 24 24">
|
|
84
|
+
<path data-v-de957b30="" stroke-linecap="round" stroke-linejoin="round"
|
|
85
|
+
stroke-width="1.5"
|
|
86
|
+
d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z">
|
|
87
|
+
</path>
|
|
88
|
+
</svg></div>
|
|
89
|
+
</div>
|
|
90
|
+
<div class="preview-title">Your generated image will appear here</div>
|
|
91
|
+
<div class="preview-subtitle">Fill in the prompt and click Generate to create an image</div>
|
|
92
|
+
</div>
|
|
93
|
+
</div>
|
|
94
|
+
</main>
|
|
95
|
+
|
|
96
|
+
<div class="popup-overlay" id="popupOverlay" onclick="closePopup()">
|
|
97
|
+
<div class="popup" onclick="event.stopPropagation()">
|
|
98
|
+
<div class="credits-popup-icon">💰</div>
|
|
99
|
+
<h2 class="credits-popup-title">Insufficient Credits</h2>
|
|
100
|
+
<p class="credits-popup-message">This generation requires 5 credits, but you currently have 0 credits. Please go to the pricing page
|
|
101
|
+
to top up and try again.</p>
|
|
102
|
+
<div class="buttons">
|
|
103
|
+
<button class="cancel utility_btn" onclick="closePopup()">Cancel</button>
|
|
104
|
+
<a href="/pricing">
|
|
105
|
+
<button class="pricing utility_btn" onclick="goToPricing()">Go to Pricing</button>
|
|
106
|
+
</a>
|
|
107
|
+
</div>
|
|
108
|
+
</div>
|
|
109
|
+
</div>
|
|
110
|
+
|
|
111
|
+
|
|
112
|
+
<br><br><br>
|
|
113
|
+
<div class="d-none container mt-5">
|
|
114
|
+
<h3 class="text-center my-4">✨ Amazing Features ✨</h3>
|
|
115
|
+
<div class="feature">
|
|
116
|
+
<div class="feature-image">
|
|
117
|
+
<i class="fas fa-rocket"></i>
|
|
118
|
+
</div>
|
|
119
|
+
<div class="feature-content">
|
|
120
|
+
<h2>Lightning Fast Performance</h2>
|
|
121
|
+
<p>Experience blazing fast load times and smooth interactions. Our optimized architecture ensures
|
|
122
|
+
your
|
|
123
|
+
application runs at peak performance, delivering an exceptional user experience every single
|
|
124
|
+
time.</p>
|
|
125
|
+
<button class="try-btn" onclick="alert('Feature 1 activated!')">Try Now</button>
|
|
126
|
+
</div>
|
|
127
|
+
</div>
|
|
128
|
+
<div class="feature">
|
|
129
|
+
<div class="feature-image">
|
|
130
|
+
<i class="fas fa-shield-alt"></i>
|
|
131
|
+
</div>
|
|
132
|
+
<div class="feature-content">
|
|
133
|
+
<h2>Enterprise-Grade Security</h2>
|
|
134
|
+
<p>Your data is protected with bank-level encryption and advanced security protocols. We implement
|
|
135
|
+
industry-leading security measures to ensure your information stays safe and private at all
|
|
136
|
+
times.</p>
|
|
137
|
+
<button class="try-btn" onclick="alert('Feature 2 activated!')">Try Now</button>
|
|
138
|
+
</div>
|
|
139
|
+
</div>
|
|
140
|
+
<div class="feature">
|
|
141
|
+
<div class="feature-image">
|
|
142
|
+
<i class="fas fa-mobile-alt"></i>
|
|
143
|
+
</div>
|
|
144
|
+
<div class="feature-content">
|
|
145
|
+
<h2>Fully Responsive Design</h2>
|
|
146
|
+
<p>Seamlessly adapts to any device or screen size. Whether you're on desktop, tablet, or mobile,
|
|
147
|
+
enjoy a
|
|
148
|
+
consistent and beautiful experience that works perfectly everywhere you go.</p>
|
|
149
|
+
<button class="try-btn" onclick="alert('Feature 3 activated!')">Try Now</button>
|
|
150
|
+
</div>
|
|
151
|
+
</div>
|
|
152
|
+
<div class="feature">
|
|
153
|
+
<div class="feature-image">
|
|
154
|
+
<i class="fas fa-chart-line"></i>
|
|
155
|
+
</div>
|
|
156
|
+
<div class="feature-content">
|
|
157
|
+
<h2>Advanced Analytics Dashboard</h2>
|
|
158
|
+
<p>Get powerful insights with real-time analytics and comprehensive reporting. Track your metrics,
|
|
159
|
+
understand your data, and make informed decisions with our intuitive analytics tools.</p>
|
|
160
|
+
<button class="try-btn" onclick="alert('Feature 4 activated!')">Try Now</button>
|
|
161
|
+
</div>
|
|
162
|
+
</div>
|
|
163
|
+
<div class="feature">
|
|
164
|
+
<div class="feature-image">
|
|
165
|
+
<i class="fas fa-users"></i>
|
|
166
|
+
</div>
|
|
167
|
+
<div class="feature-content">
|
|
168
|
+
<h2>Team Collaboration Tools</h2>
|
|
169
|
+
<p>Work together effortlessly with built-in collaboration features. Share, communicate, and
|
|
170
|
+
collaborate in
|
|
171
|
+
real-time with your team members to boost productivity and achieve your goals faster.</p>
|
|
172
|
+
<button class="try-btn" onclick="alert('Feature 5 activated!')">Try Now</button>
|
|
173
|
+
</div>
|
|
174
|
+
</div>
|
|
175
|
+
<div class="feature">
|
|
176
|
+
<div class="feature-image">
|
|
177
|
+
<i class="fas fa-magic"></i>
|
|
178
|
+
</div>
|
|
179
|
+
<div class="feature-content">
|
|
180
|
+
<h2>AI-Powered Automation</h2>
|
|
181
|
+
<p>Leverage artificial intelligence to automate repetitive tasks and streamline your workflow. Our
|
|
182
|
+
smart
|
|
183
|
+
automation features learn from your behavior and help you work smarter, not harder.</p>
|
|
184
|
+
<button class="try-btn" onclick="alert('Feature 6 activated!')">Try Now</button>
|
|
185
|
+
</div>
|
|
186
|
+
</div>
|
|
187
|
+
</div>
|
|
188
|
+
<div class="d-none faq-container">
|
|
189
|
+
<div class="faq-header text-center">
|
|
190
|
+
<h3>Have questions?<br>We have answers!</h3>
|
|
191
|
+
<!-- <p>Find quick answers to common questions about our background remover tool and how it works.</p> -->
|
|
192
|
+
</div>
|
|
193
|
+
|
|
194
|
+
<div class="faq-list">
|
|
195
|
+
<div class="faq-item">
|
|
196
|
+
<button class="faq-question" onclick="toggleFaq(this)">
|
|
197
|
+
What is a background remover tool?
|
|
198
|
+
<span class="faq-arrow">▼</span>
|
|
199
|
+
</button>
|
|
200
|
+
<div class="faq-answer">
|
|
201
|
+
<div class="faq-answer-content">
|
|
202
|
+
A background remover tool is an AI-powered application that automatically detects and
|
|
203
|
+
removes backgrounds from images. It uses advanced machine learning algorithms to distinguish
|
|
204
|
+
between the subject and background, creating clean cutouts perfect for product photos,
|
|
205
|
+
portraits, and design projects.
|
|
206
|
+
</div>
|
|
207
|
+
</div>
|
|
208
|
+
</div>
|
|
209
|
+
|
|
210
|
+
<div class="faq-item">
|
|
211
|
+
<button class="faq-question" onclick="toggleFaq(this)">
|
|
212
|
+
Is the background remover free?
|
|
213
|
+
<span class="faq-arrow">▼</span>
|
|
214
|
+
</button>
|
|
215
|
+
<div class="faq-answer">
|
|
216
|
+
<div class="faq-answer-content">
|
|
217
|
+
Yes! We offer a free tier that allows you to remove backgrounds from images with standard
|
|
218
|
+
resolution. For high-resolution images and batch processing, premium plans are available
|
|
219
|
+
with additional features and faster processing times.
|
|
220
|
+
</div>
|
|
221
|
+
</div>
|
|
222
|
+
</div>
|
|
223
|
+
|
|
224
|
+
<div class="faq-item">
|
|
225
|
+
<button class="faq-question" onclick="toggleFaq(this)">
|
|
226
|
+
How do background removers work?
|
|
227
|
+
<span class="faq-arrow">▼</span>
|
|
228
|
+
</button>
|
|
229
|
+
<div class="faq-answer">
|
|
230
|
+
<div class="faq-answer-content">
|
|
231
|
+
Background removers use sophisticated AI and machine learning models trained on millions of
|
|
232
|
+
images. The technology analyzes your image, identifies the main subject, and separates it
|
|
233
|
+
from the background with precision. The entire process takes just seconds and requires no
|
|
234
|
+
manual editing.
|
|
235
|
+
</div>
|
|
236
|
+
</div>
|
|
237
|
+
</div>
|
|
238
|
+
|
|
239
|
+
<div class="faq-item">
|
|
240
|
+
<button class="faq-question" onclick="toggleFaq(this)">
|
|
241
|
+
Can I edit my photo after removing the background?
|
|
242
|
+
<span class="faq-arrow">▼</span>
|
|
243
|
+
</button>
|
|
244
|
+
<div class="faq-answer">
|
|
245
|
+
<div class="faq-answer-content">
|
|
246
|
+
Absolutely! After removing the background, you can download your image with a transparent
|
|
247
|
+
background and edit it in any photo editing software. You can also add new backgrounds,
|
|
248
|
+
adjust colors, or combine multiple images to create stunning compositions.
|
|
249
|
+
</div>
|
|
250
|
+
</div>
|
|
251
|
+
</div>
|
|
252
|
+
|
|
253
|
+
<div class="faq-item">
|
|
254
|
+
<button class="faq-question" onclick="toggleFaq(this)">
|
|
255
|
+
What is the best background remover?
|
|
256
|
+
<span class="faq-arrow">▼</span>
|
|
257
|
+
</button>
|
|
258
|
+
<div class="faq-answer">
|
|
259
|
+
<div class="faq-answer-content">
|
|
260
|
+
The best background remover depends on your specific needs. Look for tools with high
|
|
261
|
+
accuracy, fast processing, support for various image formats, and the ability to handle
|
|
262
|
+
complex subjects like hair and fur. Our tool combines all these features with an intuitive
|
|
263
|
+
interface for the best experience.
|
|
264
|
+
</div>
|
|
265
|
+
</div>
|
|
266
|
+
</div>
|
|
267
|
+
|
|
268
|
+
<div class="faq-item">
|
|
269
|
+
<button class="faq-question" onclick="toggleFaq(this)">
|
|
270
|
+
How do I get a transparent background on my image?
|
|
271
|
+
<span class="faq-arrow">▼</span>
|
|
272
|
+
</button>
|
|
273
|
+
<div class="faq-answer">
|
|
274
|
+
<div class="faq-answer-content">
|
|
275
|
+
Simply upload your image to our tool, and it will automatically remove the background,
|
|
276
|
+
leaving you with a transparent PNG file. Download the result and use it wherever you need -
|
|
277
|
+
in presentations, websites, or graphic design projects. No technical skills required!
|
|
278
|
+
</div>
|
|
279
|
+
</div>
|
|
280
|
+
</div>
|
|
281
|
+
|
|
282
|
+
<div class="faq-item">
|
|
283
|
+
<button class="faq-question" onclick="toggleFaq(this)">
|
|
284
|
+
Can I remove the background of my image on my phone?
|
|
285
|
+
<span class="faq-arrow">▼</span>
|
|
286
|
+
</button>
|
|
287
|
+
<div class="faq-answer">
|
|
288
|
+
<div class="faq-answer-content">
|
|
289
|
+
Yes! Our background remover is fully responsive and works seamlessly on mobile devices.
|
|
290
|
+
Whether you're using an iPhone, Android, tablet, or desktop, you'll get the same powerful
|
|
291
|
+
features and high-quality results. Edit your photos anywhere, anytime!
|
|
292
|
+
</div>
|
|
293
|
+
</div>
|
|
294
|
+
</div>
|
|
295
|
+
</div>
|
|
296
|
+
</div>
|
|
297
|
+
|
|
298
|
+
|
|
299
|
+
|
|
300
|
+
{%- include /appscms/footer/ai-image-tools-footer.html -%}
|
|
301
|
+
|
|
302
|
+
{%- include /appscms/scripts/script.html -%}
|
|
303
|
+
|
|
304
|
+
</div>
|
|
305
|
+
</body>
|
|
306
|
+
|
|
307
|
+
</html>
|
|
@@ -0,0 +1,160 @@
|
|
|
1
|
+
{% assign file = page.fileName %}
|
|
2
|
+
{% assign lang = page.lang %}
|
|
3
|
+
{% assign folder = page.folderName %}
|
|
4
|
+
{% assign pageData = site.data[folder][lang][file] %}
|
|
5
|
+
<!DOCTYPE html>
|
|
6
|
+
<html lang="{{ page.lang }}">
|
|
7
|
+
{%- include appscms/head/head.html -%}
|
|
8
|
+
|
|
9
|
+
<body data-developer-key="{{ site.developerKey }}" data-client-id="{{ site.clientId }}" data-app-id="{{ site.appId }}"
|
|
10
|
+
data-dropbox-apikey="{{ site.dropboxapikey }}">
|
|
11
|
+
|
|
12
|
+
<div class="container">
|
|
13
|
+
|
|
14
|
+
{%- include /appscms/navbars/ai-image-tools-navbar.html -%}
|
|
15
|
+
{%- include /appscms/headings/ai-image-tools-headings.html -%}
|
|
16
|
+
|
|
17
|
+
<div class="search-container">
|
|
18
|
+
<div class="search">
|
|
19
|
+
<input type="text" class="search-input" placeholder="Search styles, or images..." id="searchInput">
|
|
20
|
+
<button class="clear-btn" id="clearBtn" onclick="clearSearch()">×</button>
|
|
21
|
+
<svg class="search-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
|
22
|
+
stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
23
|
+
<circle cx="11" cy="11" r="8"></circle>
|
|
24
|
+
<path d="m21 21-4.35-4.35"></path>
|
|
25
|
+
</svg>
|
|
26
|
+
|
|
27
|
+
</div>
|
|
28
|
+
</div>
|
|
29
|
+
|
|
30
|
+
<div class="container">
|
|
31
|
+
<nav class="category-nav">
|
|
32
|
+
<button class="category-tab active" data-category="all">
|
|
33
|
+
🌈 All <span class="count-badge" id="count-all">0</span>
|
|
34
|
+
</button>
|
|
35
|
+
<button class="category-tab" data-category="christmas">
|
|
36
|
+
🎄 Christmas <span class="count-badge" id="count-christmas">0</span>
|
|
37
|
+
</button>
|
|
38
|
+
<button class="category-tab" data-category="vintage">
|
|
39
|
+
📜 Vintage <span class="count-badge" id="count-vintage">0</span>
|
|
40
|
+
</button>
|
|
41
|
+
<button class="category-tab" data-category="cinematic">
|
|
42
|
+
🎬 Cinematic <span class="count-badge" id="count-cinematic">0</span>
|
|
43
|
+
</button>
|
|
44
|
+
<button class="category-tab" data-category="architecture">
|
|
45
|
+
🏛️ Architecture <span class="count-badge" id="count-architecture">0</span>
|
|
46
|
+
</button>
|
|
47
|
+
<button class="category-tab" data-category="minimalist">
|
|
48
|
+
⚪ Minimalist <span class="count-badge" id="count-minimalist">0</span>
|
|
49
|
+
</button>
|
|
50
|
+
<button class="category-tab" data-category="painting">
|
|
51
|
+
🎨 Painting <span class="count-badge" id="count-painting">0</span>
|
|
52
|
+
</button>
|
|
53
|
+
<button class="category-tab" data-category="sketch">
|
|
54
|
+
✏️ Sketch <span class="count-badge" id="count-sketch">0</span>
|
|
55
|
+
</button>
|
|
56
|
+
</nav>
|
|
57
|
+
</div>
|
|
58
|
+
|
|
59
|
+
<div class="image-gallery">
|
|
60
|
+
{% for category in site.data.templates.categories %}
|
|
61
|
+
{% assign category_key = category[0] %}
|
|
62
|
+
{% assign category_data = category[1] %}
|
|
63
|
+
|
|
64
|
+
{% for item in category_data.images %}
|
|
65
|
+
<div class="image-item" data-category="{{ category_key | downcase }}" data-id="{{ item.id }}">
|
|
66
|
+
<img src="{{ item.image | relative_url }}" loading="lazy" data-title="{{ item.title }}">
|
|
67
|
+
<a href="/{{category_key}}/{{ item.title | slugify }}?id={{ item.id }}">
|
|
68
|
+
<button id="try_style_btn">Try this</button>
|
|
69
|
+
</a>
|
|
70
|
+
</div>
|
|
71
|
+
{% endfor %}
|
|
72
|
+
{% endfor %}
|
|
73
|
+
</div>
|
|
74
|
+
|
|
75
|
+
{%- include /appscms/footer/ai-image-tools-footer.html -%}
|
|
76
|
+
|
|
77
|
+
</div>
|
|
78
|
+
|
|
79
|
+
<script>
|
|
80
|
+
const tabs = document.querySelectorAll('.category-tab');
|
|
81
|
+
const galleryItems = document.querySelectorAll('.image-item');
|
|
82
|
+
const searchInput = document.getElementById('searchInput');
|
|
83
|
+
const clearBtn = document.getElementById('clearBtn');
|
|
84
|
+
|
|
85
|
+
// Filter Function (Common logic for Search and Tabs)
|
|
86
|
+
function filterGallery() {
|
|
87
|
+
const searchTerm = searchInput.value.toLowerCase().trim();
|
|
88
|
+
const activeTab = document.querySelector('.category-tab.active');
|
|
89
|
+
const activeCategory = activeTab ? activeTab.getAttribute('data-category').toLowerCase() : 'all';
|
|
90
|
+
|
|
91
|
+
galleryItems.forEach(item => {
|
|
92
|
+
const itemCategory = item.getAttribute('data-category').toLowerCase();
|
|
93
|
+
// Title fetch karne ke liye ensure karein ki img tag par data-title available ho
|
|
94
|
+
const imgTag = item.querySelector('img');
|
|
95
|
+
const itemTitle = imgTag ? imgTag.getAttribute('data-title').toLowerCase() : "";
|
|
96
|
+
|
|
97
|
+
const matchesSearch = itemTitle.includes(searchTerm) || itemCategory.includes(searchTerm);
|
|
98
|
+
const matchesCategory = activeCategory === 'all' || itemCategory === activeCategory;
|
|
99
|
+
|
|
100
|
+
// Dono conditions satisfy honi chahiye
|
|
101
|
+
if (matchesSearch && matchesCategory) {
|
|
102
|
+
item.style.display = 'block';
|
|
103
|
+
item.classList.remove('hidden');
|
|
104
|
+
} else {
|
|
105
|
+
item.style.display = 'none';
|
|
106
|
+
item.classList.add('hidden');
|
|
107
|
+
}
|
|
108
|
+
});
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
// Search Input Event
|
|
112
|
+
searchInput.addEventListener('input', function () {
|
|
113
|
+
clearBtn.style.display = this.value.length > 0 ? 'block' : 'none';
|
|
114
|
+
|
|
115
|
+
document.querySelector(".search-icon").style.display = 'none';
|
|
116
|
+
filterGallery();
|
|
117
|
+
});
|
|
118
|
+
|
|
119
|
+
// Category Tab Click Event
|
|
120
|
+
tabs.forEach(tab => {
|
|
121
|
+
tab.addEventListener('click', () => {
|
|
122
|
+
tabs.forEach(t => t.classList.remove('active'));
|
|
123
|
+
tab.classList.add('active');
|
|
124
|
+
filterGallery();
|
|
125
|
+
});
|
|
126
|
+
});
|
|
127
|
+
|
|
128
|
+
// Clear Search Function
|
|
129
|
+
function clearSearch() {
|
|
130
|
+
searchInput.value = '';
|
|
131
|
+
clearBtn.style.display = 'none';
|
|
132
|
+
document.querySelector(".search-icon").style.display = 'block';
|
|
133
|
+
filterGallery();
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
// Initial Count Calculation
|
|
137
|
+
function updateCounts() {
|
|
138
|
+
const counts = { all: galleryItems.length };
|
|
139
|
+
galleryItems.forEach(item => {
|
|
140
|
+
const cat = item.getAttribute('data-category').toLowerCase();
|
|
141
|
+
counts[cat] = (counts[cat] || 0) + 1;
|
|
142
|
+
});
|
|
143
|
+
|
|
144
|
+
tabs.forEach(tab => {
|
|
145
|
+
const cat = tab.getAttribute('data-category').toLowerCase();
|
|
146
|
+
const badge = tab.querySelector('.count-badge');
|
|
147
|
+
if (badge) {
|
|
148
|
+
badge.textContent = counts[cat] || 0;
|
|
149
|
+
}
|
|
150
|
+
});
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
updateCounts();
|
|
154
|
+
</script>
|
|
155
|
+
|
|
156
|
+
{%- include /appscms/scripts/script.html -%}
|
|
157
|
+
|
|
158
|
+
</body>
|
|
159
|
+
|
|
160
|
+
</html>
|