mirror of
https://github.com/pacnpal/thrillwiki_django_no_react.git
synced 2025-12-20 05:31:09 -05:00
80 lines
3.3 KiB
HTML
80 lines
3.3 KiB
HTML
<script>
|
|
document.addEventListener('alpine:init', () => {
|
|
Alpine.data('addRideModal', () => ({
|
|
isOpen: false,
|
|
|
|
openModal() {
|
|
this.isOpen = true;
|
|
},
|
|
|
|
closeModal() {
|
|
this.isOpen = false;
|
|
},
|
|
|
|
handleBackdropClick(event) {
|
|
if (event.target === event.currentTarget) {
|
|
this.closeModal();
|
|
}
|
|
}
|
|
}));
|
|
});
|
|
</script>
|
|
|
|
<div x-data="addRideModal()">
|
|
<!-- Add Ride Modal -->
|
|
<div x-show="isOpen"
|
|
x-transition:enter="transition ease-out duration-300"
|
|
x-transition:enter-start="opacity-0"
|
|
x-transition:enter-end="opacity-100"
|
|
x-transition:leave="transition ease-in duration-200"
|
|
x-transition:leave-start="opacity-100"
|
|
x-transition:leave-end="opacity-0"
|
|
@click="handleBackdropClick($event)"
|
|
@keydown.escape.window="closeModal()"
|
|
class="fixed inset-0 z-50 overflow-y-auto"
|
|
aria-labelledby="modal-title"
|
|
role="dialog"
|
|
aria-modal="true"
|
|
style="display: none;">
|
|
<div class="flex items-center justify-center min-h-screen p-4">
|
|
<!-- Background overlay -->
|
|
<div class="fixed inset-0 transition-opacity bg-gray-500 bg-opacity-75" aria-hidden="true"></div>
|
|
|
|
<!-- Modal panel -->
|
|
<div class="relative w-full max-w-3xl p-6 mx-auto bg-white rounded-lg shadow-xl dark:bg-gray-800"
|
|
x-transition:enter="transition ease-out duration-300 transform"
|
|
x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
|
x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
|
|
x-transition:leave="transition ease-in duration-200 transform"
|
|
x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
|
|
x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95">
|
|
<div class="mb-6">
|
|
<h2 class="text-2xl font-bold text-gray-900 dark:text-white">
|
|
Add Ride at {{ park.name }}
|
|
</h2>
|
|
<button @click="closeModal()"
|
|
class="absolute top-4 right-4 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
|
|
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<div id="modal-content">
|
|
{% include "rides/partials/ride_form.html" with modal=True %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modal Toggle Button -->
|
|
<button type="button"
|
|
@click="openModal()"
|
|
class="inline-flex items-center px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-lg hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600">
|
|
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
|
|
</svg>
|
|
Add Ride
|
|
</button>
|
|
</div>
|