upd

2024-04-16 17:32:09 +05:00
parent 00499f9db8
commit 9eb0f0dccb
45 changed files with 690 additions and 80 deletions
@@ -6,11 +6,15 @@ import { useNavigate } from "react-router-dom";
 import MarkTower1Icon from "./icons/marks/MarkTower1Icon";
 import MarkTower2Icon from "./icons/marks/MarkTower2Icon";
 import MarkWalkIcon from "./icons/marks/MarkWalkIcon";
+import MarkLockIcon from "./icons/marks/MarkLockIcon";
+import MarkWalkHereIcon from "./icons/marks/MarkWalkHereIcon";

 const markIcons: { [key: string]: React.ReactNode } = {
  tower1: <MarkTower1Icon />,
  tower2: <MarkTower2Icon />,
  walk: <MarkWalkIcon />,
+  lock: <MarkLockIcon />,
+  walkHere: <MarkWalkHereIcon />,
 };

 interface MarksContainerProps {
@@ -19,7 +19,7 @@ const marks: Mark[] = [
    icon: "tower1",
    x: 1360,
    y: 840,
-    // url: "/virtual-tour-3",
+    url: "/tower1",
  },
  {
    id: "2",
@@ -27,7 +27,7 @@ const marks: Mark[] = [
    icon: "tower2",
    x: 730,
    y: 820,
-    // url: "/virtual-tour-4",
+    url: "/tower2",
  },
  {
    id: "3",
@@ -196,7 +196,7 @@ function SequenceSlider({ path, onChange }: SequenceSliderProps) {
      </div>

      <div
-        className="absolute left-0 cursor-e-resize z-40 select-none"
+        className="absolute left-0 z-40 select-none"
        style={{ width: `${width}px`, height: `${width}px`, top: `-${top}px` }}
        onMouseMove={handleMouseMove}
        onTouchMove={handleTouchMove}
@@ -0,0 +1,21 @@
+function MarkLockIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={64}
+      height={64}
+      fill="none"
+      //   {...props}
+    >
+      <path
+        stroke="#fff"
+        strokeLinecap="square"
+        strokeWidth={2.7}
+        d="M25.7 27.604v-6.028c0-1.532.664-3 1.845-4.084 1.182-1.083 2.784-1.691 4.455-1.691 1.671 0 3.273.608 4.455 1.691 1.181 1.083 1.845 2.552 1.845 4.084v6.028m-15.954 0h19.309c.632 0 1.145.558 1.145 1.247v17.203c0 .688-.513 1.247-1.145 1.247h-19.31c-.632 0-1.145-.559-1.145-1.247V28.85c0-.689.513-1.247 1.146-1.247Z"
+      />
+      <circle cx={32} cy={39.201} r={3.6} fill="#fff" />
+    </svg>
+  );
+}
+
+export default MarkLockIcon;
@@ -0,0 +1,19 @@
+function MarkWalkHereIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={64}
+      height={64}
+      fill="none"
+      //   {...props}
+    >
+      <path
+        stroke="#fff"
+        strokeWidth={3}
+        d="M44.75 44.75v-24a1.5 1.5 0 0 0-1.5-1.5H38m-5.25 18h3a1.5 1.5 0 0 1 1.5 1.5v4.5a1.5 1.5 0 0 1-1.5 1.5h-15a1.5 1.5 0 0 1-1.5-1.5v-22.5a1.5 1.5 0 0 1 1.5-1.5H38m0 0v8.25a1.5 1.5 0 0 1-1.5 1.5H35m-15.75 3.75h6a1.5 1.5 0 0 0 1.5-1.5v-4.5"
+      />
+    </svg>
+  );
+}
+
+export default MarkWalkHereIcon;
@@ -1,65 +1,118 @@
 [
  {
-    "id": "Niz_Dvor_1",
-    "src": "/images/NizDvor/NKS_360_NizDvor01.jpg",
-    "position": [-135.4, 0, -62.6],
+    "id": "R_Hata_0",
+    "src": "/images/R_Hata/R_Hata_0.jpg",
+    "position": [88, 0, 51],
    "links": [
-      { "toId": "Niz_Dvor_6", "label": "" },
-      { "toId": "Niz_Dvor_2", "label": "" }
+      { "toId": "R_Hata_1", "label": "Гардероб" },
+      { "toId": "R_Hata_2", "label": "Коридор" }
    ]
  },
  {
-    "id": "Niz_Dvor_2",
-    "src": "/images/NizDvor/NKS_360_NizDvor02.jpg",
-    "position": [-47.39, 0, 10.06],
+    "id": "R_Hata_1",
+    "src": "/images/R_Hata/R_Hata_1.jpg",
+    "position": [63, 0, 62],
+    "links": [{ "toId": "R_Hata_0", "label": "Прихожая" }]
+  },
+  {
+    "id": "R_Hata_2",
+    "src": "/images/R_Hata/R_Hata_2.jpg",
+    "position": [102, 0, 32],
    "links": [
-      { "toId": "Niz_Dvor_1", "label": "" },
-      { "toId": "Niz_Dvor_3", "label": "" }
+      { "toId": "R_Hata_0", "label": "Прихожая" },
+      { "toId": "R_Hata_8", "label": "Комната" },
+      { "toId": "R_Hata_5", "label": "Гостиная" },
+      { "toId": "R_Hata_6", "label": "Кухня" },
+      { "toId": "R_Hata_14", "label": "Комната" },
+      { "toId": "R_Hata_3", "label": "Санузел" }
    ]
  },
  {
-    "id": "Niz_Dvor_3",
-    "src": "/images/NizDvor/NKS_360_NizDvor03.jpg",
-    "position": [-2.28, 0, 54.31],
+    "id": "R_Hata_3",
+    "src": "/images/R_Hata/R_Hata_3.jpg",
+    "position": [119, 0, 53],
+    "links": [{ "toId": "R_Hata_2", "label": "Коридор" }]
+  },
+  {
+    "id": "R_Hata_4",
+    "src": "/images/R_Hata/R_Hata_4.jpg",
+    "position": [153, 0, 29],
+    "links": [{ "toId": "R_Hata_14", "label": "Комната" }]
+  },
+  {
+    "id": "R_Hata_5",
+    "src": "/images/R_Hata/R_Hata_5.jpg",
+    "position": [96, 0, -5],
    "links": [
-      { "toId": "Niz_Dvor_2", "label": "" },
-      { "toId": "Niz_Dvor_4", "label": "" }
+      { "toId": "R_Hata_6", "label": "Кухня" },
+      { "toId": "R_Hata_2", "label": "Коридор" }
    ]
  },
  {
-    "id": "Niz_Dvor_4",
-    "src": "/images/NizDvor/NKS_360_NizDvor04.jpg",
-    "position": [60.5, 0, 22.7],
+    "id": "R_Hata_6",
+    "src": "/images/R_Hata/R_Hata_6.jpg",
+    "position": [118, 0, -2],
    "links": [
-      { "toId": "Niz_Dvor_3", "label": "" },
-      { "toId": "Niz_Dvor_5", "label": "" }
+      { "toId": "R_Hata_2", "label": "Коридор" },
+      { "toId": "R_Hata_5", "label": "Гостиная" }
    ]
  },
  {
-    "id": "Niz_Dvor_5",
-    "src": "/images/NizDvor/NKS_360_NizDvor05.jpg",
-    "position": [3.3, 0, -24.9],
+    "id": "R_Hata_7",
+    "src": "/images/R_Hata/R_Hata_7.jpg",
+    "position": [55, 0, -5],
+    "links": [{ "toId": "R_Hata_8", "label": "Комната" }]
+  },
+  {
+    "id": "R_Hata_8",
+    "src": "/images/R_Hata/R_Hata_8.jpg",
+    "position": [73, 0, 32],
    "links": [
-      { "toId": "Niz_Dvor_4", "label": "" },
-      { "toId": "Niz_Dvor_0", "label": "" }
+      { "toId": "R_Hata_9", "label": "Санузел" },
+      { "toId": "R_Hata_7", "label": "Комната" },
+      { "toId": "R_Hata_2", "label": "Коридор" }
    ]
  },
  {
-    "id": "Niz_Dvor_0",
-    "src": "/images/NizDvor/NKS_360_NizDvor00.jpg",
-    "position": [-61.9, 0, -76.4],
+    "id": "R_Hata_9",
+    "src": "/images/R_Hata/R_Hata_9.jpg",
+    "position": [55, 0, 39],
+    "links": [{ "toId": "R_Hata_8", "label": "Комната" }]
+  },
+  {
+    "id": "R_Hata_10",
+    "src": "/images/R_Hata/R_Hata_10.jpg",
+    "position": [70.6, 0, 60],
    "links": [
-      { "toId": "Niz_Dvor_5", "label": "" },
-      { "toId": "Niz_Dvor_6", "label": "" }
+      { "toId": "R_Hata_0", "label": "" },
+      { "toId": "R_Hata_1", "label": "" }
    ]
  },
  {
-    "id": "Niz_Dvor_6",
-    "src": "/images/NizDvor/NKS_360_NizDvor06.jpg",
-    "position": [-119.7, 0, -121.6],
+    "id": "R_Hata_11",
+    "src": "/images/R_Hata/R_Hata_11.jpg",
+    "position": [66.3, 0, 36.1],
+    "links": []
+  },
+  {
+    "id": "R_Hata_12",
+    "src": "/images/R_Hata/R_Hata_12.jpg",
+    "position": [78.1, 0, 29.3],
+    "links": []
+  },
+  {
+    "id": "R_Hata_13",
+    "src": "/images/R_Hata/R_Hata_13.jpg",
+    "position": [110.6, 0, 41.1],
+    "links": []
+  },
+  {
+    "id": "R_Hata_14",
+    "src": "/images/R_Hata/R_Hata_14.jpg",
+    "position": [127.3, 0, 32.1],
    "links": [
-      { "toId": "Niz_Dvor_0", "label": "" },
-      { "toId": "Niz_Dvor_1", "label": "" }
+      { "toId": "R_Hata_4", "label": "Комната" },
+      { "toId": "R_Hata_2", "label": "Коридор" }
    ]
  }
 ]
