Master Advanced CSS & JavaScript

/* Animation Container */
    .animation-examples {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 1.5rem;
        margin: 2rem 0;
    }
    
    .animation-card {
        position: relative;
        height: 150px;
        background: var(--secondary-color);
        border-radius: var(--border-radius);
        cursor: pointer;
        overflow: hidden;
        transition: var(--transition);
    }
    
    .animation-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    }
    
    .animation-bg {
        position: absolute;
        width: 100%;
        height: 100%;
        background: linear-gradient(45deg, var(--accent-color), var(--highlight-color));
        opacity: 0.1;
    }
    
    .animation-box {
        width: 60px;
        height: 60px;
        margin: 30px auto;
        background: var(--accent-color);
        border-radius: 8px;
    }
    
    .animation-title {
        display: block;
        text-align: center;
        font-weight: bold;
        margin-top: -15px;
        color: var(--text-color);
    }
    
    /* Keyframe Animations */
    @keyframes bounce {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-20px); }
    }
    
    @keyframes rotate {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
    
    @keyframes pulse {
        0%, 100% { transform: scale(1); }
        50% { transform: scale(1.2); }
    }
    
    @keyframes shake {
        0%, 100% { transform: translateX(0); }
        20%, 60% { transform: translateX(-10px); }
        40%, 80% { transform: translateX(10px); }
    }
    
    @keyframes flip {
        0% { transform: perspective(400px) rotateY(0); }
        50% { transform: perspective(400px) rotateY(180deg); }
        100% { transform: perspective(400px) rotateY(360deg); }
    }
    
    @keyframes float {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-10px); }
    }
    
    /* Animation Classes */
    .bounce { animation: bounce 1s infinite ease-in-out; }
    .rotate { animation: rotate 2s infinite linear; }
    .pulse { animation: pulse 1.5s infinite ease-in-out; }
    .shake { animation: shake 0.5s infinite ease-in-out; }
    .flip { animation: flip 2s infinite ease-in-out; }
    .float { animation: float 3s infinite ease-in-out; }
    
    /* Animation Controls */
    .animation-paused .animation-box {
        animation-play-state: paused;
    }

class Carousel {
    constructor(element) {
        this.carousel = element;
        this.inner = this.carousel.querySelector('.carousel-inner');
        this.items = this.carousel.querySelectorAll('.carousel-item');
        this.prevBtn = this.carousel.querySelector('#carouselPrev');
        this.nextBtn = this.carousel.querySelector('#carouselNext');
        this.indicators = this.carousel.querySelectorAll('.carousel-indicator');
        this.currentIndex = 0;
        this.totalItems = this.items.length;
        this.autoSlideInterval = null;
        this.autoSlideDelay = 5000;
        
        this.init();
    }
    
    init() {
        this.prevBtn.addEventListener('click', () => this.prev());
        this.nextBtn.addEventListener('click', () => this.next());
        
        this.indicators.forEach((indicator, index) => {
            indicator.addEventListener('click', () => this.goTo(index));
        });
        
        this.startAutoSlide();
        
        // Pause on hover
        this.carousel.addEventListener('mouseenter', () => this.stopAutoSlide());
        this.carousel.addEventListener('mouseleave', () => this.startAutoSlide());
    }
    
    update() {
        this.inner.style.transform = `translateX(-${this.currentIndex * 100}%)`;
        
        this.indicators.forEach((indicator, index) => {
            indicator.classList.toggle('active', index === this.currentIndex);
        });
    }
    
    prev() {
        this.currentIndex = (this.currentIndex - 1 + this.totalItems) % this.totalItems;
        this.update();
    }
    
    next() {
        this.currentIndex = (this.currentIndex + 1) % this.totalItems;
        this.update();
    }
    
    goTo(index) {
        this.currentIndex = index;
        this.update();
    }
    
    startAutoSlide() {
        this.autoSlideInterval = setInterval(() => this.next(), this.autoSlideDelay);
    }
    
    stopAutoSlide() {
        clearInterval(this.autoSlideInterval);
    }
}

// Initialize carousel
const carousel = new Carousel(document.getElementById('imageCarousel'));

class SearchComponent {
    constructor(inputId, resultsId, data) {
        this.searchInput = document.getElementById(inputId);
        this.searchResults = document.getElementById(resultsId);
        this.data = data;
        
        this.init();
    }
    
    init() {
        this.searchInput.addEventListener('input', () => this.handleInput());
        this.searchInput.addEventListener('focus', () => {
            if (this.searchInput.value.length > 0) {
                this.searchResults.style.display = 'block';
            }
        });
        
        document.addEventListener('click', (e) => {
            if (!this.searchInput.contains(e.target) && !this.searchResults.contains(e.target)) {
                this.searchResults.style.display = 'none';
            }
        });
    }
    
