Commit bc14f172bd811513e2ff886b6d81438f843d3132

Authored by Marcelo Puebla
1 parent 2091357cd6

Creado componente formas de pago

src/app/app-routing.module.ts
1 import { NgModule } from '@angular/core'; 1 import { NgModule } from '@angular/core';
2 import { Routes, RouterModule } from '@angular/router'; 2 import { Routes, RouterModule } from '@angular/router';
3 import { SplashScreenComponent } from './modules/splash-screen/splash-screen.component'; 3 import { SplashScreenComponent } from './modules/splash-screen/splash-screen.component';
4 import { AdminComponent } from './modules/admin/admin.component';
5 import { FormasPagoModule } from './modules/formas-pago/formas-pago.module';
4 6
5 const routes: Routes = [ 7 const routes: Routes = [
6 { path: '', component: SplashScreenComponent }, 8 { path: '', component: SplashScreenComponent },
9 {
10 path: '',
11 component: AdminComponent,
12 children: [
13 { path: 'formas-pago', loadChildren: () => FormasPagoModule },
14 ]
15 },
16 { path: '**', redirectTo: '', pathMatch: 'full' },
7 ]; 17 ];
8 18
9 @NgModule({ 19 @NgModule({
10 imports: [RouterModule.forRoot(routes)], 20 imports: [RouterModule.forRoot(routes)],
11 exports: [RouterModule] 21 exports: [RouterModule]
12 }) 22 })
13 export class AppRoutingModule { } 23 export class AppRoutingModule { }
14 24
src/app/app.module.ts
1 import { BrowserModule } from '@angular/platform-browser'; 1 import { BrowserModule } from '@angular/platform-browser';
2 import { NgModule } from '@angular/core'; 2 import { NgModule } from '@angular/core';
3 3
4 import { AppRoutingModule } from './app-routing.module'; 4 import { AppRoutingModule } from './app-routing.module';
5 import { AppComponent } from './app.component'; 5 import { AppComponent } from './app.component';
6 import { SplashScreenComponent } from './modules/splash-screen/splash-screen.component'; 6 import { SplashScreenComponent } from './modules/splash-screen/splash-screen.component';
7 import { SplitPipe } from './pipes/split.pipe'; 7 import { SplitPipe } from './pipes/split.pipe';
8 import { AdminComponent } from './modules/admin/admin.component';
8 9
9 @NgModule({ 10 @NgModule({
10 declarations: [ 11 declarations: [
11 AppComponent, 12 AppComponent,
12 SplashScreenComponent, 13 SplashScreenComponent,
13 SplitPipe 14 SplitPipe,
15 AdminComponent
14 ], 16 ],
15 imports: [ 17 imports: [
16 BrowserModule, 18 BrowserModule,
17 AppRoutingModule 19 AppRoutingModule
18 ], 20 ],
19 providers: [], 21 providers: [],
20 bootstrap: [AppComponent] 22 bootstrap: [AppComponent]
21 }) 23 })
22 export class AppModule { } 24 export class AppModule { }
23 25
src/app/modules/admin/admin.component.html
File was created 1 <router-outlet></router-outlet>
2 <div class="h-8 bg-dark"></div>
src/app/modules/admin/admin.component.scss
src/app/modules/admin/admin.component.spec.ts
File was created 1 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2
3 import { AdminComponent } from './admin.component';
4
5 describe('AdminComponent', () => {
6 let component: AdminComponent;
7 let fixture: ComponentFixture<AdminComponent>;
8
9 beforeEach(async(() => {
10 TestBed.configureTestingModule({
11 declarations: [ AdminComponent ]
12 })
13 .compileComponents();
14 }));
15
16 beforeEach(() => {
17 fixture = TestBed.createComponent(AdminComponent);
18 component = fixture.componentInstance;
19 fixture.detectChanges();
20 });
21
22 it('should create', () => {
23 expect(component).toBeTruthy();
24 });
25 });
26
src/app/modules/admin/admin.component.ts
File was created 1 import { Component, OnInit } from '@angular/core';
2
3 @Component({
4 selector: 'app-admin',
5 templateUrl: './admin.component.html',
6 styleUrls: ['./admin.component.scss']
7 })
8 export class AdminComponent implements OnInit {
9
10 constructor() { }
11
12 ngOnInit() {
13 }
14
15 }
16
src/app/modules/formas-pago/formas-pago-routing.module.ts
File was created 1 import { NgModule } from '@angular/core';
2 import { Routes, RouterModule } from '@angular/router';
3 import { FormasPagoComponent } from './formas-pago.component';
4
5 const routes: Routes = [
6 { path: '', component: FormasPagoComponent },
7 ];
8
9 @NgModule({
10 imports: [RouterModule.forChild(routes)],
11 exports: [RouterModule]
12 })
13 export class FormasPagoRoutingModule { }
14
src/app/modules/formas-pago/formas-pago.component.html
File was created 1 <div class="h-92 bg-white">
2 <div class="row mx-0 h-15">
3 <div class="col-12 px-0 h-80 my-auto">
4 <img class="d-block mx-auto h-100" src="assets/img/logo-spot.svg">
5 </div>
6 </div>
7 </div>
src/app/modules/formas-pago/formas-pago.component.scss
src/app/modules/formas-pago/formas-pago.component.spec.ts
File was created 1 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2
3 import { FormasPagoComponent } from './formas-pago.component';
4
5 describe('FormasPagoComponent', () => {
6 let component: FormasPagoComponent;
7 let fixture: ComponentFixture<FormasPagoComponent>;
8
9 beforeEach(async(() => {
10 TestBed.configureTestingModule({
11 declarations: [ FormasPagoComponent ]
12 })
13 .compileComponents();
14 }));
15
16 beforeEach(() => {
17 fixture = TestBed.createComponent(FormasPagoComponent);
18 component = fixture.componentInstance;
19 fixture.detectChanges();
20 });
21
22 it('should create', () => {
23 expect(component).toBeTruthy();
24 });
25 });
26
src/app/modules/formas-pago/formas-pago.component.ts
File was created 1 import { Component, OnInit } from '@angular/core';
2
3 @Component({
4 selector: 'app-formas-pago',
5 templateUrl: './formas-pago.component.html',
6 styleUrls: ['./formas-pago.component.scss']
7 })
8 export class FormasPagoComponent implements OnInit {
9
10 constructor() { }
11
12 ngOnInit() {
13 }
14
15 }
16
src/app/modules/formas-pago/formas-pago.module.ts
File was created 1 import { NgModule } from '@angular/core';
2 import { CommonModule } from '@angular/common';
3
4 import { FormasPagoRoutingModule } from './formas-pago-routing.module';
5 import { FormasPagoComponent } from './formas-pago.component';
6
7
8 @NgModule({
9 declarations: [FormasPagoComponent],
10 imports: [
11 CommonModule,
12 FormasPagoRoutingModule
13 ]
14 })
15 export class FormasPagoModule { }
16
src/app/modules/splash-screen/splash-screen.component.html
1 <div *ngIf="showSplashScreen" class="vh-100"> 1 <div *ngIf="showSplashScreen" class="vh-100">
2 <div class="row mx-0 h-100"> 2 <div class="row mx-0 h-100">
3 <div class="col-12 px-0 h-30 my-auto"> 3 <div class="col-12 px-0 h-30 my-auto">
4 <img class="d-block mx-auto h-100 focus-in-blur" src="assets/img/logo-spot.svg"> 4 <img class="d-block mx-auto h-100 focus-in-blur" src="assets/img/logo-spot.svg">
5 </div> 5 </div>
6 </div> 6 </div>
7 </div> 7 </div>
8 8
9 <div *ngIf="!showSplashScreen" class="vh-100 bg-primary fade-in"> 9 <div *ngIf="!showSplashScreen" class="vh-100 bg-primary fade-in">
10 <div class="row mx-0 h-100"> 10 <div class="row mx-0 h-100">
11 <div class="col-12 px-0 h-100 my-auto"> 11 <div class="col-12 px-0 h-100 my-auto">
12 <div class="row mx-0 h-15"> 12 <div class="row mx-0 h-15">
13 <div class="col-12 px-0 h-80 my-auto"> 13 <div class="col-12 px-0 h-80 my-auto">
14 <img class="d-block mx-auto h-100 focus-in-blur" src="assets/img/negativo-spot.svg"> 14 <img class="d-block mx-auto h-100" src="assets/img/negativo-spot.svg">
15 </div> 15 </div>
16 </div> 16 </div>
17 <div class="row mx-0 h-75 justify-content-center text-white text-center"> 17 <div class="row mx-0 h-75 justify-content-center text-white text-center">
18 <div class="col-7 h-auto px-0 py-5 mb-5 align-self-end box"> 18 <div class="col-7 h-auto px-0 py-5 mb-5 align-self-end box">
19 <div class="h6 m-0 welcome-text text-info"> 19 <div class="h6 m-0 welcome-text text-info">
20 <span *ngFor="let letter of textWelcome | split textWelcome">{{letter}}</span> 20 <span *ngFor="let letter of textWelcome | split textWelcome">{{letter}}</span>
21 </div> 21 </div>
22 <div class="h1 m-0 como-estas-text"> 22 <div class="h1 m-0 como-estas-text">
23 <span *ngFor="let letter of textComoEstas | split textComoEstas">{{letter}}</span> 23 <span *ngFor="let letter of textComoEstas | split textComoEstas">{{letter}}</span>
24 </div> 24 </div>
25 </div> 25 </div>
26 <div class="col-7 h-auto px-0 py-5 mt-5 align-self-start box2"> 26 <div class="col-7 h-auto px-0 py-5 mt-5 align-self-start box2">
27 <div class="h6 m-0 invitamos-text text-info"> 27 <div class="h6 m-0 invitamos-text text-info">
28 <span *ngFor="let letter of textInvitamos | split textInvitamos">{{letter}}</span> 28 <span *ngFor="let letter of textInvitamos | split textInvitamos">{{letter}}</span>
29 </div> 29 </div>
30 <div class="h1 m-0 tu-pedido-text"> 30 <div class="h1 m-0 tu-pedido-text">
31 <span *ngFor="let letter of textTuPedido | split textTuPedido">{{letter}}</span> 31 <span *ngFor="let letter of textTuPedido | split textTuPedido">{{letter}}</span>
32 </div> 32 </div>
33 </div> 33 </div>
34 </div> 34 </div>
35 <div class="row mx-0 h-10 loop-color cursor-pointer"> 35 <div
36 class="row mx-0 h-10 loop-color cursor-pointer"
37 [routerLink]="['formas-pago']">
36 <div class="col-12 text-center align-self-center px-0"> 38 <div class="col-12 text-center align-self-center px-0">
37 <p class="h6 text-white">TOCA PARA COMENZAR</p> 39 <p class="h6 text-white">TOCA PARA COMENZAR</p>
38 </div> 40 </div>
39 </div> 41 </div>
40 </div> 42 </div>
41 </div> 43 </div>
42 </div> 44 </div>
43 45
1 @import "scss/styles-bootstrap.scss"; 1 @import "scss/styles-bootstrap.scss";
2 @import "scss/height-width.scss"; 2 @import "scss/height-width.scss";
3 @import "scss/animations.scss"; 3 @import "scss/animations.scss";
4 @import "node_modules/bootstrap/scss/_variables.scss"; 4 @import "node_modules/bootstrap/scss/_variables.scss";
5 5
6 @font-face { 6 @font-face {
7 font-family: "Gotham"; 7 font-family: "Gotham";
8 font-style: normal; 8 font-style: normal;
9 font-weight: normal; 9 font-weight: normal;
10 src: url("assets/fonts/gotham-medium.woff") format("woff"); 10 src: url("assets/fonts/gotham-medium.woff") format("woff");
11 } 11 }
12 12
13 html, 13 html,
14 body { 14 body {
15 min-height: 100vh; 15 min-height: 100vh;
16 max-height: 100vh; 16 max-height: 100vh;
17 height: 100vh; 17 height: 100vh;
18 background-color: #fcf2e3; 18 background-color: #fcf2e3;
19 font-family: "Gotham"; 19 font-family: "Gotham";
20 overflow: hidden; 20 overflow: hidden;
21 user-select: none;
21 } 22 }
22 23
23 .cursor-pointer { 24 .cursor-pointer {
24 cursor: pointer; 25 cursor: pointer;
25 } 26 }
26 27
27 p { 28 p {
28 margin: 0 !important; 29 margin: 0 !important;
29 } 30 }
30 31
31 .rounded { 32 .rounded {
32 border-radius: 1.5rem !important; 33 border-radius: 1.5rem !important;
33 } 34 }
34 35