@@ -1,65 +1,111 @@
 [
  {
-    "id": "Niz_Dvor_1",
-    "src": "/images/NizDvor/NKS_360_NizDvor01.jpg",
-    "position": [-135.4, 0, -62.6],
+    "id": "L_Hata_0",
+    "src": "/images/L_Hata/L_Hata_0.jpg",
+    "position": [-103.69, 0, -44.75],
+    "links": [{ "toId": "L_Hata_9", "label": "Коридор" }]
+  },
+  {
+    "id": "L_Hata_1",
+    "src": "/images/L_Hata/L_Hata_1.jpg",
+    "position": [-100.25, 0, -42.89],
    "links": [
-      { "toId": "Niz_Dvor_6", "label": "" },
-      { "toId": "Niz_Dvor_2", "label": "" }
+      { "toId": "L_Hata_9", "label": "Коридор" },
+      { "toId": "L_Hata_8", "label": "Санузел" },
+      { "toId": "L_Hata_7", "label": "Комната" },
+      { "toId": "L_Hata_2", "label": "Коридор" },
+      { "toId": "L_Hata_6", "label": "Комната" },
+      { "toId": "L_Hata_11", "label": "Комната" }
    ]
  },
  {
-    "id": "Niz_Dvor_2",
-    "src": "/images/NizDvor/NKS_360_NizDvor02.jpg",
-    "position": [-47.39, 0, 10.06],
+    "id": "L_Hata_2",
+    "src": "/images/L_Hata/L_Hata_2.jpg",
+    "position": [-98.79, 0, -40.85],
    "links": [
-      { "toId": "Niz_Dvor_1", "label": "" },
-      { "toId": "Niz_Dvor_3", "label": "" }
+      { "toId": "L_Hata_1", "label": "Коридор" },
+      { "toId": "L_Hata_3", "label": "Кухня" }
    ]
  },
  {
-    "id": "Niz_Dvor_3",
-    "src": "/images/NizDvor/NKS_360_NizDvor03.jpg",
-    "position": [-2.28, 0, 54.31],
+    "id": "L_Hata_3",
+    "src": "/images/L_Hata/L_Hata_3.jpg",
+    "position": [-95.06, 0, -38.66],
    "links": [
-      { "toId": "Niz_Dvor_2", "label": "" },
-      { "toId": "Niz_Dvor_4", "label": "" }
+      { "toId": "L_Hata_2", "label": "Коридор" },
+      { "toId": "L_Hata_4", "label": "Кухня" }
    ]
  },
  {
-    "id": "Niz_Dvor_4",
-    "src": "/images/NizDvor/NKS_360_NizDvor04.jpg",
-    "position": [60.5, 0, 22.7],
+    "id": "L_Hata_4",
+    "src": "/images/L_Hata/L_Hata_4.jpg",
+    "position": [-95.07, 0, -35.38],
    "links": [
-      { "toId": "Niz_Dvor_3", "label": "" },
-      { "toId": "Niz_Dvor_5", "label": "" }
+      { "toId": "L_Hata_3", "label": "Кухня" },
+      { "toId": "L_Hata_5", "label": "Балкон" }
    ]
  },
  {
-    "id": "Niz_Dvor_5",
-    "src": "/images/NizDvor/NKS_360_NizDvor05.jpg",
-    "position": [3.3, 0, -24.9],
+    "id": "L_Hata_5",
+    "src": "/images/L_Hata/L_Hata_5.jpg",
+    "position": [-92.78, 0, -31.67],
+    "links": [{ "toId": "L_Hata_4", "label": "Комната" }]
+  },
+  {
+    "id": "L_Hata_6",
+    "src": "/images/L_Hata/L_Hata_6.jpg",
+    "position": [-95.91, 0, -42],
+    "links": [{ "toId": "L_Hata_1", "label": "Коридор" }]
+  },
+  {
+    "id": "L_Hata_7",
+    "src": "/images/L_Hata/L_Hata_7.jpg",
+    "position": [-97.47, 0, -44.71],
+    "links": [{ "toId": "L_Hata_1", "label": "Коридор" }]
+  },
+  {
+    "id": "L_Hata_8",
+    "src": "/images/L_Hata/L_Hata_8.jpg",
+    "position": [-100.68, 0, -45.16],
+    "links": [{ "toId": "L_Hata_1", "label": "Коридор" }]
+  },
+  {
+    "id": "L_Hata_9",
+    "src": "/images/L_Hata/L_Hata_9.jpg",
+    "position": [-102.13, 0, -43.45],
    "links": [
-      { "toId": "Niz_Dvor_4", "label": "" },
-      { "toId": "Niz_Dvor_0", "label": "" }
+      { "toId": "L_Hata_0", "label": "Прихожая" },
+      { "toId": "L_Hata_1", "label": "Коридор" }
    ]
  },
  {
-    "id": "Niz_Dvor_0",
-    "src": "/images/NizDvor/NKS_360_NizDvor00.jpg",
-    "position": [-61.9, 0, -76.4],
+    "id": "L_Hata_10",
+    "src": "/images/L_Hata/L_Hata_10.jpg",
+    "position": [-102.73, 0, -42.12],
+    "links": []
+  },
+  {
+    "id": "L_Hata_11",
+    "src": "/images/L_Hata/L_Hata_11.jpg",
+    "position": [-101.47, 0, -39.36],
    "links": [
-      { "toId": "Niz_Dvor_5", "label": "" },
-      { "toId": "Niz_Dvor_6", "label": "" }
+      { "toId": "L_Hata_1", "label": "Коридор" },
+      { "toId": "L_Hata_12", "label": "Комната" }
    ]
  },
  {
-    "id": "Niz_Dvor_6",
-    "src": "/images/NizDvor/NKS_360_NizDvor06.jpg",
-    "position": [-119.7, 0, -121.6],
+    "id": "L_Hata_12",
+    "src": "/images/L_Hata/L_Hata_12.jpg",
+    "position": [-101.25, 0, -36.96],
    "links": [
-      { "toId": "Niz_Dvor_0", "label": "" },
-      { "toId": "Niz_Dvor_1", "label": "" }
+      { "toId": "L_Hata_11", "label": "Комната" },
+      { "toId": "L_Hata_13", "label": "Санузел" }
    ]
+  },
+  {
+    "id": "L_Hata_13",
+    "src": "/images/L_Hata/L_Hata_13.jpg",
+    "position": [-98.86, 0, -37.99],
+    "links": [{ "toId": "L_Hata_12", "label": "Комната" }]
  }
 ]
