goodlooking 2FA page

hiboo/account/templates/account_totp.html

 {% extends "base.html" %}
 
-{% block title %}{% trans %}Two-factor authentication with Time-based One-Time Password (TOTP){% endtrans %}{% endblock %}
+{% block title %} {% trans %}Two-factor authentication{% endtrans %} {% endblock %}
+{% block subtitle %}{% trans %}with Time-based One-Time Password (TOTP){% endtrans %}{% endblock %}
 
 {% block content %}
 {% if infos == {} %}
-<p>{% trans %}Two-factor authentication with Time-based One-Time Passowrd is not setup.{% endtrans %}</p>
+
+<div class="col">
+  <blockquote class="quote-warning">
+    <h5>{% trans %}Not configured{% endtrans %}</h5>
+    <p>{% trans %}Two-factor authentication with Time-based One-Time Passowrd is not setup.{% endtrans %}
+    <br>
+    {% trans %}Click on "Setup 2FA" to get started.{% endtrans %}
+    </p>
+  </blockquote>
+</div>
+
 {% else %}
-<p>{% trans %}Scan this QR code or use text informations{% endtrans %}</p>
-<img src="data:image/png;base64,{{ infos.qr }}" width=300 height=300>
-<pre>
-{% trans %}Secret key:{% endtrans %} <code>{{ infos.key }}</code>
-{% trans %}Name:{% endtrans %} <code>{{ infos.name }}</code>
-{% trans %}Issuer:{% endtrans %} <code>{{ infos.issuer }}</code>
-</pre>
+
+<blockquote class="quote-info">
+  <h5>{% trans %}Howto{% endtrans %}</h5>
+  <p>{% trans %}Scan this QR code or use text informations{% endtrans %}</p>
+</blockquote>
+<div class="row">
+  <div class="col-md-6 col text-center">
+    <img src="data:image/png;base64,{{ infos.qr }}" class="rounded mb-4" width=250 height=250>
+  </div>
+  <div class="col-md-6 col">
+    <ul class="list-group">
+      <li class="list-group-item">{% trans %}Secret key: {% endtrans %}<code>{{ infos.key }}</code></li>
+      <li class="list-group-item">{% trans %}Name: {% endtrans %}<code>{{ infos.name }}</code></li>
+      <li class="list-group-item">{% trans %}Issuer: {% endtrans %}<code>{{ infos.issuer }}</code></li>
+    </ul>
+  </div>
+</div>
+
 {% endif %}
 {% endblock %}
 
 {% block actions %}
 {% if infos == {} %}
+
 <a href="{{ url_for(".totp_setup") }}" class="btn btn-info">{% trans %}Setup 2FA{% endtrans %}</a>
 {% else %}
-<a href="{{ url_for(".totp_delete") }}" class="btn btn-info">{% trans %}Delete 2FA{% endtrans %}</a>
+<a href="{{ url_for(".totp_delete") }}" class="btn btn-warning">{% trans %}Delete 2FA{% endtrans %}</a>
+
 {% endif %}
 {% endblock %}