HTML/21.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1">
    <title>21 — Keep Talking and Nobody Explodes Module</title>
    <link rel="stylesheet" type="text/css" href="css/font.css">
    <link rel="stylesheet" type="text/css" href="css/normalize.css">
    <link rel="stylesheet" type="text/css" href="css/main.css">
    <script src="js/ktane-utils.js"></script>
    <style>
        .dark table, table {
            margin: 1em auto;
            border: none;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="section">
        <div class="page page-bg-01">
            <div class="page-header">
                <span class="page-header-doc-title">Keep Talking and Nobody Explodes Mod</span>
                <span class="page-header-section-title">21</span>
            </div>
            <div class="page-content">
                <img src="img/Component/21.svg" class="diagram">
                <h2>On the Subject of 21s</h2>
                <p class="flavour-text">Who knew putting in the same number was so awesome?!</p>

                <ul>
                    <li>The module displays a number in base 21. Submit the number back to the module in base 10 using the sum of nines and tens (and their powers).</li>
                    <li>Hold the green button to submit, and the other one to reset the input. Press the display to change the power you are adding has, with the highest power being 5.</li>
                    <li>To convert a number from base 21 to base 10, take each digit from right to left and multiply it by 21 to the power of its position, (with rightmost being zero and increasing by one going left).</li>
                    <li>‘l’ and ‘I’ look similar on the module. ‘l’ will have a little tail.</li>
                </ul>

                <table>
                    <tr><th>Index</th><td>Character</td><th>Index</th><td>Character</td><th>Index</th><td>Character</td><th>Index</th><td>Character</td></tr>
                    <tr><th>0</th><td>0</td><th>6</th><td>6</td><th>11</th><td>B</td><th>16</th><td>G</td></tr>
                    <tr><th>1</th><td>1</td><th>7</th><td>7</td><th>12</th><td>C</td><th>17</th><td>H</td></tr>
                    <tr><th>2</th><td>2</td><th>8</th><td>8</td><th>13</th><td>D</td><th>18</th><td>I</td></tr>
                    <tr><th>3</th><td>3</td><th>9</th><td>9</td><th>14</th><td>E</td><th>19</th><td>J</td></tr>
                    <tr><th>4</th><td>4</td><th>10</th><td>A</td><th>15</th><td>F</td><th>20</th><td>K</td></tr>
                    <tr><th>5</th><td>5</td></tr>
                </table>
            </div>
            <div class="page-footer relative-footer">Page 1 of 1</div>
        </div>
    </div>
</body>
</html>