path: root/pages/bitset.inc

<?php

require_once $_SERVER['DOCUMENT_ROOT'] . "/includes/init.inc"; global $title; global $isLoggedIn; global $lang; global $pages;
require_once $_SERVER['DOCUMENT_ROOT'] . '/includes/header.inc';

?>

<?php if (isset($_GET['embed'])): ?>
<style>
    #page-content, #title-bar, #mobile-navigation, #titlebar-separator, #footer {
        display: none !important;
    }

    #footer-pre {
        height: 20px;
    }

    body {
        background-color: transparent !important;
    }
</style>

<script>
    window.addEventListener("load", () => {
        document.getElementById("input").value = "<?= $_GET['embed'] ?>";
        calculateInput();
    })
</script>
<?php endif; ?>

<br>
<div class="container">
    <div id="page-content">
        <h2 oncontextmenu="document.getElementById('deprecated-options').style.display='block';">Bitset calculator</h2>
    </div>
    <div style="display:grid; grid-template-columns: repeat(48, 1fr);">
        <div data-bs-toggle="tooltip" title="Value reserved for future use" id="binary-bit-1" class="font-monospace tooltip-nohelp text-muted" style="text-align: center;cursor: pointer;">0</div>
        <div data-bs-toggle="tooltip" title="Value reserved for future use" id="binary-bit-2" class="font-monospace tooltip-nohelp text-muted" style="text-align: center;cursor: pointer;">0</div>
        <div data-bs-toggle="tooltip" title="Value reserved for future use" id="binary-bit-3" class="font-monospace tooltip-nohelp text-muted" style="text-align: center;cursor: pointer;">0</div>
        <div data-bs-toggle="tooltip" title="Value reserved for future use" id="binary-bit-4" class="font-monospace tooltip-nohelp text-muted" style="text-align: center;cursor: pointer;">0</div>
        <div data-bs-toggle="tooltip" title="Value reserved for future use" id="binary-bit-5" class="font-monospace tooltip-nohelp text-muted" style="text-align: center;cursor: pointer;">0</div>
        <div data-bs-toggle="tooltip" title="Value reserved for future use" id="binary-bit-6" class="font-monospace tooltip-nohelp text-muted" style="text-align: center;cursor: pointer;">0</div>
        <div data-bs-toggle="tooltip" title="Value reserved for future use" id="binary-bit-7" class="font-monospace tooltip-nohelp text-muted" style="text-align: center;cursor: pointer;">0</div>
        <div data-bs-toggle="tooltip" title="Value reserved for future use" id="binary-bit-8" class="font-monospace tooltip-nohelp text-muted" style="text-align: center;cursor: pointer;">0</div>
        <div data-bs-toggle="tooltip" title="Value reserved for future use" id="binary-bit-9" class="font-monospace tooltip-nohelp text-muted" style="text-align: center;cursor: pointer;">0</div>
        <div data-bs-toggle="tooltip" title="Value reserved for future use" id="binary-bit-10" class="font-monospace tooltip-nohelp text-muted" style="text-align: center;cursor: pointer;">0</div>
        <div data-bs-toggle="tooltip" title="Persecutor" id="binary-bit-11" class="font-monospace tooltip-nohelp" style="color:#197387;text-align: center;cursor: pointer;">0</div>
        <div data-bs-toggle="tooltip" title="Leader" id="binary-bit-12" class="font-monospace tooltip-nohelp" style="text-align: center;cursor: pointer;color:#877e19;">0</div>
        <div data-bs-toggle="tooltip" title="Value reserved for future use" id="binary-bit-13" class="text-muted font-monospace tooltip-nohelp" style="text-align: center;cursor: pointer;">0</div>
        <div data-bs-toggle="tooltip" title="Preemptive sexual consent" id="binary-bit-14" class="font-monospace tooltip-nohelp" style="color: rgb(59,196,46);text-align: center;cursor: pointer;">0</div>
        <div data-bs-toggle="tooltip" title="Fronts less frequently" id="binary-bit-15" class="font-monospace tooltip-nohelp" style="color: #198754;text-align: center;cursor: pointer;">0</div>
        <div data-bs-toggle="tooltip" title="Non verbal in real life" id="binary-bit-16" class="font-monospace tooltip-nohelp" style="color: #20c997;text-align: center;cursor: pointer;">0</div>
        <div data-bs-toggle="tooltip" title="Eatable food" id="binary-bit-17" class="font-monospace tooltip-nohelp" style="color: #d63384;text-align: center;cursor: pointer;">0</div>
        <div data-bs-toggle="tooltip" title="Eatable food" id="binary-bit-18" class="font-monospace tooltip-nohelp" style="color: #d63384;text-align: center;cursor: pointer;">0</div>
        <div data-bs-toggle="tooltip" title="Polyamory (romantic)" id="binary-bit-19" class="font-monospace tooltip-nohelp" style="color: #eeb8b8; text-align: center;cursor: pointer;">0</div>
        <div data-bs-toggle="tooltip" title="Polyamory (sexual)" id="binary-bit-20" class="font-monospace tooltip-nohelp" style="color: #e2b8ee; text-align: center;cursor: pointer;">0</div>
        <div data-bs-toggle="tooltip" title="Sexual alignment" id="binary-bit-21" class="font-monospace tooltip-nohelp" style="color: #5fff4d; text-align: center;cursor: pointer;">0</div>
        <div data-bs-toggle="tooltip" title="Sexual alignment" id="binary-bit-22" class="font-monospace tooltip-nohelp" style="color: #5fff4d; text-align: center;cursor: pointer;">0</div>
        <div data-bs-toggle="tooltip" title="Sexual alignment" id="binary-bit-23" class="font-monospace tooltip-nohelp" style="color: #5fff4d; text-align: center;cursor: pointer;">0</div>
        <div data-bs-toggle="tooltip" title="Sexual alignment" id="binary-bit-24" class="font-monospace tooltip-nohelp" style="color: #5fff4d; text-align: center;cursor: pointer;">0</div>
        <div data-bs-toggle="tooltip" title="Shared memory access" id="binary-bit-25" class="font-monospace tooltip-nohelp" style="text-align: center;cursor: pointer;color:#fa77ef;">0</div>
        <div data-bs-toggle="tooltip" title="Shared memory access" id="binary-bit-26" class="font-monospace tooltip-nohelp" style="text-align: center;cursor: pointer;color:#fa77ef;">0</div>
        <div data-bs-toggle="tooltip" title="Value reserved for future use" id="binary-bit-27" class="text-muted font-monospace tooltip-nohelp" style="text-align: center;cursor: pointer;">0</div>
        <div data-bs-toggle="tooltip" title="Little/younger" id="binary-bit-28" class="font-monospace tooltip-nohelp" style="text-align: center;cursor: pointer;color:#b277fa;">0</div>
        <div data-bs-toggle="tooltip" title="Little/younger" id="binary-bit-29" class="font-monospace tooltip-nohelp" style="text-align: center;cursor: pointer;color:#b277fa;">0</div>
        <div data-bs-toggle="tooltip" title="Protector" id="binary-bit-30" class="font-monospace tooltip-nohelp" style="text-align: center;cursor: pointer;color:#77faab;">0</div>
        <div data-bs-toggle="tooltip" title="Fictive" id="binary-bit-31" class="font-monospace tooltip-nohelp text-info" style="text-align: center;cursor: pointer;">0</div>
        <div data-bs-toggle="tooltip" title="Value reserved for future use" id="binary-bit-32" class="text-muted font-monospace tooltip-nohelp" style="text-align: center;cursor: pointer;">0</div>
        <div data-bs-toggle="tooltip" title="Value reserved for future use" id="binary-bit-33" class="text-muted font-monospace tooltip-nohelp" style="text-align: center;cursor: pointer;">0</div>
        <div data-bs-toggle="tooltip" title="1st species" id="binary-bit-34" class="font-monospace tooltip-nohelp" style="text-align: center;cursor: pointer;color:#fab277;">0</div>
        <div data-bs-toggle="tooltip" title="1st species" id="binary-bit-35" class="font-monospace tooltip-nohelp" style="text-align: center;cursor: pointer;color:#fab277;">0</div>
        <div data-bs-toggle="tooltip" title="1st species" id="binary-bit-36" class="font-monospace tooltip-nohelp" style="text-align: center;cursor: pointer;color:#fab277;">0</div>
        <div data-bs-toggle="tooltip" title="1st species" id="binary-bit-37" class="font-monospace tooltip-nohelp" style="text-align: center;cursor: pointer;color:#fab277;">1</div>
        <div data-bs-toggle="tooltip" title="2nd species" id="binary-bit-38" class="font-monospace tooltip-nohelp" style="text-align: center;cursor: pointer;color:#faf377;">0</div>
        <div data-bs-toggle="tooltip" title="2nd species" id="binary-bit-39" class="font-monospace tooltip-nohelp" style="text-align: center;cursor: pointer;color:#faf377;">0</div>
        <div data-bs-toggle="tooltip" title="2nd species" id="binary-bit-40" class="font-monospace tooltip-nohelp" style="text-align: center;cursor: pointer;color:#faf377;">0</div>
        <div data-bs-toggle="tooltip" title="2nd species" id="binary-bit-41" class="font-monospace tooltip-nohelp" style="text-align: center;cursor: pointer;color:#faf377;">0</div>
        <div data-bs-toggle="tooltip" title="Romantic alignment" id="binary-bit-42" class="font-monospace tooltip-nohelp" style="text-align: center;cursor: pointer;color: #4d5cff;">0</div>
        <div data-bs-toggle="tooltip" title="Romantic alignment" id="binary-bit-43" class="font-monospace tooltip-nohelp" style="text-align: center;cursor: pointer;color: #4d5cff;">0</div>
        <div data-bs-toggle="tooltip" title="Romantic alignment" id="binary-bit-44" class="font-monospace tooltip-nohelp" style="text-align: center;cursor: pointer;color: #4d5cff;">0</div>
        <div data-bs-toggle="tooltip" title="Romantic alignment" id="binary-bit-45" class="font-monospace tooltip-nohelp" style="text-align: center;cursor: pointer;color: #4d5cff;">0</div>
        <div data-bs-toggle="tooltip" title="Robot" id="binary-bit-46" class="font-monospace tooltip-nohelp" style="text-align: center;cursor: pointer;">0</div>
        <div data-bs-toggle="tooltip" title="Plush" id="binary-bit-47" class="font-monospace tooltip-nohelp" style="text-align: center;cursor: pointer;color:#6610f2;">0</div>
        <div data-bs-toggle="tooltip" title="Value reserved for future use" id="binary-bit-48" class="text-muted font-monospace tooltip-nohelp" style="text-align: center;cursor: pointer;">0</div>
    </div>
    <br>
    <p>
        <input onchange="calculateInput();" onkeydown="calculateInput()" onkeyup="calculateInput()" value="2048" id="input" type="number" class="form-control" style="width:256px;display: inline-block;color:white;background:#111;border-color:#222;" maxlength="15" max="281474976710655" min="2048"><br>
        <code id="output-bin">0b000000000000000000000000000000000000100000000000</code>, <code id="output-hex">0x000008000000</code>, <code id="output-dec">2048</code>
    </p>
    <script>
        for (let i = 1; i <= 48; i++) {
            document.getElementById("binary-bit-" + i).onclick = (event) => {
                let el = event.target;
                console.log(el, el.innerText);

                if (el.innerText === "0") {
                    el.innerText = "1";
                } else {
                    el.innerText = "0";
                }

                calculateOutput();

                let binString = ("0".repeat(48 - parseInt(document.getElementById("input").value).toString(2).length)) + parseInt(document.getElementById("input").value).toString(2);
                let bin = binString.split("").map((i) => parseInt(i));

                for (let i = 1; i <= 48; i++) {
                    if (bin[i - 1]) {
                        document.getElementById("binary-bit-" + i).innerText = bin[i - 1].toString();
                    } else {
                        document.getElementById("binary-bit-" + i).innerText = "0";
                    }
                }

                display(binString);
                setColors();
            }

            setColors()
        }

        function setColors() {
            for (let i = 1; i <= 48; i++) {
                let e = document.getElementById("binary-bit-" + i);
                if (e.title !== "Value reserved for future use") {
                    e.style.color = "";

                    e.classList.remove("text-info");
                    e.classList.remove("text-warning");
                    e.classList.remove("text-light");
                    e.classList.remove("text-dark");

                    if (e.innerText === "0") {
                        e.classList.remove("text-success");
                        e.classList.add("text-danger");
                    } else {
                        e.classList.add("text-success");
                        e.classList.remove("text-danger");
                    }
                } else {
                    e.style.cursor = "not-allowed";
                    e.onclick = null;
                }
            }
        }

        function display(binString) {
            let sharedMemory = parseInt(binString.substring(8 + 16, 10 + 16), 2);
            let little = parseInt(binString.substring(11 + 16, 13 + 16), 2);
            let protector = binString.substring(13 + 16, 14 + 16) !== "0";
            let fictive = binString.substring(14 + 16, 15 + 16) !== "0";
            let robot = binString.substring(29 + 16, 30 + 16) !== "0";
            let plush = binString.substring(30 + 16, 31 + 16) !== "0";
            let species1 = binString.substring(17 + 16, 21 + 16);
            let species2 = binString.substring(21 + 16, 25 + 16);
            let food = parseInt(binString.substring(16, 2 + 16), 2);
            let nonverbal = binString.substring(15, 16) !== "0";
            let lessFrequent = binString.substring(14, 15) !== "0";
            let sexuallyActive = binString.substring(13, 14) !== "0";
            let leader = binString.substring(11, 12) !== "0";
            let persecutor = binString.substring(10, 11) !== "0";
            let polyamorous1 = binString.substring(18, 19) !== "0";
            let polyamorous2 = binString.substring(19, 20) !== "0";
            let alignment1 = binString.substring(20, 24);
            let alignment2 = binString.substring(25 + 16, 29 + 16);

            document.getElementById("value-0").value = sharedMemory;
            document.getElementById("value-1").value = little;
            document.getElementById("value-2").value = species1;
            document.getElementById("value-3").value = species2;
            document.getElementById("value-5").checked = protector;
            document.getElementById("value-6").checked = fictive;
            document.getElementById("value-9").checked = robot;
            document.getElementById("value-10").checked = plush;
            document.getElementById("value-11").value = food;
            document.getElementById("value-16").checked = nonverbal;
            document.getElementById("value-17").checked = lessFrequent;
            document.getElementById("value-18").checked = sexuallyActive;
            document.getElementById("value-20").checked = leader;
            document.getElementById("value-21").checked = persecutor;
            document.getElementById("value-22").checked = polyamorous1;
            document.getElementById("value-23").checked = polyamorous2;
            document.getElementById("value-24").value = alignment1;
            document.getElementById("value-25").value = alignment2;

            setColors();
        }

        function calculateOutput() {
            let bin = [null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null].map((_, i) => {
                let e = i + 1;
                return document.getElementById("binary-bit-" + e).innerText;
            }).join("");

            document.getElementById("output-bin").innerText = "0b" + bin;

            let hex = parseInt(bin, 2).toString(16);

            document.getElementById("output-hex").innerText = "0x" + "0".repeat(12 - hex.length) + hex;
            document.getElementById("output-dec").innerText = parseInt(bin, 2).toString();
            document.getElementById("input").value = parseInt(bin, 2).toString();
        }

        function calculateInput() {
            if (parseInt(document.getElementById("input").value).toString().length > 15) return;

            let binString = ("0".repeat(48 - parseInt(document.getElementById("input").value).toString(2).length)) + parseInt(document.getElementById("input").value).toString(2);
            let bin = binString.split("").map((i) => parseInt(i));

            for (let i = 1; i <= 48; i++) {
                if (bin[i - 1]) {
                    document.getElementById("binary-bit-" + i).innerText = bin[i - 1].toString();
                } else {
                    document.getElementById("binary-bit-" + i).innerText = "0";
                }
            }

            display(binString);
            calculateOutput();
            setColors();

            return bin;
        }

        function updateFromSelection() {
            let val0 = document.getElementById("value-0").value;
            let val1 = document.getElementById("value-1").value;
            let val2 = document.getElementById("value-2").value;
            let val3 = document.getElementById("value-3").value;
            let val5 = document.getElementById("value-5").checked;
            let val6 = document.getElementById("value-6").checked;
            let val9 = document.getElementById("value-9").checked;
            let val10 = document.getElementById("value-10").checked;
            let val11 = document.getElementById("value-11").value;
            let val16 = document.getElementById("value-16").checked;
            let val17 = document.getElementById("value-17").checked;
            let val18 = document.getElementById("value-18").checked;
            let val20 = document.getElementById("value-20").checked;
            let val21 = document.getElementById("value-21").checked;
            let val22 = document.getElementById("value-22").checked;
            let val23 = document.getElementById("value-23").checked;
            let val24 = document.getElementById("value-24").value;
            let val25 = document.getElementById("value-25").value;

            let val0bin = parseInt(val0).toString(2);
            val0bin = val0bin.length === 1 ? "0" + val0bin : val0bin;

            let val1bin = parseInt(val1).toString(2);
            val1bin = val1bin.length === 1 ? "0" + val1bin : val1bin;

            let val11bin = parseInt(val11).toString(2);
            val11bin = val11bin.length === 1 ? "0" + val11bin : val11bin;

            let val2bin = val2;
            let val3bin = val3;
            let val24bin = val24;
            let val25bin = val25;

            let val4bin = "0";
            let val7bin = "0";
            let val8bin = "0";
            let val15bin = "0";
            let val19bin = "0";

            let val5bin = val5 ? "1" : "0";
            let val6bin = val6 ? "1" : "0";
            let val9bin = val9 ? "1" : "0";
            let val10bin = val10 ? "1" : "0";
            let val16bin = val16 ? "1" : "0";
            let val17bin = val17 ? "1" : "0";
            let val18bin = val18 ? "1" : "0";
            let val20bin = val20 ? "1" : "0";
            let val21bin = val21 ? "1" : "0";
            let val22bin = val22 ? "1" : "0";
            let val23bin = val23 ? "1" : "0";

            let bin = "0000000000" + val21bin + val20bin + val19bin + val18bin + val17bin + val16bin + val11bin + val22bin + val23bin + val24bin + val0bin + val4bin + val1bin + val5bin + val6bin + val7bin + val8bin + val2bin + val3bin + val25bin + val9bin + val10bin + val15bin;

            console.log(bin, parseInt(bin, 2));

            let parts = bin.split("").map((i) => parseInt(i));

            for (let i = 1; i <= 48; i++) {
                if (parts[i - 1]) {
                    document.getElementById("binary-bit-" + i).innerText = parts[i - 1].toString();
                } else {
                    document.getElementById("binary-bit-" + i).innerText = "0";
                }
            }

            calculateOutput();
            setColors();
        }
    </script>

    <table style="margin-bottom: 1rem;">
        <tbody>
            <tr>
                <td style="padding-right: 10px; text-align: right;">
                    <b>Shared memory access: </b>
                </td>
                <td>
                    <select class="tooltip-nohelp form-select" style='display:inline-block;width:max-content;color:white;background-color:#111;border-color:#222;background-image:url("data:image/svg+xml,%3csvg xmlns=&apos;http://www.w3.org/2000/svg&apos; viewBox=&apos;0 0 16 16&apos;%3e%3cpath fill=&apos;none&apos; stroke=&apos;%23ffffff&apos; stroke-linecap=&apos;round&apos; stroke-linejoin=&apos;round&apos; stroke-width=&apos;2&apos; d=&apos;M2 5l6 6 6-6&apos;/%3e%3c/svg%3e");' id="value-0" onchange="updateFromSelection();">
                        <option value="2">Full direct access</option>
                        <option value="1">Partial direct access</option>
                        <option value="0" selected>No direct access</option>
                    </select>
                </td>
            </tr><tr>
                <td style="padding-right: 10px; text-align: right;">
                    <b>Food: </b>
                </td>
                <td>
                    <select class="tooltip-nohelp form-select" style='display:inline-block;width:max-content;color:white;background-color:#111;border-color:#222;background-image:url("data:image/svg+xml,%3csvg xmlns=&apos;http://www.w3.org/2000/svg&apos; viewBox=&apos;0 0 16 16&apos;%3e%3cpath fill=&apos;none&apos; stroke=&apos;%23ffffff&apos; stroke-linecap=&apos;round&apos; stroke-linejoin=&apos;round&apos; stroke-width=&apos;2&apos; d=&apos;M2 5l6 6 6-6&apos;/%3e%3c/svg%3e");' id="value-11" onchange="updateFromSelection();">
                        <option value="0" selected>Doesn't need to eat</option>
                        <option value="1">Can't eat fish or meat</option>
                        <option value="2">Can't eat meat</option>
                        <option value="3">Can eat everything</option>
                    </select>
                </td>
            </tr><tr>
                <td style="padding-right: 10px; text-align: right;">
                    <b>Little/younger: </b>
                </td>
                <td>
                    <select class="tooltip-nohelp form-select" style='display:inline-block;width:max-content;color:white;background-color:#111;border-color:#222;background-image:url("data:image/svg+xml,%3csvg xmlns=&apos;http://www.w3.org/2000/svg&apos; viewBox=&apos;0 0 16 16&apos;%3e%3cpath fill=&apos;none&apos; stroke=&apos;%23ffffff&apos; stroke-linecap=&apos;round&apos; stroke-linejoin=&apos;round&apos; stroke-width=&apos;2&apos; d=&apos;M2 5l6 6 6-6&apos;/%3e%3c/svg%3e");' id="value-1" onchange="updateFromSelection();">
                        <option value="0" selected>None</option>
                        <option value="2">Little</option>
                        <option value="3">Younger</option>
                        <option value="1" disabled>Age regressor (old)</option>
                    </select>
                </td>
            </tr><tr>
                <td style="padding-right: 10px; text-align: right;">
                    <b>Species: </b>
                </td>
                <td>
                    <select class="tooltip-nohelp form-select" style='display:inline-block;width:max-content;color:white;background-color:#111;border-color:#222;background-image:url("data:image/svg+xml,%3csvg xmlns=&apos;http://www.w3.org/2000/svg&apos; viewBox=&apos;0 0 16 16&apos;%3e%3cpath fill=&apos;none&apos; stroke=&apos;%23ffffff&apos; stroke-linecap=&apos;round&apos; stroke-linejoin=&apos;round&apos; stroke-width=&apos;2&apos; d=&apos;M2 5l6 6 6-6&apos;/%3e%3c/svg%3e");' id="value-2" onchange="updateFromSelection();">
                        <option value="0000" disabled>None</option>
                        <option value="0001">Earth pony</option>
                        <option value="0010">Unicorn</option>
                        <option value="0011">Pegasus</option>
                        <option value="0100">Alicorn</option>
                        <option value="0101">Bat pony</option>
                        <option value="0110">Crystal pony</option>
                        <option value="0111">Changeling</option>
                    </select>
                    <select class="tooltip-nohelp form-select" style='display:inline-block;width:max-content;color:white;background-color:#111;border-color:#222;background-image:url("data:image/svg+xml,%3csvg xmlns=&apos;http://www.w3.org/2000/svg&apos; viewBox=&apos;0 0 16 16&apos;%3e%3cpath fill=&apos;none&apos; stroke=&apos;%23ffffff&apos; stroke-linecap=&apos;round&apos; stroke-linejoin=&apos;round&apos; stroke-width=&apos;2&apos; d=&apos;M2 5l6 6 6-6&apos;/%3e%3c/svg%3e");' id="value-3" onchange="updateFromSelection();">
                        <option value="0000">None</option>
                        <option value="0001">Earth pony</option>
                        <option value="0010">Unicorn</option>
                        <option value="0011">Pegasus</option>
                        <option value="0100">Alicorn</option>
                        <option value="0101">Bat pony</option>
                        <option value="0110">Crystal pony</option>
                        <option value="0111">Changeling</option>
                    </select>
                    <select class="tooltip-nohelp form-select" style='display:none;width:max-content;color:white;background-color:#111;border-color:#222;background-image:url("data:image/svg+xml,%3csvg xmlns=&apos;http://www.w3.org/2000/svg&apos; viewBox=&apos;0 0 16 16&apos;%3e%3cpath fill=&apos;none&apos; stroke=&apos;%23ffffff&apos; stroke-linecap=&apos;round&apos; stroke-linejoin=&apos;round&apos; stroke-width=&apos;2&apos; d=&apos;M2 5l6 6 6-6&apos;/%3e%3c/svg%3e");' id="value-14" onchange="updateFromSelection();">
                        <option value="0000">None</option>
                        <option value="0001">Earth pony</option>
                        <option value="0010">Unicorn</option>
                        <option value="0011">Pegasus</option>
                        <option value="0100">Alicorn</option>
                        <option value="0101">Bat pony</option>
                        <option value="0110">Crystal pony</option>
                        <option value="0111">Changeling</option>
                    </select>
                </td>
            </tr><tr>
                <td style="padding-right: 10px; text-align: right;">
                    <b>Alignment: </b>
                </td>
                <td>
                    <select class="tooltip-nohelp form-select" style='display:inline-block;width:max-content;color:white;background-color:#111;border-color:#222;background-image:url("data:image/svg+xml,%3csvg xmlns=&apos;http://www.w3.org/2000/svg&apos; viewBox=&apos;0 0 16 16&apos;%3e%3cpath fill=&apos;none&apos; stroke=&apos;%23ffffff&apos; stroke-linecap=&apos;round&apos; stroke-linejoin=&apos;round&apos; stroke-width=&apos;2&apos; d=&apos;M2 5l6 6 6-6&apos;/%3e%3c/svg%3e");' id="value-24" onchange="updateFromSelection();">
                        <option value="0000">Asexual</option>
                        <option value="0001">Heterosexual</option>
                        <option value="0010">Homosexual</option>
                        <option value="0011">Bisexual</option>
                        <option value="0100">Pansexual</option>
                    </select>
                    <select class="tooltip-nohelp form-select" style='display:inline-block;width:max-content;color:white;background-color:#111;border-color:#222;background-image:url("data:image/svg+xml,%3csvg xmlns=&apos;http://www.w3.org/2000/svg&apos; viewBox=&apos;0 0 16 16&apos;%3e%3cpath fill=&apos;none&apos; stroke=&apos;%23ffffff&apos; stroke-linecap=&apos;round&apos; stroke-linejoin=&apos;round&apos; stroke-width=&apos;2&apos; d=&apos;M2 5l6 6 6-6&apos;/%3e%3c/svg%3e");' id="value-25" onchange="updateFromSelection();">
                        <option value="0000">Aromantic</option>
                        <option value="0001">Heteroromantic</option>
                        <option value="0010">Homoromantic</option>
                        <option value="0011">Biromantic</option>
                        <option value="0100">Panromantic</option>
                    </select>
                </td>
            </tr>
        </tbody>
    </table>
    <p>
        <label style="margin-bottom:5px;">
            <input type="checkbox" id="value-5" onchange="updateFromSelection();">
            Protector
        </label><br>
        <label style="margin-bottom:5px;">
            <input type="checkbox" id="value-20" onchange="updateFromSelection();">
            Leader
        </label><br>
        <label style="margin-bottom:5px;">
            <input type="checkbox" id="value-6" onchange="updateFromSelection();">
            Fictive
        </label><br>
        <label style="margin-bottom:5px;">
            <input type="checkbox" id="value-18" onchange="updateFromSelection();">
            Preemptive sexual consent
        </label><br>
        <label style="margin-bottom:5px;">
            <input type="checkbox" id="value-9" onchange="updateFromSelection();">
            Robot
        </label><br>
        <label style="margin-bottom:5px;">
            <input type="checkbox" id="value-10" onchange="updateFromSelection();">
            Plush
        </label><br>
        <label style="margin-bottom:5px;">
            <input type="checkbox" id="value-22" onchange="updateFromSelection();">
            Polyamorous (romantic)
        </label><br>
        <label style="margin-bottom:5px;">
            <input type="checkbox" id="value-23" onchange="updateFromSelection();">
            Polyamorous (sexual)
        </label><br>
        <label style="margin-bottom:5px;">
            <input type="checkbox" id="value-16" onchange="updateFromSelection();">
            Non verbal in real life
        </label><br>
        <label style="margin-bottom:5px;">
            <input type="checkbox" id="value-17" onchange="updateFromSelection();">
            Fronts less frequently
        </label><br>
        <label style="margin-bottom:5px;">
            <input type="checkbox" id="value-21" onchange="updateFromSelection();">
            Persecutor
        </label><br>
    </p>

    <div id="deprecated-options" style="display: none;">
        <hr>
        <details>
            <summary>Show deprecated options</summary>

            <p>Nothing here lol</p>
        </details>
    </div>
</div>

<?php require_once $_SERVER['DOCUMENT_ROOT'] . '/includes/footer.inc'; ?>