quantum/totp
1
0
Fork 0
mirror of https://github.com/quantum5/totp.git synced 2025-04-24 13:41:58 -04:00
Code Issues Actions Packages Projects Releases Wiki Activity

Write some about text

Browse source
This commit is contained in:
Quantum 2024-04-13 17:35:20 -04:00
parent 13a0c40cc0
commit 51df02bf3f
2 changed files with 44 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

39
index.html
View file

@ -36,6 +36,45 @@
</div> </div>
</main> </main>
<div class="container totp-about">
<div class="card">
<div class="card-body">
<h3 class="card-title" id="what-is-this">What is this?</h3>
<p class="card-text">This is a code generator for the <a
href="https://en.wikipedia.org/wiki/Time-based_One_Time_Password"><em>Time-based One Time Password</em>
(TOTP)</a> algorthm. It's intended for developers of web applications with TOTP support to quickly generate
codes for testing purposes. It's <strong>not</strong> a general purpose authenticator app.
</p>
<p class="card-text">What this tool can do:</p>
<ul class="card-text">
<li>Quickly generate TOTP codes;</li>
<li>View codes for past and future time-windows; and</li>
<li>Fiddle with various TOTP paramters.</li>
</ul>
<p class="card-text">What this tool <strong>can't</strong> do:</p>
<ul class="card-text">
<li>Store your TOTP secrets;</li>
<li>Act as your general purpose authenticator app; and</li>
<li>Scan TOTP QR codes.</li>
</ul>
</div>
</div>
<div class="card">
<div class="card-body">
<h3 class="card-title" id="what-is-this">How do I use this tool?</h3>
<p class="card-text">To start, simply type or paste in the TOTP secret key. This should be in the standard base32
format. This will generate 6-digit TOTP codes that update every 30 seconds using the SHA-1 algorithm that's used
by default in all major authenticator apps.
</p>
<p class="card-text">You can press "show advanced settings" to adjust the TOTP parameters to use non-default
values.
</p>
<p class="card-text">The generated codes are displayed in chronological order. The current code is shown in large
text. The codes above are past codes, and the codes below are future codes.</p>
</div>
</div>
</div>
<script type="module" src="/src/main.tsx"></script> <script type="module" src="/src/main.tsx"></script>
</body> </body>
</html> </html>

5
src/index.scss
View file

@ -18,6 +18,7 @@
@import 'bootstrap/scss/_helpers.scss'; @import 'bootstrap/scss/_helpers.scss';
@import 'bootstrap/scss/_transitions.scss'; @import 'bootstrap/scss/_transitions.scss';
@import 'bootstrap/scss/_popover.scss'; @import 'bootstrap/scss/_popover.scss';
@import 'bootstrap/scss/_card.scss';
nav { nav {
background-color: $body-tertiary-bg; background-color: $body-tertiary-bg;
@ -69,6 +70,10 @@ nav {
margin-bottom: 0.5em; margin-bottom: 0.5em;
} }
.totp-about .card {
margin-top: 0.5em;
}
.totp-code { .totp-code {
text-align: center; text-align: center;
height: 1.5em; height: 1.5em;