lovin v1
Cambios visuales en el login
This commit is contained in:
JuanSanhueza
parent
96ed727ffc
commit
8ab593e713
@ -99,5 +99,8 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"cli": {
|
||||
"analytics": false
|
||||
}
|
||||
}
|
||||
|
||||
9
package-lock.json
generated
9
package-lock.json
generated
@ -15,6 +15,7 @@
|
||||
"@angular/platform-browser": "^19.2.0",
|
||||
"@angular/platform-browser-dynamic": "^19.2.0",
|
||||
"@angular/router": "^19.2.0",
|
||||
"@fortawesome/fontawesome-free": "^6.7.2",
|
||||
"@primeng/themes": "^19.1.0",
|
||||
"animate.css": "^4.1.1",
|
||||
"primeflex": "^4.0.0",
|
||||
@ -2824,6 +2825,14 @@
|
||||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"node_modules/@fortawesome/fontawesome-free": {
|
||||
"version": "6.7.2",
|
||||
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-6.7.2.tgz",
|
||||
"integrity": "sha512-JUOtgFW6k9u4Y+xeIaEiLr3+cjoUPiAuLXoyKOJSia6Duzb7pq+A76P9ZdPDoAoxHdHzq6gE9/jKBGXlZT8FbA==",
|
||||
"engines": {
|
||||
"node": ">=6"
|
||||
}
|
||||
},
|
||||
"node_modules/@inquirer/checkbox": {
|
||||
"version": "4.1.5",
|
||||
"resolved": "https://registry.npmjs.org/@inquirer/checkbox/-/checkbox-4.1.5.tgz",
|
||||
|
||||
@ -17,6 +17,7 @@
|
||||
"@angular/platform-browser": "^19.2.0",
|
||||
"@angular/platform-browser-dynamic": "^19.2.0",
|
||||
"@angular/router": "^19.2.0",
|
||||
"@fortawesome/fontawesome-free": "^6.7.2",
|
||||
"@primeng/themes": "^19.1.0",
|
||||
"animate.css": "^4.1.1",
|
||||
"primeflex": "^4.0.0",
|
||||
|
||||
@ -1,7 +1,8 @@
|
||||
<!-- Header container -->
|
||||
<div class="header">
|
||||
<!-- <div class="header">
|
||||
<div class="header-content">
|
||||
<img src="assets/img/siss-logo.png" alt="SISS Logo" class="siss-logo">
|
||||
<img src="img/header2.jpg" alt="SISS Logo" class="siss-logo">
|
||||
<img src="img/gota.png" alt="gota" class="water-drop">
|
||||
<div class="sacg-container">
|
||||
<div class="sacg-title">
|
||||
<span>SACG</span>
|
||||
@ -10,7 +11,34 @@
|
||||
<div class="sacg-subtitle">Sistema Administrador de Cronogramas</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<!-- <div class="header-container">
|
||||
<div class="header-image" style="background-image: url('img/header2.jpg'); height: 190px;" >
|
||||
<div class="text-drop text-center" style="background-image: url('img/gota.png'); height: 60px;width: 41px;">1.0</div>
|
||||
<div class="sacg-container">
|
||||
<div class="sacg-title">
|
||||
<span>SACG</span>
|
||||
<div class="version-badge">1.0</div>
|
||||
</div>
|
||||
<div class="sacg-subtitle">Sistema Administrador de Cronogramas</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<div class="header-container">
|
||||
<div class="header-image" style="background-image: url('img/header2.jpg'); height: 190px; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative;">
|
||||
|
||||
<div class="text-drop" style="background-image: url('img/gota.png'); height: 60px; width: 41px; display: flex; align-items: center; justify-content: center; color: white; top: 33%;left: 47.7%;">1.0</div>
|
||||
|
||||
<div class="sacg-container" style="text-align: center;z-index: 2;">
|
||||
<div class="main-title">SACG</div>
|
||||
<div class="sub-title">Sistema Administrador de Cronogramas</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- MAIN CONTENT -->
|
||||
<main class="main-content">
|
||||
@ -22,6 +50,55 @@
|
||||
</div>
|
||||
|
||||
<form (ngSubmit)="onLogin()">
|
||||
|
||||
<!-- Email -->
|
||||
<div class="p-input-icon-left mb-3">
|
||||
<!-- <i class="pi pi-envelope"></i> -->
|
||||
<input
|
||||
type="email"
|
||||
pInputText
|
||||
[(ngModel)]="email"
|
||||
name="email"
|
||||
placeholder="Email"
|
||||
class="w-full"
|
||||
style="background-color: white;color: black"
|
||||
/>
|
||||
<span class="icon" style="background-color: white;color: black"><i class="fas fa-search" style="color: black"></i></span>
|
||||
<!-- <span class="p-inputgroup-addon bg-red-600 text-900">@</span>
|
||||
<span class="p-inputgroup-addon">
|
||||
<i class="pi pi-envelope"></i>
|
||||
</span> -->
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Password -->
|
||||
<div class="p-input-icon-left mb-4">
|
||||
<i class="pi pi-lock"></i>
|
||||
<input
|
||||
type="password"
|
||||
pInputText
|
||||
[(ngModel)]="password"
|
||||
name="password"
|
||||
placeholder="Password"
|
||||
class="w-full "
|
||||
style="background-color: white;color: black"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Botón -->
|
||||
<div class="login-actions">
|
||||
<button
|
||||
pButton
|
||||
type="submit"
|
||||
label="Autenticar"
|
||||
class="p-button-primary w-full"
|
||||
style="color: white">
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
|
||||
<!-- <form (ngSubmit)="onLogin()">
|
||||
<div class="p-inputgroup mb-3">
|
||||
<input type="email" pInputText [(ngModel)]="email" name="email" placeholder="Email" class="w-full">
|
||||
<span class="p-inputgroup-addon bg-red-600 text-white">@</span>
|
||||
@ -40,15 +117,18 @@
|
||||
<div class="login-actions">
|
||||
<button pButton type="submit" label="Autenticar" class="p-button-primary"></button>
|
||||
</div>
|
||||
</form>
|
||||
</form> -->
|
||||
|
||||
<!-- Recuperar contraseña -->
|
||||
<div class="password-recovery">
|
||||
<a href="#">Recuperar Contraseña</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</main>
|
||||
|
||||
|
||||
<!-- FOOTER -->
|
||||
<footer class="footer">
|
||||
|
||||
@ -198,3 +198,73 @@
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.login-page-custom {
|
||||
-ms-flex-align: center !important;
|
||||
align-items: center !important;
|
||||
background-color: #e9ecef !important;
|
||||
display: -ms-flexbox !important;
|
||||
display: flex !important;
|
||||
-ms-flex-direction: column !important;
|
||||
flex-direction: column !important;
|
||||
height: calc(100vh - 250px) !important;
|
||||
-ms-flex-pack: center !important;
|
||||
justify-content: center !important;
|
||||
}
|
||||
|
||||
.header-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 190px; /* Ajusta según la altura de tu imagen */
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.water-drop {
|
||||
position: absolute;
|
||||
height: 45px; /* Ajusta el tamaño de la gota */
|
||||
width: auto;
|
||||
top: 30%; /* Posiciona verticalmente */
|
||||
left: 47%; /* Posiciona horizontalmente */
|
||||
transform: translateY(-50%); /* Centrado vertical preciso */
|
||||
z-index: 2; /* Asegura que esté sobre la imagen de fondo */
|
||||
}
|
||||
.text-drop {
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
width: auto;
|
||||
top: 33%; /* Posiciona verticalmente */
|
||||
left: 47.3%; /* Posiciona horizontalmente */
|
||||
transform: translateY(-50%); /* Centrado vertical preciso */
|
||||
z-index: 2; /* Asegura que esté sobre la imagen de fondo */
|
||||
}
|
||||
.header-text {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #002147; /* Ajusta el color según tu imagen */
|
||||
text-align: center;
|
||||
padding: 0px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.main-title {
|
||||
margin-top: 0px;
|
||||
margin-right: 250px;
|
||||
font-size: 4rem;
|
||||
font-weight: bold;
|
||||
margin-bottom: 10px;
|
||||
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.sub-title {
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: 6 0px;
|
||||
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user