├── src
    ├── assets
    │   └── .gitkeep
    ├── app
    │   ├── pages
    │   │   ├── add
    │   │   │   ├── add.component.css
    │   │   │   ├── add.component.html
    │   │   │   ├── add.component.ts
    │   │   │   └── add.component.spec.ts
    │   │   ├── signup
    │   │   │   ├── signup.component.css
    │   │   │   ├── signup.component.html
    │   │   │   ├── signup.component.ts
    │   │   │   └── signup.component.spec.ts
    │   │   ├── home
    │   │   │   ├── home.component.html
    │   │   │   ├── home.component.css
    │   │   │   ├── home.component.ts
    │   │   │   └── home.component.spec.ts
    │   │   ├── login
    │   │   │   ├── login.component.ts
    │   │   │   ├── login.component.spec.ts
    │   │   │   ├── login.component.html
    │   │   │   └── login.component.css
    │   │   └── details
    │   │   │   ├── details.component.spec.ts
    │   │   │   ├── details.component.ts
    │   │   │   ├── details.component.css
    │   │   │   └── details.component.html
    │   ├── services
    │   │   ├── ui
    │   │   │   ├── ui.service.ts
    │   │   │   └── ui.service.spec.ts
    │   │   └── weather
    │   │   │   ├── weather.service.spec.ts
    │   │   │   └── weather.service.ts
    │   ├── ui
    │   │   ├── add-card
    │   │   │   ├── add-card.component.ts
    │   │   │   ├── add-card.component.spec.ts
    │   │   │   ├── add-card.component.css
    │   │   │   └── add-card.component.html
    │   │   └── weather-card
    │   │   │   ├── weather-card.component.spec.ts
    │   │   │   ├── weather-card.component.ts
    │   │   │   ├── weather-card.component.css
    │   │   │   └── weather-card.component.html
    │   ├── app.component.ts
    │   ├── app-routing.module.ts
    │   ├── app.component.spec.ts
    │   ├── app.module.ts
    │   ├── app.component.html
    │   └── app.component.css
    ├── favicon.ico
    ├── environments
    │   ├── environment.prod.ts
    │   └── environment.ts
    ├── tsconfig.app.json
    ├── tslint.json
    ├── styles.css
    ├── index.html
    ├── tsconfig.spec.json
    ├── browserslist
    ├── main.ts
    ├── test.ts
    ├── karma.conf.js
    └── polyfills.ts
├── e2e
    ├── src
    │   ├── app.po.ts
    │   └── app.e2e-spec.ts
    ├── tsconfig.e2e.json
    └── protractor.conf.js
├── .editorconfig
├── tsconfig.json
├── .gitignore
├── README.md
├── package.json
├── tslint.json
├── angular.json
└── LICENSE


/src/assets/.gitkeep:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/src/app/pages/add/add.component.css:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/src/app/pages/signup/signup.component.css:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/src/app/pages/add/add.component.html:
--------------------------------------------------------------------------------
1 | <p>
2 |   add works!
3 | </p>
4 | 


--------------------------------------------------------------------------------
/src/app/pages/signup/signup.component.html:
--------------------------------------------------------------------------------
1 | <p>
2 |   signup works!
3 | </p>
4 | 


--------------------------------------------------------------------------------
/src/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nirzaf/weatherapp/HEAD/src/favicon.ico


--------------------------------------------------------------------------------
/src/environments/environment.prod.ts:
--------------------------------------------------------------------------------
1 | export const environment = {
2 |   production: true
3 | };
4 | 


--------------------------------------------------------------------------------
/src/app/pages/home/home.component.html:
--------------------------------------------------------------------------------
1 | <div class="main__container">
2 | 
3 |   <app-weather-card></app-weather-card>
4 |   <app-add-card></app-add-card>
5 | 
6 | </div>
7 | 


--------------------------------------------------------------------------------
/src/tsconfig.app.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "../tsconfig.json",
 3 |   "compilerOptions": {
 4 |     "outDir": "../out-tsc/app",
 5 |     "module": "es2015",
 6 |     "types": []
 7 |   },
 8 |   "exclude": [
 9 |     "src/test.ts",
10 |     "**/*.spec.ts"
11 |   ]
12 | }
13 | 


--------------------------------------------------------------------------------
/e2e/src/app.po.ts:
--------------------------------------------------------------------------------
 1 | import { browser, by, element } from 'protractor';
 2 | 
 3 | export class AppPage {
 4 |   navigateTo() {
 5 |     return browser.get('/');
 6 |   }
 7 | 
 8 |   getParagraphText() {
 9 |     return element(by.css('app-root h1')).getText();
10 |   }
11 | }
12 | 


--------------------------------------------------------------------------------
/src/app/pages/home/home.component.css:
--------------------------------------------------------------------------------
 1 | /*Home Layout*/
 2 | .main__container {
 3 |   display: grid;
 4 |   grid-template-columns: repeat(3, 1fr);
 5 |   grid-template-rows: repeat(auto-fill, 1fr);
 6 |   align-items: center;
 7 |   justify-items: center;
 8 |   height: 100%;
 9 | }
10 | 


--------------------------------------------------------------------------------
/e2e/tsconfig.e2e.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "../tsconfig.json",
 3 |   "compilerOptions": {
 4 |     "outDir": "../out-tsc/app",
 5 |     "module": "commonjs",
 6 |     "target": "es5",
 7 |     "types": [
 8 |       "jasmine",
 9 |       "jasminewd2",
10 |       "node"
11 |     ]
12 |   }
13 | }


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | # Editor configuration, see http://editorconfig.org
 2 | root = true
 3 | 
 4 | [*]
 5 | charset = utf-8
 6 | indent_style = space
 7 | indent_size = 2
 8 | insert_final_newline = true
 9 | trim_trailing_whitespace = true
10 | 
11 | [*.md]
12 | max_line_length = off
13 | trim_trailing_whitespace = false
14 | 


--------------------------------------------------------------------------------
/src/tslint.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "../tslint.json",
 3 |   "rules": {
 4 |     "directive-selector": [
 5 |       true,
 6 |       "attribute",
 7 |       "app",
 8 |       "camelCase"
 9 |     ],
10 |     "component-selector": [
11 |       true,
12 |       "element",
13 |       "app",
14 |       "kebab-case"
15 |     ]
16 |   }
17 | }
18 | 


--------------------------------------------------------------------------------
/src/styles.css:
--------------------------------------------------------------------------------
 1 | /* You can add global styles to this file, and also import other style files */
 2 | body {
 3 |   font-family: sans-serif;
 4 |   margin: 0;
 5 |   padding: 0;
 6 |   height: 100vh;
 7 |   width: 100vw;
 8 | }
 9 | 
10 | @keyframes fadein {
11 |   from {
12 |     opacity: 0;
13 |   }
14 |   to {
15 |     opacity: 1;
16 |   }
17 | }
18 | 


--------------------------------------------------------------------------------
/src/app/pages/add/add.component.ts:
--------------------------------------------------------------------------------
 1 | import {Component, OnInit} from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'app-add',
 5 |   templateUrl: './add.component.html',
 6 |   styleUrls: ['./add.component.css']
 7 | })
 8 | export class AddComponent implements OnInit {
 9 | 
10 |   constructor() {
11 |   }
12 | 
13 |   ngOnInit() {
14 |   }
15 | 
16 | }
17 | 


--------------------------------------------------------------------------------
/src/app/pages/home/home.component.ts:
--------------------------------------------------------------------------------
 1 | import {Component, OnInit} from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'app-home',
 5 |   templateUrl: './home.component.html',
 6 |   styleUrls: ['./home.component.css']
 7 | })
 8 | export class HomeComponent implements OnInit {
 9 | 
10 |   constructor() {
11 |   }
12 | 
13 |   ngOnInit() {
14 | 
15 |   }
16 | }
17 | 


--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="utf-8">
 5 |   <title>Minimus</title>
 6 |   <base href="/">
 7 | 
 8 |   <meta name="viewport" content="width=device-width, initial-scale=1">
 9 |   <link rel="icon" type="image/x-icon" href="favicon.ico">
10 | </head>
11 | <body>
12 | <app-root></app-root>
13 | </body>
14 | </html>
15 | 


--------------------------------------------------------------------------------
/e2e/src/app.e2e-spec.ts:
--------------------------------------------------------------------------------
 1 | import { AppPage } from './app.po';
 2 | 
 3 | describe('workspace-project App', () => {
 4 |   let page: AppPage;
 5 | 
 6 |   beforeEach(() => {
 7 |     page = new AppPage();
 8 |   });
 9 | 
10 |   it('should display welcome message', () => {
11 |     page.navigateTo();
12 |     expect(page.getParagraphText()).toEqual('Welcome to app!');
13 |   });
14 | });
15 | 


--------------------------------------------------------------------------------
/src/app/pages/signup/signup.component.ts:
--------------------------------------------------------------------------------
 1 | import {Component, OnInit} from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'app-signup',
 5 |   templateUrl: './signup.component.html',
 6 |   styleUrls: ['./signup.component.css']
 7 | })
 8 | export class SignupComponent implements OnInit {
 9 | 
10 |   constructor() {
11 |   }
12 | 
13 |   ngOnInit() {
14 |   }
15 | 
16 | }
17 | 


--------------------------------------------------------------------------------
/src/tsconfig.spec.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "../tsconfig.json",
 3 |   "compilerOptions": {
 4 |     "outDir": "../out-tsc/spec",
 5 |     "module": "commonjs",
 6 |     "types": [
 7 |       "jasmine",
 8 |       "node"
 9 |     ]
10 |   },
11 |   "files": [
12 |     "test.ts",
13 |     "polyfills.ts"
14 |   ],
15 |   "include": [
16 |     "**/*.spec.ts",
17 |     "**/*.d.ts"
18 |   ]
19 | }
20 | 


--------------------------------------------------------------------------------
/src/app/pages/login/login.component.ts:
--------------------------------------------------------------------------------
 1 | import {Component, OnInit} from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'app-login',
 5 |   templateUrl: './login.component.html',
 6 |   styleUrls: ['./login.component.css']
 7 | })
 8 | export class LoginComponent implements OnInit {
 9 | 
10 |   constructor() {
11 |   }
12 | 
13 |   ngOnInit() {
14 |   }
15 | 
16 |   login() {
17 | 
18 |   }
19 | 
20 | }
21 | 


--------------------------------------------------------------------------------
/src/browserslist:
--------------------------------------------------------------------------------
1 | # This file is currently used by autoprefixer to adjust CSS to support the below specified browsers
2 | # For additional information regarding the format and rule options, please see:
3 | # https://github.com/browserslist/browserslist#queries
4 | # For IE 9-11 support, please uncomment the last line of the file and adjust as needed
5 | > 0.5%
6 | last 2 versions
7 | Firefox ESR
8 | not dead
9 | # IE 9-11


--------------------------------------------------------------------------------
/src/app/services/ui/ui.service.ts:
--------------------------------------------------------------------------------
 1 | import {Injectable} from '@angular/core';
 2 | import {BehaviorSubject} from 'rxjs';
 3 | 
 4 | @Injectable()
 5 | export class UiService {
 6 | 
 7 |   darkModeState: BehaviorSubject<boolean>;
 8 | 
 9 |   constructor() {
10 |     // TODO: if the user is signed in get the default value from Firebase
11 |     this.darkModeState = new BehaviorSubject<boolean>(false);
12 |   }
13 | }
14 | 


--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
 1 | import {enableProdMode} from '@angular/core';
 2 | import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
 3 | 
 4 | import {AppModule} from './app/app.module';
 5 | import {environment} from './environments/environment';
 6 | 
 7 | if (environment.production) {
 8 |   enableProdMode();
 9 | }
10 | 
11 | platformBrowserDynamic().bootstrapModule(AppModule)
12 |   .catch(err => console.log(err));
13 | 


--------------------------------------------------------------------------------
/src/app/services/ui/ui.service.spec.ts:
--------------------------------------------------------------------------------
 1 | import {inject, TestBed} from '@angular/core/testing';
 2 | 
 3 | import {UiService} from './ui.service';
 4 | 
 5 | describe('UiService', () => {
 6 |   beforeEach(() => {
 7 |     TestBed.configureTestingModule({
 8 |       providers: [UiService]
 9 |     });
10 |   });
11 | 
12 |   it('should be created', inject([UiService], (service: UiService) => {
13 |     expect(service).toBeTruthy();
14 |   }));
15 | });
16 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compileOnSave": false,
 3 |   "compilerOptions": {
 4 |     "baseUrl": "./",
 5 |     "outDir": "./dist/out-tsc",
 6 |     "sourceMap": true,
 7 |     "declaration": false,
 8 |     "moduleResolution": "node",
 9 |     "emitDecoratorMetadata": true,
10 |     "experimentalDecorators": true,
11 |     "target": "es5",
12 |     "typeRoots": [
13 |       "node_modules/@types"
14 |     ],
15 |     "lib": [
16 |       "es2017",
17 |       "dom"
18 |     ]
19 |   }
20 | }
21 | 


--------------------------------------------------------------------------------
/src/app/services/weather/weather.service.spec.ts:
--------------------------------------------------------------------------------
 1 | import {inject, TestBed} from '@angular/core/testing';
 2 | 
 3 | import {WeatherService} from './weather.service';
 4 | 
 5 | describe('WeatherService', () => {
 6 |   beforeEach(() => {
 7 |     TestBed.configureTestingModule({
 8 |       providers: [WeatherService]
 9 |     });
10 |   });
11 | 
12 |   it('should be created', inject([WeatherService], (service: WeatherService) => {
13 |     expect(service).toBeTruthy();
14 |   }));
15 | });
16 | 


--------------------------------------------------------------------------------
/src/app/ui/add-card/add-card.component.ts:
--------------------------------------------------------------------------------
 1 | import {Component, OnInit} from '@angular/core';
 2 | import {UiService} from '../../services/ui/ui.service';
 3 | 
 4 | @Component({
 5 |   selector: 'app-add-card',
 6 |   templateUrl: './add-card.component.html',
 7 |   styleUrls: ['./add-card.component.css']
 8 | })
 9 | export class AddCardComponent implements OnInit {
10 | 
11 |   darkMode: boolean;
12 | 
13 |   constructor(public ui: UiService) {
14 |   }
15 | 
16 |   ngOnInit() {
17 |     this.ui.darkModeState.subscribe((isDark) => {
18 |       this.darkMode = isDark;
19 |     });
20 |   }
21 | 
22 | }
23 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See http://help.github.com/ignore-files/ for more about ignoring files.
 2 | 
 3 | # compiled output
 4 | /dist
 5 | /tmp
 6 | /out-tsc
 7 | 
 8 | # dependencies
 9 | /node_modules
10 | 
11 | # IDEs and editors
12 | /.idea
13 | .project
14 | .classpath
15 | .c9/
16 | *.launch
17 | .settings/
18 | *.sublime-workspace
19 | 
20 | # IDE - VSCode
21 | .vscode/*
22 | !.vscode/settings.json
23 | !.vscode/tasks.json
24 | !.vscode/launch.json
25 | !.vscode/extensions.json
26 | 
27 | # misc
28 | /.sass-cache
29 | /connect.lock
30 | /coverage
31 | /libpeerconnection.log
32 | npm-debug.log
33 | yarn-error.log
34 | testem.log
35 | /typings
36 | 
37 | # System Files
38 | .DS_Store
39 | Thumbs.db
40 | 


--------------------------------------------------------------------------------
/src/test.ts:
--------------------------------------------------------------------------------
 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files
 2 | 
 3 | import 'zone.js/dist/zone-testing';
 4 | import {getTestBed} from '@angular/core/testing';
 5 | import {BrowserDynamicTestingModule, platformBrowserDynamicTesting} from '@angular/platform-browser-dynamic/testing';
 6 | 
 7 | declare const require: any;
 8 | 
 9 | // First, initialize the Angular testing environment.
10 | getTestBed().initTestEnvironment(
11 |   BrowserDynamicTestingModule,
12 |   platformBrowserDynamicTesting()
13 | );
14 | // Then we find all the tests.
15 | const context = require.context('./', true, /\.spec\.ts$/);
16 | // And load the modules.
17 | context.keys().map(context);
18 | 


--------------------------------------------------------------------------------
/src/environments/environment.ts:
--------------------------------------------------------------------------------
 1 | // This file can be replaced during build by using the `fileReplacements` array.
 2 | // `ng build ---prod` replaces `environment.ts` with `environment.prod.ts`.
 3 | // The list of file replacements can be found in `angular.json`.
 4 | 
 5 | export const environment = {
 6 |   production: false
 7 | };
 8 | 
 9 | /*
10 |  * In development mode, to ignore zone related error stack frames such as
11 |  * `zone.run`, `zoneDelegate.invokeTask` for easier debugging, you can
12 |  * import the following file, but please comment it out in production mode
13 |  * because it will have performance impact when throw error
14 |  */
15 | // import 'zone.js/dist/zone-error';  // Included with Angular CLI.
16 | 


--------------------------------------------------------------------------------
/src/app/pages/add/add.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import {async, ComponentFixture, TestBed} from '@angular/core/testing';
 2 | 
 3 | import {AddComponent} from './add.component';
 4 | 
 5 | describe('AddComponent', () => {
 6 |   let component: AddComponent;
 7 |   let fixture: ComponentFixture<AddComponent>;
 8 | 
 9 |   beforeEach(async(() => {
10 |     TestBed.configureTestingModule({
11 |       declarations: [AddComponent]
12 |     })
13 |       .compileComponents();
14 |   }));
15 | 
16 |   beforeEach(() => {
17 |     fixture = TestBed.createComponent(AddComponent);
18 |     component = fixture.componentInstance;
19 |     fixture.detectChanges();
20 |   });
21 | 
22 |   it('should create', () => {
23 |     expect(component).toBeTruthy();
24 |   });
25 | });
26 | 


--------------------------------------------------------------------------------
/src/app/pages/home/home.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import {async, ComponentFixture, TestBed} from '@angular/core/testing';
 2 | 
 3 | import {HomeComponent} from './home.component';
 4 | 
 5 | describe('HomeComponent', () => {
 6 |   let component: HomeComponent;
 7 |   let fixture: ComponentFixture<HomeComponent>;
 8 | 
 9 |   beforeEach(async(() => {
10 |     TestBed.configureTestingModule({
11 |       declarations: [HomeComponent]
12 |     })
13 |       .compileComponents();
14 |   }));
15 | 
16 |   beforeEach(() => {
17 |     fixture = TestBed.createComponent(HomeComponent);
18 |     component = fixture.componentInstance;
19 |     fixture.detectChanges();
20 |   });
21 | 
22 |   it('should create', () => {
23 |     expect(component).toBeTruthy();
24 |   });
25 | });
26 | 


--------------------------------------------------------------------------------
/src/app/pages/login/login.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import {async, ComponentFixture, TestBed} from '@angular/core/testing';
 2 | 
 3 | import {LoginComponent} from './login.component';
 4 | 
 5 | describe('LoginComponent', () => {
 6 |   let component: LoginComponent;
 7 |   let fixture: ComponentFixture<LoginComponent>;
 8 | 
 9 |   beforeEach(async(() => {
10 |     TestBed.configureTestingModule({
11 |       declarations: [LoginComponent]
12 |     })
13 |       .compileComponents();
14 |   }));
15 | 
16 |   beforeEach(() => {
17 |     fixture = TestBed.createComponent(LoginComponent);
18 |     component = fixture.componentInstance;
19 |     fixture.detectChanges();
20 |   });
21 | 
22 |   it('should create', () => {
23 |     expect(component).toBeTruthy();
24 |   });
25 | });
26 | 


--------------------------------------------------------------------------------
/src/app/app.component.ts:
--------------------------------------------------------------------------------
 1 | import {Component, OnInit} from '@angular/core';
 2 | import {UiService} from './services/ui/ui.service';
 3 | 
 4 | @Component({
 5 |   selector: 'app-root',
 6 |   templateUrl: './app.component.html',
 7 |   styleUrls: ['./app.component.css']
 8 | })
 9 | export class AppComponent implements OnInit {
10 |   showMenu = false;
11 |   darkModeActive: boolean;
12 | 
13 |   constructor(public ui: UiService) {
14 | 
15 |   }
16 | 
17 |   ngOnInit() {
18 |     this.ui.darkModeState.subscribe((value) => {
19 |       this.darkModeActive = value;
20 |     });
21 |   }
22 | 
23 |   toggleMenu() {
24 |     this.showMenu = !this.showMenu;
25 |   }
26 | 
27 |   modeToggleSwitch() {
28 |     this.ui.darkModeState.next(!this.darkModeActive);
29 |   }
30 | 
31 | }
32 | 


--------------------------------------------------------------------------------
/src/app/pages/signup/signup.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import {async, ComponentFixture, TestBed} from '@angular/core/testing';
 2 | 
 3 | import {SignupComponent} from './signup.component';
 4 | 
 5 | describe('SignupComponent', () => {
 6 |   let component: SignupComponent;
 7 |   let fixture: ComponentFixture<SignupComponent>;
 8 | 
 9 |   beforeEach(async(() => {
10 |     TestBed.configureTestingModule({
11 |       declarations: [SignupComponent]
12 |     })
13 |       .compileComponents();
14 |   }));
15 | 
16 |   beforeEach(() => {
17 |     fixture = TestBed.createComponent(SignupComponent);
18 |     component = fixture.componentInstance;
19 |     fixture.detectChanges();
20 |   });
21 | 
22 |   it('should create', () => {
23 |     expect(component).toBeTruthy();
24 |   });
25 | });
26 | 


--------------------------------------------------------------------------------
/src/app/pages/details/details.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import {async, ComponentFixture, TestBed} from '@angular/core/testing';
 2 | 
 3 | import {DetailsComponent} from './details.component';
 4 | 
 5 | describe('DetailsComponent', () => {
 6 |   let component: DetailsComponent;
 7 |   let fixture: ComponentFixture<DetailsComponent>;
 8 | 
 9 |   beforeEach(async(() => {
10 |     TestBed.configureTestingModule({
11 |       declarations: [DetailsComponent]
12 |     })
13 |       .compileComponents();
14 |   }));
15 | 
16 |   beforeEach(() => {
17 |     fixture = TestBed.createComponent(DetailsComponent);
18 |     component = fixture.componentInstance;
19 |     fixture.detectChanges();
20 |   });
21 | 
22 |   it('should create', () => {
23 |     expect(component).toBeTruthy();
24 |   });
25 | });
26 | 


--------------------------------------------------------------------------------
/src/app/ui/add-card/add-card.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import {async, ComponentFixture, TestBed} from '@angular/core/testing';
 2 | 
 3 | import {AddCardComponent} from './add-card.component';
 4 | 
 5 | describe('AddCardComponent', () => {
 6 |   let component: AddCardComponent;
 7 |   let fixture: ComponentFixture<AddCardComponent>;
 8 | 
 9 |   beforeEach(async(() => {
10 |     TestBed.configureTestingModule({
11 |       declarations: [AddCardComponent]
12 |     })
13 |       .compileComponents();
14 |   }));
15 | 
16 |   beforeEach(() => {
17 |     fixture = TestBed.createComponent(AddCardComponent);
18 |     component = fixture.componentInstance;
19 |     fixture.detectChanges();
20 |   });
21 | 
22 |   it('should create', () => {
23 |     expect(component).toBeTruthy();
24 |   });
25 | });
26 | 


--------------------------------------------------------------------------------
/src/app/ui/weather-card/weather-card.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import {async, ComponentFixture, TestBed} from '@angular/core/testing';
 2 | 
 3 | import {WeatherCardComponent} from './weather-card.component';
 4 | 
 5 | describe('WeatherCardComponent', () => {
 6 |   let component: WeatherCardComponent;
 7 |   let fixture: ComponentFixture<WeatherCardComponent>;
 8 | 
 9 |   beforeEach(async(() => {
10 |     TestBed.configureTestingModule({
11 |       declarations: [WeatherCardComponent]
12 |     })
13 |       .compileComponents();
14 |   }));
15 | 
16 |   beforeEach(() => {
17 |     fixture = TestBed.createComponent(WeatherCardComponent);
18 |     component = fixture.componentInstance;
19 |     fixture.detectChanges();
20 |   });
21 | 
22 |   it('should create', () => {
23 |     expect(component).toBeTruthy();
24 |   });
25 | });
26 | 


--------------------------------------------------------------------------------
/e2e/protractor.conf.js:
--------------------------------------------------------------------------------
 1 | // Protractor configuration file, see link for more information
 2 | // https://github.com/angular/protractor/blob/master/lib/config.ts
 3 | 
 4 | const { SpecReporter } = require('jasmine-spec-reporter');
 5 | 
 6 | exports.config = {
 7 |   allScriptsTimeout: 11000,
 8 |   specs: [
 9 |     './src/**/*.e2e-spec.ts'
10 |   ],
11 |   capabilities: {
12 |     'browserName': 'chrome'
13 |   },
14 |   directConnect: true,
15 |   baseUrl: 'http://localhost:4200/',
16 |   framework: 'jasmine',
17 |   jasmineNodeOpts: {
18 |     showColors: true,
19 |     defaultTimeoutInterval: 30000,
20 |     print: function() {}
21 |   },
22 |   onPrepare() {
23 |     require('ts-node').register({
24 |       project: require('path').join(__dirname, './tsconfig.e2e.json')
25 |     });
26 |     jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
27 |   }
28 | };


--------------------------------------------------------------------------------
/src/app/pages/login/login.component.html:
--------------------------------------------------------------------------------
 1 | <div class="main__container">
 2 |   <div class="login-card">
 3 | 
 4 |     <main class="login-content">
 5 |       <!-- login form -->
 6 |       <h1 class="login-welcome-text">Welcome Back!</h1>
 7 |       <form (submit)="login()" method="post" class="login-form">
 8 |         <input type="text" autofocus placeholder="Account Username" name="username" class="login-input">
 9 |         <input type="password" placeholder="Password" name="password" class="login-input">
10 |         <input type="submit" name="submit" placeholder="Log in" class="login-btn">
11 |       </form>
12 |     </main>
13 |     <!-- linking to signup -->
14 |     <aside class="login__illustration">
15 |       <span class="signup-notice">Don't have an account? &nbsp;</span>
16 |       <a class="signup-link" href="/signup/index.php">Sign up</a>
17 |     </aside>
18 | 
19 |   </div>
20 | </div>
21 | 


--------------------------------------------------------------------------------
/src/app/app-routing.module.ts:
--------------------------------------------------------------------------------
 1 | import {NgModule} from '@angular/core';
 2 | import {RouterModule, Routes} from '@angular/router';
 3 | import {HomeComponent} from './pages/home/home.component';
 4 | import {DetailsComponent} from './pages/details/details.component';
 5 | import {AddComponent} from './pages/add/add.component';
 6 | import {LoginComponent} from './pages/login/login.component';
 7 | import {SignupComponent} from './pages/signup/signup.component';
 8 | 
 9 | const routes: Routes = [
10 |   {path: '', component: HomeComponent},
11 |   {path: 'details/:city', component: DetailsComponent},
12 |   {path: 'add', component: AddComponent},
13 |   {path: 'login', component: LoginComponent},
14 |   {path: 'signup', component: SignupComponent},
15 | ];
16 | 
17 | @NgModule({
18 |   imports: [RouterModule.forRoot(routes)],
19 |   exports: [RouterModule]
20 | })
21 | export class AppRoutingModule {
22 | }
23 | 


