<!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;
            --modal-bg: rgba(0, 0, 0, 0.8);
            --modal-content-bg: #1e1e1e;
            --back-button-color: #ffffff;
            --back-button-hover: #cccccc;
        }

        * {
            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: 10px; /* Reduced gap from 20px to 10px */
            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.02);
        }

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

        .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;
            display: flex;
            justify-content: center;
            align-items: center;
        }

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

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

        /* Description Overlay */
        .image-description {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: rgba(30, 30, 30, 0.9);
            color: #ffffff;
            padding: 10px;
            font-size: 12px;
            display: block;
            transition: opacity 0.3s ease;
        }

        .image-card img.loaded + .image-description {
            display: none;
        }

        /* Modal Styles */
        .modal {
            display: none; /* Hidden by default */
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: var(--modal-bg);
            justify-content: center;
            align-items: center;
            padding: 20px;
        }

        .modal-content {
            background-color: var(--modal-content-bg);
            border-radius: 10px;
            max-width: 90%;
            max-height: 90%;
            display: flex;
            flex-direction: row;
            overflow: hidden;
            position: relative;
        }

        .modal-image {
            flex: 2;
            max-width: 60%;
            max-height: 90vh;
            object-fit: contain;
            background-color: #000;
        }

        .modal-description {
            flex: 1;
            padding: 20px;
            overflow-y: auto;
            color: #fff;
            font-size: 14px;
        }

        .back-button {
            position: absolute;
            top: 20px;
            left: 30px;
            background-color: var(--button-color);
            color: var(--back-button-color);
            border: none;
            border-radius: 5px;
            padding: 10px 15px;
            cursor: pointer;
            font-size: 16px;
            display: flex;
            align-items: center;
            transition: background-color 0.3s ease;
        }

        .back-button i {
            margin-right: 5px;
        }

        .back-button:hover {
            background-color: var(--back-button-hover);
        }

        @media (max-width: 768px) {
            .options {
                flex-direction: column;
                gap: 15px;
            }
            
            .generate-button {
                position: static;
                width: 100%;
                margin-top: 15px;
            }

            .modal-content {
                flex-direction: column;
            }

            .modal-image {
                max-width: 100%;
                max-height: 60vh;
            }

            .back-button {
                top: 10px;
                left: 10px;
                padding: 8px 12px;
                font-size: 14px;
            }
        }
    </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>

    <!-- Modal Structure -->
    <div class="modal" id="imageModal">
        <button class="back-button" id="modalBack"><i class="fas fa-arrow-left"></i> Back</button>
        <div class="modal-content">
            <img src="" alt="Enlarged Image" class="modal-image" id="modalImage">
            <div class="modal-description" id="modalDescription">
                <!-- Description will be inserted here -->
            </div>
        </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');
            const modal = document.getElementById('imageModal');
            const modalBack = document.getElementById('modalBack');
            const modalImage = document.getElementById('modalImage');
            const modalDescription = document.getElementById('modalDescription');

            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 = parseInt(button.dataset.width);
                        selectedHeight = parseInt(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 <= 4; i++) { // Generate 4 images per click
                    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';

                // Create loading description
                const description = document.createElement('div');
                description.className = 'image-description';
                description.innerHTML = `
                    <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>
                `;

                // Create image element
                const img = document.createElement('img');
                img.src = imageUrl;
                img.alt = prompt;
                img.addEventListener('load', () => {
                    img.classList.add('loaded');
                });

                // Append description and image
                card.appendChild(img);
                card.appendChild(description);

                // Create overlay with buttons
                const overlay = document.createElement('div');
                overlay.className = 'image-overlay';
                overlay.innerHTML = `
                    <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>
                `;
                card.appendChild(overlay);

                return card;
            }

            // Event delegation for download and like buttons, and image click
            imageGrid.addEventListener('click', (e) => {
                const card = e.target.closest('.image-card');
                if (!card) return;

                // Download button
                if (e.target.closest('.download-btn')) {
                    const img = card.querySelector('img');
                    downloadImage(img.src, `generated-image-${imageCount}.jpg`);
                }

                // Like button
                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');
                }

                // Image click for modal
                if (e.target.closest('img')) {
                    const img = card.querySelector('img');
                    const description = card.querySelector('.image-description').innerHTML;
                    openModal(img.src, description);
                }
            });

            // Function to download an image
            function downloadImage(url, filename) {
                fetch(url, { mode: 'cors' })
                    .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);
            }

            // Modal Functions
            function openModal(imageSrc, descriptionHTML) {
                modalImage.src = imageSrc;
                modalDescription.innerHTML = descriptionHTML;
                modal.style.display = 'flex';
            }

            function closeModal() {
                modal.style.display = 'none';
                modalImage.src = '';
                modalDescription.innerHTML = '';
            }

            // Back button functionality
            modalBack.addEventListener('click', closeModal);

            // Close modal when clicking outside the modal content
            window.addEventListener('click', (e) => {
                if (e.target === modal) {
                    closeModal();
                }
            });

            // Optional: Close modal with ESC key
            window.addEventListener('keydown', (e) => {
                if (e.key === 'Escape') {
                    closeModal();
                }
            });
        });
    </script>
</body>
</html>


add a featre here that. when i click on a image the image will load as big and one side the description of the iamge and some necessary. also a cross button for go back. same nice design. give me full complete code.