added car configurator
This commit is contained in:
Jelaletdin12
212
src/components/CarConfigurator/Carconfigurator.jsx
Normal file
212
src/components/CarConfigurator/Carconfigurator.jsx
Normal file
@@ -0,0 +1,212 @@
|
||||
import { useState, useEffect } from "react";
|
||||
import styles from "./CarConfigurator.module.scss";
|
||||
import maincar from "../../assets/maincar.webp";
|
||||
import imgRoof from "../../assets/roof.jpg";
|
||||
import imgHood from "../../assets/hood.jpg";
|
||||
import imgFloor from "../../assets/floor.jpg";
|
||||
import imgDoor from "../../assets/door.jpg";
|
||||
import imgTrunkLid from "../../assets/trunk_lid.jpg";
|
||||
import imgTrunkFloor from "../../assets/trunk_flor.jpg";
|
||||
import imgEngine from "../../assets/engine.jpg";
|
||||
import imgArchInter from "../../assets/arch_inter_side.jpg";
|
||||
import imgArchStreet from "../../assets/arch_street_side.jpg";
|
||||
import imgPlasticFender from "../../assets/plastik_fender_liner_4.jpg";
|
||||
|
||||
// ─── Zone image map ───────────────────────────────────────────────────────────
|
||||
const ZONE_IMAGES = {
|
||||
roof: imgRoof,
|
||||
hood: imgHood,
|
||||
floor: imgFloor,
|
||||
doors: imgDoor,
|
||||
trunk_lid: imgTrunkLid,
|
||||
trunk_floor: imgTrunkFloor,
|
||||
engine: imgEngine,
|
||||
arch_interior: imgArchInter,
|
||||
arch_street: imgArchStreet,
|
||||
fender_liner: imgPlasticFender,
|
||||
wheel: imgArchStreet,
|
||||
};
|
||||
|
||||
const DOTS = [
|
||||
{ id: "roof", x: 44, y: 22 },
|
||||
{ id: "trunk_lid", x: 80, y: 27 },
|
||||
{ id: "trunk_floor", x: 68, y: 46 },
|
||||
{ id: "arch_interior", x: 75, y: 43 },
|
||||
{ id: "fender_liner", x: 73, y: 51 },
|
||||
{ id: "arch_street", x: 47, y: 69 },
|
||||
{ id: "engine", x: 40, y: 59 },
|
||||
{ id: "floor", x: 58, y: 61 },
|
||||
{ id: "doors", x: 74, y: 80 },
|
||||
{ id: "hood", x: 17, y: 52 },
|
||||
{ id: "wheel", x: 42, y: 82 },
|
||||
];
|
||||
|
||||
// ─── Product List ─────────────────────────────────────────────────────────────
|
||||
|
||||
function ProductList({ zone, pkg, bodyType, appData }) {
|
||||
if (!appData) return <p className={styles.emptyMsg}>Загрузка...</p>;
|
||||
|
||||
const zoneInfo = appData.zones[zone];
|
||||
const products = zoneInfo?.products?.[bodyType]?.[pkg] || [];
|
||||
const total = products.reduce((s, p) => s + p.price * p.qty, 0);
|
||||
const zoneImage = ZONE_IMAGES[zone];
|
||||
|
||||
return (
|
||||
<div className={styles.productList}>
|
||||
{zoneImage ? (
|
||||
<div className={styles.zoneImageWrapper}>
|
||||
<img src={zoneImage} alt={zoneInfo?.label} className={styles.zoneImage} />
|
||||
<span className={styles.zoneImageLabel}>{zoneInfo?.label}</span>
|
||||
</div>
|
||||
) : (
|
||||
<h3 className={styles.zoneTitle}>{zoneInfo?.label}</h3>
|
||||
)}
|
||||
|
||||
{products.length === 0 && (
|
||||
<p className={styles.emptyMsg}>Нет товаров для данной зоны / пакета.</p>
|
||||
)}
|
||||
|
||||
{products.map((p, i) => (
|
||||
<div key={i} className={styles.productRow}>
|
||||
<span className={styles.productName}>{p.name}</span>
|
||||
<span className={styles.productCalc}>
|
||||
<b>{p.price.toLocaleString("ru")} m</b>
|
||||
{" × "}
|
||||
{p.qty} {p.unit}
|
||||
{" = "}
|
||||
<b className={styles.subtotal}>
|
||||
{(p.price * p.qty).toLocaleString("ru")} m
|
||||
</b>
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
|
||||
{products.length > 0 && (
|
||||
<div className={styles.totalRow}>
|
||||
Итого: <strong>{total.toLocaleString("ru")} m</strong>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* <div className={styles.actionButtons}>
|
||||
<button className={styles.btnBuy}>Купить</button>
|
||||
<button className={styles.btnView}>Смотреть</button>
|
||||
</div> */}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ─── Main Component ───────────────────────────────────────────────────────────
|
||||
|
||||
export default function CarConfigurator() {
|
||||
const [appData, setAppData] = useState(null);
|
||||
const [selectedBody, setSelectedBody]= useState(null);
|
||||
const [selectedPkg, setSelectedPkg] = useState(null);
|
||||
const [activeZone, setActiveZone] = useState("roof");
|
||||
const [tooltip, setTooltip] = useState(null);
|
||||
|
||||
// Load data.json — served from /public/data.json, readable by all users
|
||||
useEffect(() => {
|
||||
fetch("/api/data")
|
||||
.then((r) => r.json())
|
||||
.then((data) => {
|
||||
setAppData(data);
|
||||
setSelectedBody(data.bodyTypes[0]?.id || "sedan");
|
||||
setSelectedPkg(data.packages[0] || "Максимум");
|
||||
})
|
||||
.catch(console.error);
|
||||
}, []);
|
||||
|
||||
if (!appData) {
|
||||
return (
|
||||
<div className={styles.wrapper}>
|
||||
<p className={styles.emptyMsg}>Загрузка данных...</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={styles.wrapper}>
|
||||
|
||||
{/* ── Body Type Bar — TOP ──────────────────────────────── */}
|
||||
<div className={styles.bodyBar}>
|
||||
<p className={styles.sectionLabel}>Тип кузова</p>
|
||||
<div className={styles.bodyGrid}>
|
||||
{appData.bodyTypes.map((b) => (
|
||||
<button
|
||||
key={b.id}
|
||||
className={`${styles.bodyCard} ${selectedBody === b.id ? styles.active : ""}`}
|
||||
onClick={() => setSelectedBody(b.id)}
|
||||
>
|
||||
<span className={styles.bodyIcon}>
|
||||
{b.image ? <img src={b.image} alt={b.label} /> : b.icon}
|
||||
</span>
|
||||
<span className={styles.bodyLabel}>{b.label}</span>
|
||||
{selectedBody === b.id && <span className={styles.activeDot} />}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ── Main ─────────────────────────────────────────────── */}
|
||||
<div className={styles.main}>
|
||||
|
||||
{/* Car visual */}
|
||||
<div className={styles.carWrapper}>
|
||||
<img
|
||||
className={styles.carImage}
|
||||
src={maincar}
|
||||
alt="Автомобиль"
|
||||
draggable={false}
|
||||
/>
|
||||
|
||||
{DOTS.map((dot) => (
|
||||
<button
|
||||
key={dot.id}
|
||||
className={`${styles.dot} ${activeZone === dot.id ? styles.dotActive : ""}`}
|
||||
style={{ left: `${dot.x}%`, top: `${dot.y}%` }}
|
||||
onClick={() => setActiveZone(dot.id)}
|
||||
onMouseEnter={() => setTooltip(dot)}
|
||||
onMouseLeave={() => setTooltip(null)}
|
||||
aria-label={appData.zones[dot.id]?.label}
|
||||
>
|
||||
<span className={styles.dotRipple} />
|
||||
</button>
|
||||
))}
|
||||
|
||||
{tooltip && (
|
||||
<div
|
||||
className={styles.tooltip}
|
||||
style={{ left: `${tooltip.x}%`, top: `${tooltip.y - 8}%` }}
|
||||
>
|
||||
{appData.zones[tooltip.id]?.label ?? tooltip.id}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Right panel */}
|
||||
<div className={styles.panel}>
|
||||
<div className={styles.pkgTabs}>
|
||||
{appData.packages.map((p) => (
|
||||
<button
|
||||
key={p}
|
||||
className={`${styles.pkgTab} ${selectedPkg === p ? styles.pkgActive : ""}`}
|
||||
onClick={() => setSelectedPkg(p)}
|
||||
>
|
||||
{p}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className={styles.productGridContainer}>
|
||||
<ProductList
|
||||
zone={activeZone}
|
||||
pkg={selectedPkg}
|
||||
bodyType={selectedBody}
|
||||
appData={appData}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
397
src/components/CarConfigurator/Carconfigurator.module.scss
Normal file
397
src/components/CarConfigurator/Carconfigurator.module.scss
Normal file
@@ -0,0 +1,397 @@
|
||||
// ── Variables ─────────────────────────────────────────────────
|
||||
$orange: #f26522;
|
||||
$orange-dark: #d4551a;
|
||||
$bg: #f5f5f5;
|
||||
$white: #ffffff;
|
||||
$border: #e0e0e0;
|
||||
$text: #1a1a1a;
|
||||
$muted: #888;
|
||||
$radius-sm: 6px;
|
||||
$radius-md: 10px;
|
||||
$radius-lg: 16px;
|
||||
$transition: 0.2s ease;
|
||||
|
||||
// ── Wrapper ───────────────────────────────────────────────────
|
||||
.wrapper {
|
||||
font-family: "Segoe UI", sans-serif;
|
||||
background: $bg;
|
||||
border-radius: $radius-lg;
|
||||
max-width: 1336px;
|
||||
margin: 0 auto;
|
||||
color: $text;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
|
||||
// ── Body Bar (TOP) ────────────────────────────────────────────
|
||||
.bodyBar {
|
||||
background: $white;
|
||||
border-radius: $radius-lg;
|
||||
border: 1px solid $border;
|
||||
padding: 14px 20px;
|
||||
}
|
||||
|
||||
.sectionLabel {
|
||||
font-size: 0.7rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
color: $muted;
|
||||
margin: 0 0 10px;
|
||||
}
|
||||
|
||||
// ── Main Layout ───────────────────────────────────────────────
|
||||
.main {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 380px;
|
||||
gap: 20px;
|
||||
align-items: start;
|
||||
|
||||
@media (max-width: 860px) {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
// ── Car Wrapper ───────────────────────────────────────────────
|
||||
.carWrapper {
|
||||
position: relative;
|
||||
background: $white;
|
||||
border-radius: $radius-lg;
|
||||
overflow: hidden;
|
||||
border: 1px solid $border;
|
||||
}
|
||||
|
||||
.carImage {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
display: block;
|
||||
user-select: none;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
// ── Dots ──────────────────────────────────────────────────────
|
||||
.dot {
|
||||
position: absolute;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 50%;
|
||||
background: $orange;
|
||||
border: 3px solid $white;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
|
||||
transition: transform $transition, background $transition;
|
||||
padding: 0;
|
||||
|
||||
&:hover {
|
||||
transform: translate(-50%, -50%) scale(1.25);
|
||||
background: $orange-dark;
|
||||
}
|
||||
|
||||
&.dotActive {
|
||||
background: $white;
|
||||
border-color: $orange;
|
||||
box-shadow: 0 0 0 3px $orange;
|
||||
|
||||
.dotRipple {
|
||||
animation: ripple 1.2s ease-out infinite;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dotRipple {
|
||||
position: absolute;
|
||||
inset: -6px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid $orange;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
@keyframes ripple {
|
||||
0% { inset: -4px; opacity: 0.8; }
|
||||
100% { inset: -16px; opacity: 0; }
|
||||
}
|
||||
|
||||
// ── Tooltip ───────────────────────────────────────────────────
|
||||
.tooltip {
|
||||
position: absolute;
|
||||
transform: translate(-50%, -100%);
|
||||
background: rgba(0, 0, 0, 0.78);
|
||||
color: $white;
|
||||
font-size: 0.72rem;
|
||||
font-weight: 600;
|
||||
padding: 4px 10px;
|
||||
border-radius: 4px;
|
||||
white-space: nowrap;
|
||||
pointer-events: none;
|
||||
margin-top: -8px;
|
||||
z-index: 10;
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
border: 5px solid transparent;
|
||||
border-top-color: rgba(0, 0, 0, 0.78);
|
||||
}
|
||||
}
|
||||
|
||||
// ── Right Panel ───────────────────────────────────────────────
|
||||
.panel {
|
||||
background: $white;
|
||||
border-radius: $radius-lg;
|
||||
border: 1px solid $border;
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
max-height: 90vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
// ── Body Grid ─────────────────────────────────────────────────
|
||||
.bodyGrid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(9, 1fr);
|
||||
gap: 6px;
|
||||
|
||||
@media (max-width: 860px) {
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
.bodyCard {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 8px 4px;
|
||||
background: $bg;
|
||||
border: 2px solid $border;
|
||||
border-radius: $radius-md;
|
||||
cursor: pointer;
|
||||
transition: border-color $transition, box-shadow $transition;
|
||||
|
||||
&:hover {
|
||||
border-color: $orange;
|
||||
box-shadow: 0 2px 8px rgba($orange, 0.15);
|
||||
}
|
||||
|
||||
&.active {
|
||||
border-color: $orange;
|
||||
background: lighten($orange, 45%);
|
||||
}
|
||||
}
|
||||
|
||||
.bodyIcon {
|
||||
font-size: 1.3rem;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.bodyIcon {
|
||||
max-height: 30px;
|
||||
max-width: 30px;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
}
|
||||
.productGridContainer {
|
||||
max-height: 400px; /* Yüksekliği buradan ayarlayabilirsiniz */
|
||||
overflow-y: auto;
|
||||
padding-right: 10px; /* Kaydırma çubuğu için boşluk */
|
||||
}
|
||||
|
||||
.bodyLabel {
|
||||
font-size: 0.6rem;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
color: $text;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.activeDot {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
right: 5px;
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
border-radius: 50%;
|
||||
background: $orange;
|
||||
}
|
||||
|
||||
// ── Package Tabs ──────────────────────────────────────────────
|
||||
.pkgTabs {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
border-bottom: 2px solid $border;
|
||||
padding-bottom: 12px;
|
||||
}
|
||||
|
||||
.pkgTab {
|
||||
flex: 1;
|
||||
padding: 6px 4px;
|
||||
font-size: 0.72rem;
|
||||
font-weight: 700;
|
||||
border: none;
|
||||
background: none;
|
||||
color: $muted;
|
||||
cursor: pointer;
|
||||
border-bottom: 2px solid transparent;
|
||||
margin-bottom: -14px;
|
||||
transition: color $transition, border-color $transition;
|
||||
|
||||
&:hover { color: $orange; }
|
||||
|
||||
&.pkgActive {
|
||||
color: $orange;
|
||||
border-bottom-color: $orange;
|
||||
}
|
||||
}
|
||||
|
||||
// ── Zone Image ────────────────────────────────────────────────
|
||||
.zoneImageWrapper {
|
||||
position: relative;
|
||||
border-radius: $radius-md;
|
||||
overflow: hidden;
|
||||
height: 140px;
|
||||
background: #000;
|
||||
}
|
||||
|
||||
.zoneImage {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
opacity: 0.9;
|
||||
transition: opacity $transition;
|
||||
|
||||
&:hover { opacity: 1; }
|
||||
}
|
||||
|
||||
.zoneImageLabel {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 6px 10px;
|
||||
background: linear-gradient(transparent, rgba(0, 0, 0, 0.65));
|
||||
color: $white;
|
||||
font-size: 0.78rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
// ── Product List ──────────────────────────────────────────────
|
||||
.productList {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.zoneTitle {
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
margin: 0 0 4px;
|
||||
color: $text;
|
||||
}
|
||||
|
||||
.emptyMsg {
|
||||
font-size: 0.78rem;
|
||||
color: $muted;
|
||||
font-style: italic;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.productRow {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
padding: 8px 10px;
|
||||
background: $bg;
|
||||
border-radius: $radius-sm;
|
||||
border-left: 3px solid $orange;
|
||||
}
|
||||
|
||||
.productName {
|
||||
font-size: 0.78rem;
|
||||
color: $text;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.productCalc {
|
||||
font-size: 0.74rem;
|
||||
color: $muted;
|
||||
}
|
||||
|
||||
.subtotal {
|
||||
color: $orange-dark;
|
||||
}
|
||||
|
||||
.totalRow {
|
||||
font-size: 0.85rem;
|
||||
font-weight: 700;
|
||||
color: $text;
|
||||
padding-top: 4px;
|
||||
border-top: 1px solid $border;
|
||||
text-align: right;
|
||||
|
||||
strong {
|
||||
color: $orange;
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
// ── Action Buttons ────────────────────────────────────────────
|
||||
.actionButtons {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.btnBuy {
|
||||
flex: 1;
|
||||
padding: 10px;
|
||||
background: $orange;
|
||||
color: $white;
|
||||
border: none;
|
||||
border-radius: $radius-sm;
|
||||
font-weight: 700;
|
||||
font-size: 0.85rem;
|
||||
cursor: pointer;
|
||||
transition: background $transition;
|
||||
|
||||
&:hover { background: $orange-dark; }
|
||||
}
|
||||
|
||||
.btnView {
|
||||
flex: 1;
|
||||
padding: 10px;
|
||||
background: $white;
|
||||
color: $orange;
|
||||
border: 2px solid $orange;
|
||||
border-radius: $radius-sm;
|
||||
font-weight: 700;
|
||||
font-size: 0.85rem;
|
||||
cursor: pointer;
|
||||
transition: background $transition, color $transition;
|
||||
|
||||
&:hover {
|
||||
background: $orange;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
@@ -8,7 +8,7 @@
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 99;
|
||||
|
||||
|
||||
.navbarUp {
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
@@ -26,6 +26,11 @@
|
||||
padding: 6px 10px;
|
||||
font-weight: bold;
|
||||
color: #ffffff;
|
||||
margin: 8px 14px 6px;
|
||||
@media screen and (max-width: 426px) {
|
||||
font-size: 14px;
|
||||
margin: 8px 10px 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.navbarDown {
|
||||
@@ -66,8 +71,14 @@
|
||||
box-sizing: border-box;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
img{
|
||||
width: 300px;
|
||||
@media screen and (max-width: 426px) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 426px) {
|
||||
width: 80px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
svg {
|
||||
@@ -260,3 +271,12 @@
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
}
|
||||
.langSelector {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-left: auto;
|
||||
@media screen and (max-width: 426px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@@ -47,16 +47,11 @@ const Navbar = () => {
|
||||
className={styles.logoContainer}
|
||||
onClick={() => navigate("/")}
|
||||
>
|
||||
<img style={{ width: "300px" }} src={Logo} alt="" />
|
||||
<img src={Logo} alt="" />
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: "8px",
|
||||
marginLeft: "auto",
|
||||
}}
|
||||
<div className={styles.langSelector}
|
||||
|
||||
>
|
||||
{languages.map((lang) => (
|
||||
<button
|
||||
@@ -89,11 +84,7 @@ const Navbar = () => {
|
||||
))}
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
padding: "8px 14px 6px",
|
||||
}}
|
||||
|
||||
>
|
||||
<button className={styles.btn} onClick={showModal}>
|
||||
Satyjy bol
|
||||
|
||||
Reference in New Issue
Block a user