Scribd
Upload
13 views

Codigo Apache

Uploaded by

jessperez272
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
13 views

Codigo Apache

Uploaded by

jessperez272
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 9

<%--

Document : Login
Created on : 14 may 2024, 19:11:21
Author : JESSI PEREZ
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Login Page</title>
</head>
<body>
<div class="container">
<div class="container-form">
<form class="sign-in" action="MENU_LATERAL.jsp" method="post">
<h2>Iniciar sesión</h2>
<div class="social-networks">
<ion-icon name="logo-facebook"></ion-icon>
<ion-icon name="logo-whatsapp"></ion-icon>
<ion-icon name="logo-twitter"></ion-icon>
<ion-icon name="logo-twitch"></ion-icon>
</div>
<span>Use su correo y contraseña</span>
<div class="container-input">
<ion-icon name="mail-outline"></ion-icon>
<input type="text" placeholder="Email">
</div>
<div class="container-input">
<ion-icon name="lock-closed-outline"></ion-icon>
<input type="password" placeholder="Password">
</div>
<a href="#">¿Olvidaste tu contraseña?</a>
<button class="button">INICIAR SESIÓN</button>
</form>
</div>
<div class="container-form">
<form class="sign-up">
<h2>Registrarse</h2>
<div class="social-networks">
<ion-icon name="logo-facebook"></ion-icon>
<ion-icon name="logo-whatsapp"></ion-icon>
<ion-icon name="mail"></ion-icon>
<ion-icon name="logo-twitch"></ion-icon>
</div>
<span>Use su correo electrónico para registrarse</span>
<div class="container-input">
<ion-icon name="person-outline"></ion-icon>
<input type="text" placeholder="Nombre">
</div>
<div class="container-input">
<ion-icon name="mail-outline"></ion-icon>
<input type="text" placeholder="Email">
</div>
<div class="container-input">
<ion-icon name="lock-closed-outline"></ion-icon>
<input type="password" placeholder="Password">
</div>
<button class="button">REGISTRARSE</button>
</form>
</div>
<div class="container-welcome">
<div class="welcome-sign-up welcome">
<h3>¡Bienvenido!</h3>
<p>Ingrese sus datos personales para usar todas las funciones
del sitio</p>
<button class="button" id="btn-sign-up">Registrarse</button>
</div>
<div class="welcome-sign-in welcome">
<h3>¡Hola!</h3>
<p>Regístrese con sus datos personales para usar todas las
funciones del sitio</p>
<button class="button" id="btn-sign-in">Inicia sesión</button>
</div>
</div>
</div>

<style>
@import url('https://fonts.googleapis.com/css2?
family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Montserrat", sans-serif;
}

body {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #F0F4F3;
}

.container {
width: 800px;
height: 500px;
display: flex;
position: relative;
background-color: white;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 0 10px rgb(0, 0, 0.3);
}

.container-form {
width: 50%;
overflow: hidden;
}

.container-form form {
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
transition: transform 0.5s ease-in;
}

.container-form h2 {
font-size: 30px;
margin-bottom: 20px;
}

.social-networks {
display: flex;
gap: 12px;
margin-bottom: 25px;
}

.social-networks ion-icon {
border: 1px solid #C9CCCB;
border-radius: 6px;
padding: 8px;
cursor: pointer;
}

.container-form span {
font-size: 12px;
margin-bottom: 15px;
}

.container-input {
width: 300px;
height: 40px;
margin-bottom: 10px;
display: flex;
align-items: center;
gap: 8px;
padding: 0 15px;
background-color: #EEEEEE;
}

.container-input input {
border: none;
outline: none;
width: 100%;
height: 100%;
background-color: inherit;
}

.button {
width: 170px;
height: 45px;
font-size: 15px;
border: none;
border-radius: 5px;
cursor: pointer;
margin-top: 10px;
background-color: #3AB397;
color: white;
}
/*estilo de la animacion*/

.sign-up {
transform: translateX(-100%);
}

.container.toggle .sign-in {
transform: translateX(100%);
}

.container.toggle .sign-up {
transform: translateX(0);
}

.container-welcome {
position: absolute;
width: 50%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
transition: transform 0.5s ease-in;
}

.welcome {
text-align: center;
}

#welcome-sign-in {
transform: translateX(100%);
}

.container.toggle .welcome-sign-up {
transform: translateX(-100%);
}

.container.toggle .welcome-sign-in {
transform: translateX(0);
}

.container-welcome{
position: absolute;
width: 50%;
height: 100%;
display: flex;
align-items: center;
transform: translateX(100%);
background-color: #3AB397;
transition: transform 0.5s ease-in-out, border-radius 0.5s ease-in-out;
overflow: hidden;
border-radius: 50% 0 0 50%;
}

