Use bootstrap in templates (#24)

nfc-developer · Aug 22, 2022 · 1b4304e · 1b4304e
1 parent 42a41ed
commit 1b4304e
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 36 deletions.
diff --git a/templates/_layout.html b/templates/_layout.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <title>SDM Endpoint</title>
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
+    </head>
+    <body>
+        <div class="container mt-2 mb-2">
+            {% block content %}{% endblock %}
+
+            <div class="mt-2">
+                <div class="alert alert-info">
+                    Source code: <a href="https://github.com/icedevml/sdm-backend">https://github.com/icedevml/sdm-backend</a>
+                </div>
+
+                <div class="alert alert-success">
+                    Do you want to use NFC technology in your project? Not sure how to do it? Send me an email: <a href="mailto:ml@icedev.pl">ml@icedev.pl</a>
+                </div>
+            </div>
+        </div>
+    </body>
+</html>
diff --git a/templates/sdm_info.html b/templates/sdm_info.html
@@ -1,12 +1,7 @@
-<html lang="en">
-<head>
-    <title>SDM Endpoint</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1"/>
-</head>
-<body>
-    <h1>Secure Dynamic Messaging Backend Server Demo</h1>
-    <p><a href="/">Get back to the main page</a></p>
+{% extends "_layout.html" %}
 
+{% block content %}
+    <h1>Secure Dynamic Messaging Backend Server Demo</h1>
     <p>
         <strong style="color: green;">Cryptographic signature validated.</strong>
     </p>
@@ -25,5 +20,8 @@ <h1>Secure Dynamic Messaging Backend Server Demo</h1>
             {% endif %}
         {% endif %}
     </p>
-</body>
-</html>
+    <hr>
+    <p>
+        <a href="/">Back to the main page</a>
+    </p>
+{% endblock %}
diff --git a/templates/sdm_main.html b/templates/sdm_main.html
@@ -1,12 +1,9 @@
-<html lang="en">
-<head>
-    <title>SDM Endpoint</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-</head>
-<body>
+{% extends "_layout.html" %}
+
+{% block content %}
 <h1>Secure Dynamic Messaging Backend Server Example</h1>
-<p>Some of the examples below were taken from <a href="https://www.nxp.com/docs/en/application-note/AN12196.pdf">AN12196: "NTAG 424 DNA and NTAG 424 DNA TagTamper features and
-hints"</a></p>
+<p>Some of the example SDM values below were taken from <a href="https://www.nxp.com/docs/en/application-note/AN12196.pdf">AN12196: "NTAG 424 DNA and NTAG 424 DNA TagTamper features and
+hints"</a>.</p>
 <ul>
     <li><strong>NTAG 424 DNA:</strong> Plaintext tag UID, read counter mirroring with SDMMAC (CMAC)<br>
         <a href="/tagpt?uid=041E3C8A2D6B80&ctr=000006&cmac=4B00064004B0B3D3">
@@ -26,9 +23,5 @@ <h1>Secure Dynamic Messaging Backend Server Example</h1>
     </a><br><br></li>
     <li><a href="/webnfc"><strong>WebNFC</strong> Example: Reading tags directly from Chrome using WebNFC feature</a></li>
 </ul>
+{% endblock %}
 
-<p>
-    Source code: <a href="https://github.com/icedevml/sdm-backend">https://github.com/icedevml/sdm-backend</a>
-</p>
-</body>
-</html>
diff --git a/templates/sdm_webnfc.html b/templates/sdm_webnfc.html
@@ -1,22 +1,17 @@
-<html lang="en">
-<head>
-    <title>SDM Endpoint</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-</head>
-<body>
-<h1>Secure Dynamic Messaging Backend Server Example</h1>
-<p><a href="/">Get back to the main page</a></p>
+{% extends "_layout.html" %}
 
+{% block content %}
+<h1>Secure Dynamic Messaging Backend Server Example</h1>
 <h2>WebNFC Example</h2>
 <p>Chrome for Android supports NDEF scanning directly through JavaScript (since release 89). You can try it out here:</p>
 
-<button id="scanBtn" style="font-size: 24px; font-weight: bold;">Start scan</button>
+<button id="scanBtn" style="font-size: 24px; font-weight: bold;" class="btn btn-primary">Start scan</button>
 
-<p>This feature requires HTTPS in order to work properly.</p>
+<p class="mt-3">This feature requires HTTPS in order to work properly.</p>
 
 <h2>Scan result</h2>
 <p id="scanAttempt">Result will appear here.</p>
-<code id="scanResult"></div>
+<code id="scanResult"></code>
 
 <script>
   var attempt = 0;
@@ -67,5 +62,7 @@ <h2>Scan result</h2>
   }
 });
 </script>
-</body>
-</html>
+
+<hr>
+<a href="/">Back to the main page</a>
+{% endblock %}