HTML/Alchemy.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1">
    <title>Alchemy — 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>
        .element-table { font-size: 40px; }
        .element-table th:nth-child(2) { width: 300px; }
        th img { width: 110px; height: 110px }
        .dark th img { filter: invert(85%); }
    </style>
</head>

<body>
    <div class="section">
        <!--Page 1-->
        <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">Alchemy</span>
            </div>

            <div class="page-content">
                <img src="img/Component/Alchemy.svg" class="diagram">
                <h2>On the Subject of Alchemy</h2>
                <p class="flavour-text">Turning lead into gold? I wish I could turn this bomb into gold so I wouldn’t have to defuse it!</p>

                <p>The buttons in the shape of a pentagon in the top left will attune the circle to certain elemental frequencies. Press the buttons to select a frequency. (See Appendix F.M.A.2 for the colours and their frequencies)</p>
                <p>The buttons around the main circle will inscribe runes to the main circle. Pressing these buttons while the circle isn’t ready for them will incur a strike.</p>
                <p>The Re-Draw button will clear the circle, but inscribe a random rune to the center. It will also rearrange the positions of the rune buttons around the circle. Pressing Re-Draw while the circle isn’t ready will incur a strike.</p>
                <p>You should only press Submit when necessary, pressing it at an incorrect time will cause a strike and reset the module.</p>
                <p>A circle is IMPERFECT if any of the following is true:</p>

                <ul>
                    <li>CREATION is directly across from TERRA.</li>
                    <li>HEVA is adjacent to META.</li>
                    <li>FIRE is in the leftmost position, and the last digit of the serial number is even.</li>
                </ul>

                <p>Step 1: If the circle is perfect, proceed to step 2. If the circle is imperfect, follow the substeps below until the circle is perfect.</p>

                <ul>
                    <li>If HEVA is in the top left position, press MIND, and then press Re-Draw.</li>
                    <li>Otherwise, if CREATION is in the bottom right position, press LIFE, and then press Re-Draw.</li>
                    <li>Otherwise, if TERRA is in the rightmost position, press ENERGY, and then press Re-Draw.</li>
                    <li>Otherwise, if STRUCOTA is in the leftmost position, press MATTER, and then press Re-Draw.</li>
                    <li>Otherwise, if FIRE is in the bottom left position, press FLAMES, and then press Re-Draw.</li>
                    <li>Otherwise, press Re-Draw without selecting a frequency and check if the circle is perfect.</li>
                </ul>
            </div>

            <div class="page-footer relative-footer">Page 1 of 4</div>
        </div>

        <!--Page 2-->
        <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">Alchemy</span>
            </div>

            <div class="page-content">
                <p>Step 2: If middle symbol is FIRE, go to step 4.</p>

                <ul>
                    <li>Otherwise, if the middle symbol is META, go to step 3.</li>
                    <li>Otherwise, if the middle symbol is STRUCOTA, go to step 6.</li>
                    <li>Otherwise, if the middle symbol is HEVA, go to step 5.</li>
                    <li>Otherwise, if the middle symbol is CREATION, press Submit and your final frequency is LIFE.</li>
                    <li>Otherwise, if none apply press FIRE and go to step 4.</li>
                </ul>

                <p>Step 3: Press HEVA and go to step 6.</p>
                <p>Step 4: If there is a lit TRN indicator on the bomb, press ENERGY, Re-Draw the circle and go to step 7.</p>

                <ul><li>Otherwise, go to step 5.</li></ul>

                <p>Step 5: If the middle symbol is TERRA, press ENERGY, press Re-Draw and go to step 11.</p>

                <ul>
                    <li>Otherwise, if the middle symbol is CREATION, press FIRE and go to step 8.</li>
                    <li>Otherwise, if the middle symbol is FIRE, press LIFE, press STRUCOTA and go to step 10.</li>
                    <li>Otherwise, press Re-Draw and go to step 6.</li>
                </ul>

                <p>Step 6: If there is a lit SND indicator on the bomb, press LIFE, Re-Draw the circle, and go to step 9.</p>

                <ul><li>Otherwise, go to step 11.</li></ul>

                <p>Step 7: Press TERRA and press Submit. Your final frequency is MIND.</p>
                <p>Step 8: Press CREATION and press Submit. Your final frequency is LIFE.</p>
                <p>Step 9: Press TERRA and press Submit. Your final frequency is MATTER.</p>
                <p>Step 10: Press CREATION and press Submit. Your final frequency is FLAMES.</p>
                <p>Step 11: Press HEVA and Submit. Your final frequency is ENERGY.</p>
                <p>Once you have a final frequency, select it and press Submit to solve the module.</p>
            </div>

            <div class="page-footer relative-footer">Page 2 of 4</div>
        </div>

        <!--Page 3-->
        <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">Alchemy</span>
            </div>

            <div class="page-content">
                <h3>Appendix F.M.A. 1<br>Various Alchemical Symbols</h3>

                <table class="centered element-table">
                    <tr><th><img src="img/Alchemy/Terra.png"></th><th>TERRA</th></tr>
                    <tr><th><img src="img/Alchemy/Fire.png"></th><th>FIRE</th></tr>
                    <tr><th><img src="img/Alchemy/Strucota.png"></th><th>STRUCOTA</th></tr>
                    <tr><th><img src="img/Alchemy/Meta.png"></th><th>META</th></tr>
                    <tr><th><img src="img/Alchemy/Heva.png"></th><th>HEVA</th></tr>
                    <tr><th><img src="img/Alchemy/Creation.png"></th><th>CREATION</th></tr>
                </table>
            </div>

            <div class="page-footer relative-footer">Page 3 of 4</div>
        </div>

        <!--Page 4-->
        <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">Alchemy</span>
            </div>

            <div class="page-content">
                <h3>Appendix F.M.A. 2<br>Various Elemental Frequencies</h3>
                <img style="width: 95%; height: 95%; margin-top: 1em;" src="img/Alchemy/Frequencies.png">
            </div>

            <div class="page-footer relative-footer">Page 4 of 4</div>
        </div>
    </div>
</body>
</html>