From e63e315f294ef36013478ddccbeae71b8f6a8c2c Mon Sep 17 00:00:00 2001
From: josh <josh@themainframe.co.uk>
Date: Fri, 2 Feb 2024 15:26:29 +0000
Subject: [PATCH] Update mfa/templates/U2F/Add.html

---
 mfa/templates/U2F/Add.html | 44 +++++++++++++++++++-------------------
 1 file changed, 22 insertions(+), 22 deletions(-)

diff --git a/mfa/templates/U2F/Add.html b/mfa/templates/U2F/Add.html
index ae81563..fc12b89 100644
--- a/mfa/templates/U2F/Add.html
+++ b/mfa/templates/U2F/Add.html
@@ -1,16 +1,7 @@
 {% extends "base.html" %}
 {% load static %}
 {% block head %}
-    <style>
-    #two-factor-steps {
-	border: 1px solid #ccc;
-	border-radius: 3px;
-	padding: 15px;
-}
-    .row{
-        margin: 0px;
-    }
-    </style>
+
     <script src="{% static 'mfa/js/u2f-api.js' %}" type="text/javascript"></script>
     <script type="text/javascript">
     function addToken() {
@@ -43,20 +34,29 @@
     </script>
 {% endblock %}
 {% block content %}
-      <br/>
-    <br/>
-    <div class="container">
+    <div class="col-lg-8 col-md-8 col-12 mx-auto">
+    <div class="page-header min-height-300 border-radius-xl mt-4" style="background-repeat: no-repeat; background-position: cover; background-size:contain; background-image: url('{% static 'img/keys.jpg'%}');">
+      <span class="mask  bg-gradient-primary  opacity-6"></span>
+    </div>
+    <div class="card mx-3 mx-md-4 mt-n6 h-100 z-index-0 fadeIn3 fadeInBottom "  >
+                <div class="card-body">
+                    <br/>
+                    <br/>
+                    <div class="container">
+                
+                        <div id="two-factor-steps">
+                            <div id="res"></div>
+                            <div class="row" align="center">
+                                <h4>Adding {{ method.name}}</h4>
+                            </div>
+                            <div class="row" align="center">
+                                <p style="color: green">Your secure Key should be flashing now, please press on button.</p>
+                            </div>
 
-        <div class="col-md-6 col-md-offset-3" id="two-factor-steps">
-            <div id="res"></div>
-            <div class="row" align="center">
-                <h4>Adding {{ method.name}}</h4>
+                        </div>
+                    </div>
             </div>
-    <div class="row">
-    <p style="color: green">Your secure Key should be flashing now, please press on button.</p>
 
-    </div>
-        </div>
-    </div>
+</div>
     {% include "modal.html" %}
 {% endblock %}
\ No newline at end of file