47 lines
1.9 KiB
Plaintext
47 lines
1.9 KiB
Plaintext
{% extends "base" %}
|
|
{% block title %}{% endblock %}
|
|
{% block body %}
|
|
<div class="hero h-fit">
|
|
<div class="hero-content flex-col text-center mt-48">
|
|
<h1 class="text-5xl font-bold">¿Cuál es tu estación favorita?</h1>
|
|
<form class="card flex-shrink-0 w-full max-w-sm shadow-2xl bg-base-200" id="test-form"
|
|
action="/finish" method="post">
|
|
<div class="card-body">
|
|
<input type="hidden" name="username" id="username" value="{{ username }}" />
|
|
<div class="form-control mt-2">
|
|
<button class="btn btn-ghost normal-case text-lg bg-base-100" id="option-0">Verano</button>
|
|
</div>
|
|
<div class="form-control mt-2">
|
|
<button class="btn btn-ghost normal-case text-lg bg-base-100" id="option-1">Primavera</button>
|
|
</div>
|
|
<div class="form-control mt-2">
|
|
<button class="btn btn-ghost normal-case text-lg bg-base-100" id="option-2">Otoño</button>
|
|
</div>
|
|
<div class="form-control mt-2">
|
|
<button class="btn btn-ghost normal-case text-lg bg-base-100" id="option-3">Invierno</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
function debounce(callback, wait) {
|
|
let timeout;
|
|
return (...args) => {
|
|
clearTimeout(timeout);
|
|
timeout = setTimeout(function () { callback.apply(this, args); }, wait);
|
|
};
|
|
}
|
|
|
|
document.querySelector("#username").onkeyup = debounce(() => {
|
|
if(document.querySelector("#username").value.length != 0)
|
|
{
|
|
document.querySelector("#continue-btn").classList.remove("btn-disabled");
|
|
document.querySelector("#continue-btn").removeAttribute("disabled");
|
|
} else {
|
|
document.querySelector("#continue-btn").classList.add("btn-disabled");
|
|
document.querySelector("#continue-btn").disabled = true;
|
|
}
|
|
}, 100);
|
|
</script>
|
|
{% endblock %} |