kiui-kit 1.3.0-beta.1 → 1.4.1-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.
Files changed (9) hide show
  1. package/README.md +199 -125
  2. package/dist/assets/index.css +1 -0
  3. package/dist/{kiui.min.js → assets/index.js} +45 -45
  4. package/dist/index.html +24 -26
  5. package/package.json +19 -14
  6. package/dist/app.js +0 -21
  7. package/dist/components.conf.css +0 -133
  8. package/dist/kiui.min.css +0 -3
  9. package/dist/kiui.typewriter.min.js +0 -1
package/README.md CHANGED
@@ -1,7 +1,8 @@
1
1
  # 🧩 KIUI Kit
2
+
2
3
  ---
3
- <img src="kiui.png">
4
4
 
5
+ <img src="kiui.png">
5
6
 
6
7
  A lightweight, modern Web Component UI Kit – ready to plug into your HTML projects.
7
8
 
@@ -16,18 +17,21 @@ A lightweight, modern Web Component UI Kit – ready to plug into your HTML proj
16
17
  | `kiui.min.js` | Core JavaScript containing Web Components |
17
18
  | `kiui.min.css` | Main CSS for layout and design |
18
19
  | `components.conf.css` | Theme/style config – customize colors easily |
19
- | `data.json` | Dynamic content used by components |
20
+ | `allData/*.json` | Dynamic content used by components |
20
21
  | `index.html` | Live demo file – test components quickly |
21
22
  | `kiui.png` | Default image/logo used in cards/headers |
22
23
  | `kiui.typewriter.min` | Type writer Effect |
23
24
 
24
25
  ---
26
+
25
27
  ## 📦 Installation
26
28
 
27
29
  ```bash
28
30
  npm i kiui-kit
29
31
  ```
32
+
30
33
  ---
34
+
31
35
  ## 🚀 How to Use
32
36
 
33
37
  ### 1. Add Files to Your Project
@@ -40,7 +44,7 @@ You can either clone this repo or copy the following files into your project:
40
44
  ├── kiui.min.js
41
45
  ├── kiui.min.css
42
46
  ├── components.conf.css (optional)
