rootdo/content/dw/index.html

101 lines
2.7 KiB
HTML
Raw Permalink Normal View History

2024-10-04 12:44:59 +00:00
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Diceware Passphrase Generator</title>
<link rel="stylesheet" href="assets/css/bulma-0.9.4.min.css">
<style>
[v-cloak] {
display: none;
}
html, body {
height: 100%;
}
body > footer {
position: sticky;
top: 100vh;
}
.footer {
padding: 2rem;
}
@media screen and (min-width: 1068px) {
.container {
max-width: 600px;
width: 600px;
}
}
</style>
</head>
<body>
<section id="app" class="section" v-cloak>
<div class="container">
<h1 class="title">Diceware Passphrase Generator</h1>
<div class="field">
<label class="label is-uppercase">Number of Words</label>
<div class="control">
<input class="input" type="text" v-model="numWords" placeholder="The number of words in the passphrase">
</div>
</div>
<div class="field">
<label class="label is-uppercase">Delimiter</label>
<div class="control">
<input class="input" type="text" v-model="delimiter" placeholder="Text to separate the words">
</div>
</div>
<div class="field">
<div class="control">
<button @click="generatePassphrase" class="button is-primary is-medium is-fullwidth">Generate</button>
</div>
</div>
<div class="field">
<div class="control">
<textarea v-model="passphrase" id="generated-passphrase" class="textarea is-large has-text-centered" rows="3" style="font-family: monospace" readonly></textarea>
</div>
</div>
<div class="field is-clearfix">
<div class="control">
<a class="button is-large is-pulled-right is-light" id="clipboard-button" data-clipboard-target="#generated-passphrase" title="Copy to clipboard">
<img src="assets/img/clippy.svg" height="36" width="36">
</a>
</div>
<p class="has-text-grey is-size-7">
{{ passphrase.length }} characters<span v-show="entropy && passphrase">, {{ entropy }} bits of entropy</span>
</p>
</div>
</div>
</section>
<footer class="footer">
<div class="container">
<div class="content has-text-centered">
<p>
Built by <a href="https://dan.hersam.com">Dan Hersam</a> | <a href="https://github.com/jaden/diceware">Source on GitHub</a>
</p>
</div>
</div>
</footer>
<script src="assets/js/vue-3.3.2.global.prod.js"></script>
<script src="assets/js/clipboard-2.0.4.min.js"></script>
<script src="wordlist.js?v=1"></script>
<script src="app.js?v=1.1"></script>
</body>
</html>