Integrated mareike dashboard theme
This commit is contained in:
parent
5e107d36ca
commit
923d76c085
175
assets/mareike.css
Normal file
175
assets/mareike.css
Normal file
@ -0,0 +1,175 @@
|
||||
/* Allgemeine Anpassungen */
|
||||
body {
|
||||
--ame-ms-menu-width: 250px;
|
||||
}
|
||||
|
||||
#wpwrap {
|
||||
background-color: #f3f3f1; /* Hintergrundfarbe angepasst */
|
||||
}
|
||||
|
||||
/* Admin Menü */
|
||||
#adminmenuback, #adminmenuwrap, #adminmenu {
|
||||
width: 250px;
|
||||
background-color: #ffffff; /* Hintergrundfarbe angepasst */
|
||||
}
|
||||
|
||||
#adminmenu .wp-has-current-submenu > .wp-submenu {
|
||||
width: 250px;
|
||||
}
|
||||
|
||||
#wpcontent, #wpfooter {
|
||||
margin-left: 250px;
|
||||
background-color: #ffffff;
|
||||
padding-left: 20px; /* Padding reduziert */
|
||||
}
|
||||
|
||||
#adminmenu .wp-not-current-submenu .wp-submenu, .folded #adminmenu .wp-has-current-submenu .wp-submenu, #adminmenu .ame-has-deep-submenu:not(.ame-has-highlighted-item) > .wp-submenu {
|
||||
width: 250px;
|
||||
}
|
||||
|
||||
/* Menüelemente */
|
||||
#adminmenu > li {
|
||||
padding: 10px 10px; /* Padding angepasst */
|
||||
font-weight: bold; /* Schriftstärke angepasst */
|
||||
}
|
||||
|
||||
#adminmenu > li a {
|
||||
color: #333; /* Textfarbe angepasst */
|
||||
}
|
||||
|
||||
#adminmenu > li div.wp-menu-image:before {
|
||||
color: #333; /* Iconfarbe angepasst */
|
||||
}
|
||||
|
||||
#adminmenu > li a:hover, #adminmenu > li.menu-top:hover, #adminmenu > li.opensub > a.menu-top, #adminmenu > li > a.menu-top:focus {
|
||||
color: #0056b3; /* Textfarbe bei Hover angepasst */
|
||||
}
|
||||
|
||||
#adminmenu > li.menu-top:hover, #adminmenu > li.opensub > a.menu-top, #adminmenu > li > a.menu-top:focus {
|
||||
background-color: #e9ecef; /* Hintergrundfarbe bei Hover angepasst */
|
||||
}
|
||||
|
||||
#adminmenu .wp-submenu, #adminmenu .wp-submenu a {
|
||||
background-color: #f8f9fa; /* Untermenü-Hintergrundfarbe angepasst */
|
||||
color: #333; /* Untermenü-Textfarbe angepasst */
|
||||
}
|
||||
|
||||
#adminmenu .wp-submenu a:hover {
|
||||
background-color: #e9ecef; /* Untermenü-Hintergrundfarbe bei Hover angepasst */
|
||||
color: #0056b3; /* Untermenü-Textfarbe bei Hover angepasst */
|
||||
}
|
||||
|
||||
/* Admin Bar */
|
||||
#wpadminbar {
|
||||
background-color: #ffffff; /* Admin Bar Hintergrundfarbe angepasst */
|
||||
color: #0056b3; /* Admin Bar Textfarbe angepasst */
|
||||
}
|
||||
|
||||
#wpadminbar .ab-item, #wpadminbar a.ab-item, #wpadminbar > #wp-toolbar span.ab-label, #wpadminbar > #wp-toolbar span.noticon {
|
||||
color: #0056b3; /* Admin Bar Textfarbe angepasst */
|
||||
}
|
||||
|
||||
#wpadminbar .ab-icon, #wpadminbar .ab-icon:before, #wpadminbar .ab-item:before, #wpadminbar .ab-item:after {
|
||||
color: #0056b3; /* Admin Bar Icon-Farbe angepasst */
|
||||
}
|
||||
|
||||
#wpadminbar:not(.mobile) .ab-top-menu > li:hover > .ab-item, #wpadminbar:not(.mobile) .ab-top-menu > li > .ab-item:focus, #wpadminbar.nojq .quicklinks .ab-top-menu > li > .ab-item:focus, #wpadminbar.nojs .ab-top-menu > li.menupop:hover > .ab-item, #wpadminbar .ab-top-menu > li.menupop.hover > .ab-item {
|
||||
background-color: #e9ecef; /* Admin Bar Hintergrundfarbe bei Hover angepasst */
|
||||
color: #0056b3; /* Admin Bar Textfarbe bei Hover angepasst */
|
||||
}
|
||||
|
||||
#wpadminbar .quicklinks .menupop ul li a:hover, #wpadminbar .quicklinks .menupop ul li a:focus {
|
||||
background-color: #e9ecef; /* Untermenü Hintergrundfarbe bei Hover angepasst */
|
||||
color: #0056b3; /* Untermenü Textfarbe bei Hover angepasst */
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
.button-primary {
|
||||
border-style: none;
|
||||
background-color: #0056b3 !important; /* Button Hintergrundfarbe angepasst */
|
||||
color: #ffffff !important; /* Button Textfarbe angepasst */
|
||||
box-shadow: none; /* Box-Shadow entfernt */
|
||||
}
|
||||
|
||||
.button-primary:hover {
|
||||
background-color: #004085 !important; /* Button Hintergrundfarbe bei Hover angepasst */
|
||||
}
|
||||
|
||||
/* Anpassungen für Bildschirme mit unterschiedlichen Breiten */
|
||||
@media screen and (min-width: 783px) {
|
||||
#adminmenu .wp-not-current-submenu .wp-submenu {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 960px) and (min-width: 783px) {
|
||||
body.auto-fold #widgets-editor .interface-interface-skeleton {
|
||||
left: var(--ame-ms-collapsed-menu-width, 36px);
|
||||
}
|
||||
}
|
||||
|
||||
/* Weitere Anpassungen */
|
||||
.nav-tab {
|
||||
border-color: #0056b3;
|
||||
background-color: #e9ecef;
|
||||
border-radius: 5px 5px 0 0;
|
||||
}
|
||||
|
||||
.about-wrap .nav-tab-active, .nav-tab-active, .nav-tab-active:hover {
|
||||
border-style: none;
|
||||
background-color: #ffffff;
|
||||
border-bottom-color: #ffffff;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
/* Weitere spezifische Anpassungen */
|
||||
#collapse-button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Spezielle Einstellungen Box */
|
||||
.bdp_setting_box {
|
||||
margin-right: 10px;
|
||||
background-color: #ffffff;
|
||||
padding: 15px;
|
||||
border: 1px solid #1d94cf;
|
||||
}
|
||||
|
||||
.bdp_setting_box label {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.bdp_setting_box label span {
|
||||
cursor: pointer;
|
||||
width: 10pt;
|
||||
color: #a0a0a0;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 783px) {
|
||||
.wp-has-current-submenu li a {
|
||||
width: 210px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.wp-submenu li a:hover {
|
||||
background-color: #e9ecef !important;
|
||||
color: #0056b3 !important;
|
||||
}
|
||||
|
||||
.current .menu-top .wp-menu-name, .wp-has-current-submenu .wp-menu-name {
|
||||
background-color: #0056b3 !important;
|
||||
border-style: none !important;
|
||||
width: 202px;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 783px) {
|
||||
.wp-submenu, .wp-submenu-wrap {
|
||||
background-color: #f8f9fa !important;
|
||||
width: 220px !important;
|
||||
}
|
||||
|
||||
#adminmenu .current .menu-top .wp-menu-name {
|
||||
padding: 10px;
|
||||
width: 225px !important;
|
||||
}
|
||||
}
|
@ -13,7 +13,6 @@
|
||||
*/
|
||||
|
||||
use Bdp\Modules\EventParticipants\Controllers\MainController as EventsMain;
|
||||
use Bdp\Modules\Gruppen\Controllers\MainController as GruppenMain;
|
||||
use Bdp\Modules\KompassSettings\Controllers\SettingsPage as KomnpassSettings;
|
||||
use Bdp\Modules\LimitLoginAttempts\Controllers\OptionsPage as OptionsPageAlias;
|
||||
use Bdp\Modules\Mail\Controllers\MailController;
|
||||
@ -78,18 +77,10 @@ function enqueue_custom_password_js() {
|
||||
|
||||
add_action( 'after_setup_theme', 'kompass_after_setup_theme' );
|
||||
|
||||
add_action( 'admin_menu', ['Bdp\Modules\KompassSettings\Controllers\SettingsPage', 'add_menu'] );
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// Add registration form fields
|
||||
function crp_custom_register_form() {
|
||||
|
||||
}
|
||||
@ -123,3 +114,27 @@ add_filter('sanitize_user', 'crp_allow_umlauts_in_usernames', 10, 3);
|
||||
|
||||
|
||||
add_action('login_message', ['Bdp\Modules\Registration\Controllers\SaveRegistration','display_custom_message']);
|
||||
|
||||
if (false === (bool)get_option('user_can_register', false)) {
|
||||
|
||||
add_filter('registration_errors', 'kompass_disable_user_registration', 10, 3);
|
||||
|
||||
function kompass_disable_user_registration($errors, $sanitized_user_login, $user_email) {
|
||||
$errors->add('registration_disabled', __('Die Registrierung ist derzeit deaktiviert.'));
|
||||
return $errors;
|
||||
}
|
||||
|
||||
add_action('login_enqueue_scripts', 'kompass_remove_register_link');
|
||||
|
||||
function kompass_remove_register_link() {
|
||||
?>
|
||||
<style>
|
||||
#registerform {
|
||||
display: none !important;
|
||||
}
|
||||
</style>
|
||||
<?php
|
||||
}
|
||||
|
||||
|
||||
}
|
@ -4,41 +4,18 @@ add_action('admin_enqueue_scripts', 'bdp_update_dashboard_style');
|
||||
add_action('login_enqueue_scripts', 'bdp_update_login_style');
|
||||
|
||||
function bdp_update_login_style() {
|
||||
$css = file_get_contents(BDP_LV_PLUGIN_DIR . 'assets/dashboard.style.css.tpl');
|
||||
echo str_replace('%%BDP_LV_PLUGIN_URL%%', BDP_LV_PLUGIN_URL, $css);
|
||||
if (false === (bool)get_option( 'use_mareike_theme', false )) {
|
||||
$css = file_get_contents( BDP_LV_PLUGIN_DIR . 'assets/dashboard.style.css.tpl' );
|
||||
echo str_replace( '%%BDP_LV_PLUGIN_URL%%', BDP_LV_PLUGIN_URL, $css );
|
||||
}
|
||||
}
|
||||
|
||||
function bdp_update_dashboard_style() {
|
||||
wp_enqueue_style('custom-dashboard-styles', BDP_LV_PLUGIN_URL . '/assets/wordpress-bdp.css');
|
||||
if (true === (bool)get_option( 'use_mareike_theme', false )) {
|
||||
wp_enqueue_style( 'custom-dashboard-styles', BDP_LV_PLUGIN_URL . '/assets/mareike.css' );
|
||||
} else {
|
||||
wp_enqueue_style( 'custom-dashboard-styles', BDP_LV_PLUGIN_URL . '/assets/wordpress-bdp.css' );
|
||||
}
|
||||
wp_enqueue_style('custom-calendar-styles', BDP_LV_PLUGIN_URL . '/assets/calendar.css');
|
||||
wp_enqueue_style('custom-security-styles', BDP_LV_PLUGIN_URL . '/assets/security.css');
|
||||
}
|
||||
|
||||
|
||||
function bdp_add_menu_mein_lv() {
|
||||
$location = BDP_LV_PLUGIN_DIR . '/modules/';
|
||||
$mainSlug = $location . 'index.php';
|
||||
$moduleLoad = get_admin_url() . 'admin.php?page=' . BDP_LV_PLUGIN_SLUG . '/modules/index.php&loadmodule=';
|
||||
|
||||
add_menu_page(
|
||||
'Mein BdP',
|
||||
'BdP',
|
||||
'show_bdp',
|
||||
$mainSlug,
|
||||
'',
|
||||
BDP_LV_PLUGIN_URL . '/icon.png',
|
||||
3
|
||||
);
|
||||
|
||||
add_submenu_page($mainSlug,
|
||||
'Über',
|
||||
'Über',
|
||||
'show_bdp',
|
||||
$moduleLoad . 'about'
|
||||
);
|
||||
}
|
||||
|
||||
function bdp_create_menu_structure()
|
||||
{;
|
||||
bdp_add_menu_mein_lv();
|
||||
}
|
||||
|
@ -44,9 +44,6 @@ function kompass_admin_init()
|
||||
kompass_settings_validators();
|
||||
}
|
||||
|
||||
bdp_create_menu_structure();
|
||||
|
||||
|
||||
function bdp_kompass_load_plugin_textdomain() {
|
||||
load_textdomain( BDP_LV_PLUGIN_SLUG, BDP_LV_PLUGIN_DIR . '/lang/' . BDP_LV_PLUGIN_SLUG . '-' . get_locale() . '.mo' );
|
||||
}
|
||||
|
@ -5,6 +5,16 @@ namespace Bdp\Modules\KompassSettings\Controllers;
|
||||
|
||||
class SettingsPage
|
||||
{
|
||||
public static function add_menu() {
|
||||
add_submenu_page('options-general.php',
|
||||
'kompass Einstellungen',
|
||||
'kompass Einstellungen',
|
||||
'manage_options',
|
||||
'kompass-settings',
|
||||
['Bdp\Modules\KompassSettings\Controllers\SettingsPage', 'kompass_settings_page_new']
|
||||
);
|
||||
|
||||
}
|
||||
public function __construct()
|
||||
{
|
||||
add_options_page(
|
||||
@ -13,6 +23,34 @@ class SettingsPage
|
||||
'manage_options',
|
||||
BDP_LV_PLUGIN_SLUG . '-Kompass-settings',
|
||||
[$this, 'option_page'],2048);
|
||||
|
||||
|
||||
add_options_page(
|
||||
__('Mail', BDP_LV_PLUGIN_SLUG) . ' - ' . __('Settings', BDP_LV_PLUGIN_SLUG),
|
||||
__('Mail', BDP_LV_PLUGIN_SLUG) . ' - ' . __('Settings', BDP_LV_PLUGIN_SLUG),
|
||||
'manage_options',
|
||||
BDP_LV_PLUGIN_SLUG . '-Kompass-mail-settings',
|
||||
[$this, 'mail_option_page'],2048);
|
||||
}
|
||||
|
||||
|
||||
public static function kompass_settings_page_new() {
|
||||
if (isset($_POST['save'])) {
|
||||
|
||||
update_option('paged_used_for_state', false);
|
||||
update_option('user_can_register', false);
|
||||
update_option('use_mareike_theme', false);
|
||||
|
||||
if (isset($_POST['used_for_state'])) { update_option('paged_used_for_state', true); }
|
||||
if (isset($_POST['self_register'])) { update_option('user_can_register', true); }
|
||||
if (isset($_POST['use_mareike_theme'])) { update_option('use_mareike_theme', true); }
|
||||
|
||||
kompass_print_message_box('Die Einstellungen wurden gespeichert.');
|
||||
}
|
||||
|
||||
require BDP_LV_PLUGIN_DIR . '/settings/views/settings.php';
|
||||
return;
|
||||
|
||||
}
|
||||
|
||||
|
||||
@ -22,13 +60,13 @@ class SettingsPage
|
||||
$tab = isset($_REQUEST['tab']) ? $_REQUEST['tab'] : 'tab1';
|
||||
if (isset($_REQUEST['update_options']) && $_REQUEST['update_options'] == true) {
|
||||
switch ($tab) {
|
||||
case 'tab1':
|
||||
case 'tab2':
|
||||
update_option('bdp_calendar_categories', json_encode($_POST['category']));
|
||||
update_option('bdp_calendar_source_url', $_POST['bdp_calendar_source_url']);
|
||||
$showMessage = __('The settings were saved.', BDP_LV_PLUGIN_SLUG);
|
||||
break;
|
||||
|
||||
case 'tab2':
|
||||
case 'tab3':
|
||||
update_option('kompass_seo_google_verification', $_POST['kompass_seo_google_verification']);
|
||||
update_option('kompass_seo_bing_verification', $_POST['kompass_seo_bing_verification']);
|
||||
$showMessage = __('The settings were saved.', BDP_LV_PLUGIN_SLUG);
|
||||
@ -55,19 +93,19 @@ class SettingsPage
|
||||
<div class="tab-content">
|
||||
<?php
|
||||
switch ($tab) {
|
||||
case 'tab1':
|
||||
echo '<form action="admin.php?page=bdp-kompass-Kompass-settings&tab=tab1" method="post">';
|
||||
case 'tab2':
|
||||
echo '<form action="admin.php?page=bdp-kompass-Kompass-settings&tab=tab2" method="post">';
|
||||
do_settings_sections(BDP_LV_PLUGIN_SLUG . '-calendar-settings');
|
||||
require_once BDP_LV_PLUGIN_DIR . '/modules/calendar/Views/categories-partial.php';
|
||||
echo '<input type="hidden" name="tab" value="tab1" />';
|
||||
echo '<input type="hidden" name="tab" value="tab2" />';
|
||||
submit_button();
|
||||
echo '</form>';
|
||||
break;
|
||||
case 'tab2':
|
||||
case 'tab3':
|
||||
echo '<form action="admin.php?page=bdp-kompass-Kompass-settings" method="post">';
|
||||
do_settings_sections(BDP_LV_PLUGIN_SLUG . '-seo-settings');
|
||||
submit_button();
|
||||
echo '<input type="hidden" name="tab" value="tab2" />';
|
||||
echo '<input type="hidden" name="tab" value="tab3" />';
|
||||
echo '</form>';
|
||||
break;
|
||||
}
|
||||
|
@ -3,10 +3,15 @@
|
||||
{
|
||||
$baseUrl = 'admin.php?page=bdp-kompass-Kompass-settings&tab=';
|
||||
return '<h2 class="nav-tab-wrapper">'.
|
||||
'<a href="' . $baseUrl . 'tab1" class="nav-tab ' . ($activeTab == 'tab1' ? 'nav-tab-active' : '') . '">' .
|
||||
'<a href="' . $baseUrl . 'tab1" class="nav-tab ' . ($activeTab == 'tab1' ? 'nav-tab-active' : '') . '">' .
|
||||
__('Kompass Settings', BDP_LV_PLUGIN_SLUG) .
|
||||
'</a>'.
|
||||
|
||||
|
||||
'<a href="' . $baseUrl . 'tab2" class="nav-tab ' . ($activeTab == 'tab2' ? 'nav-tab-active' : '') . '">' .
|
||||
__('Calendar Settings', BDP_LV_PLUGIN_SLUG) .
|
||||
'</a>'.
|
||||
'<a href="' . $baseUrl . 'tab2" class="nav-tab ' . ($activeTab == 'tab2' ? 'nav-tab-active' : '') .'">' .
|
||||
'<a href="' . $baseUrl . 'tab3" class="nav-tab ' . ($activeTab == 'tab3' ? 'nav-tab-active' : '') .'">' .
|
||||
__('SEO', BDP_LV_PLUGIN_SLUG) .
|
||||
'</a>'.
|
||||
'</h2>';
|
||||
|
@ -24,7 +24,7 @@ class SaveRegistration {
|
||||
|
||||
// Assign the 'Standarduser' role to the new user
|
||||
$user = new WP_User($user_id);
|
||||
$user->set_role('standarduser');
|
||||
$user->set_role('user');
|
||||
|
||||
// Send confirmation email
|
||||
$user = get_userdata($user_id);
|
||||
|
134
settings/views/settings.php
Normal file
134
settings/views/settings.php
Normal 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>
|
Loading…
Reference in New Issue
Block a user