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

asd

Browse source
This commit is contained in:
VnPower 2023-11-08 08:44:01 +07:00
parent a6d820e99d
commit 6c090f8192
2 changed files with 48 additions and 426 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,7 +1,7 @@
<script lang="ts">
import { productsData } from "../data";
import { page } from "$app/stores";
import { Label, Input, Button, Modal } from "flowbite-svelte";
import { Label, Input, Button, Modal, Img } from "flowbite-svelte";
const params = $page.params;
const item = productsData.find((p) => p.id === params.id);
@ -75,40 +75,7 @@
<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>
<Img src="{item.src}" alt="{item.title}"/>
</div>
<!-- Product info -->
@ -119,380 +86,22 @@
<h1
class="text-2xl font-bold tracking-tight text-gray-900 sm:text-3xl"
>
Basic Tee 6-Pack
{item.title}
</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>
<h2 class="sr-only">Thông tin sản phẩm </h2>
<p class="text-3xl tracking-tight text-gray-900">{item.price} VND</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>
</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"
/>
</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
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"
on:click={() => (formModal = true)}
>Đặt mua</button
>
</form>
</div>
<div

73
src/routes/product/data.js
View file

@ -1,65 +1,78 @@
export const productsData = [
{
title: "test1",
title: "Hình chóp đáy là tứ giác có cạnh bên vuông với mặt đáy",
id: "1",
price: 20000,
src: "https://tailwindui.com/img/ecommerce-images/category-page-04-image-card-01.jpg",
description: "",
src: "/material1.webp",
description: "Hình chóp đáy là tứ giác có cạnh bên vuông với mặt đáy",
},
{
title: "test2",
title: "Hình lăng trụ đáy là tam giác",
id: "2",
price: 20000,
src: "https://tailwindui.com/img/ecommerce-images/category-page-04-image-card-03.jpg",
description: "",
src: "/material3.webp",
description:
"https://tailwindui.com/img/ecommerce-images/category-page-04-image-card-03.jpg",
},
{
title: "test3",
title: "Hình chóp đáy là tam giác, cạnh bên vuông góc với đáy",
id: "3",
price: 20000,
src: "https://tailwindui.com/img/ecommerce-images/category-page-04-image-card-02.jpg",
description: "",
src: "/material5.webp",
description: "Hình chóp đáy là tam giác, cạnh bên vuông góc với đáy",
},
{
title: "test4",
title: "Hình hộp",
id: "4",
price: 20000,
src: "https://tailwindui.com/img/ecommerce-images/category-page-04-image-card-03.jpg",
description: "",
src: "/material2.webp",
description: "Hình hộp",
},
{
title: "test5",
title: "Hình chóp đáy là tam giác",
id: "5",
price: 20000,
src: "https://tailwindui.com/img/ecommerce-images/category-page-04-image-card-02.jpg",
description: "",
src: "/material4.webp",
description: "Hình chóp đáy là tam giác",
},
{
title: "Hình chóp đáy là tứ giác",
id: "6",
price: 20000,
src: "/material6.webp",
description: "Hình chóp đáy là tứ giác",
},
];
export const images = [
{
title: "test1",
src: "https://tailwindui.com/img/ecommerce-images/category-page-04-image-card-01.jpg",
alt: "",
title: "Hình chóp đáy là tứ giác có cạnh bên vuông với mặt đáy",
src: "/material1.webp",
alt: "Hình chóp đáy là tứ giác có cạnh bên vuông với mặt đáy",
},
{
title: "test2",
src: "https://tailwindui.com/img/ecommerce-images/category-page-04-image-card-03.jpg",
alt: "",
title: "Hình lăng trụ đáy là tam giác",
src: "/material3.webp",
alt: "https://tailwindui.com/img/ecommerce-images/category-page-04-image-card-03.jpg",
},
{
title: "test3",
src: "https://tailwindui.com/img/ecommerce-images/category-page-04-image-card-02.jpg",
alt: "",
title: "Hình chóp đáy là tam giác, cạnh bên vuông góc với đáy",
src: "/material5.webp",
alt: "Hình chóp đáy là tam giác, cạnh bên vuông góc với đáy",
},
{
title: "test4",
src: "https://tailwindui.com/img/ecommerce-images/category-page-04-image-card-03.jpg",
alt: "",
title: "Hình hộp",
src: "/material2.webp",
alt: "Hình hộp",
},
{
title: "test5",
src: "https://tailwindui.com/img/ecommerce-images/category-page-04-image-card-02.jpg",
alt: "",
title: "Hình chóp đáy là tam giác",
src: "/material4.webp",
alt: "Hình chóp đáy là tam giác",
},
{
title: "Hình chóp đáy là tứ giác",
src: "/material6.webp",
alt: "Hình chóp đáy là tứ giác",
},
];