ba-thesis/app/medwings/templates/medwings/mews-init.html

51 lines
2.3 KiB
HTML

{% extends 'core/base.html' %}
{% load static %}
{% load widget_tweaks %}
{% block title %}
Medwings | Take a measurement
{% endblock title %}
{% block content %}
<div class="flex flex-col justify-center items-center gap-6 sm:gap-12 py-4 mx-4 max-w-xl">
<h1>Record your health status</h1>
<div class="flex flex-col justify-center items-center gap-2 call-to-action-box">
<div class="flex justify-center items-center gap-4">
<img class="max-h-24 max-w-24 drop-shadow-lg saturate-50" src="{% static 'medwings/images/devices/withings-bpm-core.webp' %}" alt="A Withings BPM core.">
<img class="max-h-24 max-w-24 drop-shadow-lg saturate-50" src="{% static 'medwings/images/devices/withings-thermo.webp' %}" alt="A Withings Thermo.">
<img class="max-h-24 max-w-24 drop-shadow-lg saturate-50" src="{% static 'medwings/images/devices/withings-scanwatch.webp' %}" alt="A Withings Scanwatch.">
</div>
<p class="text-center sm:text-start font-semibold text-lg">Before you begin, please have your Withings devices ready for taking measurements.</p>
</div>
<form method="post">
{% csrf_token %}
<fieldset class="flex flex-col gap-4 items-center">
<legend>To get started, please answer the following question:</legend>
{% if respiration_score_form.non_field_errors %}
<div class="flex flex-col gap-2 status-message error">
{% for error in respiration_score_form.non_field_errors %}
<p class="error">{{ error }}</p>
{% endfor %}
</div>
{% endif %}
<div class="flex flex-col sm:flex-row gap-x-2">
<label class="font-semibold" for="{{ respiration_score_form.value_severity.id_for_label }}">
Are you experiencing any shortness of breath?
</label>
{% render_field respiration_score_form.value_severity|add_error_class:"error" %}
</div>
{% if respiration_score_form.value_severity.errors %}
<div class="flex flex-col gap-2 status-message error">
{% for error in respiration_score_form.value_severity.errors %}
<p class="error">{{ error }}</p>
{% endfor %}
</div>
{% endif %}
<button class="btn" type="submit">Continue</button>
</fieldset>
</form>
</div>
{% endblock content %}