Compare commits
2 Commits
23a1debeb7
...
c91f5b0f65
| Author | SHA1 | Date | |
|---|---|---|---|
|
c91f5b0f65 | ||
|
|
98aa111734 |
237
package-lock.json
generated
237
package-lock.json
generated
@ -10,15 +10,19 @@
|
||||
"dependencies": {
|
||||
"flowbite": "^2.5.1",
|
||||
"flowbite-svelte": "^0.46.16",
|
||||
"flowbite-svelte-icons": "^1.6.1"
|
||||
"flowbite-svelte-icons": "^1.6.1",
|
||||
"motion": "^11.17.0",
|
||||
"pocketbase": "^0.25.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@playwright/test": "^1.28.1",
|
||||
"@sveltejs/adapter-auto": "^3.0.0",
|
||||
"@sveltejs/adapter-node": "^5.2.11",
|
||||
"@sveltejs/kit": "^2.5.27",
|
||||
"@sveltejs/vite-plugin-svelte": "^4.0.0",
|
||||
"@tailwindcss/typography": "^0.5.14",
|
||||
"@types/eslint": "^9.6.0",
|
||||
"@types/node": "^22.10.5",
|
||||
"autoprefixer": "^10.4.20",
|
||||
"eslint": "^9.0.0",
|
||||
"eslint-config-prettier": "^9.1.0",
|
||||
@ -799,6 +803,92 @@
|
||||
"url": "https://opencollective.com/popperjs"
|
||||
}
|
||||
},
|
||||
"node_modules/@rollup/plugin-commonjs": {
|
||||
"version": "28.0.2",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/plugin-commonjs/-/plugin-commonjs-28.0.2.tgz",
|
||||
"integrity": "sha512-BEFI2EDqzl+vA1rl97IDRZ61AIwGH093d9nz8+dThxJNH8oSoB7MjWvPCX3dkaK1/RCJ/1v/R1XB15FuSs0fQw==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@rollup/pluginutils": "^5.0.1",
|
||||
"commondir": "^1.0.1",
|
||||
"estree-walker": "^2.0.2",
|
||||
"fdir": "^6.2.0",
|
||||
"is-reference": "1.2.1",
|
||||
"magic-string": "^0.30.3",
|
||||
"picomatch": "^4.0.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=16.0.0 || 14 >= 14.17"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"rollup": "^2.68.0||^3.0.0||^4.0.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"rollup": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@rollup/plugin-commonjs/node_modules/fdir": {
|
||||
"version": "6.4.2",
|
||||
"resolved": "https://registry.npmjs.org/fdir/-/fdir-6.4.2.tgz",
|
||||
"integrity": "sha512-KnhMXsKSPZlAhp7+IjUkRZKPb4fUyccpDrdFXbi4QL1qkmFh9kVY09Yox+n4MaOb3lHZ1Tv829C3oaaXoMYPDQ==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peerDependencies": {
|
||||
"picomatch": "^3 || ^4"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"picomatch": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@rollup/plugin-commonjs/node_modules/is-reference": {
|
||||
"version": "1.2.1",
|
||||
"resolved": "https://registry.npmjs.org/is-reference/-/is-reference-1.2.1.tgz",
|
||||
"integrity": "sha512-U82MsXXiFIrjCK4otLT+o2NA2Cd2g5MLoOVXUZjIOhLurrRxpEXzI8O0KZHr3IjLvlAH1kTPYSuqer5T9ZVBKQ==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@types/estree": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@rollup/plugin-commonjs/node_modules/picomatch": {
|
||||
"version": "4.0.2",
|
||||
"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.2.tgz",
|
||||
"integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/jonschlinkert"
|
||||
}
|
||||
},
|
||||
"node_modules/@rollup/plugin-json": {
|
||||
"version": "6.1.0",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/plugin-json/-/plugin-json-6.1.0.tgz",
|
||||
"integrity": "sha512-EGI2te5ENk1coGeADSIwZ7G2Q8CJS2sF120T7jLw4xFw9n7wIOXHo+kIYRAoVpJAN+kmqZSoO3Fp4JtoNF4ReA==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@rollup/pluginutils": "^5.1.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=14.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"rollup": "^1.20.0||^2.0.0||^3.0.0||^4.0.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"rollup": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@rollup/plugin-node-resolve": {
|
||||
"version": "15.2.3",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-15.2.3.tgz",
|
||||
@ -1083,6 +1173,47 @@
|
||||
"@sveltejs/kit": "^2.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@sveltejs/adapter-node": {
|
||||
"version": "5.2.11",
|
||||
"resolved": "https://registry.npmjs.org/@sveltejs/adapter-node/-/adapter-node-5.2.11.tgz",
|
||||
"integrity": "sha512-lR7/dfUaKFf3aI408KRDy/BVDYoqUws7zNOJz2Hl4JoshlTnMgdha3brXBRFXB+cWtYvJjjPhvmq3xqpbioi4w==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@rollup/plugin-commonjs": "^28.0.1",
|
||||
"@rollup/plugin-json": "^6.1.0",
|
||||
"@rollup/plugin-node-resolve": "^16.0.0",
|
||||
"rollup": "^4.9.5"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@sveltejs/kit": "^2.4.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@sveltejs/adapter-node/node_modules/@rollup/plugin-node-resolve": {
|
||||
"version": "16.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-16.0.0.tgz",
|
||||
"integrity": "sha512-0FPvAeVUT/zdWoO0jnb/V5BlBsUSNfkIOtFHzMO4H9MOklrmQFY6FduVHKucNb/aTFxvnGhj4MNj/T1oNdDfNg==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@rollup/pluginutils": "^5.0.1",
|
||||
"@types/resolve": "1.20.2",
|
||||
"deepmerge": "^4.2.2",
|
||||
"is-module": "^1.0.0",
|
||||
"resolve": "^1.22.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=14.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"rollup": "^2.78.0||^3.0.0||^4.0.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"rollup": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@sveltejs/kit": {
|
||||
"version": "2.5.28",
|
||||
"resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-2.5.28.tgz",
|
||||
@ -1203,6 +1334,16 @@
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@types/node": {
|
||||
"version": "22.10.5",
|
||||
"resolved": "https://registry.npmjs.org/@types/node/-/node-22.10.5.tgz",
|
||||
"integrity": "sha512-F8Q+SeGimwOo86fiovQh8qiXfFEh2/ocYv7tU5pJ3EXMSSxk1Joj5wefpFK2fHTf/N6HKGSxIDBT9f3gCxXPkQ==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"undici-types": "~6.20.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/resolve": {
|
||||
"version": "1.20.2",
|
||||
"resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.20.2.tgz",
|
||||
@ -1996,6 +2137,13 @@
|
||||
"node": ">= 6"
|
||||
}
|
||||
},
|
||||
"node_modules/commondir": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz",
|
||||
"integrity": "sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/concat-map": {
|
||||
"version": "0.0.1",
|
||||
"resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
|
||||
@ -2639,6 +2787,33 @@
|
||||
"url": "https://github.com/sponsors/rawify"
|
||||
}
|
||||
},
|
||||
"node_modules/framer-motion": {
|
||||
"version": "11.17.0",
|
||||
"resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.17.0.tgz",
|
||||
"integrity": "sha512-uTNLH9JPMD3ad14WBt3KYRTR+If4tGPLgKTKTIIPaEBMkvazs6EkWNcmCh65qA/tyinOqIbQiuCorXX0qQsNoQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"motion-dom": "^11.16.4",
|
||||
"motion-utils": "^11.16.0",
|
||||
"tslib": "^2.4.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@emotion/is-prop-valid": "*",
|
||||
"react": "^18.0.0 || ^19.0.0",
|
||||
"react-dom": "^18.0.0 || ^19.0.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@emotion/is-prop-valid": {
|
||||
"optional": true
|
||||
},
|
||||
"react": {
|
||||
"optional": true
|
||||
},
|
||||
"react-dom": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/fsevents": {
|
||||
"version": "2.3.2",
|
||||
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
|
||||
@ -3179,6 +3354,47 @@
|
||||
"node": ">=16 || 14 >=14.17"
|
||||
}
|
||||
},
|
||||
"node_modules/motion": {
|
||||
"version": "11.17.0",
|
||||
"resolved": "https://registry.npmjs.org/motion/-/motion-11.17.0.tgz",
|
||||
"integrity": "sha512-mWZhIOWH2slNXPUWhr6cEu98bl9NMX7u9r7vdNI+Bm3/jrOEa3e44GmyUuwXr9hWR+rWII27YTnKb6CDD1vU2g==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"framer-motion": "^11.17.0",
|
||||
"tslib": "^2.4.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@emotion/is-prop-valid": "*",
|
||||
"react": "^18.0.0 || ^19.0.0",
|
||||
"react-dom": "^18.0.0 || ^19.0.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@emotion/is-prop-valid": {
|
||||
"optional": true
|
||||
},
|
||||
"react": {
|
||||
"optional": true
|
||||
},
|
||||
"react-dom": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/motion-dom": {
|
||||
"version": "11.16.4",
|
||||
"resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-11.16.4.tgz",
|
||||
"integrity": "sha512-2wuCie206pCiP2K23uvwJeci4pMFfyQKpWI0Vy6HrCTDzDCer4TsYtT7IVnuGbDeoIV37UuZiUr6SZMHEc1Vww==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"motion-utils": "^11.16.0"
|
||||
}
|
||||
},
|
||||
"node_modules/motion-utils": {
|
||||
"version": "11.16.0",
|
||||
"resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-11.16.0.tgz",
|
||||
"integrity": "sha512-ngdWPjg31rD4WGXFi0eZ00DQQqKKu04QExyv/ymlC+3k+WIgYVFbt6gS5JsFPbJODTF/r8XiE/X+SsoT9c0ocw==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/mri": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmjs.org/mri/-/mri-1.2.0.tgz",
|
||||
@ -3481,6 +3697,12 @@
|
||||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"node_modules/pocketbase": {
|
||||
"version": "0.25.0",
|
||||
"resolved": "https://registry.npmjs.org/pocketbase/-/pocketbase-0.25.0.tgz",
|
||||
"integrity": "sha512-xbjiQG/tnh2HsjZrTW7ZEJASvl4hmGAB5PQAmNRkRU8BmrPib7zwKyXdiYJl34QN7ADpqykZD2lAMdDtrrQbuw==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/postcss": {
|
||||
"version": "8.4.47",
|
||||
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.47.tgz",
|
||||
@ -4696,6 +4918,12 @@
|
||||
"integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==",
|
||||
"license": "Apache-2.0"
|
||||
},
|
||||
"node_modules/tslib": {
|
||||
"version": "2.8.1",
|
||||
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
|
||||
"integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
|
||||
"license": "0BSD"
|
||||
},
|
||||
"node_modules/type-check": {
|
||||
"version": "0.4.0",
|
||||
"resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
|
||||
@ -4747,6 +4975,13 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/undici-types": {
|
||||
"version": "6.20.0",
|
||||
"resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.20.0.tgz",
|
||||
"integrity": "sha512-Ny6QZ2Nju20vw1SRHe3d9jVu6gJ+4e3+MMpqu7pqE5HT6WsTSlce++GQmK5UXS8mzV8DSYHrQH+Xrf2jVcuKNg==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/update-browserslist-db": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.0.tgz",
|
||||
|
||||
@ -17,10 +17,12 @@
|
||||
"devDependencies": {
|
||||
"@playwright/test": "^1.28.1",
|
||||
"@sveltejs/adapter-auto": "^3.0.0",
|
||||
"@sveltejs/adapter-node": "^5.2.11",
|
||||
"@sveltejs/kit": "^2.5.27",
|
||||
"@sveltejs/vite-plugin-svelte": "^4.0.0",
|
||||
"@tailwindcss/typography": "^0.5.14",
|
||||
"@types/eslint": "^9.6.0",
|
||||
"@types/node": "^22.10.5",
|
||||
"autoprefixer": "^10.4.20",
|
||||
"eslint": "^9.0.0",
|
||||
"eslint-config-prettier": "^9.1.0",
|
||||
@ -41,6 +43,8 @@
|
||||
"dependencies": {
|
||||
"flowbite": "^2.5.1",
|
||||
"flowbite-svelte": "^0.46.16",
|
||||
"flowbite-svelte-icons": "^1.6.1"
|
||||
"flowbite-svelte-icons": "^1.6.1",
|
||||
"motion": "^11.17.0",
|
||||
"pocketbase": "^0.25.0"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,3 +1,10 @@
|
||||
@import 'tailwindcss/base';
|
||||
@import 'tailwindcss/components';
|
||||
@import 'tailwindcss/utilities';
|
||||
body {
|
||||
position: relative;
|
||||
min-height: 100svh;
|
||||
}
|
||||
html {
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
21
src/components/Footer.svelte
Normal file
21
src/components/Footer.svelte
Normal file
@ -0,0 +1,21 @@
|
||||
<script>
|
||||
import { Footer, FooterCopyright, FooterLinkGroup, FooterLink } from 'flowbite-svelte';
|
||||
</script>
|
||||
|
||||
<Footer class="absolute bottom-0 w-full p-4">
|
||||
<div class="sm:flex sm:items-center sm:justify-between">
|
||||
<FooterCopyright
|
||||
href="/"
|
||||
by="edv-ring Gesellschaft für Hard- und Softwarelösungen im Gartenbau mbH"
|
||||
year={2025}
|
||||
/>
|
||||
<FooterLinkGroup
|
||||
ulClass="flex flex-wrap items-center mt-3 text-sm text-gray-500 dark:text-gray-400 sm:mt-0"
|
||||
>
|
||||
<FooterLink href="/">About</FooterLink>
|
||||
<FooterLink href="/">Privacy Policy</FooterLink>
|
||||
<FooterLink href="/">Terms & Conditions</FooterLink>
|
||||
<FooterLink href="/">Contact</FooterLink>
|
||||
</FooterLinkGroup>
|
||||
</div>
|
||||
</Footer>
|
||||
136
src/components/ShoppingCart.svelte
Normal file
136
src/components/ShoppingCart.svelte
Normal file
@ -0,0 +1,136 @@
|
||||
<script lang="ts">
|
||||
import { fly, fade } from 'svelte/transition';
|
||||
import { Button } from 'flowbite-svelte';
|
||||
import { cart, clearCart, removeFromCart, updateQuantity } from '$lib/stores/cartStore';
|
||||
import { ArrowRightOutline, CartOutline } from 'flowbite-svelte-icons';
|
||||
import { clickOutside } from '$lib/utils/clickOutside';
|
||||
import { goto } from '$app/navigation';
|
||||
|
||||
let isOpen = false;
|
||||
let isUpdating = false;
|
||||
let updateTimeout: NodeJS.Timeout;
|
||||
|
||||
// Calculate the total price
|
||||
$: total = $cart.reduce((sum, item) => sum + item.price * item.quantity, 0);
|
||||
|
||||
// Debounced quantity update
|
||||
const handleQuantityChange = (id: number, quantity: number) => {
|
||||
clearTimeout(updateTimeout);
|
||||
isUpdating = true;
|
||||
|
||||
updateTimeout = setTimeout(() => {
|
||||
updateQuantity(id, quantity);
|
||||
isUpdating = false;
|
||||
}, 500);
|
||||
};
|
||||
|
||||
const handleClickOutside = () => {
|
||||
isOpen = false;
|
||||
};
|
||||
|
||||
// Animation for item removal
|
||||
const removeItem = async (id: number) => {
|
||||
const itemElement = document.getElementById(`cart-item-${id}`);
|
||||
if (itemElement) {
|
||||
itemElement.style.transition = 'all 0.3s ease-out';
|
||||
itemElement.style.opacity = '0';
|
||||
itemElement.style.transform = 'translateX(20px)';
|
||||
|
||||
setTimeout(() => {
|
||||
removeFromCart(id);
|
||||
}, 300);
|
||||
}
|
||||
};
|
||||
|
||||
// Navigate to the webshop
|
||||
const goToShop = () => {
|
||||
isOpen = !isOpen;
|
||||
goto('/main');
|
||||
};
|
||||
</script>
|
||||
|
||||
<!-- Cart Icon Button with Badge -->
|
||||
<div class="relative">
|
||||
<Button on:click={() => (isOpen = !isOpen)} class="relative h-12">
|
||||
<CartOutline size="lg" />
|
||||
{#if $cart.length > 0}
|
||||
<span
|
||||
class="absolute -right-2 -top-2 flex h-5 w-5 items-center justify-center rounded-full bg-red-500 text-xs text-white"
|
||||
transition:fade
|
||||
>
|
||||
{$cart.length}
|
||||
</span>
|
||||
{/if}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<!-- Cart Popup -->
|
||||
{#if isOpen}
|
||||
<div
|
||||
transition:fly={{ y: 50, duration: 300 }}
|
||||
class="fixed right-40 top-20 z-50 w-96 rounded-lg bg-white p-4 shadow-lg"
|
||||
use:clickOutside={handleClickOutside}
|
||||
>
|
||||
<!-- Rest of the cart popup content remains the same -->
|
||||
<h2 class="mb-4 text-lg font-bold">Shopping Cart</h2>
|
||||
|
||||
{#if $cart.length === 0}
|
||||
<p class="py-4 text-center text-gray-500">Your cart is empty</p>
|
||||
<Button size="xl" on:click={goToShop}>
|
||||
Shop Now <ArrowRightOutline class="ml-2 h-5 w-5" />
|
||||
</Button>
|
||||
{:else}
|
||||
<ul class="max-h-96 space-y-3 overflow-y-auto">
|
||||
{#each $cart as item (item.id)}
|
||||
<li
|
||||
id="cart-item-{item.id}"
|
||||
class="flex items-center justify-between rounded-lg bg-gray-50 p-3 transition-all duration-200 hover:bg-gray-100"
|
||||
>
|
||||
<div class="flex-grow">
|
||||
<h3 class="font-semibold">{item.title}</h3>
|
||||
<p class="text-sm text-gray-600">${item.price.toFixed(2)} each</p>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="relative">
|
||||
<input
|
||||
type="number"
|
||||
value={item.quantity}
|
||||
min="1"
|
||||
on:input={(e) => handleQuantityChange(item.id, parseInt(e.currentTarget.value))}
|
||||
class="w-16 rounded border p-1 text-center"
|
||||
/>
|
||||
{#if isUpdating}
|
||||
<span
|
||||
class="absolute -top-1 right-0 h-2 w-2 animate-pulse rounded-full bg-blue-500"
|
||||
></span>
|
||||
{/if}
|
||||
</div>
|
||||
<button
|
||||
on:click={() => removeItem(item.id)}
|
||||
class="rounded p-1 text-red-500 transition-colors hover:bg-red-50 hover:text-red-700"
|
||||
>
|
||||
🗑️
|
||||
</button>
|
||||
</div>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
|
||||
<div class="mt-4 border-t pt-4">
|
||||
<div class="flex justify-between">
|
||||
<span class="font-semibold">Total:</span>
|
||||
<span class="text-lg font-bold">${total.toFixed(2)}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-4 space-y-2">
|
||||
<Button href="/checkout" on:click={() => (isOpen = !isOpen)} class="w-full"
|
||||
>Proceed to Checkout</Button
|
||||
>
|
||||
<Button on:click={() => clearCart()} color="red" class="w-full" variant="outline">
|
||||
Clear Cart
|
||||
</Button>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
28
src/components/imageModal.svelte
Normal file
28
src/components/imageModal.svelte
Normal file
@ -0,0 +1,28 @@
|
||||
<script lang="ts">
|
||||
import { Modal, Button } from 'flowbite-svelte';
|
||||
import { fade, scale } from 'svelte/transition';
|
||||
import { quintOut } from 'svelte/easing';
|
||||
|
||||
export let open = false;
|
||||
export let imageUrl: string = '';
|
||||
export let title: string = '';
|
||||
export let onClose: () => void;
|
||||
|
||||
const handleClose = () => {
|
||||
onClose();
|
||||
};
|
||||
</script>
|
||||
|
||||
<Modal bind:open size="xl" autoclose class="w-full max-w-4xl" on:close={handleClose}>
|
||||
<div class="relative" in:scale={{ duration: 300, easing: quintOut }} out:fade={{ duration: 200 }}>
|
||||
<img
|
||||
src={imageUrl}
|
||||
alt={title}
|
||||
class="h-full w-full rounded-lg object-cover p-4"
|
||||
in:scale={{ duration: 400, delay: 100, easing: quintOut }}
|
||||
/>
|
||||
<div class="mt-4 text-center">
|
||||
<h3 class="text-xl font-semibold text-gray-900 dark:text-white">{title}</h3>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
@ -9,34 +9,38 @@
|
||||
Input,
|
||||
Avatar
|
||||
} from 'flowbite-svelte';
|
||||
import { CartOutline, SearchOutline } from 'flowbite-svelte-icons';
|
||||
import { CartOutline, SearchOutline, StarOutline } from 'flowbite-svelte-icons';
|
||||
import ShoppingCart from './ShoppingCart.svelte';
|
||||
</script>
|
||||
|
||||
<Navbar>
|
||||
<Navbar class="sticky top-0 z-50 bg-white shadow-sm">
|
||||
<NavBrand href="/">
|
||||
<img
|
||||
src="https://images.unsplash.com/photo-1520763185298-1b434c919102?q=80&w=1932&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
|
||||
class="me-3 h-6 sm:h-9"
|
||||
src="https://www.edvring.info/dam/jcr:334766c1-59b9-40ed-b5fa-727d549d4e88/edvLogo.svg"
|
||||
class="me-3 h-7 sm:h-9"
|
||||
alt="Flowbite Logo"
|
||||
/>
|
||||
<span class="self-center whitespace-nowrap text-xl font-semibold dark:text-white">Webshop</span>
|
||||
</NavBrand>
|
||||
|
||||
<div class="relative hidden md:block">
|
||||
<!-- <div class="relative hidden md:block">
|
||||
<div class="pointer-events-none absolute inset-y-0 start-0 flex items-center ps-3">
|
||||
<SearchOutline class="h-4 w-4" />
|
||||
</div>
|
||||
<Input id="search-navbar" class="ps-10" placeholder="Search..." />
|
||||
</div>
|
||||
<Input id="search-navbar" class="w-96 ps-10" placeholder="Search..." />
|
||||
</div> -->
|
||||
|
||||
<div class="flex">
|
||||
<Avatar
|
||||
href="/profile"
|
||||
src="https://images.unsplash.com/photo-1520763185298-1b434c919102?q=80&w=1932&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
|
||||
class="m-1 me-4"
|
||||
src="https://media.istockphoto.com/id/1223671392/de/vektor/standardprofilbild-avatar-fotoplatzhalter-vektor-illustration.jpg?s=612x612&w=0&k=20&c=vtYE5RcgwgrJ1Zg6r66xN25LpXS_xsxZ8NqtvRQ9w6I="
|
||||
class="m-1 me-4 h-10 border-2"
|
||||
/>
|
||||
<Button>
|
||||
<CartOutline size="lg"></CartOutline>
|
||||
</Button>
|
||||
<a href="/favourites">
|
||||
<Button class="me-2 h-12">
|
||||
<StarOutline size="lg" />
|
||||
</Button>
|
||||
</a>
|
||||
<ShoppingCart />
|
||||
</div>
|
||||
</Navbar>
|
||||
|
||||
@ -1 +0,0 @@
|
||||
// place files you want to import through the `$lib` alias in this folder.
|
||||
262
src/lib/services/api.ts
Normal file
262
src/lib/services/api.ts
Normal file
@ -0,0 +1,262 @@
|
||||
import PocketBase from 'pocketbase';
|
||||
|
||||
// Types for our data models
|
||||
interface Product {
|
||||
id: string;
|
||||
name: string;
|
||||
description: string;
|
||||
price: number;
|
||||
stock: number;
|
||||
category: string;
|
||||
images: string[];
|
||||
variants?: Record<string, unknown>[];
|
||||
metadata?: Record<string, unknown>;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
}
|
||||
|
||||
interface Order {
|
||||
id: string;
|
||||
userId: string;
|
||||
items: OrderItem[];
|
||||
status: OrderStatus;
|
||||
total: number;
|
||||
shippingAddress: Address;
|
||||
billingAddress: Address;
|
||||
paymentInfo: PaymentInfo;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
}
|
||||
|
||||
interface OrderItem {
|
||||
productId: string;
|
||||
quantity: number;
|
||||
price: number;
|
||||
variants?: Record<string, unknown>;
|
||||
}
|
||||
|
||||
interface User {
|
||||
id: string;
|
||||
email: string;
|
||||
name: string;
|
||||
addresses: Address[];
|
||||
orders?: string[];
|
||||
wishlist?: string[];
|
||||
metadata?: Record<string, unknown>;
|
||||
}
|
||||
|
||||
interface Address {
|
||||
street: string;
|
||||
city: string;
|
||||
state: string;
|
||||
country: string;
|
||||
zipCode: string;
|
||||
}
|
||||
|
||||
interface PaymentInfo {
|
||||
provider: string;
|
||||
transactionId: string;
|
||||
status: string;
|
||||
amount: number;
|
||||
}
|
||||
|
||||
enum OrderStatus {
|
||||
PENDING = 'pending',
|
||||
PAID = 'paid',
|
||||
PROCESSING = 'processing',
|
||||
SHIPPED = 'shipped',
|
||||
DELIVERED = 'delivered',
|
||||
CANCELLED = 'cancelled',
|
||||
REFUNDED = 'refunded'
|
||||
}
|
||||
|
||||
class WebshopAPI {
|
||||
private pb: PocketBase;
|
||||
|
||||
constructor(url: string) {
|
||||
this.pb = new PocketBase(url);
|
||||
}
|
||||
|
||||
// Authentication methods
|
||||
async login(email: string, password: string) {
|
||||
return await this.pb.collection('users').authWithPassword(email, password);
|
||||
}
|
||||
|
||||
async register(userData: Partial<User>, password: string) {
|
||||
return await this.pb.collection('users').create({
|
||||
...userData,
|
||||
passwordConfirm: password,
|
||||
password
|
||||
});
|
||||
}
|
||||
|
||||
async logout() {
|
||||
this.pb.authStore.clear();
|
||||
}
|
||||
|
||||
async requestPasswordReset(email: string) {
|
||||
return await this.pb.collection('users').requestPasswordReset(email);
|
||||
}
|
||||
|
||||
// Product methods
|
||||
async getProducts(page: number = 1, perPage: number = 20, filters?: string) {
|
||||
return await this.pb.collection('products').getList(page, perPage, {
|
||||
filter: filters,
|
||||
sort: '-created'
|
||||
});
|
||||
}
|
||||
|
||||
async getProduct(id: string) {
|
||||
return await this.pb.collection('products').getOne<Product>(id);
|
||||
}
|
||||
|
||||
async searchProducts(query: string, page: number = 1, perPage: number = 20) {
|
||||
return await this.pb.collection('products').getList(page, perPage, {
|
||||
filter: `name ~ "${query}" || description ~ "${query}"`
|
||||
});
|
||||
}
|
||||
|
||||
async getProductsByCategory(category: string, page: number = 1, perPage: number = 20) {
|
||||
return await this.pb.collection('products').getList(page, perPage, {
|
||||
filter: `category = "${category}"`
|
||||
});
|
||||
}
|
||||
|
||||
// Cart methods (using local storage for cart management)
|
||||
getCart(): OrderItem[] {
|
||||
const cart = localStorage.getItem('cart');
|
||||
return cart ? JSON.parse(cart) : [];
|
||||
}
|
||||
|
||||
addToCart(item: OrderItem) {
|
||||
const cart = this.getCart();
|
||||
const existingItem = cart.find((i) => i.productId === item.productId);
|
||||
|
||||
if (existingItem) {
|
||||
existingItem.quantity += item.quantity;
|
||||
} else {
|
||||
cart.push(item);
|
||||
}
|
||||
|
||||
localStorage.setItem('cart', JSON.stringify(cart));
|
||||
}
|
||||
|
||||
updateCartItem(productId: string, quantity: number) {
|
||||
const cart = this.getCart();
|
||||
const item = cart.find((i) => i.productId === productId);
|
||||
|
||||
if (item) {
|
||||
item.quantity = quantity;
|
||||
localStorage.setItem('cart', JSON.stringify(cart));
|
||||
}
|
||||
}
|
||||
|
||||
removeFromCart(productId: string) {
|
||||
const cart = this.getCart();
|
||||
const updatedCart = cart.filter((i) => i.productId !== productId);
|
||||
localStorage.setItem('cart', JSON.stringify(updatedCart));
|
||||
}
|
||||
|
||||
clearCart() {
|
||||
localStorage.removeItem('cart');
|
||||
}
|
||||
|
||||
// Order methods
|
||||
async createOrder(orderData: Partial<Order>) {
|
||||
return await this.pb.collection('orders').create(orderData);
|
||||
}
|
||||
|
||||
async getOrder(id: string) {
|
||||
return await this.pb.collection('orders').getOne<Order>(id);
|
||||
}
|
||||
|
||||
async getUserOrders(userId: string, page: number = 1, perPage: number = 20) {
|
||||
return await this.pb.collection('orders').getList(page, perPage, {
|
||||
filter: `userId = "${userId}"`,
|
||||
sort: '-created'
|
||||
});
|
||||
}
|
||||
|
||||
async updateOrderStatus(orderId: string, status: OrderStatus) {
|
||||
return await this.pb.collection('orders').update(orderId, { status });
|
||||
}
|
||||
|
||||
// User profile methods
|
||||
async getCurrentUser() {
|
||||
if (!this.pb.authStore.isValid) return null;
|
||||
return await this.pb.collection('users').getOne<User>(this.pb.authStore.model?.id as string);
|
||||
}
|
||||
|
||||
async updateUserProfile(userId: string, userData: Partial<User>) {
|
||||
return await this.pb.collection('users').update(userId, userData);
|
||||
}
|
||||
|
||||
async addAddress(userId: string, address: Address) {
|
||||
const user = await this.getCurrentUser();
|
||||
if (!user) throw new Error('User not authenticated');
|
||||
|
||||
const addresses = [...(user.addresses || []), address];
|
||||
return await this.updateUserProfile(userId, { addresses });
|
||||
}
|
||||
|
||||
// Wishlist methods
|
||||
async addToWishlist(userId: string, productId: string) {
|
||||
const user = await this.getCurrentUser();
|
||||
if (!user) throw new Error('User not authenticated');
|
||||
|
||||
const wishlist = [...(user.wishlist || []), productId];
|
||||
return await this.updateUserProfile(userId, { wishlist });
|
||||
}
|
||||
|
||||
async removeFromWishlist(userId: string, productId: string) {
|
||||
const user = await this.getCurrentUser();
|
||||
if (!user) throw new Error('User not authenticated');
|
||||
|
||||
const wishlist = (user.wishlist || []).filter((id: unknown) => id !== productId);
|
||||
return await this.updateUserProfile(userId, { wishlist });
|
||||
}
|
||||
|
||||
// Category methods
|
||||
async getCategories() {
|
||||
return await this.pb.collection('categories').getFullList();
|
||||
}
|
||||
|
||||
// Review methods
|
||||
async addProductReview(productId: string, rating: number, comment: string) {
|
||||
return await this.pb.collection('reviews').create({
|
||||
productId,
|
||||
rating,
|
||||
comment,
|
||||
userId: this.pb.authStore.model?.id
|
||||
});
|
||||
}
|
||||
|
||||
async getProductReviews(productId: string, page: number = 1, perPage: number = 20) {
|
||||
return await this.pb.collection('reviews').getList(page, perPage, {
|
||||
filter: `productId = "${productId}"`,
|
||||
sort: '-created'
|
||||
});
|
||||
}
|
||||
|
||||
// Admin methods (requires admin privileges)
|
||||
async createProduct(productData: Partial<Product>) {
|
||||
return await this.pb.collection('products').create(productData);
|
||||
}
|
||||
|
||||
async updateProduct(id: string, productData: Partial<Product>) {
|
||||
return await this.pb.collection('products').update(id, productData);
|
||||
}
|
||||
|
||||
async deleteProduct(id: string) {
|
||||
return await this.pb.collection('products').delete(id);
|
||||
}
|
||||
|
||||
async updateStock(productId: string, quantity: number) {
|
||||
const product = await this.getProduct(productId);
|
||||
return await this.updateProduct(productId, {
|
||||
stock: product.stock + quantity
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
export default WebshopAPI;
|
||||
@ -1,28 +1,21 @@
|
||||
import type { User } from './types';
|
||||
const USER_KEY = 'user';
|
||||
const PASS_KEY = 'username';
|
||||
|
||||
const key = 'user';
|
||||
const key2 = 'username';
|
||||
export const login = (user: string, password: string) => {
|
||||
localStorage.setItem(USER_KEY, user);
|
||||
localStorage.setItem(PASS_KEY, password);
|
||||
};
|
||||
|
||||
function login(user: User) {
|
||||
localStorage.setItem(key, btoa(`${user.username}:${user.password}`));
|
||||
localStorage.setItem(key2, user.username);
|
||||
}
|
||||
export const logout = () => {
|
||||
localStorage.removeItem(USER_KEY);
|
||||
localStorage.removeItem(PASS_KEY);
|
||||
window.location.reload();
|
||||
};
|
||||
|
||||
function logout() {
|
||||
localStorage.removeItem(key);
|
||||
localStorage.removeItem(key2);
|
||||
}
|
||||
export const loggedIn = () => localStorage.getItem(USER_KEY) !== null;
|
||||
|
||||
function loggedIn() {
|
||||
return localStorage.getItem(key) !== null;
|
||||
}
|
||||
export const name = () => localStorage.getItem(PASS_KEY) ?? '';
|
||||
|
||||
function name() {
|
||||
return localStorage.getItem(key2) ?? '';
|
||||
}
|
||||
|
||||
function auth() {
|
||||
return localStorage.getItem(key);
|
||||
}
|
||||
export const auth = () => localStorage.getItem(USER_KEY);
|
||||
|
||||
export default { login, logout, loggedIn, name, auth };
|
||||
|
||||
47
src/lib/stores/cartStore.ts
Normal file
47
src/lib/stores/cartStore.ts
Normal file
@ -0,0 +1,47 @@
|
||||
import { writable } from 'svelte/store';
|
||||
|
||||
// Define the type for a product
|
||||
export interface Product {
|
||||
id: number;
|
||||
title: string;
|
||||
description: string;
|
||||
imageUrl: string;
|
||||
price: number;
|
||||
quantity: number;
|
||||
}
|
||||
|
||||
// Initialize the cart store
|
||||
export const cart = writable<Product[]>([]);
|
||||
|
||||
// Add a product to the cart
|
||||
export const addToCart = (product: Product) => {
|
||||
cart.update((items) => {
|
||||
const existingItem = items.find((item) => item.id === product.id);
|
||||
if (existingItem) {
|
||||
// If the product already exists, increase the quantity
|
||||
return items.map((item) =>
|
||||
item.id === product.id ? { ...item, quantity: item.quantity + 1 } : item
|
||||
);
|
||||
} else {
|
||||
// If the product doesn't exist, add it to the cart
|
||||
return [...items, { ...product, quantity: 1 }];
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// Remove a product from the cart
|
||||
export const removeFromCart = (productId: number) => {
|
||||
cart.update((items) => items.filter((item) => item.id !== productId));
|
||||
};
|
||||
|
||||
// Update the quantity of a product in the cart
|
||||
export const updateQuantity = (productId: number, quantity: number) => {
|
||||
cart.update((items) =>
|
||||
items.map((item) => (item.id === productId ? { ...item, quantity } : item))
|
||||
);
|
||||
};
|
||||
|
||||
// Clear the cart
|
||||
export const clearCart = () => {
|
||||
cart.set([]);
|
||||
};
|
||||
86
src/lib/stores/store.ts
Normal file
86
src/lib/stores/store.ts
Normal file
@ -0,0 +1,86 @@
|
||||
import { writable } from 'svelte/store';
|
||||
|
||||
// Define the type for a product
|
||||
export interface Product {
|
||||
id: number;
|
||||
title: string;
|
||||
description: string;
|
||||
imageUrl: string;
|
||||
price: number; // Added price for cart calculations
|
||||
quantity?: number; // Optional quantity for cart items
|
||||
}
|
||||
|
||||
// Define the type for the cart and favorites
|
||||
export interface AppState {
|
||||
cart: Product[];
|
||||
favorites: Product[];
|
||||
}
|
||||
|
||||
// Initialize the store
|
||||
const initialState: AppState = {
|
||||
cart: [],
|
||||
favorites: []
|
||||
};
|
||||
|
||||
export const appStore = writable<AppState>(initialState);
|
||||
export const favorites = writable<Product[]>([]);
|
||||
|
||||
// Add a product to the cart
|
||||
export const addToCart = (product: Product) => {
|
||||
appStore.update((state) => {
|
||||
const existingItem = state.cart.find((item) => item.id === product.id);
|
||||
if (existingItem) {
|
||||
// If the product already exists, increase the quantity
|
||||
return {
|
||||
...state,
|
||||
cart: state.cart.map((item) =>
|
||||
item.id === product.id ? { ...item, quantity: (item.quantity || 1) + 1 } : item
|
||||
)
|
||||
};
|
||||
} else {
|
||||
// If the product doesn't exist, add it to the cart with quantity 1
|
||||
return { ...state, cart: [...state.cart, { ...product, quantity: 1 }] };
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// Remove a product from the cart
|
||||
export const removeFromCart = (productId: number) => {
|
||||
appStore.update((state) => ({
|
||||
...state,
|
||||
cart: state.cart.filter((item) => item.id !== productId)
|
||||
}));
|
||||
};
|
||||
|
||||
// Update the quantity of a product in the cart
|
||||
export const updateCartQuantity = (productId: number, quantity: number) => {
|
||||
appStore.update((state) => ({
|
||||
...state,
|
||||
cart: state.cart.map((item) => (item.id === productId ? { ...item, quantity } : item))
|
||||
}));
|
||||
};
|
||||
|
||||
// Add a product to favorites
|
||||
export const addToFavorites = (product: Product) => {
|
||||
favorites.update((items) => {
|
||||
if (!items.some((item) => item.id === product.id)) {
|
||||
return [...items, product];
|
||||
}
|
||||
return items;
|
||||
});
|
||||
};
|
||||
|
||||
// Remove a product from favorites
|
||||
export const removeFromFavorites = (productId: number) => {
|
||||
favorites.update((items) => items.filter((item) => item.id !== productId));
|
||||
};
|
||||
|
||||
// Clear the cart
|
||||
export const clearCart = () => {
|
||||
appStore.update((state) => ({ ...state, cart: [] }));
|
||||
};
|
||||
|
||||
// Clear favorites
|
||||
export const clearFavorites = () => {
|
||||
favorites.update((state) => ({ ...state, favorites: [] }));
|
||||
};
|
||||
@ -1,4 +0,0 @@
|
||||
export interface User {
|
||||
username: string;
|
||||
password: string;
|
||||
}
|
||||
18
src/lib/utils/clickOutside.ts
Normal file
18
src/lib/utils/clickOutside.ts
Normal file
@ -0,0 +1,18 @@
|
||||
export function clickOutside(node: HTMLElement, handler: () => void) {
|
||||
const handleClick = (event: MouseEvent) => {
|
||||
if (node && !node.contains(event.target as Node)) {
|
||||
handler();
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener('click', handleClick, true);
|
||||
|
||||
return {
|
||||
destroy() {
|
||||
document.removeEventListener('click', handleClick, true);
|
||||
},
|
||||
update(newHandler: () => void) {
|
||||
handler = newHandler;
|
||||
}
|
||||
};
|
||||
}
|
||||
@ -1,9 +1,10 @@
|
||||
<script>
|
||||
import Footer from '../../components/Footer.svelte';
|
||||
import Navbar from '../../components/navbar.svelte';
|
||||
|
||||
let { children } = $props();
|
||||
</script>
|
||||
|
||||
<Navbar></Navbar>
|
||||
|
||||
{@render children?.()}
|
||||
<Footer></Footer>
|
||||
|
||||
8
src/routes/(auth)/+layout.ts
Normal file
8
src/routes/(auth)/+layout.ts
Normal file
@ -0,0 +1,8 @@
|
||||
import session from "$lib/session.svelte";
|
||||
import { redirect } from "@sveltejs/kit";
|
||||
|
||||
export async function load() {
|
||||
if (!session.loggedIn()) {
|
||||
redirect(307, "/login");
|
||||
}
|
||||
}
|
||||
45
src/routes/(auth)/about/+page.svelte
Normal file
45
src/routes/(auth)/about/+page.svelte
Normal file
@ -0,0 +1,45 @@
|
||||
<script lang="ts">
|
||||
import { goto } from '$app/navigation';
|
||||
import { Button } from 'flowbite-svelte';
|
||||
|
||||
const goToShop = () => {
|
||||
goto('/shop');
|
||||
};
|
||||
</script>
|
||||
|
||||
<section class="bg-gradient-to-r from-pink-100 to-purple-100 py-20">
|
||||
<div class="container mx-auto px-4 text-center">
|
||||
<h1 class="mb-4 text-5xl font-bold text-gray-900">About Us</h1>
|
||||
<p class="mb-8 text-xl text-gray-600">
|
||||
We are passionate about bringing beauty and joy to your life through fresh, handpicked
|
||||
flowers.
|
||||
</p>
|
||||
<Button size="xl" on:click={goToShop}>Shop Now</Button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="py-16">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="grid grid-cols-1 gap-8 md:grid-cols-2">
|
||||
<div>
|
||||
<h2 class="mb-4 text-3xl font-bold text-gray-900">Our Story</h2>
|
||||
<p class="mb-4 text-gray-600">
|
||||
Founded in 2023, Flower Shop started as a small family business with a mission to deliver
|
||||
fresh, high-quality flowers to our community. Over the years, we've grown into a trusted
|
||||
online florist, serving customers across the country.
|
||||
</p>
|
||||
<p class="mb-4 text-gray-600">
|
||||
We believe that flowers have the power to brighten any day, and we're committed to making
|
||||
every bouquet special.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<img
|
||||
src="https://images.unsplash.com/photo-1520763185298-1b434c919102?q=80&w=1932&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
|
||||
alt="Our Story"
|
||||
class="rounded-lg shadow-lg"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
192
src/routes/(auth)/checkout/+page.svelte
Normal file
192
src/routes/(auth)/checkout/+page.svelte
Normal file
@ -0,0 +1,192 @@
|
||||
<script lang="ts">
|
||||
import { goto } from '$app/navigation';
|
||||
import { clearCart, cart, type Product } from '$lib/stores/cartStore';
|
||||
import { Card, Input, Button, Alert } from 'flowbite-svelte';
|
||||
import { fade } from 'svelte/transition';
|
||||
|
||||
// Form state
|
||||
let formData = {
|
||||
name: '',
|
||||
email: '',
|
||||
address: '',
|
||||
paymentMethod: 'credit_card'
|
||||
};
|
||||
|
||||
let isProcessing = false;
|
||||
let error = '';
|
||||
let success = '';
|
||||
|
||||
// Calculate the total price
|
||||
$: total = $cart.reduce((sum, item) => sum + item.price * item.quantity, 0);
|
||||
|
||||
// Form validation
|
||||
$: isFormValid =
|
||||
formData.name.length > 0 &&
|
||||
/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email) &&
|
||||
formData.address.length > 0;
|
||||
|
||||
// Handle form submission
|
||||
const handleCheckout = async () => {
|
||||
if (!isFormValid) {
|
||||
error = 'Please fill in all required fields correctly.';
|
||||
return;
|
||||
}
|
||||
|
||||
isProcessing = true;
|
||||
error = '';
|
||||
|
||||
const checkoutRequest = {
|
||||
...formData,
|
||||
items: $cart
|
||||
};
|
||||
|
||||
try {
|
||||
clearCart();
|
||||
goto(`/order-confirmation/12345`);
|
||||
} catch (err) {
|
||||
error = 'Failed to process checkout. Please try again.';
|
||||
} finally {
|
||||
isProcessing = false;
|
||||
}
|
||||
};
|
||||
|
||||
let modalOpen = false;
|
||||
let selectedImage = {
|
||||
url: '',
|
||||
title: ''
|
||||
};
|
||||
|
||||
const openImageModal = (product: Product) => {
|
||||
selectedImage = {
|
||||
url: product.imageUrl,
|
||||
title: product.title
|
||||
};
|
||||
modalOpen = true;
|
||||
};
|
||||
|
||||
const closeImageModal = () => {
|
||||
modalOpen = false;
|
||||
};
|
||||
</script>
|
||||
|
||||
<main class="mx-auto max-w-4xl p-6">
|
||||
<h1 class="mb-6 text-3xl font-bold">Checkout</h1>
|
||||
|
||||
{#if $cart.length === 0}
|
||||
<Alert color="red" class="mb-6">
|
||||
Your cart is empty. Please add items before checking out.
|
||||
</Alert>
|
||||
{:else}
|
||||
<div class="flex gap-10">
|
||||
<!-- Order Summary -->
|
||||
<Card class="mb-6">
|
||||
<h2 class="mb-4 text-xl font-semibold">Order Summary</h2>
|
||||
<ul class="space-y-3">
|
||||
{#each $cart as item}
|
||||
<li class="flex items-center justify-between rounded-lg bg-gray-50 p-3">
|
||||
<div class="flex">
|
||||
<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
|
||||
<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
|
||||
<img
|
||||
src={item.imageUrl}
|
||||
alt="item"
|
||||
class="me-2 h-20 w-20"
|
||||
on:click={() => openImageModal(item)}
|
||||
on:keydown={(e) => e.key === 'Enter' && openImageModal(item)}
|
||||
tabindex="0"
|
||||
/>
|
||||
<div>
|
||||
<h3 class="font-semibold">{item.title}</h3>
|
||||
<p class="text-sm text-gray-600">Quantity: {item.quantity}</p>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-lg font-medium">
|
||||
${(item.price * item.quantity).toFixed(2)}
|
||||
</span>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
<div class="mt-4 border-t pt-4">
|
||||
<div class="flex justify-between text-lg">
|
||||
<strong>Total:</strong>
|
||||
<span class="font-bold">${total.toFixed(2)}</span>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<!-- Customer Details Form -->
|
||||
<Card class="mb-6">
|
||||
<h2 class="mb-4 text-xl font-semibold">Customer Details</h2>
|
||||
<form on:submit|preventDefault={handleCheckout} class="space-y-4">
|
||||
<Input
|
||||
label="Full Name"
|
||||
bind:value={formData.name}
|
||||
placeholder="John Doe"
|
||||
required
|
||||
error={!formData.name && 'Name is required'}
|
||||
/>
|
||||
|
||||
<Input
|
||||
label="Email"
|
||||
type="email"
|
||||
bind:value={formData.email}
|
||||
placeholder="john@example.com"
|
||||
required
|
||||
error={formData.email &&
|
||||
!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email) &&
|
||||
'Please enter a valid email'}
|
||||
/>
|
||||
|
||||
<Input
|
||||
label="Shipping Address"
|
||||
bind:value={formData.address}
|
||||
placeholder="123 Main St, City, Country"
|
||||
required
|
||||
error={!formData.address && 'Address is required'}
|
||||
/>
|
||||
|
||||
<div>
|
||||
<label class="mb-2 block font-medium">Payment Method</label>
|
||||
<div class="space-y-2">
|
||||
{#each [{ value: 'credit_card', label: 'Credit Card', icon: '💳' }, { value: 'paypal', label: 'PayPal', icon: '🅿️' }, { value: 'cash_on_delivery', label: 'Cash on Delivery', icon: '💵' }] as method}
|
||||
<label
|
||||
class="flex cursor-pointer items-center gap-3 rounded-lg border p-3 transition-colors hover:bg-gray-50"
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
bind:group={formData.paymentMethod}
|
||||
value={method.value}
|
||||
class="h-4 w-4"
|
||||
/>
|
||||
<span>{method.icon}</span>
|
||||
<span>{method.label}</span>
|
||||
</label>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if error}
|
||||
<Alert color="red">
|
||||
{error}
|
||||
</Alert>
|
||||
{/if}
|
||||
|
||||
{#if success}
|
||||
<Alert color="green">
|
||||
{success}
|
||||
</Alert>
|
||||
{/if}
|
||||
|
||||
<Button type="submit" color="blue" class="w-full" disabled={isProcessing || !isFormValid}>
|
||||
{#if isProcessing}
|
||||
<span class="inline-block animate-spin">⌛</span>
|
||||
Processing...
|
||||
{:else}
|
||||
Place Order (${total.toFixed(2)})
|
||||
{/if}
|
||||
</Button>
|
||||
</form>
|
||||
</Card>
|
||||
</div>
|
||||
{/if}
|
||||
</main>
|
||||
43
src/routes/(auth)/contact/+page.svelte
Normal file
43
src/routes/(auth)/contact/+page.svelte
Normal file
@ -0,0 +1,43 @@
|
||||
<script lang="ts">
|
||||
import { Button, Input, Textarea } from 'flowbite-svelte';
|
||||
|
||||
let name = '';
|
||||
let email = '';
|
||||
let message = '';
|
||||
|
||||
const handleSubmit = () => {
|
||||
alert('Thank you for contacting us! We will get back to you soon.');
|
||||
name = '';
|
||||
email = '';
|
||||
message = '';
|
||||
};
|
||||
</script>
|
||||
|
||||
<section class="bg-gradient-to-r from-pink-100 to-purple-100 py-20">
|
||||
<div class="container mx-auto px-4 text-center">
|
||||
<h1 class="mb-4 text-5xl font-bold text-gray-900">Contact Us</h1>
|
||||
<p class="mb-8 text-xl text-gray-600">Have questions or need assistance? We're here to help!</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="py-16">
|
||||
<div class="container mx-auto max-w-2xl px-4">
|
||||
<form on:submit|preventDefault={handleSubmit} class="space-y-6">
|
||||
<Input label="Your Name" bind:value={name} placeholder="John Doe" required />
|
||||
<Input
|
||||
label="Your Email"
|
||||
type="email"
|
||||
bind:value={email}
|
||||
placeholder="john@example.com"
|
||||
required
|
||||
/>
|
||||
<Textarea
|
||||
label="Your Message"
|
||||
bind:value={message}
|
||||
placeholder="How can we help you?"
|
||||
required
|
||||
/>
|
||||
<Button type="submit" class="w-full">Send Message</Button>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
44
src/routes/(auth)/faq/+page.svelte
Normal file
44
src/routes/(auth)/faq/+page.svelte
Normal file
@ -0,0 +1,44 @@
|
||||
<script lang="ts">
|
||||
const faqs = [
|
||||
{
|
||||
question: 'How do I place an order?',
|
||||
answer:
|
||||
'You can place an order directly through our website by selecting your desired products and proceeding to checkout.'
|
||||
},
|
||||
{
|
||||
question: 'What payment methods do you accept?',
|
||||
answer: 'We accept all major credit cards, PayPal, and Apple Pay.'
|
||||
},
|
||||
{
|
||||
question: 'Do you offer international shipping?',
|
||||
answer: 'Currently, we only ship within the United States.'
|
||||
},
|
||||
{
|
||||
question: 'Can I cancel or change my order?',
|
||||
answer:
|
||||
'You can cancel or change your order within 1 hour of placing it. Please contact us immediately for assistance.'
|
||||
}
|
||||
];
|
||||
</script>
|
||||
|
||||
<section class="bg-gradient-to-r from-pink-100 to-purple-100 py-20">
|
||||
<div class="container mx-auto px-4 text-center">
|
||||
<h1 class="mb-4 text-5xl font-bold text-gray-900">Frequently Asked Questions</h1>
|
||||
<p class="mb-8 text-xl text-gray-600">
|
||||
Find answers to common questions about our products and services.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="py-16">
|
||||
<div class="container mx-auto max-w-2xl px-4">
|
||||
<div class="space-y-6">
|
||||
{#each faqs as faq}
|
||||
<div class="rounded-lg bg-white p-6 shadow-lg">
|
||||
<h3 class="mb-2 text-xl font-bold text-gray-900">{faq.question}</h3>
|
||||
<p class="text-gray-600">{faq.answer}</p>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
33
src/routes/(auth)/favourites/+page.svelte
Normal file
33
src/routes/(auth)/favourites/+page.svelte
Normal file
@ -0,0 +1,33 @@
|
||||
<script lang="ts">
|
||||
import { favorites, removeFromFavorites, clearFavorites } from '$lib/stores/store';
|
||||
</script>
|
||||
|
||||
<main class="p-6">
|
||||
<h1 class="mb-6 text-3xl font-bold">Favorites</h1>
|
||||
{#if $favorites.length > 0}
|
||||
<ul class="space-y-4">
|
||||
{#each $favorites as item}
|
||||
<li class="flex items-center justify-between border-b pb-4">
|
||||
<div>
|
||||
<h2 class="text-xl font-semibold">{item.title}</h2>
|
||||
<p class="text-gray-600">{item.description}</p>
|
||||
</div>
|
||||
<button
|
||||
on:click={() => removeFromFavorites(item.id)}
|
||||
class="text-red-500 hover:text-red-700"
|
||||
>
|
||||
🗑️
|
||||
</button>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
<button
|
||||
on:click={clearFavorites}
|
||||
class="mt-4 w-full rounded bg-red-500 p-2 text-white hover:bg-red-600"
|
||||
>
|
||||
Clear Favorites
|
||||
</button>
|
||||
{:else}
|
||||
<p class="text-gray-600">You have no favorite products.</p>
|
||||
{/if}
|
||||
</main>
|
||||
313
src/routes/(auth)/item/[id]/+page.svelte
Normal file
313
src/routes/(auth)/item/[id]/+page.svelte
Normal file
@ -0,0 +1,313 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
import { addToCart } from '$lib/stores/cartStore';
|
||||
import { Card, Button, Badge } from 'flowbite-svelte';
|
||||
import { CartPlusOutline, HeartOutline, HeartSolid } from 'flowbite-svelte-icons';
|
||||
import { page } from '$app/stores';
|
||||
import { addToFavorites, favorites, removeFromFavorites } from '$lib/stores/store';
|
||||
|
||||
interface Product {
|
||||
id: number;
|
||||
title: string;
|
||||
description: string;
|
||||
imageUrl: string;
|
||||
price: number;
|
||||
}
|
||||
|
||||
let product: Product | undefined;
|
||||
let relatedProducts: Product[] = [];
|
||||
|
||||
const products: Product[] = [
|
||||
{
|
||||
id: 1,
|
||||
title: 'Tulip',
|
||||
description: 'Beautiful tulips for your garden.',
|
||||
imageUrl:
|
||||
'https://images.unsplash.com/photo-1520763185298-1b434c919102?q=80&w=1932&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
|
||||
price: 10
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: 'Rose',
|
||||
description: 'Elegant roses for special occasions.',
|
||||
imageUrl:
|
||||
'https://images.unsplash.com/photo-1582794543139-8ac9cb0f7b11?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
|
||||
price: 15
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: 'Sunflower',
|
||||
description: 'Bright sunflowers to light up your day.',
|
||||
imageUrl:
|
||||
'https://images.unsplash.com/photo-1535382985264-7ea131537c07?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTQxfHxmbG93ZXJ8ZW58MHx8MHx8fDA%3D',
|
||||
price: 12
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: 'Orchid',
|
||||
description: 'Exotic orchids for a touch of elegance.',
|
||||
imageUrl:
|
||||
'https://images.unsplash.com/photo-1531217182035-78d279dcdb7f?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8T3JjaGlkfGVufDB8fDB8fHww',
|
||||
price: 25
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
title: 'Lily',
|
||||
description: 'Fragrant lilies for a serene atmosphere.',
|
||||
imageUrl:
|
||||
'https://plus.unsplash.com/premium_photo-1676654936609-e264dd7b9dab?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTM1fHxmbG93ZXJ8ZW58MHx8MHx8fDA%3D',
|
||||
price: 18
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
title: 'Daisy',
|
||||
description: 'Cheerful daisies for a fresh look.',
|
||||
imageUrl:
|
||||
'https://images.unsplash.com/photo-1496098570671-efe44b569a00?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTQ4fHxmbG93ZXJ8ZW58MHx8MHx8fDA%3D',
|
||||
price: 8
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
title: 'Carnation',
|
||||
description: 'Classic carnations for any occasion.',
|
||||
imageUrl:
|
||||
'https://images.unsplash.com/photo-1587316830148-c9b01df2da38?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Njl8fGZsb3dlcnxlbnwwfHwwfHx8MA%3D%3D',
|
||||
price: 9
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
title: 'Peony',
|
||||
description: 'Lush peonies for a luxurious feel.',
|
||||
imageUrl:
|
||||
'https://images.unsplash.com/photo-1579053778004-3a4d3f0fae19?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTU2fHxmbG93ZXJ8ZW58MHx8MHx8fDA%3D',
|
||||
price: 22
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
title: 'Hydrangea',
|
||||
description: 'Stunning hydrangeas for a bold statement.',
|
||||
imageUrl:
|
||||
'https://images.unsplash.com/photo-1552409905-46aa1e84e2e8?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTY5fHxmbG93ZXJ8ZW58MHx8MHx8fDA%3D',
|
||||
price: 20
|
||||
},
|
||||
{
|
||||
id: 10,
|
||||
title: 'Lavender',
|
||||
description: 'Soothing lavender for relaxation.',
|
||||
imageUrl:
|
||||
'https://images.unsplash.com/photo-1490163212432-2c8e584dc243?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MjI3fHxmbG93ZXJ8ZW58MHx8MHx8fDA%3D',
|
||||
price: 14
|
||||
},
|
||||
{
|
||||
id: 11,
|
||||
title: 'Iris',
|
||||
description: 'Vibrant irises for a pop of color.',
|
||||
imageUrl:
|
||||
'https://images.unsplash.com/photo-1583693034345-b6c1d5b2ffa6?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MjUwfHxmbG93ZXJ8ZW58MHx8MHx8fDA%3D',
|
||||
price: 16
|
||||
},
|
||||
{
|
||||
id: 12,
|
||||
title: 'Daffodil',
|
||||
description: 'Bright daffodils to welcome spring.',
|
||||
imageUrl:
|
||||
'https://plus.unsplash.com/premium_photo-1676070094538-7663fb7c2745?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8RGFmZm9kaWx8ZW58MHx8MHx8fDA%3D',
|
||||
price: 11
|
||||
},
|
||||
{
|
||||
id: 13,
|
||||
title: 'Poppy',
|
||||
description: 'Vivid poppies for a bold statement.',
|
||||
imageUrl:
|
||||
'https://images.unsplash.com/photo-1527703137818-60612b595c72?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MjIwfHxmbG93ZXJ8ZW58MHx8MHx8fDA%3D',
|
||||
price: 13
|
||||
},
|
||||
{
|
||||
id: 14,
|
||||
title: 'Marigold',
|
||||
description: 'Golden marigolds for a festive touch.',
|
||||
imageUrl:
|
||||
'https://images.unsplash.com/photo-1559563362-c667ba5f5480?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MjA5fHxmbG93ZXJ8ZW58MHx8MHx8fDA%3D',
|
||||
price: 7
|
||||
},
|
||||
{
|
||||
id: 15,
|
||||
title: 'Chrysanthemum',
|
||||
description: 'Elegant chrysanthemums for autumn.',
|
||||
imageUrl:
|
||||
'https://images.unsplash.com/photo-1498323094960-d1a30fae4c5c?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTgwfHxmbG93ZXJ8ZW58MHx8MHx8fDA%3D',
|
||||
price: 17
|
||||
},
|
||||
{
|
||||
id: 16,
|
||||
title: 'Gerbera',
|
||||
description: 'Cheerful gerberas for a joyful vibe.',
|
||||
imageUrl:
|
||||
'https://images.unsplash.com/photo-1478801928079-ff8b78b1bef2?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTcyfHxmbG93ZXJ8ZW58MHx8MHx8fDA%3D',
|
||||
price: 19
|
||||
},
|
||||
{
|
||||
id: 17,
|
||||
title: 'Anemone',
|
||||
description: 'Delicate anemones for a subtle charm.',
|
||||
imageUrl:
|
||||
'https://images.unsplash.com/photo-1496571330383-9b977f4a021d?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8OTR8fGZsb3dlcnxlbnwwfHwwfHx8MA%3D%3D',
|
||||
price: 21
|
||||
},
|
||||
{
|
||||
id: 18,
|
||||
title: 'Ranunculus',
|
||||
description: 'Layered ranunculus for a romantic touch.',
|
||||
imageUrl:
|
||||
'https://images.unsplash.com/photo-1578972497170-bfc780c65f65?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Nzh8fGZsb3dlcnxlbnwwfHwwfHx8MA%3D%3D',
|
||||
price: 23
|
||||
},
|
||||
{
|
||||
id: 19,
|
||||
title: 'Freesia',
|
||||
description: 'Fragrant freesias for a sweet aroma.',
|
||||
imageUrl:
|
||||
'https://images.unsplash.com/photo-1496062031456-07b8f162a322?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NjF8fGZsb3dlcnxlbnwwfHwwfHx8MA%3D%3D',
|
||||
price: 24
|
||||
},
|
||||
{
|
||||
id: 20,
|
||||
title: 'Amaryllis',
|
||||
description: 'Striking amaryllis for a dramatic effect.',
|
||||
imageUrl:
|
||||
'https://images.unsplash.com/photo-1487139975590-b4f1dce9b035?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8Zmxvd2VyfGVufDB8fDB8fHww',
|
||||
price: 26
|
||||
}
|
||||
];
|
||||
|
||||
onMount(async () => {
|
||||
const productId = parseInt($page.params.id);
|
||||
|
||||
product = products.find((item) => item.id === productId);
|
||||
|
||||
relatedProducts = products
|
||||
.filter((item) => item.id !== productId) // Exclude the current product
|
||||
.sort(() => 0.5 - Math.random()) // Shuffle the array
|
||||
.slice(0, 3); // Get the first 3 items
|
||||
});
|
||||
|
||||
// Handle favorite toggling
|
||||
const toggleFavorite = () => {
|
||||
if (product && $favorites.some((item: any) => item.id === product!.id)) {
|
||||
removeFromFavorites(product.id);
|
||||
} else if (product) {
|
||||
addToFavorites(product);
|
||||
}
|
||||
};
|
||||
|
||||
// Add to cart with feedback
|
||||
const handleAddToCart = () => {
|
||||
if (product) {
|
||||
addToCart({ ...product, quantity: 1 });
|
||||
// You could add a toast notification here
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<main class="container mx-auto px-4 py-8">
|
||||
{#if product}
|
||||
<!-- Product Details Section -->
|
||||
<div class="grid grid-cols-1 gap-8 md:grid-cols-2">
|
||||
<!-- Product Image -->
|
||||
<div class="relative aspect-[4/3] w-full overflow-hidden rounded-lg">
|
||||
<img
|
||||
src={product.imageUrl}
|
||||
alt={product.title}
|
||||
class="absolute h-full w-full object-cover"
|
||||
loading="lazy"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Product Information -->
|
||||
<div class="space-y-4">
|
||||
<h1 class="text-4xl font-bold text-gray-900 dark:text-white">{product.title}</h1>
|
||||
<p class="text-lg text-gray-600 dark:text-gray-400">{product.description}</p>
|
||||
<p class="text-3xl font-bold text-gray-900 dark:text-white">
|
||||
${product.price.toFixed(2)}
|
||||
</p>
|
||||
|
||||
<!-- Action Buttons -->
|
||||
<div class="flex gap-4">
|
||||
<Button class="w-full" on:click={handleAddToCart}>
|
||||
<CartPlusOutline class="mr-2 h-5 w-5" />
|
||||
Add to Cart
|
||||
</Button>
|
||||
<Button class="w-full" on:click={toggleFavorite}>
|
||||
{#if $favorites.some((item) => item.id === product!.id)}
|
||||
<HeartSolid class="mr-2 h-5 w-5 text-red-500" />
|
||||
{:else}
|
||||
<HeartOutline class="mr-2 h-5 w-5 text-gray-500" />
|
||||
{/if}
|
||||
{#if $favorites.some((item) => item.id === product!.id)}
|
||||
Remove from Favorites
|
||||
{:else}
|
||||
Add to Favorites
|
||||
{/if}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<!-- Additional Details -->
|
||||
<div class="space-y-2">
|
||||
<h2 class="text-xl font-bold text-gray-900 dark:text-white">Product Details</h2>
|
||||
<p class="text-gray-600 dark:text-gray-400">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor
|
||||
incididunt ut labore et dolore magna aliqua.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Related Products Section -->
|
||||
<div class="mt-12">
|
||||
<h2 class="mb-6 text-2xl font-bold text-gray-900 dark:text-white">Related Products</h2>
|
||||
<div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
|
||||
{#each relatedProducts as relatedProduct (relatedProduct.id)}
|
||||
<Card padding="none" class="h-full overflow-hidden">
|
||||
<!-- Image Container -->
|
||||
<div class="relative aspect-[4/3] w-full overflow-hidden">
|
||||
<img
|
||||
src={relatedProduct.imageUrl}
|
||||
alt={relatedProduct.title}
|
||||
class="absolute h-full w-full object-cover transition-transform duration-300 hover:scale-110"
|
||||
loading="lazy"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Content Section -->
|
||||
<div class="flex h-full flex-col p-4">
|
||||
<div class="flex-grow space-y-2">
|
||||
<h5 class="text-xl font-bold tracking-tight text-gray-900 dark:text-white">
|
||||
{relatedProduct.title}
|
||||
</h5>
|
||||
<p class="text-sm text-gray-700 dark:text-gray-400">
|
||||
{relatedProduct.description}
|
||||
</p>
|
||||
<p class="text-2xl font-bold text-gray-900 dark:text-white">
|
||||
${relatedProduct.price.toFixed(2)}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Action Buttons -->
|
||||
<div class="mt-4">
|
||||
<Button
|
||||
class="w-full"
|
||||
on:click={() => addToCart({ ...relatedProduct, quantity: 1 })}
|
||||
>
|
||||
<CartPlusOutline class="mr-2 h-5 w-5" />
|
||||
Add to Cart
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
<p class="text-gray-600">Loading product details...</p>
|
||||
{/if}
|
||||
</main>
|
||||
152
src/routes/(auth)/landing/+page.svelte
Normal file
152
src/routes/(auth)/landing/+page.svelte
Normal file
@ -0,0 +1,152 @@
|
||||
<script lang="ts">
|
||||
import { goto } from '$app/navigation';
|
||||
import { Button } from 'flowbite-svelte';
|
||||
import { ArrowRightOutline, StarSolid, CheckCircleOutline } from 'flowbite-svelte-icons';
|
||||
|
||||
// Example featured products
|
||||
const featuredProducts = [
|
||||
{
|
||||
id: 1,
|
||||
title: 'Tulip Bouquet',
|
||||
description: 'Brighten your day with fresh tulips.',
|
||||
imageUrl:
|
||||
'https://images.unsplash.com/photo-1520763185298-1b434c919102?q=80&w=1932&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
|
||||
price: 25
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: 'Rose Bouquet',
|
||||
description: 'Elegant roses for special occasions.',
|
||||
imageUrl:
|
||||
'https://images.unsplash.com/photo-1582794543139-8ac9cb0f7b11?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
|
||||
price: 35
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: 'Sunflower Bouquet',
|
||||
description: 'Bright sunflowers to light up your day.',
|
||||
imageUrl:
|
||||
'https://images.unsplash.com/photo-1563013544-824ae1b704d3?q=80&w=1920&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
|
||||
price: 30
|
||||
}
|
||||
];
|
||||
|
||||
// Example testimonials
|
||||
const testimonials = [
|
||||
{
|
||||
name: 'Jane Doe',
|
||||
review:
|
||||
'The flowers were absolutely stunning! Delivery was fast, and the customer service was excellent.',
|
||||
rating: 5
|
||||
},
|
||||
{
|
||||
name: 'John Smith',
|
||||
review: 'I ordered roses for my wife, and she loved them! Highly recommend this shop.',
|
||||
rating: 5
|
||||
},
|
||||
{
|
||||
name: 'Emily Johnson',
|
||||
review: 'The sunflowers brightened up my home. Will definitely order again!',
|
||||
rating: 5
|
||||
}
|
||||
];
|
||||
|
||||
// Navigate to the webshop
|
||||
const goToShop = () => {
|
||||
goto('/main');
|
||||
};
|
||||
</script>
|
||||
|
||||
<!-- Hero Section -->
|
||||
<section class="bg-gradient-to-r from-pink-100 to-purple-100 py-20">
|
||||
<div class="container mx-auto px-4 text-center">
|
||||
<h1 class="mb-4 text-5xl font-bold text-gray-900">Beautiful Flowers for Every Occasion</h1>
|
||||
<p class="mb-8 text-xl text-gray-600">
|
||||
Fresh, handpicked flowers delivered to your doorstep. Make every moment special with our
|
||||
stunning bouquets.
|
||||
</p>
|
||||
<Button size="xl" on:click={goToShop}>
|
||||
Shop Now <ArrowRightOutline class="ml-2 h-5 w-5" />
|
||||
</Button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Value Proposition Section -->
|
||||
<section class="py-16">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="grid grid-cols-1 gap-8 md:grid-cols-3">
|
||||
<div class="text-center">
|
||||
<CheckCircleOutline class="mx-auto mb-4 h-12 w-12 text-purple-500" />
|
||||
<h2 class="mb-2 text-2xl font-bold text-gray-900">Fresh & Handpicked</h2>
|
||||
<p class="text-gray-600">We source the freshest flowers directly from local growers.</p>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<CheckCircleOutline class="mx-auto mb-4 h-12 w-12 text-purple-500" />
|
||||
<h2 class="mb-2 text-2xl font-bold text-gray-900">Fast Delivery</h2>
|
||||
<p class="text-gray-600">
|
||||
Get your flowers delivered the same day or schedule a future delivery.
|
||||
</p>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<CheckCircleOutline class="mx-auto mb-4 h-12 w-12 text-purple-500" />
|
||||
<h2 class="mb-2 text-2xl font-bold text-gray-900">Satisfaction Guaranteed</h2>
|
||||
<p class="text-gray-600">We stand by our products with a 100% satisfaction guarantee.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Featured Products Section -->
|
||||
<section class="bg-gray-50 py-16">
|
||||
<div class="container mx-auto px-4">
|
||||
<h2 class="mb-8 text-center text-3xl font-bold text-gray-900">Featured Products</h2>
|
||||
<div class="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
|
||||
{#each featuredProducts as product}
|
||||
<div class="overflow-hidden rounded-lg bg-white shadow-lg">
|
||||
<img src={product.imageUrl} alt={product.title} class="h-64 w-full object-cover" />
|
||||
<div class="p-6">
|
||||
<h3 class="mb-2 text-xl font-bold text-gray-900">{product.title}</h3>
|
||||
<p class="mb-4 text-gray-600">{product.description}</p>
|
||||
<p class="mb-4 text-2xl font-bold text-gray-900">${product.price.toFixed(2)}</p>
|
||||
<Button class="w-full" on:click={goToShop}>
|
||||
Shop Now <ArrowRightOutline class="ml-2 h-5 w-5" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Testimonials Section -->
|
||||
<section class="py-16">
|
||||
<div class="container mx-auto px-4">
|
||||
<h2 class="mb-8 text-center text-3xl font-bold text-gray-900">What Our Customers Say</h2>
|
||||
<div class="grid grid-cols-1 gap-8 md:grid-cols-3">
|
||||
{#each testimonials as testimonial}
|
||||
<div class="rounded-lg bg-white p-6 shadow-lg">
|
||||
<div class="mb-4 flex items-center">
|
||||
{#each Array(testimonial.rating) as _}
|
||||
<StarSolid class="h-5 w-5 text-yellow-400" />
|
||||
{/each}
|
||||
</div>
|
||||
<p class="mb-4 text-gray-600">"{testimonial.review}"</p>
|
||||
<p class="text-lg font-bold text-gray-900">- {testimonial.name}</p>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA Section -->
|
||||
<section class="bg-gradient-to-r from-pink-100 to-purple-100 py-20">
|
||||
<div class="container mx-auto px-4 text-center">
|
||||
<h2 class="mb-4 text-4xl font-bold text-gray-900">Ready to Brighten Someone's Day?</h2>
|
||||
<p class="mb-8 text-xl text-gray-600">
|
||||
Shop our collection of beautiful flowers and make every moment special.
|
||||
</p>
|
||||
<Button size="xl" on:click={goToShop}>
|
||||
Shop Now <ArrowRightOutline class="ml-2 h-5 w-5" />
|
||||
</Button>
|
||||
</div>
|
||||
</section>
|
||||
@ -1,38 +1,461 @@
|
||||
<script>
|
||||
import { Card, Button } from 'flowbite-svelte';
|
||||
import { CartPlusOutline, StarOutline } from 'flowbite-svelte-icons';
|
||||
<script lang="ts">
|
||||
import { addToCart } from '$lib/stores/cartStore';
|
||||
import { removeFromFavorites, addToFavorites, appStore, favorites } from '$lib/stores/store';
|
||||
import { Card, Button, Badge, Input, Select, Toast, Spinner } from 'flowbite-svelte';
|
||||
import { CartPlusOutline, HeartOutline, HeartSolid, SearchOutline } from 'flowbite-svelte-icons';
|
||||
import ImageModal from '../../../components/imageModal.svelte';
|
||||
import { derived, writable, type Writable } from 'svelte/store';
|
||||
import { fade, fly, scale } from 'svelte/transition';
|
||||
import { quintOut } from 'svelte/easing';
|
||||
import { goto } from '$app/navigation';
|
||||
|
||||
// Create an array to loop over
|
||||
let cards = Array(9).fill({
|
||||
title: 'Tulpe',
|
||||
description: 'Lorem ipsum dolor sit, amet consectetur adipisicing elit.',
|
||||
imageUrl:
|
||||
'https://images.unsplash.com/photo-1520763185298-1b434c919102?q=80&w=1932&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'
|
||||
});
|
||||
interface Product {
|
||||
id: number;
|
||||
title: string;
|
||||
description: string;
|
||||
imageUrl: string;
|
||||
price: number;
|
||||
category?: string;
|
||||
}
|
||||
|
||||
// Products array and state management
|
||||
const products: Product[] = [
|
||||
{
|
||||
id: 1,
|
||||
title: 'Tulip',
|
||||
description: 'Beautiful tulips for your garden.',
|
||||
imageUrl:
|
||||
'https://images.unsplash.com/photo-1520763185298-1b434c919102?q=80&w=1932&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
|
||||
price: 10
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: 'Rose',
|
||||
description: 'Elegant roses for special occasions.',
|
||||
imageUrl:
|
||||
'https://images.unsplash.com/photo-1582794543139-8ac9cb0f7b11?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
|
||||
price: 15
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: 'Sunflower',
|
||||
description: 'Bright sunflowers to light up your day.',
|
||||
imageUrl:
|
||||
'https://images.unsplash.com/photo-1535382985264-7ea131537c07?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTQxfHxmbG93ZXJ8ZW58MHx8MHx8fDA%3D',
|
||||
price: 12
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: 'Orchid',
|
||||
description: 'Exotic orchids for a touch of elegance.',
|
||||
imageUrl:
|
||||
'https://images.unsplash.com/photo-1531217182035-78d279dcdb7f?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8T3JjaGlkfGVufDB8fDB8fHww',
|
||||
price: 25
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
title: 'Lily',
|
||||
description: 'Fragrant lilies for a serene atmosphere.',
|
||||
imageUrl:
|
||||
'https://plus.unsplash.com/premium_photo-1676654936609-e264dd7b9dab?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTM1fHxmbG93ZXJ8ZW58MHx8MHx8fDA%3D',
|
||||
price: 18
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
title: 'Daisy',
|
||||
description: 'Cheerful daisies for a fresh look.',
|
||||
imageUrl:
|
||||
'https://images.unsplash.com/photo-1496098570671-efe44b569a00?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTQ4fHxmbG93ZXJ8ZW58MHx8MHx8fDA%3D',
|
||||
price: 8
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
title: 'Carnation',
|
||||
description: 'Classic carnations for any occasion.',
|
||||
imageUrl:
|
||||
'https://images.unsplash.com/photo-1587316830148-c9b01df2da38?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Njl8fGZsb3dlcnxlbnwwfHwwfHx8MA%3D%3D',
|
||||
price: 9
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
title: 'Peony',
|
||||
description: 'Lush peonies for a luxurious feel.',
|
||||
imageUrl:
|
||||
'https://images.unsplash.com/photo-1579053778004-3a4d3f0fae19?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTU2fHxmbG93ZXJ8ZW58MHx8MHx8fDA%3D',
|
||||
price: 22
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
title: 'Hydrangea',
|
||||
description: 'Stunning hydrangeas for a bold statement.',
|
||||
imageUrl:
|
||||
'https://images.unsplash.com/photo-1552409905-46aa1e84e2e8?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTY5fHxmbG93ZXJ8ZW58MHx8MHx8fDA%3D',
|
||||
price: 20
|
||||
},
|
||||
{
|
||||
id: 10,
|
||||
title: 'Lavender',
|
||||
description: 'Soothing lavender for relaxation.',
|
||||
imageUrl:
|
||||
'https://images.unsplash.com/photo-1490163212432-2c8e584dc243?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MjI3fHxmbG93ZXJ8ZW58MHx8MHx8fDA%3D',
|
||||
price: 14
|
||||
},
|
||||
{
|
||||
id: 11,
|
||||
title: 'Iris',
|
||||
description: 'Vibrant irises for a pop of color.',
|
||||
imageUrl:
|
||||
'https://images.unsplash.com/photo-1583693034345-b6c1d5b2ffa6?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MjUwfHxmbG93ZXJ8ZW58MHx8MHx8fDA%3D',
|
||||
price: 16
|
||||
},
|
||||
{
|
||||
id: 12,
|
||||
title: 'Daffodil',
|
||||
description: 'Bright daffodils to welcome spring.',
|
||||
imageUrl:
|
||||
'https://plus.unsplash.com/premium_photo-1676070094538-7663fb7c2745?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8RGFmZm9kaWx8ZW58MHx8MHx8fDA%3D',
|
||||
price: 11
|
||||
},
|
||||
{
|
||||
id: 13,
|
||||
title: 'Poppy',
|
||||
description: 'Vivid poppies for a bold statement.',
|
||||
imageUrl:
|
||||
'https://images.unsplash.com/photo-1527703137818-60612b595c72?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MjIwfHxmbG93ZXJ8ZW58MHx8MHx8fDA%3D',
|
||||
price: 13
|
||||
},
|
||||
{
|
||||
id: 14,
|
||||
title: 'Marigold',
|
||||
description: 'Golden marigolds for a festive touch.',
|
||||
imageUrl:
|
||||
'https://images.unsplash.com/photo-1559563362-c667ba5f5480?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MjA5fHxmbG93ZXJ8ZW58MHx8MHx8fDA%3D',
|
||||
price: 7
|
||||
},
|
||||
{
|
||||
id: 15,
|
||||
title: 'Chrysanthemum',
|
||||
description: 'Elegant chrysanthemums for autumn.',
|
||||
imageUrl:
|
||||
'https://images.unsplash.com/photo-1498323094960-d1a30fae4c5c?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTgwfHxmbG93ZXJ8ZW58MHx8MHx8fDA%3D',
|
||||
price: 17
|
||||
},
|
||||
{
|
||||
id: 16,
|
||||
title: 'Gerbera',
|
||||
description: 'Cheerful gerberas for a joyful vibe.',
|
||||
imageUrl:
|
||||
'https://images.unsplash.com/photo-1478801928079-ff8b78b1bef2?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTcyfHxmbG93ZXJ8ZW58MHx8MHx8fDA%3D',
|
||||
price: 19
|
||||
},
|
||||
{
|
||||
id: 17,
|
||||
title: 'Anemone',
|
||||
description: 'Delicate anemones for a subtle charm.',
|
||||
imageUrl:
|
||||
'https://images.unsplash.com/photo-1496571330383-9b977f4a021d?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8OTR8fGZsb3dlcnxlbnwwfHwwfHx8MA%3D%3D',
|
||||
price: 21
|
||||
},
|
||||
{
|
||||
id: 18,
|
||||
title: 'Ranunculus',
|
||||
description: 'Layered ranunculus for a romantic touch.',
|
||||
imageUrl:
|
||||
'https://images.unsplash.com/photo-1578972497170-bfc780c65f65?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Nzh8fGZsb3dlcnxlbnwwfHwwfHx8MA%3D%3D',
|
||||
price: 23
|
||||
},
|
||||
{
|
||||
id: 19,
|
||||
title: 'Freesia',
|
||||
description: 'Fragrant freesias for a sweet aroma.',
|
||||
imageUrl:
|
||||
'https://images.unsplash.com/photo-1496062031456-07b8f162a322?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NjF8fGZsb3dlcnxlbnwwfHwwfHx8MA%3D%3D',
|
||||
price: 24
|
||||
},
|
||||
{
|
||||
id: 20,
|
||||
title: 'Amaryllis',
|
||||
description: 'Striking amaryllis for a dramatic effect.',
|
||||
imageUrl:
|
||||
'https://images.unsplash.com/photo-1487139975590-b4f1dce9b035?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8Zmxvd2VyfGVufDB8fDB8fHww',
|
||||
price: 26
|
||||
}
|
||||
];
|
||||
|
||||
const itemsPerPage = 9;
|
||||
const currentPage: Writable<number> = writable(1);
|
||||
const searchQuery: Writable<string> = writable('');
|
||||
const selectedCategory: Writable<string> = writable('all');
|
||||
const isLoading: Writable<boolean> = writable(false);
|
||||
const showToast: Writable<boolean> = writable(false);
|
||||
const toastMessage: Writable<string> = writable('');
|
||||
|
||||
// Add loading simulation
|
||||
const simulateLoading = async () => {
|
||||
isLoading.set(true);
|
||||
await new Promise((resolve) => setTimeout(resolve, 800));
|
||||
isLoading.set(false);
|
||||
};
|
||||
|
||||
// Enhanced filtered products with proper typing
|
||||
const filteredProducts = derived<[Writable<string>, Writable<string>], Product[]>(
|
||||
[searchQuery, selectedCategory],
|
||||
([$searchQuery, $selectedCategory], set) => {
|
||||
simulateLoading().then(() => {
|
||||
if (!$searchQuery && $selectedCategory === 'all') {
|
||||
set(products);
|
||||
return;
|
||||
}
|
||||
|
||||
const searchLower = $searchQuery.toLowerCase();
|
||||
const filtered = products.filter((product) => {
|
||||
if ($selectedCategory !== 'all' && product.category !== $selectedCategory) return false;
|
||||
if (!searchLower) return true;
|
||||
|
||||
return (
|
||||
product.title.toLowerCase().includes(searchLower) ||
|
||||
product.description.toLowerCase().includes(searchLower)
|
||||
);
|
||||
});
|
||||
set(filtered);
|
||||
});
|
||||
},
|
||||
[] as Product[]
|
||||
);
|
||||
|
||||
const paginatedProducts = derived<[typeof filteredProducts, Writable<number>], Product[]>(
|
||||
[filteredProducts, currentPage],
|
||||
([$filteredProducts, $currentPage]) => {
|
||||
const start = ($currentPage - 1) * itemsPerPage;
|
||||
return $filteredProducts.slice(start, start + itemsPerPage);
|
||||
}
|
||||
);
|
||||
|
||||
const totalPages = derived<typeof filteredProducts, number>(
|
||||
filteredProducts,
|
||||
($filteredProducts) => Math.ceil($filteredProducts.length / itemsPerPage)
|
||||
);
|
||||
|
||||
const goToPage = (page: number) => {
|
||||
currentPage.set(page);
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||||
};
|
||||
|
||||
let searchTimeout: NodeJS.Timeout;
|
||||
const handleSearch = (event: Event) => {
|
||||
const target = event.target as HTMLInputElement;
|
||||
clearTimeout(searchTimeout);
|
||||
isLoading.set(true);
|
||||
searchTimeout = setTimeout(() => {
|
||||
searchQuery.set(target.value);
|
||||
currentPage.set(1);
|
||||
}, 300);
|
||||
};
|
||||
|
||||
const handleCategoryChange = (event: Event) => {
|
||||
const target = event.target as HTMLSelectElement;
|
||||
selectedCategory.set(target.value);
|
||||
currentPage.set(1);
|
||||
simulateLoading();
|
||||
};
|
||||
|
||||
const toggleFavorite = (product: Product) => {
|
||||
const isFavorite = $favorites.some((item: Product) => item.id === product.id);
|
||||
if (isFavorite) {
|
||||
removeFromFavorites(product.id);
|
||||
showToast.set(true);
|
||||
toastMessage.set('Removed from favorites');
|
||||
} else {
|
||||
addToFavorites(product);
|
||||
showToast.set(true);
|
||||
toastMessage.set('Added to favorites');
|
||||
}
|
||||
setTimeout(() => showToast.set(false), 2000);
|
||||
};
|
||||
|
||||
const handleAddToCart = (product: Product) => {
|
||||
addToCart({ ...product, quantity: 1 });
|
||||
showToast.set(true);
|
||||
toastMessage.set('Added to cart');
|
||||
setTimeout(() => showToast.set(false), 2000);
|
||||
};
|
||||
|
||||
let modalOpen = false;
|
||||
let selectedImage = {
|
||||
url: '',
|
||||
title: ''
|
||||
};
|
||||
|
||||
const openImageModal = (product: Product) => {
|
||||
selectedImage = {
|
||||
url: product.imageUrl,
|
||||
title: product.title
|
||||
};
|
||||
modalOpen = true;
|
||||
};
|
||||
|
||||
const closeImageModal = () => {
|
||||
modalOpen = false;
|
||||
};
|
||||
|
||||
// Navigate to item page
|
||||
const goToItemPage = (productId: number) => {
|
||||
goto(`/item/${productId}`);
|
||||
};
|
||||
</script>
|
||||
|
||||
<div class="mx-auto my-6 grid w-fit grid-cols-3 gap-10">
|
||||
{#each cards as card}
|
||||
<Card img={card.imageUrl} class="">
|
||||
<div class="holder flex">
|
||||
<div class="left w-fit">
|
||||
<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
|
||||
{card.title}
|
||||
</h5>
|
||||
<p class="mb-3 font-normal leading-tight text-gray-700 dark:text-gray-400">
|
||||
{card.description}
|
||||
</p>
|
||||
</div>
|
||||
<main class="container mx-auto px-4 py-8">
|
||||
<div class="mb-8 space-y-4" in:fly={{ y: -20, duration: 800, delay: 200 }}>
|
||||
<p class="text-lg text-gray-600 dark:text-gray-400">
|
||||
Discover our beautiful collection of fresh flowers
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="right grid min-w-fit gap-4">
|
||||
<Button>
|
||||
<CartPlusOutline class="h-6 w-6 text-white" />
|
||||
</Button>
|
||||
<Button>
|
||||
<StarOutline class=" h-6 w-6 text-white" />
|
||||
</Button>
|
||||
<div class="mb-6 grid gap-4 sm:grid-cols-2" in:fly={{ y: -20, duration: 600, delay: 200 }}>
|
||||
<div class="relative">
|
||||
<Input
|
||||
type="text"
|
||||
placeholder="Search products..."
|
||||
value={$searchQuery}
|
||||
on:input={handleSearch}
|
||||
>
|
||||
<SearchOutline slot="left" class="h-5 w-5" />
|
||||
</Input>
|
||||
</div>
|
||||
<Select on:change={handleCategoryChange} value={$selectedCategory}>
|
||||
<option value="all">All Categories</option>
|
||||
<option value="bouquets">Bouquets</option>
|
||||
<option value="single">Single Flowers</option>
|
||||
<option value="arrangement">Arrangements</option>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
{#if $isLoading}
|
||||
<div class="flex justify-center py-12" in:fade>
|
||||
<Spinner size="12" />
|
||||
</div>
|
||||
{:else}
|
||||
<div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
|
||||
{#each $paginatedProducts as product, i (product.id)}
|
||||
<div in:fly={{ y: 20, duration: 400, delay: i * 100 }} out:fade={{ duration: 200 }}>
|
||||
<Card
|
||||
padding="none"
|
||||
class="h-fit overflow-hidden transition-shadow duration-300 hover:shadow-lg"
|
||||
>
|
||||
<div
|
||||
class="relative aspect-[4/3] w-full overflow-hidden"
|
||||
on:click={() => openImageModal(product)}
|
||||
on:keydown={(e) => e.key === 'Enter' && openImageModal(product)}
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<img
|
||||
src={product.imageUrl}
|
||||
alt={product.title}
|
||||
class="absolute h-full w-full object-cover transition-transform duration-300 hover:scale-110"
|
||||
loading="lazy"
|
||||
/>
|
||||
<button
|
||||
class="absolute right-2 top-2 rounded-full bg-white/80 p-2 transition-all duration-300 hover:scale-110 hover:bg-white"
|
||||
on:click|stopPropagation={() => toggleFavorite(product)}
|
||||
>
|
||||
{#if $favorites.some((item: Product) => item.id === product.id)}
|
||||
<div in:scale={{ duration: 200 }}>
|
||||
<HeartSolid class="h-6 w-6 text-red-500" />
|
||||
</div>
|
||||
{:else}
|
||||
<div in:scale={{ duration: 200 }}>
|
||||
<HeartOutline class="h-6 w-6 text-gray-500" />
|
||||
</div>
|
||||
{/if}
|
||||
</button>
|
||||
</div>
|
||||
<div class="flex h-full flex-col p-4">
|
||||
<div class="flex-grow space-y-2">
|
||||
<h5
|
||||
on:click={() => goToItemPage(product.id)}
|
||||
class="text-xl font-bold tracking-tight text-gray-900 dark:text-white"
|
||||
>
|
||||
{product.title}
|
||||
</h5>
|
||||
<p class="text-sm text-gray-700 dark:text-gray-400">
|
||||
{product.description}
|
||||
</p>
|
||||
<div class="flex items-center justify-between">
|
||||
<p class="text-2xl font-bold text-gray-900 dark:text-white">
|
||||
${product.price.toFixed(2)}
|
||||
</p>
|
||||
{#if $favorites.some((item: Product) => item.id === product.id)}
|
||||
<Badge color="red" class="animate-pulse">Favorite</Badge>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-4">
|
||||
<Button
|
||||
class="w-full transition-transform duration-200 hover:scale-105"
|
||||
on:click={() => handleAddToCart(product)}
|
||||
>
|
||||
<CartPlusOutline class="mr-2 h-5 w-5" />
|
||||
Add to Cart
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
{#if $filteredProducts.length === 0 && products.length === 0}
|
||||
<div class="mt-8 text-center" in:fade>
|
||||
<p class="text-lg text-gray-600">No products found matching your criteria.</p>
|
||||
</div>
|
||||
</Card>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if $totalPages > 1}
|
||||
<div class="mt-8 flex flex-wrap justify-center gap-2" in:fly={{ y: 20, duration: 800 }}>
|
||||
<Button
|
||||
color="light"
|
||||
disabled={$currentPage === 1}
|
||||
on:click={() => goToPage($currentPage - 1)}
|
||||
>
|
||||
Previous
|
||||
</Button>
|
||||
{#each Array($totalPages) as _, i}
|
||||
<Button
|
||||
color={$currentPage === i + 1 ? 'primary' : 'light'}
|
||||
class="transition-transform duration-200 hover:scale-105"
|
||||
on:click={() => goToPage(i + 1)}
|
||||
>
|
||||
{i + 1}
|
||||
</Button>
|
||||
{/each}
|
||||
<Button
|
||||
color="light"
|
||||
disabled={$currentPage === $totalPages}
|
||||
on:click={() => goToPage($currentPage + 1)}
|
||||
>
|
||||
Next
|
||||
</Button>
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
</main>
|
||||
|
||||
{#if $showToast}
|
||||
<div
|
||||
class="fixed bottom-4 right-4 z-50"
|
||||
in:fly={{ x: 20, duration: 300, easing: quintOut }}
|
||||
out:fade
|
||||
>
|
||||
<Toast>
|
||||
{$toastMessage}
|
||||
</Toast>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<ImageModal
|
||||
bind:open={modalOpen}
|
||||
imageUrl={selectedImage.url}
|
||||
title={selectedImage.title}
|
||||
onClose={closeImageModal}
|
||||
/>
|
||||
|
||||
117
src/routes/(auth)/order-confirmation/[id]/+page.svelte
Normal file
117
src/routes/(auth)/order-confirmation/[id]/+page.svelte
Normal file
@ -0,0 +1,117 @@
|
||||
<script lang="ts">
|
||||
import { goto } from '$app/navigation';
|
||||
import { Button } from 'flowbite-svelte';
|
||||
import { ArrowRightOutline, CheckCircleOutline } from 'flowbite-svelte-icons';
|
||||
|
||||
// Example order data (replace with actual data from your store or API)
|
||||
const order = {
|
||||
id: '123456',
|
||||
date: new Date().toLocaleDateString(),
|
||||
status: 'Confirmed',
|
||||
customer: {
|
||||
name: 'John Doe',
|
||||
email: 'john.doe@example.com',
|
||||
address: '123 Main St, City, Country'
|
||||
},
|
||||
items: [
|
||||
{
|
||||
id: 1,
|
||||
title: 'Tulip Bouquet',
|
||||
quantity: 2,
|
||||
price: 25
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: 'Rose Bouquet',
|
||||
quantity: 1,
|
||||
price: 35
|
||||
}
|
||||
],
|
||||
total: 85
|
||||
};
|
||||
|
||||
// Calculate total price
|
||||
$: total = order.items.reduce((sum, item) => sum + item.price * item.quantity, 0);
|
||||
|
||||
// Navigate to the shop
|
||||
const goToShop = () => {
|
||||
goto('/main');
|
||||
};
|
||||
</script>
|
||||
|
||||
<!-- Confirmation Section -->
|
||||
<section class="bg-gradient-to-r from-pink-100 to-purple-100 py-20">
|
||||
<div class="container mx-auto px-4 text-center">
|
||||
<CheckCircleOutline class="mx-auto mb-4 h-16 w-16 text-green-500" />
|
||||
<h1 class="mb-4 text-4xl font-bold text-gray-900">Order Confirmed!</h1>
|
||||
<p class="mb-8 text-xl text-gray-600">
|
||||
Thank you for your purchase. Your order has been successfully placed.
|
||||
</p>
|
||||
<Button size="xl" on:click={goToShop}>
|
||||
Continue Shopping <ArrowRightOutline class="ml-2 h-5 w-5" />
|
||||
</Button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Order Details Section -->
|
||||
<section class="py-16">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="mx-auto max-w-3xl rounded-lg bg-white p-8 shadow-lg">
|
||||
<h2 class="mb-6 text-2xl font-bold text-gray-900">Order Details</h2>
|
||||
|
||||
<!-- Order Summary -->
|
||||
<div class="mb-8">
|
||||
<h3 class="mb-4 text-xl font-bold text-gray-900">Order Summary</h3>
|
||||
<div class="space-y-4">
|
||||
{#each order.items as item}
|
||||
<div class="flex items-center justify-between border-b pb-4">
|
||||
<div>
|
||||
<h4 class="text-lg font-semibold text-gray-900">{item.title}</h4>
|
||||
<p class="text-gray-600">Quantity: {item.quantity}</p>
|
||||
</div>
|
||||
<p class="text-lg font-bold text-gray-900">
|
||||
${(item.price * item.quantity).toFixed(2)}
|
||||
</p>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
<div class="mt-6 flex items-center justify-between">
|
||||
<p class="text-xl font-bold text-gray-900">Total</p>
|
||||
<p class="text-xl font-bold text-gray-900">${total.toFixed(2)}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Customer Details -->
|
||||
<div class="mb-8">
|
||||
<h3 class="mb-4 text-xl font-bold text-gray-900">Customer Details</h3>
|
||||
<div class="space-y-2">
|
||||
<p class="text-gray-900"><strong>Name:</strong> {order.customer.name}</p>
|
||||
<p class="text-gray-900"><strong>Email:</strong> {order.customer.email}</p>
|
||||
<p class="text-gray-900"><strong>Shipping Address:</strong> {order.customer.address}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Order Status -->
|
||||
<div>
|
||||
<h3 class="mb-4 text-xl font-bold text-gray-900">Order Status</h3>
|
||||
<p class="text-gray-900">
|
||||
Your order is <strong class="text-green-500">{order.status}</strong>. You will receive a
|
||||
confirmation email shortly.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA Section -->
|
||||
<section class="bg-gradient-to-r from-pink-100 to-purple-100 py-20">
|
||||
<div class="container mx-auto px-4 text-center">
|
||||
<h2 class="mb-4 text-4xl font-bold text-gray-900">Continue Shopping</h2>
|
||||
<p class="mb-8 text-xl text-gray-600">
|
||||
Explore more beautiful flowers and make every moment special.
|
||||
</p>
|
||||
<Button size="xl" on:click={goToShop}>
|
||||
Shop Now <ArrowRightOutline class="ml-2 h-5 w-5" />
|
||||
</Button>
|
||||
</div>
|
||||
</section>
|
||||
23
src/routes/(auth)/privacy-policy/+page.svelte
Normal file
23
src/routes/(auth)/privacy-policy/+page.svelte
Normal file
@ -0,0 +1,23 @@
|
||||
<section class="bg-gradient-to-r from-pink-100 to-purple-100 py-20">
|
||||
<div class="container mx-auto px-4 text-center">
|
||||
<h1 class="mb-4 text-5xl font-bold text-gray-900">Privacy Policy</h1>
|
||||
<p class="mb-8 text-xl text-gray-600">
|
||||
Your privacy is important to us. Learn how we protect your information.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="py-16">
|
||||
<div class="container mx-auto max-w-2xl px-4">
|
||||
<div class="rounded-lg bg-white p-6 shadow-lg">
|
||||
<h3 class="mb-4 text-xl font-bold text-gray-900">Our Commitment to Privacy</h3>
|
||||
<p class="mb-4 text-gray-600">
|
||||
We are committed to protecting your personal information. This policy outlines how we
|
||||
collect, use, and safeguard your data.
|
||||
</p>
|
||||
<p class="mb-4 text-gray-600">
|
||||
We do not sell or share your information with third parties without your consent.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@ -1,23 +1,115 @@
|
||||
<script>
|
||||
import { Button, Card, Input } from 'flowbite-svelte';
|
||||
<script lang="ts">
|
||||
import { favorites } from '$lib/stores/store';
|
||||
import { Card, Button, Badge, Input, Textarea } from 'flowbite-svelte';
|
||||
import { StarSolid, CheckCircleOutline, PenOutline } from 'flowbite-svelte-icons';
|
||||
|
||||
// Example user data
|
||||
const user = {
|
||||
name: 'John Doe',
|
||||
email: 'john.doe@example.com',
|
||||
address: '123 Main St, City, Country'
|
||||
};
|
||||
|
||||
// Example order history
|
||||
const orders = [
|
||||
{
|
||||
id: 1,
|
||||
date: '2023-10-01',
|
||||
items: ['Tulip Bouquet', 'Rose Bouquet'],
|
||||
total: 60,
|
||||
status: 'Delivered'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
date: '2023-09-25',
|
||||
items: ['Sunflower Bouquet'],
|
||||
total: 30,
|
||||
status: 'Shipped'
|
||||
}
|
||||
];
|
||||
|
||||
// State for editing profile
|
||||
let isEditing = false;
|
||||
let name = user.name;
|
||||
let email = user.email;
|
||||
let address = user.address;
|
||||
|
||||
// Handle profile update
|
||||
const updateProfile = () => {
|
||||
user.name = name;
|
||||
user.email = email;
|
||||
user.address = address;
|
||||
isEditing = false;
|
||||
// You could add an API call here to update the user's profile
|
||||
};
|
||||
</script>
|
||||
|
||||
<div class="flex h-[90svh] flex-wrap content-center">
|
||||
<Card class="mx-auto max-h-fit">
|
||||
<form action="">
|
||||
<div class="formItem">
|
||||
<label for="">Company Name:</label>
|
||||
<Input type="text"></Input>
|
||||
</div>
|
||||
<div class="formItem">
|
||||
<label for="">Email:</label>
|
||||
<Input type="email"></Input>
|
||||
</div>
|
||||
<div class="formItem">
|
||||
<label for="">GLN:</label>
|
||||
<Input type="number"></Input>
|
||||
</div>
|
||||
<Button>Submit</Button>
|
||||
</form>
|
||||
</Card>
|
||||
<!-- Welcome Section -->
|
||||
<section class="bg-gradient-to-r from-pink-100 to-purple-100 py-12">
|
||||
<div class="container mx-auto px-4">
|
||||
<h1 class="text-4xl font-bold text-gray-900">Welcome, {user.name}!</h1>
|
||||
<p class="text-lg text-gray-600">Manage your orders, favorites, and account settings here.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Dashboard Content -->
|
||||
<div class="container mx-auto grid grid-cols-1 gap-8 px-4 py-8 lg:grid-cols-3">
|
||||
<!-- Order History -->
|
||||
<div class="lg:col-span-2">
|
||||
<h2 class="mb-6 text-2xl font-bold text-gray-900">Order History</h2>
|
||||
<div class="space-y-4">
|
||||
{#each orders as order}
|
||||
<Card class="p-6">
|
||||
<div class="mb-4 flex items-center justify-between">
|
||||
<h3 class="text-xl font-bold text-gray-900">Order #{order.id}</h3>
|
||||
<Badge color={order.status === 'Delivered' ? 'green' : 'blue'}>
|
||||
{order.status}
|
||||
</Badge>
|
||||
</div>
|
||||
<p class="mb-2 text-gray-600">
|
||||
<strong>Date:</strong>
|
||||
{order.date}
|
||||
</p>
|
||||
<p class="mb-2 text-gray-600">
|
||||
<strong>Items:</strong>
|
||||
{order.items.join(', ')}
|
||||
</p>
|
||||
<p class="text-gray-600">
|
||||
<strong>Total:</strong> ${order.total.toFixed(2)}
|
||||
</p>
|
||||
</Card>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Account Settings -->
|
||||
<div class="space-y-8">
|
||||
<!-- Account Settings -->
|
||||
<div>
|
||||
<h2 class="mb-6 text-2xl font-bold text-gray-900">Account Settings</h2>
|
||||
<Card class="p-6">
|
||||
{#if isEditing}
|
||||
<form on:submit|preventDefault={updateProfile} class="space-y-4">
|
||||
<Input label="Name" bind:value={name} required />
|
||||
<Input label="Email" type="email" bind:value={email} required />
|
||||
<Textarea label="Address" bind:value={address} required />
|
||||
<div class="flex justify-end space-x-4">
|
||||
<Button color="red" on:click={() => (isEditing = false)}>Cancel</Button>
|
||||
<Button type="submit">Save</Button>
|
||||
</div>
|
||||
</form>
|
||||
{:else}
|
||||
<div class="space-y-4">
|
||||
<p class="text-gray-600"><strong>Name:</strong> {user.name}</p>
|
||||
<p class="text-gray-600"><strong>Email:</strong> {user.email}</p>
|
||||
<p class="text-gray-600"><strong>Address:</strong> {user.address}</p>
|
||||
<Button on:click={() => (isEditing = true)}>
|
||||
<PenOutline class="mr-2 h-5 w-5" />
|
||||
Edit Profile
|
||||
</Button>
|
||||
</div>
|
||||
{/if}
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
29
src/routes/(auth)/returns-and-refunds/+page.svelte
Normal file
29
src/routes/(auth)/returns-and-refunds/+page.svelte
Normal file
@ -0,0 +1,29 @@
|
||||
<section class="bg-gradient-to-r from-pink-100 to-purple-100 py-20">
|
||||
<div class="container mx-auto px-4 text-center">
|
||||
<h1 class="mb-4 text-5xl font-bold text-gray-900">Returns and Refunds</h1>
|
||||
<p class="mb-8 text-xl text-gray-600">
|
||||
We want you to be completely satisfied with your purchase.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="py-16">
|
||||
<div class="container mx-auto max-w-2xl px-4">
|
||||
<div class="space-y-6">
|
||||
<div class="rounded-lg bg-white p-6 shadow-lg">
|
||||
<h3 class="mb-2 text-xl font-bold text-gray-900">Return Policy</h3>
|
||||
<p class="text-gray-600">
|
||||
If you're not satisfied with your purchase, you can return it within 30 days for a full
|
||||
refund. Please ensure the product is in its original condition.
|
||||
</p>
|
||||
</div>
|
||||
<div class="rounded-lg bg-white p-6 shadow-lg">
|
||||
<h3 class="mb-2 text-xl font-bold text-gray-900">Refund Process</h3>
|
||||
<p class="text-gray-600">
|
||||
Once we receive your return, we will process your refund within 5 business days. Refunds
|
||||
will be issued to the original payment method.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
29
src/routes/(auth)/shipping-information/+page.svelte
Normal file
29
src/routes/(auth)/shipping-information/+page.svelte
Normal file
@ -0,0 +1,29 @@
|
||||
<section class="bg-gradient-to-r from-pink-100 to-purple-100 py-20">
|
||||
<div class="container mx-auto px-4 text-center">
|
||||
<h1 class="mb-4 text-5xl font-bold text-gray-900">Shipping Information</h1>
|
||||
<p class="mb-8 text-xl text-gray-600">
|
||||
Learn more about our shipping options and delivery times.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="py-16">
|
||||
<div class="container mx-auto max-w-2xl px-4">
|
||||
<div class="space-y-6">
|
||||
<div class="rounded-lg bg-white p-6 shadow-lg">
|
||||
<h3 class="mb-2 text-xl font-bold text-gray-900">Shipping Options</h3>
|
||||
<p class="text-gray-600">
|
||||
We offer standard and express shipping options. Standard shipping takes 3-5 business days,
|
||||
while express shipping delivers within 1-2 business days.
|
||||
</p>
|
||||
</div>
|
||||
<div class="rounded-lg bg-white p-6 shadow-lg">
|
||||
<h3 class="mb-2 text-xl font-bold text-gray-900">Delivery Areas</h3>
|
||||
<p class="text-gray-600">
|
||||
We currently ship to all states within the United States. International shipping is not
|
||||
available at this time.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
24
src/routes/(auth)/terms-of-service/+page.svelte
Normal file
24
src/routes/(auth)/terms-of-service/+page.svelte
Normal file
@ -0,0 +1,24 @@
|
||||
<section class="bg-gradient-to-r from-pink-100 to-purple-100 py-20">
|
||||
<div class="container mx-auto px-4 text-center">
|
||||
<h1 class="mb-4 text-5xl font-bold text-gray-900">Terms of Service</h1>
|
||||
<p class="mb-8 text-xl text-gray-600">
|
||||
Please read our terms and conditions carefully before using our services.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="py-16">
|
||||
<div class="container mx-auto max-w-2xl px-4">
|
||||
<div class="rounded-lg bg-white p-6 shadow-lg">
|
||||
<h3 class="mb-4 text-xl font-bold text-gray-900">Acceptance of Terms</h3>
|
||||
<p class="mb-4 text-gray-600">
|
||||
By using our website, you agree to these terms and conditions. If you do not agree, please
|
||||
do not use our services.
|
||||
</p>
|
||||
<p class="mb-4 text-gray-600">
|
||||
We reserve the right to modify these terms at any time. Continued use of our services
|
||||
constitutes acceptance of the updated terms.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
16
src/routes/+error.svelte
Normal file
16
src/routes/+error.svelte
Normal file
@ -0,0 +1,16 @@
|
||||
<script lang="ts">
|
||||
import { goto } from '$app/navigation';
|
||||
import { Button } from 'flowbite-svelte';
|
||||
|
||||
const goHome = () => {
|
||||
goto('/');
|
||||
};
|
||||
</script>
|
||||
|
||||
<section class="bg-gradient-to-r from-pink-100 to-purple-100 py-20">
|
||||
<div class="container mx-auto px-4 text-center">
|
||||
<h1 class="mb-4 text-5xl font-bold text-gray-900">404 - Page Not Found</h1>
|
||||
<p class="mb-8 text-xl text-gray-600">Oops! The page you're looking for doesn't exist.</p>
|
||||
<Button size="xl" on:click={goHome}>Go Home</Button>
|
||||
</div>
|
||||
</section>
|
||||
@ -1,6 +1,9 @@
|
||||
<script>
|
||||
import '../app.css';
|
||||
let { children } = $props();
|
||||
import { fade, slide } from 'svelte/transition';
|
||||
</script>
|
||||
|
||||
{@render children?.()}
|
||||
<div transition:slide>
|
||||
{@render children?.()}
|
||||
</div>
|
||||
|
||||
@ -2,6 +2,6 @@ import session from '$lib/session.svelte';
|
||||
import { redirect } from '@sveltejs/kit';
|
||||
|
||||
export async function load() {
|
||||
const page = session.loggedIn() ? '/main' : '/login';
|
||||
const page = session.loggedIn() ? '/landing' : '/login';
|
||||
redirect(307, page);
|
||||
}
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
<script lang="ts">
|
||||
import { Card, Button, Label, Input, Checkbox } from 'flowbite-svelte';
|
||||
import { goto } from '$app/navigation';
|
||||
import sessionSvelte from '$lib/session.svelte';
|
||||
|
||||
let username: string = '';
|
||||
let password: string = '';
|
||||
@ -13,7 +14,8 @@
|
||||
}
|
||||
|
||||
loading = true;
|
||||
// success = await API.login({ username, password });
|
||||
sessionSvelte.login(username, password);
|
||||
success = true;
|
||||
loading = false;
|
||||
|
||||
if (success) {
|
||||
@ -25,7 +27,7 @@
|
||||
<div class="flex h-[100svh] flex-wrap content-center">
|
||||
<Card class="mx-auto max-h-fit">
|
||||
<form class="flex flex-col space-y-6" action="/">
|
||||
<h3 class="text-xl font-medium text-gray-900 dark:text-white">Sign in to our platform</h3>
|
||||
<h3 class="text-xl font-medium text-gray-900 dark:text-white">Sign in</h3>
|
||||
<Label class="space-y-2">
|
||||
<span>Email</span>
|
||||
<Input
|
||||
@ -48,12 +50,6 @@
|
||||
</div>
|
||||
<Button type="submit" class="w-full" on:click={login}>Login to your account</Button>
|
||||
<span class="self-center text-red-500" class:invisible={success}>Login failed</span>
|
||||
|
||||
<div class="text-sm font-medium text-gray-500 dark:text-gray-300">
|
||||
Not registered? <a href="/" class="text-primary-700 hover:underline dark:text-primary-500">
|
||||
Create account
|
||||
</a>
|
||||
</div>
|
||||
</form>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
@ -3,6 +3,6 @@ import { redirect } from '@sveltejs/kit';
|
||||
|
||||
export async function load() {
|
||||
if (session.loggedIn()) {
|
||||
redirect(307, '/');
|
||||
redirect(307, '/landing');
|
||||
}
|
||||
}
|
||||
|
||||
55
src/routes/signup/+page.svelte
Normal file
55
src/routes/signup/+page.svelte
Normal file
@ -0,0 +1,55 @@
|
||||
<script lang="ts">
|
||||
import { Card, Button, Label, Input, Checkbox } from 'flowbite-svelte';
|
||||
import { goto } from '$app/navigation';
|
||||
import sessionSvelte from '$lib/session.svelte';
|
||||
|
||||
let username: string = '';
|
||||
let password: string = '';
|
||||
let success: boolean = true;
|
||||
let loading: boolean = false;
|
||||
|
||||
async function login() {
|
||||
if (!username || !password) {
|
||||
return;
|
||||
}
|
||||
|
||||
loading = true;
|
||||
sessionSvelte.login(username, password);
|
||||
success = true;
|
||||
loading = false;
|
||||
|
||||
if (success) {
|
||||
goto('/');
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="flex h-[100svh] flex-wrap content-center">
|
||||
<Card class="mx-auto max-h-fit">
|
||||
<form class="flex flex-col space-y-6" action="/">
|
||||
<h3 class="text-xl font-medium text-gray-900 dark:text-white">Sign in</h3>
|
||||
<Label class="space-y-2">
|
||||
<span>Email</span>
|
||||
<Input
|
||||
type="email"
|
||||
name="email"
|
||||
placeholder="name@company.com"
|
||||
required
|
||||
bind:value={username}
|
||||
/>
|
||||
</Label>
|
||||
<Label class="space-y-2">
|
||||
<span>Your password</span>
|
||||
<Input type="password" name="password" placeholder="•••••" required bind:value={password} />
|
||||
</Label>
|
||||
<div class="flex items-start">
|
||||
<Checkbox>Remember me</Checkbox>
|
||||
<a href="/" class="ms-auto text-sm text-primary-700 hover:underline dark:text-primary-500">
|
||||
Lost password?
|
||||
</a>
|
||||
</div>
|
||||
<Button type="submit" class="w-full" on:click={login}>Login to your account</Button>
|
||||
<span class="self-center text-red-500" class:invisible={success}>Login failed</span>
|
||||
</form>
|
||||
</Card>
|
||||
</div>
|
||||
8
src/routes/signup/+page.ts
Normal file
8
src/routes/signup/+page.ts
Normal file
@ -0,0 +1,8 @@
|
||||
import session from '$lib/session.svelte';
|
||||
import { redirect } from '@sveltejs/kit';
|
||||
|
||||
export async function load() {
|
||||
if (session.loggedIn()) {
|
||||
redirect(307, '/landing');
|
||||
}
|
||||
}
|
||||
@ -1,4 +1,4 @@
|
||||
import adapter from '@sveltejs/adapter-auto';
|
||||
import adapter from '@sveltejs/adapter-node';
|
||||
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
|
||||
|
||||
/** @type {import('@sveltejs/kit').Config} */
|
||||
|
||||
@ -13,16 +13,16 @@ export default {
|
||||
colors: {
|
||||
// flowbite-svelte
|
||||
primary: {
|
||||
50: '#FFF5F2',
|
||||
100: '#FFF1EE',
|
||||
200: '#FFE4DE',
|
||||
300: '#FFD5CC',
|
||||
400: '#FFBCAD',
|
||||
500: '#FE795D',
|
||||
600: '#EF562F',
|
||||
700: '#EB4F27',
|
||||
800: '#CC4522',
|
||||
900: '#A5371B'
|
||||
50: '#f2fbf2',
|
||||
100: '#e6f7e6',
|
||||
200: '#c0eac0',
|
||||
300: '#99dc99',
|
||||
400: '#66c566',
|
||||
500: '#266d26' /* Base color */,
|
||||
600: '#205b20',
|
||||
700: '#1a491a',
|
||||
800: '#143714',
|
||||
900: '#0e260e'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user