    handleInput() {
        const query = this.searchInput.value.toLowerCase();
        
        if (query.length === 0) {
            this.searchResults.style.display = 'none';
            return;
        }
        
        const results = this.data.filter(item => 
            item.title.toLowerCase().includes(query) || 
            item.description.toLowerCase().includes(query)
        );
        
        this.displayResults(results);
    }
    
    displayResults(results) {
        this.searchResults.innerHTML = '';
        
        if (results.length === 0) {
            const noResults = document.createElement('div');
            noResults.className = 'search-result-item';
            noResults.textContent = 'No results found';
            this.searchResults.appendChild(noResults);
        } else {
            results.forEach(result => {
                const resultItem = document.createElement('div');
                resultItem.className = 'search-result-item';
                
                const title = document.createElement('div');
                title.className = 'search-result-title';
                title.textContent = result.title;
                
                const desc = document.createElement('div');
                desc.className = 'search-result-desc';
                desc.textContent = result.description;
                
                resultItem.appendChild(title);
                resultItem.appendChild(desc);
                resultItem.addEventListener('click', () => {
                    window.location.href = result.link;
                });
                
                this.searchResults.appendChild(resultItem);
            });
        }
        
        this.searchResults.style.display = 'block';
    }
}

// Sample data
const searchData = [
    {
        title: 'Button Styles',
        description: 'Various button designs with hover effects',
        link: '#buttons'
    },
    {
        title: 'Loader Animations',
        description: 'Creative loading indicators',
        link: '#loaders'
    },
    {
        title: 'Form Elements',
        description: 'Interactive form components',
        link: '#forms'
    },
    {
        title: 'CSS Animations',
        description: 'Keyframe animations and transitions',
        link: '#animations'
    }
];

// Initialize search component
const search = new SearchComponent('searchInput', 'searchResults', searchData);

class Modal {
    constructor(modalId) {
        this.modal = document.getElementById(modalId);
        this.openButtons = document.querySelectorAll(`[data-target="${modalId}"]`);
        this.closeButtons = this.modal.querySelectorAll('.modal-close, .btn-cancel');
        
        this.init();
    }
    
    init() {
        // Open modal when clicking open buttons
        this.openButtons.forEach(button => {
            button.addEventListener('click', () => this.open());
        });
        
        // Close modal when clicking close buttons
        this.closeButtons.forEach(button => {
            button.addEventListener('click', () => this.close());
        });
        
        // Close modal when clicking outside content
        this.modal.addEventListener('click', (e) => {
            if (e.target === this.modal) {
                this.close();
            }
        });
        
        // Close modal with Escape key
        document.addEventListener('keydown', (e) => {
            if (e.key === 'Escape' && this.modal.classList.contains('active')) {
                this.close();
            }
        });
    }
    
    open() {
        this.modal.classList.add('active');
        document.body.style.overflow = 'hidden';
    }
    
    close() {
        this.modal.classList.remove('active');
        document.body.style.overflow = '';
    }
    
    setContent(title, content) {
        const titleElement = this.modal.querySelector('.modal-title');
        const contentElement = this.modal.querySelector('.modal-body');
        
        if (titleElement) titleElement.textContent = title;
        if (contentElement) contentElement.innerHTML = content;
    }
}

// Initialize modal
const modal = new Modal('exampleModal');

// Example of opening modal programmatically
document.getElementById('openModalBtn').addEventListener('click', () => {
    modal.open();
});

class Toast {
    constructor(containerId) {
        this.container = document.getElementById(containerId);
    }
    
    show(message, type = 'info', duration = 5000) {
        const toast = document.createElement('div');
        toast.className = `toast toast-${type}`;
        
        const iconClass = {
            success: 'fa-check-circle',
            error: 'fa-exclamation-circle',
            warning: 'fa-exclamation-triangle',
            info: 'fa-info-circle'
        }[type];
        
        toast.innerHTML = `
            

                
            
            

                
${type.charAt(0).toUpperCase() + type.slice(1)}
                
${message}
            
            
                
            
        `;
        
        this.container.appendChild(toast);
        
        // Show toast
        setTimeout(() => {
            toast.classList.add('show');
        }, 10);
        
        // Close button
        toast.querySelector('.toast-close').addEventListener('click', () => {
            this.hideToast(toast);
        });
        
        // Auto hide
        if (duration > 0) {
            setTimeout(() => {
                this.hideToast(toast);
            }, duration);
        }
    }
    
    hideToast(toast) {
        toast.classList.remove('show');
        setTimeout(() => {
            toast.remove();
        }, 300);
    }
}

// Initialize toast
const toast = new Toast('toastContainer');

// Example usage
document.getElementById('showSuccessToast').addEventListener('click', () => {
    toast.show('Operation completed successfully!', 'success');
});

document.getElementById('showErrorToast').addEventListener('click', () => {
    toast.show('An error occurred. Please try again.', 'error');
});

document.getElementById('showWarningToast').addEventListener('click', () => {
    toast.show('Warning: This action cannot be undone.', 'warning');
});

