tieptk/bestpc
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

update 7/5

Browse Source
This commit is contained in:
Tieptk
2025-05-07 16:03:56 +07:00
parent fc94c6fd1a
commit b798003ec9
19 changed files with 1321 additions and 168 deletions
Download Patch File Download Diff File Expand all files Collapse all files

105
src/assets/css/style.css
View File

@@ -1,6 +1,7 @@
:root {
--color-global: #462f91;
--color-title: #0d0d9c;
--color-hover: #1877f2;
}
::-webkit-scrollbar-track {
@@ -32,7 +33,7 @@ html {
body {
font-family: "Roboto", sans-serif;
font-size: 14px;
font-size: 16px;
background: #fff;
min-width: 1400px;
color: #303030;
@@ -57,6 +58,11 @@ html {
height: 24px;
background-position: -70px 0;
}
.icon_2025.search-2 {
width: 24px;
height: 24px;
background-position: -102px 0;
}
.icon_2025.user {
width: 26px;
height: 26px;
@@ -105,7 +111,12 @@ html {
.icon_2025.heart {
width: 24px;
height: 24px;
background-position: -98px -141px;
background-position: -98px -123px;
}
.icon_2025.shop-blue {
width: 24px;
height: 24px;
background-position: -100px -147px;
}
.icon_2025.link {
width: 14px;
@@ -193,6 +204,51 @@ html {
height: 24px;
background-position: -126px -124px;
}
.icon_2025.showroom {
width: 24px;
height: 24px;
background-position: -119px -69px;
}
.icon_2025.phone {
width: 18px;
height: 18px;
background-position: -167px -4px;
}
.icon_2025.earth {
width: 22px;
height: 24px;
background-position: 0 -102px;
}
.icon_2025.copy {
width: 20px;
height: 20px;
background-position: -208px -71px;
}
.icon_2025.history {
width: 24px;
height: 24px;
background-position: -45px -102px;
}
.icon_2025.download {
width: 22px;
height: 22px;
background-position: -74px -102px;
}
.icon_2025.return {
width: 18px;
height: 18px;
background-position: -155px -105px;
}
.icon_2025.close {
width: 16px;
height: 16px;
background-position: -160px -126px;
}
.icon_2025.print {
width: 18px;
height: 19px;
background-position: -187px -4px;
}
.icon-star {
background: url(../images/icon_star.png) no-repeat;
@@ -901,7 +957,7 @@ html {
width: 100%;
height: 44px;
padding: 0 20px;
border-radius: 12px;
border-radius: 4px;
border: 1px solid #c1c1c1;
font-size: 13px;
color: #9c9c9c;
@@ -991,4 +1047,47 @@ html {
background-position: -212px -152px;
transform: rotate(90deg);
z-index: 1;
}
.select-arrow {
position: relative;
background: #fff;
height: 40px;
border: 1px solid #d5d5d5;
border-radius: 4px;
line-height: 40px;
}
.select-arrow select {
position: relative;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: 0;
background: transparent;
outline: 0;
width: 100%;
padding: 0 30px 0 10px;
z-index: 2;
}
.select-arrow::before {
position: absolute;
content: "";
right: 10px;
top: 15px;
z-index: 1;
width: 16px;
height: 8px;
background: #777777;
-webkit-clip-path: polygon(50% 100%, 0 0, 100% 0);
clip-path: polygon(50% 100%, 0 0, 100% 0);
}
.box-form-store input {
height: 40px;
}
@media (max-width: 1600px) {
#js-box-list-review .list-review {
max-height: 450px;
}
}/*# sourceMappingURL=style.css.map */

2
src/assets/css/style.css.map
View File

File diff suppressed because one or more lines are too long

107
src/assets/css/style.scss
View File

@@ -1,6 +1,7 @@
:root {
--color-global: #462f91;
--color-title: #0d0d9c;
--color-hover: #1877f2;
}
::-webkit-scrollbar-track {
background-color: #f5f5f5;
@@ -34,7 +35,7 @@ html {
}
body {
font-family: "Roboto", sans-serif;
font-size: 14px;
font-size: 16px;
background: #fff;
min-width: 1400px;
color: #303030;
@@ -42,6 +43,7 @@ body {
html {
font-family: "Roboto", sans-serif;
}
.icon_2025 {
background: url(../images/icon_2025.png) no-repeat;
background-size: 228px 175px;
@@ -56,6 +58,11 @@ html {
height: 24px;
background-position: -70px 0;
}
&.search-2 {
width: 24px;
height: 24px;
background-position: -102px 0;
}
&.user {
width: 26px;
height: 26px;
@@ -104,7 +111,12 @@ html {
&.heart {
width: 24px;
height: 24px;
background-position: -98px -141px;
background-position: -98px -123px;
}
&.shop-blue {
width: 24px;
height: 24px;
background-position: -100px -147px;
}
&.link {
width: 14px;
@@ -193,6 +205,51 @@ html {
height: 24px;
background-position: -126px -124px;
}
&.showroom {
width: 24px;
height: 24px;
background-position: -119px -69px;
}
&.phone {
width: 18px;
height: 18px;
background-position: -167px -4px;
}
&.earth {
width: 22px;
height: 24px;
background-position: 0 -102px;
}
&.copy {
width: 20px;
height: 20px;
background-position: -208px -71px;
}
&.history {
width: 24px;
height: 24px;
background-position: -45px -102px;
}
&.download {
width: 22px;
height: 22px;
background-position: -74px -102px;
}
&.return {
width: 18px;
height: 18px;
background-position: -155px -105px;
}
&.close {
width: 16px;
height: 16px;
background-position: -160px -126px;
}
&.print {
width: 18px;
height: 19px;
background-position: -187px -4px;
}
}
.icon-star {
@@ -959,7 +1016,7 @@ html {
width: 100%;
height: 44px;
padding: 0 20px;
border-radius: 12px;
border-radius: 4px;
border: 1px solid #c1c1c1;
font-size: 13px;
color: #9c9c9c;
@@ -1047,3 +1104,47 @@ html {
z-index: 1;
}
}
.select-arrow {
position: relative;
background: #fff;
height: 40px;
border: 1px solid #d5d5d5;
border-radius: 4px;
line-height: 40px;
select {
position: relative;
appearance: none;
border: 0;
background: transparent;
outline: 0;
width: 100%;
padding: 0 30px 0 10px;
z-index: 2;
}
&::before {
position: absolute;
content: "";
right: 10px;
top: 15px;
z-index: 1;
width: 16px;
height: 8px;
background: #777777;
clip-path: polygon(50% 100%, 0 0, 100% 0);
}
}
.box-form-store {
input {
height: 40px;
}
}
@media (max-width: 1600px) {
#js-box-list-review {
.list-review {
max-height: 450px;
}
}
}

BIN
src/assets/images/icon_2025.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 41 KiB

After

Width:  |  Height:  |  Size: 42 KiB

BIN
src/assets/images/lienkien-ram.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.6 KiB

35
src/index.tsx
View File

@@ -1,23 +1,22 @@
import { render } from 'preact';
import { LocationProvider, Router, Route } from 'preact-iso';
import { render } from "preact";
import { LocationProvider, Router, Route } from "preact-iso";
import { Header } from './components/Header.jsx';
import { Home } from './pages/Home/index.jsx';
import { NotFound } from './pages/_404.jsx';
import './style.css';
import { Home } from "./pages/Home/index.jsx";
import ProductDetail from "./pages/product/ProductPage.jsx";
import { NotFound } from "./pages/_404.jsx";
export function App() {
return (
<LocationProvider>
<Header />
<main>
<Router>
<Route path="/" component={Home} />
<Route default component={NotFound} />
</Router>
</main>
</LocationProvider>
);
return (
<LocationProvider>
<main>
<Router>
<Route path="/" component={Home} />
<Route path="/detail" component={ProductDetail} />
<Route default component={NotFound} />
</Router>
</main>
</LocationProvider>
);
}
render(<App />, document.getElementById('app'));
render(<App />, document.getElementById("root"));

30
src/pages/Home/index.tsx
View File

@@ -1,36 +1,8 @@
import "./style.css";
export function Home() {
return (
<div class="home">
<a href="https://preactjs.com" target="_blank"></a>
<h1>Get Started building Vite-powered Preact Apps </h1>
<section>
<Resource
title="Learn Preact"
description="If you're new to Preact, try the interactive tutorial to learn important concepts"
href="https://preactjs.com/tutorial"
/>
<Resource
title="Differences to React"
description="If you're coming from React, you may want to check out our docs to see where Preact differs"
href="https://preactjs.com/guide/v10/differences-to-react"
/>
<Resource
title="Learn Vite"
description="To learn more about Vite and how you can customize it to fit your needs, take a look at their excellent documentation"
href="https://vitejs.dev"
/>
</section>
<h1>Get Started building Vite-powered Preact Apps chào xìn</h1>
</div>
);
}
function Resource(props) {
return (
<a href={props.href} target="_blank" class="resource">
<h2>{props.title}</h2>
<p>{props.description}</p>
</a>
);
}

47
src/pages/Home/style.css
View File

@@ -1,47 +0,0 @@
img {
margin-bottom: 1.5rem;
}
img:hover {
filter: drop-shadow(0 0 2em #673ab8aa);
}
.home section {
margin-top: 5rem;
display: grid;
grid-template-columns: repeat(3, 1fr);
column-gap: 1.5rem;
}
.resource {
padding: 0.75rem 1.5rem;
border-radius: 0.5rem;
text-align: left;
text-decoration: none;
color: #222;
background-color: #f1f1f1;
border: 1px solid transparent;
}
.resource:hover {
border: 1px solid #000;
box-shadow: 0 25px 50px -12px #673ab888;
}
@media (max-width: 639px) {
.home section {
margin-top: 5rem;
grid-template-columns: 1fr;
row-gap: 1rem;
}
}
@media (prefers-color-scheme: dark) {
.resource {
color: #ccc;
background-color: #161616;
}
.resource:hover {
border: 1px solid #bbb;
}
}

94
src/pages/product/ProductPage.jsx
View File

@@ -1,34 +1,68 @@
import "./style.css";
const ProductPage = () => {
const { id } = useParams(); // Lấy id sản phẩm từ URL
const product = {
id: id,
name: `Product ${id}`,
description: "Detailed description of the product.",
price: 99.99,
imageUrl: "https://via.placeholder.com/400",
features: ["Feature 1", "Feature 2", "Feature 3"],
reviews: [
{ text: "Great product!", rating: 5 },
{ text: "Good value for money.", rating: 4 },
{ text: "Could be better.", rating: 3 },
],
};
import { h } from "preact";
export function ProductDetail() {
return (
<div className="product-page">
<ProductImage imageUrl={product.imageUrl} altText={product.name} />
<ProductDetail
name={product.name}
description={product.description}
price={product.price}
/>
<ProductFeatures features={product.features} />
<ProductReviews reviews={product.reviews} />
<div className="box-product-detail bg-[#F4F4F4]">
<div className="container">
<div className="breadcrumb p-[12px_0]">
<ol
itemscope
itemtype="http://schema.org/BreadcrumbList"
className="ul flex flex-wrap items-center"
>
<li
itemprop="itemListElement"
itemscope
itemtype="http://schema.org/ListItem"
className="flex items-center pr-[12px]"
>
<a
href="/"
itemprop="item"
className="nopad-l flex items-center text-[#637381]"
>
<span itemprop="name">
<span style="font-size: 0; display: none;">Trang chủ</span>
<i className="icon_2025 home mr-[5px] mb-[5px]" />
</span>
</a>{" "}
<i className="icon_2025 angle-right ml-[12px]" />
<meta itemprop="position" content="1" />
</li>
<li
itemprop="itemListElement"
itemscope
itemtype="http://schema.org/ListItem"
className="flex items-center pr-[12px]"
>
<a
href="/man-hinh.html"
itemprop="item"
className="nopad-l flex items-center"
>
<span itemprop="name">Màn hình máy tính</span>
<i className="icon_2025 angle-right text-[#637381] ml-[12px]" />
</a>
<meta itemprop="position" content="2" />
</li>
<li
itemprop="itemListElement"
itemscope
itemtype="http://schema.org/ListItem"
className="flex items-center pr-[12px]"
>
<a
href="/aivision.html"
itemprop="item"
className="nopad-l flex items-center"
>
<span itemprop="name">AIVISION</span>
</a>
<meta itemprop="position" content="3" />
</li>
</ol>
</div>
</div>
</div>
);
};
export default ProductPage;
}