feat: Add new UI

2025-02-25 23:04:47 +11:00
parent a26eecf59e
commit 1c7093307a
3 changed files with 133 additions and 91 deletions
--- a/templates/index.html
+++ b/templates/index.html
@@ -12,16 +12,53 @@
 </head>

 <body>
-    <div class="centre" style="margin-top: 20px;">
-        <h1>HNS Tools</h1>
-        <h2>Nathan.Woodburn/</h2>
+    <div class="container py-5">
+      <!-- Header Section -->
+      <div class="text-center mb-5">
+        <h1 class="display-4 fw-bold text-primary"><a href="/" class="text-decoration-none text-reset">HNS Tools</a></h1> 
+        <h2 class="h4 fw-light text-secondary"><a href="https://nathan.woodburn.au" target="_blank" class="text-decoration-none text-reset">Nathan.Woodburn/</a></h2>
+        <div class="border-bottom mt-4 w-50 mx-auto"></div>
+      </div>
+      
+      <!-- Tool Card -->
+      <div class="row justify-content-center">
+        <div class="col-md-8">
+          <div class="card shadow border-0 rounded-lg mb-5">
+            <div class="card-header bg-primary text-white py-3">
+              <h2 class="h4 mb-0 text-center">SSL/DANE Checker</h2>
+            </div>
+            <div class="card-body p-4">
+              <p class="text-muted mb-4 text-center">Validate SSL certificates and DANE records for any domain</p>
+              
+              <div class="input-group mb-3 shadow-sm">
+                <input 
+                  type="text" 
+                  id="domain" 
+                  placeholder="Enter domain name (e.g., nathan.woodburn firewallet)" 
+                  class="form-control form-control-lg" 
+                  aria-label="Domain to check"
+                >
+                <button class="btn btn-primary px-4" id="ssl">
+                  <i class="bi bi-shield-check me-2"></i>Validate
+                </button>
+              </div>
+              
+              <div class="text-center text-muted small">
+                Enter a complete domain name without any slashes or leading .
+              </div>
+            </div>
+          </div>
+          
+          <!-- Results Container -->
+          <div id="ssl-results" class="animate__animated animate__fadeIn"></div>
+        </div>
+      </div>
+      
+      <!-- Footer -->
+      <footer class="text-center mt-5 pt-4 text-muted">
+        <small>© 2025 <a href="https://nathan.woodburn.au" target="_blank" class="text-decoration-none text-reset">Nathan.Woodburn/</a> - Handshake Name Services Tools</small>
+      </footer>
    </div>
-    <div class="centre">
-        <h2>SSL/DANE Checker</h2>    
-        <input type="text" id="domain" placeholder="Domain to check">
-        <button id="ssl">Validate SSL</button>
-        <div id="results" style="margin-top: 20px;"></div>
-    </div>
-</body>
+  </body>

 </html>