added car configurator

src/components/CarConfigurator/Carconfigurator.jsx

@@ -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>
+  );
+}

src/components/CarConfigurator/Carconfigurator.module.scss

@@ -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;
+  }
+}

src/components/Navbar/Navbar.module.scss

@@ -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;
+    }
+  }

src/components/Navbar/index.jsx

@@ -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

src/pages/CarconfiguratorAdmin/Adminpage.module.scss

@@ -0,0 +1,651 @@
+// ── Variables ─────────────────────────────────────────────────
+$orange:      #f26522;
+$orange-dark: #d4551a;
+$bg:          #f0f0f0;
+$white:       #ffffff;
+$border:      #e0e0e0;
+$text:        #1a1a1a;
+$muted:       #888;
+$danger:      #e53935;
+$success:     #2e7d32;
+$radius-sm:   6px;
+$radius-md:   10px;
+$radius-lg:   16px;
+$transition:  0.2s ease;
+
+// ── Login ─────────────────────────────────────────────────────
+.loginWrapper {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
+  padding: 20px;
+}
+
+.loginCard {
+  background: $white;
+  border-radius: $radius-lg;
+  padding: 48px 40px;
+  width: 100%;
+  max-width: 380px;
+  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.4);
+  text-align: center;
+}
+
+.loginLogo  { font-size: 3rem; margin-bottom: 16px; }
+
+.loginTitle {
+  font-family: "Segoe UI", sans-serif;
+  font-size: 1.3rem;
+  font-weight: 800;
+  color: $text;
+  margin: 0 0 6px;
+}
+
+.loginSub {
+  font-family: "Segoe UI", sans-serif;
+  font-size: 0.82rem;
+  color: $muted;
+  margin: 0 0 28px;
+}
+
+.loginForm { display: flex; flex-direction: column; gap: 12px; }
+
+.loginInput {
+  width: 100%;
+  padding: 12px 16px;
+  border: 2px solid $border;
+  border-radius: $radius-md;
+  font-size: 0.95rem;
+  font-family: "Segoe UI", sans-serif;
+  outline: none;
+  transition: border-color $transition;
+  box-sizing: border-box;
+
+  &:focus         { border-color: $orange; }
+  &.inputError    { border-color: $danger; }
+}
+
+.errorMsg {
+  font-family: "Segoe UI", sans-serif;
+  font-size: 0.78rem;
+  color: $danger;
+  margin: -4px 0 0;
+  text-align: left;
+}
+
+.loginBtn {
+  padding: 12px;
+  background: $orange;
+  color: $white;
+  border: none;
+  border-radius: $radius-md;
+  font-weight: 700;
+  font-size: 0.95rem;
+  font-family: "Segoe UI", sans-serif;
+  cursor: pointer;
+  transition: background $transition;
+
+  &:hover { background: $orange-dark; }
+}
+
+@keyframes shake {
+  0%, 100% { transform: translateX(0); }
+  20%       { transform: translateX(-8px); }
+  40%       { transform: translateX(8px); }
+  60%       { transform: translateX(-6px); }
+  80%       { transform: translateX(6px); }
+}
+
+.shake { animation: shake 0.45s ease; }
+
+// ── Loading ───────────────────────────────────────────────────
+.loadingScreen {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: "Segoe UI", sans-serif;
+  font-size: 1rem;
+  color: $muted;
+}
+
+// ── Admin layout ──────────────────────────────────────────────
+.adminWrapper {
+  font-family: "Segoe UI", sans-serif;
+  min-height: 100vh;
+  background: $bg;
+  color: $text;
+  display: flex;
+  flex-direction: column;
+  padding-bottom: 80px;
+}
+
+// ── Header ────────────────────────────────────────────────────
+.adminHeader {
+  background: $white;
+  border-bottom: 1px solid $border;
+  padding: 16px 28px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  box-shadow: 0 2px 8px rgba(0,0,0,.06);
+  flex-wrap: wrap;
+}
+
+.adminHeaderLeft {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+}
+
+.adminHeaderIcon  { font-size: 1.8rem; }
+
+.adminHeaderTitle {
+  font-size: 1.1rem;
+  font-weight: 800;
+  margin: 0;
+}
+
+.adminHeaderSub {
+  font-size: 0.72rem;
+  color: $muted;
+  margin: 0;
+}
+
+.adminHeaderRight {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+.savedBadge {
+  background: lighten($success, 58%);
+  color: $success;
+  border: 1px solid lighten($success, 40%);
+  border-radius: 20px;
+  padding: 4px 12px;
+  font-size: 0.72rem;
+  font-weight: 700;
+}
+
+.btnSaveHeader {
+  padding: 8px 18px;
+  background: $orange;
+  color: $white;
+  border: none;
+  border-radius: $radius-sm;
+  font-weight: 700;
+  font-size: 0.82rem;
+  cursor: pointer;
+  transition: background $transition;
+
+  &:hover { background: $orange-dark; }
+}
+
+.btnLogout {
+  padding: 8px 18px;
+  background: $white;
+  color: $muted;
+  border: 1.5px solid $border;
+  border-radius: $radius-sm;
+  font-weight: 600;
+  font-size: 0.82rem;
+  cursor: pointer;
+  transition: color $transition, border-color $transition;
+
+  &:hover { color: $danger; border-color: $danger; }
+}
+
+// ── Tab bar ───────────────────────────────────────────────────
+.tabBar {
+  display: flex;
+  gap: 0;
+  background: $white;
+  border-bottom: 2px solid $border;
+  padding: 0 28px;
+}
+
+.tabBtn {
+  padding: 12px 24px;
+  border: none;
+  background: none;
+  font-size: 0.85rem;
+  font-weight: 600;
+  color: $muted;
+  cursor: pointer;
+  border-bottom: 3px solid transparent;
+  margin-bottom: -2px;
+  transition: color $transition, border-color $transition;
+
+  &:hover { color: $orange; }
+
+  &.tabActive {
+    color: $orange;
+    border-bottom-color: $orange;
+  }
+}
+
+// ── Products tab body ─────────────────────────────────────────
+.adminBody {
+  display: grid;
+  grid-template-columns: 220px 1fr;
+  flex: 1;
+
+  @media (max-width: 700px) { grid-template-columns: 1fr; }
+}
+
+// ── Sidebar ───────────────────────────────────────────────────
+.sidebar {
+  background: $white;
+  border-right: 1px solid $border;
+  padding: 20px 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-height: calc(100vh - 200px);
+}
+
+.sidebarLabel {
+  font-size: 0.65rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: $muted;
+  margin: 0 0 8px 6px;
+}
+
+.sidebarItem {
+  display: block;
+  width: 100%;
+  text-align: left;
+  padding: 9px 12px;
+  border: none;
+  background: none;
+  border-radius: $radius-sm;
+  font-size: 0.8rem;
+  font-weight: 500;
+  color: $text;
+  cursor: pointer;
+  transition: background $transition;
+
+  &:hover { background: $bg; }
+
+  &.sidebarActive {
+    background: lighten($orange, 44%);
+    color: $orange;
+    font-weight: 700;
+    border-left: 3px solid $orange;
+    padding-left: 9px;
+  }
+}
+
+// ── Content ───────────────────────────────────────────────────
+.content {
+  padding: 28px;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+// ── Field ─────────────────────────────────────────────────────
+.fieldRow {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.fieldLabel {
+  font-size: 0.72rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: $muted;
+  white-space: nowrap;
+  min-width: 120px;
+}
+
+.fieldInput {
+  flex: 1;
+  max-width: 360px;
+  padding: 9px 14px;
+  border: 1.5px solid $border;
+  border-radius: $radius-sm;
+  font-size: 0.88rem;
+  font-family: "Segoe UI", sans-serif;
+  outline: none;
+  box-sizing: border-box;
+  transition: border-color $transition;
+
+  &:focus { border-color: $orange; }
+}
+
+// ── Body type pills row ───────────────────────────────────────
+.bodyTypeRow {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+.bodyTypePills {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  flex: 1;
+}
+
+.bodyPill {
+  padding: 6px 14px;
+  border-radius: 20px;
+  border: 1.5px solid $border;
+  background: $bg;
+  color: $text;
+  font-size: 0.78rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: border-color $transition, background $transition, color $transition;
+
+  &:hover { border-color: $orange; }
+
+  &.bodyPillActive {
+    border-color: $orange;
+    background: lighten($orange, 44%);
+    color: $orange;
+  }
+}
+
+.bodyPillIcon {
+  width: 20px;
+  height: 20px;
+  margin-right: 8px;
+  object-fit: contain;
+}
+
+.bodyPillEmoji {
+  margin-right: 8px;
+}
+
+// ── Package tabs ──────────────────────────────────────────────
+.pkgTabs {
+  display: flex;
+  gap: 4px;
+  border-bottom: 2px solid $border;
+  padding-bottom: 0;
+}
+
+.pkgTab {
+  padding: 8px 20px;
+  font-size: 0.78rem;
+  font-weight: 700;
+  border: none;
+  background: none;
+  color: $muted;
+  cursor: pointer;
+  border-bottom: 2px solid transparent;
+  margin-bottom: -2px;
+  transition: color $transition, border-color $transition;
+
+  &:hover { color: $orange; }
+  &.pkgActive { color: $orange; border-bottom-color: $orange; }
+}
+
+// ── Table ─────────────────────────────────────────────────────
+.tableWrapper {
+  background: $white;
+  border-radius: $radius-md;
+  border: 1px solid $border;
+  overflow: hidden;
+}
+
+.table   { width: 100%; border-collapse: collapse; }
+
+.th {
+  text-align: left;
+  font-size: 0.68rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.07em;
+  color: $muted;
+  padding: 10px 14px;
+  background: $bg;
+  border-bottom: 2px solid $border;
+}
+
+.thNum   { width: 110px; }
+
+.tr {
+  &:not(:last-child) { border-bottom: 1px solid $border; }
+  &:hover { background: rgba($orange, 0.025); }
+}
+
+.td { padding: 8px 10px; font-size: 0.82rem; vertical-align: middle; }
+
+.tdTotal { font-weight: 700; color: $orange-dark; white-space: nowrap; }
+
+.cellInput {
+  width: 100%;
+  padding: 7px 10px;
+  border: 1.5px solid $border;
+  border-radius: $radius-sm;
+  font-size: 0.82rem;
+  font-family: "Segoe UI", sans-serif;
+  outline: none;
+  box-sizing: border-box;
+  transition: border-color $transition;
+
+  &:focus { border-color: $orange; }
+}
+
+.cellNum { text-align: right; }
+
+.emptyRow {
+  text-align: center;
+  padding: 24px;
+  font-size: 0.82rem;
+  color: $muted;
+  font-style: italic;
+}
+
+.btnAdd {
+  align-self: flex-start;
+  background: none;
+  border: 2px dashed $orange;
+  color: $orange;
+  border-radius: $radius-md;
+  padding: 9px 20px;
+  font-weight: 700;
+  font-size: 0.82rem;
+  font-family: "Segoe UI", sans-serif;
+  cursor: pointer;
+  transition: background $transition;
+
+  &:hover { background: lighten($orange, 46%); }
+}
+
+.btnDel {
+  background: none;
+  border: none;
+  color: $danger;
+  cursor: pointer;
+  font-size: 0.9rem;
+  padding: 4px 8px;
+  border-radius: $radius-sm;
+  transition: background $transition;
+
+  &:hover { background: lighten($danger, 46%); }
+}
+
+// ── Body Types tab ────────────────────────────────────────────
+.bodyTypesPage {
+  padding: 28px;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.bodyTypesHeader { display: flex; flex-direction: column; gap: 6px; }
+
+.bodyTypesTitle {
+  font-size: 1.1rem;
+  font-weight: 800;
+  margin: 0;
+}
+
+.bodyTypesSub {
+  font-size: 0.82rem;
+  color: $muted;
+  margin: 0;
+  max-width: 540px;
+}
+
+.bodyTypesGrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+  gap: 14px;
+}
+
+.bodyTypeCard {
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.imageUploader {
+  position: relative;
+  background: #f9f9f9;
+  padding: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 120px;
+}
+
+.iconPreview {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+  font-size: 48px;
+}
+
+.uploadLabel {
+  position: absolute;
+  bottom: 8px;
+  right: 8px;
+  cursor: pointer;
+  background: rgba(0, 0, 0, 0.6);
+  color: white;
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-size: 12px;
+  opacity: 0;
+  transition: opacity 0.2s;
+}
+
+.imageUploader:hover .uploadLabel {
+  opacity: 1;
+}
+
+// ── FIX: bodyTypeCardBottom — input görünür + delete butonu hizalı ──
+.bodyTypeCardBottom {
+  padding: 10px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  background: white;
+
+  // Global .fieldInput'taki max-width:360px'i burada ezip
+  // flex container içinde düzgün genişlemesini sağlıyoruz
+  .fieldInput {
+    flex: 1;
+    min-width: 0;      // flex shrink için zorunlu
+    max-width: none;   // ← Ana sorun buydu
+  }
+
+  // Silme butonu sabit genişlikte, flex'ten etkilenmesin
+  .btnDel {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    padding: 0;
+  }
+}
+
+.bodyTypeAddCard {
+  background: none;
+  border: 2px dashed $border;
+  border-radius: $radius-md;
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  cursor: pointer;
+  color: $muted;
+  font-size: 0.85rem;
+  font-weight: 600;
+  transition: border-color $transition, color $transition;
+  min-height: 100px;
+
+  span:first-child { font-size: 1.8rem; }
+
+  &:hover { border-color: $orange; color: $orange; }
+}
+
+// ── Save hint ─────────────────────────────────────────────────
+.saveHint {
+  background: lighten($orange, 46%);
+  border: 1px solid lighten($orange, 30%);
+  border-radius: $radius-md;
+  padding: 14px 18px;
+  font-size: 0.82rem;
+  color: darken($orange, 10%);
+  max-width: 600px;
+
+  p { margin: 0; line-height: 1.6; }
+  code {
+    background: rgba($orange, 0.12);
+    padding: 2px 6px;
+    border-radius: 4px;
+    font-size: 0.78rem;
+  }
+}
+
+// ── Floating save button ──────────────────────────────────────
+.floatSave {
+  position: fixed;
+  bottom: 24px;
+  right: 24px;
+  z-index: 200;
+}
+
+.btnSaveFloat {
+  padding: 12px 24px;
+  background: $orange;
+  color: $white;
+  border: none;
+  border-radius: $radius-lg;
+  font-weight: 700;
+  font-size: 0.88rem;
+  font-family: "Segoe UI", sans-serif;
+  cursor: pointer;
+  box-shadow: 0 6px 20px rgba($orange, 0.45);
+  transition: background $transition, transform $transition;
+
+  &:hover {
+    background: $orange-dark;
+    transform: translateY(-2px);
+  }
+}

src/pages/CarconfiguratorAdmin/index.jsx

@@ -0,0 +1,435 @@
+import { useState, useEffect, useRef } from "react";
+import styles from "./AdminPage.module.scss";
+
+// ─── PASSWORD — change this ───────────────────────────────────────────────────
+const ADMIN_PASSWORD = "shumoff2024";
+
+// ─── LOGIN ────────────────────────────────────────────────────────────────────
+
+function LoginScreen({ onLogin }) {
+  const [input, setInput] = useState("");
+  const [error, setError] = useState(false);
+  const [shake, setShake] = useState(false);
+
+  function handleSubmit(e) {
+    e.preventDefault();
+    if (input === ADMIN_PASSWORD) {
+      onLogin();
+    } else {
+      setError(true);
+      setShake(true);
+      setTimeout(() => setShake(false), 500);
+    }
+  }
+
+  return (
+    <div className={styles.loginWrapper}>
+      <div className={`${styles.loginCard} ${shake ? styles.shake : ""}`}>
+        <div className={styles.loginLogo}>⚙️</div>
+        <h1 className={styles.loginTitle}>Панель администратора</h1>
+        <p className={styles.loginSub}>Введите пароль для доступа</p>
+        <form onSubmit={handleSubmit} className={styles.loginForm}>
+          <input
+            type="password"
+            className={`${styles.loginInput} ${error ? styles.inputError : ""}`}
+            placeholder="Пароль"
+            value={input}
+            onChange={(e) => { setInput(e.target.value); setError(false); }}
+            autoFocus
+          />
+          {error && <p className={styles.errorMsg}>Неверный пароль. Попробуйте ещё раз.</p>}
+          <button type="submit" className={styles.loginBtn}>Войти</button>
+        </form>
+      </div>
+    </div>
+  );
+}
+
+// ─── TABS ─────────────────────────────────────────────────────────────────────
+
+const ADMIN_TABS = [
+  { id: "products", label: "📦 Товары и цены" },
+  { id: "bodytypes", label: "🚗 Типы кузова" },
+];
+
+// ─── ADMIN PANEL ─────────────────────────────────────────────────────────────
+
+function AdminPanel({ onLogout }) {
+  const [data,      setData]     = useState(null);
+  const [tab,       setTab]      = useState("products");
+  const [zone,      setZone]     = useState(null);
+  const [bodyType,  setBodyType] = useState(null);
+  const [pkg,       setPkg]      = useState(null);
+  const [saved,     setSaved]    = useState(false);
+  const [loading,   setLoading]  = useState(true);
+  const [error,     setError]    = useState(null);
+
+  // Load data.json from /public
+  useEffect(() => {
+    fetch("api/data")
+      .then((r) => r.json())
+      .then((d) => {
+        setData(d);
+        setZone(Object.keys(d.zones)[0]);
+        setBodyType(d.bodyTypes[0]?.id);
+        setPkg(d.packages[0]);
+        setLoading(false);
+      })
+      .catch((e) => { setError(e.message); setLoading(false); });
+  }, []);
+
+  // ── helpers ────────────────────────────────────────────────
+  function updateData(fn) {
+    setData((prev) => {
+      const next = JSON.parse(JSON.stringify(prev));
+      fn(next);
+      return next;
+    });
+  }
+
+  // Products tab
+  function getProducts() {
+    return data?.zones?.[zone]?.products?.[bodyType]?.[pkg] || [];
+  }
+
+  function setProducts(products) {
+    updateData((d) => {
+      if (!d.zones[zone].products[bodyType]) d.zones[zone].products[bodyType] = {};
+      d.zones[zone].products[bodyType][pkg] = products;
+    });
+  }
+
+  function updateProduct(idx, field, val) {
+    const ps = JSON.parse(JSON.stringify(getProducts()));
+    if (field === "price" || field === "qty") ps[idx][field] = Number(val) || 0;
+    else ps[idx][field] = val;
+    setProducts(ps);
+  }
+
+  function deleteProduct(idx) {
+    const ps = JSON.parse(JSON.stringify(getProducts()));
+    ps.splice(idx, 1);
+    setProducts(ps);
+  }
+
+  function addProduct() {
+    const ps = JSON.parse(JSON.stringify(getProducts()));
+    ps.push({ name: "Новый товар", price: 0, qty: 1, unit: "Л" });
+    setProducts(ps);
+  }
+
+  // Body types tab
+  function updateBodyType(idx, field, val) {
+    updateData((d) => { d.bodyTypes[idx][field] = val; });
+  }
+
+  function deleteBodyType(idx) {
+    const bt = data.bodyTypes[idx];
+    updateData((d) => {
+      d.bodyTypes.splice(idx, 1);
+      // remove products for this body type in all zones
+      Object.values(d.zones).forEach((z) => { delete z.products[bt.id]; });
+    });
+    if (bodyType === bt.id) setBodyType(data.bodyTypes[0]?.id);
+  }
+
+  function addBodyType() {
+    const newId = `body_${Date.now()}`;
+    updateData((d) => {
+      d.bodyTypes.push({ id: newId, label: "Новый тип", icon: "🚗" });
+    });
+  }
+
+  // Zone label
+  function updateZoneLabel(val) {
+    updateData((d) => { d.zones[zone].label = val; });
+  }
+
+  function handleImageUpload(e, idx) {
+    const file = e.target.files[0];
+    if (!file) return;
+    const reader = new FileReader();
+    reader.onload = (event) => {
+      updateBodyType(idx, "image", event.target.result);
+      updateBodyType(idx, "icon", null); // Eski icon verisini temizle
+    };
+    reader.readAsDataURL(file);
+  }
+
+  // ── Save = download updated data.json ──────────────────────
+  // Since there's no backend, admin downloads the JSON and replaces public/data.json
+  async function handleSave() {
+  const res = await fetch("/api/data", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(data),
+  });
+  const result = await res.json();
+  if (!result.ok) { alert("Hata: " + result.error); return; }
+  setSaved(true);
+  setTimeout(() => setSaved(false), 3000);
+}
+
+  // ── Render ─────────────────────────────────────────────────
+  if (loading) return <div className={styles.loadingScreen}>Загрузка...</div>;
+  if (error)   return <div className={styles.loadingScreen}>Ошибка: {error}</div>;
+
+  const products = getProducts();
+
+  return (
+    <div className={styles.adminWrapper}>
+
+      {/* Header */}
+      <header className={styles.adminHeader}>
+        <div className={styles.adminHeaderLeft}>
+          <span className={styles.adminHeaderIcon}>⚙️</span>
+          <div>
+            <h1 className={styles.adminHeaderTitle}>Панель администратора</h1>
+            <p className={styles.adminHeaderSub}>Управление товарами, ценами и типами кузова</p>
+          </div>
+        </div>
+        <div className={styles.adminHeaderRight}>
+          {saved && (
+            <span className={styles.savedBadge}>
+              ✓  Сохранено
+            </span>
+          )}
+          <button className={styles.btnSaveHeader} onClick={handleSave}>
+            💾 Сохранить
+          </button>
+          <button className={styles.btnLogout} onClick={onLogout}>Выйти</button>
+        </div>
+      </header>
+
+      {/* Tab bar */}
+      <div className={styles.tabBar}>
+        {ADMIN_TABS.map((t) => (
+          <button
+            key={t.id}
+            className={`${styles.tabBtn} ${tab === t.id ? styles.tabActive : ""}`}
+            onClick={() => setTab(t.id)}
+          >
+            {t.label}
+          </button>
+        ))}
+      </div>
+
+      {/* ── PRODUCTS TAB ─────────────────────────────────────── */}
+      {tab === "products" && (
+        <div className={styles.adminBody}>
+
+          {/* Sidebar: zones */}
+          <aside className={styles.sidebar}>
+            <p className={styles.sidebarLabel}>Зоны</p>
+            {Object.entries(data.zones).map(([zid, z]) => (
+              <button
+                key={zid}
+                className={`${styles.sidebarItem} ${zone === zid ? styles.sidebarActive : ""}`}
+                onClick={() => setZone(zid)}
+              >
+                {z.label}
+              </button>
+            ))}
+          </aside>
+
+          {/* Main content */}
+          <main className={styles.content}>
+
+            {/* Zone label */}
+            <div className={styles.fieldRow}>
+              <label className={styles.fieldLabel}>Название зоны</label>
+              <input
+                className={styles.fieldInput}
+                value={data.zones[zone]?.label || ""}
+                onChange={(e) => updateZoneLabel(e.target.value)}
+              />
+            </div>
+
+            {/* Body type selector */}
+            <div className={styles.bodyTypeRow}>
+              <span className={styles.fieldLabel}>Тип кузова</span>
+              <div className={styles.bodyTypePills}>
+                {data.bodyTypes.map((b) => (
+                  <button
+                    key={b.id}
+                    className={`${styles.bodyPill} ${bodyType === b.id ? styles.bodyPillActive : ""}`}
+                    onClick={() => setBodyType(b.id)}
+                  >
+                    {b.image ? <img src={b.image} alt={b.label} className={styles.bodyPillIcon} /> : (b.icon && <span className={styles.bodyPillEmoji}>{b.icon}</span>)}
+                    {b.label}
+                  </button>
+                ))}
+              </div>
+            </div>
+
+            {/* Package tabs */}
+            <div className={styles.pkgTabs}>
+              {data.packages.map((p) => (
+                <button
+                  key={p}
+                  className={`${styles.pkgTab} ${pkg === p ? styles.pkgActive : ""}`}
+                  onClick={() => setPkg(p)}
+                >
+                  {p}
+                </button>
+              ))}
+            </div>
+
+            {/* Products table */}
+            <div className={styles.tableWrapper}>
+              <table className={styles.table}>
+                <thead>
+                  <tr>
+                    <th className={styles.th}>Название товара</th>
+                    <th className={`${styles.th} ${styles.thNum}`}>Цена (m)</th>
+                    <th className={`${styles.th} ${styles.thNum}`}>Кол-во</th>
+                    <th className={`${styles.th} ${styles.thNum}`}>Ед.</th>
+                    <th className={`${styles.th} ${styles.thNum}`}>Итого</th>
+                    <th className={styles.th}></th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {products.map((p, i) => (
+                    <tr key={i} className={styles.tr}>
+                      <td className={styles.td}>
+                        <input
+                          className={styles.cellInput}
+                          value={p.name}
+                          onChange={(e) => updateProduct(i, "name", e.target.value)}
+                        />
+                      </td>
+                      <td className={styles.td}>
+                        <input
+                          className={`${styles.cellInput} ${styles.cellNum}`}
+                          type="number" min="0"
+                          value={p.price}
+                          onChange={(e) => updateProduct(i, "price", e.target.value)}
+                        />
+                      </td>
+                      <td className={styles.td}>
+                        <input
+                          className={`${styles.cellInput} ${styles.cellNum}`}
+                          type="number" min="0"
+                          value={p.qty}
+                          onChange={(e) => updateProduct(i, "qty", e.target.value)}
+                        />
+                      </td>
+                      <td className={styles.td}>
+                        <input
+                          className={`${styles.cellInput} ${styles.cellNum}`}
+                          value={p.unit}
+                          onChange={(e) => updateProduct(i, "unit", e.target.value)}
+                        />
+                      </td>
+                      <td className={`${styles.td} ${styles.tdTotal}`}>
+                        {(p.price * p.qty).toLocaleString("ru")} m
+                      </td>
+                      <td className={styles.td}>
+                        <button className={styles.btnDel} onClick={() => deleteProduct(i)}>✕</button>
+                      </td>
+                    </tr>
+                  ))}
+                  {products.length === 0 && (
+                    <tr>
+                      <td colSpan={6} className={styles.emptyRow}>
+                        Нет товаров для этой комбинации
+                      </td>
+                    </tr>
+                  )}
+                </tbody>
+              </table>
+            </div>
+
+            <button className={styles.btnAdd} onClick={addProduct}>
+              + Добавить товар
+            </button>
+
+          </main>
+        </div>
+      )}
+
+      {/* ── BODY TYPES TAB ───────────────────────────────────── */}
+      {tab === "bodytypes" && (
+        <div className={styles.bodyTypesPage}>
+          <div className={styles.bodyTypesHeader}>
+            <h2 className={styles.bodyTypesTitle}>Типы кузова</h2>
+            <p className={styles.bodyTypesSub}>
+              Добавляйте, удаляйте и редактируйте типы кузова. Изменения применяются
+              ко всем зонам и пакетам.
+            </p>
+          </div>
+
+          <div className={styles.bodyTypesGrid}>
+            {data.bodyTypes.map((b, i) => (
+              <div key={b.id} className={styles.bodyTypeCard}>
+                <div className={styles.imageUploader}>
+                  {b.image ? (
+                    <img src={b.image} alt="Preview" className={styles.iconPreview} />
+                  ) : (
+                    b.icon && <span className={styles.iconPreview}>{b.icon}</span>
+                  )}
+                  <label className={styles.uploadLabel}>
+                    <span>{b.image || b.icon ? 'Изменить' : 'Загрузить'}</span>
+                    <input
+                      type="file"
+                      accept="image/png, image/jpeg, image/svg+xml"
+                      onChange={(e) => handleImageUpload(e, i)}
+                      style={{ display: 'none' }}
+                    />
+                  </label>
+                </div>
+                <div className={styles.bodyTypeCardBottom}>
+                  <input
+                    className={styles.fieldInput}
+                    value={b.label}
+                    onChange={(e) => updateBodyType(i, "label", e.target.value)}
+                    placeholder="Название типа"
+                  />
+                  <button
+                    className={styles.btnDel}
+                    onClick={() => {
+                      if (window.confirm(`Удалить тип "${b.label}"? Все товары для этого типа будут удалены.`)) {
+                        deleteBodyType(i);
+                      }
+                    }}
+                  >
+                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M18 6L6 18M6 6l12 12" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg>
+                  </button>
+                </div>
+              </div>
+            ))}
+
+            {/* Add new */}
+            <button className={styles.bodyTypeAddCard} onClick={addBodyType}>
+              <span>+</span>
+              <span>Добавить тип</span>
+            </button>
+          </div>
+
+          <div className={styles.saveHint}>
+            <p>
+              После всех изменений нажмите <strong>«Сохранить»</strong> в шапке.
+            </p>
+          </div>
+        </div>
+      )}
+
+      {/* Floating save */}
+      <div className={styles.floatSave}>
+        <button className={styles.btnSaveFloat} onClick={handleSave}>
+          💾 Сохранить
+        </button>
+      </div>
+
+    </div>
+  );
+}
+
+// ─── PAGE EXPORT ─────────────────────────────────────────────────────────────
+
+export default function AdminPage() {
+  const [authed, setAuthed] = useState(false);
+  return authed
+    ? <AdminPanel onLogout={() => setAuthed(false)} />
+    : <LoginScreen onLogin={() => setAuthed(true)} />;
+}

src/pages/Category/index.jsx

@@ -15,6 +15,7 @@ import CategoryFilters from "./components/CategoryFilters";
 import CategoryBreadcrumbs from "./components/CategoryBreadcrumbs";
 import useCategoryData from "./hooks/useCategoryData";
 import useCategoryProducts from "./hooks/useCategoryProducts";
+import Carconfigurator from "../../components/CarConfigurator/Carconfigurator";
 
 import MobilePhoneCard from "./components/Mobilephonecard";
 
@@ -375,6 +376,8 @@ const CategoryPage = () => {
         />
 
         <main className={styles.productsContainer}>
+          {categoryId === "1136" && (
+            <Carconfigurator />          )}
           {isInitialLoad ? (
             <div className={styles.loaderContainer}>
               <Loader />

src/routes.jsx

@@ -20,6 +20,7 @@ const ContactUs = lazy(() => import("./pages/ContactUs/index.jsx"));
 const DeliveryTerms = lazy(() => import("./pages/DeliveryTerms/index.jsx"));
 const AboutUs = lazy(() => import("./pages/AboutUs/index.jsx"));
 const PrivacyPolicy = lazy(() => import("./pages/PrivacyPolicy/index.jsx"));
+const AdminPage = lazy(() => import("./pages/CarconfiguratorAdmin/index.jsx"));
 
 export default function Router() {
   const routes = useRoutes([
@@ -47,6 +48,7 @@ export default function Router() {
         { path: "/delivery-and-payment", element: <DeliveryTerms /> },
         { path: "/about-us", element: <AboutUs /> },
         { path: "/privacy-policy", element: <PrivacyPolicy /> },
+        { path: "/carconfigurator-admin", element: <AdminPage /> },
       ],
     },
   ]);