<div x-data="hyva.modal()">
<button type="button" class="btn btn-solid btn-size-lg btn-dark" @click="show('modal', $event)">
Show Modal
</button>
<div x-cloak x-bind="overlay('modal')" x-spread="overlay('modal')" class="fixed inset-0 bg-black bg-opacity-50 z-50 flex md:items-center">
<div class="fixed inset-x-0 max-md:h-full md:container grid-layout justify-center items-center text-left z-40">
<div x-ref="modal" role="dialog" aria-modal="true" class="
relative inline-block bg-white shadow-32 max-h-screen overflow-auto overscroll-y-contain h-full
col-span-4 sm:col-span-12 md:col-span-8 md:col-start-3
">
<button type="button" @click="hide('modal')" aria-label="Label text" class="absolute top-4 right-4 z-10 btn btn-neutral btn-outline btn-size-sm btn-only-icon">
<svg class=" shrink-0" width="24" height="24" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M6 18 18 6M6 6l12 12" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg>
</button>
<div class="flex flex-col xl:flex-row items-center gap-y-6 h-full">
<div class="h-full flex-1">
<img src="../../img/modals/img.png" alt="Product promo" class="aspect-[4/3] w-auto h-full object-cover" loading="lazy" />
</div>
<div class="flex flex-col gap-4 m-6 xl:m-8 3xl:m-10 max-md:max-w-[328px] md:w-[424px] xl:w-[432px] 3xl:w-[596px]">
<div class="flex flex-col gap-2">
<h2 class="h4">Sign up and get 10% off</h2>
<p class="h6 text-black/64">We believe in our product, we hope you too ! You need to try it now.</p>
</div>
<form class="flex flex-col gap-2" action="#" x-data="Object.assign(hyva.formValidation($el), initForm())" @submit.prevent="submitForm()" method="post" enctype="multipart/form-data" id="form-validate">
<div class="flex items-center">
<div class="flex flex-col w-full gap-y-1">
<div class="input-wrapper flex flex-col relative w-full floating-label">
<input type="email" name="email" id="email" class="form-input w-full peer
required
" placeholder="" required @input.debounce="onChange">
<div class="label-wrapper ">
<label for="email" class="flex flex-row items-center gap-2">
<span class="flex-grow">Email</span>
<div class="required text-error">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
<path d="M8.48605 7.23022L8.81938 7.03777L11.8608 5.28179C12.0734 5.15906 12.3452 5.23189 12.468 5.44446C12.5907 5.65704 12.5179 5.92886 12.3053 6.05159L9.26383 7.80757L8.9305 8.00002L9.26383 8.19247L12.3053 9.94845C12.5179 10.0712 12.5907 10.343 12.468 10.5556C12.3452 10.7681 12.0734 10.841 11.8608 10.7183L8.81938 8.96226L8.48605 8.76981V9.15471V12.6667C8.48605 12.9121 8.28706 13.1111 8.0416 13.1111C7.79614 13.1111 7.59716 12.9121 7.59716 12.6667V9.15472V8.76982L7.26382 8.96227L4.22237 10.7183L4.32568 10.8972L4.22237 10.7183C4.0098 10.841 3.73798 10.7681 3.61525 10.5556C3.49252 10.343 3.56536 10.0712 3.77793 9.94845L6.81938 8.19247L7.15272 8.00002L6.81938 7.80757L3.77794 6.05159L3.66964 6.23916L3.77794 6.05159C3.56536 5.92886 3.49253 5.65704 3.61526 5.44446C3.73799 5.23189 4.0098 5.15906 4.22238 5.28179L7.26382 7.03776L7.59716 7.23021V6.84531V3.33335C7.59716 3.08789 7.79614 2.88891 8.0416 2.88891C8.28706 2.88891 8.48605 3.08789 8.48605 3.33335V6.84532V7.23022Z" fill="currentColor" stroke="currentColor" stroke-width="0.444444" />
</svg>
</div>
</label>
</div>
</div>
</div> <button type="submit" class="shrink-0 btn btn-dark btn-solid btn-size-lg">
OK
</button>
</div>
<div class="field field-reserved">
<!-- replace identifiers with normal values (for,id,name etc...) -->
<label class="selection-control-label selection-control-checkbox items-start text-body-xs">
<input required type="checkbox" id="checkbox" name="checkbox" class="" value="M." @input.debounce="onChange">
<span class="
">
NAOS France (Etat Pur) collecte les données personnelles ci-dessus afin de prendre en charge votre demande. Pour en savoir plus sur l'utilisation de vos données et sur vos droits,<a href='#' class='underline'>cliquez-ici</a>
</span>
</label>
</div>
</form>
<p class="text-black/72 text-body-xs">To now more about us, check our website</p>
</div>
</div>
<script>
function initForm() {
return {
errors: 0,
hasCaptchaToken: 0,
submitForm() {
this.validate()
.then(() => {
// Do not rename $form, the variable is expected to be declared in the recaptcha output
const $form = document.querySelector('#form-validate');
if (this.errors === 0) {
$form.submit();
}
})
.catch((invalid) => {
if (invalid.length > 0) {
invalid[0].focus();
}
});
},
}
}
</script>
</div>
</div>
</div>
</div>
{% embed '@modals' %}
{% block content %}
<div class="flex flex-col xl:flex-row items-center gap-y-6 h-full">
<div class="h-full flex-1">
<img src="{{ "/img/modals/img.png" | path }}"
alt="Product promo"
class="aspect-[4/3] w-auto h-full object-cover"
loading="lazy"
/>
</div>
<div class="flex flex-col gap-4 m-6 xl:m-8 3xl:m-10 max-md:max-w-[328px] md:w-[424px] xl:w-[432px] 3xl:w-[596px]">
<div class="flex flex-col gap-2">
<h2 class="h4">Sign up and get 10% off</h2>
<p class="h6 text-black/64">We believe in our product, we hope you too ! You need to try it now.</p>
</div>
<form class="flex flex-col gap-2"
action="#"
x-data="Object.assign(hyva.formValidation($el), initForm())"
@submit.prevent="submitForm()"
method="post"
enctype="multipart/form-data"
id="form-validate"
>
<div class="flex items-center">
{% render "@template-input" with {
id: 'email',
name: 'email',
type: 'email',
label: 'Email',
label_floating: true,
required: true,
disabled: false,
color: '',
} %}
{% render "@template-button" with {
buttonType: "submit",
color: 'dark',
type: 'solid',
button_class: 'shrink-0',
label: 'OK'
} %}
</div>
<div class="field field-reserved">
{% include "@template-checkbox" with {
label: "NAOS France (Etat Pur) collecte les données personnelles ci-dessus afin de prendre en charge votre demande. Pour en savoir plus sur l'utilisation de vos données et sur vos droits,<a href='#' class='underline'>cliquez-ici</a>",
type: 'checkbox',
value: 'M.',
input_identifier: 'checkbox',
name: 'checkbox',
checkboxClass: 'items-start text-body-xs',
required: true,
} %}
</div>
</form>
<p class="text-black/72 text-body-xs">To now more about us, check our website</p>
</div>
</div>
<script>
function initForm() {
return {
errors: 0,
hasCaptchaToken: 0,
submitForm() {
this.validate()
.then(() => {
// Do not rename $form, the variable is expected to be declared in the recaptcha output
const $form = document.querySelector('#form-validate');
if (this.errors === 0) {
$form.submit();
}
})
.catch((invalid) => {
if (invalid.length > 0) {
invalid[0].focus();
}
});
},
}
}
</script>
{% endblock %}
{% endembed %}
/* No context defined. */
No notes defined.