mirror of
https://github.com/NNTmux/newznab-tmux.git
synced 2026-08-28 22:01:33 +00:00
DariusIII
60 lines
3.0 KiB
PHP
60 lines
3.0 KiB
PHP
<!-- Image Modal - Alpine.js CSP Safe -->
|
|
<div x-data="imageModal"
|
|
x-show="open"
|
|
x-cloak
|
|
class="fixed inset-0 z-50 overflow-y-auto"
|
|
aria-labelledby="image-modal-title"
|
|
role="dialog"
|
|
aria-modal="true"
|
|
x-transition:enter="transition ease-out duration-200"
|
|
x-transition:enter-start="opacity-0"
|
|
x-transition:enter-end="opacity-100"
|
|
x-transition:leave="transition ease-in duration-150"
|
|
x-transition:leave-start="opacity-100"
|
|
x-transition:leave-end="opacity-0">
|
|
|
|
<!-- Background overlay -->
|
|
<div class="fixed inset-0 bg-gray-500/75 dark:bg-gray-900/75 transition-opacity"
|
|
aria-hidden="true"
|
|
@click="close()"></div>
|
|
|
|
<!-- Modal panel container -->
|
|
<div class="fixed inset-0 z-10 overflow-y-auto" @click.self="close()">
|
|
<div class="flex min-h-full items-center justify-center p-4 text-center sm:p-0" @click.self="close()">
|
|
<div class="relative transform overflow-hidden rounded-2xl bg-white dark:bg-gray-800 text-left shadow-xl transition-all sm:my-8 w-auto max-w-[90vw]"
|
|
x-transition:enter="transition ease-out duration-200"
|
|
x-transition:enter-start="opacity-0 scale-95"
|
|
x-transition:enter-end="opacity-100 scale-100"
|
|
x-transition:leave="transition ease-in duration-150"
|
|
x-transition:leave-start="opacity-100 scale-100"
|
|
x-transition:leave-end="opacity-0 scale-95">
|
|
<div class="bg-white dark:bg-gray-800 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
|
|
<div class="flex justify-between items-center mb-4">
|
|
<h3 class="text-lg font-medium text-gray-900 dark:text-gray-100" id="image-modal-title" x-text="imageTitle">
|
|
Image Preview
|
|
</h3>
|
|
<button type="button" class="text-gray-400 hover:text-gray-500 dark:hover:text-gray-300" @click="close()" aria-label="Close image preview">
|
|
<i class="fas fa-times text-xl" aria-hidden="true"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Image -->
|
|
<div class="flex justify-center">
|
|
<img :src="imageUrl"
|
|
:alt="imageTitle"
|
|
decoding="async"
|
|
class="max-w-full max-h-[85vh] rounded-lg shadow-lg">
|
|
</div>
|
|
</div>
|
|
<div class="bg-gray-50 dark:bg-gray-700 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
|
|
<button type="button"
|
|
@click="close()"
|
|
class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 dark:border-gray-600 shadow-sm px-4 py-2 bg-white dark:bg-gray-600 text-base font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
|
|
Close
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|