Anmeldungsmodal

master
Seph 2024-04-17 22:20:46 +02:00
parent 02bdd79ed4
commit d7328bb087
3 changed files with 12 additions and 6 deletions

View File

@ -15,8 +15,7 @@ module.exports = {
darkMode: 'class', darkMode: 'class',
theme: { theme: {
// Extend the default Tailwind theme. // Extend the default Tailwind theme.
extend: { extend: {},
},
}, },
corePlugins: { corePlugins: {
// Disable Preflight base styles in builds targeting the editor. // Disable Preflight base styles in builds targeting the editor.

View File

@ -11,10 +11,11 @@ use WoWPress\Frontend\ToggleButton;
<div class="border border-<?= $character->color ?> flex flex-row text-slate-500 items-center justify-center p-auto border-s-0"><?= Icon::get('o-minus-circle') ?></div> <div class="border border-<?= $character->color ?> flex flex-row text-slate-500 items-center justify-center p-auto border-s-0"><?= Icon::get('o-minus-circle') ?></div>
<template x-teleport="body"> <template x-teleport="body">
<div x-show="open" class="fixed inset-0 px-2 z-10 overflow-hidden flex items-center justify-center"> <div x-show="open" class="fixed inset-0 px-2 z-10 overflow-hidden flex items-center justify-center">
<div x-show="open" x-on:click="open = false" x-transition:enter="transition-opacity ease-out duration-300" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition-opacity ease-in duration-300" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" class="absolute inset-0 bg-gray-500 bg-opacity-75 transition-opacity"></div> <div x-show="open" x-on:click="open = false" x-transition:enter="transition-opacity ease-out duration-300" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition-opacity ease-in duration-300" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" class="absolute inset-0 bg-deepblue bg-opacity-75 transition-opacity"></div>
<!-- Modal Content --> <!-- Modal Content -->
<div x-show="open" x-transition:enter="transition-transform ease-out duration-300" x-transition:enter-start="transform scale-75" x-transition:enter-end="transform scale-100" x-transition:leave="transition-transform ease-in duration-300" x-transition:leave-start="transform scale-100" x-transition:leave-end="transform scale-75" class="bg-glass shadow overflow-hidden max-w-md w-full sm:w-96 md:w-1/2 lg:w-2/3 xl:w-1/3 z-50"> <div x-show="open" x-transition:enter="transition-transform ease-out duration-300" x-transition:enter-start="transform scale-75" x-transition:enter-end="transform scale-100" x-transition:leave="transition-transform ease-in duration-300" x-transition:leave-start="transform scale-100" x-transition:leave-end="transform scale-75" class="bg-glass shadow overflow-hidden max-w-md w-full sm:w-96 md:w-1/2 lg:w-2/3 xl:w-1/3 z-50">
<!-- Modal Body --> <!-- Modal Body -->
<form action="">
<div class="grid grid-cols-2 gap-auto p-auto"> <div class="grid grid-cols-2 gap-auto p-auto">
<button class="col-span-2 btn btn-<?= $character->color ?> w-full"><img src="<?= $character->classIcon ?>" class="h-8"><?= $character->name ?></button> <button class="col-span-2 btn btn-<?= $character->color ?> w-full"><img src="<?= $character->classIcon ?>" class="h-8"><?= $character->name ?></button>
<div class="col-span-2 text-center">Anwesenheit</div> <div class="col-span-2 text-center">Anwesenheit</div>
@ -93,6 +94,7 @@ use WoWPress\Frontend\ToggleButton;
<span>Status Speichern</span> <span>Status Speichern</span>
</button> </button>
</div> </div>
</form>
</div> </div>
</div> </div>
</template> </template>

View File

@ -98,6 +98,11 @@
"slug": "alliance", "slug": "alliance",
"color": "#f7941e", "color": "#f7941e",
"name": "Allianz" "name": "Allianz"
},
{
"slug": "deepblue",
"color": "#000032",
"name": "Tiefblau"
} }
] ]
}, },