-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathversion-selector.html
384 lines (378 loc) · 21.5 KB
/
version-selector.html
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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Version Selector • ISS Tracker</title>
<link rel="apple-touch-icon" sizes="180x180" href="/public/favicons/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/public/favicons/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/public/favicons/favicon-16x16.png" />
<link rel="manifest" href="/public/favicons/site.webmanifest" />
<link rel="mask-icon" href="/public/favicons/safari-pinned-tab.svg" color="#5bbad5" />
<link rel="shortcut icon" href="/public/favicons/favicon.ico" />
<meta name="msapplication-TileColor" content="#2b5797" />
<meta name="msapplication-config" content="/public/favicons/browserconfig.xml" />
<script src="https://unpkg.com/petite-vue@0.2.2/dist/petite-vue.iife.js" defer init></script>
<style>
@font-face {
font-family: 'Space Grotesk';
font-style: normal;
font-weight: 400;
font-display: block;
src: url(/public/fonts/spacegrotesk/v13/V8mDoQDjQSkFtoMM3T6r8E7mPbF4Cw.woff2)
format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Space Grotesk';
font-style: normal;
font-weight: 700;
font-display: block;
src: url(/public/fonts/spacegrotesk/v13/V8mDoQDjQSkFtoMM3T6r8E7mPbF4Cw.woff2)
format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
* {
-webkit-tap-highlight-color: transparent;
box-sizing: border-box;
}
html {
font-family: 'Space Grotesk', sans-serif;
min-height: 100%;
background: linear-gradient(177.54deg, #06002c 21.39%, #45017b 142.67%) no-repeat;
color: #fff;
}
body {
display: flex;
flex-direction: column;
align-items: center;
margin: 1rem;
}
svg {
margin: min(10vh, 40px) 0;
width: min(25vh, 300px);
}
h2 {
font-size: 24px;
font-weight: 400;
}
.button {
all: unset;
padding: 8px 16px;
background: #4d009c;
color: inherit;
box-shadow: 1px 2px 0 2px #00000040;
border-radius: 8px;
cursor: pointer;
user-select: none;
text-wrap: nowrap;
}
.button:active {
background: #5d00b9;
}
.button:disabled {
background: hsl(240, 8%, 53%);
color: #ffffffaa;
}
.button + a {
font-size: 0.8em;
text-decoration: none;
color: #fff;
margin-top: 0.5rem;
text-wrap: nowrap;
}
.out {
margin-top: 1.5rem;
max-width: 45ch;
}
.out h2,
.out p {
text-wrap: balance;
}
.result {
display: flex;
flex-direction: column;
align-items: center;
}
.result p {
margin-top: 1.5rem;
}
.result h2 {
text-align: center;
}
</style>
</head>
<body v-scope="{ render: 'server-only', shell: true }">
<h1>Version Selector</h1>
<form action="" method="post" @submit.prevent>
<p>Choose where the application should be rendered:</p>
<label>
<input v-model="render" type="radio" name="render" value="server-only" />
Server
</label>
<label>
<input v-model="render" type="radio" name="render" value="client-only" />
Client
</label>
<label>
<input v-model="render" type="radio" name="render" value="server-and-client" />
Server and Client
</label>
<p>Choose whether the application should use an App Shell:</p>
<label>
<input v-model="shell" type="checkbox" name="app-shell" id="app-shell" />
Use App Shell?
</label>
</form>
<div class="out" v-if="shell">
<div class="result" v-if="render === 'server-only'">
<h2>Multi-Page Application with stream-stitched App Shell</h2>
<a class="button" href="https://thesis-mpa-shell.joku.co">Open Variant 🚀</a>
<a href="https://thesis-mpa-shell.joku.co">https://thesis-mpa-shell.joku.co</a>
<p>
Fully server-rendered upon first visit. After the page is loaded, an HTML Shell consisting
of the <code><head></code> portion and common <code><body></code> elements is added
to the browser cache. After clicking a link, the browser performs a full navigation, but
now a Service Worker immediately sends the cached App Shell in a Response Stream. It
simultaneously requests just the <code><body></code> portion of the loaded page from
the server and merges the response into the Response Stream.
</p>
</div>
<div class="result" v-if="render === 'client-only'">
<h2>Single-Page Application with App Shell</h2>
<a class="button" href="https://thesis-spa-shell.joku.co">Open Variant 🚀</a>
<a href="https://thesis-spa-shell.joku.co">https://thesis-spa-shell.joku.co</a>
<p>
No matter which page is requested, the server always responds with the same plain HTML
document that contains no content. Once loaded, client-side JavaScript will populate the
document with content and handle all subsequent navigations and interactions. On first
load, a Service Worker caches the plain HTML document as well as required assets to speed
up future pageloads.
</p>
</div>
<div class="result" v-if="render === 'server-and-client'">
<h2>Isomorphic Application with stream-stitched App Shell</h2>
<a class="button" href="https://thesis-isomorphic-shell.joku.co">Open Variant 🚀</a>
<a href="https://thesis-isomorphic-shell.joku.co"
>https://thesis-isomorphic-shell.joku.co</a
>
<p>
Initial load works the same way as the
<i @click="render='server-only'">MPA with stream-stitched App Shell</i> variant: the
server only responds with the HTML partial that contains the content, which is combined
with the cached App Shell by the Service Worker. After load, JavaScript hydrates the page
and handles all further navigations and interactions.
</p>
</div>
</div>
<div class="out" v-else>
<div class="result" v-if="render === 'server-only'">
<h2>Multi-Page Application</h2>
<a class="button" href="https://thesis-mpa.joku.co">Open Variant 🚀</a>
<a href="https://thesis-mpa.joku.co">https://thesis-mpa.joku.co</a>
<p>
A "classic" website, pages are fully server-rendered. After clicking a link, the browser
performs a full navigation, loading a new document in a fresh context. Interactions are
handled partly through <code><form></code> navigations, partly through a small amount
of client-side JavaScript.
</p>
</div>
<div class="result" v-if="render === 'client-only'">
<h2>Single-Page Application</h2>
<a class="button" href="https://thesis-spa.joku.co">Open Variant 🚀</a>
<a href="https://thesis-spa.joku.co">https://thesis-spa.joku.co</a>
<p>
No matter which page is requested, the server always responds with the same plain HTML
document that contains no content. Once loaded, client-side JavaScript will populate the
document with content and handle all subsequent navigations and interactions.
</p>
</div>
<div class="result" v-if="render === 'server-and-client'">
<h2>Isomorphic Application</h2>
<a class="button" href="https://thesis-isomorphic.joku.co">Open Variant 🚀</a>
<a href="https://thesis-isomorphic.joku.co">https://thesis-isomorphic.joku.co</a>
<p>
Upon first visit the server responds with the fully-rendered HTML document for the
requested page. Once loaded in the browser, client-side JavaScript will take over in a
process called hydration and handle all subsequent navigations and interactions.
</p>
</div>
</div>
<svg viewBox="0 0 302 300" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_13_640)">
<path
d="M302 150.728C302.033 186.876 289.039 221.829 265.391 249.205C241.742 276.581 209.018 294.552 173.193 299.836H132.295C132.231 299.892 129.964 300 129.964 300C129.584 299.948 129.199 299.892 128.819 299.836C125.907 299.408 123.022 298.898 120.163 298.305C108.97 295.992 98.0805 292.404 87.7081 287.61C87.6 287.562 87.4958 287.51 87.3877 287.462C81.6075 284.784 76.0059 281.738 70.6175 278.342C70.4813 278.258 70.3491 278.174 70.217 278.09C69.9887 277.947 69.7644 277.807 69.5401 277.659C69.468 277.615 69.3959 277.571 69.3238 277.523C64.5065 274.425 59.8701 271.056 55.4374 267.432C55.2211 267.26 55.0048 267.08 54.7885 266.904C53.9194 266.184 53.0582 265.457 52.2051 264.721C52.1971 264.717 52.1931 264.709 52.1851 264.705C47.8257 260.934 43.6842 256.918 39.7807 252.679C39.7686 252.663 39.7526 252.651 39.7406 252.635C22.5929 234.016 10.4249 211.382 4.36175 186.826C4.31368 186.65 4.27363 186.478 4.22957 186.303C1.41219 174.653 -0.00764167 162.711 -3.05981e-05 150.728C-3.05981e-05 67.4836 67.6055 -1.52588e-05 151 -1.52588e-05C234.394 -1.52588e-05 302 67.4836 302 150.728Z"
fill="#7E77A4"
/>
<path
opacity="0.8"
d="M164.96 172.963L178.166 157.531L191.371 142.099L198.826 133.388C199.239 132.906 198.602 132.154 198.19 132.636L184.984 148.068L171.778 163.5L164.323 172.211C163.911 172.693 164.547 173.445 164.96 172.963Z"
fill="url(#paint0_linear_13_640)"
/>
<path d="M168.587 134.499H154.929V299.836H168.587V134.499Z" fill="#382E41" />
<path
d="M164.197 195.198L164.169 200.148L163.837 260.223L163.797 267.384L163.709 283.52L163.621 299.836H162.74L162.828 283.52L162.912 268.447L162.956 260.075L163.288 200.16L163.316 195.194L164.197 195.198Z"
fill="white"
/>
<path
d="M171.039 136.698H152.533C152.264 133.804 152.932 130.89 154.653 127.952L155.176 124.383H167.955L168.557 127.907C170.348 130.288 171.041 133.295 171.039 136.698Z"
fill="#382E41"
/>
<path
d="M168.35 124.823H155.164C155.031 124.823 154.899 124.793 154.779 124.735C154.66 124.677 154.554 124.592 154.472 124.488C154.39 124.384 154.332 124.262 154.303 124.132C154.275 124.002 154.276 123.867 154.307 123.738L156.528 114.502C156.574 114.31 156.684 114.139 156.839 114.016C156.995 113.894 157.187 113.827 157.385 113.827H166.13C166.327 113.827 166.52 113.894 166.675 114.016C166.831 114.139 166.94 114.31 166.986 114.502L169.207 123.738C169.238 123.867 169.24 124.002 169.211 124.132C169.182 124.262 169.125 124.384 169.042 124.488C168.96 124.592 168.855 124.677 168.735 124.735C168.615 124.793 168.483 124.823 168.35 124.823Z"
fill="#382E41"
/>
<path
d="M161.758 109.208C160.531 109.209 159.355 109.697 158.487 110.563C157.62 111.43 157.133 112.604 157.132 113.829V118.447H166.384V113.829C166.384 112.604 165.897 111.43 165.029 110.563C164.162 109.697 162.985 109.209 161.758 109.208Z"
fill="#382E41"
/>
<path
d="M156.628 248.724L125.272 289.347L129.608 290.346L153.959 259.046H156.628V248.724Z"
fill="#382E41"
/>
<path
d="M168.155 248.724L199.511 289.347L195.175 290.346L170.824 259.046H168.155V248.724Z"
fill="#382E41"
/>
<path
d="M260.097 98.0529V254.938C250.353 265.1 239.238 273.857 227.073 280.957V98.0529H260.097Z"
fill="#382E41"
/>
<path d="M275.773 118.033H254.091V139.676H275.773V118.033Z" fill="#382E41" />
<path d="M246.085 45.778H241.082V102.383H246.085V45.778Z" fill="#382E41" />
<g opacity="0.4">
<path
d="M229.876 98.0529H227.073V280.957C228.015 280.408 228.949 279.847 229.876 279.276V98.0529Z"
fill="#E6E6E6"
/>
<path d="M243.886 45.778H241.082V98.0529H243.886V45.778Z" fill="#E6E6E6" />
</g>
<path d="M251.589 123.86H233.576V133.849H251.589V123.86Z" fill="white" />
<path
d="M58.8513 124.356C73.4935 124.356 85.3634 112.508 85.3634 97.8917C85.3634 83.2758 73.4935 71.4274 58.8513 71.4274C44.209 71.4274 32.3391 83.2758 32.3391 97.8917C32.3391 112.508 44.209 124.356 58.8513 124.356Z"
fill="#E6E6E6"
/>
<path
d="M56.2435 82.7072C57.9237 82.7072 59.2859 81.3476 59.2859 79.6703C59.2859 77.9931 57.9237 76.6335 56.2435 76.6335C54.5632 76.6335 53.2011 77.9931 53.2011 79.6703C53.2011 81.3476 54.5632 82.7072 56.2435 82.7072Z"
fill="white"
/>
<path
d="M61.459 113.076C63.1393 113.076 64.5014 111.716 64.5014 110.039C64.5014 108.362 63.1393 107.002 61.459 107.002C59.7787 107.002 58.4166 108.362 58.4166 110.039C58.4166 111.716 59.7787 113.076 61.459 113.076Z"
fill="white"
/>
<path
d="M73.1939 95.2886C74.3941 95.2886 75.367 94.3174 75.367 93.1194C75.367 91.9214 74.3941 90.9502 73.1939 90.9502C71.9937 90.9502 71.0208 91.9214 71.0208 93.1194C71.0208 94.3174 71.9937 95.2886 73.1939 95.2886Z"
fill="white"
/>
<path
d="M48.4203 107.002C52.2608 107.002 55.3743 103.895 55.3743 100.061C55.3743 96.2272 52.2608 93.1194 48.4203 93.1194C44.5797 93.1194 41.4662 96.2272 41.4662 100.061C41.4662 103.895 44.5797 107.002 48.4203 107.002Z"
fill="white"
/>
<path
d="M100.94 141.048C101.731 141.048 102.372 140.408 102.372 139.618C102.372 138.828 101.731 138.188 100.94 138.188C100.148 138.188 99.5071 138.828 99.5071 139.618C99.5071 140.408 100.148 141.048 100.94 141.048Z"
fill="white"
/>
<path
d="M113.355 160.36L112.64 161.069L111.93 160.355L111.453 160.828L112.163 161.542L111.448 162.251L111.922 162.726L112.637 162.017L113.347 162.731L113.824 162.259L113.113 161.545L113.828 160.836L113.355 160.36Z"
fill="#E6E6E6"
/>
<path
d="M119.085 118.893L118.37 119.602L117.66 118.888L117.183 119.361L117.893 120.074L117.178 120.783L117.652 121.259L118.367 120.55L119.077 121.264L119.554 120.791L118.843 120.078L119.558 119.369L119.085 118.893Z"
fill="#E6E6E6"
/>
<path
d="M137.093 40.203C135.546 41.2318 133.963 38.7832 135.54 37.8001C137.087 36.7714 138.67 39.22 137.093 40.203Z"
fill="#E6E6E6"
/>
<path
d="M47.4857 146.621L46.5016 146.405L46.7171 145.423L46.061 145.279L45.8451 146.262L44.861 146.047L44.7172 146.702L45.7013 146.917L45.4858 147.899L46.1419 148.043L46.3578 147.06L47.3419 147.276L47.4857 146.621Z"
fill="#E6E6E6"
/>
<path
d="M198.085 28.6774L197.101 28.4619L197.317 27.4792L196.66 27.3357L196.445 28.3184L195.461 28.1033L195.317 28.7582L196.301 28.9737L196.085 29.956L196.741 30.0996L196.957 29.1168L197.941 29.3323L198.085 28.6774Z"
fill="#E6E6E6"
/>
<path
d="M274.987 92.2469L274.003 92.0314L274.218 91.0487L273.562 90.9052L273.346 91.8879L272.362 91.6728L272.219 92.3277L273.203 92.5432L272.987 93.5255L273.643 93.669L273.859 92.6863L274.843 92.9018L274.987 92.2469Z"
fill="#E6E6E6"
/>
<path
d="M89.102 44.1812L88.1179 43.9657L88.3334 42.9834L87.6773 42.8398L87.4614 43.8222L86.4769 43.6071L86.3331 44.262L87.3176 44.4775L87.1021 45.4602L87.7582 45.6033L87.9741 44.621L88.9582 44.8361L89.102 44.1812Z"
fill="#E6E6E6"
/>
<path
d="M182.377 76.8141C183.169 76.8141 183.81 76.1739 183.81 75.3841C183.81 74.5944 183.169 73.9542 182.377 73.9542C181.586 73.9542 180.945 74.5944 180.945 75.3841C180.945 76.1739 181.586 76.8141 182.377 76.8141Z"
fill="white"
/>
<path
d="M171.65 97.0446L170.666 96.8291L170.882 95.8464L170.225 95.7029L170.01 96.6856L169.025 96.4705L168.882 97.1254L169.866 97.3409L169.65 98.3232L170.306 98.4667L170.522 97.484L171.506 97.6995L171.65 97.0446Z"
fill="#E6E6E6"
/>
<path
d="M209.662 79.3643L208.678 79.1488L208.893 78.1665L208.237 78.0229L208.021 79.0053L207.037 78.7902L206.893 79.4451L207.877 79.6606L207.662 80.6433L208.318 80.7864L208.534 79.8041L209.518 80.0192L209.662 79.3643Z"
fill="#E6E6E6"
/>
<path
opacity="0.8"
d="M143.331 87.4045L156.537 71.9725L169.743 56.5405L177.198 47.8289C177.61 47.3469 176.973 46.5949 176.561 47.0769L163.355 62.5089L150.15 77.9409L142.695 86.6525C142.282 87.1345 142.919 87.8865 143.331 87.4045Z"
fill="url(#paint1_linear_13_640)"
/>
<path d="M156.805 258.664H154.402V299.453H156.805V258.664Z" fill="#E6E6E6" />
<path
d="M162.431 108.988C161.449 109.253 160.582 109.833 159.964 110.638C159.345 111.444 159.008 112.43 159.007 113.446V113.486C158.86 113.529 158.727 113.611 158.621 113.722C158.515 113.832 158.439 113.969 158.402 114.117L156.183 123.357C156.153 123.481 156.151 123.611 156.177 123.736C156.203 123.862 156.256 123.98 156.333 124.083C156.41 124.185 156.508 124.27 156.621 124.33C156.735 124.391 156.86 124.426 156.988 124.432L156.972 124.54L156.912 124.94L156.007 127.739C154.288 130.673 154.14 133.42 154.409 136.315H156.804V248.465L125.546 288.965L127.845 289.493L127.481 289.965L123.143 288.965L154.401 248.465V136.315L152.402 136.135C152.134 133.24 152.686 130.673 154.405 127.739L154.509 124.94L154.569 124.54L154.585 124.432C154.457 124.426 154.331 124.391 154.218 124.33C154.105 124.27 154.007 124.185 153.93 124.083C153.853 123.98 153.8 123.862 153.774 123.736C153.748 123.611 153.75 123.481 153.78 123.357L155.999 114.117C156.036 113.969 156.111 113.832 156.217 113.722C156.323 113.611 156.456 113.529 156.603 113.486V113.446C156.604 112.221 157.091 111.046 157.959 110.179C158.826 109.313 160.002 108.825 161.23 108.824C161.636 108.825 162.04 108.88 162.431 108.988Z"
fill="#E6E6E6"
/>
<path
d="M172.7 258.663H170.463V258.878L194.647 289.963L196.685 289.493L172.7 258.663Z"
fill="#E6E6E6"
/>
<path
d="M206.225 283.52V291.056C195.586 295.23 184.503 298.175 173.193 299.836H123.928C122.666 299.608 121.409 299.364 120.163 299.104V283.52H206.225Z"
fill="#382E41"
/>
<path
d="M163.837 260.223C163.557 260.175 163.26 260.127 162.956 260.075C161.165 259.787 159.007 259.459 156.531 259.12C156.363 259.096 156.191 259.072 156.015 259.048C153.972 258.772 151.725 258.492 149.302 258.216C136.016 256.725 117.46 255.529 98.5225 257.173C98.9911 255.293 99.4237 253.414 99.8322 251.543L81.6962 254.346L101.266 244.411C103.11 234.204 104.377 223.902 105.063 213.554L95.2662 215.065L105.283 209.979C106 197.173 105.664 188.649 105.664 188.649C105.664 188.649 72.8966 205.653 46.6939 231.641C45.7326 228.258 44.6792 224.92 43.5577 221.642L29.4831 233.396L41.0864 214.797C37.3818 205.107 33.1321 195.634 28.3576 186.423L20.7555 192.771L26.6994 183.248C20.6834 171.913 15.9812 164.789 15.9812 164.789C15.9812 164.789 10.6181 173.561 4.22961 187.102C10.2545 211.877 22.4877 234.717 39.7807 253.478C43.6899 257.724 47.8381 261.745 52.2052 265.521C53.0583 266.256 53.9194 266.984 54.7886 267.704C59.4179 271.528 64.2716 275.074 69.3238 278.322C69.6202 278.514 69.9166 278.702 70.217 278.89C85.509 288.578 102.43 295.426 120.163 299.104C121.409 299.364 122.666 299.608 123.928 299.836C124.237 299.892 124.545 299.948 124.853 300H129.964C129.964 300 132.231 299.892 132.295 299.836C138.644 294.291 144.399 288.685 149.362 283.52C150.491 282.348 151.577 281.197 152.622 280.078L144.059 275.092L155.049 277.443C155.554 276.887 156.051 276.339 156.531 275.804C158.999 273.053 161.137 270.562 162.912 268.447C163.216 268.079 163.513 267.727 163.797 267.384C167.029 263.49 168.808 261.115 168.808 261.115C168.808 261.115 167.021 260.751 163.837 260.223Z"
fill="#382E41"
/>
<path
d="M154.4 136.315H152.005C151.737 133.42 152.406 130.505 154.124 127.571L154.509 124.94L154.569 124.54H156.972L156.912 124.94L156.527 127.571C154.809 130.505 154.14 133.42 154.409 136.315H156.804"
fill="white"
/>
<path d="M156.804 170.918H154.401V200.104H156.804V170.918Z" fill="white" />
<path
d="M242.922 50.1759C245.355 50.1759 247.328 48.2069 247.328 45.778C247.328 43.3491 245.355 41.3801 242.922 41.3801C240.488 41.3801 238.516 43.3491 238.516 45.778C238.516 48.2069 240.488 50.1759 242.922 50.1759Z"
fill="white"
/>
</g>
<defs>
<linearGradient
id="paint0_linear_13_640"
x1="164.19"
y1="152.8"
x2="198.96"
y2="152.8"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="white" />
<stop offset="1" stop-color="white" stop-opacity="0.3" />
</linearGradient>
<linearGradient
id="paint1_linear_13_640"
x1="142.561"
y1="67.2407"
x2="177.331"
y2="67.2407"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="white" />
<stop offset="1" stop-color="white" stop-opacity="0.3" />
</linearGradient>
<clipPath id="clip0_13_640">
<rect width="302" height="300" fill="white" />
</clipPath>
</defs>
</svg>
</body>
</html>