Rename apoty5.js to app.js

apoty5.js

@@ -1,274 +0,0 @@
-// ==UserScript==
-// @name         Persona 5 Spotify Theme
-// @namespace    http://tampermonkey.net/
-// @version      1.0
-// @description  Transform Spotify web interface with Persona 5 aesthetic styling
-// @author       You
-// @match        https://open.spotify.com/*
-// @grant        GM_addStyle
-// @run-at       document-start
-// ==/UserScript==
-
-(function() {
-    'use strict';
-
-    // Persona 5 color scheme and styling
-    const persona5CSS = `
-        /* Global variables */
-        :root {
-            --persona-red: #D42426;
-            --persona-black: #222222;
-            --persona-white: #F8F6EF;
-            --persona-gold: #E6C555;
-            --persona-light-red: #FF5555;
-        }
-
-        /* Overall page styling */
-        body, html {
-            background-color: var(--persona-black) !important;
-            color: var(--persona-white) !important;
-            font-family: 'Arial', sans-serif !important;
-        }
-
-        /* Header styling */
-        .main-topBar-container,
-        .main-topBar-background,
-        .main-navBar-navBar {
-            background: linear-gradient(135deg, var(--persona-black) 0%, #333333 100%) !important;
-            border-bottom: 2px solid var(--persona-red) !important;
-            box-shadow: 0 4px 15px rgba(212, 36, 38, 0.5) !important;
-        }
-
-        /* Navigation bar styling */
-        .main-navBar-navBarLink {
-            color: var(--persona-white) !important;
-            font-weight: bold !important;
-            text-transform: uppercase !important;
-            letter-spacing: 1px !important;
-            position: relative !important;
-            padding: 8px 16px !important;
-        }
-
-        .main-navBar-navBarLink:hover {
-            color: var(--persona-red) !important;
-        }
-
-        .main-navBar-navBarLink::after {
-            content: '' !important;
-            position: absolute !important;
-            bottom: 0 !important;
-            left: 0 !important;
-            width: 100% !important;
-            height: 2px !important;
-            background: var(--persona-red) !important;
-            transform: scaleX(0) !important;
-            transform-origin: right !important;
-            transition: transform 0.3s ease !important;
-        }
-
-        .main-navBar-navBarLink:hover::after {
-            transform: scaleX(1) !important;
-            transform-origin: left !important;
-        }
-
-        /* Content area styling */
-        .main-view-container__scrollNode,
-        .main-view-container__scrollNodeChild {
-            background: rgba(34, 34, 34, 0.95) !important;
-            backdrop-filter: blur(10px) !important;
-            border: 1px solid var(--persona-red) !important;
-            border-radius: 8px !important;
-            margin: 16px !important;
-        }
-
-        /* Card styling */
-        .main-card-card,
-        .main-card-card:hover {
-            background: linear-gradient(135deg, var(--persona-black) 0%, #444444 100%) !important;
-            border: 2px solid var(--persona-red) !important;
-            border-radius: 12px !important;
-            box-shadow: 0 8px 25px rgba(212, 36, 38, 0.4) !important;
-            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
-        }
-
-        .main-card-card:hover {
-            transform: translateY(-5px) !important;
-            box-shadow: 0 12px 30px rgba(212, 36, 38, 0.6) !important;
-        }
-
-        /* Text and typography */
-        h1, h2, h3, h4, h5, h6, .main-type-heading,
-        .main-type-subheading, .main-type-balladBold {
-            color: var(--persona-white) !important;
-            text-shadow: 2px 2px 4px rgba(212, 36, 38, 0.7) !important;
-            font-weight: bold !important;
-        }
-
-        .main-type-mesto, .main-type-finale {
-            color: var(--persona-gold) !important;
-            font-weight: bold !important;
-        }
-
-        /* Button styling */
-        .main-button-button {
-            background: var(--persona-red) !important;
-            color: var(--persona-white) !important;
-            border: 2px solid var(--persona-white) !important;
-            border-radius: 6px !important;
-            font-weight: bold !important;
-            text-transform: uppercase !important;
-            letter-spacing: 1px !important;
-            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
-        }
-
-        .main-button-button:hover {
-            background: var(--persona-light-red) !important;
-            transform: scale(1.05) !important;
-            box-shadow: 0 0 15px rgba(212, 36, 38, 0.8) !important;
-        }
-
-        /* Player bar styling */
-        .main-nowPlayingBar-container {
-            background: linear-gradient(90deg, var(--persona-black) 0%, #333333 100%) !important;
-            border-top: 3px solid var(--persona-red) !important;
-            box-shadow: 0 -4px 15px rgba(212, 36, 38, 0.5) !important;
-        }
-
-        .main-nowPlayingBar-progressBar {
-            background-color: var(--persona-red) !important;
-        }
-
-        /* Play button styling */
-        .main-playButton-PlayButton {
-            background-color: var(--persona-red) !important;
-            border: 2px solid var(--persona-white) !important;
-        }
-
-        .main-playButton-PlayButton:hover {
-            background-color: var(--persona-light-red) !important;
-            transform: scale(1.1) !important;
-        }
-
-        /* Album art frame */
-        .main-image-image {
-            border: 3px solid var(--persona-red) !important;
-            border-radius: 8px !important;
-            box-shadow: 0 0 15px rgba(212, 36, 38, 0.7) !important;
-        }
-
-        /* Sidebar styling */
-        .main-buddyFeed-container {
-            background: rgba(34, 34, 34, 0.9) !important;
-            border-left: 2px solid var(--persona-red) !important;
-        }
-
-        /* Persona 5 style diagonal elements */
-        .main-topBar-container::before {
-            content: '' !important;
-            position: absolute !important;
-            top: 0 !important;
-            left: 0 !important;
-            width: 100% !important;
-            height: 120px !important;
-            background: linear-gradient(45deg, transparent 50%, rgba(212, 36, 38, 0.2) 50%) !important;
-            z-index: 0 !important;
-        }
-
-        /* Custom scrollbar */
-        ::-webkit-scrollbar {
-            width: 12px !important;
-        }
-
-        ::-webkit-scrollbar-track {
-            background: var(--persona-black) !important;
-            border: 1px solid var(--persona-red) !important;
-        }
-
-        ::-webkit-scrollbar-thumb {
-            background: var(--persona-red) !important;
-            border: 2px solid var(--persona-black) !important;
-            border-radius: 6px !important;
-        }
-
-        /* Persona 5 style notification */
-        .main-notificationNotification {
-            background: linear-gradient(135deg, var(--persona-red) 0%, #FF5555 100%) !important;
-            border: 2px solid var(--persona-white) !important;
-            color: var(--persona-white) !important;
-            box-shadow: 0 0 20px rgba(212, 36, 38, 0.8) !important;
-        }
-
-        /* Search input styling */
-        .main-searchBox-input {
-            background: rgba(51, 51, 51, 0.8) !important;
-            border: 2px solid var(--persona-red) !important;
-            color: var(--persona-white) !important;
-            border-radius: 6px !important;
-        }
-
-        .main-searchBox-input:focus {
-            box-shadow: 0 0 10px var(--persona-red) !important;
-        }
-
-        /* Persona 5 style typography */
-        .main-type-mestoBold, .main-type-ballad {
-            font-family: 'Arial', sans-serif !important;
-            font-weight: bold !important;
-            letter-spacing: 0.5px !important;
-        }
-
-        /* Loading animation */
-        .main-loadingSpinner-loadingSpinner {
-            border-top-color: var(--persona-red) !important;
-            border-left-color: var(--persona-red) !important;
-        }
-
-        /* Context menu styling */
-        .main-contextMenu-menu {
-            background: linear-gradient(135deg, var(--persona-black) 0%, #444444 100%) !important;
-            border: 2px solid var(--persona-red) !important;
-            box-shadow: 0 8px 25px rgba(212, 36, 38, 0.6) !important;
-        }
-
-        .main-contextMenu-menuItemButton {
-            color: var(--persona-white) !important;
-        }
-
-        .main-contextMenu-menuItemButton:hover {
-            background: rgba(212, 36, 38, 0.2) !important;
-        }
-
-        /* Persona 5 style overlay effect */
-        body::after {
-            content: '' !important;
-            position: fixed !important;
-            top: 0 !important;
-            left: 0 !important;
-            width: 100% !important;
-            height: 100% !important;
-            background: radial-gradient(circle at 10% 20%, rgba(212, 36, 38, 0.1) 0%, transparent 20%) !important;
-            pointer-events: none !important;
-            z-index: 9999 !important;
-        }
-    `;
-
-    // Add the CSS to the page
-    GM_addStyle(persona5CSS);
-
-    // Add Persona 5 style font loading
-    const fontLink = document.createElement('link');
-    fontLink.href = 'https://fonts.googleapis.com/css2?family=Orbitron:wght@700&display=swap';
-    fontLink.rel = 'stylesheet';
-    document.head.appendChild(fontLink);
-
-    // Add custom font to key elements
-    setTimeout(() => {
-        const style = document.createElement('style');
-        style.textContent = `
-            .main-type-heading, .main-type-subheading, .main-navBar-navBarLink {
-                font-family: 'Orbitron', sans-serif !important;
-            }
-        `;
-        document.head.appendChild(style);
-    }, 1000);
-})();

