flask_photo_scaling_app/app/templates/qr.html

<style>
.formWarning {
  margin-bottom: 20px;
}

#totpp {
  margin-top: 80px;
  margin-bottom: 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 50px;
  justify-content: space-between;
}

#submitContainer {
  display: flex;
  justify-content: center;
}

#submit {
  margin-top: 30px;
}

#svg_container {
  margin-top: 100px; 
  align-items: center;
}

svg {
  transform: scale(1.5);
}

</style>

{% extends "base.html" %}

{% block content %}
  <div id='svg_container' class='formContainer'>
    <form action='' method="post" novalidate>
      {{ form.hidden_tag() }}
      <p>{{ qr | safe }}</p>
      <p id="totpp">
        {{ form.totp_code.label }}<br>
        {% for error in form.totp_code.errors %}
        <span class="formWarning">[{{error}}]</span>
        {% endfor %}
        {{ form.totp_code(size=6) }}
      </p>
      <p id="submitContainer">{{ form.submit() }}</p>
    </form>
  </div>
{% endblock %}