1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="UTF-8">
5  <meta http-equiv="X-UA-Compatible" content="IE=edge">
6  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7  <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" />
8
9  <style>
10    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;600&display=swap');
11
12    :root {
13      --background: #f8f8fa;
14      --text-color: #596068;
15      --secondary-text-color: #1b1f23;
16    }
17
18    body {
19      font-family: 'Inter', sans-serif;
20      background-color: var(--background);
21    }
22
23    .logo-box {
24      margin-top: 10%;
25      margin-bottom: 15%;
26    }
27
28    .logo-main {
29      position: relative;
30      display: flex;
31      align-items: center;
32      justify-content: center;
33      margin-left: auto;
34      margin-right: auto;
35      width: 91px;
36      height: 91px;
37      border-radius: 24px;
38      background-color: #fff;
39      box-shadow: 0px 8.95144px 17.9029px rgba(0, 0, 0, 0.12);
40    }
41
42    .logo-main::before,
43    .logo-main::after {
44      display: block;
45      width: 71px;
46      height: 71px;
47      content: '';
48
49      border: 1.8px solid #e1e4e8;
50      box-sizing: border-box;
51      border-radius: 13px;
52
53      position: absolute;
54      z-index: -1;
55      top: 31px;
56    }
57
58    .logo-main::before {
59      transform: rotate(-9.5deg);
60      right: 55px;
61    }
62
63    .logo-main::after {
64      transform: rotate(13.7deg);
65      left: 55px;
66    }
67
68    .info-box {
69      margin-left: auto;
70      margin-right: auto;
71      max-width: 345px;
72    }
73
74    .info-box-header {
75      font-weight: 600;
76      font-size: 13px;
77      line-height: 150%;
78      letter-spacing: -0.0001em;
79      color: var(--text-color);
80      margin-left: 16px;
81      margin-bottom: 8px;
82    }
83
84    .info-box-description {
85      background-color: #fff;
86      border-radius: 8px;
87
88      width: 100%;
89      display: flex;
90      flex-direction: row;
91      padding: 16px;
92      box-sizing: border-box;
93    }
94
95    .info-box-icon {
96      width: 26px;
97      height: 26px;
98    }
99
100    .info-box-details {
101      width: 100%;
102    }
103
104    .info-box-app-name {
105      padding: 0;
106      margin: 3px 0 4px 8px;
107      font-weight: 600;
108      font-size: 13px;
109      line-height: 150%;
110      letter-spacing: -0.0001em;
111      color: var(--secondary-text-color);
112    }
113
114    .info-box-details-record {
115      display: flex;
116      flex-direction: row;
117      justify-content: space-between;
118      margin-right: 8px;
119      padding: 4px 8px;
120      border-radius: 8px;
121    }
122
123    .info-box-details-record p {
124      color: var(--text-color);
125      padding: 0;
126      margin: 0;
127      font-size: 12px;
128      font-weight: 400;
129      line-height: 150%;
130    }
131
132    .info-box-details-record:nth-child(odd) {
133      background: #f8f8fa;
134    }
135
136    .bottom-bar {
137      background-color: #fff;
138      position: fixed;
139      left: 0;
140      right: 0;
141      bottom: 0;
142
143      padding: 17px;
144    }
145
146    @media all and (max-height: 550px) {
147      .bottom-bar {
148        position: relative;
149      }
150    }
151
152    .bottom-bar-header {
153      font-weight: 600;
154      font-size: 13px;
155      line-height: 150%;
156      letter-spacing: -0.0001em;
157      color: var(--secondary-text-color);
158      margin: 0;
159      padding: 0;
160    }
161
162    .bottom-bar-button {
163      border: none;
164      background: inherit;
165      margin: 12px 0;
166      padding: 7.5px 0;
167      width: 100%;
168      display: block;
169      border-radius: 4px;
170      font-weight: 600;
171      font-size: 14px;
172      line-height: 150%;
173      text-align: center;
174      letter-spacing: -0.0001em;
175      text-decoration: none;
176    }
177
178    .bottom-bar-button-dark {
179      background-color: var(--secondary-text-color);
180      color: #fff;
181    }
182
183    .bottom-bar-button-grey {
184      background-color: #f0f1f2;
185      color: var(--secondary-text-color);
186    }
187
188    #alert {
189      background-color: #fff;
190      color: var(--secondary-text-color);
191
192      padding-top: 20px;
193      padding-bottom: 20px;
194      padding-left: 10px;
195      padding-right: 10px;
196
197      text-align: center;
198      font-size: 16px;
199      letter-spacing: -0.0001em;
200      line-height: 150%;
201
202      display: none;
203    }
204  </style>
205  <title>Expo Start | Loading Page</title>
206</head>
207<body>
208  <div id="alert"></div>
209  <div class="logo-box">
210    <div class="logo-background-box">
211
212    </div>
213    <div class="logo-main">
214      <svg width="46" height="61" viewBox="0 0 46 61" fill="none" xmlns="http://www.w3.org/2000/svg">
215        <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"/>
216        </svg>
217
218    </div>
219  </div>
220
221  <div class="info-box">
222    <p class="info-box-header">
223      You are loading
224    </p>
225    <div class="info-box-description">
226      <div class="info-box-icon">
227        <svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
228          <rect width="26" height="26" rx="4" fill="#E95D56"/>
229          <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"/>
230          <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"/>
231          </svg>
232      </div>
233      <div class="info-box-details">
234        <p class="info-box-app-name">{{ AppName }}</p>
235        <div class="info-box-details-record">
236          <p>{{ ProjectVersionType }}</p>
237          <p>{{ ProjectVersion }}</p>
238        </div>
239        <!-- <div class="info-box-details-record">
240          <p>Branch</p>
241          <p>main</p>
242        </div> -->
243        <div class="info-box-details-record">
244          <p>Path</p>
245          <p>{{ Path }}</p>
246        </div>
247        <!-- <div class="info-box-details-record">
248          <p>Last commit</p>
249          <p>Jul 6, 2021, 4:51PM PT</p>
250        </div> -->
251      </div>
252    </div>
253  </div>
254
255  <div class="bottom-bar">
256    <p class="bottom-bar-header">
257      How would you like to open this project?
258    </p>
259    <a id="expo-dev-client-link" href="/_expo/link?choice=expo-dev-client" class="bottom-bar-button bottom-bar-button-dark">Development Build</a>
260    <a id="expo-go-link" href="/_expo/link?choice=expo-go" class="bottom-bar-button bottom-bar-button-grey">Expo Go</a>
261  </div>
262
263  <script>
264  const alertElement = document.getElementById("alert");
265
266  const showAlert = (isExpoGo) => {
267    if (isExpoGo) {
268      alertElement.innerHTML = 'Unable to open in Expo Go. Please install <b>Expo Go</b> to continue.' +
269      '<br><a href="https://expo.dev/client">Learn more.</a>';
270    } else {
271      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      '<br><a href="https://docs.expo.dev/development/build/">Learn more.</a>';
273    }
274
275    alertElement.style.display = "block";
276  }
277
278  const hideAlert = () => {
279    alertElement.style.display = "none";
280  }
281
282  function findGetParameter(parameterName) {
283    let result = null;
284
285    location.search
286      .substr(1)
287      .split("&")
288      .forEach(function (item) {
289        const tmp = item.split("=");
290        if (tmp[0] === parameterName) result = decodeURIComponent(tmp[1]);
291      });
292    return result;
293  }
294
295  function tryToDetectDeepLinkFailure(isExpoGo) {
296    const waitForRedirect = 800;
297    let didHide = false;
298    let didLoseFocuse = false;
299
300    const onVisibilitychange = (e) => {
301      if (e.target.visibilityState === 'hidden') {
302        didHide = true;
303        hideAlert();
304      }
305    };
306
307    const clearOnFocus = () => {
308      hideAlert();
309      window.removeEventListener('focus', clearOnFocus);
310    };
311
312    const showErrorOnFocus = () => {
313      window.removeEventListener('focus', showErrorOnFocus);
314
315      setTimeout(() => {
316        window.addEventListener('focus', clearOnFocus);
317
318        if (!didHide) {
319          showAlert(isExpoGo);
320        }
321      }, waitForRedirect);
322    }
323
324    const onBlur = () => {
325      didLoseFocuse = true;
326      window.removeEventListener('blur', onBlur);
327      window.addEventListener('focus', showErrorOnFocus);
328    };
329
330    window.addEventListener('blur', onBlur);
331    document.addEventListener("visibilitychange", onVisibilitychange);
332    setTimeout(() => {
333      // A modal was shown. So we need to wait for a user input.
334      if (didLoseFocuse) {
335        return;
336      }
337
338      window.addEventListener('focus', clearOnFocus);
339      document.removeEventListener("visibilitychange", onVisibilitychange);
340
341      // deeplink seems to be working
342      if (didHide) {
343        return;
344      }
345
346      showAlert(isExpoGo);
347    }, waitForRedirect);
348  }
349
350  const devClientLink = document.getElementById("expo-dev-client-link");
351  const goLink = document.getElementById("expo-go-link");
352
353  devClientLink.onclick = () => tryToDetectDeepLinkFailure(false);
354  goLink.onclick = () => tryToDetectDeepLinkFailure(true);
355
356  const platform = findGetParameter("platform");
357  if (platform) {
358    devClientLink.href += "&platform=" + encodeURIComponent(platform);
359    goLink.href += "&platform=" + encodeURIComponent(platform);
360  }
361  </script>
362</body>
363</html>
364