116 lines
3.7 KiB
HTML
116 lines
3.7 KiB
HTML
|
|
|
|
<div
|
|
id="dynamicModal"
|
|
class="fixed inset-0 z-50 hidden overflow-y-auto"
|
|
aria-labelledby="dynamicModalLabel"
|
|
role="dialog"
|
|
aria-modal="true"
|
|
>
|
|
|
|
<div class="fixed inset-0 bg-black/75 backdrop-blur-sm transition-opacity"></div>
|
|
|
|
|
|
<div class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
|
|
|
|
|
|
<div
|
|
class="relative transform overflow-hidden rounded-2xl bg-white dark:bg-gray-800 text-left shadow-2xl transition-all sm:my-8 sm:w-full sm:max-w-lg
|
|
animate-[modal-open_0.3s_ease-out]"
|
|
>
|
|
|
|
<div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
|
|
<div class="flex items-center justify-between">
|
|
<h3
|
|
class="text-xl font-semibold text-gray-900 dark:text-white"
|
|
id="dynamicModalLabel"
|
|
>
|
|
Development In Progress.
|
|
</h3>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="px-6 py-4">
|
|
<div class="text-gray-600 dark:text-gray-300">
|
|
The Scratch Extension and the backend are both in development and should not be used already for production games.
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="px-6 py-4 border-t border-gray-200 dark:border-gray-700 flex flex-row-reverse gap-3">
|
|
<button
|
|
type="button"
|
|
class="button-confirm inline-flex px-3 py-2 rounded-xl ring-1 ring-inset ring-gray-300 dark:ring-gray-600 bg-gray-100 dark:bg-gray-700 hover:bg-red-400 dark:hover:bg-red-400 hover:text-white hover:font-bold dark:text-white transition-all duration-200"
|
|
>
|
|
I agree
|
|
</button>
|
|
<button
|
|
type="button"
|
|
class="button-dismiss inline-flex px-3 py-2 rounded-xl ring-1 ring-inset ring-gray-300 dark:ring-gray-600 bg-gray-100 dark:bg-gray-700 hover:bg-red-400 dark:hover:bg-red-400 hover:text-white hover:font-bold dark:text-white transition-all duration-200"
|
|
>
|
|
I disagree
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
@keyframes modal-open {
|
|
from {
|
|
opacity: 0;
|
|
transform: scale(0.95) translateY(10px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: scale(1) translateY(0);
|
|
}
|
|
}
|
|
|
|
.modal-open {
|
|
display: block !important;
|
|
}
|
|
|
|
|
|
@keyframes modal-close {
|
|
from {
|
|
opacity: 1;
|
|
transform: scale(1) translateY(0);
|
|
}
|
|
to {
|
|
opacity: 0;
|
|
transform: scale(0.95) translateY(10px);
|
|
}
|
|
}
|
|
|
|
.modal-closing {
|
|
animation: modal-close 0.2s ease-out forwards;
|
|
}
|
|
</style>
|
|
|
|
<script type="text/javascript" onload>
|
|
|
|
|
|
$(`#dynamicModal`)[0].classList.remove("hidden");
|
|
|
|
|
|
$(`.button-confirm`)[0].addEventListener('click', function() {
|
|
$(`#dynamicModal`)[0].classList.add('modal-closing');
|
|
setTimeout(() => {
|
|
|
|
|
|
$("#main").empty();
|
|
showLoadingOverlay();
|
|
|
|
|
|
setTimeout(() => {
|
|
$("#main").append(`<iframe class="mx-auto min-h-screen w-full" frameborder="0" scrolling="no" src="/hosted/Countdown.html" allowfullscreen="true" allow="autoplay; clipboard-write;" referrerpolicy="same-origin"></iframe>`);
|
|
hideLoadingOverlay();
|
|
$("#modalContainer").empty();
|
|
}, 1000);
|
|
}, 100);
|
|
});
|
|
$(`.button-dismiss`)[0].addEventListener('click', closeModal);
|
|
|
|
</script> |