<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Capital Quiz - Free World Capitals Geography Game | Learn Countries & Capitals</title>
    <meta name="description" content="Free World Capitals Geography Game | Learn Countries & Capitals">
    
    <!-- Keywords (use sparingly) -->
    <meta name="keywords" content="capital quiz, world capitals quiz, geography game, learn countries capitals, educational geography, free geography quiz, world capitals game, geography learning app, country capitals test, geography for students">
    
    <!-- Favicon links -->
    <link rel="icon" href="/images/favicon.ico">
    <link rel="apple-touch-icon" href="/images/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16.png">
    
    <!-- Open Graph tags for social sharing -->
    <meta property="og:title" content="Capital Quiz - Free World Capitals Geography Game">
    <meta property="og:description" content="Free World Capitals Geography Game | Learn Countries & Capitals">
    <meta property="og:image" content="/images/social-preview.jpg">
    <meta property="og:url" content="https://capquiz.com">
    <meta property="og:type" content="website">
    <meta property="og:image:width" content="1200">
    <meta property="og:image:height" content="630">
    <meta property="og:image:type" content="image/jpeg">
    
    <!-- X Card data -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="Capital Quiz - Free World Capitals Geography Game">
    <meta name="twitter:description" content="Free World Capitals Geography Game | Learn Countries & Capitals">
    <meta name="twitter:image" content="/images/social-preview.jpg">
    
    <!-- Canonical URL -->
    <link rel="canonical" href="https://capquiz.com">

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   

    <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16.png">
    <link rel="shortcut icon" href="/images/favicon.ico">

    <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon.png">

    <link rel="icon" sizes="192x192" href="/images/android-chrome-192x192.png">
    <link rel="icon" sizes="512x512" href="/images/android-chrome-512x512.png">

    <!-- Preload critical resources -->
    <link rel="preload" href="/assets/globe-cap-logo-d1beG9rX.jpg" as="image">

    <!-- Structured data for rich results -->
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "WebApplication",
      "name": "Capital Quiz",
      "description": "An interactive educational quiz game to learn world capitals. Test your knowledge, collect virtual Cappy characters, and improve your geography skills.",
      "applicationCategory": "EducationalApplication",
      "operatingSystem": "Web",
      "offers": {
        "@type": "Offer",
        "price": "0",
        "priceCurrency": "USD"
      },
      "author": {
        "@type": "Person",
        "name": "Capital Quiz Team"
      },
      "featureList": [
        "Multiple difficulty levels",
        "Country-specific quizzes",
        "Virtual Cappy collectibles",
        "Progress tracking",
        "Interactive learning"
      ],
      "screenshot": "/images/social-preview.jpg",
      "browserRequirements": "Requires JavaScript. Works on all modern browsers.",
      "aggregateRating": {
        "@type": "AggregateRating",
        "ratingValue": "4.8",
        "ratingCount": "1000"
      },
      "educationalUse": "Geography Education",
      "learningResourceType": "Quiz",
      "inLanguage": ["en"],
      "url": "https://capquiz.com"
    }
    </script>

    
    <!-- Email verification modal styles -->
    <style id="modal-styles">
        .modal {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.4);
        }
        .modal-content {
            background-color: white;
            margin: 15% auto;
            padding: 20px;
            border-radius: 5px;
            width: 80%;
            max-width: 500px;
            text-align: center;
        }
        .close-button {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
            cursor: pointer;
        }
        .close-button:hover {
            color: black;
        }
        #verification-ok-button {
            margin-top: 15px;
            padding: 8px 16px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        #verification-ok-button:hover {
            background-color: #45a049;
        }
    </style>

    <script type="importmap">
      {
        "imports": {
          "firebase/app": "https://www.gstatic.com/firebasejs/10.7.1/firebase-app.js",
          "firebase/auth": "https://www.gstatic.com/firebasejs/10.7.1/firebase-auth.js",
          "firebase/firestore": "https://www.gstatic.com/firebasejs/10.7.1/firebase-firestore.js",
          "firebase/storage": "https://www.gstatic.com/firebasejs/10.7.1/firebase-storage.js",
          "firebase/analytics": "https://www.gstatic.com/firebasejs/10.7.1/firebase-analytics.js"
        }
      }
      </script>
  <script type="module" crossorigin src="/assets/main-CFpMfIZn.js"></script>
  <link rel="modulepreload" crossorigin href="/assets/firebase-DVqFkKXx.js">
  <link rel="modulepreload" crossorigin href="/assets/quiz-components-CTQPynhx.js">
  <link rel="modulepreload" crossorigin href="/assets/other-components-DAEvMZdv.js">
  <link rel="stylesheet" crossorigin href="/assets/quiz-components-BvVDSGUG.css">
  <link rel="stylesheet" crossorigin href="/assets/other-components-C4y-svab.css">
  <link rel="stylesheet" crossorigin href="/assets/main-CaDYvF5S.css">