document.getElementById('showInfoToast').addEventListener('click', () => {
    toast.show('New update available. Check it out!', 'info');
});

class Accordion {
    constructor(accordionId) {
        this.accordion = document.getElementById(accordionId) || document.querySelector(accordionId);
        this.items = this.accordion.querySelectorAll('.accordion-item');
        
        this.init();
    }
    
    init() {
        this.items.forEach(item => {
            const header = item.querySelector('.accordion-header');
            header.addEventListener('click', () => this.toggleItem(item));
        });
    }
    
    toggleItem(item) {
        const isActive = item.classList.contains('active');
        
        // Close all items
        this.items.forEach(i => {
            i.classList.remove('active');
        });
        
        // Open clicked item if it was closed
        if (!isActive) {
            item.classList.add('active');
        }
    }
    
    openItem(index) {
        if (index >= 0 && index < this.items.length) {
            this.toggleItem(this.items[index]);
        }
    }
    
    closeItem(index) {
        if (index >= 0 && index < this.items.length) {
            this.items[index].classList.remove('active');
        }
    }
}

// Initialize accordion
const accordion = new Accordion('.accordion');

// Example of opening the first item programmatically
accordion.openItem(0);

class Tabs {
    constructor(tabsId) {
        this.tabs = document.getElementById(tabsId) || document.querySelector(tabsId);
        this.buttons = this.tabs.querySelectorAll('.tab-btn');
        this.contents = this.tabs.querySelectorAll('.tab-content');
        
        this.init();
    }
    
    init() {
        this.buttons.forEach(button => {
            button.addEventListener('click', () => {
                const tabId = button.getAttribute('data-tab');
                this.openTab(tabId);
            });
        });
    }
    
    openTab(tabId) {
        // Hide all tab contents
        this.contents.forEach(content => {
            content.classList.remove('active');
        });
        
        // Deactivate all buttons
        this.buttons.forEach(button => {
            button.classList.remove('active');
        });
        
        // Show the selected tab content
        const tabContent = this.tabs.querySelector(`#${tabId}`);
        if (tabContent) {
            tabContent.classList.add('active');
        }
        
        // Activate the clicked button
        const activeButton = this.tabs.querySelector(`[data-tab="${tabId}"]`);
        if (activeButton) {
            activeButton.classList.add('active');
        }
    }
}

// Initialize tabs
const tabs = new Tabs('.tabs');

// Example of opening a tab programmatically
// tabs.openTab('tab2');

/* Tooltip Styles */
    .tooltip {
        position: relative;
        display: inline-block;
    }
    
    .tooltip-text {
        position: absolute;
        background: var(--dark-color);
        color: var(--light-color);
        padding: 0.5rem 1rem;
        border-radius: var(--border-radius);
        font-size: 0.8rem;
        white-space: nowrap;
        opacity: 0;
        visibility: hidden;
        transition: var(--transition);
        z-index: 1;
        margin-bottom: 0.5rem;
    }
    
    /* Position variations */
    .tooltip-text.tooltip-right {
        top: 50%;
        left: 100%;
        transform: translateY(-50%);
        margin-left: 0.5rem;
        margin-bottom: 0;
    }
    
    .tooltip-text.tooltip-bottom {
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        margin-top: 0.5rem;
        margin-bottom: 0;
    }
    
    .tooltip-text.tooltip-left {
        top: 50%;
        right: 100%;
        transform: translateY(-50%);
        margin-right: 0.5rem;
        margin-bottom: 0;
    }
    
    /* Arrow for tooltips */
    .tooltip-text::after {
        content: '';
        position: absolute;
        border-width: 5px;
        border-style: solid;
    }
    
    /* Top tooltip arrow */
    .tooltip-text:not(.tooltip-right):not(.tooltip-bottom):not(.tooltip-left)::after {
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        border-color: var(--dark-color) transparent transparent transparent;
    }
    
    /* Right tooltip arrow */
    .tooltip-text.tooltip-right::after {
        top: 50%;
        right: 100%;
        transform: translateY(-50%);
        border-color: transparent var(--dark-color) transparent transparent;
    }
    
    /* Bottom tooltip arrow */
    .tooltip-text.tooltip-bottom::after {
        bottom: 100%;
        left: 50%;
        transform: translateX(-50%);
        border-color: transparent transparent var(--dark-color) transparent;
    }
    
    /* Left tooltip arrow */
    .tooltip-text.tooltip-left::after {
        top: 50%;
        left: 100%;
        transform: translateY(-50%);
        border-color: transparent transparent transparent var(--dark-color);
    }
    
    .tooltip:hover .tooltip-text {
        opacity: 1;
        visibility: visible;
    }

