1<!DOCTYPE html>
2<html lang="en">
3
4<head>
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <title>002.TOTP</title>
8 <link rel="stylesheet" href="./style.css">
9 <link rel="stylesheet" href="../assets/common.css">
10 <link rel="shortcut icon" href="../assets/favicon.png" type="image/png">
11 <script src="../assets/common.js"></script>
12</head>
13
14<body>
15 <!-- Modal Section -->
16 <input class="modal-state" id="modal" type="checkbox" />
17 <div class="modal">
18 <label class="modal__bg" for="modal"></label>
19 <div class="modal__inner" style="width:25%;">
20 <label class="modal__close" for="modal"></label>
21 <h2>002.TOTP</h2>
22 <p class="modal__p">
23 <ul>
24 <li>
25 TOTP works by taking a <span style="color:var(--lightGold)">secret</span> and a <span
26 style="color:var(--lightGold)">timestamp</span> and hashing them together.
27 </li>
28 <li>
29 The <span style="color:var(--lightGold)">hash</span> is then truncated to a certain number of
30 digits.
31 </li>
32 <li>
33 The digits are then used to generate a <span style="color:var(--lightGold)">one-time
34 password</span>.
35 </li>
36 <li>
37 The <span style="color:var(--lightGold)">period</span> is the time in seconds that the <span
38 style="color:var(--lightGold)">one-time password</span> is valid.
39 </li>
40 <li>
41 Refer: <a href="https://tools.ietf.org/html/rfc6238" target="_blank"
42 style="color:var(--lightGold)">RFC
43 6238</a>.
44 </li>
45 </ul>
46
47 </p>
48 </div>
49 </div>
50
51 <!-- Main Content -->
52 <div class="container">
53 <div class="group">
54 <label for="secret">Secret:</label>
55 <input type="text" id="secret" name="secret" value="JV4SA43BMZSQ">
56 </div>
57 <div class="group">
58 <label for="period">Period:</label>
59 <input type="number" id="period" name="period" value="30" min="3">
60 </div>
61 <div class="group">
62 <label for="digits">Digits:</label>
63 <input type="number" id="digits" name="digits" value="6" min="1" max="10">
64 </div>
65 <p id="remaining"></p>
66 <p id="otp"></p>
67 <svg class="dial">
68 <circle r="230" cx="120" cy="140" fill="transparent" stroke="rgb(212, 175, 55,0.7)" stroke-width="10"
69 transform="rotate(-90 100 100)" stroke-dasharray="1570" stroke-dashoffset="0"></circle>
70 </svg>
71 </div>
72
73 <!-- Footer Section -->
74 <div class="footer">
75 <label for="modal">(i)</label>
76 <a class="arrow" href="../"></a>
77 </div>
78</body>
79<script src="./script.js"></script>
80
81</html>