diff --git a/script.js b/script.js new file mode 100644 index 0000000..a1b2cf3 --- /dev/null +++ b/script.js @@ -0,0 +1,40 @@ +document.addEventListener('DOMContentLoaded', function() { + // Tab-Funktionalität + const tabButtons = document.querySelectorAll('.regel-tab-button'); + const tabPanels = document.querySelectorAll('.regel-tab-panel'); + + tabButtons.forEach(button => { + button.addEventListener('click', () => { + const targetTabId = button.getAttribute('data-tab'); + + if (!button.classList.contains('active')) { + tabButtons.forEach(btn => btn.classList.remove('active')); + tabPanels.forEach(panel => panel.classList.remove('active')); + + button.classList.add('active'); + document.getElementById(targetTabId).classList.add('active'); + } + }); + }); + + // Akkordeon-Funktionalität (Regeln aufklappen) + const ruleToggles = document.querySelectorAll('.regel-toggle'); + + ruleToggles.forEach(toggle => { + toggle.addEventListener('click', () => { + const ruleItem = toggle.parentElement; + const wasOpen = ruleItem.classList.contains('open'); + + // Schließe alle anderen Regeln im selben Tab (Akkordeon-Verhalten) + const currentPanel = ruleItem.closest('.regel-tab-panel'); + currentPanel.querySelectorAll('.regel-item').forEach(item => { + if (item !== ruleItem) { + item.classList.remove('open'); + } + }); + + // Schalte den aktuellen Zustand um + ruleItem.classList.toggle('open', !wasOpen); + }); + }); +}); \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..e31ab85 --- /dev/null +++ b/style.css @@ -0,0 +1,198 @@ +/* CSS Variablen für ein modernes, konsistentes Design */ +:root { + --primary-color: #0073aa; + --primary-hover: #005a87; + --background-light: #f8f9fa; + --background-lighter: #ffffff; + --text-color: #2c3e50; + --text-muted: #6c757d; + --border-color: #dee2e6; + --border-radius: 8px; + --transition-speed: 0.25s; + --shadow-sm: 0 2px 4px rgba(0,0,0,0.06); + --shadow-md: 0 4px 12px rgba(0,0,0,0.08); + --shadow-lg: 0 8px 25px rgba(0,0,0,0.12); +} + +/* Haupt-Container */ +.regel-plugin-container { + max-width: 900px; + margin: 40px auto; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; + background: var(--background-lighter); + border-radius: var(--border-radius); + box-shadow: var(--shadow-lg); + overflow: hidden; + border: 1px solid var(--border-color); +} + +/* Tab-Navigation */ +.regel-tabs-nav { + display: flex; + background: var(--background-light); + border-bottom: 1px solid var(--border-color); + padding: 8px; +} + +.regel-tab-button { + background: transparent; + border: none; + padding: 14px 24px; + margin: 0 4px; + cursor: pointer; + font-weight: 600; + transition: all var(--transition-speed) ease; + border-radius: 6px; + flex-grow: 1; + text-align: center; +} + +.regel-tab-button:hover { + background: rgba(0, 115, 170, 0.05); +} + +.regel-tab-button.active { + background: var(--background-lighter); + box-shadow: var(--shadow-sm); + border-bottom: 3px solid var(--primary-color); +} + +/* Tab-Panels (Inhalte) */ +.regel-tabs-content .regel-tab-panel { + display: none; + padding: 25px; + animation: fadeInUp 0.5s ease-out; +} + +.regel-tabs-content .regel-tab-panel.active { + display: block; +} + +@keyframes fadeInUp { + from { opacity: 0; transform: translateY(15px); } + to { opacity: 1; transform: translateY(0); } +} + +/* Akkordeon-Items (Regeln) */ +.regel-item { + margin-bottom: 16px; + border: 1px solid var(--border-color); + border-radius: var(--border-radius); + overflow: hidden; + transition: all var(--transition-speed) ease; + border-left: 4px solid var(--primary-color); +} + +.regel-item:hover { + transform: translateY(-2px); + box-shadow: var(--shadow-md); +} + +.regel-item:last-child { + margin-bottom: 0; +} + +/* KORREKTUR: Icon-Positionierung */ +.regel-toggle { + width: 100%; + background: var(--background-lighter); + border: none; + padding: 18px 22px 18px 50px; /* Links mehr Padding für den Icon-Platz */ + text-align: left; + font-weight: 600; + cursor: pointer; + display: flex; + align-items: center; + transition: background var(--transition-speed) ease; + position: relative; /* Wichtig für die Positionierung des Icons */ +} + +.regel-toggle:hover { + background: var(--background-light); +} + +/* Das Plus/Minus Icon (Sehr spezifische Version) */ +.regel-plugin-container .regel-icon { + display: inline-block; + width: 24px; + height: 24px; + line-height: 22px; + text-align: center; + font-size: 20px; + font-weight: bold; + border-radius: 50%; + color: #000000 !important; + flex-shrink: 0; + transition: transform var(--transition-speed) ease, opacity var(--transition-speed) ease; + position: absolute; + left: 22px; + top: 50%; + transform: translateY(-50%); +} + +.regel-item .icon-minus { + opacity: 0; + transform: translateY(-50%) scale(0.8); +} + +.regel-item.open .icon-plus { + opacity: 0; + transform: translateY(-50%) scale(0.8); +} + +.regel-item.open .icon-minus { + opacity: 1; + transform: translateY(-50%) scale(1); +} + +/* Aufklappbarer Inhalt */ +.regel-content { + max-height: 0; + overflow: hidden; + transition: max-height 0.4s ease-out, padding 0.4s ease-out; + background: var(--background-lighter); +} + +.regel-item.open .regel-content { + max-height: 1000px; + padding: 0 22px 20px 50px; /* Linker Abstand anpassen */ +} + +.regel-content-inner { + padding-top: 5px; + line-height: 1.7; +} + +/* NEU & WICHTIG: Entfernt Listenpunkte (Punkte, Zahlen) zuverlässig */ +/* Diese Regel ist spezifischer und überschreibt Theme-Styles */ +.regel-plugin-container .regel-content-inner ul, +.regel-plugin-container .regel-content-inner ol { + list-style: none; + padding-left: 0; + margin-left: 0; +} +.regel-plugin-container .regel-content-inner li { + list-style: none; +} + + +/* Responsive Design */ +@media (max-width: 768px) { + .regel-plugin-container { + margin: 20px; + border-radius: 0; + } + .regel-tabs-nav { + flex-wrap: wrap; + padding: 5px; + } + .regel-tab-button { + flex-basis: 50%; + margin: 2px; + font-size: 14px; + padding: 12px 8px; + } + .regel-tabs-content .regel-tab-panel { + padding: 15px; + } +} \ No newline at end of file diff --git a/wp-rules.php b/wp-rules.php new file mode 100644 index 0000000..207e071 --- /dev/null +++ b/wp-rules.php @@ -0,0 +1,704 @@ + Sanfte Animationen für das Auf- und Zuklappen der Regeln aktivieren.'; +} +function mrp_enable_drag_drop_render() { + $options = get_option('mrp_settings'); + $enabled = isset($options['enable_drag_drop']) ? $options['enable_drag_drop'] : '1'; + echo ''; +} + +// Render-Funktion für die Checkbox des Willkommens-Tabs +function mrp_show_welcome_tab_render() { + $options = get_option('mrp_settings'); + if ($options === false || !is_array($options)) { + $is_checked = true; + } else { + $is_checked = isset($options['show_welcome_tab']); + } + echo ''; +} + +// Render-Funktion für den Willkommens-Tab +function mrp_welcome_tab_render() { + $options = get_option('mrp_settings'); + $welcome_content = isset($options['welcome_tab_content']) ? $options['welcome_tab_content'] : ''; + + echo '
'; // Abstand zur Checkbox + + $editor_id = 'mrp_welcome_tab_editor'; + $settings = array( + 'textarea_name' => 'mrp_settings[welcome_tab_content]', + 'media_buttons' => true, + 'textarea_rows' => 15, + 'teeny' => true, + ); + wp_editor($welcome_content, $editor_id, $settings); +} + +// NEU: Render-Funktion für die Hintergrundfarbe des Willkommens-Tabs +function mrp_welcome_tab_bg_color_render() { + $options = get_option('mrp_settings'); + $bg_color = isset($options['welcome_tab_bg_color']) ? $options['welcome_tab_bg_color'] : '#f0f0f0'; + echo ""; + echo "

Wählen Sie eine Hintergrundfarbe. Diese wird automatisch mit 50% Transparenz im Frontend angezeigt.

"; +} + +// 4. Render-Funktionen für die Styling-Felder +function mrp_tab_title_font_size_render() { + $options = get_option('mrp_settings'); $font_size = isset($options['tab_title_font_size']) ? $options['tab_title_font_size'] : '15'; + echo " px"; +} +function mrp_tab_title_font_color_render() { + $options = get_option('mrp_settings'); $font_color = isset($options['tab_title_font_color']) ? $options['tab_title_font_color'] : '#2c3e50'; + echo ""; +} +function mrp_rule_title_font_size_render() { + $options = get_option('mrp_settings'); $font_size = isset($options['rule_title_font_size']) ? $options['rule_title_font_size'] : '16'; + echo " px"; +} +function mrp_rule_title_font_color_render() { + $options = get_option('mrp_settings'); $font_color = isset($options['rule_title_font_color']) ? $options['rule_title_font_color'] : '#2c3e50'; + echo ""; +} +function mrp_rule_content_font_size_render() { + $options = get_option('mrp_settings'); $font_size = isset($options['rule_content_font_size']) ? $options['rule_content_font_size'] : '15'; + echo " px"; +} +function mrp_rule_content_font_color_render() { + $options = get_option('mrp_settings'); $font_color = isset($options['rule_content_font_color']) ? $options['rule_content_font_color'] : '#6c757d'; + echo ""; +} + +// NEU: Hilfsfunktion zur Umwandlung von Hex zu RGBA +if (!function_exists('hex_to_rgba')) { + function hex_to_rgba($hex, $alpha) { + $hex = str_replace("#", "", $hex); + if (strlen($hex) == 3) { + $r = hexdec(substr($hex, 0, 1).substr($hex, 0, 1)); + $g = hexdec(substr($hex, 1, 1).substr($hex, 1, 1)); + $b = hexdec(substr($hex, 2, 1).substr($hex, 2, 1)); + } else { + $r = hexdec(substr($hex, 0, 2)); + $g = hexdec(substr($hex, 2, 2)); + $b = hexdec(substr($hex, 4, 2)); + } + return "rgba({$r}, {$g}, {$b}, {$alpha})"; + } +} + +// 5. HTML für die Einstellungsseite +function mrp_options_page_html() { + if (!current_user_can('manage_options')) return; + + // Lade Einstellungen für die Live-Vorschau + $options = get_option('mrp_settings'); + + // Lade jQuery UI Sortable, falls Drag-and-Drop aktiv ist + $enable_drag_drop = isset($options['enable_drag_drop']) ? $options['enable_drag_drop'] : '1'; + if ($enable_drag_drop === '1') { + wp_enqueue_script('jquery-ui-sortable'); + } + + ?> +
+

+ +
+ + + +
+
+
+

+
+ + + +
+
+
+ +
+
+

+
+
+
+
+ + +
+
+ + +
+
+ +
+
+ + +
+
+ + +
+
+ +
+
+ + +
+
+ + +
+
+
+
+
+
+
+ +
+

+
+ +
+
+ +
+

+
+
+
+ + + $tab) : ?> +
+
+

+
+ + +
+
+
+

+

Regeln für diesen Tab

+
+ + $rule) : ?> +
+
+ + + +
+
+

