diff --git a/learning-app/public/index.html b/learning-app/public/index.html index aa069f2..03cd04e 100644 --- a/learning-app/public/index.html +++ b/learning-app/public/index.html @@ -2,42 +2,19 @@ - + + + - - - - - React App + Learning App
- diff --git a/learning-app/src/components/home/Home.jsx b/learning-app/src/components/home/Home.jsx index 967f0b1..e07ac0f 100644 --- a/learning-app/src/components/home/Home.jsx +++ b/learning-app/src/components/home/Home.jsx @@ -1,51 +1,68 @@ -import React, { useState } from 'react'; +import React, { useState, useRef, useEffect } from 'react'; import styles from './Home.module.css'; -import { RxHamburgerMenu } from "react-icons/rx"; +import { IoMdMenu } from "react-icons/io"; +import { RxCross2 } from "react-icons/rx"; const logo = '/generated-logo-no_backgroud.png'; const Home = () => { - // const [isMenuOpen, setIsMenuOpen] = useState(false); + const [isMenuOpen, setIsMenuOpen] = useState(false); + const [showCloseButton, setShowCloseButton] = useState(false); - // const toggleMenu = () => { - // setIsMenuOpen(!isMenuOpen); - // }; + const toggleMenu = () => { + setIsMenuOpen(!isMenuOpen); + }; - return ( -
-
-
- logo -

ProfessionSkill
Academy

-
- -
-
- ); -}; - -export default Home; + const menuRef = useRef(null); + const handleClickOutside = (event) => { + if (menuRef.current && !menuRef.current.contains(event.target)) { + setIsMenuOpen(false); + } + }; + useEffect(() => { + document.addEventListener('mousedown', handleClickOutside); + return () => { + document.removeEventListener('mousedown', handleClickOutside); + }; + }, []); + useEffect(() => { + if (isMenuOpen) { + document.body.style.overflowY = 'hidden'; + setShowCloseButton(true); + } else { + document.body.style.overflowY = 'auto'; + setShowCloseButton(false); + } + }, [isMenuOpen]); + return ( +
+
+ + +
+
+ logo +

ProfessionSkill
Academy

+
+
+ +
+
+ ); +}; -{/*
- -{isMenuOpen && ( -
- -
-)} -
- -
-Logo -

ProfessionSkill
Academy

-
*/} +export default Home; diff --git a/learning-app/src/components/home/Home.module.css b/learning-app/src/components/home/Home.module.css index 79d49ec..06d3beb 100644 --- a/learning-app/src/components/home/Home.module.css +++ b/learning-app/src/components/home/Home.module.css @@ -1,9 +1,11 @@ .home{ min-height: 100vh; - padding-top: 50px; + width: 100vw; + display: flex; + background: radial-gradient(ellipse at center, #0F4DEE, #391090 80%); & h1{ padding-top: 20px; - font-size: 4rem; + font-size: 3rem; color: white; } & h2{ @@ -13,20 +15,97 @@ } } -.head{ - display: flex; - justify-content: space-between; - max-width: 90%; - margin: auto; - text-align: center; -} .logo{ display: flex; - width: 200px; - height: 200px; + position: absolute; + top: 20px; + right: 52%; + width: 150px; + height: 150px; + text-align: center; & h1 { padding-top: 30px; } } + +.menuButton { + position: fixed; + top: 30px; + left: 80px; + background: none; + border: none; + cursor: pointer; + font-size: 16px; + margin-top: 30px; + z-index: 5; +} + + +.navContainer { + display: flex; + justify-content: center; + margin: auto; +} + +.menu { + display: flex; + flex-direction: column; + padding-top: 30px; + list-style: none; + position: fixed; + width: 400px; + height: 100vh; + background-color: #ffffff; + z-index: 3; + top: 0; + bottom: 0; + left: 0; + right: 0; + transform: translateX(-400px); + transition: transform 0.5s ease-in-out; + +} + +.menu.open { + transform: translateX(0px); + box-shadow: 9px 5px 15px 5px rgba(0,0,0,0.33); +} + + +.menu ul { + list-style-type: none; + padding: 0; + padding: 20px; + margin-top: 50px; +} + +.menu ul li { + border: 2px solid #000000; + border-radius: 16px; + background-color: white; + margin-top: 20px; + font-size: 24px; + font-weight: 400; + padding: 20px 15px; + cursor: pointer; +} + +.menu ul li:hover { + background-color: #f0f0f0; +} + + +.lkWrap{ + position: absolute; + right: 50px; + top: 70px; +} + +.lk{ + border: 0; + background: none; + color: white; + font-size: 3rem; +} \ No newline at end of file diff --git a/learning-app/src/components/login/Login.jsx b/learning-app/src/components/login/Login.jsx index c8d102e..c8dc6e6 100644 --- a/learning-app/src/components/login/Login.jsx +++ b/learning-app/src/components/login/Login.jsx @@ -36,6 +36,7 @@ function Login() {
- +
diff --git a/learning-app/src/components/login/Login.module.css b/learning-app/src/components/login/Login.module.css index 0751c13..4e08585 100644 --- a/learning-app/src/components/login/Login.module.css +++ b/learning-app/src/components/login/Login.module.css @@ -3,6 +3,7 @@ display: flex; justify-content: center; align-items: center; + background: radial-gradient(ellipse at center, #0F4DEE, #391090 80%); } .formLogin { @@ -10,22 +11,23 @@ display: flex; flex-direction: column; max-width: 30%; - padding: 20px; /* Добавляем отступы, чтобы форма выглядела лучше */ - border-radius: 20px; /* Добавляем скругление краев формы */ + padding: 20px; + border-radius: 20px; + } -input, -button { +.input, +.btn { padding: 20px; color: black; font-size: 1.5rem; margin-top: 20px; border-radius: 20px; - border: 1px solid black; /* Убираем границы у элементов ввода и кнопки */ - outline: none; /* Убираем обводку у фокусированных элементов */ + border: 1px solid black; + outline: none; } -button { +.btn { background-color: #FFC700; cursor: pointer; margin-top: 50px; diff --git a/learning-app/src/components/registration/Registration.jsx b/learning-app/src/components/registration/Registration.jsx index 6655068..99f6dfe 100644 --- a/learning-app/src/components/registration/Registration.jsx +++ b/learning-app/src/components/registration/Registration.jsx @@ -47,23 +47,23 @@ const Registration = () => {
- setEmail(e.target.value)} required /> + setEmail(e.target.value)} required />
- setName(e.target.value)} required /> + setName(e.target.value)} required />
- setPassword(e.target.value)} required /> + setPassword(e.target.value)} required />
- setConfirmPassword(e.target.value)} required /> + setConfirmPassword(e.target.value)} required />
{error &&
{error}
} {successMessage &&
{successMessage}
} - +
); diff --git a/learning-app/src/components/registration/Registration.module.css b/learning-app/src/components/registration/Registration.module.css index 9defac6..7425124 100644 --- a/learning-app/src/components/registration/Registration.module.css +++ b/learning-app/src/components/registration/Registration.module.css @@ -3,29 +3,30 @@ display: flex; justify-content: center; align-items: center; + background: radial-gradient(ellipse at center, #0F4DEE, #391090 80%); } .formRegistration { background-color: rgb(255, 255, 255); display: flex; flex-direction: column; - max-width: 30%; - padding: 20px; /* Добавляем отступы, чтобы форма выглядела лучше */ - border-radius: 20px; /* Добавляем скругление краев формы */ + max-width: 40%; + padding: 20px; + border-radius: 20px; } -input, -button { +.input, +.btn { padding: 20px; color: black; font-size: 1.5rem; margin-top: 20px; border-radius: 20px; - border: 1px solid black; /* Убираем границы у элементов ввода и кнопки */ - outline: none; /* Убираем обводку у фокусированных элементов */ + border: 1px solid black; + outline: none; } -button { +.btn { background-color: #FFC700; cursor: pointer; margin-top: 50px; diff --git a/learning-app/src/components/start/Start.module.css b/learning-app/src/components/start/Start.module.css index 54f3dda..4961c26 100644 --- a/learning-app/src/components/start/Start.module.css +++ b/learning-app/src/components/start/Start.module.css @@ -2,9 +2,10 @@ height: 100vh; width: 100vw; padding-top: 50px; + background: radial-gradient(ellipse at center, #0F4DEE, #391090 80%); & h1{ padding-top: 20px; - font-size: 4rem; + font-size: 3rem; color: white; } & h2{ @@ -14,9 +15,7 @@ } } -body { - background: radial-gradient(ellipse at center, #0F4DEE, #391090 80%); -} + .header{ @@ -29,8 +28,8 @@ body { .logo{ display: flex; - width: 200px; - height: 200px; + width: 150px; + height: 150px; & h1 { padding-top: 30px; } diff --git a/learning-app/src/index.css b/learning-app/src/index.css index 53dc51a..f9b52c8 100644 --- a/learning-app/src/index.css +++ b/learning-app/src/index.css @@ -3,4 +3,5 @@ padding: 0; box-sizing: border-box; font-size: 10px; + font-family: "Roboto", sans-serif; } \ No newline at end of file diff --git a/target/.rustc_info.json b/target/.rustc_info.json index adfb0f7..1a13595 100644 --- a/target/.rustc_info.json +++ b/target/.rustc_info.json @@ -1 +1 @@ -{"rustc_fingerprint":6448695626900610106,"outputs":{"4614504638168534921":{"success":true,"status":"","code":0,"stdout":"rustc 1.76.0 (07dca489a 2024-02-04)\nbinary: rustc\ncommit-hash: 07dca489ac2d933c78d3c5158e3f43beefeb02ce\ncommit-date: 2024-02-04\nhost: x86_64-pc-windows-msvc\nrelease: 1.76.0\nLLVM version: 17.0.6\n","stderr":""},"15729799797837862367":{"success":true,"status":"","code":0,"stdout":"___.exe\nlib___.rlib\n___.dll\n___.dll\n___.lib\n___.dll\nC:\\Users\\vladk\\.rustup\\toolchains\\stable-x86_64-pc-windows-msvc\npacked\n___\ndebug_assertions\npanic=\"unwind\"\nproc_macro\ntarget_arch=\"x86_64\"\ntarget_endian=\"little\"\ntarget_env=\"msvc\"\ntarget_family=\"windows\"\ntarget_feature=\"fxsr\"\ntarget_feature=\"sse\"\ntarget_feature=\"sse2\"\ntarget_has_atomic=\"16\"\ntarget_has_atomic=\"32\"\ntarget_has_atomic=\"64\"\ntarget_has_atomic=\"8\"\ntarget_has_atomic=\"ptr\"\ntarget_os=\"windows\"\ntarget_pointer_width=\"64\"\ntarget_vendor=\"pc\"\nwindows\n","stderr":""}},"successes":{}} \ No newline at end of file +{"rustc_fingerprint":6448695626900610106,"outputs":{"12744816824612481171":{"success":true,"status":"","code":0,"stdout":"___.exe\nlib___.rlib\n___.dll\n___.dll\n___.lib\n___.dll\nC:\\Users\\vladk\\.rustup\\toolchains\\stable-x86_64-pc-windows-msvc\npacked\n___\ndebug_assertions\npanic=\"unwind\"\nproc_macro\ntarget_arch=\"x86_64\"\ntarget_endian=\"little\"\ntarget_env=\"msvc\"\ntarget_family=\"windows\"\ntarget_feature=\"fxsr\"\ntarget_feature=\"sse\"\ntarget_feature=\"sse2\"\ntarget_has_atomic=\"16\"\ntarget_has_atomic=\"32\"\ntarget_has_atomic=\"64\"\ntarget_has_atomic=\"8\"\ntarget_has_atomic=\"ptr\"\ntarget_os=\"windows\"\ntarget_pointer_width=\"64\"\ntarget_vendor=\"pc\"\nwindows\n","stderr":""},"15729799797837862367":{"success":true,"status":"","code":0,"stdout":"___.exe\nlib___.rlib\n___.dll\n___.dll\n___.lib\n___.dll\nC:\\Users\\vladk\\.rustup\\toolchains\\stable-x86_64-pc-windows-msvc\npacked\n___\ndebug_assertions\noverflow_checks\npanic=\"unwind\"\nproc_macro\nrelocation_model=\"pic\"\ntarget_abi=\"\"\ntarget_arch=\"x86_64\"\ntarget_endian=\"little\"\ntarget_env=\"msvc\"\ntarget_family=\"windows\"\ntarget_feature=\"fxsr\"\ntarget_feature=\"sse\"\ntarget_feature=\"sse2\"\ntarget_has_atomic\ntarget_has_atomic=\"16\"\ntarget_has_atomic=\"32\"\ntarget_has_atomic=\"64\"\ntarget_has_atomic=\"8\"\ntarget_has_atomic=\"ptr\"\ntarget_has_atomic_equal_alignment=\"16\"\ntarget_has_atomic_equal_alignment=\"32\"\ntarget_has_atomic_equal_alignment=\"64\"\ntarget_has_atomic_equal_alignment=\"8\"\ntarget_has_atomic_equal_alignment=\"ptr\"\ntarget_has_atomic_load_store\ntarget_has_atomic_load_store=\"16\"\ntarget_has_atomic_load_store=\"32\"\ntarget_has_atomic_load_store=\"64\"\ntarget_has_atomic_load_store=\"8\"\ntarget_has_atomic_load_store=\"ptr\"\ntarget_os=\"windows\"\ntarget_pointer_width=\"64\"\ntarget_thread_local\ntarget_vendor=\"pc\"\nwindows\n","stderr":""},"4614504638168534921":{"success":true,"status":"","code":0,"stdout":"rustc 1.76.0 (07dca489a 2024-02-04)\nbinary: rustc\ncommit-hash: 07dca489ac2d933c78d3c5158e3f43beefeb02ce\ncommit-date: 2024-02-04\nhost: x86_64-pc-windows-msvc\nrelease: 1.76.0\nLLVM version: 17.0.6\n","stderr":""}},"successes":{}} \ No newline at end of file