pulled

naopeke · Mar 9, 2024 · 1a89834 · 1a89834
2 parents 29585e7 + 48a5a8a
commit 1a89834
Show file tree

Hide file tree

Showing 101 changed files with 2,692 additions and 233 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -21,7 +21,10 @@
     "@angular/platform-browser-dynamic": "^16.2.0",
     "@angular/router": "^16.2.0",
     "@popperjs/core": "^2.11.8",
+    "angular-popper": "^2.0.1",
     "bootstrap": "^5.3.3",
+    "moment": "^2.30.1",
+    "popper.js": "^1.16.1",
     "rxjs": "~7.8.0",
     "swiper": "^10.3.1",
     "tslib": "^2.6.2",
@@ -40,4 +43,4 @@
     "karma-jasmine-html-reporter": "~2.1.0",
     "typescript": "~5.1.3"
   }
-}
+}
diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
@@ -8,17 +8,21 @@ import { AboutComponent } from './pages/about/about.component';
 import { MisMazosComponent } from './pages/mis-mazos/mis-mazos.component';
 import { CartasComponent } from './pages/cartas/cartas.component';
 import { CalendarioComponent } from './pages/calendario/calendario.component';
+import { LandingPageComponent } from './pages/landing-page/landing-page.component';
+import { ProfileComponent } from './pages/profile/profile.component';
 
 const routes: Routes = [
-  { path: '', component: HomeComponent},
+  { path: '', component: LandingPageComponent},
   { path: 'home', component: HomeComponent },
   { path: 'register', component: RegisterComponent},
   { path: 'mis-mazos', component: MisMazosComponent},
   { path: 'explora', component:ExploraComponent},
   { path: 'evento', component:EventoComponent},
   { path: 'about', component:AboutComponent},
   { path: 'cartas', component: CartasComponent},
-  {path: 'calendario', component: CalendarioComponent}
+  { path: 'calendario', component: CalendarioComponent},
+  { path: 'landing-page', component: LandingPageComponent},
+  { path: 'profile', component: ProfileComponent},
 ];
 
 @NgModule({

diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -3,6 +3,3 @@
 <app-footer></app-footer>
 
 
-
-
-
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -20,14 +20,13 @@ import { MatTableModule } from '@angular/material/table';
 import { MatBadgeModule } from '@angular/material/badge';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
 import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatInputModule } from '@angular/material/input';
 import { MatSelectModule } from '@angular/material/select';
 import { MatDialogModule} from '@angular/material/dialog'; 
 
 //calendario
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatNativeDateModule } from '@angular/material/core';
-
+import { MatInputModule } from '@angular/material/input';
 
 // swiper@8
 // import { SwiperModule } from 'swiper/angular';
@@ -53,6 +52,8 @@ import { ExploraComponent } from './pages/explora/explora.component';
 import { CalendarioComponent } from './pages/calendario/calendario.component';
 import { EventoComponent } from './pages/evento/evento.component';
 import { MazoSelectorModalComponent } from './components/mazo-selector-modal/mazo-selector-modal.component';
+import { ModalProfileComponent } from './components/modal-profile/modal-profile.component';
+import { LandingPageComponent } from './pages/landing-page/landing-page.component';
 
 
 @NgModule({
@@ -63,6 +64,7 @@ import { MazoSelectorModalComponent } from './components/mazo-selector-modal/maz
     CardComponent,
     HomeComponent,
     CardInfoComponent,
+    LandingPageComponent,
     LoggedoutCardComponent,
     LoggedinCardComponent,
     RegisterComponent,
@@ -74,7 +76,8 @@ import { MazoSelectorModalComponent } from './components/mazo-selector-modal/maz
     ExploraComponent,
     CalendarioComponent,
     EventoComponent,
-    MazoSelectorModalComponent,
+    ModalProfileComponent,
+    MazoSelectorModalComponent
   ],
 
   imports: [
@@ -106,6 +109,7 @@ import { MazoSelectorModalComponent } from './components/mazo-selector-modal/maz
 
     //swiper@8
     // SwiperModule
+
   ],
   providers: [],
   bootstrap: [AppComponent],

diff --git a/src/app/components/card-info/card-info.component.spec.ts b/src/app/components/card-info/card-info.component.spec.ts
diff --git a/src/app/components/header/header.component.css b/src/app/components/header/header.component.css
@@ -5,40 +5,32 @@ header{
     width: 100%;
     display: flex;
     flex-direction: column;
-
+    padding-top: 10px;
 }
 /* Estilos de img y boton */
-#headerSuper{
+
+img{
+    width: 500px;
+}
+#img_header{
     width: 100%;
-    margin-top: 20px;
     display: flex;
+    align-items: center;
+    justify-content: center;
 }
