aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--.gitignore1
-rwxr-xr-xbun.lockbbin104473 -> 104848 bytes
-rw-r--r--package.json115
-rw-r--r--src/components/Qr.svelte2
-rw-r--r--src/routes/+page.svelte167
5 files changed, 72 insertions, 213 deletions
diff --git a/.gitignore b/.gitignore
index 75631d29..3cf23d42 100644
--- a/.gitignore
+++ b/.gitignore
@@ -4,3 +4,4 @@ node_modules
/.svelte-kit
/package
.env
+android
diff --git a/bun.lockb b/bun.lockb
index 21685632..4d965bdd 100755
--- a/bun.lockb
+++ b/bun.lockb
Binary files differ
diff --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>