mirror of
https://github.com/Alamantus/otp-generator.git
synced 2025-03-25 21:00:42 +01:00
Add Bulma styles
This commit is contained in:
parent
d7991bb56c
commit
a39f39c805
3 changed files with 102 additions and 20 deletions
110
index.html
110
index.html
|
@ -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>
|
||||
|
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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"
|
||||
|
|
Loading…
Add table
Reference in a new issue