-
-#btnIniciarSesion{
+.button_lateral{
+    position: absolute;
+    margin: 20px 10px;
+    right: 0;
+    width: 150px;
     border: var(--amarillo) solid 2px;
     background-color: rgba(0, 0, 0, 0);
     border-radius: var(--borde-boton);
-    height: 50px;
-    width: 100px;
+    padding: 10px;
     color: var(--amarillo);
-    margin: 20px 10px;
-}
-#imgHeader{
-    width: 90%; 
-}
-#btnHeader{
-    width: 10%;
 }
-
+  
 /* Estilos de menu */
-#iconosHeader{
-    width: 100%;
-    display: flex;
-    justify-content: space-evenly;
-}
-.icono{
-    width: 50px;
-}
 #pAmarillo{
     color: var(--amarillo);
 }
@@ -51,9 +43,95 @@ header{
 #pRojo{
     color: var(--rojo);
 }
-#pVerde{
+.pVerde{
     color: var(--verde);
 }
-.icono:active {
-    width: 70px;
+
+/* CSS ANIMACION */
+
+.icono {
+    width: 50px;
+    height: 50px;
+    transition: all 0.3s ease;
+}
+.linkActive{
+    opacity: 0.7;
+}
+.linkActive:active {
+    opacity: 1;
+}
+.linkActive:hover {
+    opacity: 1;
+}
+header nav {
+	z-index:1000;
+	max-width: 1000px;
+	width:100%;
+	margin:20px auto;
+}
+header nav ul {
+	list-style:none;
+    display: block;
+    width: 100%;
+    padding: 0;
+}
+header nav ul li {
+	display:inline-block;
+	position: relative;
+    width: 20%;
+}
+header nav ul li a {
+	display:block;
+	text-decoration:none;
+}
+header nav ul li:hover .children {
+	display:block;
+}
+header nav ul li .children {
+	display: none;
+	background:#000000;
+	position: absolute;
+    left: 20px;
+	width: 150px;
+	z-index:1000;
+}
+header nav ul li .children li {
+	display:block;
+	overflow: hidden;
+    padding: 10px;
+    width: 100%;
+	border-bottom: 1px solid rgba(255,255,255,.5);
+}
+header nav ul li .children li a {
+	display: block;
+}
+
+/*Estilos modal usuario*/
+.boton_secundario{
+    height: 50px;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    border-top: var(--amarillo) 2px solid;
+}
+
+/* new */
+.dropdown {
+    position: absolute;
+    width: 150px;
+    right: 15px;
+}
+.dropdown-child {
+    min-width: 150px;
+    margin-top: 65px;
+}
+.dropdown-child span {
+    display: flex;
+    align-items: center;
+    height: 50px;
+    color: var(--amarillo);
+    cursor: pointer;
+}
+.dropdown-child span:hover {
+    background-color: rgba(132, 133, 133, 0.096);
 }
diff --git a/src/app/components/header/header.component.html b/src/app/components/header/header.component.html
@@ -1,35 +1,53 @@
 <header>
-    <div id="headerSuper">
-        <div id="imgHeader"><img src="../../../assets/images/Logo.png" alt="MagyDeck"></div>
-        <div id="btnHeader"><button id="btnIniciarSesion">Inicia sesión</button></div>
-    </div>
-    <div id="iconosHeader">
-        <!-- <div *ngIf="!User.logueado"> -->
-        <div>
-            <img class="icono" routerLink="about" src="../../../assets/images/header/Llamita_marron.png" alt="Magic Llanuras">
-            <p id="pAmarillo">About</p>
-        </div>
-        <div>
-        <!-- <div *ngIf="!User.logueado"> -->
-            <img class="icono" routerLink="cartas" src="../../../assets/images/header/Llamita_azul.png" alt="Magic Isla">
-            <p id="pAzul">Cartas</p>
-        </div>
-        <!-- <div *ngIf="User.logueado"> -->
-        <div>
-            <img class="icono" routerLink="mis-mazos"  src="../../../assets/images/header/Llamita_morada.png" alt="Magic Pantano">
-            <p id="pMorado">Mis mazos</p>
-        </div>
-        <!-- <div *ngIf="User.logueado"> -->
-        <div>
-            <img class="icono" routerLink="explora" src="../../../assets/images/header/Llamita_roja.png" alt="Magic Montaña">
-            <p id="pRojo">Explora</p>
-        </div>
-        <!-- <div *ngIf="User.logueado"> -->
-        <div>
-
-            <img class="icono" routerLink="evento" src="../../../assets/images/header/Llamita_verde.png" alt="Magic Bosque">
-            <p id="pVerde">Eventos</p>
+    <div id="img_header" routerLink="landing-page"><img src="../../../assets/images/Logo.png" alt="MagyDeck"></div>
+
+    <div class="dropdown">
+        <button class="button_lateral" routerLink="register"  *ngIf="idBotonActivo === 'btnIniciarSesion'">Iniciar sesión</button>
+        <button class="button_lateral dropdown-toggle" (click)="modal_visible = !modal_visible" *ngIf="idBotonActivo === 'btnUsuario'">{{login1.user.name}}</button>
+        <div *ngIf="modal_visible" class="dropdown-child">
+          <span routerLink="profile">&nbsp;&nbsp;Perfil</span>
+          <span (click)="loggout()">&nbsp;&nbsp;Cerrar sesión</span>
         </div>
     </div>
+
+    <nav>
+        <ul>
+            <li >
+                <a routerLink="about" class="linkActive">
+                    <img class="icono" src="../../../assets/images/header/Llamita_marron.png" alt="Magic Llanuras">
+                    <p id="pAmarillo">About</p>
+                </a>
+            </li>
+            <li >
+                <a routerLink="cartas" class="linkActive">
+                    <img class="icono" src="../../../assets/images/header/Llamita_azul.png" alt="Magic Isla">
+                    <p id="pAzul">Cartas</p>
+                </a>
+            </li>
+            <li *ngIf="idBotonActivo === 'btnUsuario'">
+                <a routerLink="mis-mazos" class="linkActive">
+                    <img class="icono" src="../../../assets/images/header/Llamita_morada.png" alt="Magic Pantano">
+                    <p id="pMorado">Mis mazos</p>
+                </a>
+            </li>
+            <li *ngIf="idBotonActivo === 'btnUsuario'">
+                <a routerLink="explora" class="linkActive">
+                    <img class="icono" src="../../../assets/images/header/Llamita_roja.png" alt="Magic Montaña">
+                <p id="pRojo">Explora</p>
+                </a>
+            </li>
+            <li class="submenu" *ngIf="idBotonActivo === 'btnUsuario'">
+                <a class="linkActive">
+                    <img class="icono" src="../../../assets/images/header/Llamita_verde.png" alt="Magic Bosque">
+                    <p class="pVerde">Eventos</p>
+                </a>
+                <ul class="children">
+                    <li><a href="#" routerLink="evento"><p class="pVerde">Próximos eventos</p></a></li>
+                    <li><a href="#" routerLink="calendario"><p class="pVerde">Calendario</p></a></li>
+                </ul>
+            </li>
+        </ul>
+    </nav>
 
-</header>
+</header>
+