/* Progress Bar Styles */
    .progress-container {
        margin: 2rem 0;
    }
    
    .progress-title {
        display: flex;
        justify-content: space-between;
        margin-bottom: 0.5rem;
        font-size: 0.9rem;
    }
    
    .progress-bar {
        height: 10px;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 5px;
        overflow: hidden;
    }
    
    .progress-fill {
        height: 100%;
        background: linear-gradient(90deg, var(--accent-color), var(--highlight-color));
        border-radius: 5px;
        transition: width 0.5s ease;
    }
    
    /* Animated progress bar */
    .progress-animated .progress-fill {
        position: relative;
        overflow: hidden;
    }
    
    .progress-animated .progress-fill::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(
            to right,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.3) 50%,
            rgba(255, 255, 255, 0) 100%
        );
        animation: progressShine 2s infinite;
    }
    
    @keyframes progressShine {
        0% {
            transform: translateX(-100%);
        }
        100% {
            transform: translateX(100%);
        }
    }

/* Grid System */
    .grid-example {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        gap: 1rem;
        margin: 2rem 0;
    }
    
    .grid-item {
        background-color: var(--accent-color);
        color: var(--light-color);
        padding: 1rem;
        text-align: center;
        border-radius: var(--border-radius);
        font-weight: bold;
    }
    
    .grid-item:nth-child(odd) {
        background-color: var(--highlight-color);
    }
    
    /* Responsive Grid Example */
    .responsive-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: 1.5rem;
    }
    
    /* Grid Areas Example */
    .layout-grid {
        display: grid;
        grid-template-areas:
            "header header header"
            "sidebar main main"
            "footer footer footer";
        grid-template-columns: 250px 1fr 1fr;
        grid-template-rows: auto 1fr auto;
        gap: 1rem;
        height: 100vh;
    }
    
    .layout-header {
        grid-area: header;
    }
    
    .layout-sidebar {
        grid-area: sidebar;
    }
    
    .layout-main {
        grid-area: main;
    }
    
    .layout-footer {
        grid-area: footer;
    }

/* Flexbox Examples */
    .flex-example {
        display: flex;
        gap: 1rem;
        margin: 2rem 0;
        padding: 1rem;
        background: var(--glass-effect);
        backdrop-filter: var(--glass-blur);
        border-radius: var(--border-radius);
        border: var(--glass-border);
    }
    
    .flex-item {
        background-color: var(--accent-color);
        color: var(--light-color);
        padding: 1rem;
        text-align: center;
        border-radius: var(--border-radius);
        font-weight: bold;
        flex: 1;
    }
    
    .flex-item:nth-child(odd) {
        background-color: var(--highlight-color);
    }
    
    /* Flexbox Direction Variations */
    .flex-row {
        flex-direction: row;
    }
    
    .flex-row-reverse {
        flex-direction: row-reverse;
    }
    
    .flex-column {
        flex-direction: column;
    }
    
    .flex-column-reverse {
        flex-direction: column-reverse;
    }
    
    /* Flexbox Alignment */
    .flex-center {
        justify-content: center;
        align-items: center;
    }
    
    .flex-start {
        justify-content: flex-start;
    }
    
    .flex-end {
        justify-content: flex-end;
    }
    
    .flex-between {
        justify-content: space-between;
    }
    
    .flex-around {
        justify-content: space-around;
    }
    
    .flex-evenly {
        justify-content: space-evenly;
    }
    
    /* Flexbox Item Alignment */
    .align-start {
        align-items: flex-start;
    }
    
    .align-center {
        align-items: center;
    }
    
    .align-end {
        align-items: flex-end;
    }
    
    .align-stretch {
        align-items: stretch;
    }

/* Pagination Styles */
    .pagination {
        display: flex;
        justify-content: center;
        gap: 0.5rem;
        margin: 2rem 0;
        list-style: none;
        padding: 0;
    }
    
    .page-item {
        display: inline-block;
    }
    
    .page-link {
        display: block;
        padding: 0.5rem 1rem;
        border-radius: var(--border-radius);
        background: rgba(255, 255, 255, 0.1);
        color: var(--text-color);
        transition: var(--transition);
        text-decoration: none;
    }
    
    .page-link:hover {
        background: var(--accent-color);
        color: var(--light-color);
    }
    
    .page-item.active .page-link {
        background: var(--accent-color);
        color: var(--light-color);
        font-weight: bold;
    }
    
    .page-item.disabled .page-link {
        opacity: 0.5;
        pointer-events: none;
        cursor: not-allowed;
    }

