appscms-tools-theme 5.2.2 → 5.2.4
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 +454 -0
- data/_includes/appscms/scripts/script.html +14 -4
- data/_layouts/ai-image-generator.html +307 -0
- data/_layouts/ai-image-home.html +160 -0
- data/_layouts/ai-image-pricing.html +642 -0
- data/_layouts/ai-image-profile.html +434 -0
- data/assets/css/ai-image-generator.css +547 -0
- data/assets/css/ai-image-home.css +763 -0
- data/assets/css/appscms-variables.css +1 -1
- data/assets/js/appscms-login.js +1 -1
- data/assets/js/get-credits.js +0 -0
- metadata +14 -2
|
@@ -0,0 +1,434 @@
|
|
|
1
|
+
{% assign file = page.fileName %} {% assign lang = page.lang %} {% assign folder
|
|
2
|
+
= page.folderName %} {% assign pageData = site.data[folder][lang][file] %} {%-
|
|
3
|
+
assign boxColor = site.data[page.folderName][page.lang][page.fileName].color -%}
|
|
4
|
+
|
|
5
|
+
<!DOCTYPE html>
|
|
6
|
+
<html lang="{{ page.lang }}">
|
|
7
|
+
{%- include appscms/head/head.html -%}
|
|
8
|
+
<link rel="stylesheet" href="/css/profile.css" />
|
|
9
|
+
<link rel="stylesheet" href="/ai-tools/assets/css/content-tool-ai.css" />
|
|
10
|
+
|
|
11
|
+
<body data-developer-key="{{ site.developerKey }}" data-client-id="{{ site.clientId }}" data-app-id="{{ site.appId }}"
|
|
12
|
+
data-dropbox-apikey="{{ site.dropboxapikey }}">
|
|
13
|
+
|
|
14
|
+
<div class="container">
|
|
15
|
+
{%- include /appscms/navbars/ai-image-tools-navbar.html -%}
|
|
16
|
+
|
|
17
|
+
<div class="container user-profile-section mt-5">
|
|
18
|
+
<!-- Sidebar -->
|
|
19
|
+
<div class="profile-sidebar">
|
|
20
|
+
<div class="sidebar-header">
|
|
21
|
+
<div class="avatar-large"></div>
|
|
22
|
+
</div>
|
|
23
|
+
<ul class="sidebar-menu">
|
|
24
|
+
<li class="tab-link active" data-tab="account">Account</li>
|
|
25
|
+
<li class="tab-link" data-tab="subscription">Subscription</li>
|
|
26
|
+
<!-- <li class="tab-link" data-tab="invoices">Invoices</li>
|
|
27
|
+
<li class="tab-link" data-tab="company">Company Information</li>
|
|
28
|
+
<li class="tab-link" data-tab="team">Team</li>
|
|
29
|
+
<li class="tab-link" data-tab="settings">Settings</li> -->
|
|
30
|
+
</ul>
|
|
31
|
+
</div>
|
|
32
|
+
|
|
33
|
+
<!-- Content Area -->
|
|
34
|
+
<div class="content">
|
|
35
|
+
<!-- Account Tab Content -->
|
|
36
|
+
<div id="account" class="tab-content active">
|
|
37
|
+
<h2 class="content-title">Account</h2>
|
|
38
|
+
|
|
39
|
+
<!-- Email Section -->
|
|
40
|
+
<div class="form-section">
|
|
41
|
+
<div class="form-title">
|
|
42
|
+
Email <span class="verified-badge">Verified</span>
|
|
43
|
+
</div>
|
|
44
|
+
<div class="form-group">
|
|
45
|
+
<input id="user-email-input" type="email" class="form-input" value="" readonly />
|
|
46
|
+
</div>
|
|
47
|
+
</div>
|
|
48
|
+
|
|
49
|
+
<!-- Name Section -->
|
|
50
|
+
<div class="form-section">
|
|
51
|
+
<div class="form-title">Name</div>
|
|
52
|
+
<div class="form-group">
|
|
53
|
+
<label class="form-label">Name</label>
|
|
54
|
+
<input type="text" class="form-input username-input" value="" />
|
|
55
|
+
</div>
|
|
56
|
+
</div>
|
|
57
|
+
</div>
|
|
58
|
+
|
|
59
|
+
<!-- Subscription Tab Content -->
|
|
60
|
+
<div id="subscription" class="tab-content">
|
|
61
|
+
<h2 class="content-title">Subscription</h2>
|
|
62
|
+
|
|
63
|
+
<!-- Current Plan Section -->
|
|
64
|
+
<div class="form-section">
|
|
65
|
+
<div class="form-title">Current Plan</div>
|
|
66
|
+
<div class="subscription-card">
|
|
67
|
+
<div class="plan-header">
|
|
68
|
+
<div class="plan-info">
|
|
69
|
+
<h3 class="current-plan-name" style="text-transform: capitalize">
|
|
70
|
+
Free Plan
|
|
71
|
+
</h3>
|
|
72
|
+
<!-- <span class="plan-badge current-plan-badge">Free</span> -->
|
|
73
|
+
</div>
|
|
74
|
+
<div class="plan-status">
|
|
75
|
+
<span class="subscription-status active">Loading...</span>
|
|
76
|
+
</div>
|
|
77
|
+
</div>
|
|
78
|
+
<div class="plan-details">
|
|
79
|
+
<!-- <div class="detail-item">
|
|
80
|
+
<span class="detail-label">Token Limit:</span>
|
|
81
|
+
<span class="token-limit">Loading...</span>
|
|
82
|
+
</div>
|
|
83
|
+
<div class="detail-item">
|
|
84
|
+
<span class="detail-label">Plan Duration:</span>
|
|
85
|
+
<span class="plan-duration">Loading...</span>
|
|
86
|
+
</div> -->
|
|
87
|
+
<div class="detail-item">
|
|
88
|
+
<span class="detail-label">Expires On:</span>
|
|
89
|
+
<span class="plan-expiry">Loading...</span>
|
|
90
|
+
</div>
|
|
91
|
+
<div class="detail-item">
|
|
92
|
+
<span class="detail-label">Subscription ID:</span>
|
|
93
|
+
<span class="subscription-id">Loading...</span>
|
|
94
|
+
</div>
|
|
95
|
+
</div>
|
|
96
|
+
</div>
|
|
97
|
+
</div>
|
|
98
|
+
|
|
99
|
+
<!-- Usage Section -->
|
|
100
|
+
<div class="form-section d-none">
|
|
101
|
+
<div class="form-title">Usage Statistics</div>
|
|
102
|
+
<div class="usage-card">
|
|
103
|
+
<div class="usage-item">
|
|
104
|
+
<div class="usage-header">
|
|
105
|
+
<span class="usage-label">Tokens Used This Month</span>
|
|
106
|
+
<span class="usage-value">
|
|
107
|
+
<span class="tokens-used">0</span> /
|
|
108
|
+
<span class="token-limit-display">0</span>
|
|
109
|
+
tokens
|
|
110
|
+
</span>
|
|
111
|
+
</div>
|
|
112
|
+
<div class="usage-progress">
|
|
113
|
+
<div class="progress-bar">
|
|
114
|
+
<div class="progress-fill" style="width: 0%"></div>
|
|
115
|
+
</div>
|
|
116
|
+
<span class="usage-percentage">0%</span>
|
|
117
|
+
</div>
|
|
118
|
+
</div>
|
|
119
|
+
<div class="usage-item">
|
|
120
|
+
<div class="usage-header">
|
|
121
|
+
<span class="usage-label">Days Remaining</span>
|
|
122
|
+
<span class="usage-value days-remaining">Loading...</span>
|
|
123
|
+
</div>
|
|
124
|
+
</div>
|
|
125
|
+
</div>
|
|
126
|
+
</div>
|
|
127
|
+
|
|
128
|
+
<!-- Plan Features Section -->
|
|
129
|
+
<div class="form-section d-none">
|
|
130
|
+
<div class="form-title">Plan Features</div>
|
|
131
|
+
<div class="features-card">
|
|
132
|
+
<div class="features-list" id="current-plan-features">
|
|
133
|
+
<!-- Features will be populated by JavaScript -->
|
|
134
|
+
</div>
|
|
135
|
+
</div>
|
|
136
|
+
</div>
|
|
137
|
+
|
|
138
|
+
<!-- Actions Section -->
|
|
139
|
+
<div class="form-section">
|
|
140
|
+
<div class="form-title">Actions</div>
|
|
141
|
+
<div class="actions-card">
|
|
142
|
+
<button class="btn-manage" onclick="window.location.href='/pricing'">
|
|
143
|
+
Manage Subscription
|
|
144
|
+
</button>
|
|
145
|
+
<button class="btn-cancel-subscription" id="cancelSubscriptionBtn"
|
|
146
|
+
onclick="showCancelConfirmation()" style="display: none;">
|
|
147
|
+
Cancel Subscription
|
|
148
|
+
</button>
|
|
149
|
+
</div>
|
|
150
|
+
</div>
|
|
151
|
+
|
|
152
|
+
<!-- Expiry Warning -->
|
|
153
|
+
<div class="expiry-warning" style="display: none">
|
|
154
|
+
<div class="warning-content">
|
|
155
|
+
<i class="warning-icon">⚠️</i>
|
|
156
|
+
<span class="warning-text">Your plan expires soon!</span>
|
|
157
|
+
</div>
|
|
158
|
+
</div>
|
|
159
|
+
</div>
|
|
160
|
+
|
|
161
|
+
</div>
|
|
162
|
+
</div>
|
|
163
|
+
</div>
|
|
164
|
+
|
|
165
|
+
<!-- Cancel Subscription Confirmation Modal -->
|
|
166
|
+
<div id="cancelConfirmationModal" class="cancel-modal" style="display: none;">
|
|
167
|
+
<div class="cancel-modal-overlay" onclick="hideCancelConfirmation()"></div>
|
|
168
|
+
<div class="cancel-modal-content">
|
|
169
|
+
<div class="cancel-modal-header">
|
|
170
|
+
<div class="cancel-icon-wrapper">
|
|
171
|
+
<svg class="cancel-warning-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
|
|
172
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
173
|
+
d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
|
|
174
|
+
</svg>
|
|
175
|
+
</div>
|
|
176
|
+
<h3 class="cancel-modal-title">Cancel Subscription?</h3>
|
|
177
|
+
<p class="cancel-modal-description">
|
|
178
|
+
Are you sure you want to cancel your subscription? You will lose access to all premium features at
|
|
179
|
+
the end of your current billing period.
|
|
180
|
+
</p>
|
|
181
|
+
</div>
|
|
182
|
+
<div class="cancel-modal-body">
|
|
183
|
+
<div class="cancel-warning-box">
|
|
184
|
+
<strong>⚠️ What you'll lose:</strong>
|
|
185
|
+
<ul class="cancel-loss-list">
|
|
186
|
+
<li>Access to premium AI image generation</li>
|
|
187
|
+
<li>Higher token limits</li>
|
|
188
|
+
<li>Priority support</li>
|
|
189
|
+
<li>Advanced features</li>
|
|
190
|
+
</ul>
|
|
191
|
+
</div>
|
|
192
|
+
</div>
|
|
193
|
+
<div class="cancel-modal-footer">
|
|
194
|
+
<button class="btn-cancel-action" onclick="hideCancelConfirmation()">
|
|
195
|
+
Keep Subscription
|
|
196
|
+
</button>
|
|
197
|
+
<button class="btn-confirm-cancel" onclick="confirmCancelSubscription()">
|
|
198
|
+
Yes, Cancel Subscription
|
|
199
|
+
</button>
|
|
200
|
+
</div>
|
|
201
|
+
</div>
|
|
202
|
+
</div>
|
|
203
|
+
|
|
204
|
+
<style>
|
|
205
|
+
/* Cancel Subscription Button */
|
|
206
|
+
.btn-cancel-subscription {
|
|
207
|
+
background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
|
|
208
|
+
color: white;
|
|
209
|
+
border: none;
|
|
210
|
+
border-radius: 8px;
|
|
211
|
+
font-size: 14px;
|
|
212
|
+
font-weight: 600;
|
|
213
|
+
cursor: pointer;
|
|
214
|
+
transition: all 0.3s ease;
|
|
215
|
+
padding: 10px 20px;
|
|
216
|
+
}
|
|
217
|
+
|
|
218
|
+
.btn-cancel-subscription:hover {
|
|
219
|
+
background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
|
|
220
|
+
transform: translateY(-2px);
|
|
221
|
+
box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
|
|
222
|
+
}
|
|
223
|
+
|
|
224
|
+
/* Cancel Modal */
|
|
225
|
+
.cancel-modal {
|
|
226
|
+
position: fixed;
|
|
227
|
+
top: 0;
|
|
228
|
+
left: 0;
|
|
229
|
+
width: 100%;
|
|
230
|
+
height: 100%;
|
|
231
|
+
z-index: 10000;
|
|
232
|
+
display: flex;
|
|
233
|
+
align-items: center;
|
|
234
|
+
justify-content: center;
|
|
235
|
+
}
|
|
236
|
+
|
|
237
|
+
.cancel-modal-overlay {
|
|
238
|
+
position: absolute;
|
|
239
|
+
top: 0;
|
|
240
|
+
left: 0;
|
|
241
|
+
width: 100%;
|
|
242
|
+
height: 100%;
|
|
243
|
+
background: rgba(0, 0, 0, 0.6);
|
|
244
|
+
backdrop-filter: blur(4px);
|
|
245
|
+
animation: fadeIn 0.3s ease;
|
|
246
|
+
}
|
|
247
|
+
|
|
248
|
+
.cancel-modal-content {
|
|
249
|
+
position: relative;
|
|
250
|
+
background: white;
|
|
251
|
+
border-radius: 16px;
|
|
252
|
+
max-width: 500px;
|
|
253
|
+
width: 90%;
|
|
254
|
+
padding: 30px;
|
|
255
|
+
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
|
|
256
|
+
animation: slideUp 0.3s ease;
|
|
257
|
+
z-index: 10001;
|
|
258
|
+
}
|
|
259
|
+
|
|
260
|
+
.cancel-modal-header {
|
|
261
|
+
text-align: center;
|
|
262
|
+
margin-bottom: 25px;
|
|
263
|
+
}
|
|
264
|
+
|
|
265
|
+
.cancel-icon-wrapper {
|
|
266
|
+
width: 80px;
|
|
267
|
+
height: 80px;
|
|
268
|
+
margin: 0 auto 20px;
|
|
269
|
+
background: #fef2f2;
|
|
270
|
+
border-radius: 50%;
|
|
271
|
+
display: flex;
|
|
272
|
+
align-items: center;
|
|
273
|
+
justify-content: center;
|
|
274
|
+
}
|
|
275
|
+
|
|
276
|
+
.cancel-warning-icon {
|
|
277
|
+
width: 40px;
|
|
278
|
+
height: 40px;
|
|
279
|
+
color: #ef4444;
|
|
280
|
+
}
|
|
281
|
+
|
|
282
|
+
.cancel-modal-title {
|
|
283
|
+
font-size: 24px;
|
|
284
|
+
font-weight: 700;
|
|
285
|
+
color: #1f2937;
|
|
286
|
+
margin-bottom: 10px;
|
|
287
|
+
}
|
|
288
|
+
|
|
289
|
+
.cancel-modal-description {
|
|
290
|
+
font-size: 15px;
|
|
291
|
+
color: #6b7280;
|
|
292
|
+
line-height: 1.6;
|
|
293
|
+
}
|
|
294
|
+
|
|
295
|
+
.cancel-modal-body {
|
|
296
|
+
margin-bottom: 25px;
|
|
297
|
+
}
|
|
298
|
+
|
|
299
|
+
.cancel-warning-box {
|
|
300
|
+
background: #fef2f2;
|
|
301
|
+
border: 1px solid #fecaca;
|
|
302
|
+
border-radius: 10px;
|
|
303
|
+
padding: 15px;
|
|
304
|
+
color: #991b1b;
|
|
305
|
+
}
|
|
306
|
+
|
|
307
|
+
.cancel-warning-box strong {
|
|
308
|
+
display: block;
|
|
309
|
+
margin-bottom: 10px;
|
|
310
|
+
font-size: 14px;
|
|
311
|
+
}
|
|
312
|
+
|
|
313
|
+
.cancel-loss-list {
|
|
314
|
+
margin: 0;
|
|
315
|
+
padding-left: 20px;
|
|
316
|
+
font-size: 13px;
|
|
317
|
+
line-height: 1.8;
|
|
318
|
+
}
|
|
319
|
+
|
|
320
|
+
.cancel-loss-list li {
|
|
321
|
+
margin-bottom: 5px;
|
|
322
|
+
}
|
|
323
|
+
|
|
324
|
+
.cancel-modal-footer {
|
|
325
|
+
display: flex;
|
|
326
|
+
gap: 12px;
|
|
327
|
+
flex-direction: column-reverse;
|
|
328
|
+
}
|
|
329
|
+
|
|
330
|
+
.btn-cancel-action,
|
|
331
|
+
.btn-confirm-cancel {
|
|
332
|
+
padding: 12px 24px;
|
|
333
|
+
border-radius: 8px;
|
|
334
|
+
font-size: 14px;
|
|
335
|
+
font-weight: 600;
|
|
336
|
+
cursor: pointer;
|
|
337
|
+
transition: all 0.3s ease;
|
|
338
|
+
border: none;
|
|
339
|
+
width: 100%;
|
|
340
|
+
}
|
|
341
|
+
|
|
342
|
+
.btn-cancel-action {
|
|
343
|
+
background: #f3f4f6;
|
|
344
|
+
color: #374151;
|
|
345
|
+
}
|
|
346
|
+
|
|
347
|
+
.btn-cancel-action:hover {
|
|
348
|
+
background: #e5e7eb;
|
|
349
|
+
}
|
|
350
|
+
|
|
351
|
+
.btn-confirm-cancel {
|
|
352
|
+
background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
|
|
353
|
+
color: white;
|
|
354
|
+
}
|
|
355
|
+
|
|
356
|
+
.btn-confirm-cancel:hover {
|
|
357
|
+
background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
|
|
358
|
+
}
|
|
359
|
+
|
|
360
|
+
@keyframes fadeIn {
|
|
361
|
+
from {
|
|
362
|
+
opacity: 0;
|
|
363
|
+
}
|
|
364
|
+
|
|
365
|
+
to {
|
|
366
|
+
opacity: 1;
|
|
367
|
+
}
|
|
368
|
+
}
|
|
369
|
+
|
|
370
|
+
@keyframes slideUp {
|
|
371
|
+
from {
|
|
372
|
+
transform: translateY(30px);
|
|
373
|
+
opacity: 0;
|
|
374
|
+
}
|
|
375
|
+
|
|
376
|
+
to {
|
|
377
|
+
transform: translateY(0);
|
|
378
|
+
opacity: 1;
|
|
379
|
+
}
|
|
380
|
+
}
|
|
381
|
+
|
|
382
|
+
@media (min-width: 640px) {
|
|
383
|
+
.cancel-modal-footer {
|
|
384
|
+
flex-direction: row;
|
|
385
|
+
}
|
|
386
|
+
}
|
|
387
|
+
</style>
|
|
388
|
+
|
|
389
|
+
<script>
|
|
390
|
+
// Tab functionality
|
|
391
|
+
document.addEventListener("DOMContentLoaded", function () {
|
|
392
|
+
const tabLinks = document.querySelectorAll(".tab-link");
|
|
393
|
+
const tabContents = document.querySelectorAll(".tab-content");
|
|
394
|
+
|
|
395
|
+
tabLinks.forEach((link) => {
|
|
396
|
+
link.addEventListener("click", () => {
|
|
397
|
+
// Remove active class from all tabs
|
|
398
|
+
tabLinks.forEach((l) => l.classList.remove("active"));
|
|
399
|
+
tabContents.forEach((c) => c.classList.remove("active"));
|
|
400
|
+
|
|
401
|
+
// Add active class to clicked tab
|
|
402
|
+
link.classList.add("active");
|
|
403
|
+
|
|
404
|
+
// Show corresponding content
|
|
405
|
+
const tabId = link.getAttribute("data-tab");
|
|
406
|
+
document.getElementById(tabId).classList.add("active");
|
|
407
|
+
});
|
|
408
|
+
});
|
|
409
|
+
|
|
410
|
+
// Password visibility toggle
|
|
411
|
+
const toggleButtons = document.querySelectorAll(".password-toggle");
|
|
412
|
+
toggleButtons.forEach((button) => {
|
|
413
|
+
button.addEventListener("click", () => {
|
|
414
|
+
const input = button.previousElementSibling;
|
|
415
|
+
const icon = button.querySelector(".material-icons");
|
|
416
|
+
|
|
417
|
+
if (input.type === "password") {
|
|
418
|
+
input.type = "text";
|
|
419
|
+
icon.textContent = "visibility_off";
|
|
420
|
+
} else {
|
|
421
|
+
input.type = "password";
|
|
422
|
+
icon.textContent = "visibility";
|
|
423
|
+
}
|
|
424
|
+
});
|
|
425
|
+
});
|
|
426
|
+
});
|
|
427
|
+
|
|
428
|
+
</script>
|
|
429
|
+
|
|
430
|
+
{%- include appscms/scripts/script.html -%}
|
|
431
|
+
</body>
|
|
432
|
+
|
|
433
|
+
</html>
|
|
434
|
+
```
|