
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/png" href="/CBL-192.png" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover, height=device-height" />
    <meta name="HandheldFriendly" content="true" />
    <meta name="format-detection" content="telephone=no, address=no, email=no" />
    <meta name="msapplication-tap-highlight" content="no" />
    <meta property="og:title" content="CityBucketList - Private Membership Association" />
    <meta property="og:description" content="Exclusive transportation services for PMA members" />
    <meta property="og:image" content="/CBL-512.png" />
    <meta property="og:url" content="https://citybucketlist.com" />
    <meta name="theme-color" content="#000000" />
    <meta name="description" content="Your ride-sharing app for city transportation" />
    <meta name="mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
    <meta name="apple-mobile-web-app-title" content="CBL" />
    <link rel="manifest" href="/manifest.json" crossorigin="use-credentials" />
    <link rel="apple-touch-icon" href="/CBL-512.png" />
    <link rel="apple-touch-startup-image" href="/CBL-512.png" />
    <link rel="mask-icon" href="/CBL-512.png" color="#000000" />
    
    <title>Need a Ride?</title>
    <style>
        :root {
            --sat: env(safe-area-inset-top);
            --sab: env(safe-area-inset-bottom);
            --sal: env(safe-area-inset-left);
            --sar: env(safe-area-inset-right);
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        html, body {
            height: 100vh;
            height: -webkit-fill-available;
            width: 100%;
            max-width: 100%;
            overflow: hidden;
            position: fixed;
            background-color: black;
            color: white;
            -webkit-tap-highlight-color: transparent;
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -moz-user-select: none;
                 user-select: none;
            -moz-text-size-adjust: 100%;
                 text-size-adjust: 100%;
            -webkit-text-size-adjust: 100%;
            -ms-text-size-adjust: 100%;
            margin: 0;
            padding: 0;
        }
        #root {
            height: 100%;
            width: 100%;
            max-width: 100vw;
            overflow-y: auto;
            overflow-x: hidden;
            -webkit-overflow-scrolling: touch;
            position: relative;
            touch-action: manipulation;
            padding-top: var(--sat);
            padding-bottom: var(--sab);
            padding-left: var(--sal);
            padding-right: var(--sar);
            -webkit-touch-callout: none;
            -webkit-tap-highlight-color: transparent;
            display: flex;
            flex-direction: column;
        }
        @media (max-width: 320px) {
            html, body {
                font-size: 12px;
            }
        }
        @media (min-width: 321px) and (max-width: 480px) {
            html, body {
                font-size: 14px;
            }
        }
        @media (min-width: 481px) {
            html, body {
                font-size: 16px;
            }
        }
        
        .touch-target {
            min-height: 44px;
            min-width: 44px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .pt-safe {
            padding-top: max(16px, env(safe-area-inset-top));
        }
    </style>
    <script type="module" crossorigin src="/assets/index-Bwr8b0SZ.js"></script>
    <link rel="stylesheet" crossorigin href="/assets/index-EyYFQDy6.css">
  </head>
  <body>
    <div id="root"></div>
    <!-- Lovable script tag for new features -->
    <script src="https://cdn.gpteng.co/gptengineer.js" type="module"></script>
    <script>
      // Register Service Worker for PWA support
      if ('serviceWorker' in navigator) {
        window.addEventListener('load', async () => {
          try {
            // Unregister old service workers first
            const registrations = await navigator.serviceWorker.getRegistrations();
            for (let registration of registrations) {
              await registration.unregister();
            }

            // Register new service worker
            const registration = await navigator.serviceWorker.register('/service-worker.js', {
              scope: '/',
              updateViaCache: 'none'
            });
            console.log('ServiceWorker registration successful with scope:', registration.scope);

            // Check for updates
            registration.addEventListener('updatefound', () => {
              const newWorker = registration.installing;
              newWorker.addEventListener('statechange', () => {
                if (newWorker.state === 'installed' && navigator.serviceWorker.controller) {
                  console.log('New content is available; please refresh.');
                }
              });
            });
          } catch (error) {
            console.error('ServiceWorker registration failed:', error);
          }
        });
      }
    </script>
  </body>
</html>
