Add Bulma styles

This commit is contained in:
Robbie Antenesse 2018-02-21 09:43:01 -07:00 committed by Robbie Antenesse
parent d7991bb56c
commit a39f39c805
3 changed files with 102 additions and 20 deletions

View File

@ -8,32 +8,102 @@
<title>One-Time Pad Generator</title>
<meta name="description" content="One-Time Pad Generator">
<link rel="stylesheet" href="./node_modules/font-awesome/css/font-awesome.css">
<link rel="stylesheet" href="./node_modules/bulma/css/bulma.css">
<!--[if lt IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<strong>Your Message</strong><br>
<textarea id="input"></textarea><br>
<strong>One-Time Pad</strong><br>
<textarea id="inputPad"></textarea><br>
<em id="inputError" style="color:red"></em>
<button id="encryptInput">Encrypt</button><br>
<br>
<strong>Encrypted Message</strong><br>
<pre id="encrypted"></pre><br>
<br>
<hr>
<br>
<strong>Their Message</strong><br>
<textarea id="encryptedInput"></textarea><br>
<strong>One-Time Pad</strong><br>
<textarea id="encryptedInputPad"></textarea><br>
<button id="decryptInput">Decrypt</button><br>
<br>
<strong>Decrypted Message</strong><br>
<pre id="decrypted"></pre><br>
<div class="section">
<div class="container">
<div class="columns">
<div class="column">
<div class="field">
<label class="label">
Your Message
<div class="control">
<textarea id="input" class="textarea"></textarea>
</div>
</label>
</div>
<div class="field">
<label class="label">
One-Time Pad
<div class="control">
<textarea id="inputPad" class="textarea"></textarea>
</div>
<div class="help is-error" id="inputError"></div>
</label>
</div>
<div class="field">
<div class="control">
<a class="button" id="encryptInput">
<span>
Encrypt
</span>
<span class="icon">
<i class="fa fa-lock"></i>
</span>
</a>
</div>
</div>
<div class="columns">
<div class="column">
<label class="label">Encrypted Message</label>
<div class="box">
<pre id="encrypted"></pre>
</div>
</div>
</div>
</div>
<div class="column">
<div class="field">
<label class="label">
Their Message
<div class="control">
<textarea id="encryptedInput" class="textarea"></textarea>
</div>
</label>
</div>
<div class="field">
<label class="label">
One-Time Pad
<div class="control">
<textarea id="encryptedInputPad" class="textarea"></textarea>
</div>
<div class="help is-error" id="inputError"></div>
</label>
</div>
<div class="field">
<div class="control">
<a class="button" id="decryptInput">
<span>
Decrypt
</span>
<span class="icon">
<i class="fa fa-unlock"></i>
</span>
</a>
</div>
</div>
<div class="columns">
<div class="column">
<label class="label">Decrypted Message</label>
<div class="box">
<pre id="decrypted"></pre>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="./index.js"></script>
</body>

View File

@ -11,5 +11,9 @@
"devDependencies": {
"babel-preset-env": "^1.6.1",
"parcel-bundler": "^1.6.2"
},
"dependencies": {
"bulma": "^0.6.2",
"font-awesome": "^4.7.0"
}
}

View File

@ -821,6 +821,10 @@ builtin-status-codes@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/builtin-status-codes/-/builtin-status-codes-3.0.0.tgz#85982878e21b98e1c66425e03d0174788f569ee8"
bulma@^0.6.2:
version "0.6.2"
resolved "https://registry.yarnpkg.com/bulma/-/bulma-0.6.2.tgz#f4b1d11d5acc51a79644eb0a2b0b10649d3d71f5"
cache-base@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/cache-base/-/cache-base-1.0.1.tgz#0a7f46416831c8b662ee36fe4e7c59d76f666ab2"
@ -1502,6 +1506,10 @@ flatten@^1.0.2:
version "1.0.2"
resolved "https://registry.yarnpkg.com/flatten/-/flatten-1.0.2.tgz#dae46a9d78fbe25292258cc1e780a41d95c03782"
font-awesome@^4.7.0:
version "4.7.0"
resolved "https://registry.yarnpkg.com/font-awesome/-/font-awesome-4.7.0.tgz#8fa8cf0411a1a31afd07b06d2902bb9fc815a133"
for-in@^1.0.2:
version "1.0.2"
resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80"