index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#16181d" />
    <script>
      (function () {
        try {
          var stored = localStorage.getItem("dms-theme")
          var theme = stored === "night" || stored === "contrast" ? stored : "day"
          var root = document.documentElement
          var page = { day: "#eef1f5", night: "#101218", contrast: "#ffffff" }
          var chrome = { day: "#16181d", night: "#101218", contrast: "#000000" }
          root.setAttribute("data-theme", theme)
          root.style.colorScheme = theme === "night" ? "dark" : "light"
          root.style.backgroundColor = page[theme]
          var meta = document.querySelector('meta[name="theme-color"]')
          if (meta) meta.setAttribute("content", chrome[theme])
        } catch (e) {}
      })()
    </script>
    <title>DETRO — Delhi Metro Simple</title>
    <meta
      name="description"
      content="DETRO plans a Delhi Metro trip. Pick two stations and see the train, where to change, and the fare. Free, ad-free, and independent of DMRC."
    />
    <meta name="robots" content="index, follow" />
    <meta name="application-name" content="DETRO" />
    <meta name="apple-mobile-web-app-title" content="DETRO" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <link rel="apple-touch-icon" href="/icons/apple-touch-icon.png" />
    <link rel="canonical" href="https://detro.pages.dev/" />
    <meta property="og:title" content="DETRO — Delhi Metro Simple" />
    <meta
      property="og:description"
      content="DETRO plans a Delhi Metro trip. Pick two stations and see the train, where to change, and the fare. Free, ad-free, and independent of DMRC."
    />
    <meta property="og:type" content="website" />
    <meta property="og:locale" content="en_IN" />
    <meta property="og:site_name" content="DETRO" />
    <meta property="og:url" content="https://detro.pages.dev/" />
    <meta property="og:image" content="https://detro.pages.dev/share/cover.jpg" />
    <meta property="og:image:secure_url" content="https://detro.pages.dev/share/cover.jpg" />
    <meta property="og:image:type" content="image/jpeg" />
    <meta property="og:image:width" content="550" />
    <meta property="og:image:height" content="377" />
    <meta property="og:image:alt" content="The Great Wave off Kanagawa, a woodblock print by Katsushika Hokusai" />
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:title" content="DETRO — Delhi Metro Simple" />
    <meta
      name="twitter:description"
      content="DETRO plans a Delhi Metro trip. Pick two stations and see the train, where to change, and the fare. Free, ad-free, and independent of DMRC."
    />
    <meta name="twitter:image" content="https://detro.pages.dev/share/cover.jpg" />
    <meta name="twitter:image:alt" content="The Great Wave off Kanagawa, a woodblock print by Katsushika Hokusai" />
    <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
    <link rel="manifest" href="/manifest.webmanifest" />
    <script type="application/ld+json">
      {
        "@context": "https://schema.org",
        "@type": "WebApplication",
        "name": "DETRO",
        "alternateName": "Delhi Metro Simple",
        "applicationCategory": "TravelApplication",
        "operatingSystem": "Web",
        "inLanguage": "en",
        "isAccessibleForFree": true,
        "url": "https://detro.pages.dev/",
        "image": "https://detro.pages.dev/share/cover.jpg",
        "description": "DETRO plans a Delhi Metro trip. Pick two stations and see the train, where to change, and the fare. Free, ad-free, and independent of DMRC.",
        "offers": {
          "@type": "Offer",
          "price": "0",
          "priceCurrency": "INR"
        }
      }
    </script>
    <style>
      html, body {
        margin: 0;
        min-height: 100%;
        min-height: 100dvh;
        background: #eef1f5;
        color-scheme: light;
      }
      html[data-theme="night"],
      html[data-theme="night"] body {
        background: #101218;
        color-scheme: dark;
      }
      html[data-theme="contrast"],
      html[data-theme="contrast"] body {
        background: #fff;
        color-scheme: light;
      }
      .boot {
        min-height: 100vh;
        min-height: 100dvh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 1.25rem;
        margin: 0;
        padding: 2rem;
        background: inherit;
        color: #16181d;
        font-family: "IBM Plex Sans", sans-serif;
        text-align: center;
      }
      .boot img {
        width: 96px;
        height: 96px;
        padding: 12px;
        background: #f3f5f8;
        border-radius: 20px;
        animation: boot-pulse 1.6s ease-in-out infinite;
      }
      .boot p {
        margin: 0;
        max-width: 18rem;
        font-size: 1.15rem;
        font-weight: 600;
        line-height: 1.35;
      }
      @keyframes boot-pulse {
        50% { transform: translateY(-4px); }
      }
      @media (prefers-reduced-motion: reduce) {
        .boot img { animation: none; }
      }
      html[data-theme="night"] .boot {
        color: #e8eaef;
      }
      html[data-theme="night"] .boot img {
        background: #14161c;
      }
      html[data-theme="contrast"] .boot {
        color: #000;
      }
      html[data-theme="contrast"] .boot img {
        background: #f0f0f0;
      }
    </style>
  </head>
  <body>
    <div id="root">
      <div class="boot">
        <img src="/attractions/metro-people.svg" alt="" width="96" height="96" />
        <p id="boot-line">Laying Delhi’s routes onto this phone</p>
      </div>
      <noscript>
        <main>
          <h1>DETRO — Delhi Metro Simple</h1>
          <p>DETRO plans a Delhi Metro trip. Choose a start station and a destination to see the train, where to change, and the fare. Free, ad-free, and not an official DMRC app.</p>
          <nav>
            <a href="/">Plan a route</a>
            <a href="/status">Status</a>
            <a href="/saved">Saved trips</a>
            <a href="/city">Delhi Metro city map</a>
            <a href="/play">Play</a>
            <a href="/lines">Lines</a>
            <a href="/help">Help</a>
          </nav>
        </main>
      </noscript>
    </div>
    <script>
      const bootLines = [
        "Laying Delhi’s routes onto this phone",
        "Packing fares and platforms for the ride home",
        "Saving the first train and the last",
        "Unfolding the city for a cut signal",
      ]
      let bootIndex = 0
      const bootTimer = setInterval(() => {
        const line = document.getElementById("boot-line")
        if (!line) {
          clearInterval(bootTimer)
          return
        }
        bootIndex = (bootIndex + 1) % bootLines.length
        line.textContent = bootLines[bootIndex]
      }, 1600)
    </script>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>