<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Activate - The Macro Hub</title>
    <meta name="description" content="Activate your license for The Macro Hub">
    <link rel="stylesheet" href="/static/css/style.css">
    <link rel="stylesheet" href="/static/css/activate.css">
    <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3ClinearGradient id='grad' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' style='stop-color:%238a2be2;stop-opacity:1' /%3E%3Cstop offset='100%25' style='stop-color:%23da70d6;stop-opacity:1' /%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='50' cy='50' r='45' fill='url(%23grad)' /%3E%3Cpath d='M 30 50 L 40 50 L 40 35 L 60 50 L 40 65 L 40 50 L 30 50 M 70 35 L 70 65' stroke='white' stroke-width='3' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E">
</head>
<body>
    <div class="background-gradient"></div>
    
    <div class="activate-container">
        <!-- Header -->
        <header class="activate-header">
            <h1 class="logo">
                <svg class="logo-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
                    <path d="M4 7 L9 7 L9 2 L15 12 L9 12 L9 17 L4 7" stroke-linecap="round" stroke-linejoin="round"/>
                    <circle cx="18" cy="6" r="2.5" fill="currentColor"/>
                    <circle cx="20" cy="18" r="2.5" fill="currentColor"/>
                </svg>
                <div class="brand-text">
                    <span class="brand-name">The Macro Hub</span>
                    <span class="brand-tagline">by Make A Macro</span>
                </div>
            </h1>
        </header>

        <!-- Main Activation Card -->
        <div class="activation-card glass-card">
            <div class="activation-icon">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <rect x="3" y="11" width="18" height="11" rx="2" ry="2"/>
                    <path d="M7 11V7a5 5 0 0110 0v4"/>
                </svg>
            </div>
            
            <h2 class="activation-title">Activate Your License</h2>
            <p class="activation-description">
                Enter your license key to unlock all features of The Macro Hub
            </p>
            
            <div class="activation-form" id="activationForm">
                <div class="license-input-container">
                    <input 
                        type="text" 
                        id="licenseKey" 
                        class="license-input" 
                        placeholder="MACRO-XXXX-XXXX-XXXX-XXXX"
                        maxlength="29"
                        autocomplete="off"
                        spellcheck="false"
                    >
                    <div class="input-hint">Enter your 20-character license key</div>
                </div>
                
                <button class="btn-activate" id="activateBtn">
                    <svg class="btn-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M5 13l4 4L19 7"/>
                    </svg>
                    <span class="btn-text">Activate License</span>
                    <span class="btn-loader"></span>
                </button>
                
                <div class="activation-message" id="activationMessage"></div>
            </div>
            
            <div class="activation-divider">
                <span>or</span>
            </div>
            
            <button class="btn-skip" id="skipBtn">
                Proceed Without License
                <span class="skip-hint">(Macro playback will be disabled)</span>
            </button>
        </div>
        
        <!-- Info Cards -->
        <div class="info-cards">
            <div class="info-card glass-card">
                <div class="info-icon">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <circle cx="12" cy="12" r="10"/>
                        <path d="M12 16v-4M12 8h.01"/>
                    </svg>
                </div>
                <h3>Need a License?</h3>
                <p>Get your FREE BETA license key from makeamacro.com</p>
                <a href="https://makeamacro.com" target="_blank" class="info-link">
                    Get Free Key →
                </a>
            </div>
            
            <div class="info-card glass-card">
                <div class="info-icon">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M17 8l-5-5-5 5M12 3v12"/>
                    </svg>
                </div>
                <h3>What You Get</h3>
                <p>AI-powered humanization, unlimited macros, and advanced anti-detection features</p>
            </div>
            
            <div class="info-card glass-card">
                <div class="info-icon">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
                    </svg>
                </div>
                <h3>Secure & Private</h3>
                <p>Your license is stored securely on your computer with encryption</p>
            </div>
        </div>
        
        <!-- Footer -->
        <footer class="activate-footer">
            <p>© 2025 Make A Macro. All rights reserved.</p>
            <p class="footer-links">
                <a href="https://makeamacro.com/support" target="_blank">Support</a>
                <span>•</span>
                <a href="https://makeamacro.com/terms" target="_blank">Terms</a>
                <span>•</span>
                <a href="https://makeamacro.com/privacy" target="_blank">Privacy</a>
            </p>
        </footer>
    </div>
    
    <!-- Toast Notifications -->
    <div class="toast-container" id="toastContainer"></div>
    
    <script src="/static/js/activate.js"></script>
</body>
</html>

