-
+
-
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/src/app/pages/login/login.component.scss b/src/app/pages/login/login.component.scss
index a22805f..8ac01a9 100644
--- a/src/app/pages/login/login.component.scss
+++ b/src/app/pages/login/login.component.scss
@@ -1,270 +1,268 @@
:host {
- display: flex;
- flex-direction: column;
- min-height: 100vh;
- }
-
- /* Header Styles */
- .header {
- background-color: #d3e9f7;
- padding: 1rem 3rem;
- display: flex;
- align-items: center;
- box-shadow: 0 2px 5px rgba(0,0,0,0.1);
- }
-
- .header-content {
- display: flex;
- align-items: center;
- gap: 2rem;
- width: 100%;
- max-width: 1200px;
- margin: 0 auto;
- }
-
- .siss-logo {
- height: 60px;
- }
-
- .sacg-container {
- display: flex;
- flex-direction: column;
- }
-
- .sacg-title {
- display: flex;
- align-items: center;
- font-size: 2.5rem;
- font-weight: bold;
- color: #0a2847;
- position: relative;
- }
-
- .version-badge {
- background-color: #0088cc;
- color: white;
- border-radius: 50%;
- padding: 0.1rem 0.4rem;
- font-size: 0.8rem;
- position: absolute;
- top: 0;
- right: -1.5rem;
- }
-
- .sacg-subtitle {
- font-size: 1.2rem;
- color: #0a2847;
- }
-
- /* Main Content Styles */
- .main-content {
- flex: 1;
- display: flex;
- justify-content: center;
- align-items: center;
- background-color: #f0f0f0;
- background-size: cover;
- background-position: center;
- position: relative;
- }
-
- .main-content::before {
- content: '';
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- background-color: rgba(240, 240, 240, 0.7);
- }
-
- .login-container {
- position: relative;
- z-index: 10;
- }
-
- .login-box {
- width: 360px;
- max-width: 100%;
- }
-
- .login-card {
- background-color: white;
- border-radius: 4px;
- box-shadow: 0 2px 10px rgba(0,0,0,0.1);
- overflow: hidden;
- }
-
- .login-header {
- padding: 1rem;
- text-align: center;
- border-bottom: 1px solid #e0e0e0;
- }
-
- .login-header h2 {
- margin: 0;
- font-size: 1.2rem;
- font-weight: normal;
- color: #666;
- }
-
- .login-card form {
- padding: 1.5rem;
- }
-
- .p-inputgroup-addon {
- background-color: #f0f0f0;
- border-color: #ced4da;
- }
-
- .login-actions {
- display: flex;
- justify-content: flex-end;
- margin-top: 1rem;
- }
-
- .p-button-primary {
- background-color: #0088cc;
- border-color: #0088cc;
- }
-
- .password-recovery {
- padding: 0 1.5rem 1.5rem;
- text-align: left;
- }
-
- .password-recovery a {
- color: #0088cc;
- text-decoration: none;
- font-size: 0.9rem;
- }
-
- .password-recovery a:hover {
- text-decoration: underline;
- }
-
- /* Footer Styles */
- .footer {
- background-color: #0088cc;
- color: white;
- padding: 1rem 2rem;
- }
-
- .footer-content {
- display: flex;
- justify-content: space-between;
- align-items: center;
- max-width: 1200px;
- margin: 0 auto;
- }
-
- .footer-left, .footer-right {
- display: flex;
- align-items: center;
- font-size: 0.8rem;
- }
-
- .footer-left {
- gap: 0.5rem;
- }
-
- .footer-text {
- display: flex;
- flex-direction: column;
- }
-
- .footer-logo {
- height: 40px;
- }
-
- .footer-right {
- flex-direction: column;
- align-items: flex-end;
- }
-
- /* Responsive styles */
- @media screen and (max-width: 768px) {
- .header-content {
- flex-direction: column;
- gap: 1rem;
- }
-
- .footer-content {
- flex-direction: column;
- gap: 1rem;
- }
-
- .footer-right {
- align-items: center;
- }
- }
+ display: flex;
+ flex-direction: column;
+ min-height: 100vh;
+}
- .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 Styles */
+.header {
+ background-color: #d3e9f7;
+ padding: 1rem 3rem;
+ display: flex;
+ align-items: center;
+ box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+}
+
+.header-content {
+ display: flex;
+ align-items: center;
+ gap: 2rem;
+ width: 100%;
+ max-width: 1200px;
+ margin: 0 auto;
+}
+
+.siss-logo {
+ height: 60px;
+}
+
+.sacg-container {
+ display: flex;
+ flex-direction: column;
+}
+
+.sacg-title {
+ display: flex;
+ align-items: center;
+ font-size: 2.5rem;
+ font-weight: bold;
+ color: #0a2847;
+ position: relative;
+}
+
+.version-badge {
+ background-color: #0088cc;
+ color: white;
+ border-radius: 50%;
+ padding: 0.1rem 0.4rem;
+ font-size: 0.8rem;
+ position: absolute;
+ top: 0;
+ right: -1.5rem;
+}
+
+.sacg-subtitle {
+ font-size: 1.2rem;
+ color: #0a2847;
+}
+
+/* Main Content Styles */
+.main-content {
+ flex: 1;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background-color: #f0f0f0;
+ background-size: cover;
+ background-position: center;
+ position: relative;
+}
+
+.main-content::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background-color: rgba(240, 240, 240, 0.7);
+}
+
+.login-container {
+ position: relative;
+ z-index: 10;
+}
+
+.login-box {
+ width: 360px;
+ max-width: 100%;
+}
+
+.login-card {
+ background-color: white;
+ border-radius: 4px;
+ box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+ overflow: hidden;
+}
+
+.login-header {
+ padding: 1rem;
+ text-align: center;
+ border-bottom: 1px solid #e0e0e0;
+}
+
+.login-header h2 {
+ margin: 0;
+ font-size: 1.2rem;
+ font-weight: normal;
+ color: #666;
+}
+
+.login-card form {
+ padding: 1.5rem;
+}
+
+.p-inputgroup-addon {
+ background-color: #f0f0f0;
+ border-color: #ced4da;
+}
+
+.login-actions {
+ display: flex;
+ justify-content: flex-end;
+ margin-top: 1rem;
+}
+
+.p-button-primary {
+ background-color: #0088cc;
+ border-color: #0088cc;
+}
+
+.password-recovery {
+ padding: 0 1.5rem 1.5rem;
+ text-align: left;
+}
+
+.password-recovery a {
+ color: #0088cc;
+ text-decoration: none;
+ font-size: 0.9rem;
+}
+
+.password-recovery a:hover {
+ text-decoration: underline;
+}
+
+/* Responsive styles */
+@media screen and (max-width: 768px) {
+ .header-content {
+ flex-direction: column;
+ gap: 1rem;
}
-
- .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);
- }
-
\ No newline at end of file
+}
+
+.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;
+ overflow: hidden;
+}
+
+.water-drop {
+ position: absolute;
+ height: 45px;
+ width: auto;
+ top: 30%;
+ left: 47%;
+ transform: translateY(-50%);
+ z-index: 2;
+}
+
+.text-drop {
+ color: #fff;
+ position: absolute;
+ width: auto;
+ top: 33%;
+ left: 47.3%;
+ transform: translateY(-50%);
+ z-index: 2;
+}
+
+.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;
+ 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.8rem;
+ margin-bottom: 60px;
+ text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
+ transform: translate(-4%);
+}
+
+.header-image {
+ position: relative;
+ width: 100%;
+ height: 250px;
+ background-image: url('/img/header2.jpg');
+ background-size: cover;
+ background-position: center;
+ background-repeat: no-repeat;
+}
+
+.water-drop-container {
+ position: absolute;
+ top: 30%;
+ left: 49%;
+ transform: translate(-50%, -50%);
+ width: 41px;
+ height: 60px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.water-drop {
+ position: absolute;
+ width: 41px;
+ height: 60px;
+}
+
+.text-drop {
+ position: relative;
+ color: white;
+ top: 20%;
+ font-weight: bold;
+ font-size: 1.2rem;
+ z-index: 2;
+ pointer-events: none;
+}
+
+.header-text {
+ position: absolute;
+ bottom: 20px;
+ left: 20px;
+}
diff --git a/src/app/pages/login/login.component.ts b/src/app/pages/login/login.component.ts
index cb5ab41..49197c4 100644
--- a/src/app/pages/login/login.component.ts
+++ b/src/app/pages/login/login.component.ts
@@ -8,6 +8,7 @@ import { InputTextModule } from 'primeng/inputtext';
import { ButtonModule } from 'primeng/button';
import { PasswordModule } from 'primeng/password';
import { DividerModule } from 'primeng/divider';
+import { FooterComponent } from "../../components/footer/footer.component";
@Component({
selector: 'app-login',
@@ -18,8 +19,9 @@ import { DividerModule } from 'primeng/divider';
InputTextModule,
ButtonModule,
PasswordModule,
- DividerModule
- ],
+ DividerModule,
+ FooterComponent
+],
templateUrl: './login.component.html',
styleUrl: './login.component.scss'
})