93 lines
		
	
	
		
			3.1 KiB
		
	
	
	
		
			HTML
		
	
	
	
	
	
			
		
		
	
	
			93 lines
		
	
	
		
			3.1 KiB
		
	
	
	
		
			HTML
		
	
	
	
	
	
| <html>
 | |
|   <head>
 | |
|     <title>BlueCrypt</title>
 | |
|     <style>
 | |
|       textarea {
 | |
|         width: 42em;
 | |
|         height: 10em;
 | |
|       }
 | |
|     </style>
 | |
|   </head>
 | |
|   <body>
 | |
|     <h1>BlueCrypt for the Browser</h1>
 | |
|     <p>BlueCrypt is universal crypto for the browser. It's lightweight, fast, and based on native webcrypto.
 | |
|     This means it's easy-to-use crypto in kilobytes, not megabytes.</p>
 | |
| 
 | |
|     <h2>Keypair Generation</h2>
 | |
|     <form class="js-keygen">
 | |
|       <p>Key Type:</p>
 | |
|       <div>
 | |
|         <input type="radio" id="-ktyEC"
 | |
|          name="kty" value="EC" checked>
 | |
|         <label for="-ktyEC">ECDSA</label>
 | |
|         <input type="radio" id="-ktyRSA"
 | |
|          name="kty" value="RSA">
 | |
|         <label for="-ktyRSA">RSA</label>
 | |
|       </div>
 | |
|       <div class="js-ec-opts">
 | |
|         <p>EC Options:</p>
 | |
|         <input type="radio" id="-crv2"
 | |
|          name="ec-crv" value="P-256" checked>
 | |
|         <label for="-crv2">P-256</label>
 | |
|         <input type="radio" id="-crv3"
 | |
|          name="ec-crv" value="P-384">
 | |
|         <label for="-crv3">P-384</label>
 | |
|         <!-- input type="radio" id="-crv5"
 | |
|          name="ec-crv" value="P-521">
 | |
|         <label for="-crv5">P-521</label -->
 | |
|       </div>
 | |
|       <div class="js-rsa-opts" hidden>
 | |
|         <p>RSA Options:</p>
 | |
|         <input type="radio" id="-modlen2"
 | |
|          name="rsa-len" value="2048" checked>
 | |
|         <label for="-modlen2">2048</label>
 | |
|         <input type="radio" id="-modlen3"
 | |
|          name="rsa-len" value="3072">
 | |
|         <label for="-modlen3">3072</label>
 | |
|         <input type="radio" id="-modlen5"
 | |
|          name="rsa-len" value="4096">
 | |
|         <label for="-modlen5">4096</label>
 | |
|       </div>
 | |
|       <button class="js-generate" hidden>Generate</button>
 | |
|     </form>
 | |
| 
 | |
|     <h2>ACME Account</h2>
 | |
|     <form class="js-acme-account">
 | |
|       <label for="-acmeEmail">Email:</label>
 | |
|       <input class="js-email" type="email" id="-acmeEmail">
 | |
|       <button class="js-create-account" hidden>Create Account</button>
 | |
|     </form>
 | |
| 
 | |
|     <div class="js-loading" hidden>Loading</div>
 | |
| 
 | |
|     <details class="js-toc-jwk" hidden>
 | |
|       <summary>JWK Keypair</summary>
 | |
|       <pre><code class="js-jwk"> </code></pre>
 | |
|     </details>
 | |
|     <details class="js-toc-der" hidden>
 | |
|       <summary>DER Binary</summary>
 | |
|       <pre><code class="js-der"> </code></pre>
 | |
|     </details>
 | |
|     <details class="js-toc-pem" hidden>
 | |
|       <summary>PEM (base64-encoded DER)</summary>
 | |
|       <textarea class="js-input-pem" readonly></textarea>
 | |
|     </details>
 | |
|     <details class="js-toc-acme-account-request" hidden>
 | |
|       <summary>ACME Account Request</summary>
 | |
|       <pre><code class="js-acme-account-request"> </code></pre>
 | |
|     </details>
 | |
|     <details class="js-toc-acme-account-response" hidden>
 | |
|       <summary>ACME Account Response</summary>
 | |
|       <pre><code class="js-acme-account-response"> </code></pre>
 | |
|     </details>
 | |
|     <script src="./lib/bluecrypt-encoding.js"></script>
 | |
|     <script src="./lib/ecdsa.js"></script>
 | |
|     <script src="./lib/asn1-packer.js"></script>
 | |
|     <script src="./lib/x509.js"></script>
 | |
|     <script src="./lib/rsa.js"></script>
 | |
|     <script src="./lib/keypairs.js"></script>
 | |
|     <script src="./lib/acme.js"></script>
 | |
|     <script src="./app.js"></script>
 | |
|   </body>
 | |
| </html>
 |