/* Dropdown Styles */
    .dropdown {
        position: relative;
        display: inline-block;
    }
    
    .dropdown-toggle {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }
    
    .dropdown-menu {
        position: absolute;
        top: 100%;
        left: 0;
        min-width: 200px;
        background: var(--secondary-color);
        border-radius: var(--border-radius);
        box-shadow: var(--box-shadow);
        padding: 0.5rem 0;
        list-style: none;
        z-index: 100;
        opacity: 0;
        visibility: hidden;
        transform: translateY(10px);
        transition: var(--transition);
    }
    
    .dropdown-menu.show {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
    
    .dropdown-item {
        display: block;
        padding: 0.5rem 1rem;
        color: var(--text-color);
        text-decoration: none;
        transition: var(--transition);
    }
    
    .dropdown-item:hover {
        background: rgba(255, 255, 255, 0.1);
        color: var(--accent-color);
    }
    
    .dropdown-divider {
        height: 1px;
        background: rgba(255, 255, 255, 0.1);
        margin: 0.5rem 0;
        border: none;
    }
    
    /* Hoverable dropdown */
    .dropdown-menu-hoverable {
        pointer-events: none;
    }
    
    .dropdown:hover .dropdown-menu-hoverable {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        pointer-events: auto;
    }

/* Glass Morphism Styles */
    .glass-card {
        background: var(--glass-effect);
        backdrop-filter: var(--glass-blur);
        -webkit-backdrop-filter: var(--glass-blur);
        border: var(--glass-border);
        border-radius: var(--border-radius);
        padding: 2rem;
        max-width: 500px;
        width: 100%;
        box-shadow: var(--box-shadow);
        transition: var(--transition);
    }
    
    .glass-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
    }
    
    .glass-title {
        color: var(--accent-color);
        margin-bottom: 1rem;
    }
    
    .glass-text {
        color: var(--text-color);
        opacity: 0.9;
        margin-bottom: 1.5rem;
    }
    
    /* Glass Navbar Example */
    .glass-navbar {
        background: var(--glass-effect);
        backdrop-filter: var(--glass-blur);
        -webkit-backdrop-filter: var(--glass-blur);
        border-bottom: var(--glass-border);
        padding: 1rem 2rem;
        position: fixed;
        width: 100%;
        top: 0;
        z-index: 1000;
    }
    
    /* Glass Button Example */
    .btn-glass {
        background: var(--glass-effect);
        backdrop-filter: var(--glass-blur);
        -webkit-backdrop-filter: var(--glass-blur);
        border: var(--glass-border);
        color: var(--text-color);
        transition: var(--transition);
    }
    
    .btn-glass:hover {
        background: rgba(255, 255, 255, 0.2);
        transform: translateY(-2px);
    }

/* Clip-path Shapes */
    .clip-shape {
        width: 150px;
        height: 150px;
        background: linear-gradient(45deg, var(--accent-color), var(--highlight-color));
        margin: 1rem;
    }
    
    .clip-circle {
        clip-path: circle(50% at 50% 50%);
    }
    
    .clip-triangle {
        clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    }
    
    .clip-pentagon {
        clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
    }
    
    .clip-star {
        clip-path: polygon(
            50% 0%,
            61% 35%,
            98% 35%,
            68% 57%,
            79% 91%,
            50% 70%,
            21% 91%,
            32% 57%,
            2% 35%,
            39% 35%
        );
    }
    
    /* Clip-path Animation */
    .clip-animate {
        animation: clipPathAnimation 8s infinite alternate;
    }
    
    @keyframes clipPathAnimation {
        0% {
            clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        }
        25% {
            clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 0% 50%);
        }
        50% {
            clip-path: polygon(25% 25%, 75% 25%, 75% 75%, 25% 75%);
        }
        75% {
            clip-path: polygon(0% 50%, 100% 50%, 100% 100%, 0% 100%);
        }
        100% {
            clip-path: polygon(0% 0%, 50% 0%, 50% 100%, 0% 100%);
        }
    }

/* CSS Filter Effects */
    .filter-item {
        position: relative;
        width: 200px;
        height: 200px;
        margin: 1rem;
        overflow: hidden;
        border-radius: var(--border-radius);
    }
    
    .filter-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: var(--transition);
    }
    
    .filter-label {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0, 0, 0, 0.7);
        color: white;
        padding: 0.5rem;
        text-align: center;
    }
    
    /* Filter Effects */
    .filter-blur img {
        filter: blur(2px);
    }
    
    .filter-brightness img {
        filter: brightness(1.5);
    }
    
    .filter-contrast img {
        filter: contrast(1.5);
    }
    
    .filter-grayscale img {
        filter: grayscale(100%);
    }
    
    .filter-hue-rotate img {
        filter: hue-rotate(90deg);
    }
    
    .filter-invert img {
        filter: invert(100%);
    }
    
    .filter-sepia img {
        filter: sepia(100%);
    }
    
    /* Hover Effects */
    .filter-item:hover img {
        transform: scale(1.05);
    }
    
    .filter-item:hover .filter-label {
        background: var(--accent-color);
    }
    
    /* Multiple Filters Example */
    .filter-multiple {
        filter: brightness(1.2) contrast(1.1) saturate(1.5);
    }

