So I had given a ai a task to improve my code and which he did but there many issues with the improved code ai had which was not present in the code I have given to ai so I want you to fix this 'improved' code, I have also given the code before the improvement: [
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Top Light Novels - Enhanced Edition</title>
    <meta name="description" content="Discover and explore the top light novels with advanced features and smooth performance">
    <meta name="keywords" content="light novels, top novels, reading, books, literature, recommendations">
    <meta name="theme-color" content="#333333">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <style>
        /* CSS Variables */
        :root {
            --color-primary: #333;
            --color-secondary: #f5f5f5;
            --color-accent: #4a90e2;
            --color-text: #333;
            --color-background: #f5f5f5;
            --color-shadow: rgba(0, 0, 0, 0.1);
            --color-hover: #666;
            --font-primary: 'Inter', system-ui, -apple-system, sans-serif;
            --spacing-unit: 8px;
            --transition-speed: 0.3s;
            --border-radius: 12px;
            --max-width: 1400px;
        }

        .dark-theme {
            --color-primary: #f5f5f5;
            --color-secondary: #333;
            --color-text: #f5f5f5;
            --color-background: #1a1a1a;
            --color-shadow: rgba(255, 255, 255, 0.1);
            --color-hover: #ddd;
        }

        /* Base Styles */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: var(--font-primary);
            background-color: var(--color-background);
            color: var(--color-text);
            line-height: 1.6;
            transition: background-color var(--transition-speed),
                        color var(--transition-speed);
        }

        /* Layout Components */
        .header {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: 60px;
            background-color: var(--color-primary);
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 var(--spacing-unit);
            z-index: 100;
            box-shadow: 0 2px 10px var(--color-shadow);
        }

        .search-container {
            flex: 1;
            max-width: 500px;
            margin: 0 var(--spacing-unit);
        }

        .search-input {
            width: 100%;
            padding: calc(var(--spacing-unit) * 1.5);
            border: none;
            border-radius: var(--border-radius);
            background-color: var(--color-secondary);
            color: var(--color-text);
            font-size: 1rem;
            transition: box-shadow var(--transition-speed);
        }

        .search-input:focus {
            outline: none;
            box-shadow: 0 0 0 2px var(--color-accent);
        }

        .grid-container {
            margin-top: 80px;
            padding: var(--spacing-unit);
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: calc(var(--spacing-unit) * 2);
            max-width: var(--max-width);
            margin-left: auto;
            margin-right: auto;
        }

        .novel-card {
            position: relative;
            background-color: var(--color-secondary);
            border-radius: var(--border-radius);
            overflow: hidden;
            transition: transform var(--transition-speed),
                        box-shadow var(--transition-speed);
            cursor: pointer;
        }

        .novel-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 4px 20px var(--color-shadow);
        }

        .novel-image {
            width: 100%;
            aspect-ratio: 2/3;
            object-fit: cover;
            background-color: var(--color-secondary);
        }

        .novel-info {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            padding: var(--spacing-unit);
            background: linear-gradient(transparent, rgba(0,0,0,0.8));
            color: white;
        }

        .novel-title {
            font-size: 1rem;
            font-weight: 600;
            margin-bottom: calc(var(--spacing-unit) / 2);
        }

        /* Utility Classes */
        .visually-hidden {
            position: absolute;
            width: 1px;
            height: 1px;
            padding: 0;
            margin: -1px;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            border: 0;
        }

        /* Loading States */
        .loading-spinner {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 40px;
            height: 40px;
            border: 3px solid var(--color-secondary);
            border-top-color: var(--color-accent);
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            to { transform: translate(-50%, -50%) rotate(360deg); }
        }

        /* Responsive Design */
        @media (max-width: 768px) {
            .grid-container {
                grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
            }
        }

        @media (max-width: 480px) {
            .search-container {
                max-width: 200px;
            }
        }

        /* Reduced Motion */
        @media (prefers-reduced-motion: reduce) {
            * {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
                scroll-behavior: auto !important;
            }
        }
    </style>
