librewolf
/
bunkerized-nginx
mirror of https://github.com/bunkerity/bunkerized-nginx
4
0
Fork 1
Code Issues Projects Releases Wiki Activity

Merge branch 'ui' into dev

This commit is contained in:
bunkerity 2023-04-28 15:06:35 +02:00
parent bbaaad8487 0658230e26
commit e7717ba7f9
12 changed files with 165 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

133
src/ui/static/css/dashboard.css
View File

@ -538,6 +538,16 @@ video {
padding-left: 1.5rem;
}
@media (min-width: 340px) {
.\!container {
max-width: 340px !important;
}
.container {
max-width: 340px;
}
}
@media (min-width: 576px) {
.\!container {
max-width: 576px !important;
@ -960,6 +970,11 @@ h6 {
margin-bottom: 1rem;
}
.my-8 {
margin-top: 2rem;
margin-bottom: 2rem;
}
.mb-0 {
margin-bottom: 0px;
}
@ -1332,6 +1347,16 @@ h6 {
width: 100vw;
}
.w-fit {
width: -moz-fit-content;
width: fit-content;
}
.w-max {
width: -moz-max-content;
width: max-content;
}
.min-w-0 {
min-width: 0px;
}
@ -1344,6 +1369,10 @@ h6 {
min-width: 900px;
}
.min-w-\[150px\] {
min-width: 150px;
}
.max-w-180 {
max-width: 45rem;
}
@ -1372,6 +1401,10 @@ h6 {
max-width: 100%;
}
.max-w-\[350px\] {
max-width: 350px;
}
.flex-auto {
flex: 1 1 auto;
}
@ -1561,6 +1594,10 @@ h6 {
flex-wrap: wrap;
}
.flex-nowrap {
flex-wrap: nowrap;
}
.items-start {
align-items: flex-start;
}
@ -1626,6 +1663,10 @@ h6 {
overflow: hidden;
}
.overflow-scroll {
overflow: scroll;
}
.overflow-x-auto {
overflow-x: auto;
}
@ -2292,10 +2333,6 @@ h6 {
letter-spacing: 0.025em;
}
.tracking-wider {
letter-spacing: 0.05em;
}
.tracking-widest {
letter-spacing: 0.1em;
}
@ -3714,10 +3751,6 @@ h6 {
border-radius: 0.5rem;
}
.hover\:bg-blue-500\/80:hover {
background-color: rgb(94 114 228 / 0.8);
}
.hover\:bg-gray-100:hover {
--tw-bg-opacity: 1;
background-color: rgb(235 239 244 / var(--tw-bg-opacity));
@ -3756,6 +3789,10 @@ h6 {
background-color: rgb(251 177 64 / 0.8);
}
.hover\:italic:hover {
font-style: italic;
}
.hover\:opacity-80:hover {
opacity: 0.8;
}
@ -4203,6 +4240,10 @@ h6 {
width: 1.75rem;
}
.sm\:min-w-\[500px\] {
min-width: 500px;
}
.sm\:scale-100 {
--tw-scale-x: 1;
--tw-scale-y: 1;
@ -4239,6 +4280,11 @@ h6 {
padding-right: 1.5rem;
}
.sm\:py-0 {
padding-top: 0px;
padding-bottom: 0px;
}
.sm\:pt-6 {
padding-top: 1.5rem;
}
@ -4300,6 +4346,10 @@ h6 {
margin-right: 0.75rem;
}
.md\:mt-0 {
margin-top: 0px;
}
.md\:block {
display: block;
}
@ -4332,6 +4382,10 @@ h6 {
justify-content: flex-end;
}
.md\:justify-center {
justify-content: center;
}
.md\:px-3 {
padding-left: 0.75rem;
padding-right: 0.75rem;
@ -4458,9 +4512,28 @@ h6 {
background-color: rgb(248 249 250 / var(--tw-bg-opacity));
}
.lg\:py-4 {
padding-top: 1rem;
padding-bottom: 1rem;
}
.lg\:py-1 {
padding-top: 0.25rem;
padding-bottom: 0.25rem;
}
.lg\:pb-1 {
padding-bottom: 0.25rem;
}
.lg\:text-left {
text-align: left;
}
.lg\:text-sm {
font-size: 0.875rem;
line-height: 1.5rem;
}
}
@media (min-width: 1200px) {
@ -4476,6 +4549,10 @@ h6 {
right: 1.5rem;
}
.xl\:col-span-8 {
grid-column: span 8 / span 8;
}
.xl\:ml-6 {
margin-left: 1.5rem;
}
@ -4515,6 +4592,10 @@ h6 {
grid-column: span 6 / span 6;
}
.\32xl\:col-span-5 {
grid-column: span 5 / span 5;
}
.\32xl\:mx-6 {
margin-left: 1.5rem;
margin-right: 1.5rem;
@ -4534,6 +4615,42 @@ h6 {
.\33xl\:col-span-4 {
grid-column: span 4 / span 4;
}
.\33xl\:col-span-5 {
grid-column: span 5 / span 5;
}
}
@media (min-width: 340px) {
.xs\:my-0 {
margin-top: 0px;
margin-bottom: 0px;
}
.xs\:flex-row {
flex-direction: row;
}
.xs\:items-center {
align-items: center;
}
.xs\:justify-start {
justify-content: flex-start;
}
.xs\:justify-end {
justify-content: flex-end;
}
.xs\:py-0 {
padding-top: 0px;
padding-bottom: 0px;
}
.xs\:pl-2 {
padding-left: 0.5rem;
}
}
.\[\&\>\*\]\:bg-primary>* {

3
src/ui/tailwind.config.js
View File

@ -14,6 +14,9 @@ module.exports = {
aria: {
checked: 'checked="true"',
},
screens: {
xs: "340px",
},
},
screens: {
sm: "576px",

8
src/ui/templates/file_manager.html
View File

@ -57,7 +57,7 @@ url_for(request.endpoint)[1:].split("/")[-1].strip().replace('_', '-') %}
<!-- actions -->
<ul
data-{{current_endpoint}}-add-container
class="col-span-12 md:col-span-4 my-2 md:my-0 w-full flex justify-center md:justify-end items-center mb-3"
class="col-span-12 md:col-span-4 mt-4 mb-6 md:mt-0 md:mb-3 w-full flex justify-center md:justify-end items-center"
>
<li
data-{{current_endpoint}}-add-folder
@ -372,10 +372,10 @@ url_for(request.endpoint)[1:].split("/")[-1].strip().replace('_', '-') %}
<!-- modal -->
<div
data-{{current_endpoint}}-modal
class="hidden w-screen h-screen fixed bg-gray-600/50 z-[1001] top-0 left-0 justify-center items-center"
class="hidden w-full h-screen fixed bg-gray-600/50 z-[1001] top-0 left-0 justify-center items-center"
>
<div
class="px-4 py-3 w-full max-w-180 flex flex-col break-words bg-white shadow-xl dark:bg-slate-850 dark:shadow-dark-xl rounded-2xl bg-clip-border"
class="mx-1 px-4 py-3 w-full max-w-180 flex flex-col break-words bg-white shadow-xl dark:bg-slate-850 dark:shadow-dark-xl rounded-2xl bg-clip-border"
>
<div class="w-full flex justify-between">
<p
@ -392,7 +392,7 @@ data-{{current_endpoint}}-modal
method="POST"
>
<div
class="mb-2 flex flex-col sm:flex-row justify-start align-middle items-start sm:items-center"
class="mb-2 flex flex-wrap justify-start items-center"
data-{{current_endpoint}}-modal-path
>
<p

14
src/ui/templates/footer.html
View File

@ -1,5 +1,5 @@
<footer
class="dark:bg-green-500/90 relative mt-4 rounded-lg w-full py-4 mb-2 bg-secondary"
class="dark:bg-green-500/90 relative mt-4 rounded-lg w-full py-2 lg:py-4 mb-2 bg-secondary"
>
<div class="w-full px-6 mx-auto">
<div
@ -7,7 +7,7 @@
>
<div class="order-2 lg:order-1 px-0 mt-3 lg:mt-0">
<div
class="transition duration-300 text-sm tracking-wide leading-normal text-center text-white opacity-100 dark:text-white lg:text-left"
class="transition duration-300 text-xs lg:text-sm tracking-wide leading-normal text-center text-white opacity-100 dark:text-white lg:text-left"
>
Copyright ©
<script>
@ -22,7 +22,7 @@
<li class="nav-item">
<a
href="https://www.bunkerweb.io"
class="block sm:px-4 py-1 text-sm tracking-wide font-normal transition duration-300 ease-in-out text-white dark:text-white"
class="hover:italic hover:brightness-90 block sm:px-4 pt-1 pb-0 lg:pb-1 text-sm tracking-wide font-normal transition duration-300 ease-in-out text-white dark:text-white"
target="_blank"
>Bunkerweb</a
>
@ -30,7 +30,7 @@
<li class="nav-item">
<a
href="https://docs.bunkerweb.io"
class="block sm:px-4 py-1 text-sm tracking-wide font-normal transition duration-300 ease-in-out text-white dark:text-white"
class="hover:italic hover:brightness-90 block sm:px-4 pt-1 pb-0 lg:pb-1 text-sm tracking-wide font-normal transition duration-300 ease-in-out text-white dark:text-white"
target="_blank"
>Docs</a
>
@ -38,7 +38,7 @@
<li class="nav-item">
<a
href="https://www.bunkerweb.io/privacy-policy"
class="block sm:px-4 py-1 text-sm tracking-wide font-normal transition duration-300 ease-in-out text-white dark:text-white"
class="hover:italic hover:brightness-90 block sm:px-4 pt-1 pb-0 lg:pb-1 text-sm tracking-wide font-normal transition duration-300 ease-in-out text-white dark:text-white"
target="_blank"
>Privacy</a
>
@ -46,7 +46,7 @@
<li class="nav-item">
<a
href="https://www.bunkerity.com/fr/blog/"
class="block sm:px-4 py-1 text-sm tracking-wide font-normal transition duration-300 ease-in-out text-white dark:text-white"
class="hover:italic hover:brightness-90 block sm:px-4 pt-1 pb-0 lg:pb-1 text-sm tracking-wide font-normal transition duration-300 ease-in-out text-white dark:text-white"
target="_blank"
>Blog</a
>
@ -54,7 +54,7 @@
<li class="nav-item">
<a
href="https://github.com/bunkerity/bunkerweb/blob/master/LICENSE"
class="block sm:px-4 py-1 pr-0 text-sm tracking-wide font-normal transition duration-300 ease-in-out text-white dark:text-white"
class="hover:italic hover:brightness-90 block sm:px-4 pt-1 pb-0 lg:pb-1 pr-0 text-sm tracking-wide font-normal transition duration-300 ease-in-out text-white dark:text-white"
target="_blank"
>License</a
>

2
src/ui/templates/global_config.html
View File

@ -3,7 +3,7 @@
<div data-service-content="settings" class="col-span-12 gap-y-4 grid grid-cols-12">
<div class="p-4 col-span-12 relative flex flex-col min-w-0 break-words bg-white shadow-xl dark:bg-slate-850 dark:shadow-dark-xl rounded-2xl bg-clip-border"
>
<div data-{{current_endpoint}}-tabs-header class="flex justify-start items-center gap-x-4 gap-y-2 my-3">
<div data-{{current_endpoint}}-tabs-header class="flex flex-col xs:flex-row xs:justify-start xs:items-center gap-x-4 gap-y-2 my-3">
<h5 class="transition duration-300 ease-in-out 0 ml-2 font-bold text-md uppercase dark:text-white/90 mb-0">CONFIGS</h5>
<!-- search inpt-->
<div class="flex relative col-span-12 sm:col-span-6 lg:col-span-4 3xl:col-span-3">

8
src/ui/templates/header.html
View File

@ -13,19 +13,21 @@
<h6 class="mb-0 text-lg font-bold text-white capitalize">
{{current_endpoint}}
</h6>
<ol class="flex flex-wrap pt-1 mr-12 bg-transparent rounded-lg sm:mr-16">
<ul
class="flex flex-col xs:flex-row flex-wrap pt-1 mr-12 bg-transparent rounded-lg sm:mr-16"
>
<li class="text-sm leading-normal">
<a class="text-white opacity-50 dark:opacity-75" href="javascript:;"
>Bunkerweb</a
>
</li>
<li
class="text-sm pl-2 capitalize leading-normal text-white before:float-left before:pr-2 before:text-white before:content-['/']"
class="text-sm pl-0 xs:pl-2 capitalize leading-normal text-white before:float-left before:pr-2 before:text-white before:content-['/']"
aria-current="page"
>
{{current_endpoint}}
</li>
</ol>
</ul>
</nav>
</div>
</header>

10
src/ui/templates/instances.html
View File

@ -33,7 +33,9 @@ instances_batched %}
<!-- detail list -->
<div class="grid grid-cols-1 gap-2 mt-4 mb-6 ml-1">
<!-- detail -->
<div class="flex col-span-1">
<div
class="flex flex-col items-center sm:flex-row col-span-1 py-1 sm:py-0"
>
<p
class="transition duration-300 ease-in-out font-bold mb-0 font-sans text-sm leading-normal uppercase dark:text-gray-500 dark:opacity-80"
>
@ -47,7 +49,9 @@ instances_batched %}
</div>
<!-- end detail -->
<!-- detail -->
<div class="flex col-span-1">
<div
class="flex flex-col items-center sm:flex-row col-span-1 py-1 sm:py-0"
>
<p
class="transition duration-300 ease-in-out font-bold mb-0 font-sans text-sm leading-normal uppercase dark:text-gray-500 dark:opacity-90"
>
@ -64,7 +68,7 @@ instances_batched %}
<!-- end detail list-->
<!-- button list-->
<div class="relative w-full flex justify-end">
<div class="relative w-full flex justify-center sm:justify-end">
{% if instance._type == "local" and instance.health %}
<button
type="submit"

2
src/ui/templates/jobs.html
View File

@ -35,7 +35,7 @@ url_for(request.endpoint)[1:].split("/")[-1].strip() %}
<!-- filter -->
<div
data-{{current_endpoint}}-filter
class="col-span-12 md:col-span-8 2xl:col-span-6 p-4 relative flex flex-col min-w-0 break-words bg-white shadow-xl dark:bg-slate-850 dark:shadow-dark-xl rounded-2xl bg-clip-border"
class="col-span-12 md:col-span-8 2xl:col-span-6 3xl:col-span-5 p-4 relative flex flex-col min-w-0 break-words bg-white shadow-xl dark:bg-slate-850 dark:shadow-dark-xl rounded-2xl bg-clip-border"
>
<h5 class="mb-2 font-bold dark:text-white/90">FILTER</h5>
<div class="mx-2 grid grid-cols-12 gap-x-4 gap-y-2">

26
src/ui/templates/logs.html
View File

@ -4,14 +4,12 @@ url_for(request.endpoint)[1:].split("/")[-1].strip().replace('_', '-') %}
<!-- settings -->
<div
data-{{current_endpoint}}-settings
class="col-span-12 lg:col-span-8 p-4 relative flex flex-col min-w-0 break-words bg-white shadow-xl dark:bg-slate-850 dark:shadow-dark-xl rounded-2xl bg-clip-border"
class="col-span-12 lg:col-span-8 2xl:col-span-6 p-4 relative flex flex-col min-w-0 break-words bg-white shadow-xl dark:bg-slate-850 dark:shadow-dark-xl rounded-2xl bg-clip-border"
>
<h5 class="mb-2 font-bold dark:text-white/90">SETTINGS</h5>
<div class="mx-2 grid grid-cols-12 gap-x-4 gap-y-2">
<!-- select instance -->
<div
class="flex flex-col relative col-span-12 sm:col-span-6 2xl:col-span-4 3xl:col-span-3"
>
<div class="flex flex-col relative col-span-12">
<h5
class="my-1 transition duration-300 ease-in-out dark:opacity-90 text-sm sm:text-md font-bold m-0 dark:text-gray-300"
>
@ -65,9 +63,7 @@ url_for(request.endpoint)[1:].split("/")[-1].strip().replace('_', '-') %}
</div>
<!-- end select instance -->
<!-- from date input -->
<div
class="flex flex-col relative col-span-12 sm:col-span-6 2xl:col-span-4 3xl:col-span-3"
>
<div class="flex flex-col relative col-span-12 sm:col-span-6">
<h5
class="my-1 transition duration-300 ease-in-out dark:opacity-90 text-sm sm:text-md font-bold m-0 dark:text-gray-300"
>
@ -77,7 +73,7 @@ url_for(request.endpoint)[1:].split("/")[-1].strip().replace('_', '-') %}
type="text"
id="from-date"
name="from-date"
class="disabled:bg-gray-400 dark:disabled:bg-gray-800 dark:disabled:border-gray-800 dark:disabled:text-gray-300 disabled:text-gray-700 col-span-12 sm:col-span-6 2xl:col-span-4 3xl:col-span-3 dark:border-slate-600 dark:bg-slate-700 dark:text-gray-300 disabled:opacity-75 focus:valid:border-green-500 focus:invalid:border-red-500 outline-none focus:border-primary text-sm leading-5.6 ease block w-full appearance-none rounded-lg border border-solid border-gray-300 bg-white bg-clip-padding px-3 py-1 font-normal text-gray-700 transition-all placeholder:text-gray-500"
class="disabled:bg-gray-400 dark:disabled:bg-gray-800 dark:disabled:border-gray-800 dark:disabled:text-gray-300 disabled:text-gray-700 col-span-12 sm:col-span-6 dark:border-slate-600 dark:bg-slate-700 dark:text-gray-300 disabled:opacity-75 focus:valid:border-green-500 focus:invalid:border-red-500 outline-none focus:border-primary text-sm leading-5.6 ease block w-full appearance-none rounded-lg border border-solid border-gray-300 bg-white bg-clip-padding px-3 py-1 font-normal text-gray-700 transition-all placeholder:text-gray-500"
placeholder="pick start date"
pattern="(.*?)"
required
@ -85,9 +81,7 @@ url_for(request.endpoint)[1:].split("/")[-1].strip().replace('_', '-') %}
</div>
<!-- end from date input -->
<!-- to date input -->
<div
class="flex flex-col relative col-span-12 sm:col-span-6 2xl:col-span-4 3xl:col-span-3"
>
<div class="flex flex-col relative col-span-12 sm:col-span-6">
<h5
class="my-1 transition duration-300 ease-in-out dark:opacity-90 text-sm sm:text-md font-bold m-0 dark:text-gray-300"
>
@ -97,7 +91,7 @@ url_for(request.endpoint)[1:].split("/")[-1].strip().replace('_', '-') %}
type="text"
id="to-date"
name="to-date"
class="disabled:bg-gray-400 dark:disabled:bg-gray-800 dark:disabled:border-gray-800 dark:disabled:text-gray-300 disabled:text-gray-700 col-span-12 sm:col-span-6 2xl:col-span-4 3xl:col-span-3 dark:border-slate-600 dark:bg-slate-700 dark:text-gray-300 disabled:opacity-75 focus:valid:border-green-500 focus:invalid:border-red-500 outline-none focus:border-primary text-sm leading-5.6 ease block w-full appearance-none rounded-lg border border-solid border-gray-300 bg-white bg-clip-padding px-3 py-1 font-normal text-gray-700 transition-all placeholder:text-gray-500"
class="disabled:bg-gray-400 dark:disabled:bg-gray-800 dark:disabled:border-gray-800 dark:disabled:text-gray-300 disabled:text-gray-700 col-span-12 sm:col-span-6 dark:border-slate-600 dark:bg-slate-700 dark:text-gray-300 disabled:opacity-75 focus:valid:border-green-500 focus:invalid:border-red-500 outline-none focus:border-primary text-sm leading-5.6 ease block w-full appearance-none rounded-lg border border-solid border-gray-300 bg-white bg-clip-padding px-3 py-1 font-normal text-gray-700 transition-all placeholder:text-gray-500"
placeholder="pick end date"
pattern="(.*?)"
required
@ -106,9 +100,7 @@ url_for(request.endpoint)[1:].split("/")[-1].strip().replace('_', '-') %}
<!-- end to date input -->
<!-- refresh delay input -->
<div
class="flex flex-col relative col-span-12 sm:col-span-6 2xl:col-span-4 3xl:col-span-3"
>
<div class="flex flex-col relative col-span-12 sm:col-span-6">
<h5
class="my-1 transition duration-300 ease-in-out dark:opacity-90 text-sm sm:text-md font-bold m-0 dark:text-gray-300"
>
@ -118,7 +110,7 @@ url_for(request.endpoint)[1:].split("/")[-1].strip().replace('_', '-') %}
type="number"
id="update-delay"
name="update-delay"
class="disabled:bg-gray-400 dark:disabled:bg-gray-800 dark:disabled:border-gray-800 dark:disabled:text-gray-300 disabled:text-gray-700 col-span-12 sm:col-span-6 2xl:col-span-4 3xl:col-span-3 dark:border-slate-600 dark:bg-slate-700 dark:text-gray-300 disabled:opacity-75 focus:valid:border-green-500 focus:invalid:border-red-500 outline-none focus:border-primary text-sm leading-5.6 ease block w-full appearance-none rounded-lg border border-solid border-gray-300 bg-white bg-clip-padding px-3 py-1 font-normal text-gray-700 transition-all placeholder:text-gray-500"
class="disabled:bg-gray-400 dark:disabled:bg-gray-800 dark:disabled:border-gray-800 dark:disabled:text-gray-300 disabled:text-gray-700 col-span-12 sm:col-span-6 dark:border-slate-600 dark:bg-slate-700 dark:text-gray-300 disabled:opacity-75 focus:valid:border-green-500 focus:invalid:border-red-500 outline-none focus:border-primary text-sm leading-5.6 ease block w-full appearance-none rounded-lg border border-solid border-gray-300 bg-white bg-clip-padding px-3 py-1 font-normal text-gray-700 transition-all placeholder:text-gray-500"
placeholder="2"
data-pattern="(.*?)"
required
@ -191,7 +183,7 @@ url_for(request.endpoint)[1:].split("/")[-1].strip().replace('_', '-') %}
<!-- filter -->
<div
data-{{current_endpoint}}-filter
class="col-span-12 lg:col-span-4 p-4 relative flex flex-col min-w-0 break-words bg-white shadow-xl dark:bg-slate-850 dark:shadow-dark-xl rounded-2xl bg-clip-border"
class="col-span-12 md:col-span-6 lg:col-span-4 p-4 relative flex flex-col min-w-0 break-words bg-white shadow-xl dark:bg-slate-850 dark:shadow-dark-xl rounded-2xl bg-clip-border"
>
<h5 class="mb-2 font-bold dark:text-white/90">FILTERS</h5>
<div class="mx-2 grid grid-cols-12 gap-x-4 gap-y-2">

