kiui-kit 1.1.2 → 1.2.0-beta.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components.conf.css +1 -0
- package/dist/data.json +12 -2
- package/dist/index.html +98 -1
- package/dist/kiui.min.css +2 -1
- package/dist/kiui.min.js +59 -50
- package/package.json +1 -1
package/dist/components.conf.css
CHANGED
package/dist/data.json
CHANGED
|
@@ -10,8 +10,7 @@
|
|
|
10
10
|
"https://github.com/alirezaabbasi-dev/KIUI"
|
|
11
11
|
]
|
|
12
12
|
},
|
|
13
|
-
"main":{
|
|
14
|
-
},
|
|
13
|
+
"main": {},
|
|
15
14
|
"footer": {
|
|
16
15
|
"title": "KIUI",
|
|
17
16
|
"description": "KIUI is a modern UI design system to build fast and responsive web interfaces.",
|
|
@@ -36,6 +35,17 @@
|
|
|
36
35
|
],
|
|
37
36
|
"links": ["#Privacy", "#Terms", "#Cookie", "#Licenses"]
|
|
38
37
|
}
|
|
38
|
+
},
|
|
39
|
+
"socials": {
|
|
40
|
+
"socials_names": [
|
|
41
|
+
"instagram.com/kiyanmusic",
|
|
42
|
+
"x.com/kiyan_abbasi",
|
|
43
|
+
"t.me/KiyanAbbasi_dev",
|
|
44
|
+
"linkedin.com/in/kiyan-abbasi",
|
|
45
|
+
"whatsapp",
|
|
46
|
+
"YouTube",
|
|
47
|
+
"facebook"
|
|
48
|
+
]
|
|
39
49
|
}
|
|
40
50
|
}
|
|
41
51
|
}
|
package/dist/index.html
CHANGED
|
@@ -13,33 +13,130 @@
|
|
|
13
13
|
<body>
|
|
14
14
|
<header>
|
|
15
15
|
<!--! To use one of the components below, uncomment only one -->
|
|
16
|
+
|
|
16
17
|
<header-type-1></header-type-1>
|
|
17
18
|
<!-- <header-type-2></header-type-2> -->
|
|
19
|
+
|
|
18
20
|
</header>
|
|
21
|
+
|
|
19
22
|
<main class="container">
|
|
20
23
|
<!-- Type Writer -->
|
|
21
|
-
<div
|
|
24
|
+
<div>
|
|
22
25
|
<h2 id="KIUI-typewriter"></h2>
|
|
23
26
|
</div>
|
|
27
|
+
|
|
28
|
+
<!-- Show More Component -->
|
|
29
|
+
<div id="show-more">
|
|
30
|
+
|
|
31
|
+
<div id="show-more__content">
|
|
32
|
+
Lorem ipsum dolor sit amet consectetur adipisicing elit. In pariatur quasi minus a quaerat vitae laboriosam
|
|
33
|
+
qui iste, est voluptatum nesciunt maxime voluptate. Explicabo saepe exercitationem ratione illum autem
|
|
34
|
+
doloribus quis, alias quas possimus consectetur? Dolorem temporibus non enim saepe exercitationem obcaecati,
|
|
35
|
+
velit necessitatibus accusamus voluptatem natus. Natus nemo perferendis aspernatur et, similique earum!
|
|
36
|
+
Adipisci omnis modi consequuntur eos sint aspernatur rerum officiis alias commodi aliquid possimus laudantium,
|
|
37
|
+
blanditiis minima magni distinctio. Molestias ipsam enim recusandae excepturi dignissimos praesentium placeat
|
|
38
|
+
minus, deserunt molestiae magni id vero, hic vitae exercitationem quaerat. Doloribus, quia! Laborum iusto
|
|
39
|
+
natus aliquam, veniam nostrum numquam maxime reiciendis saepe fuga aspernatur explicabo et atque assumenda,
|
|
40
|
+
laboriosam commodi repudiandae soluta ea nam dolorum quo. Ducimus voluptas quae deserunt, eveniet possimus
|
|
41
|
+
excepturi minima cumque tempora? Possimus nihil optio placeat quod eius quam dolorum, porro minima, dicta
|
|
42
|
+
ducimus, tenetur aut asperiores tempora nemo quasi. Illum soluta nulla voluptatibus corrupti ut eius, ratione
|
|
43
|
+
officia consectetur distinctio quod, explicabo at, voluptas totam dolorem vitae quidem iusto aspernatur eum
|
|
44
|
+
quia odit corporis doloremque? Iure, velit facilis repellat minima assumenda eum delectus neque, repudiandae
|
|
45
|
+
dolor molestias nam officia? Provident accusamus quasi optio id libero fugit quisquam, ut, corporis odio
|
|
46
|
+
obcaecati blanditiis placeat laborum facilis dolores. Commodi sunt accusamus magnam voluptates voluptatum in
|
|
47
|
+
amet sed, maxime alias ullam iure doloribus ex ipsum mollitia! Impedit nesciunt culpa quae! Magnam, corrupti!
|
|
48
|
+
Nesciunt cumque facilis nobis deleniti quasi quidem excepturi iusto eligendi aspernatur reprehenderit nam,
|
|
49
|
+
odio odit, quos hic facere vitae possimus. Voluptatibus, reiciendis itaque repellendus delectus magnam quia
|
|
50
|
+
obcaecati explicabo ipsam ipsa iure aliquam? Maiores dignissimos quaerat fuga ut sed, doloremque inventore
|
|
51
|
+
eveniet provident similique sunt ea numquam impedit odit architecto earum iure, repellendus ducimus. Corporis
|
|
52
|
+
minima, eaque repellat nemo deleniti nulla necessitatibus ab. Neque, aut et, quidem, voluptas quos rem
|
|
53
|
+
incidunt tempore provident numquam reprehenderit ducimus illo ratione nisi facilis. Ratione sunt consequatur
|
|
54
|
+
iusto totam labore. Repudiandae velit vel sit adipisci perspiciatis rem quae dignissimos, mollitia debitis
|
|
55
|
+
vitae, est molestias enim ipsam aliquam, quaerat sint facilis fuga ad voluptates amet. Sed eaque illum hic
|
|
56
|
+
exercitationem recusandae perspiciatis repudiandae autem fugiat veritatis nobis dolorum totam quam suscipit
|
|
57
|
+
amet natus rem modi illo quos dolor dolorem est fuga, mollitia similique? Modi quo beatae sunt iure nihil
|
|
58
|
+
dolorem. Laboriosam, provident pariatur aperiam obcaecati recusandae quas, magni accusantium nostrum illum
|
|
59
|
+
nulla saepe ab voluptate! Hic ut modi molestiae cum, unde rem eveniet architecto sit sint laudantium aliquid
|
|
60
|
+
cumque voluptatum similique facilis repellendus adipisci consequatur commodi consequuntur delectus maiores
|
|
61
|
+
animi. Sequi quam id pariatur aliquid assumenda beatae atque quis reiciendis enim unde molestias nisi
|
|
62
|
+
perferendis, deleniti odit? Vitae laudantium explicabo dignissimos, neque voluptates quisquam animi architecto
|
|
63
|
+
magni enim illo earum expedita repellat sunt ipsam reprehenderit cupiditate rem nemo ipsum delectus,
|
|
64
|
+
consectetur totam culpa atque eos! Vitae, eligendi provident excepturi optio consequatur incidunt esse quam
|
|
65
|
+
laudantium molestias debitis voluptate deleniti sint minima alias qui ea totam neque mollitia facere ab
|
|
66
|
+
maiores. Dignissimos quas laudantium aspernatur maxime molestias. Fuga optio nemo alias porro dignissimos quis
|
|
67
|
+
autem vel similique tempore, temporibus molestias vero, quod mollitia hic repellat a voluptate exercitationem
|
|
68
|
+
placeat. Sit aut, natus sint sunt ab fuga magni earum totam dignissimos doloribus aspernatur voluptas culpa
|
|
69
|
+
officiis sequi dolorem quas autem quidem ratione in et. Aspernatur delectus molestias rem maiores tenetur
|
|
70
|
+
reiciendis tempora corrupti nam veritatis, ullam sapiente eaque beatae neque repudiandae, esse porro deleniti
|
|
71
|
+
perspiciatis, quisquam saepe cum expedita odio a ut! Beatae porro eveniet accusantium quia eaque. Aspernatur
|
|
72
|
+
recusandae suscipit totam sapiente blanditiis necessitatibus perferendis tempore, beatae impedit provident
|
|
73
|
+
explicabo labore accusantium minus neque id modi quaerat, placeat iste sequi ut! Incidunt suscipit cupiditate
|
|
74
|
+
consequatur, autem hic eaque neque mollitia excepturi cumque, animi modi repellat? Harum id dolor, numquam
|
|
75
|
+
libero facere, aperiam cumque eligendi illo exercitationem quasi magnam illum officiis quidem culpa,
|
|
76
|
+
voluptatibus possimus. Consectetur voluptatibus deserunt non magnam rerum iusto error enim fuga necessitatibus
|
|
77
|
+
asperiores ex sed illo maxime quas incidunt veniam corporis rem ut nulla, voluptatum maiores quos dignissimos!
|
|
78
|
+
Tempore illo minima officiis iusto eius sunt obcaecati, hic quas deleniti maiores totam ab unde facilis
|
|
79
|
+
voluptate dolore omnis alias laboriosam placeat vitae, quasi neque ipsa voluptatum dicta? Mollitia, natus,
|
|
80
|
+
iste vero nihil dignissimos ex recusandae vel doloribus in cumque voluptatem, commodi repudiandae suscipit?
|
|
81
|
+
Repellat consequuntur odio tenetur harum quae ipsam quibusdam impedit iusto! Praesentium voluptates illum
|
|
82
|
+
molestiae, assumenda ipsa vitae dolores excepturi sapiente ea quo rerum, et, facilis blanditiis sint omnis
|
|
83
|
+
dolorem quis suscipit ex rem eaque eveniet? Inventore, voluptatum error. Deleniti adipisci ducimus similique a
|
|
84
|
+
molestias. Assumenda soluta, eaque, doloremque fugit excepturi debitis quaerat error nemo nam natus mollitia
|
|
85
|
+
repellendus neque sit harum placeat! Ullam, unde quod porro consequuntur ut sequi dignissimos voluptas
|
|
86
|
+
eligendi alias facilis sed rem laboriosam rerum voluptatum eveniet, ipsa eos labore sapiente inventore? Nihil
|
|
87
|
+
iusto corrupti temporibus, ullam, iure deserunt tempore quam illo, corporis asperiores est dolorum qui.
|
|
88
|
+
Doloribus sint dolore provident, animi officia hic, deserunt placeat aliquid, architecto doloremque quidem?
|
|
89
|
+
Beatae rerum ullam quod quam optio illum atque magni perspiciatis quis! Asperiores accusantium facilis id
|
|
90
|
+
alias, quis numquam quos dolorum doloribus voluptas cupiditate? Natus corporis dolore eos inventore quod,
|
|
91
|
+
dolor minima itaque accusamus? Blanditiis sapiente at corrupti repellendus dolorem temporibus quas officia
|
|
92
|
+
quod eligendi, suscipit laborum distinctio aliquam beatae dolores rem reprehenderit, iusto molestiae deleniti.
|
|
93
|
+
Quia culpa, fugit inventore perferendis numquam quisquam! Quo voluptates sequi ab nesciunt, illo libero
|
|
94
|
+
tempora, quidem nobis eius praesentium quis nostrum recusandae, esse cumque. Voluptatibus, voluptas repellat
|
|
95
|
+
ab quis delectus distinctio doloribus est velit ut. Accusamus necessitatibus minus omnis, perferendis culpa
|
|
96
|
+
libero deleniti voluptas magnam nesciunt velit nobis nam eius, ipsum ducimus voluptates minima ad nulla qui,
|
|
97
|
+
quo suscipit saepe doloribus enim temporibus. Dolore blanditiis ut tempora provident ad quos harum ex quo!
|
|
98
|
+
Vitae repellendus, porro impedit delectus distinctio molestias, accusamus pariatur quibusdam quod ad id
|
|
99
|
+
libero! Explicabo autem optio nam soluta quasi. Nisi qui natus modi, corrupti quidem eligendi porro dolore
|
|
100
|
+
saepe asperiores cum. Iure repellendus quo impedit odit excepturi rerum, voluptas quam! Fugiat dolore corrupti
|
|
101
|
+
eum saepe excepturi, quibusdam eius omnis quis quo sunt quos commodi, dolorem ipsum quaerat inventore eaque
|
|
102
|
+
aspernatur, consectetur vitae soluta molestias maiores?
|
|
103
|
+
|
|
104
|
+
</div>
|
|
105
|
+
|
|
106
|
+
<div id="show-more__shadow">
|
|
107
|
+
</div>
|
|
108
|
+
<button id="show-more__button">Show More</button>
|
|
109
|
+
|
|
110
|
+
</div>
|
|
111
|
+
<!-- Show More Component -->
|
|
112
|
+
|
|
24
113
|
<div id="cards-wrapper">
|
|
25
114
|
<!-- Boxes -->
|
|
26
115
|
<box-card-1 data-title="just title">
|
|
27
116
|
</box-card-1>
|
|
117
|
+
|
|
28
118
|
<box-card-1 data-img="./kiui.png" data-title="title2" data-price="23">
|
|
29
119
|
</box-card-1>
|
|
120
|
+
|
|
30
121
|
<box-card-1 data-img="./kiui.png" data-button-title="Buy" data-title="title3" data-description="description"
|
|
31
122
|
data-price="12"></box-card-1>
|
|
123
|
+
|
|
32
124
|
<box-card-1 data-img="./kiui.png" data-title="title4" data-description="description" data-button-title="button"
|
|
33
125
|
data-button-link="#itsLink"></box-card-1>
|
|
34
126
|
<!-- Boxes -->
|
|
35
127
|
</div>
|
|
128
|
+
|
|
36
129
|
</main>
|
|
130
|
+
|
|
37
131
|
<footer>
|
|
38
132
|
<!--* To use one of the components below, uncomment only one -->
|
|
133
|
+
|
|
39
134
|
<footer-type-1></footer-type-1>
|
|
40
135
|
<!-- <footer-type-2></footer-type-2> -->
|
|
41
136
|
<!-- <footer-type-3></footer-type-3> -->
|
|
137
|
+
|
|
42
138
|
</footer>
|
|
139
|
+
|
|
43
140
|
<script src="./kiui.min.js"></script>
|
|
44
141
|
<!-- Use KIUI Type Writer -->
|
|
45
142
|
<script src="./kiui.typewriter.min.js"></script>
|
package/dist/kiui.min.css
CHANGED
|
@@ -1,2 +1,3 @@
|
|
|
1
1
|
/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
|
|
2
|
-
@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-space-x-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}}}@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-400:oklch(70.7% .165 254.624);--color-blue-500:oklch(62.3% .214 259.815);--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-pink-500:oklch(65.6% .241 354.308);--color-slate-300:oklch(86.9% .022 252.894);--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-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-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-87{width:calc(var(--spacing)*87)}.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)))}:where(.space-x-4>:not(:last-child)){--tw-space-x-reverse:0;margin-inline-start:calc(calc(var(--spacing)*4)*var(--tw-space-x-reverse));margin-inline-end:calc(calc(var(--spacing)*4)*calc(1 - var(--tw-space-x-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-600{background-color:var(--color-slate-600)}.bg-slate-900{background-color:var(--color-slate-900)}.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-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-blue-400:hover{color:var(--color-blue-400)}.hover\:text-blue-500:hover{color:var(--color-blue-500)}.hover\:text-gray-400:hover{color:var(--color-gray-400)}.hover\:text-gray-500:hover{color:var(--color-gray-500)}.hover\:text-indigo-400:hover{color:var(--color-indigo-400)}.hover\:text-pink-500:hover{color:var(--color-pink-500)}.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\: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\: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-white{color:var(--color-white)}}.container{margin-inline:auto;margin-block:calc(var(--spacing)*24);padding:calc(var(--spacing)*2)}}.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{color:var(--color-slate-700)}#KIUI-typewriter:after{content:"|";background:inherit;animation:1.5s linear infinite typeWriterFlicker;display:inline-block}@keyframes typeWriterFlicker{0%{opacity:1;transform:scaleY(1)}50%{opacity:.1;transform:scaleY(.8)}to{opacity:1;transform:scaleY(1)}}@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-space-x-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}
|
|
2
|
+
/*! Show More */
|
|
3
|
+
@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-space-y-reverse:0;--tw-border-style:solid;--tw-font-weight:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-duration:initial;--tw-ease:initial;--tw-gradient-position:initial;--tw-gradient-from:#0000;--tw-gradient-via:#0000;--tw-gradient-to:#0000;--tw-gradient-stops:initial;--tw-gradient-via-stops:initial;--tw-gradient-from-position:0%;--tw-gradient-via-position:50%;--tw-gradient-to-position:100%;--tw-leading:initial}}}@layer theme{:root,:host{--font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--color-amber-200:oklch(92.4% .12 95.746);--color-blue-600:oklch(54.6% .245 262.881);--color-blue-700:oklch(48.8% .243 264.376);--color-indigo-400:oklch(67.3% .182 276.935);--color-slate-100:oklch(96.8% .007 247.896);--color-slate-200:oklch(92.9% .013 255.508);--color-slate-300:oklch(86.9% .022 252.894);--color-slate-500:oklch(55.4% .046 257.417);--color-slate-600:oklch(44.6% .043 257.281);--color-slate-700:oklch(37.2% .044 257.287);--color-slate-800:oklch(27.9% .041 260.031);--color-slate-900:oklch(20.8% .042 265.755);--color-slate-950:oklch(12.9% .042 264.695);--color-gray-100:oklch(96.7% .003 264.542);--color-gray-200:oklch(92.8% .006 264.531);--color-gray-300:oklch(87.2% .01 258.338);--color-gray-400:oklch(70.7% .022 261.325);--color-gray-500:oklch(55.1% .027 264.364);--color-gray-600:oklch(44.6% .03 256.802);--color-gray-700:oklch(37.3% .034 259.733);--color-gray-800:oklch(27.8% .033 256.848);--color-gray-900:oklch(21% .034 264.665);--color-black:#000;--color-white:#fff;--spacing:.25rem;--container-6xl:72rem;--container-7xl:80rem;--text-sm:.875rem;--text-sm--line-height:calc(1.25/.875);--text-base:1rem;--text-base--line-height:calc(1.5/1);--text-lg:1.125rem;--text-lg--line-height:calc(1.75/1.125);--text-xl:1.25rem;--text-xl--line-height:calc(1.75/1.25);--text-2xl:1.5rem;--text-2xl--line-height:calc(2/1.5);--text-3xl:1.875rem;--text-3xl--line-height:calc(2.25/1.875);--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--font-weight-extrabold:800;--radius-md:.375rem;--radius-xl:.75rem;--radius-2xl:1rem;--ease-in:cubic-bezier(.4,0,1,1);--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4,0,.2,1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.inset-0{inset:calc(var(--spacing)*0)}.top-0{top:calc(var(--spacing)*0)}.top-16{top:calc(var(--spacing)*16)}.right-0{right:calc(var(--spacing)*0)}.left-0{left:calc(var(--spacing)*0)}.z-50{z-index:50}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:96rem){.container{max-width:96rem}}.m-auto{margin:auto}.mx-auto{margin-inline:auto}.mt-2{margin-top:calc(var(--spacing)*2)}.mt-4{margin-top:calc(var(--spacing)*4)}.mt-5{margin-top:calc(var(--spacing)*5)}.mt-12{margin-top:calc(var(--spacing)*12)}.mb-4{margin-bottom:calc(var(--spacing)*4)}.mb-10{margin-bottom:calc(var(--spacing)*10)}.contents{display:contents}.flex{display:flex}.grid{display:grid}.hidden{display:none}.h-5{height:calc(var(--spacing)*5)}.h-6{height:calc(var(--spacing)*6)}.h-16{height:calc(var(--spacing)*16)}.h-42{height:calc(var(--spacing)*42)}.h-60{height:calc(var(--spacing)*60)}.h-full{height:100%}.w-2\/3{width:66.6667%}.w-5{width:calc(var(--spacing)*5)}.w-6{width:calc(var(--spacing)*6)}.w-64{width:calc(var(--spacing)*64)}.w-full{width:100%}.max-w-6xl{max-width:var(--container-6xl)}.max-w-7xl{max-width:var(--container-7xl)}.flex-1\/4{flex:25%}.flex-2\/4{flex:50%}.translate-x-0{--tw-translate-x:calc(var(--spacing)*0);translate:var(--tw-translate-x)var(--tw-translate-y)}.translate-x-full{--tw-translate-x:100%;translate:var(--tw-translate-x)var(--tw-translate-y)}.transform{transform:var(--tw-rotate-x,)var(--tw-rotate-y,)var(--tw-rotate-z,)var(--tw-skew-x,)var(--tw-skew-y,)}.cursor-pointer{cursor:pointer}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.gap-4{gap:calc(var(--spacing)*4)}.gap-6{gap:calc(var(--spacing)*6)}.gap-8{gap:calc(var(--spacing)*8)}.gap-10{gap:calc(var(--spacing)*10)}:where(.space-y-2>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*2)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*2)*calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-3>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*3)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*3)*calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-4>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*4)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*4)*calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-6>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*6)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*6)*calc(1 - var(--tw-space-y-reverse)))}.overflow-hidden{overflow:hidden}.rounded-2xl{border-radius:var(--radius-2xl)}.rounded-md{border-radius:var(--radius-md)}.rounded-xl{border-radius:var(--radius-xl)}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-gray-300{border-color:var(--color-gray-300)}.border-gray-700{border-color:var(--color-gray-700)}.bg-\[\#0b1d26\]{background-color:#0b1d26}.bg-blue-600{background-color:var(--color-blue-600)}.bg-gray-100{background-color:var(--color-gray-100)}.bg-gray-900{background-color:var(--color-gray-900)}.bg-slate-100{background-color:var(--color-slate-100)}.bg-slate-600{background-color:var(--color-slate-600)}.bg-white{background-color:var(--color-white)}.object-cover{object-fit:cover}.p-5{padding:calc(var(--spacing)*5)}.px-4{padding-inline:calc(var(--spacing)*4)}.px-6{padding-inline:calc(var(--spacing)*6)}.py-2{padding-block:calc(var(--spacing)*2)}.py-4{padding-block:calc(var(--spacing)*4)}.py-6{padding-block:calc(var(--spacing)*6)}.py-8{padding-block:calc(var(--spacing)*8)}.py-12{padding-block:calc(var(--spacing)*12)}.py-16{padding-block:calc(var(--spacing)*16)}.pt-6{padding-top:calc(var(--spacing)*6)}.pt-10{padding-top:calc(var(--spacing)*10)}.pb-10{padding-bottom:calc(var(--spacing)*10)}.text-center{text-align:center}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.text-3xl{font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-extrabold{--tw-font-weight:var(--font-weight-extrabold);font-weight:var(--font-weight-extrabold)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.text-amber-200{color:var(--color-amber-200)}.text-black{color:var(--color-black)}.text-gray-200{color:var(--color-gray-200)}.text-gray-400{color:var(--color-gray-400)}.text-gray-500{color:var(--color-gray-500)}.text-gray-600{color:var(--color-gray-600)}.text-gray-700{color:var(--color-gray-700)}.text-gray-800{color:var(--color-gray-800)}.text-slate-300{color:var(--color-slate-300)}.text-slate-600{color:var(--color-slate-600)}.text-slate-700{color:var(--color-slate-700)}.text-slate-800{color:var(--color-slate-800)}.text-white{color:var(--color-white)}.opacity-0{opacity:0}.opacity-100{opacity:1}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a),0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-md{--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a),0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.outline-1{outline-style:var(--tw-outline-style);outline-width:1px}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,visibility,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-200{--tw-duration:.2s;transition-duration:.2s}.duration-300{--tw-duration:.3s;transition-duration:.3s}.ease-in{--tw-ease:var(--ease-in);transition-timing-function:var(--ease-in)}:is(.\*\:transition-all>*){transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}@media (hover:hover){.hover\:-translate-y-2:hover{--tw-translate-y:calc(var(--spacing)*-2);translate:var(--tw-translate-x)var(--tw-translate-y)}.hover\:bg-blue-700:hover{background-color:var(--color-blue-700)}.hover\:bg-slate-800:hover{background-color:var(--color-slate-800)}.hover\:text-indigo-400:hover{color:var(--color-indigo-400)}.hover\:underline:hover{text-decoration-line:underline}.hover\:shadow-xl:hover{--tw-shadow:0 20px 25px -5px var(--tw-shadow-color,#0000001a),0 8px 10px -6px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}}.focus\:outline-blue-600:focus{outline-color:var(--color-blue-600)}@media (min-width:40rem){.sm\:w-80{width:calc(var(--spacing)*80)}.sm\:flex-row{flex-direction:row}.sm\:px-6{padding-inline:calc(var(--spacing)*6)}.sm\:text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}}@media (min-width:48rem){.md\:ml-auto{margin-left:auto}.md\:flex{display:flex}.md\:hidden{display:none}.md\:w-1\/2{width:50%}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.md\:flex-row{flex-direction:row}.md\:text-left{text-align:left}}@media (min-width:64rem){.lg\:flex-row{flex-direction:row}:where(.lg\:space-y-0>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*0)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*0)*calc(1 - var(--tw-space-y-reverse)))}.lg\:px-8{padding-inline:calc(var(--spacing)*8)}}@media (prefers-color-scheme:dark){.dark\:border-gray-700{border-color:var(--color-gray-700)}.dark\:bg-gray-900{background-color:var(--color-gray-900)}.dark\:bg-slate-600{background-color:var(--color-slate-600)}.dark\:bg-slate-700{background-color:var(--color-slate-700)}.dark\:bg-slate-800{background-color:var(--color-slate-800)}.dark\:text-gray-300{color:var(--color-gray-300)}.dark\:text-gray-400{color:var(--color-gray-400)}.dark\:text-indigo-400{color:var(--color-indigo-400)}.dark\:text-slate-100{color:var(--color-slate-100)}.dark\:text-white{color:var(--color-white)}}.container{margin-inline:auto;margin-block:calc(var(--spacing)*24);padding:calc(var(--spacing)*2)}}@media (prefers-color-scheme:dark){body{background-color:var(--color-slate-800)}}body{background-color:#d6d6d6}@media (prefers-color-scheme:dark){body{background-color:var(--color-slate-800)}}.menu-btn{cursor:pointer;margin:.7rem .2rem}.menu-btn,.menu-btn:after,.menu-btn:before{content:"";background:#000;border-radius:1rem;width:2rem;height:.15rem;position:relative}.menu-btn:after{position:absolute;bottom:.5rem}.menu-btn:before{position:absolute;top:.5rem}#cards-wrapper{gap:calc(var(--spacing)*4);grid-template-columns:repeat(2,minmax(0,1fr));display:grid}@media (min-width:40rem){#cards-wrapper{gap:calc(var(--spacing)*6);grid-template-columns:repeat(2,minmax(0,1fr))}}@media (min-width:48rem){#cards-wrapper{gap:calc(var(--spacing)*3.5)}}@media (min-width:64rem){#cards-wrapper{grid-template-columns:repeat(3,minmax(0,1fr))}}.menu-btn--show{left:50%}#KIUI-typewriter{margin:calc(var(--spacing)*4);height:calc(var(--spacing)*4);text-align:center;font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height));color:var(--color-slate-700);margin-inline:auto}@media (prefers-color-scheme:dark){#KIUI-typewriter{color:var(--color-slate-200)}}#KIUI-typewriter:after{content:"|";background:inherit;animation:1.5s linear infinite typeWriterFlicker;display:inline-block}.footer-icon{width:calc(var(--spacing)*5)}#show-more{margin-block:calc(var(--spacing)*50);border-radius:var(--radius-xl);background-color:var(--color-slate-600);width:100%;padding:calc(var(--spacing)*6);padding-bottom:calc(var(--spacing)*12);position:relative}#show-more__content{height:calc(var(--spacing)*49);text-align:justify;width:100%;color:var(--color-slate-900);overflow:hidden}@media (prefers-color-scheme:dark){#show-more__content{color:var(--color-slate-100)}}#show-more__shadow{right:calc(var(--spacing)*0);bottom:calc(var(--spacing)*0);left:calc(var(--spacing)*0);height:calc(var(--spacing)*30);border-bottom-right-radius:var(--radius-xl);border-bottom-left-radius:var(--radius-xl);--tw-gradient-position:to bottom;width:100%;display:block;position:absolute}@supports (background-image:linear-gradient(in lab, red, red)){#show-more__shadow{--tw-gradient-position:to bottom in oklab}}#show-more__shadow{background-image:linear-gradient(var(--tw-gradient-stops));--tw-gradient-from:#3141584d}@supports (color:color-mix(in lab, red, red)){#show-more__shadow{--tw-gradient-from:color-mix(in oklab,var(--color-slate-700)30%,transparent)}}#show-more__shadow{--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position));--tw-gradient-to:var(--color-slate-950);--tw-leading:calc(var(--spacing)*6);line-height:calc(var(--spacing)*6)}#show-more__button{right:calc(var(--spacing)*0);bottom:calc(var(--spacing)*-5);left:calc(var(--spacing)*0);max-width:calc(var(--spacing)*30);cursor:pointer;border-radius:var(--radius-2xl);background-color:#62748ecc;margin-inline:auto;position:absolute}@supports (color:color-mix(in lab, red, red)){#show-more__button{background-color:color-mix(in oklab,var(--color-slate-500)80%,transparent)}}#show-more__button{padding:calc(var(--spacing)*3);color:var(--color-slate-100);transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}@media (prefers-color-scheme:dark){#show-more__button{background-color:var(--color-slate-100);color:var(--color-slate-900)}}@media (hover:hover){@media (prefers-color-scheme:dark){#show-more__button:hover{background-color:var(--color-slate-300)}}}#show-more.active #show-more__content{overflow:auto;height:100%!important}#show-more.active #show-more__shadow{display:none}#show-more.active #show-more__button{bottom:calc(var(--spacing)*-5);background-color:#fffc}@supports (color:color-mix(in lab, red, red)){#show-more.active #show-more__button{background-color:color-mix(in oklab,var(--color-white)80%,transparent)}}#show-more.active #show-more__button{color:var(--color-slate-900)}@media (prefers-color-scheme:dark){#show-more.active #show-more__button{border-color:var(--color-slate-100);color:var(--color-slate-800)}}@keyframes typeWriterFlicker{0%{opacity:1;transform:scaleY(1)}50%{opacity:.1;transform:scaleY(.8)}to{opacity:1;transform:scaleY(1)}}.social-media a svg{width:calc(var(--spacing)*8);height:calc(var(--spacing)*8);--tw-duration:.2s;transition-duration:.2s}@media screen and (max-width:480px){#cards-wrapper{grid-template-columns:repeat(1,minmax(0,1fr))}}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}@property --tw-gradient-position{syntax:"*";inherits:false}@property --tw-gradient-from{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-via{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-to{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-stops{syntax:"*";inherits:false}@property --tw-gradient-via-stops{syntax:"*";inherits:false}@property --tw-gradient-from-position{syntax:"<length-percentage>";inherits:false;initial-value:0%}@property --tw-gradient-via-position{syntax:"<length-percentage>";inherits:false;initial-value:50%}@property --tw-gradient-to-position{syntax:"<length-percentage>";inherits:false;initial-value:100%}@property --tw-leading{syntax:"*";inherits:false}
|
package/dist/kiui.min.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
(()=>{async function
|
|
2
|
-
<nav class="menu-background bg-
|
|
1
|
+
(()=>{async function w(o){try{let a=await fetch(o);if(!a.ok)throw new Error("Failed to fetch data");return(await a.json()).data}catch(a){return console.error("Error loading Data:",a),null}}function x(o){let a=document;function r(l,e){let i=l.classList.contains("open");l.classList.contains("translate-x-full")?(l.classList.toggle("translate-x-0"),l.classList.toggle("translate-x-full")):l.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"),l.classList.remove("open")):(t.classList.remove("opacity-100"),t.classList.add("opacity-0"),s.classList.remove("opacity-0"),s.classList.add("opacity-100"),l.classList.add("open"))}class d extends HTMLElement{async connectedCallback(){let e=await o;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">
|
|
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
|
-
<h1 class="menu-main-title text-xl font-bold text-black transition-colors">
|
|
6
|
+
<h1 class="menu-main-title text-xl font-bold text-black dark:text-slate-100 transition-colors">
|
|
7
7
|
<a href="./index.html">${e}</a>
|
|
8
8
|
</h1>
|
|
9
9
|
|
|
@@ -22,8 +22,8 @@
|
|
|
22
22
|
</div>
|
|
23
23
|
|
|
24
24
|
<!-- Desktop Menu -->
|
|
25
|
-
<ul class="menuItemsWrapper hidden md:flex gap-6 text-
|
|
26
|
-
${
|
|
25
|
+
<ul class="menuItemsWrapper hidden md:flex gap-6 text-slate-700 dark:text-slate-100 font-medium *:transition-all">
|
|
26
|
+
${i}
|
|
27
27
|
</ul>
|
|
28
28
|
</div>
|
|
29
29
|
|
|
@@ -34,8 +34,8 @@
|
|
|
34
34
|
</ul>
|
|
35
35
|
</div>
|
|
36
36
|
</nav>
|
|
37
|
-
`}setDesktopLinks(e){this.querySelectorAll(".menu-item a").forEach((t,
|
|
38
|
-
<nav class="menu-background bg-slate-
|
|
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",()=>r(i,t)))}}class n extends HTMLElement{async connectedCallback(){let e=await o;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">
|
|
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 -->
|
|
@@ -55,7 +55,7 @@
|
|
|
55
55
|
|
|
56
56
|
<!-- Center Menu (Desktop) -->
|
|
57
57
|
<ul class="menuItemsWrapper hidden md:flex gap-8 text-sm font-medium">
|
|
58
|
-
${
|
|
58
|
+
${i}
|
|
59
59
|
</ul>
|
|
60
60
|
|
|
61
61
|
<!-- Right Icons -->
|
|
@@ -71,29 +71,29 @@
|
|
|
71
71
|
</div>
|
|
72
72
|
|
|
73
73
|
<!-- Sidebar Menu (Mobile) -->
|
|
74
|
-
<div id="mobile-menu" class="fixed top-0 right-0 w-64 h-full bg-
|
|
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
76
|
${t}
|
|
77
77
|
</ul>
|
|
78
78
|
</div>
|
|
79
79
|
</nav>
|
|
80
|
-
`}setLinks(e){this.querySelectorAll(".menu-item a").forEach((t,
|
|
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",()=>r(i,t)))}}customElements.define("header-type-1",d),customElements.define("header-type-2",n)}var g=class extends HTMLElement{async connectedCallback(){let{img:a,title:r,description:d,price:n,buttonTitle:l,buttonLink:e}=this.dataset;this.render(a,r,d,n,l,e)}render(a,r,d,n,l,e){this.innerHTML=`
|
|
81
81
|
<!-- Product Card -->
|
|
82
82
|
<div class="card w-full bg-white dark:bg-gray-900 rounded-2xl overflow-hidden shadow-md hover:shadow-xl hover:-translate-y-2 transition duration-300">
|
|
83
|
-
<img class="w-full h-60 object-cover" src="${
|
|
83
|
+
<img class="w-full h-60 object-cover" src="${a||"./kiui.png"}" alt="${r||"default alt"}" />
|
|
84
84
|
|
|
85
85
|
<div class="h-42 p-5 flex flex-col justify-between space-y-3">
|
|
86
|
-
${
|
|
87
|
-
${
|
|
86
|
+
${r?`<h2 class="card-title text-lg sm:text-xl font-semibold text-gray-800 dark:text-white">${r}</h2>`:""}
|
|
87
|
+
${d?`<p class="card-description text-sm text-gray-600 dark:text-gray-400">${d}</p>`:""}
|
|
88
88
|
|
|
89
|
-
${
|
|
90
|
-
${
|
|
91
|
-
${
|
|
89
|
+
${n||e?`<div class="flex items-center justify-between mt-4">
|
|
90
|
+
${n?`<span class="card-price text-lg font-bold text-slate-600 dark:text-indigo-400">$${n}</span>`:"<div></div>"}
|
|
91
|
+
${l?`<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">${l}</a>`:""}
|
|
92
92
|
</div>`:""}
|
|
93
93
|
</div>
|
|
94
94
|
</div>
|
|
95
95
|
<!-- Product Card -->
|
|
96
|
-
`}};customElements.define("box-card-1",
|
|
96
|
+
`}};customElements.define("box-card-1",g);function b(o){class a extends HTMLElement{async connectedCallback(){let e=await o;e&&(this.logoRender=n.bind(this),this.render(e.footer))}render(e){let i=e.socials.socials_names?e.socials.socials_names.map(t=>{if(this.logoRender(t))return`<a href="https://${t}" target="_blank">${this.logoRender(t)}</a>`}).join(""):"";this.innerHTML=`
|
|
97
97
|
<div class="footer bg-gray-100 dark:bg-gray-900 text-gray-700 dark:text-gray-300 pt-10">
|
|
98
98
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
99
99
|
<!-- Top -->
|
|
@@ -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((s
|
|
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("")}
|
|
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((s
|
|
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("")}
|
|
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.
|
|
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("")}
|
|
126
126
|
</ul>
|
|
127
127
|
</div>
|
|
128
128
|
</div>
|
|
@@ -130,24 +130,13 @@
|
|
|
130
130
|
<!-- Bottom -->
|
|
131
131
|
<div class="flex flex-col md:flex-row justify-between items-center py-6 gap-4">
|
|
132
132
|
<p class="text-sm copyright">© ${new Date().getFullYear()} ${e.title}. All rights reserved.</p>
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
</a>
|
|
137
|
-
<a href="#" class="hover:text-blue-400">
|
|
138
|
-
Twitter
|
|
139
|
-
</a>
|
|
140
|
-
<a href="#" class="hover:text-pink-500">
|
|
141
|
-
Instagram
|
|
142
|
-
</a>
|
|
143
|
-
<a href="#" class="hover:text-gray-500">
|
|
144
|
-
others
|
|
145
|
-
</a>
|
|
146
|
-
</div>
|
|
133
|
+
<div class="flex gap-4">
|
|
134
|
+
${i}
|
|
135
|
+
</div>
|
|
147
136
|
</div>
|
|
148
137
|
</div>
|
|
149
138
|
</div>
|
|
150
|
-
`}}
|
|
139
|
+
`}}class r extends HTMLElement{async connectedCallback(){let e=await o;e&&(this.logoRender=n.bind(this),this.render(e.footer))}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=`
|
|
151
140
|
<div class="footer bg-gray-900 text-gray-200 py-12">
|
|
152
141
|
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
153
142
|
<div class="text-center mb-10">
|
|
@@ -171,11 +160,11 @@
|
|
|
171
160
|
|
|
172
161
|
<!-- Links -->
|
|
173
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">
|
|
174
|
-
${Object.values(e.footerItems).map(
|
|
163
|
+
${Object.values(e.footerItems).map(t=>`
|
|
175
164
|
<div>
|
|
176
|
-
<h3 class="text-lg font-semibold mb-4 footer-item-title">${
|
|
165
|
+
<h3 class="text-lg font-semibold mb-4 footer-item-title">${t.title}</h3>
|
|
177
166
|
<ul class="space-y-2 text-sm">
|
|
178
|
-
${
|
|
167
|
+
${t.items.map((s,u)=>`<li class="footer-item"><a href="${t.links[u]}" class="hover:underline">${s}</a></li>`).join("")}
|
|
179
168
|
</ul>
|
|
180
169
|
</div>
|
|
181
170
|
`).join("")}
|
|
@@ -185,43 +174,63 @@
|
|
|
185
174
|
<div class="footer-bottom-social mt-12 flex flex-col md:flex-row justify-between items-center text-sm text-gray-500 border-t border-gray-700 pt-6 gap-4">
|
|
186
175
|
<p class="copyright">© ${new Date().getFullYear()} ${e.title}. All rights reserved.</p>
|
|
187
176
|
<div class="flex gap-4">
|
|
188
|
-
|
|
189
|
-
<a href="#" class="hover:text-blue-400">Twitter</a>
|
|
190
|
-
<a href="#" class="hover:text-pink-500">Instagram</a>
|
|
191
|
-
<a href="#" class="hover:text-gray-400">Others</a>
|
|
177
|
+
${i}
|
|
192
178
|
</div>
|
|
193
179
|
</div>
|
|
194
180
|
</div>
|
|
195
181
|
</div>
|
|
196
|
-
`}}
|
|
182
|
+
`}}class d extends HTMLElement{async connectedCallback(){let e=await o;e&&(this.logoRender=n.bind(this),this.render(e.footer))}render({title:e,description:i,footerItems:t,socials:s}){let{item1:u,item2:p,item3:f}=t,y=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=`
|
|
197
183
|
<footer class="footer bg-[#0b1d26] text-white py-16 text-sm">
|
|
198
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">
|
|
199
185
|
|
|
200
186
|
<div class="flex-2/4 flex flex-col justify-between space-y-6">
|
|
201
187
|
<div class="space-y-4">
|
|
202
188
|
<h2 class="text-2xl footer-title">${e}</h2>
|
|
203
|
-
<p class="w-full md:w-1/2 footer-description">${
|
|
189
|
+
<p class="w-full md:w-1/2 footer-description">${i}</p>
|
|
190
|
+
<div class="flex mt-5 md:ml-auto gap-4">
|
|
191
|
+
${y}
|
|
192
|
+
</div>
|
|
204
193
|
</div>
|
|
205
194
|
|
|
206
195
|
<p class="text-gray-400 copyright">Copyright ${new Date().getFullYear()} ${e}, Inc. Terms & Privacy</p>
|
|
196
|
+
|
|
207
197
|
</div>
|
|
208
198
|
|
|
209
199
|
<div class="flex-1/4 flex justify-between flex-col sm:flex-row gap-4">
|
|
210
200
|
<div>
|
|
211
|
-
<h3 class="footer-item-title text-lg footer-title text-amber-200 font-bold">More on The ${
|
|
201
|
+
<h3 class="footer-item-title text-lg footer-title text-amber-200 font-bold">More on The ${u.title}</h3>
|
|
212
202
|
<ul class="space-y-3 mt-4">
|
|
213
|
-
${
|
|
203
|
+
${u.items.map((c,h)=>`<li class="footer-item hover:underline"><a href=${u.links[h]}>${c}</a></li>`).join("")}
|
|
214
204
|
</ul>
|
|
215
205
|
</div>
|
|
216
206
|
|
|
217
207
|
<div>
|
|
218
|
-
<h3 class="footer-item-title text-lg footer-title text-amber-200 font-bold">More on The ${
|
|
208
|
+
<h3 class="footer-item-title text-lg footer-title text-amber-200 font-bold">More on The ${p.title}</h3>
|
|
219
209
|
<ul class="space-y-3 mt-4">
|
|
220
|
-
${
|
|
210
|
+
${p.items.map((c,h)=>`<li class="footer-item hover:underline"><a href=${p.links[h]}>${c}</a></li>`).join("")}
|
|
211
|
+
</ul>
|
|
212
|
+
</div>
|
|
213
|
+
<div>
|
|
214
|
+
<h3 class="footer-item-title text-lg footer-title text-amber-200 font-bold">More on The ${f.title}</h3>
|
|
215
|
+
<ul class="space-y-3 mt-4">
|
|
216
|
+
${f.items.map((c,h)=>`<li class="footer-item hover:underline"><a href=${f.links[h]}>${c}</a></li>`).join("")}
|
|
221
217
|
</ul>
|
|
222
218
|
</div>
|
|
223
|
-
|
|
224
219
|
</div>
|
|
225
220
|
</div>
|
|
226
221
|
</footer>
|
|
227
|
-
`}}
|
|
222
|
+
`}}function n(l){let e=l.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
|
+
<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
|
+
</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
|
+
<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"/>
|
|
226
|
+
</svg>`;case e.includes("x.com"):return`<svg xmlns="http://www.w3.org/2000/svg" class="footer-icon" fill="currentColor" class="bi bi-twitter-x" viewBox="0 0 16 16">
|
|
227
|
+
<path d="M12.6.75h2.454l-5.36 6.142L16 15.25h-4.937l-3.867-5.07-4.425 5.07H.316l5.733-6.57L0 .75h5.063l3.495 4.633L12.601.75Zm-.86 13.028h1.36L4.323 2.145H2.865z"/>
|
|
228
|
+
</svg>`;case e.includes("t.me"):return`<svg xmlns="http://www.w3.org/2000/svg" class="footer-icon" fill="currentColor" class="bi bi-telegram" viewBox="0 0 16 16">
|
|
229
|
+
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M8.287 5.906q-1.168.486-4.666 2.01-.567.225-.595.442c-.03.243.275.339.69.47l.175.055c.408.133.958.288 1.243.294q.39.01.868-.32 3.269-2.206 3.374-2.23c.05-.012.12-.026.166.016s.042.12.037.141c-.03.129-1.227 1.241-1.846 1.817-.193.18-.33.307-.358.336a8 8 0 0 1-.188.186c-.38.366-.664.64.015 1.088.327.216.589.393.85.571.284.194.568.387.936.629q.14.092.27.187c.331.236.63.448.997.414.214-.02.435-.22.547-.82.265-1.417.786-4.486.906-5.751a1.4 1.4 0 0 0-.013-.315.34.34 0 0 0-.114-.217.53.53 0 0 0-.31-.093c-.3.005-.763.166-2.984 1.09"/>
|
|
230
|
+
</svg>`;case e.includes("youtube"):return`<svg xmlns="http://www.w3.org/2000/svg" class="footer-icon" fill="currentColor" class="bi bi-youtube" viewBox="0 0 16 16">
|
|
231
|
+
<path d="M8.051 1.999h.089c.822.003 4.987.033 6.11.335a2.01 2.01 0 0 1 1.415 1.42c.101.38.172.883.22 1.402l.01.104.022.26.008.104c.065.914.073 1.77.074 1.957v.075c-.001.194-.01 1.108-.082 2.06l-.008.105-.009.104c-.05.572-.124 1.14-.235 1.558a2.01 2.01 0 0 1-1.415 1.42c-1.16.312-5.569.334-6.18.335h-.142c-.309 0-1.587-.006-2.927-.052l-.17-.006-.087-.004-.171-.007-.171-.007c-1.11-.049-2.167-.128-2.654-.26a2.01 2.01 0 0 1-1.415-1.419c-.111-.417-.185-.986-.235-1.558L.09 9.82l-.008-.104A31 31 0 0 1 0 7.68v-.123c.002-.215.01-.958.064-1.778l.007-.103.003-.052.008-.104.022-.26.01-.104c.048-.519.119-1.023.22-1.402a2.01 2.01 0 0 1 1.415-1.42c.487-.13 1.544-.21 2.654-.26l.17-.007.172-.006.086-.003.171-.007A100 100 0 0 1 7.858 2zM6.4 5.209v4.818l4.157-2.408z"/>
|
|
232
|
+
</svg>`;case e.includes("whatsapp"):return`<svg xmlns="http://www.w3.org/2000/svg" class="footer-icon" fill="currentColor" class="bi bi-whatsapp" viewBox="0 0 16 16">
|
|
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
|
+
</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
|
+
<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",a),customElements.define("footer-type-2",r),customElements.define("footer-type-3",d)}var k=document.querySelector("#show-more"),v=document.querySelector("#show-more__button");v.addEventListener("click",()=>{v.textContent=v.textContent==="Show More"?"Show Less":"Show More",k.classList.toggle("active")});var m=null;async function L(o){return m||(m=await w(o),m)}(async()=>(await L("./data.json"),x(m),b(m),console.log("KIUI_DATA Loaded:",m)))();})();
|