Skip to content

Commit

Permalink
Se renombro la carpeta raiz
Browse files Browse the repository at this point in the history
  • Loading branch information
@GioX-16
GioX-16 committed Sep 23, 2024
1 parent 61d8e1e commit 0de0745
Show file tree
Hide file tree
Showing 36 changed files with 1,385 additions and 0 deletions.
3 changes: 3 additions & 0 deletions App_AGMP/.vscode/settings.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"liveServer.settings.port": 5501
}
15 changes: 15 additions & 0 deletions App_AGMP/JavaScripts/index.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
const menuBtn = document.getElementById("menu-btn");
const navLinks = document.getElementById("nav-links");
const menuBtnIcon = menuBtn.querySelector("i");

menuBtn-addEventListener("click", (e) => {
navLinks.classList.toggle("open");

const isOpen = navLinks.classList.contains("open");
menuBtnIcon.setAttribute("class", isOpen ? "ri-close-line":"ri-menu-links")
});

navLinks.addEventListener("click", (e)=>{
navLinks.classList.remove("open");
menuBtnIcon.setAttribute("class", "ri-menu-line");
});
13 changes: 13 additions & 0 deletions App_AGMP/JavaScripts/script.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
const container = document.getElementById('container');
const registerBtn = document.getElementById('register');
const loginBtn = document.getElementById('login');


registerBtn.addEventListener('click', () =>{
container.classList.add("active");
});


loginBtn.addEventListener('click', () =>{
container.classList.remove("active");
});
71 changes: 71 additions & 0 deletions App_AGMP/Register.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">}
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/fonts/remixicon.css"
rel="stylesheet" />
<link rel="stylesheet" href="Styles/Styleregs.css">
<title>Registro</title>
</head>
<body>

<div class="container" id="container">
<div class="form-container Registrarte"> <!-- SING UP -->
<form>
<h1>Crea Una Cuenta</h1>
<div class="social-icons">
<a href="#" class="icon"><i class="fa-brands fa-google-plus-g"></i></a>
<a href="#" class="icon"><i class="fa-brands fa-facebook"></i></a>
<a href="#" class="icon"><i class="fa-brands fa-github"></i></a>
<a href="#" class="icon"><i class="fa-brands fa-x-twitter"></i></a>
<a href="#" class="icon"><i class="fa-brands fa-linkedin"></i></a>
</div>
<span>Introduce Tus Datos para Registrarte</span>
<input type="text" placeholder="Nombre">
<input type="Email" placeholder="Email">
<input type="password" placeholder="Contraseña">
<button>Registrarme</button> <!-- ESTO ES SING UP -->
</form>
</div>
<div class="form-container Login"> <!-- SING IN -->
<form>
<h1>Login</h1>
<div class="social-icons">
<a href="#" class="icon"><i class="fa-brands fa-google-plus-g"></i></a>
<a href="#" class="icon"><i class="fa-brands fa-facebook"></i></a>
<a href="#" class="icon"><i class="fa-brands fa-github"></i></a>
<a href="#" class="icon"><i class="fa-brands fa-x-twitter"></i></a>
<a href="#" class="icon"><i class="fa-brands fa-linkedin"></i></a>
</div>
<span>O Utiliza Tu Email y Contraseña</span>
<input type="Email" placeholder="Email">
<input type="password" placeholder="Contraseña">
<a href="#">Olvide Mi Contraseña</a>
<button>Entrar</button>
</form>
</div>
<div class="toggle-container">
<div class="toggle">
<div class="toggle-panel toggle-left">
<h1>Bienvenid@ a AgroMaps</h1>
<p>Volver al Login</p>
<button class="hidden" id="login">Regresar</button>
</div>
<div class="toggle-panel toggle-right">
<h1>Bienvenid@ </h1>
<p>Te gustaria Registrarte en AgroMaps</p>
<button class="hidden" id="register">Registrarme</button>
</div>
</div>
</div>
</div>


<script src="https://kit.fontawesome.com/001e655f1c.js"
crossorigin="anonymous"></script>

<script src="JavaScripts/script.js"></script>
</body>
</html>
211 changes: 211 additions & 0 deletions App_AGMP/Styles/Styleregs.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,211 @@
@import url("https://fonts.googleapis.com/css2?family=Spartan:wght@100;200;300;400;500;600;700;800;900&display=swap");

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

body{
background-color: #c9d6ff;
background-image: url(/imgs/BackgroundAGRO.jpg);
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
height: 100vh;
}

.container{
background-color: #fff;
border-radius: 30px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.35);
position: relative;
overflow: hidden;
width: 768px;
max-width: 100%;
min-height: 480px;
}

.container p{
font-size: 14px;
line-height: 20px;
letter-spacing: 0.3px;
margin: 20px 0;
}

.container span{
font-size: 12px;
}

.container a{
color: #333;
font-size: 16px;
text-decoration: none;
margin: 15px 0 10px;
}

.container button{
background-color: seagreen;
color: white;
font-size: 12px;
padding: 10px 45px;
border: 1px solid transparent;
border-radius: 8px;
font-weight: 600;
letter-spacing: 0.5px;
text-transform: uppercase;
margin-top: 10px;
cursor: pointer;
}

.container button.hidden{
background-color: transparent;
border-color: #fff;
}

.container form{
background-color: #fff;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 0 40px;
height: 100%;
}

.container input{
background-color: #eee;
border: none;
margin: 8px 0;
padding: 10px 15px;
font-size: 13px;
border-radius: 8px;
width: 100%;
outline: none;
}

.form-container{
position: absolute;
top: 0;
height: 100%;
transition: all 0.6s ease-in-out;
}

.Login{
left: 0;
width: 50%;
z-index: 2;
}

.container.active .Registrarte{
transform: translateX(100%);
}

.Registrarte{
left: 0;
width: 50%;
opacity: 0;
z-index: 1;
}

.container.active .Registrarte{
transform: translateX(100%);
opacity: 1;
animation: move 0.6s;
}

@keyframes move{
0%, 49.99%{
opacity: 0;
z-index: 1;
}
50%, 100%{
opacity: 1;
z-index: 5;
}
}

.social-icons{
margin: 20px 0;
}

.social-icons a{
border: 1px solid #ccc;
border-radius: 20%;
display: inline-flex;
justify-content: center;
align-items: center;
margin: 0 3px;
width: 40px;
height: 40px;
}

/* REGISTER VERSION */

.toggle-container{
position: absolute;
top: 0;
left: 50%;
width: 50%;
height: 100%;
overflow: hidden;
transition: all 0.6s ease-in-out;
border-radius: 150px 0 0 100px;
z-index: 1000;
}

.container.active .toggle-container{
transform: translateX(-100%);
border-radius: 0 150px 100px 100px;
}

.toggle{
background-color: seagreen;
height: 100%;
background: linear-gradient(to right, seagreen, seagreen);
color: #fff;
position: relative;
left: -100%;
height: 100%;
width: 200%;
transform: translateX(0);
transition: all 0.6ss ease-in-out;
}

.container.active .toggle{
transform: translateX(50%);
}

.toggle-panel{
position: absolute;
width: 50%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 0 30px;
text-align: center;
top: 0;
transform: translateX(0);
transition: all 0.6s ease-in-out;
}

.toggle-left{
transform: translateX(-200%);
}

.container.active .toggle-left{
transform: translateX(0);
}

.toggle-right{
right: 0;
transform: translateX(0);
}

.container.active .toggle-right{
transform: translateX(200%);
}
Loading

0 comments on commit 0de0745

Please sign in to comment.