├── src ├── app │ ├── app.component.scss │ ├── tab2 │ │ ├── tab2.page.scss │ │ ├── tab2.page.ts │ │ ├── tab2-routing.module.ts │ │ ├── tab2.module.ts │ │ ├── tab2.page.spec.ts │ │ └── tab2.page.html │ ├── tabs │ │ ├── tabs.page.scss │ │ ├── tabs.page.ts │ │ ├── tabs.module.ts │ │ ├── tabs.page.spec.ts │ │ ├── tabs.page.html │ │ └── tabs-routing.module.ts │ ├── app.component.html │ ├── tab5 │ │ ├── tab5.page.scss │ │ ├── tab5.page.ts │ │ ├── tab5-routing.module.ts │ │ ├── tab5.module.ts │ │ ├── tab5.page.spec.ts │ │ └── tab5.page.html │ ├── tab1 │ │ ├── tab1.page.ts │ │ ├── tab1-routing.module.ts │ │ ├── tab1.module.ts │ │ ├── tab1.page.spec.ts │ │ ├── tab1.page.scss │ │ └── tab1.page.html │ ├── tab3 │ │ ├── tab3.page.scss │ │ ├── tab3-routing.module.ts │ │ ├── tab3.page.ts │ │ ├── tab3.module.ts │ │ ├── tab3.page.spec.ts │ │ └── tab3.page.html │ ├── tab4 │ │ ├── tab4.page.ts │ │ ├── tab4-routing.module.ts │ │ ├── tab4.page.scss │ │ ├── tab4.module.ts │ │ ├── tab4.page.spec.ts │ │ └── tab4.page.html │ ├── course-detail │ │ ├── course-detail.page.ts │ │ ├── course-detail-routing.module.ts │ │ ├── course-detail.module.ts │ │ ├── course-detail.page.spec.ts │ │ ├── course-detail.page.scss │ │ └── course-detail.page.html │ ├── course-playing │ │ ├── course-playing-routing.module.ts │ │ ├── course-playing.page.ts │ │ ├── course-playing.module.ts │ │ ├── course-playing.page.spec.ts │ │ ├── course-playing.page.scss │ │ └── course-playing.page.html │ ├── app-routing.module.ts │ ├── app.component.ts │ ├── app.module.ts │ └── app.component.spec.ts ├── assets │ ├── img │ │ ├── img_1.png │ │ ├── img_2.png │ │ ├── img_3.png │ │ ├── img_4.png │ │ ├── bg_blur.jpg │ │ └── avatars │ │ │ ├── 1.jpg │ │ │ ├── 10.jpg │ │ │ ├── 11.jpg │ │ │ ├── 12.jpg │ │ │ ├── 2.jpg │ │ │ ├── 3.jpg │ │ │ ├── 4.jpg │ │ │ ├── 5.jpg │ │ │ ├── 6.jpg │ │ │ ├── 7.jpg │ │ │ ├── 8.jpg │ │ │ └── 9.jpg │ ├── icon │ │ └── favicon.png │ └── shapes.svg ├── environments │ ├── environment.prod.ts │ └── environment.ts ├── zone-flags.ts ├── sass │ ├── scrollHorizontal.scss │ ├── fonts.scss │ ├── app.scss │ └── variables.override.scss ├── main.ts ├── test.ts ├── index.html ├── global.scss ├── theme │ └── variables.scss └── polyfills.ts ├── resources ├── icon.png └── splash.png ├── ionic.config.json ├── e2e ├── src │ ├── app.po.ts │ └── app.e2e-spec.ts ├── tsconfig.json └── protractor.conf.js ├── capacitor.config.json ├── tsconfig.spec.json ├── tsconfig.app.json ├── browserslist ├── .gitignore ├── tsconfig.json ├── karma.conf.js ├── LICENSE ├── package.json ├── README.md ├── tslint.json └── angular.json /src/app/app.component.scss: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/app/tab2/tab2.page.scss: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /resources/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrhieu/ionic-udemy/HEAD/resources/icon.png -------------------------------------------------------------------------------- /resources/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrhieu/ionic-udemy/HEAD/resources/splash.png -------------------------------------------------------------------------------- /src/app/tabs/tabs.page.scss: -------------------------------------------------------------------------------- 1 | ion-tab-bar { 2 | --background: var(--ion-color-light); 3 | } 4 | -------------------------------------------------------------------------------- /src/app/app.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/assets/img/img_1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrhieu/ionic-udemy/HEAD/src/assets/img/img_1.png -------------------------------------------------------------------------------- /src/assets/img/img_2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrhieu/ionic-udemy/HEAD/src/assets/img/img_2.png -------------------------------------------------------------------------------- /src/assets/img/img_3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrhieu/ionic-udemy/HEAD/src/assets/img/img_3.png -------------------------------------------------------------------------------- /src/assets/img/img_4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrhieu/ionic-udemy/HEAD/src/assets/img/img_4.png -------------------------------------------------------------------------------- /src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /src/assets/icon/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrhieu/ionic-udemy/HEAD/src/assets/icon/favicon.png -------------------------------------------------------------------------------- /src/assets/img/bg_blur.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrhieu/ionic-udemy/HEAD/src/assets/img/bg_blur.jpg -------------------------------------------------------------------------------- /src/assets/img/avatars/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrhieu/ionic-udemy/HEAD/src/assets/img/avatars/1.jpg -------------------------------------------------------------------------------- /src/assets/img/avatars/10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrhieu/ionic-udemy/HEAD/src/assets/img/avatars/10.jpg -------------------------------------------------------------------------------- /src/assets/img/avatars/11.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrhieu/ionic-udemy/HEAD/src/assets/img/avatars/11.jpg -------------------------------------------------------------------------------- /src/assets/img/avatars/12.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrhieu/ionic-udemy/HEAD/src/assets/img/avatars/12.jpg -------------------------------------------------------------------------------- /src/assets/img/avatars/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrhieu/ionic-udemy/HEAD/src/assets/img/avatars/2.jpg -------------------------------------------------------------------------------- /src/assets/img/avatars/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrhieu/ionic-udemy/HEAD/src/assets/img/avatars/3.jpg -------------------------------------------------------------------------------- /src/assets/img/avatars/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrhieu/ionic-udemy/HEAD/src/assets/img/avatars/4.jpg -------------------------------------------------------------------------------- /src/assets/img/avatars/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrhieu/ionic-udemy/HEAD/src/assets/img/avatars/5.jpg -------------------------------------------------------------------------------- /src/assets/img/avatars/6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrhieu/ionic-udemy/HEAD/src/assets/img/avatars/6.jpg -------------------------------------------------------------------------------- /src/assets/img/avatars/7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrhieu/ionic-udemy/HEAD/src/assets/img/avatars/7.jpg -------------------------------------------------------------------------------- /src/assets/img/avatars/8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrhieu/ionic-udemy/HEAD/src/assets/img/avatars/8.jpg -------------------------------------------------------------------------------- /src/assets/img/avatars/9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrhieu/ionic-udemy/HEAD/src/assets/img/avatars/9.jpg -------------------------------------------------------------------------------- /ionic.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ionic-udemy", 3 | "integrations": { 4 | "capacitor": {} 5 | }, 6 | "type": "angular" 7 | } 8 | -------------------------------------------------------------------------------- /src/zone-flags.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Prevents Angular change detection from 3 | * running with certain Web Component callbacks 4 | */ 5 | (window as any).__Zone_disable_customElements = true; 6 | -------------------------------------------------------------------------------- /src/app/tab5/tab5.page.scss: -------------------------------------------------------------------------------- 1 | .avatar-lg { 2 | display: inline-block; 3 | width: 80px; 4 | height: 80px; 5 | } 6 | 7 | .list-header-custom { 8 | font-size: 13px; 9 | color: var(--ion-color-medium); 10 | } 11 | -------------------------------------------------------------------------------- /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 | getPageTitle() { 9 | return element(by.css('ion-title')).getText(); 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /src/app/tab1/tab1.page.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-tab1', 5 | templateUrl: 'tab1.page.html', 6 | styleUrls: ['tab1.page.scss'] 7 | }) 8 | export class Tab1Page { 9 | 10 | constructor() {} 11 | 12 | } 13 | -------------------------------------------------------------------------------- /src/app/tab2/tab2.page.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-tab2', 5 | templateUrl: 'tab2.page.html', 6 | styleUrls: ['tab2.page.scss'] 7 | }) 8 | export class Tab2Page { 9 | 10 | constructor() {} 11 | 12 | } 13 | -------------------------------------------------------------------------------- /src/app/tabs/tabs.page.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-tabs', 5 | templateUrl: 'tabs.page.html', 6 | styleUrls: ['tabs.page.scss'] 7 | }) 8 | export class TabsPage { 9 | 10 | constructor() {} 11 | 12 | } 13 | -------------------------------------------------------------------------------- /src/app/tab3/tab3.page.scss: -------------------------------------------------------------------------------- 1 | .course-thumbnail { 2 | align-self: flex-start; 3 | margin-top: 8px; 4 | } 5 | 6 | .course-progress { 7 | margin: 8px 0 0; 8 | color: var(--ion-color-medium); 9 | 10 | ion-progress-bar { 11 | margin-bottom: 4px; 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /e2e/tsconfig.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 | } 14 | -------------------------------------------------------------------------------- /capacitor.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "appId": "io.ionic.starter", 3 | "appName": "ionic-udemy", 4 | "bundledWebRuntime": false, 5 | "npmClient": "npm", 6 | "webDir": "www", 7 | "plugins": { 8 | "SplashScreen": { 9 | "launchShowDuration": 0 10 | } 11 | }, 12 | "cordova": {} 13 | } 14 | -------------------------------------------------------------------------------- /src/sass/scrollHorizontal.scss: -------------------------------------------------------------------------------- 1 | .scroll-horizontal { 2 | white-space: nowrap; 3 | overflow-x: scroll; 4 | overflow-y: hidden; 5 | -webkit-overflow-scrolling: touch; 6 | 7 | .scroll-item { 8 | position: relative; 9 | display: inline-block; 10 | margin-right: 8px; 11 | margin-bottom: 8px; 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /src/app/tab4/tab4.page.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-tab4', 5 | templateUrl: './tab4.page.html', 6 | styleUrls: ['./tab4.page.scss'], 7 | }) 8 | export class Tab4Page implements OnInit { 9 | 10 | constructor() { } 11 | 12 | ngOnInit() { 13 | } 14 | 15 | } 16 | -------------------------------------------------------------------------------- /src/app/tab5/tab5.page.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-tab5', 5 | templateUrl: './tab5.page.html', 6 | styleUrls: ['./tab5.page.scss'], 7 | }) 8 | export class Tab5Page implements OnInit { 9 | 10 | constructor() { } 11 | 12 | ngOnInit() { 13 | } 14 | 15 | } 16 | -------------------------------------------------------------------------------- /src/sass/fonts.scss: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap'); 2 | 3 | :root, :root[mode="md"], :root[mode="ios"] { 4 | --ion-font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Roboto', sans-serif !important; 5 | font-family: var(--ion-font-family) !important; 6 | } 7 | -------------------------------------------------------------------------------- /e2e/src/app.e2e-spec.ts: -------------------------------------------------------------------------------- 1 | import { AppPage } from './app.po'; 2 | 3 | describe('new 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.getPageTitle()).toContain('Tab 1'); 13 | }); 14 | }); 15 | -------------------------------------------------------------------------------- /tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./out-tsc/spec", 5 | "types": [ 6 | "jasmine", 7 | "node" 8 | ] 9 | }, 10 | "files": [ 11 | "src/test.ts", 12 | "src/polyfills.ts" 13 | ], 14 | "include": [ 15 | "src/**/*.spec.ts", 16 | "src/**/*.d.ts" 17 | ] 18 | } -------------------------------------------------------------------------------- /tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./out-tsc/app", 5 | "types": [] 6 | }, 7 | "files": [ 8 | "src/main.ts", 9 | "src/polyfills.ts" 10 | ], 11 | "include": [ 12 | "src/**/*.ts", 13 | "src/**/*.d.ts" 14 | ], 15 | "exclude": [ 16 | "src/**/*.spec.ts" 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /src/app/course-detail/course-detail.page.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-course-detail', 5 | templateUrl: './course-detail.page.html', 6 | styleUrls: ['./course-detail.page.scss'], 7 | }) 8 | export class CourseDetailPage implements OnInit { 9 | 10 | constructor() { } 11 | 12 | ngOnInit() { 13 | } 14 | 15 | } 16 | -------------------------------------------------------------------------------- /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/tab1/tab1-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { RouterModule, Routes } from '@angular/router'; 3 | import { Tab1Page } from './tab1.page'; 4 | 5 | const routes: Routes = [ 6 | { 7 | path: '', 8 | component: Tab1Page, 9 | } 10 | ]; 11 | 12 | @NgModule({ 13 | imports: [RouterModule.forChild(routes)], 14 | exports: [RouterModule] 15 | }) 16 | export class Tab1PageRoutingModule {} 17 | -------------------------------------------------------------------------------- /src/app/tab2/tab2-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { RouterModule, Routes } from '@angular/router'; 3 | import { Tab2Page } from './tab2.page'; 4 | 5 | const routes: Routes = [ 6 | { 7 | path: '', 8 | component: Tab2Page, 9 | } 10 | ]; 11 | 12 | @NgModule({ 13 | imports: [RouterModule.forChild(routes)], 14 | exports: [RouterModule] 15 | }) 16 | export class Tab2PageRoutingModule {} 17 | -------------------------------------------------------------------------------- /src/app/tab3/tab3-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { RouterModule, Routes } from '@angular/router'; 3 | import { Tab3Page } from './tab3.page'; 4 | 5 | const routes: Routes = [ 6 | { 7 | path: '', 8 | component: Tab3Page, 9 | } 10 | ]; 11 | 12 | @NgModule({ 13 | imports: [RouterModule.forChild(routes)], 14 | exports: [RouterModule] 15 | }) 16 | export class Tab3PageRoutingModule {} 17 | -------------------------------------------------------------------------------- /src/app/tab4/tab4-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { Routes, RouterModule } from '@angular/router'; 3 | 4 | import { Tab4Page } from './tab4.page'; 5 | 6 | const routes: Routes = [ 7 | { 8 | path: '', 9 | component: Tab4Page 10 | } 11 | ]; 12 | 13 | @NgModule({ 14 | imports: [RouterModule.forChild(routes)], 15 | exports: [RouterModule], 16 | }) 17 | export class Tab4PageRoutingModule {} 18 | -------------------------------------------------------------------------------- /src/app/tab5/tab5-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { Routes, RouterModule } from '@angular/router'; 3 | 4 | import { Tab5Page } from './tab5.page'; 5 | 6 | const routes: Routes = [ 7 | { 8 | path: '', 9 | component: Tab5Page 10 | } 11 | ]; 12 | 13 | @NgModule({ 14 | imports: [RouterModule.forChild(routes)], 15 | exports: [RouterModule], 16 | }) 17 | export class Tab5PageRoutingModule {} 18 | -------------------------------------------------------------------------------- /browserslist: -------------------------------------------------------------------------------- 1 | # This file is used by the build system to adjust CSS and JS output to support the specified browsers below. 2 | # For additional information regarding the format and rule options, please see: 3 | # https://github.com/browserslist/browserslist#queries 4 | 5 | # You can see what browsers were selected by your queries by running: 6 | # npx browserslist 7 | 8 | > 0.5% 9 | last 2 versions 10 | Firefox ESR 11 | not dead 12 | not IE 9-11 # For IE 9-11 support, remove 'not'. 13 | -------------------------------------------------------------------------------- /src/app/course-detail/course-detail-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { Routes, RouterModule } from '@angular/router'; 3 | 4 | import { CourseDetailPage } from './course-detail.page'; 5 | 6 | const routes: Routes = [ 7 | { 8 | path: '', 9 | component: CourseDetailPage 10 | } 11 | ]; 12 | 13 | @NgModule({ 14 | imports: [RouterModule.forChild(routes)], 15 | exports: [RouterModule], 16 | }) 17 | export class CourseDetailPageRoutingModule {} 18 | -------------------------------------------------------------------------------- /src/app/course-playing/course-playing-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { Routes, RouterModule } from '@angular/router'; 3 | 4 | import { CoursePlayingPage } from './course-playing.page'; 5 | 6 | const routes: Routes = [ 7 | { 8 | path: '', 9 | component: CoursePlayingPage 10 | } 11 | ]; 12 | 13 | @NgModule({ 14 | imports: [RouterModule.forChild(routes)], 15 | exports: [RouterModule], 16 | }) 17 | export class CoursePlayingPageRoutingModule {} 18 | -------------------------------------------------------------------------------- /src/app/tab4/tab4.page.scss: -------------------------------------------------------------------------------- 1 | .course-thumbnail { 2 | align-self: flex-start; 3 | margin-top: 8px; 4 | } 5 | 6 | .rating { 7 | display: flex; 8 | justify-content: flex-start; 9 | align-items: center; 10 | font-size: 13px; 11 | color: var(--ion-color-medium); 12 | } 13 | 14 | .price { 15 | font-size: 20px; 16 | 17 | .price-old { 18 | color: var(--ion-color-medium); 19 | font-size: 13px; 20 | display: inline-block; 21 | text-decoration: line-through; 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /src/app/course-playing/course-playing.page.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import { ModalController } from '@ionic/angular'; 3 | 4 | @Component({ 5 | selector: 'app-course-playing', 6 | templateUrl: './course-playing.page.html', 7 | styleUrls: ['./course-playing.page.scss'], 8 | }) 9 | export class CoursePlayingPage implements OnInit { 10 | 11 | constructor(public modalCtrl: ModalController) { } 12 | 13 | ngOnInit() { 14 | } 15 | 16 | closeModal() { 17 | this.modalCtrl.dismiss(); 18 | } 19 | 20 | } 21 | -------------------------------------------------------------------------------- /src/app/tab1/tab1.module.ts: -------------------------------------------------------------------------------- 1 | import { IonicModule } from '@ionic/angular'; 2 | import { NgModule } from '@angular/core'; 3 | import { CommonModule } from '@angular/common'; 4 | import { FormsModule } from '@angular/forms'; 5 | import { Tab1Page } from './tab1.page'; 6 | 7 | import { Tab1PageRoutingModule } from './tab1-routing.module'; 8 | 9 | @NgModule({ 10 | imports: [ 11 | IonicModule, 12 | CommonModule, 13 | FormsModule, 14 | Tab1PageRoutingModule 15 | ], 16 | declarations: [Tab1Page] 17 | }) 18 | export class Tab1PageModule {} 19 | -------------------------------------------------------------------------------- /src/app/tabs/tabs.module.ts: -------------------------------------------------------------------------------- 1 | import { IonicModule } from '@ionic/angular'; 2 | import { NgModule } from '@angular/core'; 3 | import { CommonModule } from '@angular/common'; 4 | import { FormsModule } from '@angular/forms'; 5 | 6 | import { TabsPageRoutingModule } from './tabs-routing.module'; 7 | 8 | import { TabsPage } from './tabs.page'; 9 | 10 | @NgModule({ 11 | imports: [ 12 | IonicModule, 13 | CommonModule, 14 | FormsModule, 15 | TabsPageRoutingModule 16 | ], 17 | declarations: [TabsPage] 18 | }) 19 | export class TabsPageModule {} 20 | -------------------------------------------------------------------------------- /src/app/tab4/tab4.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { FormsModule } from '@angular/forms'; 4 | 5 | import { IonicModule } from '@ionic/angular'; 6 | 7 | import { Tab4PageRoutingModule } from './tab4-routing.module'; 8 | 9 | import { Tab4Page } from './tab4.page'; 10 | 11 | @NgModule({ 12 | imports: [ 13 | CommonModule, 14 | FormsModule, 15 | IonicModule, 16 | Tab4PageRoutingModule 17 | ], 18 | declarations: [Tab4Page] 19 | }) 20 | export class Tab4PageModule {} 21 | -------------------------------------------------------------------------------- /src/app/tab5/tab5.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { FormsModule } from '@angular/forms'; 4 | 5 | import { IonicModule } from '@ionic/angular'; 6 | 7 | import { Tab5PageRoutingModule } from './tab5-routing.module'; 8 | 9 | import { Tab5Page } from './tab5.page'; 10 | 11 | @NgModule({ 12 | imports: [ 13 | CommonModule, 14 | FormsModule, 15 | IonicModule, 16 | Tab5PageRoutingModule 17 | ], 18 | declarations: [Tab5Page] 19 | }) 20 | export class Tab5PageModule {} 21 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Specifies intentionally untracked files to ignore when using Git 2 | # http://git-scm.com/docs/gitignore 3 | 4 | *~ 5 | *.sw[mnpcod] 6 | .tmp 7 | *.tmp 8 | *.tmp.* 9 | *.sublime-project 10 | *.sublime-workspace 11 | .DS_Store 12 | Thumbs.db 13 | UserInterfaceState.xcuserstate 14 | $RECYCLE.BIN/ 15 | 16 | *.log 17 | log.txt 18 | npm-debug.log* 19 | 20 | /.idea 21 | /.ionic 22 | /.sass-cache 23 | /.sourcemaps 24 | /.versions 25 | /.vscode 26 | /coverage 27 | /dist 28 | /node_modules 29 | /platforms 30 | /plugins 31 | /www 32 | /ios 33 | /android 34 | /.gradle 35 | 36 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compileOnSave": false, 3 | "compilerOptions": { 4 | "baseUrl": "./", 5 | "outDir": "./dist/out-tsc", 6 | "sourceMap": true, 7 | "declaration": false, 8 | "downlevelIteration": true, 9 | "experimentalDecorators": true, 10 | "module": "esnext", 11 | "moduleResolution": "node", 12 | "importHelpers": true, 13 | "target": "es2015", 14 | "lib": [ 15 | "es2018", 16 | "dom" 17 | ] 18 | }, 19 | "angularCompilerOptions": { 20 | "fullTemplateTypeCheck": true, 21 | "strictInjectionParameters": true 22 | } 23 | } -------------------------------------------------------------------------------- /src/app/course-detail/course-detail.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { FormsModule } from '@angular/forms'; 4 | 5 | import { IonicModule } from '@ionic/angular'; 6 | 7 | import { CourseDetailPageRoutingModule } from './course-detail-routing.module'; 8 | 9 | import { CourseDetailPage } from './course-detail.page'; 10 | 11 | @NgModule({ 12 | imports: [ 13 | CommonModule, 14 | FormsModule, 15 | IonicModule, 16 | CourseDetailPageRoutingModule 17 | ], 18 | declarations: [CourseDetailPage] 19 | }) 20 | export class CourseDetailPageModule {} 21 | -------------------------------------------------------------------------------- /src/app/course-playing/course-playing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { FormsModule } from '@angular/forms'; 4 | 5 | import { IonicModule } from '@ionic/angular'; 6 | 7 | import { CoursePlayingPageRoutingModule } from './course-playing-routing.module'; 8 | 9 | import { CoursePlayingPage } from './course-playing.page'; 10 | 11 | @NgModule({ 12 | imports: [ 13 | CommonModule, 14 | FormsModule, 15 | IonicModule, 16 | CoursePlayingPageRoutingModule 17 | ], 18 | declarations: [CoursePlayingPage] 19 | }) 20 | export class CoursePlayingPageModule {} 21 | -------------------------------------------------------------------------------- /src/sass/app.scss: -------------------------------------------------------------------------------- 1 | .toolbar-transparent { 2 | --min-height: 0; 3 | 4 | &.toolbar-collapse { 5 | height: 0; 6 | padding: 0 !important; 7 | margin: 0; 8 | } 9 | } 10 | 11 | .list-header-custom { 12 | font-size: 17px; 13 | 14 | &.no-padding { 15 | padding-left: 0; 16 | } 17 | } 18 | 19 | .text-sm { 20 | font-size: 13px; 21 | } 22 | 23 | .text-muted { 24 | color: var(--ion-color-medium); 25 | } 26 | 27 | .bg-image { 28 | height: 120px; 29 | background-color: var(--ion-color-medium); 30 | background-repeat: no-repeat; 31 | background-size: cover; 32 | } 33 | 34 | .bg-muted { 35 | --background: var(--ion-color-light); 36 | } 37 | -------------------------------------------------------------------------------- /src/app/app-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { PreloadAllModules, RouterModule, Routes } from '@angular/router'; 3 | 4 | const routes: Routes = [ 5 | { 6 | path: '', 7 | loadChildren: () => import('./tabs/tabs.module').then(m => m.TabsPageModule) 8 | }, 9 | { 10 | path: 'course-detail', 11 | loadChildren: () => import('./course-detail/course-detail.module').then( m => m.CourseDetailPageModule) 12 | } 13 | ]; 14 | @NgModule({ 15 | imports: [ 16 | RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules }) 17 | ], 18 | exports: [RouterModule] 19 | }) 20 | export class AppRoutingModule {} 21 | -------------------------------------------------------------------------------- /src/app/tab2/tab2.module.ts: -------------------------------------------------------------------------------- 1 | import { IonicModule } from '@ionic/angular'; 2 | import { RouterModule } from '@angular/router'; 3 | import { NgModule } from '@angular/core'; 4 | import { CommonModule } from '@angular/common'; 5 | import { FormsModule } from '@angular/forms'; 6 | import { Tab2Page } from './tab2.page'; 7 | 8 | import { Tab2PageRoutingModule } from './tab2-routing.module'; 9 | 10 | @NgModule({ 11 | imports: [ 12 | IonicModule, 13 | CommonModule, 14 | FormsModule, 15 | RouterModule.forChild([{ path: '', component: Tab2Page }]), 16 | Tab2PageRoutingModule 17 | ], 18 | declarations: [Tab2Page] 19 | }) 20 | export class Tab2PageModule {} 21 | -------------------------------------------------------------------------------- /src/app/tab3/tab3.page.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { ModalController } from '@ionic/angular'; 3 | import { CoursePlayingPage } from '../course-playing/course-playing.page'; 4 | 5 | @Component({ 6 | selector: 'app-tab3', 7 | templateUrl: 'tab3.page.html', 8 | styleUrls: ['tab3.page.scss'] 9 | }) 10 | export class Tab3Page { 11 | 12 | constructor(public modalCtrl: ModalController) { } 13 | 14 | ngOnInit() { 15 | } 16 | 17 | async openCourse() { 18 | const modal = await this.modalCtrl.create({ 19 | component: CoursePlayingPage, 20 | swipeToClose: true, 21 | }); 22 | return await modal.present(); 23 | } 24 | 25 | } 26 | -------------------------------------------------------------------------------- /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 { 6 | BrowserDynamicTestingModule, 7 | platformBrowserDynamicTesting 8 | } from '@angular/platform-browser-dynamic/testing'; 9 | 10 | declare const require: any; 11 | 12 | // First, initialize the Angular testing environment. 13 | getTestBed().initTestEnvironment( 14 | BrowserDynamicTestingModule, 15 | platformBrowserDynamicTesting() 16 | ); 17 | // Then we find all the tests. 18 | const context = require.context('./', true, /\.spec\.ts$/); 19 | // And load the modules. 20 | context.keys().map(context); 21 | -------------------------------------------------------------------------------- /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 | * For easier debugging in development mode, you can import the following file 11 | * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`. 12 | * 13 | * This import should be commented out in production mode because it will have a negative impact 14 | * on performance if an error is thrown. 15 | */ 16 | // import 'zone.js/dist/zone-error'; // Included with Angular CLI. 17 | -------------------------------------------------------------------------------- /src/app/tab4/tab4.page.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | import { IonicModule } from '@ionic/angular'; 3 | 4 | import { Tab4Page } from './tab4.page'; 5 | 6 | describe('Tab4Page', () => { 7 | let component: Tab4Page; 8 | let fixture: ComponentFixture; 9 | 10 | beforeEach(async(() => { 11 | TestBed.configureTestingModule({ 12 | declarations: [ Tab4Page ], 13 | imports: [IonicModule.forRoot()] 14 | }).compileComponents(); 15 | 16 | fixture = TestBed.createComponent(Tab4Page); 17 | component = fixture.componentInstance; 18 | fixture.detectChanges(); 19 | })); 20 | 21 | it('should create', () => { 22 | expect(component).toBeTruthy(); 23 | }); 24 | }); 25 | -------------------------------------------------------------------------------- /src/app/tab5/tab5.page.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | import { IonicModule } from '@ionic/angular'; 3 | 4 | import { Tab5Page } from './tab5.page'; 5 | 6 | describe('Tab5Page', () => { 7 | let component: Tab5Page; 8 | let fixture: ComponentFixture; 9 | 10 | beforeEach(async(() => { 11 | TestBed.configureTestingModule({ 12 | declarations: [ Tab5Page ], 13 | imports: [IonicModule.forRoot()] 14 | }).compileComponents(); 15 | 16 | fixture = TestBed.createComponent(Tab5Page); 17 | component = fixture.componentInstance; 18 | fixture.detectChanges(); 19 | })); 20 | 21 | it('should create', () => { 22 | expect(component).toBeTruthy(); 23 | }); 24 | }); 25 | -------------------------------------------------------------------------------- /src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | import { Platform } from '@ionic/angular'; 4 | import { SplashScreen } from '@ionic-native/splash-screen/ngx'; 5 | import { StatusBar } from '@ionic-native/status-bar/ngx'; 6 | 7 | @Component({ 8 | selector: 'app-root', 9 | templateUrl: 'app.component.html', 10 | styleUrls: ['app.component.scss'] 11 | }) 12 | export class AppComponent { 13 | constructor( 14 | private platform: Platform, 15 | private splashScreen: SplashScreen, 16 | private statusBar: StatusBar 17 | ) { 18 | this.initializeApp(); 19 | } 20 | 21 | initializeApp() { 22 | this.platform.ready().then(() => { 23 | this.statusBar.styleDefault(); 24 | this.splashScreen.hide(); 25 | }); 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /src/app/tab3/tab3.module.ts: -------------------------------------------------------------------------------- 1 | import { IonicModule } from '@ionic/angular'; 2 | import { RouterModule } from '@angular/router'; 3 | import { NgModule } from '@angular/core'; 4 | import { CommonModule } from '@angular/common'; 5 | import { FormsModule } from '@angular/forms'; 6 | import { Tab3Page } from './tab3.page'; 7 | 8 | import { Tab3PageRoutingModule } from './tab3-routing.module'; 9 | import { CoursePlayingPageModule } from '../course-playing/course-playing.module'; 10 | 11 | @NgModule({ 12 | imports: [ 13 | IonicModule, 14 | CommonModule, 15 | FormsModule, 16 | RouterModule.forChild([{ path: '', component: Tab3Page }]), 17 | Tab3PageRoutingModule, 18 | CoursePlayingPageModule, 19 | ], 20 | declarations: [Tab3Page] 21 | }) 22 | export class Tab3PageModule {} 23 | -------------------------------------------------------------------------------- /src/app/tabs/tabs.page.spec.ts: -------------------------------------------------------------------------------- 1 | import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; 2 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 3 | 4 | import { TabsPage } from './tabs.page'; 5 | 6 | describe('TabsPage', () => { 7 | let component: TabsPage; 8 | let fixture: ComponentFixture; 9 | 10 | beforeEach(async(() => { 11 | TestBed.configureTestingModule({ 12 | declarations: [TabsPage], 13 | schemas: [CUSTOM_ELEMENTS_SCHEMA], 14 | }).compileComponents(); 15 | })); 16 | 17 | beforeEach(() => { 18 | fixture = TestBed.createComponent(TabsPage); 19 | component = fixture.componentInstance; 20 | fixture.detectChanges(); 21 | }); 22 | 23 | it('should create', () => { 24 | expect(component).toBeTruthy(); 25 | }); 26 | }); 27 | -------------------------------------------------------------------------------- /src/app/course-detail/course-detail.page.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | import { IonicModule } from '@ionic/angular'; 3 | 4 | import { CourseDetailPage } from './course-detail.page'; 5 | 6 | describe('CourseDetailPage', () => { 7 | let component: CourseDetailPage; 8 | let fixture: ComponentFixture; 9 | 10 | beforeEach(async(() => { 11 | TestBed.configureTestingModule({ 12 | declarations: [ CourseDetailPage ], 13 | imports: [IonicModule.forRoot()] 14 | }).compileComponents(); 15 | 16 | fixture = TestBed.createComponent(CourseDetailPage); 17 | component = fixture.componentInstance; 18 | fixture.detectChanges(); 19 | })); 20 | 21 | it('should create', () => { 22 | expect(component).toBeTruthy(); 23 | }); 24 | }); 25 | -------------------------------------------------------------------------------- /src/app/course-playing/course-playing.page.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | import { IonicModule } from '@ionic/angular'; 3 | 4 | import { CoursePlayingPage } from './course-playing.page'; 5 | 6 | describe('CoursePlayingPage', () => { 7 | let component: CoursePlayingPage; 8 | let fixture: ComponentFixture; 9 | 10 | beforeEach(async(() => { 11 | TestBed.configureTestingModule({ 12 | declarations: [ CoursePlayingPage ], 13 | imports: [IonicModule.forRoot()] 14 | }).compileComponents(); 15 | 16 | fixture = TestBed.createComponent(CoursePlayingPage); 17 | component = fixture.componentInstance; 18 | fixture.detectChanges(); 19 | })); 20 | 21 | it('should create', () => { 22 | expect(component).toBeTruthy(); 23 | }); 24 | }); 25 | -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Ionic App 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /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.json') 25 | }); 26 | jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } })); 27 | } 28 | }; 29 | -------------------------------------------------------------------------------- /src/app/tab1/tab1.page.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | import { IonicModule } from '@ionic/angular'; 3 | import { ExploreContainerComponentModule } from '../explore-container/explore-container.module'; 4 | 5 | import { Tab1Page } from './tab1.page'; 6 | 7 | describe('Tab1Page', () => { 8 | let component: Tab1Page; 9 | let fixture: ComponentFixture; 10 | 11 | beforeEach(async(() => { 12 | TestBed.configureTestingModule({ 13 | declarations: [Tab1Page], 14 | imports: [IonicModule.forRoot(), ExploreContainerComponentModule] 15 | }).compileComponents(); 16 | 17 | fixture = TestBed.createComponent(Tab1Page); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | })); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /src/app/tab2/tab2.page.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | import { IonicModule } from '@ionic/angular'; 3 | import { ExploreContainerComponentModule } from '../explore-container/explore-container.module'; 4 | 5 | import { Tab2Page } from './tab2.page'; 6 | 7 | describe('Tab2Page', () => { 8 | let component: Tab2Page; 9 | let fixture: ComponentFixture; 10 | 11 | beforeEach(async(() => { 12 | TestBed.configureTestingModule({ 13 | declarations: [Tab2Page], 14 | imports: [IonicModule.forRoot(), ExploreContainerComponentModule] 15 | }).compileComponents(); 16 | 17 | fixture = TestBed.createComponent(Tab2Page); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | })); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /src/app/tab3/tab3.page.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | import { IonicModule } from '@ionic/angular'; 3 | import { ExploreContainerComponentModule } from '../explore-container/explore-container.module'; 4 | 5 | import { Tab3Page } from './tab3.page'; 6 | 7 | describe('Tab3Page', () => { 8 | let component: Tab3Page; 9 | let fixture: ComponentFixture; 10 | 11 | beforeEach(async(() => { 12 | TestBed.configureTestingModule({ 13 | declarations: [Tab3Page], 14 | imports: [IonicModule.forRoot(), ExploreContainerComponentModule] 15 | }).compileComponents(); 16 | 17 | fixture = TestBed.createComponent(Tab3Page); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | })); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { BrowserModule } from '@angular/platform-browser'; 3 | import { RouteReuseStrategy } from '@angular/router'; 4 | 5 | import { IonicModule, IonicRouteStrategy } from '@ionic/angular'; 6 | import { SplashScreen } from '@ionic-native/splash-screen/ngx'; 7 | import { StatusBar } from '@ionic-native/status-bar/ngx'; 8 | 9 | import { AppRoutingModule } from './app-routing.module'; 10 | import { AppComponent } from './app.component'; 11 | 12 | @NgModule({ 13 | declarations: [AppComponent], 14 | entryComponents: [], 15 | imports: [BrowserModule, IonicModule.forRoot({ mode: 'ios', backButtonText: '' }), AppRoutingModule], 16 | providers: [ 17 | StatusBar, 18 | SplashScreen, 19 | { provide: RouteReuseStrategy, useClass: IonicRouteStrategy } 20 | ], 21 | bootstrap: [AppComponent] 22 | }) 23 | export class AppModule {} 24 | -------------------------------------------------------------------------------- /src/app/course-playing/course-playing.page.scss: -------------------------------------------------------------------------------- 1 | .video-player { 2 | margin: 0 auto; 3 | height: 0; 4 | padding-top: 56.25%; // 16:9 ratio 5 | position: relative; 6 | 7 | .overlay-text { 8 | position: absolute; 9 | left: 0; 10 | top: 0; 11 | right: 0; 12 | bottom: 0; 13 | display: flex; 14 | justify-content: center; 15 | align-items: center; 16 | background-color: rgba(0,0,0,.2); 17 | } 18 | 19 | ion-icon { 20 | font-size: 60px; 21 | color: #fff; 22 | } 23 | } 24 | 25 | .list-header-custom { 26 | font-size: 13px; 27 | color: var(--ion-color-medium); 28 | } 29 | 30 | ion-icon { 31 | vertical-align: middle; 32 | 33 | & + ion-text { 34 | margin-left: 4px; 35 | } 36 | } 37 | 38 | .close-button { 39 | ion-fab-button { 40 | --background: rgba(0, 0, 0, .25); 41 | --padding-start: 8px; 42 | --padding-end: 8px; 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /src/app/tabs/tabs.page.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Featured 6 | 7 | 8 | 9 | 10 | Search 11 | 12 | 13 | 14 | 15 | My Courses 16 | 17 | 18 | 19 | 20 | Wishlist 21 | 22 | 23 | 24 | 25 | Account 26 | 27 | 28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /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', 'text-summary'], 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 | }; 32 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 Hieu Pham 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /src/app/tab3/tab3.page.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | My courses 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 |

