<html lang="en" data-theme="light">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>WaffleAuth - .NET Key Authorization System</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <nav>
    <div class="nav-content">
      <div class="logo">WaffleAuth</div>
      <div class="nav-links">
        <a href="#pricing">Pricing</a>
        <a href="https://auth.waffledev.com/docs.html">Documentation</a>
        <a href="https://discord.gg/SYZjUVM627" class="cta-button">Join Discord</a>
        <button class="theme-toggle" aria-label="Toggle dark mode">
          <svg class="sun-icon" viewBox="0 0 24 24">
            <path d="M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zM2 13h2c.55 0 1-.45 1-1s-.45-1-1-1H2c-.55 0-1 .45-1 1s.45 1 1 1zm18 0h2c.55 0 1-.45 1-1s-.45-1-1-1h-2c-.55 0-1 .45-1 1s.45 1 1 1zM11 2v2c0 .55.45 1 1 1s1-.45 1-1V2c0-.55-.45-1-1-1s-1 .45-1 1zm0 18v2c0 .55.45 1 1 1s1-.45 1-1v-2c0-.55-.45-1-1-1s-1 .45-1 1zM5.99 4.58c-.39-.39-1.03-.39-1.41 0-.39.39-.39 1.03 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0s.39-1.03 0-1.41L5.99 4.58zm12.37 12.37c-.39-.39-1.03-.39-1.41 0-.39.39-.39 1.03 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0 .39-.39.39-1.03 0-1.41l-1.06-1.06zm1.06-10.96c.39-.39.39-1.03 0-1.41-.39-.39-1.03-.39-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0l1.06-1.06zM7.05 18.36c.39-.39.39-1.03 0-1.41-.39-.39-1.03-.39-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0l1.06-1.06z"/>
          </svg>
          <svg class="moon-icon" viewBox="0 0 24 24" style="display: none;">
            <path d="M12 3c-4.97 0-9 4.03-9 9s4.03 9 9 9 9-4.03 9-9c0-.46-.04-.92-.1-1.36-.98 1.37-2.58 2.26-4.4 2.26-3.03 0-5.5-2.47-5.5-5.5 0-1.82.89-3.42 2.26-4.4-.44-.06-.9-.1-1.36-.1z"/>
          </svg>
        </button>
      </div>
    </div>
  </nav>

  <header>
    <div class="header-content">
      <h1>Secure Key Authorization for .NET Applications</h1>
      <p>Protect your WinForms and XAML applications with enterprise-grade licensing and authentication</p>
      <div class="header-buttons">
        <a href="#pricing" class="primary-button">Get Started</a>
        <a href="https://auth.waffledev.com/docs.html" class="secondary-button">View Docs</a>
      </div>
    </div>
  </header>

  <section id="updates">
    <div class="section-content">
      <h2>Updates & Announcements</h2>
      <div class="updates-grid">
        <div class="update-card">
          <span class="update-badge">Important Notice</span>
          <h3>Database Setup Required</h3>
          <p>WaffleAuth doesn't store your keys directly - you'll need a Firebase database (don't worry, it's free!). Join our Discord server for an easy setup tutorial.</p>
        </div>
        
        <div class="update-card">
          <span class="update-badge">Coming Soon</span>
          <h3>WaffleAuth 2.1</h3>
          <div class="update-features">
            <div class="update-feature">
              <h4>Mixed Mode</h4>
              <p>Combine both account and key authentication</p>
            </div>
            <div class="update-feature">
              <h4>Checkpoints</h4>
              <p>Create custom tasks users must complete to validate keys</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section id="features">
    <div class="section-content">
      <h2>Join Our Growing Community</h2>
      <div class="features-grid">
        <div class="feature-card">
          <svg class="feature-icon" width="24" height="24" viewBox="0 0 24 24">
            <path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm0 10.99h7c-.53 4.12-3.28 7.79-7 8.94V12H5V6.3l7-3.11v8.8z"/>
          </svg>
          <h3>Keep Your Software Safe</h3>
          <p>Simple and reliable key system to protect your .NET applications with enterprise-grade security.</p>
        </div>
        
        <div class="feature-card">
          <svg class="feature-icon" width="24" height="24" viewBox="0 0 24 24">
            <path d="M13 13v8h8v-8h-8zM3 21h8v-8H3v8zM3 3v8h8V3H3zm13.66-1.31L11 7.34 16.66 13l5.66-5.66-5.66-5.65z"/>
          </svg>
          <h3>Quick Setup</h3>
          <p>Get started in minutes with our simple integration for XAML and WinForms applications.</p>
        </div>
        
        <div class="feature-card">
          <svg class="feature-icon" width="24" height="24" viewBox="0 0 24 24">
            <path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z"/>
          </svg>
          <h3>Stay Protected</h3>
          <p>Built to keep your software secure from unauthorized access with advanced HWID detection.</p>
        </div>
      </div>
    </div>
  </section>

  <section id="pricing">
    <div class="section-content">
      <h2>Simple, Transparent Pricing</h2>
      <div class="pricing-cards">
        <div class="pricing-card">
          <h3>Monthly</h3>
          <div class="price">
            <span class="amount">$2</span>
            <span class="period">/month</span>
          </div>
          <ul class="pricing-features">
            <li>Key System</li>
            <li>Standard Integration</li>
            <li>HWID Detection</li>
            <li>Discord RPC</li>
            <li>24/7 Priority Support</li>
            <li>Rebranding Options</li>
            <li>Different License Types</li>
            <li>Real-time Key Management</li>
          </ul>
          <a href="https://buymeacoffee.com/waffledev/membership" class="primary-button">Subscribe Now</a>
        </div>

        <div class="pricing-card featured">
          <div class="featured-label">Best Value</div>
          <h3>Lifetime</h3>
          <div class="price">
            <span class="amount">$15</span>
            <span class="period">one-time</span>
          </div>
          <ul class="pricing-features">
            <li>Key System</li>
            <li>Standard Integration</li>
            <li>HWID Detection</li>
            <li>Discord RPC</li>
            <li>24/7 Priority Support</li>
            <li>Rebranding Options</li>
            <li>Different License Types</li>
            <li>Real-time Key Management</li>
          </ul>
          <a href="https://buymeacoffee.com/waffledev/e/354082" class="primary-button">Buy Now</a>
        </div>
      </div>
    </div>
  </section>
  
  <footer>
    <div class="footer-content">
      <div class="footer-section">
        <h4>WaffleAuth</h4>
        <p>Secure key authorization for .NET applications</p>
      </div>
      <div class="footer-section">
        <h4>Links</h4>
        <a href="https://auth.waffledev.com/docs.html">Documentation</a>
        <a href="https://discord.gg/SYZjUVM627">Discord</a>
      </div>
      <div class="footer-section">
        <h4>Contact</h4>
        <a href="https://discord.gg/SYZjUVM627">Join our Discord</a>
      </div>
    </div>
    <div class="footer-bottom">
      <p>&copy; 2024 WaffleAuth. All rights reserved. | Made by WaffleDev</p>
    </div>
  </footer>
  <script>
    const themeToggle = document.querySelector('.theme-toggle');
    const sunIcon = document.querySelector('.sun-icon');
    const moonIcon = document.querySelector('.moon-icon');
    const html = document.documentElement;

    // Check for saved theme preference
    const savedTheme = localStorage.getItem('theme') || 'light';
    html.setAttribute('data-theme', savedTheme);
    updateIcons(savedTheme);

    themeToggle.addEventListener('click', () => {
      const currentTheme = html.getAttribute('data-theme');
      const newTheme = currentTheme === 'light' ? 'dark' : 'light';
      
      html.setAttribute('data-theme', newTheme);
      localStorage.setItem('theme', newTheme);
      updateIcons(newTheme);
    });

    function updateIcons(theme) {
      if (theme === 'dark') {
        sunIcon.style.display = 'none';
        moonIcon.style.display = 'block';
      } else {
        sunIcon.style.display = 'block';
        moonIcon.style.display = 'none';
      }
    }
  </script>
</body>
</html>