kompass/settings/views/settings.php

<?php
use Bdp\Libs\WpConfigEditor;
?>
<form action="<?php echo esc_url(admin_url('options-general.php?page=kompass-settings')); ?>" method="post">
<input type="hidden" name="save" value="1">
<h2>Kompass Einstellungen</h2>
<table>
    <tr>
        <td style="font-weight: bold; padding: 10px;">Seite wird für LV genutzt</td>
        <td>
    <div class="switch-container">
        <input name="used_for_state" <?php if (false !== (bool)get_option( 'paged_used_for_state', false )) echo ' checked ';?> type="checkbox" id="switch_lv" class="switch">
        <label for="switch_lv" class="switch-label">
            <span class="switch-inner" data-on="ON" data-off="OFF"></span>
            <span class="switch-switch"></span>
        </label>
    </div>
        </td>
    </tr>

    <tr>
        <td style="font-weight: bold; padding: 10px;">Externe Cron-Ausführung</td>
        <td>
            <div class="switch-container">
                <input name="external_cronjobs"
                    <?php
                     if (WpConfigEditor::getConfigValue('DISABLE_WP_CRON') )
                        echo ' checked ';?> type="checkbox" id="external_cronjobs" class="switch">
                <label for="external_cronjobs" class="switch-label">
                    <span class="switch-inner" data-on="ON" data-off="OFF"></span>
                    <span class="switch-switch"></span>
                </label>
            </div>
        </td>
    </tr>

    <tr>
        <td style="font-weight: bold; padding: 10px;">Nutzer können sich selbst anmelden</td>
        <td>
            <div class="switch-container">
                <input <?php if (false !== (bool)get_option( 'user_can_register', false )) echo ' checked ';?> name="self_register" type="checkbox" id="switch_register" class="switch">
                <label for="switch_register" class="switch-label">
                    <span class="switch-inner" data-on="ON" data-off="OFF"></span>
                    <span class="switch-switch"></span>
                </label>
            </div>
        </td>
    </tr>

    <tr>
        <td style="font-weight: bold; padding: 10px;">mareike Theme</td>
        <td>
            <div class="switch-container">
                <input name="use_mareike_theme" <?php if (false !== (bool)get_option( 'use_mareike_theme', false )) echo ' checked ';?>type="checkbox" id="switch_mareike" class="switch">
                <label for="switch_mareike" class="switch-label">
                    <span class="switch-inner" data-on="ON" data-off="OFF"></span>
                    <span class="switch-switch"></span>
                </label>
            </div>
        </td>
    </tr>
</table>
    <input type="submit" class="button-primary" value="Speichern">
</form>
<style>
    .switch-container {
        position: relative;
        padding: 0;
    }

    .switch {
        visibility: hidden; /* Checkbox unsichtbar machen */
    }

    .switch-label {
        display: block;
        width: 70px;
        height: 34px;
        background-color: #ccc;
        border-radius: 34px;
        position: relative;
        cursor: pointer;
        transition: background-color 0.3s ease;
    }

    .switch-inner {
        position: absolute;
        width: 100%;
        height: 100%;
        border-radius: 34px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 10px;
        font-size: 12px;
        color: white;
        box-sizing: border-box;
        transition: background-color 0.3s ease;
    }

    .switch-inner::before,
    .switch-inner::after {
        content: attr(data-off);
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }

    .switch-inner::after {
        content: attr(data-on);
        right: 10px;
        opacity: 0;
    }

    .switch-switch {
        position: absolute;
        top: 3px;
        left: 3px;
        width: 28px;
        height: 28px;
        background-color: #fff;
        border-radius: 50%;
        transition: transform 0.3s ease, background-color 0.3s ease;
    }

    .switch:checked + .switch-label {
        background-color: #4CAF50;
    }

    .switch:checked + .switch-label .switch-inner::before {
        opacity: 0;
    }

    .switch:checked + .switch-label .switch-inner::after {
        opacity: 1;
    }

    .switch:checked + .switch-label .switch-switch {
        transform: translateX(36px);
    }
</style>

<script>
    // script.js
    document.getElementById('switch').addEventListener('change', function() {
        if (this.checked) {
            console.log('Switch is ON');
        } else {
            console.log('Switch is OFF');
        }
    });

</script>