--------------------------------------------------------------------------------
/src/app/ui/add-card/add-card.component.css:
--------------------------------------------------------------------------------
 1 | .add__card {
 2 |   background-color: #ffffff;
 3 |   box-shadow: 0 0 2rem rgba(0, 0, 255, 0.1);
 4 |   display: grid;
 5 |   grid-template-columns: 1fr;
 6 |   grid-template-rows: 1fr 1fr;
 7 |   padding: 2rem;
 8 |   margin: 2rem;
 9 |   width: 19rem;
10 |   height: 30rem;
11 |   justify-items: center;
12 |   cursor: pointer;
13 |   border-radius: 1.75rem;
14 |   animation: fadein 1.25s ease-in-out 0ms 1;
15 |   color: #443282;
16 | }
17 | 
18 | .add__card-dark {
19 |   background: linear-gradient(to bottom, #711B86, #00057A);
20 |   color: white;
21 | }
22 | 
23 | .card__title {
24 |   text-transform: uppercase;
25 |   letter-spacing: 0.1rem;
26 | }
27 | 
28 | .city__illustration {
29 |   width: 20rem;
30 | }
31 | 
32 | .body__container {
33 |   align-self: end;
34 |   display: flex;
35 |   justify-content: space-between;
36 |   align-items: center;
37 |   flex-flow: column;
38 | }
39 | 
40 | .add__icon {
41 |   width: 10rem;
42 |   margin-bottom: 1.15rem;
43 | }
44 | 


--------------------------------------------------------------------------------
/src/karma.conf.js:
--------------------------------------------------------------------------------
 1 | // Karma configuration file, see link for more information
 2 | // https://karma-runner.github.io/1.0/config/configuration-file.html
 3 | 
 4 | module.exports = function (config) {
 5 |   config.set({
 6 |     basePath: '',
 7 |     frameworks: ['jasmine', '@angular-devkit/build-angular'],
 8 |     plugins: [
 9 |       require('karma-jasmine'),
10 |       require('karma-chrome-launcher'),
11 |       require('karma-jasmine-html-reporter'),
12 |       require('karma-coverage-istanbul-reporter'),
13 |       require('@angular-devkit/build-angular/plugins/karma')
14 |     ],
15 |     client: {
16 |       clearContext: false // leave Jasmine Spec Runner output visible in browser
17 |     },
18 |     coverageIstanbulReporter: {
19 |       dir: require('path').join(__dirname, '../coverage'),
20 |       reports: ['html', 'lcovonly'],
21 |       fixWebpackSourcePaths: true
22 |     },
23 |     reporters: ['progress', 'kjhtml'],
24 |     port: 9876,
25 |     colors: true,
26 |     logLevel: config.LOG_INFO,
27 |     autoWatch: true,
28 |     browsers: ['Chrome'],
29 |     singleRun: false
30 |   });
31 | };


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Minimus
 2 | 
 3 | This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 6.0.0.
 4 | 
 5 | ## Development server
 6 | 
 7 | Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
 8 | 
 9 | ## Code scaffolding
10 | 
11 | Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
12 | 
13 | ## Build
14 | 
15 | Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.
16 | 
17 | ## Running unit tests
18 | 
19 | Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
20 | 
21 | ## Running end-to-end tests
22 | 
23 | Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
24 | 
25 | ## Further help
26 | 
27 | To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
28 | 


--------------------------------------------------------------------------------
/src/app/app.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import {async, TestBed} from '@angular/core/testing';
 2 | import {RouterTestingModule} from '@angular/router/testing';
 3 | import {AppComponent} from './app.component';
 4 | 
 5 | describe('AppComponent', () => {
 6 |   beforeEach(async(() => {
 7 |     TestBed.configureTestingModule({
 8 |       imports: [
 9 |         RouterTestingModule
10 |       ],
11 |       declarations: [
12 |         AppComponent
13 |       ],
14 |     }).compileComponents();
15 |   }));
16 |   it('should create the app', async(() => {
17 |     const fixture = TestBed.createComponent(AppComponent);
18 |     const app = fixture.debugElement.componentInstance;
19 |     expect(app).toBeTruthy();
20 |   }));
21 |   it(`should have as title 'app'`, async(() => {
22 |     const fixture = TestBed.createComponent(AppComponent);
23 |     const app = fixture.debugElement.componentInstance;
24 |     expect(app.title).toEqual('app');
25 |   }));
26 |   it('should render title in a h1 tag', async(() => {
27 |     const fixture = TestBed.createComponent(AppComponent);
28 |     fixture.detectChanges();
29 |     const compiled = fixture.debugElement.nativeElement;
30 |     expect(compiled.querySelector('h1').textContent).toContain('Welcome to app!');
31 |   }));
32 | });
33 | 


--------------------------------------------------------------------------------
/src/app/app.module.ts:
--------------------------------------------------------------------------------
 1 | import {BrowserModule} from '@angular/platform-browser';
 2 | import {NgModule} from '@angular/core';
 3 | 
 4 | import {AppRoutingModule} from './app-routing.module';
 5 | import {AppComponent} from './app.component';
 6 | 
 7 | import {HomeComponent} from './pages/home/home.component';
 8 | import {DetailsComponent} from './pages/details/details.component';
 9 | import {WeatherService} from './services/weather/weather.service';
10 | import {HttpClientModule} from '@angular/common/http';
11 | import {WeatherCardComponent} from './ui/weather-card/weather-card.component';
12 | import {AddCardComponent} from './ui/add-card/add-card.component';
13 | import {AddComponent} from './pages/add/add.component';
14 | import {LoginComponent} from './pages/login/login.component';
15 | import {SignupComponent} from './pages/signup/signup.component';
16 | import {UiService} from './services/ui/ui.service';
17 | 
18 | @NgModule({
19 |   declarations: [
20 |     AppComponent,
21 |     HomeComponent,
22 |     DetailsComponent,
23 |     WeatherCardComponent,
24 |     AddCardComponent,
25 |     AddComponent,
26 |     LoginComponent,
27 |     SignupComponent,
28 |     AddCardComponent
29 |   ],
30 |   imports: [
31 |     BrowserModule,
32 |     AppRoutingModule,
33 |     HttpClientModule,
34 |   ],
35 |   providers: [
36 |     WeatherService,
37 |     UiService
38 |   ],
39 |   bootstrap: [AppComponent]
40 | })
41 | export class AppModule {
42 | }
43 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "minimus",
 3 |   "version": "1.0.0",
 4 |   "author": "Hamed Baatour<hamedbaatour@gmail.com>",
 5 |   "scripts": {
 6 |     "ng": "ng",
 7 |     "start": "ng serve",
 8 |     "build": "ng build",
 9 |     "test": "ng test",
10 |     "lint": "ng lint",
11 |     "e2e": "ng e2e"
12 |   },
13 |   "private": true,
14 |   "dependencies": {
15 |     "@angular/animations": "^6.0.0",
16 |     "@angular/common": "^6.0.0",
17 |     "@angular/compiler": "^6.0.0",
18 |     "@angular/core": "^6.0.0",
19 |     "@angular/forms": "^6.0.0",
20 |     "@angular/http": "^6.0.0",
21 |     "@angular/platform-browser": "^6.0.0",
22 |     "@angular/platform-browser-dynamic": "^6.0.0",
23 |     "@angular/router": "^6.0.0",
24 |     "core-js": "^2.5.4",
25 |     "rxjs": "^6.0.0",
26 |     "zone.js": "^0.8.26"
27 |   },
28 |   "devDependencies": {
29 |     "@angular/compiler-cli": "^6.0.0",
30 |     "@angular-devkit/build-angular": "~0.6.0",
31 |     "typescript": "~2.7.2",
32 |     "@angular/cli": "~6.0.0",
33 |     "@angular/language-service": "^6.0.0",
34 |     "@types/jasmine": "~2.8.6",
35 |     "@types/jasminewd2": "~2.0.3",
36 |     "@types/node": "~8.9.4",
37 |     "codelyzer": "~4.2.1",
38 |     "jasmine-core": "~2.99.1",
39 |     "jasmine-spec-reporter": "~4.2.1",
40 |     "karma": "~1.7.1",
41 |     "karma-chrome-launcher": "~2.2.0",
42 |     "karma-coverage-istanbul-reporter": "~1.4.2",
43 |     "karma-jasmine": "~1.1.1",
44 |     "karma-jasmine-html-reporter": "^0.2.2",
45 |     "protractor": "~5.3.0",
46 |     "ts-node": "~5.0.1",
47 |     "tslint": "~5.9.1"
48 |   }
49 | }
50 | 


--------------------------------------------------------------------------------
/src/app/ui/weather-card/weather-card.component.ts:
--------------------------------------------------------------------------------
 1 | import {Component, OnDestroy, OnInit} from '@angular/core';
 2 | import {Router} from '@angular/router';
 3 | import {WeatherService} from '../../services/weather/weather.service';
 4 | import {UiService} from '../../services/ui/ui.service';
 5 | 
 6 | @Component({
 7 |   selector: 'app-weather-card',
 8 |   templateUrl: './weather-card.component.html',
 9 |   styleUrls: ['./weather-card.component.css']
10 | })
11 | export class WeatherCardComponent implements OnInit, OnDestroy {
12 | 
13 |   condition: string;
14 |   currentTemp: number;
15 |   maxTemp: number;
16 |   minTemp: number;
17 |   darkMode: boolean;
18 | 
19 |   constructor(public weather: WeatherService,
20 |               public router: Router,
21 |               public ui: UiService) {
22 |   }
23 | 
24 |   ngOnInit() {
25 |     this.ui.darkModeState.subscribe((isDark) => {
26 |       this.darkMode = isDark;
27 |     });
28 | 
29 |     this.weather.getWeatherState('Paris')
30 |       .subscribe((data: string) => {
31 |         this.condition = data;
32 |       });
33 | 
34 |     this.weather.getCurrentTemp('Paris').subscribe((data: number) => {
35 |       this.currentTemp = data;
36 |     });
37 |     this.weather.getMinTemp('Paris').subscribe((data: number) => {
38 |       this.minTemp = data;
39 |     });
40 |     this.weather.getMaxTemp('Paris').subscribe((data: number) => {
41 |       this.maxTemp = data;
42 |     });
43 |   }
44 | 
45 |   ngOnDestroy() {
46 | 
47 |   }
48 | 
49 |   openDetails() {
50 |     this.router.navigateByUrl('/details/paris');
51 |   }
52 | 
53 | }
54 | 


--------------------------------------------------------------------------------
/src/app/pages/login/login.component.css:
--------------------------------------------------------------------------------
 1 | .main__container {
 2 |   background-color: #0c1066;
 3 |   height: 100vh;
 4 |   width: 100vw;
 5 |   display: flex;
 6 |   justify-content: center;
 7 |   align-items: center;
 8 |   overflow: hidden;
 9 | }
