<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes" />
    <link rel="icon" href="/favicon.svg" type="image/svg+xml">
    
    <!-- PWA Manifest -->
    <link rel="manifest" href="/manifest.json" />
    
    <!-- Theme Colors -->
    <meta name="theme-color" content="#9333EA" />
    <meta name="msapplication-TileColor" content="#9333EA" />
    
    <!-- Apple PWA Support -->
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="default" />
    <meta name="apple-mobile-web-app-title" content="Flow XE" />
    <link rel="apple-touch-icon" href="/icons/icon.svg" />
    
    <!-- SEO & Social -->
    <meta name="description" content="Track your cycle, symptoms, and health patterns with AI-powered insights. Flow XE is your intelligent companion for period tracking and endometriosis support." />
    <meta property="og:title" content="Flow XE - Period & Symptom Tracker" />
    <meta property="og:description" content="AI-powered period tracking, symptom logging, and cycle insights. Join India's first endometriosis support community." />
    <meta property="og:type" content="website" />
    <meta property="og:image" content="/icons/icon-512x512.png" />
    
    <!-- Mobile Optimization -->
    <meta name="mobile-web-app-capable" content="yes" />
    <meta name="format-detection" content="telephone=no" />
    
    <title>Endo XE - Connecting the Endometriosis Community</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
      }
      #root {
        min-height: 100vh;
        display: flex;
        flex-direction: column;
      }
      .initial-loading {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        background-color: #f8fafc;
      }
      .spinner {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        border: 3px solid rgba(124, 58, 237, 0.1);
        border-top-color: rgba(124, 58, 237, 0.8);
        animation: spin 1s linear infinite;
      }
      @keyframes spin {
        to { transform: rotate(360deg); }
      }
    </style>
    <script type="module" crossorigin src="/assets/index-BYcBOUd9.js"></script>
    <link rel="stylesheet" crossorigin href="/assets/index-hgH-8iBY.css">
  </head>
  <body>
    <div id="root">
      <div class="initial-loading">
        <div class="spinner"></div>
      </div>
    </div>
    <!-- This is a replit script which adds a banner on the top of the page when opened in development mode outside the replit environment -->
    <script type="text/javascript" src="https://replit.com/public/js/replit-dev-banner.js"></script>
  </body>
</html>