FlockHopper/index.html at main · flockhopperdev/FlockHopper · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!DOCTYPE html>
<html lang="en" class="dark">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/png" href="/favicon.png" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="theme-color" content="#0a0a0f" />

    <!-- DNS Prefetch for external resources -->
    <link rel="dns-prefetch" href="https://tile.openstreetmap.org">
    <link rel="dns-prefetch" href="https://unpkg.com">

    <!-- Prefetch camera data for instant map loading -->
    <link rel="prefetch" href="/cameras-us.json" as="fetch" crossorigin="anonymous">

    <!-- Fonts - preload for fastest LCP -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <!-- Preload the font CSS to avoid render-blocking -->
    <link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@700&display=swap">
    <!-- Critical: Only bold weight for hero h1 (LCP element) - loads first -->
    <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@700&display=swap" rel="stylesheet">
    <!-- Non-critical weights load async -->
    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&family=Space+Grotesk:wght@400;500;600&display=swap" rel="stylesheet" media="print" onload="this.media='all'">

    <!-- Leaflet CSS - load async since it's for map page -->
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="anonymous" media="print" onload="this.media='all'" />
    <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.4.1/dist/MarkerCluster.css" integrity="sha384-lPzjPsFQL6te2x+VxmV6q1DpRxpRk0tmnl2cpwAO5y04ESyc752tnEWPKDfl1olr" crossorigin="anonymous" media="print" onload="this.media='all'" />
    <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.4.1/dist/MarkerCluster.Default.css" integrity="sha384-5kMSQJ6S4Qj5i09mtMNrWpSi8iXw230pKU76xTmrpezGnNJQzj0NzXjQLLg+jE7k" crossorigin="anonymous" media="print" onload="this.media='all'" />

    <title>FlockHopper</title>
  </head>
  <body class="bg-dark-900 text-dark-100">
    <!-- Inline critical CSS for LCP - shows immediately with system font -->
    <style>
      .font-bold { font-weight: 700; }
      h1 { font-family: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif; }
    </style>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>