+

+
+
+ + +
+ +
+
+ + +
+

+
+
+
+ +
+

+
+

Hier können Sie Ihre Einstellungen und Regeln exportieren, um sie zu sichern oder auf einer anderen Seite zu importieren.

+

+ +

+

+ + + +

+
+
+ + +
+
+ + + + + + + + + + + Keine Regeln wurden im Backend konfiguriert.

'; + } + + // Frontend-Script und Style registrieren + wp_enqueue_style('mrp-frontend-style', plugin_dir_url(__FILE__) . 'style.css', array(), '8.0'); + wp_enqueue_script('mrp-frontend-script', plugin_dir_url(__FILE__) . 'script.js', array('jquery'), '8.0', true); + + // Daten an das Frontend-Script übergeben + wp_localize_script('mrp-frontend-script', 'mrp_frontend_vars', [ + 'enable_animations' => $enable_animations, + ]); + + // Beginne die Ausgabepufferung + ob_start(); + ?> + +
+
+ Willkommen'; + $is_first_tab = false; + } + + // Benutzerdefinierte Tabs hinzufügen + if (!empty($tabs)) { + foreach ($tabs as $index => $tab) { + $active_class = $is_first_tab ? 'active' : ''; + $nav_buttons_html .= ''; + $is_first_tab = false; + } + } + + // Alle Buttons auf einmal ausgeben + echo $nav_buttons_html; + ?> +
+
+ +
+ $tab): ?> +
+ +
+ +
+
+
+
+ +

Für diesen Tab wurden noch keine Regeln erstellt.

+ +
+ +
+
+