app.js

@@ -0,0 +1,540 @@
+// ==UserScript==
+// @name         Dynamic UI/UX Enhancement Suite
+// @namespace    http://tampermonkey.net/
+// @version      1.2.5
+// @description  Transforms website UI/UX with stylish animations, modern styling, and dynamic interactions
+// @author       UXMaster
+// @match        *://*/*
+// @exclude      *://*.google.com/*
+// @exclude      *://*.facebook.com/*
+// @exclude      *://*.youtube.com/*
+// @grant        GM_addStyle
+// @grant        GM_getValue
+// @grant        GM_setValue
+// @grant        GM_registerMenuCommand
+// @run-at       document-start
+// @icon         https://www.example.com/icon.png
+// ==/UserScript==
+
+(function() {
+    'use strict';
+
+    // Configuration - customizable via ViolentMonkey UI
+    const config = {
+        animations: {
+            enabled: true,
+            duration: 0.3,
+            easing: 'cubic-bezier(0.16, 1, 0.3, 1)',
+            scrollSmooth: true,
+            hoverEffects: true,
+            fadeIns: true
+        },
+        styling: {
+            enabled: true,
+            modernShadows: true,
+            roundedCorners: true,
+            vibrantHoverStates: true,
+            readableText: true,
+            accentColor: '#6c63ff',
+            darkMode: false
+        },
+        performance: {
+            lazyLoadImages: true,
+            intersectionObserverThreshold: 0.1
+        }
+    };
+
+    // Initialize the enhancement suite
+    class DynamicUIEnhancer {
+        constructor() {
+            this.elements = new WeakMap();
+            this.animationFrame = null;
+            this.observer = null;
+            this.init();
+        }
+
+        init() {
+            // Wait for DOM to be interactive
+            if (document.readyState === 'loading') {
+                document.addEventListener('DOMContentLoaded', () => this.startEnhancement());
+            } else {
+                this.startEnhancement();
+            }
+
+            // Setup configuration menu in ViolentMonkey UI
+            this.setupConfigMenu();
+        }
+
+        setupConfigMenu() {
+            try {
+                GM_registerMenuCommand('Configure UI Enhancer', () => {
+                    this.showConfigDialog();
+                });
+            } catch (e) {
+                console.warn('GM_registerMenuCommand not available, using console config');
+            }
+        }
+
+        startEnhancement() {
+            if (config.styling.enabled) this.applyModernStyling();
+            if (config.animations.enabled) this.setupAnimations();
+            this.setupPerformanceOptimizations();
+            this.setupDynamicInteractions();
+
+            // Handle dynamic content loading
+            this.setupMutationObserver();
+        }
+
+        applyModernStyling() {
+            const css = `
+                :root {
+                    --accent-color: ${config.styling.accentColor};
+                    --shadow-sm: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.05);
+                    --shadow-md: 0 4px 6px rgba(0,0,0,0.1), 0 1px 3px rgba(0,0,0,0.08);
+                    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
+                    --transition: all ${config.animations.duration}s ${config.animations.easing};
+                    --radius-sm: 4px;
+                    --radius-md: 8px;
+                    --radius-lg: 12px;
+                    --radius-full: 9999px;
+                }
+
+                * {
+                    transition: background-color 0.2s ease, color 0.2s ease !important;
+                }
+
+                body {
+                    ${config.styling.readableText ? `
+                        line-height: 1.6;
+                        color: ${config.styling.darkMode ? '#e0e0e0' : '#333'};
+                        background: ${config.styling.darkMode ? '#1a1a1a' : '#fafafa'};
+                    ` : ''}
+                }
+
+                button, .button, input[type="submit"], input[type="button"], 
+                a.button, a.btn, .btn, .button-like {
+                    ${config.styling.modernShadows ? 'box-shadow: var(--shadow-sm);' : ''}
+                    ${config.styling.roundedCorners ? 'border-radius: var(--radius-md);' : ''}
+                    background: var(--accent-color);
+                    color: white;
+                    border: none;
+                    padding: 8px 16px;
+                    cursor: pointer;
+                    font-weight: 500;
+                    transition: var(--transition) !important;
+                    position: relative;
+                    overflow: hidden;
+                }
+
+                button:hover, .button:hover, input[type="submit"]:hover, 
+                input[type="button"]:hover, a.button:hover, a.btn:hover, 
+                .btn:hover, .button-like:hover {
+                    transform: translateY(-2px);
+                    ${config.styling.modernShadows ? 'box-shadow: var(--shadow-md);' : ''}
+                    ${config.styling.vibrantHoverStates ? `
+                        background: linear-gradient(135deg, var(--accent-color), #4a44ff);
+                    ` : ''}
+                }
+
+                button:active, .button:active {
+                    transform: translateY(0);
+                }
+
+                button::after {
+                    content: '';
+                    position: absolute;
+                    top: 0;
+                    left: -100%;
+                    width: 100%;
+                    height: 100%;
+                    background: rgba(255,255,255,0.2);
+                    transition: left ${config.animations.duration}s ease;
+                }
+
+                button:hover::after {
+                    left: 100%;
+                }
+
+                input[type="text"], input[type="email"], input[type="password"], 
+                textarea, select {
+                    ${config.styling.modernShadows ? 'box-shadow: var(--shadow-sm);' : ''}
+                    ${config.styling.roundedCorners ? 'border-radius: var(--radius-sm);' : ''}
+                    border: 1px solid #ddd;
+                    padding: 8px 12px;
+                    transition: var(--transition) !important;
+                }
+
+                input[type="text"]:focus, input[type="email"]:focus, 
+                input[type="password"]:focus, textarea:focus, select:focus {
+                    outline: none;
+                    border-color: var(--accent-color);
+                    ${config.styling.modernShadows ? 'box-shadow: 0 0 0 3px rgba(108, 99, 255, 0.2);' : ''}
+                }
+
+                .card, .panel, .box, .container {
+                    ${config.styling.modernShadows ? 'box-shadow: var(--shadow-sm);' : ''}
+                    ${config.styling.roundedCorners ? 'border-radius: var(--radius-md);' : ''}
+                    background: ${config.styling.darkMode ? '#2d2d2d' : 'white'};
+                    transition: var(--transition) !important;
+                }
+
+                .card:hover, .panel:hover {
+                    ${config.styling.modernShadows ? 'box-shadow: var(--shadow-md);' : ''}
+                }
+
+                a {
+                    color: var(--accent-color);
+                    text-decoration: none;
+                    transition: var(--transition) !important;
+                }
+
+                a:hover {
+                    text-decoration: underline;
+                    color: #4a44ff;
+                }
+
+                .fade-in {
+                    opacity: 0;
+                    transform: translateY(20px);
+                    animation: fadeInUp ${config.animations.duration * 1.5}s ${config.animations.easing} forwards;
+                }
+
+                @keyframes fadeInUp {
+                    to {
+                        opacity: 1;
+                        transform: translateY(0);
+                    }
+                }
+            `;
+
+            GM_addStyle(css);
+        }
+
+        setupAnimations() {
+            if (config.animations.scrollSmooth) {
+                document.documentElement.style.scrollBehavior = 'smooth';
+            }
+
+            if (config.animations.fadeIns) {
+                this.setupFadeInAnimations();
+            }
+
+            if (config.animations.hoverEffects) {
+                this.setupHoverEffects();
+            }
+        }
+
+        setupFadeInAnimations() {
+            const animateElements = () => {
+                const elements = document.querySelectorAll(`
+                    .card, .panel, .box, article, section, header, footer,
+                    nav, .menu, .list-item, .grid-item, .product, .post,
+                    .comment, .card-container, .widget, .feature, .testimonial
+                `);
+
+                elements.forEach(element => {
+                    if (!this.elements.has(element)) {
+                        this.elements.set(element, {
+                            animated: false,
+                            observer: null
+                        });
+                    }
+
+                    const elementData = this.elements.get(element);
+                    if (!elementData.animated) {
+                        const rect = element.getBoundingClientRect();
+                        if (rect.top < window.innerHeight * 1.2 && rect.bottom > -rect.height * 0.2) {
+                            element.classList.add('fade-in');
+                            elementData.animated = true;
+                        }
+                    }
+                });
+            };
+
+            // Initial animation
+            animateElements();
+
+            // Animation on scroll
+            window.addEventListener('scroll', () => {
+                if (this.animationFrame) return;
+                this.animationFrame = requestAnimationFrame(() => {
+                    animateElements();
+                    this.animationFrame = null;
+                });
+            });
+
+            // Recheck on window resize
+            window.addEventListener('resize', animateElements);
+        }
+
+        setupHoverEffects() {
+            document.addEventListener('mouseover', (e) => {
+                const target = e.target;
+                if (target.matches('button, .button, a.button, .btn, .card, .panel, .box, .menu-item, .nav-link')) {
+                    target.style.transform = 'translateY(-2px)';
+                }
+            }, true);
+
+            document.addEventListener('mouseout', (e) => {
+                const target = e.target;
+                if (target.matches('button, .button, a.button, .btn, .card, .panel, .box, .menu-item, .nav-link')) {
+                    target.style.transform = 'translateY(0)';
+                }
+            }, true);
+        }
+
+        setupPerformanceOptimizations() {
+            if (config.performance.lazyLoadImages) {
+                this.setupLazyLoading();
+            }
+        }
+
+        setupLazyLoading() {
+            const lazyImages = document.querySelectorAll('img[data-src], img.lazy');
+            if (lazyImages.length === 0) return;
+
+            const lazyLoad = (entries, observer) => {
+                entries.forEach(entry => {
+                    if (entry.isIntersecting) {
+                        const img = entry.target;
+                        const src = img.dataset.src || img.src;
+                        img.src = src;
+                        img.classList.remove('lazy');
+                        img.removeAttribute('data-src');
+                        observer.unobserve(img);
+                    }
+                });
+            };
+
+            this.observer = new IntersectionObserver(lazyLoad, {
+                rootMargin: '50px 0px',
+                threshold: config.performance.intersectionObserverThreshold
+            });
+
+            lazyImages.forEach(img => {
+                this.observer.observe(img);
+            });
+        }
+
+        setupDynamicInteractions() {
+            // Micro-interactions for buttons and inputs
+            document.addEventListener('click', (e) => {
+                const target = e.target;
+                if (target.matches('button, .button, a.button, .btn')) {
+                    this.createRippleEffect(target, e);
+                }
+            }, true);
+
+            // Form interactions
+            document.addEventListener('focusin', (e) => {
+                const target = e.target;
+                if (target.matches('input, textarea, select')) {
+                    target.parentElement?.classList?.add('focused');
+                }
+            });
+
+            document.addEventListener('focusout', (e) => {
+                const target = e.target;
+                if (target.matches('input, textarea, select')) {
+                    target.parentElement?.classList?.remove('focused');
+                }
+            });
+        }
+
+        createRippleEffect(element, event) {
+            const rect = element.getBoundingClientRect();
+            const size = Math.max(rect.width, rect.height);
+            const x = event.clientX - rect.left - size / 2;
+            const y = event.clientY - rect.top - size / 2;
+
+            const ripple = document.createElement('span');
+            ripple.style.cssText = `
+                position: absolute;
+                width: ${size}px;
+                height: ${size}px;
+                left: ${x}px;
+                top: ${y}px;
+                border-radius: 50%;
+                background: rgba(255,255,255,0.3);
+                transform: scale(0);
+                animation: ripple ${config.animations.duration}s ease-out forwards;
+                pointer-events: none;
+                z-index: 1;
+            `;
+
+            element.style.overflow = 'hidden';
+            element.style.position = 'relative';
+            element.appendChild(ripple);
+
+            setTimeout(() => {
+                ripple.remove();
+            }, config.animations.duration * 1000 + 100);
+        }
+
+        setupMutationObserver() {
+            const observer = new MutationObserver((mutations) => {
+                mutations.forEach(mutation => {
+                    if (mutation.type === 'childList') {
+                        mutation.addedNodes.forEach(node => {
+                            if (node.nodeType === 1) { // Element node
+                                this.enhanceNewElements(node);
+                            }
+                        });
+                    }
+                });
+            });
+
+            observer.observe(document.body, {
+                childList: true,
+                subtree: true
+            });
+        }
+
+        enhanceNewElements(element) {
+            // Apply styling to new elements
+            if (element.querySelectorAll) {
+                const buttons = element.querySelectorAll('button, .button, .btn');
+                buttons.forEach(btn => {
+                    if (!btn.dataset.enhanced) {
+                        btn.dataset.enhanced = 'true';
+                        // Add hover effects
+                        btn.addEventListener('mouseenter', () => {
+                            btn.style.transform = 'translateY(-2px)';
+                        });
+                        btn.addEventListener('mouseleave', () => {
+                            btn.style.transform = 'translateY(0)';
+                        });
+                    }
+                });
+
+                // Apply fade-in to new cards/containers
+                const containers = element.querySelectorAll('.card, .panel, .box');
+                containers.forEach(container => {
+                    if (!container.dataset.enhanced) {
+                        container.dataset.enhanced = 'true';
+                        container.classList.add('fade-in');
+                    }
+                });
+            }
+        }
+
+        showConfigDialog() {
+            const dialog = document.createElement('div');
+            dialog.style.cssText = `
+                position: fixed;
+                top: 50%;
+                left: 50%;
+                transform: translate(-50%, -50%);
+                background: white;
+                border-radius: 12px;
+                box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
+                z-index: 99999;
+                padding: 24px;
+                max-width: 500px;
+                width: 90%;
+                max-height: 80vh;
+                overflow-y: auto;
+            `;
+
+            dialog.innerHTML = `
+                <h2 style="margin-top: 0; color: #333;">UI/UX Enhancement Settings</h2>
+                <div style="margin-bottom: 20px;">
+                    <label style="display: block; margin-bottom: 8px;">
+                        <input type="checkbox" id="animations-enabled" ${config.animations.enabled ? 'checked' : ''}>
+                        Enable Animations
+                    </label>
+                    <label style="display: block; margin-bottom: 8px;">
+                        <input type="checkbox" id="styling-enabled" ${config.styling.enabled ? 'checked' : ''}>
+                        Enable Modern Styling
+                    </label>
+                    <label style="display: block; margin-bottom: 8px;">
+                        <input type="color" id="accent-color" value="${config.styling.accentColor}" style="width: 50px; vertical-align: middle;">
+                        Accent Color
+                    </label>
+                </div>
+                <button id="save-config" style="background: #6c63ff; color: white; border: none; padding: 8px 16px; border-radius: 6px; cursor: pointer;">
+                    Save & Apply
+                </button>
+                <button id="reset-config" style="background: #e5e7eb; color: #333; border: none; padding: 8px 16px; border-radius: 6px; margin-left: 8px; cursor: pointer;">
+                    Reset to Defaults
+                </button>
+            `;
+
+            document.body.appendChild(dialog);
+
+            document.getElementById('save-config').addEventListener('click', () => {
+                config.animations.enabled = document.getElementById('animations-enabled').checked;
+                config.styling.enabled = document.getElementById('styling-enabled').checked;
+                config.styling.accentColor = document.getElementById('accent-color').value;
+                
+                // Reinitialize with new config
+                this.reinitialize();
+                dialog.remove();
+            });
+
+            document.getElementById('reset-config').addEventListener('click', () => {
+                // Reset to defaults
+                Object.assign(config, {
+                    animations: { enabled: true, duration: 0.3, easing: 'cubic-bezier(0.16, 1, 0.3, 1)', scrollSmooth: true, hoverEffects: true, fadeIns: true },
+                    styling: { enabled: true, modernShadows: true, roundedCorners: true, vibrantHoverStates: true, readableText: true, accentColor: '#6c63ff', darkMode: false }
+                });
+                this.reinitialize();
+                dialog.remove();
+            });
+
+            // Close dialog on outside click
+            dialog.addEventListener('click', (e) => {
+                if (e.target === dialog) {
+                    dialog.remove();
+                }
+            });
+        }
+
+        reinitialize() {
+            // Clear existing styles and reapply
+            const existingStyles = document.querySelectorAll('style[data-enhancer]');
+            existingStyles.forEach(style => style.remove());
+
+            // Reapply styling
+            this.applyModernStyling();
+
+            // Reapply animations to visible elements
+            if (config.animations.enabled) {
+                this.setupAnimations();
+            }
+
+            // Show notification
+            this.showNotification('Settings applied successfully!');
+        }
+
+        showNotification(message) {
+            const notification = document.createElement('div');
+            notification.style.cssText = `
+                position: fixed;
+                bottom: 20px;
+                right: 20px;
+                background: #4CAF50;
+                color: white;
+                padding: 12px 24px;
+                border-radius: 8px;
+                box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+                z-index: 99999;
+                animation: slideIn 0.3s ease, fadeOut 0.5s ease 2.5s forwards;
+            `;
+            notification.innerHTML = `<strong>✓</strong> ${message}`;
+            document.body.appendChild(notification);
+
+            setTimeout(() => {
+                notification.remove();
+            }, 3000);
+        }
+    }
+
+    // Initialize the enhancer
+    const uiEnhancer = new DynamicUIEnhancer();
+
+    // Expose for debugging and external access
+    window.UIEnhancer = uiEnhancer;
+    console.log('Dynamic UI/UX Enhancement Suite loaded successfully!');
+
+})();