https://fyra.life/

1<!doctype html>
2<html lang="en">
3  <head>
4    <meta charset="UTF-8" />
5    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover" />
6    <!-- Apple Music's MusicKit authorize() flow requires the site origin in the Referer header.
7         A "no-referrer" policy here breaks authorize() with `webPlayerLogout 403` →
8         `AUTHORIZATION_ERROR: Unauthorized`. Keep this at strict-origin-when-cross-origin. -->
9    <meta name="referrer" content="strict-origin-when-cross-origin" />
10    <title>Fyra</title>
11    <meta name="description" content="Powered by Humans" />
12    <meta name="author" content="Fyra" />
13
14    <!-- Explicit Fyra browser identity. Keep these declarations so browsers
15         never fall back to the platform's default Lovable favicon. -->
16    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
17    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
18    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
19
20    <!-- Open Graph / Social sharing -->
21    <meta property="og:title" content="Fyra" />
22    <meta property="og:description" content="Powered by Humans" />
23    <meta property="og:type" content="website" />
24    <meta property="og:site_name" content="Fyra" />
25    <meta property="og:url" content="https://fyra.life" />
26    <meta property="og:image" content="https://fyra.life/og-compact.png" />
27    <meta property="og:image:width" content="300" />
28    <meta property="og:image:height" content="300" />
29
30    <!-- Twitter -->
31    <meta name="twitter:card" content="summary" />
32    <meta name="twitter:title" content="Fyra" />
33    <meta name="twitter:description" content="Powered by Humans" />
34    <meta name="twitter:image" content="https://fyra.life/og-compact.png" />
35
36    <!-- Apple/iMessage specific -->
37    <meta name="apple-mobile-web-app-title" content="Fyra" />
38    <meta name="apple-itunes-app" content="app-id=6803639513" />
39
40    <!-- Image CDN preconnects — saves a DNS + TLS round-trip (~100-300ms on
41         mobile) before the first vault thumbnail can start loading. Cards
42         pull from Supabase Storage (user uploads + place photos), iTunes
43         (song/podcast art), TMDB (movie/show posters), Deezer (song art),
44         and OpenLibrary (book covers). -->
45    <link rel="preconnect" href="https://vauhodpuhdnypebxfeod.supabase.co" crossorigin />
46    <link rel="preconnect" href="https://is1-ssl.mzstatic.com" crossorigin />
47    <link rel="preconnect" href="https://image.tmdb.org" crossorigin />
48    <link rel="preconnect" href="https://e-cdn-images.dzcdn.net" crossorigin />
49    <link rel="dns-prefetch" href="https://covers.openlibrary.org" />
50    <link rel="dns-prefetch" href="https://i.scdn.co" />
51
52    <!-- Stash template fonts (Phase 5 themed hero typography) — non-blocking:
53         only used inside stash pages, so we load the stylesheet with a low-
54         priority preload and swap to `rel=stylesheet` on load. Saves a
55         render-blocking round-trip on every cold app boot. -->
56    <link rel="preconnect" href="https://fonts.googleapis.com" />
57    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
58    <link
59      href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&family=Cormorant+Garamond:ital,wght@0,500;0,700;1,500&family=Lora:wght@500;700&family=Bebas+Neue&family=EB+Garamond:wght@500;700&family=Space+Grotesk:wght@500;700&display=swap"
60      rel="stylesheet"
61      media="print"
62      onload="this.media='all'"
63    />
64    <noscript>
65      <link
66        href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&family=Cormorant+Garamond:ital,wght@0,500;0,700;1,500&family=Lora:wght@500;700&family=Bebas+Neue&family=EB+Garamond:wght@500;700&family=Space+Grotesk:wght@500;700&display=swap"
67        rel="stylesheet"
68      />
69    </noscript>
70
71
72    <style>
73      /* Pre-React splash — paints instantly while the JS bundle loads,
74         so iOS WKWebView never shows a blank white screen on cold boot.
75         Replaced by React the moment AuthGuard renders. */
76      html { background: #0a1224; margin: 0; height: 100%; }
77      body { margin: 0; min-height: 100%; }
78      #root { min-height: 100%; }
79      #__splash {
80        position: fixed; inset: 0;
81        display: flex; align-items: center; justify-content: center;
82        background: #0a1224;
83        z-index: 0;
84      }
85      #__splash img {
86        width: 72px; height: 72px; -o-object-fit: contain; object-fit: contain;
87        animation: __spin 2.4s linear infinite;
88        filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4));
89      }
90      @keyframes __spin { to { transform: rotate(360deg); } }
91      /* Once React paints anything into #root, the splash is hidden. */
92      #root:not(:empty) ~ #__splash { display: none; }
93    </style>
94    

94<script type="module" crossorigin src="/assets/index-CEISlULX.js"></script>

94
95    <link rel="stylesheet" crossorigin href="/assets/index-CcMqAdLq.css">
96  </head>
97
98  <body>
99    <div id="root"></div>
100    <div id="__splash" aria-hidden="true">
101      <img src="/fyra-compass.webp" alt="" />
102    </div>
103  </body>
104</html>