Scribd
Upload
16 views

Codigo Apache

Uploaded by

jessperez272
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
16 views

Codigo Apache

Uploaded by

jessperez272
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
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