18d307f52SEvan Bacon<!DOCTYPE html>
28d307f52SEvan Bacon<html lang="en">
38d307f52SEvan Bacon<head>
48d307f52SEvan Bacon  <meta charset="UTF-8">
58d307f52SEvan Bacon  <meta http-equiv="X-UA-Compatible" content="IE=edge">
68d307f52SEvan Bacon  <meta name="viewport" content="width=device-width, initial-scale=1.0">
78d307f52SEvan Bacon  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" integrity="sha512-NhSC1YmyruXifcj/KFRWoC561YpHpc5Jtzgvbuzx5VozKpWvQ+4nXhPdFgmx8xqexRcpAglTj9sIBWINXa8x5w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
88d307f52SEvan Bacon
98d307f52SEvan Bacon  <style>
108d307f52SEvan Bacon    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;600&display=swap');
118d307f52SEvan Bacon
128d307f52SEvan Bacon    :root {
138d307f52SEvan Bacon      --background: #f8f8fa;
148d307f52SEvan Bacon      --text-color: #596068;
158d307f52SEvan Bacon      --secondary-text-color: #1b1f23;
168d307f52SEvan Bacon    }
178d307f52SEvan Bacon
188d307f52SEvan Bacon    body {
198d307f52SEvan Bacon      font-family: 'Inter', sans-serif;
208d307f52SEvan Bacon      background-color: var(--background);
218d307f52SEvan Bacon    }
228d307f52SEvan Bacon
238d307f52SEvan Bacon    .logo-box {
248d307f52SEvan Bacon      margin-top: 10%;
258d307f52SEvan Bacon      margin-bottom: 15%;
268d307f52SEvan Bacon    }
278d307f52SEvan Bacon
288d307f52SEvan Bacon    .logo-main {
298d307f52SEvan Bacon      position: relative;
308d307f52SEvan Bacon      display: flex;
318d307f52SEvan Bacon      align-items: center;
328d307f52SEvan Bacon      justify-content: center;
338d307f52SEvan Bacon      margin-left: auto;
348d307f52SEvan Bacon      margin-right: auto;
358d307f52SEvan Bacon      width: 91px;
368d307f52SEvan Bacon      height: 91px;
378d307f52SEvan Bacon      border-radius: 24px;
388d307f52SEvan Bacon      background-color: #fff;
398d307f52SEvan Bacon      box-shadow: 0px 8.95144px 17.9029px rgba(0, 0, 0, 0.12);
408d307f52SEvan Bacon    }
418d307f52SEvan Bacon
428d307f52SEvan Bacon    .logo-main::before,
438d307f52SEvan Bacon    .logo-main::after {
448d307f52SEvan Bacon      display: block;
458d307f52SEvan Bacon      width: 71px;
468d307f52SEvan Bacon      height: 71px;
478d307f52SEvan Bacon      content: '';
488d307f52SEvan Bacon
498d307f52SEvan Bacon      border: 1.8px solid #e1e4e8;
508d307f52SEvan Bacon      box-sizing: border-box;
518d307f52SEvan Bacon      border-radius: 13px;
528d307f52SEvan Bacon
538d307f52SEvan Bacon      position: absolute;
548d307f52SEvan Bacon      z-index: -1;
558d307f52SEvan Bacon      top: 31px;
568d307f52SEvan Bacon    }
578d307f52SEvan Bacon
588d307f52SEvan Bacon    .logo-main::before {
598d307f52SEvan Bacon      transform: rotate(-9.5deg);
608d307f52SEvan Bacon      right: 55px;
618d307f52SEvan Bacon    }
628d307f52SEvan Bacon
638d307f52SEvan Bacon    .logo-main::after {
648d307f52SEvan Bacon      transform: rotate(13.7deg);
658d307f52SEvan Bacon      left: 55px;
668d307f52SEvan Bacon    }
678d307f52SEvan Bacon
688d307f52SEvan Bacon    .info-box {
698d307f52SEvan Bacon      margin-left: auto;
708d307f52SEvan Bacon      margin-right: auto;
718d307f52SEvan Bacon      max-width: 345px;
728d307f52SEvan Bacon    }
738d307f52SEvan Bacon
748d307f52SEvan Bacon    .info-box-header {
758d307f52SEvan Bacon      font-weight: 600;
768d307f52SEvan Bacon      font-size: 13px;
778d307f52SEvan Bacon      line-height: 150%;
788d307f52SEvan Bacon      letter-spacing: -0.0001em;
798d307f52SEvan Bacon      color: var(--text-color);
808d307f52SEvan Bacon      margin-left: 16px;
818d307f52SEvan Bacon      margin-bottom: 8px;
828d307f52SEvan Bacon    }
838d307f52SEvan Bacon
848d307f52SEvan Bacon    .info-box-description {
858d307f52SEvan Bacon      background-color: #fff;
868d307f52SEvan Bacon      border-radius: 8px;
878d307f52SEvan Bacon
888d307f52SEvan Bacon      width: 100%;
898d307f52SEvan Bacon      display: flex;
908d307f52SEvan Bacon      flex-direction: row;
918d307f52SEvan Bacon      padding: 16px;
928d307f52SEvan Bacon      box-sizing: border-box;
938d307f52SEvan Bacon    }
948d307f52SEvan Bacon
958d307f52SEvan Bacon    .info-box-icon {
968d307f52SEvan Bacon      width: 26px;
978d307f52SEvan Bacon      height: 26px;
988d307f52SEvan Bacon    }
998d307f52SEvan Bacon
1008d307f52SEvan Bacon    .info-box-details {
1018d307f52SEvan Bacon      width: 100%;
1028d307f52SEvan Bacon    }
1038d307f52SEvan Bacon
1048d307f52SEvan Bacon    .info-box-app-name {
1058d307f52SEvan Bacon      padding: 0;
1068d307f52SEvan Bacon      margin: 3px 0 4px 8px;
1078d307f52SEvan Bacon      font-weight: 600;
1088d307f52SEvan Bacon      font-size: 13px;
1098d307f52SEvan Bacon      line-height: 150%;
1108d307f52SEvan Bacon      letter-spacing: -0.0001em;
1118d307f52SEvan Bacon      color: var(--secondary-text-color);
1128d307f52SEvan Bacon    }
1138d307f52SEvan Bacon
1148d307f52SEvan Bacon    .info-box-details-record {
1158d307f52SEvan Bacon      display: flex;
1168d307f52SEvan Bacon      flex-direction: row;
1178d307f52SEvan Bacon      justify-content: space-between;
1188d307f52SEvan Bacon      margin-right: 8px;
1198d307f52SEvan Bacon      padding: 4px 8px;
1208d307f52SEvan Bacon      border-radius: 8px;
1218d307f52SEvan Bacon    }
1228d307f52SEvan Bacon
1238d307f52SEvan Bacon    .info-box-details-record p {
1248d307f52SEvan Bacon      color: var(--text-color);
1258d307f52SEvan Bacon      padding: 0;
1268d307f52SEvan Bacon      margin: 0;
1278d307f52SEvan Bacon      font-size: 12px;
1288d307f52SEvan Bacon      font-weight: 400;
1298d307f52SEvan Bacon      line-height: 150%;
1308d307f52SEvan Bacon    }
1318d307f52SEvan Bacon
1328d307f52SEvan Bacon    .info-box-details-record:nth-child(odd) {
1338d307f52SEvan Bacon      background: #f8f8fa;
1348d307f52SEvan Bacon    }
1358d307f52SEvan Bacon
1368d307f52SEvan Bacon    .bottom-bar {
1378d307f52SEvan Bacon      background-color: #fff;
1388d307f52SEvan Bacon      position: fixed;
1398d307f52SEvan Bacon      left: 0;
1408d307f52SEvan Bacon      right: 0;
1418d307f52SEvan Bacon      bottom: 0;
1428d307f52SEvan Bacon
1438d307f52SEvan Bacon      padding: 17px;
1448d307f52SEvan Bacon    }
1458d307f52SEvan Bacon
1468d307f52SEvan Bacon    @media all and (max-height: 550px) {
1478d307f52SEvan Bacon      .bottom-bar {
1488d307f52SEvan Bacon        position: relative;
1498d307f52SEvan Bacon      }
1508d307f52SEvan Bacon    }
1518d307f52SEvan Bacon
1528d307f52SEvan Bacon    .bottom-bar-header {
1538d307f52SEvan Bacon      font-weight: 600;
1548d307f52SEvan Bacon      font-size: 13px;
1558d307f52SEvan Bacon      line-height: 150%;
1568d307f52SEvan Bacon      letter-spacing: -0.0001em;
1578d307f52SEvan Bacon      color: var(--secondary-text-color);
1588d307f52SEvan Bacon      margin: 0;
1598d307f52SEvan Bacon      padding: 0;
1608d307f52SEvan Bacon    }
1618d307f52SEvan Bacon
1628d307f52SEvan Bacon    .bottom-bar-button {
1638d307f52SEvan Bacon      border: none;
1648d307f52SEvan Bacon      background: inherit;
1658d307f52SEvan Bacon      margin: 12px 0;
1668d307f52SEvan Bacon      padding: 7.5px 0;
1678d307f52SEvan Bacon      width: 100%;
1688d307f52SEvan Bacon      display: block;
1698d307f52SEvan Bacon      border-radius: 4px;
1708d307f52SEvan Bacon      font-weight: 600;
1718d307f52SEvan Bacon      font-size: 14px;
1728d307f52SEvan Bacon      line-height: 150%;
1738d307f52SEvan Bacon      text-align: center;
1748d307f52SEvan Bacon      letter-spacing: -0.0001em;
1758d307f52SEvan Bacon      text-decoration: none;
1768d307f52SEvan Bacon    }
1778d307f52SEvan Bacon
1788d307f52SEvan Bacon    .bottom-bar-button-dark {
1798d307f52SEvan Bacon      background-color: var(--secondary-text-color);
1808d307f52SEvan Bacon      color: #fff;
1818d307f52SEvan Bacon    }
1828d307f52SEvan Bacon
1838d307f52SEvan Bacon    .bottom-bar-button-grey {
1848d307f52SEvan Bacon      background-color: #f0f1f2;
1858d307f52SEvan Bacon      color: var(--secondary-text-color);
1868d307f52SEvan Bacon    }
1878d307f52SEvan Bacon
188*212e3a1aSEric Samelson    #alert {
189*212e3a1aSEric Samelson      background-color: #fff;
190*212e3a1aSEric Samelson      color: var(--secondary-text-color);
191*212e3a1aSEric Samelson
192*212e3a1aSEric Samelson      padding-top: 20px;
193*212e3a1aSEric Samelson      padding-bottom: 20px;
194*212e3a1aSEric Samelson      padding-left: 10px;
195*212e3a1aSEric Samelson      padding-right: 10px;
196*212e3a1aSEric Samelson
197*212e3a1aSEric Samelson      text-align: center;
198*212e3a1aSEric Samelson      font-size: 16px;
199*212e3a1aSEric Samelson      letter-spacing: -0.0001em;
200*212e3a1aSEric Samelson      line-height: 150%;
201*212e3a1aSEric Samelson
202*212e3a1aSEric Samelson      display: none;
203*212e3a1aSEric Samelson    }
2048d307f52SEvan Bacon  </style>
2058d307f52SEvan Bacon  <title>Expo Start | Loading Page</title>
2068d307f52SEvan Bacon</head>
2078d307f52SEvan Bacon<body>
208*212e3a1aSEric Samelson  <div id="alert"></div>
2098d307f52SEvan Bacon  <div class="logo-box">
2108d307f52SEvan Bacon    <div class="logo-background-box">
2118d307f52SEvan Bacon
2128d307f52SEvan Bacon    </div>
2138d307f52SEvan Bacon    <div class="logo-main">
2148d307f52SEvan Bacon      <svg width="46" height="61" viewBox="0 0 46 61" fill="none" xmlns="http://www.w3.org/2000/svg">
2158d307f52SEvan Bacon        <path d="M0.26519 14.0223C-0.409907 15.1916 0.433964 16.6533 1.78416 16.6533H5.74165L7.11861 59.1335V59.1374C7.11861 59.7428 7.42541 60.2766 7.89203 60.5918C8.0888 60.7248 8.31399 60.8188 8.55659 60.863C8.65912 60.8816 8.76476 60.8914 8.87268 60.8914C9.84136 60.8914 10.6266 60.1061 10.6266 59.1374L11.3645 40.313C12.5872 37.8024 15.2005 36.1226 18.227 36.1226H27.7254C33.8603 36.1226 38.0564 31.9901 39.3187 24.8428C40.581 17.6955 40.3105 16.6578 40.3105 16.6578H44.1683C45.5185 16.6578 46.3624 15.1962 45.6873 14.0269L38.5988 1.74922C37.9237 0.579918 36.2359 0.579917 35.5608 1.74922L28.4723 14.0269C27.7972 15.1962 28.6411 16.6578 29.9913 16.6578H34.1274C34.1274 16.6578 34.2265 20.6048 33.9298 24.8428C33.6331 29.0808 31.923 31.9901 27.7254 31.9901H18.227C15.7212 31.9901 13.4092 32.8954 11.5507 34.3845L12.1074 16.6533H15.9612C17.3114 16.6533 18.1553 15.1916 17.4802 14.0223L10.3916 1.74465C9.71655 0.575351 8.02881 0.57535 7.35371 1.74465L0.26519 14.0223Z" fill="#596068"/>
2168d307f52SEvan Bacon        </svg>
2178d307f52SEvan Bacon
2188d307f52SEvan Bacon    </div>
2198d307f52SEvan Bacon  </div>
2208d307f52SEvan Bacon
2218d307f52SEvan Bacon  <div class="info-box">
2228d307f52SEvan Bacon    <p class="info-box-header">
2238d307f52SEvan Bacon      You are loading
2248d307f52SEvan Bacon    </p>
2258d307f52SEvan Bacon    <div class="info-box-description">
2268d307f52SEvan Bacon      <div class="info-box-icon">
2278d307f52SEvan Bacon        <svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
2288d307f52SEvan Bacon          <rect width="26" height="26" rx="4" fill="#E95D56"/>
2298d307f52SEvan Bacon          <path d="M16 13C16 16.3137 13.3137 19 10 19C6.68629 19 4 16.3137 4 13C4 9.68629 6.68629 7 10 7C13.3137 7 16 9.68629 16 13Z" fill="white" fill-opacity="0.8"/>
2308d307f52SEvan Bacon          <path d="M22 13C22 16.3137 19.3137 19 16 19C12.6863 19 10 16.3137 10 13C10 9.68629 12.6863 7 16 7C19.3137 7 22 9.68629 22 13Z" fill="white" fill-opacity="0.8"/>
2318d307f52SEvan Bacon          </svg>
2328d307f52SEvan Bacon      </div>
2338d307f52SEvan Bacon      <div class="info-box-details">
2348d307f52SEvan Bacon        <p class="info-box-app-name">{{ AppName }}</p>
2358d307f52SEvan Bacon        <div class="info-box-details-record">
236*212e3a1aSEric Samelson          <p>{{ ProjectVersionType }}</p>
237*212e3a1aSEric Samelson          <p>{{ ProjectVersion }}</p>
2388d307f52SEvan Bacon        </div>
2398d307f52SEvan Bacon        <!-- <div class="info-box-details-record">
2408d307f52SEvan Bacon          <p>Branch</p>
2418d307f52SEvan Bacon          <p>main</p>
2428d307f52SEvan Bacon        </div> -->
2438d307f52SEvan Bacon        <div class="info-box-details-record">
2448d307f52SEvan Bacon          <p>Path</p>
2458d307f52SEvan Bacon          <p>{{ Path }}</p>
2468d307f52SEvan Bacon        </div>
2478d307f52SEvan Bacon        <!-- <div class="info-box-details-record">
2488d307f52SEvan Bacon          <p>Last commit</p>
2498d307f52SEvan Bacon          <p>Jul 6, 2021, 4:51PM PT</p>
2508d307f52SEvan Bacon        </div> -->
2518d307f52SEvan Bacon      </div>
2528d307f52SEvan Bacon    </div>
2538d307f52SEvan Bacon  </div>
2548d307f52SEvan Bacon
2558d307f52SEvan Bacon  <div class="bottom-bar">
2568d307f52SEvan Bacon    <p class="bottom-bar-header">
2578d307f52SEvan Bacon      How would you like to open this project?
2588d307f52SEvan Bacon    </p>
259*212e3a1aSEric Samelson    <a id="expo-dev-client-link" href="/_expo/link?choice=expo-dev-client" class="bottom-bar-button bottom-bar-button-dark">Development Build</a>
2608d307f52SEvan Bacon    <a id="expo-go-link" href="/_expo/link?choice=expo-go" class="bottom-bar-button bottom-bar-button-grey">Expo Go</a>
2618d307f52SEvan Bacon  </div>
2628d307f52SEvan Bacon
2638d307f52SEvan Bacon  <script>
264*212e3a1aSEric Samelson  const alertElement = document.getElementById("alert");
265*212e3a1aSEric Samelson
266*212e3a1aSEric Samelson  const showAlert = (isExpoGo) => {
267*212e3a1aSEric Samelson    if (isExpoGo) {
268*212e3a1aSEric Samelson      alertElement.innerHTML = 'Unable to open in Expo Go. Please install <b>Expo Go</b> to continue.' +
269*212e3a1aSEric Samelson      '<br><a href="https://expo.dev/client">Learn more.</a>';
270*212e3a1aSEric Samelson    } else {
271*212e3a1aSEric Samelson      alertElement.innerHTML = 'Unable to open in Development Build with the <b>{{ Scheme }}</b> scheme. Please build and install a compatible <b>Development Build</b> to continue.' +
272*212e3a1aSEric Samelson      '<br><a href="https://docs.expo.dev/development/build/">Learn more.</a>';
273*212e3a1aSEric Samelson    }
274*212e3a1aSEric Samelson
275*212e3a1aSEric Samelson    alertElement.style.display = "block";
276*212e3a1aSEric Samelson  }
277*212e3a1aSEric Samelson
278*212e3a1aSEric Samelson  const hideAlert = () => {
279*212e3a1aSEric Samelson    alertElement.style.display = "none";
280*212e3a1aSEric Samelson  }
281*212e3a1aSEric Samelson
2828d307f52SEvan Bacon  function findGetParameter(parameterName) {
2838d307f52SEvan Bacon    let result = null;
2848d307f52SEvan Bacon
2858d307f52SEvan Bacon    location.search
2868d307f52SEvan Bacon      .substr(1)
2878d307f52SEvan Bacon      .split("&")
2888d307f52SEvan Bacon      .forEach(function (item) {
2898d307f52SEvan Bacon        const tmp = item.split("=");
2908d307f52SEvan Bacon        if (tmp[0] === parameterName) result = decodeURIComponent(tmp[1]);
2918d307f52SEvan Bacon      });
2928d307f52SEvan Bacon    return result;
2938d307f52SEvan Bacon  }
2948d307f52SEvan Bacon
295*212e3a1aSEric Samelson  function tryToDetectDeepLinkFailure(isExpoGo) {
296*212e3a1aSEric Samelson    const waitForRedirect = 800;
297*212e3a1aSEric Samelson    let didHide = false;
298*212e3a1aSEric Samelson    let didLoseFocuse = false;
299*212e3a1aSEric Samelson
300*212e3a1aSEric Samelson    const onVisibilitychange = (e) => {
301*212e3a1aSEric Samelson      if (e.target.visibilityState === 'hidden') {
302*212e3a1aSEric Samelson        didHide = true;
303*212e3a1aSEric Samelson        hideAlert();
304*212e3a1aSEric Samelson      }
305*212e3a1aSEric Samelson    };
306*212e3a1aSEric Samelson
307*212e3a1aSEric Samelson    const clearOnFocus = () => {
308*212e3a1aSEric Samelson      hideAlert();
309*212e3a1aSEric Samelson      window.removeEventListener('focus', clearOnFocus);
310*212e3a1aSEric Samelson    };
311*212e3a1aSEric Samelson
312*212e3a1aSEric Samelson    const showErrorOnFocus = () => {
313*212e3a1aSEric Samelson      window.removeEventListener('focus', showErrorOnFocus);
314*212e3a1aSEric Samelson
315*212e3a1aSEric Samelson      setTimeout(() => {
316*212e3a1aSEric Samelson        window.addEventListener('focus', clearOnFocus);
317*212e3a1aSEric Samelson
318*212e3a1aSEric Samelson        if (!didHide) {
319*212e3a1aSEric Samelson          showAlert(isExpoGo);
320*212e3a1aSEric Samelson        }
321*212e3a1aSEric Samelson      }, waitForRedirect);
322*212e3a1aSEric Samelson    }
323*212e3a1aSEric Samelson
324*212e3a1aSEric Samelson    const onBlur = () => {
325*212e3a1aSEric Samelson      didLoseFocuse = true;
326*212e3a1aSEric Samelson      window.removeEventListener('blur', onBlur);
327*212e3a1aSEric Samelson      window.addEventListener('focus', showErrorOnFocus);
328*212e3a1aSEric Samelson    };
329*212e3a1aSEric Samelson
330*212e3a1aSEric Samelson    window.addEventListener('blur', onBlur);
331*212e3a1aSEric Samelson    document.addEventListener("visibilitychange", onVisibilitychange);
332*212e3a1aSEric Samelson    setTimeout(() => {
333*212e3a1aSEric Samelson      // A modal was shown. So we need to wait for a user input.
334*212e3a1aSEric Samelson      if (didLoseFocuse) {
335*212e3a1aSEric Samelson        return;
336*212e3a1aSEric Samelson      }
337*212e3a1aSEric Samelson
338*212e3a1aSEric Samelson      window.addEventListener('focus', clearOnFocus);
339*212e3a1aSEric Samelson      document.removeEventListener("visibilitychange", onVisibilitychange);
340*212e3a1aSEric Samelson
341*212e3a1aSEric Samelson      // deeplink seems to be working
342*212e3a1aSEric Samelson      if (didHide) {
343*212e3a1aSEric Samelson        return;
344*212e3a1aSEric Samelson      }
345*212e3a1aSEric Samelson
346*212e3a1aSEric Samelson      showAlert(isExpoGo);
347*212e3a1aSEric Samelson    }, waitForRedirect);
348*212e3a1aSEric Samelson  }
349*212e3a1aSEric Samelson
3508d307f52SEvan Bacon  const devClientLink = document.getElementById("expo-dev-client-link");
3518d307f52SEvan Bacon  const goLink = document.getElementById("expo-go-link");
3528d307f52SEvan Bacon
353*212e3a1aSEric Samelson  devClientLink.onclick = () => tryToDetectDeepLinkFailure(false);
354*212e3a1aSEric Samelson  goLink.onclick = () => tryToDetectDeepLinkFailure(true);
355*212e3a1aSEric Samelson
356*212e3a1aSEric Samelson  const platform = findGetParameter("platform");
357*212e3a1aSEric Samelson  if (platform) {
3588d307f52SEvan Bacon    devClientLink.href += "&platform=" + encodeURIComponent(platform);
3598d307f52SEvan Bacon    goLink.href += "&platform=" + encodeURIComponent(platform);
3608d307f52SEvan Bacon  }
3618d307f52SEvan Bacon  </script>
3628d307f52SEvan Bacon</body>
3638d307f52SEvan Bacon</html>
364