Files
utools/frontend/app/ssl-check.html
2025-03-29 19:37:27 +01:00

87 lines
4.2 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SSL Certificate Check</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
body { padding-top: 60px; } /* Adjust based on fixed navbar height */
.result-box { margin-top: 20px; white-space: pre-wrap; word-wrap: break-word; font-family: monospace; }
.loading-spinner { display: none; }
.evaluation-summary { font-weight: bold; }
.score-bar { height: 20px; background-color: #e9ecef; border-radius: .25rem; overflow: hidden; }
.score-bar-inner { height: 100%; background-color: #dc3545; transition: width 0.5s ease-in-out; } /* Start red */
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<div class="container-fluid">
<a class="navbar-brand" href="/app/index.html"><i class="fas fa-network-wired"></i> Network Tools</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="/app/index.html">IP Info</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/app/dns-lookup.html">DNS Lookup</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/app/whois-lookup.html">WHOIS Lookup</a>
</li>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="/app/ssl-check.html">SSL Check</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/app/subnet-calculator.html">Subnet Calculator</a>
</li>
<!-- Add other tools here -->
</ul>
</div>
</div>
</nav>
<div class="container mt-4">
<h1><i class="fas fa-shield-alt"></i> SSL Certificate Check</h1>
<p>Enter a domain name to check its SSL/TLS certificate details and validity.</p>
<form id="ssl-check-form">
<div class="input-group mb-3">
<input type="text" class="form-control" id="domain-input" placeholder="e.g., google.com" required>
<button class="btn btn-primary" type="submit" id="submit-button">
Check Certificate
</button>
</div>
<div class="loading-spinner text-center mt-2">
<div class="spinner-border text-primary" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
</form>
<div id="result" class="result-box bg-light p-3 rounded border" style="display: none;">
<h2>Result for <span id="result-domain" class="fw-bold"></span></h2>
<div id="evaluation" class="mb-3">
<h4>Evaluation</h4>
<div class="score-bar mb-2">
<div id="score-bar-inner" class="score-bar-inner"></div>
</div>
<p>Score: <span id="score-value" class="fw-bold"></span>/10</p>
<p class="evaluation-summary" id="evaluation-summary"></p>
</div>
<div id="certificate-details">
<h4>Certificate Details</h4>
<pre id="cert-output"></pre>
</div>
<div id="error-message" class="alert alert-danger" style="display: none;"></div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="/app/ssl-check.js"></script>
</body>
</html>