<!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;
            --close-button-color: #ffffff;
            --close-button-hover: #cccccc;
            --selected-tag-bg: #ffffff;
            --selected-tag-text: #000000;
            --zoom-button-bg: rgba(30, 30, 30, 0.8);
            --zoom-button-color: #ffffff;
            --zoom-button-hover-bg: rgba(50, 50, 50, 0.8);
        }

        * {
            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;
        }

        .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: var(--button-color);
            color: var(--button-text);
            font-size: 14px;
            cursor: pointer;
            transition: background-color 0.3s ease, color 0.3s ease;
            user-select: none;
        }

        .style-tag.selected {
            background-color: var(--button-active);
            color: var(--bg-color);
        }

        .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: hidden;
            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: 95%;
            max-height: 95%;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            position: relative;
            width: 90%;
            height: 90%;
        }

        .close-button {
            position: absolute;
            top: 10px;
            right: 10px;
            background: transparent;
            border: none;
            font-size: 24px;
            color: var(--close-button-color);
            cursor: pointer;
            transition: color 0.3s ease;
            z-index: 10;
        }

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

        .modal-body {
            display: flex;
            flex: 1;
            overflow: hidden;
        }

        .modal-image-container {
            flex: 2;
            max-width: 70%;
            max-height: 100%;
            position: relative;
            background-color: #000;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
        }

        .modal-image {
            max-width: 100%;
            max-height: 100%;
            transition: transform 0.3s ease;
            transform-origin: center center;
        }

        .zoom-controls {
            position: absolute;
            bottom: 20px;
            right: 20px;
            display: flex;
            gap: 10px;
        }

        .zoom-button {
            background-color: var(--zoom-button-bg);
            color: var(--zoom-button-color);
            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;
        }

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

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

        /* Position the close button over the modal description */
        .modal-description .close-button {
            top: 10px;
            right: 10px;
            position: absolute;
            background: transparent;
            border: none;
            font-size: 24px;
            color: var(--close-button-color);
            cursor: pointer;
            transition: color 0.3s ease;
            z-index: 10;
        }

        .modal-description .close-button:hover {
            color: var(--close-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;
                width: 100%;
                height: 100%;
            }

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

            .close-button {
                top: 10px;
                right: 15px;
                font-size: 20px;
            }

            .style-tags {
                justify-content: center;
            }
        }
    </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" data-ratio="9:16">9:16</button>
                        <button class="option-button active" 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>
                <span class="style-tag">mystic</span>
                <span class="style-tag">35mm film</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">
        <div class="modal-content">
            <button class="close-button" id="modalClose"><i class="fas fa-times"></i></button>
            <div class="modal-body">
                <div class="modal-image-container">
                    <img src="" alt="Enlarged Image" class="modal-image" id="modalImage">
                    <div class="zoom-controls">
                        <button class="zoom-button" id="zoomIn" title="Zoom In"><i class="fas fa-search-plus"></i></button>
                        <button class="zoom-button" id="zoomOut" title="Zoom Out"><i class="fas fa-search-minus"></i></button>
                        <button class="zoom-button" id="resetZoom" title="Reset Zoom"><i class="fas fa-undo-alt"></i></button>
                    </div>
                </div>
                <div class="modal-description" id="modalDescription">
                    <!-- Description will be inserted here -->
                </div>
            </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 modalClose = document.getElementById('modalClose');
            const modalImage = document.getElementById('modalImage');
            const modalDescription = document.getElementById('modalDescription');
            const zoomInBtn = document.getElementById('zoomIn');
            const zoomOutBtn = document.getElementById('zoomOut');
            const resetZoomBtn = document.getElementById('resetZoom');

            let selectedRatio = '1:1'; // Default aspect ratio
            let magicPrompt = 'auto';
            let visibility = 'public';
            let selectedModel = 'flux';
            let selectedWidth = 1024;
            let selectedHeight = 1024;
            let imageCount = 0;
            let selectedStyles = new Set(); // To track selected style tags

            let currentScale = 1; // For zoom functionality

            // 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 (toggle selection)
            styleTags.forEach(tag => {
                tag.addEventListener('click', () => {
                    tag.classList.toggle('selected');
                    const tagText = tag.textContent.trim();
                    if (tag.classList.contains('selected')) {
                        selectedStyles.add(tagText);
                    } else {
                        selectedStyles.delete(tagText);
                    }
                });
            });

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

            // Function to construct the final prompt with selected styles
            function constructFinalPrompt(basePrompt, styles) {
                if (styles.size === 0) {
                    return basePrompt;
                }
                const stylesArray = Array.from(styles);
                return `${basePrompt} ${stylesArray.join(', ')}`;
            }

            // 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 encodedPrompt = encodeURIComponent(prompt);
                    const imageUrl = `https://pollinations.ai/p/${encodedPrompt}?width=${selectedWidth}&height=${selectedHeight}&seed=${seed}&model=${selectedModel}&nofeed=true&nologo=true`;
                    const card = createImageCard(imageUrl, prompt, selectedWidth, selectedHeight, seed);
                    fragment.insertBefore(card, fragment.firstChild);
                }

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

            // 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 image element
                const img = document.createElement('img');
                img.src = imageUrl;
                img.alt = prompt;
                img.addEventListener('load', () => {
                    img.classList.add('loaded');
                });

                // Create description overlay
                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 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>
                `;
                
                // Add click listener to overlay to open modal when clicked outside buttons
                overlay.addEventListener('click', (e) => {
                    // If the click is not on a button inside the overlay, open the modal
                    if (!e.target.closest('button')) {
                        openModal(img.src, description.innerHTML);
                    }
                });

                // Prevent click events on buttons from bubbling up to the overlay
                overlay.querySelectorAll('button').forEach(button => {
                    button.addEventListener('click', (e) => {
                        e.stopPropagation();
                        if (button.classList.contains('download-btn')) {
                            downloadImage(img.src, `generated-image-${Date.now()}.jpg`);
                        }
                        if (button.classList.contains('like-btn')) {
                            toggleLike(button);
                        }
                    });
                });

                // Append elements to card
                card.appendChild(img);
                card.appendChild(description);
                card.appendChild(overlay);

                return card;
            }

            // Function to toggle like button state
            function toggleLike(button) {
                button.classList.toggle('liked');
                const icon = button.querySelector('i');
                icon.classList.toggle('fas');
                icon.classList.toggle('far');
            }

            // 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';
                document.body.style.overflow = 'hidden'; // Prevent background scrolling
                currentScale = 1; // Reset zoom scale
                translateX = 0;
                translateY = 0;
                updateZoom();
            }

            function closeModal() {
                modal.style.display = 'none';
                modalImage.src = '';
                modalDescription.innerHTML = '';
                document.body.style.overflow = 'auto'; // Restore scrolling
            }

            // Close button functionality
            modalClose.addEventListener('click', closeModal);

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

            // Close modal with ESC key
            window.addEventListener('keydown', (e) => {
                if (e.key === 'Escape') {
                    closeModal();
                }
            });

            // Zoom Functionality
            zoomInBtn.addEventListener('click', () => {
                currentScale += 0.2;
                if (currentScale > 3) currentScale = 3; // Maximum zoom level
                updateZoom();
            });

            zoomOutBtn.addEventListener('click', () => {
                if (currentScale > 0.4) { // Prevent scaling below 0.4
                    currentScale -= 0.2;
                    if (currentScale < 0.4) currentScale = 0.4;
                    updateZoom();
                }
            });

            resetZoomBtn.addEventListener('click', () => {
                currentScale = 1;
                updateZoom();
            });

            function updateZoom() {
                modalImage.style.transform = `scale(${currentScale})`;
                // Ensure the image remains centered
                modalImage.style.transition = 'transform 0.3s ease';
            }

            // Allow zooming with mouse wheel on desktop
            modalImage.addEventListener('wheel', (e) => {
                e.preventDefault();
                if (e.deltaY < 0) {
                    // Scroll up -> zoom in
                    currentScale += 0.1;
                    if (currentScale > 3) currentScale = 3;
                } else {
                    // Scroll down -> zoom out
                    if (currentScale > 0.4) {
                        currentScale -= 0.1;
                        if (currentScale < 0.4) currentScale = 0.4;
                    }
                }
                updateZoom();
            });

            // Ensure the close button is also clickable within the modal description
            const modalDescriptionClose = document.createElement('button');
            modalDescriptionClose.className = 'close-button';
            modalDescriptionClose.innerHTML = '<i class="fas fa-times"></i>';
            modalDescription.appendChild(modalDescriptionClose);
            modalDescriptionClose.addEventListener('click', closeModal);
        });
    </script>
</body>
</html>



make the image into the modal image container same height as the modal body. and the modal image container same width as the image . give me the full code.