<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ImageGen - Explore</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/explore.css">
    <link rel="stylesheet" href="css/sidebar.css">
    <link rel="stylesheet" href="css/footer.css">
    <link rel="stylesheet" href="css/info-modal-explore.css">
    
    <!-- Firebase SDK -->
    <script src="https://www.gstatic.com/firebasejs/10.7.1/firebase-app-compat.js"></script>
    <script src="https://www.gstatic.com/firebasejs/10.7.1/firebase-auth-compat.js"></script>
    
    <!-- Initialize Firebase -->
    <script>
        firebase.initializeApp({
            apiKey: "AIzaSyBmsySoBI0_8fbkCxz3KqkUCJYNJg9Tzc0",
            authDomain: "image-gen-763ed.firebaseapp.com",
            projectId: "image-gen-763ed",
            storageBucket: "image-gen-763ed.firebasestorage.app",
            messagingSenderId: "348538523891",
            appId: "1:348538523891:web:296a5fa5c00b5806ace786",
            measurementId: "G-4P225P3LTD"
        });
    </script>
    
    <!-- Auth Common -->
    <script src="/js/auth-common.js"></script>
    
</head>
<body>
    <div class="sidebar">
        <div class="sidebar-logo">
            ImageGen
        </div>
        <ul class="sidebar-menu">
            <li onclick="window.location.href='/prompt.html'">
                <i class="fas fa-plus"></i> Create Image
            </li>
            <li class="active">
                <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="search-container">
            <div class="filter-container">
                <div class="custom-select">
                    <div class="select-trigger">Hot<i class="fas fa-chevron-down"></i></div>
                    <div class="select-options">
                        <div class="option">Hot</div>
                        <div class="option">Trending</div> 
                        <div class="option">Top</div>
                    </div>
                </div>
                <div class="custom-select">
                    <div class="select-trigger">Today<i class="fas fa-chevron-down"></i></div>
                    <div class="select-options">
                        <div class="option">Today</div>
                        <div class="option">Weekly</div>
                        <div class="option">Month</div>
                    </div>
                </div>
            </div>
            <div class="search-wrapper">
                <i class="fas fa-search"></i>
                <input type="text" id="searchInput" placeholder="Search">
            </div>
        </div>
        <div class="gallery" id="gallery">
            <!-- Images will be loaded here -->
        </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="sidebar-icons">
                <div class="icon-group">
                    <button class="icon-button">
                        <i class="fa-solid fa-bars"></i>
                    </button>
                    <button class="icon-button">
                        <i class="fa-regular fa-heart"></i>
                    </button>
                </div>
             </div>
            <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>

    <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://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>

    <!-- Page Specific Script -->
    <script src="/js/explore.js"></script>
</body>
</html>
