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> <title>One-Time Pad Generator</title>
<meta name="description" content="One-Time Pad Generator"> <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]> <!--[if lt IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
<![endif]--> <![endif]-->
</head> </head>
<body> <body>
<strong>Your Message</strong><br> <div class="section">
<textarea id="input"></textarea><br> <div class="container">
<strong>One-Time Pad</strong><br> <div class="columns">
<textarea id="inputPad"></textarea><br> <div class="column">
<em id="inputError" style="color:red"></em> <div class="field">
<button id="encryptInput">Encrypt</button><br> <label class="label">
<br> Your Message
<strong>Encrypted Message</strong><br> <div class="control">
<pre id="encrypted"></pre><br> <textarea id="input" class="textarea"></textarea>
<br> </div>
<hr> </label>
<br> </div>
<strong>Their Message</strong><br> <div class="field">
<textarea id="encryptedInput"></textarea><br> <label class="label">
<strong>One-Time Pad</strong><br> One-Time Pad
<textarea id="encryptedInputPad"></textarea><br> <div class="control">
<button id="decryptInput">Decrypt</button><br> <textarea id="inputPad" class="textarea"></textarea>
<br> </div>
<strong>Decrypted Message</strong><br> <div class="help is-error" id="inputError"></div>
<pre id="decrypted"></pre><br> </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> <script src="./index.js"></script>
</body> </body>

View File

@ -11,5 +11,9 @@
"devDependencies": { "devDependencies": {
"babel-preset-env": "^1.6.1", "babel-preset-env": "^1.6.1",
"parcel-bundler": "^1.6.2" "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" version "3.0.0"
resolved "https://registry.yarnpkg.com/builtin-status-codes/-/builtin-status-codes-3.0.0.tgz#85982878e21b98e1c66425e03d0174788f569ee8" 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: cache-base@^1.0.1:
version "1.0.1" version "1.0.1"
resolved "https://registry.yarnpkg.com/cache-base/-/cache-base-1.0.1.tgz#0a7f46416831c8b662ee36fe4e7c59d76f666ab2" 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" version "1.0.2"
resolved "https://registry.yarnpkg.com/flatten/-/flatten-1.0.2.tgz#dae46a9d78fbe25292258cc1e780a41d95c03782" 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: for-in@^1.0.2:
version "1.0.2" version "1.0.2"
resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80" resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80"