diff options
| -rw-r--r-- | .gitignore | 1 | ||||
| -rwxr-xr-x | bun.lockb | bin | 104473 -> 104848 bytes | |||
| -rw-r--r-- | package.json | 115 | ||||
| -rw-r--r-- | src/components/Qr.svelte | 2 | ||||
| -rw-r--r-- | src/routes/+page.svelte | 167 |
5 files changed, 72 insertions, 213 deletions
@@ -4,3 +4,4 @@ node_modules /.svelte-kit /package .env +android Binary files differdiff --git a/package.json b/package.json index 7057e577..ae0e9494 100644 --- a/package.json +++ b/package.json @@ -1,59 +1,60 @@ { - "name": "my-app", - "version": "0.0.1", - "scripts": { - "dev": "vite dev", - "build": "vite build", - "docker": "docker build . -t coinos-ui", - "preview": "vite preview", - "lint": "prettier --check --plugin-search-dir=. .", - "format": "prettier --write --plugin-search-dir=. ." - }, - "devDependencies": { - "@scure/base": "^1.1.1", - "@sveltejs/adapter-node": "^1.1.4", - "@sveltejs/kit": "^1.14.0", - "@tailwindcss/line-clamp": "^0.4.2", - "@zerodevx/svelte-toast": "^0.7.2", - "autoprefixer": "^10.4.13", - "bech32": "^2.0.0", - "bip21": "^2.0.3", - "bitcoin-address-validation": "^2.2.1", - "buffer": "^6.0.3", - "date-fns": "^2.29.3", - "html5-qrcode": "^2.3.8", - "leaflet": "^1.9.3", - "leaflet.markercluster": "^1.5.3", - "nostr-tools": "^1.14.2", - "postcss": "^8.4.20", - "prettier": "^2.8.1", - "prettier-plugin-svelte": "^2.9.0", - "qr-code-styling": "1.6.0-rc.1", - "qr-scanner": "^1.4.2", - "qrcode-base64": "^1.0.1", - "rollup": "^2.79.1", - "screenfull": "^6.0.2", - "svelte": "^3.55.0", - "svelte-outclick": "^3.3.3", - "svelte-preprocess": "^4.10.7", - "svelte-virtual-scroll-list": "^1.1.0", - "sveltekit-i18n": "^2.2.2", - "tailwind-scrollbar": "^2.1.0", - "tailwindcss": "^3.2.4", - "uuid": "^9.0.0", - "vite": "^4.2.1" - }, - "pnpm": { - "peerDependencyRules": { - "allowedVersions": { - "vite": "4" - } - } - }, - "type": "module", - "dependencies": { - "@scure/bip39": "^1.2.1", - "html2canvas": "^1.4.1", - "leaflet-tooltip-layout": "^0.1.2" - } + "name": "my-app", + "version": "0.0.1", + "scripts": { + "dev": "vite dev", + "build": "vite build", + "docker": "docker build . -t coinos-ui", + "preview": "vite preview", + "lint": "prettier --check --plugin-search-dir=. .", + "format": "prettier --write --plugin-search-dir=. ." + }, + "devDependencies": { + "@bitjson/qr-code": "^1.0.2", + "@scure/base": "^1.1.1", + "@sveltejs/adapter-node": "^1.1.4", + "@sveltejs/kit": "^1.14.0", + "@tailwindcss/line-clamp": "^0.4.2", + "@zerodevx/svelte-toast": "^0.7.2", + "autoprefixer": "^10.4.13", + "bech32": "^2.0.0", + "bip21": "^2.0.3", + "bitcoin-address-validation": "^2.2.1", + "buffer": "^6.0.3", + "date-fns": "^2.29.3", + "html5-qrcode": "^2.3.8", + "leaflet": "^1.9.3", + "leaflet.markercluster": "^1.5.3", + "nostr-tools": "^1.14.2", + "postcss": "^8.4.20", + "prettier": "^2.8.1", + "prettier-plugin-svelte": "^2.9.0", + "qr-code-styling": "1.6.0-rc.1", + "qr-scanner": "^1.4.2", + "qrcode-base64": "^1.0.1", + "rollup": "^2.79.1", + "screenfull": "^6.0.2", + "svelte": "^3.55.0", + "svelte-outclick": "^3.3.3", + "svelte-preprocess": "^4.10.7", + "svelte-virtual-scroll-list": "^1.1.0", + "sveltekit-i18n": "^2.2.2", + "tailwind-scrollbar": "^2.1.0", + "tailwindcss": "^3.2.4", + "uuid": "^9.0.0", + "vite": "^4.2.1" + }, + "pnpm": { + "peerDependencyRules": { + "allowedVersions": { + "vite": "4" + } + } + }, + "type": "module", + "dependencies": { + "@scure/bip39": "^1.2.1", + "html2canvas": "^1.4.1", + "leaflet-tooltip-layout": "^0.1.2" + } } diff --git a/src/components/Qr.svelte b/src/components/Qr.svelte index 975be301..dab672c3 100644 --- a/src/components/Qr.svelte +++ b/src/components/Qr.svelte @@ -5,7 +5,7 @@ </script> <div - class="w-60 mx-auto my-5 cursor-pointer" + class="w-72 mx-auto my-5 cursor-pointer" bind:this={qr} on:click={() => screenfull.toggle(qr)} on:keydown={() => screenfull.toggle(qr)} 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> |
