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  </style>
189  <title>Expo Start | Loading Page</title>
190</head>
191<body>
192  <div class="logo-box">
193    <div class="logo-background-box">
194
195    </div>
196    <div class="logo-main">
197      <svg width="46" height="61" viewBox="0 0 46 61" fill="none" xmlns="http://www.w3.org/2000/svg">
198        <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"/>
199        </svg>
200
201    </div>
202  </div>
203
204  <div class="info-box">
205    <p class="info-box-header">
206      You are loading
207    </p>
208    <div class="info-box-description">
209      <div class="info-box-icon">
210        <svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
211          <rect width="26" height="26" rx="4" fill="#E95D56"/>
212          <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"/>
213          <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"/>
214          </svg>
215      </div>
216      <div class="info-box-details">
217        <p class="info-box-app-name">{{ AppName }}</p>
218        <div class="info-box-details-record">
219          <p>Runtime version</p>
220          <p>{{ RuntimeVersion }}</p>
221        </div>
222        <!-- <div class="info-box-details-record">
223          <p>Branch</p>
224          <p>main</p>
225        </div> -->
226        <div class="info-box-details-record">
227          <p>Path</p>
228          <p>{{ Path }}</p>
229        </div>
230        <!-- <div class="info-box-details-record">
231          <p>Last commit</p>
232          <p>Jul 6, 2021, 4:51PM PT</p>
233        </div> -->
234      </div>
235    </div>
236  </div>
237
238  <div class="bottom-bar">
239    <p class="bottom-bar-header">
240      How would you like to open this project?
241    </p>
242    <a id="expo-dev-client-link" href="/_expo/link?choice=expo-dev-client" class="bottom-bar-button bottom-bar-button-dark">Development App</a>
243    <a id="expo-go-link" href="/_expo/link?choice=expo-go" class="bottom-bar-button bottom-bar-button-grey">Expo Go</a>
244  </div>
245
246  <script>
247  function findGetParameter(parameterName) {
248    let result = null;
249
250    location.search
251      .substr(1)
252      .split("&")
253      .forEach(function (item) {
254        const tmp = item.split("=");
255        if (tmp[0] === parameterName) result = decodeURIComponent(tmp[1]);
256      });
257    return result;
258  }
259
260  const platform = findGetParameter("platform");
261  if (platform) {
262    const devClientLink = document.getElementById("expo-dev-client-link");
263    const goLink = document.getElementById("expo-go-link");
264
265    devClientLink.href += "&platform=" + encodeURIComponent(platform);
266    goLink.href += "&platform=" + encodeURIComponent(platform);
267  }
268  </script>
269</body>
270</html>
271