<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ImageGen - Affiliate</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/affiliate.css">
    <link rel="stylesheet" href="css/sidebar.css">
    <link rel="stylesheet" href="css/footer.css">
    <script src="/scripts/auth.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 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="affiliate-header">
            <h1 class="affiliate-title">Affiliate Program</h1>
        </div>

        <div class="affiliate-container">
            <div class="affiliate-card">
                <div class="affiliate-description">
                    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>
                
                <form class="affiliate-form" onsubmit="submitAffiliateForm(event)">
                    <div class="form-row">
                        <div class="form-group">
                            <label class="input-label">
                                First Name <span class="required-dot">•</span>
                            </label>
                            <input type="text" class="form-input" required>
                        </div>
                        <div class="form-group">
                            <label class="input-label">
                                Last Name <span class="required-dot">•</span>
                            </label>
                            <input type="text" class="form-input" required>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="input-label">
                            Email <span class="required-dot">•</span>
                        </label>
                        <input type="email" class="form-input" required>
                    </div>

                    <div class="form-container">
                        <div class="left-section">
                            <div class="form-group">
                                <label class="input-label">Social Media Presence</label>
                                <div class="social-inputs">
                                    <div class="social-input-group">
                                        <i class="fab fa-instagram social-icon"></i>
                                        <input type="text" class="form-input" placeholder="Instagram username">
                                    </div>
                                    <div class="social-input-group">
                                        <i class="fab fa-twitter social-icon"></i>
                                        <input type="text" class="form-input" placeholder="Twitter username">
                                    </div>
                                    <div class="social-input-group">
                                        <i class="fab fa-youtube social-icon"></i>
                                        <input type="text" class="form-input" placeholder="YouTube channel">
                                    </div>
                                    <div class="social-input-group">
                                        <i class="fab fa-tiktok social-icon"></i>
                                        <input type="text" class="form-input" placeholder="TikTok username">
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="right-section">
                            <div class="form-group">
                                <label class="input-label">Where payment options do you prefer? (select all that apply)</label>
                                <div class="payment-options">
                                    <div class="payment-option">
                                        <span>CashApp</span>
                                        <div class="circle"></div>
                                    </div>
                                    <div class="payment-option">
                                        <span>PayPal</span>
                                        <div class="circle"></div>
                                    </div>
                                    <div class="payment-option">
                                        <span>Bank Account</span>
                                        <div class="circle"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>                    
                    <button type="submit" class="submit-button">Submit Application</button>
                </form>
            </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>