appscms-tools-theme 5.2.7 → 5.2.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 +129 -0
- data/_includes/.DS_Store +0 -0
- data/_includes/appscms/.DS_Store +0 -0
- data/_includes/appscms/category-tabs/category-tabs.html +44 -3
- data/_includes/appscms/footer/footer.html +1 -1
- data/_includes/appscms/infographics/infographics.html +328 -160
- metadata +2 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 172518566046f4fd7791d50dd2e7c26122eed58a3a0696ffddb700992ed289ce
|
|
4
|
+
data.tar.gz: bb4626c1cf6b9773621276c3de6d74782da35d12bada124fdaffa09ec224cf87
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: af21d39e08c528cf7978449a6967e95c2848cd9090dc47361e2ca41eb50d5ad1e24862c89d7ae1fba268844d4d5bdbab75f77226088504a839ea0274c5124c50
|
|
7
|
+
data.tar.gz: 5a9353662bc9d831c2cb0a5cdc9f02753f0d22a1be464b3ca1564a38eed798538d7a7ed01451af883bddf2b73edba20f45ca855489c71b93e54c3b5d17d9d9fe
|
data/_data/.DS_Store
CHANGED
|
Binary file
|
data/_data/home/en/en.json
CHANGED
|
@@ -21,6 +21,135 @@
|
|
|
21
21
|
}
|
|
22
22
|
],
|
|
23
23
|
"features": [
|
|
24
|
+
{
|
|
25
|
+
"category": "All Tools",
|
|
26
|
+
"active": true,
|
|
27
|
+
"type": "tab",
|
|
28
|
+
"display": "block",
|
|
29
|
+
"features": [
|
|
30
|
+
{
|
|
31
|
+
"name": "All tools",
|
|
32
|
+
"description": "Appscms feature layout with new design",
|
|
33
|
+
"color": "linear-gradient(148deg, #835af2 20%, #1220d8 100%)",
|
|
34
|
+
"icon": "/assets/images/digipaint.svg",
|
|
35
|
+
"url": "/appscms-feature"
|
|
36
|
+
},
|
|
37
|
+
{
|
|
38
|
+
"name": "All tools",
|
|
39
|
+
"description": "Appscms feature layout with new design",
|
|
40
|
+
"color": "linear-gradient(148deg, #31d3bd 20%, #187cca 100%)",
|
|
41
|
+
"icon": "/assets/images/digipaint.svg",
|
|
42
|
+
"url": "/appscms-feature"
|
|
43
|
+
},
|
|
44
|
+
{
|
|
45
|
+
"name": "All tools",
|
|
46
|
+
"description": "Appscms feature layout with new design",
|
|
47
|
+
"color": "linear-gradient(148deg, #32a0f7 20%, #114793 100%)",
|
|
48
|
+
"icon": "/assets/images/digipaint.svg",
|
|
49
|
+
"url": "/appscms-feature"
|
|
50
|
+
},
|
|
51
|
+
{
|
|
52
|
+
"name": "All tools",
|
|
53
|
+
"description": "Appscms feature layout with new design",
|
|
54
|
+
"color": "linear-gradient(148deg, #ffa16b 20%, #db410a 100%)",
|
|
55
|
+
"icon": "/assets/images/digipaint.svg",
|
|
56
|
+
"url": "/appscms-feature"
|
|
57
|
+
},
|
|
58
|
+
{
|
|
59
|
+
"name": "All tools",
|
|
60
|
+
"description": "Appscms feature layout with new design",
|
|
61
|
+
"color": "#1A2EE7",
|
|
62
|
+
"icon": "/assets/images/digipaint.svg",
|
|
63
|
+
"url": "/appscms-feature"
|
|
64
|
+
}
|
|
65
|
+
]
|
|
66
|
+
},
|
|
67
|
+
{
|
|
68
|
+
"category": "All Tools",
|
|
69
|
+
"active": true,
|
|
70
|
+
"type": "tab",
|
|
71
|
+
"display": "block",
|
|
72
|
+
"features": [
|
|
73
|
+
{
|
|
74
|
+
"name": "All tools",
|
|
75
|
+
"description": "Appscms feature layout with new design",
|
|
76
|
+
"color": "linear-gradient(148deg, #835af2 20%, #1220d8 100%)",
|
|
77
|
+
"icon": "/assets/images/digipaint.svg",
|
|
78
|
+
"url": "/appscms-feature"
|
|
79
|
+
},
|
|
80
|
+
{
|
|
81
|
+
"name": "All tools",
|
|
82
|
+
"description": "Appscms feature layout with new design",
|
|
83
|
+
"color": "linear-gradient(148deg, #31d3bd 20%, #187cca 100%)",
|
|
84
|
+
"icon": "/assets/images/digipaint.svg",
|
|
85
|
+
"url": "/appscms-feature"
|
|
86
|
+
},
|
|
87
|
+
{
|
|
88
|
+
"name": "All tools",
|
|
89
|
+
"description": "Appscms feature layout with new design",
|
|
90
|
+
"color": "linear-gradient(148deg, #32a0f7 20%, #114793 100%)",
|
|
91
|
+
"icon": "/assets/images/digipaint.svg",
|
|
92
|
+
"url": "/appscms-feature"
|
|
93
|
+
},
|
|
94
|
+
{
|
|
95
|
+
"name": "All tools",
|
|
96
|
+
"description": "Appscms feature layout with new design",
|
|
97
|
+
"color": "linear-gradient(148deg, #ffa16b 20%, #db410a 100%)",
|
|
98
|
+
"icon": "/assets/images/digipaint.svg",
|
|
99
|
+
"url": "/appscms-feature"
|
|
100
|
+
},
|
|
101
|
+
{
|
|
102
|
+
"name": "All tools",
|
|
103
|
+
"description": "Appscms feature layout with new design",
|
|
104
|
+
"color": "#1A2EE7",
|
|
105
|
+
"icon": "/assets/images/digipaint.svg",
|
|
106
|
+
"url": "/appscms-feature"
|
|
107
|
+
}
|
|
108
|
+
]
|
|
109
|
+
},
|
|
110
|
+
{
|
|
111
|
+
"category": "All Tools",
|
|
112
|
+
"active": true,
|
|
113
|
+
"type": "tab",
|
|
114
|
+
"display": "block",
|
|
115
|
+
"features": [
|
|
116
|
+
{
|
|
117
|
+
"name": "All tools",
|
|
118
|
+
"description": "Appscms feature layout with new design",
|
|
119
|
+
"color": "linear-gradient(148deg, #835af2 20%, #1220d8 100%)",
|
|
120
|
+
"icon": "/assets/images/digipaint.svg",
|
|
121
|
+
"url": "/appscms-feature"
|
|
122
|
+
},
|
|
123
|
+
{
|
|
124
|
+
"name": "All tools",
|
|
125
|
+
"description": "Appscms feature layout with new design",
|
|
126
|
+
"color": "linear-gradient(148deg, #31d3bd 20%, #187cca 100%)",
|
|
127
|
+
"icon": "/assets/images/digipaint.svg",
|
|
128
|
+
"url": "/appscms-feature"
|
|
129
|
+
},
|
|
130
|
+
{
|
|
131
|
+
"name": "All tools",
|
|
132
|
+
"description": "Appscms feature layout with new design",
|
|
133
|
+
"color": "linear-gradient(148deg, #32a0f7 20%, #114793 100%)",
|
|
134
|
+
"icon": "/assets/images/digipaint.svg",
|
|
135
|
+
"url": "/appscms-feature"
|
|
136
|
+
},
|
|
137
|
+
{
|
|
138
|
+
"name": "All tools",
|
|
139
|
+
"description": "Appscms feature layout with new design",
|
|
140
|
+
"color": "linear-gradient(148deg, #ffa16b 20%, #db410a 100%)",
|
|
141
|
+
"icon": "/assets/images/digipaint.svg",
|
|
142
|
+
"url": "/appscms-feature"
|
|
143
|
+
},
|
|
144
|
+
{
|
|
145
|
+
"name": "All tools",
|
|
146
|
+
"description": "Appscms feature layout with new design",
|
|
147
|
+
"color": "#1A2EE7",
|
|
148
|
+
"icon": "/assets/images/digipaint.svg",
|
|
149
|
+
"url": "/appscms-feature"
|
|
150
|
+
}
|
|
151
|
+
]
|
|
152
|
+
},
|
|
24
153
|
{
|
|
25
154
|
"category": "All Tools",
|
|
26
155
|
"active": true,
|
data/_includes/.DS_Store
CHANGED
|
Binary file
|
data/_includes/appscms/.DS_Store
CHANGED
|
Binary file
|
|
@@ -9,14 +9,55 @@
|
|
|
9
9
|
}
|
|
10
10
|
|
|
11
11
|
.toolfilters {
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
12
|
+
display: flex;
|
|
13
|
+
align-items: center;
|
|
14
|
+
background: #fff;
|
|
15
|
+
border-radius: 99px;
|
|
16
|
+
padding: 8px 12px;
|
|
17
|
+
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
|
|
18
|
+
max-width: 100%;
|
|
19
|
+
position: relative;
|
|
15
20
|
}
|
|
16
21
|
.toolfilters-wrapper {
|
|
17
22
|
display: flex;
|
|
18
23
|
align-items: center;
|
|
19
24
|
justify-content: center;
|
|
25
|
+
padding: 0 15px;
|
|
26
|
+
}
|
|
27
|
+
.filters-scroll {
|
|
28
|
+
display: flex;
|
|
29
|
+
overflow-x: auto;
|
|
30
|
+
scroll-behavior: smooth;
|
|
31
|
+
scrollbar-width: none;
|
|
32
|
+
-ms-overflow-style: none;
|
|
33
|
+
}
|
|
34
|
+
.filters-scroll::-webkit-scrollbar {
|
|
35
|
+
display: none;
|
|
36
|
+
}
|
|
37
|
+
.navigation-btn {
|
|
38
|
+
display: flex;
|
|
39
|
+
align-items: center;
|
|
40
|
+
justify-content: center;
|
|
41
|
+
cursor: pointer;
|
|
42
|
+
flex-shrink: 0;
|
|
43
|
+
width: 32px;
|
|
44
|
+
height: 32px;
|
|
45
|
+
border-radius: 50%;
|
|
46
|
+
transition: background-color 0.2s ease;
|
|
47
|
+
}
|
|
48
|
+
.navigation-btn:hover {
|
|
49
|
+
background-color: rgba(0, 0, 0, 0.05);
|
|
50
|
+
}
|
|
51
|
+
.navigation-btn img {
|
|
52
|
+
width: 20px;
|
|
53
|
+
height: 20px;
|
|
54
|
+
opacity: 0.6;
|
|
55
|
+
}
|
|
56
|
+
.left-scroll {
|
|
57
|
+
margin-right: 8px;
|
|
58
|
+
}
|
|
59
|
+
.right-scroll {
|
|
60
|
+
margin-left: 8px;
|
|
20
61
|
}
|
|
21
62
|
.filter__category {
|
|
22
63
|
display: flex;
|
|
@@ -71,7 +71,7 @@ languages/languages.html -%} {% assign dataFile= site.data[folder][lang][file]
|
|
|
71
71
|
<div class="col-md-12 mt-4 mb-2">
|
|
72
72
|
<div class="d-flex justify-content-between">
|
|
73
73
|
<div id="copyright-text">
|
|
74
|
-
©
|
|
74
|
+
© {{ site.time | date: "%Y" }} Copyright:
|
|
75
75
|
<a class="text-reset fw-bold" href="{{site.siteurl}}"
|
|
76
76
|
>{{site.name}}</a
|
|
77
77
|
>
|
|
@@ -1,64 +1,126 @@
|
|
|
1
1
|
<style>
|
|
2
|
-
.
|
|
2
|
+
.infographics-container {
|
|
3
|
+
padding: 40px 0;
|
|
4
|
+
}
|
|
5
|
+
.infographics-h2 {
|
|
6
|
+
font-size: 28px;
|
|
7
|
+
font-weight: 700;
|
|
8
|
+
text-align: center;
|
|
9
|
+
margin-bottom: 10px;
|
|
10
|
+
color: #333;
|
|
11
|
+
}
|
|
12
|
+
.infographics-description {
|
|
13
|
+
text-align: center;
|
|
14
|
+
color: #666;
|
|
15
|
+
margin-bottom: 30px;
|
|
16
|
+
}
|
|
17
|
+
.infographics-section {
|
|
18
|
+
position: relative;
|
|
19
|
+
}
|
|
20
|
+
.infographics-arrow {
|
|
21
|
+
position: absolute;
|
|
22
|
+
top: 50%;
|
|
23
|
+
transform: translateY(-50%);
|
|
24
|
+
width: 40px;
|
|
25
|
+
height: 40px;
|
|
26
|
+
border-radius: 50%;
|
|
27
|
+
background: #fff;
|
|
28
|
+
border: 1px solid #e0e0e0;
|
|
29
|
+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
30
|
+
cursor: pointer;
|
|
31
|
+
display: flex;
|
|
32
|
+
align-items: center;
|
|
33
|
+
justify-content: center;
|
|
34
|
+
z-index: 10;
|
|
35
|
+
transition: all 0.2s ease;
|
|
36
|
+
}
|
|
37
|
+
.infographics-arrow:hover {
|
|
38
|
+
background: #f5f5f5;
|
|
39
|
+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
40
|
+
}
|
|
41
|
+
.infographics-arrow-left {
|
|
42
|
+
left: -50px;
|
|
43
|
+
}
|
|
44
|
+
.infographics-arrow-right {
|
|
45
|
+
right: -50px;
|
|
46
|
+
}
|
|
47
|
+
.infographics-carousel {
|
|
48
|
+
overflow: hidden;
|
|
49
|
+
}
|
|
50
|
+
.infographics-row {
|
|
51
|
+
display: flex;
|
|
52
|
+
flex-wrap: nowrap;
|
|
53
|
+
transition: transform 0.3s ease;
|
|
54
|
+
}
|
|
55
|
+
.infographic-card {
|
|
56
|
+
flex: 0 0 33.333%;
|
|
57
|
+
max-width: 33.333%;
|
|
58
|
+
padding: 0 12px;
|
|
59
|
+
}
|
|
60
|
+
.infographic-card-inner {
|
|
61
|
+
background: #fff;
|
|
62
|
+
border-radius: 12px;
|
|
63
|
+
overflow: hidden;
|
|
64
|
+
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
|
|
65
|
+
transition: all 0.3s ease;
|
|
66
|
+
height: 100%;
|
|
67
|
+
}
|
|
68
|
+
.infographic-card-inner:hover {
|
|
69
|
+
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
|
|
70
|
+
transform: translateY(-5px);
|
|
71
|
+
}
|
|
72
|
+
.infographic-img-wrapper {
|
|
73
|
+
width: 100%;
|
|
74
|
+
height: 200px;
|
|
75
|
+
overflow: hidden;
|
|
76
|
+
cursor: pointer;
|
|
77
|
+
position: relative;
|
|
78
|
+
}
|
|
79
|
+
.infographic-img-wrapper .magnify-icon {
|
|
3
80
|
position: absolute;
|
|
4
81
|
top: 50%;
|
|
82
|
+
left: 50%;
|
|
83
|
+
transform: translate(-50%, -50%);
|
|
5
84
|
width: 50px;
|
|
6
85
|
height: 50px;
|
|
7
|
-
background: rgba(
|
|
8
|
-
color: #fff;
|
|
9
|
-
border: none;
|
|
10
|
-
cursor: pointer;
|
|
11
|
-
font-size: 24px;
|
|
12
|
-
text-align: center;
|
|
13
|
-
line-height: 50px;
|
|
86
|
+
background: rgba(255, 255, 255, 0.95);
|
|
14
87
|
border-radius: 50%;
|
|
15
|
-
|
|
88
|
+
display: flex;
|
|
89
|
+
align-items: center;
|
|
90
|
+
justify-content: center;
|
|
91
|
+
opacity: 0;
|
|
92
|
+
transition: all 0.3s ease;
|
|
93
|
+
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
|
|
16
94
|
}
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
95
|
+
.infographic-img-wrapper .magnify-icon svg {
|
|
96
|
+
width: 24px;
|
|
97
|
+
height: 24px;
|
|
98
|
+
color: #333;
|
|
20
99
|
}
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
right: 10px;
|
|
100
|
+
.infographic-img-wrapper:hover .magnify-icon {
|
|
101
|
+
opacity: 1;
|
|
24
102
|
}
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
.
|
|
28
|
-
top: 30%;
|
|
29
|
-
width: 40px;
|
|
30
|
-
height: 40px;
|
|
31
|
-
font-size: 20px;
|
|
32
|
-
line-height: 40px;
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
.modal-arrow-btn.prev {
|
|
36
|
-
left: 5px;
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
.modal-arrow-btn.next {
|
|
40
|
-
right: 5px;
|
|
41
|
-
}
|
|
103
|
+
.infographic-img-wrapper:hover .infographic-img {
|
|
104
|
+
transform: scale(1.05);
|
|
105
|
+
filter: brightness(0.8);
|
|
42
106
|
}
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
.modal-arrow-btn.next {
|
|
57
|
-
right: 3px;
|
|
58
|
-
}
|
|
107
|
+
.infographic-img {
|
|
108
|
+
width: 100%;
|
|
109
|
+
height: 100%;
|
|
110
|
+
object-fit: cover;
|
|
111
|
+
transition: all 0.3s ease;
|
|
112
|
+
}
|
|
113
|
+
.infographic-desc {
|
|
114
|
+
padding: 15px;
|
|
115
|
+
font-size: 14px;
|
|
116
|
+
font-weight: 500;
|
|
117
|
+
color: #333;
|
|
118
|
+
text-align: center;
|
|
119
|
+
border-top: 1px solid #f0f0f0;
|
|
59
120
|
}
|
|
60
121
|
|
|
61
|
-
|
|
122
|
+
/* Modal styles */
|
|
123
|
+
.infographic-modal {
|
|
62
124
|
position: fixed;
|
|
63
125
|
z-index: 1000;
|
|
64
126
|
left: 0;
|
|
@@ -66,152 +128,258 @@
|
|
|
66
128
|
width: 100%;
|
|
67
129
|
height: 100%;
|
|
68
130
|
overflow: auto;
|
|
69
|
-
background-color: rgba(
|
|
131
|
+
background-color: rgba(0, 0, 0, 0.9);
|
|
70
132
|
opacity: 0;
|
|
71
133
|
visibility: hidden;
|
|
72
|
-
|
|
73
|
-
transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s;
|
|
134
|
+
transition: opacity 0.3s ease, visibility 0s linear 0.3s;
|
|
74
135
|
}
|
|
75
|
-
|
|
76
|
-
.modal1.show {
|
|
136
|
+
.infographic-modal.show {
|
|
77
137
|
opacity: 1;
|
|
78
138
|
visibility: visible;
|
|
79
|
-
|
|
80
|
-
transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s;
|
|
139
|
+
transition: opacity 0.3s ease, visibility 0s;
|
|
81
140
|
}
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
margin-top: 20px;
|
|
89
|
-
opacity: 0;
|
|
90
|
-
transform: translateY(-20px);
|
|
91
|
-
transition: opacity 0.3s ease 0.1s, transform 0.3s ease 0.1s;
|
|
141
|
+
.infographic-modal-content {
|
|
142
|
+
display: flex;
|
|
143
|
+
align-items: center;
|
|
144
|
+
justify-content: center;
|
|
145
|
+
height: 100%;
|
|
146
|
+
padding: 20px;
|
|
92
147
|
}
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
148
|
+
.infographic-modal-img {
|
|
149
|
+
max-width: 90%;
|
|
150
|
+
max-height: 90vh;
|
|
151
|
+
object-fit: contain;
|
|
152
|
+
border-radius: 8px;
|
|
97
153
|
}
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
154
|
+
.infographic-modal-close {
|
|
155
|
+
position: absolute;
|
|
156
|
+
top: 20px;
|
|
157
|
+
right: 30px;
|
|
158
|
+
font-size: 40px;
|
|
159
|
+
color: #fff;
|
|
160
|
+
cursor: pointer;
|
|
161
|
+
transition: color 0.2s ease;
|
|
162
|
+
z-index: 1001;
|
|
102
163
|
}
|
|
103
|
-
|
|
104
|
-
|
|
164
|
+
.infographic-modal-close:hover {
|
|
165
|
+
color: #ccc;
|
|
166
|
+
}
|
|
167
|
+
.infographic-modal-arrow {
|
|
105
168
|
position: absolute;
|
|
106
|
-
top:
|
|
107
|
-
|
|
108
|
-
|
|
169
|
+
top: 50%;
|
|
170
|
+
transform: translateY(-50%);
|
|
171
|
+
width: 50px;
|
|
172
|
+
height: 50px;
|
|
173
|
+
background: rgba(255, 255, 255, 0.2);
|
|
109
174
|
color: #fff;
|
|
175
|
+
border: none;
|
|
110
176
|
cursor: pointer;
|
|
177
|
+
font-size: 24px;
|
|
178
|
+
border-radius: 50%;
|
|
179
|
+
display: flex;
|
|
180
|
+
align-items: center;
|
|
181
|
+
justify-content: center;
|
|
182
|
+
transition: background 0.2s ease;
|
|
183
|
+
}
|
|
184
|
+
.infographic-modal-arrow:hover {
|
|
185
|
+
background: rgba(255, 255, 255, 0.4);
|
|
186
|
+
}
|
|
187
|
+
.infographic-modal-arrow.prev {
|
|
188
|
+
left: 20px;
|
|
189
|
+
}
|
|
190
|
+
.infographic-modal-arrow.next {
|
|
191
|
+
right: 20px;
|
|
111
192
|
}
|
|
112
193
|
|
|
113
|
-
|
|
114
|
-
|
|
194
|
+
@media (max-width: 991px) {
|
|
195
|
+
.infographic-card {
|
|
196
|
+
flex: 0 0 50%;
|
|
197
|
+
max-width: 50%;
|
|
198
|
+
}
|
|
199
|
+
.infographics-arrow-left {
|
|
200
|
+
left: -25px;
|
|
201
|
+
}
|
|
202
|
+
.infographics-arrow-right {
|
|
203
|
+
right: -25px;
|
|
204
|
+
}
|
|
205
|
+
}
|
|
206
|
+
@media (max-width: 767px) {
|
|
207
|
+
.infographic-card {
|
|
208
|
+
flex: 0 0 100%;
|
|
209
|
+
max-width: 100%;
|
|
210
|
+
}
|
|
211
|
+
.infographics-arrow-left {
|
|
212
|
+
left: 10px;
|
|
213
|
+
}
|
|
214
|
+
.infographics-arrow-right {
|
|
215
|
+
right: 10px;
|
|
216
|
+
}
|
|
217
|
+
.infographics-arrow {
|
|
218
|
+
background: rgba(255, 255, 255, 0.9);
|
|
219
|
+
}
|
|
220
|
+
.infographic-modal-arrow {
|
|
221
|
+
width: 40px;
|
|
222
|
+
height: 40px;
|
|
223
|
+
font-size: 20px;
|
|
224
|
+
}
|
|
225
|
+
.infographic-modal-arrow.prev {
|
|
226
|
+
left: 10px;
|
|
227
|
+
}
|
|
228
|
+
.infographic-modal-arrow.next {
|
|
229
|
+
right: 10px;
|
|
230
|
+
}
|
|
115
231
|
}
|
|
116
232
|
</style>
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
<
|
|
233
|
+
|
|
234
|
+
{%- if pageData.infographics -%}
|
|
235
|
+
<div class="infographics-container">
|
|
236
|
+
<p class="infographics-h2">Other useful information</p>
|
|
237
|
+
<p class="infographics-description">Explore our visual guides and infographics</p>
|
|
238
|
+
|
|
239
|
+
<div class="container">
|
|
240
|
+
<div class="row">
|
|
241
|
+
<div class="col-md-10 mx-auto">
|
|
242
|
+
<div class="infographics-section">
|
|
243
|
+
<button class="infographics-arrow infographics-arrow-left" id="infographicsLeft">
|
|
244
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
245
|
+
<path d="m15 18-6-6 6-6"></path>
|
|
246
|
+
</svg>
|
|
247
|
+
</button>
|
|
248
|
+
|
|
249
|
+
<div class="infographics-carousel">
|
|
250
|
+
<div class="infographics-row" id="infographicsRow">
|
|
251
|
+
{% for item in pageData.infographics %}
|
|
252
|
+
<div class="infographic-card">
|
|
253
|
+
<div class="infographic-card-inner">
|
|
254
|
+
<div class="infographic-img-wrapper" data-index="{{ forloop.index0 }}">
|
|
255
|
+
<img loading="lazy" src="{{ item.image }}" alt="{{ item.alt }}" class="infographic-img" draggable="false" />
|
|
256
|
+
<div class="magnify-icon">
|
|
257
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
258
|
+
<circle cx="11" cy="11" r="8"></circle>
|
|
259
|
+
<path d="m21 21-4.35-4.35"></path>
|
|
260
|
+
<path d="M11 8v6"></path>
|
|
261
|
+
<path d="M8 11h6"></path>
|
|
262
|
+
</svg>
|
|
263
|
+
</div>
|
|
264
|
+
</div>
|
|
265
|
+
<p class="infographic-desc">{{ item.description | capitalize }}</p>
|
|
266
|
+
</div>
|
|
267
|
+
</div>
|
|
268
|
+
{% endfor %}
|
|
269
|
+
</div>
|
|
270
|
+
</div>
|
|
271
|
+
|
|
272
|
+
<button class="infographics-arrow infographics-arrow-right" id="infographicsRight">
|
|
273
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
274
|
+
<path d="m9 18 6-6-6-6"></path>
|
|
275
|
+
</svg>
|
|
276
|
+
</button>
|
|
128
277
|
</div>
|
|
129
|
-
{% endfor %} {%- endif -%}
|
|
130
278
|
</div>
|
|
131
279
|
</div>
|
|
132
|
-
<i id="right" class="fas fa-angle-right"></i>
|
|
133
280
|
</div>
|
|
134
281
|
</div>
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
<
|
|
139
|
-
<
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
282
|
+
|
|
283
|
+
<!-- Full Preview Modal -->
|
|
284
|
+
<div id="infographicModal" class="infographic-modal">
|
|
285
|
+
<span class="infographic-modal-close" id="modalClose">×</span>
|
|
286
|
+
<button class="infographic-modal-arrow prev" id="modalPrev">❮</button>
|
|
287
|
+
<button class="infographic-modal-arrow next" id="modalNext">❯</button>
|
|
288
|
+
<div class="infographic-modal-content">
|
|
289
|
+
<img id="modalImage" class="infographic-modal-img" src="" alt="Infographic Preview" />
|
|
143
290
|
</div>
|
|
144
291
|
</div>
|
|
145
292
|
|
|
146
|
-
|
|
147
293
|
<script>
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
}
|
|
294
|
+
document.addEventListener("DOMContentLoaded", () => {
|
|
295
|
+
const infographicsRow = document.getElementById('infographicsRow');
|
|
296
|
+
const leftBtn = document.getElementById('infographicsLeft');
|
|
297
|
+
const rightBtn = document.getElementById('infographicsRight');
|
|
298
|
+
const cards = document.querySelectorAll('.infographic-card');
|
|
299
|
+
const modal = document.getElementById('infographicModal');
|
|
300
|
+
const modalImg = document.getElementById('modalImage');
|
|
301
|
+
const modalClose = document.getElementById('modalClose');
|
|
302
|
+
const modalPrev = document.getElementById('modalPrev');
|
|
303
|
+
const modalNext = document.getElementById('modalNext');
|
|
159
304
|
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
modal_array_of_images = Array.from(document.querySelectorAll('.infographic-img'));
|
|
163
|
-
}
|
|
305
|
+
let currentModalIndex = 0;
|
|
306
|
+
const images = Array.from(document.querySelectorAll('.infographic-img'));
|
|
164
307
|
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
308
|
+
// Carousel navigation
|
|
309
|
+
rightBtn.addEventListener('click', () => {
|
|
310
|
+
const firstCard = infographicsRow.querySelector('.infographic-card:first-child');
|
|
311
|
+
if (firstCard) {
|
|
312
|
+
infographicsRow.appendChild(firstCard.cloneNode(true));
|
|
313
|
+
firstCard.remove();
|
|
314
|
+
attachCardListeners();
|
|
172
315
|
}
|
|
316
|
+
});
|
|
173
317
|
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
318
|
+
leftBtn.addEventListener('click', () => {
|
|
319
|
+
const lastCard = infographicsRow.querySelector('.infographic-card:last-child');
|
|
320
|
+
if (lastCard) {
|
|
321
|
+
infographicsRow.insertBefore(lastCard.cloneNode(true), infographicsRow.firstChild);
|
|
322
|
+
lastCard.remove();
|
|
323
|
+
attachCardListeners();
|
|
178
324
|
}
|
|
325
|
+
});
|
|
179
326
|
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
327
|
+
// Modal functions
|
|
328
|
+
function openModal(index) {
|
|
329
|
+
currentModalIndex = index;
|
|
330
|
+
modalImg.src = images[currentModalIndex].src;
|
|
331
|
+
modal.classList.add('show');
|
|
332
|
+
document.body.style.overflow = 'hidden';
|
|
333
|
+
}
|
|
186
334
|
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
e.stopPropagation();
|
|
192
|
-
if (modal_btn.classList.contains('prev')) {
|
|
193
|
-
current_modal_img = (current_modal_img > 0) ? current_modal_img - 1 : modal_array_of_images.length - 1;
|
|
194
|
-
} else {
|
|
195
|
-
current_modal_img = (current_modal_img < modal_array_of_images.length - 1) ? current_modal_img + 1 : 0;
|
|
196
|
-
}
|
|
197
|
-
updateModalImage();
|
|
198
|
-
});
|
|
199
|
-
});
|
|
335
|
+
function closeModal() {
|
|
336
|
+
modal.classList.remove('show');
|
|
337
|
+
document.body.style.overflow = '';
|
|
338
|
+
}
|
|
200
339
|
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
340
|
+
function showPrev() {
|
|
341
|
+
currentModalIndex = (currentModalIndex > 0) ? currentModalIndex - 1 : images.length - 1;
|
|
342
|
+
modalImg.src = images[currentModalIndex].src;
|
|
343
|
+
}
|
|
344
|
+
|
|
345
|
+
function showNext() {
|
|
346
|
+
currentModalIndex = (currentModalIndex < images.length - 1) ? currentModalIndex + 1 : 0;
|
|
347
|
+
modalImg.src = images[currentModalIndex].src;
|
|
348
|
+
}
|
|
205
349
|
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
350
|
+
// Attach click listeners to cards
|
|
351
|
+
function attachCardListeners() {
|
|
352
|
+
document.querySelectorAll('.infographic-img-wrapper').forEach((wrapper) => {
|
|
353
|
+
wrapper.onclick = function() {
|
|
354
|
+
const img = this.querySelector('.infographic-img');
|
|
355
|
+
const index = images.findIndex(i => i.src === img.src);
|
|
356
|
+
openModal(index >= 0 ? index : 0);
|
|
357
|
+
};
|
|
211
358
|
});
|
|
359
|
+
}
|
|
212
360
|
|
|
213
|
-
|
|
214
|
-
|
|
361
|
+
// Event listeners
|
|
362
|
+
modalClose.addEventListener('click', closeModal);
|
|
363
|
+
modalPrev.addEventListener('click', (e) => { e.stopPropagation(); showPrev(); });
|
|
364
|
+
modalNext.addEventListener('click', (e) => { e.stopPropagation(); showNext(); });
|
|
365
|
+
|
|
366
|
+
modal.addEventListener('click', (e) => {
|
|
367
|
+
if (e.target === modal || e.target === document.querySelector('.infographic-modal-content')) {
|
|
368
|
+
closeModal();
|
|
369
|
+
}
|
|
370
|
+
});
|
|
371
|
+
|
|
372
|
+
// Keyboard navigation
|
|
373
|
+
document.addEventListener('keydown', (e) => {
|
|
374
|
+
if (modal.classList.contains('show')) {
|
|
375
|
+
if (e.key === 'Escape') closeModal();
|
|
376
|
+
if (e.key === 'ArrowLeft') showPrev();
|
|
377
|
+
if (e.key === 'ArrowRight') showNext();
|
|
378
|
+
}
|
|
215
379
|
});
|
|
216
380
|
|
|
217
|
-
|
|
381
|
+
// Initialize
|
|
382
|
+
attachCardListeners();
|
|
383
|
+
});
|
|
384
|
+
</script>
|
|
385
|
+
{%- endif -%}
|
metadata
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: appscms-tools-theme
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 5.2.
|
|
4
|
+
version: 5.2.9
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- vivek-appscms
|
|
8
8
|
autorequire:
|
|
9
9
|
bindir: bin
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date: 2026-01-
|
|
11
|
+
date: 2026-01-17 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: jekyll
|