- );
+ );
}
diff --git a/frontend/src/components/main-page/Garden/SearchCard/SearchCard.js b/frontend/src/components/main-page/Garden/SearchCard/SearchCard.js
index 0e3e487a..2a25528c 100644
--- a/frontend/src/components/main-page/Garden/SearchCard/SearchCard.js
+++ b/frontend/src/components/main-page/Garden/SearchCard/SearchCard.js
@@ -1,33 +1,31 @@
import React from "react";
-import {useBasket} from "../../../basket-context/BasketContext";
+import { useBasket } from "../../../basket-context/BasketContext";
-export default function SearchCard({item, onClick}) {
- const {addToBasket} = useBasket();
- return (
-
-
-
-
-
{item.name}, {item.id}
+export default function SearchCard({ item, onClick }) {
+ const { addToBasket } = useBasket();
+ return (
+
+
+
+
+
+ {item.name}, {item.id}
+
-
- Свободно {item.count_free_beds} грядок
-
- Цена: {item.price} Рублей / грядка
-
-
-
-
addToBasket(item)}>
-
-
+
+ Свободно {item.count_free_beds} грядок
+
+ Цена: {item.price} Рублей / грядка
+
- );
+
+
addToBasket(item)}>
+
+
+
+ );
}
diff --git a/frontend/src/components/main-page/Garden/garden.css b/frontend/src/components/main-page/Garden/garden.css
index baa6a5cd..fa00828f 100644
--- a/frontend/src/components/main-page/Garden/garden.css
+++ b/frontend/src/components/main-page/Garden/garden.css
@@ -20,17 +20,19 @@
.container-plot-wrapper.visible {
opacity: 1;
- /* Полная видимость */
- /* height: auto; Если хотите анимировать высоту, убедитесь, что элемент имеет фиксированную высоту в начале */
}
.container-plot-info {
padding: 20px;
border-radius: 20px;
margin: 0 auto;
- width: 60%;
- height: 64%;
+ width: 100%;
+ height: 100%;
background-color: rgba(150, 194, 168, 0.5);
+ display: flex;
+ justify-content: space-around;
+ align-items: center;
+ gap: 10px;
}
.container-plot-products {
@@ -140,6 +142,7 @@
.add-to-basket:hover {
transform: scale(0.95);
}
+
.add-to-basket-img {
width: 40px;
}
@@ -149,6 +152,12 @@
cursor: pointer;
}
+.plot-image-wrapper {
+ width: 60%;
+ height: 80%;
+ object-fit: cover;
+}
+
@media (max-width: 1200px) and (max-height: 1080px) {
}
.container-wrapper-img {
@@ -157,10 +166,12 @@
align-items: center;
width: auto;
height: 44vh;
+ overflow: hidden;
+ border-radius: 20px;
}
.container-for-text {
- padding: 5px;
+ font-size: 18px !important;
}
.container-wrapper-info {
@@ -169,9 +180,11 @@
}
.plot-card-img {
- border-radius: 10px;
- width: 400px;
+ width: 100%;
transition: 0.5s ease;
+ height: 100%;
+ border-radius: 20px;
+ object-fit: cover;
}
.plot-card-img:hover {
diff --git a/frontend/src/components/main-page/LandingPage/LandingPage.jsx b/frontend/src/components/main-page/LandingPage/LandingPage.jsx
new file mode 100644
index 00000000..85276eb8
--- /dev/null
+++ b/frontend/src/components/main-page/LandingPage/LandingPage.jsx
@@ -0,0 +1,290 @@
+import "./main.css";
+import LoginBtn from "../ui/login-btn/LoginBtn";
+import RegisterBtn from "../ui/register-btn/RegisterBtn";
+import { Link, Route, Routes } from "react-router-dom";
+import Header from "../../header/Header";
+
+export default function LandingPage() {
+ const state = localStorage.getItem("accessToken");
+ return (
+ <>
+
+
+
+
По коням!
+
+ ) : (
+
+
+
+
+ )}
+
+
+
+
+
+
+ BSTUteam
+
+
+ представляет
+
+
+
+
+
+
+
+
+
+
+
+
+ Денис
+
+
Наш DevOps инженер
+
+
+
+
+
+
+
+
+
+ Леонид
+
+
Наш Front-End разработчик
+
+
+
+
+
+
+
+
+
+ Анастасия
+
+
Наш Back-End разработчик
+
+
+
+
+
+
+
+
+
+ Николай
+
+
Наш Тестировщик
+
+
+
+
+
+
+
+
+ Дарья
+
+
Наш Дизайнер
+
+
+
+
+
+ Мы – команда инженеров, которая делает управление виртуальными
+ грядками проще и удобнее!
+
+
+
+
+
+
+ ТАМПРОГ
+
{" "}
+ – автоматизация, которая работает для Вас и вашего урожая.
+
+
+
+
+ } />
+
+
+ );
+}
diff --git a/frontend/src/components/main-page/LandingPage/main.css b/frontend/src/components/main-page/LandingPage/main.css
new file mode 100644
index 00000000..0d206c85
--- /dev/null
+++ b/frontend/src/components/main-page/LandingPage/main.css
@@ -0,0 +1,192 @@
+.section1,
+.section2,
+.section3 {
+ width: 100%;
+ min-height: 100.2vh;
+ position: relative;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ transform-style: preserve-3d;
+ scroll-snap-align: start; /* "Липнуть" к началу секции */
+}
+
+.section1::before {
+ content: "";
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ background-size: contain;
+ background: url("../../../../public/field1.jpg") top center no-repeat;
+
+ transform: translateZ(-1px) scale(3);
+ filter: blur(3px);
+}
+
+.section2 {
+ background: #1b6d85;
+ height: 100%;
+}
+
+.section3 {
+ background: url("../../../../public/field2.jpg"); /* Путь к картинке */
+ background-repeat: no-repeat;
+ background-size: cover;
+ background-position: center;
+ background-attachment: fixed; /* Закрепляем изображение */
+ transform: scale(2);
+}
+
+.default-text {
+ font-size: 14px;
+ color: white;
+ transform: scale(1, 1.1);
+}
+
+.parallax-text {
+ font-size: 15vh;
+ color: white;
+ transform: scale(1, 1.1);
+}
+
+.landing-main-wrapper {
+ perspective: 1px;
+ transform-style: preserve-3d;
+ height: 100vh;
+ overflow-x: hidden;
+ scroll-snap-type: y mandatory;
+}
+
+.page-header {
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: 2;
+ width: 100%;
+ height: 10vh;
+ background-color: rgba(15, 15, 15, 0.3);
+ display: flex;
+ justify-content: space-around;
+ align-items: center;
+}
+
+.buttons-wrapper {
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ width: auto;
+ gap: 20px;
+}
+
+.landing-login-btn {
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ gap: 10px;
+ transition: 0.3s ease;
+ color: #97c2a8;
+ font-size: 20px;
+ font-weight: 700;
+}
+
+.landing-login-btn p {
+ text-shadow: 0px 0px 3px rgba(0, 0, 0, 1);
+}
+
+.landing-login-btn img {
+ filter: drop-shadow(0px 0px 1px rgba(0, 0, 0, 1));
+}
+
+.dream-team {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ gap: 200px;
+}
+
+.developer-wrapper {
+ width: 100px;
+ height: 100px;
+ position: relative;
+ transition: 0.5s ease;
+}
+
+.dream-team-container {
+ width: 400px;
+ height: 500px;
+ display: flex;
+ flex-direction: column;
+}
+
+.developer-img {
+ width: 100%;
+ height: auto;
+}
+
+.popup {
+ position: absolute;
+ top: -50px;
+ left: -130px;
+ background-color: rgba(255, 255, 255, 0.8);
+ color: rgb(0, 0, 0);
+ padding: 10px;
+ border-radius: 20px;
+ font-size: 14px;
+ opacity: 0;
+ pointer-events: none;
+ transition: opacity 0.3s ease;
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
+ z-index: -1;
+}
+
+.developer-wrapper:hover {
+ transform: scale(1.05);
+}
+
+.developer-wrapper:hover .popup {
+ opacity: 1;
+ transform: translateY(0);
+ animation: bounce 0.5s;
+}
+
+@keyframes bounce {
+ 0%,
+ 20%,
+ 60% {
+ transform: translateY(-5px);
+ }
+ 100% {
+ transform: translateY(0);
+ /* transform: translateY(0); */
+ }
+
+ 40% {
+ transform: translateY(-20px);
+ /* transform: translateY(-20px); */
+ }
+
+ 80% {
+ transform: translateY(-10px);
+ /* transform: translateY(-10px); */
+ }
+}
+
+.leonid {
+ width: 140px;
+}
+
+.modern {
+ position: relative; /* Добавляем позиционирование */
+ z-index: 999999;
+ width: 20vh;
+ height: 100%;
+}
+
+.logo-modern {
+ width: 100%;
+ height: 100%;
+ position: absolute; /* Добавляем позиционирование */
+ filter: drop-shadow(0px 0px 1px rgba(0, 0, 0, 1));
+}
diff --git a/frontend/src/components/main-page/MainPage.js b/frontend/src/components/main-page/MainPage.js
deleted file mode 100644
index af54d579..00000000
--- a/frontend/src/components/main-page/MainPage.js
+++ /dev/null
@@ -1,60 +0,0 @@
-import { useState } from "react";
-import "./style.css";
-import LoginBtn from "./ui/login-btn/LoginBtn";
-import RegisterBtn from "./ui/register-btn/RegisterBtn";
-
-export default function MainPage() {
- const [loaded, setLoaded] = useState(false);
-
- const handleLoad = () => {
- setLoaded(true);
- };
-
- return (
- <>
-
-
-
-
-
-
-
- TAMPROG by BGTUTeam
-
-
-
Мы команда инженеров!
-
-
-
Что мы делаем?
-
-
-
-
Другой текст
-
-
-
-
- );
-}
diff --git a/frontend/src/components/main-page/style.css b/frontend/src/components/main-page/style.css
index 235d513e..3606e830 100644
--- a/frontend/src/components/main-page/style.css
+++ b/frontend/src/components/main-page/style.css
@@ -1,661 +1,612 @@
* {
- box-sizing: border-box;
+ box-sizing: border-box;
}
body,
html {
- margin: 0;
- padding: 0;
- height: 90vh;
- font-family: Arial, sans-serif;
-}
-
-.landing-page {
- width: 100%;
- display: flex;
- flex-direction: column;
- align-items: center;
- overflow: hidden;
-}
-
-.image-container {
- position: relative;
- width: 100%;
- height: 100vh;
-}
-
-.custom-text {
- padding: 0;
- margin: 0;
- width: 100%;
- background-color: cornsilk;
- position: relative;
- z-index: 10;
- text-align: center;
-}
-
-.text-overlay {
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- color: white;
- font-size: 24px;
- text-align: center;
- background-color: rgba(0, 0, 0, 0.5);
- padding: 10px;
-}
-
-.header-for-landing {
- position: fixed;
- display: flex;
- align-items: center;
- justify-content: space-around;
- top: 0;
- left: 0;
- width: 100%;
- height: 100px;
- z-index: 1000;
- background-color: rgba(40, 37, 40, 0.5);
-}
-
-.landing {
- width: 300vh;
- min-height: 100vh;
- /* Минимальная высота для контента */
- background-color: whitesmoke;
-}
-
-.landing img {
- width: 100%;
- height: auto;
- object-fit: cover;
- display: block;
- margin: 0;
- padding: 0;
- opacity: 0;
- transition: opacity 2s ease-out;
-}
-
-.landing img.loaded {
- opacity: 1;
+ margin: 0;
+ padding: 0;
+ height: 90vh;
+ font-family: Arial, sans-serif;
}
.user-interface-login {
- width: 30px;
-}
-
-.landing-login-btn {
- display: flex;
- align-items: center;
- gap: 5px;
- transition: 0.3s ease;
- cursor: pointer;
-}
-
-.landing-login-btn a {
- font-weight: 500;
- align-items: center;
-}
-
-.landing-buttons {
- display: flex;
- align-items: center;
- gap: 10px;
-}
-
-.landing-register-btn {
- transition: 0.3s ease;
- cursor: pointer;
-}
-
-.landing-register-btn:hover {
- transform: scale(1.05);
+ width: 30px;
+ height: 30px;
+ transition: 0.3s ease;
}
@keyframes fade-in {
- from {
- opacity: 0;
- transform: translateY(-10px);
- }
+ from {
+ opacity: 0;
+ transform: translateY(-10px);
+ }
- to {
- opacity: 1;
- transform: translateY(0);
- }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
}
@keyframes fade-out {
- from {
- opacity: 1;
- transform: translateY(0);
- }
+ from {
+ opacity: 1;
+ transform: translateY(0);
+ }
- to {
- opacity: 0;
- transform: translateY(-10px);
- }
+ to {
+ opacity: 0;
+ transform: translateY(-10px);
+ }
}
.alert {
- position: relative;
- display: flex;
- justify-content: center;
- align-items: center;
- font-size: 1.3em;
- gap: 3px;
- padding: 20px;
- border-radius: 20px;
- width: 100%;
- height: 60px;
- background-color: rgba(255, 205, 117, 0.7);
- animation: fade-in 0.5s ease forwards;
- /* Плавное появление */
- transition: opacity 0.5s ease, transform 0.5s ease;
- /* Переходы для плавного исчезновения */
+ position: relative;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ font-size: 1.3em;
+ gap: 3px;
+ padding: 20px;
+ border-radius: 20px;
+ width: 100%;
+ height: 60px;
+ background-color: rgba(255, 205, 117, 0.7);
+ animation: fade-in 0.5s ease forwards;
+ /* Плавное появление */
+ transition: opacity 0.5s ease, transform 0.5s ease;
+ /* Переходы для плавного исчезновения */
}
.alert.hide {
- animation: fade-out 0.5s ease forwards;
- /* Плавное исчезновение */
- opacity: 0;
- transform: translateY(-10px);
- pointer-events: none;
- /* Блокирует взаимодействие после скрытия */
+ animation: fade-out 0.5s ease forwards;
+ /* Плавное исчезновение */
+ opacity: 0;
+ transform: translateY(-10px);
+ pointer-events: none;
+ /* Блокирует взаимодействие после скрытия */
}
@keyframes filling {
- from {
- background-position: center 25%;
- }
+ from {
+ background-position: center 25%;
+ }
- to {
- background-position: center 50%;
- }
+ to {
+ background-position: center 50%;
+ }
}
.landing-container-text {
- background-image: url(https://avatars.mds.yandex.net/i?id=efac26118587148006a28e09274db923_l-5905533-images-thumbs&n=13);
- -webkit-text-fill-color: transparent;
- -webkit-background-clip: text;
- color: #ffffff;
- font-weight: 800;
- font-size: 150px;
- font-family: "Bungee", cursive;
- animation: filling 2s ease forwards;
+ background-image: url(https://avatars.mds.yandex.net/i?id=efac26118587148006a28e09274db923_l-5905533-images-thumbs&n=13);
+ -webkit-text-fill-color: transparent;
+ -webkit-background-clip: text;
+ color: #ffffff;
+ font-weight: 800;
+ font-size: 150px;
+ font-family: "Bungee", cursive;
+ animation: filling 2s ease forwards;
}
.landing-login-btn:hover {
- transform: scale(1.05);
+ transform: scale(1.05);
}
.landing-link {
- text-decoration: none;
- color: black;
+ text-decoration: none;
+ color: black;
}
.main {
- overflow: hidden;
+ overflow: hidden;
}
.main-enter-active {
- animation: depth-in 0.7s forwards;
+ animation: depth-in 0.7s forwards;
}
.main-exit-active {
- animation: depth-out 0.7s forwards;
+ animation: depth-out 0.7s forwards;
}
@keyframes depth-in {
- 0% {
- opacity: 0;
- transform: translateZ(-100px) scale(0.95);
- }
+ 0% {
+ opacity: 0;
+ transform: translateZ(-100px) scale(0.95);
+ }
- 100% {
- opacity: 1;
- transform: translateZ(0) scale(1);
- }
+ 100% {
+ opacity: 1;
+ transform: translateZ(0) scale(1);
+ }
}
@keyframes depth-out {
- 0% {
- opacity: 1;
- transform: translateZ(0) scale(1);
- }
+ 0% {
+ opacity: 1;
+ transform: translateZ(0) scale(1);
+ }
- 100% {
- opacity: 0;
- transform: translateZ(-100px) scale(0.95);
- }
+ 100% {
+ opacity: 0;
+ transform: translateZ(-100px) scale(0.95);
+ }
}
.header {
- display: flex;
- justify-content: space-between;
- align-items: center;
- padding: 10px 20px;
- background-color: #ece4d3;
- border-radius: 20px;
- max-width: 100%;
- transition: transform 0.3s ease-out;
- z-index: 1;
- margin: 15px 20px 0 20px;
- height: 84px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 10px 20px;
+ background-color: #ece4d3;
+ border-radius: 20px;
+ max-width: 100%;
+ transition: transform 0.3s ease-out;
+ z-index: 1;
+ margin: 15px 20px 0 20px;
+ height: 84px;
}
.header:hover {
- transform: scale(1.008);
+ transform: scale(1.008);
}
.logo {
- max-width: 150px;
- height: auto;
- width: 140px;
- cursor: pointer;
+ max-width: 150px;
+ height: auto;
+ width: 140px;
+ cursor: pointer;
}
.navbar {
- display: flex;
- gap: 20px;
- position: relative;
- /* Для размещения псевдоэлемента */
+ display: flex;
+ gap: 20px;
+ position: relative;
+ /* Для размещения псевдоэлемента */
}
.navbar a {
- text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3);
+ text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3);
- text-decoration: none;
- font-size: 18px;
- font-weight: bold;
- color: #96c2a8;
- position: relative;
- /* Для позиционирования псевдоэлемента */
+ text-decoration: none;
+ font-size: 18px;
+ font-weight: bold;
+ color: #96c2a8;
+ position: relative;
+ /* Для позиционирования псевдоэлемента */
}
.navbar a::before {
- border-radius: 20px;
- content: "";
- position: absolute;
- bottom: 110%;
- left: 0;
- right: 0;
- height: 2px;
- background-color: #96c2a8;
- transform: scaleX(1);
- transform-origin: left;
- transition: transform 0.3s ease;
+ border-radius: 20px;
+ content: "";
+ position: absolute;
+ bottom: 110%;
+ left: 0;
+ right: 0;
+ height: 2px;
+ background-color: #96c2a8;
+ transform: scaleX(1);
+ transform-origin: left;
+ transition: transform 0.3s ease;
}
.navbar a:hover::before {
- transform: scaleX(0);
+ transform: scaleX(0);
}
.login-btn {
- padding: 10px 20px;
- border-radius: 10px;
- border: none;
- background-color: #b5b7a3;
- color: white;
- cursor: pointer;
- transition: background-color 0.3s;
- font-weight: 800;
- font-size: 15px;
- box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
+ padding: 10px 20px;
+ border-radius: 10px;
+ border: none;
+ background-color: #b5b7a3;
+ color: white;
+ cursor: pointer;
+ transition: background-color 0.3s;
+ font-weight: 800;
+ font-size: 15px;
+ box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}
.login-btn:hover {
- background-color: #8a927a;
+ background-color: #8a927a;
}
.content-container {
- display: flex;
- flex-wrap: wrap;
- gap: 20px;
- padding: 20px 20px 2px 20px;
- height: 83vh;
- max-height: 100%;
- justify-content: center;
+ display: flex;
+ flex-wrap: wrap;
+ gap: 20px;
+ padding: 20px 20px 2px 20px;
+ height: 83vh;
+ max-height: 100%;
+ justify-content: center;
}
.box1 {
- flex: 1 1 25%;
- background-color: rgba(129, 186, 131, 0.5);
- border-radius: 20px;
- padding: 20px;
- transition: transform 0.3s ease;
+ flex: 1 1 25%;
+ background-color: rgba(129, 186, 131, 0.5);
+ border-radius: 20px;
+ padding: 20px;
+ transition: transform 0.3s ease;
- height: 100%;
- overflow-y: auto;
+ height: 100%;
+ overflow-y: auto;
}
.box2 {
- flex: 1 1 70%;
- background-color: rgba(129, 186, 131, 0.5);
- border-radius: 20px;
- height: 100%;
- padding: 20px;
- display: flex;
- gap: 40px;
- transition: 0.3s ease;
+ flex: 1 1 70%;
+ background-color: rgba(129, 186, 131, 0.5);
+ border-radius: 20px;
+ height: 100%;
+ padding: 20px;
+ display: flex;
+ gap: 40px;
+ transition: 0.3s ease;
}
.centered-into-wrappers {
- display: flex;
- justify-content: center;
- align-items: center;
- gap: 10px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ gap: 10px;
}
.text-color {
- color: #96c2a8;
- font-size: var(--font-size);
- font-weight: 800;
- text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
+ color: #96c2a8;
+ font-size: var(--font-size);
+ font-weight: 800;
+ text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}
.about-wrapper {
- padding: 20px;
- max-width: 75%;
- height: 83vh;
- max-height: 100%;
- background-color: rgb(129, 186, 131, 0.5);
- margin: 2vh auto;
- border-radius: 20px;
- display: flex;
- flex-direction: column;
- justify-content: space-evenly;
+ padding: 20px;
+ max-width: 75%;
+ height: 83vh;
+ max-height: 100%;
+ background-color: rgb(129, 186, 131, 0.5);
+ margin: 2vh auto;
+ border-radius: 20px;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-evenly;
}
.contractor-wrapper {
- padding: 20px;
- max-width: 83%;
- height: 83vh;
- max-height: 100%;
- background-color: rgb(138, 146, 122, 0.5);
- border-radius: 20px;
- margin: 2vh auto;
+ padding: 20px;
+ max-width: 83%;
+ height: auto;
+ min-height: 83vh;
+ background-color: rgb(138, 146, 122, 0.5);
+ border-radius: 20px;
+ margin: 2vh auto;
}
.box2 .card {
- flex: 0 0 220px;
- max-width: 220px;
- height: 300px;
- margin-bottom: 0;
+ flex: 0 0 220px;
+ max-width: 220px;
+ height: 300px;
+ margin-bottom: 0;
}
.spinner {
- border: 4px solid rgba(0, 0, 0, 0.1);
- border-radius: 50%;
- border-top: 4px solid #3498db;
- width: 50px;
- height: 50px;
- animation: spin 1s linear infinite;
+ border: 4px solid rgba(0, 0, 0, 0.1);
+ border-radius: 50%;
+ border-top: 4px solid #3498db;
+ width: 50px;
+ height: 50px;
+ animation: spin 1s linear infinite;
}
.centered-spinner {
- display: flex;
- justify-content: center;
- align-items: center;
- width: 100%;
- height: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: 100%;
+ height: 100%;
}
.not-found-container {
- position: absolute;
- z-index: 99999;
- width: 100%;
- height: 100vh;
- background-color: #96c2a8;
- display: flex;
- justify-content: center;
- align-items: center;
- gap: 100px;
+ position: absolute;
+ z-index: 99999;
+ width: 100%;
+ height: 100vh;
+ background-color: #96c2a8;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ gap: 100px;
}
.not-found-container > div {
- padding: 2%;
- width: 30%;
- height: 50%;
- /* background-color: #3498db; */
+ padding: 2%;
+ width: 30%;
+ height: 50%;
+ /* background-color: #3498db; */
}
.not-found-container h1 {
- font-size: 10em;
- margin: 0;
+ font-size: 10em;
+ margin: 0;
}
.not-found-container p {
- /* font-size: 1em; */
- margin: 0;
- font-weight: 600;
+ margin: 0;
+ font-weight: 600;
}
.not-found-container img {
- width: 100%;
- /* height: auto; */
+ width: 100%;
+}
+
+.counter-wrapper {
+ margin: 0 3px 0 3px;
+ display: flex;
+ width: auto;
+ background-color: #8a927a;
+ border-radius: 5px;
+}
+
+.counter-wrapper input {
+ width: 40px;
+ outline: none;
+ transform: scale(0.9);
+ border: none;
}
+.counter-wrapper button {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: 20px;
+ border: 0;
+ transform: scale(0.9);
+}
+
+.btn-left {
+ border-radius: 5px 0px 0 5px;
+}
+
+.btn-right {
+ border-radius: 0 5px 5px 0;
+}
@keyframes spin {
- 0% {
- transform: rotate(0deg);
- }
+ 0% {
+ transform: rotate(0deg);
+ }
- 100% {
- transform: rotate(360deg);
- }
+ 100% {
+ transform: rotate(360deg);
+ }
}
@media (max-width: 684px) and (max-height: 1080px) {
- .navbar {
- display: none;
- }
+ .navbar {
+ display: none;
+ }
}
@media (max-width: 1200px) and (max-height: 1080px) {
- .container-plot-info {
- width: 80% !important;
- }
-
- .logo {
- max-width: 120px;
- }
-
- .box1 {
- width: 100%;
- max-height: 300px;
- }
-
- .box2 {
- height: 41vh;
- width: 100%;
- flex: 1 1 auto;
- }
- .content-container {
- display: flex;
- gap: 20px;
- padding: 20px;
- height: auto;
- overflow: hidden;
- justify-content: center;
- flex-direction: row;
- }
-
- .order-info {
- width: 45vw !important;
- height: 50vh !important;
- display: flex;
- flex-direction: column;
- gap: 5px;
- }
-
- .order-info-wrapper {
- width: auto !important;
- height: auto !important;
- background-color: cadetblue;
- gap: 20px;
- }
-
- .order-image {
- width: 20vw !important;
- height: auto !important;
- }
-
- .order-garden-list {
- width: auto !important;
- height: 100%;
- background-color: #ddd;
- overflow: auto;
- }
-
- .order {
- padding: 2vw !important;
- }
-
- .license-wrapper {
- padding: 0 !important;
- }
-
- .loading-container, .error-container, .empty-container {
- height: 25vh !important;
- }
-
- .container-plot-products{
- visibility: hidden;
- }
- .container-plot-info{
- height: 100% !important;
- }
- .plot-card-img{
- width: 250px !important;
- }
- .container-wrapper-img{
- height: 30vh !important;
- }
- .container-for-text{
- font-size: 14px !important;
- }
-}
+ .container-plot-info {
+ width: 80% !important;
+ }
-@media (min-width: 1200px) and (max-height: 1080px) {
- .box1 {
- max-width: 500px;
- }
+ .logo {
+ max-width: 120px;
+ }
- .container-plot-info {
- width: 80% !important;
- }
+ .box1 {
+ width: 100%;
+ max-height: 300px;
+ }
- .search-card-img {
- width: 80px !important;
- height: 80px !important;
- }
+ .box2 {
+ height: 41vh;
+ width: 100%;
+ flex: 1 1 auto;
+ }
+ .content-container {
+ display: flex;
+ gap: 20px;
+ padding: 20px;
+ height: auto;
+ overflow: hidden;
+ justify-content: center;
+ flex-direction: row;
+ }
+
+ .order-input {
+ height: 14vh !important;
+ }
+ .order-info {
+ width: auto !important;
+ min-height: 50vh !important;
+ height: auto !important;
+ display: flex;
+ flex-direction: column;
+ gap: 5px;
+ }
- .box2 {
- max-width: 860px;
- }
+ .order-info-wrapper {
+ width: auto !important;
+ min-height: 300px;
+ height: auto !important;
+ background-color: cadetblue;
+ gap: 20px;
+ }
+
+ .oreder-description {
+ width: 40vw !important;
+ }
+ .order-image {
+ width: 20vw !important;
+ height: auto !important;
+ }
+
+ .order-garden-list {
+ width: auto !important;
+ height: 100%;
+ background-color: #ddd;
+ overflow: auto;
+ }
- .content-container {
- display: flex;
- justify-content: center;
- height: 89vw;
- max-height: 85vh;
- overflow: hidden;
- }
+ .order {
+ display: flex;
+ flex-direction: column;
+ padding: 2vw !important;
+ }
+
+ .license-wrapper {
+ padding: 0 !important;
+ }
+
+ .loading-container,
+ .error-container,
+ .empty-container {
+ height: 25vh !important;
+ }
+
+ .container-plot-products {
+ visibility: hidden;
+ }
+ .container-plot-info {
+ height: 100% !important;
+ }
+ .plot-card-img {
+ width: 250px !important;
+ }
+ .container-wrapper-img {
+ height: 30vh !important;
+ }
+ .container-for-text {
+ font-size: 14px !important;
+ }
+ .order-order {
+ width: auto !important;
+ }
+}
- .search-card-wrapper {
- height: 15vh !important;
- }
+@media (min-width: 1200px) and (max-height: 1080px) {
+ .box1 {
+ max-width: 500px;
+ }
- .text-into-search-card {
- font-size: 13px;
- display: flex;
- justify-content: center;
- align-items: center;
- }
+ .section1::before {
+ transform: translateZ(-1px) scale(4.7);
+ }
- .add-to-basket {
- width: 30px !important;
- height: 30px !important;
- }
+ .search-card-img {
+ width: 80px !important;
+ height: 80px !important;
+ }
- .add-to-basket-img {
- width: 30px !important;
- }
+ .box2 {
+ max-width: 860px;
+ }
+ .content-container {
+ display: flex;
+ justify-content: center;
+ height: 89vw;
+ max-height: 85vh;
+ overflow: hidden;
+ }
+
+ .search-card-wrapper {
+ height: 15vh !important;
+ }
+
+ .text-into-search-card {
+ font-size: 13px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ }
+
+ .add-to-basket {
+ width: 30px !important;
+ height: 30px !important;
+ }
+ .add-to-basket-img {
+ width: 30px !important;
+ }
}
@media (min-width: 1718px) {
- .box1 {
- max-width: 20%;
- height: 100%;
- }
+ .box1 {
+ max-width: 20%;
+ height: 100%;
+ }
- .box2 {
- gap: 24px;
- max-width: 70%;
- height: 100%;
- }
+ .box2 {
+ gap: 24px;
+ max-width: 70%;
+ height: 100%;
+ }
- .search-card-wrapper {
- height: 10vh !important;
- }
+ .search-card-wrapper {
+ height: 10vh !important;
+ }
}
@media (min-width: 1922px) {
- .about-wrapper {
- height: 65vh;
- width: 120vh;
- }
-
- .student-wrapper {
- height: 12vh !important;
- }
-
+ .about-wrapper {
+ height: 65vh;
+ width: 120vh;
+ }
+
+ .section1::before {
+ transform: translateZ(-1px) scale(7.2);
+ }
+ .student-wrapper {
+ height: 12vh !important;
+ }
+ .student-img {
+ height: 14vh !important;
+ }
}
@media (min-width: 2300px) {
- .logo {
- margin-left: 15vw;
- }
+ .logo {
+ margin-left: 15vw;
+ }
- .login-btn {
- margin-right: 15vw;
- }
+ .login-btn {
+ margin-right: 15vw;
+ }
}
.user-icon-auth {
- position: absolute;
- left: 10px;
- top: 50%;
- transform: translateY(-50%);
- width: 24px;
- height: 24px;
+ position: absolute;
+ left: 10px;
+ top: 50%;
+ transform: translateY(-50%);
+ width: 24px;
+ height: 24px;
}
.basket-link-wrapper {
- position: relative;
+ position: relative;
}
.basket-indicator {
- position: absolute;
- top: -15px;
- right: -15px;
- background-color: red;
- color: white;
- font-size: 12px;
- font-weight: bold;
- border-radius: 50%;
- width: 20px;
- height: 20px;
- display: flex;
- align-items: center;
- justify-content: center;
- box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
+ position: absolute;
+ top: -15px;
+ right: -15px;
+ background-color: red;
+ color: white;
+ font-size: 12px;
+ font-weight: bold;
+ border-radius: 50%;
+ width: 20px;
+ height: 20px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}
.header-into-card {
- padding: 0;
- margin: 0;
-}
\ No newline at end of file
+ padding: 0;
+ margin: 0;
+ font-size: 18px;
+}
diff --git a/frontend/src/components/main-page/ui/counter/Counter.js b/frontend/src/components/main-page/ui/counter/Counter.js
new file mode 100644
index 00000000..85573c97
--- /dev/null
+++ b/frontend/src/components/main-page/ui/counter/Counter.js
@@ -0,0 +1,19 @@
+import React, { useContext } from "react";
+import { CounterContext } from "./CounterContext";
+
+export default function Counter() {
+ const { count, increment, decrement, setCountValue } =
+ useContext(CounterContext);
+
+ return (
+
+
+
+
+
+ );
+}
diff --git a/frontend/src/components/main-page/ui/counter/CounterContext.js b/frontend/src/components/main-page/ui/counter/CounterContext.js
new file mode 100644
index 00000000..07a9b4f5
--- /dev/null
+++ b/frontend/src/components/main-page/ui/counter/CounterContext.js
@@ -0,0 +1,58 @@
+import React, { createContext } from "react";
+
+export const CounterContext = createContext();
+
+export const Context = (props) => {
+ const [count, setCount] = React.useState("1");
+ const maxLength = 10; // Максимальная длина числа (например, 10 цифр)
+
+ function setCountValue(e) {
+ const value = e.target.value;
+
+ // Проверка, если введенное значение больше, чем количество доступных мест
+ if (parseInt(value) > props.free_beds) {
+ setCount(props.free_beds.toString()); // Обновляем значение до свободных мест
+ return;
+ }
+
+ // Если строка состоит только из нулей, устанавливаем значение как "0"
+ if (/^0+$/.test(value)) {
+ setCount("0");
+ return;
+ }
+
+ // Ограничиваем количество цифр
+ if (value === "" || /^[0-9]*$/.test(value)) {
+ if (value.length <= maxLength) {
+ setCount(value); // Обновляем состояние только если длина значения не превышает maxLength
+ }
+ }
+ }
+
+ function increment() {
+ setCount((prevCount) => {
+ const newCount = Math.min(parseInt(prevCount) + 1, props.free_beds); // Ограничение максимальным числом
+ return newCount.toString();
+ });
+ }
+
+ function decrement() {
+ setCount((prevCount) => {
+ const newCount = Math.max(parseInt(prevCount) - 1, 0);
+ return newCount.toString();
+ });
+ }
+
+ const value = {
+ count,
+ increment,
+ decrement,
+ setCountValue,
+ };
+
+ return (
+
+ {props.children}
+
+ );
+};
diff --git a/frontend/src/components/main-page/ui/login-btn/LoginBtn.js b/frontend/src/components/main-page/ui/login-btn/LoginBtn.js
index 466b591f..4c743321 100644
--- a/frontend/src/components/main-page/ui/login-btn/LoginBtn.js
+++ b/frontend/src/components/main-page/ui/login-btn/LoginBtn.js
@@ -1,19 +1,22 @@
-import React from 'react'
-import { Routes, Route, Link } from 'react-router-dom';
-import AuthForm from '../../../auth/login/auth';
+import React from "react";
+import { Routes, Route, Link } from "react-router-dom";
+import AuthForm from "../../../auth/login/auth";
export default function LoginBtn() {
- return (
- <>
-
-
-
-
Sing In
-
-
-
- } />
-
-
-
- )
+ return (
+ <>
+
+
+
+
Sing In
+
+
+
+ } />
+
+
+ );
}
diff --git a/frontend/src/components/main-page/ui/register-btn/RegisterBtn.js b/frontend/src/components/main-page/ui/register-btn/RegisterBtn.js
index beb34dce..c5bd706a 100644
--- a/frontend/src/components/main-page/ui/register-btn/RegisterBtn.js
+++ b/frontend/src/components/main-page/ui/register-btn/RegisterBtn.js
@@ -1,19 +1,22 @@
-import React from 'react'
-import { Routes, Route, Link } from 'react-router-dom';
-import RegisterForm from '../../../auth/register/RegisterForm';
+import React from "react";
+import { Routes, Route, Link } from "react-router-dom";
+import RegisterForm from "../../../auth/register/RegisterForm";
export default function RegisterBtn() {
- return (
- <>
-
-
-
Sing Up
-
-
-
-
- } />
-
-
-
- )
+ return (
+ <>
+
+
+
Sing Up
+
+
+
+
+ } />
+
+
+ );
}