Skip to content

Commit d4fc440

Browse files
MarcusVirgMarcusVirg
committed
fix: better install page
1 parent 63d93bb commit d4fc440

File tree

1 file changed

+80
-65
lines changed

1 file changed

+80
-65
lines changed

‎apps/resplice/src/common/pages/InstallPage.svelte

+80-65
Original file line numberDiff line numberDiff line change
@@ -1,55 +1,62 @@
11
<script lang="ts">
2-
import { RespliceWideIcon } from '@resplice/components'
2+
import { Button, ChevronRightIcon, RespliceWideIcon } from '@resplice/components'
3+
import Page from '$common/layouts/Page.svelte'
34
45
let context: 'apple' | 'android' = 'apple'
6+
7+
function toApp() {
8+
window.location.replace('/')
9+
}
510
</script>
611

7-
<main class="w-full min-h-full max-w-lg m-auto flex flex-col overlow-auto bg-white">
8-
<div class="flex-none">
9-
<header class="w-full p-4 bg-[#5E6FC5] rounded-b-3xl">
10-
<RespliceWideIcon width="100%" />
11-
</header>
12+
<Page>
13+
<main class="w-full min-h-full max-w-lg m-auto flex flex-col overlow-auto bg-white">
14+
<div class="flex-none">
15+
<header class="w-full p-4 bg-[#5E6FC5] rounded-b-3xl">
16+
<RespliceWideIcon width="100%" />
17+
</header>
1218

13-
<p class="mt-4 px-8 py-4">
14-
Resplice is not a traditional app you can install from the App Store or Google Play. Instead,
15-
it's a web app that you can install on your phone or computer. See instructions below:
16-
</p>
17-
</div>
19+
<p class="mt-4 px-8 py-4">
20+
Resplice is not a traditional app you can install from the App Store or Google Play.
21+
Instead, it's a web app that you can install on your phone or computer. See instructions
22+
below:
23+
</p>
24+
</div>
1825

