<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
  <script>
    // Failsafe error catcher right in the HTML
    window.addEventListener('error', function(e) {
      if (!window.hasShownError) {
        document.body.innerHTML = '<div style="background:#000;color:red;padding:20px;font-family:monospace;font-size:14px;word-break:break-all;"><b>FATAL DOMAIN ERROR:</b><br/>' + (e.message || String(e)) + '<br/>File: ' + e.filename + '<br/>Line: ' + e.lineno + '</div>';
        window.hasShownError = true;
      }
    });
  </script>
  <meta name="theme-color" content="#0B0F19" />
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
    integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="="" />
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link
    href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Outfit:wght@100..900&display=swap"
    rel="stylesheet">
  <title>Face2Face ΓÇö Meet Real People Nearby</title>
  <link rel="canonical" href="https://face2face-production-11ee.up.railway.app/" />
  <meta name="description"
    content="Face2Face connects you with real people nearby. No bots, no fake profiles ΓÇö just genuine face-to-face connections." />
  <meta property="og:title" content="Face2Face ΓÇö Meet Real People Nearby" />
  <meta property="og:description"
    content="Location-based connections with real, verified people. No bots, no inactive profiles." />
  <meta property="og:type" content="website" />
  <meta name="twitter:card" content="summary" />
  <meta name="twitter:title" content="Face2Face" />
  <meta name="twitter:description" content="Meet real people nearby. No bots, no fake profiles." />
  <link rel="icon" type="image/svg+xml"
    href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ctext y='28' font-size='28'%3E≡ƒæÑ%3C/text%3E%3C/svg%3E" />
  <style>
    /* Critical styles in head to avoid FOUC */
    html,
    body {
      height: 100dvh;
      margin: 0;
      padding: 0;
      width: 100%;
    }

    .auth-page {
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      position: relative;
      height: 100dvh;
      min-height: 100dvh;
    }

    .map-view {
      overflow: hidden;
      position: fixed;
      width: 100%;
      height: 100dvh;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
    }

    #root {
      width: 100%;
      height: 100dvh;
    }

    /* Root inherits fixed positioning for map view */
    .map-view #root {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      overflow: hidden;
    }

    /* Root allows scrolling for auth pages */
    .auth-page #root {
      position: relative;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }

    /* Basic scroll bar visibility */
    ::-webkit-scrollbar {
      width: 4px;
      height: 4px;
    }

    ::-webkit-scrollbar-track {
      background: transparent;
    }

    ::-webkit-scrollbar-thumb {
      background: rgba(148, 163, 184, 0.2);
      border-radius: 10px;
    }

    /* For Firefox */
    * {
      scrollbar-width: thin;
      scrollbar-color: rgba(148, 163, 184, 0.2) transparent;
    }

    /* Prevent content from being hidden under keyboard on mobile */
    @media (max-width: 640px) {
      html {
        height: 100dvh;
      }

      body {
        width: 100%;
        height: 100dvh;
        min-height: 100dvh;
        overflow: hidden;
      }

      body.ios-device #root,
      body.android-device #root {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        overflow: hidden;
      }
    }
  </style>
  <script type="module" src="/assets/index-C6H_26O3.js"></script>
  <link rel="stylesheet" href="/assets/index-B2RJgJwJ.css">
</head>

<body>
  <div id="root">
    <div style="color: white; padding: 20px; text-align: center; font-family: sans-serif; height: 100vh; display: flex; align-items: center; justify-content: center; background: #000;">
      <h2 style="color:#fff; font-size: 24px;">App is loading...</h2>
      <p style="color:#888;">If you see this for more than a few seconds, JavaScript failed to execute.</p>
    </div>
  </div>
  <script>
    // Mobile device optimizations
    document.addEventListener('DOMContentLoaded', function () {
      // Detect mobile devices
      const isMobile = /Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);

      // Add specific classes for different platforms
      if (isMobile) {
        document.body.classList.add('mobile-device');

        // Special handling for Android
        if (/Android/.test(navigator.userAgent)) {
          document.body.classList.add('android-device');

          // Add the scroll-container class to scrollable elements on auth page
          document.querySelectorAll('.auth-page').forEach(function (el) {
            el.classList.add('scroll-container');
          });

          // Force repaints on scroll to fix rendering issues on Android
          document.addEventListener('scroll', function (e) {
            // Check if the element or any of its parents has the scroll-container class
            let target = e.target;
            let isScrollContainer = false;

            while (target && target.classList) {
              if (target.classList.contains('scroll-container') ||
                target.classList.contains('auth-page')) {
                isScrollContainer = true;
                break;
              }
              target = target.parentElement;
            }

            if (isScrollContainer) {
              target.style.transform = 'translateZ(0)';
              setTimeout(function () {
                target.style.transform = '';
              }, 0);
            }
          }, true);
        }

        // Special handling for iOS
        if (/iPhone|iPad|iPod/.test(navigator.userAgent)) {
          document.body.classList.add('ios-device');

          // Add momentum scrolling to scrollable elements
          document.querySelectorAll('.auth-page, .scroll-container').forEach(function (el) {
            el.style.WebkitOverflowScrolling = 'touch';
          });
        }
      }
    });
  </script>
</body>

</html>