60 lines
1.5 KiB
HTML
60 lines
1.5 KiB
HTML
{% extends "templates/web.html" %}
|
|
|
|
{% block title %}{{ _("Book Appointment") }}{% endblock %}
|
|
|
|
{% block page_content %}
|
|
<style>
|
|
.time-slot {
|
|
margin: 0 0;
|
|
border: 0.5px solid #cccccc;
|
|
min-height: 100px;
|
|
}
|
|
|
|
.time-slot:hover {
|
|
background: #ddd;
|
|
}
|
|
|
|
.time-slot.unavailable {
|
|
background: #bbb;
|
|
|
|
color: #777777
|
|
}
|
|
|
|
input[type="radio"] {
|
|
visibility: hidden;
|
|
display: none;
|
|
}
|
|
|
|
.time-slot.selected {
|
|
color: white;
|
|
background: #5e64ff;
|
|
}
|
|
</style>
|
|
<div class="container">
|
|
<div class="text-center mb-5">
|
|
{% if is_holiday %}
|
|
<h3> This day is a holiday</h3>
|
|
{% else %}
|
|
<h3>Pick A Time Slot</h3>
|
|
<h4>Selected date is {{ date }}</h4>
|
|
</div>
|
|
<!-- Start of main content-->
|
|
|
|
<div class="mt-3 justify-content-center">
|
|
<div class="row">
|
|
{% for timeslot in timeslots %}
|
|
<div class="col-md time-slot {% if timeslot.unavailable %}unavailable{% endif %}" id="{{ timeslot.time.time() }}">{{ timeslot.time.time().strftime('%H : %M') }}</div>
|
|
{% endfor %}
|
|
</div>
|
|
<div class="row justify-content-center">
|
|
<div class="col-md-4 align-self-center">
|
|
<button class="form-control mt-5 btn btn-dark" onclick="next()">
|
|
Next
|
|
</button>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
<!-- End of main content -->
|
|
{% endblock %} |