<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ImageGen - Create</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

    <link rel="stylesheet" href="css/prompt.css">
    <link rel="stylesheet" href="css/info-modal.css">
    <link rel="stylesheet" href="css/promptheader.css">
    <link rel="stylesheet" href="css/sidebar.css">
    <link rel="stylesheet" href="css/footer.css">
    <link rel="stylesheet" href="/css/gallery-component.css">
    <script src="/js/gallery-component.js"></script>
    <script src="/scripts/auth.js"></script>





</head>
<body>
    <div class="sidebar">
        <div class="sidebar-logo">
            ImageGen
        </div>
        <ul class="sidebar-menu">
            <li class="active">
                <i class="fas fa-plus"></i> Create Image
            </li>
            <li onclick="window.location.href='/explore.html'">
                <i class="fas fa-compass"></i> Explore
            </li>
            <li onclick="window.location.href='/collections.html'">
                <i class="fas fa-folder"></i> Collections
            </li>
            <li class="menu-header">
                <span>Advanced Tools</span>
            </li>
            <li onclick="window.location.href='/canvas.html'">
                <i class="fas fa-paint-brush"></i> Canvas Generator
            </li>
            <li onclick="window.location.href='/realtime.html'">
                <i class="fas fa-clock"></i> Real Time Generation
            </li>
            <li class="menu-header">
                <span>Other Options</span>
            </li>
            <li onclick="window.location.href='/setting.html'">
                <i class="fas fa-cog"></i> Settings
            </li>
            <li onclick="window.location.href='/roadmap.html'">
                <i class="material-icons md-18">rocket_launch</i> Roadmap
            </li>
        </ul>
     
        <div class="text-under-sidebar-menu"> 
            We're a small team passionate about giving you control over your AI experience. We believe overly restrictive filters can hinder progress. Got feature ideas? Share them on our Discord. it's the best way to connect directly with our team. We're eager to hear what you want!
        </div>
        <a href="/affiliate.html" class="become-affiliate">
            <i class="fa fa-users" aria-hidden="true"></i>
            Become An Affiliate
        </a>
        <div class="user-info">
            <div class="user-avatar" id="userAvatar"></div>
            <div class="user-name" id="userName"></div>
            <button class="button button-secondary" onclick="logout()">
                <i class="fas fa-sign-out-alt"></i>
            </button>
        </div>
    </div>

    <div class="main-content">
        <div class="prompt-container">
            <div class="prompt-header">
                <div class="prompt-input-container">
                    <input type="text" id="prompt" class="prompt-input" placeholder="What will you imagine?">
                    <div class="privacy-controls">
                        <div class="privacy-toggle" onclick="toggleMainPrivacy()">
                            <i id="privacyIcon" class="fas fa-eye privacy-icon public"></i>
                            <span class="toggle-label" id="privacyLabel">Public</span>
                        </div>
                        <div class="privacy-info" onclick="event.stopPropagation()">
                            <i class="fas fa-question-circle"></i>
                            <div class="privacy-tooltip">
                                <span style="color: #7c3aed">Randomize</span> generations cannot be made public. Randomize generations cannot be owned or shared in any way. More restritions apply, check <span style="color: #7c3aed">Randomize</span> documentation for full list
                            </div>
                        </div>
                    </div>
                </div>
                <div class="prompt-buttons">
                    <button class="button button-secondary" id="settingsButton">
                        <i class="fas fa-sliders-h"></i>
                    </button>
                    <div class="settings-popup" id="settingsPopup">
                        <h3>Generation Settings</h3>
                        <div class="settings-grid">
                            <div class="settings-group aspect-ratio-group">
                                <label for="aspectRatio">Aspect Ratio</label>
                                <div class="phone-preview-container">
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
                                        <rect 
                                            id="phone-outline"
                                            class="phone-outline"
                                            x="10" 
                                            y="10" 
                                            width="120" 
                                            height="120" 
                                            rx="10"
                                        />
                                        <text id="aspect-value-text" x="23%" y="25%" text-anchor="middle" dominant-baseline="middle" fill="#fff" font-size="24">1:1</text>

                                    </svg>
                                </div>
                                <div class="aspect-ratio-pill">
                                    <div class="pill-option" onclick="setAspectRatio('vertical')">Vertical</div>
                                    <div class="pill-option" onclick="setAspectRatio('square')">Square</div>
                                    <div class="pill-option" onclick="setAspectRatio('horizontal')">Horizontal</div>
                                </div>
                                <div class="aspect-ratio-content">
                                    <div class="w-full h-4 group/bar flex items-center justify-center relative" style="max-width: 200px; margin: 0 auto;">
                                        <div class="w-full relative bg-light-50 dark:bg-dark-700 rounded-full" style="height: 6px;">
                                            <div class="h-full relative w-full">
                                                <div class="absolute hidden justify-between h-full" style="width: calc(100% + 6px); border-radius: 50px; background-color: #000000;">
                                                </div>
                                                <div class="rounded-full inset-y-0 absolute bg-light-700 dark:bg-dark-300" style="right: 50%; width: 0%;">
                                                    <div class="absolute text-xs rounded-full group/pill cursor-pointer transition-shadow ring-4 ring-transparent hover:!ring-light-300 dark:hover:!ring-dark-200 bg-light-700 dark:bg-dark-300 text-white !select-none font-mono !outline-none hover:underline decoration-2 decoration-light-500 underline-offset-2 focus-within:underline flex flex-center text-right group-hover/bar:ring-light-100 dark:group-hover/bar:ring-dark-600" style="top: 50%; transform: translate(0px, -50%); left: -5px; height: 12px; width: 12px;"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="settings-group">
                                <label for="quality">Quality</label>
                                <div class="quality-settings">
                                    <div class="quality-setting">
                                        <div class="quality-label-group">
                                            <span>Relaxed</span>
                                            <div class="w-full h-4 group/bar flex items-center justify-center relative" style="max-width: 200px; margin: 0 auto;">
                                                <div class="w-full relative bg-light-50 dark:bg-dark-700 rounded-full" style="height: 6px;">
                                                    <div class="h-full relative w-full">
                                                        <div class="rounded-full inset-y-0 absolute bg-light-700 dark:bg-dark-300" style="left: 0%; width: 0%;">
                                                            <div class="absolute text-xs rounded-full group/pill cursor-pointer transition-shadow ring-4 ring-transparent hover:!ring-light-300 dark:hover:!ring-dark-200 bg-light-700 dark:bg-dark-300 text-white !select-none font-mono !outline-none hover:underline decoration-2 decoration-light-500 underline-offset-2 focus-within:underline flex flex-center text-right group-hover/bar:ring-light-100 dark:group-hover/bar:ring-dark-600" style="top: 50%; transform: translate(0px, -50%); right: -5px; height: 12px; width: 12px;">
                                                                <span class="value-tooltip">0</span>
                                                            </div>
                                                         </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="settings-divider"></div>
                                    
                                    <div class="quality-setting">
                                        <div class="quality-label-group">
                                            <span>Weirdness</span>
                                            <div class="w-full h-4 group/bar flex items-center justify-center relative" style="max-width: 200px; margin: 0 auto;">
                                                <div class="w-full relative bg-light-50 dark:bg-dark-700 rounded-full" style="height: 6px;">
                                                    <div class="h-full relative w-full">
                                                        <div class="rounded-full inset-y-0 absolute bg-light-700 dark:bg-dark-300" style="left: 0%; width: 0%;">
                                                            <div class="absolute text-xs rounded-full group/pill cursor-pointer transition-shadow ring-4 ring-transparent hover:!ring-light-300 dark:hover:!ring-dark-200 bg-light-700 dark:bg-dark-300 text-white !select-none font-mono !outline-none hover:underline decoration-2 decoration-light-500 underline-offset-2 focus-within:underline flex flex-center text-right group-hover/bar:ring-light-100 dark:group-hover/bar:ring-dark-600" style="top: 50%; transform: translate(0px, -50%); right: -5px; height: 12px; width: 12px;">
                                                                <span class="value-tooltip">0</span>
                                                            </div>
                                                         </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="settings-divider"></div>
                                    
                                    <div class="quality-setting">
                                        <div class="quality-label-group">
                                            <span>Variety</span>
                                            <div class="w-full h-4 group/bar flex items-center justify-center relative" style="max-width: 200px; margin: 0 auto;">
                                                <div class="w-full relative bg-light-50 dark:bg-dark-700 rounded-full" style="height: 6px;">
                                                    <div class="h-full relative w-full">
                                                        <div class="rounded-full inset-y-0 absolute bg-light-700 dark:bg-dark-300" style="left: 0%; width: 0%;">
                                                            <div class="absolute text-xs rounded-full group/pill cursor-pointer transition-shadow ring-4 ring-transparent hover:!ring-light-300 dark:hover:!ring-dark-200 bg-light-700 dark:bg-dark-300 text-white !select-none font-mono !outline-none hover:underline decoration-2 decoration-light-500 underline-offset-2 focus-within:underline flex flex-center text-right group-hover/bar:ring-light-100 dark:group-hover/bar:ring-dark-600" style="top: 50%; transform: translate(0px, -50%); right: -5px; height: 12px; width: 12px;">
                                                                <span class="value-tooltip">0</span>
                                                            </div>
                                                         </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="settings-group">
                                <label for="style">Style Strength</label>
                                <select id="style">
                                    <option value="low">Low</option>
                                    <option value="medium">Medium</option>
                                    <option value="high">High</option>
                                </select>
                            </div>
                            <div class="settings-group">
                                <label for="samples">Samples</label>
                                <select id="samples">
                                    <option value="1">1</option>
                                    <option value="2">2</option>
                                    <option value="4">4</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <button class="button button-primary" onclick="generateImage()">
                        <i class="fas fa-magic"></i>
                        Generate
                    </button>
                </div>    
                <div class="media-type-toggle">
                    <div class="media-type-option selected" onclick="selectMediaType('image')">
                        <i class="fas fa-image"></i>
                        <span class="toggle-label">Image</span>
                    </div>
                    <div class="media-type-option" onclick="selectMediaType('video')">
                        <i class="fas fa-video"></i>
                        <span class="toggle-label">Video</span>
                    </div>
                </div>
            </div>

            <div id="imageModal" class="image-modal">
                <span class="modal-close">&times;</span>
                <img id="modalImage" class="modal-image">
                <div class="modal-info">
                    <div class="modal-prompt" id="modalPrompt"></div>
                    <div class="modal-actions">
                        <div class="upscale-options">
                            <span>Upscale:</span>
                            <button class="button button-modalinfo">2x</button>
                            <button class="button button-modalinfo">4x</button>
                        </div>
                        <div class="vary-options">
                            <span>Vary:</span>
                            <button class="button button-modalinfo">Strong</button>
                            <button class="button button-modalinfo">Subtle</button>
                        </div>
                        <div class="copy-options">
                            <span>Copy:</span>
                            <button class="button button-modalinfo">Prompt</button>
                            <button class="button button-modalinfo">Style</button>
                            <button class="button button-modalinfo">Image</button>
                        </div>
                        <div class="modal-createddate" id="modalImageCreatedDate"></div>
                    </div>
                </div>
            </div>

            <div class="model-select">
                <button class="select-btn">
                    <span>Model Choice</span>
                    <i class="fas fa-chevron-down"></i>
                </button>
             </div>
             
             <div class="model-modal">
                <div class="model-content">
                    <div class="model-header">
                        <h2>Models and Presets</h2>
                        <button class="close-modal">
                            <i class="fas fa-times"></i>
                        </button>
                    </div>
                    <div class="model-grid">
                        <!-- Grid items will go here -->
                    </div>
                </div>
             </div>
             
             <div id="result" class="message"></div>
             
             <div class="prompt-nav">
                <a href="#" class="nav-item active" onclick="showGallery()">Library</a>
                <a href="#" class="nav-item" onclick="showAdvanced()">Advanced</a>
             </div>
            <div id="gallery"></div>


            <div id="advancedContent" style="display: none;">
                <div class="advanced-grid">
                    <div class="advanced-card">
                        <div class="advanced-card-header">
                            <i class="fa-solid fa-palette"></i>
                            <h3>Personalize </h3>
                        </div>
                        <p class="advanced-description">Choose between different images to personalize ImageGen to you, </p>
                        <button class="button button-primary advanced-button">
                            <i class="fas fa-upload"></i>
                            Start Critic
                        </button>
                    </div>
                
                    <div class="advanced-card">
                        <div class="advanced-card-header">
                            <i class="fas fa-image"></i>
                            <h3>Image to Image</h3>
                        </div>
                        <p class="advanced-description">Upload a reference image to guide the generation</p>
                        <button class="button button-primary advanced-button">
                            <i class="fas fa-upload"></i>
                            Upload Reference
                        </button>
                    </div>
                <!--
                    <div class="advanced-card">
                        <div class="advanced-card-header">
                            <i class="fas fa-edit"></i>
                            <h3>Inpainting</h3>
                        </div>
                        <p class="advanced-description">Click and edit specific parts of generated images</p>
                        <button class="button button-primary advanced-button">
                            <i class="fas fa-paint-brush"></i>
                            Start Editing
                        </button>
                    </div>
                -->
                    <div class="advanced-card">
                        <div class="advanced-card-header">
                            <i class="fas fa-expand-arrows-alt"></i>
                            <h3>Outpainting</h3>
                        </div>
                        <p class="advanced-description">Extend your images beyond their original boundaries</p>
                        <button class="button button-primary advanced-button">
                            <i class="fas fa-expand"></i>
                            Extend Image
                        </button>
                    </div>
                
                    <div class="advanced-card">
                        <div class="advanced-card-header">
                            <i class="fas fa-user"></i>
                            <h3>Face Enhancement</h3>
                        </div>
                        <p class="advanced-description">Improve facial details in portraits</p>
                        <button class="button button-primary advanced-button">
                            <i class="fas fa-magic"></i>
                            Enhance Face
                        </button>
                    </div>
                
                    <div class="advanced-card">
                        <div class="advanced-card-header">
                            <div class="gradient-svg"></div>
                            <h3>Real Time Generation</h3>
                        </div>
                        <p class="advanced-description">Generate and edit your prompts in real time</p>
                        <button class="button button-primary advanced-button">
                            <div class="white-svg"></div>
                            <span>Real Time Generation</span>
                        </button>
                    </div>
                
                    <div class="advanced-card">
                        <div class="advanced-card-header">
                            <i class="fas fa-file-alt"></i>
                            <h3>Prompt Templates</h3>
                        </div>
                        <p class="advanced-description">Pre-made prompt structures for better results</p>
                        <button class="button button-primary advanced-button">
                            <i class="fas fa-list-alt"></i>
                            Use Templates
                        </button>
                    </div>
                
                    <div class="advanced-card">
                        <div class="advanced-card-header">
                            <i class="fas fa-balance-scale"></i>
                            <h3>Weight Adjustment</h3>
                        </div>
                        <p class="advanced-description">Make certain aspects of prompts stronger/weaker</p>
                        <button class="button button-primary advanced-button">
                            <i class="fas fa-sliders-h"></i>
                            Adjust Weights
                        </button>
                    </div>
                </div>
             </div>
        </div>
    </div>

    <footer class="site-footer">
        <div class="footer-content">
            <div class="footer-section">
                <h3>Product</h3>
                <ul>
                    <li><a href="/download">Download</a></li>
                    <li><a href="/status">Status</a></li>
                    <li><a href="/affiliate">Affiliate</a></li>
                    <li><a href="/pricing">Pricing</a></li>
                </ul>
            </div>
            <div class="footer-section">
                <h3>Resources</h3>
                <ul>
                    <li><a href="/blog">Blog</a></li>
                    <li><a href="/docs">Documentation</a></li>
                    <li><a href="/guides">Guides</a></li>
                    <li><a href="/help">Help Center</a></li>
                </ul>
            </div>
            <div class="footer-section">
                <h3>Company</h3>
                <ul>
                    <li><a href="/about">About</a></li>
                    <li><a href="/careers">Careers</a></li>
                    <li><a href="/brand">Brand</a></li>
                    <li><a href="/contact">Contact</a></li>
                </ul>
            </div>
            <div class="footer-section">
                <h3>Legal</h3>
                <ul>
                    <li><a href="/PrivacyPolicy.html">Privacy Policy</a></li>
                    <li><a href="/TermsofService.html">Terms of Service</a></li>
                    <li><a href="/cookies">Cookie Settings</a></li>
                    <li><a href="/guidelines">Guidelines</a></li>
                </ul>
            </div>
        </div>
        <div class="footer-bottom">
            <div class="social-links">
                <a href="https://tiktok.com" target="_blank"><i class="fab fa-tiktok"></i></a>
                <a href="https://twitter.com" target="_blank"><i class="fab fa-twitter"></i></a>
                <a href="https://discord.com" target="_blank"><i class="fab fa-discord"></i></a>
                <a href="https://instagram.com" target="_blank"><i class="fab fa-instagram"></i></a>
                <a href="https://github.com" target="_blank"><i class="fab fa-github"></i></a>
            </div>
            <div class="copyright">© 2024 ImageGen. All rights reserved.</div>
        </div>
    </footer>