<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CreativeSpark - AI-Powered Image Creation</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <style>
        :root {
            --bg-color: #0f0f0f;
            --text-color: #ffffff;
            --accent-color: #1e1e1e;
            --hover-color: #2a2a2a;
            --border-color: #333333;
            --button-color: #2d2d2d;
            --button-text: #9e9e9e;
            --button-active: #ffffff;
        }

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

        body {
            font-family: 'Arial', sans-serif;
            background-color: var(--bg-color);
            color: var(--text-color);
            line-height: 1.6;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }

        header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 0;
        }

        .logo {
            font-size: 24px;
            font-weight: bold;
            display: flex;
            align-items: center;
        }

        .logo i {
            margin-right: 10px;
            color: #ffffff;
        }

        .nav-icons {
            display: flex;
            gap: 20px;
        }

        .nav-icons i {
            font-size: 18px;
            color: var(--button-text);
            cursor: pointer;
            transition: color 0.3s ease;
        }

        .nav-icons i:hover {
            color: var(--button-active);
        }

        .creation-panel {
            background-color: var(--accent-color);
            border-radius: 12px;
            padding: 20px;
            margin-top: 20px;
            position: relative;
        }

        .prompt-input {
            width: 100%;
            padding: 15px 20px;
            border-radius: 8px;
            border: none;
            background-color: transparent;
            color: var(--text-color);
            font-size: 16px;
            outline: none;
        }

        .prompt-input::placeholder {
            color: #6e6e6e;
        }

        .input-icons {
            position: absolute;
            right: 20px;
            top: 20px;
            display: flex;
            gap: 15px;
        }

        .input-icons i {
            color: var(--button-text);
            cursor: pointer;
            font-size: 18px;
        }

        .options {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            margin-top: 15px;
            gap: 20px;
        }

        .option-group {
            display: flex;
            flex-direction: column;
            gap: 5px;
            flex: 1;
            min-width: 150px;
        }

        .option-label {
            font-size: 12px;
            color: var(--button-text);
        }

        .option-buttons {
            display: flex;
            flex-wrap: wrap;
            gap: 5px;
        }

        .option-button {
            padding: 5px 10px;
            border-radius: 5px;
            border: none;
            background-color: var(--button-color);
            color: var(--button-text);
            cursor: pointer;
            transition: all 0.3s ease;
            font-size: 12px;
        }

        .option-button.active {
            background-color: var(--button-active);
            color: var(--bg-color);
        }

        .generate-button {
            padding: 10px 20px;
            border-radius: 5px;
            border: none;
            background-color: var(--button-active);
            color: var(--bg-color);
            font-size: 14px;
            cursor: pointer;
            transition: background-color 0.3s ease;
            position: absolute;
            right: 20px;
            bottom: 20px;
        }

        .generate-button:hover {
            background-color: #e0e0e0;
        }

        .style-tags {
            display: flex;
            gap: 10px;
            margin-top: 15px;
            flex-wrap: wrap;
        }

        .style-tag {
            padding: 5px 10px;
            border-radius: 20px;
            background-color: transparent;
            color: var(--button-text);
            font-size: 14px;
            cursor: pointer;
            transition: color 0.3s ease;
        }

        .style-tag:hover {
            color: var(--button-active);
        }

        .image-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 20px;
            margin-top: 30px;
        }

        .image-card {
            position: relative;
            border-radius: 10px;
            overflow: hidden;
            transition: transform 0.3s ease;
            background-color: #1e1e1e;
        }

        .image-card:hover {
            transform: scale(1.05);
        }

        .image-card img {
            width: 100%;
            height: auto;
            display: block;
        }

        .image-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.5);
            display: flex;
            justify-content: center;
            align-items: center;
            opacity: 0;
            transition: opacity 0.3s ease;
            gap: 10px;
        }

        .image-card:hover .image-overlay {
            opacity: 1;
        }

        .download-btn, .like-btn {
            background-color: rgba(255, 255, 255, 0.8);
            border: none;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            font-size: 18px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        .download-btn:hover, .like-btn:hover {
            background-color: #ffffff;
        }

        .like-btn.liked {
            color: #ff4136;
        }

        @media (max-width: 768px) {
            .options {
                flex-direction: column;
                gap: 15px;
            }
            
            .generate-button {
                position: static;
                width: 100%;
                margin-top: 15px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <div class="logo">
                <i class="fas fa-spark"></i> CreativeSpark
            </div>
            <div class="nav-icons">
                <i class="fas fa-bolt" title="Upgrade plan"></i>
                <i class="fas fa-home" title="Home"></i>
                <i class="fas fa-bell" title="Notifications"></i>
                <i class="fas fa-user" title="Profile"></i>
            </div>
        </header>

        <div class="creation-panel">
            <input type="text" class="prompt-input" placeholder="What do you want to create?">
            <div class="options">
                <div class="option-group">
                    <span class="option-label">Magic Prompt</span>
                    <div class="option-buttons">
                        <button class="option-button active" data-magic="auto">Auto</button>
                        <button class="option-button" data-magic="on">On</button>
                        <button class="option-button" data-magic="off">Off</button>
                    </div>
                </div>
                <div class="option-group">
                    <span class="option-label">Aspect Ratio</span>
                    <div class="option-buttons">
                        <button class="option-button active" data-ratio="9:16">9:16</button>
                        <button class="option-button" data-ratio="1:1">1:1</button>
                        <button class="option-button" data-ratio="16:9">16:9</button>
                        <button class="option-button" data-ratio="4:3">4:3</button>
                        <button class="option-button" data-ratio="3:2">3:2</button>
                    </div>
                </div>
                <div class="option-group">
                    <span class="option-label">Visibility</span>
                    <div class="option-buttons">
                        <button class="option-button active" data-visibility="public">Public</button>
                        <button class="option-button" data-visibility="private">Private</button>
                    </div>
                </div>
                <div class="option-group">
                    <span class="option-label">Model</span>
                    <div class="option-buttons">
                        <button class="option-button active" data-model="flux">Flux</button>
                        <button class="option-button" data-model="flux-realism">Flux-Realism</button>
                        <button class="option-button" data-model="flux-anime">Flux-Anime</button>
                        <button class="option-button" data-model="flux-3d">Flux-3D</button>
                        <button class="option-button" data-model="turbo">Turbo</button>
                    </div>
                </div>
                <div class="option-group">
                    <span class="option-label">Resolution</span>
                    <div class="option-buttons">
                        <button class="option-button" data-width="800" data-height="800">800x800</button>
                        <button class="option-button active" data-width="1024" data-height="1024">1024x1024</button>
                        <button class="option-button" data-width="1280" data-height="720">1280x720</button>
                        <button class="option-button" data-width="1920" data-height="1080">1920x1080</button>
                        <button class="option-button" data-width="2000" data-height="2000">2000x2000</button>
                    </div>
                </div>
            </div>
            <button class="generate-button">Generate</button>
            <div class="style-tags">
                <span class="style-tag">photo</span>
                <span class="style-tag">illustration</span>
                <span class="style-tag">3d render</span>
                <span class="style-tag">typography</span>
                <span class="style-tag">cinematic</span>
                <span class="style-tag">modern</span>
                <span class="style-tag">vintage</span>
                <span class="style-tag">minimalistic</span>
            </div>
        </div>

        <div class="image-grid" id="imageGrid">
            <!-- Dynamically generated image cards will be inserted here -->
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const generateBtn = document.querySelector('.generate-button');
            const promptInput = document.querySelector('.prompt-input');
            const imageGrid = document.getElementById('imageGrid');
            const optionButtons = document.querySelectorAll('.option-button');
            const styleTags = document.querySelectorAll('.style-tag');

            let selectedRatio = '9:16';
            let magicPrompt = 'auto';
            let visibility = 'public';
            let selectedModel = 'flux';
            let selectedWidth = 1024;
            let selectedHeight = 1024;
            let imageCount = 0;

            // Handle option button selections
            optionButtons.forEach(button => {
                button.addEventListener('click', () => {
                    const parentGroup = button.parentElement.parentElement;
                    parentGroup.querySelectorAll('.option-button').forEach(btn => btn.classList.remove('active'));
                    button.classList.add('active');

                    // Update parameters based on the group
                    if (button.dataset.ratio) {
                        selectedRatio = button.dataset.ratio;
                        [selectedWidth, selectedHeight] = getRatioDimensions(selectedRatio);
                    } else if (button.dataset.magic) {
                        magicPrompt = button.dataset.magic;
                    } else if (button.dataset.visibility) {
                        visibility = button.dataset.visibility;
                    } else if (button.dataset.model) {
                        selectedModel = button.dataset.model;
                    } else if (button.dataset.width && button.dataset.height) {
                        selectedWidth = button.dataset.width;
                        selectedHeight = button.dataset.height;
                    }
                });
            });

            // Handle style tag clicks
            styleTags.forEach(tag => {
                tag.addEventListener('click', () => {
                    promptInput.value += ' ' + tag.textContent;
                });
            });

            // Handle Generate button click
            generateBtn.addEventListener('click', () => {
                const prompt = promptInput.value.trim();
                if (prompt) {
                    generateImages(prompt);
                }
            });

            // Function to generate images
            function generateImages(prompt) {
                const fragment = document.createDocumentFragment();

                for (let i = 1; i <= 2; i++) {
                    imageCount++;
                    const seed = generateSeed();
                    const enhancedPrompt = enhancePrompt(prompt);
                    const encodedPrompt = encodeURIComponent(enhancedPrompt);
                    const imageUrl = `https://pollinations.ai/p/${encodedPrompt}?width=${selectedWidth}&height=${selectedHeight}&seed=${seed}&model=${selectedModel}&nofeed=true&nologo=true`;
                    const card = createImageCard(imageUrl, enhancedPrompt, selectedWidth, selectedHeight, seed);
                    fragment.insertBefore(card, fragment.firstChild);
                }

                imageGrid.insertBefore(fragment, imageGrid.firstChild);
            }

            // Function to enhance prompt to ~50 words if short
            function enhancePrompt(prompt) {
                const wordCount = prompt.split(' ').length;
                if (wordCount >= 50) return prompt;

                const details = "in high detail, vivid colors, professional lighting, photorealistic, artistic composition, dynamic perspective, intricate textures, captivating mood, sophisticated style";
                return `${prompt} ${details}`;
            }

            // Function to generate a random seed
            function generateSeed() {
                return Math.floor(Math.random() * 1000000);
            }

            // Function to get width and height based on aspect ratio
            function getRatioDimensions(ratio) {
                const aspectRatios = {
                    "9:16": [576, 1024],
                    "1:1": [1024, 1024],
                    "16:9": [1024, 576],
                    "4:3": [800, 600],
                    "3:2": [900, 600],
                };
                return aspectRatios[ratio] || [1024, 1024];
            }

            // Function to create an image card
            function createImageCard(imageUrl, prompt, width, height, seed) {
                const card = document.createElement('div');
                card.className = 'image-card';
                card.innerHTML = `
                    <img 
                        src="${imageUrl}" 
                        alt="${prompt}"
                    />
                    <div class="image-overlay">
                        <button class="download-btn" title="Download"><i class="fas fa-download"></i></button>
                        <button class="like-btn" title="Like"><i class="far fa-heart"></i></button>
                    </div>
                    <div style="padding: 10px; font-size: 12px; background-color: #1e1e1e;">
                        <p><strong>Prompt:</strong> ${prompt}</p>
                        <p><strong>Resolution:</strong> ${width}x${height}</p>
                        <p><strong>Seed:</strong> ${seed} <i style="font-size: 10px;">Each seed generates a new image variation</i></p>
                        <p><strong>Model:</strong> ${selectedModel}</p>
                    </div>
                `;
                return card;
            }

            // Event delegation for download and like buttons
            imageGrid.addEventListener('click', (e) => {
                if (e.target.closest('.download-btn')) {
                    const img = e.target.closest('.image-card').querySelector('img');
                    downloadImage(img.src, 'generated-image.jpg');
                } else if (e.target.closest('.like-btn')) {
                    const likeBtn = e.target.closest('.like-btn');
                    likeBtn.classList.toggle('liked');
                    likeBtn.querySelector('i').classList.toggle('fas');
                    likeBtn.querySelector('i').classList.toggle('far');
                }
            });

            // Function to download an image
            function downloadImage(url, filename) {
                fetch(url)
                    .then(response => response.blob())
                    .then(blob => {
                        const link = document.createElement('a');
                        link.href = URL.createObjectURL(blob);
                        link.download = filename;
                        document.body.appendChild(link);
                        link.click();
                        document.body.removeChild(link);
                        URL.revokeObjectURL(link.href);
                    })
                    .catch(console.error);
            }
        });
    </script>
</body>
</html>


make the download button working. remove the description of image after the image loaded. before image load there could be the description. but after image load no description of below image. and less gap between images. and when i click on image that should be open big and description of that image on side(nice look). don't reduce any feature. give my full complete code. the look is ok. just fix bug and make all functional