</head>
<body>
    <header class="header">
        <button class="menu-button" aria-label="Toggle menu">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <line x1="3" y1="12" x2="21" y2="12"></line>
                <line x1="3" y1="6" x2="21" y2="6"></line>
                <line x1="3" y1="18" x2="21" y2="18"></line>
            </svg>
        </button>
        <div class="search-container">
            <input type="search" class="search-input" placeholder="Search novels..." aria-label="Search novels">
        </div>
        <button class="theme-button" aria-label="Toggle theme">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <circle cx="12" cy="12" r="5"></circle>
                <line x1="12" y1="1" x2="12" y2="3"></line>
                <line x1="12" y1="21" x2="12" y2="23"></line>
                <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
                <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
                <line x1="1" y1="12" x2="3" y2="12"></line>
                <line x1="21" y1="12" x2="23" y2="12"></line>
                <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
                <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
            </svg>
        </button>
    </header>

    <main class="grid-container" id="novelGrid"></main>

    <div id="loadingSpinner" class="loading-spinner" role="status" aria-hidden="true"></div>

    <script>
        // Enhanced Configuration
        const CONFIG = {
            API_ENDPOINT: 'https://sh.dafeyan784.workers.dev/?target=https://jnovels.com/top-light-novels-to-read/',
            BATCH_SIZE: 20,
            CACHE_DURATION: 24 * 60 * 60 * 1000, // 24 hours
            RETRY_ATTEMPTS: 3,
            RETRY_DELAY: 1000,
            IMAGE_TIMEOUT: 10000,
        };

        // State Management
        const state = {
            novels: [],
            loading: false,
            error: null,
            currentPage: 1,
            darkMode: false,
        };

        // Utility Functions
        const debounce = (fn, delay) => {
            let timeoutId;
            return (...args) => {
                clearTimeout(timeoutId);
                timeoutId = setTimeout(() => fn(...args), delay);
            };
        };

        const setLoading = (isLoading) => {
            state.loading = isLoading;
            document.getElementById('loadingSpinner').setAttribute('aria-hidden', !isLoading);
        };

        // DOM Manipulation
        const createNovelCard = (novel) => {
            const card = document.createElement('article');
            card.className = 'novel-card';
            
            const img = new Image();
            img.className = 'novel-image';
            img.src = novel.imageUrl;
            img.alt = novel.title;
            img.loading = 'lazy';
            
            const info = document.createElement('div');
            info.className = 'novel-info';
            
            const title = document.createElement('h2');
            title.className = 'novel-title';
            title.textContent = novel.title;
            
            info.appendChild(title);
            card.appendChild(img);
            card.appendChild(info);
            
            card.addEventListener('click', () => {
                window.open(novel.url, '_blank', 'noopener,noreferrer');
            });
            
            return card;
        };

        // Data Fetching
        const fetchNovels = async () => {
            try {
                setLoading(true);
                
                // Check cache first
                const cached = localStorage.getItem('novelsCache');
                if (cached) {
                    const { data, timestamp } = JSON.parse(cached);
                    if (Date.now() - timestamp < CONFIG.CACHE_DURATION) {
                        return data;
                    }
                }
                
                const response = await fetch(CONFIG.API_ENDPOINT);
                if (!response.ok) throw new Error('Failed to fetch novels');
                
                const html = await response.text();
                const parser = new DOMParser();
                const doc = parser.parseFromString(html, 'text/html');
                
                const novels = Array.from(doc.querySelectorAll('img[loading="lazy"][decoding="async"].alignnone'))
                    .map(img => ({
                        imageUrl: img.src,
                        title: img.alt || 'Unknown Title',
                        url: img.closest('a')?.href || '#'
                    }));
                
                // Cache the results
                localStorage.setItem('novelsCache', JSON.stringify({
                    data: novels,
                    timestamp: Date.now()
                }));
                
                return novels;
                
            } catch (error) {
                console.error('Error fetching novels:', error);
                throw error;
            } finally {
                setLoading(false);
            }
        };

        // Event Handlers
        const handleSearch = debounce((event) => {
            const query = event.target.value.toLowerCase();
            const filteredNovels = state.novels.filter(novel => 
                novel.title.toLowerCase().includes(query)
            );
            renderNovels(filteredNovels);
        }, 300);

        const toggleTheme = () => {
            state.darkMode = !state.darkMode;
            document.body.classList.toggle('dark-theme', state.darkMode);
            localStorage.setItem('darkMode', state.darkMode);
        };

        // Rendering
        const renderNovels = (novels) => {
            const grid = document.getElementById('novelGrid');
            grid.innerHTML = '';
            
            const fragment = document.createDocumentFragment();
            novels.forEach(novel => {
                fragment.appendChild(createNovelCard(novel));
            });
            
            grid.appendChild(fragment);
        };

        // Initialization
        const init = async () => {
            try {
                // Load theme preference
                state.darkMode = localStorage.getItem('darkMode') === 'true';
                document.body.classList.toggle('dark-theme', state.darkMode);
                
                // Set up event listeners
                document.querySelector('.search-input').addEventListener('input', handleSearch);
                document.querySelector('.theme-button').addEventListener('click', toggleTheme);
                
                // Load initial data
                state.novels = await fetchNovels();
                renderNovels(state.novels);
                
                // Set up infinite scroll
                const observer = new IntersectionObserver((entries) => {
                    const lastEntry = entries[entries.length - 1];
                    if (lastEntry.isIntersecting && !state.loading) {
                        // Load more novels
                        state.currentPage++;
                        // Implement pagination logic here if needed
                    }
                });
                
                const lastCard = document.querySelector('.novel-card:last-child');
                if (lastCard) observer.observe(lastCard);
                
            } catch (error) {
                console.error('Initialization error:', error);
                // Implement error handling UI
            }
        };

        // Start the application
        document.addEventListener('DOMContentLoaded', init);
    </script>