43
- ├── data.json
47
+ ├── /allData/*.json
44
48
  └── your.html
45
49
  ```
46
50
 
@@ -51,167 +55,237 @@ You can either clone this repo or copy the following files into your project:
51
55
  ```html
52
56
  <!DOCTYPE html>
53
57
  <html lang="en" dir="ltr">
58
+ <head>
59
+ <meta charset="UTF-8" />
60
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
61
+ <title>KIUI Demo</title>
62
+ <link rel="shortcut icon" href="./kiui.png" type="image/png" />
63
+ <link rel="stylesheet" href="./src/styles/main.css" />
64
+ <link rel="stylesheet" href="./src/components/components.conf.css" />
65
+ </head>
54
66
 
55
- <head>
56
- <meta charset="UTF-8">
57
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
58
- <title>KIUI Demo</title>
59
- <link rel="shortcut icon" href="./kiui.png" type="image/png">
60
- <link rel="stylesheet" href="./kiui.min.css">
61
- <link rel="stylesheet" href="./components.conf.css">
62
- </head>
67
+ <body>
68
+ <header>
69
+ <!--! To use one of the components below, uncomment only one -->
63
70
 
64
- <body>
65
- <header>
66
- <!--! To use one of the components below, uncomment only one -->
71
+ <header-type-1></header-type-1>
67
72
 
68
- <header-type-1></header-type-1>
69
- <!-- <header-type-2></header-type-2> -->
73
+ <!-- <header-type-2></header-type-2> -->
70
74
 
71
- </header>
75
+ <!--! To use one of the components below, uncomment only one -->
76
+ </header>
72
77
 
73
- <main class="container">
74
- <!-- Type Writer -->
75
- <div>
76
- <h2 id="KIUI-typewriter"></h2>
77
- </div>
78
+ <main class="container">
79
+ <!--? Type Writer -->
78
80
 
79
- <!-- Show More Component -->
80
- <div id="show-more">
81
+ <div>
82
+ <h2 id="KIUI-typewriter"></h2>
83
+ </div>
81
84
 
82
- <div id="show-more__content">
83
- Lorem ipsum dolor sit amet ...
85
+ <!--? Type Writer -->
86
+
87
+ <!--* Show More Component -->
88
+
89
+ <div id="show-more">
90
+ <div id="show-more__content">
91
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. In pariatur
92
+ quasi minus a quaerat vitae laboriosam qui iste, est voluptatum
93
+ nesciunt maxime voluptate. Explicabo saepe exercitationem ratione
94
+ illum autem doloribus quis, alias quas possimus consectetur? Dolorem
95
+ temporibus non enim saepe exercitationem obcaecati, velit
96
+ necessitatibus accusamus voluptatem natus. Natus nemo perferendis
97
+ aspernatur et, similique earum! Adipisci omnis modi consequuntur eos
98
+ sint aspernatur rerum officiis alias commodi aliquid possimus
99
+ laudantium, blanditiis minima magni distinctio. Molestias ipsam enim
100
+ recusandae excepturi dignissimos praesentium placeat minus, deserunt
101
+ </div>
102
+
103
+ <div id="show-more__shadow"></div>
104
+ <button id="show-more__button">Show More</button>
84
105
  </div>
85
106
 
86
- <div id="show-more__shadow">
107
+ <!--* Show More Component -->
108
+
109
+ <div id="cards-wrapper">
110
+ <!--? Boxes -->
111
+ <box-card-1 data-title="just title"></box-card-1>
112
+
113
+ <box-card-1
114
+ data-img="./kiui.png"
115
+ data-title="title2"
116
+ data-price="23"
117
+ ></box-card-1>
118
+
119
+ <box-card-1
120
+ data-img="./kiui.png"
121
+ data-button-title="Buy"
122
+ data-title="title3"
123
+ data-description="description"
124
+ data-price="12"
125
+ ></box-card-1>
126
+
127
+ <box-card-1
128
+ data-img="./kiui.png"
129
+ data-title="title4"
130
+ data-description="description"
131
+ data-button-title="button"
132
+ data-button-link="#itsLink"
133
+ ></box-card-1>
134
+ <!--? Boxes -->
87
135
  </div>
88
- <button id="show-more__button">Show More</button>
89
-
90
- </div>
91
- <!-- Show More Component -->
92
-
93
- <div id="cards-wrapper">
94
- <!-- Boxes -->
95
- <box-card-1 data-title="just title">
96
- </box-card-1>
97
-
98
- <box-card-1 data-img="./kiui.png" data-title="title2" data-price="23">
99
- </box-card-1>
100
-
101
- <box-card-1 data-img="./kiui.png" data-button-title="Buy" data-title="title3" data-description="description"
102
- data-price="12"></box-card-1>
103
-
104
- <box-card-1 data-img="./kiui.png" data-title="title4" data-description="description" data-button-title="button"
105
- data-button-link="#itsLink"></box-card-1>
106
- <!-- Boxes -->
107
- </div>
108
-
109
- </main>
110
-
111
- <footer>
112
- <!--* To use one of the components below, uncomment only one -->
113
-
114
- <footer-type-1></footer-type-1>
115
- <!-- <footer-type-2></footer-type-2> -->
116
- <!-- <footer-type-3></footer-type-3> -->
117
-
118
- </footer>
119
-
120
- <script src="./kiui.min.js"></script>
121
- <!-- Use KIUI Type Writer -->
122
- <script src="./kiui.typewriter.min.js"></script>
123
- <script>
124
- initKIUITypeWriter(
125
- [
126
- "Welcome to KIUI",
127
- "A lightweight",
128
- "and",
129
- "Modern Web Component UI Kit.",
130
- "Let’s build something amazing together . . . ",
131
- ],
132
- 100, // typing/deleting speed
133
- 1000 // pause between type/delete
134
- );
135
- </script>
136
- </body>
136
+ </main>
137
+
138
+ <footer>
139
+ <!--* To use one of the components below, uncomment only one -->
140
+
141
+ <footer-type-1></footer-type-1>
142
+
143
+ <!-- <footer-type-2></footer-type-2> -->
144
+
145
+ <!-- <footer-type-3></footer-type-3> -->
137
146
 
147
+ <!--* To use one of the components below, uncomment only one -->
148
+ </footer>
149
+
150
+ <!--* Scripts -->
151
+ <script type="module" src="./index.js"></script>
152
+
153
+ <!--! Use KIUI Type Writer -->
154
+ <script src="./src/effects/typewriter.js"></script>
155
+ <script>
156
+ initKIUITypeWriter(
157
+ [
158
+ "Welcome to KIUI",
159
+ "A lightweight",
160
+ "and",
161
+ "Modern Web Component UI Kit.",
162
+ "Let’s build something amazing together . . . ",
163
+ ],
164
+ 100, // typing/deleting speed
165
+ 1000 // pause between type/delete
166
+ );
167
+ </script>
168
+
169
+ <!--! Other Scripts ... -->
170
+ <script>
171
+ // ? InitProject
172
+
173
+ (async () => {
174
+ const navMenus = await fetch("./src/allData/header.json")
175
+ .then((res) => res.json())
176
+ .then((data) => data);
177
+
178
+ initHeader(navMenus);
179
+
180
+ const footerData = await fetch("./src/allData/footer.json")
181
+ .then((res) => res.json())
182
+ .then((data) => data);
183
+
184
+ const socials = await fetch("./src/allData/socials.json")
185
+ .then((res) => res.json())
186
+ .then((data) => data);
187
+
188
+ const footer = { ...footerData.footer, socials: socials.socials };
189
+
190
+ initFooter(footer);
191
+ })();
192
+ </script>
193
+ </body>
138
194
  </html>
139
195
  ```
140
196
 
141
197
  ---
142
198
 
143
- ### 3. Customize with `data.json`
199
+ ### 3. Customize with `*.json`
200
+
201
+ Change menu items, links, and footer content by editing **these:**
144
202
 
145
- Change menu items, links, and footer content by editing `data.json`:
203
+ `header.json`:
146
204
 
147
205
  ```json
148
206
  {
149
- "data": {
150
- "menu": {
151
- "title": ["KIUI"],
152
- "items": ["Home", "Docs", "contact", "GitHub"],
153
- "links": [
154
- "#Home",
155
- "https://github.com/alirezaabbasi-dev/KIUI?tab=readme-ov-file#-kiui-kit",
156
- "#contact",
157
- "https://github.com/alirezaabbasi-dev/KIUI"
158
- ]
159
- },
160
- "main": {},
161
- "footer": {
162
- "title": "KIUI",
163
- "description": "KIUI is a modern UI design system to build fast and responsive web interfaces.",
164
- "footerItems": {
165
- "item1": {
166
- "title": "Company",
167
- "items": ["About", "Contact Us", "Careers", "Blog", "Contact"],
168
- "links": ["#About", "#Us", "#Careers", "#Blog", "#Contact"]
169
- },
170
- "item2": {
171
- "title": "Support",
172
- "items": ["Help Center", "Documentation", "API Reference", "Status"],
173
- "links": ["#Help", "#Documentation", "#API", "#Status"]
174
- },
175
- "item3": {
176
- "title": "Legal",
177
- "items": [
178
- "Privacy Policy",
179
- "Terms of Service",
180
- "Cookie Policy",
181
- "Licenses"
182
- ],
183
- "links": ["#Privacy", "#Terms", "#Cookie", "#Licenses"]
184
- }
207
+ "menu": {
208
+ "title": ["KIUI"],
209
+ "items": ["Home", "Docs", "contact", "GitHub"],
210
+ "links": [
211
+ "#Home",
212
+ "https://github.com/alirezaabbasi-dev/KIUI?tab=readme-ov-file#-kiui-kit",
213
+ "#contact",
214
+ "https://github.com/alirezaabbasi-dev/KIUI"
215
+ ]
216
+ }
217
+ }
218
+ ```
219
+
220
+ `footer.json`
221
+
222
+ ```json
223
+ {
224
+ "footer": {
225
+ "title": "KIUI",
226
+ "description": "KIUI is a modern UI design system to build fast and responsive web interfaces.",
227
+ "footerItems": {
228
+ "item1": {
229
+ "title": "Company",
230
+ "items": ["About", "Contact Us", "Careers", "Blog", "Contact"],
231
+ "links": ["#About", "#Us", "#Careers", "#Blog", "#Contact"]
232
+ },
233
+ "item2": {
234
+ "title": "Support",
235
+ "items": ["Help Center", "Documentation", "API Reference", "Status"],
236
+ "links": ["#Help", "#Documentation", "#API", "#Status"]
185
237
  },
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
- ]
238
+ "item3": {
239
+ "title": "Legal",
240
+ "items": [
241
+ "Privacy Policy",
242
+ "Terms of Service",
243
+ "Cookie Policy",
244
+ "Licenses"
245
+ ],
246
+ "links": ["#Privacy", "#Terms", "#Cookie", "#Licenses"]
196
247
  }
197
248
  }
198
249
  }
199
250
  }
251
+ ```
200
252
 
253
+ `socials.json`
201
254
 
255
+ ```json
256
+ {
257
+ "socials": {
258
+ "socials_names": [
259
+ "instagram.com/yourName",
260
+ "x.com/yourName",
261
+ "t.me/yourName",
262
+ "linkedin.com/in/kiyan-abbasi",
263
+ "whatsapp",
264
+ "YouTube",
265
+ "facebook"
266
+ ]
267
+ }
268
+ }
202
269
  ```
203
270
 
204
271
  ---
272
+
205
273
  ## 🛠️ Development
274
+
206
275
  To run the project locally:
207
276
 
208
277
  ```bash
209
278
  git clone https://github.com/alirezaabbasi-dev/KIUI.git
279
+
210
280
  cd KIUI
281
+
211
282
  npm install
212
- npm run dev:css
283
+
284
+ npm run dev
213
285
  ```
286
+
214
287
  ---
288
+
215
289
  ## 🎨 Theming & Styling
216
290
 
217
291
  - To change colors, shadows, transitions, and styles:
package/dist/assets/index.css ADDED
@@ -0,0 +1 @@
1
+ @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-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-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-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-gray-950:oklch(13% .028 261.692);--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: 1.5 ;--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: 1.2 ;--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;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}::-webkit-calendar-picker-indicator{line-height:1}:-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)}.start{inset-inline-start:var(--spacing)}.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-blue-600{background-color:var(--color-blue-600)}.bg-gray-100{background-color:var(--color-gray-100)}.bg-gray-200{background-color:var(--color-gray-200)}.bg-gray-600{background-color:var(--color-gray-600)}.bg-slate-100{background-color:var(--color-slate-100)}.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-black{color:var(--color-black)}.text-gray-100{color:var(--color-gray-100)}.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-800{color:var(--color-gray-800)}.text-gray-900{color:var(--color-gray-900)}.text-gray-950{color:var(--color-gray-950)}.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,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-gray-700:hover{background-color:var(--color-gray-700)}.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-800{background-color:var(--color-gray-800)}.dark\:bg-gray-900{background-color:var(--color-gray-900)}.dark\:bg-slate-800{background-color:var(--color-slate-800)}.dark\:text-gray-100{color:var(--color-gray-100)}.dark\:text-gray-200{color:var(--color-gray-200)}.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-black)}}.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-gray-100);width:100%;padding:calc(var(--spacing) * 6);padding-bottom:calc(var(--spacing) * 12);position:relative}@media(prefers-color-scheme:dark){#show-more{background-color:var(--color-gray-900)}}#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-gray-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-to:#4a556580}@supports (color:color-mix(in lab,red,red)){#show-more__shadow{--tw-gradient-to:color-mix(in oklab, var(--color-gray-600) 50%, 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-leading:calc(var(--spacing) * 6);line-height:calc(var(--spacing) * 6)}@media(prefers-color-scheme:dark){#show-more__shadow{--tw-gradient-position:to bottom}@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:#10182833}@supports (color:color-mix(in lab,red,red)){#show-more__shadow{--tw-gradient-from:color-mix(in oklab, var(--color-gray-900) 20%, 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))}}#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 → assets/index.js} RENAMED
@@ -1,20 +1,20 @@
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
- <nav class="menu-background bg-slate-100 dark:bg-slate-600 shadow-md fixed w-full top-0 left-0 z-50">
1
+ (function(){const r=document.createElement("link").relList;if(r&&r.supports&&r.supports("modulepreload"))return;for(const s of document.querySelectorAll('link[rel="modulepreload"]'))o(s);new MutationObserver(s=>{for(const t of s)if(t.type==="childList")for(const e of t.addedNodes)e.tagName==="LINK"&&e.rel==="modulepreload"&&o(e)}).observe(document,{childList:!0,subtree:!0});function a(s){const t={};return s.integrity&&(t.integrity=s.integrity),s.referrerPolicy&&(t.referrerPolicy=s.referrerPolicy),s.crossOrigin==="use-credentials"?t.credentials="include":s.crossOrigin==="anonymous"?t.credentials="omit":t.credentials="same-origin",t}function o(s){if(s.ep)return;s.ep=!0;const t=a(s);fetch(s.href,t)}})();function y(n){function r(s,t){const e=s.classList.contains("open");s.classList.contains("translate-x-full")?(s.classList.toggle("translate-x-0"),s.classList.toggle("translate-x-full")):s.classList.toggle("hidden");const[i,l]=t.children;e?(i.classList.remove("opacity-0"),i.classList.add("opacity-100"),l.classList.remove("opacity-100"),l.classList.add("opacity-0"),s.classList.remove("open")):(i.classList.remove("opacity-100"),i.classList.add("opacity-0"),l.classList.remove("opacity-0"),l.classList.add("opacity-100"),s.classList.add("open"))}class a extends HTMLElement{async connectedCallback(){const t=await n;if(!t)return;const e=t.menu.items.map(l=>`<li class="menu-item"><a class="transition-colors">${l}</a></li>`).join(""),i=t.menu.items.map(l=>`<li class="menu-mobile-item"><a class="transition-colors">${l}</a></li>`).join("");this.render(t.menu.title,e,i),this.setDesktopLinks(t.menu.links),this.setMobileLinks(t.menu.links),this.setupMobileToggle()}render(t,e,i){this.innerHTML=`
2
+ <nav class="menu-background bg-gray-100 dark:bg-gray-900 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
 
5
5
  <!-- Logo -->
6
6
  <h1 class="menu-main-title text-xl font-bold text-black dark:text-slate-100 transition-colors">
7
- <a href="./index.html">${e}</a>
7
+ <a href="./index.html">${t}</a>
8
8
  </h1>
9
9
 
10
10
  <!-- Hamburger Button (Mobile) -->
11
11
  <div class="md:hidden">
12
12
  <button id="hamburger-btn" class="relative w-6 h-6">
13
- <svg class="absolute inset-0 w-6 h-6 transition-opacity duration-300 opacity-100 hamburger-icon" fill="none" stroke="currentColor" stroke-width="2"
13
+ <svg class="absolute dark:text-gray-100 inset-0 w-6 h-6 transition-opacity duration-300 opacity-100 hamburger-icon" fill="none" stroke="currentColor" stroke-width="2"
14
14
  viewBox="0 0 24 24">
15
15
  <path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16"/>
16
16
  </svg>
17
- <svg class="absolute inset-0 w-6 h-6 transition-opacity duration-300 opacity-0 close-icon" fill="none" stroke="currentColor" stroke-width="2"
17
+ <svg class="absolute text-gray-100 inset-0 w-6 h-6 transition-opacity duration-300 opacity-0 close-icon" fill="none" stroke="currentColor" stroke-width="2"
18
18
  viewBox="0 0 24 24">
19
19
  <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
20
20
  </svg>
@@ -23,19 +23,19 @@
23
23
 
24
24
  <!-- Desktop Menu -->
25
25
  <ul class="menuItemsWrapper hidden md:flex gap-6 text-slate-700 dark:text-slate-100 font-medium *:transition-all">
26
- ${i}
26
+ ${e}
27
27
  </ul>
28
28
  </div>
29
29
 
30
30
  <!-- Mobile Menu -->
31
- <div id="mobile-menu" class="md:hidden hidden fixed top-16 right-0 w-2/3 h-full bg-white shadow-lg px-6 py-4 flex-col gap-4 m-auto text-center">
32
- <ul class="flex flex-col gap-4 text-gray-800 font-semibold">
33
- ${t}
31
+ <div id="mobile-menu" class="md:hidden hidden fixed top-16 right-0 w-2/3 h-full bg-gray-200 text-gray-800 dark:bg-gray-800 dark:text-gray-100 shadow-lg px-6 py-4 flex-col gap-4 m-auto text-center">
32
+ <ul class="flex flex-col gap-4 font-semibold">
33
+ ${i}
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",()=>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
- <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">
37
+ `}setDesktopLinks(t){this.querySelectorAll(".menu-item a").forEach((i,l)=>{i.setAttribute("href",t[l]||"#")})}setMobileLinks(t){this.querySelectorAll(".menu-mobile-item a").forEach((i,l)=>{i.setAttribute("href",t[l]||"#")})}setupMobileToggle(){const t=this.querySelector("#hamburger-btn"),e=this.querySelector("#mobile-menu"),i=t;t&&e&&i&&(i.children[0].classList.add("opacity-100"),i.children[1].classList.add("opacity-0"),t.addEventListener("click",()=>r(e,i)))}}class o extends HTMLElement{async connectedCallback(){const t=await n;if(!t)return;const e=t.menu.items.map(l=>`<li class="menu-item"><a class="transition-colors">${l}</a></li>`).join(""),i=t.menu.items.map(l=>`<li class="menu-mobile-item"><a class="transition-colors">${l}</a></li>`).join("");this.render(t.menu.title,e,i),this.setLinks(t.menu.links),this.setMobileLinks(t.menu.links),this.setupMobileToggle()}render(t,e,i){this.innerHTML=`
38
+ <nav class="menu-background bg-gray-200 text-slate-800 dark:bg-gray-900 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
 
41
41
  <!-- Left: Hamburger + Logo -->
@@ -50,18 +50,18 @@
50
50
  <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
51
51
  </svg>
52
52
  </button>
53
- <a href="./index.html" class="menu-main-title transition-colors text-xl font-bold">${e}</a>
53
+ <a href="./index.html" class="menu-main-title transition-colors text-xl font-bold">${t}</a>
54
54
  </div>
55
55
 
56
56
  <!-- Center Menu (Desktop) -->
57
57
  <ul class="menuItemsWrapper hidden md:flex gap-8 text-sm font-medium">
58
- ${i}
58
+ ${e}
59
59
  </ul>
60
60
 
61
61
  <!-- Right Icons -->
62
62
  <div class="hidden md:flex items-center gap-4">
63
63
  <button title="Search">
64
- <svg class="w-5 h-5 text-white hover:text-indigo-400 transition" fill="none" stroke="currentColor" stroke-width="2"
64
+ <svg class="w-5 h-5 text-black dark:text-white hover:text-indigo-400 transition" fill="none" stroke="currentColor" stroke-width="2"
65
65
  viewBox="0 0 24 24">
66
66
  <circle cx="11" cy="11" r="8" />
67
67
  <line x1="21" y1="21" x2="16.65" y2="16.65" />
@@ -73,28 +73,28 @@
73
73
  <!-- Sidebar Menu (Mobile) -->
74
74
  <div id="mobile-menu" class="fixed top-0 right-0 w-64 h-full bg-slate-100 text-slate-800 dark:bg-slate-800 dark:text-slate-100 shadow-lg px-6 py-8 transform translate-x-full transition-transform duration-300 ease-in md:hidden z-50">
75
75
  <ul class="flex flex-col gap-6 font-semibold text-base">
76
- ${t}
76
+ ${i}
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",()=>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=`
80
+ `}setLinks(t){this.querySelectorAll(".menu-item a").forEach((i,l)=>{i.setAttribute("href",t[l]||"#")})}setMobileLinks(t){this.querySelectorAll(".menu-mobile-item a").forEach((i,l)=>{i.setAttribute("href",t[l]||"#")})}setupMobileToggle(){const t=this.querySelector("#hamburger-btn"),e=this.querySelector("#mobile-menu"),i=t;t&&e&&i&&(i.children[0].classList.add("opacity-100"),i.children[1].classList.add("opacity-0"),t.addEventListener("click",()=>r(e,i)))}}customElements.define("header-type-1",a),customElements.define("header-type-2",o)}class w extends HTMLElement{async connectedCallback(){const{img:r,title:a,description:o,price:s,buttonTitle:t,buttonLink:e}=this.dataset;this.render(r,a,o,s,t,e)}render(r,a,o,s,t,e){this.innerHTML=`
81
81
  <!-- Product Card -->
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="${d||"./kiui.png"}" alt="${a||"default alt"}" />
82
+ <div class="card w-full bg-gray-200 dark:bg-gray-800 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="${r||"./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
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>`:""}
87
+ ${o?`<p class="card-description text-sm text-gray-600 dark:text-gray-400">${o}</p>`:""}
88
88
 
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>`:""}
89
+ ${s||e?`<div class="flex items-center justify-between mt-4">
90
+ ${s?`<span class="card-price text-lg font-bold text-gray-600 dark:text-indigo-400">$${s}</span>`:"<div></div>"}
91
+ ${t?`<a href="${e}" target="_blank" rel="noopener noreferrer" class="card-btn px-4 py-2 bg-gray-600 text-white rounded-xl hover:bg-gray-700 cursor-pointer transition">${t}</a>`:""}
92
92
  </div>`:""}
93
93
  </div>
94
94
  </div>
95
95
  <!-- Product Card -->
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
- <div class="footer bg-gray-100 dark:bg-gray-900 text-gray-700 dark:text-gray-300 pt-10">
96
+ `}}customElements.define("box-card-1",w);function k(n){class r extends HTMLElement{async connectedCallback(){const e=await n;e&&(this.logoRender=s.bind(this),this.render(e))}render(e){const i=e.socials.socials_names?e.socials.socials_names.map(l=>{if(this.logoRender(l))return`<a href="https://${l}" target="_blank">${this.logoRender(l)}</a>`}).join(""):"";this.innerHTML=`
97
+ <div class="footer bg-gray-100 dark:bg-gray-900 text-gray-800 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 -->
100
100
  <div class="grid grid-cols-1 md:grid-cols-4 gap-8 pb-10 border-b border-gray-300 dark:border-gray-700">
@@ -108,21 +108,21 @@
108
108
  <div>
109
109
  <h3 class="text-lg font-semibold mb-4 footer-item-title">${e.footerItems.item1.title}</h3>
110
110
  <ul class="space-y-2 text-sm">
111
- ${e.footerItems.item1.items.map((t,s)=>`<li><a href="${e.footerItems.item1.links[s]}" class="footer-item hover:underline">${t}</a></li>`).join("")}
111
+ ${e.footerItems.item1.items.map((l,c)=>`<li><a href="${e.footerItems.item1.links[c]}" class="footer-item hover:underline">${l}</a></li>`).join("")}
112
112
  </ul>
113
113
  </div>
114
114
 
115
115
  <div>
116
116
  <h3 class="text-lg font-semibold mb-4 footer-item-title">${e.footerItems.item2.title}</h3>
117
117
  <ul class="space-y-2 text-sm">
118
- ${e.footerItems.item2.items.map((t,s)=>`<li><a href="${e.footerItems.item2.links[s]}" class="footer-item hover:underline">${t}</a></li>`).join("")}
118
+ ${e.footerItems.item2.items.map((l,c)=>`<li><a href="${e.footerItems.item2.links[c]}" class="footer-item hover:underline">${l}</a></li>`).join("")}
119
119
  </ul>
120
120
  </div>
121
121
 
122
122
  <div>
123
123
  <h3 class="text-lg font-semibold mb-4 footer-item-title">${e.footerItems.item3.title}</h3>
124
124
  <ul class="space-y-2 text-sm">
125
- ${e.footerItems.item3.items.map((t,s)=>`<li><a href="${e.footerItems.item3.links[s]}" class="footer-item hover:underline">${t}</a></li>`).join("")}
125
+ ${e.footerItems.item3.items.map((l,c)=>`<li><a href="${e.footerItems.item3.links[c]}" class="footer-item hover:underline">${l}</a></li>`).join("")}
126
126
  </ul>
127
127
  </div>
128
128
  </div>
@@ -136,11 +136,11 @@
136
136
  </div>
137
137
  </div>
138
138
  </div>
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
- <div class="footer bg-gray-900 text-gray-200 py-12">
139
+ `}}class a extends HTMLElement{async connectedCallback(){const e=await n;e&&(this.logoRender=s.bind(this),this.render(e))}render(e){const i=e.socials.socials_names?e.socials.socials_names.map(l=>{if(this.logoRender(l))return`<a href="https://${l}" target="_blank">${this.logoRender(l)}</a>`}).join(""):"";this.innerHTML=`
140
+ <div class="footer bg-gray-100 text-gray-900 dark:bg-gray-900 dark: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">
143
- <h2 class="footer-title text-3xl font-extrabold text-white">${e.title}</h2>
143
+ <h2 class="footer-title text-3xl font-extrabold dark:text-white text-gray-950">${e.title}</h2>
144
144
  <p class="footer-description mt-2 text-sm text-gray-400">${e.description}</p>
145
145
  </div>
146
146
 
@@ -149,7 +149,7 @@
149
149
  <input
150
150
  type="email"
151
151
  placeholder="Enter your email"
152
- class="input-email w-full sm:w-80 px-4 py-2 rounded-md text-slate-300 outline-1 focus:outline-blue-600"
152
+ class="input-email w-full sm:w-80 px-4 py-2 rounded-md text-gray-800 dark:text-gray-300 outline-1 focus:outline-blue-600"
153
153
  />
154
154
  <button
155
155
  class="footer-btn-subscribe bg-blue-600 hover:bg-blue-700 text-white font-semibold px-6 py-2 rounded-md transition duration-200"
@@ -160,11 +160,11 @@
160
160
 
161
161
  <!-- Links -->
162
162
  <div class="grid grid-cols-1 md:grid-cols-3 gap-10 text-center md:text-left border-t border-gray-700 pt-10">
163
- ${Object.values(e.footerItems).map(t=>`
163
+ ${Object.values(e.footerItems).map(l=>`
164
164
  <div>
165
- <h3 class="text-lg font-semibold mb-4 footer-item-title">${t.title}</h3>
165
+ <h3 class="text-lg font-semibold mb-4 footer-item-title">${l.title}</h3>
166
166
  <ul class="space-y-2 text-sm">
167
- ${t.items.map((s,m)=>`<li class="footer-item"><a href="${t.links[m]}" class="hover:underline">${s}</a></li>`).join("")}
167
+ ${l.items.map((c,m)=>`<li class="footer-item"><a href="${l.links[m]}" class="hover:underline">${c}</a></li>`).join("")}
168
168
  </ul>
169
169
  </div>
170
170
  `).join("")}
@@ -179,8 +179,8 @@
179
179
  </div>
180
180
  </div>
181
181
  </div>
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
- <footer class="footer bg-[#0b1d26] text-white py-16 text-sm">
182
+ `}}class o extends HTMLElement{async connectedCallback(){const e=await n;e&&(this.logoRender=s.bind(this),this.render(e))}render({title:e,description:i,footerItems:l,socials:c}){const{item1:m,item2:h,item3:g}=l,v=c.socials_names?c.socials_names.map(d=>{if(this.logoRender(d))return`<a href="https://${d}" target="_blank">${this.logoRender(d)}</a>`}).join(""):"";this.innerHTML=`
183
+ <footer class="footer bg-gray-100 text-gray-900 dark:bg-gray-900 dark:text-gray-100 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
 
186
186
  <div class="flex-2/4 flex flex-col justify-between space-y-6">
@@ -192,34 +192,34 @@
192
192
  </div>
193
193
  </div>
194
194
 
195
- <p class="text-gray-400 copyright">Copyright ${new Date().getFullYear()} ${e}, Inc. Terms & Privacy</p>
195
+ <p class="text-gray-600 dark:text-gray-400 copyright">Copyright ${new Date().getFullYear()} ${e}, Inc. Terms & Privacy</p>
196
196
 
197
197
  </div>
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 ${m.title}</h3>
201
+ <h3 class="footer-item-title text-lg footer-title text-gray-400 font-bold">More on The ${m.title}</h3>
202
202
  <ul class="space-y-3 mt-4">
203
- ${m.items.map((c,u)=>`<li class="footer-item hover:underline"><a href=${m.links[u]}>${c}</a></li>`).join("")}
203
+ ${m.items.map((d,u)=>`<li class="footer-item hover:underline"><a href=${m.links[u]}>${d}</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 ${h.title}</h3>
208
+ <h3 class="footer-item-title text-lg footer-title text-gray-400 font-bold">More on The ${h.title}</h3>
209
209
  <ul class="space-y-3 mt-4">
210
- ${h.items.map((c,u)=>`<li class="footer-item hover:underline"><a href=${h.links[u]}>${c}</a></li>`).join("")}
210
+ ${h.items.map((d,u)=>`<li class="footer-item hover:underline"><a href=${h.links[u]}>${d}</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 ${p.title}</h3>
214
+ <h3 class="footer-item-title text-lg footer-title text-gray-400 font-bold">More on The ${g.title}</h3>
215
215
  <ul class="space-y-3 mt-4">
216
- ${p.items.map((c,u)=>`<li class="footer-item w-fit"><a class="hover:underline" href=${p.links[u]}>${c}</a></li>`).join("")}
216
+ ${g.items.map((d,u)=>`<li class="footer-item w-fit"><a class="hover:underline" href=${g.links[u]}>${d}</a></li>`).join("")}
217
217
  </ul>
218
218
  </div>
219
219
  </div>
220
220
  </div>
221
221
  </footer>
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">
222
+ `}}function s(t){let e=t.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",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)})();})();
236
+ </svg>`;default:return""}}customElements.define("footer-type-1",r),customElements.define("footer-type-2",a),customElements.define("footer-type-3",o)}const L=document.querySelector("#show-more"),p=document.querySelector("#show-more__button");p.addEventListener("click",()=>{p.textContent=p.textContent==="Show More"?"Show Less":"Show More",L.classList.toggle("active")});const $=document,f=$.querySelector("#KIUI-typewriter");let x=null,b=null;function M(n=[],r=100,a=1e3){let o=0,s=0;function t(){const i=n[o];x=setInterval(()=>{f.textContent+=i[s],s++,s>=i.length&&(clearInterval(x),setTimeout(()=>e(),a))},r)}function e(){const i=n[o];b=setInterval(()=>{s--,f.textContent=i.slice(0,s),s<=0&&(clearInterval(b),o=(o+1)%n.length,setTimeout(()=>t(),a))},r)}t()}window.initKIUITypeWriter=M;window.initHeader=y;window.initFooter=k;initKIUITypeWriter(["Welcome to KIUI","A lightweight","and","Modern Web Component UI Kit.","Let’s build something amazing together . . . "],100,1e3);
package/dist/index.html CHANGED
@@ -1,12 +1,12 @@
1
- <!DOCTYPE html>
1
+ <!doctype html>
2
2
  <html lang="en" dir="ltr">
3
3
  <head>
4
4
  <meta charset="UTF-8" />
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
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" />
7
+ <link rel="shortcut icon" href="/kiui.png" type="image/png" />
8
+ <script type="module" crossorigin src="/assets/index.js"></script>
9
+ <link rel="stylesheet" crossorigin href="/assets/index.css">
10
10
  </head>
11
11
 
12
12
  <body>
@@ -15,7 +15,7 @@
15
15
 
16
16
  <header-type-1></header-type-1>
17
17
 
18
- <!-- <header-type-2></header-type-2> -->
18
+ <header-type-2></header-type-2>
19
19
 
20
20
  <!--! To use one of the components below, uncomment only one -->
21
21
  </header>
@@ -56,13 +56,13 @@
56
56
  <box-card-1 data-title="just title"></box-card-1>
57
57
 
58
58
  <box-card-1
59
- data-img="./kiui.png"
59
+ data-img="/kiui.png"
60
60
  data-title="title2"
61
61
  data-price="23"
62
62
  ></box-card-1>
63
63
 
64
64
  <box-card-1
65
- data-img="./kiui.png"
65
+ data-img="/kiui.png"
66
66
  data-button-title="Buy"
67
67
  data-title="title3"
68
68
  data-description="description"
@@ -70,7 +70,7 @@
70
70
  ></box-card-1>
71
71
 
72
72
  <box-card-1
73
- data-img="./kiui.png"
73
+ data-img="/kiui.png"
74
74
  data-title="title4"
75
75
  data-description="description"
76
76
  data-button-title="button"
@@ -93,25 +93,23 @@
93
93
  </footer>
94
94
 
95
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>
96
+ <!--! Other Scripts ... -->
100
97
  <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>
98
+ // ? InitProject
99
+ (async () => {
100
+ const navMenusDataRes = await fetch("/allData/header.json");
101
+ const navMenusData = await navMenusDataRes.json();
102
+ initHeader(navMenusData);
113
103
 
114
- <!--! Other Scripts ... -->
115
- <script src="./app.js"></script>
104
+ const footerDataRes = await fetch("/allData/footer.json");
105
+ const footerData = await footerDataRes.json();
106
+
107
+ const socialsDataRes = await fetch("/allData/socials.json");
108
+ const socialsData = await socialsDataRes.json();
109
+
110
+ const footer = { ...footerData.footer, socials: socialsData.socials };
111
+ initFooter(footer);
112
+ })();
113
+ </script>
116
114
  </body>
117
115
  </html>
package/package.json CHANGED
@@ -1,18 +1,17 @@
1
1
  {
2
2
  "name": "kiui-kit",
3
- "version": "1.3.0-beta.1",
3
+ "version": "1.4.1-beta.1",
4
4
  "description": "A set of ready-to-use HTML components like headers, footers, cards, etc.",
5
- "main": "dist/kiui.min.js",
5
+ "main": "dist/assets/index.js",
6
6
  "style": "dist/kiui.min.css",
7
+ "type": "module",
7
8
  "files": [
8
9
  "dist/"
9
10
  ],
10
11
  "scripts": {
11
- "dev:css": "npx @tailwindcss/cli -i ./src/styles/input.css -o ./src/styles/main.css --watch",
12
- "build:css": "npx @tailwindcss/cli -i ./src/styles/input.css -o ./dist/kiui.min.css --minify",
13
- "build:js": "esbuild ./index.js --bundle --minify --outfile=dist/kiui.min.js",
14
- "build": "npm run build:js && npm run build:css",
15
- "build:typewriter": "esbuild ./src/effects/typewriter.js --bundle --minify --outfile=dist/kiui.typewriter.min.js"
12
+ "dev": "vite",
13
+ "build:vite": "vite build",
14
+ "preview": "vite preview"
16
15
  },
17
16
  "author": "Kiyan-abbasi",
18
17
  "license": "Apache-2.0",
@@ -26,13 +25,19 @@
26
25
  "webcomponents"
27
26
  ],
28
27
  "dependencies": {
29
- "@tailwindcss/cli": "^4.1.7",
30
- "tailwindcss": "^4.1.7"
28
+ "@tailwindcss/vite": "^4.1.18",
29
+ "tailwindcss": "^4.1.18"
31
30
  },
32
31
  "devDependencies": {
33
- "@eslint/js": "^9.36.0",
34
- "esbuild": "^0.25.5",
35
- "eslint": "^9.36.0",
36
- "globals": "^16.4.0"
37
- }
32
+ "vite": "^7.3.1",
33
+ "@eslint/js": "^10.0.1"
34
+ },
35
+ "repository": {
36
+ "type": "git",
37
+ "url": "git+https://github.com/alirezaabbasi-dev/KIUI.git"
38
+ },
39
+ "bugs": {
40
+ "url": "https://github.com/alirezaabbasi-dev/KIUI/issues"
41
+ },
42
+ "homepage": "https://github.com/alirezaabbasi-dev/KIUI#readme"
38
43
  }
package/dist/app.js DELETED
@@ -1,21 +0,0 @@
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/components.conf.css DELETED
@@ -1,133 +0,0 @@
1
- /* ============================================================================
2
- 🎨 Global Styles
3
- - Sets base font and background color for the entire website.
4
- - You can modify body background or font-family globally here.
5
- ============================================================================
6
- body {
7
- font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
8
- Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
9
- }
10
- ============================================================================
11
- 🧭 Header Section (Currently Commented Out)
12
- - To enable and customize header styles, remove the comment block below.
13
- - Customize navigation background, title colors, hover effects, mobile menu, etc.
14
- ============================================================================
15
-
16
- .menu-background => background color of the top navigation bar
17
- .menu-main-title => main title in header, color and hover behavior
18
- .menu-item => individual menu items with text-transform and hover styles
19
- #mobile-menu => mobile dropdown background
20
- #hamburger-btn => color of hamburger toggle icon
21
-
22
-
23
- ============================================================================
24
- 🧩 Main Section - Card Components
25
- - These styles define the appearance of cards (e.g. product cards, blog cards).
26
- - Customize background, title, text, price section, and button appearance.
27
- ============================================================================
28
- .card => sets card background color
29
- .card-title => defines color of the card title
30
- .card-description => paragraph or short text under title
31
- .card-price => background color of the price label
32
- .card-btn => styling of call-to-action button (e.g. "Buy Now")
33
-
34
- ============================================================================
35
- 🦶 Footer Section
36
- - Controls styles for footer background, titles, descriptions, and email input.
37
- - Adjust footer subscribe button and social icons section.
38
- ============================================================================
39
- .footer => overall footer background and text color
40
- .footer-title => main headings inside footer
41
- .footer-description => descriptive text
42
- .input-email => background color of email input field
43
- .footer-btn-subscribe => styling for subscribe button
44
- .footer-bottom-social => color of social media icons/text in footer bottom */
45
-
46
- /* Styles code */
47
- /* ============================== Header ============================== */
48
- body {
49
- background-color: #e0e0e0;
50
- }
51
- /* .menu-background {
52
- background: #4e2094;
53
- }
54
- .menu-main-title {
55
- color: rgb(255, 95, 215);
56
- }
57
- .menu-main-title:hover {
58
- color: rgb(213, 221, 228);
59
- }
60
- .menu-item {
61
- color: rgb(192, 160, 255);
62
- text-transform: capitalize;
63
- }
64
- .menu-item:hover {
65
- color: rgb(213, 221, 228);
66
- }
67
- #mobile-menu {
68
- background: #e1e2e1;
69
- }
70
- #hamburger-btn {
71
- color: rgb(135, 145, 222);
72
- } */
73
- /* ============================== Main ============================== */
74
- /* .card{
75
- background: #2b0131;
76
- }
77
- .card-title{
78
- color: rgb(152, 77, 219);
79
- }
80
- .card-description{
81
- color: rgb(155, 155, 155);
82
- }
83
- .card-price{
84
- color: rgb(105, 224, 105);
85
- }
86
- .card-btn{
87
- background: rgb(81, 30, 165);
88
- color: rgb(255, 160, 215);
89
- }
90
- .card-btn:hover{
91
- background: rgb(80, 10, 193);
92
- color: rgb(241, 192, 221);
93
- } */
94
-
95
- /* ============================== Footer ============================== */
96
- /* .footer {
97
- background: #180238;
98
- color: #cecece;
99
- }
100
- .footer-title {
101
- color: #713ac4;
102
- }
103
- .footer-description {
104
- color: rgb(147, 133, 205);
105
- }
106
- .footer-item-title {
107
- color: rgb(186, 158, 224);
108
- }
109
- .footer-item {
110
- color: rgb(210, 210, 210);
111
- }
112
- .input-email {
113
- background: #471295;
114
- }
115
- .footer-btn-subscribe {
116
- background: #711cef;
117
- }
118
- .copyright {
119
- color: rgb(199, 199, 199);
120
- }
121
- .footer-bottom-social {
122
- color: rgb(215, 146, 240);
123
- } */
124
-
125
- /* Type Writer */
126
- #KIUI-typewriter {
127
- color: rgb(68, 68, 68);
128
- margin: 4rem;
129
- margin-inline: auto;
130
- font-size: 2rem;
131
- text-align: center;
132
- height: 4rem;
133
- }
package/dist/kiui.min.css DELETED
@@ -1,3 +0,0 @@
1
- /*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
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-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.typewriter.min.js DELETED
@@ -1 +0,0 @@
1
- "use strict";(()=>{var T=document,o=T.querySelector("#KIUI-typewriter"),I=null,u=null;function a(r=[],l=100,i=1e3){let t=0,e=0;function c(){let n=r[t];I=setInterval(()=>{o.textContent+=n[e],e++,e>=n.length&&(clearInterval(I),setTimeout(()=>s(),i))},l)}function s(){let n=r[t];u=setInterval(()=>{e--,o.textContent=n.slice(0,e),e<=0&&(clearInterval(u),t=(t+1)%r.length,setTimeout(()=>c(),i))},l)}c()}window.initKIUITypeWriter=a;})();