@salla.sa/twilight-components 1.0.57 → 1.0.58
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/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/salla-button.cjs.entry.js +7 -7
- package/dist/cjs/salla-conditional-fields.cjs.entry.js +76 -0
- package/dist/cjs/salla-quantity-input.cjs.entry.js +64 -0
- package/dist/cjs/twilight-components.cjs.js +1 -1
- package/dist/collection/collection-manifest.json +2 -0
- package/dist/collection/components/salla-button/salla-button.js +10 -10
- package/dist/collection/components/salla-conditional-fields/salla-conditional-fields.css +3 -0
- package/dist/collection/components/salla-conditional-fields/salla-conditional-fields.js +82 -0
- package/dist/collection/components/salla-quantity-input/salla-quantity-input.css +3 -0
- package/dist/collection/components/salla-quantity-input/salla-quantity-input.js +71 -0
- package/dist/esm/loader.js +1 -1
- package/dist/esm/salla-button.entry.js +7 -7
- package/dist/esm/salla-conditional-fields.entry.js +72 -0
- package/dist/esm/salla-quantity-input.entry.js +60 -0
- package/dist/esm/twilight-components.js +1 -1
- package/dist/twilight-components/p-40693cd3.entry.js +1 -0
- package/dist/twilight-components/p-5d5b04ec.entry.js +1 -0
- package/dist/twilight-components/p-6c928c14.entry.js +1 -0
- package/dist/twilight-components/twilight-components.esm.js +1 -1
- package/dist/types/components/salla-button/salla-button.d.ts +2 -2
- package/dist/types/components/salla-conditional-fields/salla-conditional-fields.d.ts +9 -0
- package/dist/types/components/salla-quantity-input/salla-quantity-input.d.ts +18 -0
- package/dist/types/components.d.ts +34 -8
- package/example/dist/tailwind.css +944 -326
- package/example/dist/twilight.js +1 -1
- package/example/index.html +523 -123
- package/package.json +1 -1
- package/dist/twilight-components/p-646fbb7f.entry.js +0 -1
package/example/index.html
CHANGED
|
@@ -1,25 +1,28 @@
|
|
|
1
1
|
<!DOCTYPE html>
|
|
2
2
|
<html dir="ltr" lang="en">
|
|
3
|
+
|
|
3
4
|
<head>
|
|
4
|
-
<meta charset="utf-8"/>
|
|
5
|
-
<meta name="viewport" content="width=device-width, initial-scale=1"/>
|
|
5
|
+
<meta charset="utf-8" />
|
|
6
|
+
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
6
7
|
|
|
7
8
|
<title>Salla Web Component Starter</title>
|
|
9
|
+
<script src="//unpkg.com/alpinejs" defer></script>
|
|
8
10
|
<script src="dist/translations.js"></script>
|
|
9
11
|
<script src="dist/twilight.js"></script>
|
|
10
12
|
<script>
|
|
11
13
|
let url = window.location.href.split('/').slice(0, -1).join('/') + '/';
|
|
12
|
-
salla.init({debug: true, store: {api: url}});
|
|
14
|
+
salla.init({ debug: true, store: { api: url } });
|
|
13
15
|
</script>
|
|
14
16
|
<script type="module" src="dist/twilight-components/twilight-components.esm.js"></script>
|
|
15
17
|
<link href="https://assets.salla.sa/cp/assets/css/icons/sallaicons/style.css?v0.twilight" type="text/css"
|
|
16
|
-
|
|
18
|
+
rel="stylesheet">
|
|
17
19
|
<link href="dist/tailwind.css" type="text/css" rel="stylesheet">
|
|
18
20
|
<link href="dist/intlTelInput.min.css" type="text/css" rel="stylesheet">
|
|
19
21
|
<style>
|
|
20
22
|
:root {
|
|
21
23
|
--font-main: 'DINNextLTArabic-Regular';
|
|
22
24
|
--color-main: #5cd5c4;
|
|
25
|
+
--color-main-d: #41b9a9;
|
|
23
26
|
--color-main-reverse: #fff;
|
|
24
27
|
}
|
|
25
28
|
|
|
@@ -31,7 +34,8 @@
|
|
|
31
34
|
background-image: url("dist/flags.png");
|
|
32
35
|
}
|
|
33
36
|
|
|
34
|
-
@media (-webkit-min-device-pixel-ratio: 2),
|
|
37
|
+
@media (-webkit-min-device-pixel-ratio: 2),
|
|
38
|
+
(min-resolution: 192dpi) {
|
|
35
39
|
.iti__flag {
|
|
36
40
|
background-image: url("dist/flags@2x.png");
|
|
37
41
|
}
|
|
@@ -40,138 +44,534 @@
|
|
|
40
44
|
</head>
|
|
41
45
|
|
|
42
46
|
<body dir="ltr" class="page-show salla-one color-mode-dark ltr font-dubai bg-gray-50">
|
|
43
|
-
<div id="top-nav" class="py-2 lg:py-0">
|
|
44
|
-
<div class="container text-center py-4 text-gray-500 font-bold">
|
|
45
|
-
Twilight Components
|
|
46
|
-
</div>
|
|
47
|
-
</div>
|
|
48
47
|
|
|
49
|
-
|
|
50
|
-
<
|
|
51
|
-
<
|
|
52
|
-
<
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
48
|
+
<!-- Header -->
|
|
49
|
+
<header class="flex-none relative z-50 text-sm leading-6 font-medium bg-white">
|
|
50
|
+
<nav aria-label="Global" class="container mx-auto px-4 sm:px-6 lg:px-8">
|
|
51
|
+
<div class="flex items-center border-b border-gray-100 py-5">
|
|
52
|
+
<a href="#" class="flex-none text-gray-900">
|
|
53
|
+
<span class="sr-only">Twilight Components</span>
|
|
54
|
+
<img src="https://assets.salla.sa/cp/assets/images/logo-new.png" class="max-h-14" />
|
|
55
|
+
</a>
|
|
56
|
+
<p class="hidden lg:block text-sm ml-6 border-l border-gray-200 pl-6">
|
|
57
|
+
<a href="#" target="_blank"
|
|
58
|
+
class="relative flex items-center hover:text-gray-900">
|
|
59
|
+
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2 text-teal-500" viewBox="0 0 20 20"
|
|
60
|
+
fill="currentColor">
|
|
61
|
+
<path fill-rule="evenodd"
|
|
62
|
+
d="M5 2a1 1 0 011 1v1h1a1 1 0 010 2H6v1a1 1 0 01-2 0V6H3a1 1 0 010-2h1V3a1 1 0 011-1zm0 10a1 1 0 011 1v1h1a1 1 0 110 2H6v1a1 1 0 11-2 0v-1H3a1 1 0 110-2h1v-1a1 1 0 011-1zM12 2a1 1 0 01.967.744L14.146 7.2 17.5 9.134a1 1 0 010 1.732l-3.354 1.935-1.18 4.455a1 1 0 01-1.933 0L9.854 12.8 6.5 10.866a1 1 0 010-1.732l3.354-1.935 1.18-4.455A1 1 0 0112 2z"
|
|
63
|
+
clip-rule="evenodd"></path>
|
|
64
|
+
</svg>
|
|
65
|
+
Twilight Components
|
|
66
|
+
<svg aria-hidden="true" width="11" height="11" fill="currentColor" class="ml-1.5">
|
|
67
|
+
<path d="M5.593 10.139L10.232 5.5 5.593.862l-.895.89 3.107 3.102H0v1.292h7.805L4.698 9.254l.895.885z">
|
|
68
|
+
</path>
|
|
69
|
+
</svg>
|
|
70
|
+
</a>
|
|
71
|
+
</p>
|
|
72
|
+
<div class="ml-auto flex items-center">
|
|
73
|
+
<a href="#" class="hidden sm:block ml-6 mr-2 hover:text-gray-900">Documentation</a>
|
|
74
|
+
|
|
75
|
+
<div x-data="{ open: false }"
|
|
76
|
+
x-init="window.addEventListener('focus', event => { if (open && !$el.contains(event.target)) open = false }, true)"
|
|
77
|
+
@click.away="open = false" @keydown.escape="open = false;$refs.toggle.focus()"
|
|
78
|
+
class="relative sm:border-l -mr-1.5 sm:ml-2 sm:mr-0 sm:pl-6 border-gray-200">
|
|
79
|
+
<button type="button" x-ref="toggle" @click="open = !open" :aria-expanded="open"
|
|
80
|
+
class="font-medium flex items-center">
|
|
81
|
+
<span class="hidden sm:flex items-center">
|
|
82
|
+
Components
|
|
83
|
+
<svg aria-hidden="true" width="8" height="6" fill="none" class="ml-2.5 text-gray-400">
|
|
84
|
+
<path d="M7 1.5l-3 3-3-3" stroke="currentColor" stroke-width="2" stroke-linecap="round"
|
|
85
|
+
stroke-linejoin="round"></path>
|
|
86
|
+
</svg>
|
|
87
|
+
</span>
|
|
88
|
+
<span class="flex sm:hidden -my-1 w-8 h-8 rounded-lg items-center justify-center">
|
|
89
|
+
<svg aria-hidden="true" width="20" height="20" fill="none" class="text-gray-900">
|
|
90
|
+
<path d="M3.75 4.75h12.5M3.75 9.75h12.5M3.75 14.75h12.5" stroke="currentColor" stroke-width="1.5"
|
|
91
|
+
stroke-linecap="round" stroke-linejoin="round"></path>
|
|
92
|
+
</svg>
|
|
93
|
+
</span>
|
|
94
|
+
</button>
|
|
95
|
+
<div x-show="open"
|
|
96
|
+
class="absolute top-full right-0 w-60 mt-3 -mr-0.5 sm:-mr-3.5 bg-white rounded-lg shadow-md ring-1 ring-gray-900 ring-opacity-5 font-normal text-sm text-gray-900 divide-y divide-gray-100"
|
|
97
|
+
style="display: none;">
|
|
98
|
+
<p class="py-3 px-3.5 truncate">
|
|
99
|
+
<span class="block mb-0.5 text-xs text-gray-500">Hi there</span>
|
|
100
|
+
<span class="">Quick access to</span>
|
|
101
|
+
</p>
|
|
102
|
+
<div class="py-1.5 px-3.5">
|
|
103
|
+
<a href="#" class="group flex sm:hidden items-center py-1.5 hover:text-teal-600">
|
|
104
|
+
<svg aria-hidden="true" width="20" height="20" fill="none" stroke="currentColor" stroke-width="1.5"
|
|
105
|
+
stroke-linecap="round" stroke-linejoin="round"
|
|
106
|
+
class="flex-none mr-3 text-gray-400 group-hover:text-teal-600">
|
|
107
|
+
<path d="M5.75 17.25h8.5a2 2 0 002-2V7L12 2.75H5.75a2 2 0 00-2 2v10.5a2 2 0 002 2z"></path>
|
|
108
|
+
<path d="M11.75 3v4.25H16M6.75 10.75h6.5M6.75 13.75h6.5"></path>
|
|
109
|
+
</svg>
|
|
110
|
+
Documentation
|
|
111
|
+
</a>
|
|
112
|
+
<a href="#buttons-section" class="group flex items-center py-1.5 hover:text-teal-600">
|
|
113
|
+
<svg aria-hidden="true" width="20" height="20" fill="none" stroke="currentColor" stroke-width="1.5"
|
|
114
|
+
class="flex-none mr-3 text-gray-400 group-hover:text-teal-600">
|
|
115
|
+
<rect x="7.75" y="2.75" width="4.5" height="4.5" rx="2.25"></rect>
|
|
116
|
+
<rect x="7.75" y="12.75" width="4.5" height="4.5" rx="2.25"></rect>
|
|
117
|
+
<path d="M10 7.5v5"></path>
|
|
118
|
+
</svg>
|
|
119
|
+
Buttons
|
|
120
|
+
</a>
|
|
121
|
+
<a href="#branches-section" class="group flex items-center py-1.5 hover:text-teal-600">
|
|
122
|
+
<svg aria-hidden="true" width="20" height="20" fill="none" stroke="currentColor" stroke-width="1.5"
|
|
123
|
+
class="flex-none mr-3 text-gray-400 group-hover:text-teal-600">
|
|
124
|
+
<rect x="2.75" y="2.75" width="14.5" height="14.5" rx="7.25"></rect>
|
|
125
|
+
<rect x="6.75" y="6.75" width="6.5" height="6.5" rx="3.25"></rect>
|
|
126
|
+
<path d="M5 15l2.5-2.5M15 5l-2.5 2.5M15 15l-2.5-2.5M5 5l2.5 2.5"></path>
|
|
127
|
+
</svg>
|
|
128
|
+
Branches
|
|
129
|
+
</a>
|
|
130
|
+
<a href="#infinite-scroll-section" class="group flex items-center py-1.5 hover:text-teal-600">
|
|
131
|
+
<svg aria-hidden="true" width="20" height="20" fill="none" stroke="currentColor" stroke-width="1.5"
|
|
132
|
+
stroke-linecap="round" stroke-linejoin="round"
|
|
133
|
+
class="flex-none mr-3 text-gray-400 group-hover:text-teal-600">
|
|
134
|
+
<circle cx="10" cy="8" r="5.25"></circle>
|
|
135
|
+
<path d="M13 12.5l1.25 4.75-4.25-1.5-4.25 1.5L7 12.5"></path>
|
|
136
|
+
</svg>
|
|
137
|
+
Infinitie Scroll
|
|
138
|
+
</a>
|
|
139
|
+
<a href="#localization-section" class="group flex items-center py-1.5 hover:text-teal-600">
|
|
140
|
+
<svg aria-hidden="true" width="20" height="20" fill="none" stroke="currentColor" stroke-width="1.5"
|
|
141
|
+
stroke-linecap="round" stroke-linejoin="round"
|
|
142
|
+
class="flex-none mr-3 text-gray-400 group-hover:text-teal-600">
|
|
143
|
+
<circle cx="10" cy="8" r="5.25"></circle>
|
|
144
|
+
<path d="M13 12.5l1.25 4.75-4.25-1.5-4.25 1.5L7 12.5"></path>
|
|
145
|
+
</svg>
|
|
146
|
+
Localization Modal
|
|
147
|
+
</a>
|
|
148
|
+
<a href="#login-section" class="group flex items-center py-1.5 hover:text-teal-600">
|
|
149
|
+
<svg aria-hidden="true" width="20" height="20" fill="none" stroke="currentColor" stroke-width="1.5"
|
|
150
|
+
stroke-linecap="round" stroke-linejoin="round"
|
|
151
|
+
class="flex-none mr-3 text-gray-400 group-hover:text-teal-600">
|
|
152
|
+
<circle cx="10" cy="8" r="5.25"></circle>
|
|
153
|
+
<path d="M13 12.5l1.25 4.75-4.25-1.5-4.25 1.5L7 12.5"></path>
|
|
154
|
+
</svg>
|
|
155
|
+
Login Modal
|
|
156
|
+
</a>
|
|
157
|
+
<a href="#offers-section" class="group flex items-center py-1.5 hover:text-teal-600">
|
|
158
|
+
<svg aria-hidden="true" width="20" height="20" fill="none" stroke="currentColor" stroke-width="1.5"
|
|
159
|
+
stroke-linecap="round" stroke-linejoin="round"
|
|
160
|
+
class="flex-none mr-3 text-gray-400 group-hover:text-teal-600">
|
|
161
|
+
<circle cx="10" cy="8" r="5.25"></circle>
|
|
162
|
+
<path d="M13 12.5l1.25 4.75-4.25-1.5-4.25 1.5L7 12.5"></path>
|
|
163
|
+
</svg>
|
|
164
|
+
Offers Modal
|
|
165
|
+
</a>
|
|
166
|
+
<a href="#product-visibility-section" class="group flex items-center py-1.5 hover:text-teal-600">
|
|
167
|
+
<svg aria-hidden="true" width="20" height="20" fill="none" stroke="currentColor" stroke-width="1.5"
|
|
168
|
+
stroke-linecap="round" stroke-linejoin="round"
|
|
169
|
+
class="flex-none mr-3 text-gray-400 group-hover:text-teal-600">
|
|
170
|
+
<circle cx="10" cy="8" r="5.25"></circle>
|
|
171
|
+
<path d="M13 12.5l1.25 4.75-4.25-1.5-4.25 1.5L7 12.5"></path>
|
|
172
|
+
</svg>
|
|
173
|
+
Product Visibility Modal
|
|
174
|
+
</a>
|
|
175
|
+
<a href="#rating-seciton" class="group flex items-center py-1.5 hover:text-teal-600">
|
|
176
|
+
<svg aria-hidden="true" width="20" height="20" fill="none" stroke="currentColor" stroke-width="1.5"
|
|
177
|
+
stroke-linecap="round" stroke-linejoin="round"
|
|
178
|
+
class="flex-none mr-3 text-gray-400 group-hover:text-teal-600">
|
|
179
|
+
<circle cx="10" cy="8" r="5.25"></circle>
|
|
180
|
+
<path d="M13 12.5l1.25 4.75-4.25-1.5-4.25 1.5L7 12.5"></path>
|
|
181
|
+
</svg>
|
|
182
|
+
Rating Modal
|
|
183
|
+
</a>
|
|
184
|
+
<a href="#search-section" class="group flex items-center py-1.5 hover:text-teal-600">
|
|
185
|
+
<svg aria-hidden="true" width="20" height="20" fill="none" stroke="currentColor" stroke-width="1.5"
|
|
186
|
+
stroke-linecap="round" stroke-linejoin="round"
|
|
187
|
+
class="flex-none mr-3 text-gray-400 group-hover:text-teal-600">
|
|
188
|
+
<circle cx="10" cy="8" r="5.25"></circle>
|
|
189
|
+
<path d="M13 12.5l1.25 4.75-4.25-1.5-4.25 1.5L7 12.5"></path>
|
|
190
|
+
</svg>
|
|
191
|
+
Search
|
|
192
|
+
</a>
|
|
193
|
+
<a href="#tel-input-section" class="group flex items-center py-1.5 hover:text-teal-600">
|
|
194
|
+
<svg aria-hidden="true" width="20" height="20" fill="none" stroke="currentColor" stroke-width="1.5"
|
|
195
|
+
stroke-linecap="round" stroke-linejoin="round"
|
|
196
|
+
class="flex-none mr-3 text-gray-400 group-hover:text-teal-600">
|
|
197
|
+
<circle cx="10" cy="8" r="5.25"></circle>
|
|
198
|
+
<path d="M13 12.5l1.25 4.75-4.25-1.5-4.25 1.5L7 12.5"></path>
|
|
199
|
+
</svg>
|
|
200
|
+
Tel Input
|
|
201
|
+
</a>
|
|
202
|
+
<a href="#verify-section" class="group flex items-center py-1.5 hover:text-teal-600">
|
|
203
|
+
<svg aria-hidden="true" width="20" height="20" fill="none" stroke="currentColor" stroke-width="1.5"
|
|
204
|
+
stroke-linecap="round" stroke-linejoin="round"
|
|
205
|
+
class="flex-none mr-3 text-gray-400 group-hover:text-teal-600">
|
|
206
|
+
<circle cx="10" cy="8" r="5.25"></circle>
|
|
207
|
+
<path d="M13 12.5l1.25 4.75-4.25-1.5-4.25 1.5L7 12.5"></path>
|
|
208
|
+
</svg>
|
|
209
|
+
Verify Modal
|
|
210
|
+
</a>
|
|
211
|
+
</div>
|
|
212
|
+
|
|
213
|
+
</div>
|
|
214
|
+
</div>
|
|
215
|
+
</div>
|
|
216
|
+
</div>
|
|
217
|
+
</nav>
|
|
218
|
+
</header>
|
|
219
|
+
|
|
220
|
+
|
|
221
|
+
<!-- Components -->
|
|
222
|
+
<div id="components" class="container mx-auto px-4 sm:px-6 lg:px-8 pt-16 pb-24 space-y-8">
|
|
223
|
+
<div class="pb-6">
|
|
224
|
+
<h2 id="buttons-section-heading" class="text-3xl font-extrabold text-gray-900">Salla Twilight Components</h2>
|
|
225
|
+
<p class="text-sm text-gray-500 mt-2">Buttons, popup modals, infinit scroll, branches, localization, login,
|
|
226
|
+
offers, rating and much more -- everything you need to build beautiful E-commerce theme.</p>
|
|
76
227
|
</div>
|
|
77
|
-
|
|
228
|
+
|
|
229
|
+
<!-- Buttons Section -->
|
|
230
|
+
<section aria-labelledby="buttons-section-heading" id="product-marketing" class="divide-y divide-gray-200"
|
|
231
|
+
style="scroll-margin-top:6.25rem">
|
|
232
|
+
<div class="pb-6">
|
|
233
|
+
<h2 id="buttons-section-heading" class="text-2xl font-extrabold text-gray-900">Buttons</h2>
|
|
234
|
+
<p class="text-sm text-gray-500 mt-2">For more info and description <a href="../docs/components/SallaButton.html" class="text-primary">@see</a></p>
|
|
235
|
+
</div>
|
|
78
236
|
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
Modal Body
|
|
96
|
-
<p slot="footer" class="text-gray-500 mt-4">
|
|
97
|
-
<salla-button data-on-click="modal::close" data-target="modal6" wide>Close</salla-button>
|
|
98
|
-
</p>
|
|
99
|
-
</salla-modal>
|
|
100
|
-
<salla-modal id="modal7" no-padding>Small Modal</salla-modal>
|
|
101
|
-
</div>
|
|
237
|
+
<!-- Default -->
|
|
238
|
+
<div id="product-marketing-sections" class="grid grid-cols-3 xl:grid-cols-4 py-8 gap-x-8 gap-y-6">
|
|
239
|
+
<div class="col-span-3 xl:col-span-1">
|
|
240
|
+
<h3 class="text-gray-900 font-semibold">Default</h3>
|
|
241
|
+
<p class="text-sm text-gray-500 mt-2">Without any props</p>
|
|
242
|
+
</div>
|
|
243
|
+
<div class="col-span-3 flex flex-wrap items-center gap-2">
|
|
244
|
+
<salla-button>Primary</salla-button>
|
|
245
|
+
<salla-button color="success">success</salla-button>
|
|
246
|
+
<salla-button color="danger">danger</salla-button>
|
|
247
|
+
<salla-button color="warning">warning</salla-button>
|
|
248
|
+
<salla-button color="light">light</salla-button>
|
|
249
|
+
<salla-button color="gray">gray</salla-button>
|
|
250
|
+
<salla-button color="dark">dark</salla-button>
|
|
251
|
+
</div>
|
|
252
|
+
</div>
|
|
102
253
|
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
254
|
+
<!-- Outine -->
|
|
255
|
+
<div id="product-marketing-sections" class="grid grid-cols-3 xl:grid-cols-4 py-8 gap-x-8 gap-y-6">
|
|
256
|
+
<div class="col-span-3 xl:col-span-1">
|
|
257
|
+
<h3 class="text-gray-900 font-semibold">Outline</h3>
|
|
258
|
+
<p class="text-sm text-gray-500 mt-2">
|
|
259
|
+
<!-- <span class="inline text-xs py-1.5 px-2.5 text-gray-500 bg-gray-200 rounded-md">fill="outline"</span> -->
|
|
260
|
+
</p>
|
|
261
|
+
</div>
|
|
262
|
+
|
|
263
|
+
<div class="col-span-3 flex flex-wrap items-center gap-2">
|
|
264
|
+
<salla-button fill="outline">Primary</salla-button>
|
|
265
|
+
<salla-button fill="outline" color="success">success</salla-button>
|
|
266
|
+
<salla-button fill="outline" color="danger">danger</salla-button>
|
|
267
|
+
<salla-button fill="outline" color="warning">warning</salla-button>
|
|
268
|
+
<salla-button fill="outline" color="light">light</salla-button>
|
|
269
|
+
<salla-button fill="outline" color="gray">gray</salla-button>
|
|
270
|
+
<salla-button fill="outline" color="dark">dark</salla-button>
|
|
271
|
+
</div>
|
|
272
|
+
</div>
|
|
109
273
|
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
274
|
+
<!-- Loading -->
|
|
275
|
+
<div id="product-marketing-sections" class="grid grid-cols-3 xl:grid-cols-4 py-8 gap-x-8 gap-y-6">
|
|
276
|
+
<div class="col-span-3 xl:col-span-1">
|
|
277
|
+
<h3 class="text-gray-900 font-semibold">Loading</h3>
|
|
278
|
+
</div>
|
|
279
|
+
<div class="col-span-3 space-y-4">
|
|
280
|
+
<div class="flex flex-wrap items-center gap-2">
|
|
281
|
+
<salla-button loading>Primary</salla-button>
|
|
282
|
+
<salla-button color="success" loading>success</salla-button>
|
|
283
|
+
<salla-button color="danger" loading>danger</salla-button>
|
|
284
|
+
<salla-button color="warning" fill="outline" loading>warning</salla-button>
|
|
285
|
+
<salla-button color="light" fill="outline" loading>light</salla-button>
|
|
286
|
+
<salla-button color="gray" fill="outline" loading>gray</salla-button>
|
|
287
|
+
</div>
|
|
288
|
+
<div class="flex flex-wrap items-center gap-2">
|
|
289
|
+
<salla-button shape="icon" loading>Primary</salla-button>
|
|
290
|
+
<salla-button shape="icon" color="success" loading>success</salla-button>
|
|
291
|
+
<salla-button shape="icon" color="danger" loading>danger</salla-button>
|
|
292
|
+
<salla-button shape="icon" color="warning" fill="outline" loading>warning</salla-button>
|
|
293
|
+
<salla-button shape="icon" color="light" fill="outline" loading>light</salla-button>
|
|
294
|
+
<salla-button shape="icon" color="gray" fill="outline" loading>gray</salla-button>
|
|
295
|
+
</div>
|
|
296
|
+
<div class="flex flex-wrap items-center gap-2">
|
|
297
|
+
<salla-button shape="icon" size="small" loading>Primary</salla-button>
|
|
298
|
+
<salla-button shape="icon" size="small" color="success" loading>success</salla-button>
|
|
299
|
+
<salla-button shape="icon" size="small" color="danger" loading>danger</salla-button>
|
|
300
|
+
<salla-button shape="icon" size="small" color="warning" fill="outline" loading>warning</salla-button>
|
|
301
|
+
<salla-button shape="icon" size="small" color="light" fill="outline" loading>light</salla-button>
|
|
302
|
+
<salla-button shape="icon" size="small" color="gray" fill="outline" loading>gray</salla-button>
|
|
303
|
+
</div>
|
|
304
|
+
</div>
|
|
305
|
+
</div>
|
|
114
306
|
|
|
115
|
-
|
|
116
|
-
|
|
307
|
+
<!-- Size -->
|
|
308
|
+
<div id="product-marketing-sections" class="grid grid-cols-3 xl:grid-cols-4 py-8 gap-x-8 gap-y-6">
|
|
309
|
+
<div class="col-span-3 xl:col-span-1">
|
|
310
|
+
<h3 class="text-gray-900 font-semibold">Size</h3>
|
|
311
|
+
</div>
|
|
312
|
+
<div class="col-span-3 flex flex-wrap items-center gap-2">
|
|
313
|
+
<salla-button size="large">Large</salla-button>
|
|
314
|
+
<salla-button >Default</salla-button>
|
|
315
|
+
<salla-button size="small">Small</salla-button>
|
|
316
|
+
<salla-button size="large" fill="outline">Large</salla-button>
|
|
317
|
+
<salla-button fill="outline">Default</salla-button>
|
|
318
|
+
<salla-button size="small" fill="outline">Small</salla-button>
|
|
319
|
+
</div>
|
|
320
|
+
</div>
|
|
117
321
|
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
322
|
+
<!-- Wide -->
|
|
323
|
+
<div id="product-marketing-sections" class="grid grid-cols-3 xl:grid-cols-4 py-8 gap-x-8 gap-y-6">
|
|
324
|
+
<div class="col-span-3 xl:col-span-1">
|
|
325
|
+
<h3 class="text-gray-900 font-semibold">Wide Buttons</h3>
|
|
326
|
+
</div>
|
|
327
|
+
<div class="col-span-3 flex flex-wrap items-center gap-2">
|
|
328
|
+
<salla-button width="wide"><i class="sicon-shopping-bag mr-2"></i> Wide Button</salla-button>
|
|
329
|
+
</div>
|
|
330
|
+
</div>
|
|
124
331
|
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
332
|
+
<!-- Disabled -->
|
|
333
|
+
<div id="product-marketing-sections" class="grid grid-cols-3 xl:grid-cols-4 py-8 gap-x-8 gap-y-6">
|
|
334
|
+
<div class="col-span-3 xl:col-span-1">
|
|
335
|
+
<h3 class="text-gray-900 font-semibold">Disabled</h3>
|
|
336
|
+
</div>
|
|
337
|
+
<div class="col-span-3 space-y-4">
|
|
338
|
+
<div class="flex flex-wrap items-center gap-2">
|
|
339
|
+
<salla-button disabled>Disabled</salla-button>
|
|
340
|
+
<salla-button disabled color="danger">Disabled</salla-button>
|
|
341
|
+
<salla-button disabled color="warning">Disabled</salla-button>
|
|
342
|
+
<salla-button fill="outline" disabled>Disabled</salla-button>
|
|
343
|
+
<salla-button fill="outline" disabled color="danger">Disabled</salla-button>
|
|
344
|
+
<salla-button fill="outline" disabled color="warning">Disabled</salla-button>
|
|
345
|
+
</div>
|
|
346
|
+
<div class="flex flex-wrap items-center gap-2">
|
|
347
|
+
<salla-button shape="icon" disabled><i class="sicon-shopping-bag"></i></salla-button>
|
|
348
|
+
<salla-button shape="icon" disabled color="danger"><i class="sicon-shopping-bag"></i></salla-button>
|
|
349
|
+
<salla-button shape="icon" disabled color="warning"><i class="sicon-shopping-bag"></i></salla-button>
|
|
350
|
+
<salla-button shape="icon" fill="outline" disabled><i class="sicon-shopping-bag"></i></salla-button>
|
|
351
|
+
<salla-button shape="icon" fill="outline" disabled color="danger"><i class="sicon-shopping-bag"></i></salla-button>
|
|
352
|
+
<salla-button shape="icon" fill="outline" disabled color="warning"><i class="sicon-shopping-bag"></i></salla-button>
|
|
353
|
+
</div>
|
|
354
|
+
</div>
|
|
355
|
+
</div>
|
|
131
356
|
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
357
|
+
<!-- Link -->
|
|
358
|
+
<div id="product-marketing-sections" class="grid grid-cols-3 xl:grid-cols-4 py-8 gap-x-8 gap-y-6">
|
|
359
|
+
<div class="col-span-3 xl:col-span-1">
|
|
360
|
+
<h3 class="text-gray-900 font-semibold">Button as link</h3>
|
|
361
|
+
<p class="text-sm text-gray-500 mt-2">
|
|
362
|
+
<!-- <span class="inline text-xs py-1.5 px-2.5 text-gray-500 bg-gray-200 rounded-md">shape="link"</span> -->
|
|
363
|
+
</p>
|
|
364
|
+
</div>
|
|
365
|
+
<div class="col-span-3 flex flex-wrap items-center gap-2">
|
|
366
|
+
<salla-button shape="link">Primary Link</salla-button>
|
|
367
|
+
<salla-button shape="link" color="success">success Link</salla-button>
|
|
368
|
+
<salla-button shape="link" color="danger">danger Link</salla-button>
|
|
369
|
+
<salla-button shape="link" color="warning">warning Link</salla-button>
|
|
370
|
+
<salla-button shape="link" color="light">light Link</salla-button>
|
|
371
|
+
<salla-button shape="link" color="gray">gray Link</salla-button>
|
|
372
|
+
<salla-button shape="link" color="dark">dark Link</salla-button>
|
|
373
|
+
</div>
|
|
374
|
+
</div>
|
|
138
375
|
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
376
|
+
<!-- Icon -->
|
|
377
|
+
<div id="product-marketing-sections" class="grid grid-cols-3 xl:grid-cols-4 py-8 gap-x-8 gap-y-6">
|
|
378
|
+
<div class="col-span-3 xl:col-span-1">
|
|
379
|
+
<h3 class="text-gray-900 font-semibold">Icon</h3>
|
|
380
|
+
</div>
|
|
381
|
+
<div class="col-span-3 flex flex-wrap items-center gap-2">
|
|
382
|
+
<salla-button shape="icon"><i class="sicon-shopping-bag"></i></salla-button>
|
|
383
|
+
<salla-button shape="icon" color="success"><i class="sicon-check"></i></salla-button>
|
|
384
|
+
<salla-button shape="icon" color="danger"><i class="sicon-cancel"></i></salla-button>
|
|
385
|
+
<salla-button shape="icon" color="warning"><i class="sicon-shopping-bag"></i>
|
|
386
|
+
</salla-button>
|
|
387
|
+
<salla-button shape="icon" color="light"><i class="sicon-sync"></i></salla-button>
|
|
388
|
+
<salla-button shape="icon" color="gray"><i class="sicon-shipping-fast"></i>
|
|
389
|
+
</salla-button>
|
|
390
|
+
<salla-button shape="icon" color="dark"><i class="sicon-survey"></i></salla-button>
|
|
391
|
+
</div>
|
|
392
|
+
</div>
|
|
144
393
|
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
394
|
+
<!-- Icon Outline -->
|
|
395
|
+
<div id="product-marketing-sections" class="grid grid-cols-3 xl:grid-cols-4 py-8 gap-x-8 gap-y-6">
|
|
396
|
+
<div class="col-span-3 xl:col-span-1">
|
|
397
|
+
<h3 class="text-gray-900 font-semibold">Icon Outline</h3>
|
|
398
|
+
</div>
|
|
399
|
+
<div class="col-span-3 flex flex-wrap items-center gap-2">
|
|
400
|
+
<salla-button shape="icon" fill="outline"><i class="sicon-shopping-bag"></i></salla-button>
|
|
401
|
+
<salla-button shape="icon" color="success" fill="outline"><i class="sicon-check"></i></salla-button>
|
|
402
|
+
<salla-button shape="icon" color="danger" fill="outline"><i class="sicon-cancel"></i></salla-button>
|
|
403
|
+
<salla-button shape="icon" color="warning" fill="outline"><i class="sicon-shopping-bag"></i>
|
|
404
|
+
</salla-button>
|
|
405
|
+
<salla-button shape="icon" color="light" fill="outline"><i class="sicon-sync"></i></salla-button>
|
|
406
|
+
<salla-button shape="icon" color="gray" fill="outline"><i class="sicon-shipping-fast"></i>
|
|
407
|
+
</salla-button>
|
|
408
|
+
<salla-button shape="icon" color="dark" fill="outline"><i class="sicon-survey"></i></salla-button>
|
|
409
|
+
</div>
|
|
410
|
+
</div>
|
|
411
|
+
|
|
412
|
+
<!-- Icon Size -->
|
|
413
|
+
<div id="product-marketing-sections" class="grid grid-cols-3 xl:grid-cols-4 py-8 gap-x-8 gap-y-6">
|
|
414
|
+
<div class="col-span-3 xl:col-span-1">
|
|
415
|
+
<h3 class="text-gray-900 font-semibold">Icon Size</h3>
|
|
416
|
+
</div>
|
|
417
|
+
<div class="col-span-3 flex flex-wrap items-center gap-2">
|
|
418
|
+
<salla-button shape="icon" size="large"><i class="sicon-shopping-bag"></i></salla-button>
|
|
419
|
+
<salla-button shape="icon" color="success"><i class="sicon-check"></i></salla-button>
|
|
420
|
+
<salla-button shape="icon" color="danger" size="small"><i class="sicon-cancel"></i></salla-button>
|
|
421
|
+
<salla-button shape="icon" size="large" fill="outline"><i class="sicon-shopping-bag"></i></salla-button>
|
|
422
|
+
<salla-button shape="icon" color="success" fill="outline"><i class="sicon-check"></i></salla-button>
|
|
423
|
+
<salla-button shape="icon" color="danger" size="small" fill="outline"><i class="sicon-cancel"></i></salla-button>
|
|
424
|
+
</div>
|
|
425
|
+
</div>
|
|
426
|
+
</section>
|
|
427
|
+
|
|
428
|
+
<!-- Modal Section -->
|
|
429
|
+
<section aria-labelledby="buttons-section-heading" id="product-marketing" class="divide-y divide-gray-200"
|
|
430
|
+
style="scroll-margin-top:6.25rem">
|
|
431
|
+
<div class="pb-6">
|
|
432
|
+
<h2 id="buttons-section-heading" class="text-2xl font-extrabold text-gray-900">Modals</h2>
|
|
433
|
+
<p class="text-sm text-gray-500 mt-2">For more info and description <a href="../docs/components/SallaModal.html" class="text-primary">@see</a></p>
|
|
434
|
+
</div>
|
|
435
|
+
|
|
436
|
+
<!-- Default -->
|
|
437
|
+
<div id="product-marketing-sections" class="grid grid-cols-3 xl:grid-cols-4 py-8 gap-x-8 gap-y-6">
|
|
438
|
+
<div class="col-span-3 xl:col-span-1">
|
|
439
|
+
<h3 class="text-gray-900 font-semibold">Default</h3>
|
|
440
|
+
<p class="text-sm text-gray-500 mt-2">Without any props</p>
|
|
441
|
+
</div>
|
|
442
|
+
<div class="col-span-3 flex flex-wrap items-center gap-2">
|
|
443
|
+
<salla-button>Primary</salla-button>
|
|
444
|
+
<salla-button color="success">success</salla-button>
|
|
445
|
+
<salla-button color="danger">danger</salla-button>
|
|
446
|
+
<salla-button color="warning">warning</salla-button>
|
|
447
|
+
<salla-button color="light">light</salla-button>
|
|
448
|
+
<salla-button color="gray">gray</salla-button>
|
|
449
|
+
<salla-button color="dark">dark</salla-button>
|
|
450
|
+
</div>
|
|
451
|
+
</div>
|
|
153
452
|
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
453
|
+
<!-- Outine -->
|
|
454
|
+
<div id="product-marketing-sections" class="grid grid-cols-3 xl:grid-cols-4 py-8 gap-x-8 gap-y-6">
|
|
455
|
+
<div class="col-span-3 xl:col-span-1">
|
|
456
|
+
<h3 class="text-gray-900 font-semibold">Outline</h3>
|
|
457
|
+
<p class="text-sm text-gray-500 mt-2">
|
|
458
|
+
<!-- <span class="inline text-xs py-1.5 px-2.5 text-gray-500 bg-gray-200 rounded-md">fill="outline"</span> -->
|
|
459
|
+
</p>
|
|
460
|
+
</div>
|
|
461
|
+
|
|
462
|
+
<div class="col-span-3 flex flex-wrap items-center gap-2">
|
|
463
|
+
<salla-button fill="outline">Primary</salla-button>
|
|
464
|
+
<salla-button fill="outline" color="success">success</salla-button>
|
|
465
|
+
<salla-button fill="outline" color="danger">danger</salla-button>
|
|
466
|
+
<salla-button fill="outline" color="warning">warning</salla-button>
|
|
467
|
+
<salla-button fill="outline" color="light">light</salla-button>
|
|
468
|
+
<salla-button fill="outline" color="gray">gray</salla-button>
|
|
469
|
+
<salla-button fill="outline" color="dark">dark</salla-button>
|
|
470
|
+
</div>
|
|
471
|
+
</div>
|
|
472
|
+
|
|
473
|
+
</section>
|
|
159
474
|
</div>
|
|
160
475
|
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
<
|
|
164
|
-
|
|
165
|
-
<
|
|
166
|
-
|
|
167
|
-
<
|
|
476
|
+
|
|
477
|
+
<div class="container py-10 grid-cols-2 grid gap-4">
|
|
478
|
+
<div class="p-3 rounded-md bg-white shadow-sm">
|
|
479
|
+
<h1 class="text-primary border-b border-dashed mb-4">Modal</h1>
|
|
480
|
+
<p class="my-4">Description</p>
|
|
481
|
+
<salla-button data-target="modal1" data-on-click="modal::open">Modal</salla-button>
|
|
482
|
+
<salla-button btn-style="danger" data-target="modal2" data-on-click="modal::open">Error</salla-button>
|
|
483
|
+
<salla-button data-target="modal3" data-on-click="modal::open">Success</salla-button>
|
|
484
|
+
<salla-button data-target="modal4" data-on-click="modal::open">Small</salla-button>
|
|
485
|
+
<salla-button btn-style="outline-primary" data-target="modal5" data-on-click="modal::open">Full</salla-button>
|
|
486
|
+
<salla-button data-target="modal6" data-on-click="modal::open">With footer</salla-button>
|
|
487
|
+
<salla-button btn-style="outline" data-target="modal7" data-on-click="modal::open">No Padding</salla-button>
|
|
488
|
+
<salla-modal id="modal1">Your Awesome Content</salla-modal>
|
|
489
|
+
<salla-modal id="modal2" title="Error!" sub-title="Whoops! Error happened" error></salla-modal>
|
|
490
|
+
<salla-modal id="modal3" title="Congratulations" sub-title="Good, You are awesome!" success></salla-modal>
|
|
491
|
+
<salla-modal id="modal4" width="xs">Small Modal</salla-modal>
|
|
492
|
+
<salla-modal id="modal5" width="full">Full Modal</salla-modal>
|
|
493
|
+
<salla-modal id="modal6">
|
|
494
|
+
Modal Body
|
|
495
|
+
<p slot="footer" class="text-gray-500 mt-4">
|
|
496
|
+
<salla-button data-on-click="modal::close" data-target="modal6" wide>Close</salla-button>
|
|
497
|
+
</p>
|
|
498
|
+
</salla-modal>
|
|
499
|
+
<salla-modal id="modal7" no-padding>Small Modal</salla-modal>
|
|
500
|
+
</div>
|
|
501
|
+
|
|
502
|
+
<div class=" p-3 rounded-md bg-white shadow-sm">
|
|
503
|
+
<h1 class="text-primary border-b border-dashed mb-4">Login</h1>
|
|
504
|
+
<p class="my-4">Description</p>
|
|
505
|
+
<salla-button wide data-on-click="login::show">Login Component</salla-button>
|
|
506
|
+
<salla-login is-email-allowed is-mobile-allowed is-email-required></salla-login>
|
|
507
|
+
</div>
|
|
508
|
+
|
|
509
|
+
<div class=" p-3 rounded-md bg-white shadow-sm">
|
|
510
|
+
<h1 class="text-primary border-b border-dashed mb-4">Localization</h1>
|
|
511
|
+
<p class="my-4">Description</p>
|
|
512
|
+
<salla-button wide data-on-click="localization::show">Localization Component</salla-button>
|
|
513
|
+
|
|
514
|
+
<salla-localization></salla-localization>
|
|
515
|
+
</div>
|
|
516
|
+
|
|
517
|
+
<div class=" p-3 rounded-md bg-white shadow-sm">
|
|
518
|
+
<h1 class="text-primary border-b border-dashed mb-4">Search</h1>
|
|
519
|
+
<p class="my-4">Description</p>
|
|
520
|
+
<salla-button btn-style="outline-primary" wide data-on-click="search::show">Search Component</salla-button>
|
|
521
|
+
<salla-search></salla-search>
|
|
522
|
+
</div>
|
|
523
|
+
|
|
524
|
+
<div class=" p-3 rounded-md bg-white shadow-sm">
|
|
525
|
+
<h1 class="text-primary border-b border-dashed mb-4">Branches</h1>
|
|
526
|
+
<p class="my-4">Description</p>
|
|
527
|
+
<salla-button wide btn-style="danger" data-on-click="branches::show">Branches Component</salla-button>
|
|
528
|
+
<salla-branches></salla-branches>
|
|
529
|
+
</div>
|
|
530
|
+
|
|
531
|
+
<div class=" p-3 rounded-md bg-white shadow-sm">
|
|
532
|
+
<h1 class="text-primary border-b border-dashed mb-4">Offer</h1>
|
|
533
|
+
<p class="my-4">Description</p>
|
|
534
|
+
<salla-button wide btn-style="outline" onClick="showOffer()">Offer</salla-button>
|
|
535
|
+
<salla-offer></salla-offer>
|
|
536
|
+
</div>
|
|
537
|
+
|
|
538
|
+
<div class="p-3 rounded-md bg-white shadow-sm">
|
|
539
|
+
<h1 class="text-primary border-b border-dashed mb-4">Product Availability</h1>
|
|
540
|
+
<p class="my-4">Description</p>
|
|
541
|
+
<salla-product-availability channels="sms,email"></salla-product-availability>
|
|
542
|
+
</div>
|
|
543
|
+
|
|
544
|
+
<div class="p-3 rounded-md bg-white shadow-sm">
|
|
545
|
+
<h1 class="text-primary border-b border-dashed mb-4">Mobile Input</h1>
|
|
546
|
+
<p class="my-4">
|
|
547
|
+
Using: <a class="text-primary" href="https://github.com/jackocnr/intl-tel-input" target="_blank">International
|
|
548
|
+
Telephone Input</a>
|
|
549
|
+
</p>
|
|
550
|
+
<salla-tel-input></salla-tel-input>
|
|
551
|
+
</div>
|
|
552
|
+
|
|
553
|
+
<div class="p-3 rounded-md bg-white shadow-sm">
|
|
554
|
+
<h1 class="text-primary border-b border-dashed mb-4">Rating</h1>
|
|
555
|
+
<p class="my-4">Description</p>
|
|
556
|
+
<salla-button wide btn-style="outline-primary" data-on-click="rating::show">Rating</salla-button>
|
|
557
|
+
<salla-rating></salla-rating>
|
|
558
|
+
</div>
|
|
559
|
+
|
|
560
|
+
<div class="p-3 rounded-md bg-white shadow-sm col-span-2">
|
|
561
|
+
<h1 class="text-primary border-b border-dashed mb-4">Infinite Scroll</h1>
|
|
562
|
+
<p class="my-4">
|
|
563
|
+
Using: <a class="text-primary" href="https://infinite-scroll.com/" target="_blank">Infinite Scroll</a>
|
|
564
|
+
<br />
|
|
565
|
+
You can pass <code>autoload</code> attribute for autoload result when scrolling.<br />
|
|
566
|
+
<code><salla-infinite-scroll next-page="***"
|
|
168
567
|
autoload></salla-infinite-scroll></code>
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
568
|
+
</p>
|
|
569
|
+
<salla-infinite-scroll class="grid grid-cols-4 grid-flow-row gap-6 " next-page="infinit-scroll.html?page=2"
|
|
570
|
+
item=".i-item">
|
|
571
|
+
</salla-infinite-scroll>
|
|
572
|
+
</div>
|
|
173
573
|
</div>
|
|
174
|
-
|
|
175
|
-
<script src="dist/demo.js"></script>
|
|
574
|
+
<script src="dist/demo.js"></script>
|
|
176
575
|
</body>
|
|
177
|
-
|
|
576
|
+
|
|
577
|
+
</html>
|