19-
<div class="flex items-center space-x-4 px-8">
20-
<button
21-
class="w-full font-bold text-lg py-4 px-8 rounded-full whitespace-nowrap"
22-
class:bg-[#5E6FC5]={context === 'apple'}
23-
class:text-white={context === 'apple'}
24-
class:text-slate-800={context === 'android'}
25-
on:click={() => (context = 'apple')}
26-
>
27-
iOS
28-
</button>
29-
<button
30-
class="w-full font-bold text-lg py-4 px-8 rounded-full whitespace-nowrap"
31-
class:bg-[#5E6FC5]={context === 'android'}
32-
class:text-white={context === 'android'}
33-
class:text-slate-800={context === 'apple'}
34-
on:click={() => (context = 'android')}
35-
>
36-
Android
37-
</button>
38-
</div>
26+
<div class="flex items-center space-x-4 px-8">
27+
<button
28+
class="w-full font-bold text-lg py-4 px-8 rounded-full whitespace-nowrap"
29+
class:bg-[#5E6FC5]={context === 'apple'}
30+
class:text-white={context === 'apple'}
31+
class:text-slate-800={context === 'android'}
32+
on:click={() => (context = 'apple')}
33+
>
34+
iOS
35+
</button>
36+
<button
37+
class="w-full font-bold text-lg py-4 px-8 rounded-full whitespace-nowrap"
38+
class:bg-[#5E6FC5]={context === 'android'}
39+
class:text-white={context === 'android'}
40+
class:text-slate-800={context === 'apple'}
41+
on:click={() => (context = 'android')}
42+
>
43+
Android
44+
</button>
45+
</div>
3946

40-
{#if context === 'apple'}
41-
<section>
42-
<h2 class="text-2xl font-bold px-8 py-4">Install on iPhone or iPad</h2>
43-
<p class="px-8 py-4">
44-
To install Resplice on your iPhone or iPad, you'll need to use Safari:
45-
</p>
46-
<ol class="px-8 list-decimal list-inside">
47-
<li>Make sure you have this website opened in Safari.</li>
48-
<li>Tap the "Share" icon at the bottom of the screen.</li>
49-
<li>Select “Add to Home Screen” from the options.</li>
50-
<li>Confirm the installation by tapping the “Add” button.</li>
51-
</ol>
52-
<!-- <div class="flex justify-center items-center">
47+
{#if context === 'apple'}
48+
<section>
49+
<h2 class="text-2xl font-bold px-8 py-4">Install on iPhone or iPad</h2>
50+
<p class="px-8 py-4">
51+
To install Resplice on your iPhone or iPad, you'll need to use Safari:
52+
</p>
53+
<ol class="px-8 list-decimal list-inside">
54+
<li>Make sure you have this website opened in Safari.</li>
55+
<li>Tap the "Share" icon at the bottom of the screen.</li>
56+
<li>Select “Add to Home Screen” from the options.</li>
57+
<li>Confirm the installation by tapping the “Add” button.</li>
58+
</ol>
59+
<!-- <div class="flex justify-center items-center">
5360
<img
5461
src="/assets/images/ios-install-1.png"
5562
alt="Tap the share button at the bottom of the screen"
@@ -62,24 +69,24 @@
6269
<div class="flex justify-center items-center">
6370
<img src="/assets/images/ios-install-3.png" alt="Tap 'Add'" class="w-1/2" />
6471
</div> -->
65-
</section>
66-
{:else if context === 'android'}
67-
<section>
68-
<h2 class="text-2xl font-bold px-8 py-4">Install on Android</h2>
69-
<p class="px-8 py-4">
70-
To install Resplice on your Android phone or tablet, you'll need to use Chrome:
71-
</p>
72-
<ol class="px-8 list-decimal list-inside">
73-
<li>Make sure you have this website opened in Chrome.</li>
74-
<li>
75-
Some Android devices will prompt you automatically to install at the bottom of the screen.
76-
If you see this click "install" otherwise continue to the next step.
77-
</li>
78-
<li>Open your browser's settings by tapping the icon at the top right of the screen.</li>
79-
<li>Select “Add to Home Screen” from the options.</li>
80-
<li>Confirm the installation by tapping the “Add” button.</li>
81-
</ol>
82-
<!-- <div class="flex justify-center items-center">
72+
</section>
73+
{:else if context === 'android'}
74+
<section>
75+
<h2 class="text-2xl font-bold px-8 py-4">Install on Android</h2>
76+
<p class="px-8 py-4">
77+
To install Resplice on your Android phone or tablet, you'll need to use Chrome:
78+
</p>
79+
<ol class="px-8 list-decimal list-inside">
80+
<li>Make sure you have this website opened in Chrome.</li>
81+
<li>
82+
Some Android devices will prompt you automatically to install at the bottom of the
83+
screen. If you see this click "install" otherwise continue to the next step.
84+
</li>
85+
<li>Open your browser's settings by tapping the icon at the top right of the screen.</li>
86+
<li>Select “Add to Home Screen” from the options.</li>
87+
<li>Confirm the installation by tapping the “Add” button.</li>
88+
</ol>
89+
<!-- <div class="flex justify-center items-center">
8390
<img
8491
src="/assets/images/android-install-1.png"
8592
alt="Tap the menu button at the top right of the screen"
@@ -96,6 +103,14 @@
96103
<div class="flex justify-center items-center">
97104
<img src="/assets/images/android-install-3.png" alt="Tap 'Add'" class="w-1/2" />
98105
</div> -->
99-
</section>
100-
{/if}
101-
</main>
106+
</section>
107+
{/if}
108+
109+
<div class="flex justify-center items-center p-8">
110+
<Button color="brand-light" class="flex items-center justify-between w-56" on:click={toApp}>
111+
<span class="ml-2">Go to App</span>
112+
<ChevronRightIcon width={24} height={24} />
113+
</Button>
114+
</div>
115+
</main>
116+
</Page>

0 commit comments

Comments
 (0)