/* Blend Mode Examples */
    .blend-container {
        position: relative;
        width: 300px;
        height: 300px;
        margin: 1rem;
        border-radius: var(--border-radius);
        overflow: hidden;
    }
    
    .blend-image {
        width: 100%;
        height: 100%;
        background-size: cover;
        background-position: center;
    }
    
    .blend-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0.7;
    }
    
    .blend-label {
        position: absolute;
        bottom: 1rem;
        left: 1rem;
        color: white;
        font-weight: bold;
        z-index: 1;
    }
    
    /* Blend Mode Variations */
    .blend-multiply .blend-overlay {
        mix-blend-mode: multiply;
    }
    
    .blend-screen .blend-overlay {
        mix-blend-mode: screen;
    }
    
    .blend-overlay .blend-overlay {
        mix-blend-mode: overlay;
    }
    
    .blend-darken .blend-overlay {
        mix-blend-mode: darken;
    }
    
    .blend-lighten .blend-overlay {
        mix-blend-mode: lighten;
    }
    
    .blend-color-dodge .blend-overlay {
        mix-blend-mode: color-dodge;
    }
    
    .blend-color-burn .blend-overlay {
        mix-blend-mode: color-burn;
    }
    
    .blend-hard-light .blend-overlay {
        mix-blend-mode: hard-light;
    }
    
    .blend-soft-light .blend-overlay {
        mix-blend-mode: soft-light;
    }
    
    .blend-difference .blend-overlay {
        mix-blend-mode: difference;
    }
    
    .blend-exclusion .blend-overlay {
        mix-blend-mode: exclusion;
    }
    
    .blend-hue .blend-overlay {
        mix-blend-mode: hue;
    }
    
    .blend-saturation .blend-overlay {
        mix-blend-mode: saturation;
    }
    
    .blend-color .blend-overlay {
        mix-blend-mode: color;
    }
    
    .blend-luminosity .blend-overlay {
        mix-blend-mode: luminosity;
    }

/* 3D Transform Examples */
    .transform-3d {
        width: 300px;
        height: 200px;
        position: relative;
        transform-style: preserve-3d;
        transition: transform 1s;
        transform: perspective(1000px) rotateY(0deg);
    }
    
    .transform-3d:hover {
        transform: perspective(1000px) rotateY(180deg);
    }
    
    .transform-front, .transform-back {
        position: absolute;
        width: 100%;
        height: 100%;
        backface-visibility: hidden;
        border-radius: var(--border-radius);
        padding: 2rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        box-shadow: var(--box-shadow);
    }
    
    .transform-front {
        background: linear-gradient(45deg, var(--accent-color), var(--highlight-color));
        color: white;
    }
    
    .transform-back {
        background: linear-gradient(45deg, var(--highlight-color), var(--warning-color));
        color: white;
        transform: rotateY(180deg);
    }
    
    /* 3D Cube Example */
    .cube-container {
        width: 200px;
        height: 200px;
        position: relative;
        transform-style: preserve-3d;
        animation: rotateCube 10s infinite linear;
    }
    
    .cube-face {
        position: absolute;
        width: 100%;
        height: 100%;
        opacity: 0.8;
        border: 2px solid white;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 2rem;
        font-weight: bold;
        color: white;
    }
    
    .cube-face.front {
        background: rgba(255, 0, 0, 0.7);
        transform: translateZ(100px);
    }
    
    .cube-face.back {
        background: rgba(0, 255, 0, 0.7);
        transform: translateZ(-100px);
    }
    
    .cube-face.right {
        background: rgba(0, 0, 255, 0.7);
        transform: rotateY(90deg) translateZ(100px);
    }
    
    .cube-face.left {
        background: rgba(255, 255, 0, 0.7);
        transform: rotateY(-90deg) translateZ(100px);
    }
    
    .cube-face.top {
        background: rgba(255, 0, 255, 0.7);
        transform: rotateX(90deg) translateZ(100px);
    }
    
    .cube-face.bottom {
        background: rgba(0, 255, 255, 0.7);
        transform: rotateX(-90deg) translateZ(100px);
    }
    
    @keyframes rotateCube {
        from {
            transform: rotateX(0) rotateY(0) rotateZ(0);
        }
        to {
            transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
        }
    }

/* SVG Animation Styles */
    .svg-animation {
        display: block;
        margin: 0 auto;
    }
    
    .svg-circle {
        transition: stroke-dashoffset 1s ease-in-out;
    }
    
    .svg-text {
        font-family: Arial, sans-serif;
        font-weight: bold;
    }
    
    /* SVG Path Animation Example */
    .svg-path {
        stroke-dasharray: 1000;
        stroke-dashoffset: 1000;
        animation: dash 5s linear forwards;
    }
    
    @keyframes dash {
        to {
            stroke-dashoffset: 0;
        }
    }
    
    /* SVG Morph Example */
    .svg-morph {
        transition: d 0.5s ease;
    }
    
    .svg-morph:hover {
        d: path("M10,10 Q50,100 90,10 T170,10");
    }

