Improvement: Add frontend, Many more improvements and small bugfixes

Bump to version 0.1.0

templates/write_tag.html

@@ -0,0 +1,62 @@
+{% extends 'base.html' %}
+
+{% block content %}
+<!-- Page Title -->
+<div class="text-center mb-4">
+  <h1 class="fw-bold">NFC Write Process</h1>
+  <p class="text-muted">Follow the steps below to write data to your NFC tag.</p>
+</div>
+
+<!-- Instruction Section -->
+<div class="card shadow-sm mb-4">
+  <div class="card-body">
+    <h5 class="card-title mb-3">
+      <i class="bi bi-info-circle text-info me-2"></i> Instructions
+    </h5>
+    <ul class="list-unstyled">
+      <li><i class="bi bi-check-circle-fill text-success me-2"></i> Attach NFC tag to spool so you can reach it with the
+        top of your phone.
+      </li>
+      <li><i class="bi bi-wifi text-primary me-2"></i> Allow NFC usage if prompted.</li>
+      <li><i class="bi bi-phone text-secondary me-2"></i> Bring the tag close to your phone when prompted.</li>
+    </ul>
+  </div>
+</div>
+
+<!-- Action Button -->
+<div class="text-center mb-3">
+  <button id="write" class="btn btn-lg btn-primary shadow" onclick="writeNFC()">
+    <i class="bi bi-nfc me-2"></i> Start Writing NFC Tag
+  </button>
+</div>
+
+<!-- Message Display -->
+<div id="message" class="alert alert-secondary text-center" role="alert">
+  Press "Start Writing NFC Tag" to begin.
+</div>
+
+<script type="text/javascript">
+  function writeNFC() {
+    // Update user message
+    const messageBox = document.getElementById("message");
+    messageBox.className = "alert alert-info text-center";
+    messageBox.textContent = "Bring NFC Tag closer to the phone...";
+    if ('NDEFReader' in window) {
+      const ndef = new NDEFReader();
+      // Attempt to write the NFC tag
+      ndef.write({
+        records: [{recordType: "url", data: "{{ BASE_URL }}/spool_info?tag_id={{ myuuid }}"}],
+      }).then(() => {
+        messageBox.className = "alert alert-success text-center";
+        messageBox.textContent = "✅ Message successfully written to the NFC tag!";
+      }).catch(error => {
+        messageBox.className = "alert alert-danger text-center";
+        messageBox.textContent = "❌ Write failed. Please try again: " + error;
+      });
+    } else {
+      messageBox.className = "alert alert-danger text-center";
+      messageBox.textContent = "Your browser or device does not support NFC writing. Try Android Phone with Chrome browser.";
+    }
+  }
+</script>
+{% endblock %}