diff options
Diffstat (limited to 'src/routes/+page.svelte')
| -rw-r--r-- | src/routes/+page.svelte | 167 |
1 files changed, 12 insertions, 155 deletions
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 24850be4..e68d906e 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -1,162 +1,19 @@ <script> - import { - LandingHeader, - LandingHero, - LandingInfoCard, - HowItWorksCard, - FaqCard, - Image, - About, - Footer, - Qr as Q - } from '$comp'; + import { 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 = 'prettygood'; - let password = 'password'; - - let src = Qr.drawImg(`https://coinos.io/pay/${username}`, { size: 4000 }); + let username = 'milano'; + let src = Qr.drawImg(`https://coinos.io/${username}`, { size: 4000 }); </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-8 w-[800px] 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">Bitcoin Instructions</h3> - </div> - <div> - <p class="text-center text-lg">Public Payment Page</p> - <div class="flex justify-center text-2xl"><b>https://coinos.io/{username}</b></div> - </div> - <div> - <p class="text-center text-lg">Staff Login</p> - <div class="flex justify-center text-2xl"><b>{username} / {password}</b></div> - </div> - <div class="py-8"> - <p class="text-lg font-semibold">What to do if a customer asks to pay with Bitcoin</p> - <ol class="list-decimal ml-4"> - <li class="pt-2">Direct them to scan the QR code to visit the payment page.</li> - <li class="pt-2">Enter the sale in your PoS as if it were paid by cash.</li> - <li class="pt-2"> - Tell the customer their total with tax and wait for them to send payment. - </li> - <li class="pt-2"> - Check the receipt from the coinos printer to make sure they sent the right amount. - </li> - <li class="pt-2">Done! Hand the customer their items and a cash receipt if requested.</li> - </ol> - </div> - - <p> - You can view all payments for the day at <b>https://coinos.io/{username}/payments</b> or just total - up all the receipts. - </p> - - <p> - If you have any questions please email <b>[email protected]</b> or call Adam at - <b>604-358-6745</b> - </p> - - <img src="/images/logo.png" class="ml-auto" style="width: 120px" /> - </div> - <div class="space-y-3 border-8 border-black p-8 w-[710px] mx-auto"> - <div class="flex w-full justify-center gap-4"> - <div class="flex gap-2"> - <img src="/images/bitcoin.png" class="w-16" /> - <h3 class="text-4xl font-bold text-center my-auto">Pay with bitcoin</h3> - </div> - <img src="/images/logo.png" class="ml-auto my-auto" style="width: 180px" /> - </div> - <Q {src} /> - <div class="text-center text-5xl font-bold">coinos.io/{username}</div> - <div class="flex w-full"> - <div class="text-lg pt-2 flex text-center mx-auto">Trouble scanning? Try your Camera app</div> - </div> - <div class="flex justify-center text-left" /> +<div class="border-8 border-black p-8 w-[710px] mx-auto mt-20"> + <div class="flex gap-2 mx-auto justify-center"> + <img src="/images/bitcoin.png" class="w-16" /> + <h3 class="text-4xl font-bold text-center my-auto">Bitcoin Accepted Here</h3> </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" /> + <Q {src} /> + <div class="text-center text-5xl font-bold">coinos.io/{username}</div> + <div class="flex w-full justify-center gap-4 mt-10"> + <img src="/images/logo.png" class="ml-auto my-auto" style="width: 180px" /> </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 /> +</div> |