2
src/ui/templates/plugins.html
View File

@ -113,7 +113,7 @@ include "plugins_modal.html" %}
<!-- filter -->
<div
data-{{current_endpoint}}-filter
class="p-4 col-span-12 2xl:col-span-4 relative min-w-0 break-words bg-white shadow-xl dark:bg-slate-850 dark:shadow-dark-xl rounded-2xl bg-clip-border"
class="p-4 col-span-12 md:col-span-6 2xl:col-span-4 relative min-w-0 break-words bg-white shadow-xl dark:bg-slate-850 dark:shadow-dark-xl rounded-2xl bg-clip-border"
>
<h5 class="mb-2 font-bold dark:text-white/90">FILTER</h5>
<div class="mx-2 grid grid-cols-12 gap-x-4 gap-y-2">

2
src/ui/templates/services.html
View File

@ -35,7 +35,7 @@
<h5 class="transition duration-300 ease-in-out text-center sm:text-left mb-1 font-bold dark:text-white/90">
{{ service["SERVER_NAME"]['value'] }}
</h5>
<h6 class="mb-2 font-semibold text-gray-600 dark:text-white/80">{{ service["SERVER_NAME"]['method'] }}</h5>
<h6 class="text-center sm:text-left mb-2 font-semibold text-gray-600 dark:text-white/80">{{ service["SERVER_NAME"]['method'] }}</h5>

2
src/ui/templates/services_modal.html
View File

@ -6,7 +6,7 @@
>
<div
data-services-modal-card
class="overflow-y-auto mx-3 ml-2 mr-6 sm:mx-6 lg:mx-8 my-3 px-4 pt-4 pb-8 w-full min-w-[500px] h-[90vh] flex flex-col break-words bg-white shadow-xl dark:bg-slate-850 dark:shadow-dark-xl rounded-2xl bg-clip-border"
class="overflow-y-auto mx-3 ml-2 mr-6 sm:mx-6 lg:mx-8 my-3 px-4 pt-4 pb-8 w-full sm:min-w-[500px] h-[90vh] flex flex-col break-words bg-white shadow-xl dark:bg-slate-850 dark:shadow-dark-xl rounded-2xl bg-clip-border"
>
<div class="w-full flex justify-between mb-2">
<p