// Scroll Animation Implementation
    const scrollElements = document.querySelectorAll('.scroll-animation-box');
    
    const elementInView = (el) => {
        const elementTop = el.getBoundingClientRect().top;
        return (
            elementTop <= (window.innerHeight || document.documentElement.clientHeight)
        );
    };
    
    const displayScrollElement = (element) => {
        element.classList.add('animated');
    };
    
    const hideScrollElement = (element) => {
        element.classList.remove('animated');
    };
    
    const handleScrollAnimation = () => {
        scrollElements.forEach((el) => {
            if (elementInView(el)) {
                displayScrollElement(el);
            } else {
                hideScrollElement(el);
            }
        });
    };
    
    // Initialize
    window.addEventListener('scroll', () => {
        handleScrollAnimation();
    });
    
    // Check on load
    handleScrollAnimation();

// Parallax Implementation
    const parallaxContainer = document.querySelector('.parallax-container');
    const parallaxLayers = document.querySelectorAll('.parallax-layer');
    
    const updateParallax = () => {
        const scrollPosition = window.pageYOffset;
        const containerTop = parallaxContainer.offsetTop;
        const containerHeight = parallaxContainer.offsetHeight;
        
        // Only animate when container is in view
        if (scrollPosition > containerTop - window.innerHeight && 
            scrollPosition < containerTop + containerHeight) {
            
            const containerScrollPosition = scrollPosition - containerTop;
            
            parallaxLayers.forEach(layer => {
                const speed = parseFloat(layer.getAttribute('data-speed'));
                const yPos = -(containerScrollPosition * speed);
                layer.style.transform = `translate3d(0, ${yPos}px, 0)`;
            });
        }
    };
    
    // Initialize
    window.addEventListener('scroll', updateParallax);
    window.addEventListener('resize', updateParallax);

// Web Animations API Example
    const waapiBox = document.getElementById('waapiBox');
    let waapiAnimation;
    
    // Create animation
    function createAnimation() {
        waapiAnimation = waapiBox.animate([
            { 
                transform: 'translateX(0) rotate(0deg)',
                backgroundColor: 'var(--accent-color)',
                borderRadius: '0'
            },
            { 
                transform: 'translateX(200px) rotate(180deg)',
                backgroundColor: 'var(--highlight-color)',
                borderRadius: '50%'
            },
            { 
                transform: 'translateX(400px) rotate(360deg)',
                backgroundColor: 'var(--warning-color)',
                borderRadius: '0'
            }
        ], {
            duration: 2000,
            iterations: Infinity,
            direction: 'alternate',
            easing: 'ease-in-out'
        });
    }
    
    // Initialize animation
    createAnimation();
    
    // Control buttons
    document.getElementById('waapiPlay').addEventListener('click', () => {
        waapiAnimation.play();
    });
    
    document.getElementById('waapiPause').addEventListener('click', () => {
        waapiAnimation.pause();
    });
    
    document.getElementById('waapiReverse').addEventListener('click', () => {
        waapiAnimation.reverse();
    });
    
    document.getElementById('waapiCancel').addEventListener('click', () => {
        waapiAnimation.cancel();
        createAnimation();
    });

// WebSocket Implementation
    const wsMessages = document.getElementById('websocketMessages');
    const wsInput = document.getElementById('websocketInput');
    const wsSend = document.getElementById('websocketSend');
    
    // Connect to WebSocket server (replace with your server URL)
    const socket = new WebSocket('wss://echo.websocket.org');
    
    socket.onopen = function(e) {
        addMessage('Connected to WebSocket server', 'system');
    };
    
    socket.onmessage = function(event) {
        addMessage(event.data, 'received');
    };
    
    socket.onclose = function(event) {
        if (event.wasClean) {
            addMessage(`Connection closed cleanly, code=${event.code} reason=${event.reason}`, 'system');
        } else {
            addMessage('Connection died', 'system');
        }
    };
    
    socket.onerror = function(error) {
        addMessage(`Error: ${error.message}`, 'error');
    };
    
    // Send message
    function sendMessage() {
        const message = wsInput.value;
        if (message) {
            socket.send(message);
            addMessage(message, 'sent');
            wsInput.value = '';
        }
    }
    
    // Add message to UI
    function addMessage(message, type) {
        const messageElement = document.createElement('div');
        messageElement.className = `websocket-message websocket-${type}`;
        messageElement.textContent = message;
        wsMessages.appendChild(messageElement);
        wsMessages.scrollTop = wsMessages.scrollHeight;
    }
    
    // Event listeners
    wsSend.addEventListener('click', sendMessage);
    
    wsInput.addEventListener('keypress', function(e) {
        if (e.key === 'Enter') {
            sendMessage();
        }
    });

# Web Accessibility Checklist
    
    ## Perceivable
    - Provide text alternatives for non-text content
    - Provide captions and other alternatives for multimedia
    - Create content that can be presented in different ways
    - Make it easier for users to see and hear content
    
    ## Operable
    - Make all functionality available from a keyboard
    - Give users enough time to read and use content
    - Do not use content that causes seizures
    - Help users navigate and find content
    
    ## Understandable
    - Make text readable and understandable
    - Make content appear and operate in predictable ways
    - Help users avoid and correct mistakes
    
    ## Robust
    - Maximize compatibility with current and future tools

