codigo atualizado login e registro
This commit is contained in:
66
Login-e-Registro.html
Normal file
66
Login-e-Registro.html
Normal file
@@ -0,0 +1,66 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="pt-br">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||
<title>Login e Registro</title>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
|
||||
<link rel="stylesheet" href="css/Login-e-Registro.css"/>
|
||||
<link rel="stylesheet" href="css/base.css"/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="form-wrapper">
|
||||
<div class="login-container active">
|
||||
<h2>LOGIN</h2>
|
||||
|
||||
<div class="input-box">
|
||||
<i class="fas fa-user"></i>
|
||||
<input type="text" id="loginUsername" placeholder=" " />
|
||||
<label for="loginUsername">Usuário</label>
|
||||
</div>
|
||||
|
||||
<div class="input-box">
|
||||
<i class="fas fa-lock"></i>
|
||||
<input type="password" id="loginPassword" placeholder=" " />
|
||||
<label for="loginPassword">Senha</label>
|
||||
</div>
|
||||
|
||||
<div class="buttons">
|
||||
<button class="btn" id="loginBtn">Login</button>
|
||||
<button class="btn" id="showRegisterBtn">Registrar</button>
|
||||
</div>
|
||||
|
||||
<button class="btn forgot">Esqueceu sua Senha?</button>
|
||||
</div>
|
||||
|
||||
<div class="register-container">
|
||||
<h2>REGISTRO</h2>
|
||||
<form>
|
||||
<div class="form-group input-box">
|
||||
<input type="text" id="registerUsername" name="username" placeholder=" ">
|
||||
<label for="registerUsername">Usuário</label>
|
||||
</div>
|
||||
<div class="form-group input-box">
|
||||
<input type="email" id="registerEmail" name="email" placeholder=" ">
|
||||
<label for="registerEmail">Email</label>
|
||||
</div>
|
||||
<div class="form-group input-box">
|
||||
<input type="password" id="registerPassword" name="password" placeholder=" ">
|
||||
<label for="registerPassword">Senha</label>
|
||||
</div>
|
||||
<button type="submit" class="register-button" id="registerBtn">Registrar</button>
|
||||
</form>
|
||||
<button class="btn" id="showLoginBtn">Voltar para Login</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="custom-alert" class="custom-alert-hidden">
|
||||
<div class="custom-alert-content">
|
||||
<p id="custom-alert-message"></p>
|
||||
<button id="custom-alert-ok-btn">OK</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="javascript/script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
256
css/Login-e-Registro.css
Normal file
256
css/Login-e-Registro.css
Normal file
@@ -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;
|
||||
}
|
||||
49
javascript/script.js
Normal file
49
javascript/script.js
Normal file
@@ -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
|
||||
}
|
||||
});
|
||||
});
|
||||
31
login.html
31
login.html
@@ -1,31 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="pt-br">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||
<title>Login</title>
|
||||
<link rel="stylesheet" href="/biblioteca-de-contos/css/LoginStyle.css"/>
|
||||
<link rel="stylesheet" href="/biblioteca-de-contos/css/base.css"/>
|
||||
<body>
|
||||
<div class="login-container">
|
||||
<h2>LOGIN</h2>
|
||||
|
||||
<div class="input-box">
|
||||
<i class="fas fa-user"></i>
|
||||
<input type="text" placeholder="Usuário" />
|
||||
</div>
|
||||
|
||||
<div class="input-box">
|
||||
<i class="fas fa-lock"></i>
|
||||
<input type="password" placeholder="Senha" />
|
||||
</div>
|
||||
|
||||
<div class="buttons">
|
||||
<button class="btn">Login</button>
|
||||
<button class="btn">Registrar</button>
|
||||
</div>
|
||||
|
||||
<button class="btn forgot">Esqueceu sua Senha?</button>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
76
style.css
Normal file
76
style.css
Normal file
@@ -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;
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user