Pull out CSS; add output form

parent 046c6d63
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<meta http-equiv='X-UA-Compatible' content='ie=edge'>
<title>Hypha Aspect Setup Spike 1</title>
<link rel='stylesheet' href='style.css'>
<script src='sodium.js'></script>
<script src='keys.js'></script>
<style>
html {
font-family: sans-serif;
}
input {
background-color: white;
color: gray;
font-size: 1em;
}
fieldset {
display: grid;
grid-template-columns: 100px 1fr 100px;
}
</style>
</head>
<body>
<h1>Hypha Aspect Setup Spike 1</h1>
......@@ -30,11 +15,25 @@
<form id='passwordForm'>
<fieldset>
<label>Choose a password:</label>
<input id='password'>
<input type='text' id='password'>
<button id='submit' type='submit'>Submit</button>
</fieldset>
</form>
<form id='outputForm'>
<label for='salt'>Salt:</label>
<input type='text' id='salt'>
<label for='nonce'>Nonce:</label>
<input type='text' id='nonce'>
<label for='publicKey'>Public key:</label>
<textarea id='publicKey'></textarea>
<label for='privateKey'>Private key:</label>
<textarea id='privateKey'></textarea>
</form>
<script>
// Main
document.addEventListener('DOMContentLoaded', () => {
......
......@@ -9,6 +9,7 @@ const options = {
const routes = {
'/': 'index.html',
'/style.css': 'style.css',
'/keys.js': 'keys.js',
'/sodium.js': 'sodium.js',
'/favicon.ico': 'favicon.ico'
......
* {
box-sizing: border-box;
}
html {
font-family: sans-serif;
}
form {
width: 100%;
padding: 2em;
}
fieldset {
display: grid;
grid-template-columns: 100px 1fr 100px;
border: 0;
padding: 0;
margin: 0;
}
input, textarea {
font-size: 1em;
border: 1px solid black;
padding: 0.5em;
}
#outputForm {
overflow: auto;
}
#outputForm label {
display: block;
}
#outputForm input, textarea {
width: 100%;
margin-bottom: 1em;
}
#outputForm textArea {
height: 7em;
background-color: white;
color: black;
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment