<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Green Wallpaper - HD Green Backgrounds & Wallpaper Generator</title>
    <meta name="description" content="Free green wallpaper collection and generator. Create custom sage green, and dark greengreen wallpapers for desktop and mobile. Download HD green backgrounds.">
    <meta name="keywords" content="green wallpaper, wallpaper, sage, dark, forest, mint, emeraldr, lime, teal, grass, leaf, hunter, olive, army, background, aesthetic">
    <link rel="canonical" href="https://greenwallpaper.org/">

    <!-- Favicon -->
    <link rel="icon" type="image/x-icon" href="/favicon.ico">
    <link rel="icon" type="image/svg+xml" href="/logo.svg">
    <link rel="apple-touch-icon" sizes="180x180" href="/logo.svg">

    <!-- Hreflang Tags -->
    <link rel="alternate" hreflang="en" href="https://greenwallpaper.org/" />
    <link rel="alternate" hreflang="zh" href="https://greenwallpaper.org/zh/" />
    <link rel="alternate" hreflang="es" href="https://greenwallpaper.org/es/" />
    <link rel="alternate" hreflang="fr" href="https://greenwallpaper.org/fr/" />
    <link rel="alternate" hreflang="de" href="https://greenwallpaper.org/de/" />
    <link rel="alternate" hreflang="ja" href="https://greenwallpaper.org/ja/" />
    <link rel="alternate" hreflang="ko" href="https://greenwallpaper.org/ko/" />
    <link rel="alternate" hreflang="pt" href="https://greenwallpaper.org/pt/" />
    <link rel="alternate" hreflang="ru" href="https://greenwallpaper.org/ru/" />
    <link rel="alternate" hreflang="ar" href="https://greenwallpaper.org/ar/" />
    <link rel="alternate" hreflang="hi" href="https://greenwallpaper.org/hi/" />
    <link rel="alternate" hreflang="it" href="https://greenwallpaper.org/it/" />
    <link rel="alternate" hreflang="x-default" href="https://greenwallpaper.org/" />

    <!-- Open Graph Meta Tags -->
    <meta property="og:title" content="Green Wallpaper - Free HD Green Backgrounds & Wallpaper Generator">
    <meta property="og:description" content="Free green wallpaper collection and generator. Create custom sage green, dark green, and aesthetic green wallpapers for desktop and mobile.">
    <meta property="og:image" content="https://greenwallpaper.org/social-share.jpg">
    <meta property="og:url" content="https://greenwallpaper.org/">
    <meta property="og:type" content="website">
    <meta property="og:site_name" content="Green Wallpaper">

    <!-- Twitter Card Meta Tags -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="Green Wallpaper - Free HD Green Backgrounds & Wallpaper Generator">
    <meta name="twitter:description" content="Free green wallpaper collection and generator. Create custom sage green, dark green, and aesthetic green wallpapers.">
    <meta name="twitter:image" content="https://greenwallpaper.org/social-share.jpg">
    <meta name="twitter:site" content="@greenwallpaper">
    <meta name="twitter:creator" content="@greenwallpaper">

    <!-- Structured Data -->
    <script type="application/ld+json">
    {
        "@context": "https://schema.org",
        "@type": "WebApplication",
        "name": "Green Wallpaper",
        "description": "Free green wallpaper collection and generator tool to create custom green backgrounds",
        "url": "https://greenwallpaper.org/",
        "applicationCategory": "DesignApplication",
        "operatingSystem": "Any",
        "offers": {
            "@type": "Offer",
            "price": "0",
            "priceCurrency": "USD"
        }
    }
    </script>

    <!-- Wallpaper Collection Structured Data -->
    <script type="application/ld+json">
    {
        "@context": "https://schema.org",
        "@type": "ItemList",
        "name": "Popular Green Wallpapers Collection",
        "description": "Curated collection of high-quality green wallpapers for desktop and mobile devices",
        "numberOfItems": 20,
        "itemListElement": [
            {
                "@type": "ImageObject",
                "position": 1,
                "name": "Sage Green Aesthetic Wallpaper",
                "description": "Modern sage green aesthetic wallpaper perfect for desktop backgrounds",
                "width": "1920",
                "height": "1080",
                "encodingFormat": "image/png",
                "keywords": "sage green wallpaper, aesthetic wallpaper"
            },
            {
                "@type": "ImageObject",
                "position": 2,
                "name": "Dark Green Wallpaper HD",
                "description": "Deep dark green wallpaper in high definition for professional displays",
                "width": "2560",
                "height": "1440",
                "encodingFormat": "image/png",
                "keywords": "dark green wallpaper, hd wallpaper"
            },
            {
                "@type": "ImageObject",
                "position": 3,
                "name": "Green Aesthetic iPhone Wallpaper",
                "description": "Trendy green aesthetic wallpaper optimized for iPhone screens",
                "width": "1080",
                "height": "1920",
                "encodingFormat": "image/png",
                "keywords": "green aesthetic wallpaper, iphone wallpaper"
            }
        ]
    }
    </script>

    <script src="https://cdn.tailwindcss.com/3.3.3"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
    <style>
        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
            transition: all 0.3s ease;
        }
        .glassmorphism {
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(15px);
            border-radius: 16px;
            box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.3);
            position: relative;
            z-index: 1;
        }
        .btn-primary {
            background: linear-gradient(135deg, #10b981 0%, #059669 100%);
            transition: all 0.3s ease;
        }
        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 15px -3px rgba(16, 185, 129, 0.3);
        }
        .preview-container {
            transition: all 0.3s ease;
        }
        .preview-container:hover {
            transform: scale(1.01);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
        }
        input[type="range"]::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: #10b981;
            cursor: pointer;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        }
        .color-preview {
            transition: all 0.3s ease;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        }
        .masonry-grid {
            column-count: 1;
            column-gap: 1rem;
        }
        @media (min-width: 640px) {
            .masonry-grid { column-count: 2; }
        }
        @media (min-width: 768px) {
            .masonry-grid { column-count: 3; }
        }
        @media (min-width: 1024px) {
            .masonry-grid { column-count: 4; }
        }
        .masonry-item {
            break-inside: avoid;
            margin-bottom: 1rem;
        }
        .wallpaper-card {
            transition: all 0.3s ease;
            cursor: pointer;
        }
        .wallpaper-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
        }
        .dropdown {
            position: relative;
            display: inline-block;
        }
        .dropdown-content {
            display: none;
            position: absolute;
            right: 0;
            background-color: white;
            min-width: 200px;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
            border-radius: 8px;
            z-index: 99999;
            border: 1px solid #e5e7eb;
        }
        .dropdown-content.lang-dropdown {
            min-width: 320px;
            max-height: 240px;
            overflow-y: auto;
            padding: 4px 0;
        }
        .lang-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 0;
        }
        .lang-dropdown .dropdown-item {
            padding: 6px 12px;
            font-size: 14px;
            line-height: 1.2;
        }

        /* Fullscreen preview styles */
        .fullscreen-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background: rgba(0, 0, 0, 0.95);
            z-index: 999999;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
        }

        .fullscreen-overlay.show {
            opacity: 1;
            visibility: visible;
        }

        /* True fullscreen styles */
        .fullscreen-overlay:fullscreen {
            background: black;
        }

        .fullscreen-overlay:-webkit-full-screen {
            background: black;
        }

        .fullscreen-overlay:-moz-full-screen {
            background: black;
        }

        .fullscreen-overlay:-ms-fullscreen {
            background: black;
        }

        .fullscreen-content {
            max-width: 95vw;
            max-height: 95vh;
            position: relative;
        }

        .fullscreen-image {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
            border-radius: 8px;
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
        }

        .fullscreen-close {
            position: fixed;
            top: 20px;
            right: 20px;
            background: rgba(255, 255, 255, 0.9);
            border: none;
            border-radius: 50%;
            width: 50px;
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 20px;
            color: #374151;
            transition: all 0.2s ease;
            z-index: 1000;
        }

        .fullscreen-close:hover {
            background: white;
            transform: scale(1.1);
        }

        /* Adjust close button for non-fullscreen mode */
        .fullscreen-overlay:not(:fullscreen) .fullscreen-close:not(:-webkit-full-screen):not(:-moz-full-screen):not(:-ms-fullscreen) {
            position: absolute;
            top: -50px;
            right: 0;
            width: 40px;
            height: 40px;
            font-size: 18px;
        }

        .fullscreen-info {
            position: fixed;
            bottom: 20px;
            left: 20px;
            right: 20px;
            text-align: center;
            color: white;
            font-size: 16px;
            z-index: 1000;
        }

        /* Adjust info position for non-fullscreen mode */
        .fullscreen-overlay:not(:fullscreen) .fullscreen-info:not(:-webkit-full-screen):not(:-moz-full-screen):not(:-ms-fullscreen) {
            position: absolute;
            bottom: -60px;
            left: 0;
            right: 0;
            font-size: 14px;
        }
        .dropdown-content.show {
            display: block;
        }
        .dropdown-item {
            color: #374151;
            padding: 12px 16px;
            text-decoration: none;
            display: flex;
            align-items: center;
            transition: background-color 0.2s;
        }
        .dropdown-item:hover {
            background-color: #f3f4f6;
        }
        .dropdown-item:first-child {
            border-radius: 8px 8px 0 0;
        }
        .dropdown-item:last-child {
            border-radius: 0 0 8px 8px;
        }
        .flag-icon {
            width: 20px;
            height: 15px;
            margin-right: 8px;
            border-radius: 2px;
        }
    </style>
