Wallpaper website

[lk8566588]

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Modern Wallpaper Hub</title>

<!-- Tailwind CSS CDN -->

<script src="https://cdn.tailwindcss.com"></script>

<!-- FontAwesome Icons -->

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

<!-- Header / Navbar -->

<header class="border-b border-slate-800 bg-slate-900/80 backdrop-blur sticky top-0 z-40">

    <div class="max-w-7xl mx-auto px-4 py-4 flex flex-wrap justify-between items-center gap-4">

        <div class="flex items-center gap-2">

            <i class="fa-solid fa-image text-indigo-500 text-2xl"></i>

            <h1 class="text-xl font-bold bg-gradient-to-r from-indigo-400 to-purple-400 bg-clip-text text-transparent">WallCraft</h1>

        </div>

        <!-- Search Bar -->

        <div class="relative flex-1 max-w-md">

            <i class="fa-solid fa-magnifying-glass absolute left-3 top-1/2 -translate-y-1/2 text-slate-400"></i>

            <input type="text" id="searchInput" oninput="filterWallpapers()" placeholder="Search wallpapers..." class="w-full bg-slate-800 text-sm rounded-full pl-10 pr-4 py-2 border border-slate-700 focus:outline-none focus:border-indigo-500 text-slate-200">

        </div>

        <!-- Add Wallpaper Button -->

        <button onclick="toggleModal(true)" class="bg-indigo-600 hover:bg-indigo-500 text-white font-medium px-4 py-2 rounded-full text-sm flex items-center gap-2 transition">

            <i class="fa-solid fa-plus"></i> Add Wallpaper

        </button>

    </div>

</header>

<!-- Categories Section -->

<section class="max-w-7xl mx-auto px-4 py-6 w-full">

    <div id="categoryContainer" class="flex gap-2 overflow-x-auto pb-2">

        <!-- Dynamic categories generated here -->

    </div>

</section>

<!-- Wallpaper Gallery Grid -->

<main class="max-w-7xl mx-auto px-4 pb-12 flex-1 w-full">

    <div id="wallpaperGrid" class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">

        <!-- Wallpaper cards rendered here -->

    </div>

</main>

<!-- Add Wallpaper Modal (Pop-up Form) -->

<div id="addModal" class="fixed inset-0 bg-black/70 backdrop-blur-sm hidden flex items-center justify-center p-4 z-50">

    <div class="bg-slate-900 border border-slate-800 rounded-2xl p-6 w-full max-w-md shadow-2xl relative">

        <button onclick="toggleModal(false)" class="absolute top-4 right-4 text-slate-400 hover:text-white">

            <i class="fa-solid fa-xmark text-lg"></i>

        </button>

        <h3 class="text-xl font-bold mb-4 text-white">Add New Wallpaper</h3>

        <form id="addForm" onsubmit="handleAddWallpaper(event)" class="space-y-4">

            <div>

                <label class="block text-xs font-semibold uppercase text-slate-400 mb-1">Title</label>

                <input type="text" id="wpTitle" required placeholder="e.g. Cyberpunk City" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-sm text-white focus:outline-none focus:border-indigo-500">

            </div>

            <div>

                <label class="block text-xs font-semibold uppercase text-slate-400 mb-1">Category</label>

                <select id="wpCategory" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-sm text-white focus:outline-none focus:border-indigo-500">

                    <option value="Nature">Nature</option>

                    <option value="Anime">Anime</option>

                    <option value="Cars">Cars</option>

                    <option value="Minimal">Minimal</option>

                    <option value="Abstract">Abstract</option>

                </select>

            </div>

            <div>

                <label class="block text-xs font-semibold uppercase text-slate-400 mb-1">Image URL</label>

                <input type="url" id="wpUrl" required placeholder="https://images.unsplash.com/photo-xxx..." class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-sm text-white focus:outline-none focus:border-indigo-500">

            </div>

            <button type="submit" class="w-full bg-indigo-600 hover:bg-indigo-500 text-white font-medium py-2 rounded-lg transition mt-2">

                Upload Wallpaper

            </button>

        </form>

    </div>

</div>

<!-- JavaScript Logic -->