.container.toggle .container-welcome{
transform: translateX(0);
border-radius: 0 50% 50% 0;
background-color: #3AA8AD;
}
.container-welcome .welcome{
position: absolute;
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
padding: 0 50px;
color: white;
transition: transform 0.5s ease-in-out;
}

.welcome-sign-in{
transform: translateX(100%);
}

.container-welcome h3{
font-size: 40px;
}

.container-welcome p{
font-size: 14px;
text-align: center;
}

.container-welcome .button{
border: 2px solid white;
}

.container.toggle .welcome-sign-in{
transform: translateX(0);
background-color: transparent;
}

.container.toggle .welcome-sign-up{
transform: translateX(-100%);
}
</style>
<script
src="https://unpkg.com/[email protected]/dist/ionicons.js"></script>
<script>
const container = document.querySelector(".container");
const btnSignIn = document.getElementById("btn-sign-in");
const btnSignUp = document.getElementById("btn-sign-up");

btnSignIn.addEventListener("click", () => {
container.classList.remove("toggle");
});
btnSignUp.addEventListener("click", () => {
container.classList.add("toggle");
});

</script>
</body>
</html>
<%--
Document : MENU_LATERAL
Created on : 16 may 2024, 09:28:47
Author : JESSI PEREZ
--%>

<!DOCTYPE html>
<html lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Menu lateral</title>
<script src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Montserrat Alternates', sans-serif;
}

body {
background: url('IMG/montanas.jpg') no-repeat center fixed;
background-size: cover;
}

.capa {
position: absolute;
width: 100%;
height: 100vh;
background: rgba(0,0,0,0.4);
z-index: -1;
top: 0;
left: 0;
}

/*estilos para el encabezado*/

.container {
width: 100%;
height: 70px;
position: fixed;
top: 0; left: 0;
background: rgba(0,0,0,0);
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 20px;
}

.container .btn-menu {
color: #fff;
font-size: 25px;
cursor: pointer;
}

/*estilo del icono del usuario*/


.container .user-icon {
color: #fff;
font-size: 35px;
cursor: pointer;
}

/*fin de estilos para el encabezado*/

/*estilo para el menu lateral*/


#btn-menu {
display: none;
}

.container-menu {
position: absolute;
background: rgba(0,0,0,0.5);
width: 100%;
height: 100vh;
top: 0;
letter-spacing: 0;
transition: all 500ms ease;
opacity: 0;
visibility: hidden;
}

#btn-menu:checked + .container-menu {
opacity: 1;
visibility: visible;
}

.cont-menu {
width: 100%;
max-width: 250px;
background: #1c1c1c;
height: 100vh;
position: relative;
transition: transform 0.5s ease;
transform: translateX(-100%);
}

/*Menu vuelva a su misma posicion*/


#btn-menu:checked + .container-menu .cont-menu {
transform: translateX(0%);
}

.cont-menu nav {
padding: 50px 0;
}
/*barra del menu*/
.cont-menu nav a {
display: block;
text-decoration: none;
padding: 20px;
color: #c7c7c7;
border-left: 5px solid transparent;
transition: background 0.4s ease, border-left 0.4s ease;
}

.cont-menu nav a:hover {


border-left: 5px solid #c7c7c7;
background: #1f1f1f;
}

.cont-menu label {
position: absolute;
right: 5px;
top: 10px;
color: #fff;
cursor: pointer;
font-size: 18px;
}

/*Fin de menu lateral*/


</style>
</head>
<body>

<header class="header">
<div class="container">
<div class="btn-menu">
<label for="btn-menu" class="btn-menu">&#9776;</label>
</div>
<div class="user-icon">
<ion-icon name="person-circle-outline"></ion-icon>
</div>
</div>
</header>

<div class="capa"></div>

<input type="checkbox" id="btn-menu">


<div class="container-menu">
<div class="cont-menu">
<nav>
<a href="newinicio.jsp">Portafolio</a>
<a href="#">Inicio</a>
<a href="#">Gestion planillas</a>
<a href="#">Gestion de vacaciones</a>
<a href="#">Consultas</a>
<a href="#">Reportes</a>
</nav>
<label for="btn-menu" class="icon-equis">&#10005;</label>
</div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
var btnMenu = document.getElementById('btn-menu');
var containerMenu = document.querySelector('.container-menu');

btnMenu.addEventListener('change', function() {
if (this.checked) {
containerMenu.classList.add('active');
} else {
containerMenu.classList.remove('active');
}
});
});
</script>

</body>
</html>

You might also like