totp/index.html

121 lines
5.3 KiB
HTML
Raw Normal View History

2024-04-06 22:54:44 -04:00
<!doctype html>
<html lang="en">
2024-04-07 01:04:16 -04:00
<head>
<meta charset="UTF-8"/>
2025-02-10 18:24:59 -05:00
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96"/>
2025-02-10 18:08:39 -05:00
<link rel="icon" type="image/svg+xml" href="/totp.svg"/>
2025-02-10 18:24:59 -05:00
<link rel="shortcut icon" href="/favicon.ico"/>
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"/>
<meta name="apple-mobile-web-app-title" content="TOTP.lol"/>
<link rel="manifest" href="/site.webmanifest"/>
2024-04-07 01:04:16 -04:00
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>TOTP.lol — A TOTP Code Generator for Developers</title>
</head>
<body>
<nav class="navbar navbar-expand-lg">
<div class="container">
<a class="navbar-brand" href="#">TOTP.lol</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" href="#what-is-this">What is this?</a>
</li>
<li class="nav-item">
2025-02-10 12:17:47 -05:00
<a class="nav-link" href="#how-to-use">How to use?</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#support-me">Support me</a>
2024-04-07 01:04:16 -04:00
</li>
</ul>
</div>
</div>
</nav>
<main class="container">
<noscript>You need to enable JavaScript to run this app.</noscript>
<div class="jumbotron">
<p class="lead">This is a code generator for the Time-based One Time Password (TOTP) algorithm.</p>
<hr>
2024-04-06 22:54:44 -04:00
<div id="root"></div>
2024-04-07 01:04:16 -04:00
</div>
</main>
2024-04-13 17:35:20 -04:00
<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>
2025-02-10 18:32:30 -05:00
(TOTP)</a> algorithm. It's intended for developers of web applications with TOTP support to quickly generate
codes for testing purposes. It's <strong>not</strong> meant to be a general purpose authenticator app.
2024-04-13 17:35:20 -04:00
</p>
<p class="card-text">What this tool can do:</p>
<ul class="card-text">
<li>Quickly generate TOTP codes;</li>
2025-02-10 18:32:30 -05:00
<li>View codes for past and future time windows; and</li>
<li>Fiddle with various TOTP parameters.</li>
2024-04-13 17:35:20 -04:00
</ul>
<p class="card-text">What this tool <strong>can't</strong> do:</p>
<ul class="card-text">
2025-02-10 12:17:47 -05:00
<li>Store your TOTP secrets (you can try bookmarking this page with the secret in the URL, but it's not
secure);
</li>
2024-04-13 17:35:20 -04:00
<li>Act as your general purpose authenticator app; and</li>
<li>Scan TOTP QR codes.</li>
</ul>
</div>
</div>
2025-02-10 12:17:47 -05:00
<div class="card">
<div class="card-body">
<h3 class="card-title" id="how-to-use">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>
<p class="card-text">The settings are stored in the URL hash. You can bookmark the page or copy the link to go
directly to a certain configuration.</p>
</div>
</div>
<div class="card">
<div class="card-body">
<h3 class="card-title" id="support-me">I like this website. How can I support you?</h3>
<p class="card-text">
For security reasons, this website will <b>NEVER</b> serve ads. Unfortunately, servers and domains are not free,
though I try to be as economical as I can. I would rather lose money running this public service than serve
ads or shut it down, but if you would like to help me offset the costs, feel free to send some money my way
on:
</p>
<ul>
<li><a href="https://github.com/sponsors/quantum5">GitHub Sponsors</a>;</li>
<li><a href="https://ko-fi.com/quantum5">Ko-fi</a>;</li>
<li><a href="https://liberapay.com/quantum">LiberaPay</a>; or</li>
<li><a href="https://donate.stripe.com/6oEcOL8gebjJeuk9AJ">Donate USD by card or bank with Stripe</a> or
<a href="https://donate.stripe.com/cN24ifdAy0F53PG7sA">CAD</a>.
</li>
</ul>
2024-04-13 17:35:20 -04:00
</div>
</div>
</div>
2025-02-10 12:17:47 -05:00
<footer class="footer">
<div class="container">
<p class="text-muted">Copyright &copy; 2024-__YEAR__ <a href="https://quantum5.ca">Quantum</a>. Licensed under
<a href="https://www.gnu.org/licenses/agpl-3.0.en.html">GNU AGPLv3</a>. Source code available on
<a href="https://github.com/quantum5/totp">GitHub</a>.
</p>
</div>
</footer>
2024-04-07 01:04:16 -04:00
<script type="module" src="/src/main.tsx"></script>
</body>
2024-04-06 22:54:44 -04:00
</html>