Commit dce5c66891d26e340af95bdd65a2d42ea44425d9
1 parent
b1eeb0932c
Exists in
develop
Fixes en iconos y agregada pantalla 2
Showing
19 changed files
with
185 additions
and
44 deletions
Show diff stats
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'; | 4 | import { AdminComponent } from './modules/admin/admin.component'; |
| 5 | import { FormasPagoModule } from './modules/formas-pago/formas-pago.module'; | 5 | import { FormasPagoModule } from './modules/formas-pago/formas-pago.module'; |
| 6 | import { OpcionPedidoModule } from './modules/opcion-pedido/opcion-pedido.module'; | ||
| 6 | 7 | ||
| 7 | const routes: Routes = [ | 8 | const routes: Routes = [ |
| 8 | { path: '', component: SplashScreenComponent }, | 9 | { path: '', component: SplashScreenComponent }, |
| 9 | { | 10 | { |
| 10 | path: '', | 11 | path: '', |
| 11 | component: AdminComponent, | 12 | component: AdminComponent, |
| 12 | children: [ | 13 | children: [ |
| 13 | { path: 'formas-pago', loadChildren: () => FormasPagoModule }, | 14 | { path: 'formas-pago', loadChildren: () => FormasPagoModule }, |
| 15 | { path: 'opcion-pedido', loadChildren: () => OpcionPedidoModule }, | ||
| 14 | ] | 16 | ] |
| 15 | }, | 17 | }, |
| 16 | { path: '**', redirectTo: '', pathMatch: 'full' }, | 18 | { path: '**', redirectTo: '', pathMatch: 'full' }, |
| 17 | ]; | 19 | ]; |
| 18 | 20 | ||
| 19 | @NgModule({ | 21 | @NgModule({ |
| 20 | imports: [RouterModule.forRoot(routes)], | 22 | imports: [RouterModule.forRoot(routes)], |
| 21 | exports: [RouterModule] | 23 | exports: [RouterModule] |
| 22 | }) | 24 | }) |
| 23 | export class AppRoutingModule { } | 25 | export class AppRoutingModule { } |
| 24 | 26 |
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 | |||
| 4 | import { AppRoutingModule } from './app-routing.module'; | 3 | import { AppRoutingModule } from './app-routing.module'; |
| 5 | import { AppComponent } from './app.component'; | 4 | import { AppComponent } from './app.component'; |
| 6 | import { SplashScreenComponent } from './modules/splash-screen/splash-screen.component'; | 5 | import { SplashScreenComponent } from './modules/splash-screen/splash-screen.component'; |
| 7 | import { SplitPipe } from './pipes/split.pipe'; | 6 | import { SplitPipe } from './pipes/split.pipe'; |
| 8 | import { AdminComponent } from './modules/admin/admin.component'; | 7 | import { AdminComponent } from './modules/admin/admin.component'; |
| 9 | import { FooterComponent } from './modules/footer/footer.component'; | 8 | import { FooterComponent } from './modules/footer/footer.component'; |
| 10 | 9 | ||
| 11 | @NgModule({ | 10 | @NgModule({ |
| 12 | declarations: [ | 11 | declarations: [ |
| 13 | AppComponent, | 12 | AppComponent, |
| 14 | SplashScreenComponent, | 13 | SplashScreenComponent, |
| 15 | SplitPipe, | 14 | SplitPipe, |
| 16 | AdminComponent, | 15 | AdminComponent, |
| 17 | FooterComponent | 16 | FooterComponent |
| 18 | ], | 17 | ], |
| 19 | imports: [ | 18 | imports: [ |
| 20 | BrowserModule, | 19 | BrowserModule, |
| 21 | AppRoutingModule | 20 | AppRoutingModule |
| 22 | ], | 21 | ], |
| 23 | providers: [], | 22 | providers: [], |
| 24 | bootstrap: [AppComponent] | 23 | bootstrap: [AppComponent] |
| 25 | }) | 24 | }) |
| 26 | export class AppModule { } | 25 | export class AppModule { } |
| 27 | 26 |
src/app/modules/footer/footer.component.html
| 1 | <div class="row mx-0 h-100 justify-content-around bg-white"> | 1 | <div class="row mx-0 h-100 justify-content-around bg-white"> |
| 2 | <div class="col-auto align-self-center px-0 bg-white"> | 2 | <div class="col-auto align-self-center px-0 bg-white"> |
| 3 | <div class="btn-effect row mx-0 bg-light rounded-left"> | 3 | <div class="btn-effect row mx-0 bg-light rounded-left"> |
| 4 | <div class="col-auto align-self-center text-primary">ESTAMOS PARA AYUDARTE</div> | 4 | <div class="col-auto align-self-center text-primary">ESTAMOS PARA AYUDARTE</div> |
| 5 | <div class="col-auto p-0 bg-primary rounded-right"> | 5 | <div class="col-auto p-0 bg-primary rounded-right"> |
| 6 | <img class="p-2 img-button-accesibilidad" src="assets/img/iconos-accesibilidad.svg"> | 6 | <img class="p-2 img-accesibilidad" src="assets/img/iconos-accesibilidad.svg"> |
| 7 | </div> | 7 | </div> |
| 8 | </div> | 8 | </div> |
| 9 | </div> | 9 | </div> |
| 10 | <div class="btn-effect col-auto align-self-center px-0 bg-white"> | 10 | <div |
| 11 | class="btn-effect col-auto align-self-center px-0 bg-white" | ||
| 12 | (click)="goBack()"> | ||
| 11 | <div class="row mx-0 bg-light rounded-left"> | 13 | <div class="row mx-0 bg-light rounded-left"> |
| 12 | <div class="col-auto align-self-center text-primary">VOLVER</div> | 14 | <div class="col-auto align-self-center text-primary">VOLVER</div> |
| 13 | <div class="col-auto p-0 bg-primary rounded-right"> | 15 | <div class="col-auto p-0 bg-primary rounded-right"> |
| 14 | <img class="p-2 img-button-volver" src="assets/img/icono-volver.svg"> | 16 | <img class="p-2 img-volver" src="assets/img/icono-volver.svg"> |
| 15 | </div> | 17 | </div> |
| 16 | </div> | 18 | </div> |
| 17 | </div> | 19 | </div> |
| 18 | </div> | 20 | </div> |
| 19 | 21 |
src/app/modules/footer/footer.component.scss
| 1 | .img-button-accesibilidad { | ||
| 2 | width: 60px; | ||
| 3 | } | ||
| 4 | |||
| 5 | .img-button-volver { | ||
| 6 | width: 40px; | ||
| 7 | } | ||
| 8 |
src/app/modules/footer/footer.component.ts
| 1 | import { Component, OnInit } from '@angular/core'; | 1 | import { Component, OnInit } from "@angular/core"; |
| 2 | import { Location } from "@angular/common"; | ||
| 2 | 3 | ||
| 3 | @Component({ | 4 | @Component({ |
| 4 | selector: 'app-footer', | 5 | selector: "app-footer", |
| 5 | templateUrl: './footer.component.html', | 6 | templateUrl: "./footer.component.html", |
| 6 | styleUrls: ['./footer.component.scss'] | 7 | styleUrls: ["./footer.component.scss"] |
| 7 | }) | 8 | }) |
| 8 | export class FooterComponent implements OnInit { | 9 | export class FooterComponent implements OnInit { |
| 10 | constructor(private location: Location) {} | ||
| 9 | 11 | ||
| 10 | constructor() { } | 12 | ngOnInit() {} |
| 11 | 13 | ||
| 12 | ngOnInit() { | 14 | goBack() { |
| 15 | this.location.back(); | ||
| 13 | } | 16 | } |
| 14 | |||
| 15 | } | 17 | } |
src/app/modules/formas-pago/formas-pago-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 { FormasPagoComponent } from './formas-pago.component'; | 3 | import { FormasPagoComponent } from "./formas-pago.component"; |
| 4 | 4 | ||
| 5 | const routes: Routes = [ | 5 | const routes: Routes = [{ path: "", component: FormasPagoComponent }]; |
| 6 | { path: '', component: FormasPagoComponent }, | ||
| 7 | ]; | ||
| 8 | 6 | ||
| 9 | @NgModule({ | 7 | @NgModule({ |
| 10 | imports: [RouterModule.forChild(routes)], | 8 | imports: [RouterModule.forChild(routes)], |
| 11 | exports: [RouterModule] | 9 | exports: [RouterModule] |
| 12 | }) | 10 | }) |
| 13 | export class FormasPagoRoutingModule { } | 11 | export class FormasPagoRoutingModule {} |
| 14 | 12 |
src/app/modules/formas-pago/formas-pago.component.html
| 1 | <div class="h-92 bg-white"> | 1 | <div class="h-92 bg-white"> |
| 2 | <div class="row mx-0 h-15"> | 2 | <div class="row mx-0 h-15"> |
| 3 | <div class="col-12 px-0 h-80 my-auto"> | 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"> | 4 | <img class="d-block mx-auto h-100" src="assets/img/logo-spot.svg"> |
| 5 | </div> | 5 | </div> |
| 6 | </div> | 6 | </div> |
| 7 | <div class="h-85"> | 7 | <div class="h-85"> |
| 8 | <div class="row h-50 mx-0 justify-content-center text-center"> | 8 | <div class="row h-50 mx-0 justify-content-center text-center"> |
| 9 | <div class="col-7 pt-5 pb-3 h-auto align-self-center border border-secondary rounded"> | 9 | <div class="col-7 pt-5 pb-3 h-auto align-self-center border border-secondary rounded"> |
| 10 | <img class="img-in-top px-4 bg-white" src="assets/img/icono-tarjetas.svg"> | 10 | <img class="img-in-top px-4 bg-white" src="assets/img/icono-tarjetas.svg"> |
| 11 | <p class="h6 m-0">ESTA TERMINAL OPERA CON</p> | 11 | <p class="h6 m-0">ESTA TERMINAL OPERA CON</p> |
| 12 | <p class="h2 mb-3 text-secondary"> | 12 | <p class="h2 mb-3 text-secondary"> |
| 13 | tarjetas y | 13 | tarjetas y |
| 14 | <img class="w-15" src="assets/img/icono-mercado-pago.svg"> | 14 | <img class="w-15" src="assets/img/icono-mercado-pago.svg"> |
| 15 | </p> | 15 | </p> |
| 16 | <div class="d-inline-block py-1 btn-effect bg-secondary badge-pill text-white">CONTINUAR</div> | 16 | <div |
| 17 | class="d-inline-block py-1 btn-effect bg-secondary badge-pill text-white" | ||
| 18 | [routerLink]="['/opcion-pedido']"> | ||
| 19 | CONTINUAR | ||
| 20 | </div> | ||
| 17 | </div> | 21 | </div> |
| 18 | </div> | 22 | </div> |
| 19 | <div class="row h-50 mx-0 justify-content-center text-center"> | 23 | <div class="row h-50 mx-0 justify-content-center text-center"> |
| 20 | <div class="col-7 p-5 h-auto align-self-start border border-secondary rounded"> | 24 | <div class="col-7 p-5 h-auto align-self-start border border-secondary rounded"> |
| 21 | <img class="img-in-top px-4 bg-white" src="assets/img/icono-efectivo.svg"> | 25 | <img class="img-in-top px-4 bg-white" src="assets/img/icono-efectivo.svg"> |
| 22 | <p class="h6 m-0">SI PREFERIS PAGAR EN EFECTIVO</p> | 26 | <p class="h6 m-0">SI PREFERIS PAGAR EN EFECTIVO</p> |
| 23 | <p class="h2 m-0 text-primary">te esperamos en la caja</p> | 27 | <p class="h2 m-0 text-primary">te esperamos en la caja</p> |
| 24 | </div> | 28 | </div> |
| 25 | </div> | 29 | </div> |
| 26 | </div> | 30 | </div> |
| 27 | </div> | 31 | </div> |
| 28 | 32 |
src/app/modules/formas-pago/formas-pago.component.scss
| 1 | .img-in-top { | ||
| 2 | position: absolute; | ||
| 3 | top: -35px; | ||
| 4 | left: 50%; | ||
| 5 | height: 70px; | ||
| 6 | -webkit-transform: translateX(-50%); | ||
| 7 | transform: translateX(-50%); | ||
| 8 | } | ||
| 9 |
src/app/modules/formas-pago/formas-pago.component.ts
| 1 | import { Component, OnInit } from '@angular/core'; | 1 | import { Component, OnInit } from "@angular/core"; |
| 2 | 2 | ||
| 3 | @Component({ | 3 | @Component({ |
| 4 | selector: 'app-formas-pago', | 4 | selector: "app-formas-pago", |
| 5 | templateUrl: './formas-pago.component.html', | 5 | templateUrl: "./formas-pago.component.html", |
| 6 | styleUrls: ['./formas-pago.component.scss'] | 6 | styleUrls: ["./formas-pago.component.scss"] |
| 7 | }) | 7 | }) |
| 8 | export class FormasPagoComponent implements OnInit { | 8 | export class FormasPagoComponent implements OnInit { |
| 9 | constructor() {} | ||
| 9 | 10 | ||
| 10 | constructor() { } | 11 | ngOnInit() {} |
| 11 | |||
| 12 | ngOnInit() { | ||
| 13 | } | ||
| 14 | |||
| 15 | } | 12 | } |
src/app/modules/opcion-pedido/opcion-pedido-routing.module.ts
| File was created | 1 | import { NgModule } from "@angular/core"; | |
| 2 | import { Routes, RouterModule } from "@angular/router"; | ||
| 3 | import { OpcionPedidoComponent } from './opcion-pedido.component'; | ||
| 4 | |||
| 5 | const routes: Routes = [{ path: "", component: OpcionPedidoComponent }]; | ||
| 6 | |||
| 7 | @NgModule({ | ||
| 8 | imports: [RouterModule.forChild(routes)], | ||
| 9 | exports: [RouterModule] | ||
| 10 | }) | ||
| 11 | export class OpcionPedidoRoutingModule {} | ||
| 12 |
src/app/modules/opcion-pedido/opcion-pedido.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 class="h-85"> | ||
| 8 | <div class="row h-25 mx-0 justify-content-center text-center"> | ||
| 9 | <div class="col-12 px-0 h-auto align-self-center"> | ||
| 10 | <p class="h6 mb-5 text-center">TU PEDIDO ES PARA:</p> | ||
| 11 | </div> | ||
| 12 | </div> | ||
| 13 | <div class="row h-15 justify-content-center mx-0"> | ||
| 14 | <div class="col-auto px-0 h-auto align-self-start"> | ||
| 15 | <div | ||
| 16 | class="btn-effect col-auto align-self-center px-0 bg-white" | ||
| 17 | (click)="goBack()"> | ||
| 18 | <div class="row mx-0 bg-primary badge-pill"> | ||
| 19 | <div class="col-auto p-0"> | ||
| 20 | <img class="p-1 img-plato" src="assets/img/icono-plato.svg"> | ||
| 21 | </div> | ||
| 22 | <div class="col-auto align-self-center text-white">comer acรก</div> | ||
| 23 | <div class="col-auto align-self-center p-0"> | ||
| 24 | <img class="p-1 img-ir" src="assets/img/ir.svg"> | ||
| 25 | </div> | ||
| 26 | </div> | ||
| 27 | </div> | ||
| 28 | </div> | ||
| 29 | </div> | ||
| 30 | <div class="row h-15 justify-content-center mx-0"> | ||
| 31 | <div class="col-auto px-0 h-auto align-self-start"> | ||
| 32 | <div | ||
| 33 | class="btn-effect col-auto align-self-center px-0 bg-white" | ||
| 34 | (click)="goBack()"> | ||
| 35 | <div class="row mx-0 bg-primary badge-pill"> | ||
| 36 | <div class="col-auto p-0"> | ||
| 37 | <img class="p-1 img-plato" src="assets/img/icono-take-away.svg"> | ||
| 38 | </div> | ||
| 39 | <div class="col-auto align-self-center text-white">para llevar</div> | ||
| 40 | <div class="col-auto align-self-center p-0"> | ||
| 41 | <img class="p-1 img-ir" src="assets/img/ir.svg"> | ||
| 42 | </div> | ||
| 43 | </div> | ||
| 44 | </div> | ||
| 45 | </div> | ||
| 46 | </div> | ||
| 47 | </div> | ||
| 48 | </div> | ||
| 49 |
src/app/modules/opcion-pedido/opcion-pedido.component.scss
src/app/modules/opcion-pedido/opcion-pedido.component.spec.ts
| File was created | 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; | |
| 2 | |||
| 3 | import { OpcionPedidoComponent } from './opcion-pedido.component'; | ||
| 4 | |||
| 5 | describe('OpcionPedidoComponent', () => { | ||
| 6 | let component: OpcionPedidoComponent; | ||
| 7 | let fixture: ComponentFixture<OpcionPedidoComponent>; | ||
| 8 | |||
| 9 | beforeEach(async(() => { | ||
| 10 | TestBed.configureTestingModule({ | ||
| 11 | declarations: [ OpcionPedidoComponent ] | ||
| 12 | }) | ||
| 13 | .compileComponents(); | ||
| 14 | })); | ||
| 15 | |||
| 16 | beforeEach(() => { | ||
| 17 | fixture = TestBed.createComponent(OpcionPedidoComponent); | ||
| 18 | component = fixture.componentInstance; | ||
| 19 | fixture.detectChanges(); | ||
| 20 | }); | ||
| 21 | |||
| 22 | it('should create', () => { | ||
| 23 | expect(component).toBeTruthy(); | ||
| 24 | }); | ||
| 25 | }); | ||
| 26 |
src/app/modules/opcion-pedido/opcion-pedido.component.ts
| File was created | 1 | import { Component, OnInit } from '@angular/core'; | |
| 2 | |||
| 3 | @Component({ | ||
| 4 | selector: 'app-opcion-pedido', | ||
| 5 | templateUrl: './opcion-pedido.component.html', | ||
| 6 | styleUrls: ['./opcion-pedido.component.scss'] | ||
| 7 | }) | ||
| 8 | export class OpcionPedidoComponent implements OnInit { | ||
| 9 | |||
| 10 | constructor() { } | ||
| 11 | |||
| 12 | ngOnInit() { | ||
| 13 | } | ||
| 14 | |||
| 15 | } | ||
| 16 |
src/app/modules/opcion-pedido/opcion-pedido.module.ts
| File was created | 1 | import { NgModule } from "@angular/core"; | |
| 2 | import { CommonModule } from "@angular/common"; | ||
| 3 | import { OpcionPedidoRoutingModule } from "./opcion-pedido-routing.module"; | ||
| 4 | import { OpcionPedidoComponent } from "./opcion-pedido.component"; | ||
| 5 | |||
| 6 | @NgModule({ | ||
| 7 | declarations: [OpcionPedidoComponent], | ||
| 8 | imports: [CommonModule, OpcionPedidoRoutingModule] | ||
| 9 | }) | ||
| 10 | export class OpcionPedidoModule {} | ||
| 11 |
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" 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 | 35 | <div |
| 36 | class="row mx-0 h-10 loop-color cursor-pointer" | 36 | class="row mx-0 h-10 loop-color cursor-pointer" |
| 37 | [routerLink]="['formas-pago']"> | 37 | [routerLink]="['/formas-pago']"> |
| 38 | <div class="col-12 text-center align-self-center px-0"> | 38 | <div class="col-12 text-center align-self-center px-0"> |
| 39 | <p class="h6 text-white">TOCA PARA COMENZAR</p> | 39 | <p class="h6 text-white">TOCA PARA COMENZAR</p> |
| 40 | </div> | 40 | </div> |
| 41 | </div> | 41 | </div> |
| 42 | </div> | 42 | </div> |
| 43 | </div> | 43 | </div> |
| 44 | </div> | 44 | </div> |
| 45 | 45 |
src/assets/img/ir.svg
| File was created | 1 | <?xml version="1.0" encoding="UTF-8"?> | |
| 2 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> | ||
| 3 | <!-- Creator: CorelDRAW X7 --> | ||
| 4 | <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="19.8306mm" height="19.8306mm" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" | ||
| 5 | viewBox="0 0 9241 9241" | ||
| 6 | xmlns:xlink="http://www.w3.org/1999/xlink"> | ||
| 7 | <defs> | ||
| 8 | <style type="text/css"> | ||
| 9 | <![CDATA[ | ||
| 10 | .fil0 {fill:white;fill-rule:nonzero} | ||
| 11 | ]]> | ||
| 12 | </style> | ||
| 13 | </defs> | ||
| 14 | <g id="Capa_x0020_1"> | ||
| 15 | <metadata id="CorelCorpID_0Corel-Layer"/> | ||
| 16 | <path class="fil0" d="M4621 0c1275,0 2431,517 3267,1353 836,837 1353,1992 1353,3268 0,1275 -517,2431 -1353,3267 -836,836 -1992,1353 -3267,1353 -1276,0 -2431,-517 -3268,-1353 -836,-836 -1353,-1992 -1353,-3267 0,-1276 517,-2431 1353,-3268 837,-836 1992,-1353 3268,-1353zm2988 1632c-765,-764 -1821,-1237 -2988,-1237 -1167,0 -2224,473 -2989,1237 -764,765 -1237,1822 -1237,2989 0,1167 473,2223 1237,2988 765,765 1822,1238 2989,1238 1167,0 2223,-473 2988,-1238 765,-765 1238,-1821 1238,-2988 0,-1167 -473,-2224 -1238,-2989zm-3997 564l1944 2425 -1944 2424 -279 -279 1662 -2145 -1662 -2146 279 -279z"/> | ||
| 17 | </g> | ||
| 18 | </svg> | ||
| 19 |
src/scss/icons.scss
| File was created | 1 | .img-ir { | |
| 2 | width: 30px; | ||
| 3 | } | ||
| 4 | |||
| 5 | .img-plato { | ||
| 6 | width: 50px; | ||
| 7 | } | ||
| 8 | |||
| 9 | .img-accesibilidad { | ||
| 10 | width: 60px; | ||
| 11 | } | ||
| 12 | |||
| 13 | .img-volver { | ||
| 14 | width: 40px; | ||
| 15 | } | ||
| 16 |
src/styles.scss
| 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 "scss/icons.scss"; | ||
| 4 | @import "node_modules/bootstrap/scss/_variables.scss"; | 5 | @import "node_modules/bootstrap/scss/_variables.scss"; |
| 5 | 6 | ||
| 6 | @font-face { | 7 | @font-face { |
| 7 | font-family: "Gotham"; | 8 | font-family: "Gotham"; |
| 8 | font-style: normal; | 9 | font-style: normal; |
| 9 | font-weight: normal; | 10 | font-weight: normal; |
| 10 | src: url("assets/fonts/gotham-medium.woff") format("woff"); | 11 | src: url("assets/fonts/gotham-medium.woff") format("woff"); |
| 11 | } | 12 | } |
| 12 | 13 | ||
| 13 | html, | 14 | html, |
| 14 | body { | 15 | body { |
| 15 | min-height: 100vh; | 16 | min-height: 100vh; |
| 16 | max-height: 100vh; | 17 | max-height: 100vh; |
| 17 | height: 100vh; | 18 | height: 100vh; |
| 18 | background-color: #fcf2e3; | 19 | background-color: #fcf2e3; |
| 19 | font-family: "Gotham"; | 20 | font-family: "Gotham"; |
| 20 | overflow: hidden; | 21 | overflow: hidden; |
| 21 | user-select: none; | 22 | user-select: none; |
| 22 | } | 23 | } |
| 23 | 24 | ||
| 24 | .btn-effect { | 25 | .btn-effect { |
| 25 | transition: all 0.3s; | 26 | transition: all 0.3s; |
| 26 | &:hover { | 27 | &:hover { |
| 27 | cursor: pointer; | 28 | cursor: pointer; |
| 28 | opacity: 0.8; | 29 | opacity: 0.8; |
| 29 | } | 30 | } |
| 30 | &:active { | 31 | &:active { |
| 31 | transform: scale(1.02); | 32 | transform: scale(1.02); |
| 32 | } | 33 | } |
| 33 | } | 34 | } |
| 34 | 35 | ||
| 35 | .cursor-pointer { | 36 | .cursor-pointer { |
| 36 | cursor: pointer; | 37 | cursor: pointer; |
| 37 | } | 38 | } |
| 38 | 39 | ||
| 39 | p { | 40 | p { |
| 40 | margin: 0 !important; | 41 | margin: 0 !important; |
| 41 | } | 42 | } |
| 42 | 43 | ||
| 43 | .rounded { | 44 | .rounded { |
| 44 | border-radius: 1.5rem !important; | 45 | border-radius: 1.5rem !important; |
| 45 | } | 46 | } |
| 46 | 47 | ||
| 47 | .rounded-sm { | 48 | .rounded-sm { |
| 48 | border-radius: 0.5rem !important; | 49 | border-radius: 0.5rem !important; |
| 49 | } | 50 | } |
| 51 | |||
| 52 | .img-in-top { | ||
| 53 | position: absolute; | ||
| 54 | top: -35px; | ||
| 55 | left: 50%; | ||
| 56 | height: 70px; | ||
| 57 | -webkit-transform: translateX(-50%); | ||
| 58 | transform: translateX(-50%); | ||
| 59 | } | ||
| 50 | 60 |