</head>
<body>
  <!-- Immediate loading spinner -->
  <div id="app-loader" style="position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); display: flex; align-items: center; justify-content: center; z-index: 99999;">
    <div style="text-align: center; color: white;">
      <div style="width: 60px; height: 60px; border: 4px solid rgba(255,255,255,0.3); border-top: 4px solid white; border-radius: 50%; animation: spin 1s linear infinite; margin: 0 auto 20px;"></div>
      <h2 style="margin: 0; font-size: 1.5rem; font-weight: 600;">Loading CapQuiz...</h2>
    </div>
  </div>
  <style>
    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
    #app-loader { transition: opacity 0.3s ease-out; }
    #app-loader.fade-out { opacity: 0; pointer-events: none; }
  </style>
  
  <div id="header-container"></div>
  <div id="flag-carousel"></div>
  <div id="quiz-container"></div>
  
  <!-- Email verification modal -->
  <div id="verification-modal" class="modal">
    <div class="modal-content">
        <span class="close-button">&times;</span>
        <h2>Email Verification</h2>
        <p id="verification-message"></p>
        <button id="verification-ok-button">OK</button>
    </div>
  </div>
    



    <!-- Google Analytics - Loaded conditionally after consent -->
    <!-- Environment: production -->
    <script>
      const GA_MEASUREMENT_ID = 'G-7YHV1TJCG9';
      const BUILD_ENVIRONMENT = 'production';

      // Check if we're running on localhost
      function isLocalhost() {
        const hostname = window.location.hostname;
        return hostname === 'localhost' || 
               hostname === '127.0.0.1' || 
               hostname === '[::1]' ||
               hostname.includes('localhost') ||
               hostname.endsWith('.local');
      }
      
      // Initialize Google Analytics only after user consent
      function loadGoogleAnalytics() {
        // Don't load analytics in development builds even if hosted elsewhere
        if (BUILD_ENVIRONMENT === 'development') {
          console.log('🚫 Google Analytics disabled for development build');
          return;
        }

        // Don't load analytics on localhost
        if (isLocalhost()) {
          console.log('🚫 Google Analytics disabled for localhost');
          return;
        }

        // Don't load if GA is not configured
        if (!GA_MEASUREMENT_ID) {
          console.log('🚫 Google Analytics disabled (no GA ID configured)');
          return;
        }
        
        if (window.analyticsConsent && window.analyticsConsent.isAnalyticsEnabled()) {
          // Load Google Analytics script
          const script = document.createElement('script');
          script.async = true;
          script.src = `https://www.googletagmanager.com/gtag/js?id=${GA_MEASUREMENT_ID}`;
          document.head.appendChild(script);
          
          // Initialize gtag
          window.dataLayer = window.dataLayer || [];
          function gtag(){dataLayer.push(arguments);}
          window.gtag = gtag;
          gtag('js', new Date());
          gtag('config', GA_MEASUREMENT_ID, {
            'anonymize_ip': true,
            'allow_google_signals': false,
            'allow_ad_personalization_signals': false
          });
          
          console.log('Google Analytics loaded with consent');
        }
      }
      
      // Load analytics when consent is given
      document.addEventListener('DOMContentLoaded', () => {
        // Check if consent was already given
        if (localStorage.getItem('analytics_consent') === 'true') {
          loadGoogleAnalytics();
        }
        
        // Listen for consent changes
        document.addEventListener('analyticsConsentChanged', loadGoogleAnalytics);
      });
    </script>

    <script>
      // Social sharing functions
      function shareOnX(score) {
        const text = `I scored ${score} on the Capital Quiz! Can you beat my score? Test your knowledge of world capitals!`;
        const url = "https://capquiz.com";
        window.open(`https://x.com/intent/tweet?text=${encodeURIComponent(text)}&url=${encodeURIComponent(url)}`, '_blank');
      }

      function shareOnFacebook(score) {
        const url = "https://capquiz.com";
        window.open(`https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(url)}`, '_blank');
      }

      function shareOnWhatsApp(score) {
        const text = `I scored ${score} on the Capital Quiz! Can you beat my score? Test your knowledge of world capitals!`;
        const url = "https://capquiz.com";
        window.open(`https://api.whatsapp.com/send?text=${encodeURIComponent(text + ' ' + url)}`, '_blank');
      }

      // Collection sharing functions
      function shareCollection(collected, total) {
        const text = `I've collected ${collected} out of ${total} Cappies in Capital Quiz! How many can you collect?`;
        const url = "https://capquiz.com";
        window.open(`https://twitter.com/intent/tweet?text=${encodeURIComponent(text)}&url=${encodeURIComponent(url)}`, '_blank');
      }

      function shareCollectionFB(collected, total) {
        const url = "https://capquiz.com";
        window.open(`https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(url)}`, '_blank');
      }

      function shareCollectionWhatsApp(collected, total) {
        const text = `I've collected ${collected} out of ${total} Cappies in Capital Quiz! How many can you collect?`;
        const url = "https://capquiz.com";
        window.open(`https://api.whatsapp.com/send?text=${encodeURIComponent(text + ' ' + url)}`, '_blank');
      }
    </script>
    <script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.6.0/dist/confetti.browser.min.js" defer></script>
</body>
</html> 