</head>
<body class="min-h-screen flex flex-col">
    <!-- Header -->
    <header class="bg-white/80 backdrop-blur-md shadow-sm py-4 border-b border-green-100">
        <div class="container mx-auto px-4 flex justify-between items-center">
            <div class="flex items-center">
                <i class="fas fa-leaf text-green-500 text-2xl mr-3"></i>
                <div>
                    <div class="text-xl font-bold text-gray-800">Green Wallpaper</div>
                    <p class="text-xs text-gray-500">Free HD Green Backgrounds</p>
                </div>
            </div>
            <div class="flex items-center space-x-4">
                <!-- Share Dropdown -->
                <div class="dropdown">
                    <button onclick="toggleDropdown('shareDropdown')" class="flex items-center text-gray-600 hover:text-green-600 transition-colors">
                        <i class="fas fa-share-alt mr-1"></i>
                        <span class="hidden sm:inline">Share</span>
                        <i class="fas fa-chevron-down ml-1 text-xs"></i>
                    </button>
                    <div id="shareDropdown" class="dropdown-content">
                        <a href="#" onclick="shareOn('twitter')" class="dropdown-item">
                            <i class="fab fa-twitter text-blue-400 w-5"></i>
                            Twitter
                        </a>
                        <a href="#" onclick="shareOn('facebook')" class="dropdown-item">
                            <i class="fab fa-facebook text-blue-600 w-5"></i>
                            Facebook
                        </a>
                        <a href="#" onclick="shareOn('linkedin')" class="dropdown-item">
                            <i class="fab fa-linkedin text-blue-700 w-5"></i>
                            LinkedIn
                        </a>
                        <a href="#" onclick="shareOn('pinterest')" class="dropdown-item">
                            <i class="fab fa-pinterest text-red-600 w-5"></i>
                            Pinterest
                        </a>
                        <a href="#" onclick="copyLink()" class="dropdown-item">
                            <i class="fas fa-link text-gray-600 w-5"></i>
                            Copy Link
                        </a>
                    </div>
                </div>

                <!-- Language Dropdown -->
                <div class="dropdown">
                    <button onclick="toggleDropdown('langDropdown')" class="flex items-center text-gray-600 hover:text-green-600 transition-colors">
                        <i class="fas fa-globe mr-1"></i>
                        <span class="hidden sm:inline" id="currentLang">EN</span>
                        <i class="fas fa-chevron-down ml-1 text-xs"></i>
                    </button>
                    <div id="langDropdown" class="dropdown-content lang-dropdown">
                        <div class="lang-grid">
                            <a href="#" onclick="changeLang('en')" class="dropdown-item">
                                <span class="flag-icon">🇺🇸</span>
                                English
                            </a>
                            <a href="#" onclick="changeLang('zh')" class="dropdown-item">
                                <span class="flag-icon">🇨🇳</span>
                                中文
                            </a>
                            <a href="#" onclick="changeLang('es')" class="dropdown-item">
                                <span class="flag-icon">🇪🇸</span>
                                Español
                            </a>
                            <a href="#" onclick="changeLang('fr')" class="dropdown-item">
                                <span class="flag-icon">🇫🇷</span>
                                Français
                            </a>
                            <a href="#" onclick="changeLang('de')" class="dropdown-item">
                                <span class="flag-icon">🇩🇪</span>
                                Deutsch
                            </a>
                            <a href="#" onclick="changeLang('ja')" class="dropdown-item">
                                <span class="flag-icon">🇯🇵</span>
                                日本語
                            </a>
                            <a href="#" onclick="changeLang('ko')" class="dropdown-item">
                                <span class="flag-icon">🇰🇷</span>
                                한국어
                            </a>
                            <a href="#" onclick="changeLang('pt')" class="dropdown-item">
                                <span class="flag-icon">🇵🇹</span>
                                Português
                            </a>
                            <a href="#" onclick="changeLang('ru')" class="dropdown-item">
                                <span class="flag-icon">🇷🇺</span>
                                Русский
                            </a>
                            <a href="#" onclick="changeLang('ar')" class="dropdown-item">
                                <span class="flag-icon">🇸🇦</span>
                                العربية
                            </a>
                            <a href="#" onclick="changeLang('hi')" class="dropdown-item">
                                <span class="flag-icon">🇮🇳</span>
                                हिन्दी
                            </a>
                            <a href="#" onclick="changeLang('it')" class="dropdown-item">
                                <span class="flag-icon">🇮🇹</span>
                                Italiano
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </header>

    <!-- Hero Section with Tool -->
    <main class="flex-grow">
        <!-- Hero Section -->
        <section class="bg-gradient-to-br from-green-50 to-emerald-50 py-6 md:py-8">
            <div class="container mx-auto px-4">
                <div class="text-center mb-6">
                    <h1 class="text-2xl md:text-3xl lg:text-4xl font-bold text-gray-900 mb-3">
                        Free Green Wallpaper Generator
                    </h1>
                    <p class="text-base md:text-lg text-gray-600 mb-4 max-w-2xl mx-auto">
                        Create stunning custom green wallpapers instantly. Generate sage green, dark green, and aesthetic green backgrounds for desktop and mobile devices.
                    </p>
                    <div class="flex flex-wrap justify-center gap-2 text-xs md:text-sm text-gray-500">
                        <span class="bg-white px-2 py-1 rounded-full">Sage Green</span>
                        <span class="bg-white px-2 py-1 rounded-full">Dark Green</span>
                        <span class="bg-white px-2 py-1 rounded-full">Aesthetic</span>
                        <span class="bg-white px-2 py-1 rounded-full">HD Quality</span>
                    </div>
                </div>
            </div>
        </section>

        <!-- Tool Section -->
        <section id="generator" class="pt-0 pb-6 md:pb-8">
            <div class="container mx-auto px-4">
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
                    <!-- Control Panel -->
                    <div class="glassmorphism p-6">
                        <h2 class="text-2xl font-semibold text-gray-800 mb-6 flex items-center">
                            <i class="fas fa-sliders-h text-green-500 mr-3"></i>Wallpaper Settings
                        </h2>

                        <!-- Preset Sizes -->
                        <div class="mb-6">
                            <label class="block text-sm font-medium text-gray-700 mb-3">Quick Size Presets</label>
                            <div class="grid grid-cols-2 gap-2 mb-4">
                                <button onclick="setSize(1920, 1080)" class="px-3 py-2 text-sm bg-gray-100 hover:bg-green-100 rounded-md transition-colors">1920×1080 (HD)</button>
                                <button onclick="setSize(2560, 1440)" class="px-3 py-2 text-sm bg-gray-100 hover:bg-green-100 rounded-md transition-colors">2560×1440 (2K)</button>
                                <button onclick="setSize(3840, 2160)" class="px-3 py-2 text-sm bg-gray-100 hover:bg-green-100 rounded-md transition-colors">3840×2160 (4K)</button>
                                <button onclick="setSize(1080, 1920)" class="px-3 py-2 text-sm bg-gray-100 hover:bg-green-100 rounded-md transition-colors">1080×1920 (Mobile)</button>
                            </div>
                        </div>

                        <!-- Custom Size Settings -->
                        <div class="mb-6">
                            <label class="block text-sm font-medium text-gray-700 mb-2">Custom Size (px)</label>
                            <div class="grid grid-cols-2 gap-4">
                                <div>
                                    <label class="block text-xs text-gray-500 mb-1">Width</label>
                                    <input type="number" id="widthInput" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500" placeholder="Width">
                                </div>
                                <div>
                                    <label class="block text-xs text-gray-500 mb-1">Height</label>
                                    <input type="number" id="heightInput" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500" placeholder="Height">
                                </div>
                            </div>
                            <p id="resolutionInfo" class="mt-2 text-xs text-gray-500">Default size based on your screen: <span id="screenWidth">0</span>×<span id="screenHeight">0</span></p>
                        </div>

                        <!-- Color Selection -->
                        <div class="mb-8">
                            <label class="block text-sm font-medium text-gray-700 mb-3">Green Color Palette</label>

                            <!-- Popular Green Shades -->
                            <div class="mb-4">
                                <p class="text-xs text-gray-500 mb-2">Popular Shades</p>
                                <div class="grid grid-cols-4 gap-2">
                                    <div class="h-12 rounded-lg cursor-pointer border-2 border-transparent hover:border-green-400 transition-all"
                                         style="background-color: #10b981" onclick="setColor('#10b981')" title="Sage Green">
                                        <div class="h-full flex items-end justify-center pb-1">
                                            <span class="text-xs text-white font-medium">Sage</span>
                                        </div>
                                    </div>
                                    <div class="h-12 rounded-lg cursor-pointer border-2 border-transparent hover:border-green-400 transition-all"
                                         style="background-color: #6ee7b7" onclick="setColor('#6ee7b7')" title="Mint Green">
                                        <div class="h-full flex items-end justify-center pb-1">
                                            <span class="text-xs text-gray-700 font-medium">Mint</span>
                                        </div>
                                    </div>
                                    <div class="h-12 rounded-lg cursor-pointer border-2 border-transparent hover:border-green-400 transition-all"
                                         style="background-color: #059669" onclick="setColor('#059669')" title="Forest Green">
                                        <div class="h-full flex items-end justify-center pb-1">
                                            <span class="text-xs text-white font-medium">Forest</span>
                                        </div>
                                    </div>
                                    <div class="h-12 rounded-lg cursor-pointer border-2 border-transparent hover:border-green-400 transition-all"
                                         style="background-color: #047857" onclick="setColor('#047857')" title="Emerald Green">
                                        <div class="h-full flex items-end justify-center pb-1">
                                            <span class="text-xs text-white font-medium">Emerald</span>
                                        </div>
                                    </div>
                                    <div class="h-12 rounded-lg cursor-pointer border-2 border-transparent hover:border-green-400 transition-all"
                                         style="background-color: #84cc16" onclick="setColor('#84cc16')" title="Lime Green">
                                        <div class="h-full flex items-end justify-center pb-1">
                                            <span class="text-xs text-white font-medium">Lime</span>
                                        </div>
                                    </div>
                                    <div class="h-12 rounded-lg cursor-pointer border-2 border-transparent hover:border-green-400 transition-all"
                                         style="background-color: #0891b2" onclick="setColor('#0891b2')" title="Teal Green">
                                        <div class="h-full flex items-end justify-center pb-1">
                                            <span class="text-xs text-white font-medium">Teal</span>
                                        </div>
                                    </div>
                                    <div class="h-12 rounded-lg cursor-pointer border-2 border-transparent hover:border-green-400 transition-all"
                                         style="background-color: #22c55e" onclick="setColor('#22c55e')" title="Grass Green">
                                        <div class="h-full flex items-end justify-center pb-1">
                                            <span class="text-xs text-white font-medium">Grass</span>
                                        </div>
                                    </div>
                                    <div class="h-12 rounded-lg cursor-pointer border-2 border-transparent hover:border-green-400 transition-all"
                                         style="background-color: #16a34a" onclick="setColor('#16a34a')" title="Leaf Green">
                                        <div class="h-full flex items-end justify-center pb-1">
                                            <span class="text-xs text-white font-medium">Leaf</span>
                                        </div>
                                    </div>
                                    <div class="h-12 rounded-lg cursor-pointer border-2 border-transparent hover:border-green-400 transition-all"
                                         style="background-color: #15803d" onclick="setColor('#15803d')" title="Dark Green">
                                        <div class="h-full flex items-end justify-center pb-1">
                                            <span class="text-xs text-white font-medium">Dark</span>
                                        </div>
                                    </div>
                                    <div class="h-12 rounded-lg cursor-pointer border-2 border-transparent hover:border-green-400 transition-all"
                                         style="background-color: #166534" onclick="setColor('#166534')" title="Hunter Green">
                                        <div class="h-full flex items-end justify-center pb-1">
                                            <span class="text-xs text-white font-medium">Hunter</span>
                                        </div>
                                    </div>
                                    <div class="h-12 rounded-lg cursor-pointer border-2 border-transparent hover:border-green-400 transition-all"
                                         style="background-color: #14532d" onclick="setColor('#14532d')" title="Olive Green">
                                        <div class="h-full flex items-end justify-center pb-1">
                                            <span class="text-xs text-white font-medium">Olive</span>
                                        </div>
                                    </div>
                                    <div class="h-12 rounded-lg cursor-pointer border-2 border-transparent hover:border-green-400 transition-all"
                                         style="background-color: #365314" onclick="setColor('#365314')" title="Army Green">
                                        <div class="h-full flex items-end justify-center pb-1">
                                            <span class="text-xs text-white font-medium">Army</span>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Custom Color Slider -->
                            <div class="flex items-center mb-4">
                                <input type="range" id="colorSlider" min="0" max="360" value="120" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer">
                                <div id="colorPreview" class="ml-4 w-12 h-12 rounded-full border-2 border-gray-200 color-preview" style="background-color: hsl(120, 100%, 50%)"></div>
                            </div>

                            <div id="colorValue" class="text-sm text-gray-500">Current color: #40c463</div>
                        </div>

                        <!-- Action Buttons -->
                        <div class="flex flex-col sm:flex-row gap-4">
                            <button id="generateBtn" class="btn-primary text-white py-3 px-6 rounded-lg font-medium flex-grow flex items-center justify-center">
                                <i class="fas fa-magic mr-2"></i>Generate Wallpaper
                            </button>
                            <button id="downloadBtn" class="bg-white text-green-600 py-3 px-6 rounded-lg font-medium border border-green-200 hover:bg-green-50 flex-grow flex items-center justify-center">
                                <i class="fas fa-download mr-2"></i>Download HD
                            </button>
                        </div>
                    </div>

                    <!-- Preview Area -->
                    <div class="glassmorphism p-6">
                        <div class="flex items-center justify-between mb-6">
                            <h2 class="text-2xl font-semibold text-gray-800 flex items-center">
                                <i class="fas fa-image text-green-500 mr-3"></i>Live Preview
                            </h2>
                            <button id="fullscreenBtn" class="bg-gray-100 hover:bg-gray-200 text-gray-600 px-3 py-2 rounded-lg text-sm font-medium transition-colors flex items-center disabled:opacity-50 disabled:cursor-not-allowed" disabled title="Generate a wallpaper first">
                                <i class="fas fa-expand mr-2"></i>Fullscreen
                            </button>
                        </div>
                        <div id="previewContainer" class="preview-container bg-gray-100 rounded-lg overflow-hidden flex items-center justify-center" style="min-height: 300px;">
                            <div class="text-center text-gray-400">
                                <i class="fas fa-image text-4xl mb-4"></i>
                                <p>Click "Generate Wallpaper" to see preview</p>
                            </div>
                        </div>
                        <div id="sizeInfo" class="mt-4 text-sm text-gray-500 text-right hidden">
                            Current size: <span id="currentWidth">0</span> × <span id="currentHeight">0</span> px
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Gallery Section -->
        <section id="gallery" class="py-8 md:py-12 bg-gray-50">
            <div class="container mx-auto px-4">
                <div class="text-center mb-8">
                    <h2 class="text-3xl font-bold text-gray-900 mb-4">Popular Green Wallpapers</h2>
                    <p class="text-gray-600 max-w-2xl mx-auto">
                        Explore our collection of trending green wallpapers. From sage green aesthetics to dark forest themes, find the perfect background for your device.
                    </p>
                </div>

                <!-- Masonry Grid -->
                <div class="masonry-grid" id="wallpaperGallery">
                    <!-- Wallpaper items will be dynamically generated -->
                    <!-- SEO fallback content for search engines -->
                    <noscript>
                        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
                            <div class="bg-white rounded-lg shadow-md overflow-hidden">
                                <div class="h-48 bg-gradient-to-br from-green-400 to-green-600"></div>
                                <div class="p-4">
                                    <h3 class="font-semibold text-gray-800">Sage Green Aesthetic Wallpaper</h3>
                                    <p class="text-sm text-gray-600">Modern sage green aesthetic wallpaper perfect for desktop backgrounds</p>
                                    <p class="text-xs text-gray-500 mt-2">1920 × 1080 pixels</p>
                                </div>
                            </div>
                            <div class="bg-white rounded-lg shadow-md overflow-hidden">
                                <div class="h-48 bg-gradient-to-br from-green-700 to-green-900"></div>
                                <div class="p-4">
                                    <h3 class="font-semibold text-gray-800">Dark Green Wallpaper HD</h3>
                                    <p class="text-sm text-gray-600">Deep dark green wallpaper in high definition for professional displays</p>
                                    <p class="text-xs text-gray-500 mt-2">2560 × 1440 pixels</p>
                                </div>
                            </div>
                            <div class="bg-white rounded-lg shadow-md overflow-hidden">
                                <div class="h-48 bg-gradient-to-br from-green-300 to-green-500"></div>
                                <div class="p-4">
                                    <h3 class="font-semibold text-gray-800">Light Green Minimalist Desktop</h3>
                                    <p class="text-sm text-gray-600">Clean light green minimalist wallpaper for modern desktop setups</p>
                                    <p class="text-xs text-gray-500 mt-2">1680 × 1050 pixels</p>
                                </div>
                            </div>
                        </div>
                    </noscript>
                </div>

                <div class="text-center mt-8">
                    <button id="loadMoreBtn" class="bg-green-600 text-white px-8 py-3 rounded-lg font-medium hover:bg-green-700 transition-colors">
                        Load More Wallpapers
                    </button>
                </div>
            </div>
        </section>

        <!-- Comprehensive SEO Content Section -->
        <section class="py-8 md:py-12 bg-white">
            <div class="container mx-auto px-4">
                <div class="max-w-6xl mx-auto">
                    <h2 class="text-2xl md:text-3xl font-bold text-gray-900 mb-6">Complete Guide to Green Wallpapers</h2>

                    <!-- Main Content Grid -->
                    <div class="grid md:grid-cols-2 gap-6 md:gap-8 mb-8 md:mb-10">
                        <div>
                            <h3 class="text-xl font-semibold text-gray-800 mb-4">Why Choose Green Wallpapers?</h3>
                            <p class="text-gray-600 mb-4">
                                Green wallpapers bring a sense of nature, tranquility, and freshness to your digital space. Whether you prefer sage green wallpaper for a minimalist aesthetic, dark green wallpaper for a bold statement, or forest green wallpaper for natural vibes, our generator creates the perfect shade for your needs.
                            </p>
                            <ul class="text-gray-600 space-y-2">
                                <li>• Calming and relaxing visual experience</li>
                                <li>• Perfect for productivity and focus</li>
                                <li>• Complements modern design trends</li>
                                <li>• Available in HD, 2K, and 4K resolutions</li>
                                <li>• Suitable for desktop and mobile devices</li>
                                <li>• Reduces eye strain during long work sessions</li>
                            </ul>
                        </div>

                        <div>
                            <h3 class="text-xl font-semibold text-gray-800 mb-4">Popular Green Wallpaper Types</h3>
                            <div class="space-y-3">
                                <div class="flex items-center">
                                    <div class="w-6 h-6 rounded-full mr-3" style="background-color: #9ca3af;"></div>
                                    <span class="text-gray-700"><strong>Sage Green Wallpaper:</strong> Soft, muted green perfect for minimalist and aesthetic designs</span>
                                </div>
                                <div class="flex items-center">
                                    <div class="w-6 h-6 rounded-full mr-3" style="background-color: #166534;"></div>
                                    <span class="text-gray-700"><strong>Dark Green Wallpaper:</strong> Rich, deep green for dramatic and sophisticated backgrounds</span>
                                </div>
                                <div class="flex items-center">
                                    <div class="w-6 h-6 rounded-full mr-3" style="background-color: #10b981;"></div>
                                    <span class="text-gray-700"><strong>Emerald Green Wallpaper:</strong> Vibrant green with luxurious and premium appeal</span>
                                </div>
                                <div class="flex items-center">
                                    <div class="w-6 h-6 rounded-full mr-3" style="background-color: #84cc16;"></div>
                                    <span class="text-gray-700"><strong>Lime Green Wallpaper:</strong> Bright, energetic green for modern and dynamic looks</span>
                                </div>
                                <div class="flex items-center">
                                    <div class="w-6 h-6 rounded-full mr-3" style="background-color: #059669;"></div>
                                    <span class="text-gray-700"><strong>Forest Green Wallpaper:</strong> Natural, earthy green inspired by woodland environments</span>
                                </div>
                                <div class="flex items-center">
                                    <div class="w-6 h-6 rounded-full mr-3" style="background-color: #0891b2;"></div>
                                    <span class="text-gray-700"><strong>Blue Green Wallpaper:</strong> Ocean-inspired teal and turquoise combinations</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Device-Specific Content -->
                    <div class="mb-8 md:mb-10">
                        <h3 class="text-xl md:text-2xl font-semibold text-gray-800 mb-4 md:mb-6">Green Wallpapers for Every Device</h3>
                        <div class="grid md:grid-cols-3 gap-6">
                            <div class="bg-gray-50 p-6 rounded-lg">
                                <h4 class="font-semibold text-gray-800 mb-3">Desktop Green Wallpapers</h4>
                                <p class="text-gray-600 text-sm mb-3">
                                    Transform your desktop with stunning green wallpapers. Our collection includes green desktop wallpaper in HD (1920×1080), 2K (2560×1440), and 4K (3840×2160) resolutions.
                                </p>
                                <ul class="text-gray-600 text-sm space-y-1">
                                    <li>• Green computer wallpaper for Windows</li>
                                    <li>• Green background wallpaper for Mac</li>
                                    <li>• Green screen wallpaper for dual monitors</li>
                                    <li>• Green aesthetic wallpaper for productivity</li>
                                </ul>
                            </div>

                            <div class="bg-gray-50 p-6 rounded-lg">
                                <h4 class="font-semibold text-gray-800 mb-3">Mobile Green Wallpapers</h4>
                                <p class="text-gray-600 text-sm mb-3">
                                    Get the perfect green wallpaper for your phone. Our mobile-optimized green wallpapers work great on iPhone, Android, and all smartphone devices.
                                </p>
                                <ul class="text-gray-600 text-sm space-y-1">
                                    <li>• Green iPhone wallpaper (1080×1920)</li>
                                    <li>• Green phone wallpaper for Android</li>
                                    <li>• Green wallpaper aesthetic for mobile</li>
                                    <li>• Cute green wallpaper for personal use</li>
                                </ul>
                            </div>

                            <div class="bg-gray-50 p-6 rounded-lg">
                                <h4 class="font-semibold text-gray-800 mb-3">Tablet & Laptop Wallpapers</h4>
                                <p class="text-gray-600 text-sm mb-3">
                                    Perfect green wallpapers for tablets, laptops, and other devices. Custom sizes available for any screen resolution or aspect ratio.
                                </p>
                                <ul class="text-gray-600 text-sm space-y-1">
                                    <li>• Green wallpaper for iPad and tablets</li>
                                    <li>• Green laptop wallpaper backgrounds</li>
                                    <li>• Green wallpaper for Chromebook</li>
                                    <li>• Custom green wallpaper sizes</li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <!-- Color Psychology and Design Section -->
                    <div class="mb-12">
                        <h3 class="text-2xl font-semibold text-gray-800 mb-6">Green Color Psychology in Design</h3>
                        <div class="grid md:grid-cols-2 gap-8">
                            <div>
                                <h4 class="text-lg font-semibold text-gray-800 mb-3">Psychological Benefits of Green</h4>
                                <p class="text-gray-600 mb-4">
                                    Green is associated with nature, growth, harmony, and freshness. Using green wallpapers can have positive psychological effects on your daily digital experience.
                                </p>
                                <ul class="text-gray-600 space-y-2">
                                    <li>• <strong>Stress Reduction:</strong> Green colors help reduce stress and promote relaxation</li>
                                    <li>• <strong>Eye Comfort:</strong> Green is easier on the eyes than bright colors</li>
                                    <li>• <strong>Focus Enhancement:</strong> Green backgrounds can improve concentration</li>
                                    <li>• <strong>Creativity Boost:</strong> Natural green tones inspire creative thinking</li>
                                    <li>• <strong>Balance:</strong> Green creates visual harmony and balance</li>
                                </ul>
                            </div>

                            <div>
                                <h4 class="text-lg font-semibold text-gray-800 mb-3">Green Wallpaper Design Trends</h4>
                                <p class="text-gray-600 mb-4">
                                    Stay current with the latest green wallpaper trends and design movements that are popular in 2024 and beyond.
                                </p>
                                <ul class="text-gray-600 space-y-2">
                                    <li>• <strong>Sage Green Aesthetic:</strong> Minimalist, muted green tones</li>
                                    <li>• <strong>Dark Academia:</strong> Deep forest and hunter green wallpapers</li>
                                    <li>• <strong>Biophilic Design:</strong> Nature-inspired green backgrounds</li>
                                    <li>• <strong>Cottagecore:</strong> Soft, natural green wallpaper themes</li>
                                    <li>• <strong>Modern Minimalism:</strong> Clean, simple green designs</li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <!-- SEO-Rich FAQ Section -->
                    <div class="mb-12">
                        <h3 class="text-2xl font-semibold text-gray-800 mb-6">Frequently Asked Questions About Green Wallpapers</h3>
                        <div class="space-y-6">
                            <div class="bg-gray-50 p-6 rounded-lg">
                                <h4 class="font-semibold text-gray-800 mb-2">What are the most popular green wallpaper colors?</h4>
                                <p class="text-gray-600">The most popular green wallpaper colors include sage green wallpaper, dark green wallpaper, forest green wallpaper, emerald green wallpaper, and lime green wallpaper. Sage green has become particularly trendy for its calming, aesthetic appeal.</p>
                            </div>

                            <div class="bg-gray-50 p-6 rounded-lg">
                                <h4 class="font-semibold text-gray-800 mb-2">Can I download green wallpapers for free?</h4>
                                <p class="text-gray-600">Yes! Our green wallpaper generator is completely free to use. You can create and download unlimited green wallpapers in HD, 2K, and 4K resolutions without any cost or registration required.</p>
                            </div>

                            <div class="bg-gray-50 p-6 rounded-lg">
                                <h4 class="font-semibold text-gray-800 mb-2">What sizes are available for green wallpapers?</h4>
                                <p class="text-gray-600">We offer green wallpapers in all popular sizes including 1920×1080 (HD), 2560×1440 (2K), 3840×2160 (4K), 1080×1920 (mobile), and custom sizes. All wallpapers are optimized for desktop, laptop, tablet, and mobile devices.</p>
                            </div>

                            <div class="bg-gray-50 p-6 rounded-lg">
                                <h4 class="font-semibold text-gray-800 mb-2">Are green wallpapers good for productivity?</h4>
                                <p class="text-gray-600">Yes! Green wallpapers are excellent for productivity. Green is known to reduce eye strain, improve focus, and create a calming work environment. Sage green and forest green wallpapers are particularly popular for home offices and workspaces.</p>
                            </div>

                            <div class="bg-gray-50 p-6 rounded-lg">
                                <h4 class="font-semibold text-gray-800 mb-2">How do I choose the right green wallpaper shade?</h4>
                                <p class="text-gray-600">Choose based on your preference and use case: sage green wallpaper for minimalist aesthetics, dark green wallpaper for dramatic looks, forest green wallpaper for natural themes, and lime green wallpaper for energetic, modern designs.</p>
                            </div>
                        </div>
                    </div>

                    <div class="bg-green-50 p-8 rounded-xl">
                        <h3 class="text-2xl font-semibold text-gray-800 mb-4">How to Use Our Green Wallpaper Generator</h3>
                        <div class="grid md:grid-cols-3 gap-6">
                            <div class="text-center">
                                <div class="bg-green-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
                                    <i class="fas fa-palette text-green-600 text-2xl"></i>
                                </div>
                                <h4 class="font-semibold text-gray-800 mb-2">1. Choose Your Green Color</h4>
                                <p class="text-gray-600 text-sm">Select from popular green shades like sage green, dark green, or forest green, or use the color slider to create your perfect green tone.</p>
                            </div>
                            <div class="text-center">
                                <div class="bg-green-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
                                    <i class="fas fa-expand-arrows-alt text-green-600 text-2xl"></i>
                                </div>
                                <h4 class="font-semibold text-gray-800 mb-2">2. Set Wallpaper Dimensions</h4>
                                <p class="text-gray-600 text-sm">Choose from preset sizes (HD, 2K, 4K, mobile) or enter custom dimensions for your specific device and screen resolution.</p>
                            </div>
                            <div class="text-center">
                                <div class="bg-green-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
                                    <i class="fas fa-download text-green-600 text-2xl"></i>
                                </div>
                                <h4 class="font-semibold text-gray-800 mb-2">3. Generate & Download</h4>
                                <p class="text-gray-600 text-sm">Click generate to preview your green wallpaper, then download in high quality PNG format for immediate use.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

    <!-- Footer -->
    <footer class="bg-gray-900 text-white py-12">
        <div class="container mx-auto px-4">
            <div class="grid md:grid-cols-4 gap-8">
                <div>
                    <div class="flex items-center mb-4">
                        <i class="fas fa-leaf text-green-400 text-2xl mr-2"></i>
                        <span class="text-xl font-bold">GreenWallpaper.org</span>
                    </div>
                    <p class="text-gray-400 text-sm">
                        Create beautiful green wallpapers for free. High-quality backgrounds for desktop and mobile devices.
                    </p>
                </div>

                <div>
                    <h4 class="font-semibold mb-4">Popular Categories</h4>
                    <ul class="space-y-2 text-sm text-gray-400">
                        <li><a href="/sage-green-wallpaper.html" class="hover:text-green-400 transition-colors">Sage Green Wallpaper</a></li>
                        <li><a href="/dark-green-wallpaper.html" class="hover:text-green-400 transition-colors">Dark Green Wallpaper</a></li>
                        <li><a href="/blue-green-wallpaper.html" class="hover:text-green-400 transition-colors">Blue Green Wallpaper</a></li>
                        <li><a href="/forest-green.html" class="hover:text-green-400 transition-colors">Forest Green Wallpaper</a></li>
                    </ul>
                </div>

                <div>
                    <h4 class="font-semibold mb-4">Tools</h4>
                    <ul class="space-y-2 text-sm text-gray-400">
                        <li><a href="#generator" class="hover:text-green-400 transition-colors">Wallpaper Generator</a></li>
                        <li><a href="#gallery" class="hover:text-green-400 transition-colors">Gallery</a></li>
                        <li><a href="#" class="hover:text-green-400 transition-colors">Color Picker</a></li>
                        <li><a href="#" class="hover:text-green-400 transition-colors">Size Converter</a></li>
                    </ul>
                </div>

                <div>
                    <h4 class="font-semibold mb-4">Company</h4>
                    <ul class="space-y-2 text-sm text-gray-400">
                        <li><a href="/about.html" class="hover:text-green-400 transition-colors">About</a></li>
                        <li><a href="/faq.html" class="hover:text-green-400 transition-colors">FAQ</a></li>
                        <li><a href="/privacy.html" class="hover:text-green-400 transition-colors">Privacy Policy</a></li>
                        <li><a href="/terms.html" class="hover:text-green-400 transition-colors">Terms of Service</a></li>
                        <li><a href="/contact.html" class="hover:text-green-400 transition-colors">Contact</a></li>
                    </ul>
                </div>
            </div>

            <div class="border-t border-gray-800 mt-8 pt-8 text-center">
                <p class="text-sm text-gray-400">
                    © <span id="currentYear">2024</span> GreenWallpaper.org. All rights reserved. Free green wallpaper generator and gallery.
                </p>
            </div>
        </div>
    </footer>
    </main>

    <script>
        // Current selected color
        let currentColor = '#10b981';

        // Sample wallpaper data for gallery
        // Popular Green Wallpapers - Based on Semrush keyword research (20 unique wallpapers, no duplicates)
        const sampleWallpapers = [
            // Top volume keywords (5400+ searches) - Desktop focus
            { title: 'Sage Green Aesthetic Wallpaper', color: '#9ca3af', category: 'sage-green', width: 1920, height: 1080, description: 'Modern sage green aesthetic wallpaper perfect for desktop backgrounds', keywords: 'sage green wallpaper, aesthetic wallpaper' },
            { title: 'Dark Green Wallpaper HD', color: '#166534', category: 'dark-green', width: 2560, height: 1440, description: 'Deep dark green wallpaper in high definition for professional displays', keywords: 'dark green wallpaper, hd wallpaper' },

            // High volume keywords (2000-4000 searches) - Mobile focus
            { title: 'Green Aesthetic iPhone Wallpaper', color: '#4ade80', category: 'aesthetic', width: 1080, height: 1920, description: 'Trendy green aesthetic wallpaper optimized for iPhone screens', keywords: 'green aesthetic wallpaper, iphone wallpaper' },
            { title: 'Green Floral Wallpaper Pattern', color: '#22c55e', category: 'floral', width: 1366, height: 768, description: 'Beautiful green floral pattern wallpaper with botanical elements', keywords: 'green floral wallpaper, floral pattern' },
            { title: 'Cute Green Wallpaper Kawaii', color: '#86efac', category: 'cute', width: 1440, height: 900, description: 'Adorable cute green wallpaper with kawaii aesthetic design', keywords: 'cute green wallpaper, kawaii wallpaper' },

            // Medium volume keywords (1000-2000 searches) - Various sizes
            { title: 'Light Green Minimalist Desktop', color: '#bbf7d0', category: 'light-green', width: 1680, height: 1050, description: 'Clean light green minimalist wallpaper for modern desktop setups', keywords: 'light green wallpaper, minimalist wallpaper' },
            { title: 'Blue Green Gradient Wallpaper', color: '#0891b2', category: 'blue-green', width: 3840, height: 2160, description: 'Smooth blue green gradient wallpaper in 4K resolution', keywords: 'blue green wallpaper, gradient wallpaper' },
            { title: 'Emerald Green Luxury Background', color: '#047857', category: 'emerald', width: 1600, height: 900, description: 'Elegant emerald green luxury wallpaper with premium feel', keywords: 'emerald green wallpaper, luxury wallpaper' },
            { title: 'Pink Green Floral Combination', color: '#f472b6', category: 'pink-green', width: 1280, height: 720, description: 'Stylish pink and green floral wallpaper combination', keywords: 'pink green wallpaper, floral wallpaper' },
            { title: 'Mint Green Fresh Wallpaper', color: '#6ee7b7', category: 'mint', width: 1536, height: 864, description: 'Refreshing mint green wallpaper with cool undertones', keywords: 'mint green wallpaper, fresh wallpaper' },

            // Nature & botanical keywords (500-1000 searches) - Unique sizes
            { title: 'Green Leaf Natural Wallpaper', color: '#16a34a', category: 'leaf', width: 1280, height: 1024, description: 'Natural green leaf wallpaper with organic botanical design', keywords: 'green leaf wallpaper, natural wallpaper' },
            { title: 'Forest Green Deep Nature', color: '#15803d', category: 'forest', width: 2048, height: 1152, description: 'Deep forest green wallpaper inspired by dense woodlands', keywords: 'forest green wallpaper, nature wallpaper' },
            { title: 'Olive Green Vintage Retro', color: '#14532d', category: 'olive', width: 1024, height: 768, description: 'Vintage olive green wallpaper with retro aesthetic appeal', keywords: 'olive green wallpaper, vintage wallpaper' },
            { title: 'Green Nature Landscape 4K', color: '#059669', category: 'nature', width: 3440, height: 1440, description: 'Stunning green nature landscape wallpaper in ultrawide format', keywords: 'green nature wallpaper, landscape wallpaper' },

            // Pattern & texture keywords - Diverse resolutions
            { title: 'Green Geometric Pattern Modern', color: '#10b981', category: 'geometric', width: 1920, height: 1200, description: 'Modern green geometric pattern wallpaper with clean lines', keywords: 'green geometric wallpaper, pattern wallpaper' },
            { title: 'Green Marble Texture Luxury', color: '#065f46', category: 'marble', width: 2560, height: 1600, description: 'Luxurious green marble texture wallpaper with natural veining', keywords: 'green marble wallpaper, texture wallpaper' },
            { title: 'Green Abstract Art Wallpaper', color: '#34d399', category: 'abstract', width: 1440, height: 2560, description: 'Creative green abstract art wallpaper with artistic flair', keywords: 'green abstract wallpaper, art wallpaper' },
            { title: 'Green Striped Pattern Classic', color: '#84cc16', category: 'striped', width: 1600, height: 1200, description: 'Classic green striped pattern wallpaper with timeless appeal', keywords: 'green striped wallpaper, classic wallpaper' },

            // Specialty & trending - Unique formats
            { title: 'Neon Green Cyberpunk Style', color: '#00ff41', category: 'neon', width: 2880, height: 1800, description: 'Vibrant neon green wallpaper with cyberpunk aesthetic', keywords: 'neon green wallpaper, cyberpunk wallpaper' },
            { title: 'Pastel Green Soft Aesthetic', color: '#d1fae5', category: 'pastel', width: 1125, height: 2436, description: 'Soft pastel green wallpaper with gentle aesthetic appeal', keywords: 'pastel green wallpaper, soft wallpaper' },
        ];

        // Initialize page
        document.addEventListener('DOMContentLoaded', function() {
            // Set current year
            document.getElementById('currentYear').textContent = new Date().getFullYear();

            // Get screen resolution or fallback to window size
            const screenWidth = screen.width || window.innerWidth;
            const screenHeight = screen.height || window.innerHeight;

            // Set default screen size
            const widthInput = document.getElementById('widthInput');
            const heightInput = document.getElementById('heightInput');
            widthInput.value = screenWidth;
            heightInput.value = screenHeight;

            // Display resolution info
            document.getElementById('screenWidth').textContent = screenWidth;
            document.getElementById('screenHeight').textContent = screenHeight;

            // Initialize gallery
            generateGallery();

            // Load more button
            document.getElementById('loadMoreBtn').addEventListener('click', function() {
                generateGallery(true);
            });

            // Close dropdowns when clicking outside
            document.addEventListener('click', function(event) {
                if (!event.target.closest('.dropdown')) {
                    document.querySelectorAll('.dropdown-content').forEach(dropdown => {
                        dropdown.classList.remove('show');
                    });
                }
            });



            // Color slider events
            const colorSlider = document.getElementById('colorSlider');
            const colorPreview = document.getElementById('colorPreview');
            const colorValue = document.getElementById('colorValue');

            colorSlider.addEventListener('input', function() {
                const hue = this.value;
                const hexColor = hslToHex(hue, 70, 45);
                colorPreview.style.backgroundColor = `hsl(${hue}, 70%, 45%)`;
                currentColor = hexColor;
                colorValue.textContent = `Current color: ${hexColor}`;
            });

            // Generate button events
            const generateBtn = document.getElementById('generateBtn');
            const previewContainer = document.getElementById('previewContainer');
            const sizeInfo = document.getElementById('sizeInfo');
            const currentWidth = document.getElementById('currentWidth');
            const currentHeight = document.getElementById('currentHeight');

            generateBtn.addEventListener('click', function() {
                const width = parseInt(widthInput.value) || screenWidth;
                const height = parseInt(heightInput.value) || screenHeight;

                // Update size info
                currentWidth.textContent = width;
                currentHeight.textContent = height;
                sizeInfo.classList.remove('hidden');

                // Create canvas
                const canvas = document.createElement('canvas');
                canvas.width = width;
                canvas.height = height;
                const ctx = canvas.getContext('2d');

                // Draw solid background
                ctx.fillStyle = currentColor;
                ctx.fillRect(0, 0, width, height);

                // Show preview
                previewContainer.innerHTML = '';
                const img = new Image();
                img.src = canvas.toDataURL('image/png');
                img.alt = `Green wallpaper preview - ${width}x${height} pixels in ${currentColor} color`;
                img.style.maxWidth = '100%';
                img.style.maxHeight = '400px';
                img.style.borderRadius = '8px';
                previewContainer.appendChild(img);

                // Save canvas for download
                previewContainer.dataset.canvas = canvas.toDataURL('image/png');

                // Enable fullscreen button
                const fullscreenBtn = document.getElementById('fullscreenBtn');
                fullscreenBtn.disabled = false;
                fullscreenBtn.title = 'View in fullscreen';
            });

            // Download button events
            const downloadBtn = document.getElementById('downloadBtn');
            downloadBtn.addEventListener('click', function() {
                const canvasData = previewContainer.dataset.canvas;
                if (!canvasData) {
                    alert('Please generate a wallpaper first');
                    return;
                }

                const link = document.createElement('a');
                link.download = `green-wallpaper-${new Date().getTime()}.png`;
                link.href = canvasData;
                link.click();
            });
        });

        // Set preset size
        function setSize(width, height) {
            document.getElementById('widthInput').value = width;
            document.getElementById('heightInput').value = height;
        }

        // Set color
        function setColor(hexColor) {
            const colorPreview = document.getElementById('colorPreview');
            const colorValue = document.getElementById('colorValue');

            currentColor = hexColor;
            colorPreview.style.backgroundColor = hexColor;
            colorValue.textContent = `Current color: ${hexColor}`;

            // Update slider position
            const hsl = hexToHsl(hexColor);
            document.getElementById('colorSlider').value = hsl.h;
        }

        // Generate gallery
        function generateGallery(append = false) {
            const gallery = document.getElementById('wallpaperGallery');
            if (!append) gallery.innerHTML = '';

            const startIndex = append ? gallery.children.length : 0;
            // Show all wallpapers by default for SEO - Google can index all content immediately
            const endIndex = append ? startIndex + 8 : sampleWallpapers.length;

            for (let i = startIndex; i < endIndex && i < sampleWallpapers.length * 3; i++) {
                const wallpaper = sampleWallpapers[i % sampleWallpapers.length];
                const item = createWallpaperItem(wallpaper, i);
                gallery.appendChild(item);
            }

            // Hide load more button if all wallpapers are shown
            const loadMoreBtn = document.getElementById('loadMoreBtn');
            if (gallery.children.length >= sampleWallpapers.length) {
                loadMoreBtn.style.display = 'none';
            }
        }

        // Create wallpaper item
        function createWallpaperItem(wallpaper, index) {
            const item = document.createElement('div');
            item.className = 'masonry-item';

            const height = 200 + (index % 3) * 50; // Varying heights for masonry effect
            const description = wallpaper.description || `${wallpaper.title} in ${wallpaper.width}x${wallpaper.height} resolution`;
            const keywords = wallpaper.keywords || wallpaper.title.toLowerCase();

            item.innerHTML = `
                <article class="wallpaper-card bg-white rounded-lg shadow-md overflow-hidden"
                         onclick="downloadWallpaper('${wallpaper.color}', ${wallpaper.width}, ${wallpaper.height}, '${wallpaper.title}')"
                         data-keywords="${keywords}"
                         itemscope itemtype="https://schema.org/ImageObject">
                    <div class="relative" style="height: ${height}px; background: linear-gradient(135deg, ${wallpaper.color} 0%, ${adjustBrightness(wallpaper.color, -20)} 100%);"
                         role="img"
                         aria-label="${description}"
                         title="${wallpaper.title} - ${wallpaper.width}x${wallpaper.height}">
                        <div class="absolute inset-0 bg-black bg-opacity-20 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity">
                            <div class="text-white text-center">
                                <i class="fas fa-download text-2xl mb-2" aria-hidden="true"></i>
                                <p class="text-sm font-medium">Download HD</p>
                            </div>
                        </div>
                    </div>
                    <div class="p-4">
                        <h3 class="font-semibold text-gray-800 mb-1" itemprop="name">${wallpaper.title}</h3>
                        <p class="text-sm text-gray-500 mb-2" itemprop="description">${description}</p>
                        <div class="text-xs text-gray-600 mb-2">
                            <span itemprop="width">${wallpaper.width}</span> × <span itemprop="height">${wallpaper.height}</span> pixels
                        </div>
                        <div class="flex items-center justify-between">
                            <div class="flex items-center">
                                <div class="w-4 h-4 rounded-full mr-2" style="background-color: ${wallpaper.color};" title="Color: ${wallpaper.color}"></div>
                                <span class="text-xs text-gray-400" itemprop="color">${wallpaper.color}</span>
                            </div>
                            <span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded-full">${wallpaper.category}</span>
                        </div>
                        <meta itemprop="contentUrl" content="${wallpaper.color}">
                        <meta itemprop="encodingFormat" content="image/png">
                        <meta itemprop="keywords" content="${keywords}">
                    </div>
                </article>
            `;

            return item;
        }

        // Download wallpaper from gallery
        function downloadWallpaper(color, width, height, title) {
            const canvas = document.createElement('canvas');
            canvas.width = width;
            canvas.height = height;
            const ctx = canvas.getContext('2d');

            // Create gradient
            const gradient = ctx.createLinearGradient(0, 0, width, height);
            gradient.addColorStop(0, color);
            gradient.addColorStop(1, adjustBrightness(color, -20));

            ctx.fillStyle = gradient;
            ctx.fillRect(0, 0, width, height);

            const link = document.createElement('a');
            link.download = `${title.toLowerCase().replace(/\s+/g, '-')}-${width}x${height}.png`;
            link.href = canvas.toDataURL('image/png');
            link.click();
        }

        // Adjust color brightness
        function adjustBrightness(hex, percent) {
            const num = parseInt(hex.replace("#", ""), 16);
            const amt = Math.round(2.55 * percent);
            const R = (num >> 16) + amt;
            const G = (num >> 8 & 0x00FF) + amt;
            const B = (num & 0x0000FF) + amt;
            return "#" + (0x1000000 + (R < 255 ? R < 1 ? 0 : R : 255) * 0x10000 +
                (G < 255 ? G < 1 ? 0 : G : 255) * 0x100 +
                (B < 255 ? B < 1 ? 0 : B : 255)).toString(16).slice(1);
        }

        // HSL to HEX conversion
        function hslToHex(h, s, l) {
            l /= 100;
            const a = s * Math.min(l, 1 - l) / 100;
            const f = n => {
                const k = (n + h / 30) % 12;
                const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
                return Math.round(255 * color).toString(16).padStart(2, '0');
            };
            return `#${f(0)}${f(8)}${f(4)}`;
        }

        // HEX to HSL conversion
        function hexToHsl(hex) {
            const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);

            let r = parseInt(result[1], 16);
            let g = parseInt(result[2], 16);
            let b = parseInt(result[3], 16);

            r /= 255, g /= 255, b /= 255;
            const max = Math.max(r, g, b), min = Math.min(r, g, b);
            let h, s, l = (max + min) / 2;

            if (max === min) {
                h = s = 0; // achromatic
            } else {
                const d = max - min;
                s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
                switch (max) {
                    case r: h = (g - b) / d + (g < b ? 6 : 0); break;
                    case g: h = (b - r) / d + 2; break;
                    case b: h = (r - g) / d + 4; break;
                }
                h *= 60;
            }

            return { h: Math.round(h), s: Math.round(s * 100), l: Math.round(l * 100) };
        }

        // Dropdown functionality
        function toggleDropdown(dropdownId) {
            const dropdown = document.getElementById(dropdownId);
            const isShowing = dropdown.classList.contains('show');

            // Close all dropdowns
            document.querySelectorAll('.dropdown-content').forEach(d => {
                d.classList.remove('show');
            });

            // Toggle current dropdown
            if (!isShowing) {
                dropdown.classList.add('show');
            }
        }

        // Share functionality
        function shareOn(platform) {
            const url = encodeURIComponent(window.location.href);
            const title = encodeURIComponent('Green Wallpaper - Free HD Green Backgrounds');
            const description = encodeURIComponent('Create stunning custom green wallpapers instantly. Free HD green backgrounds for desktop and mobile.');

            let shareUrl = '';

            switch(platform) {
                case 'twitter':
                    shareUrl = `https://twitter.com/intent/tweet?url=${url}&text=${title}`;
                    break;
                case 'facebook':
                    shareUrl = `https://www.facebook.com/sharer/sharer.php?u=${url}`;
                    break;
                case 'linkedin':
                    shareUrl = `https://www.linkedin.com/sharing/share-offsite/?url=${url}`;
                    break;
                case 'pinterest':
                    shareUrl = `https://pinterest.com/pin/create/button/?url=${url}&description=${description}`;
                    break;
            }

            if (shareUrl) {
                window.open(shareUrl, '_blank', 'width=600,height=400');
            }

            // Close dropdown
            document.getElementById('shareDropdown').classList.remove('show');
        }

        function copyLink() {
            navigator.clipboard.writeText(window.location.href).then(function() {
                alert('Link copied to clipboard!');
            }).catch(function() {
                // Fallback for older browsers
                const textArea = document.createElement('textarea');
                textArea.value = window.location.href;
                document.body.appendChild(textArea);
                textArea.select();
                document.execCommand('copy');
                document.body.removeChild(textArea);
                alert('Link copied to clipboard!');
            });

            // Close dropdown
            document.getElementById('shareDropdown').classList.remove('show');
        }

        // Language switching functionality
        const languages = {
            'en': { name: 'English', flag: '🇺🇸' },
            'zh': { name: '中文', flag: '🇨🇳' },
            'es': { name: 'Español', flag: '🇪🇸' },
            'fr': { name: 'Français', flag: '🇫🇷' },
            'de': { name: 'Deutsch', flag: '🇩🇪' },
            'ja': { name: '日本語', flag: '🇯🇵' },
            'ko': { name: '한국어', flag: '🇰🇷' },
            'pt': { name: 'Português', flag: '🇵🇹' },
            'ru': { name: 'Русский', flag: '🇷🇺' },
            'ar': { name: 'العربية', flag: '🇸🇦' },
            'hi': { name: 'हिन्दी', flag: '🇮🇳' },
            'it': { name: 'Italiano', flag: '🇮🇹' }
        };

        function changeLang(langCode) {
            // Store language preference
            localStorage.setItem('selectedLanguage', langCode);

            // Close dropdown
            document.getElementById('langDropdown').classList.remove('show');

            // Redirect to the appropriate language version
            if (langCode === 'zh') {
                // Redirect to Chinese version
                window.location.href = './zh/';
            } else if (langCode === 'es') {
                // Redirect to Spanish version
                window.location.href = './es/';
            } else if (langCode === 'fr') {
                // Redirect to French version
                window.location.href = './fr/';
            } else if (langCode === 'de') {
                // Redirect to German version
                window.location.href = './de/';
            } else if (langCode === 'ja') {
                // Redirect to Japanese version
                window.location.href = './ja/';
            } else if (langCode === 'ko') {
                // Redirect to Korean version
                window.location.href = './ko/';
            } else if (langCode === 'ru') {
                // Redirect to Russian version
                window.location.href = './ru/';
            } else if (langCode === 'pt') {
                // Redirect to Portuguese version
                window.location.href = './pt/';
            } else if (langCode === 'it') {
                // Redirect to Italian version
                window.location.href = './it/';
            } else if (langCode === 'hi') {
                // Redirect to Hindi version
                window.location.href = './in/';
            } else if (langCode === 'ar') {
                // Redirect to Arabic version
                window.location.href = './sa/';
            } else if (langCode === 'en') {
                // Stay on English version (current page)
                return;
            } else {
                // For other languages, silently do nothing (no alert)
                // Languages will be added as they become available
                return;
            }
        }

        // Load saved language preference
        document.addEventListener('DOMContentLoaded', function() {
            const savedLang = localStorage.getItem('selectedLanguage') || 'en';
            const currentLang = document.getElementById('currentLang');
            if (currentLang) {
                currentLang.textContent = savedLang.toUpperCase();
            }
        });

        // Smooth scrolling for navigation links
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                const target = document.querySelector(this.getAttribute('href'));
                if (target) {
                    target.scrollIntoView({
                        behavior: 'smooth',
                        block: 'start'
                    });
                }
            });
        });

        // Fullscreen preview functionality
        function openFullscreen() {
            const previewContainer = document.getElementById('previewContainer');
            const previewImg = previewContainer.querySelector('img');

            if (!previewImg) {
                alert('Please generate a wallpaper first');
                return;
            }

            const fullscreenOverlay = document.getElementById('fullscreenOverlay');
            const fullscreenImage = document.getElementById('fullscreenImage');
            const fullscreenInfo = document.getElementById('fullscreenInfo');

            // Set the image source and info
            fullscreenImage.src = previewImg.src;
            fullscreenImage.alt = previewImg.alt;

            // Get image dimensions from alt text or dataset
            const currentWidth = document.getElementById('currentWidth').textContent;
            const currentHeight = document.getElementById('currentHeight').textContent;
            fullscreenInfo.innerHTML = `
                <p>Wallpaper Preview - ${currentWidth} × ${currentHeight} pixels</p>
                <p class="text-sm opacity-75 mt-1">Press ESC to exit fullscreen</p>
            `;

            // Show fullscreen overlay first
            fullscreenOverlay.classList.add('show');

            // Request true fullscreen
            if (fullscreenOverlay.requestFullscreen) {
                fullscreenOverlay.requestFullscreen().catch(err => {
                    console.log('Fullscreen request failed:', err);
                    // Fallback to overlay mode
                    document.body.style.overflow = 'hidden';
                });
            } else if (fullscreenOverlay.webkitRequestFullscreen) {
                fullscreenOverlay.webkitRequestFullscreen();
            } else if (fullscreenOverlay.mozRequestFullScreen) {
                fullscreenOverlay.mozRequestFullScreen();
            } else if (fullscreenOverlay.msRequestFullscreen) {
                fullscreenOverlay.msRequestFullscreen();
            } else {
                // Fallback to overlay mode if fullscreen API is not supported
                document.body.style.overflow = 'hidden';
            }
        }

        function closeFullscreen() {
            // Exit true fullscreen if active
            if (document.fullscreenElement || document.webkitFullscreenElement ||
                document.mozFullScreenElement || document.msFullscreenElement) {
                if (document.exitFullscreen) {
                    document.exitFullscreen();
                } else if (document.webkitExitFullscreen) {
                    document.webkitExitFullscreen();
                } else if (document.mozCancelFullScreen) {
                    document.mozCancelFullScreen();
                } else if (document.msExitFullscreen) {
                    document.msExitFullscreen();
                }
            } else {
                // Close overlay mode
                const fullscreenOverlay = document.getElementById('fullscreenOverlay');
                fullscreenOverlay.classList.remove('show');
                document.body.style.overflow = '';
            }
        }

        // Add event listeners for fullscreen functionality
        document.addEventListener('DOMContentLoaded', function() {
            const fullscreenBtn = document.getElementById('fullscreenBtn');
            const fullscreenOverlay = document.getElementById('fullscreenOverlay');

            // Fullscreen button click
            fullscreenBtn.addEventListener('click', openFullscreen);

            // Close on overlay click (but not on image click)
            fullscreenOverlay.addEventListener('click', function(e) {
                if (e.target === fullscreenOverlay) {
                    closeFullscreen();
                }
            });

            // Close on ESC key
            document.addEventListener('keydown', function(e) {
                if (e.key === 'Escape' && fullscreenOverlay.classList.contains('show')) {
                    closeFullscreen();
                }
            });

            // Listen for fullscreen changes
            document.addEventListener('fullscreenchange', handleFullscreenChange);
            document.addEventListener('webkitfullscreenchange', handleFullscreenChange);
            document.addEventListener('mozfullscreenchange', handleFullscreenChange);
            document.addEventListener('MSFullscreenChange', handleFullscreenChange);

            function handleFullscreenChange() {
                const fullscreenOverlay = document.getElementById('fullscreenOverlay');

                // If we exited fullscreen but overlay is still showing, close it
                if (!document.fullscreenElement && !document.webkitFullscreenElement &&
                    !document.mozFullScreenElement && !document.msFullscreenElement) {
                    if (fullscreenOverlay.classList.contains('show')) {
                        fullscreenOverlay.classList.remove('show');
                        document.body.style.overflow = '';
                    }
                }
            }
        });
    </script>

    <!-- Fullscreen Preview Overlay -->
    <div id="fullscreenOverlay" class="fullscreen-overlay">
        <div class="fullscreen-content">
            <button class="fullscreen-close" onclick="closeFullscreen()">
                <i class="fas fa-times"></i>
            </button>
            <img id="fullscreenImage" class="fullscreen-image" src="" alt="Fullscreen wallpaper preview">
            <div class="fullscreen-info">
                <p id="fullscreenInfo">Press ESC to close or click the × button</p>
            </div>
        </div>
    </div>
</body>
</html>