HTML/Blue Button't.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1">
    <title>Blue Button’t — 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>
    <script src="js/jquery.3.7.0.min.js"></script>
    <script src="js/Utilities/svg-utils.js"></script>
    <script>
    $(function() {
        const rotation = { E: 90, W: 270 };
        const direction = (
            "E E W "+
            "W E E "+
            "W E W "+
            "W E W "+
            "W W E "+
            "E E E "+
            "W E W "+
            "E W E "+
            "W W"
        ).split(" ");
        let cells = $("table td:nth-child(4n)");
        cells.each(function(i, e) {
            let svg = MakeSvgTag(100,100,0,0, { class:"arrow" });
            let arrow = MakeArrow(rotation[ direction[i] ], 100,50,50, "v", "medium");
            svg.append(arrow);
            $(this).append(svg);
        });
    });
    </script>
    <style>
        .dark table, table {
            margin: 1em auto;
            border: none;
            text-align: center;
        }
        th, td {
            padding: .3em .6em .1em;
        }
        td:nth-child(4n) {
            padding: .15em 0 0;
            line-height: 1;
        }
        svg.arrow { width: 30px; }
        .dark .arrow-hs { fill: #DDD; }
    </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">Blue Button’t</span>
            </div>
            <div class="page-content">
                <img src="img/Component/Blue Button't.svg" class="diagram">
                <h2>On the Subject of Blue Button’t</h2>
                <p class="flavour-text">Blue cube button.</p>
                <p>On the module, there is a blue button and a screen.</p>
                <P>The module displays twenty-six alphabetical words, only one of which is the following words.</p>
                <table>
                    <tr><th>Word</th><th>1st</th><th>2nd</th><th>Then</th><th>Word</th><th>1st</th><th>2nd</th><th>Then</th><th>Word</th><th>1st</th><th>2nd</th><th>Then</th></tr>
                    <tr><th>APP</th><td>S</td><td>D</td><td></td><th>BOB</th><td>O</td><td>T</td><td></td><th>CAT</th><td>A</td><td>M</td><td></td></tr>
                    <tr><th>DAD</th><td>V</td><td>Q</td><td></td><th>EAR</th><td>R</td><td>C</td><td></td><th>FAT</th><td>U</td><td>H</td><td></td></tr>
                    <tr><th>GET</th><td>Y</td><td>Q</td><td></td><th>HOP</th><td>L</td><td>D</td><td></td><th>ICE</th><td>C</td><td>P</td><td></td></tr>
                    <tr><th>JET</th><td>T</td><td>B</td><td></td><th>KEY</th><td>J</td><td>G</td><td></td><th>LOT</th><td>M</td><td>N</td><td></td></tr>
                    <tr><th>MET</th><td>A</td><td>B</td><td></td><th>NOT</th><td>V</td><td>S</td><td></td><th>OFF</th><td>T</td><td>R</td><td></td></tr>
                    <tr><th>POT</th><td>I</td><td>F</td><td></td><th>QIT</th><td>H</td><td>S</td><td></td><th>RAT</th><td>N</td><td>D</td><td></td></tr>
                    <tr><th>SON</th><td>D</td><td>F</td><td></td><th>TOP</th><td>N</td><td>W</td><td></td><th>UNO</th><td>Z</td><td>X</td><td></td></tr>
                    <tr><th>VET</th><td>N</td><td>O</td><td></td><th>WET</th><td>R</td><td>X</td><td></td><th>XIN</th><td>Z</td><td>C</td><td></td></tr>
                    <tr><th>YET</th><td>E</td><td>V</td><td></td><th>ZIP</th><td>S</td><td>B</td><td></td></tr>
                </table>
                <p>
                    Find the word from the table above and enter the next two letters in order. Then enter the word going from left to right, or right to left. If the word is BOB then enter “OTBOB”.
                    Tap the button at the time of the corresponding letter position will enter the corresponding letter and submit it when the display is empty.
                </p>
            </div>
            <div class="page-footer relative-footer">Page 1 of 1</div>
        </div>
    </div>
</body>
</html>