User Experience Design Fundamentals

24 |

Peter Parker

25 |
26 | 27 |

80% completed

28 |
29 | 30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /src/assets/shapes.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/app/tab1/tab1.page.scss: -------------------------------------------------------------------------------- 1 | .featured-banner { 2 | height: 160px; 3 | position: relative; 4 | border-radius: 4px; 5 | margin-bottom: 16px; 6 | 7 | .card-caption { 8 | position: absolute; 9 | left: 0; 10 | bottom: 0; 11 | padding: 16px; 12 | color: #fff; 13 | font-size: 13px; 14 | } 15 | 16 | .banner-title { 17 | font-weight: 700; 18 | font-size: 17px; 19 | display: flex; 20 | } 21 | } 22 | 23 | .promo-banner { 24 | text-align: center; 25 | background-color: var(--ion-color-warning-shade); 26 | color: #fff; 27 | font-size: 13px; 28 | line-height: 20px; 29 | padding: 12px; 30 | border-radius: 4px; 31 | } 32 | 33 | .course-item { 34 | width: 240px; 35 | line-height: 1.6; 36 | white-space: pre-wrap; 37 | 38 | &.course-item-sm { 39 | width: 180px; 40 | } 41 | 42 | .bg-image { 43 | border-radius: 4px; 44 | margin-bottom: 8px; 45 | } 46 | } 47 | 48 | .rating { 49 | display: flex; 50 | justify-content: flex-start; 51 | align-items: center; 52 | font-size: 13px; 53 | color: var(--ion-color-medium); 54 | } 55 | 56 | .price { 57 | font-size: 20px; 58 | 59 | .price-old { 60 | color: var(--ion-color-medium); 61 | font-size: 13px; 62 | display: inline-block; 63 | text-decoration: line-through; 64 | } 65 | } 66 | -------------------------------------------------------------------------------- /src/app/tab4/tab4.page.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Wishlist 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |

Build a Business from scratch with no funding

15 |
16 | Tony Stark, Steve Roger 17 |
18 |
19 |
20 | 21 | 22 | 23 | 24 | 25 |
26 |
4.4
27 |
(102,864)
28 |
29 |
30 | $10.99 31 |
$169.99
32 |
33 | 34 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /src/app/tabs/tabs-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { RouterModule, Routes } from '@angular/router'; 3 | import { TabsPage } from './tabs.page'; 4 | 5 | const routes: Routes = [ 6 | { 7 | path: 'tabs', 8 | component: TabsPage, 9 | children: [ 10 | { 11 | path: 'tab1', 12 | loadChildren: () => import('../tab1/tab1.module').then(m => m.Tab1PageModule) 13 | }, 14 | { 15 | path: 'tab2', 16 | loadChildren: () => import('../tab2/tab2.module').then(m => m.Tab2PageModule) 17 | }, 18 | { 19 | path: 'tab3', 20 | loadChildren: () => import('../tab3/tab3.module').then(m => m.Tab3PageModule) 21 | }, 22 | { 23 | path: 'tab4', 24 | loadChildren: () => import('../tab4/tab4.module').then( m => m.Tab4PageModule) 25 | }, 26 | { 27 | path: 'tab5', 28 | loadChildren: () => import('../tab5/tab5.module').then( m => m.Tab5PageModule) 29 | }, 30 | { 31 | path: '', 32 | redirectTo: '/tabs/tab1', 33 | pathMatch: 'full' 34 | } 35 | ] 36 | }, 37 | { 38 | path: '', 39 | redirectTo: '/tabs/tab1', 40 | pathMatch: 'full' 41 | } 42 | ]; 43 | 44 | @NgModule({ 45 | imports: [RouterModule.forChild(routes)], 46 | exports: [RouterModule] 47 | }) 48 | export class TabsPageRoutingModule {} 49 | -------------------------------------------------------------------------------- /src/global.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * App Global CSS 3 | * ---------------------------------------------------------------------------- 4 | * Put style rules here that you want to apply globally. These styles are for 5 | * the entire app and not just one component. Additionally, this file can be 6 | * used as an entry point to import other CSS/Sass files to be included in the 7 | * output CSS. 8 | * For more information on global stylesheets, visit the documentation: 9 | * https://ionicframework.com/docs/layout/global-stylesheets 10 | */ 11 | 12 | /* Core CSS required for Ionic components to work properly */ 13 | @import "~@ionic/angular/css/core.css"; 14 | 15 | /* Basic CSS for apps built with Ionic */ 16 | @import "~@ionic/angular/css/normalize.css"; 17 | @import "~@ionic/angular/css/structure.css"; 18 | @import "~@ionic/angular/css/typography.css"; 19 | @import '~@ionic/angular/css/display.css'; 20 | 21 | /* Optional CSS utils that can be commented out */ 22 | @import "~@ionic/angular/css/padding.css"; 23 | @import "~@ionic/angular/css/float-elements.css"; 24 | @import "~@ionic/angular/css/text-alignment.css"; 25 | @import "~@ionic/angular/css/text-transformation.css"; 26 | @import "~@ionic/angular/css/flex-utils.css"; 27 | 28 | /* Custom CSS */ 29 | @import './sass/variables.override.scss'; 30 | @import './sass/scrollHorizontal.scss'; 31 | @import './sass/fonts.scss'; 32 | @import './sass/app.scss'; 33 | -------------------------------------------------------------------------------- /src/sass/variables.override.scss: -------------------------------------------------------------------------------- 1 | /** 2 | Generate your color at the official Ionic Color Generator 3 | https://ionicframework.com/docs/theming/color-generator 4 | */ 5 | 6 | :root { 7 | /** primary **/ 8 | --ion-color-primary: #ec5252; 9 | --ion-color-primary-rgb: 236,82,82; 10 | --ion-color-primary-contrast: #ffffff; 11 | --ion-color-primary-contrast-rgb: 0,0,0; 12 | --ion-color-primary-shade: #d04848; 13 | --ion-color-primary-tint: #ee6363; 14 | 15 | /** secondary **/ 16 | --ion-color-secondary: #35748e; 17 | --ion-color-secondary-rgb: 53,116,142; 18 | --ion-color-secondary-contrast: #ffffff; 19 | --ion-color-secondary-contrast-rgb: 255,255,255; 20 | --ion-color-secondary-shade: #2f667d; 21 | --ion-color-secondary-tint: #498299; 22 | 23 | /** white **/ 24 | --ion-color-white: #ffffff; 25 | --ion-color-white-rgb: 255,255,255; 26 | --ion-color-white-contrast: #000000; 27 | --ion-color-white-contrast-rgb: 0,0,0; 28 | --ion-color-white-shade: #e0e0e0; 29 | --ion-color-white-tint: #ffffff; 30 | 31 | /** GENERAL **/ 32 | --ion-text-color: #333333; 33 | --ion-background-color: #ffffff; 34 | } 35 | 36 | .ion-color-white { 37 | --ion-color-base: var(--ion-color-white); 38 | --ion-color-base-rgb: var(--ion-color-white-rgb); 39 | --ion-color-contrast: var(--ion-color-white-contrast); 40 | --ion-color-contrast-rgb: var(--ion-color-white-contrast-rgb); 41 | --ion-color-shade: var(--ion-color-white-shade); 42 | --ion-color-tint: var(--ion-color-white-tint); 43 | } 44 | -------------------------------------------------------------------------------- /src/app/course-detail/course-detail.page.scss: -------------------------------------------------------------------------------- 1 | .cover-background { 2 | --top: calc(var(--ion-safe-area-top) + var(--offset-top)); 3 | color: #fff; 4 | height: auto; 5 | position: relative; 6 | top: calc(-1 * var(--top)); 7 | margin-bottom: calc(-1 * var(--top) + 80px); 8 | padding-top: var(--top); 9 | padding-bottom: 96px; 10 | } 11 | .course-title-lg { 12 | font-size: 32px; 13 | letter-spacing: -1px; 14 | } 15 | 16 | ion-badge { 17 | padding: 9px 14px; 18 | vertical-align: middle; 19 | } 20 | 21 | .video-wrapper { 22 | position: absolute; 23 | left: 50%; 24 | bottom: -80px; 25 | transform: translate(-50%, 0); 26 | } 27 | 28 | .video-thumbnail { 29 | border-radius: 4px; 30 | margin: 0 auto; 31 | width: 300px; 32 | height: 160px; 33 | position: relative; 34 | 35 | .overlay-text { 36 | position: absolute; 37 | left: 0; 38 | top: 0; 39 | right: 0; 40 | bottom: 0; 41 | display: flex; 42 | justify-content: center; 43 | align-items: center; 44 | } 45 | 46 | ion-icon { 47 | font-size: 60px; 48 | color: #fff; 49 | } 50 | } 51 | 52 | ion-icon { 53 | vertical-align: middle; 54 | } 55 | 56 | .price { 57 | font-size: 28px; 58 | font-weight: 700; 59 | 60 | .price-old { 61 | font-weight: 400; 62 | color: var(--ion-color-medium); 63 | font-size: 0.6em; 64 | display: inline-block; 65 | text-decoration: line-through; 66 | } 67 | } 68 | 69 | ion-card { 70 | box-shadow: none; 71 | border-radius: 4px; 72 | margin-top: 0; 73 | --color: var(--ion-text-color); 74 | } 75 | -------------------------------------------------------------------------------- /src/app/app.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; 2 | import { TestBed, async } from '@angular/core/testing'; 3 | 4 | import { Platform } from '@ionic/angular'; 5 | import { SplashScreen } from '@ionic-native/splash-screen/ngx'; 6 | import { StatusBar } from '@ionic-native/status-bar/ngx'; 7 | 8 | import { AppComponent } from './app.component'; 9 | 10 | describe('AppComponent', () => { 11 | 12 | let statusBarSpy, splashScreenSpy, platformReadySpy, platformSpy; 13 | 14 | beforeEach(async(() => { 15 | statusBarSpy = jasmine.createSpyObj('StatusBar', ['styleDefault']); 16 | splashScreenSpy = jasmine.createSpyObj('SplashScreen', ['hide']); 17 | platformReadySpy = Promise.resolve(); 18 | platformSpy = jasmine.createSpyObj('Platform', { ready: platformReadySpy }); 19 | 20 | TestBed.configureTestingModule({ 21 | declarations: [AppComponent], 22 | schemas: [CUSTOM_ELEMENTS_SCHEMA], 23 | providers: [ 24 | { provide: StatusBar, useValue: statusBarSpy }, 25 | { provide: SplashScreen, useValue: splashScreenSpy }, 26 | { provide: Platform, useValue: platformSpy }, 27 | ], 28 | }).compileComponents(); 29 | })); 30 | 31 | it('should create the app', () => { 32 | const fixture = TestBed.createComponent(AppComponent); 33 | const app = fixture.debugElement.componentInstance; 34 | expect(app).toBeTruthy(); 35 | }); 36 | 37 | it('should initialize the app', async () => { 38 | TestBed.createComponent(AppComponent); 39 | expect(platformSpy.ready).toHaveBeenCalled(); 40 | await platformReadySpy; 41 | expect(statusBarSpy.styleDefault).toHaveBeenCalled(); 42 | expect(splashScreenSpy.hide).toHaveBeenCalled(); 43 | }); 44 | 45 | // TODO: add more tests! 46 | 47 | }); 48 | -------------------------------------------------------------------------------- /src/app/tab5/tab5.page.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Account 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 |

Hieu Pham

13 | 14 | Become an instructor 15 | 16 |
17 | 18 | 19 | 20 | 21 | Video preferences 22 | 23 | 24 | 25 | Download options 26 | 27 | 28 | Video playback options 29 | 30 | 31 | Your downloaded courses 32 | 33 | 34 | 35 | 36 | Account settings 37 | 38 | 39 | 40 | Account security 41 | 42 | 43 | Email notifications 44 | 45 | 46 | Learning reminders 47 | 48 | 49 | 50 | 51 | 52 | 53 | Visit Take That Design 54 | 55 | 56 | 57 | 58 | 59 | 60 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ionic-udemy", 3 | "version": "0.0.1", 4 | "author": "Ionic Framework", 5 | "homepage": "https://ionicframework.com/", 6 | "scripts": { 7 | "ng": "ng", 8 | "start": "ng serve", 9 | "build": "ng build", 10 | "test": "ng test", 11 | "lint": "ng lint", 12 | "e2e": "ng e2e", 13 | "resources": "capacitor-resources -p android,ios", 14 | "gh-pages": "ng build --base-href \"https://mrhieu.github.io/ionic-udemy/\" --prod && npx angular-cli-ghpages --dir=www" 15 | }, 16 | "private": true, 17 | "dependencies": { 18 | "@angular/common": "~9.1.6", 19 | "@angular/core": "~9.1.6", 20 | "@angular/forms": "~9.1.6", 21 | "@angular/platform-browser": "~9.1.6", 22 | "@angular/platform-browser-dynamic": "~9.1.6", 23 | "@angular/router": "~9.1.6", 24 | "@capacitor/core": "2.2.0", 25 | "@capacitor/ios": "^2.2.0", 26 | "@ionic-native/core": "^5.0.7", 27 | "@ionic-native/splash-screen": "^5.0.0", 28 | "@ionic-native/status-bar": "^5.0.0", 29 | "@ionic/angular": "^5.0.0", 30 | "rxjs": "~6.5.1", 31 | "tslib": "^1.10.0", 32 | "zone.js": "~0.10.2" 33 | }, 34 | "devDependencies": { 35 | "@angular-devkit/build-angular": "~0.901.5", 36 | "@angular/cli": "~9.1.5", 37 | "@angular/compiler": "~9.1.6", 38 | "@angular/compiler-cli": "~9.1.6", 39 | "@angular/language-service": "~9.1.6", 40 | "@capacitor/cli": "2.2.0", 41 | "@ionic/angular-toolkit": "^2.1.1", 42 | "@types/jasmine": "~3.5.0", 43 | "@types/jasminewd2": "~2.0.3", 44 | "@types/node": "^12.11.1", 45 | "capacitor-resources": "^2.0.3", 46 | "codelyzer": "^5.1.2", 47 | "jasmine-core": "~3.5.0", 48 | "jasmine-spec-reporter": "~4.2.1", 49 | "karma": "~5.0.0", 50 | "karma-chrome-launcher": "~3.1.0", 51 | "karma-coverage-istanbul-reporter": "~2.1.0", 52 | "karma-jasmine": "~3.0.1", 53 | "karma-jasmine-html-reporter": "^1.4.2", 54 | "protractor": "~5.4.3", 55 | "ts-node": "~8.3.0", 56 | "tslint": "~6.1.0", 57 | "typescript": "~3.8.3" 58 | }, 59 | "description": "An Ionic project" 60 | } 61 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Ionic 5 Udemy 2 | 3 | [View on Github](https://github.com/mrhieu/ionic-udemy) 4 | 5 | [Demo](https://mrhieu.github.io/ionic-udemy/) 6 | 7 | ![Simulator Screen Shot - iPhone SE (2nd generation) - 2020-06-21 at 18 50 49](https://user-images.githubusercontent.com/1593560/85222928-4c7d6d00-b3f1-11ea-9804-d149c7a59671.png) 8 | 9 | 10 | 11 | ## Setup 12 | 13 | Clone or download this project. 14 | 15 | Install Ionic CLI 16 | 17 | ``` 18 | $ npm install -g @ionic/cli 19 | ``` 20 | 21 | Install dependencies 22 | 23 | ``` 24 | $ cd 25 | $ npm install 26 | ``` 27 | 28 | Run the app on Localhost 29 | 30 | ``` 31 | $ ionic serve 32 | ``` 33 | 34 | ## FAQ 35 | ### What is this? 36 | - A FREE Ionic (5) template from my Project **[#100ions](https://www.takethatdesign.com/100ions/)**. I aim to release 100 Free Templates written using Ionic Framework (5). See all of them at [https://www.takethatdesign.com/100ions/](https://www.takethatdesign.com/100ions/) 37 | 38 | 39 | ### What do I get? 40 | - A basic template that contains about 5 screens (for themes) or a feature demo (for plugins, services) 41 | 42 | 43 | ### What are the differences from your paid products? 44 | - (Many) more screens 45 | - More detailed and pixel-perfect in terms of colors, typography, spacing, sizing, animation effects,... 46 | - Better organized in components and services, highly reusable 47 | - Dark theme 48 | - Support and consultation services 49 | 50 | 51 | ### Why are you doing this? (giving your time and effort for free?) 52 | - I've been working with Ionic as my weekend projects for 4+ years (since Ionic 1). I can't tell you enough how much I love creating themes with Ionic 53 | - I want to set examples and share my best practices of Ionic development to people who are new to this exciting technology 54 | - And more: [https://www.takethatdesign.com/about/](https://www.takethatdesign.com/about/) 55 | 56 | 57 | Learn more about Ionic Framework at [Get started with Ionic](https://ionicframework.com/getting-started/) 58 | 59 | See more Ionic templates at [Take That Design](https://takethatdesign.com) 60 | 61 | [Buy me a drink ☕️ ?](https://www.paypal.me/mrhieu) 62 | -------------------------------------------------------------------------------- /src/theme/variables.scss: -------------------------------------------------------------------------------- 1 | // Ionic Variables and Theming. For more info, please see: 2 | // http://ionicframework.com/docs/theming/ 3 | 4 | /** Ionic CSS Variables **/ 5 | :root { 6 | /** primary **/ 7 | --ion-color-primary: #3880ff; 8 | --ion-color-primary-rgb: 56, 128, 255; 9 | --ion-color-primary-contrast: #ffffff; 10 | --ion-color-primary-contrast-rgb: 255, 255, 255; 11 | --ion-color-primary-shade: #3171e0; 12 | --ion-color-primary-tint: #4c8dff; 13 | 14 | /** secondary **/ 15 | --ion-color-secondary: #3dc2ff; 16 | --ion-color-secondary-rgb: 61, 194, 255; 17 | --ion-color-secondary-contrast: #ffffff; 18 | --ion-color-secondary-contrast-rgb: 255, 255, 255; 19 | --ion-color-secondary-shade: #36abe0; 20 | --ion-color-secondary-tint: #50c8ff; 21 | 22 | /** tertiary **/ 23 | --ion-color-tertiary: #5260ff; 24 | --ion-color-tertiary-rgb: 82, 96, 255; 25 | --ion-color-tertiary-contrast: #ffffff; 26 | --ion-color-tertiary-contrast-rgb: 255, 255, 255; 27 | --ion-color-tertiary-shade: #4854e0; 28 | --ion-color-tertiary-tint: #6370ff; 29 | 30 | /** success **/ 31 | --ion-color-success: #2dd36f; 32 | --ion-color-success-rgb: 45, 211, 111; 33 | --ion-color-success-contrast: #ffffff; 34 | --ion-color-success-contrast-rgb: 255, 255, 255; 35 | --ion-color-success-shade: #28ba62; 36 | --ion-color-success-tint: #42d77d; 37 | 38 | /** warning **/ 39 | --ion-color-warning: #ffc409; 40 | --ion-color-warning-rgb: 255, 196, 9; 41 | --ion-color-warning-contrast: #000000; 42 | --ion-color-warning-contrast-rgb: 0, 0, 0; 43 | --ion-color-warning-shade: #e0ac08; 44 | --ion-color-warning-tint: #ffca22; 45 | 46 | /** danger **/ 47 | --ion-color-danger: #eb445a; 48 | --ion-color-danger-rgb: 235, 68, 90; 49 | --ion-color-danger-contrast: #ffffff; 50 | --ion-color-danger-contrast-rgb: 255, 255, 255; 51 | --ion-color-danger-shade: #cf3c4f; 52 | --ion-color-danger-tint: #ed576b; 53 | 54 | /** dark **/ 55 | --ion-color-dark: #222428; 56 | --ion-color-dark-rgb: 34, 36, 40; 57 | --ion-color-dark-contrast: #ffffff; 58 | --ion-color-dark-contrast-rgb: 255, 255, 255; 59 | --ion-color-dark-shade: #1e2023; 60 | --ion-color-dark-tint: #383a3e; 61 | 62 | /** medium **/ 63 | --ion-color-medium: #92949c; 64 | --ion-color-medium-rgb: 146, 148, 156; 65 | --ion-color-medium-contrast: #ffffff; 66 | --ion-color-medium-contrast-rgb: 255, 255, 255; 67 | --ion-color-medium-shade: #808289; 68 | --ion-color-medium-tint: #9d9fa6; 69 | 70 | /** light **/ 71 | --ion-color-light: #f4f5f8; 72 | --ion-color-light-rgb: 244, 245, 248; 73 | --ion-color-light-contrast: #000000; 74 | --ion-color-light-contrast-rgb: 0, 0, 0; 75 | --ion-color-light-shade: #d7d8da; 76 | --ion-color-light-tint: #f5f6f9; 77 | } 78 | -------------------------------------------------------------------------------- /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/guide/browser-support 15 | */ 16 | 17 | /*************************************************************************************************** 18 | * BROWSER POLYFILLS 19 | */ 20 | 21 | /** IE10 and IE11 requires the following for NgClass support on SVG elements */ 22 | // import 'classlist.js'; // Run `npm install --save classlist.js`. 23 | 24 | /** 25 | * Web Animations `@angular/platform-browser/animations` 26 | * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari. 27 | * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0). 28 | */ 29 | // import 'web-animations-js'; // Run `npm install --save web-animations-js`. 30 | 31 | /** 32 | * By default, zone.js will patch all possible macroTask and DomEvents 33 | * user can disable parts of macroTask/DomEvents patch by setting following flags 34 | * because those flags need to be set before `zone.js` being loaded, and webpack 35 | * will put import in the top of bundle, so user need to create a separate file 36 | * in this directory (for example: zone-flags.ts), and put the following flags 37 | * into that file, and then add the following code before importing zone.js. 38 | * import './zone-flags.ts'; 39 | * 40 | * The flags allowed in zone-flags.ts are listed here. 41 | * 42 | * The following flags will work for all browsers. 43 | * 44 | * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame 45 | * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick 46 | * (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames 47 | * 48 | * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js 49 | * with the following flag, it will bypass `zone.js` patch for IE/Edge 50 | * 51 | * (window as any).__Zone_enable_cross_context_check = true; 52 | * 53 | */ 54 | 55 | import './zone-flags'; 56 | 57 | /*************************************************************************************************** 58 | * Zone JS is required by default for Angular itself. 59 | */ 60 | 61 | import 'zone.js/dist/zone'; // Included with Angular CLI. 62 | 63 | 64 | /*************************************************************************************************** 65 | * APPLICATION IMPORTS 66 | */ 67 | -------------------------------------------------------------------------------- /src/app/course-playing/course-playing.page.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 |
14 | 15 |
16 |
17 | 18 |
19 |

20 | User Experience Introduction 1 21 |

22 |

Tony Stark

23 |
24 | 25 | 26 | 27 | 28 | Section 1 - Introduction 29 | 30 | 31 | 32 | 33 |
34 | {{i}} 35 |
36 | 37 |

38 | 39 | User Experience Introduction {{i}} 40 |

41 |

Video - 04:21 mins remaining

42 | 43 | 44 | 45 | 46 | 47 | 48 | Section 2 - Dive into UX Design 49 | 50 | 51 | 52 | 53 |
54 | {{i}} 55 |
56 | 57 |

58 | 59 | The Elements of User Experience {{i}} 60 |

61 |

Video - 04:21 mins remaining

62 | 63 | 64 | 65 | 66 | 67 | 68 | Section 3 - User Research 69 | 70 | 71 | 72 | 73 |
74 | {{i}} 75 |
76 | 77 |

78 | 79 | User Research {{i}} 80 |

81 |

Video - 04:21 mins remaining

82 | 83 | 84 | 85 | 86 | 87 | -------------------------------------------------------------------------------- /src/app/tab2/tab2.page.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 |

Discover Courses

10 |

11 | Try discovering new courses with search or browse our categories 12 |

13 |
14 | 15 |
16 | 17 | 18 | Top searches 19 | 20 | 21 |
22 | 23 | Python 24 | 25 | 26 | Javascript 27 | 28 | 29 | Excel 30 | 31 | 32 | AWS 33 | 34 | 35 | Photoshop 36 | 37 | 38 | Wordpress 39 | 40 | 41 | C# 42 | 43 |
44 |
45 | 46 | 47 | 48 | 49 | Browse categories 50 | 51 | 52 | 53 | 54 | Business 55 | 56 | 57 | 58 | Design 59 | 60 | 61 | 62 | Finance & Accounting 63 | 64 | 65 | 66 | Development 67 | 68 | 69 | 70 | IT & Software 71 | 72 | 73 | 74 | Office Productivity 75 | 76 | 77 | 78 | Personal Development 79 | 80 | 81 | 82 | Marketing 83 | 84 | 85 | 86 | 87 | -------------------------------------------------------------------------------- /tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "tslint:recommended", 3 | "rules": { 4 | "align": { 5 | "options": [ 6 | "parameters", 7 | "statements" 8 | ] 9 | }, 10 | "array-type": false, 11 | "arrow-return-shorthand": true, 12 | "curly": true, 13 | "deprecation": { 14 | "severity": "warning" 15 | }, 16 | "component-class-suffix": [true, "Page", "Component"], 17 | "contextual-lifecycle": true, 18 | "directive-class-suffix": true, 19 | "directive-selector": [ 20 | true, 21 | "attribute", 22 | "app", 23 | "camelCase" 24 | ], 25 | "component-selector": [ 26 | true, 27 | "element", 28 | "app", 29 | "kebab-case" 30 | ], 31 | "eofline": true, 32 | "import-blacklist": [ 33 | true, 34 | "rxjs/Rx" 35 | ], 36 | "import-spacing": true, 37 | "indent": { 38 | "options": [ 39 | "spaces" 40 | ] 41 | }, 42 | "max-classes-per-file": false, 43 | "max-line-length": [ 44 | true, 45 | 140 46 | ], 47 | "member-ordering": [ 48 | true, 49 | { 50 | "order": [ 51 | "static-field", 52 | "instance-field", 53 | "static-method", 54 | "instance-method" 55 | ] 56 | } 57 | ], 58 | "no-console": [ 59 | true, 60 | "debug", 61 | "info", 62 | "time", 63 | "timeEnd", 64 | "trace" 65 | ], 66 | "no-empty": false, 67 | "no-inferrable-types": [ 68 | true, 69 | "ignore-params" 70 | ], 71 | "no-non-null-assertion": true, 72 | "no-redundant-jsdoc": true, 73 | "no-switch-case-fall-through": true, 74 | "no-var-requires": false, 75 | "object-literal-key-quotes": [ 76 | true, 77 | "as-needed" 78 | ], 79 | "quotemark": [ 80 | true, 81 | "single" 82 | ], 83 | "semicolon": { 84 | "options": [ 85 | "always" 86 | ] 87 | }, 88 | "space-before-function-paren": { 89 | "options": { 90 | "anonymous": "never", 91 | "asyncArrow": "always", 92 | "constructor": "never", 93 | "method": "never", 94 | "named": "never" 95 | } 96 | }, 97 | "typedef-whitespace": { 98 | "options": [ 99 | { 100 | "call-signature": "nospace", 101 | "index-signature": "nospace", 102 | "parameter": "nospace", 103 | "property-declaration": "nospace", 104 | "variable-declaration": "nospace" 105 | }, 106 | { 107 | "call-signature": "onespace", 108 | "index-signature": "onespace", 109 | "parameter": "onespace", 110 | "property-declaration": "onespace", 111 | "variable-declaration": "onespace" 112 | } 113 | ] 114 | }, 115 | "variable-name": { 116 | "options": [ 117 | "ban-keywords", 118 | "check-format", 119 | "allow-pascal-case" 120 | ] 121 | }, 122 | "whitespace": { 123 | "options": [ 124 | "check-branch", 125 | "check-decl", 126 | "check-operator", 127 | "check-separator", 128 | "check-type", 129 | "check-typecast" 130 | ] 131 | }, 132 | "no-conflicting-lifecycle": true, 133 | "no-host-metadata-property": true, 134 | "no-input-rename": true, 135 | "no-inputs-metadata-property": true, 136 | "no-output-native": true, 137 | "no-output-on-prefix": true, 138 | "no-output-rename": true, 139 | "no-outputs-metadata-property": true, 140 | "template-banana-in-box": true, 141 | "template-no-negated-async": true, 142 | "use-lifecycle-interface": true, 143 | "use-pipe-transform-interface": true, 144 | "object-literal-sort-keys": false 145 | }, 146 | "rulesDirectory": [ 147 | "codelyzer" 148 | ] 149 | } -------------------------------------------------------------------------------- /src/app/tab1/tab1.page.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |
7 |
8 | 9 |
Skills for your tomorrow up to 60% off
10 |
11 |
12 | 13 |
14 |
15 | Courses up to 60% off | Last day! 16 |
17 | Ends in 14h 7m 0s 18 |
19 | 20 |
21 | 22 | 23 | Featured 24 | 25 | 26 | SEE ALL 27 | 28 | 29 |
30 |
31 |
32 |
33 |
34 | The Complete Digital Marketing Course - 12 Courses in 1 35 |
36 |
37 | Tony Stark, Steve Roger 38 |
39 |
40 |
41 | 42 | 43 | 44 | 45 | 46 |
47 |
4.4
48 |
(102,864)
49 |
50 |
51 | $10.99 52 |
$169.99
53 |
54 |
55 |
56 |
57 |
58 | 59 |
60 | 61 | 62 | Categories 63 | 64 | 65 | SEE ALL 66 | 67 | 68 |
69 | 70 | 71 | Business 72 | 73 |
74 |
75 | 76 |
77 | 78 | 79 | Newest courses in English Language 80 | 81 | 82 |
83 |
84 |
85 |
86 |
87 | The Complete Digital Marketing Course - 12 Courses in 1 88 |
89 |
90 | Tony Stark, Steve Roger 91 |
92 |
93 |
94 | 95 | 96 | 97 | 98 | 99 |
100 |
4.4
101 |
(102,864)
102 |
103 |
104 | $10.99 105 |
$169.99
106 |
107 |
108 |
109 |
110 |
111 | 112 | -------------------------------------------------------------------------------- /src/app/course-detail/course-detail.page.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Master Digital Product Design: UX/UI Design 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 |
Master Digital Product Design: UX/UI Design
20 | 21 | 22 | 23 | 24 |

25 | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt 26 |

27 | 28 |
29 | Bestseller 30 | 31 | 32 | 33 | 4.5 34 | 35 | 36 | 37 | 4,940 Enrolled 38 | 39 | 40 | 41 | 15 hours, 30 minutes 42 | 43 | 44 | Created by Hawk-Eye 45 | 46 | 47 | Updated Jun 21 2020 48 | 49 | 50 | CC, English [Auto-generated] 51 | 52 |
53 | 54 |
55 |
56 |
57 | 58 |
59 |
60 |
61 |
62 | 63 |
64 |
65 |
66 | $10.99 67 |
$169.99
68 |
69 |
70 | 71 | 94% off - 14 hours left at this price 72 |
73 |
74 | 75 |
76 | 77 | Buy Now 78 | 79 | 80 | Add to Wishlist 81 | 82 |
83 |
84 | 85 | 86 | 87 | This course includes 88 | 89 | 90 | 91 | 92 |

93 | 15 hours, 30 minutes video 94 |

95 | 96 | 97 | 98 | 99 | 100 |

101 | 25 Support Files 102 |

103 | 104 | 105 | 106 | 107 | 108 |

109 | Full lifetime access 110 |

111 | 112 | 113 | 114 | 115 | 116 |

117 | Access on mobile, desktop, TV 118 |

119 | 120 | 121 | 122 | 123 | 124 |

125 | Certificate of Completion 126 |

127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | Description 136 |

137 | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 138 |

139 | 140 | 141 | 142 | 143 | -------------------------------------------------------------------------------- /angular.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "./node_modules/@angular/cli/lib/config/schema.json", 3 | "version": 1, 4 | "defaultProject": "app", 5 | "newProjectRoot": "projects", 6 | "projects": { 7 | "app": { 8 | "root": "", 9 | "sourceRoot": "src", 10 | "projectType": "application", 11 | "prefix": "app", 12 | "schematics": {}, 13 | "architect": { 14 | "build": { 15 | "builder": "@angular-devkit/build-angular:browser", 16 | "options": { 17 | "outputPath": "www", 18 | "index": "src/index.html", 19 | "main": "src/main.ts", 20 | "polyfills": "src/polyfills.ts", 21 | "tsConfig": "tsconfig.app.json", 22 | "assets": [ 23 | { 24 | "glob": "**/*", 25 | "input": "src/assets", 26 | "output": "assets" 27 | }, 28 | { 29 | "glob": "**/*.svg", 30 | "input": "node_modules/ionicons/dist/ionicons/svg", 31 | "output": "./svg" 32 | } 33 | ], 34 | "styles": [ 35 | { 36 | "input": "src/theme/variables.scss" 37 | }, 38 | { 39 | "input": "src/global.scss" 40 | } 41 | ], 42 | "scripts": [] 43 | }, 44 | "configurations": { 45 | "production": { 46 | "fileReplacements": [ 47 | { 48 | "replace": "src/environments/environment.ts", 49 | "with": "src/environments/environment.prod.ts" 50 | } 51 | ], 52 | "optimization": true, 53 | "outputHashing": "all", 54 | "sourceMap": false, 55 | "extractCss": true, 56 | "namedChunks": false, 57 | "aot": true, 58 | "extractLicenses": true, 59 | "vendorChunk": false, 60 | "buildOptimizer": true, 61 | "budgets": [ 62 | { 63 | "type": "initial", 64 | "maximumWarning": "2mb", 65 | "maximumError": "5mb" 66 | } 67 | ] 68 | }, 69 | "ci": { 70 | "progress": false 71 | } 72 | } 73 | }, 74 | "serve": { 75 | "builder": "@angular-devkit/build-angular:dev-server", 76 | "options": { 77 | "browserTarget": "app:build" 78 | }, 79 | "configurations": { 80 | "production": { 81 | "browserTarget": "app:build:production" 82 | }, 83 | "ci": { 84 | "progress": false 85 | } 86 | } 87 | }, 88 | "extract-i18n": { 89 | "builder": "@angular-devkit/build-angular:extract-i18n", 90 | "options": { 91 | "browserTarget": "app:build" 92 | } 93 | }, 94 | "test": { 95 | "builder": "@angular-devkit/build-angular:karma", 96 | "options": { 97 | "main": "src/test.ts", 98 | "polyfills": "src/polyfills.ts", 99 | "tsConfig": "tsconfig.spec.json", 100 | "karmaConfig": "karma.conf.js", 101 | "styles": [], 102 | "scripts": [], 103 | "assets": [ 104 | { 105 | "glob": "favicon.ico", 106 | "input": "src/", 107 | "output": "/" 108 | }, 109 | { 110 | "glob": "**/*", 111 | "input": "src/assets", 112 | "output": "/assets" 113 | } 114 | ] 115 | }, 116 | "configurations": { 117 | "ci": { 118 | "progress": false, 119 | "watch": false 120 | } 121 | } 122 | }, 123 | "lint": { 124 | "builder": "@angular-devkit/build-angular:tslint", 125 | "options": { 126 | "tsConfig": [ 127 | "tsconfig.app.json", 128 | "tsconfig.spec.json", 129 | "e2e/tsconfig.json" 130 | ], 131 | "exclude": ["**/node_modules/**"] 132 | } 133 | }, 134 | "e2e": { 135 | "builder": "@angular-devkit/build-angular:protractor", 136 | "options": { 137 | "protractorConfig": "e2e/protractor.conf.js", 138 | "devServerTarget": "app:serve" 139 | }, 140 | "configurations": { 141 | "production": { 142 | "devServerTarget": "app:serve:production" 143 | }, 144 | "ci": { 145 | "devServerTarget": "app:serve:ci" 146 | } 147 | } 148 | }, 149 | "ionic-cordova-build": { 150 | "builder": "@ionic/angular-toolkit:cordova-build", 151 | "options": { 152 | "browserTarget": "app:build" 153 | }, 154 | "configurations": { 155 | "production": { 156 | "browserTarget": "app:build:production" 157 | } 158 | } 159 | }, 160 | "ionic-cordova-serve": { 161 | "builder": "@ionic/angular-toolkit:cordova-serve", 162 | "options": { 163 | "cordovaBuildTarget": "app:ionic-cordova-build", 164 | "devServerTarget": "app:serve" 165 | }, 166 | "configurations": { 167 | "production": { 168 | "cordovaBuildTarget": "app:ionic-cordova-build:production", 169 | "devServerTarget": "app:serve:production" 170 | } 171 | } 172 | } 173 | } 174 | } 175 | }, 176 | "cli": { 177 | "defaultCollection": "@ionic/angular-toolkit" 178 | }, 179 | "schematics": { 180 | "@ionic/angular-toolkit:component": { 181 | "styleext": "scss" 182 | }, 183 | "@ionic/angular-toolkit:page": { 184 | "styleext": "scss" 185 | } 186 | } 187 | } 188 | --------------------------------------------------------------------------------