From 3dd68856707852d947ee6826e46631a4e74cb999 Mon Sep 17 00:00:00 2001 From: bogutskii Date: Wed, 29 May 2024 00:04:39 -0700 Subject: [PATCH] add register form and login --- src/App.js | 2 - src/components/Auth.js | 49 --- src/components/AuthContext.js | 23 ++ src/components/AuthModal.js | 35 ++ src/components/Field.css | 178 +++++----- src/components/Header.js | 55 +-- src/components/Login.js | 43 +++ src/components/LoginModal.js | 34 ++ src/components/Register.js | 50 +++ src/components/RegisterModal.js | 34 ++ src/index.js | 5 +- src/styles.css | 573 +++++++++++++++++++++++++++----- 12 files changed, 837 insertions(+), 244 deletions(-) delete mode 100644 src/components/Auth.js create mode 100644 src/components/AuthContext.js create mode 100644 src/components/AuthModal.js create mode 100644 src/components/Login.js create mode 100644 src/components/LoginModal.js create mode 100644 src/components/Register.js create mode 100644 src/components/RegisterModal.js diff --git a/src/App.js b/src/App.js index c093c62f..ae4a7808 100644 --- a/src/App.js +++ b/src/App.js @@ -2,13 +2,11 @@ import './styles.css'; import Field from './components/Field.js'; import { connect } from 'react-redux'; import { Header } from './components/Header'; -import Auth from './components/Auth'; const App = (props) => { return (
-
); diff --git a/src/components/Auth.js b/src/components/Auth.js deleted file mode 100644 index e84e5fe2..00000000 --- a/src/components/Auth.js +++ /dev/null @@ -1,49 +0,0 @@ -import React, { useState } from 'react'; -import axios from 'axios'; - -const Auth = () => { - const [username, setUsername] = useState(''); - const [password, setPassword] = useState(''); - const [isLogin, setIsLogin] = useState(true); - - const handleSubmit = async (e) => { - e.preventDefault(); - - const endpoint = isLogin ? '/auth/login' : '/auth/register'; - try { - const response = await axios.post(endpoint, { username, password }); - console.log('Response:', response.data); - if (isLogin) { - localStorage.setItem('token', response.data.token); - } - } catch (error) { - console.error('Error:', error.response ? error.response.data : error.message); - } - }; - - return ( -
-

{isLogin ? 'Login' : 'Register'}

-
- setUsername(e.target.value)} - /> - setPassword(e.target.value)} - /> - -
- -
- ); -}; - -export default Auth; \ No newline at end of file diff --git a/src/components/AuthContext.js b/src/components/AuthContext.js new file mode 100644 index 00000000..d974fa08 --- /dev/null +++ b/src/components/AuthContext.js @@ -0,0 +1,23 @@ +import React, { createContext, useContext, useState } from 'react'; + +const AuthContext = createContext(null); + +export const useAuth = () => useContext(AuthContext); + +export const AuthProvider = ({ children }) => { + const [user, setUser] = useState(null); + + const login = (userData) => { + setUser(userData); + }; + + const logout = () => { + setUser(null); + }; + + return ( + + {children} + + ); +}; \ No newline at end of file diff --git a/src/components/AuthModal.js b/src/components/AuthModal.js new file mode 100644 index 00000000..353da7be --- /dev/null +++ b/src/components/AuthModal.js @@ -0,0 +1,35 @@ +import React, { useState, useEffect } from 'react'; +import Register from './Register'; + +const AuthModal = ({ isOpen, onClose }) => { + const [isLogin, setIsLogin] = useState(true); + + const handleOutsideClick = (e) => { + if (e.target.className === 'modal-overlay') { + onClose(); + } + }; + + useEffect(() => { + if (isOpen) { + document.addEventListener('mousedown', handleOutsideClick); + } else { + document.removeEventListener('mousedown', handleOutsideClick); + } + return () => { + document.removeEventListener('mousedown', handleOutsideClick); + }; + }, [isOpen]); + + if (!isOpen) return null; + + return ( +
+
+ +
+
+ ); +}; + +export default AuthModal; \ No newline at end of file diff --git a/src/components/Field.css b/src/components/Field.css index 1e062bcf..81518f83 100644 --- a/src/components/Field.css +++ b/src/components/Field.css @@ -1,141 +1,147 @@ .grid { - border: 3px solid black; - width: 1000px; - height: 1000px; - display: flex; - flex-wrap: wrap; - align-content: stretch; - margin: 0 auto; + border: 3px solid black; + width: 1000px; + height: 1000px; + display: flex; + flex-wrap: wrap; + align-content: stretch; + margin: 0 auto; } .pixel { - width: 10%; - height: 10%; - box-sizing: border-box; + width: 10%; + height: 10%; + box-sizing: border-box; } .color-history { - display: flex; - flex-wrap: wrap; - align-content: stretch; - width: 600px + display: flex; + flex-wrap: wrap; + align-content: stretch; + width: 600px } .pixel-history { - width: 35px; - height: 35px; - /*border: 1px solid #b7c8e7;*/ - margin: 1px; + width: 35px; + height: 35px; + + margin: 1px; } .btn-brush { - font-size: 1vw; + font-size: 1vw; } .brush-block { - margin: 10px; + margin: 10px; } .draw-history-item { - cursor: pointer; - margin: 5px; + cursor: pointer; + margin: 5px; } /*font size*/ :root { - --primary-color: #185ee0; - --secondary-color: #e6eef9; + --primary-color: #185ee0; + --secondary-color: #e6eef9; } -*, -*:after, -*:before { - box-sizing: border-box; + +*, *:after, *:before { + box-sizing: border-box; } + body { - font-family: 'Inter', sans-serif; - background-color: rgba(230, 238, 249, 0.5); + font-family: 'Inter', sans-serif; + background-color: rgba(230, 238, 249, 0.5); } + .container { - justify-content: center; - display: flex; - align-items: center; -margin: 5px; + justify-content: center; + display: flex; + align-items: center; + margin: 5px; } -.tabs { - display: flex; - position: relative; - background-color: #fff; - box-shadow: 0 0 1px 0 rgba(24, 94, 224, 0.15), 0 6px 12px 0 rgba(24, 94, 224, 0.15); - border-radius: 3px; +.tabs { + display: flex; + position: relative; + background-color: #fff; + box-shadow: 0 0 1px 0 rgba(24, 94, 224, 0.15), 0 6px 12px 0 rgba(24, 94, 224, 0.15); + border-radius: 3px; } + .tabs * { - z-index: 2; + z-index: 2; } + input[type='radio'] { - display: none; + display: none; } + .tab { - display: flex; - align-items: center; - justify-content: center; - height: 54px; - width: 200px; - font-size: 1.25rem; - font-weight: 500; - border-radius: 3px; - /*// just a high number to create pill effect*/ - cursor: pointer; - transition: color 0.15s ease-in; + display: flex; + align-items: center; + justify-content: center; + height: 54px; + width: 200px; + font-size: 1.25rem; + font-weight: 500; + border-radius: 3px; + cursor: pointer; + transition: color 0.15s ease-in; } + .notification { - display: flex; - align-items: center; - justify-content: center; - width: 2rem; - height: 2rem; - margin-left: 0.75rem; - border-radius: 50%; - background-color: var(--secondary-color); - transition: 0.15s ease-in; + display: flex; + align-items: center; + justify-content: center; + width: 2rem; + height: 2rem; + margin-left: 0.75rem; + border-radius: 50%; + background-color: var(--secondary-color); + transition: 0.15s ease-in; } + input[type='radio']:checked + label { - color: var(--primary-color); + color: var(--primary-color); } + input[type='radio']:checked + label > .notification { - background-color: var(--primary-color); - color: #fff; + background-color: var(--primary-color); + color: #fff; } + input[id='radio-1']:checked ~ .glider { - transform: translateX(0); + transform: translateX(0); } + input[id='radio-2']:checked ~ .glider { - transform: translateX(100%); + transform: translateX(100%); } + input[id='radio-3']:checked ~ .glider { - transform: translateX(200%); + transform: translateX(200%); } + .glider { - position: absolute; - display: flex; - height: 54px; - width: 200px; - background-color: var(--secondary-color); - z-index: 1; - border-radius: 3px; - /*// just a high number to create pill effect*/ - transition: 0.25s ease-out; + position: absolute; + display: flex; + height: 54px; + width: 200px; + background-color: var(--secondary-color); + z-index: 1; + border-radius: 3px; + transition: 0.25s ease-out; } + @media (max-width: 700px) { - .tabs { - transform: scale(0.6); - } + .tabs { + transform: scale(0.6); + } } -/*--end field size--*/ - -.vert-middle{ - line-height: 35px; +.vert-middle { + line-height: 35px; } - - diff --git a/src/components/Header.js b/src/components/Header.js index f7109882..09b36977 100644 --- a/src/components/Header.js +++ b/src/components/Header.js @@ -1,25 +1,42 @@ -import React from 'react'; +// Header.js +import React, { useState } from 'react'; +import { useAuth } from './AuthContext'; +import LoginModal from './LoginModal'; +import RegisterModal from './RegisterModal'; -export const Header = (props) => { - const handleLogin = (event) => { - event.preventDefault(); - const data = new FormData(event.target); - const email = data.get('email'); - const password = data.get('password'); - console.log({ email, password }); +export const Header = () => { + const { user, logout } = useAuth(); + const [isLoginModalOpen, setIsLoginModalOpen] = useState(false); + const [isRegisterModalOpen, setIsRegisterModalOpen] = useState(false); + + const toggleLoginModal = () => { + setIsLoginModalOpen(!isLoginModalOpen); + if (isRegisterModalOpen) setIsRegisterModalOpen(false); + }; + + const toggleRegisterModal = () => { + setIsRegisterModalOpen(!isRegisterModalOpen); + if (isLoginModalOpen) setIsLoginModalOpen(false); }; return ( -
-
-

Pixel draw

- You now: {props.username} -
- - - -
-
-
+
+

Pixel Draw

+ {user ? ( +
+ Logged in as: {user.username} + +
+ ) : ( +
+ + +
+ )} + {isLoginModalOpen && } + {isRegisterModalOpen && } +
); }; + +export default Header; diff --git a/src/components/Login.js b/src/components/Login.js new file mode 100644 index 00000000..d787e6e1 --- /dev/null +++ b/src/components/Login.js @@ -0,0 +1,43 @@ +import React, { useState } from 'react'; +import axios from 'axios'; +import { useAuth } from './AuthContext'; + +const Login = ({ onClose }) => { + const [username, setUsername] = useState(''); + const [password, setPassword] = useState(''); + const { login } = useAuth(); + + const handleSubmit = async (e) => { + e.preventDefault(); + try { + const response = await axios.post('/auth/login', { username, password }); + localStorage.setItem('token', response.data.token); + login({ username }); + onClose(); + } catch (error) { + console.error('Login Error:', error.response ? error.response.data : error.message); + } + }; + + return ( +
+ setUsername(e.target.value)} + required + /> + setPassword(e.target.value)} + required + /> + +
+ ); +}; + +export default Login; \ No newline at end of file diff --git a/src/components/LoginModal.js b/src/components/LoginModal.js new file mode 100644 index 00000000..b74f3318 --- /dev/null +++ b/src/components/LoginModal.js @@ -0,0 +1,34 @@ +// LoginModal.js +import React, { useEffect } from 'react'; +import Login from './Login'; + +const LoginModal = ({ isOpen, onClose }) => { + const handleOutsideClick = (e) => { + if (e.target.className === 'modal-overlay') { + onClose(); + } + }; + + useEffect(() => { + if (isOpen) { + document.addEventListener('mousedown', handleOutsideClick); + } else { + document.removeEventListener('mousedown', handleOutsideClick); + } + return () => { + document.removeEventListener('mousedown', handleOutsideClick); + }; + }, [isOpen]); + + if (!isOpen) return null; + + return ( +
+
+ +
+
+ ); +}; + +export default LoginModal; diff --git a/src/components/Register.js b/src/components/Register.js new file mode 100644 index 00000000..bcc5d302 --- /dev/null +++ b/src/components/Register.js @@ -0,0 +1,50 @@ +// Register.js +import React, { useState } from 'react'; +import axios from 'axios'; + +const Register = ({ onClose }) => { + const [username, setUsername] = useState(''); + const [password, setPassword] = useState(''); + const [email, setEmail] = useState(''); + + const handleSubmit = async (e) => { + e.preventDefault(); + try { + const response = await axios.post('/auth/register', { username, password, email }); + onClose(); + } catch (error) { + console.error('Registration Error:', error.response ? error.response.data : error.message); + } + }; + + return ( +
+
+ setUsername(e.target.value)} + required + /> + setEmail(e.target.value)} + required + /> + setPassword(e.target.value)} + required + /> + +
+
+ ); +}; + +export default Register; diff --git a/src/components/RegisterModal.js b/src/components/RegisterModal.js new file mode 100644 index 00000000..321ba846 --- /dev/null +++ b/src/components/RegisterModal.js @@ -0,0 +1,34 @@ +// RegisterModal.js +import React, { useEffect } from 'react'; +import Register from './Register'; + +const RegisterModal = ({ isOpen, onClose }) => { + const handleOutsideClick = (e) => { + if (e.target.className === 'modal-overlay') { + onClose(); + } + }; + + useEffect(() => { + if (isOpen) { + document.addEventListener('mousedown', handleOutsideClick); + } else { + document.removeEventListener('mousedown', handleOutsideClick); + } + return () => { + document.removeEventListener('mousedown', handleOutsideClick); + }; + }, [isOpen]); + + if (!isOpen) return null; + + return ( +
+ + + +
+ ); +}; + +export default RegisterModal; diff --git a/src/index.js b/src/index.js index 44d878ec..cd5757ee 100644 --- a/src/index.js +++ b/src/index.js @@ -3,11 +3,14 @@ import ReactDOM from 'react-dom'; import App from './App'; import { Provider } from 'react-redux'; import store from './components/redux/store'; +import { AuthProvider } from './components/AuthContext' ReactDOM.render( - + + + , document.getElementById('root'), diff --git a/src/styles.css b/src/styles.css index cbebea11..848eed96 100644 --- a/src/styles.css +++ b/src/styles.css @@ -2,7 +2,6 @@ font-family: sans-serif; text-align: center; } - /* checkbox square slider start */ .switch { position: relative; @@ -10,13 +9,11 @@ width: 60px; height: 34px; } - .switch input { opacity: 0; width: 0; height: 0; } - .slider { position: absolute; cursor: pointer; @@ -28,7 +25,6 @@ -webkit-transition: 0.4s; transition: 0.4s; } - .slider:before { position: absolute; content: ''; @@ -40,38 +36,30 @@ -webkit-transition: 0.4s; transition: 0.4s; } - input:checked + .slider { background-color: #185ee0; } - input:focus + .slider { box-shadow: 0 0 1px #185ee0; } - input:checked + .slider:before { -webkit-transform: translateX(26px); -ms-transform: translateX(26px); transform: translateX(26px); } - /* checkbox square slider end */ - /*list history */ .drawHistory { margin-left: 10px; width: 56%; } - .mg-10 { margin: 10px; } - .select-form { width: 100px; height: 100px; } - .list-li { background: rgb(241, 253, 255); border: 1px solid rgb(171, 189, 189); @@ -81,39 +69,32 @@ input:checked + .slider:before { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); } - .list-li:hover { background: rgba(210, 237, 245, 0.44); box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 5px 5px rgba(0, 0, 0, 0.22); cursor: pointer; } - .list-li:active { background: rgb(230, 248, 255); border: 1px solid rgb(6, 172, 213); } - .block { display: flex; position: relative; } - .list-wrap { width: 200px; } - .item_wrap { display: flex; justify-content: space-between; } - .btn { color: #000000; border: none; background-color: rgba(239, 115, 115, 0.87); border-radius: 5px; } - .input-save { height: 36px; width: 100%; @@ -125,7 +106,6 @@ input:checked + .slider:before { border-radius: 5px; vertical-align: middle; } - .btn-reg { box-shadow: inset 0px 1px 0px 0px #dcecfb; background: linear-gradient(to bottom, #ddf2fc 5%, rgba(179, 214, 255, 0.65) 100%); @@ -141,163 +121,241 @@ input:checked + .slider:before { text-decoration: none; text-shadow: 0px 1px 0px #9fc7f3; } - .btn-reg:hover { background: linear-gradient(to bottom, #dbeeff 5%, #d1e8fd 100%); background-color: #80b5ea; } - .btn-reg:active { background: linear-gradient(to bottom, #fceadd 5%, rgba(255, 184, 141, 0.94) 100%); position: relative; } - .btn-pushed { background: linear-gradient(to bottom, #fceadd 5%, rgba(226, 91, 255, 0.94) 100%); } - .warn { background: linear-gradient(to bottom, #fcdde3 5%, rgba(245, 130, 140, 0.65) 100%); border: 1px solid #ef6565; } - .warn:hover { background: linear-gradient(to bottom, #f39292 5%, rgba(236, 104, 104, 0.9) 100%); background-color: #ea80aa; } - .img-icon-btn { height: 24px; } - .form-inline { display: flex; flex-flow: row wrap; align-items: center; margin: 5px; } - .mg-0-a { margin: 5px auto; } - .child-grow { flex-grow: 1; } - .list-ul { list-style-type: none; padding: 0; } - .wrap-app { display: flex; justify-content: flex-start; } - #capture { top: 50%; margin: auto; } - /* HEADER */ @import url(https://fonts.googleapis.com/css?family=Baumans); - html { background: #ecf0f1; } - input { border: none; outline: none; background: #34495e; color: #fff; } - -input[type='submit'] { +.submit { background: #1abc9c; color: #fff; text-transform: uppercase; cursor: pointer; } - /* ----------- */ - header { position: relative; height: 50px; background: #2c3e50; margin-bottom: 10px; } - h1 { - position: absolute; left: 0.5em; font-family: 'Baumans'; + .App { + font-family: 'Arial', sans-serif; + text-align: center; + } + /* Switch button styling */ + .switch { + position: relative; + display: inline-block; + width: 60px; + height: 34px; + } + .switch input { + opacity: 0; + width: 0; + height: 0; + } + .slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: #ccc; + transition: .4s; + } + .slider:before { + position: absolute; + content: ''; + height: 26px; + width: 26px; + left: 4px; + bottom: 4px; + background-color: white; + transition: .4s; + } + input:checked + .slider { + background-color: #185ee0; + } + input:focus + .slider { + box-shadow: 0 0 1px #185ee0; + } + input:checked + .slider:before { + transform: translateX(26px); + } + /* Styling for list items */ + .list-li { + background: #f1fdff; + border: 1px solid #abcdbd; + padding: 4px 5px; + margin: 5px; + border-radius: 4px; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); + transition: all .3s cubic-bezier(.25, .8, .25, 1); + } + .list-li:hover { + background: rgba(210, 237, 245, .44); + box-shadow: 0 14px 28px rgba(0, 0, 0, .25), 0 5px 5px rgba(0, 0, 0, .22); + cursor: pointer; + } + .list-li:active { + background: #e6f8ff; + border: 1px solid #06acd5; + } + /* General button styling */ + .btn { + color: #000; + background-color: rgba(239, 115, 115, .87); + border: none; + border-radius: 5px; + padding: 5px 10px; + cursor: pointer; + transition: background .3s; + } + .btn:hover { + background-color: rgba(215, 95, 95, .95); + } + .btn:active { + background-color: rgba(195, 75, 75, .95); + } + /* Input styling */ + .input-save { + width: 100%; + padding: 5px; + margin-right: 5px; + background: #d7e5fa; + border: 1px solid #80b5ea; + color: black; + border-radius: 5px; + } + /* Header styling */ + .header { + background-color: #2c3e50; + color: white; + padding: 10px 20px; + display: flex; + justify-content: space-between; + align-items: center; + } + header h1 { + margin: 0; + font-family: 'Baumans', cursive; + } + header a { + color: #cef0f1; + text-decoration: none; + } font-size: 1.5em; text-transform: uppercase; color: #cef0f1; } - a { color: #cef0f1; text-decoration: none; } - header form { - position: absolute; right: 1em; top: 0.6em; } - header input { padding: 5px; width: 100px; + color: black; } - header input:focus { - background: rgba(0, 0, 0, 0.1); + background: #6b848d; + color: white; } - header input[type='submit'] { font-weight: bold; } - +input[type="text"]:focus::placeholder,input[type="password"]:focus::placeholder,input[type="email"]:focus::placeholder { + color: #b2f8f2; + opacity: 1; +} @media screen and (max-width: 550px) { header form { display: none; } } - /* ------END HEADER----- */ - .draw-history-wrap { display: flex; width: 450px; } - /* input type color */ input[type='color'] { -webkit-appearance: none; border: none; - width: 32px; height: 32px; } - input[type='color']::-webkit-color-swatch-wrapper { padding: 0; } - input[type='color']::-webkit-color-swatch { border: none; } - /*range field size*/ .range-field-size { width: 300px; } - /*preloader*/ :root { --fg: #17181c; @@ -307,80 +365,59 @@ input[type='color']::-webkit-color-swatch { --c4: #9725f4; font-size: calc(1px + (24 - 16) * (100vw - 320px) / (1280 - 320)); } - .pl3 { justify-content: space-between; } - -.pl3__a, -.pl3__b, -.pl3__c, -.pl3__d { +.pl3__a,.pl3__b,.pl3__c,.pl3__d { width: 0.75em; height: 0.75em; } - -.pl3__a, -.pl3__b, -.pl3__c, -.pl3__d { +.pl3__a,.pl3__b,.pl3__c,.pl3__d { animation: bounce3 2s ease-in-out infinite; transform-origin: 50% 0; } - .pl3 { display: flex; margin: 1.5em; width: 6em; height: 6em; } - .pl3__a { background: var(--c1); } - .pl3__b { background: var(--c2); animation-delay: 0.1s; } - .pl3__c { background: var(--c3); animation-delay: 0.2s; } - .pl3__d { background: var(--c4); animation-delay: 0.3s; } - /* Animations */ @keyframes bounce3 { - from, - 5%, - 95%, - to { + from,5%,95%,to { transform: translateY(0) scaleY(1); } 16.7% { transform: translateY(0) scaleY(8); } - 28.3%, - 38.3% { + 28.3%,38.3% { transform: translateY(5.25em) scaleY(1); } 50% { transform: translateY(2.625em) scaleY(4.5); } - 61.7%, - 71.7% { + 61.7%,71.7% { transform: translateY(2.625em) scaleY(1); } 83.3% { transform: translateY(0) scaleY(4.5); } } - /*color picker*/ /* Custom poiners */ .custom-pointers .react-colorful__saturation-pointer { @@ -388,13 +425,375 @@ input[type='color']::-webkit-color-swatch { height: 16px; border-radius: 3px; } - -.custom-pointers .react-colorful__hue-pointer, -.custom-pointers .react-colorful__alpha-pointer { +.custom-pointers .react-colorful__hue-pointer,.custom-pointers .react-colorful__alpha-pointer { width: 16px; border-radius: 3px; } - .react-colorful { width: 400px !important; } +.user-info { + font-size: 1rem; + color: #f3f4f6; +} +.auth-container { + padding: 20px; +} +.auth-form { + display: flex; + flex-direction: column; + gap: 10px; +} +.input-field, .submit-button, .toggle-button { + padding: 8px; + margin: 5px 0; + border-radius: 5px; + border: 1px solid #ccc; +} +.input-field { + font-size: 1rem; +} +.submit-button { + background-color: #4CAF50; + color: white; + cursor: pointer; + font-weight: bold; +} +.submit-button:hover { + background-color: #45a049; +} +.toggle-button { + background: none; + color: #0175d8; + border: none; + cursor: pointer; +} +.toggle-button:hover { + text-decoration: underline; +} +.modal-overlay { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: rgba(0, 0, 0, 0.75); + display: flex; + justify-content: center; + align-items: center; +} +.modal-content { + background: white; + padding: 20px; + border-radius: 10px; + position: relative; + max-width: 500px; + width: 100%; +} + +.header { + background-color: #2c3e50; + color: white; + padding: 10px 20px; + display: flex; + justify-content: space-between; + align-items: center; +} +header h1 { + margin: 0; + font-family: 'Baumans', cursive; +} +header a { + color: #cef0f1; + text-decoration: none; +} +input { + border: none; + outline: none; + background: #34495e; + color: #fff; +} +.submit { + background: #1abc9c; + color: #fff; + text-transform: uppercase; + cursor: pointer; +} +.input-field, .submit-button { + padding: 8px; + margin: 5px 0; + border-radius: 5px; + border: 1px solid #ccc; +} +.submit-button { + background-color: #4CAF50; + color: white; + cursor: pointer; + font-weight: bold; +} +.submit-button:hover { + background-color: #45a049; +} +.toggle-button { + background: none; + color: #0175d8; + border: none; + cursor: pointer; +} +.toggle-button:hover { + text-decoration: underline; +} +.header { + color: white; + padding: 10px 20px; + display: flex; + justify-content: space-between; + align-items: center; +} +header h1 { + margin: 0; + font-family: 'Baumans', cursive; +} +.header div { + display: flex; + align-items: center; +} +header button { + margin-left: 10px; +} +button { + padding: 8px 12px; + border: none; + background-color: #1abc9c; + color: white; + cursor: pointer; + border-radius: 4px; + font-size: 16px; +} +button:hover { + background-color: #16a085; +} +button:focus { + outline: none; +} +input[type="text"], input[type="password"], input[type="email"] { + padding: 8px; + margin-right: 10px; + border-radius: 4px; + border: 1px solid #ccc; + font-size: 16px; + background: #cef0f1; +} +header h1 { + margin: 0; + font-family: 'Baumans', cursive; +} +.header div { + display: flex; + align-items: center; +} +header button { + margin-left: 10px; +} +button { + padding: 8px 12px; + border: none; + background-color: #1abc9c; + color: white; + cursor: pointer; + border-radius: 4px; + font-size: 16px; +} +button:hover { + background-color: #16a085; +} +button:focus { + outline: none; +} +input[type="text"], input[type="password"], input[type="email"] { + padding: 8px; + margin-right: 10px; + border-radius: 4px; + border: 1px solid #ccc; + font-size: 16px; +} +.modal-overlay { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: rgba(0, 0, 0, 0.75); + display: flex; + justify-content: center; + align-items: center; + z-index: 1000; +} +.modal-content { + background: white; + padding: 20px; + border-radius: 10px; + position: relative; + max-width: 500px; + width: 100%; +} + +html, body { + background: #ecf0f1; + font-family: 'Arial', sans-serif; + margin: 0; + padding: 0; + text-align: center; +} +.header { + background-color: #2c3e50; + color: white; + padding: 10px 20px; + display: flex; + justify-content: space-between; + align-items: center; +} +.header h1 { + margin: 0; + font-family: 'Baumans', cursive; +} +.header div { + display: flex; + align-items: center; +} +.header button { + margin-left: 10px; +} +button { + padding: 8px 12px; + border: none; + background-color: #1abc9c; + color: white; + cursor: pointer; + border-radius: 4px; + font-size: 16px; +} +button:hover { + background-color: #16a085; +} +button:focus { + outline: none; +} +input[type="text"], input[type="password"], input[type="email"] { + padding: 8px; + margin-right: 10px; + border-radius: 4px; + border: 1px solid #ccc; + font-size: 16px; + background: #fff; +} +.modal-overlay { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: rgba(0, 0, 0, 0.75); + display: flex; + justify-content: center; + align-items: center; + z-index: 1000; +} +.modal-content { + background: white; + padding: 20px; + border-radius: 10px; + position: relative; + max-width: 500px; + width: 100%; +} + +html, body { + background: #ecf0f1; + font-family: 'Arial', sans-serif; + margin: 0; + padding: 0; + text-align: center; +} +.header { + background-color: #2c3e50; + color: white; + padding: 10px 20px; + display: flex; + justify-content: space-between; + align-items: center; +} +.header h1 { + margin: 0; + font-family: 'Baumans', cursive; +} +.header div { + display: flex; + align-items: center; +} +.header button { + margin-left: 10px; +} +button { + padding: 8px 12px; + border: none; + background-color: #1abc9c; + color: white; + cursor: pointer; + border-radius: 4px; + font-size: 16px; +} +button:hover { + background-color: #16a085; +} +button:focus { + outline: none; +} +input[type="text"], input[type="password"], input[type="email"] { + padding: 8px; + margin-bottom: 10px; + border-radius: 4px; + border: 1px solid #ccc; + font-size: 16px; + width: 100%; + box-sizing: border-box; +} +.modal-overlay { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: rgba(0, 0, 0, 0.75); + display: flex; + justify-content: center; + align-items: center; + z-index: 1000; +} +.modal-content { + background: white; + padding: 20px; + border-radius: 10px; + position: relative; + max-width: 400px; + width: 100%; +} + +.register-form { + flex-direction: column; + align-items: center; +} +.register-form input { + margin-bottom: 10px; +} +.register-form button { + padding: 10px; + border-radius: 4px; + font-size: 16px; + background-color: #1abc9c; + color: white; + cursor: pointer; +} +.register-form button:hover { + background-color: #45a049; +}