Skip to content

Commit

Permalink
Merge pull request #105 from mikeiken:main-functional
Browse files Browse the repository at this point in the history
Partial design update
  • Loading branch information
Kseen715 authored Nov 29, 2024
2 parents 0fe90c7 + 3bc0a4e commit 7274595
Show file tree
Hide file tree
Showing 30 changed files with 1,701 additions and 764 deletions.
Binary file added frontend/public/favicon.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 2 additions & 2 deletions frontend/public/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<link rel="icon" href="%PUBLIC_URL%/favicon.jpg" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
Expand All @@ -25,7 +25,7 @@
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
<title>TamProg</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
Expand Down
4 changes: 4 additions & 0 deletions frontend/public/plus.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 2 additions & 2 deletions frontend/src/App.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,9 @@ import NotFound from "./components/not-found/NotFound";
import RegisterForm from "./components/auth/register/RegisterForm";
import Garden from "./components/main-page/Garden/Garden";
import Contractor from "./components/main-page/Contractor/Contractor";
import License from "./components/main-page/License/License";
import About from "./components/main-page/About/about";
import PrivateRoute from "./components/auth/private-route/PrivateRoute";
import Basket from "./components/main-page/Basket/Basket";

function App() {
return (
Expand All @@ -29,7 +29,7 @@ function App() {
>
<Route path="garden" element={<Garden />} />
<Route path="contractor" element={<Contractor />} />
<Route path="license" element={<License />} />
<Route path="license" element={<Basket />} />
<Route path="about" element={<About />} />
</Route>

Expand Down
138 changes: 105 additions & 33 deletions frontend/src/components/auth/login/components/auth-style.css
Original file line number Diff line number Diff line change
@@ -1,35 +1,109 @@
.intro {
position: fixed;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 100vh;
width: 100vw;
z-index: 9999;
z-index: 9999;
display: flex;
justify-content: center;
align-items: center;
background: radial-gradient(circle at center, #001c2c, #00070c);
}

.auth-page-wrapper {
background: linear-gradient(
315deg,
rgba(238, 223, 94, 1) 0%,
rgba(40, 158, 127, 1) 16%,
rgba(11, 137, 142, 1) 33%,
rgba(0, 212, 255, 1) 50%,
rgba(255, 150, 150, 1) 66%,
rgba(153, 102, 204, 1) 83%,
rgba(0, 75, 160, 1) 91%,
rgba(255, 120, 80, 1) 100%
);
background-size: 400% 400%; /* Увеличиваем размер градиента для эффекта переливания */
background-attachment: fixed;
animation: gradient 30s infinite ease; /* Анимация движения */
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: radial-gradient(circle at center, #001C2C, #00070C);
}

/* Видео на заднем плане */
.video {
overflow: hidden;
position: absolute;
width: 100vw;
height: 100vh;
top: 0;
.waves {
position: fixed;
bottom: 0;
left: 0;
z-index: 1; /* Видео под содержимым */
width: 200%;
height: 12em;
opacity: 0.8;
background: rgb(255, 255, 255 / 25%);
border-radius: 1000% 1000% 0 0;
z-index: 1;
transform: translate3d(0, 0, 0);
animation: wave 10s -3s linear infinite;
}

/* Само видео */
.background-video {
width: 100%;
height: 100%;
object-fit: cover;
.wave:nth-of-type(2) {
bottom: -1.25em;
animation: wave 18s linear reverse infinite;
opacity: 0.8;
}

.wave:nth-of-type(3) {
bottom: -2.5em;
animation: wave 20s linear reverse infinite;
opacity: 0.9;
}

@keyframes wave {
2% {
transform: translateX(1);
}
25% {
transform: translateX(-25%);
}
50% {
transform: translateX(-50%);
}
75% {
transform: translateX(-25%);
}
100% {
transform: translateX(1);
}
}
@keyframes gradient {
0% {
background-position: 0% 0%;
}
50% {
background-position: 100% 100%;
}
100% {
background-position: 0% 0%;
}
}

.welcome-show {
display: flex;
justify-content: center;
align-items: center;
height: 100px;
}

.welcome-show h1 {
opacity: 0;
transition: opacity 1s ease-in-out;
}

.welcome-show h1.show {
opacity: 1;
}

/* Обертка для содержимого внутри интро */
Expand All @@ -40,10 +114,8 @@
justify-content: center;
align-items: center;
width: 400px;

}


/* Стиль для формы */
.wrapper {
position: absolute;
Expand All @@ -59,7 +131,7 @@
.input-box {
position: relative;
margin-bottom: 20px;
width: 100%;
width: 100%;
}

/* Поле ввода */
Expand All @@ -73,27 +145,27 @@
background: transparent;
z-index: 0;
transition: background-color 0.3s ease; /* Плавный переход для затемнения */
outline: none;
outline: none;
}

.input-box input:focus {
background-color: rgba(0, 0, 0, 0.05); /* Легкое затемнение при фокусе */
}

.input-box label{
.input-box label {
position: absolute;
top: 50%;
left: 13%;
transform: translateY(-50%);
color: #282528;
font-size: 13px;
pointer-events: none;
transition: .3s;
transition: 0.3s;
}

input:focus ~ label,
input:valid ~ label{
top:0;
input:valid ~ label {
top: 0;
font-size: 10px;
padding: 0 10px;
background-color: #dadcdd;
Expand All @@ -120,21 +192,21 @@ input:valid ~ label{
border: none;
border-radius: 5px;
overflow: hidden;
background-color: #007BFF; /* Цвет фона */
background-color: #007bff; /* Цвет фона */
cursor: pointer;
transition: color 0.3s;

&::before {
content: '';
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.3);
transform: translateX(-100%);
transition: transform 0.4s;
z-index: 0;
background-color: rgba(0, 0, 0, 0.3);
transform: translateX(-100%);
transition: transform 0.4s;
z-index: 0;
border-radius: 5px;
}

Expand All @@ -147,8 +219,8 @@ input:valid ~ label{
}
}


.remember, .register-link {
.remember,
.register-link {
font-size: 13px;
display: flex;
justify-content: space-between;
Expand All @@ -157,7 +229,7 @@ input:valid ~ label{
}

.register-link a {
color: #007BFF;
color: #007bff;
}

.register-link a:hover {
Expand Down
26 changes: 12 additions & 14 deletions frontend/src/components/auth/login/components/background.js
Original file line number Diff line number Diff line change
@@ -1,20 +1,18 @@
import React from 'react'
import './auth-style.css'
import Form from './form'
import React from "react";
import "./auth-style.css";
import Form from "./form";

export default function AuthFormBackgroundComponent() {
return (
<div className='intro'>
<div className='video'>
<img
src={process.env.PUBLIC_URL + '/tenor.gif'}
alt="Background GIF"
className="background-video"
/>
</div>
<div className='main-wrapper'>
<Form />
<div className="intro">
<div className="auth-page-wrapper">
<div className="waves"></div>
<div className="waves"></div>
<div className="waves"></div>
<div className="main-wrapper">
<Form />
</div>
</div>
</div>
)
);
}
5 changes: 4 additions & 1 deletion frontend/src/components/auth/login/components/form.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import React, { useState } from "react";
import { Link, Routes, Route, useNavigate } from "react-router-dom";
import RegisterForm from "../../register/RegisterForm";
import Instance from "../../../api/instance";
import Welcome from "./welocme/Welcome";
export default function Form() {
const [username, setUsername] = useState("");
const [password, setPassword] = useState("");
Expand Down Expand Up @@ -37,7 +38,9 @@ export default function Form() {
return (
<div className="wrapper">
<form onSubmit={handleSubmit}>
<h1>Login</h1>
<div className="welcome-show">
<Welcome />
</div>
<div className="input-box">
<input
className=""
Expand Down
44 changes: 44 additions & 0 deletions frontend/src/components/auth/login/components/welocme/Welcome.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
import React, { useState, useEffect } from "react";

export default function Welcome() {
// Массив с приветствиями
const greetings = [
"Привет", // Русский
"Hello", // Английский
"Hola", // Испанский
"Bonjour", // Французский
"Ciao", // Итальянский
"こんにちは", // Японский
"안녕하세요", // Корейский
"Hallo", // Немецкий
"Olá", // Португальский
"Nǐ hǎo", // Китайский
];

const [greeting, setGreeting] = useState(greetings[0]);

const [isVisible, setIsVisible] = useState(false);

useEffect(() => {
setIsVisible(true);

const interval = setInterval(() => {
setIsVisible(false);
setTimeout(() => {
setGreeting((prevGreeting) => {
const currentIndex = greetings.indexOf(prevGreeting);
const nextIndex = (currentIndex + 1) % greetings.length;
return greetings[nextIndex];
});
setIsVisible(true);
}, 1000);
}, 3000);

return () => clearInterval(interval);
}, []);
return (
<>
<h1 className={isVisible ? "show" : ""}>{greeting}</h1>{" "}
</>
);
}
Loading

0 comments on commit 7274595

Please sign in to comment.