bmallen
/
tools


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143
							<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>{{ .title }}</title>
    <link rel="stylesheet" href="/static/styles.css" />
  </head>
  <body>
    <div class="page-shell">
      <aside class="sidebar">
        <div>
          <p class="eyebrow">Toolkit</p>
          <h1>Tools</h1>
          <p class="intro">
            <!-- Generate local TLS material, inspect DNS records, and fetch live server certificates. -->
          </p>
        </div>
        <nav class="tool-menu" aria-label="Tool menu">
          <button class="tool-button active" data-tool="tls-generator">TLS Generator</button>
          <button class="tool-button" data-tool="dns-lookup">DNS Lookup</button>
          <button class="tool-button" data-tool="tsl-check">TSL Check</button>
          <button class="tool-button" data-tool="pem-check">PEM Check</button>
        </nav>
      </aside>

      <main class="content">
        <section class="panel active" id="tls-generator">
          <div class="panel-header">
            <div>
              <p class="eyebrow">Certificate Tool</p>
              <h2>TLS Generator</h2>
            </div>
            <p class="panel-copy">Create a self-signed certificate and private key for local testing.</p>
          </div>
          <form id="tls-form" class="tool-form">
            <label>
              Common Name
              <input type="text" name="commonName" placeholder="example.local" required />
            </label>
            <label>
              Organization
              <input type="text" name="organization" placeholder="Example Corp" />
            </label>
            <label>
              Organizational Unit
              <input type="text" name="organizationalUnit" placeholder="Engineering" />
            </label>
            <label>
              Locality
              <input type="text" name="locality" placeholder="DC" />
            </label>
            <label>
              State / Province
              <input type="text" name="state" placeholder="DC" />
            </label>
            <label>
              Country
              <input type="text" name="country" placeholder="US" />
            </label>
            <label>
              DNS Names
              <input type="text" name="dnsNames" placeholder="example.local, www.example.local" />
            </label>
            <label>
              Valid Days
              <input type="number" name="validDays" min="1" value="365" />
            </label>
            <label>
              Key Size
              <select name="keySize">
                <option value="2048" selected>2048-bit RSA</option>
                <option value="3072">3072-bit RSA</option>
                <option value="4096">4096-bit RSA</option>
              </select>
            </label>
            <div class="form-actions">
              <button type="submit" name="action" value="generate">Generate Certificate</button>
              <button type="submit" name="action" value="download" class="secondary-button">Generate and Download</button>
            </div>
          </form>
          <div id="tls-result" class="result-card empty">Run the generator to view the PEM output and metadata.</div>
        </section>

        <section class="panel" id="dns-lookup">
          <div class="panel-header">
            <div>
              <p class="eyebrow">Resolver Tool</p>
              <h2>DNS Lookup</h2>
            </div>
            <p class="panel-copy">Query common DNS record types for a hostname.</p>
          </div>
          <form id="dns-form" class="tool-form">
            <label>
              Hostname
              <input type="text" name="host" placeholder="openai.com" required />
            </label>
            <button type="submit">Lookup Records</button>
          </form>
          <div id="dns-result" class="result-card empty">Lookups will show A/AAAA, CNAME, MX, NS, and TXT records here.</div>
        </section>

        <section class="panel" id="tsl-check">
          <div class="panel-header">
            <div>
              <p class="eyebrow">Inspection Tool</p>
              <h2>TSL Check</h2>
            </div>
            <p class="panel-copy">Connect to a TLS endpoint and display the negotiated certificate.</p>
          </div>
          <form id="tsl-form" class="tool-form">
            <label>
              URL
              <input type="text" name="url" placeholder="https://example.com" required />
            </label>
            <button type="submit">Retrieve Certificate</button>
          </form>
          <div id="tsl-result" class="result-card empty">Certificate details and PEM output will appear after a check.</div>
        </section>

        <section class="panel" id="pem-check">
          <div class="panel-header">
            <div>
              <p class="eyebrow">Parser Tool</p>
              <h2>PEM Check</h2>
            </div>
            <p class="panel-copy">Paste a PEM-encoded certificate, CSR, private key, or public key to inspect it.</p>
          </div>
          <form id="pem-form" class="tool-form">
            <label>
              PEM Content
              <textarea name="pem" rows="16" placeholder="-----BEGIN CERTIFICATE-----&#10;...&#10;-----END CERTIFICATE-----" required></textarea>
            </label>
            <button type="submit">Inspect PEM</button>
          </form>
          <div id="pem-result" class="result-card empty">Parsed PEM blocks and metadata will appear here.</div>
        </section>
      </main>
    </div>

    <script src="/static/app.js" defer></script>
  </body>
</html>