style

creatorsgarten · Apr 10, 2024 · 91f81c3 · 91f81c3
1 parent ce1d305
commit 91f81c3
Showing 1 changed file with 34 additions and 2 deletions.
diff --git a/index.html b/index.html
@@ -8,6 +8,9 @@
       body {
         background-color: #f0f0f0;
         color: #000;
+        font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
+          Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
+          sans-serif;
       }
       .screen {
         position: fixed;
@@ -16,12 +19,15 @@
         justify-content: center;
         align-items: center;
         flex-direction: column;
+        gap: 1rem;
+        padding: 1.5rem;
       }
       .screen:not([data-showing="true"]) {
         display: none;
       }
       .info {
         color: #555;
+        font-size: 1.8em;
       }
       .red {
         background-color: #c00;
@@ -54,6 +60,16 @@
         font-weight: 700;
         font-size: 3em;
       }
+      success-warning-message {
+        display: block;
+        background: #222;
+        color: #ff6;
+        padding: 1rem;
+      }
+      h1 {
+        text-align: center;
+        font-size: 1.5em;
+      }
     </style>
   </head>
   <body data-debug="false">
@@ -71,12 +87,14 @@
         <div>Tap your NFC tag...</div>
       </div>
       <div id="already" class="screen green">
-        <div>NFC tag already onboarded.</div>
+        <h1>NFC tag already onboarded.</h1>
         <div>Serial number: <span class="sn"></span></div>
+        <div><success-warning-message></success-warning-message></div>
       </div>
       <div id="success" class="screen green">
-        <div>NFC tag has been onboarded.</div>
+        <h1>NFC tag has been onboarded.</h1>
         <div>Serial number: <span class="sn"></span></div>
+        <div><success-warning-message></success-warning-message></div>
       </div>
       <div id="error" class="screen red">
         <div>Something went wrong!</div>
@@ -170,6 +188,20 @@
           alert(`Unable to scan NFC: ${error}`);
         }
       });
+      customElements.define(
+        "success-warning-message",
+        class extends HTMLElement {
+          constructor() {
+            super();
+            this.innerHTML = `
+            <small>
+              <strong>Note:</strong> This NFC tag is still writable.
+              To prevent writing, use the “NFC Tools” app to either permanently lock the tag or set a write password.
+            </small>
+          `;
+          }
+        }
+      );
     </script>
   </body>
 </html>