forked from hacker_marc/spamhasi
133 lines
6.1 KiB
HTML
133 lines
6.1 KiB
HTML
<div
|
|
x-show="isOpferAdd"
|
|
class="fixed inset-0 flex items-center justify-center p-5 overflow-y-auto z-99999"
|
|
>
|
|
<div
|
|
class="modal-close-btn fixed inset-0 h-full w-full bg-gray-400/50 backdrop-blur-[32px]"
|
|
></div>
|
|
<div
|
|
@click.outside="isOpferAdd = false"
|
|
class="no-scrollbar relative w-full max-w-[700px] overflow-y-auto rounded-3xl bg-white p-4 dark:bg-gray-900 lg:p-11"
|
|
>
|
|
<!-- close btn -->
|
|
<button
|
|
@click="isOpferAdd = false"
|
|
class="transition-color absolute right-5 top-5 z-999 flex h-11 w-11 items-center justify-center rounded-full bg-gray-100 text-gray-400 hover:bg-gray-200 hover:text-gray-600 dark:bg-gray-700 dark:bg-white/[0.05] dark:text-gray-400 dark:hover:bg-white/[0.07] dark:hover:text-gray-300"
|
|
>
|
|
<svg
|
|
class="fill-current"
|
|
width="24"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
fill-rule="evenodd"
|
|
clip-rule="evenodd"
|
|
d="M6.04289 16.5418C5.65237 16.9323 5.65237 17.5655 6.04289 17.956C6.43342 18.3465 7.06658 18.3465 7.45711 17.956L11.9987 13.4144L16.5408 17.9565C16.9313 18.347 17.5645 18.347 17.955 17.9565C18.3455 17.566 18.3455 16.9328 17.955 16.5423L13.4129 12.0002L17.955 7.45808C18.3455 7.06756 18.3455 6.43439 17.955 6.04387C17.5645 5.65335 16.9313 5.65335 16.5408 6.04387L11.9987 10.586L7.45711 6.04439C7.06658 5.65386 6.43342 5.65386 6.04289 6.04439C5.65237 6.43491 5.65237 7.06808 6.04289 7.4586L10.5845 12.0002L6.04289 16.5418Z"
|
|
fill=""
|
|
/>
|
|
</svg>
|
|
</button>
|
|
<div class="px-2 pr-14">
|
|
<h4 class="mb-2 text-2xl font-semibold text-gray-800 dark:text-white/90">
|
|
Ein neues Opfer hinzufügen!
|
|
</h4>
|
|
<p class="mb-6 text-sm text-gray-500 dark:text-gray-400 lg:mb-7">
|
|
Füge hier ein neues Opfer hinzu, damit Spamhasi was zu tun hat!
|
|
</p>
|
|
</div>
|
|
<form class="flex flex-col" action="/api/opfer/add.php" method="post">
|
|
<div class="custom-scrollbar h-[450px] overflow-y-auto px-2">
|
|
<div class="mt-7">
|
|
<div class="grid grid-cols-1 gap-x-6 gap-y-5 lg:grid-cols-2">
|
|
<div class="col-span-2 lg:col-span-1">
|
|
<label
|
|
class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400"
|
|
>
|
|
Name
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value=""
|
|
name="name"
|
|
class="dark:bg-dark-900 h-11 w-full rounded-lg border border-gray-300 bg-transparent bg-none px-4 py-2.5 text-sm text-gray-800 shadow-theme-xs placeholder:text-gray-400 focus:border-brand-300 focus:outline-hidden focus:ring-3 focus:ring-brand-500/10 dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 dark:focus:border-brand-800"
|
|
/>
|
|
</div>
|
|
|
|
<div class="col-span-2 lg:col-span-1">
|
|
<label
|
|
class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400"
|
|
>
|
|
Email Addresse
|
|
</label>
|
|
<input
|
|
type="text"
|
|
name="mail"
|
|
value=""
|
|
class="dark:bg-dark-900 h-11 w-full appearance-none rounded-lg border border-gray-300 bg-transparent bg-none px-4 py-2.5 text-sm text-gray-800 shadow-theme-xs placeholder:text-gray-400 focus:border-brand-300 focus:outline-hidden focus:ring-3 focus:ring-brand-500/10 dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 dark:focus:border-brand-800"
|
|
/>
|
|
</div>
|
|
|
|
<div class="col-span-2 lg:col-span-1">
|
|
<label
|
|
class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400"
|
|
>
|
|
Anzahl der Mails
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value=""
|
|
class="dark:bg-dark-900 h-11 w-full appearance-none rounded-lg border border-gray-300 bg-transparent bg-none px-4 py-2.5 text-sm text-gray-800 shadow-theme-xs placeholder:text-gray-400 focus:border-brand-300 focus:outline-hidden focus:ring-3 focus:ring-brand-500/10 dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 dark:focus:border-brand-800"
|
|
/>
|
|
</div>
|
|
|
|
<div x-data="{ switcherToggle: false }">
|
|
<label
|
|
for="toggle1"
|
|
class="flex cursor-pointer items-center gap-3 text-sm font-medium text-gray-700 select-none dark:text-gray-400"
|
|
>
|
|
<div class="relative">
|
|
<input
|
|
type="checkbox"
|
|
id="toggle1"
|
|
name="enabled"
|
|
class="sr-only"
|
|
@change="switcherToggle = !switcherToggle"
|
|
/>
|
|
<div
|
|
class="block h-6 w-11 rounded-full"
|
|
:class="switcherToggle ? 'bg-brand-500 dark:bg-brand-500' : 'bg-gray-200 dark:bg-white/10'"
|
|
></div>
|
|
<div
|
|
:class="switcherToggle ? 'translate-x-full': 'translate-x-0'"
|
|
class="shadow-theme-sm absolute top-0.5 left-0.5 h-5 w-5 rounded-full bg-white duration-300 ease-linear"
|
|
></div>
|
|
</div>
|
|
|
|
Aktiviert
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-3 px-2 mt-6 lg:justify-end">
|
|
<button
|
|
@click="isOpferAdd = false"
|
|
type="button"
|
|
class="flex w-full justify-center rounded-lg border border-gray-300 bg-white px-4 py-2.5 text-sm font-medium text-gray-700 hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-white/[0.03] sm:w-auto"
|
|
>
|
|
Später
|
|
</button>
|
|
<button
|
|
type="submit"
|
|
class="flex w-full justify-center rounded-lg bg-brand-500 px-4 py-2.5 text-sm font-medium text-white hover:bg-brand-600 sm:w-auto"
|
|
>
|
|
Hinzufügen
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|