اطلاع رسانی
- html+alpine.js
<div x-data="{ noticesModal: false }">
<button type="button"
class="inline-flex items-center justify-center gap-x-2 h-12 bg-background border rounded-lg text-foreground cursor-pointer outline-hidden group/button transition-transform active:scale-95 px-4"
x-on:click="noticesModal = true">
<span class="font-semibold text-xs">
بازکردن پنجره محاوره‌ای
</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="size-4">
<path
d="M7.25 1.75a.75.75 0 0 1 1.5 0v1.5a.75.75 0 0 1-1.5 0v-1.5ZM11.536 2.904a.75.75 0 1 1 1.06 1.06l-1.06 1.061a.75.75 0 0 1-1.061-1.06l1.06-1.061ZM14.5 7.5a.75.75 0 0 0-.75-.75h-1.5a.75.75 0 0 0 0 1.5h1.5a.75.75 0 0 0 .75-.75ZM4.464 9.975a.75.75 0 0 1 1.061 1.06l-1.06 1.061a.75.75 0 1 1-1.061-1.06l1.06-1.061ZM4.5 7.5a.75.75 0 0 0-.75-.75h-1.5a.75.75 0 0 0 0 1.5h1.5a.75.75 0 0 0 .75-.75ZM5.525 3.964a.75.75 0 0 1-1.06 1.061l-1.061-1.06a.75.75 0 0 1 1.06-1.061l1.061 1.06ZM8.779 7.438a.75.75 0 0 0-1.368.366l-.396 5.283a.75.75 0 0 0 1.212.646l.602-.474.288 1.074a.75.75 0 1 0 1.449-.388l-.288-1.075.759.11a.75.75 0 0 0 .726-1.165L8.78 7.438Z" />
</svg>
</button>
<!-- modal:notices -->
<div x-cloak x-show="noticesModal" x-transition.opacity.duration.200ms
x-on:keydown.esc.window="noticesModal = false" x-on:click.self="noticesModal = false"
class="fixed inset-0 flex sm:items-center items-end justify-center bg-background/50 p-4 pb-8 lg:p-8 z-50">
<!-- modal dialog -->
<div x-show="noticesModal" x-transition:enter="transition ease-out duration-200 delay-100"
x-transition:enter-start="opacity-0 translate-y-8" x-transition:enter-end="opacity-100 translate-y-0"
class="flex flex-col w-full max-w-sm max-h-full bg-background border rounded-xl shadow-md">
<!-- dialog header -->
<div class="flex items-center relative px-6 py-3.5">
<h3 class="font-bold text-base">
اطلاع رسانی
</h3>
<!-- dialog close button -->
<button
class="inline-flex items-center justify-center absolute end-5 size-7 border rounded-full text-muted-foreground cursor-pointer hover:text-destructive"
x-on:click="noticesModal = false">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="size-4">
<path
d="M5.28 4.22a.75.75 0 0 0-1.06 1.06L6.94 8l-2.72 2.72a.75.75 0 1 0 1.06 1.06L8 9.06l2.72 2.72a.75.75 0 1 0 1.06-1.06L9.06 8l2.72-2.72a.75.75 0 0 0-1.06-1.06L8 6.94 5.28 4.22Z" />
</svg>
</button>
</div>
<!-- end dialog header -->
<!-- dialog body -->
<div class="flex-1 grid gap-y-6 bg-muted/25 border-t-4 rounded-t-xl overflow-y-auto p-5">
<h4 class="font-semibold text-sm">
اگر کالا شگفت‌انگیز شد، چطور به شما اطلاع دهیم؟
</h4>
<form @submit.prevent="console.log('submitted');noticesModal = false" action="#" method="post"
class="grid gap-y-8">
<!-- Form group -->
<div class="grid gap-y-3.5">
<!-- Title -->
<span class="font-semibold text-xs select-none">
چطور به شما اطلاع دهیم؟
</span>
<!-- Checkbox options container -->
<div class="space-y-3">
<!-- Checkbox option -->
<div class="flex items-center gap-x-2 group/input">
<div class="shrink-0 grid grid-cols-1 size-4">
<input type="checkbox" name="notices" id="notice01"
class="col-start-1 row-start-1 appearance-none size-4 bg-background border rounded-sm checked:border-accent checked:bg-accent disabled:bg-muted disabled:checked:bg-muted"
value="email" />
<svg class="col-start-1 row-start-1 size-4 stroke-background cursor-pointer group-has-checked/input:stroke-accent-foreground group-has-disabled/input:cursor-default group-has-disabled/input:stroke-border"
viewBox="0 0 14 14" fill="none">
<path class="opacity-0 group-has-checked/input:opacity-100" d="M3 8L6 11L11 3.5"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
<path class="opacity-0 group-has-checked/input:opacity-100" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
<label for="notice01"
class="grow font-medium text-xs text-muted-foreground cursor-pointer select-none transition-colors group-has-checked/input:text-foreground group-has-disabled/input:cursor-default">
ارسال ایمیل
</label>
</div>
<!-- end Checkbox option -->
<!-- Checkbox option -->
<div class="flex items-center gap-x-2 group/input">
<div class="shrink-0 grid grid-cols-1 size-4">
<input type="checkbox" name="notices" id="notice02"
class="col-start-1 row-start-1 appearance-none size-4 bg-background border rounded-sm checked:border-accent checked:bg-accent disabled:bg-muted disabled:checked:bg-muted"
value="sms" />
<svg class="col-start-1 row-start-1 size-4 stroke-background cursor-pointer group-has-checked/input:stroke-accent-foreground group-has-disabled/input:cursor-default group-has-disabled/input:stroke-border"
viewBox="0 0 14 14" fill="none">
<path class="opacity-0 group-has-checked/input:opacity-100" d="M3 8L6 11L11 3.5"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
<path class="opacity-0 group-has-checked/input:opacity-100" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
<label for="notice02"
class="grow font-medium text-xs text-muted-foreground cursor-pointer select-none transition-colors group-has-checked/input:text-foreground group-has-disabled/input:cursor-default">
ارسال پیامک
</label>
</div>
<!-- end Checkbox option -->
<!-- Checkbox option -->
<div class="flex items-center gap-x-2 group/input">
<div class="shrink-0 grid grid-cols-1 size-4">
<input type="checkbox" name="notices" id="notice03"
class="col-start-1 row-start-1 appearance-none size-4 bg-background border rounded-sm checked:border-accent checked:bg-accent disabled:bg-muted disabled:checked:bg-muted"
value="in-app" />
<svg class="col-start-1 row-start-1 size-4 stroke-background cursor-pointer group-has-checked/input:stroke-accent-foreground group-has-disabled/input:cursor-default group-has-disabled/input:stroke-border"
viewBox="0 0 14 14" fill="none">
<path class="opacity-0 group-has-checked/input:opacity-100" d="M3 8L6 11L11 3.5"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
<path class="opacity-0 group-has-checked/input:opacity-100" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
<label for="notice03"
class="grow font-medium text-xs text-muted-foreground cursor-pointer select-none transition-colors group-has-checked/input:text-foreground group-has-disabled/input:cursor-default">
سیستم پیام شخصی
</label>
</div>
<!-- end Checkbox option -->
</div>
<!-- end Checkbox options container -->
</div>
<!-- end Form group -->
<div class="flex justify-end gap-x-1.5">
<button type="submit"
class="inline-flex items-center justify-center gap-x-2 h-11 bg-primary rounded-lg text-primary-foreground cursor-pointer outline-hidden group/button transition-transform active:scale-95 px-6">
<span class="line-clamp-1 font-medium text-xs">ثبت</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="size-4">
<path fill="currentColor"
d="M17.828 2a3 3 0 0 1 1.977.743l.145.136l1.171 1.17a3 3 0 0 1 .136 4.1l-.136.144L19.415 10l2.292 2.293a1 1 0 0 1 .083 1.32l-.083.094l-4 4a1 1 0 0 1-1.497-1.32l.083-.094L19.585 13l-1.586-1.585l-7.464 7.464a3.83 3.83 0 0 1-2.474 1.114l-.233.008c-.674 0-1.33-.178-1.905-.508l-1.216 1.214a1 1 0 0 1-1.497-1.32l.083-.094l1.214-1.216a3.83 3.83 0 0 1 .454-4.442l.16-.17L15.707 2.879a3 3 0 0 1 1.923-.873zm0 2a1 1 0 0 0-.608.206l-.099.087L15.414 6L18 8.585l1.707-1.706a1 1 0 0 0 .284-.576l.01-.131a1 1 0 0 0-.207-.609l-.087-.099l-1.171-1.171A1 1 0 0 0 17.828 4" />
</svg>
</button>
</div>
</form>
</div>
<!-- end dialog body -->
</div>
<!-- end modal dialog -->
</div>
<!-- end modal:notices -->
</div>ورود یا ثبت نام
- html+alpine.js
<div x-data="{ signInModal: false }">
<button type="button"
class="inline-flex items-center justify-center gap-x-2 h-12 bg-background border rounded-lg text-foreground cursor-pointer outline-hidden group/button transition-transform active:scale-95 px-4"
x-on:click="signInModal = true">
<span class="font-semibold text-xs">
ورود یا ثبت نام
</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="size-4">
<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
<path d="M15 8V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h7a2 2 0 0 0 2-2v-2" />
<path d="M21 12H8l3-3m0 6l-3-3" />
</g>
</svg>
</button>
<!-- modal:sign-in -->
<div x-cloak x-show="signInModal" x-transition.opacity.duration.200ms x-on:keydown.esc.window="signInModal = false"
x-on:click.self="signInModal = false"
class="fixed inset-0 flex sm:items-center items-end justify-center bg-background/50 p-4 pb-8 lg:p-8 z-50">
<!-- modal dialog -->
<div x-show="signInModal" x-transition:enter="transition ease-out duration-200 delay-100"
x-transition:enter-start="opacity-0 translate-y-8" x-transition:enter-end="opacity-100 translate-y-0"
class="flex flex-col w-full max-w-sm max-h-full bg-background border rounded-xl shadow-md">
<!-- dialog header -->
<div class="flex items-center relative px-6 py-3.5">
<h3 class="font-bold text-base">
ورود یا ثبت نام
</h3>
<!-- dialog close button -->
<button
class="inline-flex items-center justify-center absolute end-5 size-7 border rounded-full text-muted-foreground cursor-pointer hover:text-destructive"
x-on:click="signInModal = false">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="size-4">
<path
d="M5.28 4.22a.75.75 0 0 0-1.06 1.06L6.94 8l-2.72 2.72a.75.75 0 1 0 1.06 1.06L8 9.06l2.72 2.72a.75.75 0 1 0 1.06-1.06L9.06 8l2.72-2.72a.75.75 0 0 0-1.06-1.06L8 6.94 5.28 4.22Z" />
</svg>
</button>
</div>
<!-- end dialog header -->
<!-- dialog body -->
<div class="flex-1 grid gap-y-6 bg-muted/25 border-t-4 rounded-t-xl overflow-y-auto p-5">
<div class="font-semibold text-xs text-muted-foreground space-y-1.5">
<p>درود 👋</p>
<p>برای ورود یا ثبت‌نام شماره موبایل خود را وارد کنید.</p>
</div>
<form action="#" method="post" class="space-y-2">
<!-- Mobile -->
<input type="text" dir="ltr" name="mobile" id="mobile"
class="block w-full h-12 bg-background border rounded-md shadow-xs font-medium text-sm outline-hidden disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/50 placeholder:text-muted-foreground/70 px-3 py-1"
autocomplete="off" placeholder="09*********" />
<button type="submit"
class="flex items-center justify-center gap-x-2 w-full h-12 bg-primary rounded-lg text-primary-foreground cursor-pointer outline-hidden group/button transition-transform active:scale-95 px-3.5">
<span class="font-semibold text-xs">ارسال کد تایید</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="size-4">
<path
d="M2.5 3A1.5 1.5 0 0 0 1 4.5v.793c.026.009.051.02.076.032L7.674 8.51c.206.1.446.1.652 0l6.598-3.185A.755.755 0 0 1 15 5.293V4.5A1.5 1.5 0 0 0 13.5 3h-11Z" />
<path
d="M15 6.954 8.978 9.86a2.25 2.25 0 0 1-1.956 0L1 6.954V11.5A1.5 1.5 0 0 0 2.5 13h11a1.5 1.5 0 0 0 1.5-1.5V6.954Z" />
</svg>
</button>
</form>
</div>
<!-- end dialog body -->
</div>
<!-- end modal dialog -->
</div>
<!-- end modal:sign-in -->
</div>