134 lines
3.9 KiB
PHP
134 lines
3.9 KiB
PHP
<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;">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>
|