diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index be8028916e01188a797b53e04e7ce9d66efde32f..5961dc3e4943843c23a0ee36c170986c3f6547ba 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -35,6 +35,10 @@ const routes: Routes = [ path: 'signup', component: SignupComponent }, + { + path: 'maps/:canton', + component: MapsComponent + }, { path: '', component: GettingStartedComponent diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 6c6fcd774efdcb59cfb8fc2dace773c87661dbad..2b8a1808b96103a17c5d33ffb5cfca6f0dd82a56 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -57,6 +57,7 @@ import { AgmCoreModule, GoogleMapsAPIWrapper } from '@agm/core'; import { GeocodeService } from './services/geocode.service'; import { ResetpasswordComponent } from './resetpassword/resetpassword.component'; import { ThankyouComponent } from './thankyou/thankyou.component'; +import { ClickOutsideDirective } from './directives/click-outside.directive'; @NgModule({ @@ -72,6 +73,7 @@ import { ThankyouComponent } from './thankyou/thankyou.component'; NavButtonComponent, LoginComponent, SignupComponent, + ClickOutsideDirective, ResetpasswordComponent, ThankyouComponent ], diff --git a/src/app/directives/click-outside.directive.spec.ts b/src/app/directives/click-outside.directive.spec.ts new file mode 100644 index 0000000000000000000000000000000000000000..a78541f4a8dfb455169fe74857de32ae311e1ebb --- /dev/null +++ b/src/app/directives/click-outside.directive.spec.ts @@ -0,0 +1,12 @@ +import { ClickOutsideDirective } from './click-outside.directive'; + +describe('ClickOutsideDirective', () => { + it('should create an instance', () => { + let elRefMock = { + nativeElement: document.createElement('div') //Mock + }; + console.log("spec"); + const directive = new ClickOutsideDirective(elRefMock); + expect(directive).toBeTruthy(); + }); +}); diff --git a/src/app/directives/click-outside.directive.ts b/src/app/directives/click-outside.directive.ts new file mode 100644 index 0000000000000000000000000000000000000000..4946e19f7c0d6ccb261666f7b59daeb90097dd04 --- /dev/null +++ b/src/app/directives/click-outside.directive.ts @@ -0,0 +1,31 @@ +import { Directive, Input, Output, EventEmitter, ElementRef, HostListener, OnInit, OnDestroy } from '@angular/core'; +import { Subject, Subscription } from 'rxjs'; + +@Directive({ + selector: '[appClickOutside]', +}) +export class ClickOutsideDirective implements OnInit, OnDestroy { + @Output() clickOutside: EventEmitter = new EventEmitter(false); + + private clicksOutside = new Subject(); + private subscription: Subscription; + + constructor(private elementRef: ElementRef) { } + + ngOnInit() { + this.subscription = this.clicksOutside + .subscribe((e: boolean) => this.clickOutside.emit(e)); + } + + ngOnDestroy() { + this.subscription.unsubscribe(); + } + + @HostListener('document:click', ['$event.target']) + public onListenerTriggered(target: ElementRef) { + const clickedInside = this.elementRef.nativeElement.contains(target); + if(!clickedInside){ + this.clicksOutside.next(!clickedInside); + } + } +} diff --git a/src/app/getting-started/getting-started.component.css b/src/app/getting-started/getting-started.component.css index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..f5aae283418b089796c84fbcbe26aeedb3f0b315 100644 --- a/src/app/getting-started/getting-started.component.css +++ b/src/app/getting-started/getting-started.component.css @@ -0,0 +1,347 @@ +#background{ + position: relative; + width: calc(100%-20rem); + height: 100vh; + background: #8C93D8; + padding: 0 6%; + display: inline-flex; + overflow: hidden; +} + +.overflow{ + position: absolute; + right: 0%; + top: 0; + width: 40%; + height: 110vh; + overflow: hidden; + pointer-events: none; +} + +.overflow img{ + position: absolute; + width: 140%; + height: 140%; + margin-right: -100%; + margin-top: -60%; +} + +.flexbox{ + position: relative; + display: flex; +} + +#title{ + position: relative; + width: 55%; + float: left; + display: flex; + flex-direction: column; + align-items: center; +} + +#title > h1{ + position: relative; + + font-family: 'Nova Round', cursive; + font-style: normal; + font-weight: normal; + margin: 0; + font-size: 122px; + align-items: center; + text-align: center; + font-feature-settings: 'kern' off; + + color: #FF9848; + + text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), 0px 4px 4px rgba(0, 0, 0, 0.25); +} + +#title > h2{ + position: relative; + + font-family: 'Nova Round', cursive; + font-style: normal; + font-weight: normal; + font-size: 52px; + margin: 1% 0; + align-items: center; + text-align: center; + + color: #FF9848; + + text-shadow: 1px 2px 1px rgba(0, 0, 0, 0.4); +} + +#title > .line1{ + width: 100%; + border: 3px solid #999FDE; +} + +#title > p{ + position: relative; + + font-family: 'Montserrat', sans-serif; + font-style: normal; + font-weight: normal; + font-size: 24px; + margin: 3% 0; + line-height: 29px; + align-items: center; + text-align: center; + + color: #2E3192; +} + +.emergency{ + position: relative; + + padding: 2%; + margin: 5% 0; + + border: 4px solid #FF9848; + box-sizing: border-box; + border-radius: 28.9474px; + + font-family: 'Montserrat', sans-serif; + font-style: normal; + font-weight: normal; + font-size: 24px; + line-height: 28px; + align-items: center; + text-align: center; + + color: #FFFAE7; +} + +span{ + color: #FF9848; +} + +#inputbox{ + position: relative; + width: 85%; + + justify-self: center; + display: flex; + flex-direction: column; + align-items: center; + background: #FFFFFF; + box-shadow: 0px 3px 10px rgba(255, 152, 72, 0.28); + border-radius: 31px; +} + +#inputbox > h2{ + position: relative; + width: 90%; + padding-top: 1%; + + font-family: 'Montserrat', sans-serif; + font-style: normal; + font-weight: normal; + font-size: 36px; + line-height: 44px; + justify-self: center; + + color: #2E3192; +} + +#inputbox > .line2{ + position: relative; + height: 0px; + width: 95%; + justify-self: center; + text-align: center; + border: 1px solid #BEBEBE; +} + +#optionbox{ + width: 80%; + height: 100%; + display: flex; + flex-direction: column; +} + +.selbox{ + border: 2px solid #FC5C14; + box-sizing: border-box; + border-radius: 30px; + justify-items: center; + justify-content: center; + display: flex; + align-items: center; + margin: 2% 0; + transition-duration: 0.4s; +} + +.selbox:hover{ + background: #FF9848; + color: #FFFFFF; + cursor: pointer; + +} + +.selbox:hover > p{ + color: #FFFFFF; +} + +.langboxes{ + position: relative; + display: flex; + justify-content: space-evenly; +} + +.langboxes > .selbox{ + position: relative; + width: 6vw; + height: 4vw; +} + +.selbox > p{ + position: relative; + margin-bottom: 0; + font-family: 'Montserrat', sans-serif; + font-style: normal; + font-weight: normal; + font-size: 24px; + text-align: center; + + color: #FC5C14; +} + +.cantonbox{ + height: 4vw; +} + +.age{ + position: relative; + display: flex; + align-items: flex-start; + justify-content: space-evenly; +} + +.age > .selbox{ + position: relative; + width: 30%; + height: 4vw; +} + +.submitbox{ + position: relative; + display: flex; + justify-content: space-evenly; +} + +.submit{ + border: 2px solid #8C93D8; +} + +.submit > p{ + color: #2E3192;} + +.submitbox > .selbox{ + position: relative; + width: 13vw; + height: 4vw; +} + +.submitbox .selbox:hover{ + background: #2E3192; + color: #FFFFFF; +} + +.submitbox .selbox:hover > p{ + color: #FFFFFF; +} + +.selected{ + background: #FF9848; +} + +.selected > p{ + color: #FFFFFF; +} + + + + +/*auto-suggest form*/ + + +.filter-wrapper, +.keyword-wrapper { + display: flex; + justify-content: center; +} +.filter-wrapper { + min-height: 100%; + flex-flow: column wrap; + position: relative; +} +.keyword-wrapper { + width: 100%; + position: relative; +} +#keyword { + border: 1px solid #ccc; + box-sizing: border-box; + border-radius: 30px; + padding: 10px; + font-family: 'Montserrat', sans-serif; + font-style: normal; + font-weight: normal; + font-size: 24px; + text-align: center; + width: 50%; + outline: none; + transition: border 0.5s ease-in-out +} +#keyword:focus { + border-color : rgba(81, 203, 238, 1);; +} + +.filter-select { + width: 50%; + margin-top: 1%; + font-family: 'Montserrat', sans-serif; + font-style: normal; + font-weight: normal; + font-size: 24px; + text-align: center; + font-size: 1.1em; + color: rgb(105, 105, 105); + border: 1px solid #ccc; + box-sizing: border-box; + border-radius: 50; + + position: absolute; + z-index: 99; + left: 25%; + top: calc(50% + 25px); + max-height: 400%; + overflow-y: auto; + background: #fff; + padding-inline-start: 0px; + } + + + .filter-select-list:hover .tags { + color: #fff; + } + .filter-select-list { + cursor: pointer; + padding: 10px 10px; + } + .artist-name { + display: inline-block; + position: absolute; + } + .filter-select-list:hover { + background: #C0C0C0; + color: #fff + } + .list-highlight, + .list-highlight:hover { + background: rgb(55, 55, 55); + color: #fff + } \ No newline at end of file diff --git a/src/app/getting-started/getting-started.component.html b/src/app/getting-started/getting-started.component.html index 842470aacb97e85d7f12b80e7fbbb57f763df8e7..8ec9ab9c8193d5384e6192f6c72cd1912691f6f1 100644 --- a/src/app/getting-started/getting-started.component.html +++ b/src/app/getting-started/getting-started.component.html @@ -1 +1,50 @@ -

getting-started works!

+
+
+
+

YANA.help

+

You Are Not Alone

+
+

Welcome to the safe place ! Here you can find help and useful information. Come and join the community !

+
Are you in an emergency ? Call 147 or find help near you
+
+
+

Find help

+
+
+
+
+

{{ language }}

+
+
+
+
+
+ +
+
    +
  • +

    {{result}}

    +
+
+
+
+
+

I am a child

+
+
+

I am an adult

+
+
+
+
+

Get Started

+
+
+
+
+
+
+ YANA tree +
+
+ diff --git a/src/app/getting-started/getting-started.component.ts b/src/app/getting-started/getting-started.component.ts index 91d9ed4095040022342ebb9591b872437f81179a..617ecfc44cfb09f5e56a105ff69170d09a762741 100644 --- a/src/app/getting-started/getting-started.component.ts +++ b/src/app/getting-started/getting-started.component.ts @@ -1,4 +1,8 @@ import { Component, OnInit } from '@angular/core'; +import { TranslateService } from '@ngx-translate/core'; +import { LangService } from '../services/lang.service'; +import { FormControl } from '@angular/forms'; +import * as sampleData from '../../assets/maps/cantons.json'; @Component({ selector: 'app-getting-started', @@ -7,9 +11,60 @@ import { Component, OnInit } from '@angular/core'; }) export class GettingStartedComponent implements OnInit { - constructor() { } + isClicked: boolean = false; + translate: TranslateService; + langSelector: any = null; + ageSelector: any = null; + cantonSelector: String = null; + queryField: FormControl = new FormControl(); + show: boolean = false; + results: any[] = []; + cantons: String[] = (sampleData as any).default; + + constructor(public lang: LangService) { + this.translate = lang.getTranslateService(); + } + + onClickLang(button): void { + if (this.langSelector === button) { + this.langSelector = null; + } else { + this.langSelector = button; + } + } + + onClickAge(button): void { + if (this.ageSelector === button) { + this.ageSelector = null; + } else { + this.ageSelector = button; + } + } + + suggest(data : string){ + var newArr = this.cantons.filter(canton => canton.toLowerCase().includes(data.toLowerCase())); + console.log(newArr); + return newArr; + } + + send(){ + console.log(this.queryField.value + " waw"); + if(this.queryField.value == null){ + this.results = this.cantons; + this.show = true; + console.log("sent"); + } + } + + change(result){ + this.cantonSelector = result; + this.queryField.setValue(result); + this.show = false; + } ngOnInit(): void { + this.queryField.valueChanges + .subscribe(query => this.results = this.suggest(query)); } } diff --git a/src/app/login/login.component.css b/src/app/login/login.component.css index ed28a071e978369263f8529fa8c6d7ee5956a346..eaf88920e46155ba0499174b75ada92f16913b57 100644 --- a/src/app/login/login.component.css +++ b/src/app/login/login.component.css @@ -1,3 +1,12 @@ +.back{ + height: 100vh; + width: calc(100vw - 20rem); + background: #FFFAE7; + background-image: url(../../assets/images/yana-tree-noHands.svg); + background-repeat: space; + background-position: bottom; +} + form { text-align: center; min-width: 300px; @@ -25,13 +34,11 @@ h2{ margin-left: 34%; margin-top: 10%; - color: #2E3192; font-style: normal; } - .form-group{ padding-top: 2%; margin-left: 5%; @@ -137,22 +144,13 @@ button{ border-radius: 28.9474px; box-sizing: border-box; margin-left: 30%; - margin-top: 2%; + padding-top: 2%; } -.back{ - - height: 850px; - background: #FFFAE7; - background-image: url(../../assets/images/yana-tree-noHands.svg); - background-repeat: space; - background-image-size: 100%; - background-position: bottom; -} p{ - ont-family: Montserrat; + font-family: Montserrat; font-weight: normal; font-size: 22px; line-height: 27px; diff --git a/src/app/login/login.component.html b/src/app/login/login.component.html index 6f2b5463abae5279421d368b457201273d1299bd..cc373c4163a75f889afc3215e02d5265c35c496e 100644 --- a/src/app/login/login.component.html +++ b/src/app/login/login.component.html @@ -1,38 +1,35 @@
-
-
-
Are you in an emergency ? Call 147 or find help near you
-
-

Login

-
-
- - -
-
- - -
- Forgot password? - -

Don't have an account yet?

- Sign Up -
-

{{ errorMessage }}

-
-
- -
- +
+
Are you in an emergency ? Call 147 or find help near you
+
+

Login

+
+
+ + +
+
+ + +
+ Forgot password? + +

Don't have an account yet?

+ Sign Up +
+

{{ errorMessage }}

+
+ + diff --git a/src/app/maps/maps.component.html b/src/app/maps/maps.component.html index 728166a79eb6b861bcd3a41bb75ab6f263b23bb1..f4b77a25c244556dc37b2906c846fff60c8763fb 100644 --- a/src/app/maps/maps.component.html +++ b/src/app/maps/maps.component.html @@ -48,4 +48,4 @@ - + \ No newline at end of file diff --git a/src/app/signup/signup.component.css b/src/app/signup/signup.component.css index 63461cb09bc660727e7d2dc8f624d0471985e8d2..3114d0881de9a52c9b866cfb3d3b6f2801efb059 100644 --- a/src/app/signup/signup.component.css +++ b/src/app/signup/signup.component.css @@ -1,3 +1,11 @@ +.back{ + width: calc(100vw - 20rem); + height: 100vh; + background: #FFFAE7; + background-image: url(../../assets/images/yana-tree-noHands.svg); + background-repeat: space; + background-position: bottom; +} form { text-align: center; @@ -138,19 +146,10 @@ button{ border-radius: 28.9474px; box-sizing: border-box; margin-left: 30%; - margin-top: 2%; + padding-top: 2%; } -.back{ - - height: 850px; - background: #FFFAE7; - background-image: url(../../assets/images/yana-tree-noHands.svg); - background-repeat: space; - background-image-size: 100%; - background-position: bottom; -} diff --git a/src/assets/yana-tree-noHands.svg b/src/assets/yana-tree-noHands.svg new file mode 100644 index 0000000000000000000000000000000000000000..d755af50d9fbe3720fa1c672bb230109842ffabd --- /dev/null +++ b/src/assets/yana-tree-noHands.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/styles.css b/src/styles.css index 1a2b4328020bf87a7560ceb030f3c60f2fba6652..28a37951bf8561d8a7d542cf8e36b1e7c015a45b 100644 --- a/src/styles.css +++ b/src/styles.css @@ -1,4 +1,5 @@ /* You can add global styles to this file, and also import other style files */ +@import url('https://fonts.googleapis.com/css2?family=Montserrat&family=Nova+Round&display=swap'); * { font-family: 'Montserrat'; font-size: 21px; @@ -8,4 +9,4 @@ a:visited { color: inherit; -} \ No newline at end of file +}