10 | 
11 | .login-card {
12 |   display: flex;
13 |   background-color: #ffffff;
14 |   border-radius: 10px;
15 |   box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
16 |   width: 85%;
17 |   height: 80%;
18 | }
19 | 
20 | .login-welcome-screen {
21 |   border-top-left-radius: 10px;
22 |   border-bottom-left-radius: 10px;
23 |   display: flex;
24 |   justify-content: center;
25 |   align-items: center;
26 |   flex: 5 5;
27 |   background: linear-gradient(#42A8F2, #7611f9);
28 | }
29 | 
30 | .login-content {
31 |   flex: 3 3;
32 |   display: flex;
33 |   flex-flow: column;
34 |   justify-content: center;
35 |   align-items: center;
36 | }
37 | 
38 | .login-form {
39 |   display: flex;
40 |   flex-flow: column;
41 |   width: 80%;
42 | }
43 | 
44 | .login__illustration {
45 |   height: 80%;
46 |   width: 80%;
47 | }
48 | 
49 | .login-welcome-text {
50 |   color: #39437a;
51 |   letter-spacing: 0.03rem;
52 |   margin-bottom: 6rem;
53 |   animation-duration: 2s;
54 | }
55 | 
56 | .login-input {
57 |   margin: 0.75rem 0;
58 |   padding: 1rem;
59 |   border-radius: 2rem;
60 |   outline: none;
61 |   border: none;
62 |   box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
63 |   animation-duration: 2s;
64 | }
65 | 
66 | .login-btn {
67 |   background: linear-gradient(#4fffa1, #4ff0ff);
68 |   padding: 1rem;
69 |   border-radius: 2rem;
70 |   outline: none;
71 |   border: none;
72 |   color: white;
73 |   font-size: 1.1rem;
74 |   cursor: pointer;
75 |   margin-top: 1rem;
76 |   animation-duration: 2s;
77 | }
78 | 
79 | .login-btn:hover {
80 |   background: linear-gradient(to right, #e21649, #ffb600);
81 | }
82 | 
83 | .login-input::placeholder {
84 |   color: #39437a;
85 |   font-size: 0.9rem;
86 | }
87 | 
88 | .signup-notice {
89 |   margin-top: 1rem;
90 |   display: flex;
91 |   font-size: 0.8rem;
92 | }
93 | 
94 | .signup-link {
95 |   text-decoration: none;
96 |   color: #ff3a82;
97 | }
98 | 


--------------------------------------------------------------------------------
/src/app/ui/weather-card/weather-card.component.css:
--------------------------------------------------------------------------------
  1 | /*
  2 | ====================
  3 | Weather Card Styling
  4 | ====================
  5 | */
  6 | .weather__card {
  7 |   display: grid;
  8 |   grid-template-columns: 1fr;
  9 |   grid-template-rows: 1fr 1fr 1fr;
 10 |   box-shadow: 0 0 2rem rgba(0, 0, 255, 0.1);
 11 |   justify-items: center;
 12 |   padding: 2rem;
 13 |   margin: 2rem;
 14 |   width: 19rem;
 15 |   height: 30rem;
 16 |   cursor: pointer;
 17 |   background-color: white;
 18 |   border-radius: 1.75rem;
 19 |   animation: fadein 1.25s ease-in-out 0ms 1;
 20 | }
 21 | 
 22 | .weather__card-dark {
 23 |   background: linear-gradient(to bottom, #711B86, #00057A);
 24 |   color: white;
 25 | }
 26 | 
 27 | .city-name__text {
 28 |   text-transform: uppercase;
 29 |   font-size: 1.4rem;
 30 |   letter-spacing: 0.1rem;
 31 |   margin-bottom: 1rem;
 32 | }
 33 | 
 34 | .temperature__text {
 35 |   align-self: end;
 36 |   width: 100%;
 37 |   font-size: 4rem;
 38 |   font-weight: 100;
 39 |   letter-spacing: 0.1rem;
 40 | }
 41 | 
 42 | .temperature-metric__text {
 43 |   text-align: start;
 44 |   font-size: 3rem;
 45 | }
 46 | 
 47 | .min-max__container {
 48 |   display: grid;
 49 |   grid-template-rows: 1fr;
 50 |   grid-template-columns: 1fr 1fr;
 51 |   align-items: center;
 52 | }
 53 | 
 54 | .min__container, .max__container {
 55 |   margin: 1rem 3rem;
 56 |   display: grid;
 57 |   grid-template-columns: 1fr;
 58 |   grid-template-rows: 1fr 1fr;
 59 | }
 60 | 
 61 | .min-arrow__icon, .max-arrow__icon {
 62 |   height: 1.25rem;
 63 |   margin: auto;
 64 | }
 65 | 
 66 | .max-arrow__icon {
 67 |   margin-bottom: -0.05rem;
 68 | }
 69 | 
 70 | .weather-condition__text {
 71 |   display: block;
 72 |   font-size: 1rem;
 73 |   text-transform: uppercase;
 74 |   letter-spacing: 0.1rem;
 75 |   text-align: center;
 76 | }
 77 | 
 78 | .max__text {
 79 |   color: #FF0070;
 80 | }
 81 | 
 82 | .min__text {
 83 |   color: #00FF9B;
 84 | }
 85 | 
 86 | .max__text, .min__text {
 87 |   font-size: 1rem;
 88 |   text-align: center;
 89 | }
 90 | 
 91 | .max-temperature__text, .min-temperature__text {
 92 |   text-align: center;
 93 |   font-size: 2rem;
 94 | }
 95 | 
 96 | .weather-icon__container {
 97 |   width: 10rem;
 98 |   margin-bottom: 2rem;
 99 |   display: flex;
100 |   justify-content: center;
101 | }
102 | 
103 | .weather-icon__container > svg {
104 |   width: 10rem;
105 | }
106 | 
107 | 


--------------------------------------------------------------------------------
/src/polyfills.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * This file includes polyfills needed by Angular and is loaded before the app.
 3 |  * You can add your own extra polyfills to this file.
 4 |  *
 5 |  * This file is divided into 2 sections:
 6 |  *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
 7 |  *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
 8 |  *      file.
 9 |  *
10 |  * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
11 |  * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
12 |  * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
13 |  *
14 |  * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html
15 |  */
16 | /***************************************************************************************************
17 |  * BROWSER POLYFILLS
18 |  */
19 | /** IE9, IE10 and IE11 requires all of the following polyfills. **/
20 | // import 'core-js/es6/symbol';
21 | // import 'core-js/es6/object';
22 | // import 'core-js/es6/function';
23 | // import 'core-js/es6/parse-int';
24 | // import 'core-js/es6/parse-float';
25 | // import 'core-js/es6/number';
26 | // import 'core-js/es6/math';
27 | // import 'core-js/es6/string';
28 | // import 'core-js/es6/date';
29 | // import 'core-js/es6/array';
30 | // import 'core-js/es6/regexp';
31 | // import 'core-js/es6/map';
32 | // import 'core-js/es6/weak-map';
33 | // import 'core-js/es6/set';
34 | /** IE10 and IE11 requires the following for NgClass support on SVG elements */
35 | // import 'classlist.js';  // Run `npm install --save classlist.js`.
36 | /** IE10 and IE11 requires the following for the Reflect API. */
37 | // import 'core-js/es6/reflect';
38 | /** Evergreen browsers require these. **/
39 | // Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.
40 | import 'core-js/es7/reflect';
41 | /**
42 |  * Web Animations `@angular/platform-browser/animations`
43 |  * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
44 |  * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
45 |  **/
46 | // import 'web-animations-js';  // Run `npm install --save web-animations-js`.
47 | /**
48 |  * By default, zone.js will patch all possible macroTask and DomEvents
49 |  * user can disable parts of macroTask/DomEvents patch by setting following flags
50 |  */
51 | // (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
52 | // (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
53 | // (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
54 | /*
55 | * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
56 | * with the following flag, it will bypass `zone.js` patch for IE/Edge
57 | */
58 | // (window as any).__Zone_enable_cross_context_check = true;
59 | /***************************************************************************************************
60 |  * Zone JS is required by default for Angular itself.
61 |  */
62 | import 'zone.js/dist/zone'; // Included with Angular CLI.
63 | 
64 | 
65 | /***************************************************************************************************
66 |  * APPLICATION IMPORTS
67 |  */
68 | 


--------------------------------------------------------------------------------
/src/app/pages/details/details.component.ts:
--------------------------------------------------------------------------------
 1 | import {Component, OnInit} from '@angular/core';
 2 | import {ActivatedRoute} from '@angular/router';
 3 | import {WeatherService} from '../../services/weather/weather.service';
 4 | 
 5 | @Component({
 6 |   selector: 'app-details',
 7 |   templateUrl: './details.component.html',
 8 |   styleUrls: ['./details.component.css']
 9 | })
10 | export class DetailsComponent implements OnInit {
11 | 
12 |   city: string;
13 |   state: string;
14 |   temp: number;
15 |   hum: number;
16 |   wind: number;
17 | 
18 |   today: string;
19 | 
20 |   day1Name: string;
21 |   day1State: string;
22 |   day1Temp: number;
23 | 
24 | 
25 |   day2Name: string;
26 |   day2State: string;
27 |   day2Temp: number;
28 | 
29 |   day3Name: string;
30 |   day3State: string;
31 |   day3Temp: number;
32 | 
33 |   day4Name: string;
34 |   day4State: string;
35 |   day4Temp: number;
36 | 
37 |   day5Name: string;
38 |   day5State: string;
39 |   day5Temp: number;
40 | 
41 |   constructor(public activeRouter: ActivatedRoute, public weather: WeatherService) {
42 |   }
43 | 
44 |   ngOnInit() {
45 | 
46 |     const todayNumberInWeek = new Date().getDay();
47 |     const days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
48 |     this.today = days[todayNumberInWeek];
49 | 
50 |     this.activeRouter.paramMap.subscribe((route: any) => {
51 | 
52 |       this.city = route.params.city;
53 |       this.weather.getWeatherState(this.city).subscribe((state) => this.state = state);
54 |       this.weather.getCurrentTemp(this.city).subscribe((temperature) => this.temp = temperature);
55 |       this.weather.getCurrentHum(this.city).subscribe((humidity) => this.hum = humidity);
56 |       this.weather.getCurrentWind(this.city).subscribe((windspeed) => this.wind = windspeed);
57 |       this.weather.getForecast(this.city).subscribe((data: any) => {
58 |         console.log(data);
59 |         for (let i = 0; i < data.length; i++) {
60 |           const date = new Date(data[i].dt_txt).getDay();
61 |           console.log(days[date]);
62 |           if (((date === todayNumberInWeek + 1) || (todayNumberInWeek === 6 && date === 0)) && !this.day1Name) {
63 |             this.day1Name = days[date];
64 |             this.day1State = data[i].weather[0].main;
65 |             this.day1Temp = Math.round(data[i].main.temp);
66 | 
67 |           } else if (!!this.day1Name && !this.day2Name && days[date] !== this.day1Name) {
68 |             this.day2Name = days[date];
69 |             this.day2State = data[i].weather[0].main;
70 |             this.day2Temp = Math.round(data[i].main.temp);
71 | 
72 |           } else if (!!this.day2Name && !this.day3Name && days[date] !== this.day2Name) {
73 |             this.day3Name = days[date];
74 |             this.day3State = data[i].weather[0].main;
75 |             this.day3Temp = Math.round(data[i].main.temp);
76 | 
77 |           } else if (!!this.day3Name && !this.day4Name && days[date] !== this.day3Name) {
78 |             this.day4Name = days[date];
79 |             this.day4State = data[i].weather[0].main;
80 |             this.day4Temp = Math.round(data[i].main.temp);
81 | 
82 |           } else if (!!this.day4Name && !this.day5Name && days[date] !== this.day4Name) {
83 |             this.day5Name = days[date];
84 |             this.day5State = data[i].weather[0].main;
85 |             this.day5Temp = Math.round(data[i].main.temp);
86 | 
87 |           }
88 |         }
89 |       });
90 | 
91 |     });
92 | 
93 |   }
94 | 
95 | }
96 | 
97 | 


--------------------------------------------------------------------------------
/tslint.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "rulesDirectory": [
  3 |     "node_modules/codelyzer"
  4 |   ],
  5 |   "rules": {
  6 |     "arrow-return-shorthand": true,
  7 |     "callable-types": true,
  8 |     "class-name": true,
  9 |     "comment-format": [
 10 |       true,
 11 |       "check-space"
 12 |     ],
 13 |     "curly": true,
 14 |     "deprecation": {
 15 |       "severity": "warn"
 16 |     },
 17 |     "eofline": true,
 18 |     "forin": true,
 19 |     "import-blacklist": [
 20 |       true,
 21 |       "rxjs/Rx"
 22 |     ],
 23 |     "import-spacing": true,
 24 |     "indent": [
 25 |       true,
 26 |       "spaces"
 27 |     ],
 28 |     "interface-over-type-literal": true,
 29 |     "label-position": true,
 30 |     "max-line-length": [
 31 |       true,
 32 |       140
 33 |     ],
 34 |     "member-access": false,
 35 |     "member-ordering": [
 36 |       true,
 37 |       {
 38 |         "order": [
 39 |           "static-field",
 40 |           "instance-field",
 41 |           "static-method",
 42 |           "instance-method"
 43 |         ]
 44 |       }
 45 |     ],
 46 |     "no-arg": true,
 47 |     "no-bitwise": true,
 48 |     "no-console": [
 49 |       true,
 50 |       "debug",
 51 |       "info",
 52 |       "time",
 53 |       "timeEnd",
 54 |       "trace"
 55 |     ],
 56 |     "no-construct": true,
 57 |     "no-debugger": true,
 58 |     "no-duplicate-super": true,
 59 |     "no-empty": false,
 60 |     "no-empty-interface": true,
 61 |     "no-eval": true,
 62 |     "no-inferrable-types": [
 63 |       true,
 64 |       "ignore-params"
 65 |     ],
 66 |     "no-misused-new": true,
 67 |     "no-non-null-assertion": true,
 68 |     "no-shadowed-variable": true,
 69 |     "no-string-literal": false,
 70 |     "no-string-throw": true,
 71 |     "no-switch-case-fall-through": true,
 72 |     "no-trailing-whitespace": true,
 73 |     "no-unnecessary-initializer": true,
 74 |     "no-unused-expression": true,
 75 |     "no-use-before-declare": true,
 76 |     "no-var-keyword": true,
 77 |     "object-literal-sort-keys": false,
 78 |     "one-line": [
 79 |       true,
 80 |       "check-open-brace",
 81 |       "check-catch",
 82 |       "check-else",
 83 |       "check-whitespace"
 84 |     ],
 85 |     "prefer-const": true,
 86 |     "quotemark": [
 87 |       true,
 88 |       "single"
 89 |     ],
 90 |     "radix": true,
 91 |     "semicolon": [
 92 |       true,
 93 |       "always"
 94 |     ],
 95 |     "triple-equals": [
 96 |       true,
 97 |       "allow-null-check"
 98 |     ],
 99 |     "typedef-whitespace": [
100 |       true,
101 |       {
102 |         "call-signature": "nospace",
103 |         "index-signature": "nospace",
104 |         "parameter": "nospace",
105 |         "property-declaration": "nospace",
106 |         "variable-declaration": "nospace"
107 |       }
108 |     ],
109 |     "unified-signatures": true,
110 |     "variable-name": false,
111 |     "whitespace": [
112 |       true,
113 |       "check-branch",
114 |       "check-decl",
115 |       "check-operator",
116 |       "check-separator",
117 |       "check-type"
118 |     ],
119 |     "no-output-on-prefix": true,
120 |     "use-input-property-decorator": true,
121 |     "use-output-property-decorator": true,
122 |     "use-host-property-decorator": true,
123 |     "no-input-rename": true,
124 |     "no-output-rename": true,
125 |     "use-life-cycle-interface": true,
126 |     "use-pipe-transform-interface": true,
127 |     "component-class-suffix": true,
128 |     "directive-class-suffix": true
129 |   }
130 | }
131 | 


--------------------------------------------------------------------------------
/src/app/app.component.html:
--------------------------------------------------------------------------------
 1 | <!-- Slide Menu-->
 2 | <aside class="side-menu__container" [ngClass]="{'side-menu__container-active': showMenu}" (click)="toggleMenu()">
 3 |   <nav class="slide-menu" [ngClass]="{'slide-menu-active': showMenu}" (click)="$event.stopImmediatePropagation();">
 4 |     <section class="menu-header">
 5 |       <span class="greeting__text">Welcome Back</span>
 6 |       <div class="profile-image__container">
 7 |         <img src="https://avatars3.githubusercontent.com/u/5658460?s=460&v=4" alt="profile-image"
 8 |              class="profile__image">
 9 |       </div>
10 |       <div class="account-details">
11 |         <span class="name__text">Hamed Baatour</span>
12 |         <span class="email__text">hamedbaatour@gmail.com</span>
13 |       </div>
14 |     </section>
15 |     <section class="menu-body">
16 | 
17 |     </section>
18 |     <section class="menu-footer">
19 | 
20 |     </section>
21 |   </nav>
22 | </aside>
23 | 
24 | <div class="root__container">
25 |   <header [ngClass]="{'main__header-dark': darkModeActive}" class="main__header">
26 | 
27 |     <div class="left__section">
28 |       <svg (click)="toggleMenu()" class="hamburger__icon" id="Menu_Burger_Icon" data-name="Menu Burger Icon"
29 |            viewBox="31.5 30 49.9 32">
30 |         <defs>
31 |           <style>.hamburger__icon__fill {
32 |             fill: #594e78
33 |           }</style>
34 |         </defs>
35 |         <rect id="Rectangle_9" width="49.9" height="4" [ngClass]="{'hamburger__icon__fill-dark': darkModeActive}"
36 |               class="hamburger__icon__fill" data-name="Rectangle 9" rx="2"
37 |               transform="translate(31.5 58)"/>
38 |         <rect id="Rectangle_10" width="49.9" height="4" [ngClass]="{'hamburger__icon__fill-dark': darkModeActive}"
39 |               class="hamburger__icon__fill" data-name="Rectangle 10" rx="2"
40 |               transform="translate(31.5 44)"/>
41 |         <rect id="Rectangle_11" width="49.9" height="4" [ngClass]="{'hamburger__icon__fill-dark': darkModeActive}"
42 |               class="hamburger__icon__fill" data-name="Rectangle 11" rx="2"
43 |               transform="translate(31.5 30)"/>
44 |       </svg>
45 | 
46 |       <svg class="logo__icon" viewBox="150.3 22.2 213.7 42.8">
47 |         <path fill="#00ff9b" d="M150.3 65V22.2L193 65z" data-name="Path 1"/>
48 |         <path fill="#003eff" d="M193.1 65h-42.8L193 22.2z" data-name="Path 2"/>
49 |         <text [ngClass]="{'logo__text-dark': darkModeActive}" class="logo__text" fill="#432c85"
50 |               font-family="SegoeUI-Semibold,Segoe UI" font-size="30" font-weight="600"
51 |               letter-spacing=".1em" transform="translate(237 56)">
52 |           <tspan x="0" y="0">Minimis</tspan>
53 |         </text>
54 |       </svg>
55 | 
56 |     </div>
57 | 
58 |     <h3 class="date__text">Today</h3>
59 | 
60 | 
61 |     <div class="mode-toggle__container">
62 |       <span class="mode-toggle__text">Light</span>
63 | 
64 |       <label class="toggle-button__container">
65 |         <input (click)="modeToggleSwitch()" type="checkbox" class="mode-toggle__input"/>
66 |         <span [ngClass]="{'mode-toggle__bg-checked': darkModeActive}" class="mode-toggle__bg"></span>
67 |         <span [ngClass]="{'mode-toggle__circle-checked': darkModeActive}" class="mode-toggle__circle"></span>
68 |       </label>
69 | 
70 | 
71 |       <span class="mode-toggle__text">Dark</span>
72 |     </div>
73 | 
74 |   </header>
75 | 
76 |   <!-- Main Content -->
77 | 
78 |   <!--<router-outlet></router-outlet>-->
79 |   <main class="main__container">
80 |     <div class="main-container__bg" [ngClass]="{'main-container__bg-dark': darkModeActive}"></div>
81 |     <router-outlet></router-outlet>
82 |   </main>
83 | 
84 |   <!-- Footer -->
85 | 
86 |   <footer class="main__footer">
87 |     <small class="copyright__text">Copyright © 2018 Minimus</small>
88 |   </footer>
89 | </div>
90 | 


--------------------------------------------------------------------------------
/angular.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  3 |   "version": 1,
  4 |   "newProjectRoot": "projects",
  5 |   "projects": {
  6 |     "Minimus": {
  7 |       "root": "",
  8 |       "sourceRoot": "src",
  9 |       "projectType": "application",
 10 |       "prefix": "app",
 11 |       "schematics": {},
 12 |       "architect": {
 13 |         "build": {
 14 |           "builder": "@angular-devkit/build-angular:browser",
 15 |           "options": {
 16 |             "outputPath": "dist/Minimus",
 17 |             "index": "src/index.html",
 18 |             "main": "src/main.ts",
 19 |             "polyfills": "src/polyfills.ts",
 20 |             "tsConfig": "src/tsconfig.app.json",
 21 |             "assets": [
 22 |               "src/favicon.ico",
 23 |               "src/assets"
 24 |             ],
 25 |             "styles": [
 26 |               "src/styles.css"
 27 |             ],
 28 |             "scripts": []
 29 |           },
 30 |           "configurations": {
 31 |             "production": {
 32 |               "fileReplacements": [
 33 |                 {
 34 |                   "replace": "src/environments/environment.ts",
 35 |                   "with": "src/environments/environment.prod.ts"
 36 |                 }
 37 |               ],
 38 |               "optimization": true,
 39 |               "outputHashing": "all",
 40 |               "sourceMap": false,
 41 |               "extractCss": true,
 42 |               "namedChunks": false,
 43 |               "aot": true,
 44 |               "extractLicenses": true,
 45 |               "vendorChunk": false,
 46 |               "buildOptimizer": true
 47 |             }
 48 |           }
 49 |         },
 50 |         "serve": {
 51 |           "builder": "@angular-devkit/build-angular:dev-server",
 52 |           "options": {
 53 |             "browserTarget": "Minimus:build"
 54 |           },
 55 |           "configurations": {
 56 |             "production": {
 57 |               "browserTarget": "Minimus:build:production"
 58 |             }
 59 |           }
 60 |         },
 61 |         "extract-i18n": {
 62 |           "builder": "@angular-devkit/build-angular:extract-i18n",
 63 |           "options": {
 64 |             "browserTarget": "Minimus:build"
 65 |           }
 66 |         },
 67 |         "test": {
 68 |           "builder": "@angular-devkit/build-angular:karma",
 69 |           "options": {
 70 |             "main": "src/test.ts",
 71 |             "polyfills": "src/polyfills.ts",
 72 |             "tsConfig": "src/tsconfig.spec.json",
 73 |             "karmaConfig": "src/karma.conf.js",
 74 |             "styles": [
 75 |               "styles.css"
 76 |             ],
 77 |             "scripts": [],
 78 |             "assets": [
 79 |               "src/favicon.ico",
 80 |               "src/assets"
 81 |             ]
 82 |           }
 83 |         },
 84 |         "lint": {
 85 |           "builder": "@angular-devkit/build-angular:tslint",
 86 |           "options": {
 87 |             "tsConfig": [
 88 |               "src/tsconfig.app.json",
 89 |               "src/tsconfig.spec.json"
 90 |             ],
 91 |             "exclude": [
 92 |               "**/node_modules/**"
 93 |             ]
 94 |           }
 95 |         }
 96 |       }
 97 |     },
 98 |     "Minimus-e2e": {
 99 |       "root": "e2e/",
100 |       "projectType": "application",
101 |       "architect": {
102 |         "e2e": {
103 |           "builder": "@angular-devkit/build-angular:protractor",
104 |           "options": {
105 |             "protractorConfig": "e2e/protractor.conf.js",
106 |             "devServerTarget": "Minimus:serve"
107 |           }
108 |         },
109 |         "lint": {
110 |           "builder": "@angular-devkit/build-angular:tslint",
111 |           "options": {
112 |             "tsConfig": "e2e/tsconfig.e2e.json",
113 |             "exclude": [
114 |               "**/node_modules/**"
115 |             ]
116 |           }
117 |         }
118 |       }
119 |     }
120 |   },
121 |   "defaultProject": "Minimus"
122 | }


--------------------------------------------------------------------------------
/src/app/ui/weather-card/weather-card.component.html:
--------------------------------------------------------------------------------
 1 | <section class="weather__card" (click)="openDetails()" [ngClass]="{'weather__card-dark': darkMode}">
 2 |   <span class="city-name__text">Paris</span>
 3 |   <div class="weather-icon__container" [ngSwitch]="true">
 4 |     <svg *ngSwitchCase="condition === 'Clouds'" viewBox="2436.9 -843.1 275.5 274.1">
 5 |       <g data-name="cloudy icon" transform="translate(84 790)">
 6 |         <circle cx="137" cy="137" r="137" fill="#fff" data-name="Ellipse 23" transform="translate(2354 -1633)"/>
 7 |         <path fill="#ffde17"
 8 |               d="M2523.4-1361.5a37.2 37.2 0 0 0 8.4-23.4c0-22-19.8-40-44.1-40l-3.4.1h-.5a39.8 39.8 0 0 0-39.4-33.7 40.1 40.1 0 0 0-10 1.2 40 40 0 0 0-35.2-21.2 40.1 40.1 0 0 0-38.5 29 137.4 137.4 0 0 1-7.8-45.8 138.8 138.8 0 0 1 2.8-27.8 137 137 0 0 1 8-25.8 137.8 137.8 0 0 1 12.7-23.4 138.8 138.8 0 0 1 16.8-20.4 138.8 138.8 0 0 1 20.4-16.9 137.8 137.8 0 0 1 23.4-12.7 137 137 0 0 1 25.9-8 138.8 138.8 0 0 1 27.7-2.8 138.8 138.8 0 0 1 27.8 2.8 137 137 0 0 1 25.9 8 137.8 137.8 0 0 1 23.4 12.7 138.8 138.8 0 0 1 20.4 16.9 138.7 138.7 0 0 1 16.8 20.4 137.8 137.8 0 0 1 12.7 23.4 137 137 0 0 1 8 25.8 138.8 138.8 0 0 1 2.8 27.8 137.4 137.4 0 0 1-8 46.1 137.2 137.2 0 0 1-21.9 39.6 138.2 138.2 0 0 1-33.2 30.1 136.8 136.8 0 0 1-41.9 18z"
 9 |               data-name="Subtraction 1"/>
10 |       </g>
11 |     </svg>
12 | 
13 |     <svg *ngSwitchCase="condition === 'Rain' || condition === 'Drizzle'" viewBox="3170 -843.1 163.5 242.7">
14 |       <g data-name="Rain Icon">
15 |         <g data-name="Water Drops">
16 |           <path fill="#0032cc" d="M3295.4-824.5s85.8 133.5 0 133.5 0-133.5 0-133.5z" data-name="Path 7"/>
17 |           <path fill="#003eff" d="M3239.4-843s-156.1 242.6 0 242.6 0-242.7 0-242.7z" data-name="Path 3"/>
18 |         </g>
19 |       </g>
20 |     </svg>
21 | 
22 |     <svg *ngSwitchCase="condition === 'Storm'" viewBox="3487.9 -810.7 291.2 200.3">
23 |       <g data-name="Strom icon" transform="translate(1959 -1260.7)">
24 |         <ellipse cx="55.3" cy="51.7" class="cls-1" data-name="Ellipse 14" rx="55.3" ry="51.7"
25 |                  transform="translate(1529 490.4)"/>
26 |         <ellipse cx="55.3" cy="51.7" class="cls-1" data-name="Ellipse 15" rx="55.3" ry="51.7"
27 |                  transform="translate(1569.6 467.8)"/>
28 |         <circle cx="55.3" cy="55.3" r="55.3" class="cls-1" data-name="Ellipse 16"
29 |                 transform="translate(1618.9 476.8)"/>
30 |         <ellipse cx="55.3" cy="51.7" class="cls-1" data-name="Ellipse 17" rx="55.3" ry="51.7"
31 |                  transform="translate(1631.8 450)"/>
32 |         <ellipse cx="55.3" cy="51.7" class="cls-1" data-name="Ellipse 18" rx="55.3" ry="51.7"
33 |                  transform="translate(1687.1 477.5)"/>
34 |         <ellipse cx="55.3" cy="51.7" class="cls-1" data-name="Ellipse 19" rx="55.3" ry="51.7"
35 |                  transform="translate(1709.6 507.3)"/>
36 |         <circle cx="55.3" cy="55.3" r="55.3" class="cls-1" data-name="Ellipse 20"
37 |                 transform="translate(1639.6 500.1)"/>
38 |         <ellipse cx="55.3" cy="51.7" class="cls-1" data-name="Ellipse 21" rx="55.3" ry="51.7"
39 |                  transform="translate(1569.6 507.3)"/>
40 |         <path fill="none" stroke="#fd0" stroke-width="18"
41 |               d="M1732.5 644l-61.4-61.4 22.5-10.3 26.8 5.1 9.5-22.4-38-37.2" data-name="Path 59"/>
42 |         <path fill="none" stroke="#fd0" stroke-width="15" d="M1597.2 539.5l31.2 25.9-24.8 22.2 17.3 36.2"
43 |               data-name="Path 60"/>
44 |       </g>
45 |     </svg>
46 | 
47 | 
48 |     <svg *ngSwitchCase="condition === 'Sunny' || condition === 'Clear'" viewBox="2050 -845 262 262">
49 |       <circle cx="131" cy="131" r="131" fill="#ffde17" data-name="Sun Icon" transform="translate(2050 -845)"/>
50 |     </svg>
51 | 
52 |   </div>
53 |   <div class="temperature-text__container">
54 |     <span class="temperature__text">{{ currentTemp }}</span>
55 |     <span class="temperature-metric__text">°</span>
56 |     <span class="weather-condition__text">{{ condition }}</span>
57 |   </div>
58 |   <section class="min-max__container">
59 |     <div class="min__container">
60 |       <svg class="min-arrow__icon" viewBox="188.5 807 21 21">
61 |         <path fill="#00ff9b" d="M209.5 817.5h-21L199 828z" data-name="Min Arrow"/>
62 |       </svg>
63 | 
64 |       <span class="min-temperature__text">{{ minTemp }}</span>
65 |       <span class="min__text">Min</span>
66 |     </div>
67 |     <div class="max__container">
68 |       <svg class="max-arrow__icon" viewBox="449.5 820 21 21">
69 |         <path fill="red" d="M449.5 830.5h21L460 820z" data-name="Max Arrow"/>
70 |       </svg>
71 |       <span class="max-temperature__text">{{ maxTemp }}</span>
72 |       <span class="max__text">Max</span>
73 |     </div>
74 |   </section>
75 | </section>
76 | 


--------------------------------------------------------------------------------
/src/app/services/weather/weather.service.ts:
--------------------------------------------------------------------------------
  1 | import {Injectable} from '@angular/core';
  2 | import {HttpClient} from '@angular/common/http';
  3 | import {Subject} from 'rxjs';
  4 | 
  5 | @Injectable()
  6 | export class WeatherService {
  7 | 
  8 |   constructor(public http: HttpClient) {
  9 |   }
 10 | 
 11 |   getCityWeatherByName(city: string, metric: 'metric' | 'imperial' = 'metric'): Subject<string> {
 12 |     const dataSub = new Subject<string>();
 13 |     this.http.get(
 14 |       `https://api.openweathermap.org/data/2.5/weather?q=${city}&units=${metric}&APPID=952d6b1a52fe15a7b901720074680562`)
 15 |       .subscribe((data) => {
 16 |         dataSub.next(data['weather']);
 17 |       }, (err) => {
 18 |         console.log(err);
 19 |       });
 20 |     return dataSub;
 21 |   }
 22 | 
 23 |   getCitiesWeathersByNames(cities: Array<string>, metric: 'metric' | 'imperial' = 'metric'): Subject<any> {
 24 |     const citiesSubject = new Subject();
 25 |     cities.forEach((city) => {
 26 |       citiesSubject.next(this.http.get(
 27 |         `https://api.openweathermap.org/data/2.5/weather?q=${city}&units=${metric}&APPID=952d6b1a52fe15a7b901720074680562`));
 28 |     });
 29 |     return citiesSubject;
 30 |   }
 31 | 
 32 |   getWeatherState(city: string): Subject<string> {
 33 |     const dataSubject = new Subject<string>();
 34 |     this.http.get(
 35 |       `https://api.openweathermap.org/data/2.5/weather?q=${city}&APPID=952d6b1a52fe15a7b901720074680562`)
 36 |       .subscribe((data) => {
 37 |         dataSubject.next(data['weather'][0].main);
 38 |       });
 39 |     return dataSubject;
 40 |   }
 41 | 
 42 |   getCurrentTemp(city: string, metric: 'metric' | 'imperial' = 'metric'): Subject<number> {
 43 |     const dataSubject = new Subject<number>();
 44 |     this.http.get(
 45 |       `https://api.openweathermap.org/data/2.5/weather?q=${city}&units=${metric}&APPID=952d6b1a52fe15a7b901720074680562`)
 46 |       .subscribe((weather: any) => {
 47 |         dataSubject.next(Math.round(Number(weather.main.temp)));
 48 |       });
 49 |     return dataSubject;
 50 |   }
 51 | 
 52 | 
 53 |   getCurrentHum(city: string, metric: 'metric' | 'imperial' = 'metric'): Subject<number> {
 54 |     const dataSubject = new Subject<number>();
 55 |     this.http.get(
 56 |       `https://api.openweathermap.org/data/2.5/weather?q=${city}&units=${metric}&APPID=952d6b1a52fe15a7b901720074680562`)
 57 |       .subscribe((weather: any) => {
 58 |         console.log(weather);
 59 |         dataSubject.next(weather.main.humidity);
 60 |       });
 61 |     return dataSubject;
 62 |   }
 63 | 
 64 | 
 65 |   getCurrentWind(city: string, metric: 'metric' | 'imperial' = 'metric'): Subject<number> {
 66 |     const dataSubject = new Subject<number>();
 67 |     this.http.get(
 68 |       `https://api.openweathermap.org/data/2.5/weather?q=${city}&units=${metric}&APPID=952d6b1a52fe15a7b901720074680562`)
 69 |       .subscribe((weather: any) => {
 70 |         dataSubject.next(Math.round(Math.round(weather.wind.speed)));
 71 |       });
 72 |     return dataSubject;
 73 |   }
 74 | 
 75 | 
 76 |   getMaxTemp(city: string, metric: 'metric' | 'imperial' = 'metric'): Subject<number> {
 77 |     const dataSubject = new Subject<number>();
 78 |     let max: number;
 79 |     this.http.get(
 80 |       `https://api.openweathermap.org/data/2.5/forecast?q=${city}&units=${metric}&APPID=952d6b1a52fe15a7b901720074680562`)
 81 |       .subscribe((weather: any) => {
 82 |         max = weather.list[0].main.temp;
 83 |         weather.list.forEach((value) => {
 84 |           if (max < value.main.temp) {
 85 |             max = value.main.temp;
 86 |           }
 87 |         });
 88 |         dataSubject.next(Math.round(max));
 89 |       });
 90 |     return dataSubject;
 91 |   }
 92 | 
 93 |   getMinTemp(city: string, metric: 'metric' | 'imperial' = 'metric'): Subject<number> {
 94 |     const dataSubject = new Subject<number>();
 95 |     let min: number;
 96 |     this.http.get(
 97 |       `https://api.openweathermap.org/data/2.5/forecast?q=${city}&units=${metric}&APPID=952d6b1a52fe15a7b901720074680562`)
 98 |       .subscribe((weather: any) => {
 99 |         min = weather.list[0].main.temp;
100 |         weather.list.forEach((value) => {
101 |           if (min > value.main.temp) {
102 |             min = value.main.temp;
103 |           }
104 |         });
105 |         dataSubject.next(Math.round(min));
106 |       });
107 |     return dataSubject;
108 |   }
109 | 
110 |   getForecast(city: string, metric: 'metric' | 'imperial' = 'metric'): Subject<Array<any>> {
111 |     const dataSubject = new Subject<Array<any>>();
112 |     this.http.get(
113 |       `https://api.openweathermap.org/data/2.5/forecast?q=${city}&units=${metric}&APPID=952d6b1a52fe15a7b901720074680562`)
114 |       .subscribe((weather: any) => {
115 |         dataSubject.next(weather.list);
116 |       });
117 |     return dataSubject;
118 |   }
119 | 
120 | }
121 | 


--------------------------------------------------------------------------------
/src/app/pages/details/details.component.css:
--------------------------------------------------------------------------------
  1 | .details-page__wrapper-dark {
  2 |   background: linear-gradient(#FC7DB8, #495CFC);
  3 |   height: 100%;
  4 |   width: 100%;
  5 |   display: flex;
  6 |   justify-content: center;
  7 |   align-items: center;
  8 |   position: relative;
  9 |   overflow: hidden;
 10 | }
 11 | 
 12 | .background-gradient__circle {
 13 |   position: absolute;
 14 |   top: 50%;
 15 |   right: 0;
 16 |   transform: translateY(-50%);
 17 |   z-index: 1;
 18 |   height: 120%;
 19 | }
 20 | 
 21 | .main-weather__card-dark {
 22 |   background-color: white;
 23 |   height: 85%;
 24 |   width: 60%;
 25 |   border-radius: 1rem;
 26 |   position: relative;
 27 |   z-index: 3;
 28 |   display: grid;
 29 |   grid-template-columns: 1fr;
 30 |   grid-template-rows: 0.5fr 1.25fr;
 31 |   justify-items: center;
 32 | }
 33 | 
 34 | .card-header__container-dark {
 35 |   width: 100%;
 36 |   max-height: 20rem;
 37 |   position: relative;
 38 |   z-index: 1;
 39 | }
 40 | 
 41 | .back__button {
 42 |   position: absolute;
 43 |   top: 2rem;
 44 |   left: 2.25rem;
 45 |   width: 5rem;
 46 |   cursor: pointer;
 47 |   z-index: 3;
 48 | }
 49 | 
 50 | .city__illustration {
 51 |   width: 100%;
 52 |   border-radius: 1rem 1rem 0 0;
 53 |   position: relative;
 54 | }
 55 | 
 56 | .header-content__wrapper {
 57 |   position: absolute;
 58 |   z-index: 2;
 59 |   color: white;
 60 |   top: 0;
 61 |   display: grid;
 62 |   grid-template-rows: 1fr;
 63 |   grid-template-columns: repeat(2, 1fr);
 64 |   width: 100%;
 65 |   height: 100%;
 66 | }
 67 | 
 68 | .temperature__text {
 69 |   font-size: 6rem;
 70 |   letter-spacing: 0.75rem;
 71 | }
 72 | 
 73 | .city-name__container {
 74 |   display: flex;
 75 |   justify-content: center;
 76 |   align-items: center;
 77 |   padding-bottom: 25%;
 78 | }
 79 | 
 80 | .city-name__underline {
 81 |   background: transparent;
 82 |   border-radius: 5px;
 83 |   height: 5px;
 84 |   box-shadow: 0 3rem 0 0 #ffffff;
 85 | }
 86 | 
 87 | .city-name__text {
 88 |   text-transform: uppercase;
 89 |   letter-spacing: 0.3rem;
 90 |   font-size: 1.75rem;
 91 |   padding-bottom: 2rem;
 92 | }
 93 | 
 94 | .today-weather__container {
 95 |   align-self: center;
 96 |   justify-self: center;
 97 |   display: grid;
 98 |   width: 100%;
 99 |   grid-template-rows: 3fr 1fr;
100 |   grid-template-columns: 1fr;
101 |   justify-items: center;
102 |   grid-gap: 2rem;
103 | }
104 | 
105 | .temp-state__container {
106 |   display: flex;
107 |   justify-content: center;
108 |   flex-flow: column;
109 | }
110 | 
111 | .weather-state__text {
112 |   letter-spacing: 0.5rem;
113 |   font-size: 1.15rem;
114 |   text-transform: uppercase;
115 |   margin-top: 0.25rem;
116 | }
117 | 
118 | .hum-wind__container {
119 |   display: flex;
120 |   align-items: center;
121 |   margin-left: -4rem;
122 | }
123 | 
124 | .hum-wind__separator {
125 |   margin: 0 2rem;
126 |   width: 2px;
127 |   height: 2.5rem;
128 |   background-color: white;
129 | }
130 | 
131 | .hum__text, .wind__text {
132 |   text-transform: uppercase;
133 |   letter-spacing: 0.2rem;
134 |   font-size: 0.8rem;
135 |   margin-bottom: 1rem;
136 | }
137 | 
138 | .hum__container, .wind__container {
139 |   display: flex;
140 |   flex-flow: column;
141 |   justify-content: center;
142 |   align-items: center;
143 | }
144 | 
145 | /*
146 | ================
147 |      BODY
148 | ================
149 | */
150 | 
151 | .body-content__wrapper {
152 |   display: grid;
153 |   grid-template-columns: 1fr 1.75fr;
154 |   grid-template-rows: 1fr;
155 |   justify-items: center;
156 |   box-sizing: border-box;
157 |   grid-column-gap: 1rem;
158 |   width: 100%;
159 |   padding: 2rem;
160 | }
161 | 
162 | .forecast__container {
163 |   display: flex;
164 |   flex-flow: row;
165 |   align-items: center;
166 |   align-self: center;
167 |   justify-self: center;
168 | }
169 | 
170 | .twitter-feed__container {
171 |   margin-top: 1rem;
172 |   width: 100%;
173 | }
174 | 
175 | .twitter-feed__text {
176 |   color: #0c1066;
177 |   font-size: 1.25rem;
178 | }
179 | 
180 | .twitter__icon {
181 |   width: 1.5rem;
182 | }
183 | 
184 | .twitter-feed-tag__text {
185 |   font-size: 0.85rem;
186 |   color: #5f84fb;
187 |   letter-spacing: 0.1rem;
188 |   text-transform: uppercase;
189 | }
190 | 
191 | .twitter-feed__header {
192 |   display: grid;
193 |   grid-template-rows: 2rem;
194 |   grid-template-columns: 0.5fr 1.5fr 1fr;
195 |   align-items: center;
196 |   justify-items: center;
197 |   width: 100%;
198 | }
199 | 
200 | .day-weather__container {
201 |   display: flex;
202 |   flex-flow: column;
203 |   margin: 2rem 1.5rem;
204 |   justify-content: center;
205 |   align-items: center;
206 | }
207 | 
208 | .day-name__text {
209 |   font-size: 1.5rem;
210 |   color: #39437a;
211 |   font-weight: bold;
212 |   text-transform: uppercase;
213 |   margin-bottom: 0.5rem;
214 | }
215 | 
216 | .forecast-condition__icon {
217 |   height: 4rem;
218 | }
219 | 
220 | .day-temp__text {
221 |   font-size: 1.85rem;
222 |   color: #0c1066;
223 |   letter-spacing: 0.25rem;
224 |   margin: 0.75rem 0;
225 |   text-align: center;
226 |   padding-left: 0.35rem;
227 | }
228 | 
229 | .day-state__text {
230 | 
231 |   font-size: 0.65rem;
232 |   text-transform: uppercase;
233 |   letter-spacing: 0.2rem;
234 |   color: #2B244D;
235 | }
236 | 


--------------------------------------------------------------------------------
/src/app/app.component.css:
--------------------------------------------------------------------------------
  1 | .root__container {
  2 |   width: 100vw;
  3 |   height: 100vh;
  4 |   display: grid;
  5 |   grid-template-columns: auto;
  6 |   grid-template-rows: 0.5fr auto;
  7 |   position: relative;
  8 | }
  9 | 
 10 | /*
 11 | ================
 12 |     Header
 13 | ================
 14 | */
 15 | 
 16 | /*
 17 |     Slide Menu
 18 | = = = = = = = = =
 19 | */
 20 | .side-menu__container {
 21 |   position: fixed;
 22 |   left: 0;
 23 |   top: 0;
 24 |   width: 100%;
 25 |   height: 100%;
 26 |   overflow: hidden;
 27 |   pointer-events: none;
 28 |   z-index: 25;
 29 | }
 30 | 
 31 | .side-menu__container-active {
 32 |   pointer-events: auto;
 33 | }
 34 | 
 35 | .side-menu__container::before {
 36 |   content: '';
 37 |   cursor: pointer;
 38 |   position: absolute;
 39 |   display: block;
 40 |   top: 0;
 41 |   left: 0;
 42 |   height: 100%;
 43 |   width: 100%;
 44 |   background-color: #0c1066;
 45 |   opacity: 0;
 46 |   transition: opacity 300ms linear;
 47 |   will-change: opacity;
 48 | }
 49 | 
 50 | .side-menu__container-active::before {
 51 |   opacity: 0.3;
 52 | }
 53 | 
 54 | .slide-menu {
 55 |   box-sizing: border-box;
 56 |   transform: translateX(-103%);
 57 |   position: relative;
 58 |   top: 0;
 59 |   left: 0;
 60 |   z-index: 10;
 61 |   height: 100%;
 62 |   width: 90%;
 63 |   max-width: 26rem;
 64 |   background-color: white;
 65 |   box-shadow: 0 0 2rem rgba(0, 0, 255, 0.1);
 66 |   display: grid;
 67 |   grid-template-columns: 1fr;
 68 |   grid-template-rows: 2fr 4fr 1fr;
 69 |   grid-gap: 1rem;
 70 |   transition: transform 300ms linear;
 71 |   will-change: transform;
 72 | }
 73 | 
 74 | .slide-menu-active {
 75 |   transform: none;
 76 | }
 77 | 
 78 | .menu-header {
 79 |   background: linear-gradient(to right, #00FF9B, #5f84fb);
 80 |   display: grid;
 81 |   grid-template-rows: 1fr 4fr;
 82 |   grid-template-columns: 1fr 4fr;
 83 |   grid-template-areas: "greeting greeting" "image details";
 84 |   box-sizing: border-box;
 85 |   width: 100%;
 86 |   align-content: center;
 87 |   color: white;
 88 |   box-shadow: 0 0.5rem 2rem rgba(0, 0, 255, 0.2);
 89 | }
 90 | 
 91 | .greeting__text {
 92 |   grid-area: greeting;
 93 |   font-size: 1.25rem;
 94 |   letter-spacing: 0.15rem;
 95 |   text-transform: uppercase;
 96 |   margin-top: 1rem;
 97 |   justify-self: center;
 98 |   align-self: center;
 99 | }
100 | 
101 | .account-details {
102 |   grid-area: details;
103 |   display: flex;
104 |   flex-flow: column;
105 |   margin-left: 1rem;
106 |   align-self: center;
107 | }
108 | 
109 | .name__text {
110 |   font-size: 1.15rem;
111 |   margin-bottom: 0.5rem;
112 | }
113 | 
114 | .email__text {
115 |   font-size: 0.9rem;
116 |   letter-spacing: 0.1rem;
117 | }
118 | 
119 | .menu-body {
120 |   display: grid;
121 |   width: 100%;
122 | }
123 | 
124 | .profile-image__container {
125 |   grid-area: image;
126 |   margin-right: 0.5rem;
127 |   border-radius: 50%;
128 |   height: 4rem;
129 |   width: 4rem;
130 |   overflow: hidden;
131 |   display: flex;
132 |   justify-content: center;
133 |   align-items: center;
134 |   background-color: white;
135 |   align-self: center;
136 |   margin-left: 2rem;
137 | }
138 | 
139 | .profile__image {
140 |   max-width: 4rem;
141 | }
142 | 
143 | /*Header*/
144 | .main__header {
145 |   width: 100%;
146 |   display: grid;
147 |   grid-template-columns: 1fr 1fr 0.25fr;
148 |   grid-template-rows: 1fr;
149 |   box-shadow: 0 0 2rem rgba(0, 0, 255, 0.1);
150 |   height: 4rem;
151 |   margin: 0;
152 |   align-items: center;
153 |   transition: background-color 500ms linear;
154 |   animation: fadein 1s ease-in-out 0ms 1;
155 | }
156 | 
157 | .main__header-dark {
158 |   background-color: #2B244D;
159 |   color: white;
160 | }
161 | 
162 | .toggle-button__container {
163 |   cursor: pointer;
164 |   position: relative;
165 |   margin: 0 0.5rem;
166 | }
167 | 
168 | .mode-toggle__input {
169 |   -webkit-appearance: none;
170 |   -moz-appearance: none;
171 | }
172 | 
173 | .mode-toggle__bg {
174 |   height: 1rem;
175 |   width: 2rem;
176 |   border-radius: 0.5rem;
177 |   background-color: rgba(0, 0, 0, 0.5);
178 |   display: inline-block;
179 |   transition: background-color 300ms linear;
180 | }
181 | 
182 | .mode-toggle__circle {
183 |   height: 1.30rem;
184 |   width: 1.30rem;
185 |   background-color: #2B244D;
186 |   position: absolute;
187 |   top: -0.2rem;
188 |   border-radius: 50%;
189 |   box-shadow: 0 0 0 rgba(0, 0, 255, 0.5);
190 |   transition: left 300ms linear;
191 |   left: 0.1rem;
192 | }
193 | 
194 | .mode-toggle__circle-checked {
195 |   background-color: white;
196 |   left: 1.75rem;
197 | }
198 | 
199 | .mode-toggle__bg-checked {
200 |   background-color: #FF0070;
201 | }
202 | 
203 | .mode-toggle__text {
204 |   font-size: 0.75rem;
205 |   text-transform: uppercase;
206 |   letter-spacing: 0.1rem;
207 | }
208 | 
209 | /*Content*/
210 | .left__section {
211 |   display: grid;
212 |   grid-template-rows: 1fr;
213 |   grid-template-columns: 1fr 1fr;
214 |   max-width: 5rem;
215 | }
216 | 
217 | .date__text {
218 |   text-transform: uppercase;
219 |   letter-spacing: 0.1rem;
220 |   display: inline;
221 |   margin: 0.5rem 0;
222 | }
223 | 
224 | /*SVGs*/
225 | .hamburger__icon {
226 |   position: relative;
227 |   z-index: 35;
228 |   height: 1rem;
229 |   padding: 0.5rem 1.5rem;
230 |   margin-right: 1rem;
231 |   cursor: pointer;
232 | }
233 | 
234 | .logo__icon {
235 |   height: 2rem;
236 |   margin-left: 1rem;
237 | }
238 | 
239 | .logo__text {
240 |   fill: #2B244D;
241 | }
242 | 
243 | .logo__text-dark {
244 |   fill: #ffff;
245 | }
246 | 
247 | .hamburger__icon__fill {
248 |   fill: #2B244D;
249 | }
250 | 
251 | .hamburger__icon__fill-dark {
252 |   fill: #ffff;
253 | }
254 | 
255 | /*
256 | ================
257 |     Body
258 | ================
259 | */
260 | 
261 | .main-container__bg {
262 |   height: 100%;
263 |   width: 100%;
264 |   position: absolute;
265 |   top: 0;
266 |   left: 0;
267 |   z-index: -2;
268 |   opacity: 0;
269 |   background: white;
270 |   transition: opacity 300ms linear;
271 | }
272 | 
273 | .main-container__bg-dark {
274 |   opacity: 1;
275 |   background: linear-gradient(to bottom, #B290FF, #2E1D65);
276 |   transition: opacity 300ms linear;
277 | }
278 | 
279 | /*
280 | ================-
281 |     Footer
282 | ================
283 | */
284 | .main__footer {
285 |   background: transparent;
286 |   position: absolute;
287 |   bottom: 1rem;
288 |   left: 1.5rem;
289 |   z-index: 100;
290 | }
291 | 
292 | .copyright__text {
293 |   letter-spacing: 0.1rem;
294 |   color: white;
295 | }
296 | 
297 | @media only screen and (max-width: 300px) {
298 |   .slide-menu {
299 |     width: 100%;
300 |   }
301 | }
302 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
  1 |                                  Apache License
  2 |                            Version 2.0, January 2004
  3 |                         http://www.apache.org/licenses/
  4 | 
  5 |    TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
  6 | 
  7 |    1. Definitions.
  8 | 
  9 |       "License" shall mean the terms and conditions for use, reproduction,
 10 |       and distribution as defined by Sections 1 through 9 of this document.
 11 | 
 12 |       "Licensor" shall mean the copyright owner or entity authorized by
 13 |       the copyright owner that is granting the License.
 14 | 
 15 |       "Legal Entity" shall mean the union of the acting entity and all
 16 |       other entities that control, are controlled by, or are under common
 17 |       control with that entity. For the purposes of this definition,
 18 |       "control" means (i) the power, direct or indirect, to cause the
 19 |       direction or management of such entity, whether by contract or
 20 |       otherwise, or (ii) ownership of fifty percent (50%) or more of the
 21 |       outstanding shares, or (iii) beneficial ownership of such entity.
 22 | 
 23 |       "You" (or "Your") shall mean an individual or Legal Entity
 24 |       exercising permissions granted by this License.
 25 | 
 26 |       "Source" form shall mean the preferred form for making modifications,
 27 |       including but not limited to software source code, documentation
 28 |       source, and configuration files.
 29 | 
 30 |       "Object" form shall mean any form resulting from mechanical
 31 |       transformation or translation of a Source form, including but
 32 |       not limited to compiled object code, generated documentation,
 33 |       and conversions to other media types.
 34 | 
 35 |       "Work" shall mean the work of authorship, whether in Source or
 36 |       Object form, made available under the License, as indicated by a
 37 |       copyright notice that is included in or attached to the work
 38 |       (an example is provided in the Appendix below).
 39 | 
 40 |       "Derivative Works" shall mean any work, whether in Source or Object
 41 |       form, that is based on (or derived from) the Work and for which the
 42 |       editorial revisions, annotations, elaborations, or other modifications
 43 |       represent, as a whole, an original work of authorship. For the purposes
 44 |       of this License, Derivative Works shall not include works that remain
 45 |       separable from, or merely link (or bind by name) to the interfaces of,
 46 |       the Work and Derivative Works thereof.
 47 | 
 48 |       "Contribution" shall mean any work of authorship, including
 49 |       the original version of the Work and any modifications or additions
 50 |       to that Work or Derivative Works thereof, that is intentionally
 51 |       submitted to Licensor for inclusion in the Work by the copyright owner
 52 |       or by an individual or Legal Entity authorized to submit on behalf of
 53 |       the copyright owner. For the purposes of this definition, "submitted"
 54 |       means any form of electronic, verbal, or written communication sent
 55 |       to the Licensor or its representatives, including but not limited to
 56 |       communication on electronic mailing lists, source code control systems,
 57 |       and issue tracking systems that are managed by, or on behalf of, the
 58 |       Licensor for the purpose of discussing and improving the Work, but
 59 |       excluding communication that is conspicuously marked or otherwise
 60 |       designated in writing by the copyright owner as "Not a Contribution."
 61 | 
 62 |       "Contributor" shall mean Licensor and any individual or Legal Entity
 63 |       on behalf of whom a Contribution has been received by Licensor and
 64 |       subsequently incorporated within the Work.
 65 | 
 66 |    2. Grant of Copyright License. Subject to the terms and conditions of
 67 |       this License, each Contributor hereby grants to You a perpetual,
 68 |       worldwide, non-exclusive, no-charge, royalty-free, irrevocable
 69 |       copyright license to reproduce, prepare Derivative Works of,
 70 |       publicly display, publicly perform, sublicense, and distribute the
 71 |       Work and such Derivative Works in Source or Object form.
 72 | 
 73 |    3. Grant of Patent License. Subject to the terms and conditions of
 74 |       this License, each Contributor hereby grants to You a perpetual,
 75 |       worldwide, non-exclusive, no-charge, royalty-free, irrevocable
 76 |       (except as stated in this section) patent license to make, have made,
 77 |       use, offer to sell, sell, import, and otherwise transfer the Work,
 78 |       where such license applies only to those patent claims licensable
 79 |       by such Contributor that are necessarily infringed by their
 80 |       Contribution(s) alone or by combination of their Contribution(s)
 81 |       with the Work to which such Contribution(s) was submitted. If You
 82 |       institute patent litigation against any entity (including a
 83 |       cross-claim or counterclaim in a lawsuit) alleging that the Work
 84 |       or a Contribution incorporated within the Work constitutes direct
 85 |       or contributory patent infringement, then any patent licenses
 86 |       granted to You under this License for that Work shall terminate
 87 |       as of the date such litigation is filed.
 88 | 
 89 |    4. Redistribution. You may reproduce and distribute copies of the
 90 |       Work or Derivative Works thereof in any medium, with or without
 91 |       modifications, and in Source or Object form, provided that You
 92 |       meet the following conditions:
 93 | 
 94 |       (a) You must give any other recipients of the Work or
 95 |           Derivative Works a copy of this License; and
 96 | 
 97 |       (b) You must cause any modified files to carry prominent notices
 98 |           stating that You changed the files; and
 99 | 
100 |       (c) You must retain, in the Source form of any Derivative Works
101 |           that You distribute, all copyright, patent, trademark, and
102 |           attribution notices from the Source form of the Work,
103 |           excluding those notices that do not pertain to any part of
104 |           the Derivative Works; and
105 | 
106 |       (d) If the Work includes a "NOTICE" text file as part of its
107 |           distribution, then any Derivative Works that You distribute must
108 |           include a readable copy of the attribution notices contained
109 |           within such NOTICE file, excluding those notices that do not
110 |           pertain to any part of the Derivative Works, in at least one
111 |           of the following places: within a NOTICE text file distributed
112 |           as part of the Derivative Works; within the Source form or
113 |           documentation, if provided along with the Derivative Works; or,
114 |           within a display generated by the Derivative Works, if and
115 |           wherever such third-party notices normally appear. The contents
116 |           of the NOTICE file are for informational purposes only and
117 |           do not modify the License. You may add Your own attribution
118 |           notices within Derivative Works that You distribute, alongside
119 |           or as an addendum to the NOTICE text from the Work, provided
120 |           that such additional attribution notices cannot be construed
121 |           as modifying the License.
122 | 
123 |       You may add Your own copyright statement to Your modifications and
124 |       may provide additional or different license terms and conditions
125 |       for use, reproduction, or distribution of Your modifications, or
126 |       for any such Derivative Works as a whole, provided Your use,
127 |       reproduction, and distribution of the Work otherwise complies with
128 |       the conditions stated in this License.
129 | 
130 |    5. Submission of Contributions. Unless You explicitly state otherwise,
131 |       any Contribution intentionally submitted for inclusion in the Work
132 |       by You to the Licensor shall be under the terms and conditions of
133 |       this License, without any additional terms or conditions.
134 |       Notwithstanding the above, nothing herein shall supersede or modify
135 |       the terms of any separate license agreement you may have executed
136 |       with Licensor regarding such Contributions.
137 | 
138 |    6. Trademarks. This License does not grant permission to use the trade
139 |       names, trademarks, service marks, or product names of the Licensor,
140 |       except as required for reasonable and customary use in describing the
141 |       origin of the Work and reproducing the content of the NOTICE file.
142 | 
143 |    7. Disclaimer of Warranty. Unless required by applicable law or
144 |       agreed to in writing, Licensor provides the Work (and each
145 |       Contributor provides its Contributions) on an "AS IS" BASIS,
146 |       WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
147 |       implied, including, without limitation, any warranties or conditions
148 |       of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
149 |       PARTICULAR PURPOSE. You are solely responsible for determining the
150 |       appropriateness of using or redistributing the Work and assume any
151 |       risks associated with Your exercise of permissions under this License.
152 | 
153 |    8. Limitation of Liability. In no event and under no legal theory,
154 |       whether in tort (including negligence), contract, or otherwise,
155 |       unless required by applicable law (such as deliberate and grossly
156 |       negligent acts) or agreed to in writing, shall any Contributor be
157 |       liable to You for damages, including any direct, indirect, special,
158 |       incidental, or consequential damages of any character arising as a
159 |       result of this License or out of the use or inability to use the
160 |       Work (including but not limited to damages for loss of goodwill,
161 |       work stoppage, computer failure or malfunction, or any and all
162 |       other commercial damages or losses), even if such Contributor
163 |       has been advised of the possibility of such damages.
164 | 
165 |    9. Accepting Warranty or Additional Liability. While redistributing
166 |       the Work or Derivative Works thereof, You may choose to offer,
167 |       and charge a fee for, acceptance of support, warranty, indemnity,
168 |       or other liability obligations and/or rights consistent with this
169 |       License. However, in accepting such obligations, You may act only
170 |       on Your own behalf and on Your sole responsibility, not on behalf
171 |       of any other Contributor, and only if You agree to indemnify,
172 |       defend, and hold each Contributor harmless for any liability
173 |       incurred by, or claims asserted against, such Contributor by reason
174 |       of your accepting any such warranty or additional liability.
175 | 
176 |    END OF TERMS AND CONDITIONS
177 | 
178 |    APPENDIX: How to apply the Apache License to your work.
179 | 
180 |       To apply the Apache License to your work, attach the following
181 |       boilerplate notice, with the fields enclosed by brackets "[]"
182 |       replaced with your own identifying information. (Don't include
183 |       the brackets!)  The text should be enclosed in the appropriate
184 |       comment syntax for the file format. We also recommend that a
185 |       file or class name and description of purpose be included on the
186 |       same "printed page" as the copyright notice for easier
187 |       identification within third-party archives.
188 | 
189 |    Copyright [yyyy] [name of copyright owner]
190 | 
191 |    Licensed under the Apache License, Version 2.0 (the "License");
192 |    you may not use this file except in compliance with the License.
193 |    You may obtain a copy of the License at
194 | 
195 |        http://www.apache.org/licenses/LICENSE-2.0
196 | 
197 |    Unless required by applicable law or agreed to in writing, software
198 |    distributed under the License is distributed on an "AS IS" BASIS,
199 |    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
200 |    See the License for the specific language governing permissions and
201 |    limitations under the License.
202 | 


--------------------------------------------------------------------------------
/src/app/ui/add-card/add-card.component.html:
--------------------------------------------------------------------------------
  1 | <div class="add__card" routerLink="/add" [ngClass]="{'add__card-dark': darkMode}">
  2 |   <div class="header__container">
  3 |     <span class="card__title">Add city</span>
  4 |   </div>
  5 |   <div class="body__container">
  6 |     <svg class="add__icon" id="Plus_Icon" data-name="Plus Icon" viewBox="1454.4 326.4 209.1 209.1">
  7 |       <defs>
  8 |         <style>
  9 |           .cls-299 {
 10 |             fill: #7effcc
 11 |           }
 12 |         </style>
 13 |         <filter id="Ellipse_7" width="209.1" height="209.1" x="1454.4" y="326.4" filterUnits="userSpaceOnUse">
 14 |           <feOffset dy="3"/>
 15 |           <feGaussianBlur result="blur" stdDeviation="3"/>
 16 |           <feFlood flood-color="#333" flood-opacity=".1"/>
 17 |           <feComposite in2="blur" operator="in"/>
 18 |           <feComposite in="SourceGraphic"/>
 19 |         </filter>
 20 |       </defs>
 21 |       <g filter="url(#Ellipse_7)">
 22 |         <circle id="Ellipse_7-2" cx="95.6" cy="95.6" r="95.6" fill="#f5f8ff" data-name="Ellipse 7"
 23 |                 transform="translate(1463.4 332.4)"/>
 24 |       </g>
 25 |       <rect id="Rectangle_3" width="12.8" height="142.9" class="cls-299" data-name="Rectangle 3" rx="5"
 26 |             transform="translate(1552.6 358.1)"/>
 27 |       <rect id="Rectangle_4" width="12.8" height="142.9" class="cls-299" data-name="Rectangle 4" rx="5"
 28 |             transform="rotate(90 603.6 1026.8)"/>
 29 |     </svg>
 30 |     <svg class="city__illustration" id="City_Illustration" data-name="City Illustration"
 31 |          viewBox="1367.8 616.6 403.6 331.4">
 32 |       <defs>
 33 |         <style>
 34 |           .cls-1 {
 35 |             fill: #a1ffd9
 36 |           }
 37 | 
 38 |           .cls-2 {
 39 |             fill: #f5f5f5
 40 |           }
 41 | 
 42 |           .cls-3 {
 43 |             fill: #c4d1fe
 44 |           }
 45 | 
 46 |           .cls-6 {
 47 |             fill: #bffee6
 48 |           }
 49 | 
 50 |           .cls-7 {
 51 |             fill: #31feae
 52 |           }
 53 | 
 54 |           .cls-11 {
 55 |             fill: #7d9cff
 56 |           }
 57 | 
 58 |           .cls-14 {
 59 |             fill: #5f84fb
 60 |           }
 61 | 
 62 |           .cls-17, .cls-19 {
 63 |             fill: none
 64 |           }
 65 | 
 66 |           .cls-17 {
 67 |             stroke: #fff;
 68 |             stroke-width: 2px
 69 |           }
 70 | 
 71 |           .cls-18 {
 72 |             fill: #606cb9
 73 |           }
 74 | 
 75 |           .cls-19 {
 76 |             stroke: #a1ffd9;
 77 |             stroke-width: 3px
 78 |           }
 79 |         </style>
 80 |       </defs>
 81 |       <path id="City_grass" d="M1488.3 646.3v-30H1892v30z" class="cls-1" data-name="City grass"
 82 |             transform="translate(-120.5 301.7)"/>
 83 |       <g id="Buidings">
 84 |         <g id="Buiding_Shadow" data-name="Buiding Shadow">
 85 |           <path id="Path_23" d="M1488.3 777.8V616.3h26.6v161.5z" class="cls-2" data-name="Path 23"
 86 |                 transform="translate(-120.5 48.4)"/>
 87 |           <path id="Path_29" d="M1488.3 788.9V616.3h26.6V789z" class="cls-2" data-name="Path 29"
 88 |                 transform="translate(-30.5 5.3)"/>
 89 |           <path id="Path_21" d="M1488.3 783.8V616.3h96.8v167.5z" class="cls-2" data-name="Path 21"
 90 |                 transform="translate(176.5 45.4)"/>
 91 |           <path id="Path_30" d="M1488.3 735V616.3h34.3V735z" class="cls-2" data-name="Path 30"
 92 |                 transform="translate(128.5 48.2)"/>
 93 |           <path id="Path_31" d="M1488.3 811V616.3h34.3V811z" class="cls-2" data-name="Path 31"
 94 |                 transform="translate(28.5 5.2)"/>
 95 |         </g>
 96 |         <g id="Core">
 97 |           <path id="Path_8" d="M1488.3 771.2V616.3h59.7v154.9z" class="cls-3" data-name="Path 8"
 98 |                 transform="translate(-112 54)"/>
 99 |           <path id="Path_9" d="M1488.3 825V616.2h96.8V825z" class="cls-1" data-name="Path 9"
100 |                 transform="translate(-43.5 .3)"/>
101 |           <path id="Path_10" fill="#7affcb" d="M1488.3 660.7v-44.4h96.8v44.4z" data-name="Path 10"
102 |                 transform="translate(62.5 164.4)"/>
103 |           <path id="Path_11" d="M1488.3 771.2V616.3h96.8v154.9z" class="cls-3" data-name="Path 11"
104 |                 transform="translate(168.5 54)"/>
105 |         </g>
106 |       </g>
107 |       <path id="City_water" fill="#8091ff" d="M1488.3 692.6v-76.3H1892v76.3z" data-name="City water"
108 |             transform="translate(-120.5 217.2)"/>
109 |       <g id="Windows" transform="translate(8 40)">
110 |         <path id="Path_13" d="M1488.3 628.5v-12.2h36.6v12.2z" class="cls-6" data-name="Path 13"
111 |               transform="translate(-43.2 -19.8)"/>
112 |         <path id="Path_14" d="M1488.3 628.5v-12.2h36.6v12.2z" class="cls-7" data-name="Path 14"
113 |               transform="translate(-43.2 2.2)"/>
114 |         <path id="Path_25" d="M1488.3 628.5v-12.2h83.7v12.2z" class="cls-7" data-name="Path 25"
115 |               transform="translate(168.2 110.2)"/>
116 |         <path id="Path_26" d="M1488.3 628.5v-12.2h83.7v12.2z" class="cls-7" data-name="Path 26"
117 |               transform="translate(169.2 132.2)"/>
118 |         <path id="Path_18" fill="#a1feda" d="M1488.3 628.5v-12.2h36.6v12.2z" data-name="Path 18"
119 |               transform="translate(-108.2 26.2)"/>
120 |         <path id="Path_20" fill="#3564fb" d="M1488.3 628.5v-12.2h36.6v12.2z" data-name="Path 20"
121 |               transform="translate(-108.2 146.2)"/>
122 |         <path id="Path_19" fill="#a2b8ff" d="M1488.3 665.4v-49h36.6v49z" data-name="Path 19"
123 |               transform="translate(-108.2 54.3)"/>
124 |         <path id="Path_15" d="M1488.3 651v-34.7h36.6V651z" class="cls-11" data-name="Path 15"
125 |               transform="translate(-3.2 47.2)"/>
126 |         <path id="Path_16" fill="#3b5dca" d="M1488.3 651v-34.7h36.6V651z" data-name="Path 16"
127 |               transform="translate(-46.2 46.2)"/>
128 |         <path id="Path_17" fill="#597ff7" d="M1488.3 651v-34.7h36.6V651z" data-name="Path 17"
129 |               transform="translate(-12.2 117.2)"/>
130 |         <path id="Path_27" d="M1488.3 641.2v-24.9h62.9v24.9z" class="cls-6" data-name="Path 27"
131 |               transform="translate(169.1 28.2)"/>
132 |         <path id="Path_28" d="M1488.3 634.3v-18h17.5v18z" class="cls-14" data-name="Path 28"
133 |               transform="translate(194.4 56)"/>
134 |         <path id="Path_46" d="M1488.3 634.3v-18h17.5v18z" class="cls-14" data-name="Path 46"
135 |               transform="translate(194.4 82)"/>
136 |         <path id="Path_47" d="M1488.3 634.3v-18h17.5v18z" class="cls-14" data-name="Path 47"
137 |               transform="translate(169.4 82)"/>
138 |         <path id="Path_48" d="M1488.3 634.3v-18h17.5v18z" class="cls-7" data-name="Path 48"
139 |               transform="translate(169.4 56)"/>
140 |         <path id="Path_44" d="M1488.3 634.3v-18h17.5v18z" class="cls-11" data-name="Path 44"
141 |               transform="translate(232.4 56)"/>
142 |         <path id="Path_45" fill="#aebff7" d="M1488.3 634.3v-18h17.5v18z" data-name="Path 45"
143 |               transform="translate(232.4 84)"/>
144 |       </g>
145 |       <path id="Bridge" fill="#ccc8ff"
146 |             d="M1580.5 875.5c1-.3-17.9-39 .2-85.3h40s-11.4 42.6 5.5 85.3c-47.4-1.7-46.7.3-45.7 0z"
147 |             transform="translate(8 40)"/>
148 |       <g id="Water_Turbulence" data-name="Water Turbulence" transform="translate(8 40)">
149 |         <g id="Group_4" data-name="Group 4">
150 |           <path id="Path_42" d="M1386.3 831.3s18.2 3.5 21.8-5.2" class="cls-17" data-name="Path 42"
151 |                 transform="translate(11.8 2)"/>
152 |           <path id="Path_43" d="M1401.3 831.3a23 23 0 0 1-3.7.7c-3.8.3-9.7-.2-11.3-5.9" class="cls-17"
153 |                 data-name="Path 43" transform="translate(32.1 2)"/>
154 |         </g>
155 |         <g id="Group_5" data-name="Group 5" transform="translate(74 -14)">
156 |           <path id="Path_42-2" d="M1386.3 831.3s18.2 3.5 21.8-5.2" class="cls-17" data-name="Path 42"
157 |                 transform="translate(11.8 2)"/>
158 |           <path id="Path_43-2" d="M1401.3 831.3a23 23 0 0 1-3.7.7c-3.8.3-9.7-.2-11.3-5.9" class="cls-17"
159 |                 data-name="Path 43" transform="translate(32.1 2)"/>
160 |         </g>
161 |         <g id="Group_8" data-name="Group 8" transform="translate(85 17)">
162 |           <path id="Path_42-3" d="M1386.3 831.3s18.2 3.5 21.8-5.2" class="cls-17" data-name="Path 42"
163 |                 transform="translate(11.8 2)"/>
164 |           <path id="Path_43-3" d="M1401.3 831.3a23 23 0 0 1-3.7.7c-3.8.3-9.7-.2-11.3-5.9" class="cls-17"
165 |                 data-name="Path 43" transform="translate(32.1 2)"/>
166 |         </g>
167 |         <g id="Group_17" data-name="Group 17" transform="translate(315 14)">
168 |           <path id="Path_42-4" d="M1386.3 831.3s18.2 3.5 21.8-5.2" class="cls-17" data-name="Path 42"
169 |                 transform="translate(11.8 2)"/>
170 |           <path id="Path_43-4" d="M1401.3 831.3a23 23 0 0 1-3.7.7c-3.8.3-9.7-.2-11.3-5.9" class="cls-17"
171 |                 data-name="Path 43" transform="translate(32.1 2)"/>
172 |         </g>
173 |         <g id="Group_18" data-name="Group 18" transform="translate(245 -17)">
174 |           <path id="Path_42-5" d="M1386.3 831.3s18.2 3.5 21.8-5.2" class="cls-17" data-name="Path 42"
175 |                 transform="translate(11.8 2)"/>
176 |           <path id="Path_43-5" d="M1401.3 831.3a23 23 0 0 1-3.7.7c-3.8.3-9.7-.2-11.3-5.9" class="cls-17"
177 |                 data-name="Path 43" transform="translate(32.1 2)"/>
178 |         </g>
179 |       </g>
180 |       <g id="Fence" transform="translate(8 40)">
181 |         <g id="Poles">
182 |           <rect id="Rectangle_13" width="5" height="25" class="cls-18" data-name="Rectangle 13" rx="2"
183 |                 transform="translate(1375 858)"/>
184 |           <rect id="Rectangle_18" width="5" height="25" class="cls-18" data-name="Rectangle 18" rx="2"
185 |                 transform="translate(1450 858)"/>
186 |           <rect id="Rectangle_21" width="5" height="25" class="cls-18" data-name="Rectangle 21" rx="2"
187 |                 transform="translate(1525 858)"/>
188 |           <rect id="Rectangle_14" width="5" height="25" class="cls-18" data-name="Rectangle 14" rx="2"
189 |                 transform="translate(1400 858)"/>
190 |           <rect id="Rectangle_17" width="5" height="25" class="cls-18" data-name="Rectangle 17" rx="2"
191 |                 transform="translate(1475 858)"/>
192 |           <rect id="Rectangle_20" width="5" height="25" class="cls-18" data-name="Rectangle 20" rx="2"
193 |                 transform="translate(1550 858)"/>
194 |           <rect id="Rectangle_15" width="5" height="25" class="cls-18" data-name="Rectangle 15" rx="2"
195 |                 transform="translate(1425 858)"/>
196 |           <rect id="Rectangle_16" width="5" height="25" class="cls-18" data-name="Rectangle 16" rx="2"
197 |                 transform="translate(1500 858)"/>
198 |         </g>
199 |         <g id="Ropes">
200 |           <path id="Path_45-2" d="M1377.5 858c.4-1 14.2 17 25.4 0" class="cls-19" data-name="Path 45"
201 |                 transform="translate(0 4)"/>
202 |           <path id="Path_46-2" d="M1377.5 858c.4-1 14.2 17 25.4 0" class="cls-19" data-name="Path 46"
203 |                 transform="translate(25 5)"/>
204 |           <path id="Path_47-2" d="M1377.5 858c.4-1 14.2 17 25.4 0" class="cls-19" data-name="Path 47"
205 |                 transform="translate(50 3)"/>
206 |           <path id="Path_48-2" d="M1377.5 858c.4-1 14.2 17 25.4 0" class="cls-19" data-name="Path 48"
207 |                 transform="translate(75 5)"/>
208 |           <path id="Path_49" d="M1377.5 858c.4-1 14.2 17 25.4 0" class="cls-19" data-name="Path 49"
209 |                 transform="translate(101 3)"/>
210 |           <path id="Path_50" d="M1377.5 858c.4-1 14.2 17 25.4 0" class="cls-19" data-name="Path 50"
211 |                 transform="translate(125 7)"/>
212 |           <path id="Path_51" d="M1377.5 858c.4-1 14.2 17 25.4 0" class="cls-19" data-name="Path 51"
213 |                 transform="translate(150 5)"/>
214 |         </g>
215 |       </g>
216 |     </svg>
217 |   </div>
218 | </div>
219 | 


--------------------------------------------------------------------------------
/src/app/pages/details/details.component.html:
--------------------------------------------------------------------------------
   1 | <div class="details-page__wrapper-dark">
   2 |   <svg class="background-gradient__circle" viewBox="4572 73 1328 1328">
   3 |     <defs>
   4 |       <linearGradient id="ddd" x2="0" y2="1" gradientUnits="objectBoundingBox">
   5 |         <stop offset="0" stop-color="#ff8b8b"/>
   6 |         <stop offset="1" stop-color="#6676ff"/>
   7 |       </linearGradient>
   8 |     </defs>
   9 |     <circle cx="664" cy="664" r="664" fill="url(#ddd)" transform="translate(4572 73)"/>
  10 |   </svg>
  11 | 
  12 |   <svg class="back__button" routerLink="" viewBox="4085 152 98.5 126">
  13 |     <defs>
  14 |       <style>.a {
  15 |         fill: #2b244d;
  16 |       }
  17 | 
  18 |       .b {
  19 |         fill: rgba(0, 0, 0, 0);
  20 |       }
  21 | 
  22 |       .b, .c {
  23 |         stroke: #fff;
  24 |         stroke-width: 2px;
  25 |       }
  26 | 
  27 |       .c {
  28 |         fill: none;
  29 |       }
  30 | 
  31 |       .d {
  32 |         fill: #fff;
  33 |         font-size: 15px;
  34 |         font-family: SegoeUI, Segoe UI;
  35 |         letter-spacing: 0.4em;
  36 |       }</style>
  37 |     </defs>
  38 |     <g transform="translate(3980)">
  39 |       <circle class="a" cx="39" cy="39" r="39" transform="translate(105 152)"/>
  40 |       <line class="b" x1="80" transform="translate(123.5 190.5)"/>
  41 |       <line class="b" y1="26" x2="26" transform="translate(123.5 164.5)"/>
  42 |       <line class="c" x1="26" y1="27" transform="translate(123.5 190.5)"/>
  43 |       <text class="d" transform="translate(117 274)">
  44 |         <tspan x="0" y="0">BACK</tspan>
  45 |       </text>
  46 |     </g>
  47 |   </svg>
  48 | 
  49 |   <section class="main-weather__card-dark">
  50 |     <section class="card-header__container-dark" [ngSwitch]="true">
  51 | 
  52 |       <svg *ngSwitchCase="city === 'paris'" class="city__illustration" viewBox="0 0 3000 1000">
  53 |         <linearGradient id="a" x1="1487" x2="1487" y1="-11.5" y2="998.5" gradientUnits="userSpaceOnUse">
  54 |           <stop offset="0" stop-color="#331464"/>
  55 |           <stop offset="1" stop-color="#2e3192"/>
  56 |         </linearGradient>
  57 |         <path fill="url(#a)" d="M-25.5-11.5h3025v1010h-3025z"/>
  58 |         <path d="M2999-11V998H-25V-11h3024m1-1H-26V999h3026V-12z"/>
  59 |         <linearGradient id="b" x1="1648.1" x2="2243.41" y1="50.5" y2="50.5"
  60 |                         gradientTransform="matrix(-.2999 0 0 1 2380.73 0)" gradientUnits="userSpaceOnUse">
  61 |           <stop offset="0" stop-color="#fff9b3" stop-opacity=".4"/>
  62 |           <stop offset="1" stop-color="#fff" stop-opacity="0"/>
  63 |         </linearGradient>
  64 |         <path fill="url(#b)"
  65 |               d="M1885.28 24.93C1852.53 21.38 1708 3 1708 3v95l177.59-70.04c1.39-.55 1.15-2.87-.31-3.03z"/>
  66 |         <path fill="#FFF"
  67 |               d="M2358.41 893.69c0 21.87-5.62 42.42-15.5 60.3h-218.65a124.25 124.25 0 0 1-15.5-60.3c0-68.94 55.88-124.83 124.82-124.83s124.83 55.89 124.83 124.83z"/>
  68 |         <path fill="#FFF"
  69 |               d="M2412.95 893.69c0 21.15-3.66 41.45-10.38 60.3H2064.6a179.07 179.07 0 0 1-10.39-60.3c0-99.07 80.3-179.38 179.37-179.38s179.38 80.31 179.38 179.38z"
  70 |               opacity=".08"/>
  71 |         <path fill="#FFF"
  72 |               d="M2440.23 893.69a206.6 206.6 0 0 1-8.94 60.3h-395.41a206.64 206.64 0 0 1-8.94-60.3c0-114.13 92.52-206.65 206.64-206.65s206.65 92.52 206.65 206.65z"
  73 |               opacity=".08"/>
  74 |         <path fill="#FFF"
  75 |               d="M2486.7 893.69c0 20.78-2.5 40.97-7.22 60.3h-491.8a253.86 253.86 0 0 1-7.22-60.3c0-139.8 113.33-253.12 253.12-253.12s253.12 113.32 253.12 253.12z"
  76 |               opacity=".08"/>
  77 |         <path fill="#FFF"
  78 |               d="M2538.55 893.69c0 20.64-2.05 40.8-5.96 60.3h-598.01a306.09 306.09 0 0 1-5.97-60.3c0-168.43 136.54-304.97 304.97-304.97s304.97 136.54 304.97 304.97z"
  79 |               opacity=".08"/>
  80 |         <circle cx="2154.07" cy="897.53" r="9.22" fill="#EFEFEF"/>
  81 |         <circle cx="2224.36" cy="906.75" r="13.83" fill="#EFEFEF"/>
  82 |         <circle cx="2299.26" cy="867.57" r="9.22" fill="#EFEFEF"/>
  83 |         <circle cx="2182.88" cy="838.38" r="19.59" fill="#EFEFEF"/>
  84 |         <path fill="#3D3F5B"
  85 |               d="M1886.97 87.07a2.88 2.88 0 0 1-2.88-2.88V22.73a2.88 2.88 0 0 1 5.76 0V84.2c0 1.59-1.3 2.88-2.88 2.88z"/>
  86 |         <linearGradient id="c" x1="1880.25" x2="1893.69" y1="53.46" y2="53.46" gradientUnits="userSpaceOnUse">
  87 |           <stop offset="0" stop-color="#331495"/>
  88 |           <stop offset="1" stop-color="#02001d"/>
  89 |         </linearGradient>
  90 |         <path fill="url(#c)"
  91 |               d="M1886.97 16a6.73 6.73 0 0 0-6.72 6.73V84.2a6.72 6.72 0 1 0 13.44 0V22.73c0-3.71-3-6.72-6.72-6.72z"/>
  92 |         <linearGradient id="d" x1="1845.49" x2="1928.84" y1="242.05" y2="242.05" gradientUnits="userSpaceOnUse">
  93 |           <stop offset="0" stop-color="#331495"/>
  94 |           <stop offset="1" stop-color="#02001d"/>
  95 |         </linearGradient>
  96 |         <path fill="url(#d)"
  97 |               d="M1928.84 426.8h-22.09v.2l-38.98-.4v.2h-22.28c18.78-96.9 21.71-223.76 22.08-275.69V76.7a19.65 19.65 0 0 1 19.6-19.6c5.38 0 10.28 2.21 13.83 5.76a19.54 19.54 0 0 1 5.75 13.84v50.7s-.1 7.83-.01 21.36v.25l.01 1.7c.36 51.69 3.26 178.95 22.09 276.09z"/>
  98 |         <linearGradient id="e" x1="1784.25" x2="2002.37" y1="523.22" y2="523.22" gradientUnits="userSpaceOnUse">
  99 |           <stop offset="0" stop-color="#331495"/>
 100 |           <stop offset="1" stop-color="#02001d"/>
 101 |         </linearGradient>
 102 |         <path fill="url(#e)"
 103 |               d="M1946.15 614.43l-36.64-85.21c-.6-1.41-2-2.33-3.53-2.33h-36.1a3.84 3.84 0 0 0-3.68 2.73l-25.67 84.81h-56.28l63.02-181.68 78.45-.74 76.65 182.42h-56.22z"/>
 104 |         <linearGradient id="f" x1="1762.33" x2="2022.36" y1="640.16" y2="640.16" gradientUnits="userSpaceOnUse">
 105 |           <stop offset="0" stop-color="#331495"/>
 106 |           <stop offset="1" stop-color="#02001d"/>
 107 |         </linearGradient>
 108 |         <path fill="url(#f)"
 109 |               d="M1762.33 644.88v-9.43c0-4.18 3.4-7.58 7.58-7.58h244.87c4.2 0 7.58 3.4 7.58 7.58v9.43a7.58 7.58 0 0 1-7.58 7.58h-244.87a7.58 7.58 0 0 1-7.58-7.58z"/>
 110 |         <linearGradient id="g" x1="1688.56" x2="2098.4" y1="785.34" y2="785.34" gradientUnits="userSpaceOnUse">
 111 |           <stop offset="0" stop-color="#331495"/>
 112 |           <stop offset="1" stop-color="#02001d"/>
 113 |         </linearGradient>
 114 |         <path fill="url(#g)"
 115 |               d="M2031.39 905.94c0-1.5-.04-2.92-.1-4.38-.04-1.38-.1-2.8-.1-4.4 0-95.98-51.4-153.29-137.5-153.29-87.48 0-139.83 56.22-140.19 150.47-1.79 1.27-7.28 3.22-10.68 4.43-6.43 2.3-11.63 4.14-14.07 6.82h-40.19l81.52-240.84h244.56l83.76 240.86-67.01.33z"/>
 116 |         <linearGradient id="h" x1="1816.49" x2="1957.45" y1="482.11" y2="482.11" gradientUnits="userSpaceOnUse">
 117 |           <stop offset="0" stop-color="#331495"/>
 118 |           <stop offset="1" stop-color="#02001d"/>
 119 |         </linearGradient>
 120 |         <path fill="url(#h)" d="M1821.67 487.3a5.2 5.2 0 0 1 0-10.38h130.6a5.2 5.2 0 0 1 0 10.37h-130.6z"/>
 121 |         <linearGradient id="i" x1="1823.02" x2="1951.69" y1="431.71" y2="431.71" gradientUnits="userSpaceOnUse">
 122 |           <stop offset="0" stop-color="#331495"/>
 123 |           <stop offset="1" stop-color="#02001d"/>
 124 |         </linearGradient>
 125 |         <path fill="url(#i)" d="M1828.2 436.9a5.2 5.2 0 0 1 0-10.37h118.3a5.2 5.2 0 0 1 0 10.37h-118.3z"/>
 126 |         <linearGradient id="j" x1="1738.52" x2="2046.18" y1="621" y2="621" gradientUnits="userSpaceOnUse">
 127 |           <stop offset="0" stop-color="#331495"/>
 128 |           <stop offset="1" stop-color="#02001d"/>
 129 |         </linearGradient>
 130 |         <path fill="url(#j)"
 131 |               d="M1742.36 628c-2.12 0-3.84-3.14-3.84-7s1.72-7 3.84-7h299.98c2.12 0 3.84 3.14 3.84 7s-1.73 7-3.84 7h-299.98z"/>
 132 |         <linearGradient id="k" x1="1738.52" x2="2046.18" y1="658.73" y2="658.73" gradientUnits="userSpaceOnUse">
 133 |           <stop offset="0" stop-color="#331495"/>
 134 |           <stop offset="1" stop-color="#02001d"/>
 135 |         </linearGradient>
 136 |         <path fill="url(#k)"
 137 |               d="M1742.36 665c-2.12 0-3.84-2.81-3.84-6.27 0-3.46 1.72-6.27 3.84-6.27h299.98c2.12 0 3.84 2.81 3.84 6.27 0 3.46-1.73 6.27-3.84 6.27h-299.98z"/>
 138 |         <linearGradient id="l" x1="1853.36" x2="1920.58" y1="117.03" y2="117.03" gradientUnits="userSpaceOnUse">
 139 |           <stop offset="0" stop-color="#331495"/>
 140 |           <stop offset="1" stop-color="#02001d"/>
 141 |         </linearGradient>
 142 |         <path fill="url(#l)" d="M1859.9 123.56a6.54 6.54 0 0 1 0-13.06h54.15a6.54 6.54 0 0 1 0 13.06h-54.16z"/>
 143 |         <linearGradient id="m" x1="1723.83" x2="1723.83" y1="895.01" y2="924.2" gradientUnits="userSpaceOnUse">
 144 |           <stop offset="0" stop-color="#331495"/>
 145 |           <stop offset="1" stop-color="#02001d"/>
 146 |         </linearGradient>
 147 |         <path fill="url(#m)" d="M1769.54 924.2h-91.42a14.6 14.6 0 0 1 0-29.2h91.42a14.6 14.6 0 0 1 0 29.2z"/>
 148 |         <path fill="#0A0324" d="M2112.54 924.2h-91.42a14.6 14.6 0 0 1 0-29.2h91.42a14.6 14.6 0 0 1 0 29.2z"/>
 149 |         <path fill="#FFF"
 150 |               d="M1640.72 248.28l.02-.74a9.54 9.54 0 0 0-5.7-8.7 9.52 9.52 0 0 0-3.8-18.23H1616a28.83 28.83 0 0 0-8.05-9.06 28.76 28.76 0 0 0-42.29-23.82 28.76 28.76 0 0 0-45.64 21.2 28.75 28.75 0 0 0-33.2 16.5h-41.55c-2.62 0-5 1.07-6.72 2.8a9.48 9.48 0 0 0 .4 13.81l-.4.39a9.5 9.5 0 0 0-2.68 5.24h-18.74c-2.62 0-5 1.07-6.72 2.8a9.48 9.48 0 0 0-2.8 6.71 9.54 9.54 0 0 0 9.52 9.52h220.26c2.62 0 5-1.07 6.72-2.8a9.48 9.48 0 0 0-3.4-15.62zm380.02 132.29v-.26a3.4 3.4 0 0 0-2.02-3.1 3.39 3.39 0 0 0-1.37-6.5h-5.43a10.3 10.3 0 0 0-2.87-3.24 10.26 10.26 0 0 0-15.09-8.5 10.26 10.26 0 0 0-16.28 7.56 10.26 10.26 0 0 0-11.84 5.9H1951a3.38 3.38 0 0 0-3.4 3.39c0 1 .45 1.9 1.15 2.53l-.15.14c-.5.5-.84 1.14-.95 1.87h-6.69a3.38 3.38 0 0 0-3.4 3.4 3.4 3.4 0 0 0 3.4 3.39h78.58a3.38 3.38 0 0 0 3.4-3.4 3.4 3.4 0 0 0-2.21-3.18zm427-291.38v-.16c0-.83-.83-1.55-2.02-1.87.38-.1.74-.25 1.03-.43.62-.37 1-.88 1-1.44 0-1.12-1.53-2.04-3.4-2.04h-5.43a8.8 8.8 0 0 0-2.87-1.95c-.29-3.26-4.76-5.84-10.25-5.84-1.75 0-3.4.26-4.84.73a15.16 15.16 0 0 0-6.05-1.2c-5.42 0-9.86 2.54-10.23 5.75-.78-.12-1.6-.18-2.43-.18-4.22 0-7.84 1.53-9.41 3.72H2378c-.93 0-1.78.23-2.4.6-.61.37-1 .88-1 1.45 0 .6.45 1.15 1.15 1.52l-.14.08c-.5.3-.85.7-.96 1.13h-6.69c-.93 0-1.78.23-2.4.6-.6.37-.99.88-.99 1.44 0 1.13 1.53 2.04 3.4 2.04h78.57a4.7 4.7 0 0 0 2.4-.6c.62-.37 1-.88 1-1.44 0-.87-.92-1.62-2.21-1.91zM1143.59 361.66l.01-.4a5.22 5.22 0 0 0-3.12-4.77 5.22 5.22 0 0 0-2.08-9.98h-8.34a15.78 15.78 0 0 0-4.4-4.96 15.74 15.74 0 0 0-23.15-13.03 15.74 15.74 0 0 0-24.98 11.6 15.74 15.74 0 0 0-18.17 9.03h-22.75a5.18 5.18 0 0 0-5.2 5.21 5.2 5.2 0 0 0 1.74 3.89l-.22.2a5.2 5.2 0 0 0-1.47 2.88h-10.25a5.18 5.18 0 0 0-5.21 5.2 5.22 5.22 0 0 0 5.2 5.21h120.57a5.18 5.18 0 0 0 5.2-5.2 5.23 5.23 0 0 0-3.38-4.88z"
 151 |               opacity=".1"/>
 152 |         <path fill="#FFF"
 153 |               d="M628.77 275.6h-185a12.86 12.86 0 0 1-12.82-12.83c0-7.05 5.77-12.82 12.82-12.82h185c7.05 0 12.82 5.77 12.82 12.82 0 7.05-5.77 12.82-12.82 12.82z"
 154 |               opacity=".03"/>
 155 |         <path fill="#FFF"
 156 |               d="M919.4 345.01H721.8a6.54 6.54 0 0 1-6.53-6.52 6.54 6.54 0 0 1 6.53-6.52h197.6a6.54 6.54 0 0 1 6.52 6.52 6.54 6.54 0 0 1-6.53 6.52z"
 157 |               opacity=".1"/>
 158 |         <path fill="#FFF"
 159 |               d="M1274.29 431.04h-51.05c-5.61 0-10.2 4.59-10.2 10.2 0 5.6 4.59 10.19 10.2 10.19h51.05c5.6 0 10.2-4.59 10.2-10.2 0-5.6-4.6-10.19-10.2-10.19zm-408.55 3.95H664.22a7.27 7.27 0 0 1-7.26-7.25 7.27 7.27 0 0 1 7.26-7.26h201.52a7.27 7.27 0 0 1 7.25 7.26 7.27 7.27 0 0 1-7.25 7.25z"
 160 |               opacity=".05"/>
 161 |         <path fill="#FFF"
 162 |               d="M2822.73 136h-203.5a6.26 6.26 0 0 1 0-12.52h203.5a6.26 6.26 0 1 1 0 12.52zm-630.5 63.2H2005.3a14.5 14.5 0 0 1-14.47-14.47 14.5 14.5 0 0 1 14.47-14.46h186.93a14.5 14.5 0 0 1 14.47 14.46 14.5 14.5 0 0 1-14.47 14.47z"
 163 |               opacity=".1"/>
 164 |         <path fill="#FFF"
 165 |               d="M464.45 88H89.17a6.71 6.71 0 0 1 0-13.42h375.28a6.71 6.71 0 0 1 0 13.42zM245.1 375H45.44c-4.29 0-7.8-3.5-7.8-7.8v-5.6c0-4.28 3.51-7.8 7.8-7.8h199.67c4.28 0 7.8 3.52 7.8 7.8v5.6c0 4.3-3.52 7.8-7.8 7.8z"
 166 |               opacity=".07"/>
 167 |         <path fill="#FFF"
 168 |               d="M2419.99 419.46H2190.5a13.01 13.01 0 0 1-12.97-12.97 13 13 0 0 1 12.97-12.97h229.48c7.13 0 12.97 5.84 12.97 12.97 0 7.13-5.84 12.97-12.97 12.97zm129.55-68.09h-55.7a6.74 6.74 0 0 0-6.72 6.73c0 3.7 3.02 6.72 6.72 6.72h55.7c3.7 0 6.72-3.03 6.72-6.72 0-3.7-3.03-6.73-6.72-6.73zm309.98 149.96h-195.36a14.52 14.52 0 0 1-14.47-14.47c0-7.96 6.51-14.48 14.47-14.48h195.36c7.97 0 14.48 6.52 14.48 14.48 0 7.96-6.51 14.47-14.48 14.47z"
 169 |               opacity=".1"/>
 170 |         <linearGradient id="n" x1="1490.5" x2="1490.5" y1="922.5" y2="999.5" gradientUnits="userSpaceOnUse">
 171 |           <stop offset="0" stop-color="#070028"/>
 172 |           <stop offset="1" stop-color="#2e3192"/>
 173 |         </linearGradient>
 174 |         <path fill="url(#n)" stroke="#000" stroke-miterlimit="10" d="M-18.5 922.5h3018v77h-3018z"/>
 175 |         <circle cx="1174" cy="193" r="2.83" fill="#FFF"/>
 176 |         <circle cx="900" cy="158" r="5.45" fill="#FFF" opacity=".59"/>
 177 |         <circle cx="545" cy="38" r="9" fill="#FFF" opacity=".59"/>
 178 |         <circle cx="82" cy="158" r="4.24" fill="#FFF"/>
 179 |         <circle cx="2805" cy="60" r="6" fill="#FFF" opacity=".57"/>
 180 |         <circle cx="2838" cy="69" r="2" fill="#FFF"/>
 181 |         <circle cx="2869" cy="246" r="5" fill="#FFF" opacity=".8"/>
 182 |         <circle cx="2457" cy="189" r="5" fill="#FFF" opacity=".8"/>
 183 |         <circle cx="2796" cy="372" r="5" fill="#FFF" opacity=".8"/>
 184 |         <circle cx="341" cy="189" r="6" fill="#FFF"/>
 185 |         <circle cx="1653" cy="338" r="6" fill="#FFF"/>
 186 |         <circle cx="1488" cy="81" r="6" fill="#FFF"/>
 187 |         <path
 188 |           d="M2301.55 722.92c1.92-1.66 3.35-8.26 3.35-8.26s-6.2 3.1-6.2 5.68c0 2.58 1.04 4.12 2.85 2.58zm2.32-2.58s4.12 0 9.28-1.04 8.77 1.55 9.8.52-15.47-4.64-19.08-.52"/>
 189 |         <path
 190 |           d="M2298.7 720.34s-8.76 3.6-11.34 3.1-7.74-2.07.51-2.07c8.26 0 9.4-.38 11.41-2.51m-.07 45.8c1.15-2.33 2-11.66 2-11.66s-3.7 4.37-3.7 8.02.62 5.83 1.7 3.64zm1.39-3.64s2.45 0 5.53-1.46 5.23 2.19 5.84.73-9.22-6.56-11.38-.73"/>
 191 |         <path
 192 |           d="M2297.52 761.02s-5.23 5.1-6.77 4.37c-1.53-.73-4.6-2.91.31-2.91 4.92 0 5.6-.55 6.8-3.56m-70.11-4c-1.24-1.66-2.15-8.26-2.15-8.26s3.97 3.1 3.97 5.68c0 2.58-.67 4.12-1.82 2.58zm-1.49-2.58s-2.65 0-5.95-1.04-5.62 1.55-6.28.52c-.66-1.03 9.92-4.64 12.23-.52"/>
 193 |         <path
 194 |           d="M2229.57 752.34s5.61 3.6 7.27 3.1 4.95-2.07-.33-2.07-6.03-.38-7.31-2.51m-123.45-48.94c-1.24-1.66-2.15-8.26-2.15-8.26s3.97 3.1 3.97 5.68c0 2.58-.67 4.12-1.82 2.58z"/>
 195 |         <path d="M2117 698.34s-2.59 0-5.82-1.17c-3.24-1.16-5.5 1.75-6.15.59-.65-1.17 9.7-5.23 11.97-.59"/>
 196 |         <path d="M2104.67 697.76s-6.17 2.56-6.69 4.21c-.52 1.65-1.13 5.25 1.89.9 3.01-4.34 3.74-4.72 6.23-4.57"/>
 197 |         <linearGradient id="o" x1="1888.51" x2="2127" y1="55.5" y2="55.5" gradientUnits="userSpaceOnUse">
 198 |           <stop offset="0" stop-color="#fff9b3" stop-opacity=".7"/>
 199 |           <stop offset="1" stop-color="#fff" stop-opacity="0"/>
 200 |         </linearGradient>
 201 |         <path fill="url(#o)"
 202 |               d="M1890.16 24.28C1933.92 19.94 2127-2.5 2127-2.5v116l-237.25-85.52c-1.86-.67-1.54-3.5.41-3.7z"/>
 203 |         <path fill="#1F1D2B"
 204 |               d="M783.56 119.74H629.7a7.46 7.46 0 0 1-7.45-7.45 7.47 7.47 0 0 1 7.45-7.44h153.85c4.1 0 7.44 3.35 7.44 7.44 0 4.1-3.35 7.45-7.44 7.45z"/>
 205 |         <path fill="#1F1D2B"
 206 |               d="M781.45 111.56H631.71a7.46 7.46 0 0 1-7.45-7.44c0-4.1 3.35-7.45 7.45-7.45h149.74c4.1 0 7.44 3.35 7.44 7.45a7.46 7.46 0 0 1-7.44 7.44z"
 207 |               opacity=".43"/>
 208 |         <path fill="#1F1D2B"
 209 |               d="M789.47 112.03H624.53a5.5 5.5 0 0 1-5.48-5.49 5.5 5.5 0 0 1 5.49-5.48h164.93a5.5 5.5 0 0 1 5.48 5.48 5.5 5.5 0 0 1-5.49 5.49z"
 210 |               opacity=".86"/>
 211 |         <path fill="#1F1D2B"
 212 |               d="M723.45 146.24l-15.85-31.41a7.46 7.46 0 0 1 3.3-10 7.46 7.46 0 0 1 9.99 3.3l15.85 31.4a7.46 7.46 0 0 1-3.3 10 7.46 7.46 0 0 1-10-3.3z"
 213 |               opacity=".76"/>
 214 |         <path fill="#1F1D2B"
 215 |               d="M709.86 93.81l26.61-23a7.46 7.46 0 0 1 10.5.76 7.46 7.46 0 0 1-.76 10.5l-26.62 23a7.46 7.46 0 0 1-10.5-.76 7.46 7.46 0 0 1 .77-10.5zm58.78 6.75l28.88-25.08L789 117z"/>
 216 |         <radialGradient id="p" cx="797" cy="76" r="4" gradientUnits="userSpaceOnUse">
 217 |           <stop offset="0" stop-color="#c81464"/>
 218 |           <stop offset="1" stop-color="#933100" stop-opacity="0"/>
 219 |         </radialGradient>
 220 |         <path fill="url(#p)" d="M797 80c-2.2 0-4-1.8-4-4s1.8-4 4-4 4 1.8 4 4-1.8 4-4 4z"/>
 221 |         <g opacity=".35">
 222 |           <radialGradient id="q" cx="796.58" cy="80" r="4" gradientTransform="translate(291.91 27.37) scale(.6328)"
 223 |                           gradientUnits="userSpaceOnUse">
 224 |             <stop offset="0" stop-color="#fff"/>
 225 |             <stop offset="1" stop-color="#fff" stop-opacity="0"/>
 226 |           </radialGradient>
 227 |           <path fill="url(#q)" d="M796 80.53a2.53 2.53 0 1 1 0-5.05 2.53 2.53 0 0 1 0 5.05z"/>
 228 |         </g>
 229 |         <path fill="#FFF"
 230 |               d="M1118.5 120h-182a3.51 3.51 0 0 1-3.5-3.5v-8a3.5 3.5 0 0 1 3.5-3.5h182a3.5 3.5 0 0 1 3.5 3.5v8c0 1.92-1.58 3.5-3.5 3.5zm-178 111h-98a3.5 3.5 0 0 1 0-7h98a3.5 3.5 0 0 1 0 7zm-74-115h-36a3.5 3.5 0 0 1 0-7h36a3.5 3.5 0 0 1 0 7zm112-62h-62a3.5 3.5 0 0 1 0-7h62a3.5 3.5 0 0 1 0 7zm198 51h-26a3.5 3.5 0 0 1 0-7h26a3.5 3.5 0 0 1 0 7z"
 231 |               opacity=".03"/>
 232 |         <g opacity=".3">
 233 |           <path fill="#FFF"
 234 |                 d="M1469.93 422.7a10.83 10.83 0 0 1-12.27-9.08 10.83 10.83 0 0 1 9.08-12.27 10.83 10.83 0 0 1 12.28 9.08 10.83 10.83 0 0 1-9.1 12.27z"
 235 |                 opacity=".25"/>
 236 |           <path fill="#FFF"
 237 |                 d="M1469.5 419.88a7.96 7.96 0 0 1-9.01-6.68 7.96 7.96 0 0 1 6.67-9.02 7.96 7.96 0 0 1 9.03 6.68 7.96 7.96 0 0 1-6.68 9.02z"
 238 |                 opacity=".22"/>
 239 |           <linearGradient id="r" x1="1180.32" x2="1180.32" y1="1190.26" y2="912.26"
 240 |                           gradientTransform="matrix(.4432 -.5986 .8097 .5995 -18.4 404.93)"
 241 |                           gradientUnits="userSpaceOnUse">
 242 |             <stop offset="0" stop-color="#c4c7ff" stop-opacity=".5"/>
 243 |             <stop offset="1" stop-color="#fff" stop-opacity="0"/>
 244 |           </linearGradient>
 245 |           <path fill="url(#r)"
 246 |                 d="M1467.83 412.71a3.88 3.88 0 0 1-5.43.81l-221.97-164.34 5.76-7.78 220.43 163.2a5.8 5.8 0 0 1 1.21 8.11z"
 247 |                 opacity=".81"/>
 248 |           <path fill="#FFF"
 249 |                 d="M1469.02 416.6a4.64 4.64 0 0 1-5.26-3.9 4.64 4.64 0 0 1 3.9-5.25 4.64 4.64 0 0 1 5.25 3.9 4.64 4.64 0 0 1-3.9 5.25z"
 250 |                 opacity=".35"/>
 251 |         </g>
 252 |       </svg>
 253 | 
 254 |       <svg *ngSwitchCase="city === 'doha'" class="city__illustration" viewBox="0 0 3000 1000">
 255 |         <g opacity=".8">
 256 |           <linearGradient id="a" x1="2091.51" x2="908.49" y1="-524.52" y2="1524.52" gradientUnits="userSpaceOnUse">
 257 |             <stop offset="0" stop-color="#0051af"/>
 258 |             <stop offset=".26" stop-color="#008daf"/>
 259 |             <stop offset="1" stop-color="#1b2c32"/>
 260 |           </linearGradient>
 261 |           <path fill="url(#a)" d="M0 0h3000v1000H0z"/>
 262 |         </g>
 263 |         <path fill="#1C1549" d="M0 748h2253v18H0z"/>
 264 |         <g opacity=".51">
 265 |           <linearGradient id="b" x1="3002" x2="0" y1="500" y2="500" gradientUnits="userSpaceOnUse">
 266 |             <stop offset="0" stop-color="#7f21b9"/>
 267 |             <stop offset="1" stop-color="#1b2c32"/>
 268 |           </linearGradient>
 269 |           <path fill="url(#b)" d="M0 0h3002v1000H0z"/>
 270 |         </g>
 271 |         <linearGradient id="c" x1="1779" x2="1779" y1="485.5" y2="926.5" gradientUnits="userSpaceOnUse">
 272 |           <stop offset="0" stop-color="red"/>
 273 |           <stop offset="1" stop-color="#846b00"/>
 274 |         </linearGradient>
 275 |         <path fill="url(#c)" d="M2220 926.5h-882c0-243.56 197.44-441 441-441s441 197.44 441 441z" opacity=".02"/>
 276 |         <linearGradient id="d" x1="1779" x2="1779" y1="510" y2="902" gradientUnits="userSpaceOnUse">
 277 |           <stop offset="0" stop-color="red"/>
 278 |           <stop offset="1" stop-color="#846b00"/>
 279 |         </linearGradient>
 280 |         <path fill="url(#d)" d="M2171 902h-784c0-216.5 175.5-392 392-392s392 175.5 392 392z" opacity=".02"/>
 281 |         <linearGradient id="e" x1="1779" x2="1779" y1="485.5" y2="926.5" gradientUnits="userSpaceOnUse">
 282 |           <stop offset="0" stop-color="red"/>
 283 |           <stop offset="1" stop-color="#846b00"/>
 284 |         </linearGradient>
 285 |         <path fill="url(#e)" d="M2220 926.5h-882c0-243.56 197.44-441 441-441s441 197.44 441 441z" opacity=".02"/>
 286 |         <linearGradient id="f" x1="1779" x2="1779" y1="485.5" y2="926.5" gradientUnits="userSpaceOnUse">
 287 |           <stop offset="0" stop-color="red"/>
 288 |           <stop offset="1" stop-color="#846b00"/>
 289 |         </linearGradient>
 290 |         <path fill="url(#f)" d="M2220 926.5h-882c0-243.56 197.44-441 441-441s441 197.44 441 441z" opacity=".02"/>
 291 |         <path fill="#1C1549" d="M912 747H793l35-190 24-110z" opacity=".5"/>
 292 |         <path fill="#1C1549" d="M96 444h100v307H96z"/>
 293 |         <path fill="#16133F" d="M846 747H718V420c70.7 0 128 57.3 128 128v199z"/>
 294 |         <path fill="#1C1549" d="M169 393h-52l-21 54h100zm-5-24l-39 1-1 23h40z"/>
 295 |         <path fill="#16133F" d="M1112 581h-104l-24 167h128z"/>
 296 |         <path fill="#16133F" d="M1112 500l-82 48-4 35 86-2z"/>
 297 |         <path fill="#16133F" d="M1112 482l-32-6-2 44 34-20z"/>
 298 |         <path fill="#1C1549" d="M756 747H628V420c70.7 0 128 57.3 128 128v199z"/>
 299 |         <path fill="#16133F"
 300 |               d="M1305.65 527c-.06 57.58 7.25 130.85 29.35 221h-163c22.1-90.15 29.41-163.42 29.35-221-.08-75.02-12.66-123.43-21.32-147.89-4.35-12.29-7.71-18.53-8.01-19.07l-.02-.04h163l-.02.04c-.3.54-3.66 6.78-8.01 19.07-8.66 24.46-21.24 72.87-21.32 147.89z"
 301 |               opacity=".9"/>
 302 |         <path fill="#1C1549" d="M228 485h119v263H228z" opacity=".8"/>
 303 |         <path fill="#1C1549" d="M167 574.52h51v171.86h-51z" opacity=".5"/>
 304 |         <path fill="#1C1549"
 305 |               d="M512.33 747H382V408.17c0-35.85 29.32-65.17 65.17-65.17 35.84 0 65.16 29.32 65.16 65.17V747z"/>
 306 |         <path fill="#1C1549" d="M450 351h-6l3-79z"/>
 307 |         <path fill="#1C1549" d="M347 694h32v52.38h-32zm272 54H500l35-190h84z" opacity=".5"/>
 308 |         <path fill="#1C1549" d="M0 690h37v58H0z" opacity=".4"/>
 309 |         <path fill="#1C1549" d="M39 616h54v131H39zm54 0H63v-52h30z" opacity=".7"/>
 310 |         <path fill="#16133F" d="M1430 524h108v224h-108zm17-25h75v25h-75zm63 0h-53v-23.5a26.5 26.5 0 0 1 53 0V499z"
 311 |               opacity=".9"/>
 312 |         <path fill="#16133F" d="M903.97 463.05h104.07V748H903.97z" opacity=".8"/>
 313 |         <ellipse cx="956" cy="462.43" fill="#16133F" opacity=".8" rx="52.03" ry="77.43"/>
 314 |         <path fill="#1C1549" d="M1349 574h53v174h-53zm53 0h-53v-39l15 12z" opacity=".8"/>
 315 |         <path fill="#1C1549" d="M1119 431h68v317h-68z" opacity=".7"/>
 316 |         <path fill="#1C1549" d="M379 694h-17v-69l1 23zm-25-69h8v69h-8z" opacity=".5"/>
 317 |         <g opacity=".51">
 318 |           <linearGradient id="g" x1="1501" x2="1501" y1="998" y2="-2" gradientUnits="userSpaceOnUse">
 319 |             <stop offset="0" stop-color="#d72c32"/>
 320 |             <stop offset="1" stop-color="#649eb9"/>
 321 |           </linearGradient>
 322 |           <path fill="url(#g)" d="M0-2h3002V998H0z"/>
 323 |         </g>
 324 |         <linearGradient id="h" x1="1500.31" x2="1500.31" y1="766" y2="1008.78" gradientUnits="userSpaceOnUse">
 325 |           <stop offset="0" stop-color="#5d224b"/>
 326 |           <stop offset="1" stop-color="#040050"/>
 327 |         </linearGradient>
 328 |         <path fill="url(#h)" d="M-2 771.86s2998.22-23.03 3002.22 22.22S3002 1000 3002 1000l-3004 8.78V771.86z"/>
 329 |         <linearGradient id="i" x1="1963" x2="1963" y1="891" y2="557" gradientUnits="userSpaceOnUse">
 330 |           <stop offset="0" stop-color="#28004b"/>
 331 |           <stop offset="1" stop-color="#040050"/>
 332 |         </linearGradient>
 333 |         <path fill="url(#i)" d="M1937 557h52v334h-52z"/>
 334 |         <linearGradient id="j" x1="2137" x2="2137" y1="891" y2="593" gradientUnits="userSpaceOnUse">
 335 |           <stop offset="0" stop-color="#28004b"/>
 336 |           <stop offset="1" stop-color="#040050"/>
 337 |         </linearGradient>
 338 |         <path fill="url(#j)" d="M2111 593h52v298h-52z"/>
 339 |         <linearGradient id="k" x1="2594.5" x2="2594.5" y1="848" y2="706" gradientUnits="userSpaceOnUse">
 340 |           <stop offset="0" stop-color="#28004b"/>
 341 |           <stop offset="1" stop-color="#040050"/>
 342 |         </linearGradient>
 343 |         <path fill="url(#k)" d="M2191 706h807v142h-807z"/>
 344 |         <linearGradient id="l" x1="2614" x2="2614" y1="706" y2="564" gradientUnits="userSpaceOnUse">
 345 |           <stop offset="0" stop-color="#28004b"/>
 346 |           <stop offset="1" stop-color="#040050"/>
 347 |         </linearGradient>
 348 |         <path fill="url(#l)" d="M2234 564h760v142h-760z" opacity=".9"/>
 349 |         <linearGradient id="m" x1="2705" x2="2705" y1="706" y2="564" gradientTransform="rotate(180 2705 635)"
 350 |                         gradientUnits="userSpaceOnUse">
 351 |           <stop offset="0" stop-color="#28004b"/>
 352 |           <stop offset="1" stop-color="#040050"/>
 353 |         </linearGradient>
 354 |         <path fill="url(#m)" d="M2415 564h580v142h-580z" opacity=".6"/>
 355 |         <linearGradient id="n" x1="2568.5" x2="2568.5" y1="706" y2="564" gradientTransform="rotate(180 2705 635)"
 356 |                         gradientUnits="userSpaceOnUse">
 357 |           <stop offset="0" stop-color="#28004b"/>
 358 |           <stop offset="1" stop-color="#040050"/>
 359 |         </linearGradient>
 360 |         <path fill="url(#n)" d="M2681 564h321v142h-321z" opacity=".9"/>
 361 |         <linearGradient id="o" x1="2739.5" x2="2739.5" y1="848" y2="706" gradientTransform="rotate(180 2705 635)"
 362 |                         gradientUnits="userSpaceOnUse">
 363 |           <stop offset="0" stop-color="#28004b"/>
 364 |           <stop offset="1" stop-color="#040050"/>
 365 |         </linearGradient>
 366 |         <path fill="url(#o)" d="M2339 422h663v142h-663z" opacity=".8"/>
 367 |         <linearGradient id="p" x1="2585" x2="2585" y1="848" y2="706" gradientTransform="rotate(180 2705 635)"
 368 |                         gradientUnits="userSpaceOnUse">
 369 |           <stop offset="0" stop-color="#28004b"/>
 370 |           <stop offset="1" stop-color="#040050"/>
 371 |         </linearGradient>
 372 |         <path fill="url(#p)" d="M2648 422h354v142h-354z"/>
 373 |         <linearGradient id="q" x1="2862" x2="2862" y1="990" y2="848" gradientTransform="rotate(180 2705 635)"
 374 |                         gradientUnits="userSpaceOnUse">
 375 |           <stop offset="0" stop-color="#28004b"/>
 376 |           <stop offset="1" stop-color="#040050"/>
 377 |         </linearGradient>
 378 |         <path fill="url(#q)" d="M2415 280h266v142h-266z" opacity=".8"/>
 379 |         <linearGradient id="r" x1="2730" x2="2410" y1="919" y2="919" gradientTransform="rotate(180 2705 635)"
 380 |                         gradientUnits="userSpaceOnUse">
 381 |           <stop offset="0" stop-color="#28004b"/>
 382 |           <stop offset="1" stop-color="#040050"/>
 383 |         </linearGradient>
 384 |         <path fill="url(#r)" d="M2680 280h320v142h-320z" opacity=".9"/>
 385 |         <linearGradient id="s" x1="2774" x2="2774" y1="1177" y2="990" gradientTransform="rotate(180 2705 635)"
 386 |                         gradientUnits="userSpaceOnUse">
 387 |           <stop offset="0" stop-color="#28004b"/>
 388 |           <stop offset="1" stop-color="#040050"/>
 389 |         </linearGradient>
 390 |         <path fill="url(#s)" d="M2548 101l176-8v187h-176z" opacity=".8"/>
 391 |         <linearGradient id="t" x1="2949" x2="2949" y1="1177" y2="990" gradientTransform="matrix(1 0 0 -1 -139 1270)"
 392 |                         gradientUnits="userSpaceOnUse">
 393 |           <stop offset="0" stop-color="#28004b"/>
 394 |           <stop offset="1" stop-color="#040050"/>
 395 |         </linearGradient>
 396 |         <path fill="url(#t)" d="M2896 105l-172-12v187h169z"/>
 397 |         <linearGradient id="u" x1="2615.5" x2="2615.5" y1="569" y2="427" gradientTransform="translate(190 274)"
 398 |                         gradientUnits="userSpaceOnUse">
 399 |           <stop offset="0" stop-color="#28004b"/>
 400 |           <stop offset="1" stop-color="#040050"/>
 401 |         </linearGradient>
 402 |         <path fill="url(#u)" d="M2609 701h393v142h-393z"/>
 403 |         <linearGradient id="v" x1="2927" x2="2927" y1="569" y2="427" gradientTransform="rotate(180 2705 635)"
 404 |                         gradientUnits="userSpaceOnUse">
 405 |           <stop offset="0" stop-color="#28004b"/>
 406 |           <stop offset="1" stop-color="#040050"/>
 407 |         </linearGradient>
 408 |         <path fill="url(#v)" d="M2361 701h244v142h-244z"/>
 409 |         <path fill="#16133F" d="M1184.03 391.11l-8.01-19.07c.3.54 3.66 6.78 8.01 19.07z"/>
 410 |         <g opacity=".65">
 411 |           <path fill="#16133F"
 412 |                 d="M1240.8 832.14v43.37s33.73 41.17 66 47.56l181.12-3.55s12.46-20.58 117.32-59.62c0 0-129.06 22.71-151.06 18.45-22-4.26-114.39 4.97-142.99-2.84l-37.4-40.43-32.99-2.94z"/>
 413 |           <path fill="#16133F"
 414 |                 d="M1584.71 868.6l19.14-22.72 13.97-2.74-13.67 23.01zm-77.53 6.97l-.2-41.96H1306.8l.57 5.52 192.28.35 1.76 36.82zm-266.38-66.16h4.4v27.13h-4.4zm7.33 0h4.4v27.13h-4.4zm7.34 0h4.4v27.13h-4.4zm7.33 0h4.4v27.13h-4.4zm7.33 0h4.4v27.13h-4.4zm7.33 0h4.4v27.13h-4.4zm7.34 0h4.4v27.13h-4.4zm7.33 0h4.4v27.13h-4.4zm7.33 0h4.4v27.13h-4.4z"/>
 415 |           <path fill="#16133F"
 416 |                 d="M1306.8 809.41h4.4v27.13h-4.4zm7.33 0h4.4v27.13h-4.4zm7.33 0h4.4v27.13h-4.4zm7.33 0h4.4v27.13h-4.4zm7.34 0h4.4v27.13h-4.4zm7.33 0h4.4v27.13h-4.4zm7.33 0h4.4v27.13h-4.4zm7.34 0h4.4v27.13h-4.4zm7.33 0h4.4v27.13h-4.4zm-46.2 28.6h2.2v41.06h-2.2zm-22-1.47h2.2v41.06h-2.2zm36.67 1.47h2.2v41.06h-2.2zm14.66 0h2.2v41.06h-2.2zm14.67 0h2.2v41.06h-2.2zm14.66 0h2.2v41.06h-2.2zm14.67 0h2.2v41.06h-2.2zm14.66 0h2.2v41.06h-2.2zm14.67 0h2.2v41.06h-2.2zm14.67 0h2.2v41.06h-2.2zm14.66 0h2.2v41.06h-2.2zm14.67 0h2.2v41.06h-2.2zm17.6 0h2.2v41.06h-2.2z"/>
 417 |           <path fill="#16133F"
 418 |                 d="M1240.8 821.88v-13.93h128.32v4.4zm-1.1 12.71s190.63 21.1 276.63 9.04c0 0-3.25-5.7-9.8-4.6-6.55 1.09-178.43-26.19-266.83-4.44zm49.5 18.09h215.58v5.87H1289.2z"/>
 419 |           <path fill="#16133F"
 420 |                 d="M1240.8 808.43s-13.93-7.08-20.53-10.02c-6.6-2.93 0 0 0 0s0-1.46 2.93-1.46-.73.73 19.8 11l-2.2.48z"/>
 421 |           <linearGradient id="w" x1="1211.4" x2="1211.4" y1="827.01" y2="786" gradientUnits="userSpaceOnUse">
 422 |             <stop offset="0" stop-color="#28004b"/>
 423 |             <stop offset="1" stop-color="#040050"/>
 424 |           </linearGradient>
 425 |           <path fill="url(#w)"
 426 |                 d="M1212.5 786s-10.2 16.81-14.41 29.65c0 0 1.65 3.3 3.11 6.96s-1.46 2.2 1.47 3.67 0 0 4.4.73h11s-4.32-12.2 6.64-29.93L1212.49 786z"/>
 427 |         </g>
 428 |         <linearGradient id="x" x1="1774" x2="1774" y1="645" y2="745" gradientUnits="userSpaceOnUse">
 429 |           <stop offset="0" stop-color="#64001c"/>
 430 |           <stop offset="1" stop-color="#df6b00"/>
 431 |         </linearGradient>
 432 |         <path fill="url(#x)" d="M1874 745h-200c0-55.23 44.77-100 100-100s100 44.77 100 100z" opacity=".36"/>
 433 |         <linearGradient id="y" x1="1779" x2="1779" y1="606" y2="806" gradientUnits="userSpaceOnUse">
 434 |           <stop offset="0" stop-color="red"/>
 435 |           <stop offset="1" stop-color="#846b00"/>
 436 |         </linearGradient>
 437 |         <path fill="url(#y)" d="M1979 806h-400c0-110.46 89.54-200 200-200s200 89.54 200 200z" opacity=".02"/>
 438 |         <linearGradient id="z" x1="1779" x2="1779" y1="579" y2="833" gradientUnits="userSpaceOnUse">
 439 |           <stop offset="0" stop-color="red"/>
 440 |           <stop offset="1" stop-color="#846b00"/>
 441 |         </linearGradient>
 442 |         <path fill="url(#z)" d="M2033 833h-508c0-140.28 113.72-254 254-254s254 113.72 254 254z" opacity=".02"/>
 443 |         <linearGradient id="A" x1="1779" x2="1779" y1="537.5" y2="874.5" gradientUnits="userSpaceOnUse">
 444 |           <stop offset="0" stop-color="red"/>
 445 |           <stop offset="1" stop-color="#846b00"/>
 446 |         </linearGradient>
 447 |         <path fill="url(#A)" d="M2116 874.5h-674c0-186.13 150.88-337 337-337s337 150.88 337 337z" opacity=".02"/>
 448 |         <linearGradient id="B" x1="1779" x2="1779" y1="562.5" y2="849.5" gradientUnits="userSpaceOnUse">
 449 |           <stop offset="0" stop-color="red"/>
 450 |           <stop offset="1" stop-color="#846b00"/>
 451 |         </linearGradient>
 452 |         <path fill="url(#B)" d="M2066 849.5h-574c0-158.51 128.49-287 287-287s287 128.49 287 287z" opacity=".02"/>
 453 |         <linearGradient id="C" x1="1779" x2="1779" y1="606" y2="806" gradientUnits="userSpaceOnUse">
 454 |           <stop offset="0" stop-color="red"/>
 455 |           <stop offset="1" stop-color="#846b00"/>
 456 |         </linearGradient>
 457 |         <path fill="url(#C)" d="M1979 806h-400c0-110.46 89.54-200 200-200s200 89.54 200 200z" opacity=".02"/>
 458 |         <linearGradient id="D" x1="1779" x2="1779" y1="637.5" y2="774.5" gradientUnits="userSpaceOnUse">
 459 |           <stop offset="0" stop-color="red"/>
 460 |           <stop offset="1" stop-color="#846b00"/>
 461 |         </linearGradient>
 462 |         <path fill="url(#D)" d="M1916 774.5h-274c0-75.67 61.34-137 137-137s137 61.34 137 137z" opacity=".02"/>
 463 |         <linearGradient id="E" x1="1779" x2="1779" y1="620" y2="792" gradientUnits="userSpaceOnUse">
 464 |           <stop offset="0" stop-color="red"/>
 465 |           <stop offset="1" stop-color="#846b00"/>
 466 |         </linearGradient>
 467 |         <path fill="url(#E)" d="M1951 792h-344c0-95 77-172 172-172s172 77 172 172z" opacity=".02"/>
 468 |         <linearGradient id="F" x1="1957" x2="1963" y1="532" y2="532" gradientUnits="userSpaceOnUse">
 469 |           <stop offset="0" stop-color="#28004b"/>
 470 |           <stop offset="1" stop-color="#040050"/>
 471 |         </linearGradient>
 472 |         <path fill="url(#F)" d="M1957 507h6v50h-6z"/>
 473 |         <linearGradient id="G" x1="2133" x2="2139" y1="568" y2="568" gradientUnits="userSpaceOnUse">
 474 |           <stop offset="0" stop-color="#28004b"/>
 475 |           <stop offset="1" stop-color="#040050"/>
 476 |         </linearGradient>
 477 |         <path fill="url(#G)" d="M2133 543h6v50h-6z"/>
 478 |         <linearGradient id="H" x1="1923" x2="1993" y1="503.67" y2="503.67" gradientUnits="userSpaceOnUse">
 479 |           <stop offset="0" stop-color="#28004b"/>
 480 |           <stop offset="1" stop-color="#040050"/>
 481 |         </linearGradient>
 482 |         <path fill="url(#H)" d="M1923 507s41-15 70 0h-70z"/>
 483 |         <linearGradient id="I" x1="2100" x2="2170" y1="539.67" y2="539.67" gradientUnits="userSpaceOnUse">
 484 |           <stop offset="0" stop-color="#28004b"/>
 485 |           <stop offset="1" stop-color="#040050"/>
 486 |         </linearGradient>
 487 |         <path fill="url(#I)" d="M2100 543s41-15 70 0h-70z"/>
 488 |         <linearGradient id="J" x1="1989" x2="3002" y1="864.5" y2="864.5" gradientUnits="userSpaceOnUse">
 489 |           <stop offset="0" stop-color="#25004b"/>
 490 |           <stop offset="1" stop-color="#040050"/>
 491 |         </linearGradient>
 492 |         <path fill="url(#J)" d="M1989 838h1013v53H1989z"/>
 493 |         <linearGradient id="K" x1="1854" x2="1937" y1="878.5" y2="878.5" gradientUnits="userSpaceOnUse">
 494 |           <stop offset="0" stop-color="#25004b"/>
 495 |           <stop offset="1" stop-color="#040050"/>
 496 |         </linearGradient>
 497 |         <path fill="url(#K)" d="M1854 866h83v25h-83z"/>
 498 |         <linearGradient id="L" x1="1896" x2="1937" y1="860" y2="860" gradientUnits="userSpaceOnUse">
 499 |           <stop offset="0" stop-color="#25004b"/>
 500 |           <stop offset="1" stop-color="#040050"/>
 501 |         </linearGradient>
 502 |         <path fill="url(#L)" d="M1896 854h41v12h-41z"/>
 503 |         <linearGradient id="M" x1="1922" x2="1937" y1="848" y2="848" gradientUnits="userSpaceOnUse">
 504 |           <stop offset="0" stop-color="#25004b"/>
 505 |           <stop offset="1" stop-color="#040050"/>
 506 |         </linearGradient>
 507 |         <path fill="url(#M)" d="M1922 842h15v12h-15z"/>
 508 |         <linearGradient id="N" x1="2882" x2="2882" y1="334" y2="325" gradientUnits="userSpaceOnUse">
 509 |           <stop offset="0" stop-color="#28004b"/>
 510 |           <stop offset="1" stop-color="#040050"/>
 511 |         </linearGradient>
 512 |         <path fill="url(#N)" d="M2875 334s12.53-3 14-9v9h-14z"/>
 513 |         <linearGradient id="O" x1="2837.94" x2="2837.94" y1="334" y2="325"
 514 |                         gradientTransform="matrix(-.8421 0 0 1 5286.84 0)" gradientUnits="userSpaceOnUse">
 515 |           <stop offset="0" stop-color="#28004b"/>
 516 |           <stop offset="1" stop-color="#040050"/>
 517 |         </linearGradient>
 518 |         <path fill="url(#O)" d="M2889 334h16s-14.32-3-16-9"/>
 519 |         <linearGradient id="P" x1="2875" x2="2905" y1="348" y2="348" gradientUnits="userSpaceOnUse">
 520 |           <stop offset="0" stop-color="#28004b"/>
 521 |           <stop offset="1" stop-color="#040050"/>
 522 |         </linearGradient>
 523 |         <path fill="url(#P)" d="M2875 334h30v28h-30z"/>
 524 |         <linearGradient id="Q" x1="2772" x2="2772" y1="332" y2="323" gradientUnits="userSpaceOnUse">
 525 |           <stop offset="0" stop-color="#28004b"/>
 526 |           <stop offset="1" stop-color="#040050"/>
 527 |         </linearGradient>
 528 |         <path fill="url(#Q)" d="M2765 332s12.53-3 14-9v9h-14z"/>
 529 |         <linearGradient id="R" x1="2968.56" x2="2968.56" y1="332" y2="323"
 530 |                         gradientTransform="matrix(-.8421 0 0 1 5286.84 0)" gradientUnits="userSpaceOnUse">
 531 |           <stop offset="0" stop-color="#28004b"/>
 532 |           <stop offset="1" stop-color="#040050"/>
 533 |         </linearGradient>
 534 |         <path fill="url(#R)" d="M2779 332h16s-14.32-3-16-9"/>
 535 |         <linearGradient id="S" x1="2765" x2="2795" y1="346" y2="346" gradientUnits="userSpaceOnUse">
 536 |           <stop offset="0" stop-color="#28004b"/>
 537 |           <stop offset="1" stop-color="#040050"/>
 538 |         </linearGradient>
 539 |         <path fill="url(#S)" d="M2765 332h30v28h-30z"/>
 540 |         <linearGradient id="T" x1="2757" x2="2757" y1="484" y2="475" gradientUnits="userSpaceOnUse">
 541 |           <stop offset="0" stop-color="#28004b"/>
 542 |           <stop offset="1" stop-color="#040050"/>
 543 |         </linearGradient>
 544 |         <path fill="url(#T)" d="M2750 484s12.53-3 14-9v9h-14z"/>
 545 |         <linearGradient id="U" x1="2986.38" x2="2986.38" y1="484" y2="475"
 546 |                         gradientTransform="matrix(-.8421 0 0 1 5286.84 0)" gradientUnits="userSpaceOnUse">
 547 |           <stop offset="0" stop-color="#28004b"/>
 548 |           <stop offset="1" stop-color="#040050"/>
 549 |         </linearGradient>
 550 |         <path fill="url(#U)" d="M2764 484h16s-14.32-3-16-9"/>
 551 |         <linearGradient id="V" x1="2750" x2="2780" y1="498" y2="498" gradientUnits="userSpaceOnUse">
 552 |           <stop offset="0" stop-color="#28004b"/>
 553 |           <stop offset="1" stop-color="#040050"/>
 554 |         </linearGradient>
 555 |         <path fill="url(#V)" d="M2750 484h30v28h-30z"/>
 556 |         <linearGradient id="W" x1="2943" x2="2943" y1="484" y2="475" gradientUnits="userSpaceOnUse">
 557 |           <stop offset="0" stop-color="#28004b"/>
 558 |           <stop offset="1" stop-color="#040050"/>
 559 |         </linearGradient>
 560 |         <path fill="url(#W)" d="M2936 484s12.53-3 14-9v9h-14z"/>
 561 |         <linearGradient id="X" x1="2765.5" x2="2765.5" y1="484" y2="475"
 562 |                         gradientTransform="matrix(-.8421 0 0 1 5286.84 0)" gradientUnits="userSpaceOnUse">
 563 |           <stop offset="0" stop-color="#28004b"/>
 564 |           <stop offset="1" stop-color="#040050"/>
 565 |         </linearGradient>
 566 |         <path fill="url(#X)" d="M2950 484h16s-14.32-3-16-9"/>
 567 |         <linearGradient id="Y" x1="2936" x2="2966" y1="498" y2="498" gradientUnits="userSpaceOnUse">
 568 |           <stop offset="0" stop-color="#28004b"/>
 569 |           <stop offset="1" stop-color="#040050"/>
 570 |         </linearGradient>
 571 |         <path fill="url(#Y)" d="M2936 484h30v28h-30z"/>
 572 |         <linearGradient id="Z" x1="2852" x2="2852" y1="483" y2="474" gradientUnits="userSpaceOnUse">
 573 |           <stop offset="0" stop-color="#28004b"/>
 574 |           <stop offset="1" stop-color="#040050"/>
 575 |         </linearGradient>
 576 |         <path fill="url(#Z)" d="M2845 483s12.53-3 14-9v9h-14z"/>
 577 |         <linearGradient id="aa" x1="2873.56" x2="2873.56" y1="483" y2="474"
 578 |                         gradientTransform="matrix(-.8421 0 0 1 5286.84 0)" gradientUnits="userSpaceOnUse">
 579 |           <stop offset="0" stop-color="#28004b"/>
 580 |           <stop offset="1" stop-color="#040050"/>
 581 |         </linearGradient>
 582 |         <path fill="url(#aa)" d="M2859 483h16s-14.32-3-16-9"/>
 583 |         <linearGradient id="ab" x1="2845" x2="2875" y1="497" y2="497" gradientUnits="userSpaceOnUse">
 584 |           <stop offset="0" stop-color="#28004b"/>
 585 |           <stop offset="1" stop-color="#040050"/>
 586 |         </linearGradient>
 587 |         <path fill="url(#ab)" d="M2845 483h30v28h-30z"/>
 588 |         <g opacity=".8">
 589 |           <linearGradient id="ac" x1="2582.13" x2="2582.13" y1="341" y2="332" gradientUnits="userSpaceOnUse">
 590 |             <stop offset="0" stop-color="#28004b"/>
 591 |             <stop offset="1" stop-color="#040050"/>
 592 |           </linearGradient>
 593 |           <path fill="url(#ac)" d="M2577 341s9.19-3 10.27-9v9H2577z"/>
 594 |           <linearGradient id="ad" x1="3198.78" x2="3198.78" y1="341" y2="332"
 595 |                           gradientTransform="matrix(-.8421 0 0 1 5286.84 0)" gradientUnits="userSpaceOnUse">
 596 |             <stop offset="0" stop-color="#28004b"/>
 597 |             <stop offset="1" stop-color="#040050"/>
 598 |           </linearGradient>
 599 |           <path fill="url(#ad)" d="M2587.27 341H2599s-10.5-3-11.73-9"/>
 600 |           <linearGradient id="ae" x1="2577" x2="2599" y1="355" y2="355" gradientUnits="userSpaceOnUse">
 601 |             <stop offset="0" stop-color="#28004b"/>
 602 |             <stop offset="1" stop-color="#040050"/>
 603 |           </linearGradient>
 604 |           <path fill="url(#ae)" d="M2577 341h22v28h-22z"/>
 605 |         </g>
 606 |         <g opacity=".8">
 607 |           <linearGradient id="af" x1="2484.13" x2="2484.13" y1="338" y2="329" gradientUnits="userSpaceOnUse">
 608 |             <stop offset="0" stop-color="#28004b"/>
 609 |             <stop offset="1" stop-color="#040050"/>
 610 |           </linearGradient>
 611 |           <path fill="url(#af)" d="M2479 338s9.19-3 10.27-9v9H2479z"/>
 612 |           <linearGradient id="ag" x1="3315.15" x2="3315.15" y1="338" y2="329"
 613 |                           gradientTransform="matrix(-.8421 0 0 1 5286.84 0)" gradientUnits="userSpaceOnUse">
 614 |             <stop offset="0" stop-color="#28004b"/>
 615 |             <stop offset="1" stop-color="#040050"/>
 616 |           </linearGradient>
 617 |           <path fill="url(#ag)" d="M2489.27 338H2501s-10.5-3-11.73-9"/>
 618 |           <linearGradient id="ah" x1="2479" x2="2501" y1="352" y2="352" gradientUnits="userSpaceOnUse">
 619 |             <stop offset="0" stop-color="#28004b"/>
 620 |             <stop offset="1" stop-color="#040050"/>
 621 |           </linearGradient>
 622 |           <path fill="url(#ah)" d="M2479 338h22v28h-22z"/>
 623 |         </g>
 624 |         <linearGradient id="ai" x1="2644.25" x2="2644.25" y1="280" y2="223.56" gradientUnits="userSpaceOnUse">
 625 |           <stop offset="0" stop-color="#28004b"/>
 626 |           <stop offset="1" stop-color="#040050"/>
 627 |         </linearGradient>
 628 |         <path fill="url(#ai)" d="M2579.5 280s53.5-127 129.5 0h-129.5z" opacity=".6"/>
 629 |         <linearGradient id="aj" x1="2816.25" x2="2816.25" y1="280" y2="230" gradientUnits="userSpaceOnUse">
 630 |           <stop offset="0" stop-color="#28004b"/>
 631 |           <stop offset="1" stop-color="#040050"/>
 632 |         </linearGradient>
 633 |         <path fill="url(#aj)" d="M2761.5 280s52.16-112.5 109.5 0h-109.5z"/>
 634 |         <linearGradient id="ak" x1="2401.5" x2="2401.5" y1="471.84" y2="446.16" gradientUnits="userSpaceOnUse">
 635 |           <stop offset="0" stop-color="#28004b"/>
 636 |           <stop offset="1" stop-color="#040050"/>
 637 |         </linearGradient>
 638 |         <path fill="url(#ak)" d="M2420 471.84h-37v-7.18a18.5 18.5 0 0 1 37 0v7.18z"/>
 639 |         <linearGradient id="al" x1="2278.5" x2="2278.5" y1="660.84" y2="606" gradientUnits="userSpaceOnUse">
 640 |           <stop offset="0" stop-color="#28004b"/>
 641 |           <stop offset="1" stop-color="#040050"/>
 642 |         </linearGradient>
 643 |         <path fill="url(#al)" d="M2297 660.84h-37V624.5a18.5 18.5 0 0 1 37 0v36.34z"/>
 644 |         <linearGradient id="am" x1="2495.5" x2="2495.5" y1="471.84" y2="446.16" gradientUnits="userSpaceOnUse">
 645 |           <stop offset="0" stop-color="#28004b"/>
 646 |           <stop offset="1" stop-color="#040050"/>
 647 |         </linearGradient>
 648 |         <path fill="url(#am)" d="M2514 471.84h-37v-7.18a18.5 18.5 0 0 1 37 0v7.18z"/>
 649 |         <linearGradient id="an" x1="2590.5" x2="2590.5" y1="470.84" y2="445.16" gradientUnits="userSpaceOnUse">
 650 |           <stop offset="0" stop-color="#28004b"/>
 651 |           <stop offset="1" stop-color="#040050"/>
 652 |         </linearGradient>
 653 |         <path fill="url(#an)" d="M2609 470.84h-37v-7.18a18.5 18.5 0 0 1 37 0v7.18z"/>
 654 |         <linearGradient id="ao" x1="2278.5" x2="2278.5" y1="648" y2="642"
 655 |                         gradientTransform="matrix(1 0 0 -1.1667 0 1404)" gradientUnits="userSpaceOnUse">
 656 |           <stop offset="0" stop-color="#28004b"/>
 657 |           <stop offset="1" stop-color="#040050"/>
 658 |         </linearGradient>
 659 |         <path fill="url(#ao)" d="M2260 648h37v7h-37z"/>
 660 |         <linearGradient id="ap" x1="2359.5" x2="2359.5" y1="659.84" y2="605" gradientUnits="userSpaceOnUse">
 661 |           <stop offset="0" stop-color="#28004b"/>
 662 |           <stop offset="1" stop-color="#040050"/>
 663 |         </linearGradient>
 664 |         <path fill="url(#ap)" d="M2378 659.84h-37V623.5a18.5 18.5 0 0 1 37 0v36.34z"/>
 665 |         <linearGradient id="aq" x1="2359.5" x2="2359.5" y1="648.86" y2="642.86"
 666 |                         gradientTransform="matrix(1 0 0 -1.1667 0 1404)" gradientUnits="userSpaceOnUse">
 667 |           <stop offset="0" stop-color="#28004b"/>
 668 |           <stop offset="1" stop-color="#040050"/>
 669 |         </linearGradient>
 670 |         <path fill="url(#aq)" d="M2341 647h37v7h-37z"/>
 671 |         <linearGradient id="ar" x1="2415" x2="2684" y1="602.5" y2="602.5" gradientUnits="userSpaceOnUse">
 672 |           <stop offset="0" stop-color="#28004b"/>
 673 |           <stop offset="1" stop-color="#040050"/>
 674 |         </linearGradient>
 675 |         <path fill="url(#ar)" d="M2415 600h269v5h-269z" opacity=".6"/>
 676 |         <linearGradient id="as" x1="2415" x2="2684" y1="612.5" y2="612.5" gradientUnits="userSpaceOnUse">
 677 |           <stop offset="0" stop-color="#28004b"/>
 678 |           <stop offset="1" stop-color="#040050"/>
 679 |         </linearGradient>
 680 |         <path fill="url(#as)" d="M2415 610h269v5h-269z" opacity=".6"/>
 681 |         <linearGradient id="at" x1="2415" x2="2684" y1="622.5" y2="622.5" gradientUnits="userSpaceOnUse">
 682 |           <stop offset="0" stop-color="#28004b"/>
 683 |           <stop offset="1" stop-color="#040050"/>
 684 |         </linearGradient>
 685 |         <path fill="url(#at)" d="M2415 620h269v5h-269z" opacity=".6"/>
 686 |         <linearGradient id="au" x1="2415" x2="2684" y1="632.5" y2="632.5" gradientUnits="userSpaceOnUse">
 687 |           <stop offset="0" stop-color="#28004b"/>
 688 |           <stop offset="1" stop-color="#040050"/>
 689 |         </linearGradient>
 690 |         <path fill="url(#au)" d="M2415 630h269v5h-269z" opacity=".6"/>
 691 |         <linearGradient id="av" x1="2415" x2="2684" y1="642.5" y2="642.5" gradientUnits="userSpaceOnUse">
 692 |           <stop offset="0" stop-color="#28004b"/>
 693 |           <stop offset="1" stop-color="#040050"/>
 694 |         </linearGradient>
 695 |         <path fill="url(#av)" d="M2415 640h269v5h-269z" opacity=".6"/>
 696 |         <linearGradient id="aw" x1="2415" x2="2684" y1="652.5" y2="652.5" gradientUnits="userSpaceOnUse">
 697 |           <stop offset="0" stop-color="#28004b"/>
 698 |           <stop offset="1" stop-color="#040050"/>
 699 |         </linearGradient>
 700 |         <path fill="url(#aw)" d="M2415 650h269v5h-269z" opacity=".6"/>
 701 |         <linearGradient id="ax" x1="2415" x2="2684" y1="662.5" y2="662.5" gradientUnits="userSpaceOnUse">
 702 |           <stop offset="0" stop-color="#28004b"/>
 703 |           <stop offset="1" stop-color="#040050"/>
 704 |         </linearGradient>
 705 |         <path fill="url(#ax)" d="M2415 660h269v5h-269z" opacity=".6"/>
 706 |         <linearGradient id="ay" x1="2361" x2="2605" y1="730.5" y2="730.5" gradientUnits="userSpaceOnUse">
 707 |           <stop offset="0" stop-color="#28004b"/>
 708 |           <stop offset="1" stop-color="#040050"/>
 709 |         </linearGradient>
 710 |         <path fill="url(#ay)" d="M2361 728h244v5h-244z" opacity=".6"/>
 711 |         <linearGradient id="az" x1="2361" x2="2605" y1="740.5" y2="740.5" gradientUnits="userSpaceOnUse">
 712 |           <stop offset="0" stop-color="#28004b"/>
 713 |           <stop offset="1" stop-color="#040050"/>
 714 |         </linearGradient>
 715 |         <path fill="url(#az)" d="M2361 738h244v5h-244z" opacity=".6"/>
 716 |         <linearGradient id="aA" x1="2361" x2="2605" y1="750.5" y2="750.5" gradientUnits="userSpaceOnUse">
 717 |           <stop offset="0" stop-color="#28004b"/>
 718 |           <stop offset="1" stop-color="#040050"/>
 719 |         </linearGradient>
 720 |         <path fill="url(#aA)" d="M2361 748h244v5h-244z" opacity=".6"/>
 721 |         <linearGradient id="aB" x1="2361" x2="2605" y1="760.5" y2="760.5" gradientUnits="userSpaceOnUse">
 722 |           <stop offset="0" stop-color="#28004b"/>
 723 |           <stop offset="1" stop-color="#040050"/>
 724 |         </linearGradient>
 725 |         <path fill="url(#aB)" d="M2361 758h244v5h-244z" opacity=".6"/>
 726 |         <linearGradient id="aC" x1="2361" x2="2605" y1="770.5" y2="770.5" gradientUnits="userSpaceOnUse">
 727 |           <stop offset="0" stop-color="#28004b"/>
 728 |           <stop offset="1" stop-color="#040050"/>
 729 |         </linearGradient>
 730 |         <path fill="url(#aC)" d="M2361 768h244v5h-244z" opacity=".6"/>
 731 |         <linearGradient id="aD" x1="2361" x2="2605" y1="780.5" y2="780.5" gradientUnits="userSpaceOnUse">
 732 |           <stop offset="0" stop-color="#28004b"/>
 733 |           <stop offset="1" stop-color="#040050"/>
 734 |         </linearGradient>
 735 |         <path fill="url(#aD)" d="M2361 778h244v5h-244z" opacity=".6"/>
 736 |         <linearGradient id="aE" x1="2361" x2="2605" y1="790.5" y2="790.5" gradientUnits="userSpaceOnUse">
 737 |           <stop offset="0" stop-color="#28004b"/>
 738 |           <stop offset="1" stop-color="#040050"/>
 739 |         </linearGradient>
 740 |         <path fill="url(#aE)" d="M2361 788h244v5h-244z" opacity=".6"/>
 741 |         <linearGradient id="aF" x1="2361" x2="2605" y1="800.5" y2="800.5" gradientUnits="userSpaceOnUse">
 742 |           <stop offset="0" stop-color="#28004b"/>
 743 |           <stop offset="1" stop-color="#040050"/>
 744 |         </linearGradient>
 745 |         <path fill="url(#aF)" d="M2361 798h244v5h-244z" opacity=".6"/>
 746 |         <linearGradient id="aG" x1="2415" x2="2684" y1="672.5" y2="672.5" gradientUnits="userSpaceOnUse">
 747 |           <stop offset="0" stop-color="#28004b"/>
 748 |           <stop offset="1" stop-color="#040050"/>
 749 |         </linearGradient>
 750 |         <path fill="url(#aG)" d="M2415 670h269v5h-269z" opacity=".6"/>
 751 |         <linearGradient id="aH" x1="2496" x2="2496" y1="529" y2="495" gradientUnits="userSpaceOnUse">
 752 |           <stop offset="0" stop-color="#28004b"/>
 753 |           <stop offset="1" stop-color="#040050"/>
 754 |         </linearGradient>
 755 |         <path fill="url(#aH)" d="M2383 495h226v34h-226z" opacity=".2"/>
 756 |         <linearGradient id="aI" x1="2498" x2="2498" y1="547.5" y2="513.5"
 757 |                         gradientTransform="matrix(1 0 0 -.2353 0 665.82)" gradientUnits="userSpaceOnUse">
 758 |           <stop offset="0" stop-color="#28004b"/>
 759 |           <stop offset="1" stop-color="#040050"/>
 760 |         </linearGradient>
 761 |         <path fill="url(#aI)" d="M2385 537h226v8h-226z" opacity=".2"/>
 762 |         <linearGradient id="aJ" x1="2283" x2="2283" y1="755" y2="728" gradientUnits="userSpaceOnUse">
 763 |           <stop offset="0" stop-color="#28004b"/>
 764 |           <stop offset="1" stop-color="#040050"/>
 765 |         </linearGradient>
 766 |         <path fill="url(#aJ)" d="M2222 728h122v27h-122z" opacity=".5"/>
 767 |         <linearGradient id="aK" x1="2283" x2="2283" y1="790" y2="763" gradientUnits="userSpaceOnUse">
 768 |           <stop offset="0" stop-color="#28004b"/>
 769 |           <stop offset="1" stop-color="#040050"/>
 770 |         </linearGradient>
 771 |         <path fill="url(#aK)" d="M2222 763h122v27h-122z" opacity=".5"/>
 772 |         <linearGradient id="aL" x1="2283" x2="2283" y1="825" y2="798" gradientUnits="userSpaceOnUse">
 773 |           <stop offset="0" stop-color="#28004b"/>
 774 |           <stop offset="1" stop-color="#040050"/>
 775 |         </linearGradient>
 776 |         <path fill="url(#aL)" d="M2222 798h122v27h-122z" opacity=".5"/>
 777 |         <linearGradient id="aM" x1="2768.5" x2="2768.5" y1="649" y2="597" gradientUnits="userSpaceOnUse">
 778 |           <stop offset="0" stop-color="#28004b"/>
 779 |           <stop offset="1" stop-color="#040031"/>
 780 |         </linearGradient>
 781 |         <path fill="url(#aM)"
 782 |               d="M2800 649h-63v-25.75a26.25 26.25 0 0 1 26.25-26.25h11a25.75 25.75 0 0 1 25.75 25.75V649z"
 783 |               opacity=".9"/>
 784 |         <linearGradient id="aN" x1="2801.5" x2="2801.5" y1="496" y2="416.8"
 785 |                         gradientTransform="matrix(0 1 .1389 0 2669.11 -2175)" gradientUnits="userSpaceOnUse">
 786 |           <stop offset="0" stop-color="#28004b"/>
 787 |           <stop offset="1" stop-color="#040050"/>
 788 |         </linearGradient>
 789 |         <path fill="url(#aN)" d="M2738 649v-45h-11v45z"/>
 790 |         <linearGradient id="aO" x1="2801.5" x2="2801.5" y1="1014.4" y2="935.2"
 791 |                         gradientTransform="matrix(0 1 .1389 0 2669.11 -2175)" gradientUnits="userSpaceOnUse">
 792 |           <stop offset="0" stop-color="#28004b"/>
 793 |           <stop offset="1" stop-color="#040050"/>
 794 |         </linearGradient>
 795 |         <path fill="url(#aO)" d="M2810 649v-45h-11v45z"/>
 796 |         <linearGradient id="aP" x1="2768.5" x2="2768.5" y1="949.6" y2="870.4"
 797 |                         gradientTransform="matrix(1 0 0 -.1389 0 728.89)" gradientUnits="userSpaceOnUse">
 798 |           <stop offset="0" stop-color="#28004b"/>
 799 |           <stop offset="1" stop-color="#040050"/>
 800 |         </linearGradient>
 801 |         <path fill="url(#aP)" d="M2801 597h-65a11 11 0 0 0-11 11h87a11 11 0 0 0-11-11z"/>
 802 |         <linearGradient id="aQ" x1="2769" x2="2724.36" y1="606.5" y2="606.5" gradientUnits="userSpaceOnUse">
 803 |           <stop offset="0" stop-color="#28004b"/>
 804 |           <stop offset="1" stop-color="#040050"/>
 805 |         </linearGradient>
 806 |         <path fill="url(#aQ)" d="M2725 614.5s-4-9.5 8-11.5 31 7 33 0 3-7 3-7v21l-44-2.5z"/>
 807 |         <linearGradient id="aR" x1="2715" x2="2670.59" y1="606.5" y2="606.5"
 808 |                         gradientTransform="matrix(-1 0 0 1 5483.36 0)" gradientUnits="userSpaceOnUse">
 809 |           <stop offset="0" stop-color="#28004b"/>
 810 |           <stop offset="1" stop-color="#040050"/>
 811 |         </linearGradient>
 812 |         <path fill="url(#aR)" d="M2812 617s4.36-12-7.64-14-31 7-33 0-3-7-3-7l.64 21h43z"/>
 813 |         <linearGradient id="aS" x1="2921.5" x2="2921.5" y1="653" y2="601" gradientUnits="userSpaceOnUse">
 814 |           <stop offset="0" stop-color="#28004b"/>
 815 |           <stop offset="1" stop-color="#040031"/>
 816 |         </linearGradient>
 817 |         <path fill="url(#aS)"
 818 |               d="M2953 653h-63v-25.75a26.25 26.25 0 0 1 26.25-26.25h11a25.75 25.75 0 0 1 25.75 25.75V653z"
 819 |               opacity=".9"/>
 820 |         <linearGradient id="aT" x1="2805.5" x2="2805.5" y1="1597.6" y2="1518.4"
 821 |                         gradientTransform="matrix(0 1 .1389 0 2669.11 -2175)" gradientUnits="userSpaceOnUse">
 822 |           <stop offset="0" stop-color="#28004b"/>
 823 |           <stop offset="1" stop-color="#040050"/>
 824 |         </linearGradient>
 825 |         <path fill="url(#aT)" d="M2891 653v-45h-11v45z"/>
 826 |         <linearGradient id="aU" x1="2805.5" x2="2805.5" y1="2116" y2="2036.8"
 827 |                         gradientTransform="matrix(0 1 .1389 0 2669.11 -2175)" gradientUnits="userSpaceOnUse">
 828 |           <stop offset="0" stop-color="#28004b"/>
 829 |           <stop offset="1" stop-color="#040050"/>
 830 |         </linearGradient>
 831 |         <path fill="url(#aU)" d="M2963 653v-45h-11v45z"/>
 832 |         <linearGradient id="aV" x1="2921.5" x2="2921.5" y1="920.8" y2="841.6"
 833 |                         gradientTransform="matrix(1 0 0 -.1389 0 728.89)" gradientUnits="userSpaceOnUse">
 834 |           <stop offset="0" stop-color="#28004b"/>
 835 |           <stop offset="1" stop-color="#040050"/>
 836 |         </linearGradient>
 837 |         <path fill="url(#aV)" d="M2954 601h-65a11 11 0 0 0-11 11h87a11 11 0 0 0-11-11z"/>
 838 |         <linearGradient id="aW" x1="2922" x2="2877.36" y1="610.5" y2="610.5" gradientUnits="userSpaceOnUse">
 839 |           <stop offset="0" stop-color="#28004b"/>
 840 |           <stop offset="1" stop-color="#040050"/>
 841 |         </linearGradient>
 842 |         <path fill="url(#aW)" d="M2878 618.5s-4-9.5 8-11.5 31 7 33 0 3-7 3-7v21l-44-2.5z"/>
 843 |         <linearGradient id="aX" x1="2562" x2="2517.59" y1="610.5" y2="610.5"
 844 |                         gradientTransform="matrix(-1 0 0 1 5483.36 0)" gradientUnits="userSpaceOnUse">
 845 |           <stop offset="0" stop-color="#28004b"/>
 846 |           <stop offset="1" stop-color="#040050"/>
 847 |         </linearGradient>
 848 |         <path fill="url(#aX)" d="M2965 621s4.36-12-7.64-14-31 7-33 0-3-7-3-7l.64 21h43z"/>
 849 |         <linearGradient id="aY" x1="2705.56" x2="2659.92" y1="786.22" y2="759.87" gradientUnits="userSpaceOnUse">
 850 |           <stop offset="0" stop-color="#28004b"/>
 851 |           <stop offset="1" stop-color="#040050"/>
 852 |         </linearGradient>
 853 |         <path fill="url(#aY)" d="M2700 795.84h-37V759.5a18.5 18.5 0 0 1 37 0v36.34z"/>
 854 |         <linearGradient id="aZ" x1="2810.56" x2="2764.92" y1="786.22" y2="759.87" gradientUnits="userSpaceOnUse">
 855 |           <stop offset="0" stop-color="#28004b"/>
 856 |           <stop offset="1" stop-color="#040050"/>
 857 |         </linearGradient>
 858 |         <path fill="url(#aZ)" d="M2805 795.84h-37V759.5a18.5 18.5 0 0 1 37 0v36.34z"/>
 859 |         <linearGradient id="ba" x1="2912.56" x2="2866.92" y1="786.22" y2="759.87" gradientUnits="userSpaceOnUse">
 860 |           <stop offset="0" stop-color="#28004b"/>
 861 |           <stop offset="1" stop-color="#040050"/>
 862 |         </linearGradient>
 863 |         <path fill="url(#ba)" d="M2907 795.84h-37V759.5a18.5 18.5 0 0 1 37 0v36.34z"/>
 864 |         <linearGradient id="bb" x1="1266.1" x2="1136.9" y1="952.01" y2="877.42" gradientUnits="userSpaceOnUse">
 865 |           <stop offset="0" stop-color="#28004b"/>
 866 |           <stop offset="1" stop-color="#040050"/>
 867 |         </linearGradient>
 868 |         <path fill="none" stroke="url(#bb)" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10"
 869 |               stroke-width="2" d="M1284 919s-64-6.67-94-4.29-35-3.33-41-4.29-30 0-30 0" opacity=".13"/>
 870 |         <linearGradient id="bc" x1="1257.46" x2="1105.54" y1="969.67" y2="881.95" gradientUnits="userSpaceOnUse">
 871 |           <stop offset="0" stop-color="#28004b"/>
 872 |           <stop offset="1" stop-color="#040050"/>
 873 |         </linearGradient>
 874 |         <path fill="none" stroke="url(#bc)" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10"
 875 |               stroke-width="2" d="M1285 919.98s-3-.5-8 2.91c-5 3.4-115 5.84-135 14.11 0 0-46 0-64-5.35" opacity=".07"/>
 876 |         <linearGradient id="bd" x1="1266.13" x2="1211.87" y1="929.16" y2="897.84" gradientUnits="userSpaceOnUse">
 877 |           <stop offset="0" stop-color="#28004b"/>
 878 |           <stop offset="1" stop-color="#040050"/>
 879 |         </linearGradient>
 880 |         <path fill="none" stroke="url(#bd)" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10"
 881 |               stroke-width="2" d="M1272 917s-56-6-66-7" opacity=".13"/>
 882 |         <linearGradient id="be" x1="1245.24" x2="1149.76" y1="950.56" y2="895.44" gradientUnits="userSpaceOnUse">
 883 |           <stop offset="0" stop-color="#28004b"/>
 884 |           <stop offset="1" stop-color="#040050"/>
 885 |         </linearGradient>
 886 |         <path fill="none" stroke="url(#be)" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10"
 887 |               stroke-width="2" d="M1260 923c-13-1-24-1-43 6s-34 2-43 0-27-6-39-6" opacity=".13"/>
 888 |       </svg>
 889 | 
 890 |       <svg *ngSwitchDefault viewBox="4302 163 1218 406">
 891 |         <defs>
 892 |           <style>.aa {
 893 |             opacity: 0.6;
 894 |           }</style>
 895 |           <linearGradient id="aa" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox">
 896 |             <stop offset="0" stop-color="#000075"/>
 897 |             <stop offset="1" stop-color="#ff8c8c"/>
 898 |           </linearGradient>
 899 |         </defs>
 900 |         <path class="aa" fill="url(#aa)"
 901 |               d="M20,0H1198a20,20,0,0,1,20,20V406a0,0,0,0,1,0,0H0a0,0,0,0,1,0,0V20A20,20,0,0,1,20,0Z"
 902 |               transform="translate(4302 163)"/>
 903 |       </svg>
 904 | 
 905 |       <div class="header-content__wrapper">
 906 | 
 907 |         <div class="today-weather__container">
 908 |           <!--{{today}}-->
 909 |           <div class="temp-state__container">
 910 |             <span class="temperature__text">{{temp}}°</span>
 911 |             <span class="weather-state__text">{{state}}</span>
 912 |           </div>
 913 |           <div class="hum-wind__container">
 914 |             <div class="hum__container">
 915 |               <span class="hum__text">humidity</span>
 916 |               <span class="hum-value__text">{{hum}} %</span>
 917 |             </div>
 918 | 
 919 |             <div class="hum-wind__separator">&nbsp;</div>
 920 | 
 921 |             <div class="wind__container">
 922 |               <span class="wind__text">wind</span>
 923 |               <span class="wind-value__text">{{wind}} K/M</span>
 924 |             </div>
 925 |           </div>
 926 |         </div>
 927 | 
 928 |         <div class="city-name__container">
 929 |           <div class="city-name__underline">
 930 |             <span class="city-name__text">{{city}}</span>
 931 |           </div>
 932 |         </div>
 933 |       </div>
 934 | 
 935 |     </section>
 936 | 
 937 |     <main class="body-content__wrapper">
 938 |       <section class="twitter-feed__container">
 939 |         <div class="twitter-feed__header">
 940 |           <svg class="twitter__icon" viewBox="4332 625.812 30 24.375">
 941 |             <defs>
 942 |               <style>.twitter-icon-fill {
 943 |                 fill: #03a9f4;
 944 |               }</style>
 945 |             </defs>
 946 |             <path class="twitter-icon-fill"
 947 |                   d="M30,50.886a12.823,12.823,0,0,1-3.544.971,6.116,6.116,0,0,0,2.706-3.4,12.291,12.291,0,0,1-3.9,1.489,6.15,6.15,0,0,0-10.639,4.206,6.333,6.333,0,0,0,.143,1.4A17.408,17.408,0,0,1,2.089,49.121a6.152,6.152,0,0,0,1.89,8.22A6.074,6.074,0,0,1,1.2,56.584v.067a6.179,6.179,0,0,0,4.928,6.043,6.139,6.139,0,0,1-1.613.2,5.439,5.439,0,0,1-1.164-.1A6.209,6.209,0,0,0,9.1,67.076,12.358,12.358,0,0,1,1.472,69.7,11.521,11.521,0,0,1,0,69.615a17.315,17.315,0,0,0,9.435,2.76c11.318,0,17.505-9.375,17.505-17.5,0-.272-.009-.534-.023-.8A12.269,12.269,0,0,0,30,50.886Z"
 948 |                   transform="translate(4332 577.812)"/>
 949 |           </svg>
 950 |           <span class="twitter-feed__text">Twitter Feed</span>
 951 |           <span class="twitter-feed-tag__text">#{{city}}</span>
 952 |         </div>
 953 |         <div class="twitter-feed__body">
 954 |           <!--TODO: retrieve tweets from twitter API-->
 955 |         </div>
 956 |       </section>
 957 | 
 958 |       <section class="forecast__container">
 959 | 
 960 |         <div class="day-weather__container" [ngSwitch]="true">
 961 |           <span class="day-name__text">{{day1Name}}</span>
 962 |           <svg class="forecast-condition__icon" *ngSwitchCase="day1State === 'Clouds'"
 963 |                viewBox="2436.9 -843.1 275.5 274.1">
 964 |             <g data-name="cloudy icon" transform="translate(84 790)">
 965 |               <circle cx="137" cy="137" r="137" fill="#fff" data-name="Ellipse 23" transform="translate(2354 -1633)"/>
 966 |               <path fill="#ffde17"
 967 |                     d="M2523.4-1361.5a37.2 37.2 0 0 0 8.4-23.4c0-22-19.8-40-44.1-40l-3.4.1h-.5a39.8 39.8 0 0 0-39.4-33.7 40.1 40.1 0 0 0-10 1.2 40 40 0 0 0-35.2-21.2 40.1 40.1 0 0 0-38.5 29 137.4 137.4 0 0 1-7.8-45.8 138.8 138.8 0 0 1 2.8-27.8 137 137 0 0 1 8-25.8 137.8 137.8 0 0 1 12.7-23.4 138.8 138.8 0 0 1 16.8-20.4 138.8 138.8 0 0 1 20.4-16.9 137.8 137.8 0 0 1 23.4-12.7 137 137 0 0 1 25.9-8 138.8 138.8 0 0 1 27.7-2.8 138.8 138.8 0 0 1 27.8 2.8 137 137 0 0 1 25.9 8 137.8 137.8 0 0 1 23.4 12.7 138.8 138.8 0 0 1 20.4 16.9 138.7 138.7 0 0 1 16.8 20.4 137.8 137.8 0 0 1 12.7 23.4 137 137 0 0 1 8 25.8 138.8 138.8 0 0 1 2.8 27.8 137.4 137.4 0 0 1-8 46.1 137.2 137.2 0 0 1-21.9 39.6 138.2 138.2 0 0 1-33.2 30.1 136.8 136.8 0 0 1-41.9 18z"
 968 |                     data-name="Subtraction 1"/>
 969 |             </g>
 970 |           </svg>
 971 | 
 972 |           <svg class="forecast-condition__icon" *ngSwitchCase="day1State === 'Rain' || day1State === 'Drizzle'"
 973 |                viewBox="3170 -843.1 163.5 242.7">
 974 |             <g data-name="Rain Icon">
 975 |               <g data-name="Water Drops">
 976 |                 <path fill="#0032cc" d="M3295.4-824.5s85.8 133.5 0 133.5 0-133.5 0-133.5z" data-name="Path 7"/>
 977 |                 <path fill="#003eff" d="M3239.4-843s-156.1 242.6 0 242.6 0-242.7 0-242.7z" data-name="Path 3"/>
 978 |               </g>
 979 |             </g>
 980 |           </svg>
 981 | 
 982 |           <svg class="forecast-condition__icon" *ngSwitchCase="day1State === 'Storm'"
 983 |                viewBox="3487.9 -810.7 291.2 200.3">
 984 |             <g data-name="Strom icon" transform="translate(1959 -1260.7)">
 985 |               <ellipse cx="55.3" cy="51.7" class="cls-1" data-name="Ellipse 14" rx="55.3" ry="51.7"
 986 |                        transform="translate(1529 490.4)"/>
 987 |               <ellipse cx="55.3" cy="51.7" class="cls-1" data-name="Ellipse 15" rx="55.3" ry="51.7"
 988 |                        transform="translate(1569.6 467.8)"/>
 989 |               <circle cx="55.3" cy="55.3" r="55.3" class="cls-1" data-name="Ellipse 16"
 990 |                       transform="translate(1618.9 476.8)"/>
 991 |               <ellipse cx="55.3" cy="51.7" class="cls-1" data-name="Ellipse 17" rx="55.3" ry="51.7"
 992 |                        transform="translate(1631.8 450)"/>
 993 |               <ellipse cx="55.3" cy="51.7" class="cls-1" data-name="Ellipse 18" rx="55.3" ry="51.7"
 994 |                        transform="translate(1687.1 477.5)"/>
 995 |               <ellipse cx="55.3" cy="51.7" class="cls-1" data-name="Ellipse 19" rx="55.3" ry="51.7"
 996 |                        transform="translate(1709.6 507.3)"/>
 997 |               <circle cx="55.3" cy="55.3" r="55.3" class="cls-1" data-name="Ellipse 20"
 998 |                       transform="translate(1639.6 500.1)"/>
 999 |               <ellipse cx="55.3" cy="51.7" class="cls-1" data-name="Ellipse 21" rx="55.3" ry="51.7"
1000 |                        transform="translate(1569.6 507.3)"/>
1001 |               <path fill="none" stroke="#fd0" stroke-width="18"
1002 |                     d="M1732.5 644l-61.4-61.4 22.5-10.3 26.8 5.1 9.5-22.4-38-37.2" data-name="Path 59"/>
1003 |               <path fill="none" stroke="#fd0" stroke-width="15" d="M1597.2 539.5l31.2 25.9-24.8 22.2 17.3 36.2"
1004 |                     data-name="Path 60"/>
1005 |             </g>
1006 |           </svg>
1007 | 
1008 | 
1009 |           <svg class="forecast-condition__icon" *ngSwitchCase="day1State === 'Sunny' || day1State === 'Clear'"
1010 |                viewBox="2050 -845 262 262">
1011 |             <circle cx="131" cy="131" r="131" fill="#ffde17" data-name="Sun Icon" transform="translate(2050 -845)"/>
1012 |           </svg>
1013 | 
1014 |           <span class="day-temp__text">{{day1Temp}}°</span>
1015 |           <span class="day-state__text">{{day1State}}</span>
1016 |         </div>
1017 | 
1018 |         <div class="day-weather__container" [ngSwitch]="true">
1019 |           <span class="day-name__text">{{day2Name}}</span>
1020 |           <svg class="forecast-condition__icon" *ngSwitchCase="day2State === 'Clouds'"
1021 |                viewBox="2436.9 -843.1 275.5 274.1">
1022 |             <g data-name="cloudy icon" transform="translate(84 790)">
1023 |               <circle cx="137" cy="137" r="137" fill="#fff" data-name="Ellipse 23" transform="translate(2354 -1633)"/>
1024 |               <path fill="#ffde17"
1025 |                     d="M2523.4-1361.5a37.2 37.2 0 0 0 8.4-23.4c0-22-19.8-40-44.1-40l-3.4.1h-.5a39.8 39.8 0 0 0-39.4-33.7 40.1 40.1 0 0 0-10 1.2 40 40 0 0 0-35.2-21.2 40.1 40.1 0 0 0-38.5 29 137.4 137.4 0 0 1-7.8-45.8 138.8 138.8 0 0 1 2.8-27.8 137 137 0 0 1 8-25.8 137.8 137.8 0 0 1 12.7-23.4 138.8 138.8 0 0 1 16.8-20.4 138.8 138.8 0 0 1 20.4-16.9 137.8 137.8 0 0 1 23.4-12.7 137 137 0 0 1 25.9-8 138.8 138.8 0 0 1 27.7-2.8 138.8 138.8 0 0 1 27.8 2.8 137 137 0 0 1 25.9 8 137.8 137.8 0 0 1 23.4 12.7 138.8 138.8 0 0 1 20.4 16.9 138.7 138.7 0 0 1 16.8 20.4 137.8 137.8 0 0 1 12.7 23.4 137 137 0 0 1 8 25.8 138.8 138.8 0 0 1 2.8 27.8 137.4 137.4 0 0 1-8 46.1 137.2 137.2 0 0 1-21.9 39.6 138.2 138.2 0 0 1-33.2 30.1 136.8 136.8 0 0 1-41.9 18z"
1026 |                     data-name="Subtraction 1"/>
1027 |             </g>
1028 |           </svg>
1029 | 
1030 |           <svg class="forecast-condition__icon" *ngSwitchCase="day2State === 'Rain' || day2State === 'Drizzle'"
1031 |                viewBox="3170 -843.1 163.5 242.7">
1032 |             <g data-name="Rain Icon">
1033 |               <g data-name="Water Drops">
1034 |                 <path fill="#0032cc" d="M3295.4-824.5s85.8 133.5 0 133.5 0-133.5 0-133.5z" data-name="Path 7"/>
1035 |                 <path fill="#003eff" d="M3239.4-843s-156.1 242.6 0 242.6 0-242.7 0-242.7z" data-name="Path 3"/>
1036 |               </g>
1037 |             </g>
1038 |           </svg>
1039 | 
1040 |           <svg class="forecast-condition__icon" *ngSwitchCase="day2State === 'Storm'"
1041 |                viewBox="3487.9 -810.7 291.2 200.3">
1042 |             <g data-name="Strom icon" transform="translate(1959 -1260.7)">
1043 |               <ellipse cx="55.3" cy="51.7" class="cls-1" data-name="Ellipse 14" rx="55.3" ry="51.7"
1044 |                        transform="translate(1529 490.4)"/>
1045 |               <ellipse cx="55.3" cy="51.7" class="cls-1" data-name="Ellipse 15" rx="55.3" ry="51.7"
1046 |                        transform="translate(1569.6 467.8)"/>
1047 |               <circle cx="55.3" cy="55.3" r="55.3" class="cls-1" data-name="Ellipse 16"
1048 |                       transform="translate(1618.9 476.8)"/>
1049 |               <ellipse cx="55.3" cy="51.7" class="cls-1" data-name="Ellipse 17" rx="55.3" ry="51.7"
1050 |                        transform="translate(1631.8 450)"/>
1051 |               <ellipse cx="55.3" cy="51.7" class="cls-1" data-name="Ellipse 18" rx="55.3" ry="51.7"
1052 |                        transform="translate(1687.1 477.5)"/>
1053 |               <ellipse cx="55.3" cy="51.7" class="cls-1" data-name="Ellipse 19" rx="55.3" ry="51.7"
1054 |                        transform="translate(1709.6 507.3)"/>
1055 |               <circle cx="55.3" cy="55.3" r="55.3" class="cls-1" data-name="Ellipse 20"
1056 |                       transform="translate(1639.6 500.1)"/>
1057 |               <ellipse cx="55.3" cy="51.7" class="cls-1" data-name="Ellipse 21" rx="55.3" ry="51.7"
1058 |                        transform="translate(1569.6 507.3)"/>
1059 |               <path fill="none" stroke="#fd0" stroke-width="18"
1060 |                     d="M1732.5 644l-61.4-61.4 22.5-10.3 26.8 5.1 9.5-22.4-38-37.2" data-name="Path 59"/>
1061 |               <path fill="none" stroke="#fd0" stroke-width="15" d="M1597.2 539.5l31.2 25.9-24.8 22.2 17.3 36.2"
1062 |                     data-name="Path 60"/>
1063 |             </g>
1064 |           </svg>
1065 | 
1066 | 
1067 |           <svg class="forecast-condition__icon" *ngSwitchCase="day2State === 'Sunny' || day2State === 'Clear'"
1068 |                viewBox="2050 -845 262 262">
1069 |             <circle cx="131" cy="131" r="131" fill="#ffde17" data-name="Sun Icon" transform="translate(2050 -845)"/>
1070 |           </svg>
1071 |           <span class="day-temp__text">{{day2Temp}}°</span>
1072 |           <span class="day-state__text">{{day2State}}</span>
1073 |         </div>
1074 | 
1075 |         <div class="day-weather__container" [ngSwitch]="true">
1076 |           <span class="day-name__text">{{day3Name}}</span>
1077 |           <svg class="forecast-condition__icon" *ngSwitchCase="day3State === 'Clouds'"
1078 |                viewBox="2436.9 -843.1 275.5 274.1">
1079 |             <g data-name="cloudy icon" transform="translate(84 790)">
1080 |               <circle cx="137" cy="137" r="137" fill="#fff" data-name="Ellipse 23" transform="translate(2354 -1633)"/>
1081 |               <path fill="#ffde17"
1082 |                     d="M2523.4-1361.5a37.2 37.2 0 0 0 8.4-23.4c0-22-19.8-40-44.1-40l-3.4.1h-.5a39.8 39.8 0 0 0-39.4-33.7 40.1 40.1 0 0 0-10 1.2 40 40 0 0 0-35.2-21.2 40.1 40.1 0 0 0-38.5 29 137.4 137.4 0 0 1-7.8-45.8 138.8 138.8 0 0 1 2.8-27.8 137 137 0 0 1 8-25.8 137.8 137.8 0 0 1 12.7-23.4 138.8 138.8 0 0 1 16.8-20.4 138.8 138.8 0 0 1 20.4-16.9 137.8 137.8 0 0 1 23.4-12.7 137 137 0 0 1 25.9-8 138.8 138.8 0 0 1 27.7-2.8 138.8 138.8 0 0 1 27.8 2.8 137 137 0 0 1 25.9 8 137.8 137.8 0 0 1 23.4 12.7 138.8 138.8 0 0 1 20.4 16.9 138.7 138.7 0 0 1 16.8 20.4 137.8 137.8 0 0 1 12.7 23.4 137 137 0 0 1 8 25.8 138.8 138.8 0 0 1 2.8 27.8 137.4 137.4 0 0 1-8 46.1 137.2 137.2 0 0 1-21.9 39.6 138.2 138.2 0 0 1-33.2 30.1 136.8 136.8 0 0 1-41.9 18z"
1083 |                     data-name="Subtraction 1"/>
1084 |             </g>
1085 |           </svg>
1086 | 
1087 |           <svg class="forecast-condition__icon" *ngSwitchCase="day3State === 'Rain' || day3State === 'Drizzle'"
1088 |                viewBox="3170 -843.1 163.5 242.7">
1089 |             <g data-name="Rain Icon">
1090 |               <g data-name="Water Drops">
1091 |                 <path fill="#0032cc" d="M3295.4-824.5s85.8 133.5 0 133.5 0-133.5 0-133.5z" data-name="Path 7"/>
1092 |                 <path fill="#003eff" d="M3239.4-843s-156.1 242.6 0 242.6 0-242.7 0-242.7z" data-name="Path 3"/>
1093 |               </g>
1094 |             </g>
1095 |           </svg>
1096 | 
1097 |           <svg class="forecast-condition__icon" *ngSwitchCase="day3State === 'Storm'"
1098 |                viewBox="3487.9 -810.7 291.2 200.3">
1099 |             <g data-name="Strom icon" transform="translate(1959 -1260.7)">
1100 |               <ellipse cx="55.3" cy="51.7" class="cls-1" data-name="Ellipse 14" rx="55.3" ry="51.7"
1101 |                        transform="translate(1529 490.4)"/>
1102 |               <ellipse cx="55.3" cy="51.7" class="cls-1" data-name="Ellipse 15" rx="55.3" ry="51.7"
1103 |                        transform="translate(1569.6 467.8)"/>
1104 |               <circle cx="55.3" cy="55.3" r="55.3" class="cls-1" data-name="Ellipse 16"
1105 |                       transform="translate(1618.9 476.8)"/>
1106 |               <ellipse cx="55.3" cy="51.7" class="cls-1" data-name="Ellipse 17" rx="55.3" ry="51.7"
1107 |                        transform="translate(1631.8 450)"/>
1108 |               <ellipse cx="55.3" cy="51.7" class="cls-1" data-name="Ellipse 18" rx="55.3" ry="51.7"
1109 |                        transform="translate(1687.1 477.5)"/>
1110 |               <ellipse cx="55.3" cy="51.7" class="cls-1" data-name="Ellipse 19" rx="55.3" ry="51.7"
1111 |                        transform="translate(1709.6 507.3)"/>
1112 |               <circle cx="55.3" cy="55.3" r="55.3" class="cls-1" data-name="Ellipse 20"
1113 |                       transform="translate(1639.6 500.1)"/>
1114 |               <ellipse cx="55.3" cy="51.7" class="cls-1" data-name="Ellipse 21" rx="55.3" ry="51.7"
1115 |                        transform="translate(1569.6 507.3)"/>
1116 |               <path fill="none" stroke="#fd0" stroke-width="18"
1117 |                     d="M1732.5 644l-61.4-61.4 22.5-10.3 26.8 5.1 9.5-22.4-38-37.2" data-name="Path 59"/>
1118 |               <path fill="none" stroke="#fd0" stroke-width="15" d="M1597.2 539.5l31.2 25.9-24.8 22.2 17.3 36.2"
1119 |                     data-name="Path 60"/>
1120 |             </g>
1121 |           </svg>
1122 | 
1123 | 
1124 |           <svg class="forecast-condition__icon" *ngSwitchCase="day3State === 'Sunny' || day3State === 'Clear'"
1125 |                viewBox="2050 -845 262 262">
1126 |             <circle cx="131" cy="131" r="131" fill="#ffde17" data-name="Sun Icon" transform="translate(2050 -845)"/>
1127 |           </svg>
1128 | 
1129 |           <span class="day-temp__text">{{day3Temp}}°</span>
1130 |           <span class="day-state__text">{{day3State}}</span>
1131 |         </div>
1132 | 
1133 | 
1134 |         <div class="day-weather__container" [ngSwitch]="true">
1135 |           <span class="day-name__text">{{day4Name}}</span>
1136 |           <svg class="forecast-condition__icon" *ngSwitchCase="day4State === 'Clouds'"
1137 |                viewBox="2436.9 -843.1 275.5 274.1">
1138 |             <g data-name="cloudy icon" transform="translate(84 790)">
1139 |               <circle cx="137" cy="137" r="137" fill="#fff" data-name="Ellipse 23" transform="translate(2354 -1633)"/>
1140 |               <path fill="#ffde17"
1141 |                     d="M2523.4-1361.5a37.2 37.2 0 0 0 8.4-23.4c0-22-19.8-40-44.1-40l-3.4.1h-.5a39.8 39.8 0 0 0-39.4-33.7 40.1 40.1 0 0 0-10 1.2 40 40 0 0 0-35.2-21.2 40.1 40.1 0 0 0-38.5 29 137.4 137.4 0 0 1-7.8-45.8 138.8 138.8 0 0 1 2.8-27.8 137 137 0 0 1 8-25.8 137.8 137.8 0 0 1 12.7-23.4 138.8 138.8 0 0 1 16.8-20.4 138.8 138.8 0 0 1 20.4-16.9 137.8 137.8 0 0 1 23.4-12.7 137 137 0 0 1 25.9-8 138.8 138.8 0 0 1 27.7-2.8 138.8 138.8 0 0 1 27.8 2.8 137 137 0 0 1 25.9 8 137.8 137.8 0 0 1 23.4 12.7 138.8 138.8 0 0 1 20.4 16.9 138.7 138.7 0 0 1 16.8 20.4 137.8 137.8 0 0 1 12.7 23.4 137 137 0 0 1 8 25.8 138.8 138.8 0 0 1 2.8 27.8 137.4 137.4 0 0 1-8 46.1 137.2 137.2 0 0 1-21.9 39.6 138.2 138.2 0 0 1-33.2 30.1 136.8 136.8 0 0 1-41.9 18z"
1142 |                     data-name="Subtraction 1"/>
1143 |             </g>
1144 |           </svg>
1145 | 
1146 |           <svg class="forecast-condition__icon" *ngSwitchCase="day4State === 'Rain' || day4State === 'Drizzle'"
1147 |                viewBox="3170 -843.1 163.5 242.7">
1148 |             <g data-name="Rain Icon">
1149 |               <g data-name="Water Drops">
1150 |                 <path fill="#0032cc" d="M3295.4-824.5s85.8 133.5 0 133.5 0-133.5 0-133.5z" data-name="Path 7"/>
1151 |                 <path fill="#003eff" d="M3239.4-843s-156.1 242.6 0 242.6 0-242.7 0-242.7z" data-name="Path 3"/>
1152 |               </g>
1153 |             </g>
1154 |           </svg>
1155 | 
1156 |           <svg class="forecast-condition__icon" *ngSwitchCase="day4State === 'Storm'"
1157 |                viewBox="3487.9 -810.7 291.2 200.3">
1158 |             <g data-name="Strom icon" transform="translate(1959 -1260.7)">
1159 |               <ellipse cx="55.3" cy="51.7" class="cls-1" data-name="Ellipse 14" rx="55.3" ry="51.7"
1160 |                        transform="translate(1529 490.4)"/>
1161 |               <ellipse cx="55.3" cy="51.7" class="cls-1" data-name="Ellipse 15" rx="55.3" ry="51.7"
1162 |                        transform="translate(1569.6 467.8)"/>
1163 |               <circle cx="55.3" cy="55.3" r="55.3" class="cls-1" data-name="Ellipse 16"
1164 |                       transform="translate(1618.9 476.8)"/>
1165 |               <ellipse cx="55.3" cy="51.7" class="cls-1" data-name="Ellipse 17" rx="55.3" ry="51.7"
1166 |                        transform="translate(1631.8 450)"/>
1167 |               <ellipse cx="55.3" cy="51.7" class="cls-1" data-name="Ellipse 18" rx="55.3" ry="51.7"
1168 |                        transform="translate(1687.1 477.5)"/>
1169 |               <ellipse cx="55.3" cy="51.7" class="cls-1" data-name="Ellipse 19" rx="55.3" ry="51.7"
1170 |                        transform="translate(1709.6 507.3)"/>
1171 |               <circle cx="55.3" cy="55.3" r="55.3" class="cls-1" data-name="Ellipse 20"
1172 |                       transform="translate(1639.6 500.1)"/>
1173 |               <ellipse cx="55.3" cy="51.7" class="cls-1" data-name="Ellipse 21" rx="55.3" ry="51.7"
1174 |                        transform="translate(1569.6 507.3)"/>
1175 |               <path fill="none" stroke="#fd0" stroke-width="18"
1176 |                     d="M1732.5 644l-61.4-61.4 22.5-10.3 26.8 5.1 9.5-22.4-38-37.2" data-name="Path 59"/>
1177 |               <path fill="none" stroke="#fd0" stroke-width="15" d="M1597.2 539.5l31.2 25.9-24.8 22.2 17.3 36.2"
1178 |                     data-name="Path 60"/>
1179 |             </g>
1180 |           </svg>
1181 | 
1182 | 
1183 |           <svg class="forecast-condition__icon" *ngSwitchCase="day4State === 'Sunny' || day4State === 'Clear'"
1184 |                viewBox="2050 -845 262 262">
1185 |             <circle cx="131" cy="131" r="131" fill="#ffde17" data-name="Sun Icon" transform="translate(2050 -845)"/>
1186 |           </svg>
1187 | 
1188 |           <span class="day-temp__text">{{day4Temp}}°</span>
1189 |           <span class="day-state__text">{{day4State}}</span>
1190 |         </div>
1191 | 
1192 |         <div class="day-weather__container" [ngSwitch]="true">
1193 |           <span class="day-name__text">{{day5Name}}</span>
1194 |           <svg class="forecast-condition__icon" *ngSwitchCase="day5State === 'Clouds'"
1195 |                viewBox="2436.9 -843.1 275.5 274.1">
1196 |             <g data-name="cloudy icon" transform="translate(84 790)">
1197 |               <circle cx="137" cy="137" r="137" fill="#fff" data-name="Ellipse 23" transform="translate(2354 -1633)"/>
1198 |               <path fill="#ffde17"
1199 |                     d="M2523.4-1361.5a37.2 37.2 0 0 0 8.4-23.4c0-22-19.8-40-44.1-40l-3.4.1h-.5a39.8 39.8 0 0 0-39.4-33.7 40.1 40.1 0 0 0-10 1.2 40 40 0 0 0-35.2-21.2 40.1 40.1 0 0 0-38.5 29 137.4 137.4 0 0 1-7.8-45.8 138.8 138.8 0 0 1 2.8-27.8 137 137 0 0 1 8-25.8 137.8 137.8 0 0 1 12.7-23.4 138.8 138.8 0 0 1 16.8-20.4 138.8 138.8 0 0 1 20.4-16.9 137.8 137.8 0 0 1 23.4-12.7 137 137 0 0 1 25.9-8 138.8 138.8 0 0 1 27.7-2.8 138.8 138.8 0 0 1 27.8 2.8 137 137 0 0 1 25.9 8 137.8 137.8 0 0 1 23.4 12.7 138.8 138.8 0 0 1 20.4 16.9 138.7 138.7 0 0 1 16.8 20.4 137.8 137.8 0 0 1 12.7 23.4 137 137 0 0 1 8 25.8 138.8 138.8 0 0 1 2.8 27.8 137.4 137.4 0 0 1-8 46.1 137.2 137.2 0 0 1-21.9 39.6 138.2 138.2 0 0 1-33.2 30.1 136.8 136.8 0 0 1-41.9 18z"
1200 |                     data-name="Subtraction 1"/>
1201 |             </g>
1202 |           </svg>
1203 | 
1204 |           <svg class="forecast-condition__icon" *ngSwitchCase="day5State === 'Rain' || day5State === 'Drizzle'"
1205 |                viewBox="3170 -843.1 163.5 242.7">
1206 |             <g data-name="Rain Icon">
1207 |               <g data-name="Water Drops">
1208 |                 <path fill="#0032cc" d="M3295.4-824.5s85.8 133.5 0 133.5 0-133.5 0-133.5z" data-name="Path 7"/>
1209 |                 <path fill="#003eff" d="M3239.4-843s-156.1 242.6 0 242.6 0-242.7 0-242.7z" data-name="Path 3"/>
1210 |               </g>
1211 |             </g>
1212 |           </svg>
1213 | 
1214 |           <svg class="forecast-condition__icon" *ngSwitchCase="day5State === 'Storm'"
1215 |                viewBox="3487.9 -810.7 291.2 200.3">
1216 |             <g data-name="Strom icon" transform="translate(1959 -1260.7)">
1217 |               <ellipse cx="55.3" cy="51.7" class="cls-1" data-name="Ellipse 14" rx="55.3" ry="51.7"
1218 |                        transform="translate(1529 490.4)"/>
1219 |               <ellipse cx="55.3" cy="51.7" class="cls-1" data-name="Ellipse 15" rx="55.3" ry="51.7"
1220 |                        transform="translate(1569.6 467.8)"/>
1221 |               <circle cx="55.3" cy="55.3" r="55.3" class="cls-1" data-name="Ellipse 16"
1222 |                       transform="translate(1618.9 476.8)"/>
1223 |               <ellipse cx="55.3" cy="51.7" class="cls-1" data-name="Ellipse 17" rx="55.3" ry="51.7"
1224 |                        transform="translate(1631.8 450)"/>
1225 |               <ellipse cx="55.3" cy="51.7" class="cls-1" data-name="Ellipse 18" rx="55.3" ry="51.7"
1226 |                        transform="translate(1687.1 477.5)"/>
1227 |               <ellipse cx="55.3" cy="51.7" class="cls-1" data-name="Ellipse 19" rx="55.3" ry="51.7"
1228 |                        transform="translate(1709.6 507.3)"/>
1229 |               <circle cx="55.3" cy="55.3" r="55.3" class="cls-1" data-name="Ellipse 20"
1230 |                       transform="translate(1639.6 500.1)"/>
1231 |               <ellipse cx="55.3" cy="51.7" class="cls-1" data-name="Ellipse 21" rx="55.3" ry="51.7"
1232 |                        transform="translate(1569.6 507.3)"/>
1233 |               <path fill="none" stroke="#fd0" stroke-width="18"
1234 |                     d="M1732.5 644l-61.4-61.4 22.5-10.3 26.8 5.1 9.5-22.4-38-37.2" data-name="Path 59"/>
1235 |               <path fill="none" stroke="#fd0" stroke-width="15" d="M1597.2 539.5l31.2 25.9-24.8 22.2 17.3 36.2"
1236 |                     data-name="Path 60"/>
1237 |             </g>
1238 |           </svg>
1239 | 
1240 | 
1241 |           <svg class="forecast-condition__icon" *ngSwitchCase="day5State === 'Sunny' || day5State === 'Clear'"
1242 |                viewBox="2050 -845 262 262">
1243 |             <circle cx="131" cy="131" r="131" fill="#ffde17" data-name="Sun Icon" transform="translate(2050 -845)"/>
1244 |           </svg>
1245 | 
1246 |           <span class="day-temp__text">{{day5Temp}}°</span>
1247 |           <span class="day-state__text">{{day5State}}</span>
1248 |         </div>
1249 |       </section>
1250 | 
1251 | 
1252 |     </main>
1253 | 
1254 |   </section>
1255 | 
1256 | </div>
1257 | 


--------------------------------------------------------------------------------