th.guenther/kompass
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Integrated mareike dashboard theme

Browse Source
This commit is contained in:
Thomas Günther
2024-07-31 17:53:07 +02:00
parent 5e107d36ca
commit 923d76c085
8 changed files with 397 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

134
settings/views/settings.php Normal file
View File

@ -0,0 +1,134 @@
<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>