nathanwoodburn/debug-tools
1
0
Fork 0
generated from nathanwoodburn/python-webserver-template
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Add new UI
All checks were successful
Build Docker / BuildImage (push) Successful in 32s
Details

Browse Source
This commit is contained in:
Nathan Woodburn
2025-02-25 23:04:47 +11:00
parent a26eecf59e
commit 1c7093307a
3 changed files with 133 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
templates/assets/js/index.js
View File

@@ -22,9 +22,10 @@ function getSSL() {
history.pushState(null, null, url);
// Add a loading spinner
document.getElementById("results").innerHTML = `<div class="spinner-border text-primary" role="status">
document.getElementById("ssl-results").innerHTML = `<div style="text-align: center;">
<div class="spinner-border text-primary" role="status">
<span class="visually-hidden">Loading...</span>
</div>`;
</div></div>`;
// Send a GET request to the API
@@ -34,7 +35,7 @@ function getSSL() {
// Check if the request was successful
if (data.success) {
// Display the results
document.getElementById("results").innerHTML = `
document.getElementById("ssl-results").innerHTML = `
<div class="card shadow-sm p-4" style="max-width: 950px;margin: auto;">
<h2 class="mb-3">SSL Certificate Details</h2>
<ul class="list-group">
@@ -93,7 +94,7 @@ function getSSL() {
</button>
</div>
<div class="dnssec-details mt-2" style="display:none;">
<div class="card card-body bg-light"><pre class="mb-0" style="white-space: pre-wrap; text-align: left;">${data.dnssec.errors}${data.dnssec.output}</pre>
<div class="card card-body bg-light"><pre class="mb-0" style="white-space: pre-wrap; text-align: left;">${data.dnssec.output}</pre>
</div>
</div>
</li>
@@ -140,13 +141,13 @@ document.querySelector('.dnssec-toggle').addEventListener('click', function() {
} else {
// Display an error message
document.getElementById("results").innerHTML = `<h2>Error</h2>
document.getElementById("ssl-results").innerHTML = `<h2>Error</h2>
<p>${data.message}</p>`;
}
})
.catch(error => {
// Display an error message
document.getElementById("results").innerHTML = `<h2>Error</h2>
document.getElementById("ssl-results").innerHTML = `<h2>Error</h2>
<p>${error.message}</p>`;
});

57
templates/index.html
View File

@@ -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>