Ionic App

commit abc920e2c3aa3ea149627bd5dfb3481d50884b06 Author: janmaroto Date: Wed Dec 1 18:35:44 2021 +0100 Primer Commit diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts new file mode 100755 index 0000000..9e4e074 --- /dev/null +++ b/src/app/app-routing.module.ts @@ -0,0 +1,34 @@ +import { NgModule } from '@angular/core'; +import { PreloadAllModules, RouterModule, Routes } from '@angular/router'; + +const routes: Routes = [ + { + path: 'home', + loadChildren: () => import('./home/home.module').then( m => m.HomePageModule) + }, + { + path: '', + redirectTo: 'home', + pathMatch: 'full' + }, + { + path: 'main', + loadChildren: () => import('./pages/main/main.module').then( m => m.MainPageModule) + }, + { + path: 'form', + loadChildren: () => import('./pages/form/form.module').then( m => m.FormPageModule) + }, + { + path: 'list', + loadChildren: () => import('./pages/list/list.module').then( m => m.ListPageModule) + }, +]; + +@NgModule({ + imports: [ + RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules }) + ], + exports: [RouterModule] +}) +export class AppRoutingModule { } diff --git a/src/app/app.component.html b/src/app/app.component.html new file mode 100755 index 0000000..b4afb9a --- /dev/null +++ b/src/app/app.component.html @@ -0,0 +1,22 @@ + + + + + + Start Menu + + + + + + Main Page + Form Page + Result Page + + + + + + + + diff --git a/src/app/app.component.scss b/src/app/app.component.scss new file mode 100755 index 0000000..90d8385 --- /dev/null +++ b/src/app/app.component.scss @@ -0,0 +1,7 @@ +:root { + --ion-color-secondary: #4CAF50; +} +ion-button { + width: 100%; + height: 100%; +} \ No newline at end of file diff --git a/src/app/app.component.spec.ts b/src/app/app.component.spec.ts new file mode 100755 index 0000000..161e57d --- /dev/null +++ b/src/app/app.component.spec.ts @@ -0,0 +1,23 @@ +import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; +import { TestBed, waitForAsync } from '@angular/core/testing'; + +import { AppComponent } from './app.component'; + +describe('AppComponent', () => { + + beforeEach(waitForAsync(() => { + + TestBed.configureTestingModule({ + declarations: [AppComponent], + schemas: [CUSTOM_ELEMENTS_SCHEMA], + }).compileComponents(); + })); + + it('should create the app', () => { + const fixture = TestBed.createComponent(AppComponent); + const app = fixture.debugElement.componentInstance; + expect(app).toBeTruthy(); + }); + // TODO: add more tests! + +}); diff --git a/src/app/app.component.ts b/src/app/app.component.ts new file mode 100755 index 0000000..913de3d --- /dev/null +++ b/src/app/app.component.ts @@ -0,0 +1,10 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-root', + templateUrl: 'app.component.html', + styleUrls: ['app.component.scss'], +}) +export class AppComponent { + constructor() {} +} diff --git a/src/app/app.module.ts b/src/app/app.module.ts new file mode 100755 index 0000000..f8b75ac --- /dev/null +++ b/src/app/app.module.ts @@ -0,0 +1,17 @@ +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; +import { RouteReuseStrategy } from '@angular/router'; + +import { IonicModule, IonicRouteStrategy } from '@ionic/angular'; + +import { AppComponent } from './app.component'; +import { AppRoutingModule } from './app-routing.module'; + +@NgModule({ + declarations: [AppComponent], + entryComponents: [], + imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule], + providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }], + bootstrap: [AppComponent], +}) +export class AppModule {} diff --git a/src/app/home/home-routing.module.ts b/src/app/home/home-routing.module.ts new file mode 100755 index 0000000..29c3f60 --- /dev/null +++ b/src/app/home/home-routing.module.ts @@ -0,0 +1,16 @@ +import { NgModule } from '@angular/core'; +import { RouterModule, Routes } from '@angular/router'; +import { HomePage } from './home.page'; + +const routes: Routes = [ + { + path: '', + component: HomePage, + } +]; + +@NgModule({ + imports: [RouterModule.forChild(routes)], + exports: [RouterModule] +}) +export class HomePageRoutingModule {} diff --git a/src/app/home/home.module.ts b/src/app/home/home.module.ts new file mode 100755 index 0000000..a554f01 --- /dev/null +++ b/src/app/home/home.module.ts @@ -0,0 +1,19 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { IonicModule } from '@ionic/angular'; +import { FormsModule } from '@angular/forms'; +import { HomePage } from './home.page'; + +import { HomePageRoutingModule } from './home-routing.module'; + + +@NgModule({ + imports: [ + CommonModule, + FormsModule, + IonicModule, + HomePageRoutingModule + ], + declarations: [HomePage] +}) +export class HomePageModule {} diff --git a/src/app/home/home.page.html b/src/app/home/home.page.html new file mode 100755 index 0000000..eb98b79 --- /dev/null +++ b/src/app/home/home.page.html @@ -0,0 +1,21 @@ + + + + + + Blank + + + + + + + Blank + + + +

+ Ready to create an app? +

Start with Ionic UI Components

+ diff --git a/src/app/home/home.page.scss b/src/app/home/home.page.scss new file mode 100755 index 0000000..8993e7c --- /dev/null +++ b/src/app/home/home.page.scss @@ -0,0 +1,27 @@ +#container { + text-align: center; + + position: absolute; + left: 0; + right: 0; + top: 50%; + transform: translateY(-50%); +} + +#container strong { + font-size: 20px; + line-height: 26px; +} + +#container p { + font-size: 16px; + line-height: 22px; + + color: #8c8c8c; + + margin: 0; +} + +#container a { + text-decoration: none; +} \ No newline at end of file diff --git a/src/app/home/home.page.spec.ts b/src/app/home/home.page.spec.ts new file mode 100755 index 0000000..d628561 --- /dev/null +++ b/src/app/home/home.page.spec.ts @@ -0,0 +1,24 @@ +import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'; +import { IonicModule } from '@ionic/angular'; + +import { HomePage } from './home.page'; + +describe('HomePage', () => { + let component: HomePage; + let fixture: ComponentFixture; + + beforeEach(waitForAsync(() => { + TestBed.configureTestingModule({ + declarations: [ HomePage ], + imports: [IonicModule.forRoot()] + }).compileComponents(); + + fixture = TestBed.createComponent(HomePage); + component = fixture.componentInstance; + fixture.detectChanges(); + })); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/home/home.page.ts b/src/app/home/home.page.ts new file mode 100755 index 0000000..83522d5 --- /dev/null +++ b/src/app/home/home.page.ts @@ -0,0 +1,12 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-home', + templateUrl: 'home.page.html', + styleUrls: ['home.page.scss'], +}) +export class HomePage { + + constructor() {} + +} diff --git a/src/app/pages/form/form-routing.module.ts b/src/app/pages/form/form-routing.module.ts new file mode 100755 index 0000000..a94ebdc --- /dev/null +++ b/src/app/pages/form/form-routing.module.ts @@ -0,0 +1,17 @@ +import { NgModule } from '@angular/core'; +import { Routes, RouterModule } from '@angular/router'; + +import { FormPage } from './form.page'; + +const routes: Routes = [ + { + path: '', + component: FormPage + } +]; + +@NgModule({ + imports: [RouterModule.forChild(routes)], + exports: [RouterModule], +}) +export class FormPageRoutingModule {} diff --git a/src/app/pages/form/form.module.ts b/src/app/pages/form/form.module.ts new file mode 100755 index 0000000..78455da --- /dev/null +++ b/src/app/pages/form/form.module.ts @@ -0,0 +1,20 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { FormsModule } from '@angular/forms'; + +import { IonicModule } from '@ionic/angular'; + +import { FormPageRoutingModule } from './form-routing.module'; + +import { FormPage } from './form.page'; + +@NgModule({ + imports: [ + CommonModule, + FormsModule, + IonicModule, + FormPageRoutingModule + ], + declarations: [FormPage] +}) +export class FormPageModule {} diff --git a/src/app/pages/form/form.page.html b/src/app/pages/form/form.page.html new file mode 100755 index 0000000..fa410f0 --- /dev/null +++ b/src/app/pages/form/form.page.html @@ -0,0 +1,46 @@ + + + + + + Form Page + + + + +

+ +

Go to home page

Go to result page

+ + diff --git a/src/app/pages/form/form.page.scss b/src/app/pages/form/form.page.scss new file mode 100755 index 0000000..a300f07 --- /dev/null +++ b/src/app/pages/form/form.page.scss @@ -0,0 +1,53 @@ +label { + letter-spacing: 0.5px; + text-indent: 15px; + font-family: Arial, Helvetica, sans-serif; + font-weight: bold; + font-size: 20px; +} +input[type=text], select { + width: 100%; + padding: 12px 20px; + margin: 8px 0; + display: inline-block; + border: 1px solid #ccc; + border-radius: 4px; + box-sizing: border-box; + } + + input[type=submit] { + width: 100%; + background-color: #4CAF50; + color: white; + padding: 14px 20px; + margin: 8px 0; + border: none; + border-radius: 4px; + cursor: pointer; + } + + input[type=submit]:hover { + background-color: #45a049; + } + + .formDiv { + border-radius: 5px; + padding: 20px; + } + .bigButtonDiv { + width: 100%; + display:flex; + flex-direction: row; + justify-content: space-evenly; + align-items: center; +} +.buttonDiv { + width: 375px; + max-width: 45%; + background-color: #4CAF50; + color: white; + padding: 14px 20px; + margin: 8px, 0px; + border-radius: 4px; + cursor: pointer; +} \ No newline at end of file diff --git a/src/app/pages/form/form.page.spec.ts b/src/app/pages/form/form.page.spec.ts new file mode 100755 index 0000000..06fd5c8 --- /dev/null +++ b/src/app/pages/form/form.page.spec.ts @@ -0,0 +1,24 @@ +import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'; +import { IonicModule } from '@ionic/angular'; + +import { FormPage } from './form.page'; + +describe('FormPage', () => { + let component: FormPage; + let fixture: ComponentFixture; + + beforeEach(waitForAsync(() => { + TestBed.configureTestingModule({ + declarations: [ FormPage ], + imports: [IonicModule.forRoot()] + }).compileComponents(); + + fixture = TestBed.createComponent(FormPage); + component = fixture.componentInstance; + fixture.detectChanges(); + })); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/pages/form/form.page.ts b/src/app/pages/form/form.page.ts new file mode 100755 index 0000000..9825ac7 --- /dev/null +++ b/src/app/pages/form/form.page.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-form', + templateUrl: './form.page.html', + styleUrls: ['./form.page.scss'], +}) +export class FormPage implements OnInit { + + constructor() { } + + ngOnInit() { + } + +} diff --git a/src/app/pages/list/list-routing.module.ts b/src/app/pages/list/list-routing.module.ts new file mode 100644 index 0000000..625bb53 --- /dev/null +++ b/src/app/pages/list/list-routing.module.ts @@ -0,0 +1,17 @@ +import { NgModule } from '@angular/core'; +import { Routes, RouterModule } from '@angular/router'; + +import { ListPage } from './list.page'; + +const routes: Routes = [ + { + path: '', + component: ListPage + } +]; + +@NgModule({ + imports: [RouterModule.forChild(routes)], + exports: [RouterModule], +}) +export class ListPageRoutingModule {} diff --git a/src/app/pages/list/list.module.ts b/src/app/pages/list/list.module.ts new file mode 100644 index 0000000..232a97b --- /dev/null +++ b/src/app/pages/list/list.module.ts @@ -0,0 +1,20 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { FormsModule } from '@angular/forms'; + +import { IonicModule } from '@ionic/angular'; + +import { ListPageRoutingModule } from './list-routing.module'; + +import { ListPage } from './list.page'; + +@NgModule({ + imports: [ + CommonModule, + FormsModule, + IonicModule, + ListPageRoutingModule + ], + declarations: [ListPage] +}) +export class ListPageModule {} diff --git a/src/app/pages/list/list.page.html b/src/app/pages/list/list.page.html new file mode 100644 index 0000000..329d448 --- /dev/null +++ b/src/app/pages/list/list.page.html @@ -0,0 +1,40 @@ + + + + + + Result Page + + + + + + + + Favorite + Share + + + +

+ + +

Federal Democratic Republic of Nepal

Continent: Asia

Surface Area: 147,516 km2

Population: 28,095,714

Driving Side: Left

+ + + + Delete + + + + +

Go to home page

Go to form page

+ diff --git a/src/app/pages/list/list.page.scss b/src/app/pages/list/list.page.scss new file mode 100644 index 0000000..5011130 --- /dev/null +++ b/src/app/pages/list/list.page.scss @@ -0,0 +1,17 @@ +.bigButtonDiv { + width: 100%; + display:flex; + flex-direction: row; + justify-content: space-evenly; + align-items: center; +} +.buttonDiv { + width: 375px; + max-width: 45%; + background-color: #4CAF50; + color: white; + padding: 14px 20px; + margin: 8px, 0px; + border-radius: 4px; + cursor: pointer; +} \ No newline at end of file diff --git a/src/app/pages/list/list.page.spec.ts b/src/app/pages/list/list.page.spec.ts new file mode 100644 index 0000000..2197554 --- /dev/null +++ b/src/app/pages/list/list.page.spec.ts @@ -0,0 +1,24 @@ +import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'; +import { IonicModule } from '@ionic/angular'; + +import { ListPage } from './list.page'; + +describe('ListPage', () => { + let component: ListPage; + let fixture: ComponentFixture; + + beforeEach(waitForAsync(() => { + TestBed.configureTestingModule({ + declarations: [ ListPage ], + imports: [IonicModule.forRoot()] + }).compileComponents(); + + fixture = TestBed.createComponent(ListPage); + component = fixture.componentInstance; + fixture.detectChanges(); + })); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/pages/list/list.page.ts b/src/app/pages/list/list.page.ts new file mode 100644 index 0000000..f59a5e9 --- /dev/null +++ b/src/app/pages/list/list.page.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-list', + templateUrl: './list.page.html', + styleUrls: ['./list.page.scss'], +}) +export class ListPage implements OnInit { + + constructor() { } + + ngOnInit() { + } + +} diff --git a/src/app/pages/main/main-routing.module.ts b/src/app/pages/main/main-routing.module.ts new file mode 100755 index 0000000..ce43e00 --- /dev/null +++ b/src/app/pages/main/main-routing.module.ts @@ -0,0 +1,17 @@ +import { NgModule } from '@angular/core'; +import { Routes, RouterModule } from '@angular/router'; + +import { MainPage } from './main.page'; + +const routes: Routes = [ + { + path: '', + component: MainPage + } +]; + +@NgModule({ + imports: [RouterModule.forChild(routes)], + exports: [RouterModule], +}) +export class MainPageRoutingModule {} diff --git a/src/app/pages/main/main.module.ts b/src/app/pages/main/main.module.ts new file mode 100755 index 0000000..4488460 --- /dev/null +++ b/src/app/pages/main/main.module.ts @@ -0,0 +1,20 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { FormsModule } from '@angular/forms'; + +import { IonicModule } from '@ionic/angular'; + +import { MainPageRoutingModule } from './main-routing.module'; + +import { MainPage } from './main.page'; + +@NgModule({ + imports: [ + CommonModule, + FormsModule, + IonicModule, + MainPageRoutingModule + ], + declarations: [MainPage] +}) +export class MainPageModule {} diff --git a/src/app/pages/main/main.page.html b/src/app/pages/main/main.page.html new file mode 100755 index 0000000..80afa87 --- /dev/null +++ b/src/app/pages/main/main.page.html @@ -0,0 +1,50 @@ + + + + + + Main Page + + + + +
+ + +

Country Stats

+ + +

Save Stats from any Country

+ + +

They'll probably never be useful

+ + +

But that's not why you learn them, right?

+ + + + + + + + + +

+

Go to form page

Go to result page

+ diff --git a/src/app/pages/main/main.page.scss b/src/app/pages/main/main.page.scss new file mode 100755 index 0000000..178dc9f --- /dev/null +++ b/src/app/pages/main/main.page.scss @@ -0,0 +1,38 @@ +img { + width: 750px; + max-width: 90%; +} +.slideTitle { + background-color:#4CAF50; + width: 750px; + max-width: 90%; +} +.slideDiv{ + width: 100%; + display:flex; + flex-direction: column; + justify-content: space-between; + align-items: center; + border-radius: 4px; +} +.bigButtonDiv { + width: 100%; + display:flex; + flex-direction: row; + justify-content: space-evenly; + align-items: center; +} +.buttonDiv { + width: 375px; + max-width: 45%; + background-color: #4CAF50; + color: white; + padding: 14px 20px; + margin: 8px, 0px; + border-radius: 4px; + cursor: pointer; +} + +ion-menu-button{ + display: block; +} \ No newline at end of file diff --git a/src/app/pages/main/main.page.spec.ts b/src/app/pages/main/main.page.spec.ts new file mode 100755 index 0000000..53164c6 --- /dev/null +++ b/src/app/pages/main/main.page.spec.ts @@ -0,0 +1,24 @@ +import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'; +import { IonicModule } from '@ionic/angular'; + +import { MainPage } from './main.page'; + +describe('MainPage', () => { + let component: MainPage; + let fixture: ComponentFixture; + + beforeEach(waitForAsync(() => { + TestBed.configureTestingModule({ + declarations: [ MainPage ], + imports: [IonicModule.forRoot()] + }).compileComponents(); + + fixture = TestBed.createComponent(MainPage); + component = fixture.componentInstance; + fixture.detectChanges(); + })); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/pages/main/main.page.ts b/src/app/pages/main/main.page.ts new file mode 100755 index 0000000..521c5f2 --- /dev/null +++ b/src/app/pages/main/main.page.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-main', + templateUrl: './main.page.html', + styleUrls: ['./main.page.scss'], +}) +export class MainPage implements OnInit { + + constructor() { } + + ngOnInit() { + } + +} diff --git a/src/assets/icon/favicon.png b/src/assets/icon/favicon.png new file mode 100755 index 0000000..51888a7 Binary files /dev/null and b/src/assets/icon/favicon.png differ diff --git a/src/assets/img/flags/freesvg.org.png b/src/assets/img/flags/freesvg.org.png new file mode 100644 index 0000000..233ae83 Binary files /dev/null and b/src/assets/img/flags/freesvg.org.png differ diff --git a/src/assets/img/flags/iconfinder.com.png b/src/assets/img/flags/iconfinder.com.png new file mode 100644 index 0000000..aae9d06 Binary files /dev/null and b/src/assets/img/flags/iconfinder.com.png differ diff --git a/src/assets/img/slides/.comments/slide1 (copy).jpeg.xml b/src/assets/img/slides/.comments/slide1 (copy).jpeg.xml new file mode 100755 index 0000000..d8726a6 --- /dev/null +++ b/src/assets/img/slides/.comments/slide1 (copy).jpeg.xml @@ -0,0 +1,107 @@ + + + World map. + Front view of steel world map. Wide image. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/img/slides/.comments/slide1.jpeg.xml b/src/assets/img/slides/.comments/slide1.jpeg.xml new file mode 100755 index 0000000..fb0a36d --- /dev/null +++ b/src/assets/img/slides/.comments/slide1.jpeg.xml @@ -0,0 +1,107 @@ + + + World map. + Front view of steel world map. Wide image. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/img/slides/.comments/slide1.jpg.xml b/src/assets/img/slides/.comments/slide1.jpg.xml new file mode 100755 index 0000000..fb0a36d --- /dev/null +++ b/src/assets/img/slides/.comments/slide1.jpg.xml @@ -0,0 +1,107 @@ + + + World map. + Front view of steel world map. Wide image. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/img/slides/.comments/slide3.jpg.xml b/src/assets/img/slides/.comments/slide3.jpg.xml new file mode 100755 index 0000000..64a7947 --- /dev/null +++ b/src/assets/img/slides/.comments/slide3.jpg.xml @@ -0,0 +1,7 @@ + + + + world flags + + + diff --git a/src/assets/img/slides/slide1.jpg b/src/assets/img/slides/slide1.jpg new file mode 100755 index 0000000..f47cb85 Binary files /dev/null and b/src/assets/img/slides/slide1.jpg differ diff --git a/src/assets/img/slides/slide2.jpg b/src/assets/img/slides/slide2.jpg new file mode 100755 index 0000000..8b6a2ed Binary files /dev/null and b/src/assets/img/slides/slide2.jpg differ diff --git a/src/assets/img/slides/slide3.jpg b/src/assets/img/slides/slide3.jpg new file mode 100755 index 0000000..4d45614 Binary files /dev/null and b/src/assets/img/slides/slide3.jpg differ diff --git a/src/assets/img/slides/slide4.jpg b/src/assets/img/slides/slide4.jpg new file mode 100755 index 0000000..4770cf3 Binary files /dev/null and b/src/assets/img/slides/slide4.jpg differ diff --git a/src/assets/shapes.svg b/src/assets/shapes.svg new file mode 100755 index 0000000..d370b4d --- /dev/null +++ b/src/assets/shapes.svg @@ -0,0 +1 @@ + diff --git a/src/environments/environment.prod.ts b/src/environments/environment.prod.ts new file mode 100755 index 0000000..3612073 --- /dev/null +++ b/src/environments/environment.prod.ts @@ -0,0 +1,3 @@ +export const environment = { + production: true +}; diff --git a/src/environments/environment.ts b/src/environments/environment.ts new file mode 100755 index 0000000..7b4f817 --- /dev/null +++ b/src/environments/environment.ts @@ -0,0 +1,16 @@ +// This file can be replaced during build by using the `fileReplacements` array. +// `ng build --prod` replaces `environment.ts` with `environment.prod.ts`. +// The list of file replacements can be found in `angular.json`. + +export const environment = { + production: false +}; + +/* + * For easier debugging in development mode, you can import the following file + * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`. + * + * This import should be commented out in production mode because it will have a negative impact + * on performance if an error is thrown. + */ +// import 'zone.js/dist/zone-error'; // Included with Angular CLI. diff --git a/src/global.scss b/src/global.scss new file mode 100755 index 0000000..d854de8 --- /dev/null +++ b/src/global.scss @@ -0,0 +1,26 @@ +/* + * App Global CSS + * ---------------------------------------------------------------------------- + * Put style rules here that you want to apply globally. These styles are for + * the entire app and not just one component. Additionally, this file can be + * used as an entry point to import other CSS/Sass files to be included in the + * output CSS. + * For more information on global stylesheets, visit the documentation: + * https://ionicframework.com/docs/layout/global-stylesheets + */ + +/* Core CSS required for Ionic components to work properly */ +@import "~@ionic/angular/css/core.css"; + +/* Basic CSS for apps built with Ionic */ +@import "~@ionic/angular/css/normalize.css"; +@import "~@ionic/angular/css/structure.css"; +@import "~@ionic/angular/css/typography.css"; +@import '~@ionic/angular/css/display.css'; + +/* Optional CSS utils that can be commented out */ +@import "~@ionic/angular/css/padding.css"; +@import "~@ionic/angular/css/float-elements.css"; +@import "~@ionic/angular/css/text-alignment.css"; +@import "~@ionic/angular/css/text-transformation.css"; +@import "~@ionic/angular/css/flex-utils.css"; diff --git a/src/index.html b/src/index.html new file mode 100755 index 0000000..3b0aae1 --- /dev/null +++ b/src/index.html @@ -0,0 +1,26 @@ + + + + + + Ionic App + + + + + + + + + + + + + + + + + + + + diff --git a/src/main.ts b/src/main.ts new file mode 100755 index 0000000..91ec6da --- /dev/null +++ b/src/main.ts @@ -0,0 +1,12 @@ +import { enableProdMode } from '@angular/core'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; + +import { AppModule } from './app/app.module'; +import { environment } from './environments/environment'; + +if (environment.production) { + enableProdMode(); +} + +platformBrowserDynamic().bootstrapModule(AppModule) + .catch(err => console.log(err)); diff --git a/src/polyfills.ts b/src/polyfills.ts new file mode 100755 index 0000000..ba409f9 --- /dev/null +++ b/src/polyfills.ts @@ -0,0 +1,65 @@ +/** + * This file includes polyfills needed by Angular and is loaded before the app. + * You can add your own extra polyfills to this file. + * + * This file is divided into 2 sections: + * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. + * 2. Application imports. Files imported after ZoneJS that should be loaded before your main + * file. + * + * The current setup is for so-called "evergreen" browsers; the last versions of browsers that + * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), + * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. + * + * Learn more in https://angular.io/guide/browser-support + */ + +/*************************************************************************************************** + * BROWSER POLYFILLS + */ + +/** IE11 requires the following for NgClass support on SVG elements */ +// import 'classlist.js'; // Run `npm install --save classlist.js`. + +/** + * Web Animations `@angular/platform-browser/animations` + * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari. + * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0). + */ +// import 'web-animations-js'; // Run `npm install --save web-animations-js`. + +/** + * By default, zone.js will patch all possible macroTask and DomEvents + * user can disable parts of macroTask/DomEvents patch by setting following flags + * because those flags need to be set before `zone.js` being loaded, and webpack + * will put import in the top of bundle, so user need to create a separate file + * in this directory (for example: zone-flags.ts), and put the following flags + * into that file, and then add the following code before importing zone.js. + * import './zone-flags'; + * + * The flags allowed in zone-flags.ts are listed here. + * + * The following flags will work for all browsers. + * + * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame + * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick + * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames + * + * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js + * with the following flag, it will bypass `zone.js` patch for IE/Edge + * + * (window as any).__Zone_enable_cross_context_check = true; + * + */ + +import './zone-flags'; + +/*************************************************************************************************** + * Zone JS is required by default for Angular itself. + */ +import 'zone.js/dist/zone'; // Included with Angular CLI. + + +/*************************************************************************************************** + * APPLICATION IMPORTS + */ diff --git a/src/test.ts b/src/test.ts new file mode 100755 index 0000000..50193eb --- /dev/null +++ b/src/test.ts @@ -0,0 +1,25 @@ +// This file is required by karma.conf.js and loads recursively all the .spec and framework files + +import 'zone.js/dist/zone-testing'; +import { getTestBed } from '@angular/core/testing'; +import { + BrowserDynamicTestingModule, + platformBrowserDynamicTesting +} from '@angular/platform-browser-dynamic/testing'; + +declare const require: { + context(path: string, deep?: boolean, filter?: RegExp): { + keys(): string[]; + (id: string): T; + }; +}; + +// First, initialize the Angular testing environment. +getTestBed().initTestEnvironment( + BrowserDynamicTestingModule, + platformBrowserDynamicTesting() +); +// Then we find all the tests. +const context = require.context('./', true, /\.spec\.ts$/); +// And load the modules. +context.keys().map(context); diff --git a/src/theme/variables.scss b/src/theme/variables.scss new file mode 100755 index 0000000..eae5925 --- /dev/null +++ b/src/theme/variables.scss @@ -0,0 +1,236 @@ +// Ionic Variables and Theming. For more info, please see: +// http://ionicframework.com/docs/theming/ + +/** Ionic CSS Variables **/ +:root { + /** primary **/ + --ion-color-primary: #3880ff; + --ion-color-primary-rgb: 56, 128, 255; + --ion-color-primary-contrast: #ffffff; + --ion-color-primary-contrast-rgb: 255, 255, 255; + --ion-color-primary-shade: #3171e0; + --ion-color-primary-tint: #4c8dff; + + /** secondary **/ + --ion-color-secondary: #3dc2ff; + --ion-color-secondary-rgb: 61, 194, 255; + --ion-color-secondary-contrast: #ffffff; + --ion-color-secondary-contrast-rgb: 255, 255, 255; + --ion-color-secondary-shade: #36abe0; + --ion-color-secondary-tint: #50c8ff; + + /** tertiary **/ + --ion-color-tertiary: #5260ff; + --ion-color-tertiary-rgb: 82, 96, 255; + --ion-color-tertiary-contrast: #ffffff; + --ion-color-tertiary-contrast-rgb: 255, 255, 255; + --ion-color-tertiary-shade: #4854e0; + --ion-color-tertiary-tint: #6370ff; + + /** success **/ + --ion-color-success: #2dd36f; + --ion-color-success-rgb: 45, 211, 111; + --ion-color-success-contrast: #ffffff; + --ion-color-success-contrast-rgb: 255, 255, 255; + --ion-color-success-shade: #28ba62; + --ion-color-success-tint: #42d77d; + + /** warning **/ + --ion-color-warning: #ffc409; + --ion-color-warning-rgb: 255, 196, 9; + --ion-color-warning-contrast: #000000; + --ion-color-warning-contrast-rgb: 0, 0, 0; + --ion-color-warning-shade: #e0ac08; + --ion-color-warning-tint: #ffca22; + + /** danger **/ + --ion-color-danger: #eb445a; + --ion-color-danger-rgb: 235, 68, 90; + --ion-color-danger-contrast: #ffffff; + --ion-color-danger-contrast-rgb: 255, 255, 255; + --ion-color-danger-shade: #cf3c4f; + --ion-color-danger-tint: #ed576b; + + /** dark **/ + --ion-color-dark: #222428; + --ion-color-dark-rgb: 34, 36, 40; + --ion-color-dark-contrast: #ffffff; + --ion-color-dark-contrast-rgb: 255, 255, 255; + --ion-color-dark-shade: #1e2023; + --ion-color-dark-tint: #383a3e; + + /** medium **/ + --ion-color-medium: #92949c; + --ion-color-medium-rgb: 146, 148, 156; + --ion-color-medium-contrast: #ffffff; + --ion-color-medium-contrast-rgb: 255, 255, 255; + --ion-color-medium-shade: #808289; + --ion-color-medium-tint: #9d9fa6; + + /** light **/ + --ion-color-light: #f4f5f8; + --ion-color-light-rgb: 244, 245, 248; + --ion-color-light-contrast: #000000; + --ion-color-light-contrast-rgb: 0, 0, 0; + --ion-color-light-shade: #d7d8da; + --ion-color-light-tint: #f5f6f9; +} + +@media (prefers-color-scheme: dark) { + /* + * Dark Colors + * ------------------------------------------- + */ + + body { + --ion-color-primary: #428cff; + --ion-color-primary-rgb: 66,140,255; + --ion-color-primary-contrast: #ffffff; + --ion-color-primary-contrast-rgb: 255,255,255; + --ion-color-primary-shade: #3a7be0; + --ion-color-primary-tint: #5598ff; + + --ion-color-secondary: #50c8ff; + --ion-color-secondary-rgb: 80,200,255; + --ion-color-secondary-contrast: #ffffff; + --ion-color-secondary-contrast-rgb: 255,255,255; + --ion-color-secondary-shade: #46b0e0; + --ion-color-secondary-tint: #62ceff; + + --ion-color-tertiary: #6a64ff; + --ion-color-tertiary-rgb: 106,100,255; + --ion-color-tertiary-contrast: #ffffff; + --ion-color-tertiary-contrast-rgb: 255,255,255; + --ion-color-tertiary-shade: #5d58e0; + --ion-color-tertiary-tint: #7974ff; + + --ion-color-success: #2fdf75; + --ion-color-success-rgb: 47,223,117; + --ion-color-success-contrast: #000000; + --ion-color-success-contrast-rgb: 0,0,0; + --ion-color-success-shade: #29c467; + --ion-color-success-tint: #44e283; + + --ion-color-warning: #ffd534; + --ion-color-warning-rgb: 255,213,52; + --ion-color-warning-contrast: #000000; + --ion-color-warning-contrast-rgb: 0,0,0; + --ion-color-warning-shade: #e0bb2e; + --ion-color-warning-tint: #ffd948; + + --ion-color-danger: #ff4961; + --ion-color-danger-rgb: 255,73,97; + --ion-color-danger-contrast: #ffffff; + --ion-color-danger-contrast-rgb: 255,255,255; + --ion-color-danger-shade: #e04055; + --ion-color-danger-tint: #ff5b71; + + --ion-color-dark: #f4f5f8; + --ion-color-dark-rgb: 244,245,248; + --ion-color-dark-contrast: #000000; + --ion-color-dark-contrast-rgb: 0,0,0; + --ion-color-dark-shade: #d7d8da; + --ion-color-dark-tint: #f5f6f9; + + --ion-color-medium: #989aa2; + --ion-color-medium-rgb: 152,154,162; + --ion-color-medium-contrast: #000000; + --ion-color-medium-contrast-rgb: 0,0,0; + --ion-color-medium-shade: #86888f; + --ion-color-medium-tint: #a2a4ab; + + --ion-color-light: #222428; + --ion-color-light-rgb: 34,36,40; + --ion-color-light-contrast: #ffffff; + --ion-color-light-contrast-rgb: 255,255,255; + --ion-color-light-shade: #1e2023; + --ion-color-light-tint: #383a3e; + } + + /* + * iOS Dark Theme + * ------------------------------------------- + */ + + .ios body { + --ion-background-color: #000000; + --ion-background-color-rgb: 0,0,0; + + --ion-text-color: #ffffff; + --ion-text-color-rgb: 255,255,255; + + --ion-color-step-50: #0d0d0d; + --ion-color-step-100: #1a1a1a; + --ion-color-step-150: #262626; + --ion-color-step-200: #333333; + --ion-color-step-250: #404040; + --ion-color-step-300: #4d4d4d; + --ion-color-step-350: #595959; + --ion-color-step-400: #666666; + --ion-color-step-450: #737373; + --ion-color-step-500: #808080; + --ion-color-step-550: #8c8c8c; + --ion-color-step-600: #999999; + --ion-color-step-650: #a6a6a6; + --ion-color-step-700: #b3b3b3; + --ion-color-step-750: #bfbfbf; + --ion-color-step-800: #cccccc; + --ion-color-step-850: #d9d9d9; + --ion-color-step-900: #e6e6e6; + --ion-color-step-950: #f2f2f2; + + --ion-item-background: #000000; + + --ion-card-background: #1c1c1d; + } + + .ios ion-modal { + --ion-background-color: var(--ion-color-step-100); + --ion-toolbar-background: var(--ion-color-step-150); + --ion-toolbar-border-color: var(--ion-color-step-250); + } + + + /* + * Material Design Dark Theme + * ------------------------------------------- + */ + + .md body { + --ion-background-color: #121212; + --ion-background-color-rgb: 18,18,18; + + --ion-text-color: #ffffff; + --ion-text-color-rgb: 255,255,255; + + --ion-border-color: #222222; + + --ion-color-step-50: #1e1e1e; + --ion-color-step-100: #2a2a2a; + --ion-color-step-150: #363636; + --ion-color-step-200: #414141; + --ion-color-step-250: #4d4d4d; + --ion-color-step-300: #595959; + --ion-color-step-350: #656565; + --ion-color-step-400: #717171; + --ion-color-step-450: #7d7d7d; + --ion-color-step-500: #898989; + --ion-color-step-550: #949494; + --ion-color-step-600: #a0a0a0; + --ion-color-step-650: #acacac; + --ion-color-step-700: #b8b8b8; + --ion-color-step-750: #c4c4c4; + --ion-color-step-800: #d0d0d0; + --ion-color-step-850: #dbdbdb; + --ion-color-step-900: #e7e7e7; + --ion-color-step-950: #f3f3f3; + + --ion-item-background: #1e1e1e; + + --ion-toolbar-background: #1f1f1f; + + --ion-tab-bar-background: #1f1f1f; + + --ion-card-background: #1e1e1e; + } +} diff --git a/src/zone-flags.ts b/src/zone-flags.ts new file mode 100755 index 0000000..c84245f --- /dev/null +++ b/src/zone-flags.ts @@ -0,0 +1,6 @@ +/** + * Prevents Angular change detection from + * running with certain Web Component callbacks + */ +// eslint-disable-next-line no-underscore-dangle +(window as any).__Zone_disable_customElements = true;