vnpower/school-project
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

asd

Browse source
This commit is contained in:
VnPower 2023-11-07 19:17:04 +07:00
parent 195fb73329
commit 7b552bb5da
3 changed files with 609 additions and 269 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
package-lock.json generated
View file

@ -24,6 +24,7 @@
"sass": "^1.63.6",
"svelte": "^4.0.5",
"svelte-check": "^3.4.3",
"svelte-hcaptcha": "^0.1.1",
"tailwindcss": "^3.3.2",
"tslib": "^2.4.1",
"typescript": "^5.0.0",
@ -2747,6 +2748,12 @@
"svelte": "^3.55.0 || ^4.0.0-next.0 || ^4.0.0"
}
},
"node_modules/svelte-hcaptcha": {
"version": "0.1.1",
"resolved": "https://registry.npmjs.org/svelte-hcaptcha/-/svelte-hcaptcha-0.1.1.tgz",
"integrity": "sha512-iFF3HwfrCRciJnDs4Y9/rpP/BM2U/5zt+vh+9d4tALPAHVkcANiJIKqYuS835pIaTm6gt+xOzjfFI3cgiRI29A==",
"dev": true
},
"node_modules/svelte-hmr": {
"version": "0.15.3",
"resolved": "https://registry.npmjs.org/svelte-hmr/-/svelte-hmr-0.15.3.tgz",

1
package.json
View file

@ -24,6 +24,7 @@
"sass": "^1.63.6",
"svelte": "^4.0.5",
"svelte-check": "^3.4.3",
"svelte-hcaptcha": "^0.1.1",
"tailwindcss": "^3.3.2",
"tslib": "^2.4.1",
"typescript": "^5.0.0",

870
src/routes/product/[id]/+page.svelte
View file

@ -1,290 +1,622 @@
<script>
import { productsData } from "../data";
import { page } from '$app/stores'
import { Label, Input} from 'flowbite-svelte';
<script lang="ts">
import { productsData } from "../data";
import { page } from "$app/stores";
import { Label, Input, Button } from "flowbite-svelte";
const params = $page.params;
const item = productsData.find((p) => p.id === params.id);
const params = $page.params;
const item = productsData.find((p) => p.id === params.id);
function validateEmail(email: String) {
const re =
/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(email);
}
async function confirmBuy() {
const response = await fetch('/buy', {
method: 'POST',
body: JSON.stringify(data),
headers: {
'Content-Type': 'application/json'
}
});
}
let data = {
email : "",
name : "",
class_ : "",
province : "",
district : "",
xa : "",
street : "",
}
</script>
{#if item}
<div class="pt-6">
<nav aria-label="Breadcrumb">
<ol role="list" class="mx-auto flex max-w-2xl items-center space-x-2 px-4 sm:px-6 lg:max-w-7xl lg:px-8">
<li>
<div class="flex items-center">
<a href="/product" class="mr-2 text-sm font-medium text-gray-900">Danh sách</a>
<svg width="16" height="20" viewBox="0 0 16 20" fill="currentColor" aria-hidden="true" class="h-5 w-4 text-gray-300">
<path d="M5.697 4.34L8.98 16.532h1.327L7.025 4.341H5.697z" />
</svg>
</div>
</li>
<div class="pt-6">
<nav aria-label="Breadcrumb">
<ol
role="list"
class="mx-auto flex max-w-2xl items-center space-x-2 px-4 sm:px-6 lg:max-w-7xl lg:px-8"
>
<li>
<div class="flex items-center">
<a
href="/product"
class="mr-2 text-sm font-medium text-gray-900"
>Danh sách</a
>
<svg
width="16"
height="20"
viewBox="0 0 16 20"
fill="currentColor"
aria-hidden="true"
class="h-5 w-4 text-gray-300"
>
<path
d="M5.697 4.34L8.98 16.532h1.327L7.025 4.341H5.697z"
/>
</svg>
</div>
</li>
<li class="text-sm">
<a aria-current="page" class="font-medium text-gray-500 hover:text-gray-600">{ item.title }</a>
</li>
</ol>
</nav>
<li class="text-sm">
<a
aria-current="page"
class="font-medium text-gray-500 hover:text-gray-600"
>{item.title}</a
>
</li>
</ol>
</nav>
<!-- Image gallery -->
<div class="mx-auto mt-6 max-w-2xl sm:px-6 lg:grid lg:max-w-7xl lg:grid-cols-3 lg:gap-x-8 lg:px-8">
<div class="aspect-h-4 aspect-w-3 hidden overflow-hidden rounded-lg lg:block">
<img src="https://tailwindui.com/img/ecommerce-images/product-page-02-secondary-product-shot.jpg" alt="Two each of gray, white, and black shirts laying flat." class="h-full w-full object-cover object-center">
</div>
<div class="hidden lg:grid lg:grid-cols-1 lg:gap-y-8">
<div class="aspect-h-2 aspect-w-3 overflow-hidden rounded-lg">
<img src="https://tailwindui.com/img/ecommerce-images/product-page-02-tertiary-product-shot-01.jpg" alt="Model wearing plain black basic tee." class="h-full w-full object-cover object-center">
</div>
<div class="aspect-h-2 aspect-w-3 overflow-hidden rounded-lg">
<img src="https://tailwindui.com/img/ecommerce-images/product-page-02-tertiary-product-shot-02.jpg" alt="Model wearing plain gray basic tee." class="h-full w-full object-cover object-center">
</div>
</div>
<div class="aspect-h-5 aspect-w-4 lg:aspect-h-4 lg:aspect-w-3 sm:overflow-hidden sm:rounded-lg">
<img src="https://tailwindui.com/img/ecommerce-images/product-page-02-featured-product-shot.jpg" alt="Model wearing plain white basic tee." class="h-full w-full object-cover object-center">
</div>
</div>
<!-- Product info -->
<div class="mx-auto max-w-2xl px-4 pb-16 pt-10 sm:px-6 lg:grid lg:max-w-7xl lg:grid-cols-3 lg:grid-rows-[auto,auto,1fr] lg:gap-x-8 lg:px-8 lg:pb-24 lg:pt-16">
<div class="lg:col-span-2 lg:border-r lg:border-gray-200 lg:pr-8">
<h1 class="text-2xl font-bold tracking-tight text-gray-900 sm:text-3xl">Basic Tee 6-Pack</h1>
</div>
<!-- Options -->
<div class="mt-4 lg:row-span-3 lg:mt-0">
<h2 class="sr-only">Product information</h2>
<p class="text-3xl tracking-tight text-gray-900">$192</p>
<!-- Reviews -->
<div class="mt-6">
<h3 class="sr-only">Reviews</h3>
<div class="flex items-center">
<div class="flex items-center">
<!-- Active: "text-gray-900", Default: "text-gray-200" -->
<svg class="text-gray-900 h-5 w-5 flex-shrink-0" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401z" clip-rule="evenodd" />
</svg>
<svg class="text-gray-900 h-5 w-5 flex-shrink-0" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401z" clip-rule="evenodd" />
</svg>
<svg class="text-gray-900 h-5 w-5 flex-shrink-0" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401z" clip-rule="evenodd" />
</svg>
<svg class="text-gray-900 h-5 w-5 flex-shrink-0" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401z" clip-rule="evenodd" />
</svg>
<svg class="text-gray-200 h-5 w-5 flex-shrink-0" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401z" clip-rule="evenodd" />
</svg>
<!-- Image gallery -->
<div
class="mx-auto mt-6 max-w-2xl sm:px-6 lg:grid lg:max-w-7xl lg:grid-cols-3 lg:gap-x-8 lg:px-8"
>
<div
class="aspect-h-4 aspect-w-3 hidden overflow-hidden rounded-lg lg:block"
>
<img
src="https://tailwindui.com/img/ecommerce-images/product-page-02-secondary-product-shot.jpg"
alt="Two each of gray, white, and black shirts laying flat."
class="h-full w-full object-cover object-center"
/>
</div>
<div class="hidden lg:grid lg:grid-cols-1 lg:gap-y-8">
<div class="aspect-h-2 aspect-w-3 overflow-hidden rounded-lg">
<img
src="https://tailwindui.com/img/ecommerce-images/product-page-02-tertiary-product-shot-01.jpg"
alt="Model wearing plain black basic tee."
class="h-full w-full object-cover object-center"
/>
</div>
<div class="aspect-h-2 aspect-w-3 overflow-hidden rounded-lg">
<img
src="https://tailwindui.com/img/ecommerce-images/product-page-02-tertiary-product-shot-02.jpg"
alt="Model wearing plain gray basic tee."
class="h-full w-full object-cover object-center"
/>
</div>
</div>
<div
class="aspect-h-5 aspect-w-4 lg:aspect-h-4 lg:aspect-w-3 sm:overflow-hidden sm:rounded-lg"
>
<img
src="https://tailwindui.com/img/ecommerce-images/product-page-02-featured-product-shot.jpg"
alt="Model wearing plain white basic tee."
class="h-full w-full object-cover object-center"
/>
</div>
<p class="sr-only">4 out of 5 stars</p>
<a href="#" class="ml-3 text-sm font-medium text-indigo-600 hover:text-indigo-500">117 reviews</a>
</div>
</div>
<form class="mt-10">
<!-- Colors -->
<div>
<h3 class="text-sm font-medium text-gray-900">Color</h3>
<fieldset class="mt-4">
<legend class="sr-only">Choose a color</legend>
<div class="flex items-center space-x-3">
<!--
Active and Checked: "ring ring-offset-1"
Not Active and Checked: "ring-2"
-->
<label class="relative -m-0.5 flex cursor-pointer items-center justify-center rounded-full p-0.5 focus:outline-none ring-gray-400">
<input type="radio" name="color-choice" value="White" class="sr-only" aria-labelledby="color-choice-0-label">
<span id="color-choice-0-label" class="sr-only">White</span>
<span aria-hidden="true" class="h-8 w-8 bg-white rounded-full border border-black border-opacity-10"></span>
</label>
<!--
Active and Checked: "ring ring-offset-1"
Not Active and Checked: "ring-2"
-->
<label class="relative -m-0.5 flex cursor-pointer items-center justify-center rounded-full p-0.5 focus:outline-none ring-gray-400">
<input type="radio" name="color-choice" value="Gray" class="sr-only" aria-labelledby="color-choice-1-label">
<span id="color-choice-1-label" class="sr-only">Gray</span>
<span aria-hidden="true" class="h-8 w-8 bg-gray-200 rounded-full border border-black border-opacity-10"></span>
</label>
<!--
Active and Checked: "ring ring-offset-1"
Not Active and Checked: "ring-2"
-->
<label class="relative -m-0.5 flex cursor-pointer items-center justify-center rounded-full p-0.5 focus:outline-none ring-gray-900">
<input type="radio" name="color-choice" value="Black" class="sr-only" aria-labelledby="color-choice-2-label">
<span id="color-choice-2-label" class="sr-only">Black</span>
<span aria-hidden="true" class="h-8 w-8 bg-gray-900 rounded-full border border-black border-opacity-10"></span>
</label>
</div>
</fieldset>
</div>
<!-- Sizes -->
<div class="mt-10">
<div class="flex items-center justify-between">
<h3 class="text-sm font-medium text-gray-900">Size</h3>
<a href="#" class="text-sm font-medium text-indigo-600 hover:text-indigo-500">Size guide</a>
<!-- Product info -->
<div
class="mx-auto max-w-2xl px-4 pb-16 pt-10 sm:px-6 lg:grid lg:max-w-7xl lg:grid-cols-3 lg:grid-rows-[auto,auto,1fr] lg:gap-x-8 lg:px-8 lg:pb-24 lg:pt-16"
>
<div class="lg:col-span-2 lg:border-r lg:border-gray-200 lg:pr-8">
<h1
class="text-2xl font-bold tracking-tight text-gray-900 sm:text-3xl"
>
Basic Tee 6-Pack
</h1>
</div>
<fieldset class="mt-4">
<legend class="sr-only">Choose a size</legend>
<div class="grid grid-cols-4 gap-4 sm:grid-cols-8 lg:grid-cols-4">
<!-- Active: "ring-2 ring-indigo-500" -->
<label class="group relative flex items-center justify-center rounded-md border py-3 px-4 text-sm font-medium uppercase hover:bg-gray-50 focus:outline-none sm:flex-1 sm:py-6 cursor-not-allowed bg-gray-50 text-gray-200">
<input type="radio" name="size-choice" value="XXS" disabled class="sr-only" aria-labelledby="size-choice-0-label">
<span id="size-choice-0-label">XXS</span>
<span aria-hidden="true" class="pointer-events-none absolute -inset-px rounded-md border-2 border-gray-200">
<svg class="absolute inset-0 h-full w-full stroke-2 text-gray-200" viewBox="0 0 100 100" preserveAspectRatio="none" stroke="currentColor">
<line x1="0" y1="100" x2="100" y2="0" vector-effect="non-scaling-stroke" />
</svg>
</span>
</label>
<!-- Active: "ring-2 ring-indigo-500" -->
<label class="group relative flex items-center justify-center rounded-md border py-3 px-4 text-sm font-medium uppercase hover:bg-gray-50 focus:outline-none sm:flex-1 sm:py-6 cursor-pointer bg-white text-gray-900 shadow-sm">
<input type="radio" name="size-choice" value="XS" class="sr-only" aria-labelledby="size-choice-1-label">
<span id="size-choice-1-label">XS</span>
<!--
Active: "border", Not Active: "border-2"
Checked: "border-indigo-500", Not Checked: "border-transparent"
-->
<span class="pointer-events-none absolute -inset-px rounded-md" aria-hidden="true"></span>
</label>
<!-- Active: "ring-2 ring-indigo-500" -->
<label class="group relative flex items-center justify-center rounded-md border py-3 px-4 text-sm font-medium uppercase hover:bg-gray-50 focus:outline-none sm:flex-1 sm:py-6 cursor-pointer bg-white text-gray-900 shadow-sm">
<input type="radio" name="size-choice" value="S" class="sr-only" aria-labelledby="size-choice-2-label">
<span id="size-choice-2-label">S</span>
<!--
Active: "border", Not Active: "border-2"
Checked: "border-indigo-500", Not Checked: "border-transparent"
-->
<span class="pointer-events-none absolute -inset-px rounded-md" aria-hidden="true"></span>
</label>
<!-- Active: "ring-2 ring-indigo-500" -->
<label class="group relative flex items-center justify-center rounded-md border py-3 px-4 text-sm font-medium uppercase hover:bg-gray-50 focus:outline-none sm:flex-1 sm:py-6 cursor-pointer bg-white text-gray-900 shadow-sm">
<input type="radio" name="size-choice" value="M" class="sr-only" aria-labelledby="size-choice-3-label">
<span id="size-choice-3-label">M</span>
<!--
Active: "border", Not Active: "border-2"
Checked: "border-indigo-500", Not Checked: "border-transparent"
-->
<span class="pointer-events-none absolute -inset-px rounded-md" aria-hidden="true"></span>
</label>
<!-- Active: "ring-2 ring-indigo-500" -->
<label class="group relative flex items-center justify-center rounded-md border py-3 px-4 text-sm font-medium uppercase hover:bg-gray-50 focus:outline-none sm:flex-1 sm:py-6 cursor-pointer bg-white text-gray-900 shadow-sm">
<input type="radio" name="size-choice" value="L" class="sr-only" aria-labelledby="size-choice-4-label">
<span id="size-choice-4-label">L</span>
<!--
Active: "border", Not Active: "border-2"
Checked: "border-indigo-500", Not Checked: "border-transparent"
-->
<span class="pointer-events-none absolute -inset-px rounded-md" aria-hidden="true"></span>
</label>
<!-- Active: "ring-2 ring-indigo-500" -->
<label class="group relative flex items-center justify-center rounded-md border py-3 px-4 text-sm font-medium uppercase hover:bg-gray-50 focus:outline-none sm:flex-1 sm:py-6 cursor-pointer bg-white text-gray-900 shadow-sm">
<input type="radio" name="size-choice" value="XL" class="sr-only" aria-labelledby="size-choice-5-label">
<span id="size-choice-5-label">XL</span>
<!--
Active: "border", Not Active: "border-2"
Checked: "border-indigo-500", Not Checked: "border-transparent"
-->
<span class="pointer-events-none absolute -inset-px rounded-md" aria-hidden="true"></span>
</label>
<!-- Active: "ring-2 ring-indigo-500" -->
<label class="group relative flex items-center justify-center rounded-md border py-3 px-4 text-sm font-medium uppercase hover:bg-gray-50 focus:outline-none sm:flex-1 sm:py-6 cursor-pointer bg-white text-gray-900 shadow-sm">
<input type="radio" name="size-choice" value="2XL" class="sr-only" aria-labelledby="size-choice-6-label">
<span id="size-choice-6-label">2XL</span>
<!--
Active: "border", Not Active: "border-2"
Checked: "border-indigo-500", Not Checked: "border-transparent"
-->
<span class="pointer-events-none absolute -inset-px rounded-md" aria-hidden="true"></span>
</label>
<!-- Active: "ring-2 ring-indigo-500" -->
<label class="group relative flex items-center justify-center rounded-md border py-3 px-4 text-sm font-medium uppercase hover:bg-gray-50 focus:outline-none sm:flex-1 sm:py-6 cursor-pointer bg-white text-gray-900 shadow-sm">
<input type="radio" name="size-choice" value="3XL" class="sr-only" aria-labelledby="size-choice-7-label">
<span id="size-choice-7-label">3XL</span>
<!--
Active: "border", Not Active: "border-2"
Checked: "border-indigo-500", Not Checked: "border-transparent"
-->
<span class="pointer-events-none absolute -inset-px rounded-md" aria-hidden="true"></span>
</label>
</div>
</fieldset>
</div>
<!-- Options -->
<div class="mt-4 lg:row-span-3 lg:mt-0">
<h2 class="sr-only">Product information</h2>
<p class="text-3xl tracking-tight text-gray-900">$192</p>
<button type="submit" class="mt-10 flex w-full items-center justify-center rounded-md border border-transparent bg-indigo-600 px-8 py-3 text-base font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">Add to bag</button>
</form>
</div>
<!-- Reviews -->
<div class="mt-6">
<h3 class="sr-only">Reviews</h3>
<div class="flex items-center">
<div class="flex items-center">
<!-- Active: "text-gray-900", Default: "text-gray-200" -->
<svg
class="text-gray-900 h-5 w-5 flex-shrink-0"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
fill-rule="evenodd"
d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401z"
clip-rule="evenodd"
/>
</svg>
<svg
class="text-gray-900 h-5 w-5 flex-shrink-0"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
fill-rule="evenodd"
d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401z"
clip-rule="evenodd"
/>
</svg>
<svg
class="text-gray-900 h-5 w-5 flex-shrink-0"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
fill-rule="evenodd"
d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401z"
clip-rule="evenodd"
/>
</svg>
<svg
class="text-gray-900 h-5 w-5 flex-shrink-0"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
fill-rule="evenodd"
d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401z"
clip-rule="evenodd"
/>
</svg>
<svg
class="text-gray-200 h-5 w-5 flex-shrink-0"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
fill-rule="evenodd"
d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401z"
clip-rule="evenodd"
/>
</svg>
</div>
<p class="sr-only">4 out of 5 stars</p>
<a
href="#"
class="ml-3 text-sm font-medium text-indigo-600 hover:text-indigo-500"
>117 reviews</a
>
</div>
</div>
<div class="py-10 lg:col-span-2 lg:col-start-1 lg:border-r lg:border-gray-200 lg:pb-16 lg:pr-8 lg:pt-6">
<!-- Description and details -->
<div>
<h3 class="sr-only">Description</h3>
<form class="mt-10">
<!-- Colors -->
<div>
<h3 class="text-sm font-medium text-gray-900">Color</h3>
<div class="space-y-6">
<p class="text-base text-gray-900">The Basic Tee 6-Pack allows you to fully express your vibrant personality with three grayscale options. Feeling adventurous? Put on a heather gray tee. Want to be a trendsetter? Try our exclusive colorway: &quot;Black&quot;. Need to add an extra pop of color to your outfit? Our white tee has you covered.</p>
</div>
<fieldset class="mt-4">
<legend class="sr-only">Choose a color</legend>
<div class="flex items-center space-x-3">
<!--
Active and Checked: "ring ring-offset-1"
Not Active and Checked: "ring-2"
-->
<label
class="relative -m-0.5 flex cursor-pointer items-center justify-center rounded-full p-0.5 focus:outline-none ring-gray-400"
>
<input
type="radio"
name="color-choice"
value="White"
class="sr-only"
aria-labelledby="color-choice-0-label"
/>
<span
id="color-choice-0-label"
class="sr-only">White</span
>
<span
aria-hidden="true"
class="h-8 w-8 bg-white rounded-full border border-black border-opacity-10"
/>
</label>
<!--
Active and Checked: "ring ring-offset-1"
Not Active and Checked: "ring-2"
-->
<label
class="relative -m-0.5 flex cursor-pointer items-center justify-center rounded-full p-0.5 focus:outline-none ring-gray-400"
>
<input
type="radio"
name="color-choice"
value="Gray"
class="sr-only"
aria-labelledby="color-choice-1-label"
/>
<span
id="color-choice-1-label"
class="sr-only">Gray</span
>
<span
aria-hidden="true"
class="h-8 w-8 bg-gray-200 rounded-full border border-black border-opacity-10"
/>
</label>
<!--
Active and Checked: "ring ring-offset-1"
Not Active and Checked: "ring-2"
-->
<label
class="relative -m-0.5 flex cursor-pointer items-center justify-center rounded-full p-0.5 focus:outline-none ring-gray-900"
>
<input
type="radio"
name="color-choice"
value="Black"
class="sr-only"
aria-labelledby="color-choice-2-label"
/>
<span
id="color-choice-2-label"
class="sr-only">Black</span
>
<span
aria-hidden="true"
class="h-8 w-8 bg-gray-900 rounded-full border border-black border-opacity-10"
/>
</label>
</div>
</fieldset>
</div>
<!-- Sizes -->
<div class="mt-10">
<div class="flex items-center justify-between">
<h3 class="text-sm font-medium text-gray-900">
Size
</h3>
<a
href="#"
class="text-sm font-medium text-indigo-600 hover:text-indigo-500"
>Size guide</a
>
</div>
<fieldset class="mt-4">
<legend class="sr-only">Choose a size</legend>
<div
class="grid grid-cols-4 gap-4 sm:grid-cols-8 lg:grid-cols-4"
>
<!-- Active: "ring-2 ring-indigo-500" -->
<label
class="group relative flex items-center justify-center rounded-md border py-3 px-4 text-sm font-medium uppercase hover:bg-gray-50 focus:outline-none sm:flex-1 sm:py-6 cursor-not-allowed bg-gray-50 text-gray-200"
>
<input
type="radio"
name="size-choice"
value="XXS"
disabled
class="sr-only"
aria-labelledby="size-choice-0-label"
/>
<span id="size-choice-0-label">XXS</span>
<span
aria-hidden="true"
class="pointer-events-none absolute -inset-px rounded-md border-2 border-gray-200"
>
<svg
class="absolute inset-0 h-full w-full stroke-2 text-gray-200"
viewBox="0 0 100 100"
preserveAspectRatio="none"
stroke="currentColor"
>
<line
x1="0"
y1="100"
x2="100"
y2="0"
vector-effect="non-scaling-stroke"
/>
</svg>
</span>
</label>
<!-- Active: "ring-2 ring-indigo-500" -->
<label
class="group relative flex items-center justify-center rounded-md border py-3 px-4 text-sm font-medium uppercase hover:bg-gray-50 focus:outline-none sm:flex-1 sm:py-6 cursor-pointer bg-white text-gray-900 shadow-sm"
>
<input
type="radio"
name="size-choice"
value="XS"
class="sr-only"
aria-labelledby="size-choice-1-label"
/>
<span id="size-choice-1-label">XS</span>
<!--
Active: "border", Not Active: "border-2"
Checked: "border-indigo-500", Not Checked: "border-transparent"
-->
<span
class="pointer-events-none absolute -inset-px rounded-md"
aria-hidden="true"
/>
</label>
<!-- Active: "ring-2 ring-indigo-500" -->
<label
class="group relative flex items-center justify-center rounded-md border py-3 px-4 text-sm font-medium uppercase hover:bg-gray-50 focus:outline-none sm:flex-1 sm:py-6 cursor-pointer bg-white text-gray-900 shadow-sm"
>
<input
type="radio"
name="size-choice"
value="S"
class="sr-only"
aria-labelledby="size-choice-2-label"
/>
<span id="size-choice-2-label">S</span>
<!--
Active: "border", Not Active: "border-2"
Checked: "border-indigo-500", Not Checked: "border-transparent"
-->
<span
class="pointer-events-none absolute -inset-px rounded-md"
aria-hidden="true"
/>
</label>
<!-- Active: "ring-2 ring-indigo-500" -->
<label
class="group relative flex items-center justify-center rounded-md border py-3 px-4 text-sm font-medium uppercase hover:bg-gray-50 focus:outline-none sm:flex-1 sm:py-6 cursor-pointer bg-white text-gray-900 shadow-sm"
>
<input
type="radio"
name="size-choice"
value="M"
class="sr-only"
aria-labelledby="size-choice-3-label"
/>
<span id="size-choice-3-label">M</span>
<!--
Active: "border", Not Active: "border-2"
Checked: "border-indigo-500", Not Checked: "border-transparent"
-->
<span
class="pointer-events-none absolute -inset-px rounded-md"
aria-hidden="true"
/>
</label>
<!-- Active: "ring-2 ring-indigo-500" -->
<label
class="group relative flex items-center justify-center rounded-md border py-3 px-4 text-sm font-medium uppercase hover:bg-gray-50 focus:outline-none sm:flex-1 sm:py-6 cursor-pointer bg-white text-gray-900 shadow-sm"
>
<input
type="radio"
name="size-choice"
value="L"
class="sr-only"
aria-labelledby="size-choice-4-label"
/>
<span id="size-choice-4-label">L</span>
<!--
Active: "border", Not Active: "border-2"
Checked: "border-indigo-500", Not Checked: "border-transparent"
-->
<span
class="pointer-events-none absolute -inset-px rounded-md"
aria-hidden="true"
/>
</label>
<!-- Active: "ring-2 ring-indigo-500" -->
<label
class="group relative flex items-center justify-center rounded-md border py-3 px-4 text-sm font-medium uppercase hover:bg-gray-50 focus:outline-none sm:flex-1 sm:py-6 cursor-pointer bg-white text-gray-900 shadow-sm"
>
<input
type="radio"
name="size-choice"
value="XL"
class="sr-only"
aria-labelledby="size-choice-5-label"
/>
<span id="size-choice-5-label">XL</span>
<!--
Active: "border", Not Active: "border-2"
Checked: "border-indigo-500", Not Checked: "border-transparent"
-->
<span
class="pointer-events-none absolute -inset-px rounded-md"
aria-hidden="true"
/>
</label>
<!-- Active: "ring-2 ring-indigo-500" -->
<label
class="group relative flex items-center justify-center rounded-md border py-3 px-4 text-sm font-medium uppercase hover:bg-gray-50 focus:outline-none sm:flex-1 sm:py-6 cursor-pointer bg-white text-gray-900 shadow-sm"
>
<input
type="radio"
name="size-choice"
value="2XL"
class="sr-only"
aria-labelledby="size-choice-6-label"
/>
<span id="size-choice-6-label">2XL</span>
<!--
Active: "border", Not Active: "border-2"
Checked: "border-indigo-500", Not Checked: "border-transparent"
-->
<span
class="pointer-events-none absolute -inset-px rounded-md"
aria-hidden="true"
/>
</label>
<!-- Active: "ring-2 ring-indigo-500" -->
<label
class="group relative flex items-center justify-center rounded-md border py-3 px-4 text-sm font-medium uppercase hover:bg-gray-50 focus:outline-none sm:flex-1 sm:py-6 cursor-pointer bg-white text-gray-900 shadow-sm"
>
<input
type="radio"
name="size-choice"
value="3XL"
class="sr-only"
aria-labelledby="size-choice-7-label"
/>
<span id="size-choice-7-label">3XL</span>
<!--
Active: "border", Not Active: "border-2"
Checked: "border-indigo-500", Not Checked: "border-transparent"
-->
<span
class="pointer-events-none absolute -inset-px rounded-md"
aria-hidden="true"
/>
</label>
</div>
</fieldset>
</div>
<button
type="submit"
class="mt-10 flex w-full items-center justify-center rounded-md border border-transparent bg-indigo-600 px-8 py-3 text-base font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
>Add to bag</button
>
</form>
</div>
<div
class="py-10 lg:col-span-2 lg:col-start-1 lg:border-r lg:border-gray-200 lg:pb-16 lg:pr-8 lg:pt-6"
>
<!-- Description and details -->
<div>
<h3 class="sr-only">Description</h3>
<div class="space-y-6">
<p class="text-base text-gray-900">
The Basic Tee 6-Pack allows you to fully express
your vibrant personality with three grayscale
options. Feeling adventurous? Put on a heather gray
tee. Want to be a trendsetter? Try our exclusive
colorway: &quot;Black&quot;. Need to add an extra
pop of color to your outfit? Our white tee has you
covered.
</p>
</div>
</div>
<div class="mt-10">
<h3 class="text-sm font-medium text-gray-900">
Highlights
</h3>
<div class="mt-4">
<ul
role="list"
class="list-disc space-y-2 pl-4 text-sm"
>
<li class="text-gray-400">
<span class="text-gray-600"
>Hand cut and sewn locally</span
>
</li>
<li class="text-gray-400">
<span class="text-gray-600"
>Dyed with our proprietary colors</span
>
</li>
<li class="text-gray-400">
<span class="text-gray-600"
>Pre-washed &amp; pre-shrunk</span
>
</li>
<li class="text-gray-400">
<span class="text-gray-600"
>Ultra-soft 100% cotton</span
>
</li>
</ul>
</div>
</div>
<div class="mt-10">
<h2 class="text-sm font-medium text-gray-900">Details</h2>
<div class="mt-4 space-y-6">
<p class="text-sm text-gray-600">
The 6-Pack includes two black, two white, and two
heather gray Basic Tees. Sign up for our
subscription service and be the first to get new,
exciting colors, like our upcoming &quot;Charcoal
Gray&quot; limited release.
</p>
</div>
</div>
</div>
</div>
<div class="mt-10">
<h3 class="text-sm font-medium text-gray-900">Highlights</h3>
<div class="mt-4">
<ul role="list" class="list-disc space-y-2 pl-4 text-sm">
<li class="text-gray-400"><span class="text-gray-600">Hand cut and sewn locally</span></li>
<li class="text-gray-400"><span class="text-gray-600">Dyed with our proprietary colors</span></li>
<li class="text-gray-400"><span class="text-gray-600">Pre-washed &amp; pre-shrunk</span></li>
<li class="text-gray-400"><span class="text-gray-600">Ultra-soft 100% cotton</span></li>
</ul>
</div>
</div>
<div class="mt-10">
<h2 class="text-sm font-medium text-gray-900">Details</h2>
<div class="mt-4 space-y-6">
<p class="text-sm text-gray-600">The 6-Pack includes two black, two white, and two heather gray Basic Tees. Sign up for our subscription service and be the first to get new, exciting colors, like our upcoming &quot;Charcoal Gray&quot; limited release.</p>
</div>
</div>
</div>
</div>
</div>
<!-- <Card img={item.image} horizontal>
<!-- <Card img={item.image} horizontal>
<h4 class="text-bold text-2xl">{item.title}</h4>
<p>{item.price} VND</p>
</Card> -->
<hr>
<br>
<h5 class="my-6 text-2xl font-medium text-gray-900" id="purchase">Mua</h5>
<p>Hãy điền thông tin vào form sau nếu bạn muốn mua sản phẩm này.</p>
<div class="mb-6">
<Label for="email" class="block mb-2">Email</Label>
<Input id="email" placeholder="user@example.com" />
</div>
<div class="mb-6">
<Label for="name" class="block mb-2">Họ tên</Label>
<Input id="name" placeholder="Nguyễn Văn A" />
</div>
<!-- <div class="mb-6">
<Label for="email" class="block mb-2"></Label>
<Input id="email" placeholder="user@example.com" />
</div>
<div class="mb-6">
<Label for="email" class="block mb-2">Email</Label>
<Input id="email" placeholder="user@example.com" />
</div>
<div class="mb-6">
<Label for="email" class="block mb-2">Email</Label>
<Input id="email" placeholder="user@example.com" />
</div> -->
<hr />
<br />
<h5 class="my-6 text-2xl font-medium text-gray-900" id="purchase">Mua</h5>
<p>Hãy điền thông tin vào form sau nếu bạn muốn mua sản phẩm này.</p>
<form action="1">
<div class="mb-6">
<Label for="email" class="block mb-2">Email</Label>
<Input bind:value={data.email} id="email" placeholder="user@example.com" />
</div>
<div class="mb-6">
<Label for="name" class="block mb-2">Họ tên</Label>
<Input bind:value={data.name} id="name" placeholder="Nguyễn Văn A" />
</div>
<div class="mb-6">
<Label for="class" class="block mb-2"
>Class (If you are a Tran Phu High Scool student)</Label
>
<Input bind:value={data.class_} id="class" placeholder="11B8" />
</div>
<div class="mb-6">
<Label for="province" class="block mb-2">City / Province</Label>
<Input bind:value={data.province} id="province" placeholder="Ho Chi Minh City" />
</div>
<div class="mb-6">
<Label for="district" class="block mb-2">District / Huyen</Label>
<Input bind:value={data.district} id="district" placeholder="Quan 1" />
</div>
<div class="mb-6">
<Label for="xa" class="block mb-2">Phuong / Xa</Label>
<Input bind:value={data.xa} id="xa" placeholder="Phuong Binh Hung Hoa A" />
</div>
<div class="mb-6">
<Label for="street" class="block mb-2"
>So nha va cac thong tin khac</Label
>
<Input bind:value={data.street} id="street" placeholder="69/3, duong A" />
</div>
</form>
<Button on:click={confirmBuy} color="green">Submit</Button>
{:else}
<div>
<h4 class="text-xl text-bold font-xl text-gray-900">Không thể tìm thấy món hàng bạn đang tìm</h4>
<p>¯\_(ツ)_/¯</p>
</div>
{/if}
<div>
<h4 class="text-xl text-bold font-xl text-gray-900">
Không thể tìm thấy món hàng bạn đang tìm
</h4>
<p>¯\_(ツ)_/¯</p>
</div>
{/if}