appscms-tools-theme 5.0.7 → 5.0.9
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/.DS_Store +0 -0
- data/_data/home/en/en.json +238 -69
- data/_includes/.DS_Store +0 -0
- data/_includes/appscms/.DS_Store +0 -0
- data/_includes/appscms/navbars/navbar.html +209 -0
- data/_includes/appscms/scripts/script.html +107 -24
- data/_layouts/profile.html +561 -0
- data/assets/.DS_Store +0 -0
- data/assets/css/appscms-theme.css +511 -0
- data/assets/js/appscms-auth.js +9 -0
- data/assets/js/appscms-login.js +349 -0
- metadata +5 -2
@@ -0,0 +1,561 @@
|
|
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
|
+
<body>
|
9
|
+
{%- include appscms/navbars/navbar.html -%} {%- include
|
10
|
+
appscms/navbars/toolbar.html -%} {%- include bookmark.html -%}
|
11
|
+
<style>
|
12
|
+
.profile-login-container {
|
13
|
+
display: flex;
|
14
|
+
align-items: center;
|
15
|
+
justify-content: center;
|
16
|
+
align-items: center;
|
17
|
+
background-color: #fff;
|
18
|
+
width: 100vw;
|
19
|
+
height: 90vh;
|
20
|
+
flex-direction: column;
|
21
|
+
}
|
22
|
+
</style>
|
23
|
+
<div>
|
24
|
+
<div class="login-container profile-login-container">
|
25
|
+
<div class="logo-container">
|
26
|
+
<div class="logo-bg"></div>
|
27
|
+
<svg
|
28
|
+
class="logo"
|
29
|
+
viewBox="0 0 100 100"
|
30
|
+
xmlns="http://www.w3.org/2000/svg"
|
31
|
+
>
|
32
|
+
<rect
|
33
|
+
x="15"
|
34
|
+
y="10"
|
35
|
+
width="70"
|
36
|
+
height="80"
|
37
|
+
fill="none"
|
38
|
+
stroke="black"
|
39
|
+
stroke-width="3"
|
40
|
+
/>
|
41
|
+
<path
|
42
|
+
d="M85 35 L85 10 L65 10"
|
43
|
+
fill="none"
|
44
|
+
stroke="black"
|
45
|
+
stroke-width="3"
|
46
|
+
/>
|
47
|
+
<rect
|
48
|
+
x="25"
|
49
|
+
y="45"
|
50
|
+
width="50"
|
51
|
+
height="20"
|
52
|
+
rx="10"
|
53
|
+
fill="none"
|
54
|
+
stroke="black"
|
55
|
+
stroke-width="3"
|
56
|
+
/>
|
57
|
+
<circle cx="40" cy="55" r="5" fill="black" />
|
58
|
+
<circle cx="60" cy="55" r="5" fill="black" />
|
59
|
+
<path
|
60
|
+
d="M42 70 C50 75 50 75 58 70"
|
61
|
+
fill="none"
|
62
|
+
stroke="black"
|
63
|
+
stroke-width="3"
|
64
|
+
/>
|
65
|
+
</svg>
|
66
|
+
<div class="dot dot-1"></div>
|
67
|
+
<div class="dot dot-2"></div>
|
68
|
+
<div class="dot dot-3"></div>
|
69
|
+
</div>
|
70
|
+
|
71
|
+
<h1>Log in to {{site.name}}</h1>
|
72
|
+
<p>Log in to access your account and document storage.</p>
|
73
|
+
|
74
|
+
<button class="login-button">Log in</button>
|
75
|
+
|
76
|
+
<div class="create-account">
|
77
|
+
Don't have an account? <a href="#">Create account</a>
|
78
|
+
</div>
|
79
|
+
</div>
|
80
|
+
</div>
|
81
|
+
|
82
|
+
<style>
|
83
|
+
.logo-container {
|
84
|
+
position: relative;
|
85
|
+
margin-bottom: 40px;
|
86
|
+
}
|
87
|
+
|
88
|
+
.logo-bg {
|
89
|
+
width: 150px;
|
90
|
+
height: 150px;
|
91
|
+
background-color: rgba(255, 235, 180, 0.5);
|
92
|
+
border-radius: 15px;
|
93
|
+
position: absolute;
|
94
|
+
top: 10px;
|
95
|
+
left: 50%;
|
96
|
+
transform: translateX(-50%) rotate(10deg);
|
97
|
+
z-index: 0;
|
98
|
+
}
|
99
|
+
|
100
|
+
.logo {
|
101
|
+
position: relative;
|
102
|
+
z-index: 1;
|
103
|
+
width: 120px;
|
104
|
+
height: 120px;
|
105
|
+
}
|
106
|
+
|
107
|
+
.dot {
|
108
|
+
width: 10px;
|
109
|
+
height: 10px;
|
110
|
+
background-color: #ffcc00;
|
111
|
+
border-radius: 50%;
|
112
|
+
position: absolute;
|
113
|
+
}
|
114
|
+
|
115
|
+
.dot-1 {
|
116
|
+
top: 0;
|
117
|
+
right: 0;
|
118
|
+
}
|
119
|
+
|
120
|
+
.dot-2 {
|
121
|
+
left: 0;
|
122
|
+
top: 50%;
|
123
|
+
}
|
124
|
+
|
125
|
+
.dot-3 {
|
126
|
+
bottom: 0;
|
127
|
+
right: 50%;
|
128
|
+
}
|
129
|
+
|
130
|
+
h1 {
|
131
|
+
font-size: 24px;
|
132
|
+
margin-bottom: 10px;
|
133
|
+
color: #333;
|
134
|
+
}
|
135
|
+
|
136
|
+
p {
|
137
|
+
font-size: 16px;
|
138
|
+
color: #555;
|
139
|
+
margin-bottom: 30px;
|
140
|
+
}
|
141
|
+
|
142
|
+
.login-button {
|
143
|
+
background-color: var(--primary-color);
|
144
|
+
color: white;
|
145
|
+
border: none;
|
146
|
+
border-radius: 5px;
|
147
|
+
padding: 12px 40px;
|
148
|
+
font-size: 16px;
|
149
|
+
font-weight: 500;
|
150
|
+
cursor: pointer;
|
151
|
+
margin-bottom: 25px;
|
152
|
+
transition: background-color 0.2s;
|
153
|
+
}
|
154
|
+
|
155
|
+
.login-button:hover {
|
156
|
+
background-color: var(--primary-color);
|
157
|
+
}
|
158
|
+
|
159
|
+
.create-account {
|
160
|
+
font-size: 14px;
|
161
|
+
color: #555;
|
162
|
+
}
|
163
|
+
|
164
|
+
.create-account a {
|
165
|
+
color: var(--primary-color);
|
166
|
+
text-decoration: none;
|
167
|
+
font-weight: 500;
|
168
|
+
}
|
169
|
+
|
170
|
+
.create-account a:hover {
|
171
|
+
text-decoration: underline;
|
172
|
+
}
|
173
|
+
</style>
|
174
|
+
<style>
|
175
|
+
body {
|
176
|
+
background: #fff;
|
177
|
+
}
|
178
|
+
.banner {
|
179
|
+
padding: 12px;
|
180
|
+
text-align: center;
|
181
|
+
}
|
182
|
+
|
183
|
+
.banner-content {
|
184
|
+
display: flex;
|
185
|
+
align-items: center;
|
186
|
+
justify-content: center;
|
187
|
+
gap: 8px;
|
188
|
+
max-width: 1200px;
|
189
|
+
margin: 0 auto;
|
190
|
+
}
|
191
|
+
|
192
|
+
.crown-icon {
|
193
|
+
color: #305bb2;
|
194
|
+
}
|
195
|
+
|
196
|
+
.banner a {
|
197
|
+
color: #305bb2;
|
198
|
+
font-weight: bold;
|
199
|
+
text-decoration: none;
|
200
|
+
}
|
201
|
+
|
202
|
+
.header {
|
203
|
+
display: flex;
|
204
|
+
justify-content: space-between;
|
205
|
+
align-items: center;
|
206
|
+
padding: 16px 24px;
|
207
|
+
background-color: #fff;
|
208
|
+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
|
209
|
+
}
|
210
|
+
|
211
|
+
.account-title {
|
212
|
+
font-size: 20px;
|
213
|
+
font-weight: bold;
|
214
|
+
}
|
215
|
+
|
216
|
+
.account-status {
|
217
|
+
display: flex;
|
218
|
+
align-items: center;
|
219
|
+
gap: 16px;
|
220
|
+
}
|
221
|
+
|
222
|
+
.free-trial {
|
223
|
+
display: flex;
|
224
|
+
align-items: center;
|
225
|
+
gap: 8px;
|
226
|
+
font-weight: 600;
|
227
|
+
}
|
228
|
+
|
229
|
+
.yellow-crown {
|
230
|
+
color: #ffc107;
|
231
|
+
}
|
232
|
+
|
233
|
+
.avatar {
|
234
|
+
width: 40px;
|
235
|
+
height: 40px;
|
236
|
+
border-radius: 50%;
|
237
|
+
background-color: #f18c33;
|
238
|
+
color: white;
|
239
|
+
font-weight: bold;
|
240
|
+
display: flex;
|
241
|
+
align-items: center;
|
242
|
+
justify-content: center;
|
243
|
+
}
|
244
|
+
|
245
|
+
.container {
|
246
|
+
display: flex;
|
247
|
+
max-width: 1200px;
|
248
|
+
margin: 0 auto;
|
249
|
+
min-height: calc(100vh - 100px);
|
250
|
+
}
|
251
|
+
|
252
|
+
.sidebar {
|
253
|
+
width: 250px;
|
254
|
+
background-color: #fff;
|
255
|
+
padding: 20px 0;
|
256
|
+
border-right: 1px solid #eee;
|
257
|
+
}
|
258
|
+
|
259
|
+
.sidebar-header {
|
260
|
+
padding: 20px;
|
261
|
+
display: flex;
|
262
|
+
flex-direction: column;
|
263
|
+
align-items: center;
|
264
|
+
gap: 10px;
|
265
|
+
border-bottom: 1px solid #eee;
|
266
|
+
margin-bottom: 20px;
|
267
|
+
}
|
268
|
+
|
269
|
+
.avatar-large {
|
270
|
+
width: 80px;
|
271
|
+
height: 80px;
|
272
|
+
border-radius: 50%;
|
273
|
+
background-color: #f18c33;
|
274
|
+
color: white;
|
275
|
+
font-weight: bold;
|
276
|
+
font-size: 24px;
|
277
|
+
display: flex;
|
278
|
+
align-items: center;
|
279
|
+
justify-content: center;
|
280
|
+
}
|
281
|
+
|
282
|
+
.sidebar-menu {
|
283
|
+
list-style: none;
|
284
|
+
}
|
285
|
+
|
286
|
+
.sidebar-menu li {
|
287
|
+
padding: 12px 24px;
|
288
|
+
display: flex;
|
289
|
+
align-items: center;
|
290
|
+
gap: 12px;
|
291
|
+
cursor: pointer;
|
292
|
+
transition: background-color 0.2s;
|
293
|
+
}
|
294
|
+
|
295
|
+
.sidebar-menu li:hover {
|
296
|
+
background-color: #f5f5f5;
|
297
|
+
}
|
298
|
+
|
299
|
+
.sidebar-menu li.active {
|
300
|
+
background-color: #f5f5f5;
|
301
|
+
border-left: 3px solid #305bb2;
|
302
|
+
}
|
303
|
+
|
304
|
+
.sidebar-menu i {
|
305
|
+
font-size: 20px;
|
306
|
+
color: #555;
|
307
|
+
}
|
308
|
+
|
309
|
+
.content {
|
310
|
+
flex: 1;
|
311
|
+
padding: 40px;
|
312
|
+
background-color: #fff;
|
313
|
+
}
|
314
|
+
|
315
|
+
.content-title {
|
316
|
+
font-size: 24px;
|
317
|
+
font-weight: bold;
|
318
|
+
margin-bottom: 30px;
|
319
|
+
}
|
320
|
+
|
321
|
+
.form-section {
|
322
|
+
margin-bottom: 40px;
|
323
|
+
}
|
324
|
+
|
325
|
+
.form-title {
|
326
|
+
font-size: 18px;
|
327
|
+
font-weight: bold;
|
328
|
+
margin-bottom: 20px;
|
329
|
+
}
|
330
|
+
|
331
|
+
.form-group {
|
332
|
+
margin-bottom: 20px;
|
333
|
+
}
|
334
|
+
|
335
|
+
.form-label {
|
336
|
+
display: block;
|
337
|
+
margin-bottom: 8px;
|
338
|
+
font-size: 14px;
|
339
|
+
color: #666;
|
340
|
+
}
|
341
|
+
|
342
|
+
.verified-badge {
|
343
|
+
display: inline-block;
|
344
|
+
background-color: #e6f4ea;
|
345
|
+
color: #137333;
|
346
|
+
padding: 4px 8px;
|
347
|
+
border-radius: 4px;
|
348
|
+
font-size: 12px;
|
349
|
+
margin-left: 8px;
|
350
|
+
}
|
351
|
+
|
352
|
+
.form-input {
|
353
|
+
width: 100%;
|
354
|
+
padding: 12px;
|
355
|
+
border: 1px solid #ddd;
|
356
|
+
border-radius: 4px;
|
357
|
+
font-size: 16px;
|
358
|
+
transition: border-color 0.2s;
|
359
|
+
}
|
360
|
+
|
361
|
+
.form-input:focus {
|
362
|
+
border-color: #305bb2;
|
363
|
+
outline: none;
|
364
|
+
}
|
365
|
+
|
366
|
+
.password-input-container {
|
367
|
+
position: relative;
|
368
|
+
margin-bottom: 20px;
|
369
|
+
}
|
370
|
+
|
371
|
+
.password-input-container .form-input {
|
372
|
+
padding-right: 40px;
|
373
|
+
}
|
374
|
+
|
375
|
+
.password-toggle {
|
376
|
+
position: absolute;
|
377
|
+
right: 12px;
|
378
|
+
top: 50%;
|
379
|
+
transform: translateY(-50%);
|
380
|
+
background: none;
|
381
|
+
border: none;
|
382
|
+
cursor: pointer;
|
383
|
+
color: #666;
|
384
|
+
}
|
385
|
+
|
386
|
+
.form-link {
|
387
|
+
color: #2563eb;
|
388
|
+
text-decoration: none;
|
389
|
+
font-size: 14px;
|
390
|
+
display: inline-block;
|
391
|
+
margin-top: 8px;
|
392
|
+
}
|
393
|
+
|
394
|
+
.btn {
|
395
|
+
padding: 12px 24px;
|
396
|
+
border: none;
|
397
|
+
border-radius: 4px;
|
398
|
+
font-size: 16px;
|
399
|
+
font-weight: 600;
|
400
|
+
cursor: pointer;
|
401
|
+
transition: background-color 0.2s;
|
402
|
+
}
|
403
|
+
|
404
|
+
.btn-primary {
|
405
|
+
background-color: #2563eb;
|
406
|
+
color: white;
|
407
|
+
}
|
408
|
+
|
409
|
+
.btn-primary:hover {
|
410
|
+
background-color: #1d4ed8;
|
411
|
+
}
|
412
|
+
|
413
|
+
.tab-content {
|
414
|
+
display: none;
|
415
|
+
}
|
416
|
+
|
417
|
+
.tab-content.active {
|
418
|
+
display: block;
|
419
|
+
}
|
420
|
+
|
421
|
+
/* Material Icons */
|
422
|
+
.material-icons {
|
423
|
+
font-family: "Material Icons";
|
424
|
+
font-weight: normal;
|
425
|
+
font-style: normal;
|
426
|
+
font-size: 24px;
|
427
|
+
line-height: 1;
|
428
|
+
letter-spacing: normal;
|
429
|
+
text-transform: none;
|
430
|
+
display: inline-block;
|
431
|
+
white-space: nowrap;
|
432
|
+
word-wrap: normal;
|
433
|
+
direction: ltr;
|
434
|
+
-webkit-font-feature-settings: "liga";
|
435
|
+
-webkit-font-smoothing: antialiased;
|
436
|
+
}
|
437
|
+
</style>
|
438
|
+
|
439
|
+
<div class="container user-profile-section" style="display: none">
|
440
|
+
<!-- Sidebar -->
|
441
|
+
<div class="sidebar">
|
442
|
+
<div class="sidebar-header">
|
443
|
+
<div class="avatar-large">GI</div>
|
444
|
+
</div>
|
445
|
+
<ul class="sidebar-menu">
|
446
|
+
<li class="tab-link active" data-tab="account">Account</li>
|
447
|
+
<li class="tab-link" data-tab="subscription">Subscription</li>
|
448
|
+
<li class="tab-link" data-tab="invoices">Invoices</li>
|
449
|
+
<li class="tab-link" data-tab="company">Company Information</li>
|
450
|
+
<li class="tab-link" data-tab="team">Team</li>
|
451
|
+
<li class="tab-link" data-tab="settings">Settings</li>
|
452
|
+
</ul>
|
453
|
+
</div>
|
454
|
+
|
455
|
+
<!-- Content Area -->
|
456
|
+
<div class="content">
|
457
|
+
<!-- Account Tab Content -->
|
458
|
+
<div id="account" class="tab-content active">
|
459
|
+
<h2 class="content-title">Account</h2>
|
460
|
+
|
461
|
+
<!-- Email Section -->
|
462
|
+
<div class="form-section">
|
463
|
+
<div class="form-title">
|
464
|
+
Email <span class="verified-badge">Verified</span>
|
465
|
+
</div>
|
466
|
+
<div class="form-group">
|
467
|
+
<input
|
468
|
+
id="user-email-input"
|
469
|
+
type="email"
|
470
|
+
class="form-input"
|
471
|
+
value="itsrammoudgill@gmail.com"
|
472
|
+
readonly
|
473
|
+
/>
|
474
|
+
</div>
|
475
|
+
</div>
|
476
|
+
|
477
|
+
<!-- Name Section -->
|
478
|
+
<div class="form-section">
|
479
|
+
<div class="form-title">Name</div>
|
480
|
+
<div class="form-group">
|
481
|
+
<label class="form-label">Name</label>
|
482
|
+
<input type="text" class="form-input username-input" value="" />
|
483
|
+
</div>
|
484
|
+
</div>
|
485
|
+
</div>
|
486
|
+
|
487
|
+
<!-- Subscription Tab Content -->
|
488
|
+
<div id="subscription" class="tab-content">
|
489
|
+
<h2 class="content-title">Subscription</h2>
|
490
|
+
<p>Your subscription details will appear here.</p>
|
491
|
+
</div>
|
492
|
+
|
493
|
+
<!-- Invoices Tab Content -->
|
494
|
+
<div id="invoices" class="tab-content">
|
495
|
+
<h2 class="content-title">Invoices</h2>
|
496
|
+
<p>Your invoice history will appear here.</p>
|
497
|
+
</div>
|
498
|
+
|
499
|
+
<!-- Company Information Tab Content -->
|
500
|
+
<div id="company" class="tab-content">
|
501
|
+
<h2 class="content-title">Company Information</h2>
|
502
|
+
<p>Your company details will appear here.</p>
|
503
|
+
</div>
|
504
|
+
|
505
|
+
<!-- Team Tab Content -->
|
506
|
+
<div id="team" class="tab-content">
|
507
|
+
<h2 class="content-title">Team</h2>
|
508
|
+
<p>Your team management options will appear here.</p>
|
509
|
+
</div>
|
510
|
+
|
511
|
+
<!-- Settings Tab Content -->
|
512
|
+
<div id="settings" class="tab-content">
|
513
|
+
<h2 class="content-title">Settings</h2>
|
514
|
+
<p>Your account settings will appear here.</p>
|
515
|
+
</div>
|
516
|
+
</div>
|
517
|
+
</div>
|
518
|
+
|
519
|
+
<script>
|
520
|
+
// Tab functionality
|
521
|
+
document.addEventListener("DOMContentLoaded", function () {
|
522
|
+
const tabLinks = document.querySelectorAll(".tab-link");
|
523
|
+
const tabContents = document.querySelectorAll(".tab-content");
|
524
|
+
|
525
|
+
tabLinks.forEach((link) => {
|
526
|
+
link.addEventListener("click", () => {
|
527
|
+
// Remove active class from all tabs
|
528
|
+
tabLinks.forEach((l) => l.classList.remove("active"));
|
529
|
+
tabContents.forEach((c) => c.classList.remove("active"));
|
530
|
+
|
531
|
+
// Add active class to clicked tab
|
532
|
+
link.classList.add("active");
|
533
|
+
|
534
|
+
// Show corresponding content
|
535
|
+
const tabId = link.getAttribute("data-tab");
|
536
|
+
document.getElementById(tabId).classList.add("active");
|
537
|
+
});
|
538
|
+
});
|
539
|
+
|
540
|
+
// Password visibility toggle
|
541
|
+
const toggleButtons = document.querySelectorAll(".password-toggle");
|
542
|
+
toggleButtons.forEach((button) => {
|
543
|
+
button.addEventListener("click", () => {
|
544
|
+
const input = button.previousElementSibling;
|
545
|
+
const icon = button.querySelector(".material-icons");
|
546
|
+
|
547
|
+
if (input.type === "password") {
|
548
|
+
input.type = "text";
|
549
|
+
icon.textContent = "visibility_off";
|
550
|
+
} else {
|
551
|
+
input.type = "password";
|
552
|
+
icon.textContent = "visibility";
|
553
|
+
}
|
554
|
+
});
|
555
|
+
});
|
556
|
+
});
|
557
|
+
</script>
|
558
|
+
|
559
|
+
{%- include appscms/scripts/script.html -%}
|
560
|
+
</body>
|
561
|
+
</html>
|
data/assets/.DS_Store
CHANGED
Binary file
|