// Geolocation API Example
    document.getElementById('geolocationBtn').addEventListener('click', () => {
        if ('geolocation' in navigator) {
            navigator.geolocation.getCurrentPosition(
                position => {
                    const { latitude, longitude } = position.coords;
                    toast.show(`Location: ${latitude}, ${longitude}`, 'success');
                },
                error => {
                    toast.show(`Error: ${error.message}`, 'error');
                }
            );
        } else {
            toast.show('Geolocation not supported', 'error');
        }
    });
    
    // Notifications API Example
    document.getElementById('notificationBtn').addEventListener('click', () => {
        if ('Notification' in window) {
            Notification.requestPermission().then(permission => {
                if (permission === 'granted') {
                    new Notification('Hello!', {
                        body: 'You have enabled notifications',
                        icon: '/icon.png'
                    });
                }
            });
        }
    });
    
    // Media Devices API Example
    document.getElementById('mediaDevicesBtn').addEventListener('click', () => {
        if ('mediaDevices' in navigator) {
            navigator.mediaDevices.getUserMedia({ video: true, audio: true })
                .then(stream => {
                    toast.show('Media access granted', 'success');
                    // Do something with the stream
                })
                .catch(error => {
                    toast.show(`Error: ${error.message}`, 'error');
                });
        }
    });
    
    // Storage API Example
    document.getElementById('storageBtn').addEventListener('click', () => {
        // LocalStorage
        localStorage.setItem('example', 'LocalStorage data');
        
        // SessionStorage
        sessionStorage.setItem('example', 'SessionStorage data');
        
        // IndexedDB
        const request = indexedDB.open('exampleDB', 1);
        
        request.onupgradeneeded = event => {
            const db = event.target.result;
            db.createObjectStore('data', { keyPath: 'id' });
        };
        
        request.onsuccess = event => {
            const db = event.target.result;
            const transaction = db.transaction('data', 'readwrite');
            const store = transaction.objectStore('data');
            
            store.add({ id: 1, value: 'IndexedDB data' });
        };
        
        toast.show('Data stored in various storage APIs', 'success');
    });

// Example Jest Test
    import { render, screen, fireEvent } from '@testing-library/react';
    import Button from './Button';
    
    describe('Button Component', () => {
        test('renders button with text', () => {
            render(<Button>Click me</Button>);
            const buttonElement = screen.getByText(/click me/i);
            expect(buttonElement).toBeInTheDocument();
        });
        
        test('calls onClick handler when clicked', () => {
            const handleClick = jest.fn();
            render(<Button onClick={handleClick}>Click me</Button>);
            
            fireEvent.click(screen.getByText(/click me/i));
            expect(handleClick).toHaveBeenCalledTimes(1);
        });
        
        test('applies primary style when primary prop is true', () => {
            render(<Button primary>Primary</Button>);
            const buttonElement = screen.getByText(/primary/i);
            
            expect(buttonElement).toHaveClass('button--primary');
        });
    });
    
    // Example Cypress Test
    describe('Login Page', () => {
        it('should login with valid credentials', () => {
            cy.visit('/login');
            cy.get('#email').type('user@example.com');
            cy.get('#password').type('password123');
            cy.get('button[type="submit"]').click();
            cy.url().should('include', '/dashboard');
        });
        
        it('should show error with invalid credentials', () => {
            cy.visit('/login');
            cy.get('#email').type('invalid@example.com');
            cy.get('#password').type('wrongpassword');
            cy.get('button[type="submit"]').click();
            cy.get('.error-message').should('be.visible');
        });
    });

const path = require('path');
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    const MiniCssExtractPlugin = require('mini-css-extract-plugin');
    
    module.exports = {
        entry: './src/index.js',
        output: {
            path: path.resolve(__dirname, 'dist'),
            filename: 'bundle.[contenthash].js',
            clean: true,
        },
        module: {
            rules: [
                {
                    test: /\.js$/,
                    exclude: /node_modules/,
                    use: {
                        loader: 'babel-loader',
                        options: {
                            presets: ['@babel/preset-env']
                        }
                    }
                },
                {
                    test: /\.css$/,
                    use: [
                        MiniCssExtractPlugin.loader,
                        'css-loader',
                        'postcss-loader'
                    ]
                },
                {
                    test: /\.(png|svg|jpg|jpeg|gif)$/i,
                    type: 'asset/resource'
                }
            ]
        },
        plugins: [
            new HtmlWebpackPlugin({
                template: './src/index.html'
            }),
            new MiniCssExtractPlugin({
                filename: 'styles.[contenthash].css'
            })
        ],
        devServer: {
            static: {
                directory: path.join(__dirname, 'dist'),
            },
            compress: true,
            port: 9000,
            hot: true,
        },
        optimization: {
            splitChunks: {
                chunks: 'all',
            },
        },
    };