</body>
</html>
]. Previous version of code before the improvement: [  <!doctypehtml><html lang=en><meta charset=UTF-8><meta content="width=device-width,initial-scale=1"name=viewport><title>Top Light Novels</title><meta content="Discover and explore the top light novels to read."name=description><meta content="light novels, top novels, reading, books, literature"name=keywords><link href=styles.css rel=stylesheet><link href=https://fonts.googleapis.com rel=preconnect><link href=https://fonts.gstatic.com rel=preconnect crossorigin><link href=https://www.cloudflare.com rel=preconnect><link href=https://cdn.jsdelivr.net rel=preconnect><link href=https://unpkg.com rel=preconnect><link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Playfair+Display:wght@400;700&display=swap"rel=stylesheet><script src=https://cdn.jsdelivr.net/npm/dexie@latest/dist/dexie.min.js defer></script><script src=script.js defer type=module></script><script src=https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js type=module></script><script src=https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js nomodule></script><header><button aria-label="Open Menu"class=menu-btn aria-controls=menu-panel aria-expanded=false><ion-icon name=menu-outline class=menu-icon></ion-icon></button><div class=search-bar role=search><input aria-label="Search Novels"id=search-input autocomplete=off class=search-input placeholder=Search...> <button aria-label="Search Novels"class=search-btn id=search-button><ion-icon name=search-outline></ion-icon></button></div></header><main><section aria-label="Top Light Novels Grid"class=book-grid id=book-grid role=grid></section></main><aside aria-hidden=true aria-labelledby=menu-heading class=panel id=menu-panel><h3 id=menu-heading>Menu</h3><nav><ul><li><a href=# id=library-link>Library</a><li><a href=# id=settings-link>Settings</a></ul></nav></aside><aside aria-hidden=true aria-labelledby=library-heading class=panel id=library-panel><h3 id=library-heading>Library</h3><div id=library-content></div></aside><aside aria-hidden=true aria-labelledby=settings-heading class=panel id=settings-panel><h3 id=settings-heading>Settings</h3><div class=settings-option><label for=theme-toggle>Dark Theme</label><div class=toggle-switch><input aria-label="Toggle Dark Theme"id=theme-toggle type=checkbox> <span class=slider></span></div></div></aside><div class=loading-spinner role=status id=loading-spinner aria-hidden=true aria-label=Loading></div><div class=error-message role=alert id=error-message aria-live=assertive></div> -- "use strict";const config={proxyUrl:"https://sh.dafeyan784.workers.dev/?target=",targetUrl:"https://jnovels.com/top-light-novels-to-read/",batchSize:40,maxRetries:3,retryDelay:1e3,searchDebounceTime:300,intersectionObserverThreshold:.2,intersectionObserverRootMargin:"250px",errorMessageDisplayTime:5e3,fetchTimeout:1e4,fallbackImage:'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="200" height="300" viewBox="0 0 200 300"%3E%3Crect width="100%" height="100%" fill="%23f0f0f0"/%3E%3Ctext x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" fill="%23999"%3EImage not available%3C/text%3E%3C/svg%3E'};class NovelWebsite{constructor(){this.db=new Database,this.elements=this.getElements(),this.state={currentBatch:0,images:[],loadedImages:new Set,isLoading:!1,isPanelOpen:!1,pdfUrlToTextMap:new Map},this.setupEventListeners()}getElements(){return{bookGrid:document.querySelector("#book-grid"),searchInput:document.querySelector("#search-input"),searchButton:document.querySelector("#search-button"),loadingSpinner:document.querySelector(".loading-spinner"),menuBtn:document.querySelector(".menu-btn"),menuPanel:document.querySelector("#menu-panel"),libraryPanel:document.querySelector("#library-panel"),settingsPanel:document.querySelector("#settings-panel"),themeToggle:document.querySelector("#theme-toggle"),errorMessage:document.querySelector("#error-message"),libraryLink:document.querySelector("#library-link"),settingsLink:document.querySelector("#settings-link")}}setupEventListeners(){this.elements.searchInput?.addEventListener("keydown",this.handleSearchKeydown.bind(this)),this.elements.searchButton?.addEventListener("click",this.performSearch.bind(this)),this.elements.menuBtn?.addEventListener("click",()=>this.togglePanel(this.elements.menuPanel)),this.elements.libraryLink?.addEventListener("click",this.handleLibraryLink.bind(this)),this.elements.settingsLink?.addEventListener("click",this.handleSettingsLink.bind(this)),document.addEventListener("click",this.handleDocumentClick.bind(this)),this.elements.themeToggle?.addEventListener("change",this.handleThemeToggle.bind(this)),window.addEventListener("beforeunload",this.handleBeforeUnload.bind(this))}async init(){this.loadSavedTheme(),"undefined"!=typeof AOS&&AOS.init(),await this.fetchAndLoadImages()}loadSavedTheme(){"true"===localStorage.getItem("darkTheme")&&(document.body.classList.add("dark-theme"),this.elements.themeToggle&&(this.elements.themeToggle.checked=!0))}async fetchAndLoadImages(){if(!this.state.isLoading&&!this.state.isPanelOpen){this.state.isLoading=!0,this.toggleLoadingSpinner(!0);try{var e=await this.db.getHtmlContent(1),t=e?e.content:await this.fetchWithTimeout(""+config.proxyUrl+encodeURIComponent(config.targetUrl));t?(e||await this.db.putHtmlContent(1,t),this.extractImagesAndPdfLinks(t),0<this.state.images.length?(await this.loadImages(),this.setupIntersectionObserver()):this.showErrorMessage("No images found. Please check the source.")):this.showErrorMessage("No content fetched. Please try again later.")}catch(e){console.error("Error during fetching or parsing:",e),this.showErrorMessage("Failed to fetch books. Please try again later.")}finally{this.state.isLoading=!1,this.toggleLoadingSpinner(!1)}}}async fetchWithTimeout(e,t={},s=config.fetchTimeout){const r=new AbortController;s=setTimeout(()=>r.abort(),s);try{var n=await fetch(e,{...t,signal:r.signal});if(clearTimeout(s),n.ok)return await n.text();throw new Error("HTTP error! Status: "+n.status)}catch(e){throw clearTimeout(s),console.error("Fetch error:",e),this.showErrorMessage("Network error. Please check your connection and try again."),new Error("Fetch failed: "+e.message)}}extractImagesAndPdfLinks(e){var t;e?(e=(new DOMParser).parseFromString(e,"text/html"),t=Array.from(e.querySelectorAll('img[loading="lazy"][decoding="async"].alignnone')),e.querySelectorAll("a[href]").forEach(e=>{var t;e.href&&"string"==typeof e.href&&(t=e.href.trim(),e=(e.querySelector('span[style="color: #ff6600;"]')||e).textContent?.trim(),t&&e&&this.state.pdfUrlToTextMap.set(t,(this.state.pdfUrlToTextMap.get(t)||[]).concat(e)))}),this.state.images=t.filter(e=>e.src&&!this.state.loadedImages.has(e.src)),t.forEach(e=>this.state.loadedImages.add(e.src))):this.showErrorMessage("Failed to parse HTML content.")}async loadImages(){var e=this.state.currentBatch*config.batchSize,t=Math.min(e+config.batchSize,this.state.images.length),e=this.state.images.slice(e,t);const s=document.createDocumentFragment();0===e.length?this.showErrorMessage("No more images to load."):(await Promise.all(e.map(e=>this.createGridItem(e).then(e=>{e&&s.appendChild(e)}))),this.elements.bookGrid?.appendChild(s),this.state.currentBatch++)}async createGridItem(r,n=0){if(!r||!r.src)return console.error("Invalid image element:",r),null;const a=this.createElement("div",{class:"grid-item","data-aos":"fade-up"}),i=new Image;return i.src=r.src,i.className="lazyload",i.alt="Book Cover",new Promise(e=>{i.onload=()=>{i.style.display="block",e(a)},i.onerror=async()=>{n<config.maxRetries?setTimeout(()=>this.createGridItem(r,n+1).then(e),config.retryDelay):(console.error(`Failed to load image after ${config.maxRetries} retries:`,r.src),i.src=config.fallbackImage,i.onload=()=>e(a),i.onerror=()=>{this.showErrorMessage("Failed to load image: "+r.src),e(null)})},a.appendChild(i);const t=r.closest("a");var s;t?.href&&(i.addEventListener("click",e=>{e.preventDefault(),this.isValidUrl(t.href)?window.open(t.href,"_blank","noopener,noreferrer"):this.showErrorMessage("Invalid link detected.")}),(s=this.state.pdfUrlToTextMap.get(t.href))?.length&&(s=this.createElement("p",{class:"textElement"},s.join(", ")),a.appendChild(s)))})}isValidUrl(e){if("string"!=typeof e)return!1;try{return new URL(e),!0}catch{return!1}}setupIntersectionObserver(){if(this.elements.bookGrid){const t=new IntersectionObserver(e=>{e.some(e=>e.isIntersecting)&&this.state.currentBatch*config.batchSize<this.state.images.length&&!this.state.isLoading&&this.loadImages()},{rootMargin:config.intersectionObserverRootMargin,threshold:config.intersectionObserverThreshold});var e;(e=this.elements.bookGrid.lastElementChild)?t.observe(e):t.disconnect()}}createElement(e,t={},...s){const r=document.createElement(e);return Object.entries(t).forEach(([e,t])=>r.setAttribute(e,t)),s.forEach(e=>{"string"==typeof e?r.textContent=e:e instanceof Node&&r.appendChild(e)}),r}toggleLoadingSpinner(e){this.elements.loadingSpinner&&this.elements.loadingSpinner.classList.toggle("active",e)}showErrorMessage(e){this.elements.errorMessage&&(this.elements.errorMessage.textContent=e,this.elements.errorMessage.classList.add("active"),setTimeout(()=>this.elements.errorMessage.classList.remove("active"),config.errorMessageDisplayTime))}redirectSearchResults(e){var e=this.sanitizeInput(e);e?(e="search-results.html?query="+encodeURIComponent(e),window.open(e,"_blank","noopener,noreferrer")):this.showErrorMessage("Invalid search query.")}sanitizeInput(e){var t;return"string"!=typeof e?"":((t=document.createElement("div")).textContent=e,t.innerHTML)}debounce(t,s){let r;return(...e)=>{clearTimeout(r),r=setTimeout(()=>t.apply(this,e),s)}}performSearch=this.debounce(e=>{e.preventDefault();e=this.elements.searchInput?.value.trim();!e||e.length<3?this.showErrorMessage("Search term must be at least 3 characters long."):100<e.length?this.showErrorMessage("Search term must be less than 100 characters."):this.redirectSearchResults(e)},config.searchDebounceTime);togglePanel(e){e&&(e.classList.toggle("active"),this.state.isPanelOpen=e.classList.contains("active"))}handleDocumentClick(e){e.target.closest(".panel")||e.target.closest(".menu-btn")||([this.elements.menuPanel,this.elements.libraryPanel,this.elements.settingsPanel].forEach(e=>e?.classList.remove("active")),this.state.isPanelOpen=!1)}handleThemeToggle(){document.body.classList.toggle("dark-theme"),localStorage.setItem("darkTheme",document.body.classList.contains("dark-theme"))}handleSearchKeydown(e){"Enter"===e.key&&this.performSearch(e)}handleLibraryLink(){this.elements.menuPanel?.classList.remove("active"),this.togglePanel(this.elements.libraryPanel)}handleSettingsLink(){this.elements.menuPanel?.classList.remove("active"),this.togglePanel(this.elements.settingsPanel)}async handleBeforeUnload(){try{await this.db.clearHtmlContent()}catch(e){console.error("Error clearing database on unload:",e)}}}class Database{constructor(){this.db=new Dexie("NovelDatabase"),this.db.version(1).stores({htmlContent:"++id, content"})}async getHtmlContent(e){try{return await this.db.htmlContent.get(e)||null}catch(e){return console.error("Database read error:",e),null}}async putHtmlContent(e,t){try{await this.db.htmlContent.put({id:e,content:t})}catch(e){console.error("Database write error:",e)}}async clearHtmlContent(){try{await this.db.htmlContent.clear()}catch(e){console.error("Database clear error:",e)}}}document.addEventListener("DOMContentLoaded",()=>{(new NovelWebsite).init()}); -- @keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes scaleIn{0%{transform:scale(.8)}to{transform:scale(1)}}@keyframes slideUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes spin{0%{transform:translate(-50%,-50%) rotate(0deg)}to{transform:translate(-50%,-50%) rotate(360deg)}}:root{--color-primary:#333;--color-secondary:#f5f5f5;--color-text:#333;--color-background:#f5f5f5;--color-shadow:rgba(0, 0, 0, 0.1);--color-hover:#666;--font-primary:'Montserrat', sans-serif;--font-secondary:'Playfair Display', serif;--font-size-base:16px;--font-size-h1:2.5rem;--font-size-h2:2rem;--font-size-h3:1.75rem;--spacing-xs:0.25rem;--spacing-sm:0.5rem;--spacing-md:1rem;--spacing-lg:1.5rem;--spacing-xl:2rem;--transition-speed:0.3s;--transition-timing:ease-in-out;--header-height:60px;--container-max-width:1200px;--border-radius:10px}.dark-theme{--color-primary:#f5f5f5;--color-secondary:#333;--color-text:#f5f5f5;--color-background:#222;--color-shadow:rgba(255, 255, 255, 0.1);--color-hover:#ddd}*,::after,::before{box-sizing:border-box}html{font-size:var(--font-size-base);scroll-behavior:smooth}body{font-family:var(--font-primary);margin:0;padding:0;background-color:var(--color-background);color:var(--color-text);transition:background-color var(--transition-speed) var(--transition-timing),color var(--transition-speed) var(--transition-timing);line-height:1.6}.back-btn,.menu-btn,header{display:flex;align-items:center}header{position:fixed;top:0;left:0;width:100%;height:var(--header-height);background-color:var(--color-primary);color:var(--color-secondary);padding:var(--spacing-sm) var(--spacing-md);justify-content:space-between;z-index:100;box-shadow:0 2px 5px var(--color-shadow)}.back-btn,.menu-btn{background-color:transparent;border:0;cursor:pointer;width:40px;height:40px;justify-content:center;border-radius:50%;transition:transform var(--transition-speed) var(--transition-timing)}.back-btn:focus,.back-btn:hover,.menu-btn:focus,.menu-btn:hover{transform:scale(1.1);outline:0}.back-btn ion-icon,.menu-icon{font-size:24px;color:var(--color-secondary)}.search-bar{display:flex;align-items:center;background-color:var(--color-secondary);border-radius:20px;padding:var(--spacing-sm) var(--spacing-md);box-shadow:0 2px 5px var(--color-shadow);transition:box-shadow var(--transition-speed) var(--transition-timing);margin-right:60px;max-width:300px;width:100%}.search-bar.active{box-shadow:0 4px 10px var(--color-shadow)}.search-input{flex:1;border:0;background-color:transparent;font-size:1rem;outline:0;padding:0;color:var(--color-text)}.search-input::placeholder{color:#999}.search-btn{background-color:transparent;border:0;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform var(--transition-speed) var(--transition-timing)}.search-btn:focus,.search-btn:hover{transform:scale(1.1);outline:0}.search-btn ion-icon{font-size:20px;color:var(--color-text)}main{display:flex;flex-direction:column;align-items:center;min-height:calc(100vh - var(--header-height));padding:var(--spacing-xl);margin-top:var(--header-height)}.book-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:var(--spacing-lg);width:100%;max-width:var(--container-max-width)}.grid-item,.grid-item img{border-radius:var(--border-radius)}.grid-item{position:relative;background-color:var(--color-secondary);box-shadow:0 2px 5px var(--color-shadow);cursor:pointer;transition:transform var(--transition-speed) var(--transition-timing),box-shadow var(--transition-speed) var(--transition-timing);overflow:hidden;aspect-ratio:2/3}.grid-item img{width:100%;height:100%;object-fit:cover;transition:transform var(--transition-speed) var(--transition-timing)}.grid-item:focus,.grid-item:hover{transform:translateY(-5px);box-shadow:0 4px 10px var(--color-shadow)}.grid-item:focus img,.grid-item:hover img{transform:scale(1.05)}.textElement{position:absolute;bottom:0;left:0;width:100%;padding:var(--spacing-sm);background-color:rgba(0,0,0,.7);color:#fff;font-family:var(--font-secondary);font-size:.9rem;text-align:center;opacity:.8;transition:opacity var(--transition-speed) var(--transition-timing)}.grid-item:focus .textElement,.grid-item:hover .textElement{opacity:1}.panel{position:fixed;top:0;right:-100%;background-color:var(--color-background);height:100vh;width:50%;max-width:250px;padding:var(--spacing-xl);transition:right var(--transition-speed) var(--transition-timing);box-shadow:-2px 0 5px var(--color-shadow);z-index:101;display:flex;flex-direction:column;align-items:flex-start;overflow-y:auto}.panel a,.panel h3{color:var(--color-text)}.panel h3{margin:0 0 var(--spacing-lg);font-size:var(--font-size-h3);font-weight:700}.panel ul{list-style-type:none;padding:0;width:100%}.panel li{margin-bottom:var(--spacing-md)}.panel a{text-decoration:none;font-size:1.125rem;transition:color var(--transition-speed) var(--transition-timing),background-color var(--transition-speed) var(--transition-timing);display:block;padding:var(--spacing-sm);border-radius:var(--border-radius);background-color:var(--color-secondary);box-shadow:0 2px 5px var(--color-shadow)}.panel a:focus,.panel a:hover{color:var(--color-hover);background-color:var(--color-primary);outline:0}.panel.active{right:0}.error-message,.loading-spinner{position:fixed;left:50%;display:none}.loading-spinner{top:50%;transform:translate(-50%,-50%);width:50px;height:50px;border:5px solid var(--color-secondary);border-top:5px solid var(--color-primary);border-radius:50%;animation:spin 1s linear infinite;z-index:103}.error-message.active,.loading-spinner.active{display:block}.error-message{bottom:var(--spacing-md);transform:translateX(-50%);background-color:#ff4d4d;color:#fff;padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--border-radius);box-shadow:0 2px 5px var(--color-shadow);z-index:200}.settings-option{margin-bottom:var(--spacing-lg);width:100%}.settings-option label{display:block;margin-bottom:var(--spacing-sm);font-weight:700;font-size:1rem}.toggle-switch{position:relative;display:inline-block;width:60px;height:34px}.toggle-switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#ccc;transition:background-color .4s;border-radius:34px}.slider:before{position:absolute;content:"";height:26px;width:26px;left:4px;bottom:4px;background-color:#fff;transition:transform .4s;border-radius:50%}input:checked+.slider{background-color:#2196f3}input:checked+.slider:before{transform:translateX(26px)}.title{animation:slideUp var(--transition-speed) var(--transition-timing)}.menu-btn,.search-bar{animation:scaleIn var(--transition-speed) var(--transition-timing)}@media (max-width:768px){.book-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}.panel{width:75%}}@media (max-width:480px){.book-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}.panel{width:100%}.search-bar{max-width:200px}} ] your task is to combine the best elements of both versions to create a fully working solution. 
send the Fully working full code.