@saasquatch/squatch-js 2.8.2-9 → 2.8.3-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/coverage/clover.xml +944 -0
- package/coverage/coverage-final.json +22 -0
- package/coverage/lcov-report/base.css +224 -0
- package/coverage/lcov-report/block-navigation.js +87 -0
- package/coverage/lcov-report/favicon.png +0 -0
- package/coverage/lcov-report/prettify.css +1 -0
- package/coverage/lcov-report/prettify.js +2 -0
- package/coverage/lcov-report/sort-arrow-sprite.png +0 -0
- package/coverage/lcov-report/sorter.js +196 -0
- package/coverage/lcov.info +1714 -0
- package/dist/SkeletonTemplate-CIRGs_GB.js +258 -0
- package/dist/SkeletonTemplate-CIRGs_GB.js.map +1 -0
- package/dist/SkeletonTemplate-hwDwv3Ys.cjs +250 -0
- package/dist/SkeletonTemplate-hwDwv3Ys.cjs.map +1 -0
- package/dist/squatch.cjs.js +25 -2593
- package/dist/squatch.cjs.js.map +1 -1
- package/dist/squatch.esm.js +812 -1988
- package/dist/squatch.esm.js.map +1 -1
- package/dist/squatch.js +251 -2575
- package/dist/squatch.js.map +1 -1
- package/dist/squatch.min.js +4 -5
- package/dist/utils/logger.d.ts +20 -0
- package/dist/widgets/PopupWidget.d.ts +2 -2
- package/dist/widgets/SkeletonTemplate.d.ts +3 -2
- package/dist/widgets/declarative/DeclarativeWidget.d.ts +4 -0
- package/dist/widgets/declarative/DeclarativeWidgets.d.ts +0 -6
- package/package.json +1 -2
- package/vite.config.ts +1 -1
|
@@ -0,0 +1,258 @@
|
|
|
1
|
+
const l = ({
|
|
2
|
+
type: i = "verified-access",
|
|
3
|
+
height: e = "500px",
|
|
4
|
+
skeletonBackgroundColor: s = "#e0e0e0",
|
|
5
|
+
skeletonShimmerColor: t = "#f5f5f5"
|
|
6
|
+
}) => `
|
|
7
|
+
<style>
|
|
8
|
+
* {
|
|
9
|
+
box-sizing: border-box;
|
|
10
|
+
padding: 0;
|
|
11
|
+
margin: 0;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
.widget-container {
|
|
15
|
+
background: white;
|
|
16
|
+
width: 100%;
|
|
17
|
+
padding: 40px;
|
|
18
|
+
box-sizing: border-box;
|
|
19
|
+
overflow: hidden;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
@keyframes shimmer {
|
|
23
|
+
0% { background-position: -100% 0; }
|
|
24
|
+
100% { background-position: 100% 0; }
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.skeleton {
|
|
28
|
+
background: ${s};
|
|
29
|
+
background: linear-gradient(
|
|
30
|
+
90deg,
|
|
31
|
+
${s} 25%,
|
|
32
|
+
${t} 50%,
|
|
33
|
+
${s} 75%
|
|
34
|
+
);
|
|
35
|
+
background-size: 200% 100%;
|
|
36
|
+
animation: shimmer 1.5s infinite linear;
|
|
37
|
+
border-radius: 6px;
|
|
38
|
+
margin-bottom: 12px;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
/* Typography Skeletons */
|
|
42
|
+
.sk-title-lg { height: 36px; width: 80%; margin-bottom: 16px; }
|
|
43
|
+
.sk-title-md { height: 28px; width: 30%; margin-bottom: 20px; margin-top: 40px; }
|
|
44
|
+
.sk-text { height: 16px; width: 90%; margin-bottom: 8px; }
|
|
45
|
+
.sk-text-short { width: 40%; }
|
|
46
|
+
.sk-label { height: 14px; width: 25%; margin-bottom: 10px; }
|
|
47
|
+
|
|
48
|
+
/* Layouts */
|
|
49
|
+
.hero-section {
|
|
50
|
+
display: flex;
|
|
51
|
+
gap: 40px;
|
|
52
|
+
margin-bottom: 40px;
|
|
53
|
+
padding-bottom: 40px;
|
|
54
|
+
flex-direction: row;
|
|
55
|
+
height: 100%;
|
|
56
|
+
/* Removed border-bottom */
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
.hero-content {
|
|
60
|
+
flex: 1;
|
|
61
|
+
display: flex;
|
|
62
|
+
flex-direction: column;
|
|
63
|
+
justify-content: center;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
.hero-image {
|
|
67
|
+
flex: 1;
|
|
68
|
+
height: 300px;
|
|
69
|
+
border-radius: 12px;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
/* -- Specific Instant Access Overrides -- */
|
|
73
|
+
.instant-access-layout {
|
|
74
|
+
margin-bottom: 0;
|
|
75
|
+
padding-bottom: 0;
|
|
76
|
+
align-items: center;
|
|
77
|
+
}
|
|
78
|
+
.ia-image {
|
|
79
|
+
height: 400px;
|
|
80
|
+
}
|
|
81
|
+
.ia-center {
|
|
82
|
+
margin-left: auto;
|
|
83
|
+
margin-right: auto;
|
|
84
|
+
}
|
|
85
|
+
.ia-content {
|
|
86
|
+
align-items: center;
|
|
87
|
+
text-align: center;
|
|
88
|
+
}
|
|
89
|
+
.sk-btn-action {
|
|
90
|
+
height: 45px;
|
|
91
|
+
width: 140px;
|
|
92
|
+
border-radius: 6px;
|
|
93
|
+
margin: 24px auto;
|
|
94
|
+
}
|
|
95
|
+
.input-group {
|
|
96
|
+
display: flex;
|
|
97
|
+
gap: 10px;
|
|
98
|
+
width: 100%;
|
|
99
|
+
max-width: 400px;
|
|
100
|
+
}
|
|
101
|
+
.sk-btn-copy {
|
|
102
|
+
height: 50px;
|
|
103
|
+
width: 120px;
|
|
104
|
+
border-radius: 8px;
|
|
105
|
+
}
|
|
106
|
+
/* ------------------------------------- */
|
|
107
|
+
|
|
108
|
+
.share-section { margin-bottom: 40px; }
|
|
109
|
+
.sk-input { height: 50px; width: 100%; border-radius: 8px; margin-bottom: 16px; }
|
|
110
|
+
|
|
111
|
+
.social-buttons { display: flex; gap: 12px; }
|
|
112
|
+
.sk-btn-social { flex: 1; height: 50px; border-radius: 8px; }
|
|
113
|
+
|
|
114
|
+
.stats-section {
|
|
115
|
+
display: flex;
|
|
116
|
+
gap: 24px;
|
|
117
|
+
margin-bottom: 40px;
|
|
118
|
+
padding: 30px 0;
|
|
119
|
+
/* Removed border-top and border-bottom */
|
|
120
|
+
}
|
|
121
|
+
.stat-card { flex: 1; display: flex; flex-direction: column; align-items: center; }
|
|
122
|
+
.stat-divider { padding-left: 24px; }
|
|
123
|
+
.sk-stat-num { height: 48px; width: 120px; margin-bottom: 8px; }
|
|
124
|
+
.sk-stat-label { height: 18px; width: 80px; }
|
|
125
|
+
|
|
126
|
+
/* Table Styles */
|
|
127
|
+
.table-header { display: flex; gap: 16px; margin-bottom: 16px; }
|
|
128
|
+
.sk-th { height: 16px; }
|
|
129
|
+
.table-row {
|
|
130
|
+
display: flex;
|
|
131
|
+
align-items: center;
|
|
132
|
+
gap: 16px;
|
|
133
|
+
padding: 16px 0;
|
|
134
|
+
/* Removed border-bottom */
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
.col-user { flex: 2; }
|
|
138
|
+
.col-status { flex: 1; }
|
|
139
|
+
.col-reward { flex: 2; }
|
|
140
|
+
.col-date { flex: 1; }
|
|
141
|
+
|
|
142
|
+
.sk-badge { height: 28px; width: 90px; border-radius: 14px; }
|
|
143
|
+
.sk-reward-block { height: 36px; width: 100%; border-radius: 6px; }
|
|
144
|
+
|
|
145
|
+
.pagination { display: flex; justify-content: flex-end; gap: 8px; margin-top: 24px; }
|
|
146
|
+
.sk-btn-page { height: 36px; width: 64px; border-radius: 6px; margin-bottom: 0; }
|
|
147
|
+
|
|
148
|
+
@media (max-width: 768px) {
|
|
149
|
+
body { padding: 20px; }
|
|
150
|
+
.widget-container { padding: 24px; }
|
|
151
|
+
|
|
152
|
+
.hero-section { flex-direction: column-reverse; gap: 24px; }
|
|
153
|
+
.instant-access-layout { flex-direction: column; }
|
|
154
|
+
|
|
155
|
+
.hero-image { height: 220px; width: 100%; }
|
|
156
|
+
.sk-title-lg { width: 100%; }
|
|
157
|
+
|
|
158
|
+
.col-date { display: none; }
|
|
159
|
+
}
|
|
160
|
+
</style>
|
|
161
|
+
|
|
162
|
+
<div class="widget-container">
|
|
163
|
+
${i === "verified-access" ? `
|
|
164
|
+
<div class="hero-section">
|
|
165
|
+
<div class="hero-content">
|
|
166
|
+
<div class="skeleton sk-title-lg"></div>
|
|
167
|
+
<div class="skeleton sk-text"></div>
|
|
168
|
+
<div class="skeleton sk-text sk-text-short"></div>
|
|
169
|
+
</div>
|
|
170
|
+
<div class="skeleton hero-image"></div>
|
|
171
|
+
</div>
|
|
172
|
+
|
|
173
|
+
<div class="share-section">
|
|
174
|
+
<div class="skeleton sk-label"></div>
|
|
175
|
+
<div class="skeleton sk-input"></div>
|
|
176
|
+
<div class="social-buttons">
|
|
177
|
+
<div class="skeleton sk-btn-social"></div>
|
|
178
|
+
<div class="skeleton sk-btn-social"></div>
|
|
179
|
+
<div class="skeleton sk-btn-social"></div>
|
|
180
|
+
<div class="skeleton sk-btn-social"></div>
|
|
181
|
+
</div>
|
|
182
|
+
</div>
|
|
183
|
+
|
|
184
|
+
<div class="skeleton sk-title-md" style="margin-top: 0; width: 30%; margin-left: auto; margin-right: auto"></div>
|
|
185
|
+
<div class="skeleton sk-text" style="width: 60%; margin-left: auto; margin-right: auto"></div>
|
|
186
|
+
|
|
187
|
+
<div class="stats-section">
|
|
188
|
+
<div class="stat-card">
|
|
189
|
+
<div class="skeleton sk-stat-num"></div>
|
|
190
|
+
<div class="skeleton sk-stat-label"></div>
|
|
191
|
+
</div>
|
|
192
|
+
<div class="stat-card stat-divider">
|
|
193
|
+
<div class="skeleton sk-stat-num"></div>
|
|
194
|
+
<div class="skeleton sk-stat-label"></div>
|
|
195
|
+
</div>
|
|
196
|
+
</div>
|
|
197
|
+
|
|
198
|
+
<div class="skeleton sk-title-md"></div>
|
|
199
|
+
|
|
200
|
+
<div class="table-header">
|
|
201
|
+
<div class="skeleton sk-th col-user"></div>
|
|
202
|
+
<div class="skeleton sk-th col-status"></div>
|
|
203
|
+
<div class="skeleton sk-th col-reward"></div>
|
|
204
|
+
<div class="skeleton sk-th col-date"></div>
|
|
205
|
+
</div>
|
|
206
|
+
|
|
207
|
+
<div class="table-row">
|
|
208
|
+
<div class="col-user"><div class="skeleton sk-text" style="width: 70%; margin: 0"></div></div>
|
|
209
|
+
<div class="col-status"><div class="skeleton sk-badge" style="margin: 0"></div></div>
|
|
210
|
+
<div class="col-reward"><div class="skeleton sk-reward-block" style="margin: 0"></div></div>
|
|
211
|
+
<div class="col-date"><div class="skeleton sk-text" style="width: 80%; margin: 0"></div></div>
|
|
212
|
+
</div>
|
|
213
|
+
|
|
214
|
+
<div class="table-row">
|
|
215
|
+
<div class="col-user"><div class="skeleton sk-text" style="width: 60%; margin: 0"></div></div>
|
|
216
|
+
<div class="col-status"><div class="skeleton sk-badge" style="margin: 0"></div></div>
|
|
217
|
+
<div class="col-reward"><div class="skeleton sk-reward-block" style="margin: 0"></div></div>
|
|
218
|
+
<div class="col-date"><div class="skeleton sk-text" style="width: 80%; margin: 0"></div></div>
|
|
219
|
+
</div>
|
|
220
|
+
|
|
221
|
+
<div class="table-row">
|
|
222
|
+
<div class="col-user"><div class="skeleton sk-text" style="width: 75%; margin: 0"></div></div>
|
|
223
|
+
<div class="col-status"><div class="skeleton sk-badge" style="margin: 0"></div></div>
|
|
224
|
+
<div class="col-reward"><div class="skeleton sk-reward-block" style="margin: 0"></div></div>
|
|
225
|
+
<div class="col-date"><div class="skeleton sk-text" style="width: 80%; margin: 0"></div></div>
|
|
226
|
+
</div>
|
|
227
|
+
|
|
228
|
+
<div class="pagination">
|
|
229
|
+
<div class="skeleton sk-btn-page"></div>
|
|
230
|
+
<div class="skeleton sk-btn-page"></div>
|
|
231
|
+
</div>
|
|
232
|
+
` : `
|
|
233
|
+
<div class="hero-section instant-access-layout">
|
|
234
|
+
<div class="skeleton hero-image ia-image"></div>
|
|
235
|
+
|
|
236
|
+
<div class="hero-content ia-content">
|
|
237
|
+
<div class="skeleton sk-title-lg ia-center"></div>
|
|
238
|
+
<div class="skeleton sk-text ia-center"></div>
|
|
239
|
+
|
|
240
|
+
<div class="skeleton sk-btn-action"></div>
|
|
241
|
+
|
|
242
|
+
<div class="skeleton sk-label"></div>
|
|
243
|
+
<div class="input-group">
|
|
244
|
+
<div class="skeleton sk-input"></div>
|
|
245
|
+
<div class="skeleton sk-btn-copy"></div>
|
|
246
|
+
</div>
|
|
247
|
+
|
|
248
|
+
<div class="skeleton sk-text-short ia-center" style="margin-top: 20px; width: 30%"></div>
|
|
249
|
+
<div class="skeleton sk-text-short ia-center" style="width: 20%"></div>
|
|
250
|
+
</div>
|
|
251
|
+
</div>
|
|
252
|
+
`}
|
|
253
|
+
</div>
|
|
254
|
+
`;
|
|
255
|
+
export {
|
|
256
|
+
l as getSkeleton
|
|
257
|
+
};
|
|
258
|
+
//# sourceMappingURL=SkeletonTemplate-CIRGs_GB.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SkeletonTemplate-CIRGs_GB.js","sources":["../src/widgets/SkeletonTemplate.ts"],"sourcesContent":["export type WidgetType = \"instant-access\" | \"verified-access\";\n\ninterface SkeletonProps {\n type?: WidgetType;\n height?: string | number;\n skeletonBackgroundColor?: string;\n skeletonShimmerColor?: string;\n}\n\n/**\n * Returns the complete HTML string (including <style>) for the skeleton.\n * Values are injected directly into the CSS string.\n */\nexport const getSkeleton = ({\n type = \"verified-access\",\n height = \"500px\",\n skeletonBackgroundColor = \"#e0e0e0\",\n skeletonShimmerColor = \"#f5f5f5\",\n}: SkeletonProps) => {\n const referrerHTML = `\n <div class=\"hero-section\">\n <div class=\"hero-content\">\n <div class=\"skeleton sk-title-lg\"></div>\n <div class=\"skeleton sk-text\"></div>\n <div class=\"skeleton sk-text sk-text-short\"></div>\n </div>\n <div class=\"skeleton hero-image\"></div>\n </div>\n\n <div class=\"share-section\">\n <div class=\"skeleton sk-label\"></div>\n <div class=\"skeleton sk-input\"></div>\n <div class=\"social-buttons\">\n <div class=\"skeleton sk-btn-social\"></div>\n <div class=\"skeleton sk-btn-social\"></div>\n <div class=\"skeleton sk-btn-social\"></div>\n <div class=\"skeleton sk-btn-social\"></div>\n </div>\n </div>\n\n <div class=\"skeleton sk-title-md\" style=\"margin-top: 0; width: 30%; margin-left: auto; margin-right: auto\"></div>\n <div class=\"skeleton sk-text\" style=\"width: 60%; margin-left: auto; margin-right: auto\"></div>\n\n <div class=\"stats-section\">\n <div class=\"stat-card\">\n <div class=\"skeleton sk-stat-num\"></div>\n <div class=\"skeleton sk-stat-label\"></div>\n </div>\n <div class=\"stat-card stat-divider\">\n <div class=\"skeleton sk-stat-num\"></div>\n <div class=\"skeleton sk-stat-label\"></div>\n </div>\n </div>\n\n <div class=\"skeleton sk-title-md\"></div>\n\n <div class=\"table-header\">\n <div class=\"skeleton sk-th col-user\"></div>\n <div class=\"skeleton sk-th col-status\"></div>\n <div class=\"skeleton sk-th col-reward\"></div>\n <div class=\"skeleton sk-th col-date\"></div>\n </div>\n\n <div class=\"table-row\">\n <div class=\"col-user\"><div class=\"skeleton sk-text\" style=\"width: 70%; margin: 0\"></div></div>\n <div class=\"col-status\"><div class=\"skeleton sk-badge\" style=\"margin: 0\"></div></div>\n <div class=\"col-reward\"><div class=\"skeleton sk-reward-block\" style=\"margin: 0\"></div></div>\n <div class=\"col-date\"><div class=\"skeleton sk-text\" style=\"width: 80%; margin: 0\"></div></div>\n </div>\n \n <div class=\"table-row\">\n <div class=\"col-user\"><div class=\"skeleton sk-text\" style=\"width: 60%; margin: 0\"></div></div>\n <div class=\"col-status\"><div class=\"skeleton sk-badge\" style=\"margin: 0\"></div></div>\n <div class=\"col-reward\"><div class=\"skeleton sk-reward-block\" style=\"margin: 0\"></div></div>\n <div class=\"col-date\"><div class=\"skeleton sk-text\" style=\"width: 80%; margin: 0\"></div></div>\n </div>\n\n <div class=\"table-row\">\n <div class=\"col-user\"><div class=\"skeleton sk-text\" style=\"width: 75%; margin: 0\"></div></div>\n <div class=\"col-status\"><div class=\"skeleton sk-badge\" style=\"margin: 0\"></div></div>\n <div class=\"col-reward\"><div class=\"skeleton sk-reward-block\" style=\"margin: 0\"></div></div>\n <div class=\"col-date\"><div class=\"skeleton sk-text\" style=\"width: 80%; margin: 0\"></div></div>\n </div>\n\n <div class=\"pagination\">\n <div class=\"skeleton sk-btn-page\"></div>\n <div class=\"skeleton sk-btn-page\"></div>\n </div>\n `;\n\n const instantAccessHTML = `\n <div class=\"hero-section instant-access-layout\">\n <div class=\"skeleton hero-image ia-image\"></div>\n \n <div class=\"hero-content ia-content\">\n <div class=\"skeleton sk-title-lg ia-center\"></div>\n <div class=\"skeleton sk-text ia-center\"></div>\n \n <div class=\"skeleton sk-btn-action\"></div>\n\n <div class=\"skeleton sk-label\"></div>\n <div class=\"input-group\">\n <div class=\"skeleton sk-input\"></div>\n <div class=\"skeleton sk-btn-copy\"></div>\n </div>\n\n <div class=\"skeleton sk-text-short ia-center\" style=\"margin-top: 20px; width: 30%\"></div>\n <div class=\"skeleton sk-text-short ia-center\" style=\"width: 20%\"></div>\n </div>\n </div>\n `;\n\n return `\n <style>\n * {\n box-sizing: border-box;\n padding: 0;\n margin: 0;\n }\n\n .widget-container {\n background: white;\n width: 100%;\n padding: 40px;\n box-sizing: border-box;\n overflow: hidden; \n }\n\n @keyframes shimmer {\n 0% { background-position: -100% 0; }\n 100% { background-position: 100% 0; }\n }\n\n .skeleton {\n background: ${skeletonBackgroundColor};\n background: linear-gradient(\n 90deg,\n ${skeletonBackgroundColor} 25%,\n ${skeletonShimmerColor} 50%,\n ${skeletonBackgroundColor} 75%\n );\n background-size: 200% 100%;\n animation: shimmer 1.5s infinite linear;\n border-radius: 6px;\n margin-bottom: 12px;\n }\n\n /* Typography Skeletons */\n .sk-title-lg { height: 36px; width: 80%; margin-bottom: 16px; }\n .sk-title-md { height: 28px; width: 30%; margin-bottom: 20px; margin-top: 40px; }\n .sk-text { height: 16px; width: 90%; margin-bottom: 8px; }\n .sk-text-short { width: 40%; }\n .sk-label { height: 14px; width: 25%; margin-bottom: 10px; }\n\n /* Layouts */\n .hero-section {\n display: flex;\n gap: 40px;\n margin-bottom: 40px;\n padding-bottom: 40px;\n flex-direction: row;\n height: 100%;\n /* Removed border-bottom */\n }\n \n .hero-content {\n flex: 1;\n display: flex;\n flex-direction: column;\n justify-content: center;\n }\n \n .hero-image {\n flex: 1;\n height: 300px;\n border-radius: 12px;\n }\n\n /* -- Specific Instant Access Overrides -- */\n .instant-access-layout {\n margin-bottom: 0;\n padding-bottom: 0;\n align-items: center; \n }\n .ia-image {\n height: 400px; \n }\n .ia-center {\n margin-left: auto;\n margin-right: auto;\n }\n .ia-content {\n align-items: center; \n text-align: center;\n }\n .sk-btn-action {\n height: 45px;\n width: 140px;\n border-radius: 6px;\n margin: 24px auto;\n }\n .input-group {\n display: flex;\n gap: 10px;\n width: 100%;\n max-width: 400px;\n }\n .sk-btn-copy {\n height: 50px;\n width: 120px;\n border-radius: 8px;\n }\n /* ------------------------------------- */\n\n .share-section { margin-bottom: 40px; }\n .sk-input { height: 50px; width: 100%; border-radius: 8px; margin-bottom: 16px; }\n \n .social-buttons { display: flex; gap: 12px; }\n .sk-btn-social { flex: 1; height: 50px; border-radius: 8px; }\n\n .stats-section {\n display: flex;\n gap: 24px;\n margin-bottom: 40px;\n padding: 30px 0;\n /* Removed border-top and border-bottom */\n }\n .stat-card { flex: 1; display: flex; flex-direction: column; align-items: center; }\n .stat-divider { padding-left: 24px; }\n .sk-stat-num { height: 48px; width: 120px; margin-bottom: 8px; }\n .sk-stat-label { height: 18px; width: 80px; }\n\n /* Table Styles */\n .table-header { display: flex; gap: 16px; margin-bottom: 16px; }\n .sk-th { height: 16px; }\n .table-row { \n display: flex; \n align-items: center; \n gap: 16px; \n padding: 16px 0; \n /* Removed border-bottom */\n }\n \n .col-user { flex: 2; }\n .col-status { flex: 1; }\n .col-reward { flex: 2; }\n .col-date { flex: 1; }\n\n .sk-badge { height: 28px; width: 90px; border-radius: 14px; }\n .sk-reward-block { height: 36px; width: 100%; border-radius: 6px; }\n\n .pagination { display: flex; justify-content: flex-end; gap: 8px; margin-top: 24px; }\n .sk-btn-page { height: 36px; width: 64px; border-radius: 6px; margin-bottom: 0; }\n\n @media (max-width: 768px) {\n body { padding: 20px; }\n .widget-container { padding: 24px; }\n\n .hero-section { flex-direction: column-reverse; gap: 24px; }\n .instant-access-layout { flex-direction: column; }\n \n .hero-image { height: 220px; width: 100%; }\n .sk-title-lg { width: 100%; }\n\n .col-date { display: none; }\n }\n </style>\n\n <div class=\"widget-container\">\n ${type === \"verified-access\" ? referrerHTML : instantAccessHTML}\n </div>\n `;\n};\n"],"names":["getSkeleton","type","height","skeletonBackgroundColor","skeletonShimmerColor"],"mappings":"AAaO,MAAMA,IAAc,CAAC;AAAA,EAC1B,MAAAC,IAAO;AAAA,EACP,QAAAC,IAAS;AAAA,EACT,yBAAAC,IAA0B;AAAA,EAC1B,sBAAAC,IAAuB;AACzB,MA8FS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAsBaD,CAAuB;AAAA;AAAA;AAAA,YAGjCA,CAAuB;AAAA,YACvBC,CAAoB;AAAA,YACpBD,CAAuB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAkI3BF,MAAS,oBA1PM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAuEK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAmLyC;AAAA;AAAA;"}
|
|
@@ -0,0 +1,250 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=({type:t="verified-access",height:d="500px",skeletonBackgroundColor:s="#e0e0e0",skeletonShimmerColor:i="#f5f5f5"})=>`
|
|
2
|
+
<style>
|
|
3
|
+
* {
|
|
4
|
+
box-sizing: border-box;
|
|
5
|
+
padding: 0;
|
|
6
|
+
margin: 0;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
.widget-container {
|
|
10
|
+
background: white;
|
|
11
|
+
width: 100%;
|
|
12
|
+
padding: 40px;
|
|
13
|
+
box-sizing: border-box;
|
|
14
|
+
overflow: hidden;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
@keyframes shimmer {
|
|
18
|
+
0% { background-position: -100% 0; }
|
|
19
|
+
100% { background-position: 100% 0; }
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
.skeleton {
|
|
23
|
+
background: ${s};
|
|
24
|
+
background: linear-gradient(
|
|
25
|
+
90deg,
|
|
26
|
+
${s} 25%,
|
|
27
|
+
${i} 50%,
|
|
28
|
+
${s} 75%
|
|
29
|
+
);
|
|
30
|
+
background-size: 200% 100%;
|
|
31
|
+
animation: shimmer 1.5s infinite linear;
|
|
32
|
+
border-radius: 6px;
|
|
33
|
+
margin-bottom: 12px;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
/* Typography Skeletons */
|
|
37
|
+
.sk-title-lg { height: 36px; width: 80%; margin-bottom: 16px; }
|
|
38
|
+
.sk-title-md { height: 28px; width: 30%; margin-bottom: 20px; margin-top: 40px; }
|
|
39
|
+
.sk-text { height: 16px; width: 90%; margin-bottom: 8px; }
|
|
40
|
+
.sk-text-short { width: 40%; }
|
|
41
|
+
.sk-label { height: 14px; width: 25%; margin-bottom: 10px; }
|
|
42
|
+
|
|
43
|
+
/* Layouts */
|
|
44
|
+
.hero-section {
|
|
45
|
+
display: flex;
|
|
46
|
+
gap: 40px;
|
|
47
|
+
margin-bottom: 40px;
|
|
48
|
+
padding-bottom: 40px;
|
|
49
|
+
flex-direction: row;
|
|
50
|
+
height: 100%;
|
|
51
|
+
/* Removed border-bottom */
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
.hero-content {
|
|
55
|
+
flex: 1;
|
|
56
|
+
display: flex;
|
|
57
|
+
flex-direction: column;
|
|
58
|
+
justify-content: center;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
.hero-image {
|
|
62
|
+
flex: 1;
|
|
63
|
+
height: 300px;
|
|
64
|
+
border-radius: 12px;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
/* -- Specific Instant Access Overrides -- */
|
|
68
|
+
.instant-access-layout {
|
|
69
|
+
margin-bottom: 0;
|
|
70
|
+
padding-bottom: 0;
|
|
71
|
+
align-items: center;
|
|
72
|
+
}
|
|
73
|
+
.ia-image {
|
|
74
|
+
height: 400px;
|
|
75
|
+
}
|
|
76
|
+
.ia-center {
|
|
77
|
+
margin-left: auto;
|
|
78
|
+
margin-right: auto;
|
|
79
|
+
}
|
|
80
|
+
.ia-content {
|
|
81
|
+
align-items: center;
|
|
82
|
+
text-align: center;
|
|
83
|
+
}
|
|
84
|
+
.sk-btn-action {
|
|
85
|
+
height: 45px;
|
|
86
|
+
width: 140px;
|
|
87
|
+
border-radius: 6px;
|
|
88
|
+
margin: 24px auto;
|
|
89
|
+
}
|
|
90
|
+
.input-group {
|
|
91
|
+
display: flex;
|
|
92
|
+
gap: 10px;
|
|
93
|
+
width: 100%;
|
|
94
|
+
max-width: 400px;
|
|
95
|
+
}
|
|
96
|
+
.sk-btn-copy {
|
|
97
|
+
height: 50px;
|
|
98
|
+
width: 120px;
|
|
99
|
+
border-radius: 8px;
|
|
100
|
+
}
|
|
101
|
+
/* ------------------------------------- */
|
|
102
|
+
|
|
103
|
+
.share-section { margin-bottom: 40px; }
|
|
104
|
+
.sk-input { height: 50px; width: 100%; border-radius: 8px; margin-bottom: 16px; }
|
|
105
|
+
|
|
106
|
+
.social-buttons { display: flex; gap: 12px; }
|
|
107
|
+
.sk-btn-social { flex: 1; height: 50px; border-radius: 8px; }
|
|
108
|
+
|
|
109
|
+
.stats-section {
|
|
110
|
+
display: flex;
|
|
111
|
+
gap: 24px;
|
|
112
|
+
margin-bottom: 40px;
|
|
113
|
+
padding: 30px 0;
|
|
114
|
+
/* Removed border-top and border-bottom */
|
|
115
|
+
}
|
|
116
|
+
.stat-card { flex: 1; display: flex; flex-direction: column; align-items: center; }
|
|
117
|
+
.stat-divider { padding-left: 24px; }
|
|
118
|
+
.sk-stat-num { height: 48px; width: 120px; margin-bottom: 8px; }
|
|
119
|
+
.sk-stat-label { height: 18px; width: 80px; }
|
|
120
|
+
|
|
121
|
+
/* Table Styles */
|
|
122
|
+
.table-header { display: flex; gap: 16px; margin-bottom: 16px; }
|
|
123
|
+
.sk-th { height: 16px; }
|
|
124
|
+
.table-row {
|
|
125
|
+
display: flex;
|
|
126
|
+
align-items: center;
|
|
127
|
+
gap: 16px;
|
|
128
|
+
padding: 16px 0;
|
|
129
|
+
/* Removed border-bottom */
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
.col-user { flex: 2; }
|
|
133
|
+
.col-status { flex: 1; }
|
|
134
|
+
.col-reward { flex: 2; }
|
|
135
|
+
.col-date { flex: 1; }
|
|
136
|
+
|
|
137
|
+
.sk-badge { height: 28px; width: 90px; border-radius: 14px; }
|
|
138
|
+
.sk-reward-block { height: 36px; width: 100%; border-radius: 6px; }
|
|
139
|
+
|
|
140
|
+
.pagination { display: flex; justify-content: flex-end; gap: 8px; margin-top: 24px; }
|
|
141
|
+
.sk-btn-page { height: 36px; width: 64px; border-radius: 6px; margin-bottom: 0; }
|
|
142
|
+
|
|
143
|
+
@media (max-width: 768px) {
|
|
144
|
+
body { padding: 20px; }
|
|
145
|
+
.widget-container { padding: 24px; }
|
|
146
|
+
|
|
147
|
+
.hero-section { flex-direction: column-reverse; gap: 24px; }
|
|
148
|
+
.instant-access-layout { flex-direction: column; }
|
|
149
|
+
|
|
150
|
+
.hero-image { height: 220px; width: 100%; }
|
|
151
|
+
.sk-title-lg { width: 100%; }
|
|
152
|
+
|
|
153
|
+
.col-date { display: none; }
|
|
154
|
+
}
|
|
155
|
+
</style>
|
|
156
|
+
|
|
157
|
+
<div class="widget-container">
|
|
158
|
+
${t==="verified-access"?`
|
|
159
|
+
<div class="hero-section">
|
|
160
|
+
<div class="hero-content">
|
|
161
|
+
<div class="skeleton sk-title-lg"></div>
|
|
162
|
+
<div class="skeleton sk-text"></div>
|
|
163
|
+
<div class="skeleton sk-text sk-text-short"></div>
|
|
164
|
+
</div>
|
|
165
|
+
<div class="skeleton hero-image"></div>
|
|
166
|
+
</div>
|
|
167
|
+
|
|
168
|
+
<div class="share-section">
|
|
169
|
+
<div class="skeleton sk-label"></div>
|
|
170
|
+
<div class="skeleton sk-input"></div>
|
|
171
|
+
<div class="social-buttons">
|
|
172
|
+
<div class="skeleton sk-btn-social"></div>
|
|
173
|
+
<div class="skeleton sk-btn-social"></div>
|
|
174
|
+
<div class="skeleton sk-btn-social"></div>
|
|
175
|
+
<div class="skeleton sk-btn-social"></div>
|
|
176
|
+
</div>
|
|
177
|
+
</div>
|
|
178
|
+
|
|
179
|
+
<div class="skeleton sk-title-md" style="margin-top: 0; width: 30%; margin-left: auto; margin-right: auto"></div>
|
|
180
|
+
<div class="skeleton sk-text" style="width: 60%; margin-left: auto; margin-right: auto"></div>
|
|
181
|
+
|
|
182
|
+
<div class="stats-section">
|
|
183
|
+
<div class="stat-card">
|
|
184
|
+
<div class="skeleton sk-stat-num"></div>
|
|
185
|
+
<div class="skeleton sk-stat-label"></div>
|
|
186
|
+
</div>
|
|
187
|
+
<div class="stat-card stat-divider">
|
|
188
|
+
<div class="skeleton sk-stat-num"></div>
|
|
189
|
+
<div class="skeleton sk-stat-label"></div>
|
|
190
|
+
</div>
|
|
191
|
+
</div>
|
|
192
|
+
|
|
193
|
+
<div class="skeleton sk-title-md"></div>
|
|
194
|
+
|
|
195
|
+
<div class="table-header">
|
|
196
|
+
<div class="skeleton sk-th col-user"></div>
|
|
197
|
+
<div class="skeleton sk-th col-status"></div>
|
|
198
|
+
<div class="skeleton sk-th col-reward"></div>
|
|
199
|
+
<div class="skeleton sk-th col-date"></div>
|
|
200
|
+
</div>
|
|
201
|
+
|
|
202
|
+
<div class="table-row">
|
|
203
|
+
<div class="col-user"><div class="skeleton sk-text" style="width: 70%; margin: 0"></div></div>
|
|
204
|
+
<div class="col-status"><div class="skeleton sk-badge" style="margin: 0"></div></div>
|
|
205
|
+
<div class="col-reward"><div class="skeleton sk-reward-block" style="margin: 0"></div></div>
|
|
206
|
+
<div class="col-date"><div class="skeleton sk-text" style="width: 80%; margin: 0"></div></div>
|
|
207
|
+
</div>
|
|
208
|
+
|
|
209
|
+
<div class="table-row">
|
|
210
|
+
<div class="col-user"><div class="skeleton sk-text" style="width: 60%; margin: 0"></div></div>
|
|
211
|
+
<div class="col-status"><div class="skeleton sk-badge" style="margin: 0"></div></div>
|
|
212
|
+
<div class="col-reward"><div class="skeleton sk-reward-block" style="margin: 0"></div></div>
|
|
213
|
+
<div class="col-date"><div class="skeleton sk-text" style="width: 80%; margin: 0"></div></div>
|
|
214
|
+
</div>
|
|
215
|
+
|
|
216
|
+
<div class="table-row">
|
|
217
|
+
<div class="col-user"><div class="skeleton sk-text" style="width: 75%; margin: 0"></div></div>
|
|
218
|
+
<div class="col-status"><div class="skeleton sk-badge" style="margin: 0"></div></div>
|
|
219
|
+
<div class="col-reward"><div class="skeleton sk-reward-block" style="margin: 0"></div></div>
|
|
220
|
+
<div class="col-date"><div class="skeleton sk-text" style="width: 80%; margin: 0"></div></div>
|
|
221
|
+
</div>
|
|
222
|
+
|
|
223
|
+
<div class="pagination">
|
|
224
|
+
<div class="skeleton sk-btn-page"></div>
|
|
225
|
+
<div class="skeleton sk-btn-page"></div>
|
|
226
|
+
</div>
|
|
227
|
+
`:`
|
|
228
|
+
<div class="hero-section instant-access-layout">
|
|
229
|
+
<div class="skeleton hero-image ia-image"></div>
|
|
230
|
+
|
|
231
|
+
<div class="hero-content ia-content">
|
|
232
|
+
<div class="skeleton sk-title-lg ia-center"></div>
|
|
233
|
+
<div class="skeleton sk-text ia-center"></div>
|
|
234
|
+
|
|
235
|
+
<div class="skeleton sk-btn-action"></div>
|
|
236
|
+
|
|
237
|
+
<div class="skeleton sk-label"></div>
|
|
238
|
+
<div class="input-group">
|
|
239
|
+
<div class="skeleton sk-input"></div>
|
|
240
|
+
<div class="skeleton sk-btn-copy"></div>
|
|
241
|
+
</div>
|
|
242
|
+
|
|
243
|
+
<div class="skeleton sk-text-short ia-center" style="margin-top: 20px; width: 30%"></div>
|
|
244
|
+
<div class="skeleton sk-text-short ia-center" style="width: 20%"></div>
|
|
245
|
+
</div>
|
|
246
|
+
</div>
|
|
247
|
+
`}
|
|
248
|
+
</div>
|
|
249
|
+
`;exports.getSkeleton=e;
|
|
250
|
+
//# sourceMappingURL=SkeletonTemplate-hwDwv3Ys.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SkeletonTemplate-hwDwv3Ys.cjs","sources":["../src/widgets/SkeletonTemplate.ts"],"sourcesContent":["export type WidgetType = \"instant-access\" | \"verified-access\";\n\ninterface SkeletonProps {\n type?: WidgetType;\n height?: string | number;\n skeletonBackgroundColor?: string;\n skeletonShimmerColor?: string;\n}\n\n/**\n * Returns the complete HTML string (including <style>) for the skeleton.\n * Values are injected directly into the CSS string.\n */\nexport const getSkeleton = ({\n type = \"verified-access\",\n height = \"500px\",\n skeletonBackgroundColor = \"#e0e0e0\",\n skeletonShimmerColor = \"#f5f5f5\",\n}: SkeletonProps) => {\n const referrerHTML = `\n <div class=\"hero-section\">\n <div class=\"hero-content\">\n <div class=\"skeleton sk-title-lg\"></div>\n <div class=\"skeleton sk-text\"></div>\n <div class=\"skeleton sk-text sk-text-short\"></div>\n </div>\n <div class=\"skeleton hero-image\"></div>\n </div>\n\n <div class=\"share-section\">\n <div class=\"skeleton sk-label\"></div>\n <div class=\"skeleton sk-input\"></div>\n <div class=\"social-buttons\">\n <div class=\"skeleton sk-btn-social\"></div>\n <div class=\"skeleton sk-btn-social\"></div>\n <div class=\"skeleton sk-btn-social\"></div>\n <div class=\"skeleton sk-btn-social\"></div>\n </div>\n </div>\n\n <div class=\"skeleton sk-title-md\" style=\"margin-top: 0; width: 30%; margin-left: auto; margin-right: auto\"></div>\n <div class=\"skeleton sk-text\" style=\"width: 60%; margin-left: auto; margin-right: auto\"></div>\n\n <div class=\"stats-section\">\n <div class=\"stat-card\">\n <div class=\"skeleton sk-stat-num\"></div>\n <div class=\"skeleton sk-stat-label\"></div>\n </div>\n <div class=\"stat-card stat-divider\">\n <div class=\"skeleton sk-stat-num\"></div>\n <div class=\"skeleton sk-stat-label\"></div>\n </div>\n </div>\n\n <div class=\"skeleton sk-title-md\"></div>\n\n <div class=\"table-header\">\n <div class=\"skeleton sk-th col-user\"></div>\n <div class=\"skeleton sk-th col-status\"></div>\n <div class=\"skeleton sk-th col-reward\"></div>\n <div class=\"skeleton sk-th col-date\"></div>\n </div>\n\n <div class=\"table-row\">\n <div class=\"col-user\"><div class=\"skeleton sk-text\" style=\"width: 70%; margin: 0\"></div></div>\n <div class=\"col-status\"><div class=\"skeleton sk-badge\" style=\"margin: 0\"></div></div>\n <div class=\"col-reward\"><div class=\"skeleton sk-reward-block\" style=\"margin: 0\"></div></div>\n <div class=\"col-date\"><div class=\"skeleton sk-text\" style=\"width: 80%; margin: 0\"></div></div>\n </div>\n \n <div class=\"table-row\">\n <div class=\"col-user\"><div class=\"skeleton sk-text\" style=\"width: 60%; margin: 0\"></div></div>\n <div class=\"col-status\"><div class=\"skeleton sk-badge\" style=\"margin: 0\"></div></div>\n <div class=\"col-reward\"><div class=\"skeleton sk-reward-block\" style=\"margin: 0\"></div></div>\n <div class=\"col-date\"><div class=\"skeleton sk-text\" style=\"width: 80%; margin: 0\"></div></div>\n </div>\n\n <div class=\"table-row\">\n <div class=\"col-user\"><div class=\"skeleton sk-text\" style=\"width: 75%; margin: 0\"></div></div>\n <div class=\"col-status\"><div class=\"skeleton sk-badge\" style=\"margin: 0\"></div></div>\n <div class=\"col-reward\"><div class=\"skeleton sk-reward-block\" style=\"margin: 0\"></div></div>\n <div class=\"col-date\"><div class=\"skeleton sk-text\" style=\"width: 80%; margin: 0\"></div></div>\n </div>\n\n <div class=\"pagination\">\n <div class=\"skeleton sk-btn-page\"></div>\n <div class=\"skeleton sk-btn-page\"></div>\n </div>\n `;\n\n const instantAccessHTML = `\n <div class=\"hero-section instant-access-layout\">\n <div class=\"skeleton hero-image ia-image\"></div>\n \n <div class=\"hero-content ia-content\">\n <div class=\"skeleton sk-title-lg ia-center\"></div>\n <div class=\"skeleton sk-text ia-center\"></div>\n \n <div class=\"skeleton sk-btn-action\"></div>\n\n <div class=\"skeleton sk-label\"></div>\n <div class=\"input-group\">\n <div class=\"skeleton sk-input\"></div>\n <div class=\"skeleton sk-btn-copy\"></div>\n </div>\n\n <div class=\"skeleton sk-text-short ia-center\" style=\"margin-top: 20px; width: 30%\"></div>\n <div class=\"skeleton sk-text-short ia-center\" style=\"width: 20%\"></div>\n </div>\n </div>\n `;\n\n return `\n <style>\n * {\n box-sizing: border-box;\n padding: 0;\n margin: 0;\n }\n\n .widget-container {\n background: white;\n width: 100%;\n padding: 40px;\n box-sizing: border-box;\n overflow: hidden; \n }\n\n @keyframes shimmer {\n 0% { background-position: -100% 0; }\n 100% { background-position: 100% 0; }\n }\n\n .skeleton {\n background: ${skeletonBackgroundColor};\n background: linear-gradient(\n 90deg,\n ${skeletonBackgroundColor} 25%,\n ${skeletonShimmerColor} 50%,\n ${skeletonBackgroundColor} 75%\n );\n background-size: 200% 100%;\n animation: shimmer 1.5s infinite linear;\n border-radius: 6px;\n margin-bottom: 12px;\n }\n\n /* Typography Skeletons */\n .sk-title-lg { height: 36px; width: 80%; margin-bottom: 16px; }\n .sk-title-md { height: 28px; width: 30%; margin-bottom: 20px; margin-top: 40px; }\n .sk-text { height: 16px; width: 90%; margin-bottom: 8px; }\n .sk-text-short { width: 40%; }\n .sk-label { height: 14px; width: 25%; margin-bottom: 10px; }\n\n /* Layouts */\n .hero-section {\n display: flex;\n gap: 40px;\n margin-bottom: 40px;\n padding-bottom: 40px;\n flex-direction: row;\n height: 100%;\n /* Removed border-bottom */\n }\n \n .hero-content {\n flex: 1;\n display: flex;\n flex-direction: column;\n justify-content: center;\n }\n \n .hero-image {\n flex: 1;\n height: 300px;\n border-radius: 12px;\n }\n\n /* -- Specific Instant Access Overrides -- */\n .instant-access-layout {\n margin-bottom: 0;\n padding-bottom: 0;\n align-items: center; \n }\n .ia-image {\n height: 400px; \n }\n .ia-center {\n margin-left: auto;\n margin-right: auto;\n }\n .ia-content {\n align-items: center; \n text-align: center;\n }\n .sk-btn-action {\n height: 45px;\n width: 140px;\n border-radius: 6px;\n margin: 24px auto;\n }\n .input-group {\n display: flex;\n gap: 10px;\n width: 100%;\n max-width: 400px;\n }\n .sk-btn-copy {\n height: 50px;\n width: 120px;\n border-radius: 8px;\n }\n /* ------------------------------------- */\n\n .share-section { margin-bottom: 40px; }\n .sk-input { height: 50px; width: 100%; border-radius: 8px; margin-bottom: 16px; }\n \n .social-buttons { display: flex; gap: 12px; }\n .sk-btn-social { flex: 1; height: 50px; border-radius: 8px; }\n\n .stats-section {\n display: flex;\n gap: 24px;\n margin-bottom: 40px;\n padding: 30px 0;\n /* Removed border-top and border-bottom */\n }\n .stat-card { flex: 1; display: flex; flex-direction: column; align-items: center; }\n .stat-divider { padding-left: 24px; }\n .sk-stat-num { height: 48px; width: 120px; margin-bottom: 8px; }\n .sk-stat-label { height: 18px; width: 80px; }\n\n /* Table Styles */\n .table-header { display: flex; gap: 16px; margin-bottom: 16px; }\n .sk-th { height: 16px; }\n .table-row { \n display: flex; \n align-items: center; \n gap: 16px; \n padding: 16px 0; \n /* Removed border-bottom */\n }\n \n .col-user { flex: 2; }\n .col-status { flex: 1; }\n .col-reward { flex: 2; }\n .col-date { flex: 1; }\n\n .sk-badge { height: 28px; width: 90px; border-radius: 14px; }\n .sk-reward-block { height: 36px; width: 100%; border-radius: 6px; }\n\n .pagination { display: flex; justify-content: flex-end; gap: 8px; margin-top: 24px; }\n .sk-btn-page { height: 36px; width: 64px; border-radius: 6px; margin-bottom: 0; }\n\n @media (max-width: 768px) {\n body { padding: 20px; }\n .widget-container { padding: 24px; }\n\n .hero-section { flex-direction: column-reverse; gap: 24px; }\n .instant-access-layout { flex-direction: column; }\n \n .hero-image { height: 220px; width: 100%; }\n .sk-title-lg { width: 100%; }\n\n .col-date { display: none; }\n }\n </style>\n\n <div class=\"widget-container\">\n ${type === \"verified-access\" ? referrerHTML : instantAccessHTML}\n </div>\n `;\n};\n"],"names":["getSkeleton","type","height","skeletonBackgroundColor","skeletonShimmerColor"],"mappings":"gFAaO,MAAMA,EAAc,CAAC,CAC1B,KAAAC,EAAO,kBACP,OAAAC,EAAS,QACT,wBAAAC,EAA0B,UAC1B,qBAAAC,EAAuB,SACzB,IA8FS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAsBaD,CAAuB;AAAA;AAAA;AAAA,YAGjCA,CAAuB;AAAA,YACvBC,CAAoB;AAAA,YACpBD,CAAuB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAkI3BF,IAAS,kBA1PM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAuEK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAmLyC;AAAA;AAAA"}
|