diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 06c7342..1b7a5bc 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -1,8 +1,10 @@ import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; +import { SplashScreenComponent } from './modules/splash-screen/splash-screen.component'; - -const routes: Routes = []; +const routes: Routes = [ + { path: '', component: SplashScreenComponent }, +]; @NgModule({ imports: [RouterModule.forRoot(routes)], diff --git a/src/app/app.component.html b/src/app/app.component.html index e69de29..0680b43 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -0,0 +1 @@ + diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 2c3ba29..eb5d328 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -3,10 +3,14 @@ import { NgModule } from '@angular/core'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; +import { SplashScreenComponent } from './modules/splash-screen/splash-screen.component'; +import { SplitPipe } from './pipes/split.pipe'; @NgModule({ declarations: [ - AppComponent + AppComponent, + SplashScreenComponent, + SplitPipe ], imports: [ BrowserModule, diff --git a/src/app/modules/splash-screen/splash-screen.component.html b/src/app/modules/splash-screen/splash-screen.component.html new file mode 100644 index 0000000..5cc8cf2 --- /dev/null +++ b/src/app/modules/splash-screen/splash-screen.component.html @@ -0,0 +1,42 @@ +
+
+
+ +
+
+
+ +
+
+
+
+
+ +
+
+
+
+
+ {{letter}} +
+
+ {{letter}} +
+
+
+
+ {{letter}} +
+
+ {{letter}} +
+
+
+
+
+

TOCA PARA COMENZAR

+
+
+
+
+
diff --git a/src/app/modules/splash-screen/splash-screen.component.scss b/src/app/modules/splash-screen/splash-screen.component.scss new file mode 100644 index 0000000..d50e403 --- /dev/null +++ b/src/app/modules/splash-screen/splash-screen.component.scss @@ -0,0 +1,187 @@ +.box:before { + content: ""; + position: absolute; + top: 0; + left: 0; + width: 0; + height: 0; + background: transparent; + border: 2px solid transparent; + animation: animate 2.5s 1s linear forwards; + -webkit-animation: animate 2.5s 1s linear forwards; +} + +@keyframes animate { + 0% { + width: 0; + height: 0; + border-top-color: white; + border-bottom-color: transparent; + border-left-color: transparent; + border-right-color: transparent; + } + 25% { + width: 100%; + height: 0; + border-top-color: white; + border-top-right-radius: 1.5rem; + border-bottom-color: transparent; + border-left-color: transparent; + border-right-color: white; + } + 50% { + width: 100%; + height: 100%; + border-top-right-radius: 1.5rem; + border-bottom-right-radius: 1.5rem; + border-top-color: white; + border-bottom-color: transparent; + border-left-color: transparent; + border-right-color: white; + } + 100% { + width: 100%; + height: 100%; + border-top-right-radius: 1.5rem; + border-bottom-right-radius: 1.5rem; + border-top-color: white; + border-bottom-color: white; + border-left-color: transparent; + border-right-color: white; + } +} + +.box2:before { + content: ""; + position: absolute; + top: 0; + left: 0; + width: 0; + height: 0; + background: transparent; + border: 2px solid transparent; + animation: animate2 2.5s 2.5s linear forwards; + -webkit-animation: animate2 2.5s 2.5s linear forwards; +} + +@keyframes animate2 { + 0% { + width: 100%; + height: 0; + border-top-color: white; + border-bottom-color: transparent; + border-left-color: transparent; + border-right-color: transparent; + } + 25% { + width: 100%; + height: 0; + border-top-color: white; + border-top-left-radius: 1.5rem; + border-bottom-color: transparent; + border-right-color: transparent; + border-left-color: white; + } + 50% { + width: 100%; + height: 100%; + border-top-left-radius: 1.5rem; + border-bottom-left-radius: 1.5rem; + border-top-color: white; + border-bottom-color: transparent; + border-right-color: transparent; + border-left-color: white; + } + 100% { + width: 100%; + height: 100%; + border-top-left-radius: 1.5rem; + border-bottom-left-radius: 1.5rem; + border-top-color: white; + border-bottom-color: white; + border-right-color: transparent; + border-left-color: white; + } +} + +/* + * animation slide-in-top + */ +.welcome-text span, +.como-estas-text span, +.invitamos-text span, +.tu-pedido-text span { + opacity: 0; + -webkit-animation: slide-in-top 1s forwards; + animation: slide-in-top 1s forwards; + display: inline-block; + white-space: break-spaces; +} + +@-webkit-keyframes slide-in-top { + 0% { + -webkit-transform: translateY(-500px); + transform: translateY(-500px); + opacity: 0; + } + 80% { + -webkit-transform: translateY(10px); + transform: translateY(10px); + opacity: 1; + } + 100% { + -webkit-transform: translateY(0); + transform: translateY(0); + opacity: 1; + } +} + +@keyframes slide-in-top { + 0% { + -webkit-transform: translateY(-500px); + transform: translateY(-500px); + opacity: 0; + } + 80% { + -webkit-transform: translateY(15px); + transform: translateY(15px); + opacity: 1; + } + 100% { + -webkit-transform: translateY(0); + transform: translateY(0); + opacity: 1; + } +} + +@for $i from 1 through 18 { + $delayValue: $i * 0.05s; + .welcome-text span:nth-child(#{$i}) { + -webkit-animation-delay: $delayValue; + animation-delay: $delayValue; + } +} + +@for $i from 1 through 12 { + $delayValue: ($i + 18) * 0.05s; + .como-estas-text span:nth-child(#{$i}) { + -webkit-animation-delay: $delayValue; + animation-delay: $delayValue; + } +} + +@for $i from 1 through 20 { + $delayValue: ($i + 30) * 0.05s; + .invitamos-text span:nth-child(#{$i}) { + -webkit-animation-delay: $delayValue; + animation-delay: $delayValue; + } +} + +@for $i from 1 through 13 { + $delayValue: ($i + 50) * 0.05s; + .tu-pedido-text span:nth-child(#{$i}) { + -webkit-animation-delay: $delayValue; + animation-delay: $delayValue; + } +} diff --git a/src/app/modules/splash-screen/splash-screen.component.spec.ts b/src/app/modules/splash-screen/splash-screen.component.spec.ts new file mode 100644 index 0000000..ca838df --- /dev/null +++ b/src/app/modules/splash-screen/splash-screen.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { SplashScreenComponent } from './splash-screen.component'; + +describe('SplashScreenComponent', () => { + let component: SplashScreenComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ SplashScreenComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(SplashScreenComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/modules/splash-screen/splash-screen.component.ts b/src/app/modules/splash-screen/splash-screen.component.ts new file mode 100644 index 0000000..dd55988 --- /dev/null +++ b/src/app/modules/splash-screen/splash-screen.component.ts @@ -0,0 +1,24 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-splash-screen', + templateUrl: './splash-screen.component.html', + styleUrls: ['./splash-screen.component.scss'] +}) +export class SplashScreenComponent implements OnInit { + timerSplashScreen = 2000; + showSplashScreen = true; + textWelcome = 'BIENVENIDO A SPOT!'; + textComoEstas = '¿cómo estas?'; + textInvitamos = 'TE INVITAMOS A HACER'; + textTuPedido = 'tu pedido acá'; + + constructor() { } + + ngOnInit() { + setTimeout(() => { + this.showSplashScreen = false; + }, this.timerSplashScreen); + } + +} diff --git a/src/app/pipes/split.pipe.spec.ts b/src/app/pipes/split.pipe.spec.ts new file mode 100644 index 0000000..b1e373f --- /dev/null +++ b/src/app/pipes/split.pipe.spec.ts @@ -0,0 +1,8 @@ +import { SplitPipe } from './split.pipe'; + +describe('SplitPipe', () => { + it('create an instance', () => { + const pipe = new SplitPipe(); + expect(pipe).toBeTruthy(); + }); +}); diff --git a/src/app/pipes/split.pipe.ts b/src/app/pipes/split.pipe.ts new file mode 100644 index 0000000..dea7e40 --- /dev/null +++ b/src/app/pipes/split.pipe.ts @@ -0,0 +1,12 @@ +import { Pipe, PipeTransform } from '@angular/core'; + +@Pipe({ + name: 'split' +}) +export class SplitPipe implements PipeTransform { + + transform(value: any, args?: any): any { + return value.split(''); + } + +} diff --git a/src/assets/fonts/gotham-medium.woff b/src/assets/fonts/gotham-medium.woff new file mode 100644 index 0000000000000000000000000000000000000000..3720c980769874bc6e6690d34b963ac75fe2f5f4 GIT binary patch literal 13588 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 literal 0 HcmV?d00001 diff --git a/src/assets/img/LogoSpot2.svg b/src/assets/img/LogoSpot2.svg new file mode 100644 index 0000000..186b636 --- /dev/null +++ b/src/assets/img/LogoSpot2.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + diff --git a/src/assets/img/logo-spot.svg b/src/assets/img/logo-spot.svg new file mode 100644 index 0000000..186b636 --- /dev/null +++ b/src/assets/img/logo-spot.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + diff --git a/src/assets/img/negativo-spot.svg b/src/assets/img/negativo-spot.svg new file mode 100644 index 0000000..870b2ea --- /dev/null +++ b/src/assets/img/negativo-spot.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + diff --git a/src/scss/animations.scss b/src/scss/animations.scss new file mode 100644 index 0000000..2462e0a --- /dev/null +++ b/src/scss/animations.scss @@ -0,0 +1,91 @@ +/* + * animation focus-in-blur + */ +.focus-in-blur { + -webkit-animation: focus-in-blur 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) both; + animation: focus-in-blur 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) both; +} + +@-webkit-keyframes focus-in-blur { + 0% { + -webkit-filter: blur(12px); + filter: blur(12px); + opacity: 0; + } + 100% { + -webkit-filter: blur(0px); + filter: blur(0px); + opacity: 1; + } +} + +@keyframes focus-in-blur { + 0% { + -webkit-filter: blur(12px); + filter: blur(12px); + opacity: 0; + } + 100% { + -webkit-filter: blur(0px); + filter: blur(0px); + opacity: 1; + } +} + +/* + * animation fade-in + */ +.fade-in { + -webkit-animation: fade-in 1.2s cubic-bezier(0.39, 0.575, 0.565, 1) both; + animation: fade-in 1.2s cubic-bezier(0.39, 0.575, 0.565, 1) both; +} + +@-webkit-keyframes fade-in { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } +} + +@keyframes fade-in { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } +} + +/* + * animation fade-in + */ +.loop-color { + -webkit-animation: loop-color 1.2s cubic-bezier(0.39, 0.575, 0.565, 1) infinite both; + animation: loop-color 1.2s cubic-bezier(0.39, 0.575, 0.565, 1) infinite both; +} + +@-webkit-keyframes loop-color { + 0% { + background-color: #f4b223; + } + 50% { + background-color: #ba8b29; + } + 100% { + background-color: #f4b223; + } +} + +@keyframes loop-color { + 0% { + background-color: #f4b223; + } + 50% { + background-color: #ba8b29; + } + 100% { + background-color: #f4b223; + } +} diff --git a/src/scss/height-width.scss b/src/scss/height-width.scss new file mode 100644 index 0000000..97ec918 --- /dev/null +++ b/src/scss/height-width.scss @@ -0,0 +1,6 @@ +@for $i from 1 through 100 { + $heightValue: 1% * $i; + .h-#{$i} { + height: $heightValue !important; + } +} diff --git a/src/scss/styles-bootstrap.scss b/src/scss/styles-bootstrap.scss new file mode 100644 index 0000000..526ed90 --- /dev/null +++ b/src/scss/styles-bootstrap.scss @@ -0,0 +1,15 @@ +@import "node_modules/bootstrap/scss/functions"; +@import "node_modules/bootstrap/scss/variables"; +@import "node_modules/bootstrap/scss/mixins"; + +$primary: #aa006b; +$secondary: #00acd8; +$info: #f4b223; + +$theme-colors: ( + primary: $primary, + secondary: $secondary, + info: $info +); + +@import "node_modules/bootstrap/scss/bootstrap"; diff --git a/src/styles-bootstrap.scss b/src/styles-bootstrap.scss deleted file mode 100644 index a133e57..0000000 --- a/src/styles-bootstrap.scss +++ /dev/null @@ -1,3 +0,0 @@ -@import "../../../node_modules/bootstrap/scss/functions"; -@import "../../../node_modules/bootstrap/scss/variables"; -@import "../../../node_modules/bootstrap/scss/mixins"; diff --git a/src/styles.scss b/src/styles.scss index e69de29..3f6c329 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -0,0 +1,33 @@ +@import "scss/styles-bootstrap.scss"; +@import "scss/height-width.scss"; +@import "scss/animations.scss"; +@import "node_modules/bootstrap/scss/_variables.scss"; + +@font-face { + font-family: "Gotham-Medium"; + font-style: normal; + font-weight: normal; + src: url("assets/fonts/gotham-medium.woff") format("woff"); +} + +html, +body { + min-height: 100vh; + max-height: 100vh; + height: 100vh; + background-color: #fcf2e3; + font-family: "Gotham-Medium"; + overflow: hidden; +} + +.cursor-pointer { + cursor: pointer; +} + +p { + margin: 0 !important; +} + +.rounded { + border-radius: 1.5rem !important; +}