kiui-kit 1.2.0-beta.1 → 1.3.0-beta.1
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/README.md +40 -4
- package/dist/allData/footer.json +28 -0
- package/dist/allData/header.json +12 -0
- package/dist/allData/main.json +1 -0
- package/dist/allData/socials.json +13 -0
- package/dist/app.js +21 -0
- package/dist/index.html +108 -149
- package/dist/kiui.min.css +1 -1
- package/dist/kiui.min.js +22 -22
- package/package.json +5 -3
- package/dist/data.json +0 -52
package/README.md
CHANGED
|
@@ -64,33 +64,59 @@ You can either clone this repo or copy the following files into your project:
|
|
|
64
64
|
<body>
|
|
65
65
|
<header>
|
|
66
66
|
<!--! To use one of the components below, uncomment only one -->
|
|
67
|
+
|
|
67
68
|
<header-type-1></header-type-1>
|
|
68
69
|
<!-- <header-type-2></header-type-2> -->
|
|
70
|
+
|
|
69
71
|
</header>
|
|
72
|
+
|
|
70
73
|
<main class="container">
|
|
71
74
|
<!-- Type Writer -->
|
|
72
|
-
<div
|
|
75
|
+
<div>
|
|
73
76
|
<h2 id="KIUI-typewriter"></h2>
|
|
74
77
|
</div>
|
|
78
|
+
|
|
79
|
+
<!-- Show More Component -->
|
|
80
|
+
<div id="show-more">
|
|
81
|
+
|
|
82
|
+
<div id="show-more__content">
|
|
83
|
+
Lorem ipsum dolor sit amet ...
|
|
84
|
+
</div>
|
|
85
|
+
|
|
86
|
+
<div id="show-more__shadow">
|
|
87
|
+
</div>
|
|
88
|
+
<button id="show-more__button">Show More</button>
|
|
89
|
+
|
|
90
|
+
</div>
|
|
91
|
+
<!-- Show More Component -->
|
|
92
|
+
|
|
75
93
|
<div id="cards-wrapper">
|
|
76
94
|
<!-- Boxes -->
|
|
77
95
|
<box-card-1 data-title="just title">
|
|
78
96
|
</box-card-1>
|
|
97
|
+
|
|
79
98
|
<box-card-1 data-img="./kiui.png" data-title="title2" data-price="23">
|
|
80
99
|
</box-card-1>
|
|
100
|
+
|
|
81
101
|
<box-card-1 data-img="./kiui.png" data-button-title="Buy" data-title="title3" data-description="description"
|
|
82
102
|
data-price="12"></box-card-1>
|
|
103
|
+
|
|
83
104
|
<box-card-1 data-img="./kiui.png" data-title="title4" data-description="description" data-button-title="button"
|
|
84
105
|
data-button-link="#itsLink"></box-card-1>
|
|
85
106
|
<!-- Boxes -->
|
|
86
107
|
</div>
|
|
108
|
+
|
|
87
109
|
</main>
|
|
110
|
+
|
|
88
111
|
<footer>
|
|
89
112
|
<!--* To use one of the components below, uncomment only one -->
|
|
113
|
+
|
|
90
114
|
<footer-type-1></footer-type-1>
|
|
91
115
|
<!-- <footer-type-2></footer-type-2> -->
|
|
92
116
|
<!-- <footer-type-3></footer-type-3> -->
|
|
117
|
+
|
|
93
118
|
</footer>
|
|
119
|
+
|
|
94
120
|
<script src="./kiui.min.js"></script>
|
|
95
121
|
<!-- Use KIUI Type Writer -->
|
|
96
122
|
<script src="./kiui.typewriter.min.js"></script>
|
|
@@ -110,7 +136,6 @@ You can either clone this repo or copy the following files into your project:
|
|
|
110
136
|
</body>
|
|
111
137
|
|
|
112
138
|
</html>
|
|
113
|
-
|
|
114
139
|
```
|
|
115
140
|
|
|
116
141
|
---
|
|
@@ -132,8 +157,7 @@ Change menu items, links, and footer content by editing `data.json`:
|
|
|
132
157
|
"https://github.com/alirezaabbasi-dev/KIUI"
|
|
133
158
|
]
|
|
134
159
|
},
|
|
135
|
-
"main":{
|
|
136
|
-
},
|
|
160
|
+
"main": {},
|
|
137
161
|
"footer": {
|
|
138
162
|
"title": "KIUI",
|
|
139
163
|
"description": "KIUI is a modern UI design system to build fast and responsive web interfaces.",
|
|
@@ -158,11 +182,23 @@ Change menu items, links, and footer content by editing `data.json`:
|
|
|
158
182
|
],
|
|
159
183
|
"links": ["#Privacy", "#Terms", "#Cookie", "#Licenses"]
|
|
160
184
|
}
|
|
185
|
+
},
|
|
186
|
+
"socials": {
|
|
187
|
+
"socials_names": [
|
|
188
|
+
"instagram.com/kiyanmusic",
|
|
189
|
+
"x.com/kiyan_abbasi",
|
|
190
|
+
"t.me/KiyanAbbasi_dev",
|
|
191
|
+
"linkedin.com/in/kiyan-abbasi",
|
|
192
|
+
"whatsapp",
|
|
193
|
+
"YouTube",
|
|
194
|
+
"facebook"
|
|
195
|
+
]
|
|
161
196
|
}
|
|
162
197
|
}
|
|
163
198
|
}
|
|
164
199
|
}
|
|
165
200
|
|
|
201
|
+
|
|
166
202
|
```
|
|
167
203
|
|
|
168
204
|
---
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
{
|
|
2
|
+
"footer": {
|
|
3
|
+
"title": "KIUI",
|
|
4
|
+
"description": "KIUI is a modern UI design system to build fast and responsive web interfaces.",
|
|
5
|
+
"footerItems": {
|
|
6
|
+
"item1": {
|
|
7
|
+
"title": "Company",
|
|
8
|
+
"items": ["About", "Contact Us", "Careers", "Blog", "Contact"],
|
|
9
|
+
"links": ["#About", "#Us", "#Careers", "#Blog", "#Contact"]
|
|
10
|
+
},
|
|
11
|
+
"item2": {
|
|
12
|
+
"title": "Support",
|
|
13
|
+
"items": ["Help Center", "Documentation", "API Reference", "Status"],
|
|
14
|
+
"links": ["#Help", "#Documentation", "#API", "#Status"]
|
|
15
|
+
},
|
|
16
|
+
"item3": {
|
|
17
|
+
"title": "Legal",
|
|
18
|
+
"items": [
|
|
19
|
+
"Privacy Policy",
|
|
20
|
+
"Terms of Service",
|
|
21
|
+
"Cookie Policy",
|
|
22
|
+
"Licenses"
|
|
23
|
+
],
|
|
24
|
+
"links": ["#Privacy", "#Terms", "#Cookie", "#Licenses"]
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
{
|
|
2
|
+
"menu": {
|
|
3
|
+
"title": ["KIUI"],
|
|
4
|
+
"items": ["Home", "Docs", "contact", "GitHub"],
|
|
5
|
+
"links": [
|
|
6
|
+
"#Home",
|
|
7
|
+
"https://github.com/alirezaabbasi-dev/KIUI?tab=readme-ov-file#-kiui-kit",
|
|
8
|
+
"#contact",
|
|
9
|
+
"https://github.com/alirezaabbasi-dev/KIUI"
|
|
10
|
+
]
|
|
11
|
+
}
|
|
12
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{ "main": {} }
|
package/dist/app.js
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
|
|
2
|
+
|
|
3
|
+
(async () => {
|
|
4
|
+
const navMenus = await fetch("./src/allData/header.json")
|
|
5
|
+
.then((res) => res.json())
|
|
6
|
+
.then((data) => data);
|
|
7
|
+
|
|
8
|
+
initHeader(navMenus);
|
|
9
|
+
|
|
10
|
+
const footerData = await fetch("./src/allData/footer.json")
|
|
11
|
+
.then((res) => res.json())
|
|
12
|
+
.then((data) => data);
|
|
13
|
+
|
|
14
|
+
const socials = await fetch("./src/allData/socials.json")
|
|
15
|
+
.then((res) => res.json())
|
|
16
|
+
.then((data) => data);
|
|
17
|
+
|
|
18
|
+
const footer = { ...footerData.footer, socials: socials.socials };
|
|
19
|
+
|
|
20
|
+
initFooter(footer);
|
|
21
|
+
})();
|
package/dist/index.html
CHANGED
|
@@ -1,158 +1,117 @@
|
|
|
1
1
|
<!DOCTYPE html>
|
|
2
2
|
<html lang="en" dir="ltr">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8" />
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
6
|
+
<title>KIUI Demo</title>
|
|
7
|
+
<link rel="shortcut icon" href="./kiui.png" type="image/png" />
|
|
8
|
+
<link rel="stylesheet" href="./kiui.min.css" />
|
|
9
|
+
<link rel="stylesheet" href="./components.conf.css" />
|
|
10
|
+
</head>
|
|
3
11
|
|
|
4
|
-
<
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
<title>KIUI Demo</title>
|
|
8
|
-
<link rel="shortcut icon" href="./kiui.png" type="image/png">
|
|
9
|
-
<link rel="stylesheet" href="./kiui.min.css">
|
|
10
|
-
<link rel="stylesheet" href="./components.conf.css">
|
|
11
|
-
</head>
|
|
12
|
-
|
|
13
|
-
<body>
|
|
14
|
-
<header>
|
|
15
|
-
<!--! To use one of the components below, uncomment only one -->
|
|
16
|
-
|
|
17
|
-
<header-type-1></header-type-1>
|
|
18
|
-
<!-- <header-type-2></header-type-2> -->
|
|
19
|
-
|
|
20
|
-
</header>
|
|
21
|
-
|
|
22
|
-
<main class="container">
|
|
23
|
-
<!-- Type Writer -->
|
|
24
|
-
<div>
|
|
25
|
-
<h2 id="KIUI-typewriter"></h2>
|
|
26
|
-
</div>
|
|
27
|
-
|
|
28
|
-
<!-- Show More Component -->
|
|
29
|
-
<div id="show-more">
|
|
30
|
-
|
|
31
|
-
<div id="show-more__content">
|
|
32
|
-
Lorem ipsum dolor sit amet consectetur adipisicing elit. In pariatur quasi minus a quaerat vitae laboriosam
|
|
33
|
-
qui iste, est voluptatum nesciunt maxime voluptate. Explicabo saepe exercitationem ratione illum autem
|
|
34
|
-
doloribus quis, alias quas possimus consectetur? Dolorem temporibus non enim saepe exercitationem obcaecati,
|
|
35
|
-
velit necessitatibus accusamus voluptatem natus. Natus nemo perferendis aspernatur et, similique earum!
|
|
36
|
-
Adipisci omnis modi consequuntur eos sint aspernatur rerum officiis alias commodi aliquid possimus laudantium,
|
|
37
|
-
blanditiis minima magni distinctio. Molestias ipsam enim recusandae excepturi dignissimos praesentium placeat
|
|
38
|
-
minus, deserunt molestiae magni id vero, hic vitae exercitationem quaerat. Doloribus, quia! Laborum iusto
|
|
39
|
-
natus aliquam, veniam nostrum numquam maxime reiciendis saepe fuga aspernatur explicabo et atque assumenda,
|
|
40
|
-
laboriosam commodi repudiandae soluta ea nam dolorum quo. Ducimus voluptas quae deserunt, eveniet possimus
|
|
41
|
-
excepturi minima cumque tempora? Possimus nihil optio placeat quod eius quam dolorum, porro minima, dicta
|
|
42
|
-
ducimus, tenetur aut asperiores tempora nemo quasi. Illum soluta nulla voluptatibus corrupti ut eius, ratione
|
|
43
|
-
officia consectetur distinctio quod, explicabo at, voluptas totam dolorem vitae quidem iusto aspernatur eum
|
|
44
|
-
quia odit corporis doloremque? Iure, velit facilis repellat minima assumenda eum delectus neque, repudiandae
|
|
45
|
-
dolor molestias nam officia? Provident accusamus quasi optio id libero fugit quisquam, ut, corporis odio
|
|
46
|
-
obcaecati blanditiis placeat laborum facilis dolores. Commodi sunt accusamus magnam voluptates voluptatum in
|
|
47
|
-
amet sed, maxime alias ullam iure doloribus ex ipsum mollitia! Impedit nesciunt culpa quae! Magnam, corrupti!
|
|
48
|
-
Nesciunt cumque facilis nobis deleniti quasi quidem excepturi iusto eligendi aspernatur reprehenderit nam,
|
|
49
|
-
odio odit, quos hic facere vitae possimus. Voluptatibus, reiciendis itaque repellendus delectus magnam quia
|
|
50
|
-
obcaecati explicabo ipsam ipsa iure aliquam? Maiores dignissimos quaerat fuga ut sed, doloremque inventore
|
|
51
|
-
eveniet provident similique sunt ea numquam impedit odit architecto earum iure, repellendus ducimus. Corporis
|
|
52
|
-
minima, eaque repellat nemo deleniti nulla necessitatibus ab. Neque, aut et, quidem, voluptas quos rem
|
|
53
|
-
incidunt tempore provident numquam reprehenderit ducimus illo ratione nisi facilis. Ratione sunt consequatur
|
|
54
|
-
iusto totam labore. Repudiandae velit vel sit adipisci perspiciatis rem quae dignissimos, mollitia debitis
|
|
55
|
-
vitae, est molestias enim ipsam aliquam, quaerat sint facilis fuga ad voluptates amet. Sed eaque illum hic
|
|
56
|
-
exercitationem recusandae perspiciatis repudiandae autem fugiat veritatis nobis dolorum totam quam suscipit
|
|
57
|
-
amet natus rem modi illo quos dolor dolorem est fuga, mollitia similique? Modi quo beatae sunt iure nihil
|
|
58
|
-
dolorem. Laboriosam, provident pariatur aperiam obcaecati recusandae quas, magni accusantium nostrum illum
|
|
59
|
-
nulla saepe ab voluptate! Hic ut modi molestiae cum, unde rem eveniet architecto sit sint laudantium aliquid
|
|
60
|
-
cumque voluptatum similique facilis repellendus adipisci consequatur commodi consequuntur delectus maiores
|
|
61
|
-
animi. Sequi quam id pariatur aliquid assumenda beatae atque quis reiciendis enim unde molestias nisi
|
|
62
|
-
perferendis, deleniti odit? Vitae laudantium explicabo dignissimos, neque voluptates quisquam animi architecto
|
|
63
|
-
magni enim illo earum expedita repellat sunt ipsam reprehenderit cupiditate rem nemo ipsum delectus,
|
|
64
|
-
consectetur totam culpa atque eos! Vitae, eligendi provident excepturi optio consequatur incidunt esse quam
|
|
65
|
-
laudantium molestias debitis voluptate deleniti sint minima alias qui ea totam neque mollitia facere ab
|
|
66
|
-
maiores. Dignissimos quas laudantium aspernatur maxime molestias. Fuga optio nemo alias porro dignissimos quis
|
|
67
|
-
autem vel similique tempore, temporibus molestias vero, quod mollitia hic repellat a voluptate exercitationem
|
|
68
|
-
placeat. Sit aut, natus sint sunt ab fuga magni earum totam dignissimos doloribus aspernatur voluptas culpa
|
|
69
|
-
officiis sequi dolorem quas autem quidem ratione in et. Aspernatur delectus molestias rem maiores tenetur
|
|
70
|
-
reiciendis tempora corrupti nam veritatis, ullam sapiente eaque beatae neque repudiandae, esse porro deleniti
|
|
71
|
-
perspiciatis, quisquam saepe cum expedita odio a ut! Beatae porro eveniet accusantium quia eaque. Aspernatur
|
|
72
|
-
recusandae suscipit totam sapiente blanditiis necessitatibus perferendis tempore, beatae impedit provident
|
|
73
|
-
explicabo labore accusantium minus neque id modi quaerat, placeat iste sequi ut! Incidunt suscipit cupiditate
|
|
74
|
-
consequatur, autem hic eaque neque mollitia excepturi cumque, animi modi repellat? Harum id dolor, numquam
|
|
75
|
-
libero facere, aperiam cumque eligendi illo exercitationem quasi magnam illum officiis quidem culpa,
|
|
76
|
-
voluptatibus possimus. Consectetur voluptatibus deserunt non magnam rerum iusto error enim fuga necessitatibus
|
|
77
|
-
asperiores ex sed illo maxime quas incidunt veniam corporis rem ut nulla, voluptatum maiores quos dignissimos!
|
|
78
|
-
Tempore illo minima officiis iusto eius sunt obcaecati, hic quas deleniti maiores totam ab unde facilis
|
|
79
|
-
voluptate dolore omnis alias laboriosam placeat vitae, quasi neque ipsa voluptatum dicta? Mollitia, natus,
|
|
80
|
-
iste vero nihil dignissimos ex recusandae vel doloribus in cumque voluptatem, commodi repudiandae suscipit?
|
|
81
|
-
Repellat consequuntur odio tenetur harum quae ipsam quibusdam impedit iusto! Praesentium voluptates illum
|
|
82
|
-
molestiae, assumenda ipsa vitae dolores excepturi sapiente ea quo rerum, et, facilis blanditiis sint omnis
|
|
83
|
-
dolorem quis suscipit ex rem eaque eveniet? Inventore, voluptatum error. Deleniti adipisci ducimus similique a
|
|
84
|
-
molestias. Assumenda soluta, eaque, doloremque fugit excepturi debitis quaerat error nemo nam natus mollitia
|
|
85
|
-
repellendus neque sit harum placeat! Ullam, unde quod porro consequuntur ut sequi dignissimos voluptas
|
|
86
|
-
eligendi alias facilis sed rem laboriosam rerum voluptatum eveniet, ipsa eos labore sapiente inventore? Nihil
|
|
87
|
-
iusto corrupti temporibus, ullam, iure deserunt tempore quam illo, corporis asperiores est dolorum qui.
|
|
88
|
-
Doloribus sint dolore provident, animi officia hic, deserunt placeat aliquid, architecto doloremque quidem?
|
|
89
|
-
Beatae rerum ullam quod quam optio illum atque magni perspiciatis quis! Asperiores accusantium facilis id
|
|
90
|
-
alias, quis numquam quos dolorum doloribus voluptas cupiditate? Natus corporis dolore eos inventore quod,
|
|
91
|
-
dolor minima itaque accusamus? Blanditiis sapiente at corrupti repellendus dolorem temporibus quas officia
|
|
92
|
-
quod eligendi, suscipit laborum distinctio aliquam beatae dolores rem reprehenderit, iusto molestiae deleniti.
|
|
93
|
-
Quia culpa, fugit inventore perferendis numquam quisquam! Quo voluptates sequi ab nesciunt, illo libero
|
|
94
|
-
tempora, quidem nobis eius praesentium quis nostrum recusandae, esse cumque. Voluptatibus, voluptas repellat
|
|
95
|
-
ab quis delectus distinctio doloribus est velit ut. Accusamus necessitatibus minus omnis, perferendis culpa
|
|
96
|
-
libero deleniti voluptas magnam nesciunt velit nobis nam eius, ipsum ducimus voluptates minima ad nulla qui,
|
|
97
|
-
quo suscipit saepe doloribus enim temporibus. Dolore blanditiis ut tempora provident ad quos harum ex quo!
|
|
98
|
-
Vitae repellendus, porro impedit delectus distinctio molestias, accusamus pariatur quibusdam quod ad id
|
|
99
|
-
libero! Explicabo autem optio nam soluta quasi. Nisi qui natus modi, corrupti quidem eligendi porro dolore
|
|
100
|
-
saepe asperiores cum. Iure repellendus quo impedit odit excepturi rerum, voluptas quam! Fugiat dolore corrupti
|
|
101
|
-
eum saepe excepturi, quibusdam eius omnis quis quo sunt quos commodi, dolorem ipsum quaerat inventore eaque
|
|
102
|
-
aspernatur, consectetur vitae soluta molestias maiores?
|
|
12
|
+
<body>
|
|
13
|
+
<header>
|
|
14
|
+
<!--! To use one of the components below, uncomment only one -->
|
|
103
15
|
|
|
16
|
+
<header-type-1></header-type-1>
|
|
17
|
+
|
|
18
|
+
<!-- <header-type-2></header-type-2> -->
|
|
19
|
+
|
|
20
|
+
<!--! To use one of the components below, uncomment only one -->
|
|
21
|
+
</header>
|
|
22
|
+
|
|
23
|
+
<main class="container">
|
|
24
|
+
<!--? Type Writer -->
|
|
25
|
+
|
|
26
|
+
<div>
|
|
27
|
+
<h2 id="KIUI-typewriter"></h2>
|
|
104
28
|
</div>
|
|
105
29
|
|
|
106
|
-
|
|
30
|
+
<!--? Type Writer -->
|
|
31
|
+
|
|
32
|
+
<!--* Show More Component -->
|
|
33
|
+
|
|
34
|
+
<div id="show-more">
|
|
35
|
+
<div id="show-more__content">
|
|
36
|
+
Lorem ipsum dolor sit amet consectetur adipisicing elit. In pariatur
|
|
37
|
+
quasi minus a quaerat vitae laboriosam qui iste, est voluptatum
|
|
38
|
+
nesciunt maxime voluptate. Explicabo saepe exercitationem ratione
|
|
39
|
+
illum autem doloribus quis, alias quas possimus consectetur? Dolorem
|
|
40
|
+
temporibus non enim saepe exercitationem obcaecati, velit
|
|
41
|
+
necessitatibus accusamus voluptatem natus. Natus nemo perferendis
|
|
42
|
+
aspernatur et, similique earum! Adipisci omnis modi consequuntur eos
|
|
43
|
+
sint aspernatur rerum officiis alias commodi aliquid possimus
|
|
44
|
+
laudantium, blanditiis minima magni distinctio. Molestias ipsam enim
|
|
45
|
+
recusandae excepturi dignissimos praesentium placeat minus, deserunt
|
|
46
|
+
</div>
|
|
47
|
+
|
|
48
|
+
<div id="show-more__shadow"></div>
|
|
49
|
+
<button id="show-more__button">Show More</button>
|
|
107
50
|
</div>
|
|
108
|
-
<button id="show-more__button">Show More</button>
|
|
109
|
-
|
|
110
|
-
</div>
|
|
111
|
-
<!-- Show More Component -->
|
|
112
|
-
|
|
113
|
-
<div id="cards-wrapper">
|
|
114
|
-
<!-- Boxes -->
|
|
115
|
-
<box-card-1 data-title="just title">
|
|
116
|
-
</box-card-1>
|
|
117
|
-
|
|
118
|
-
<box-card-1 data-img="./kiui.png" data-title="title2" data-price="23">
|
|
119
|
-
</box-card-1>
|
|
120
|
-
|
|
121
|
-
<box-card-1 data-img="./kiui.png" data-button-title="Buy" data-title="title3" data-description="description"
|
|
122
|
-
data-price="12"></box-card-1>
|
|
123
|
-
|
|
124
|
-
<box-card-1 data-img="./kiui.png" data-title="title4" data-description="description" data-button-title="button"
|
|
125
|
-
data-button-link="#itsLink"></box-card-1>
|
|
126
|
-
<!-- Boxes -->
|
|
127
|
-
</div>
|
|
128
|
-
|
|
129
|
-
</main>
|
|
130
|
-
|
|
131
|
-
<footer>
|
|
132
|
-
<!--* To use one of the components below, uncomment only one -->
|
|
133
|
-
|
|
134
|
-
<footer-type-1></footer-type-1>
|
|
135
|
-
<!-- <footer-type-2></footer-type-2> -->
|
|
136
|
-
<!-- <footer-type-3></footer-type-3> -->
|
|
137
|
-
|
|
138
|
-
</footer>
|
|
139
|
-
|
|
140
|
-
<script src="./kiui.min.js"></script>
|
|
141
|
-
<!-- Use KIUI Type Writer -->
|
|
142
|
-
<script src="./kiui.typewriter.min.js"></script>
|
|
143
|
-
<script>
|
|
144
|
-
initKIUITypeWriter(
|
|
145
|
-
[
|
|
146
|
-
"Welcome to KIUI",
|
|
147
|
-
"A lightweight",
|
|
148
|
-
"and",
|
|
149
|
-
"Modern Web Component UI Kit.",
|
|
150
|
-
"Let’s build something amazing together . . . ",
|
|
151
|
-
],
|
|
152
|
-
100, // typing/deleting speed
|
|
153
|
-
1000 // pause between type/delete
|
|
154
|
-
);
|
|
155
|
-
</script>
|
|
156
|
-
</body>
|
|
157
51
|
|
|
52
|
+
<!--* Show More Component -->
|
|
53
|
+
|
|
54
|
+
<div id="cards-wrapper">
|
|
55
|
+
<!--? Boxes -->
|
|
56
|
+
<box-card-1 data-title="just title"></box-card-1>
|
|
57
|
+
|
|
58
|
+
<box-card-1
|
|
59
|
+
data-img="./kiui.png"
|
|
60
|
+
data-title="title2"
|
|
61
|
+
data-price="23"
|
|
62
|
+
></box-card-1>
|
|
63
|
+
|
|
64
|
+
<box-card-1
|
|
65
|
+
data-img="./kiui.png"
|
|
66
|
+
data-button-title="Buy"
|
|
67
|
+
data-title="title3"
|
|
68
|
+
data-description="description"
|
|
69
|
+
data-price="12"
|
|
70
|
+
></box-card-1>
|
|
71
|
+
|
|
72
|
+
<box-card-1
|
|
73
|
+
data-img="./kiui.png"
|
|
74
|
+
data-title="title4"
|
|
75
|
+
data-description="description"
|
|
76
|
+
data-button-title="button"
|
|
77
|
+
data-button-link="#itsLink"
|
|
78
|
+
></box-card-1>
|
|
79
|
+
<!--? Boxes -->
|
|
80
|
+
</div>
|
|
81
|
+
</main>
|
|
82
|
+
|
|
83
|
+
<footer>
|
|
84
|
+
<!--* To use one of the components below, uncomment only one -->
|
|
85
|
+
|
|
86
|
+
<footer-type-1></footer-type-1>
|
|
87
|
+
|
|
88
|
+
<!-- <footer-type-2></footer-type-2> -->
|
|
89
|
+
|
|
90
|
+
<!-- <footer-type-3></footer-type-3> -->
|
|
91
|
+
|
|
92
|
+
<!--* To use one of the components below, uncomment only one -->
|
|
93
|
+
</footer>
|
|
94
|
+
|
|
95
|
+
<!--* Scripts -->
|
|
96
|
+
<script type="module" src="./kiui.min.js"></script>
|
|
97
|
+
|
|
98
|
+
<!--! Use KIUI Type Writer -->
|
|
99
|
+
<script src="./kiui.typewriter.min.js"></script>
|
|
100
|
+
<script>
|
|
101
|
+
initKIUITypeWriter(
|
|
102
|
+
[
|
|
103
|
+
"Welcome to KIUI",
|
|
104
|
+
"A lightweight",
|
|
105
|
+
"and",
|
|
106
|
+
"Modern Web Component UI Kit.",
|
|
107
|
+
"Let’s build something amazing together . . . ",
|
|
108
|
+
],
|
|
109
|
+
100, // typing/deleting speed
|
|
110
|
+
1000 // pause between type/delete
|
|
111
|
+
);
|
|
112
|
+
</script>
|
|
113
|
+
|
|
114
|
+
<!--! Other Scripts ... -->
|
|
115
|
+
<script src="./app.js"></script>
|
|
116
|
+
</body>
|
|
158
117
|
</html>
|
package/dist/kiui.min.css
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
|
|
2
2
|
/*! Show More */
|
|
3
|
-
@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-space-y-reverse:0;--tw-border-style:solid;--tw-font-weight:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-duration:initial;--tw-ease:initial;--tw-gradient-position:initial;--tw-gradient-from:#0000;--tw-gradient-via:#0000;--tw-gradient-to:#0000;--tw-gradient-stops:initial;--tw-gradient-via-stops:initial;--tw-gradient-from-position:0%;--tw-gradient-via-position:50%;--tw-gradient-to-position:100%;--tw-leading:initial}}}@layer theme{:root,:host{--font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--color-amber-200:oklch(92.4% .12 95.746);--color-blue-600:oklch(54.6% .245 262.881);--color-blue-700:oklch(48.8% .243 264.376);--color-indigo-400:oklch(67.3% .182 276.935);--color-slate-100:oklch(96.8% .007 247.896);--color-slate-200:oklch(92.9% .013 255.508);--color-slate-300:oklch(86.9% .022 252.894);--color-slate-500:oklch(55.4% .046 257.417);--color-slate-600:oklch(44.6% .043 257.281);--color-slate-700:oklch(37.2% .044 257.287);--color-slate-800:oklch(27.9% .041 260.031);--color-slate-900:oklch(20.8% .042 265.755);--color-slate-950:oklch(12.9% .042 264.695);--color-gray-100:oklch(96.7% .003 264.542);--color-gray-200:oklch(92.8% .006 264.531);--color-gray-300:oklch(87.2% .01 258.338);--color-gray-400:oklch(70.7% .022 261.325);--color-gray-500:oklch(55.1% .027 264.364);--color-gray-600:oklch(44.6% .03 256.802);--color-gray-700:oklch(37.3% .034 259.733);--color-gray-800:oklch(27.8% .033 256.848);--color-gray-900:oklch(21% .034 264.665);--color-black:#000;--color-white:#fff;--spacing:.25rem;--container-6xl:72rem;--container-7xl:80rem;--text-sm:.875rem;--text-sm--line-height:calc(1.25/.875);--text-base:1rem;--text-base--line-height:calc(1.5/1);--text-lg:1.125rem;--text-lg--line-height:calc(1.75/1.125);--text-xl:1.25rem;--text-xl--line-height:calc(1.75/1.25);--text-2xl:1.5rem;--text-2xl--line-height:calc(2/1.5);--text-3xl:1.875rem;--text-3xl--line-height:calc(2.25/1.875);--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--font-weight-extrabold:800;--radius-md:.375rem;--radius-xl:.75rem;--radius-2xl:1rem;--ease-in:cubic-bezier(.4,0,1,1);--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4,0,.2,1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.inset-0{inset:calc(var(--spacing)*0)}.top-0{top:calc(var(--spacing)*0)}.top-16{top:calc(var(--spacing)*16)}.right-0{right:calc(var(--spacing)*0)}.left-0{left:calc(var(--spacing)*0)}.z-50{z-index:50}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:96rem){.container{max-width:96rem}}.m-auto{margin:auto}.mx-auto{margin-inline:auto}.mt-2{margin-top:calc(var(--spacing)*2)}.mt-4{margin-top:calc(var(--spacing)*4)}.mt-5{margin-top:calc(var(--spacing)*5)}.mt-12{margin-top:calc(var(--spacing)*12)}.mb-4{margin-bottom:calc(var(--spacing)*4)}.mb-10{margin-bottom:calc(var(--spacing)*10)}.contents{display:contents}.flex{display:flex}.grid{display:grid}.hidden{display:none}.h-5{height:calc(var(--spacing)*5)}.h-6{height:calc(var(--spacing)*6)}.h-16{height:calc(var(--spacing)*16)}.h-42{height:calc(var(--spacing)*42)}.h-60{height:calc(var(--spacing)*60)}.h-full{height:100%}.w-2\/3{width:66.6667%}.w-5{width:calc(var(--spacing)*5)}.w-6{width:calc(var(--spacing)*6)}.w-64{width:calc(var(--spacing)*64)}.w-full{width:100%}.max-w-6xl{max-width:var(--container-6xl)}.max-w-7xl{max-width:var(--container-7xl)}.flex-1\/4{flex:25%}.flex-2\/4{flex:50%}.translate-x-0{--tw-translate-x:calc(var(--spacing)*0);translate:var(--tw-translate-x)var(--tw-translate-y)}.translate-x-full{--tw-translate-x:100%;translate:var(--tw-translate-x)var(--tw-translate-y)}.transform{transform:var(--tw-rotate-x,)var(--tw-rotate-y,)var(--tw-rotate-z,)var(--tw-skew-x,)var(--tw-skew-y,)}.cursor-pointer{cursor:pointer}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.gap-4{gap:calc(var(--spacing)*4)}.gap-6{gap:calc(var(--spacing)*6)}.gap-8{gap:calc(var(--spacing)*8)}.gap-10{gap:calc(var(--spacing)*10)}:where(.space-y-2>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*2)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*2)*calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-3>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*3)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*3)*calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-4>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*4)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*4)*calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-6>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*6)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*6)*calc(1 - var(--tw-space-y-reverse)))}.overflow-hidden{overflow:hidden}.rounded-2xl{border-radius:var(--radius-2xl)}.rounded-md{border-radius:var(--radius-md)}.rounded-xl{border-radius:var(--radius-xl)}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-gray-300{border-color:var(--color-gray-300)}.border-gray-700{border-color:var(--color-gray-700)}.bg-\[\#0b1d26\]{background-color:#0b1d26}.bg-blue-600{background-color:var(--color-blue-600)}.bg-gray-100{background-color:var(--color-gray-100)}.bg-gray-900{background-color:var(--color-gray-900)}.bg-slate-100{background-color:var(--color-slate-100)}.bg-slate-600{background-color:var(--color-slate-600)}.bg-white{background-color:var(--color-white)}.object-cover{object-fit:cover}.p-5{padding:calc(var(--spacing)*5)}.px-4{padding-inline:calc(var(--spacing)*4)}.px-6{padding-inline:calc(var(--spacing)*6)}.py-2{padding-block:calc(var(--spacing)*2)}.py-4{padding-block:calc(var(--spacing)*4)}.py-6{padding-block:calc(var(--spacing)*6)}.py-8{padding-block:calc(var(--spacing)*8)}.py-12{padding-block:calc(var(--spacing)*12)}.py-16{padding-block:calc(var(--spacing)*16)}.pt-6{padding-top:calc(var(--spacing)*6)}.pt-10{padding-top:calc(var(--spacing)*10)}.pb-10{padding-bottom:calc(var(--spacing)*10)}.text-center{text-align:center}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.text-3xl{font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-extrabold{--tw-font-weight:var(--font-weight-extrabold);font-weight:var(--font-weight-extrabold)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.text-amber-200{color:var(--color-amber-200)}.text-black{color:var(--color-black)}.text-gray-200{color:var(--color-gray-200)}.text-gray-400{color:var(--color-gray-400)}.text-gray-500{color:var(--color-gray-500)}.text-gray-600{color:var(--color-gray-600)}.text-gray-700{color:var(--color-gray-700)}.text-gray-800{color:var(--color-gray-800)}.text-slate-300{color:var(--color-slate-300)}.text-slate-600{color:var(--color-slate-600)}.text-slate-700{color:var(--color-slate-700)}.text-slate-800{color:var(--color-slate-800)}.text-white{color:var(--color-white)}.opacity-0{opacity:0}.opacity-100{opacity:1}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a),0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-md{--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a),0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.outline-1{outline-style:var(--tw-outline-style);outline-width:1px}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,visibility,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-200{--tw-duration:.2s;transition-duration:.2s}.duration-300{--tw-duration:.3s;transition-duration:.3s}.ease-in{--tw-ease:var(--ease-in);transition-timing-function:var(--ease-in)}:is(.\*\:transition-all>*){transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}@media (hover:hover){.hover\:-translate-y-2:hover{--tw-translate-y:calc(var(--spacing)*-2);translate:var(--tw-translate-x)var(--tw-translate-y)}.hover\:bg-blue-700:hover{background-color:var(--color-blue-700)}.hover\:bg-slate-800:hover{background-color:var(--color-slate-800)}.hover\:text-indigo-400:hover{color:var(--color-indigo-400)}.hover\:underline:hover{text-decoration-line:underline}.hover\:shadow-xl:hover{--tw-shadow:0 20px 25px -5px var(--tw-shadow-color,#0000001a),0 8px 10px -6px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}}.focus\:outline-blue-600:focus{outline-color:var(--color-blue-600)}@media (min-width:40rem){.sm\:w-80{width:calc(var(--spacing)*80)}.sm\:flex-row{flex-direction:row}.sm\:px-6{padding-inline:calc(var(--spacing)*6)}.sm\:text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}}@media (min-width:48rem){.md\:ml-auto{margin-left:auto}.md\:flex{display:flex}.md\:hidden{display:none}.md\:w-1\/2{width:50%}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.md\:flex-row{flex-direction:row}.md\:text-left{text-align:left}}@media (min-width:64rem){.lg\:flex-row{flex-direction:row}:where(.lg\:space-y-0>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*0)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*0)*calc(1 - var(--tw-space-y-reverse)))}.lg\:px-8{padding-inline:calc(var(--spacing)*8)}}@media (prefers-color-scheme:dark){.dark\:border-gray-700{border-color:var(--color-gray-700)}.dark\:bg-gray-900{background-color:var(--color-gray-900)}.dark\:bg-slate-600{background-color:var(--color-slate-600)}.dark\:bg-slate-700{background-color:var(--color-slate-700)}.dark\:bg-slate-800{background-color:var(--color-slate-800)}.dark\:text-gray-300{color:var(--color-gray-300)}.dark\:text-gray-400{color:var(--color-gray-400)}.dark\:text-indigo-400{color:var(--color-indigo-400)}.dark\:text-slate-100{color:var(--color-slate-100)}.dark\:text-white{color:var(--color-white)}}.container{margin-inline:auto;margin-block:calc(var(--spacing)*24);padding:calc(var(--spacing)*2)}}@media (prefers-color-scheme:dark){body{background-color:var(--color-slate-800)}}body{background-color:#d6d6d6}@media (prefers-color-scheme:dark){body{background-color:var(--color-slate-800)}}.menu-btn{cursor:pointer;margin:.7rem .2rem}.menu-btn,.menu-btn:after,.menu-btn:before{content:"";background:#000;border-radius:1rem;width:2rem;height:.15rem;position:relative}.menu-btn:after{position:absolute;bottom:.5rem}.menu-btn:before{position:absolute;top:.5rem}#cards-wrapper{gap:calc(var(--spacing)*4);grid-template-columns:repeat(2,minmax(0,1fr));display:grid}@media (min-width:40rem){#cards-wrapper{gap:calc(var(--spacing)*6);grid-template-columns:repeat(2,minmax(0,1fr))}}@media (min-width:48rem){#cards-wrapper{gap:calc(var(--spacing)*3.5)}}@media (min-width:64rem){#cards-wrapper{grid-template-columns:repeat(3,minmax(0,1fr))}}.menu-btn--show{left:50%}#KIUI-typewriter{margin:calc(var(--spacing)*4);height:calc(var(--spacing)*4);text-align:center;font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height));color:var(--color-slate-700);margin-inline:auto}@media (prefers-color-scheme:dark){#KIUI-typewriter{color:var(--color-slate-200)}}#KIUI-typewriter:after{content:"|";background:inherit;animation:1.5s linear infinite typeWriterFlicker;display:inline-block}.footer-icon{width:calc(var(--spacing)*5)}#show-more{margin-block:calc(var(--spacing)*50);border-radius:var(--radius-xl);background-color:var(--color-slate-600);width:100%;padding:calc(var(--spacing)*6);padding-bottom:calc(var(--spacing)*12);position:relative}#show-more__content{height:calc(var(--spacing)*49);text-align:justify;width:100%;color:var(--color-slate-900);overflow:hidden}@media (prefers-color-scheme:dark){#show-more__content{color:var(--color-slate-100)}}#show-more__shadow{right:calc(var(--spacing)*0);bottom:calc(var(--spacing)*0);left:calc(var(--spacing)*0);height:calc(var(--spacing)*30);border-bottom-right-radius:var(--radius-xl);border-bottom-left-radius:var(--radius-xl);--tw-gradient-position:to bottom;width:100%;display:block;position:absolute}@supports (background-image:linear-gradient(in lab, red, red)){#show-more__shadow{--tw-gradient-position:to bottom in oklab}}#show-more__shadow{background-image:linear-gradient(var(--tw-gradient-stops));--tw-gradient-from:#3141584d}@supports (color:color-mix(in lab, red, red)){#show-more__shadow{--tw-gradient-from:color-mix(in oklab,var(--color-slate-700)30%,transparent)}}#show-more__shadow{--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position));--tw-gradient-to:var(--color-slate-950);--tw-leading:calc(var(--spacing)*6);line-height:calc(var(--spacing)*6)}#show-more__button{right:calc(var(--spacing)*0);bottom:calc(var(--spacing)*-5);left:calc(var(--spacing)*0);max-width:calc(var(--spacing)*30);cursor:pointer;border-radius:var(--radius-2xl);background-color:#62748ecc;margin-inline:auto;position:absolute}@supports (color:color-mix(in lab, red, red)){#show-more__button{background-color:color-mix(in oklab,var(--color-slate-500)80%,transparent)}}#show-more__button{padding:calc(var(--spacing)*3);color:var(--color-slate-100);transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}@media (prefers-color-scheme:dark){#show-more__button{background-color:var(--color-slate-100);color:var(--color-slate-900)}}@media (hover:hover){@media (prefers-color-scheme:dark){#show-more__button:hover{background-color:var(--color-slate-300)}}}#show-more.active #show-more__content{overflow:auto;height:100%!important}#show-more.active #show-more__shadow{display:none}#show-more.active #show-more__button{bottom:calc(var(--spacing)*-5);background-color:#fffc}@supports (color:color-mix(in lab, red, red)){#show-more.active #show-more__button{background-color:color-mix(in oklab,var(--color-white)80%,transparent)}}#show-more.active #show-more__button{color:var(--color-slate-900)}@media (prefers-color-scheme:dark){#show-more.active #show-more__button{border-color:var(--color-slate-100);color:var(--color-slate-800)}}@keyframes typeWriterFlicker{0%{opacity:1;transform:scaleY(1)}50%{opacity:.1;transform:scaleY(.8)}to{opacity:1;transform:scaleY(1)}}.social-media a svg{width:calc(var(--spacing)*8);height:calc(var(--spacing)*8);--tw-duration:.2s;transition-duration:.2s}@media screen and (max-width:480px){#cards-wrapper{grid-template-columns:repeat(1,minmax(0,1fr))}}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}@property --tw-gradient-position{syntax:"*";inherits:false}@property --tw-gradient-from{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-via{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-to{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-stops{syntax:"*";inherits:false}@property --tw-gradient-via-stops{syntax:"*";inherits:false}@property --tw-gradient-from-position{syntax:"<length-percentage>";inherits:false;initial-value:0%}@property --tw-gradient-via-position{syntax:"<length-percentage>";inherits:false;initial-value:50%}@property --tw-gradient-to-position{syntax:"<length-percentage>";inherits:false;initial-value:100%}@property --tw-leading{syntax:"*";inherits:false}
|
|
3
|
+
@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-space-y-reverse:0;--tw-border-style:solid;--tw-font-weight:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-duration:initial;--tw-ease:initial;--tw-gradient-position:initial;--tw-gradient-from:#0000;--tw-gradient-via:#0000;--tw-gradient-to:#0000;--tw-gradient-stops:initial;--tw-gradient-via-stops:initial;--tw-gradient-from-position:0%;--tw-gradient-via-position:50%;--tw-gradient-to-position:100%;--tw-leading:initial}}}@layer theme{:root,:host{--font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--color-amber-200:oklch(92.4% .12 95.746);--color-blue-600:oklch(54.6% .245 262.881);--color-blue-700:oklch(48.8% .243 264.376);--color-indigo-400:oklch(67.3% .182 276.935);--color-slate-100:oklch(96.8% .007 247.896);--color-slate-200:oklch(92.9% .013 255.508);--color-slate-300:oklch(86.9% .022 252.894);--color-slate-500:oklch(55.4% .046 257.417);--color-slate-600:oklch(44.6% .043 257.281);--color-slate-700:oklch(37.2% .044 257.287);--color-slate-800:oklch(27.9% .041 260.031);--color-slate-900:oklch(20.8% .042 265.755);--color-slate-950:oklch(12.9% .042 264.695);--color-gray-100:oklch(96.7% .003 264.542);--color-gray-200:oklch(92.8% .006 264.531);--color-gray-300:oklch(87.2% .01 258.338);--color-gray-400:oklch(70.7% .022 261.325);--color-gray-500:oklch(55.1% .027 264.364);--color-gray-600:oklch(44.6% .03 256.802);--color-gray-700:oklch(37.3% .034 259.733);--color-gray-800:oklch(27.8% .033 256.848);--color-gray-900:oklch(21% .034 264.665);--color-black:#000;--color-white:#fff;--spacing:.25rem;--container-6xl:72rem;--container-7xl:80rem;--text-sm:.875rem;--text-sm--line-height:calc(1.25/.875);--text-base:1rem;--text-base--line-height:calc(1.5/1);--text-lg:1.125rem;--text-lg--line-height:calc(1.75/1.125);--text-xl:1.25rem;--text-xl--line-height:calc(1.75/1.25);--text-2xl:1.5rem;--text-2xl--line-height:calc(2/1.5);--text-3xl:1.875rem;--text-3xl--line-height:calc(2.25/1.875);--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--font-weight-extrabold:800;--radius-md:.375rem;--radius-xl:.75rem;--radius-2xl:1rem;--ease-in:cubic-bezier(.4,0,1,1);--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4,0,.2,1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.inset-0{inset:calc(var(--spacing)*0)}.top-0{top:calc(var(--spacing)*0)}.top-16{top:calc(var(--spacing)*16)}.right-0{right:calc(var(--spacing)*0)}.left-0{left:calc(var(--spacing)*0)}.z-50{z-index:50}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:96rem){.container{max-width:96rem}}.m-auto{margin:auto}.mx-auto{margin-inline:auto}.mt-2{margin-top:calc(var(--spacing)*2)}.mt-4{margin-top:calc(var(--spacing)*4)}.mt-5{margin-top:calc(var(--spacing)*5)}.mt-12{margin-top:calc(var(--spacing)*12)}.mb-4{margin-bottom:calc(var(--spacing)*4)}.mb-10{margin-bottom:calc(var(--spacing)*10)}.contents{display:contents}.flex{display:flex}.grid{display:grid}.hidden{display:none}.h-5{height:calc(var(--spacing)*5)}.h-6{height:calc(var(--spacing)*6)}.h-16{height:calc(var(--spacing)*16)}.h-42{height:calc(var(--spacing)*42)}.h-60{height:calc(var(--spacing)*60)}.h-full{height:100%}.w-2\/3{width:66.6667%}.w-5{width:calc(var(--spacing)*5)}.w-6{width:calc(var(--spacing)*6)}.w-64{width:calc(var(--spacing)*64)}.w-fit{width:fit-content}.w-full{width:100%}.max-w-6xl{max-width:var(--container-6xl)}.max-w-7xl{max-width:var(--container-7xl)}.flex-1\/4{flex:25%}.flex-2\/4{flex:50%}.translate-x-0{--tw-translate-x:calc(var(--spacing)*0);translate:var(--tw-translate-x)var(--tw-translate-y)}.translate-x-full{--tw-translate-x:100%;translate:var(--tw-translate-x)var(--tw-translate-y)}.transform{transform:var(--tw-rotate-x,)var(--tw-rotate-y,)var(--tw-rotate-z,)var(--tw-skew-x,)var(--tw-skew-y,)}.cursor-pointer{cursor:pointer}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.gap-4{gap:calc(var(--spacing)*4)}.gap-6{gap:calc(var(--spacing)*6)}.gap-8{gap:calc(var(--spacing)*8)}.gap-10{gap:calc(var(--spacing)*10)}:where(.space-y-2>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*2)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*2)*calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-3>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*3)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*3)*calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-4>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*4)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*4)*calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-6>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*6)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*6)*calc(1 - var(--tw-space-y-reverse)))}.overflow-hidden{overflow:hidden}.rounded-2xl{border-radius:var(--radius-2xl)}.rounded-md{border-radius:var(--radius-md)}.rounded-xl{border-radius:var(--radius-xl)}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-gray-300{border-color:var(--color-gray-300)}.border-gray-700{border-color:var(--color-gray-700)}.bg-\[\#0b1d26\]{background-color:#0b1d26}.bg-blue-600{background-color:var(--color-blue-600)}.bg-gray-100{background-color:var(--color-gray-100)}.bg-gray-900{background-color:var(--color-gray-900)}.bg-slate-100{background-color:var(--color-slate-100)}.bg-slate-600{background-color:var(--color-slate-600)}.bg-white{background-color:var(--color-white)}.object-cover{object-fit:cover}.p-5{padding:calc(var(--spacing)*5)}.px-4{padding-inline:calc(var(--spacing)*4)}.px-6{padding-inline:calc(var(--spacing)*6)}.py-2{padding-block:calc(var(--spacing)*2)}.py-4{padding-block:calc(var(--spacing)*4)}.py-6{padding-block:calc(var(--spacing)*6)}.py-8{padding-block:calc(var(--spacing)*8)}.py-12{padding-block:calc(var(--spacing)*12)}.py-16{padding-block:calc(var(--spacing)*16)}.pt-6{padding-top:calc(var(--spacing)*6)}.pt-10{padding-top:calc(var(--spacing)*10)}.pb-10{padding-bottom:calc(var(--spacing)*10)}.text-center{text-align:center}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.text-3xl{font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-extrabold{--tw-font-weight:var(--font-weight-extrabold);font-weight:var(--font-weight-extrabold)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.text-amber-200{color:var(--color-amber-200)}.text-black{color:var(--color-black)}.text-gray-200{color:var(--color-gray-200)}.text-gray-400{color:var(--color-gray-400)}.text-gray-500{color:var(--color-gray-500)}.text-gray-600{color:var(--color-gray-600)}.text-gray-700{color:var(--color-gray-700)}.text-gray-800{color:var(--color-gray-800)}.text-slate-300{color:var(--color-slate-300)}.text-slate-600{color:var(--color-slate-600)}.text-slate-700{color:var(--color-slate-700)}.text-slate-800{color:var(--color-slate-800)}.text-white{color:var(--color-white)}.opacity-0{opacity:0}.opacity-100{opacity:1}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a),0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-md{--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a),0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.outline-1{outline-style:var(--tw-outline-style);outline-width:1px}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,visibility,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-200{--tw-duration:.2s;transition-duration:.2s}.duration-300{--tw-duration:.3s;transition-duration:.3s}.ease-in{--tw-ease:var(--ease-in);transition-timing-function:var(--ease-in)}:is(.\*\:transition-all>*){transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}@media (hover:hover){.hover\:-translate-y-2:hover{--tw-translate-y:calc(var(--spacing)*-2);translate:var(--tw-translate-x)var(--tw-translate-y)}.hover\:bg-blue-700:hover{background-color:var(--color-blue-700)}.hover\:bg-slate-800:hover{background-color:var(--color-slate-800)}.hover\:text-indigo-400:hover{color:var(--color-indigo-400)}.hover\:underline:hover{text-decoration-line:underline}.hover\:shadow-xl:hover{--tw-shadow:0 20px 25px -5px var(--tw-shadow-color,#0000001a),0 8px 10px -6px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}}.focus\:outline-blue-600:focus{outline-color:var(--color-blue-600)}@media (min-width:40rem){.sm\:w-80{width:calc(var(--spacing)*80)}.sm\:flex-row{flex-direction:row}.sm\:px-6{padding-inline:calc(var(--spacing)*6)}.sm\:text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}}@media (min-width:48rem){.md\:ml-auto{margin-left:auto}.md\:flex{display:flex}.md\:hidden{display:none}.md\:w-1\/2{width:50%}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.md\:flex-row{flex-direction:row}.md\:text-left{text-align:left}}@media (min-width:64rem){.lg\:flex-row{flex-direction:row}:where(.lg\:space-y-0>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*0)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*0)*calc(1 - var(--tw-space-y-reverse)))}.lg\:px-8{padding-inline:calc(var(--spacing)*8)}}@media (prefers-color-scheme:dark){.dark\:border-gray-700{border-color:var(--color-gray-700)}.dark\:bg-gray-900{background-color:var(--color-gray-900)}.dark\:bg-slate-600{background-color:var(--color-slate-600)}.dark\:bg-slate-700{background-color:var(--color-slate-700)}.dark\:bg-slate-800{background-color:var(--color-slate-800)}.dark\:text-gray-300{color:var(--color-gray-300)}.dark\:text-gray-400{color:var(--color-gray-400)}.dark\:text-indigo-400{color:var(--color-indigo-400)}.dark\:text-slate-100{color:var(--color-slate-100)}.dark\:text-white{color:var(--color-white)}}.container{margin-inline:auto;margin-block:calc(var(--spacing)*24);padding:calc(var(--spacing)*2)}}@media (prefers-color-scheme:dark){body{background-color:var(--color-slate-800)}}body{background-color:#d6d6d6}@media (prefers-color-scheme:dark){body{background-color:var(--color-slate-800)}}.menu-btn{cursor:pointer;margin:.7rem .2rem}.menu-btn,.menu-btn:after,.menu-btn:before{content:"";background:#000;border-radius:1rem;width:2rem;height:.15rem;position:relative}.menu-btn:after{position:absolute;bottom:.5rem}.menu-btn:before{position:absolute;top:.5rem}#cards-wrapper{gap:calc(var(--spacing)*4);grid-template-columns:repeat(2,minmax(0,1fr));display:grid}@media (min-width:40rem){#cards-wrapper{gap:calc(var(--spacing)*6);grid-template-columns:repeat(2,minmax(0,1fr))}}@media (min-width:48rem){#cards-wrapper{gap:calc(var(--spacing)*3.5)}}@media (min-width:64rem){#cards-wrapper{grid-template-columns:repeat(3,minmax(0,1fr))}}.menu-btn--show{left:50%}#KIUI-typewriter{margin:calc(var(--spacing)*4);height:calc(var(--spacing)*4);text-align:center;font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height));color:var(--color-slate-700);margin-inline:auto}@media (prefers-color-scheme:dark){#KIUI-typewriter{color:var(--color-slate-200)}}#KIUI-typewriter:after{content:"|";background:inherit;animation:1.5s linear infinite typeWriterFlicker;display:inline-block}.footer-icon{width:calc(var(--spacing)*5)}#show-more{margin-block:calc(var(--spacing)*50);border-radius:var(--radius-xl);background-color:var(--color-slate-600);width:100%;padding:calc(var(--spacing)*6);padding-bottom:calc(var(--spacing)*12);position:relative}#show-more__content{height:calc(var(--spacing)*49);text-align:justify;width:100%;color:var(--color-slate-900);overflow:hidden}@media (prefers-color-scheme:dark){#show-more__content{color:var(--color-slate-100)}}#show-more__shadow{right:calc(var(--spacing)*0);bottom:calc(var(--spacing)*0);left:calc(var(--spacing)*0);height:calc(var(--spacing)*30);border-bottom-right-radius:var(--radius-xl);border-bottom-left-radius:var(--radius-xl);--tw-gradient-position:to bottom;width:100%;display:block;position:absolute}@supports (background-image:linear-gradient(in lab, red, red)){#show-more__shadow{--tw-gradient-position:to bottom in oklab}}#show-more__shadow{background-image:linear-gradient(var(--tw-gradient-stops));--tw-gradient-from:#3141584d}@supports (color:color-mix(in lab, red, red)){#show-more__shadow{--tw-gradient-from:color-mix(in oklab,var(--color-slate-700)30%,transparent)}}#show-more__shadow{--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position));--tw-gradient-to:var(--color-slate-950);--tw-leading:calc(var(--spacing)*6);line-height:calc(var(--spacing)*6)}#show-more__button{right:calc(var(--spacing)*0);bottom:calc(var(--spacing)*-5);left:calc(var(--spacing)*0);max-width:calc(var(--spacing)*30);cursor:pointer;border-radius:var(--radius-2xl);background-color:#62748ecc;margin-inline:auto;position:absolute}@supports (color:color-mix(in lab, red, red)){#show-more__button{background-color:color-mix(in oklab,var(--color-slate-500)80%,transparent)}}#show-more__button{padding:calc(var(--spacing)*3);color:var(--color-slate-100);transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}@media (prefers-color-scheme:dark){#show-more__button{background-color:var(--color-slate-100);color:var(--color-slate-900)}}@media (hover:hover){@media (prefers-color-scheme:dark){#show-more__button:hover{background-color:var(--color-slate-300)}}}#show-more.active #show-more__content{overflow:auto;height:100%!important}#show-more.active #show-more__shadow{display:none}#show-more.active #show-more__button{bottom:calc(var(--spacing)*-5);background-color:#fffc}@supports (color:color-mix(in lab, red, red)){#show-more.active #show-more__button{background-color:color-mix(in oklab,var(--color-white)80%,transparent)}}#show-more.active #show-more__button{color:var(--color-slate-900)}@media (prefers-color-scheme:dark){#show-more.active #show-more__button{border-color:var(--color-slate-100);color:var(--color-slate-800)}}@keyframes typeWriterFlicker{0%{opacity:1;transform:scaleY(1)}50%{opacity:.1;transform:scaleY(.8)}to{opacity:1;transform:scaleY(1)}}.social-media a svg{width:calc(var(--spacing)*8);height:calc(var(--spacing)*8);--tw-duration:.2s;transition-duration:.2s}@media screen and (max-width:480px){#cards-wrapper{grid-template-columns:repeat(1,minmax(0,1fr))}}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}@property --tw-gradient-position{syntax:"*";inherits:false}@property --tw-gradient-from{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-via{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-to{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-stops{syntax:"*";inherits:false}@property --tw-gradient-via-stops{syntax:"*";inherits:false}@property --tw-gradient-from-position{syntax:"<length-percentage>";inherits:false;initial-value:0%}@property --tw-gradient-via-position{syntax:"<length-percentage>";inherits:false;initial-value:50%}@property --tw-gradient-to-position{syntax:"<length-percentage>";inherits:false;initial-value:100%}@property --tw-leading{syntax:"*";inherits:false}
|
package/dist/kiui.min.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
(()=>{
|
|
1
|
+
(()=>{function f(r){let d=document;function a(o,e){let i=o.classList.contains("open");o.classList.contains("translate-x-full")?(o.classList.toggle("translate-x-0"),o.classList.toggle("translate-x-full")):o.classList.toggle("hidden");let[t,s]=e.children;i?(t.classList.remove("opacity-0"),t.classList.add("opacity-100"),s.classList.remove("opacity-100"),s.classList.add("opacity-0"),o.classList.remove("open")):(t.classList.remove("opacity-100"),t.classList.add("opacity-0"),s.classList.remove("opacity-0"),s.classList.add("opacity-100"),o.classList.add("open"))}class n extends HTMLElement{async connectedCallback(){let e=await r;if(!e)return;let i=e.menu.items.map(s=>`<li class="menu-item"><a class="transition-colors">${s}</a></li>`).join(""),t=e.menu.items.map(s=>`<li class="menu-mobile-item"><a class="transition-colors">${s}</a></li>`).join("");this.render(e.menu.title,i,t),this.setDesktopLinks(e.menu.links),this.setMobileLinks(e.menu.links),this.setupMobileToggle()}render(e,i,t){this.innerHTML=`
|
|
2
2
|
<nav class="menu-background bg-slate-100 dark:bg-slate-600 shadow-md fixed w-full top-0 left-0 z-50">
|
|
3
3
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between h-16">
|
|
4
4
|
|
|
@@ -34,7 +34,7 @@
|
|
|
34
34
|
</ul>
|
|
35
35
|
</div>
|
|
36
36
|
</nav>
|
|
37
|
-
`}setDesktopLinks(e){this.querySelectorAll(".menu-item a").forEach((t,s)=>{t.setAttribute("href",e[s]||"#")})}setMobileLinks(e){this.querySelectorAll(".menu-mobile-item a").forEach((t,s)=>{t.setAttribute("href",e[s]||"#")})}setupMobileToggle(){let e=this.querySelector("#hamburger-btn"),i=this.querySelector("#mobile-menu"),t=e;e&&i&&t&&(t.children[0].classList.add("opacity-100"),t.children[1].classList.add("opacity-0"),e.addEventListener("click",()=>
|
|
37
|
+
`}setDesktopLinks(e){this.querySelectorAll(".menu-item a").forEach((t,s)=>{t.setAttribute("href",e[s]||"#")})}setMobileLinks(e){this.querySelectorAll(".menu-mobile-item a").forEach((t,s)=>{t.setAttribute("href",e[s]||"#")})}setupMobileToggle(){let e=this.querySelector("#hamburger-btn"),i=this.querySelector("#mobile-menu"),t=e;e&&i&&t&&(t.children[0].classList.add("opacity-100"),t.children[1].classList.add("opacity-0"),e.addEventListener("click",()=>a(i,t)))}}class l extends HTMLElement{async connectedCallback(){let e=await r;if(!e)return;let i=e.menu.items.map(s=>`<li class="menu-item"><a class="transition-colors">${s}</a></li>`).join(""),t=e.menu.items.map(s=>`<li class="menu-mobile-item"><a class="transition-colors">${s}</a></li>`).join("");this.render(e.menu.title,i,t),this.setLinks(e.menu.links),this.setMobileLinks(e.menu.links),this.setupMobileToggle()}render(e,i,t){this.innerHTML=`
|
|
38
38
|
<nav class="menu-background bg-slate-100 text-slate-800 dark:bg-slate-700 dark:text-slate-100 fixed top-0 left-0 w-full z-50 shadow">
|
|
39
39
|
<div class="max-w-7xl mx-auto px-4 py-4 flex items-center justify-between">
|
|
40
40
|
|
|
@@ -77,23 +77,23 @@
|
|
|
77
77
|
</ul>
|
|
78
78
|
</div>
|
|
79
79
|
</nav>
|
|
80
|
-
`}setLinks(e){this.querySelectorAll(".menu-item a").forEach((t,s)=>{t.setAttribute("href",e[s]||"#")})}setMobileLinks(e){this.querySelectorAll(".menu-mobile-item a").forEach((t,s)=>{t.setAttribute("href",e[s]||"#")})}setupMobileToggle(){let e=this.querySelector("#hamburger-btn"),i=this.querySelector("#mobile-menu"),t=e;e&&i&&t&&(t.children[0].classList.add("opacity-100"),t.children[1].classList.add("opacity-0"),e.addEventListener("click",()=>
|
|
80
|
+
`}setLinks(e){this.querySelectorAll(".menu-item a").forEach((t,s)=>{t.setAttribute("href",e[s]||"#")})}setMobileLinks(e){this.querySelectorAll(".menu-mobile-item a").forEach((t,s)=>{t.setAttribute("href",e[s]||"#")})}setupMobileToggle(){let e=this.querySelector("#hamburger-btn"),i=this.querySelector("#mobile-menu"),t=e;e&&i&&t&&(t.children[0].classList.add("opacity-100"),t.children[1].classList.add("opacity-0"),e.addEventListener("click",()=>a(i,t)))}}customElements.define("header-type-1",n),customElements.define("header-type-2",l)}var x=class extends HTMLElement{async connectedCallback(){let{img:d,title:a,description:n,price:l,buttonTitle:o,buttonLink:e}=this.dataset;this.render(d,a,n,l,o,e)}render(d,a,n,l,o,e){this.innerHTML=`
|
|
81
81
|
<!-- Product Card -->
|
|
82
82
|
<div class="card w-full bg-white dark:bg-gray-900 rounded-2xl overflow-hidden shadow-md hover:shadow-xl hover:-translate-y-2 transition duration-300">
|
|
83
|
-
<img class="w-full h-60 object-cover" src="${
|
|
83
|
+
<img class="w-full h-60 object-cover" src="${d||"./kiui.png"}" alt="${a||"default alt"}" />
|
|
84
84
|
|
|
85
85
|
<div class="h-42 p-5 flex flex-col justify-between space-y-3">
|
|
86
|
-
${
|
|
87
|
-
${
|
|
86
|
+
${a?`<h2 class="card-title text-lg sm:text-xl font-semibold text-gray-800 dark:text-white">${a}</h2>`:""}
|
|
87
|
+
${n?`<p class="card-description text-sm text-gray-600 dark:text-gray-400">${n}</p>`:""}
|
|
88
88
|
|
|
89
|
-
${
|
|
90
|
-
${
|
|
91
|
-
${
|
|
89
|
+
${l||e?`<div class="flex items-center justify-between mt-4">
|
|
90
|
+
${l?`<span class="card-price text-lg font-bold text-slate-600 dark:text-indigo-400">$${l}</span>`:"<div></div>"}
|
|
91
|
+
${o?`<a href="${e}" target="_blank" rel="noopener noreferrer" class="card-btn px-4 py-2 bg-slate-600 text-white rounded-xl hover:bg-slate-800 cursor-pointer transition">${o}</a>`:""}
|
|
92
92
|
</div>`:""}
|
|
93
93
|
</div>
|
|
94
94
|
</div>
|
|
95
95
|
<!-- Product Card -->
|
|
96
|
-
`}};customElements.define("box-card-1",
|
|
96
|
+
`}};customElements.define("box-card-1",x);function g(r){class d extends HTMLElement{async connectedCallback(){let e=await r;e&&(this.logoRender=l.bind(this),this.render(e))}render(e){let i=e.socials.socials_names?e.socials.socials_names.map(t=>{if(this.logoRender(t))return`<a href="https://${t}" target="_blank">${this.logoRender(t)}</a>`}).join(""):"";this.innerHTML=`
|
|
97
97
|
<div class="footer bg-gray-100 dark:bg-gray-900 text-gray-700 dark:text-gray-300 pt-10">
|
|
98
98
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
99
99
|
<!-- Top -->
|
|
@@ -136,7 +136,7 @@
|
|
|
136
136
|
</div>
|
|
137
137
|
</div>
|
|
138
138
|
</div>
|
|
139
|
-
`}}class
|
|
139
|
+
`}}class a extends HTMLElement{async connectedCallback(){let e=await r;e&&(this.logoRender=l.bind(this),this.render(e))}render(e){let i=e.socials.socials_names?e.socials.socials_names.map(t=>{if(this.logoRender(t))return`<a href="https://${t}" target="_blank">${this.logoRender(t)}</a>`}).join(""):"";this.innerHTML=`
|
|
140
140
|
<div class="footer bg-gray-900 text-gray-200 py-12">
|
|
141
141
|
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
142
142
|
<div class="text-center mb-10">
|
|
@@ -164,7 +164,7 @@
|
|
|
164
164
|
<div>
|
|
165
165
|
<h3 class="text-lg font-semibold mb-4 footer-item-title">${t.title}</h3>
|
|
166
166
|
<ul class="space-y-2 text-sm">
|
|
167
|
-
${t.items.map((s,
|
|
167
|
+
${t.items.map((s,m)=>`<li class="footer-item"><a href="${t.links[m]}" class="hover:underline">${s}</a></li>`).join("")}
|
|
168
168
|
</ul>
|
|
169
169
|
</div>
|
|
170
170
|
`).join("")}
|
|
@@ -179,7 +179,7 @@
|
|
|
179
179
|
</div>
|
|
180
180
|
</div>
|
|
181
181
|
</div>
|
|
182
|
-
`}}class
|
|
182
|
+
`}}class n extends HTMLElement{async connectedCallback(){let e=await r;e&&(this.logoRender=l.bind(this),this.render(e))}render({title:e,description:i,footerItems:t,socials:s}){let{item1:m,item2:h,item3:p}=t,v=s.socials_names?s.socials_names.map(c=>{if(this.logoRender(c))return`<a href="https://${c}" target="_blank">${this.logoRender(c)}</a>`}).join(""):"";this.innerHTML=`
|
|
183
183
|
<footer class="footer bg-[#0b1d26] text-white py-16 text-sm">
|
|
184
184
|
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 flex justify-between lg:flex-row flex-col space-y-4 lg:space-y-0">
|
|
185
185
|
|
|
@@ -188,7 +188,7 @@
|
|
|
188
188
|
<h2 class="text-2xl footer-title">${e}</h2>
|
|
189
189
|
<p class="w-full md:w-1/2 footer-description">${i}</p>
|
|
190
190
|
<div class="flex mt-5 md:ml-auto gap-4">
|
|
191
|
-
${
|
|
191
|
+
${v}
|
|
192
192
|
</div>
|
|
193
193
|
</div>
|
|
194
194
|
|
|
@@ -198,28 +198,28 @@
|
|
|
198
198
|
|
|
199
199
|
<div class="flex-1/4 flex justify-between flex-col sm:flex-row gap-4">
|
|
200
200
|
<div>
|
|
201
|
-
<h3 class="footer-item-title text-lg footer-title text-amber-200 font-bold">More on The ${
|
|
201
|
+
<h3 class="footer-item-title text-lg footer-title text-amber-200 font-bold">More on The ${m.title}</h3>
|
|
202
202
|
<ul class="space-y-3 mt-4">
|
|
203
|
-
${
|
|
203
|
+
${m.items.map((c,u)=>`<li class="footer-item hover:underline"><a href=${m.links[u]}>${c}</a></li>`).join("")}
|
|
204
204
|
</ul>
|
|
205
205
|
</div>
|
|
206
206
|
|
|
207
207
|
<div>
|
|
208
|
-
<h3 class="footer-item-title text-lg footer-title text-amber-200 font-bold">More on The ${
|
|
208
|
+
<h3 class="footer-item-title text-lg footer-title text-amber-200 font-bold">More on The ${h.title}</h3>
|
|
209
209
|
<ul class="space-y-3 mt-4">
|
|
210
|
-
${
|
|
210
|
+
${h.items.map((c,u)=>`<li class="footer-item hover:underline"><a href=${h.links[u]}>${c}</a></li>`).join("")}
|
|
211
211
|
</ul>
|
|
212
212
|
</div>
|
|
213
213
|
<div>
|
|
214
|
-
<h3 class="footer-item-title text-lg footer-title text-amber-200 font-bold">More on The ${
|
|
214
|
+
<h3 class="footer-item-title text-lg footer-title text-amber-200 font-bold">More on The ${p.title}</h3>
|
|
215
215
|
<ul class="space-y-3 mt-4">
|
|
216
|
-
${
|
|
216
|
+
${p.items.map((c,u)=>`<li class="footer-item w-fit"><a class="hover:underline" href=${p.links[u]}>${c}</a></li>`).join("")}
|
|
217
217
|
</ul>
|
|
218
218
|
</div>
|
|
219
219
|
</div>
|
|
220
220
|
</div>
|
|
221
221
|
</footer>
|
|
222
|
-
`}}function
|
|
222
|
+
`}}function l(o){let e=o.toLowerCase();switch(!0){case e.includes("instagram"):return`<svg xmlns="http://www.w3.org/2000/svg" class="footer-icon" fill="currentColor" viewBox="0 0 16 16">
|
|
223
223
|
<path d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.9 3.9 0 0 0-1.417.923A3.9 3.9 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.9 3.9 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.9 3.9 0 0 0-.923-1.417A3.9 3.9 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599s.453.546.598.92c.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.5 2.5 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.5 2.5 0 0 1-.92-.598 2.5 2.5 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233s.008-2.388.046-3.231c.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92s.546-.453.92-.598c.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92m-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217m0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334"></path>
|
|
224
224
|
</svg>`;case e.includes("facebook"):return`<svg xmlns="http://www.w3.org/2000/svg" class="footer-icon" fill="currentColor" class="bi bi-facebook" viewBox="0 0 16 16">
|
|
225
225
|
<path d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951"/>
|
|
@@ -233,4 +233,4 @@
|
|
|
233
233
|
<path d="M13.601 2.326A7.85 7.85 0 0 0 7.994 0C3.627 0 .068 3.558.064 7.926c0 1.399.366 2.76 1.057 3.965L0 16l4.204-1.102a7.9 7.9 0 0 0 3.79.965h.004c4.368 0 7.926-3.558 7.93-7.93A7.9 7.9 0 0 0 13.6 2.326zM7.994 14.521a6.6 6.6 0 0 1-3.356-.92l-.24-.144-2.494.654.666-2.433-.156-.251a6.56 6.56 0 0 1-1.007-3.505c0-3.626 2.957-6.584 6.591-6.584a6.56 6.56 0 0 1 4.66 1.931 6.56 6.56 0 0 1 1.928 4.66c-.004 3.639-2.961 6.592-6.592 6.592m3.615-4.934c-.197-.099-1.17-.578-1.353-.646-.182-.065-.315-.099-.445.099-.133.197-.513.646-.627.775-.114.133-.232.148-.43.05-.197-.1-.836-.308-1.592-.985-.59-.525-.985-1.175-1.103-1.372-.114-.198-.011-.304.088-.403.087-.088.197-.232.296-.346.1-.114.133-.198.198-.33.065-.134.034-.248-.015-.347-.05-.099-.445-1.076-.612-1.47-.16-.389-.323-.335-.445-.34-.114-.007-.247-.007-.38-.007a.73.73 0 0 0-.529.247c-.182.198-.691.677-.691 1.654s.71 1.916.81 2.049c.098.133 1.394 2.132 3.383 2.992.47.205.84.326 1.129.418.475.152.904.129 1.246.08.38-.058 1.171-.48 1.338-.943.164-.464.164-.86.114-.943-.049-.084-.182-.133-.38-.232"/>
|
|
234
234
|
</svg>`;case e.includes("linkedin"):return`<svg xmlns="http://www.w3.org/2000/svg" class="footer-icon" fill="currentColor" class="bi bi-linkedin" viewBox="0 0 16 16">
|
|
235
235
|
<path d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854zm4.943 12.248V6.169H2.542v7.225zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248S2.4 3.226 2.4 3.934c0 .694.521 1.248 1.327 1.248zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016l.016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225z"/>
|
|
236
|
-
</svg>`;default:return""}}customElements.define("footer-type-1",
|
|
236
|
+
</svg>`;default:return""}}customElements.define("footer-type-1",d),customElements.define("footer-type-2",a),customElements.define("footer-type-3",n)}var w=document.querySelector("#show-more"),b=document.querySelector("#show-more__button");b.addEventListener("click",()=>{b.textContent=b.textContent==="Show More"?"Show Less":"Show More",w.classList.toggle("active")});(async()=>{let r=await fetch("./src/allData/header.json").then(l=>l.json()).then(l=>l);f(r);let d=await fetch("./src/allData/footer.json").then(l=>l.json()).then(l=>l),a=await fetch("./src/allData/socials.json").then(l=>l.json()).then(l=>l),n={...d.footer,socials:a.socials};g(n)})();})();
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "kiui-kit",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.3.0-beta.1",
|
|
4
4
|
"description": "A set of ready-to-use HTML components like headers, footers, cards, etc.",
|
|
5
5
|
"main": "dist/kiui.min.js",
|
|
6
6
|
"style": "dist/kiui.min.css",
|
|
@@ -27,10 +27,12 @@
|
|
|
27
27
|
],
|
|
28
28
|
"dependencies": {
|
|
29
29
|
"@tailwindcss/cli": "^4.1.7",
|
|
30
|
-
"htm": "^3.1.1",
|
|
31
30
|
"tailwindcss": "^4.1.7"
|
|
32
31
|
},
|
|
33
32
|
"devDependencies": {
|
|
34
|
-
"
|
|
33
|
+
"@eslint/js": "^9.36.0",
|
|
34
|
+
"esbuild": "^0.25.5",
|
|
35
|
+
"eslint": "^9.36.0",
|
|
36
|
+
"globals": "^16.4.0"
|
|
35
37
|
}
|
|
36
38
|
}
|
package/dist/data.json
DELETED
|
@@ -1,52 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"data": {
|
|
3
|
-
"menu": {
|
|
4
|
-
"title": ["KIUI"],
|
|
5
|
-
"items": ["Home", "Docs", "contact", "GitHub"],
|
|
6
|
-
"links": [
|
|
7
|
-
"#Home",
|
|
8
|
-
"https://github.com/alirezaabbasi-dev/KIUI?tab=readme-ov-file#-kiui-kit",
|
|
9
|
-
"#contact",
|
|
10
|
-
"https://github.com/alirezaabbasi-dev/KIUI"
|
|
11
|
-
]
|
|
12
|
-
},
|
|
13
|
-
"main": {},
|
|
14
|
-
"footer": {
|
|
15
|
-
"title": "KIUI",
|
|
16
|
-
"description": "KIUI is a modern UI design system to build fast and responsive web interfaces.",
|
|
17
|
-
"footerItems": {
|
|
18
|
-
"item1": {
|
|
19
|
-
"title": "Company",
|
|
20
|
-
"items": ["About", "Contact Us", "Careers", "Blog", "Contact"],
|
|
21
|
-
"links": ["#About", "#Us", "#Careers", "#Blog", "#Contact"]
|
|
22
|
-
},
|
|
23
|
-
"item2": {
|
|
24
|
-
"title": "Support",
|
|
25
|
-
"items": ["Help Center", "Documentation", "API Reference", "Status"],
|
|
26
|
-
"links": ["#Help", "#Documentation", "#API", "#Status"]
|
|
27
|
-
},
|
|
28
|
-
"item3": {
|
|
29
|
-
"title": "Legal",
|
|
30
|
-
"items": [
|
|
31
|
-
"Privacy Policy",
|
|
32
|
-
"Terms of Service",
|
|
33
|
-
"Cookie Policy",
|
|
34
|
-
"Licenses"
|
|
35
|
-
],
|
|
36
|
-
"links": ["#Privacy", "#Terms", "#Cookie", "#Licenses"]
|
|
37
|
-
}
|
|
38
|
-
},
|
|
39
|
-
"socials": {
|
|
40
|
-
"socials_names": [
|
|
41
|
-
"instagram.com/kiyanmusic",
|
|
42
|
-
"x.com/kiyan_abbasi",
|
|
43
|
-
"t.me/KiyanAbbasi_dev",
|
|
44
|
-
"linkedin.com/in/kiyan-abbasi",
|
|
45
|
-
"whatsapp",
|
|
46
|
-
"YouTube",
|
|
47
|
-
"facebook"
|
|
48
|
-
]
|
|
49
|
-
}
|
|
50
|
-
}
|
|
51
|
-
}
|
|
52
|
-
}
|