@@ -7,12 +7,32 @@ import Infra2Page from "./pages/Infra2Page.tsx";
 import VirtualTour2Page from "./pages/VirtualTour2Page.tsx";
 import VirtualTour3Page from "./pages/VirtualTour3Page.tsx";
 import VirtualTour4Page from "./pages/VirtualTour4Page.tsx";
+import Tower1Page from "./pages/Tower1Page.tsx";
+import Tower1SelectPage from "./pages/Tower1SelectPage.tsx";
+import Tower2Page from "./pages/Tower2Page.tsx";
+import Tower2SelectPage from "./pages/Tower2SelectPage.tsx";

 const router = createBrowserRouter([
  {
    path: "/",
    element: <MainPage />,
  },
+  {
+    path: "/tower1",
+    element: <Tower1Page />,
+  },
+  {
+    path: "/tower1/select",
+    element: <Tower1SelectPage />,
+  },
+  {
+    path: "/tower2",
+    element: <Tower2Page />,
+  },
+  {
+    path: "/tower2/select",
+    element: <Tower2SelectPage />,
+  },
  {
    path: "/virtual-tour",
    element: <VirtualTourPage />,
@@ -1,7 +1,6 @@
 import { useNavigate } from "react-router-dom";
 import Button from "../components/Button";
 import SequenceSlider from "../components/SequenceSlider";
-// import SequenceAnimation from "../components/SequenceAnimation";

 function MainPage() {
  const navigate = useNavigate();
@@ -15,12 +14,6 @@ function MainPage() {
        }
      />

-      {/* <SequenceAnimation
-        path="/images/seqToRightTower"
-        frames={30}
-        play={false}
-      /> */}
-
      <div className="absolute xl:left-8 left-4 xl:bottom-8 bottom-4 z-50">
        <div className="flex gap-3">
          <Button
@@ -0,0 +1,82 @@
+import { useNavigate } from "react-router-dom";
+import MainMarksContainer from "../components/MainMarksContainer";
+import { Mark } from "../types/Mark";
+import { useEffect, useState } from "react";
+import ArrowLeftIcon from "../components/icons/ArrowLeftIcon";
+import Button from "../components/Button";
+
+const marks: Mark[] = [
+  {
+    id: "1",
+    label: "Перейти к планировке",
+    icon: "walkHere",
+    x: 1220,
+    y: 910,
+    url: "/tower1/select",
+  },
+];
+
+function Tower1Page() {
+  const [width, setWidth] = useState<number>();
+  const [top, setTop] = useState<number>();
+  const [isLoaded, setIsLoaded] = useState(false);
+  const navigate = useNavigate();
+
+  function handleResize() {
+    setWidth(window.innerWidth);
+    setTop(window.innerWidth / 2 - window.innerHeight / 2);
+  }
+
+  useEffect(() => {
+    handleResize();
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+
+  function handleOnImageLoad() {
+    setIsLoaded(true);
+  }
+
+  return (
+    <div>
+      <div className="scene absolute w-full h-full overflow-hidden">
+        <div
+          className="absolute left-0"
+          style={{
+            width: `${width}px`,
+            height: `${width}px`,
+            top: `-${top}px`,
+          }}
+        >
+          <img
+            width={`${width}px`}
+            height={`${width}px`}
+            src="/images/RightTower.jpg"
+            alt=""
+            className=""
+            onLoad={handleOnImageLoad}
+          />
+
+          <MainMarksContainer marks={marks} />
+        </div>
+        <div className="absolute left-8 bottom-8 z-50">
+          <Button
+            text="Генплан"
+            icon={<ArrowLeftIcon />}
+            widthFull
+            onClick={() => navigate("/")}
+          />
+        </div>
+        {!isLoaded && (
+          <div className="absolute top-0 left-0 w-full h-full flex items-center justify-center bg-neutral-950 z-[99999999]">
+            <h2 className="text-2xl font-tenor text-white whitespace-nowrap">
+              Загрузка...
+            </h2>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default Tower1Page;
@@ -0,0 +1,145 @@
+import { useNavigate } from "react-router-dom";
+import MainMarksContainer from "../components/MainMarksContainer";
+import { Mark } from "../types/Mark";
+import { useEffect, useState } from "react";
+import ArrowLeftIcon from "../components/icons/ArrowLeftIcon";
+import Button from "../components/Button";
+
+const marks: Mark[] = [
+  {
+    id: "1",
+    label: "Просмотр квартиры",
+    icon: "walk",
+    x: 1210,
+    y: 800,
+    url: "/virtual-tour-3",
+  },
+  {
+    id: "2",
+    label: "Недоступно",
+    icon: "lock",
+    x: 1270,
+    y: 960,
+  },
+  {
+    id: "3",
+    label: "Недоступно",
+    icon: "lock",
+    x: 1320,
+    y: 1100,
+  },
+  {
+    id: "4",
+    label: "Недоступно",
+    icon: "lock",
+    x: 1380,
+    y: 1300,
+  },
+  {
+    id: "5",
+    label: "Недоступно",
+    icon: "lock",
+    x: 1180,
+    y: 1350,
+  },
+  {
+    id: "6",
+    label: "Недоступно",
+    icon: "lock",
+    x: 950,
+    y: 1350,
+  },
+  {
+    id: "7",
+    label: "Недоступно",
+    icon: "lock",
+    x: 750,
+    y: 1300,
+  },
+  {
+    id: "8",
+    label: "Недоступно",
+    icon: "lock",
+    x: 820,
+    y: 1100,
+  },
+  {
+    id: "9",
+    label: "Недоступно",
+    icon: "lock",
+    x: 860,
+    y: 960,
+  },
+  {
+    id: "10",
+    label: "Недоступно",
+    icon: "lock",
+    x: 950,
+    y: 800,
+  },
+];
+
+function Tower1SelectPage() {
+  const [width, setWidth] = useState<number>();
+  const [top, setTop] = useState<number>();
+  const [isLoaded, setIsLoaded] = useState(false);
+  const navigate = useNavigate();
+
+  function handleResize() {
+    setWidth(window.innerWidth);
+    setTop(window.innerWidth / 2 - window.innerHeight / 2);
+  }
+
+  useEffect(() => {
+    handleResize();
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+
+  function handleOnImageLoad() {
+    setIsLoaded(true);
+  }
+
+  return (
+    <div>
+      <div className="scene absolute w-full h-full overflow-hidden">
+        <div
+          className="absolute left-0"
+          style={{
+            width: `${width}px`,
+            height: `${width}px`,
+            top: `-${top}px`,
+          }}
+        >
+          <img
+            width={`${width}px`}
+            height={`${width}px`}
+            src="/images/Split_RTower.jpg"
+            alt=""
+            className=""
+            onLoad={handleOnImageLoad}
+          />
+
+          <MainMarksContainer marks={marks} />
+        </div>
+        <div className="absolute left-8 bottom-8 z-50">
+          <Button
+            text="Генплан"
+            icon={<ArrowLeftIcon />}
+            widthFull
+            onClick={() => navigate("/")}
+          />
+        </div>
+        {!isLoaded && (
+          <div className="absolute top-0 left-0 w-full h-full flex items-center justify-center bg-neutral-950 z-[99999999]">
+            <h2 className="text-2xl font-tenor text-white whitespace-nowrap">
+              Загрузка...
+            </h2>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default Tower1SelectPage;
@@ -0,0 +1,82 @@
+import { useNavigate } from "react-router-dom";
+import MainMarksContainer from "../components/MainMarksContainer";
+import { Mark } from "../types/Mark";
+import { useEffect, useState } from "react";
+import ArrowLeftIcon from "../components/icons/ArrowLeftIcon";
+import Button from "../components/Button";
+
+const marks: Mark[] = [
+  {
+    id: "1",
+    label: "Перейти к планировке",
+    icon: "walkHere",
+    x: 1095,
+    y: 850,
+    url: "/tower2/select",
+  },
+];
+
+function Tower2Page() {
+  const [width, setWidth] = useState<number>();
+  const [top, setTop] = useState<number>();
+  const [isLoaded, setIsLoaded] = useState(false);
+  const navigate = useNavigate();
+
+  function handleResize() {
+    setWidth(window.innerWidth);
+    setTop(window.innerWidth / 2 - window.innerHeight / 2);
+  }
+
+  useEffect(() => {
+    handleResize();
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+
+  function handleOnImageLoad() {
+    setIsLoaded(true);
+  }
+
+  return (
+    <div>
+      <div className="scene absolute w-full h-full overflow-hidden">
+        <div
+          className="absolute left-0"
+          style={{
+            width: `${width}px`,
+            height: `${width}px`,
+            top: `-${top}px`,
+          }}
+        >
+          <img
+            width={`${width}px`}
+            height={`${width}px`}
+            src="/images/LeftTower.jpg"
+            alt=""
+            className=""
+            onLoad={handleOnImageLoad}
+          />
+
+          <MainMarksContainer marks={marks} />
+        </div>
+        <div className="absolute left-8 bottom-8 z-50">
+          <Button
+            text="Генплан"
+            icon={<ArrowLeftIcon />}
+            widthFull
+            onClick={() => navigate("/")}
+          />
+        </div>
+        {!isLoaded && (
+          <div className="absolute top-0 left-0 w-full h-full flex items-center justify-center bg-neutral-950 z-[99999999]">
+            <h2 className="text-2xl font-tenor text-white whitespace-nowrap">
+              Загрузка...
+            </h2>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default Tower2Page;
@@ -0,0 +1,145 @@
+import { useNavigate } from "react-router-dom";
+import MainMarksContainer from "../components/MainMarksContainer";
+import { Mark } from "../types/Mark";
+import { useEffect, useState } from "react";
+import ArrowLeftIcon from "../components/icons/ArrowLeftIcon";
+import Button from "../components/Button";
+
+const marks: Mark[] = [
+  {
+    id: "1",
+    label: "Просмотр квартиры",
+    icon: "walk",
+    x: 1720,
+    y: 980,
+    url: "/virtual-tour-4",
+  },
+  {
+    id: "2",
+    label: "Недоступно",
+    icon: "lock",
+    x: 1450,
+    y: 980,
+  },
+  {
+    id: "3",
+    label: "Недоступно",
+    icon: "lock",
+    x: 1300,
+    y: 980,
+  },
+  {
+    id: "4",
+    label: "Недоступно",
+    icon: "lock",
+    x: 830,
+    y: 980,
+  },
+  {
+    id: "5",
+    label: "Недоступно",
+    icon: "lock",
+    x: 680,
+    y: 980,
+  },
+  {
+    id: "6",
+    label: "Недоступно",
+    icon: "lock",
+    x: 450,
+    y: 980,
+  },
+  {
+    id: "7",
+    label: "Недоступно",
+    icon: "lock",
+    x: 1460,
+    y: 1240,
+  },
+  {
+    id: "8",
+    label: "Недоступно",
+    icon: "lock",
+    x: 1200,
+    y: 1240,
+  },
+  {
+    id: "9",
+    label: "Недоступно",
+    icon: "lock",
+    x: 950,
+    y: 1240,
+  },
+  {
+    id: "9",
+    label: "Недоступно",
+    icon: "lock",
+    x: 700,
+    y: 1240,
+  },
+];
+
+function Tower2SelectPage() {
+  const [width, setWidth] = useState<number>();
+  const [top, setTop] = useState<number>();
+  const [isLoaded, setIsLoaded] = useState(false);
+  const navigate = useNavigate();
+
+  function handleResize() {
+    setWidth(window.innerWidth);
+    setTop(window.innerWidth / 2 - window.innerHeight / 2);
+  }
+
+  useEffect(() => {
+    handleResize();
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+
+  function handleOnImageLoad() {
+    setIsLoaded(true);
+  }
+
+  return (
+    <div>
+      <div className="scene absolute w-full h-full overflow-hidden">
+        <div
+          className="absolute left-0"
+          style={{
+            width: `${width}px`,
+            height: `${width}px`,
+            top: `-${top}px`,
+          }}
+        >
+          <img
+            width={`${width}px`}
+            height={`${width}px`}
+            src="/images/Split_LTower.jpg"
+            alt=""
+            className=""
+            onLoad={handleOnImageLoad}
+          />
+
+          <MainMarksContainer marks={marks} />
+        </div>
+        <div className="absolute left-8 bottom-8 z-50">
+          <Button
+            text="Генплан"
+            icon={<ArrowLeftIcon />}
+            widthFull
+            onClick={() => navigate("/")}
+          />
+        </div>
+        {!isLoaded && (
+          <div className="absolute top-0 left-0 w-full h-full flex items-center justify-center bg-neutral-950 z-[99999999]">
+            <h2 className="text-2xl font-tenor text-white whitespace-nowrap">
+              Загрузка...
+            </h2>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default Tower2SelectPage;