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
|
<script>
import {
LandingHeader,
LandingHero,
LandingInfoCard,
HowItWorksCard,
FaqCard,
Image,
About,
Footer,
Qr as Q
} from '$comp';
import Qr from 'qrcode-base64';
import { t } from '$lib/translations';
import { close } from '$lib/socket';
import { onMount } from 'svelte';
export let data;
let { user } = data;
let { locations } = data;
let howItWorks;
let faq;
let about;
const howItWorksSteps = [
{ image: 'hand', stepID: 'step1' },
{ image: 'bolt', stepID: 'step2' },
{ image: 'smile', stepID: 'step3' }
];
const faqIDs = ['cost', 'compatibility', 'safety'];
onMount(async () => {
close();
try {
({ locations } = await fetch('/locations').then((r) => r.json()));
} catch (e) {
console.log(e);
}
});
let username = 'burnabyartigiano';
let password = 'password';
let src = Qr.drawImg(`https://coinos.io/${username}`, { size: 3200 });
</script>
<svelte:head>
<script src="https://stamen-maps.a.ssl.fastly.net/js/tile.stamen.js"></script>
</svelte:head>
<LandingHeader {howItWorks} {faq} {about} {user} />
<main class="space-y-40 py-20 md:py-32 lg:py-36 xl:py-40 px-5 md:px-0">
<div class="space-y-5 border-8 border-black p-12 w-[800px] mx-auto rounded-2xl">
<div class="flex w-full justify-center gap-4">
<img src="/images/accepted.svg" />
</div>
<div class="flex">
<img src="/images/logo.png" style="width: 260px" class="ml-auto" />
</div>
</div>
<div class="space-y-8 border-8 border-black p-8 w-[680px] mx-auto">
<div class="flex w-full justify-center gap-4">
<img src="/images/bitcoin.png" class="w-14" />
<h3 class="text-5xl font-medium text-center">Pay with Bitcoin</h3>
</div>
<Q {src} />
<div class="text-center text-4xl font-bold">coinos.io/{username}</div>
<div>
<div class="text-xl pt-2 flex gap-6">
<ol class="number-list">
<li>Visit this page in a <b>browser</b></li>
<li>Click <b>Pay</b> to enter your total in dollars (ask your server)</li>
<li>Send payment with your wallet</li>
<li>Your server will get a confirmation receipt from the printer</li>
</ol>
</div>
</div>
<div class="flex">
<div class="my-auto">Need help? Email <b>[email protected]</b></div>
<img src="/images/logo.png" class="ml-auto my-auto" style="width: 180px" />
</div>
</div>
<LandingHero {user} />
<LandingInfoCard
image="lightning-qr"
title={$t('landing.info1.title')}
description={$t('landing.info1.description')}
/>
<LandingInfoCard image="phone-checkout" title={$t('landing.info2.title')} order="reverse">
{$t('landing.info2.description1')}
<br /><br />
{$t('landing.info2.description2')}
<br /><br />
{@html $t('landing.info2.description3')}
</LandingInfoCard>
<div>
<LandingInfoCard
image="customize"
title={$t('landing.info3.title')}
description={$t('landing.info3.description')}
/>
<div bind:this={howItWorks} />
<div id="about" />
</div>
<div>
<h3 class="text-5xl font-medium mb-10 text-center">{$t('howItWorks.header')}</h3>
<div class="grid lg:grid-cols-3 space-y-10 lg:space-y-0 text-center">
{#each howItWorksSteps as step}
<HowItWorksCard image={step.image} stepID={step.stepID} />
{/each}
</div>
<div bind:this={faq} />
</div>
<div>
<div class="space-y-10">
<h3 class="text-5xl font-medium text-center">{$t('faq.header')}</h3>
{#each faqIDs as faqID}
<FaqCard questionID={faqID} />
{/each}
</div>
<div bind:this={about} />
</div>
<About {locations} />
</main>
<Footer />
|