<script>

    // Initial Sample Data

    const defaultWallpapers = \[

        { id: 1, title: 'Neon Cyberpunk', category: 'Abstract', url: 'https://images.unsplash.com/photo-1508739773434-c26b3d09e071?q=80&w=1000' },

        { id: 2, title: 'Mountain Sunset', category: 'Nature', url: 'https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?q=80&w=1000' },

        { id: 3, title: 'Sports Supercar', category: 'Cars', url: 'https://images.unsplash.com/photo-1617814076367-b759c7d7e738?q=80&w=1000' },

        { id: 4, title: 'Dark Minimalist', category: 'Minimal', url: 'https://images.unsplash.com/photo-1507525428034-b723cf961d3e?q=80&w=1000' }

    \];

    let wallpapers = JSON.parse(localStorage.getItem('my_wallpapers')) || defaultWallpapers;

    let currentCategory = 'All';

    const categories = \['All', 'Nature', 'Anime', 'Cars', 'Minimal', 'Abstract'\];

    function init() {

        renderCategories();

        renderWallpapers();

    }

    function renderCategories() {

        const container = document.getElementById('categoryContainer');

        container.innerHTML = categories.map(cat => \`

            <button onclick="setCategory('${cat}')" 

                class="px-4 py-1.5 rounded-full text-sm font-medium transition whitespace-nowrap ${currentCategory === cat ? 'bg-indigo-600 text-white' : 'bg-slate-800 text-slate-400 hover:bg-slate-700 hover:text-white'}">

                ${cat}

            </button>

        \`).join('');

    }

    function setCategory(cat) {

        currentCategory = cat;

        renderCategories();

        renderWallpapers();

    }

    function filterWallpapers() {

        renderWallpapers();

    }

    function renderWallpapers() {

        const search = document.getElementById('searchInput').value.toLowerCase();

        const grid = document.getElementById('wallpaperGrid');

        const filtered = wallpapers.filter(item => {

            const matchesCategory = currentCategory === 'All' || item.category === currentCategory;

            const matchesSearch = item.title.toLowerCase().includes(search);

            return matchesCategory && matchesSearch;

        });

        if (filtered.length === 0) {

            grid.innerHTML = \`<div class="col-span-full text-center py-12 text-slate-500">Koi wallpaper nahi mila.</div>\`;

            return;

        }

        grid.innerHTML = filtered.map(item => \`

            <div class="group relative bg-slate-900 border border-slate-800 rounded-2xl overflow-hidden shadow-lg transition hover:-translate-y-1 hover:border-slate-700">

                <div class="aspect-\[9/16\] sm:aspect-square w-full overflow-hidden bg-slate-800">

                    <img src="${item.url}" alt="${item.title}" class="w-full h-full object-cover group-hover:scale-105 transition duration-300" loading="lazy">

                </div>

                <div class="p-4 flex justify-between items-center">

                    <div>

                        <span class="text-\[10px\] font-semibold text-indigo-400 uppercase tracking-wider">${item.category}</span>

                        <h4 class="text-sm font-semibold text-slate-200 truncate">${item.title}</h4>

                    </div>

                    <button onclick="downloadImage('${item.url}', '${item.title}')" title="Download" class="bg-slate-800 hover:bg-indigo-600 text-slate-300 hover:text-white p-2.5 rounded-xl transition">

                        <i class="fa-solid fa-download text-sm"></i>

                    </button>

                </div>

            </div>

        \`).join('');

    }

    function toggleModal(show) {

        document.getElementById('addModal').classList.toggle('hidden', !show);

    }

    function handleAddWallpaper(e) {

        e.preventDefault();

        const title = document.getElementById('wpTitle').value;

        const category = document.getElementById('wpCategory').value;

        const url = document.getElementById('wpUrl').value;

        const newWp = {

            id: Date.now(),

            title,

            category,

            url

        };

        wallpapers.unshift(newWp);

        localStorage.setItem('my_wallpapers', JSON.stringify(wallpapers));

        toggleModal(false);

        document.getElementById('addForm').reset();

        renderWallpapers();

    }

    async function downloadImage(imageSrc, name) {

        try {

            const image = await fetch(imageSrc);

            const imageBlog = await image.blob();

            const imageURL = URL.createObjectURL(imageBlog);

            const link = document.createElement('a');

            link.href = imageURL;

            link.download = \`${name.replace(/\\s+/g, '-').toLowerCase()}-wallpaper.jpg\`;

            document.body.appendChild(link);

            link.click();

    
  document.body.removeChild(link);

        } catch (error) {

            window.open(imageSrc, '\_blank');

        }

    }

    init();

</script>

[dhess]

Welcome to the forum @lk8566588,

Please Tell us what’s happening in your own words.

Learning to describe problems is hard, but it is an important part of learning how to code.

Also, the more you say, the more we can help!

Happy coding