inmake/IRTH-2
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

upd

Browse Source
This commit is contained in:
inmake
2024-07-26 18:40:31 +05:00
parent 08b86c8b51
commit e381c5badc
18 changed files with 262 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/public/images/clouds/cloud-1.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 307 KiB

client/public/images/clouds/cloud-10.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 166 KiB

client/public/images/clouds/cloud-11.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 288 KiB

client/public/images/clouds/cloud-12.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 331 KiB

client/public/images/clouds/cloud-13.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 255 KiB

client/public/images/clouds/cloud-2.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 202 KiB

client/public/images/clouds/cloud-3.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 246 KiB

client/public/images/clouds/cloud-4.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 278 KiB

client/public/images/clouds/cloud-5.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 103 KiB

client/public/images/clouds/cloud-6.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 77 KiB

client/public/images/clouds/cloud-7.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 90 KiB

client/public/images/clouds/cloud-8.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 136 KiB

client/public/images/clouds/cloud-9.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 277 KiB

client/src/components/masterplanPage/map/Clouds.tsx
+211
View File
@@ -0,0 +1,211 @@
import { useState } from "react";
import { useTransformEffect } from "react-zoom-pan-pinch";
function Clouds() {
const [mapScale, setMapScale] = useState(1);
useTransformEffect(({ state }) => {
const scale = 1 / state.scale;
setMapScale(scale);
});
return (
<div
className="absolute w-fit h-full z-40 select-none tounch-none pointer-events-none tranlsate-all duration-300 flex
"
style={{
opacity: `${Math.abs(mapScale - 0.5) * 200}%`,
}}
>
<div
className={`w-[150vw] h-[150vw] relative transition-opacity ease-in-out infinite-animation opacity-40 `}
>
<img
src="/images/clouds/cloud-1.png"
alt=""
className="scale-[0.6] absolute top-[2%] left-[50%] "
/>
<img
src="/images/clouds/cloud-12.png"
alt=""
className="scale-[0.6] absolute top-[5%] left-[20%] "
/>
<img
src="/images/clouds/cloud-2.png"
alt=""
className="scale-[0.6] absolute top-[3%] left-[10%] "
/>
<img
src="/images/clouds/cloud-3.png"
alt=""
className="scale-[0.6] absolute top-[25%] left-[45%] "
/>
<img
src="/images/clouds/cloud-4.png"
alt=""
className="scale-[0.6] absolute top-[32%] left-[48%] "
/>
<img
src="/images/clouds/cloud-5.png"
alt=""
className="scale-[0.6] absolute top-[55%] left-[15%] "
/>
<img
src="/images/clouds/cloud-6.png"
alt=""
className="scale-[0.6] absolute top-[65%] left-[25%] "
/>
<img
src="/images/clouds/cloud-7.png"
alt=""
className="scale-[0.6] absolute top-[35%] left-[30%] "
/>
<img
src="/images/clouds/cloud-8.png"
alt=""
className="scale-[0.6] absolute top-[35%] left-[80%] "
/>
</div>
<div
className={`w-[150vw] h-[150vw] relative transition-opacity ease-in-out infinite-animation opacity-40 `}
>
<img
src="/images/clouds/cloud-1.png"
alt=""
className="scale-[0.6] absolute top-[2%] left-[50%] "
/>
<img
src="/images/clouds/cloud-12.png"
alt=""
className="scale-[0.6] absolute top-[5%] left-[20%] "
/>
<img
src="/images/clouds/cloud-2.png"
alt=""
className="scale-[0.6] absolute top-[3%] left-[10%] "
/>
<img
src="/images/clouds/cloud-3.png"
alt=""
className="scale-[0.6] absolute top-[25%] left-[45%] "
/>
<img
src="/images/clouds/cloud-4.png"
alt=""
className="scale-[0.6] absolute top-[32%] left-[48%] "
/>
<img
src="/images/clouds/cloud-5.png"
alt=""
className="scale-[0.6] absolute top-[55%] left-[15%] "
/>
<img
src="/images/clouds/cloud-6.png"
alt=""
className="scale-[0.6] absolute top-[65%] left-[25%] "
/>
<img
src="/images/clouds/cloud-7.png"
alt=""
className="scale-[0.6] absolute top-[35%] left-[30%] "
/>
<img
src="/images/clouds/cloud-8.png"
alt=""
className="scale-[0.6] absolute top-[35%] left-[80%] "
/>
</div>
</div>
// <div
// className="absolute w-fit h-full z-40 select-none tounch-none pointer-events-none tranlsate-all duration-300 flex top-[150vw] left-[-150vw]
// "
// style={{
// transform: "rotate(125deg)",
// opacity: `${Math.abs(mapScale - 0.5) * 200}%`,
// }}
// >
// <div
// className={`w-[150vw] h-[150vw] relative transition-opacity ease-in-out infinite-animation`}
// >
// <img
// src="/images/clouds/cloud-1.png"
// alt=""
// className="scale-[0.6] absolute top-0 left-[50%]"
// />
// <img
// src="/images/clouds/cloud-2.png"
// alt=""
// className="scale-[0.6] absolute top-[20%] left-[10%]"
// />
// <img
// src="/images/clouds/cloud-3.png"
// alt=""
// className="scale-[0.6] absolute top-[30%] left-[45%]"
// />
// <img src="/images/clouds/cloud-4.png" alt="" className="scale-[0.6] " />
// <img
// src="/images/clouds/cloud-5.png"
// alt=""
// className="scale-[0.6] absolute top-[50%] left-[15%] "
// />
// <img
// src="/images/clouds/cloud-6.png"
// alt=""
// className="scale-[0.6] absolute top-[35%] left-[25%] "
// />
// <img
// src="/images/clouds/cloud-7.png"
// alt=""
// className="scale-[0.6] absolute top-[35%] left-[30%] "
// />
// <img
// src="/images/clouds/cloud-8.png"
// alt=""
// className="scale-[0.6] absolute top-[35%] left-[80%] "
// />
// </div>
// <div
// className={`w-[150vw] h-[150vw] relative transition-opacity ease-in-out infinite-animation `}
// >
// <img
// src="/images/clouds/cloud-1.png"
// alt=""
// className="scale-[0.6] absolute top-0 left-[50%]"
// />
// <img
// src="/images/clouds/cloud-2.png"
// alt=""
// className="scale-[0.6] absolute top-[20%] left-[10%]"
// />
// <img
// src="/images/clouds/cloud-3.png"
// alt=""
// className="scale-[0.6] absolute top-[30%] left-[45%]"
// />
// <img src="/images/clouds/cloud-4.png" alt="" className="scale-[0.6] " />
// <img
// src="/images/clouds/cloud-5.png"
// alt=""
// className="scale-[0.6] absolute top-[50%] left-[15%] "
// />
// <img
// src="/images/clouds/cloud-6.png"
// alt=""
// className="scale-[0.6] absolute top-[35%] left-[25%] "
// />
// <img
// src="/images/clouds/cloud-7.png"
// alt=""
// className="scale-[0.6] absolute top-[35%] left-[30%] "
// />
// <img
// src="/images/clouds/cloud-8.png"
// alt=""
// className="scale-[0.6] absolute top-[35%] left-[80%] "
// />
// </div>
// </div>
);
}
export { Clouds };
client/src/components/masterplanPage/map/Map.tsx
+9
View File
@@ -5,6 +5,7 @@ import Marker from "./Marker";
import { markers } from "../../../consts/markers";
import useMarker from "../../../store/useMarker";
import ZoomControlls from "./ZoomControlls";
import { Clouds } from "./Clouds";
const Map = () => {
const { hoveredMarker } = useMarker();
@@ -39,6 +40,14 @@ const Map = () => {
}}
wrapperClass={"top-[-50px] left-[-200px]"}
>
<ImageMarker
src="images/Map.jpg"
markers={imageMarkers}
markerComponent={Clouds}
extraClass={`transition-all absolute top-0 left-0 duration-300 ease-in-out z-50 ${
hoveredMarker ? "brightness-[.7]" : ""
}`}
/>
<ImageMarker
src="images/Map.jpg"
markers={imageMarkers}
client/src/components/modals/UnitModal.tsx
+6 -11
View File
@@ -7,7 +7,7 @@ import BookingIcon from "../icons/BookingIcon";
import HeartIcon from "../icons/HeartIcon";
import VirtualTourIcon from "../icons/VirtualTourIcon";
import unitTypes from "../../data/unitTypes.json";
import { useLocation, useNavigate, useSearchParams } from "react-router-dom";
import { useLocation, useNavigate } from "react-router-dom";
import { useEffect } from "react";
import useFavoritesStore from "../../store/useFavoritesStore";
import HeartFilledIcon from "../icons/HeartFilledIcon";
@@ -22,7 +22,6 @@ function UnitModal({ unit, type }: Props) {
const { setModal } = useModal();
const navigate = useNavigate();
const { favoriteUnits, setFavoriteUnits } = useFavoritesStore();
const [searchParams, setSearchParams] = useSearchParams();
const location = useLocation();
function getViewImage(): string {
@@ -192,16 +191,14 @@ function UnitModal({ unit, type }: Props) {
}
}
useEffect(() => {
searchParams.set("unitNo", unit.unitNo);
setSearchParams(searchParams);
function handleClickTour() {
navigate(`/virtual-tour/${type}?unitNo=${unit.unitNo}`);
}
useEffect(() => {
document.body.classList.add("overflow-y-hidden");
return () => {
searchParams.delete("unitNo");
setSearchParams(searchParams);
document.body.classList.remove("overflow-y-hidden");
};
}, []);
@@ -356,9 +353,7 @@ function UnitModal({ unit, type }: Props) {
icon={<VirtualTourIcon />}
text="3D tour"
className="justify-center text-sm w-full"
onClick={() =>
navigate(`/virtual-tour/${type}?unitNo=${unit.unitNo}`)
}
onClick={handleClickTour}
/>
)}
<Button
client/src/components/modals/UnitModalForSearchPage.tsx
+12 -10
View File
@@ -192,16 +192,20 @@ function UnitModalForSearchPage({ unit, type }: Props) {
}
}
useEffect(() => {
searchParams.set("unitNo", unit.unitNo);
setSearchParams(searchParams);
function handleClickTour() {
navigate(`/virtual-tour/${type}?unitNo=${unit.unitNo}`);
}
function handleClickBack() {
searchParams.delete("unitNo");
setSearchParams(searchParams);
setModal(null);
}
useEffect(() => {
document.body.classList.add("overflow-y-hidden");
return () => {
searchParams.delete("unitNo");
setSearchParams(searchParams);
document.body.classList.remove("overflow-y-hidden");
};
}, []);
@@ -219,7 +223,7 @@ function UnitModalForSearchPage({ unit, type }: Props) {
<Button
buttonType="cta"
icon={<ArrowLeftIcon />}
onClick={() => setModal(null)}
onClick={handleClickBack}
/>
<p className="text-2xl font-[#0D1922] font-semibold">
{
@@ -356,9 +360,7 @@ function UnitModalForSearchPage({ unit, type }: Props) {
icon={<VirtualTourIcon />}
text="3D tour"
className="justify-center text-sm w-full"
onClick={() =>
navigate(`/virtual-tour/${type}?unitNo=${unit.unitNo}`)
}
onClick={handleClickTour}
/>
)}
<Button
client/src/index.css
+24
View File
@@ -49,6 +49,30 @@ body {
}
@layer components {
.infinite-animation {
animation: infiniter 75s linear infinite;
}
@keyframes infiniter {
from {
transform: translateX(0%);
}
to {
transform: translateX(-100%);
}
}
@keyframes infiniter {
from {
transform: translateX(0%);
transform: translateX(-100%);
}
to {
transform: translateX(-100%);
transform: translateX(0%);
}
}
.desc-shadow {
box-shadow: 0px 4px 20px 1px #00000026;
}