HTML/Button Sequence.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1">
    <title>Button Sequence — Keep Talking and Nobody Explodes</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 .spacer, .spacer {
            margin-left: 20px;
            border: 0;
        }

        table.button-sequences {
            margin: .5em auto;
            font-size: 10.5pt;
            width: 100%;
            border: none;
        }

        table.button-sequences td:first-child, table.button-sequences td.spacer + td {
            white-space: nowrap;
        }
    </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">Button Sequence</span>
            </div>
            <div class="page-content">
                <img src="img/Component/Button Sequence.svg" class="diagram">
                <h2>On the Subject of Button Sequences</h2>
                <p class="flavour-text">
                    Click. Click. Kaboom!
                </p>
                <ul>
                    <li>Within the module, there are several panels with three buttons on them. Only one panel is visible at a time.</li>
                    <li>Switch to the next panel by using the down button and the previous panel by using the up button.</li>
                    <li>Press the buttons as directed by the following tables. Button occurrences are cumulative over all panels within the module. If both conditions match, refer to “Releasing a Held Button”.</li>
                    <li>The LEDs found next to each button display green if the button was pressed or held successfully, or if they were not pressed and the panel has been submitted successfully. They display orange if the corresponding button has not been dealt with yet. They display red if the corresponding button caused a strike.</li>
                </ul>
                <table class='button-sequences'>
                    <tr><th>Red Button Occurrence</th><th>Press if label is...*</th><th>Press if shape is...</th>  <td class="spacer"></td>  <th>Yellow Button Occurrence</th><th>Press if label is...*</th><th>Press if shape is...</th>
                    <tr><td>First or Sixth</td><td>Abort</td><td>Square</td>         <td class="spacer"></td>  <td>First or Sixth</td><td>Detonate</td><td>Circle</td>
                    <tr><td>Second or Seventh</td><td>Detonate</td><td>Hexagon</td>  <td class="spacer"></td>  <td>Second or Seventh</td><td>Hold</td><td>Hexagon</td>
                    <tr><td>Third or Eighth</td><td>Hold</td><td>Circle</td>         <td class="spacer"></td>  <td>Third or Eighth</td><td>Abort</td><td>Square</td>
                    <tr><td>Fourth or Ninth</td><td>Abort</td><td>Circle</td>        <td class="spacer"></td>  <td>Fourth or Ninth</td><td>Press</td><td>Circle</td>
                    <tr><td>Fifth or Tenth</td><td>Press</td><td>Square</td>         <td class="spacer"></td>  <td>Fifth or Tenth</td><td>Hold</td><td>Hexagon</td>
                </table>
                <table class='button-sequences'>
                    <tr><th>Blue Button Occurrence</th><th>Press if label is...*</th><th>Press if shape is...</th>  <td class="spacer"></td>  <th>White Button Occurrence</th><th>Press if label is...*</th><th>Press if shape is...</th>
                    <tr><td>First or Sixth</td><td>Hold</td><td>Circle</td>        <td class="spacer"></td>  <td>First or Sixth</td><td>Hold</td><td>Hexagon</td>
                    <tr><td>Second or Seventh</td><td>Abort</td><td>Square</td>    <td class="spacer"></td>  <td>Second or Seventh</td><td>Detonate</td><td>Square</td>
                    <tr><td>Third or Eighth</td><td>Detonate</td><td>Hexagon</td>  <td class="spacer"></td>  <td>Third or Eighth</td><td>Press</td><td>Hexagon</td>
                    <tr><td>Fourth or Ninth</td><td>Press</td><td>Square</td>      <td class="spacer"></td>  <td>Fourth or Ninth</td><td>Abort</td><td>Circle</td>
                    <tr><td>Fifth or Tenth</td><td>Press</td><td>Hexagon</td>      <td class="spacer"></td>  <td>Fifth or Tenth</td><td>Detonate</td><td>Square</td>
                </table>
                <p>* Due to budget cuts, the buttons will only display the first letter of each word.</p>
            </div>
            <div class="page-footer relative-footer">Page 1 of 2</div>
        </div>
        <div class="page page-bg-02">
            <div class="page-header">
                <span class="page-header-doc-title">Keep Talking and Nobody Explodes Mod</span>
                <span class="page-header-section-title">Button Sequence</span>
            </div>
            <div class="page-content">
                <h3>Releasing a Held Button</h3>
                <p>If you start holding the button down, the colored LED will light up next to the button. Based on its color you must release the button at a specific point in time:</p>
                <ul>
                    <li><em>Blue light:</em> release when the countdown timer has a 2 in any position.</li>
                    <li><em>White light:</em> release when the countdown timer has a 7 in any position.</li>
                    <li><em>Yellow light:</em> release when the countdown timer has a 3 in any position.</li>
                    <li><em>Magenta light:</em> release when the countdown timer has a 4 in any position.</li>
                    <li><em>Any other color light:</em> release when the countdown timer has a 0 in any position.</li>
                </ul>
            </div>
            <div class="page-footer relative-footer">Page 2 of 2</div>
        </div>
    </div>
</body>
</html>