From fb5931c99ff89737806853416d99ac218c552448 Mon Sep 17 00:00:00 2001 From: Lanzinho 15 Date: Sun, 3 Aug 2025 20:40:45 -0300 Subject: [PATCH] codigo atualizado login e registro --- Login-e-Registro.html | 66 ++++++++++ css/Login-e-Registro.css | 256 +++++++++++++++++++++++++++++++++++++++ javascript/script.js | 49 ++++++++ login.html | 31 ----- style.css | 76 ++++++++++++ 5 files changed, 447 insertions(+), 31 deletions(-) create mode 100644 Login-e-Registro.html create mode 100644 css/Login-e-Registro.css create mode 100644 javascript/script.js delete mode 100644 login.html create mode 100644 style.css diff --git a/Login-e-Registro.html b/Login-e-Registro.html new file mode 100644 index 0000000..86d9989 --- /dev/null +++ b/Login-e-Registro.html @@ -0,0 +1,66 @@ + + + + + + Login e Registro + + + + + +
+ + +
+

REGISTRO

+
+
+ + +
+
+ + +
+
+ + +
+ +
+ +
+
+ +
+
+

+ +
+
+ + + + \ No newline at end of file diff --git a/css/Login-e-Registro.css b/css/Login-e-Registro.css new file mode 100644 index 0000000..26bc37f --- /dev/null +++ b/css/Login-e-Registro.css @@ -0,0 +1,256 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: 'Inter', sans-serif; +} + + +body { + background-color: #1d1d1d; + display: flex; + justify-content: center; + align-items: center; + min-height: 100vh; + overflow: hidden; +} + + +.form-wrapper { + position: relative; + width: 350px; + height: 450px; + overflow: hidden; + border-radius: 20px; + box-shadow: 0 0 20px rgba(0,0,0,0.5); + background-color: #0000001e; / +} + + +.login-container, +.register-container { + padding: 40px; + width: 100%; + text-align: center; + position: absolute; + top: 0; + left: 0; + transition: transform 0.6s ease-in-out; +} + + +.login-container.active { + transform: translateX(0%); +} + + +.register-container { + transform: translateX(100%); +} + + +.register-container.active { + transform: translateX(0%); +} + + +.login-container:not(.active) { + transform: translateX(-100%); +} + + +.login-container h2, +.register-container h2 { + color: white; + margin-bottom: 30px; + font-weight: 500; +} + + +.input-box { + position: relative; + margin-bottom: 20px; +} + + +.input-box i { + position: absolute; + top: 50%; + transform: translateY(-50%); + left: 10px; + color: white; + z-index: 2; +} + + +.input-box input { + width: 100%; + padding: 10px 10px 10px 35px; + border: none; + border-radius: 10px; + background: #1f1f1f; + color: white; + box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.8); + transition: all 0.2s ease-in-out; +} + + +.input-box input::placeholder { + color: transparent; + transition: opacity 0.2s ease; +} + + +.input-box input:focus::placeholder { + opacity: 1; + color: #555; +} + + +.input-box label { + position: absolute; + top: 50%; + left: 35px; + transform: translateY(-50%); + color: #aaa; + pointer-events: none; + transition: all 0.2s ease-in-out; + z-index: 2; +} + + +.input-box input:focus + label, +.input-box input:not(:placeholder-shown) + label { + top: -15px; + transform: translateY(-50%) translatex(-60%)scale(0.85); + font-size: 0.9em; + color: #ffffff; + background-color: #1d1d1d; + padding: 0 5px; +} + + +.buttons { + display: flex; + justify-content: space-between; + margin-top: 10px; +} + +.btn { + width: 48%; + padding: 10px; + background-color: #0000cc; + border: none; + border-radius: 8px; + color: white; + cursor: pointer; + transition: background-color 0.3s; +} + +.btn:hover { + background-color: #444; +} + +.forgot { + width: 100%; + margin-top: 10px; +} + + +.register-container form { + margin-top: 20px; +} + +.form-group { + margin-bottom: 20px; + text-align: left; +} + + +.form-group input { + + padding: 12px 10px; + border: none; + border-radius: 5px; + font-size: 16px; + background: #1f1f1f; + color: white; + box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.8); + z-index: 1; +} + +.register-button { + width: 100%; + padding: 15px; + border: none; + border-radius: 5px; + font-size: 18px; + cursor: pointer; + transition: background-color 0.3s ease; + background-color: #0000cc; + color: white; + margin-top: 20px; +} + +.register-button:hover { + background-color: #444; +} + + +#showLoginBtn { + width: 100%; + margin-top: 15px; + background-color: #555; +} + +#showLoginBtn:hover { + background-color: #777; +} + + +.custom-alert-hidden { + display: none; +} + +.custom-alert-visible { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.7); + display: flex; + justify-content: center; + align-items: center; + z-index: 1000; +} + +.custom-alert-content { + background-color: #333; + padding: 30px; + border-radius: 10px; + box-shadow: 0 0 15px rgba(0, 0, 0, 0.5); + text-align: center; + color: white; + max-width: 300px; +} + +.custom-alert-content p { + margin-bottom: 20px; + font-size: 1.1em; +} + +.custom-alert-content button { + background-color: #0000cc; + color: white; + padding: 10px 20px; + border: none; + border-radius: 5px; + cursor: pointer; + font-size: 1em; + transition: background-color 0.3s; +} + +.custom-alert-content button:hover { + background-color: #444; +} \ No newline at end of file diff --git a/javascript/script.js b/javascript/script.js new file mode 100644 index 0000000..94624d2 --- /dev/null +++ b/javascript/script.js @@ -0,0 +1,49 @@ +document.addEventListener('DOMContentLoaded', () => { + const loginContainer = document.querySelector('.login-container'); + const registerContainer = document.querySelector('.register-container'); + const showRegisterBtn = document.getElementById('showRegisterBtn'); + const showLoginBtn = document.getElementById('showLoginBtn'); + + // Função para mostrar o formulário de registro + showRegisterBtn.addEventListener('click', () => { + loginContainer.classList.remove('active'); + registerContainer.classList.add('active'); + }); + + // Função para mostrar o formulário de login + showLoginBtn.addEventListener('click', () => { + registerContainer.classList.remove('active'); + loginContainer.classList.add('active'); + }); + + // Você pode adicionar aqui a lógica de validação dos formulários se quiser + const loginBtn = document.getElementById('loginBtn'); + const registerBtn = document.getElementById('registerBtn'); + + loginBtn.addEventListener('click', (e) => { + // e.preventDefault(); // Descomente para evitar o envio do formulário padrão + const username = document.getElementById('loginUsername').value; + const password = document.getElementById('loginPassword').value; + + if (username === "" || password === "") { + alert("Por favor, preencha todos os campos de login."); + } else { + console.log("Login tentado com:", { username, password }); + // Aqui você adicionaria a lógica de envio para o servidor + } + }); + + registerBtn.addEventListener('click', (e) => { + // e.preventDefault(); // Descomente para evitar o envio do formulário padrão + const username = document.getElementById('registerUsername').value; + const email = document.getElementById('registerEmail').value; + const password = document.getElementById('registerPassword').value; + + if (username === "" || email === "" || password === "") { + alert("Por favor, preencha todos os campos de registro."); + } else { + console.log("Registro tentado com:", { username, email, password }); + // Aqui você adicionaria a lógica de envio para o servidor + } + }); +}); \ No newline at end of file diff --git a/login.html b/login.html deleted file mode 100644 index c97cec8..0000000 --- a/login.html +++ /dev/null @@ -1,31 +0,0 @@ - - - - - - Login - - - -
-

LOGIN

- -
- - -
- -
- - -
- -
- - -
- - -
- - diff --git a/style.css b/style.css new file mode 100644 index 0000000..1fb0e52 --- /dev/null +++ b/style.css @@ -0,0 +1,76 @@ + + +.main-login{ + width: 100vw; + height: 100vh; + background:linear-gradient(130deg, var(--bg-dark) 40%, var(--bg-light) 200%); + display: flex; + justify-content: center; + align-items: center; + + .left-login{ + width: 50vw; + height: 100vh; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + h1 { + color:white; + } + } + .right-login{ + + width: 50vw; + height: 100vh; + display: flex; + justify-content: center; + align-items: center; + } +} + +.card-login{ + + width: 60%; + height: 60%; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + padding: 30px 35px; + background: rgba(113, 113, 116, 0.11); + border-radius: 20px; + box-shadow: 0px 10px 60px #161616cc; + h1 { + color: white; + font-weight: 900; + margin: 0; + + } +} + +.textfield{ +display: flex; +flex-direction: column; +align-items: flex-start; +justify-content: center; + +} + +.textfield > input { + width: 100%; + border: none; + border-radius: 10px; + padding: 15px; + background: rgba(142, 142, 153, 0.496); + color: white; + font-size: 12pt; + box-shadow: 0px 20px 10px #161616; + box-sizing: border-box; +} + +.textfield > label { + color: white; + margin-bottom: 3px; + +} \ No newline at end of file