diff --git a/src/components/InputComponent/InputComponent.css b/src/components/InputComponent/InputComponent.css index d22ac65..14b3a75 100644 --- a/src/components/InputComponent/InputComponent.css +++ b/src/components/InputComponent/InputComponent.css @@ -143,9 +143,7 @@ color: #f7f7f7; } -.number-input:focus { - background: rgba(86, 126, 206, 0.1); -} + .number-container { display: flex; diff --git a/src/components/InputNumber/InputNumber.js b/src/components/InputNumber/InputNumber.js index e15df56..ce79715 100644 --- a/src/components/InputNumber/InputNumber.js +++ b/src/components/InputNumber/InputNumber.js @@ -8,9 +8,9 @@ export const InputNumber = ({ number }) => { const [valid, setValid] = useState(false); const [valueInput, setValueInput] = useState(number); - const min = 0; + const min = 1500; - const max = 10000000; + const max = 1000000; const dispatch = useDispatch(); @@ -73,11 +73,6 @@ export const InputNumber = ({ number }) => { return; } else { if (!valid) { - if (!(number < max)) { - handleTotalValues(max, name); - setValueInput(max); - return; - } if (number <= min) { handleTotalValues(min, name); setValueInput(min); diff --git a/src/components/InputSelect/InputSelect.css b/src/components/InputSelect/InputSelect.css index c78e6fd..c93a3a6 100644 --- a/src/components/InputSelect/InputSelect.css +++ b/src/components/InputSelect/InputSelect.css @@ -148,7 +148,7 @@ .map-caption { font-style: normal; font-weight: 500; - font-size: 12px; + font-size: 14.4px; line-height: 130%; margin-top: 5px; margin-bottom: 10px; diff --git a/src/components/ResultBlock/ResultBlock.css b/src/components/ResultBlock/ResultBlock.css index 7936f25..f2373c5 100644 --- a/src/components/ResultBlock/ResultBlock.css +++ b/src/components/ResultBlock/ResultBlock.css @@ -4,17 +4,16 @@ gap: 10px; } -.rub-container { -} +.rub-container {} .numbers-container { display: flex; align-items: flex-end; - gap: 16px; + height: 60px; } .result-block { - height: 105px; + height: 150px; display: flex; flex-direction: row; gap: 46px; @@ -67,7 +66,7 @@ .result-diff-caption { font-style: normal; font-weight: 400; - font-size: 14px; + font-size: 18px; line-height: 140%; /* or 20px */ @@ -77,13 +76,18 @@ } .diff { - color: #d375ff; + background: linear-gradient(44.34deg, #D375FF 17.64%, #798FFF 73.73%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + font-weight: 600; + text-fill-color: transparent; } .caption-off { font-style: normal; font-weight: 400; - font-size: 14px; + font-size: 18px; line-height: 140%; color: #f7f7f7; } @@ -137,4 +141,4 @@ transition: background ease-in 0.2s; background: #393c46; -} +} \ No newline at end of file diff --git a/src/components/ResultBlock/ResultBlock.js b/src/components/ResultBlock/ResultBlock.js index 1d58ee6..3c3eaf7 100644 --- a/src/components/ResultBlock/ResultBlock.js +++ b/src/components/ResultBlock/ResultBlock.js @@ -1,6 +1,6 @@ import "./ResultBlock.css"; import { useSelector } from "react-redux"; -import { useState } from "react"; +import { useEffect, useState } from "react"; import { motion, AnimatePresence } from "framer-motion"; export const ResultBlock = () => { @@ -10,12 +10,9 @@ export const ResultBlock = () => { const [turn, setTurn] = useState(false); - const transition = { duration: 0.3, ease: "easeOut" }; + const [showText, setShowText] = useState(false) - const textAnimation = { - open: { opacity: 1, display: "flex", alignItems: "flex-end" }, - closed: { opacity: 0, display: "none" }, - }; + const transition = { duration: 0.35, ease: "easeIn" }; const colorAnimationValue = { open: { color: "#D375FF", fontSize: "54px", marginRight: "16px" }, @@ -85,32 +82,42 @@ export const ResultBlock = () => { return handleNode(value, value1, type); }; + + const handleNode = (value, value1, type) => { if (type === 1) { return ( <> - - {value} - - - {value1} - + + {turn && (<> + {value} + + + {value1} + + )} + + ); } else if (type === 0) { return ( <> { {value} { return (
Результаты расчета -
+
-
- - - {handleMounth(Math.round(timeUpdated), 1)} - - +
+
+ {handleMounth(Math.round(timeUpdated), 1)} +
{ {handleMounth(Math.round(timeDefalut), 0)}
- {!turn ? ( -
На реализацию проекта
- ) : ( -
- {" "} - {handleMounth( - Math.round(timeDefalut) - Math.round(timeUpdated), - 3 - )} -
- )} + + {!turn && (На реализацию проекта)} + + {turn && ( + {handleMounth(Math.floor(timeDefalut - timeUpdated), 4)} + + )} + +
-
- - - {shortenNumRu(Math.round(priceUpdated), 1)} - - +
+ {shortenNumRu(Math.round(priceUpdated), 1)} +
+
{shortenNumRu(Math.round(priceDefault), 0)}
- {!turn ? ( -
На реализацию проекта
- ) : ( -
+ + {!turn && ( { + setShowText(definition.opacity === 0 ? true : false) + }} + key={1} initial={{ opacity: 0 }} + animate={{ opacity: 1 }} + exit={{ opacity: 0 }} + className="caption-off">На реализацию проекта)} + {turn && ( + {shortenNumRu(Math.floor(priceUpdated - priceDefault), 4)} -
- )} + + )} +
-
+
); }; diff --git a/src/store/reducers/calcSlice.js b/src/store/reducers/calcSlice.js index 20c54a2..bf5414e 100644 --- a/src/store/reducers/calcSlice.js +++ b/src/store/reducers/calcSlice.js @@ -2,7 +2,7 @@ import { createSlice } from "@reduxjs/toolkit"; import { regions } from "../../utils/array"; const initialState = { - squareRC: 1500, + squareRC: 10000, squareApartment: 45, priceAvarage: 100000, consultation: 100, diff --git a/src/utils/array.js b/src/utils/array.js index e1ff71f..f7e6628 100644 --- a/src/utils/array.js +++ b/src/utils/array.js @@ -92,7 +92,7 @@ export const regions = [ d: "M997.071 116.491L995.365 97.6511L990.138 94.6911L1002.5 86.158L1000.75 80.4115L977.778 78.5048L975.005 82.1581L968.725 82.6781L968.045 87.558L962.992 87.198V80.4115L968.725 78.5048L970.992 73.7983L969.779 61.4519L967.512 60.5719L964.725 62.3185L964.552 57.7853L959.165 59.8786L955.499 55.7053L956.899 48.9188L961.419 52.9187L964.032 50.8255L967.859 55.012L970.125 49.7855L969.605 43.5189L973.778 40.039L981.085 40.7323L993.271 31.5192L990.311 28.026L996.405 28.9059L996.231 22.9861L989.618 24.1994L987.698 20.0261L978.832 18.2795L982.312 13.9329L977.778 10.6263L981.965 7.6664L976.738 0.879883L961.952 9.58636L961.072 16.7195L957.072 21.9328L966.992 25.946L961.605 28.3859L945.592 24.026L926.966 36.3858L899.113 51.5321L891.634 63.7052L892.327 67.3584L887.287 68.7584L880.154 75.1982L885.194 81.4648L889.714 80.0648L896.513 83.8914L895.807 90.6912L889.54 91.3846L885.367 93.8112L876.487 88.2513V99.5577L867.447 106.344L863.954 113.117L878.967 124.384L879.1 124.477V124.637V131.424V131.544L879.021 131.637L867.754 144.837L870.541 152.037L875.941 154.383H883.14H883.34L883.434 154.57L886.274 160.476L890.954 161.183L891.114 161.196L891.18 161.343L894.18 166.65L900.46 163.636L900.58 163.57L900.7 163.61L906.593 165.503L911.06 161.503L911.14 161.423L911.246 161.41L918.166 160.943L923.286 155.57L922.353 150.397L922.299 150.117L922.566 150.037L927.739 148.397L929.153 143.463L929.206 143.25L929.419 143.237L933.819 142.77L935.206 138.597L935.273 138.424L935.446 138.384L943.552 136.477L945.659 132.73L945.752 132.57L945.926 132.557L958.045 131.837L958.285 131.824L958.379 132.05L961.179 139.757L969.618 137.184L969.658 137.17H969.712L978.938 137.41L986.378 116.051L986.498 115.691L986.831 115.864L991.325 118.224L997.071 116.491Z", fill: "#141414", name: "Чукотский АО", - price: false, + price: "121732" }, { "fill-rule": "evenodd", @@ -226,7 +226,8 @@ export const regions = [ d: "M865.715 483.962L870.928 492.189L876.488 497.069L888.328 491.322L889.888 486.442L898.768 476.523L903.607 474.309L904.887 469.189L891.701 473.629L891.528 473.696L891.394 473.576L886.834 469.909L876.915 469.723L872.021 474.363L865.715 483.962Z", fill: "#141414", name: "Еврейская АО", - price: false, + price: "121732" + }, { "fill-rule": "evenodd", @@ -664,7 +665,8 @@ export const regions = [ d: "M407.991 214.435L404.672 208.329L395.978 198.942H389.365L388.499 202.769L388.325 208.502L383.619 211.289L381.005 210.769L379.272 213.382L375.966 210.769L379.792 207.289V203.462L367.432 203.289L361.339 198.756L351.939 199.636L348.633 195.102L354.206 194.582L357.166 188.836L349.686 187.103L346.206 191.276L344.46 188.143L325.313 183.449L322.887 185.889L320.1 183.276L310.007 189.196L304.78 184.143L306.34 179.623L304.78 175.089L311.047 173.009L316.793 177.009L319.58 172.49L319.393 164.303L311.74 155.957L309.474 164.13L299.034 170.916L298.167 176.129L293.181 180.649L295.141 191.076L300.621 199.289L305.634 199.916L305.78 199.942L305.86 200.062L308.567 204.035L327.167 206.022L331.393 204.702L331.553 204.649L331.686 204.742L374.832 235.568L384.525 234.781L387.925 230.862L388.059 230.702L388.245 230.755L392.645 231.782L396.272 228.408L396.365 228.328H396.498H399.272L400.792 226.048L400.912 225.875L401.112 225.915L403.845 226.408L406.058 222.475L403.738 218.329L403.605 218.102L403.805 217.929L407.991 214.435Z", fill: "#141414", name: "Ненецкий АО", - price: false, + price: "78516" + }, { "fill-rule": "evenodd", @@ -1177,7 +1179,8 @@ export const regions = [ id: "46960c9c-b668-4aea-a9ec-1124cfe4b0ec", fill: "#141414", name: "Камчатский Край", - price: false, + price: "114836" + }, { d: "M317.82 293.42L317.726 293.407L317.66 293.353L307.753 285.234L304.193 287.194L304.113 287.233H304.007L294.247 286.114L294.26 286.047L287.754 282.674L287.7 282.647L287.66 282.594L281.674 275.847L273.901 275.114L271.607 280.78L277.087 288.033L277.154 288.113V288.22L277.474 293.393L277.5 293.62L277.287 293.713L268.247 297.513V300.553L270.727 302.727L270.954 302.913L268.127 306.713L268.114 306.686L265.647 309.46L262.314 318.033L262.301 318.086L262.261 318.139L259.448 321.139L257.648 325.846L257.621 325.913L257.581 325.953L254.541 329.299L254.434 329.419L254.274 329.406L251.674 329.233L251.581 335.659L254.501 335.566L254.834 335.552V340.659L261.221 340.952L261.501 340.966L261.528 341.246L261.808 344.872L264.527 345.526L264.727 345.579L264.767 345.766L265.181 347.606V347.619L265.581 350.179L266.514 351.472L268.941 350.832L274.327 344.472L274.407 344.366L274.541 344.352L280.634 343.726L284.487 337.606L284.727 337.232L285.007 337.552L287.78 340.646L290.234 339.059L291.194 334.739L291.247 334.499L291.5 334.486L298.26 334.166L300.073 331.886L300.567 327.219L300.58 327.113L300.633 327.033L303.62 323.579L301.42 319.339L301.38 319.259V319.179L301.553 315.726V315.526L301.74 315.446L308.926 312.18L317.246 304.006L322.806 296.647L323.846 294.273L317.82 293.42Z",