├── src ├── assets │ └── .gitkeep ├── app │ ├── common │ │ ├── slider │ │ │ ├── slider.component.scss │ │ │ ├── slider.component.html │ │ │ ├── slider.component.spec.ts │ │ │ └── slider.component.ts │ │ ├── footer │ │ │ ├── footer.component.ts │ │ │ ├── footer.component.scss │ │ │ ├── footer.component.spec.ts │ │ │ └── footer.component.html │ │ ├── sidenav │ │ │ ├── sidenav.component.scss │ │ │ ├── sidenav.component.spec.ts │ │ │ ├── sidenav.component.ts │ │ │ └── sidenav.component.html │ │ └── header │ │ │ ├── header.component.spec.ts │ │ │ ├── header.component.ts │ │ │ ├── header.component.html │ │ │ └── header.component.scss │ ├── myprofile │ │ ├── wishlist │ │ │ ├── wishlist.component.scss │ │ │ ├── wishlist.component.html │ │ │ ├── wishlist.component.ts │ │ │ └── wishlist.component.spec.ts │ │ ├── notifications │ │ │ ├── notifications.component.scss │ │ │ ├── notifications.component.html │ │ │ ├── notifications.component.ts │ │ │ └── notifications.component.spec.ts │ │ ├── reviews-rating │ │ │ ├── reviews-rating.component.scss │ │ │ ├── reviews-rating.component.html │ │ │ ├── reviews-rating.component.ts │ │ │ └── reviews-rating.component.spec.ts │ │ ├── my-rewards │ │ │ ├── my-rewards.component.scss │ │ │ ├── my-rewards.component.html │ │ │ ├── my-rewards.component.ts │ │ │ └── my-rewards.component.spec.ts │ │ ├── profile-information │ │ │ ├── profile-information.component.scss │ │ │ ├── profile-information.component.ts │ │ │ ├── profile-information.component.spec.ts │ │ │ └── profile-information.component.html │ │ ├── myprofile.component.ts │ │ ├── saved-cards │ │ │ ├── saved-cards.component.scss │ │ │ ├── saved-cards.component.ts │ │ │ ├── saved-cards.component.spec.ts │ │ │ └── saved-cards.component.html │ │ ├── manage-address │ │ │ ├── manage-address.component.scss │ │ │ ├── manage-address.component.ts │ │ │ ├── manage-address.component.spec.ts │ │ │ └── manage-address.component.html │ │ ├── myprofile.component.spec.ts │ │ ├── shopping-cart │ │ │ ├── shopping-cart.component.spec.ts │ │ │ ├── shopping-cart.component.ts │ │ │ ├── shopping-cart.component.scss │ │ │ └── shopping-cart.component.html │ │ ├── myprofile.component.scss │ │ └── myprofile.component.html │ ├── interfaces │ │ └── Ilogin.ts │ ├── login │ │ ├── login.component.scss │ │ ├── login.component.spec.ts │ │ ├── login.component.html │ │ └── login.component.ts │ ├── services │ │ ├── loading.service.ts │ │ ├── login.service.spec.ts │ │ ├── loading.service.spec.ts │ │ ├── product.service.spec.ts │ │ ├── login.service.ts │ │ ├── auth-service.ts │ │ └── product.service.ts │ ├── app.component.scss │ ├── app.component.html │ ├── home │ │ ├── home.component.spec.ts │ │ ├── home.component.ts │ │ ├── home.component.scss │ │ └── home.component.html │ ├── products │ │ ├── products.component.spec.ts │ │ ├── products.component.scss │ │ ├── products.component.ts │ │ └── products.component.html │ ├── app.component.ts │ ├── single-product │ │ ├── single-product.component.spec.ts │ │ ├── single-product.component.scss │ │ ├── single-product.component.html │ │ └── single-product.component.ts │ ├── app.component.spec.ts │ ├── app-routing.module.ts │ └── app.module.ts ├── environments │ ├── environment.prod.ts │ └── environment.ts ├── favicon.ico ├── index.html ├── main.ts ├── test.ts ├── styles.scss └── polyfills.ts ├── e2e ├── tsconfig.json ├── src │ ├── app.po.ts │ └── app.e2e-spec.ts └── protractor.conf.js ├── tsconfig.app.json ├── tsconfig.spec.json ├── browserslist ├── tsconfig.json ├── README.md ├── karma.conf.js ├── package.json ├── tslint.json └── angular.json /src/assets/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/app/common/slider/slider.component.scss: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/app/myprofile/wishlist/wishlist.component.scss: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/app/myprofile/notifications/notifications.component.scss: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/app/myprofile/reviews-rating/reviews-rating.component.scss: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/app/myprofile/wishlist/wishlist.component.html: -------------------------------------------------------------------------------- 1 |

wishlist works!

2 | -------------------------------------------------------------------------------- /src/app/interfaces/Ilogin.ts: -------------------------------------------------------------------------------- 1 | export interface User { 2 | mobileNumber: string; 3 | } -------------------------------------------------------------------------------- /src/app/myprofile/notifications/notifications.component.html: -------------------------------------------------------------------------------- 1 |

notifications works!

2 | -------------------------------------------------------------------------------- /src/app/myprofile/reviews-rating/reviews-rating.component.html: -------------------------------------------------------------------------------- 1 |

reviews-rating works!

2 | -------------------------------------------------------------------------------- /src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jainpiyus/basic-ecommerce-angular-app/HEAD/src/favicon.ico -------------------------------------------------------------------------------- /src/app/myprofile/my-rewards/my-rewards.component.scss: -------------------------------------------------------------------------------- 1 | .container { 2 | margin:10px; 3 | } 4 | .no-rewards{ 5 | display: flex; 6 | justify-content: center; 7 | transform: translateY(100%); 8 | } -------------------------------------------------------------------------------- /src/app/login/login.component.scss: -------------------------------------------------------------------------------- 1 | .example-container { 2 | display: flex; 3 | flex-direction: column; 4 | width: 280px; 5 | } 6 | 7 | .example-container > * { 8 | width: 100%; 9 | } 10 | -------------------------------------------------------------------------------- /src/app/myprofile/my-rewards/my-rewards.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 | 5 |
6 |
-------------------------------------------------------------------------------- /e2e/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/e2e", 5 | "module": "commonjs", 6 | "target": "es5", 7 | "types": [ 8 | "jasmine", 9 | "jasminewd2", 10 | "node" 11 | ] 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./out-tsc/app", 5 | "types": [] 6 | }, 7 | "include": [ 8 | "src/**/*.ts" 9 | ], 10 | "exclude": [ 11 | "src/test.ts", 12 | "src/**/*.spec.ts" 13 | ] 14 | } 15 | -------------------------------------------------------------------------------- /src/app/myprofile/profile-information/profile-information.component.scss: -------------------------------------------------------------------------------- 1 | .form-box{ 2 | display: flex; 3 | justify-content: space-between; 4 | align-items: center; 5 | flex-wrap: wrap; 6 | } 7 | .form-box mat-form-field{ 8 | flex: 1; 9 | margin-left: 10px; 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(browser.baseUrl) as Promise; 6 | } 7 | 8 | getTitleText() { 9 | return element(by.css('app-root h1')).getText() as Promise; 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /src/app/services/loading.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | import { BehaviorSubject } from 'rxjs'; 3 | 4 | @Injectable({ 5 | providedIn: 'root' 6 | }) 7 | export class LoadingService { 8 | loading = false; 9 | progressEnable = new BehaviorSubject(this.loading); 10 | constructor() { } 11 | } 12 | -------------------------------------------------------------------------------- /src/app/common/slider/slider.component.html: -------------------------------------------------------------------------------- 1 | 5 |
6 |
7 | 8 |
9 |
10 | -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | EComm 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /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 | } 19 | -------------------------------------------------------------------------------- /src/app/common/footer/footer.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-footer', 5 | templateUrl: './footer.component.html', 6 | styleUrls: ['./footer.component.scss'] 7 | }) 8 | export class FooterComponent implements OnInit { 9 | 10 | constructor() { } 11 | 12 | ngOnInit() { 13 | } 14 | 15 | } 16 | -------------------------------------------------------------------------------- /src/app/myprofile/myprofile.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-myprofile', 5 | templateUrl: './myprofile.component.html', 6 | styleUrls: ['./myprofile.component.scss'] 7 | }) 8 | export class MyprofileComponent implements OnInit { 9 | 10 | constructor() { } 11 | 12 | ngOnInit() { 13 | } 14 | 15 | } 16 | -------------------------------------------------------------------------------- /src/app/myprofile/wishlist/wishlist.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-wishlist', 5 | templateUrl: './wishlist.component.html', 6 | styleUrls: ['./wishlist.component.scss'] 7 | }) 8 | export class WishlistComponent implements OnInit { 9 | 10 | constructor() { } 11 | 12 | ngOnInit() { 13 | } 14 | 15 | } 16 | -------------------------------------------------------------------------------- /src/app/myprofile/my-rewards/my-rewards.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-my-rewards', 5 | templateUrl: './my-rewards.component.html', 6 | styleUrls: ['./my-rewards.component.scss'] 7 | }) 8 | export class MyRewardsComponent implements OnInit { 9 | 10 | constructor() { } 11 | 12 | ngOnInit() { 13 | } 14 | 15 | } 16 | -------------------------------------------------------------------------------- /src/app/services/login.service.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed } from '@angular/core/testing'; 2 | 3 | import { LoginService } from './login.service'; 4 | 5 | describe('LoginService', () => { 6 | beforeEach(() => TestBed.configureTestingModule({})); 7 | 8 | it('should be created', () => { 9 | const service: LoginService = TestBed.get(LoginService); 10 | expect(service).toBeTruthy(); 11 | }); 12 | }); 13 | -------------------------------------------------------------------------------- /src/app/myprofile/notifications/notifications.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-notifications', 5 | templateUrl: './notifications.component.html', 6 | styleUrls: ['./notifications.component.scss'] 7 | }) 8 | export class NotificationsComponent implements OnInit { 9 | 10 | constructor() { } 11 | 12 | ngOnInit() { 13 | } 14 | 15 | } 16 | -------------------------------------------------------------------------------- /src/app/myprofile/reviews-rating/reviews-rating.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-reviews-rating', 5 | templateUrl: './reviews-rating.component.html', 6 | styleUrls: ['./reviews-rating.component.scss'] 7 | }) 8 | export class ReviewsRatingComponent implements OnInit { 9 | 10 | constructor() { } 11 | 12 | ngOnInit() { 13 | } 14 | 15 | } 16 | -------------------------------------------------------------------------------- /src/app/services/loading.service.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed } from '@angular/core/testing'; 2 | 3 | import { LoadingService } from './loading.service'; 4 | 5 | describe('LoadingService', () => { 6 | beforeEach(() => TestBed.configureTestingModule({})); 7 | 8 | it('should be created', () => { 9 | const service: LoadingService = TestBed.get(LoadingService); 10 | expect(service).toBeTruthy(); 11 | }); 12 | }); 13 | -------------------------------------------------------------------------------- /src/app/services/product.service.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed } from '@angular/core/testing'; 2 | 3 | import { ProductService } from './product.service'; 4 | 5 | describe('ProductService', () => { 6 | beforeEach(() => TestBed.configureTestingModule({})); 7 | 8 | it('should be created', () => { 9 | const service: ProductService = TestBed.get(ProductService); 10 | expect(service).toBeTruthy(); 11 | }); 12 | }); 13 | -------------------------------------------------------------------------------- /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.error(err)); 13 | -------------------------------------------------------------------------------- /src/app/myprofile/saved-cards/saved-cards.component.scss: -------------------------------------------------------------------------------- 1 | .container { 2 | margin:10px; 3 | } 4 | .box{ 5 | padding: 10px; 6 | background: #fff; 7 | box-shadow: 0 0 2px rgba(0,0,0,0.2); 8 | } 9 | 10 | .form-box{ 11 | display: flex; 12 | justify-content: space-between; 13 | align-items: center; 14 | flex-wrap: wrap; 15 | } 16 | .form-box mat-form-field{ 17 | flex: 1; 18 | margin-left: 10px; 19 | } 20 | -------------------------------------------------------------------------------- /src/app/myprofile/manage-address/manage-address.component.scss: -------------------------------------------------------------------------------- 1 | .container { 2 | margin:10px; 3 | } 4 | .box{ 5 | padding: 10px; 6 | background: #fff; 7 | box-shadow: 0 0 2px rgba(0,0,0,0.2); 8 | } 9 | 10 | .form-box{ 11 | display: flex; 12 | justify-content: space-between; 13 | align-items: center; 14 | flex-wrap: wrap; 15 | } 16 | .form-box mat-form-field{ 17 | flex: 1; 18 | margin-left: 10px; 19 | } 20 | -------------------------------------------------------------------------------- /src/app/app.component.scss: -------------------------------------------------------------------------------- 1 | .example-container { 2 | height: 100%; 3 | } 4 | 5 | .example-sidenav-content { 6 | display: flex; 7 | height: 100%; 8 | align-items: center; 9 | justify-content: center; 10 | } 11 | 12 | .example-sidenav { 13 | padding: 20px; 14 | } 15 | 16 | mat-drawer-container { 17 | position: absolute; 18 | right: 0px; 19 | left: 0px; 20 | bottom: 0px; 21 | top: 0px; 22 | } -------------------------------------------------------------------------------- /src/app/services/login.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | import { BehaviorSubject } from 'rxjs'; 3 | import { User } from '../interfaces/Ilogin'; 4 | 5 | @Injectable({ 6 | providedIn: 'root' 7 | }) 8 | export class LoginService { 9 | user: User; 10 | loggedIn = new BehaviorSubject(this.user); 11 | constructor() { } 12 | 13 | isLoggedIn(): boolean { 14 | console.log(this.loggedIn); 15 | return true; 16 | } 17 | } -------------------------------------------------------------------------------- /src/app/common/sidenav/sidenav.component.scss: -------------------------------------------------------------------------------- 1 | .list{ 2 | list-style: none; 3 | width: 100%; 4 | padding: 0; 5 | border-bottom: 1px solid lightcyan; 6 | } 7 | .list .contain:hover { 8 | color: #3f51b5; 9 | } 10 | 11 | .list li{ 12 | padding: 10px 0px; 13 | color: black; 14 | cursor: pointer; 15 | } 16 | .list .contain:focus { 17 | outline: none; 18 | } 19 | 20 | 21 | .list .active { 22 | color: #3f51b5; 23 | outline: none; 24 | } -------------------------------------------------------------------------------- /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'. -------------------------------------------------------------------------------- /src/app/app.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /src/app/common/footer/footer.component.scss: -------------------------------------------------------------------------------- 1 | .footer{ 2 | background: black; 3 | color: white; 4 | } 5 | .footer .container { 6 | padding: 0px 5%; 7 | display: flex; 8 | justify-content: space-between; 9 | align-items: center; 10 | flex-wrap: wrap; 11 | } 12 | .first { 13 | flex: 1; 14 | } 15 | 16 | .second { 17 | flex: 1; 18 | text-align: center; 19 | } 20 | 21 | 22 | .third { 23 | flex: 1; 24 | } 25 | .footer .copyright { 26 | margin-top: 20px; 27 | text-align: center; 28 | } 29 | .list { 30 | list-style: none; 31 | text-align: center; 32 | font-size: 12px; 33 | } 34 | -------------------------------------------------------------------------------- /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 | "typeRoots": [ 15 | "node_modules/@types" 16 | ], 17 | "lib": [ 18 | "es2018", 19 | "dom" 20 | ] 21 | }, 22 | "angularCompilerOptions": { 23 | "fullTemplateTypeCheck": true, 24 | "strictInjectionParameters": true 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /src/app/myprofile/saved-cards/saved-cards.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import { FormGroup, FormBuilder } from '@angular/forms'; 3 | 4 | @Component({ 5 | selector: 'app-saved-cards', 6 | templateUrl: './saved-cards.component.html', 7 | styleUrls: ['./saved-cards.component.scss'] 8 | }) 9 | export class SavedCardsComponent implements OnInit { 10 | 11 | cardForm: FormGroup; 12 | constructor(private fb: FormBuilder) { } 13 | 14 | ngOnInit() { 15 | this.cardForm = this.fb.group({ 16 | firstName: [''], 17 | lastName: [''], 18 | pincode: [], 19 | locality: [], 20 | address: [] 21 | }) 22 | } 23 | 24 | } 25 | -------------------------------------------------------------------------------- /src/app/services/auth-service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | import { CanActivate, Router } from '@angular/router'; 3 | import { LoginService } from './login.service'; 4 | import { User } from '../interfaces/Ilogin'; 5 | 6 | @Injectable({ 7 | providedIn: 'root' 8 | }) 9 | export class AuthService implements CanActivate { 10 | user:User; 11 | constructor(public loginService: LoginService, public router: Router) {} 12 | canActivate(): boolean { 13 | this.loginService.loggedIn.subscribe(next => { 14 | this.user = next; 15 | }); 16 | if (this.user) { 17 | return true; 18 | } 19 | this.router.navigate(['home']); 20 | return false; 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /src/app/myprofile/manage-address/manage-address.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import { FormGroup, FormBuilder } from '@angular/forms'; 3 | 4 | @Component({ 5 | selector: 'app-manage-address', 6 | templateUrl: './manage-address.component.html', 7 | styleUrls: ['./manage-address.component.scss'] 8 | }) 9 | export class ManageAddressComponent implements OnInit { 10 | 11 | addressForm:FormGroup; 12 | constructor( private fb: FormBuilder) { } 13 | 14 | ngOnInit() { 15 | this.addressForm = this.fb.group({ 16 | firstName: [''], 17 | lastName: [''], 18 | pincode:[], 19 | locality: [], 20 | address: [] 21 | }) 22 | } 23 | 24 | } 25 | -------------------------------------------------------------------------------- /src/app/myprofile/profile-information/profile-information.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import { FormGroup, FormBuilder } from '@angular/forms'; 3 | 4 | @Component({ 5 | selector: 'app-profile-information', 6 | templateUrl: './profile-information.component.html', 7 | styleUrls: ['./profile-information.component.scss'] 8 | }) 9 | export class ProfileInformationComponent implements OnInit { 10 | 11 | profileForm: FormGroup; 12 | constructor(private fb: FormBuilder) { } 13 | 14 | ngOnInit() { 15 | this.profileForm = this.fb.group({ 16 | firstName: [''], 17 | lastName: [''], 18 | gender: [], 19 | mobile: [], 20 | email: [] 21 | }); 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /e2e/src/app.e2e-spec.ts: -------------------------------------------------------------------------------- 1 | import { AppPage } from './app.po'; 2 | import { browser, logging } from 'protractor'; 3 | 4 | describe('workspace-project App', () => { 5 | let page: AppPage; 6 | 7 | beforeEach(() => { 8 | page = new AppPage(); 9 | }); 10 | 11 | it('should display welcome message', () => { 12 | page.navigateTo(); 13 | expect(page.getTitleText()).toEqual('Welcome to e-comm!'); 14 | }); 15 | 16 | afterEach(async () => { 17 | // Assert that there are no errors emitted from the browser 18 | const logs = await browser.manage().logs().get(logging.Type.BROWSER); 19 | expect(logs).not.toContain(jasmine.objectContaining({ 20 | level: logging.Level.SEVERE, 21 | } as logging.Entry)); 22 | }); 23 | }); 24 | -------------------------------------------------------------------------------- /src/app/home/home.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { HomeComponent } from './home.component'; 4 | 5 | describe('HomeComponent', () => { 6 | let component: HomeComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ HomeComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(HomeComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /src/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/login/login.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { LoginComponent } from './login.component'; 4 | 5 | describe('LoginComponent', () => { 6 | let component: LoginComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ LoginComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(LoginComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /src/app/common/footer/footer.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { FooterComponent } from './footer.component'; 4 | 5 | describe('FooterComponent', () => { 6 | let component: FooterComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ FooterComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(FooterComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /src/app/common/header/header.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { HeaderComponent } from './header.component'; 4 | 5 | describe('HeaderComponent', () => { 6 | let component: HeaderComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ HeaderComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(HeaderComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /src/app/common/slider/slider.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { SliderComponent } from './slider.component'; 4 | 5 | describe('SliderComponent', () => { 6 | let component: SliderComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ SliderComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(SliderComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /src/app/common/sidenav/sidenav.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { SidenavComponent } from './sidenav.component'; 4 | 5 | describe('SidenavComponent', () => { 6 | let component: SidenavComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ SidenavComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(SidenavComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /src/app/products/products.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { ProductsComponent } from './products.component'; 4 | 5 | describe('ProductsComponent', () => { 6 | let component: ProductsComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ ProductsComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(ProductsComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /src/app/myprofile/myprofile.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { MyprofileComponent } from './myprofile.component'; 4 | 5 | describe('MyprofileComponent', () => { 6 | let component: MyprofileComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ MyprofileComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(MyprofileComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /src/app/myprofile/wishlist/wishlist.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { WishlistComponent } from './wishlist.component'; 4 | 5 | describe('WishlistComponent', () => { 6 | let component: WishlistComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ WishlistComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(WishlistComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /src/app/myprofile/my-rewards/my-rewards.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { MyRewardsComponent } from './my-rewards.component'; 4 | 5 | describe('MyRewardsComponent', () => { 6 | let component: MyRewardsComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ MyRewardsComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(MyRewardsComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /src/app/myprofile/saved-cards/saved-cards.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { SavedCardsComponent } from './saved-cards.component'; 4 | 5 | describe('SavedCardsComponent', () => { 6 | let component: SavedCardsComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ SavedCardsComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(SavedCardsComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, ViewChild, ElementRef } from '@angular/core'; 2 | import { MatSidenav } from '@angular/material'; 3 | 4 | @Component({ 5 | selector: 'app-root', 6 | templateUrl: './app.component.html', 7 | styleUrls: ['./app.component.scss'] 8 | }) 9 | export class AppComponent { 10 | @ViewChild('drawer', {static: false}) drawer: MatSidenav; 11 | title = 'e-comm'; 12 | 13 | toggelNavbar () { 14 | this.drawer.toggle(); 15 | } 16 | 17 | sideNavMenu = [ 18 | { 19 | title: 'home', 20 | link: '/home' 21 | }, 22 | { 23 | title: 'products', 24 | link: '/products' 25 | }, 26 | { 27 | title: 'images', 28 | link: '' 29 | }, 30 | { 31 | title: 'contact-us', 32 | link: '' 33 | } 34 | 35 | ]; 36 | } 37 | 38 | -------------------------------------------------------------------------------- /src/app/myprofile/shopping-cart/shopping-cart.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { ShoppingCartComponent } from './shopping-cart.component'; 4 | 5 | describe('ShoppingCartComponent', () => { 6 | let component: ShoppingCartComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ ShoppingCartComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(ShoppingCartComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /src/app/single-product/single-product.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { SingleProductComponent } from './single-product.component'; 4 | 5 | describe('SingleProductComponent', () => { 6 | let component: SingleProductComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ SingleProductComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(SingleProductComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /src/app/myprofile/notifications/notifications.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { NotificationsComponent } from './notifications.component'; 4 | 5 | describe('NotificationsComponent', () => { 6 | let component: NotificationsComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ NotificationsComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(NotificationsComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /src/app/myprofile/manage-address/manage-address.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { ManageAddressComponent } from './manage-address.component'; 4 | 5 | describe('ManageAddressComponent', () => { 6 | let component: ManageAddressComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ ManageAddressComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(ManageAddressComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /src/app/myprofile/reviews-rating/reviews-rating.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { ReviewsRatingComponent } from './reviews-rating.component'; 4 | 5 | describe('ReviewsRatingComponent', () => { 6 | let component: ReviewsRatingComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ ReviewsRatingComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(ReviewsRatingComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /src/app/myprofile/profile-information/profile-information.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { ProfileInformationComponent } from './profile-information.component'; 4 | 5 | describe('ProfileInformationComponent', () => { 6 | let component: ProfileInformationComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ ProfileInformationComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(ProfileInformationComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /src/app/login/login.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |

Please sign in

4 | 5 | 6 | Mobile Number 7 | 8 | 9 | 10 | Password 11 | 12 | 13 | 15 | 16 | 17 | 18 | 20 |
21 |
22 | -------------------------------------------------------------------------------- /e2e/protractor.conf.js: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | // Protractor configuration file, see link for more information 3 | // https://github.com/angular/protractor/blob/master/lib/config.ts 4 | 5 | const { SpecReporter } = require('jasmine-spec-reporter'); 6 | 7 | /** 8 | * @type { import("protractor").Config } 9 | */ 10 | exports.config = { 11 | allScriptsTimeout: 11000, 12 | specs: [ 13 | './src/**/*.e2e-spec.ts' 14 | ], 15 | capabilities: { 16 | 'browserName': 'chrome' 17 | }, 18 | directConnect: true, 19 | baseUrl: 'http://localhost:4200/', 20 | framework: 'jasmine', 21 | jasmineNodeOpts: { 22 | showColors: true, 23 | defaultTimeoutInterval: 30000, 24 | print: function() {} 25 | }, 26 | onPrepare() { 27 | require('ts-node').register({ 28 | project: require('path').join(__dirname, './tsconfig.json') 29 | }); 30 | jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } })); 31 | } 32 | }; -------------------------------------------------------------------------------- /src/app/myprofile/shopping-cart/shopping-cart.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-shopping-cart', 5 | templateUrl: './shopping-cart.component.html', 6 | styleUrls: ['./shopping-cart.component.scss'] 7 | }) 8 | export class ShoppingCartComponent implements OnInit { 9 | 10 | 11 | cart = [ 12 | { 13 | text: "Everfresh Flowers", 14 | image: "http://pngimg.com/uploads/running_shoes/running_shoes_PNG5827.png" 15 | }, 16 | { 17 | text: "Festive Deer", 18 | image: "https://cdn140.picsart.com/268948212025211.png?r1024x1024" 19 | }, 20 | { 21 | text: "Morning Greens", 22 | image: "http://pluspng.com/img-png/shoes-png-sneaker-png-transparent-image-2500.png" 23 | }, 24 | { 25 | text: "Everfresh Flowers", 26 | image: "https://i.pinimg.com/236x/36/9f/4c/369f4c4013e19c9b3c671de3dc696d2b.jpg" 27 | }, 28 | ]; 29 | constructor() { } 30 | 31 | ngOnInit() { 32 | } 33 | 34 | } 35 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # EComm 2 | 3 | This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 8.1.2. 4 | 5 | ## Development server 6 | 7 | Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files. 8 | 9 | ## Code scaffolding 10 | 11 | Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`. 12 | 13 | ## Build 14 | 15 | Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build. 16 | 17 | ## Running unit tests 18 | 19 | Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io). 20 | 21 | ## Running end-to-end tests 22 | 23 | Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/). 24 | 25 | ## Further help 26 | 27 | To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md). 28 | -------------------------------------------------------------------------------- /src/app/common/slider/slider.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import { User } from 'src/app/interfaces/Ilogin'; 3 | import { LoginService } from 'src/app/services/login.service'; 4 | 5 | @Component({ 6 | selector: 'app-slider', 7 | templateUrl: './slider.component.html', 8 | styleUrls: ['./slider.component.scss'] 9 | }) 10 | export class SliderComponent implements OnInit { 11 | carouselOptions = 12 | { 13 | items: 1, 14 | dots: true, 15 | navigation: false, 16 | loop:true, 17 | margin:10, 18 | autoplay:true, 19 | animateOut: 'fadeOut', 20 | autoHeight: true, 21 | autoHeightClass: 'owl-height', 22 | 23 | } 24 | 25 | 26 | images = [ 27 | 28 | { 29 | text: "Festive Deer", 30 | image: "https://mindstack.in/blog/wp-content/uploads/2018/01/ecommerce-banner.jpg" 31 | }, 32 | { 33 | text: "Festive Deer", 34 | image: "https://about.zination.com/wp-content/uploads/2018/05/ecommerce-banner11.png" 35 | } 36 | ]; 37 | 38 | constructor() { } 39 | 40 | ngOnInit() { 41 | } 42 | 43 | 44 | } 45 | -------------------------------------------------------------------------------- /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/e-comm'), 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 | restartOnFileChange: true 31 | }); 32 | }; 33 | -------------------------------------------------------------------------------- /src/app/common/footer/footer.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |

Copmany Name

5 |

6 | Far far away, behind the word mountains, far from the countries Vokalia and Consonantia. 7 |

8 |
9 |
10 |

HELP

11 |
    12 |
  • 13 | Shipping Information
    • 14 |
  • Returns & Exchange
    • 15 |
  • Terms & Conditions
    • 16 |
  • Privacy Policy 17 |
    • 18 |
19 |
20 |
21 |

HAVE A QUESTION

22 |

23 | 203 Fake St. Mountain View, San Francisco, California, USA

24 |

+2 392 3929 210

25 |

info@yourdomain.com 26 |

27 |
28 |
29 |
30 |

Copyright ©2019 All rights reserved | This application is made with by Piyush

31 |
32 |
-------------------------------------------------------------------------------- /src/app/app.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed, async } from '@angular/core/testing'; 2 | import { RouterTestingModule } from '@angular/router/testing'; 3 | import { AppComponent } from './app.component'; 4 | 5 | describe('AppComponent', () => { 6 | beforeEach(async(() => { 7 | TestBed.configureTestingModule({ 8 | imports: [ 9 | RouterTestingModule 10 | ], 11 | declarations: [ 12 | AppComponent 13 | ], 14 | }).compileComponents(); 15 | })); 16 | 17 | it('should create the app', () => { 18 | const fixture = TestBed.createComponent(AppComponent); 19 | const app = fixture.debugElement.componentInstance; 20 | expect(app).toBeTruthy(); 21 | }); 22 | 23 | it(`should have as title 'e-comm'`, () => { 24 | const fixture = TestBed.createComponent(AppComponent); 25 | const app = fixture.debugElement.componentInstance; 26 | expect(app.title).toEqual('e-comm'); 27 | }); 28 | 29 | it('should render title in a h1 tag', () => { 30 | const fixture = TestBed.createComponent(AppComponent); 31 | fixture.detectChanges(); 32 | const compiled = fixture.debugElement.nativeElement; 33 | expect(compiled.querySelector('h1').textContent).toContain('Welcome to e-comm!'); 34 | }); 35 | }); 36 | -------------------------------------------------------------------------------- /src/app/home/home.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import {MatIconRegistry} from '@angular/material/icon'; 3 | import { DomSanitizer } from '@angular/platform-browser'; 4 | import { Router } from '@angular/router'; 5 | import { ProductService } from '../services/product.service'; 6 | 7 | 8 | @Component({ 9 | selector: 'app-home', 10 | templateUrl: './home.component.html', 11 | styleUrls: ['./home.component.scss'] 12 | }) 13 | export class HomeComponent implements OnInit { 14 | carouselOptions = 15 | { 16 | items: 1, 17 | dots: false, 18 | navigation: false, 19 | loop:true, 20 | margin:10, 21 | autoplay:true, 22 | animateOut: 'fadeOut', 23 | autoHeight: true, 24 | autoHeightClass: 'owl-height', 25 | 26 | } 27 | images = []; 28 | 29 | constructor(iconRegistry: MatIconRegistry, sanitizer: DomSanitizer, private router: Router, private productService: ProductService) { 30 | this.images = this.productService.getAllProducts(); 31 | iconRegistry.addSvgIcon( 32 | 'thumbs-up', 33 | sanitizer.bypassSecurityTrustResourceUrl('assets/img/examples/thumbup-icon.svg')); 34 | } 35 | 36 | ngOnInit() { 37 | } 38 | 39 | productHome() { 40 | this.router.navigate(['product/12']); 41 | } 42 | 43 | } 44 | -------------------------------------------------------------------------------- /src/app/login/login.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit, Inject } from '@angular/core'; 2 | import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material'; 3 | import { LoginService } from '../services/login.service'; 4 | import { FormBuilder, FormGroup } from '@angular/forms'; 5 | import { Router } from '@angular/router'; 6 | import { User } from '../interfaces/Ilogin'; 7 | 8 | @Component({ 9 | selector: 'app-login', 10 | templateUrl: './login.component.html', 11 | styleUrls: ['./login.component.scss'] 12 | }) 13 | export class LoginComponent implements OnInit { 14 | loginForm:FormGroup; 15 | user = {} as User; 16 | constructor( 17 | public dialogRef: MatDialogRef, 18 | @Inject(MAT_DIALOG_DATA) public data: any, 19 | private loginService: LoginService, 20 | private fb: FormBuilder, 21 | private router: Router) {} 22 | 23 | ngOnInit() { 24 | this.loginForm = this.fb.group({ 25 | mobileNumber: [''], 26 | password: [''] 27 | }) 28 | } 29 | login(){ 30 | if (this.loginForm.valid){ 31 | this.user.mobileNumber = this.loginForm.value.mobileNumber; 32 | this.loginService.loggedIn.next(this.user); 33 | this.onNoClick(); 34 | } 35 | } 36 | 37 | 38 | onNoClick(): void { 39 | this.dialogRef.close(); 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /src/app/myprofile/saved-cards/saved-cards.component.html: -------------------------------------------------------------------------------- 1 |
2 |

Manage Cards

3 | 7 |
8 |
9 | 10 |
11 | 12 | Card Number 13 | 14 | 15 | 16 | Card validity 17 | 18 | 19 |
20 |
21 | 22 | Name on card 23 | 24 | 25 | 26 | Name This Card for future use 27 | 28 | 29 |
30 |
31 | 33 |
34 |
35 |
36 |
-------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "e-comm", 3 | "version": "0.0.0", 4 | "scripts": { 5 | "ng": "ng", 6 | "start": "ng serve", 7 | "build": "ng build", 8 | "test": "ng test", 9 | "lint": "ng lint", 10 | "e2e": "ng e2e" 11 | }, 12 | "private": true, 13 | "dependencies": { 14 | "@angular/animations": "^8.1.3", 15 | "@angular/cdk": "^8.1.2", 16 | "@angular/common": "~8.1.2", 17 | "@angular/compiler": "~8.1.2", 18 | "@angular/core": "~8.1.2", 19 | "@angular/forms": "~8.1.2", 20 | "@angular/material": "^8.1.2", 21 | "@angular/platform-browser": "~8.1.2", 22 | "@angular/platform-browser-dynamic": "~8.1.2", 23 | "@angular/router": "~8.1.2", 24 | "@ng-bootstrap/ng-bootstrap": "^5.1.0", 25 | "bootstrap": "^4.3.1", 26 | "jquery": "^3.4.1", 27 | "ng-bootstrap": "^1.6.3", 28 | "ngx-owl-carousel": "^2.0.7", 29 | "rxjs": "~6.4.0", 30 | "script-loader": "^0.7.2", 31 | "tslib": "^1.9.0", 32 | "zone.js": "~0.9.1" 33 | }, 34 | "devDependencies": { 35 | "@angular-devkit/build-angular": "~0.801.2", 36 | "@angular/cli": "~8.1.2", 37 | "@angular/compiler-cli": "~8.1.2", 38 | "@angular/language-service": "~8.1.2", 39 | "@types/node": "~8.9.4", 40 | "@types/jasmine": "~3.3.8", 41 | "@types/jasminewd2": "~2.0.3", 42 | "codelyzer": "^5.0.0", 43 | "jasmine-core": "~3.4.0", 44 | "jasmine-spec-reporter": "~4.2.1", 45 | "karma": "~4.1.0", 46 | "karma-chrome-launcher": "~2.2.0", 47 | "karma-coverage-istanbul-reporter": "~2.0.1", 48 | "karma-jasmine": "~2.0.1", 49 | "karma-jasmine-html-reporter": "^1.4.0", 50 | "protractor": "~5.4.0", 51 | "ts-node": "~7.0.0", 52 | "tslint": "~5.15.0", 53 | "typescript": "~3.4.3" 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /src/app/common/header/header.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit, Output } from '@angular/core'; 2 | import { MatDialog } from '@angular/material'; 3 | import { LoginComponent } from '../../login/login.component'; 4 | import { LoginService } from '../../services/login.service'; 5 | import { User } from '../../interfaces/Ilogin'; 6 | import { EventEmitter } from '@angular/core'; 7 | import { Router } from '@angular/router'; 8 | import { BehaviorSubject } from 'rxjs'; 9 | import { LoadingService } from 'src/app/services/loading.service'; 10 | 11 | @Component({ 12 | selector: 'app-header', 13 | templateUrl: './header.component.html', 14 | styleUrls: ['./header.component.scss'] 15 | }) 16 | export class HeaderComponent implements OnInit { 17 | 18 | loadingEnable: boolean; 19 | sidenavEnable = false; 20 | user: User; 21 | 22 | @Output() 23 | sidenav = new EventEmitter(); 24 | 25 | toggelSidenav() { 26 | this.sidenav.emit('toggel'); 27 | } 28 | 29 | constructor(public dialog: MatDialog, private router: Router, 30 | public loginService: LoginService, 31 | public loadingService: LoadingService) { } 32 | 33 | 34 | ngOnInit() { 35 | this.loginService.loggedIn.subscribe(next => { 36 | this.user = next; 37 | }); 38 | this.loadingService.progressEnable.subscribe(next => { 39 | this.loadingEnable = next; 40 | }); 41 | } 42 | 43 | 44 | enableSidenav() { 45 | this.sidenavEnable = !this.sidenavEnable; 46 | } 47 | openLoginDialog(): void { 48 | const dialogRef = this.dialog.open(LoginComponent, { 49 | 50 | }); 51 | 52 | dialogRef.afterClosed().subscribe(result => { 53 | console.log('The dialog was closed'); 54 | }); 55 | } 56 | logout() { 57 | this.user = null; 58 | 59 | this.loginService.loggedIn.next(this.user); 60 | this.router.navigate(['home']); 61 | } 62 | } 63 | -------------------------------------------------------------------------------- /src/app/myprofile/shopping-cart/shopping-cart.component.scss: -------------------------------------------------------------------------------- 1 | .shopping-cart-conatiner { 2 | background: #f8f9fa !important; 3 | padding: 1em 0; 4 | position: relative; 5 | } 6 | .header { 7 | margin-top: 20px; 8 | display: flex; 9 | justify-content: space-between; 10 | align-items: center; 11 | margin: 10px 10%; 12 | min-height: 50px; 13 | color: black; 14 | flex-wrap: wrap; 15 | 16 | text-align: center; 17 | } 18 | .body { 19 | background: #fff; 20 | margin-top: 20px; 21 | display: flex; 22 | justify-content: space-between; 23 | align-items: center; 24 | margin: 10px 10%; 25 | color: black; 26 | text-align: center; 27 | flex-wrap: wrap; 28 | 29 | } 30 | 31 | .title { 32 | border-left: 5px solid #3f51b5; 33 | padding-left: 10px; 34 | position: relative; 35 | font-size: 30px; 36 | font-weight: 600; 37 | color: #000000; 38 | margin-left: 10%; 39 | } 40 | 41 | .img{ 42 | flex: 2; 43 | margin-right: 5px; 44 | } 45 | .productImg { 46 | width: 120px; 47 | height: 100px; 48 | } 49 | .name { 50 | flex: 2; 51 | margin-right: 5px; 52 | } 53 | .total{ 54 | flex: 1; 55 | } 56 | .quantity{ 57 | flex: 1; 58 | margin-right: 5px; 59 | min-width: 140px; 60 | } 61 | .price{ 62 | flex: 1; 63 | margin-right: 5px; 64 | } 65 | .close-icon{ 66 | color: gray; 67 | font-size: 20px; 68 | overflow: hidden; 69 | text-align: left; 70 | vertical-align: middle; 71 | } 72 | 73 | .cart-total { 74 | padding: 20px; 75 | min-height: 300px; 76 | background: #fff; 77 | width: 500px; 78 | margin: 20px 28%; 79 | letter-spacing: 2px; 80 | border: 1px solid rgba(0, 0, 0, 0.05); 81 | } 82 | .checkout-button { 83 | text-align: center; 84 | margin: 20px; 85 | } 86 | .full-button { 87 | width: 100%; 88 | } -------------------------------------------------------------------------------- /src/app/products/products.component.scss: -------------------------------------------------------------------------------- 1 | 2 | .products-container{ 3 | background: #f8f9fa !important; 4 | padding: 1em 0; 5 | position: relative; 6 | display: flex; 7 | padding: 0px 2%; 8 | } 9 | .sidebar{ 10 | flex: 1; 11 | margin-top: 20px; 12 | font-size: 20px; 13 | text-transform: uppercase; 14 | color: black; 15 | } 16 | 17 | .sidebar .list { 18 | list-style: none; 19 | text-align: left; 20 | padding: 0; 21 | } 22 | 23 | .sidebar .list .list-items{ 24 | font-size: 12px; 25 | background: transparent; 26 | } 27 | .body{ 28 | flex: 6; 29 | display: flex; 30 | margin-top: 10px; 31 | justify-content: center; 32 | flex-wrap: wrap; 33 | } 34 | .body .productImg { 35 | padding: 18px; 36 | width: 100%; 37 | height: 200px; 38 | } 39 | 40 | 41 | 42 | .mobile{ 43 | display: none; 44 | 45 | } 46 | 47 | .mobile-card-container{ 48 | display: flex; 49 | justify-content: space-between; 50 | align-items: center; 51 | position: relative; 52 | margin: 10px; 53 | 54 | } 55 | .mobile-card-img{ 56 | flex: 1; 57 | display: flex; 58 | justify-content: center; 59 | align-items: center; 60 | } 61 | .mobile-card-details { 62 | flex: 3; 63 | margin-left: 20px; 64 | } 65 | 66 | @media (max-width: 1080px) { 67 | // .sidebar { 68 | // display: none; 69 | // } 70 | // .products-container { 71 | // padding: 0; 72 | // } 73 | // .example-card { 74 | // max-width: 100%; 75 | // width: 100%; 76 | // margin: 10px 0px; 77 | // } 78 | // .body .productImg { 79 | // padding: 18px; 80 | // width: 100%; 81 | // } 82 | .products-container { 83 | display: none; 84 | } 85 | .mobile { 86 | display: block; 87 | background: #fff; 88 | margin: 10px 0px; 89 | padding: 10px; 90 | } 91 | 92 | } 93 | 94 | 95 | -------------------------------------------------------------------------------- /src/app/myprofile/manage-address/manage-address.component.html: -------------------------------------------------------------------------------- 1 |
2 |

Manage Addresses

3 | 7 |
8 |
9 | 10 |
11 | 12 | First name 13 | 14 | 15 | 16 | Last name 17 | 18 | 19 |
20 |
21 | 22 | Pincode 23 | 24 | 25 | 26 | Locality 27 | 28 | 29 |
30 | 31 | Address 32 | 33 | 34 |
35 | 37 |
38 | 39 |
40 |
41 |
-------------------------------------------------------------------------------- /src/app/myprofile/myprofile.component.scss: -------------------------------------------------------------------------------- 1 | .profile-container{ 2 | background: #f8f9fa !important; 3 | min-height: 800px; 4 | display: flex; 5 | justify-content: space-between; 6 | padding: 20px 10%; 7 | color: black; 8 | } 9 | 10 | .profile-container .sidebar{ 11 | min-height: 400px; 12 | flex: 2; 13 | margin-right: 20px; 14 | 15 | } 16 | .profile-container .sidebar .profile{ 17 | min-height: 50px; 18 | background: #fff; 19 | padding: 10px; 20 | font-weight: 400; 21 | font-size: 14px; 22 | color: black; 23 | } 24 | .profile-container .sidebar .settings{ 25 | margin-top: 20px; 26 | min-height: 650px; 27 | background: #fff; 28 | } 29 | 30 | .profile-container .main{ 31 | min-height: 400px; 32 | background: #fff; 33 | flex: 4; 34 | padding: 20px; 35 | font-size: 12px; 36 | } 37 | 38 | .lastName { 39 | margin-left: 5px; 40 | } 41 | 42 | .settings{ 43 | position: relative; 44 | } 45 | 46 | .settings .list{ 47 | padding: 0px 5%; 48 | display: flex; 49 | min-height: 50px; 50 | flex-wrap: wrap; 51 | justify-content: space-between; 52 | border-bottom: 1px solid rgba(0, 0, 0, 0.05); 53 | } 54 | .left-icon{ 55 | flex: 1; 56 | } 57 | .title { 58 | flex: 3; 59 | } 60 | .right-icon{ 61 | flex: 1; 62 | } 63 | .settings .list .contain { 64 | margin-top: 6%; 65 | font-size: 14px; 66 | cursor: pointer; 67 | 68 | } 69 | .settings .list .contain:hover { 70 | color: #3f51b5; 71 | } 72 | 73 | .settings .list .child-list { 74 | flex: 0 0 100%; 75 | } 76 | 77 | .settings .list .child-list ul{ 78 | 79 | list-style: none; 80 | padding: 0; 81 | } 82 | .settings .list .child-list li { 83 | padding-bottom: 10px; 84 | padding-top: 10px; 85 | padding-left: 20px; 86 | cursor: pointer; 87 | 88 | } 89 | .settings .list .child-list li:hover{ 90 | color: #3f51b5; 91 | background: #f5faff; 92 | } 93 | .active{ 94 | background: #f5faff; 95 | } 96 | 97 | @media (max-width: 1080px) { 98 | .sidebar{ 99 | display: none; 100 | } 101 | } -------------------------------------------------------------------------------- /tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "tslint:recommended", 3 | "rules": { 4 | "array-type": false, 5 | "arrow-parens": false, 6 | "deprecation": { 7 | "severity": "warning" 8 | }, 9 | "component-class-suffix": true, 10 | "contextual-lifecycle": true, 11 | "directive-class-suffix": true, 12 | "directive-selector": [ 13 | true, 14 | "attribute", 15 | "app", 16 | "camelCase" 17 | ], 18 | "component-selector": [ 19 | true, 20 | "element", 21 | "app", 22 | "kebab-case" 23 | ], 24 | "import-blacklist": [ 25 | true, 26 | "rxjs/Rx" 27 | ], 28 | "interface-name": false, 29 | "max-classes-per-file": false, 30 | "max-line-length": [ 31 | true, 32 | 140 33 | ], 34 | "member-access": false, 35 | "member-ordering": [ 36 | true, 37 | { 38 | "order": [ 39 | "static-field", 40 | "instance-field", 41 | "static-method", 42 | "instance-method" 43 | ] 44 | } 45 | ], 46 | "no-consecutive-blank-lines": false, 47 | "no-console": [ 48 | true, 49 | "debug", 50 | "info", 51 | "time", 52 | "timeEnd", 53 | "trace" 54 | ], 55 | "no-empty": false, 56 | "no-inferrable-types": [ 57 | true, 58 | "ignore-params" 59 | ], 60 | "no-non-null-assertion": true, 61 | "no-redundant-jsdoc": true, 62 | "no-switch-case-fall-through": true, 63 | "no-use-before-declare": true, 64 | "no-var-requires": false, 65 | "object-literal-key-quotes": [ 66 | true, 67 | "as-needed" 68 | ], 69 | "object-literal-sort-keys": false, 70 | "ordered-imports": false, 71 | "quotemark": [ 72 | true, 73 | "single" 74 | ], 75 | "trailing-comma": false, 76 | "no-conflicting-lifecycle": true, 77 | "no-host-metadata-property": true, 78 | "no-input-rename": true, 79 | "no-inputs-metadata-property": true, 80 | "no-output-native": true, 81 | "no-output-on-prefix": true, 82 | "no-output-rename": true, 83 | "no-outputs-metadata-property": true, 84 | "template-banana-in-box": true, 85 | "template-no-negated-async": true, 86 | "use-lifecycle-interface": true, 87 | "use-pipe-transform-interface": true 88 | }, 89 | "rulesDirectory": [ 90 | "codelyzer" 91 | ] 92 | } -------------------------------------------------------------------------------- /src/app/home/home.component.scss: -------------------------------------------------------------------------------- 1 | .search-box{ 2 | width: 80%; 3 | margin-left: auto; 4 | margin-right: auto; 5 | background-color: white; 6 | box-shadow: 0px 1px 6px rgba(0,0,0,0.3); 7 | margin-top: 35px; 8 | display: flex; 9 | } 10 | .search-text { 11 | padding: 10px; 12 | flex: 20; 13 | font-size: 12px; 14 | color: #656565; 15 | line-height: 1.5; 16 | } 17 | .icon{ 18 | border-right: 1px solid lightgrey; 19 | margin: 5px; 20 | } 21 | .icon , .close{ 22 | flex: 1; 23 | color: #656565; 24 | } 25 | 26 | .leftIcon { 27 | padding: 2px; 28 | padding-left: 7px; 29 | } 30 | 31 | 32 | .products-container{ 33 | background: #f8f9fa !important; 34 | // padding: 1em 0; 35 | position: relative; 36 | } 37 | 38 | .title { 39 | border-left: 5px solid #3f51b5; 40 | padding-left: 10px; 41 | position: relative; 42 | font-size: 30px; 43 | font-weight: normal; 44 | color: #000000; 45 | margin-left: 2%; 46 | margin-right: 2%; 47 | } 48 | .viewAllBtn{ 49 | float: right; 50 | margin-top: 10px; 51 | border-radius: 0; 52 | } 53 | .body{ 54 | display: flex; 55 | margin-top: 10px; 56 | justify-content: center; 57 | flex-wrap: wrap; 58 | } 59 | .body .productImg { 60 | padding: 18px; 61 | width: 100%; 62 | height: 200px; 63 | } 64 | 65 | 66 | 67 | .example-header-image { 68 | background-image: url('https://material.angular.io/assets/img/examples/shiba1.jpg'); 69 | background-size: cover; 70 | } 71 | 72 | .mobile-view{ 73 | display: none; 74 | } 75 | 76 | .mobile-view .mobile-card { 77 | width: 48%; 78 | text-align: center; 79 | background: #fff; 80 | margin: 2px; 81 | } 82 | 83 | @media (max-width: 1080px) { 84 | .products-container { 85 | display: none; 86 | } 87 | .mobile-view { 88 | display: flex; 89 | justify-content: center; 90 | align-items: center; 91 | flex-wrap: wrap; 92 | margin-bottom: 20px; 93 | } 94 | .title { 95 | border-left: 5px solid #3f51b5; 96 | padding-left: 10px; 97 | position: relative; 98 | font-size: 20px; 99 | font-weight: 600; 100 | color: #000000; 101 | margin-left: 0.5%; 102 | width: 100%; 103 | margin-bottom: 20px; 104 | } 105 | } -------------------------------------------------------------------------------- /src/app/common/sidenav/sidenav.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit, Output, EventEmitter } from '@angular/core'; 2 | import { Router } from '@angular/router'; 3 | import { LoginService } from 'src/app/services/login.service'; 4 | import { User } from 'src/app/interfaces/Ilogin'; 5 | import { MatDialog } from '@angular/material'; 6 | import { LoginComponent } from 'src/app/login/login.component'; 7 | 8 | @Component({ 9 | selector: 'app-sidenav', 10 | templateUrl: './sidenav.component.html', 11 | styleUrls: ['./sidenav.component.scss'] 12 | }) 13 | export class SidenavComponent implements OnInit { 14 | 15 | @Output() 16 | sidenav = new EventEmitter(); 17 | 18 | profileMenu = [ 19 | { 20 | title: 'My Profile', 21 | link: '/myprofile/profile', 22 | icon: 'person' 23 | }, 24 | { 25 | title: 'Saved Cards', 26 | link: '/myprofile/carddetails', 27 | icon:'account_balance' 28 | }, 29 | { 30 | title: 'My Address', 31 | link: '/myprofile/address', 32 | icon: 'border_color' 33 | }, 34 | { 35 | title: 'My Orders', 36 | link: '/myprofile/orders', 37 | icon: 'next_week' 38 | }, 39 | { 40 | title: 'My Cart', 41 | link: '/shopping-cart', 42 | icon: 'add_shopping_cart' 43 | }, 44 | { 45 | title: 'My Wishlist', 46 | link: '/myprofile/wishlist', 47 | icon:'shopping_cart' 48 | }, 49 | 50 | ]; 51 | myStuff = [ 52 | { 53 | title: 'My Reviews', 54 | link: '/myprofile/reviews', 55 | icon: 'rate_review' 56 | }, 57 | { 58 | title: 'My Rewards', 59 | link: '/myprofile/rewards', 60 | icon: 'rate_review' 61 | }, 62 | ]; 63 | toggelSidenav() { 64 | this.sidenav.emit('toggel'); 65 | } 66 | constructor(public dialog: MatDialog, private router: Router, public loginService: LoginService) { 67 | 68 | } 69 | 70 | user:User; 71 | ngOnInit() { 72 | this.loginService.loggedIn.subscribe(next => { 73 | this.user = next; 74 | }); 75 | } 76 | goToMyProfile(){ 77 | this.toggelSidenav(); 78 | this.router.navigate(['myprofile']); 79 | } 80 | logout() { 81 | this.toggelSidenav(); 82 | this.user = null; 83 | this.loginService.loggedIn.next(this.user); 84 | this.router.navigate(['home']); 85 | } 86 | openLoginDialog(): void { 87 | this.toggelSidenav(); 88 | const dialogRef = this.dialog.open(LoginComponent, {}); 89 | 90 | dialogRef.afterClosed().subscribe(result => { 91 | console.log('The dialog was closed'); 92 | }); 93 | } 94 | } -------------------------------------------------------------------------------- /src/app/myprofile/shopping-cart/shopping-cart.component.html: -------------------------------------------------------------------------------- 1 |
2 | 3 |
4 | My Cart 5 |
6 |
7 | 8 | 9 |
10 | 11 |
12 |
13 | Product 14 |
15 |
16 | Price 17 |
18 |
19 | Quantity 20 |
21 |
22 | Total 23 |
24 |
25 | 26 |
27 |
28 | 29 |
30 | 31 |
32 | 33 | Photo of a Shiba Inu 34 |
35 |
36 |

NIKE FREE RN 2019 ID

37 |

Far far away, behind the word mountains, far from the countries

38 |
39 |
40 | $4.90 41 |
42 |
43 | add 45 | remove 46 |
47 |
48 | $4.90 49 | 50 |
51 |
52 | close 53 |
54 | 55 |
56 | 57 | 58 | 59 |
60 |

CART TOTALS

61 |
62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 79 | 80 | 81 | 82 | 83 | 84 | 85 |
Subtotal$20.60
Delivery$0.60
Discount$0.60
77 |
78 |
Total$10.60
86 |
87 | 88 |
89 |
90 | 91 |
-------------------------------------------------------------------------------- /src/styles.scss: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | @import url("https://fonts.googleapis.com/icon?family=Material+Icons"); 3 | @import "~@angular/material/prebuilt-themes/indigo-pink.css"; 4 | $font-primary: 'Open Sans',Arial, sans-serif; 5 | 6 | $white: #fff; 7 | $black: #000000; 8 | // $darken: #3a4348; 9 | 10 | $primary: #dbcc8f; 11 | body{ 12 | padding: 0; 13 | margin: 0; 14 | font-family: "Open Sans", Arial, sans-serif; 15 | background: $white; 16 | font-size: 15px; 17 | line-height: 1.8; 18 | font-weight: 400; 19 | color: black; 20 | letter-spacing: 0.5px; 21 | background: #f8f9fa; 22 | } 23 | p { 24 | font-size: 12px; 25 | } 26 | span{ 27 | font-size: 12px; 28 | } 29 | 30 | .button{ 31 | border-radius: 0 !important; 32 | border-color: #3f51b5 !important; 33 | transition: all 0.3s ease 0s; 34 | background: #fff; 35 | } 36 | .button:hover { 37 | background-color: #3f51b5; 38 | color: white; 39 | } 40 | 41 | mat-icon{ 42 | color: #3f51b5; 43 | } 44 | a{ 45 | text-decoration: none; 46 | color: black; 47 | } 48 | 49 | a:hover{ 50 | color: #3f51b5; 51 | } 52 | 53 | .active { 54 | color: #3f51b5; 55 | outline: none; 56 | } 57 | mat-card{ 58 | cursor: pointer !important; 59 | } 60 | mat-card:hover{ 61 | box-shadow: 0 0 6px rgba(0,0,0,0.5) !important; 62 | } 63 | 64 | .flex-box{ 65 | background: #fff; 66 | display: flex; 67 | justify-content: space-between; 68 | align-items: center; 69 | flex-wrap: wrap; 70 | padding: 10px 10%; 71 | } 72 | .flex-box-transparent{ 73 | display: flex; 74 | justify-content: space-between; 75 | align-items: center; 76 | flex-wrap: wrap; 77 | padding: 0; 78 | padding: 10px 10%; 79 | } 80 | .free-box{ 81 | background: #fff; 82 | padding: 10px; 83 | } 84 | .message-box{ 85 | align-items: normal; 86 | } 87 | .message-box:hover{ 88 | background: #f5faff; 89 | } 90 | 91 | mat-card { 92 | border: 1px solid lavender; 93 | box-shadow: none !important; 94 | transition: 0.3s !important; 95 | width: 250px !important; 96 | margin: 10px 10px !important; 97 | } 98 | 99 | mat-card img{ 100 | padding-bottom: 0px !important; 101 | transition: 0.3s !important; 102 | } 103 | 104 | mat-card img:hover{ 105 | border: #fff !important; 106 | transform: scale(1.1); 107 | z-index: 2; 108 | } 109 | mat-card:hover{ 110 | box-shadow: none !important; 111 | } 112 | -------------------------------------------------------------------------------- /src/app/products/products.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import { FlatTreeControl } from '@angular/cdk/tree'; 3 | import { MatTreeFlattener, MatTreeFlatDataSource } from '@angular/material'; 4 | import { Router } from '@angular/router'; 5 | import { ProductService } from '../services/product.service'; 6 | 7 | 8 | 9 | @Component({ 10 | selector: 'app-products', 11 | templateUrl: './products.component.html', 12 | styleUrls: ['./products.component.scss'] 13 | }) 14 | export class ProductsComponent implements OnInit { 15 | 16 | carouselOptions = 17 | { 18 | items: 1, 19 | dots: false, 20 | navigation: false, 21 | loop:true, 22 | margin:10, 23 | autoplay:true, 24 | animateOut: 'fadeOut', 25 | autoHeight: true, 26 | autoHeightClass: 'owl-height', 27 | 28 | } 29 | products = []; 30 | 31 | constructor(private router: Router, private productService: ProductService) { 32 | this.dataSource.data = TREE_DATA; 33 | this.products = this.productService.getAllProducts(); 34 | } 35 | 36 | private _transformer = (node: FoodNode, level: number) => { 37 | return { 38 | expandable: !!node.children && node.children.length > 0, 39 | name: node.name, 40 | level: level, 41 | }; 42 | } 43 | ngOnInit() { 44 | } 45 | treeControl = new FlatTreeControl( 46 | node => node.level, node => node.expandable); 47 | 48 | treeFlattener = new MatTreeFlattener( 49 | this._transformer, node => node.level, node => node.expandable, node => node.children); 50 | 51 | dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener); 52 | 53 | 54 | hasChild = (_: number, node: ExampleFlatNode) => node.expandable; 55 | 56 | productHome(id) { 57 | this.router.navigate(['product/'+id]); 58 | } 59 | 60 | 61 | } 62 | 63 | 64 | 65 | /** 66 | * Food data with nested structure. 67 | * Each node has a name and an optiona list of children. 68 | */ 69 | interface FoodNode { 70 | name: string; 71 | children?: FoodNode[]; 72 | } 73 | 74 | const TREE_DATA: FoodNode[] = [ 75 | { 76 | name: 'Mens', 77 | children: [ 78 | {name: 'Shirt'}, 79 | {name: 'Shoes'}, 80 | {name: 'Jeans'}, 81 | ] 82 | }, { 83 | name: 'Womens', 84 | children: [ 85 | {name: 'Shirt'}, 86 | {name: 'Shoes'}, 87 | {name: 'Jeans'}, 88 | ] 89 | },{ 90 | name: 'Child', 91 | children: [ 92 | {name: 'Shirt'}, 93 | {name: 'Shoes'}, 94 | {name: 'Jeans'}, 95 | ] 96 | }, 97 | ]; 98 | 99 | /** Flat node with expandable and level information */ 100 | interface ExampleFlatNode { 101 | expandable: boolean; 102 | name: string; 103 | level: number; 104 | } -------------------------------------------------------------------------------- /src/app/app-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { Routes, RouterModule } from '@angular/router'; 3 | import { HomeComponent } from './home/home.component'; 4 | import { ProductsComponent } from './products/products.component'; 5 | import { SingleProductComponent } from './single-product/single-product.component'; 6 | import { ShoppingCartComponent } from './myprofile/shopping-cart/shopping-cart.component'; 7 | import { MyprofileComponent } from './myprofile/myprofile.component'; 8 | import { ProfileInformationComponent } from './myprofile/profile-information/profile-information.component'; 9 | import { ManageAddressComponent } from './myprofile/manage-address/manage-address.component'; 10 | import { ReviewsRatingComponent } from './myprofile/reviews-rating/reviews-rating.component'; 11 | import { SavedCardsComponent } from './myprofile/saved-cards/saved-cards.component'; 12 | import { WishlistComponent } from './myprofile/wishlist/wishlist.component'; 13 | import { MyRewardsComponent } from './myprofile/my-rewards/my-rewards.component'; 14 | import { NotificationsComponent } from './myprofile/notifications/notifications.component'; 15 | import {AuthService } from './services/auth-service'; 16 | 17 | const routes: Routes = [ 18 | { 19 | path: 'home', 20 | component: HomeComponent 21 | }, 22 | { 23 | path: 'products', 24 | component: ProductsComponent 25 | }, 26 | { 27 | path: 'product/:id', 28 | component: SingleProductComponent 29 | }, 30 | { 31 | path: 'shopping-cart', 32 | component: ShoppingCartComponent 33 | }, 34 | { 35 | path: 'myprofile', 36 | component: MyprofileComponent, 37 | canActivate: [AuthService], 38 | children: [ 39 | { 40 | path: 'profile', 41 | component: ProfileInformationComponent 42 | }, 43 | { 44 | path: 'address', 45 | component: ManageAddressComponent 46 | }, 47 | { 48 | path: 'notifications', 49 | component: NotificationsComponent 50 | }, 51 | { 52 | path: 'reviews', 53 | component: ReviewsRatingComponent 54 | }, 55 | { 56 | path: 'carddetails', 57 | component: SavedCardsComponent 58 | }, 59 | { 60 | path: 'wishlist', 61 | component: WishlistComponent 62 | }, 63 | { 64 | path: 'rewards', 65 | component: MyRewardsComponent 66 | }, 67 | { 68 | path: '', 69 | redirectTo: 'profile', 70 | pathMatch: 'full' 71 | } 72 | ] 73 | 74 | }, 75 | { path: '', redirectTo: 'home', pathMatch: 'full' }, 76 | { path: '*', redirectTo: 'home', pathMatch: 'full' } 77 | ]; 78 | 79 | @NgModule({ 80 | imports: [RouterModule.forRoot(routes)], 81 | exports: [RouterModule] 82 | }) 83 | export class AppRoutingModule { } 84 | -------------------------------------------------------------------------------- /src/app/myprofile/profile-information/profile-information.component.html: -------------------------------------------------------------------------------- 1 |

Personal Information

2 |
3 |
4 | 5 | first name 6 | 7 | 8 | 9 | last name 10 | 11 | 12 |
13 | 14 | 15 |
16 | 17 | Email 18 | 19 | 20 | 21 | Number 22 | 23 | 24 |
25 |

Your Gender:

26 |
27 | 28 | 29 | Male     30 | Female 31 | 32 |
33 |
34 | 36 |
37 |
38 |
39 |

FAQs

40 |

What happens when I update my email address (or mobile number)?

41 |

Your login email id (or mobile number) changes, likewise. You'll receive all your account related 42 | communication on your updated email address (or mobile number). 43 |

44 |

When will my Flipkart account be updated with the new email address (or mobile number)?

45 |

It happens as soon as you confirm the verification code sent to your email (or mobile) and save the 46 | changes.

47 | 48 |

What happens to my existing Flipkart account when I update my email address (or mobile number)? 49 |

50 |

Updating your email address (or mobile number) doesn't invalidate your account. Your account remains 51 | fully functional. You'll continue seeing your Order history, saved information and personal details.

52 | 53 |

Does my Seller account get affected when I update my email address?

54 |

Flipkart has a 'single sign-on' policy. Any changes will reflect in your Seller account also.

55 |
-------------------------------------------------------------------------------- /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__UNPATCHED_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 | /*************************************************************************************************** 56 | * Zone JS is required by default for Angular itself. 57 | */ 58 | import 'zone.js/dist/zone'; // Included with Angular CLI. 59 | 60 | 61 | /*************************************************************************************************** 62 | * APPLICATION IMPORTS 63 | */ 64 | -------------------------------------------------------------------------------- /src/app/common/header/header.component.html: -------------------------------------------------------------------------------- 1 |
2 |
+ 1235 2355 98
3 |
YOUREMAIL@EMAIL.COM
4 |
3-5 BUSINESS DAYS DELIVERY & FREE RETURNS
5 |
6 | 7 |
8 |
9 |
10 | menu 11 |
12 | 18 | 19 | 20 | 26 | 27 |
28 |
    29 |
  • HOME
    • 30 |
  • PRODUCTS
    • 31 |
  • IMAGES
    • 32 |
  • CONTACT-US 33 |
    • 34 | 35 |
  • 36 | 37 |
    • 38 | 39 |
  • 40 | 42 | 43 |
    44 | My Profile 45 | Orders 46 | Wishlist 47 | Notifications 48 | Logout 49 |
    50 |
    • 51 |
  • 52 | add_shopping_cart 53 |
    • 54 |
55 |
56 |
57 | 58 |
59 |
60 | 61 | notification_important 62 |     63 | 64 | add_shopping_cart 65 | 66 |
67 | 68 | 69 |
70 |
71 | -------------------------------------------------------------------------------- /src/app/single-product/single-product.component.scss: -------------------------------------------------------------------------------- 1 | .conatiner { 2 | background: #f8f9fa !important; 3 | display: flex; 4 | justify-content: center; 5 | padding: 20px 2%; 6 | font-weight: 400; 7 | color: black; 8 | } 9 | .product-img-container { 10 | flex: 1; 11 | display: flex; 12 | justify-content: center; 13 | align-items: center; 14 | margin-right: 20px; 15 | background: #fff; 16 | } 17 | 18 | .product-description { 19 | flex: 1; 20 | } 21 | 22 | 23 | .buy-now-button { 24 | border-radius: 0; 25 | } 26 | .buy-now-button.space { 27 | margin-right: 10px; 28 | } 29 | 30 | .rating { 31 | margin-left: 10px; 32 | } 33 | .sold{ 34 | margin-left: 10px; 35 | } 36 | 37 | .description { 38 | font-size: 14px; 39 | color: gray; 40 | animation: animate 1s linear forwards; 41 | } 42 | @keyframes animate { 43 | 0% { 44 | // opacity: 0; 45 | // transform: rotateY(90deg); 46 | filter: blur(1px); 47 | } 48 | 100% { 49 | //opacity: 1; 50 | //transform: rotateY(0deg); 51 | filter: blur(0); 52 | } 53 | } 54 | 55 | .description-tabs{ 56 | margin: 0px 2%; 57 | min-height: 300px; 58 | color: black; 59 | } 60 | .img-box{ 61 | flex: 1; 62 | text-align: center; 63 | } 64 | .detail-box{ 65 | flex: 12; 66 | } 67 | 68 | 69 | 70 | .products-container{ 71 | background: #f8f9fa !important; 72 | padding: 1em 0; 73 | position: relative; 74 | } 75 | 76 | .title { 77 | border-left: 5px solid #3f51b5; 78 | padding-left: 10px; 79 | position: relative; 80 | font-size: 30px; 81 | font-weight: 600; 82 | color: #000000; 83 | margin-left: 2%; 84 | margin-right: 2%; 85 | } 86 | .viewAllBtn{ 87 | float: right; 88 | 89 | margin-top: 10px; 90 | border-radius: 0; 91 | } 92 | .body{ 93 | display: flex; 94 | margin-top: 10px; 95 | justify-content: center; 96 | flex-wrap: wrap; 97 | } 98 | .body .productImg { 99 | padding: 18px; 100 | width: 100%; 101 | height: 200px; 102 | } 103 | 104 | 105 | 106 | .example-header-image { 107 | background-image: url('https://material.angular.io/assets/img/examples/shiba1.jpg'); 108 | background-size: cover; 109 | } 110 | 111 | .mobile-view{ 112 | display: none; 113 | } 114 | 115 | .mobile-view .mobile-card { 116 | width: 48%; 117 | text-align: center; 118 | background: #fff; 119 | margin: 2px; 120 | } 121 | 122 | 123 | 124 | @media (max-width: 1080px) { 125 | .conatiner { 126 | display: block; 127 | padding: 20px 5%; 128 | } 129 | .products-container { 130 | display: none; 131 | } 132 | .description-tabs{ 133 | margin: 0px 2%; 134 | margin-bottom: 10px; 135 | } 136 | .mobile-view { 137 | display: flex; 138 | justify-content: center; 139 | align-items: center; 140 | flex-wrap: wrap; 141 | margin-bottom: 20px; 142 | } 143 | .title { 144 | border-left: 5px solid #3f51b5; 145 | padding-left: 10px; 146 | position: relative; 147 | font-size: 20px; 148 | font-weight: 600; 149 | color: #000000; 150 | margin-left: 0.5%; 151 | width: 100%; 152 | margin-bottom: 20px; 153 | } 154 | } 155 | -------------------------------------------------------------------------------- /src/app/common/header/header.component.scss: -------------------------------------------------------------------------------- 1 | .contact-box{ 2 | background: #262626; 3 | display: flex; 4 | justify-content: center; 5 | color: #fff; 6 | font-size: 12px; 7 | padding: 0px 2%; 8 | } 9 | .contact-box .first{ 10 | flex: 1; 11 | align-items: center; 12 | } 13 | .contact-box .second{ 14 | flex: 2; 15 | } 16 | .contact-box .third{ 17 | flex: 2; 18 | } 19 | .header-box{ 20 | background-color: white; 21 | box-shadow: 0px 1px 6px rgba(0,0,0,0.3); 22 | } 23 | .container{ 24 | display: flex; 25 | justify-content: space-between; 26 | text-align: center; 27 | padding: 10px 2%; 28 | } 29 | .menu{ 30 | display: flex; 31 | } 32 | .list{ 33 | list-style: none; 34 | } 35 | .list .contain:hover { 36 | color: #3f51b5; 37 | } 38 | .list li{ 39 | display: inline-block; 40 | cursor: pointer; 41 | margin: 0px 20px; 42 | transition: all 0.3s ease 0s; 43 | vertical-align: middle; 44 | } 45 | .list .contain:focus { 46 | outline: none; 47 | } 48 | 49 | .list .active { 50 | color: #3f51b5; 51 | outline: none; 52 | } 53 | // .login-box{ 54 | // list-style: none; 55 | 56 | // } 57 | // .login-box .contain:hover { 58 | // color: #3f51b5; 59 | // } 60 | // .login-box li{ 61 | // display: inline-block; 62 | // cursor: pointer; 63 | // margin: 0px 20px; 64 | // transition: all 0.3s ease 0s; 65 | // vertical-align: middle; 66 | // } 67 | // .login-box .contain:focus { 68 | // outline: none; 69 | // } 70 | 71 | // .login-box .active { 72 | // color: #3f51b5; 73 | // outline: none; 74 | // } 75 | 76 | .logo{ 77 | display: flex; 78 | justify-content: center; 79 | align-items: center; 80 | cursor: pointer; 81 | } 82 | 83 | .mobile-view { 84 | display: none; 85 | } 86 | .sidenavEnable{ 87 | display: none; 88 | } 89 | .profile-menu{ 90 | display: none; 91 | } 92 | .dropdown { 93 | position: relative; 94 | } 95 | .dropdown-content { 96 | display: none; 97 | position: absolute; 98 | background-color: #f9f9f9; 99 | min-width: 120px; 100 | box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 101 | z-index: 2; 102 | } 103 | 104 | .dropdown:hover .dropdown-content { 105 | display: block; 106 | } 107 | 108 | .dropdown-content a { 109 | color: black; 110 | padding: 3px 8px; 111 | text-decoration: none; 112 | display: block; 113 | text-align: left; 114 | font-size: 12px; 115 | } 116 | 117 | .dropdown-content a:hover{ 118 | background-color: #3f51b5; 119 | color: white; 120 | } 121 | 122 | 123 | 124 | @media (max-width: 1080px) { 125 | .contact-box { 126 | display: none; 127 | } 128 | .menu{ 129 | display: none; 130 | } 131 | .mobile-view{ 132 | display: block !important; 133 | font-size: 30px; 134 | } 135 | .sidenavEnable{ 136 | display: inline !important; 137 | transform: translateY(-50%) scaleY(0); 138 | } 139 | .container{ 140 | padding: 10px 5%; 141 | } 142 | } 143 | 144 | 145 | .example-container { 146 | width: 400px; 147 | height: 100%; 148 | margin: 12px; 149 | border: 1px solid #555; 150 | z-index: 2; 151 | } 152 | 153 | mat-drawer-content { 154 | padding: 12px; 155 | display: flex; 156 | flex-direction: column; 157 | align-items: flex-start; 158 | } 159 | -------------------------------------------------------------------------------- /src/app/products/products.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 | Categories 5 |
6 |
7 | 8 | 9 | 10 | 11 | 12 | {{node.name}} 13 | 14 | 15 | 16 | 21 | {{node.name}} 22 | 23 | 24 |
25 |
26 |
27 | Price range 28 | 30 |
31 |
32 |
33 | 34 | 36 |
37 |
38 | 39 |
40 |
41 | 42 | 43 |

NIKE FREE RN 2019 ID

44 |

$120.00

45 | 46 | 47 | 50 | 52 | 53 | 54 |
55 |
56 | 57 |
58 |
59 |
60 | 62 |
63 |
64 | 65 |
66 |
67 | 68 |
69 |
70 |

NIKE FREE RN 2019 ID

71 |

$120.00

72 |
73 |
74 |
75 | 78 | 80 |
81 |
-------------------------------------------------------------------------------- /src/app/common/sidenav/sidenav.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 7 | 11 | 14 | 15 |
4 | 5 | 6 | 8 | Hello, 9 |

Piyush Jain

10 | 		12 | chevron_right 13 |
16 | 19 | 20 |
    21 |
  • 22 | 23 | 24 | 27 | 28 | 29 |
    25 | home 26 | HOME
    30 |
    • 31 |
  • 32 | 33 | 34 | 37 | 39 | 40 |
    35 | add_to_photos 36 | PRODUCTS 38 |
    41 |
    • 42 |
43 |
    44 |
  • 46 | 47 | 48 | 51 | 54 | 55 |
    49 | {{item.icon}} 50 | 52 | {{item.title}} 53 |
    56 |
    • 57 |
58 |
    59 |
  • 60 | 61 | 62 | 65 | 68 | 69 |
    63 | {{item.icon}} 64 | 66 | {{item.title}} 67 |
    70 |
    • 71 |
72 |
73 | 74 | 75 | 78 | 81 | 82 |
76 | power_settings_new 77 | 79 | Logout 80 |
83 |
-------------------------------------------------------------------------------- /src/app/services/product.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | import { timeout, delay } from 'q'; 3 | import { Observable, of } from 'rxjs'; 4 | import { LoadingService } from './loading.service'; 5 | 6 | @Injectable({ 7 | providedIn: 'root' 8 | }) 9 | export class ProductService { 10 | 11 | constructor(private loadingService: LoadingService) { } 12 | 13 | products = [ 14 | { 15 | id: 1, 16 | text: "Everfresh Flowers", 17 | image: ["https://image.cnbcfm.com/api/v1/image/105680013-1547583426762nike1.jpg?v=1547583682"] 18 | }, 19 | { 20 | id: 2, 21 | text: "Festive Deer", 22 | image: ["https://sc02.alicdn.com/kf/HTB1DRCma0fvK1RjSszhq6AcGFXaZ.jpg"] 23 | }, 24 | { 25 | id: 3, 26 | text: "Morning Greens", 27 | image: ["https://images-na.ssl-images-amazon.com/images/I/61tBQKJJKaL._SL1500_.jpg"] 28 | }, 29 | { 30 | id: 4, 31 | text: "Everfresh Flowers", 32 | image: ["https://i.pinimg.com/236x/36/9f/4c/369f4c4013e19c9b3c671de3dc696d2b.jpg"] 33 | }, 34 | { 35 | id: 5, 36 | text: "Festive Deer", 37 | image: ["https://cdn140.picsart.com/268948212025211.png?r1024x1024"] 38 | }, 39 | { 40 | id: 6, 41 | text: "Everfresh Flowers", 42 | image: ["https://i.pinimg.com/236x/36/9f/4c/369f4c4013e19c9b3c671de3dc696d2b.jpg"] 43 | }, 44 | { 45 | id: 7, 46 | text: "Festive Deer", 47 | image: ["https://cdn140.picsart.com/268948212025211.png?r1024x1024"] 48 | }, 49 | { 50 | id: 8, 51 | text: "Morning Greens", 52 | image: ["http://pngimg.com/uploads/running_shoes/running_shoes_PNG5827.png"] 53 | }, 54 | { 55 | id: 9, 56 | text: "Everfresh Flowers", 57 | image: ["http://pngimg.com/uploads/dress_shirt/dress_shirt_PNG8109.png"] 58 | }, 59 | { 60 | id: 10, 61 | text: "Festive Deer", 62 | image: ["https://cdn140.picsart.com/268948212025211.png?r1024x1024"] 63 | }, 64 | { 65 | id: 11, 66 | text: "Morning Greens", 67 | image: ["http://pluspng.com/img-png/shoes-png-sneaker-png-transparent-image-2500.png"] 68 | }, 69 | { 70 | id: 12, 71 | text: "Everfresh Flowers", 72 | image: ["https://images-na.ssl-images-amazon.com/images/I/61tBQKJJKaL._SL1500_.jpg"] 73 | }, 74 | { 75 | id: 13, 76 | text: "Festive Deer", 77 | image: ["https://cdn140.picsart.com/268948212025211.png?r1024x1024"] 78 | }, 79 | { 80 | id: 14, 81 | text: "Everfresh Flowers", 82 | image: ["https://i.pinimg.com/236x/36/9f/4c/369f4c4013e19c9b3c671de3dc696d2b.jpg"] 83 | }, 84 | 85 | ]; 86 | 87 | 88 | simillarProducts = [ 89 | { 90 | id: 1, 91 | text: "Everfresh Flowers", 92 | image: ["https://ledscreensandlights.com/wp-content/uploads/2018/08/9.gif"] 93 | }, 94 | { 95 | id: 2, 96 | text: "Festive Deer", 97 | image: ["https://cdn140.picsart.com/268948212025211.png?r1024x1024"] 98 | }, 99 | { 100 | id: 3, 101 | text: "Morning Greens", 102 | image: ["http://pluspng.com/img-png/shoes-png-sneaker-png-transparent-image-2500.png"] 103 | }, 104 | { 105 | id: 4, 106 | text: "Everfresh Flowers", 107 | image: ["https://i.pinimg.com/236x/36/9f/4c/369f4c4013e19c9b3c671de3dc696d2b.jpg"] 108 | }, 109 | ]; 110 | 111 | getAllProducts(): any { 112 | return this.products; 113 | } 114 | 115 | getSimillarProducts(): any { 116 | return this.simillarProducts; 117 | } 118 | 119 | public getSingleProduct(id: number): Observable { 120 | let temp: any; 121 | this.products.forEach(element => { 122 | if (element.id == id) { 123 | temp = element; 124 | } 125 | }); 126 | const loading = false; 127 | this.loadingService.progressEnable.next(loading); 128 | return new Observable((observer) => observer.next(temp)); 129 | } 130 | } 131 | -------------------------------------------------------------------------------- /src/app/home/home.component.html: -------------------------------------------------------------------------------- 1 | 2 |
3 |
4 | New Products Arrival 5 | 8 |
9 |
10 | 11 | 12 | 14 |
15 |
16 | 17 |
18 |
19 | 20 | 21 |

$120.00

22 | NIKE FREE RN 2019 ID 23 | 24 | 25 | 28 | 30 | 31 | 32 |
33 |
34 |
35 |
36 | New Products Arrival 37 | 40 |
41 |
42 |
43 | 45 |
46 |
47 | 48 |
49 |
50 | 51 |
52 |
53 | asdfasdf 54 |
55 |
56 |
57 | 58 | 59 | 70 | -------------------------------------------------------------------------------- /angular.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "./node_modules/@angular/cli/lib/config/schema.json", 3 | "version": 1, 4 | "newProjectRoot": "projects", 5 | "projects": { 6 | "e-comm": { 7 | "projectType": "application", 8 | "schematics": { 9 | "@schematics/angular:component": { 10 | "style": "scss" 11 | } 12 | }, 13 | "root": "", 14 | "sourceRoot": "src", 15 | "prefix": "app", 16 | "architect": { 17 | "build": { 18 | "builder": "@angular-devkit/build-angular:browser", 19 | "options": { 20 | "outputPath": "dist/e-comm", 21 | "index": "src/index.html", 22 | "main": "src/main.ts", 23 | "polyfills": "src/polyfills.ts", 24 | "tsConfig": "tsconfig.app.json", 25 | "aot": false, 26 | "assets": [ 27 | "src/favicon.ico", 28 | "src/assets" 29 | ], 30 | "styles": [ 31 | "src/styles.scss", 32 | "./node_modules/owl.carousel/dist/assets/owl.carousel.css", 33 | "./node_modules/owl.carousel/dist/assets/owl.theme.default.css" 34 | ], 35 | "scripts": [ 36 | "./node_modules/jquery/dist/jquery.js", 37 | "./node_modules/owl.carousel/dist/owl.carousel.js" 38 | ] 39 | }, 40 | "configurations": { 41 | "production": { 42 | "fileReplacements": [ 43 | { 44 | "replace": "src/environments/environment.ts", 45 | "with": "src/environments/environment.prod.ts" 46 | } 47 | ], 48 | "optimization": true, 49 | "outputHashing": "all", 50 | "sourceMap": false, 51 | "extractCss": true, 52 | "namedChunks": false, 53 | "aot": true, 54 | "extractLicenses": true, 55 | "vendorChunk": false, 56 | "buildOptimizer": true, 57 | "budgets": [ 58 | { 59 | "type": "initial", 60 | "maximumWarning": "2mb", 61 | "maximumError": "5mb" 62 | } 63 | ] 64 | } 65 | } 66 | }, 67 | "serve": { 68 | "builder": "@angular-devkit/build-angular:dev-server", 69 | "options": { 70 | "browserTarget": "e-comm:build" 71 | }, 72 | "configurations": { 73 | "production": { 74 | "browserTarget": "e-comm:build:production" 75 | } 76 | } 77 | }, 78 | "extract-i18n": { 79 | "builder": "@angular-devkit/build-angular:extract-i18n", 80 | "options": { 81 | "browserTarget": "e-comm:build" 82 | } 83 | }, 84 | "test": { 85 | "builder": "@angular-devkit/build-angular:karma", 86 | "options": { 87 | "main": "src/test.ts", 88 | "polyfills": "src/polyfills.ts", 89 | "tsConfig": "tsconfig.spec.json", 90 | "karmaConfig": "karma.conf.js", 91 | "assets": [ 92 | "src/favicon.ico", 93 | "src/assets" 94 | ], 95 | "styles": [ 96 | "src/styles.scss" 97 | ], 98 | "scripts": [] 99 | } 100 | }, 101 | "lint": { 102 | "builder": "@angular-devkit/build-angular:tslint", 103 | "options": { 104 | "tsConfig": [ 105 | "tsconfig.app.json", 106 | "tsconfig.spec.json", 107 | "e2e/tsconfig.json" 108 | ], 109 | "exclude": [ 110 | "**/node_modules/**" 111 | ] 112 | } 113 | }, 114 | "e2e": { 115 | "builder": "@angular-devkit/build-angular:protractor", 116 | "options": { 117 | "protractorConfig": "e2e/protractor.conf.js", 118 | "devServerTarget": "e-comm:serve" 119 | }, 120 | "configurations": { 121 | "production": { 122 | "devServerTarget": "e-comm:serve:production" 123 | } 124 | } 125 | } 126 | } 127 | }}, 128 | "defaultProject": "e-comm" 129 | } -------------------------------------------------------------------------------- /src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { BrowserModule } from '@angular/platform-browser'; 2 | import { NgModule } from '@angular/core'; 3 | import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; 4 | import { AppRoutingModule } from './app-routing.module'; 5 | import { AppComponent } from './app.component'; 6 | import { HeaderComponent } from './common/header/header.component'; 7 | import { HomeComponent } from './home/home.component'; 8 | import { HttpClientModule } from '@angular/common/http'; 9 | import { SidenavComponent } from './common/sidenav/sidenav.component'; 10 | import { OwlModule } from 'ngx-owl-carousel'; 11 | import { 12 | MatAutocompleteModule, 13 | MatButtonModule, 14 | MatButtonToggleModule, 15 | MatCardModule, 16 | MatCheckboxModule, 17 | MatChipsModule, 18 | MatDatepickerModule, 19 | MatDialogModule, 20 | MatExpansionModule, 21 | MatGridListModule, 22 | MatIconModule, 23 | MatInputModule, 24 | MatListModule, 25 | MatMenuModule, 26 | MatNativeDateModule, 27 | MatProgressBarModule, 28 | MatProgressSpinnerModule, 29 | MatRadioModule, 30 | MatRippleModule, 31 | MatSelectModule, 32 | MatSidenavModule, 33 | MatSliderModule, 34 | MatSlideToggleModule, 35 | MatSnackBarModule, 36 | MatStepperModule, 37 | MatTableModule, 38 | MatTabsModule, 39 | MatToolbarModule, 40 | MatTooltipModule, 41 | MatTreeModule 42 | } from '@angular/material'; 43 | import { SliderComponent } from './common/slider/slider.component'; 44 | import { FooterComponent } from './common/footer/footer.component'; 45 | import { ProductsComponent } from './products/products.component'; 46 | import { SingleProductComponent } from './single-product/single-product.component'; 47 | import { LoginComponent } from './login/login.component'; 48 | import { ShoppingCartComponent } from './myprofile/shopping-cart/shopping-cart.component'; 49 | import { MyprofileComponent } from './myprofile/myprofile.component'; 50 | import { ProfileInformationComponent } from './myprofile/profile-information/profile-information.component'; 51 | import { ManageAddressComponent } from './myprofile/manage-address/manage-address.component'; 52 | import { SavedCardsComponent } from './myprofile/saved-cards/saved-cards.component'; 53 | import { MyRewardsComponent } from './myprofile/my-rewards/my-rewards.component'; 54 | import { ReviewsRatingComponent } from './myprofile/reviews-rating/reviews-rating.component'; 55 | import { NotificationsComponent } from './myprofile/notifications/notifications.component'; 56 | import { WishlistComponent } from './myprofile/wishlist/wishlist.component'; 57 | import { ReactiveFormsModule } from '@angular/forms'; 58 | 59 | @NgModule({ 60 | declarations: [ 61 | AppComponent, 62 | HeaderComponent, 63 | HomeComponent, 64 | SidenavComponent, 65 | SliderComponent, 66 | FooterComponent, 67 | ProductsComponent, 68 | SingleProductComponent, 69 | LoginComponent, 70 | ShoppingCartComponent, 71 | MyprofileComponent, 72 | ProfileInformationComponent, 73 | ManageAddressComponent, 74 | SavedCardsComponent, 75 | MyRewardsComponent, 76 | ReviewsRatingComponent, 77 | NotificationsComponent, 78 | WishlistComponent 79 | ], 80 | imports: [ 81 | BrowserModule, 82 | AppRoutingModule, 83 | BrowserAnimationsModule, 84 | MatIconModule, 85 | HttpClientModule, 86 | // Material 87 | MatAutocompleteModule, 88 | MatButtonModule, 89 | MatButtonToggleModule, 90 | MatCardModule, 91 | MatCheckboxModule, 92 | MatChipsModule, 93 | MatDatepickerModule, 94 | MatDialogModule, 95 | MatExpansionModule, 96 | MatGridListModule, 97 | MatIconModule, 98 | MatInputModule, 99 | MatListModule, 100 | MatMenuModule, 101 | MatProgressBarModule, 102 | MatProgressSpinnerModule, 103 | MatRadioModule, 104 | MatRippleModule, 105 | MatSelectModule, 106 | MatSidenavModule, 107 | MatSlideToggleModule, 108 | MatSliderModule, 109 | MatSnackBarModule, 110 | MatStepperModule, 111 | MatTableModule, 112 | MatTabsModule, 113 | MatToolbarModule, 114 | MatTooltipModule, 115 | MatNativeDateModule, 116 | OwlModule, 117 | MatTreeModule, 118 | ReactiveFormsModule, 119 | ], 120 | providers: [], 121 | bootstrap: [AppComponent], 122 | entryComponents: [LoginComponent] 123 | }) 124 | export class AppModule { } 125 | -------------------------------------------------------------------------------- /src/app/myprofile/myprofile.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 | 5 | 6 | 10 | 14 | 15 |
7 | 8 | 9 | 11 | Hello, 12 |

Piyush Jain

13 |
16 |
17 |
18 |
19 | 20 |
21 | next_week 22 |
23 |
24 | MY ORDERS 25 |
26 |
27 | chevron_right 28 |
29 |
30 |
31 | 32 |
33 | person 34 |
35 |
36 | ACCOUNT SETTINGS 37 |
38 |
39 | chevron_right 40 |
41 |
42 | 50 |
51 |
52 |
53 | 54 |
55 | add_comment 56 |
57 |
58 | PAYMENTS 59 |
60 |
61 | chevron_right 62 |
63 |
64 | 69 |
70 |
71 |
72 |
73 | message 74 |
75 |
76 | MY STUFF 77 |
78 |
79 | chevron_right 80 |
81 |
82 | 94 |
95 | 96 |
97 |
98 |
99 | power_settings_new 100 |
101 |
102 | LOGOUT 103 |
104 |
105 | chevron_right 106 |
107 |
108 |
109 |
110 |
111 | 112 |
113 |
-------------------------------------------------------------------------------- /src/app/single-product/single-product.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | Photo of a Shiba Inu 5 | 6 |
7 |
8 |

Nike Free RN 2019 iD

9 |
10 | Star: 5.0 11 | 100 Rating 12 | 500 Sold 13 |
14 |

$120.00

15 |
16 | A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a 17 | paradisematic country, in which roasted parts of sentences fly into your mouth. 18 |
19 | On her way she met a copy. The copy warned the Little Blind Text, that where it came from it would have been 20 | rewritten a thousand times and everything that was left from its origin would be the word "and" and the 21 | Little Blind Text should turn around and return to its own, safe country. But nothing the copy said could 22 | convince her and so it didn’t take long until a few insidious Copy Writers ambushed her, made her drunk with 23 | Longe and Parole and dragged her into their agency, where they abused her for their. 24 | 25 |
26 |
27 | 28 | 29 | Size 30 | 31 | 32 | {{food.viewValue}} 33 | 34 | 35 | 36 |
37 | 38 |
39 | 41 | 42 | 45 |
46 | 47 | 48 |
49 | 50 |
51 | 52 |
53 | 54 | 55 |

Nike Free RN 2019 iD

56 |
On her way she met a copy. The copy warned the Little Blind Text, that where it 57 | came from it would have 58 | been rewritten a thousand times and everything that was left from its origin would be the word "and" and 59 | the Little Blind Text should turn around and return to its own, safe country. But nothing the copy said 60 | could convince her and so it didn’t take long until a few insidious Copy Writers ambushed her, made her 61 | drunk with Longe and Parole and dragged her into their agency, where they abused her for their. 62 |
63 | 64 | 65 |

Manufactured By Nike

66 |
On her way she met a copy. The copy warned the Little Blind Text, that where it 67 | came from it would have been 68 | rewritten a thousand times and everything that was left from its origin would be the word "and" and the 69 | Little Blind Text should turn around and return to its own, safe country. But nothing the copy said 70 | could 71 | convince her and so it didn’t take long until a few insidious Copy Writers ambushed her, made her drunk 72 | with 73 | Longe and Parole and dragged her into their agency, where they abused her for their. 74 |
75 | 76 | 77 |

23 Reviews

78 |
80 |
81 | 82 |
83 |
84 |
85 | {{message.name}} 86 |
87 |
88 | 5 Star 89 |
90 |
91 | {{message.details}} 92 |
93 |
94 | {{message.time}} 95 |
96 |
97 |
98 | 99 | 100 |
101 | 102 |
103 |
104 | Similar Products 105 | 108 |
109 |
110 | 111 | Photo of a Shiba Inu 112 | 113 |

NIKE FREE RN 2019 ID

114 |

$120.00

115 | 116 | 117 | 120 | 122 | 123 | 124 |
125 |
126 |
127 |
128 | Similar Products 129 | 132 |
133 |
134 |
135 | Photo of a Shiba Inu 136 |
137 |
138 | asdfasdf 139 |
140 |
141 |
-------------------------------------------------------------------------------- /src/app/single-product/single-product.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import { ProductService } from '../services/product.service'; 3 | import { Route } from '@angular/compiler/src/core'; 4 | import { ActivatedRoute } from '@angular/router'; 5 | 6 | @Component({ 7 | selector: 'app-single-product', 8 | templateUrl: './single-product.component.html', 9 | styleUrls: ['./single-product.component.scss'] 10 | }) 11 | export class SingleProductComponent implements OnInit { 12 | simillarProducts = []; 13 | product: any; 14 | constructor(private productService: ProductService, private route: ActivatedRoute) { 15 | this.simillarProducts = this.productService.getSimillarProducts(); 16 | this.productService.getSingleProduct(Number(this.route.snapshot.params.id)).subscribe(res => { 17 | this.product = res; 18 | }); 19 | } 20 | 21 | ngOnInit() { 22 | 23 | } 24 | 25 | messages = [ 26 | { 27 | image: 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBxIQEhUSEhAVFRUVFRUSFRUVFxUVFRUVFRUXFhUVFRUYHSggGBolHRUVITEhJSkrLi4uFx8zODMtNygtLisBCgoKDg0OGhAQFy0dHR4tLSstKy0tLS0tLS0tLS0tLSstLSstKy0tLS0tLS0tLSstLS03LS0tLSstKy0tNzctK//AABEIAMIBAwMBIgACEQEDEQH/xAAcAAACAgMBAQAAAAAAAAAAAAAAAQIFAwQGBwj/xAA6EAACAQIEAwYEBAUDBQAAAAAAAQIDEQQFITESQVEGE2FxgZEiMlKxocHR8AcUIzNCFXLhFkNigrL/xAAZAQADAQEBAAAAAAAAAAAAAAAAAQIEAwX/xAAmEQEBAAICAgECBwEAAAAAAAAAAQIRAyESMUEyUQQTIjNCcYFh/9oADAMBAAIRAxEAPwDzOUn1FxPqKQMt1PjfUfF4kAGGRSfUfE+pjuO4EnxDUvEghgE7sLiuAwmmdH2Kf9bfkc0dJ2Kf9b0RGf01z5PT2rLJPhWr9zar3a3Zq5YvhRvuJnk6RjHG5zTad7sq3J9X7nWZzhbpnLThY2cOW46LTIq8r7v3Z19Gbtu/c4rJX8R2eH2Rz5Pqc/5Mzk+rFxPqxMAWKsnbd+5xXaWUtfifuzs57HG9p+ZGP7g+XN95L6n7saqy+p+7IAbVJ97L6n7sfey+p+7IAMJd5L6n7sO8l9T92RAQh97L6n7sXeS+p+7IgwUfey+p+7E6svqfuxEQCXey+p+7AiAB5wxDYjMYBjEGyCGADBpjuKwAEkyRFEkANHR9i/73oc4bNHEun8smm1q1o/K/InO9WC4XKaew1e22FwrVOTlKSWvAlJRfRu+5yWafxHxNST7qSpQvZU+FOSX1cdt2+h59VxPXz8fUm52tJ3s9DjMdQ8ePGO1h/EHFJNVJRnfZtJdbPS2q2KWt2hqObnxNcV9nZalK5LnJa7Pk1+phq6f5K3XkVOvStSenT5P2pnh5Sa5r5dfm5NP1Lyf8U8TGEVClS40knKSbu+bsmtzzirNef75EFUaej8fNfqPW0XHF7n2b/iXh8QlHELuKl0ucqcr6Kz3j6+529OaklKLTTV01qmns0z5bwtdRtdX1O97Odt8VBKCqw4FbRw4pay+WKj1vzv8AkPuIsez1Nji+1EjrcPie8pqdrXV7czi+0s/isLDvMoowGFjaoCGDGCAYgCIMkIRosQ2IY2QDsAkvN2A2JmbboAALBAYkAxgAIaGSUScVcgh1JWj4t2JvUOTZ96uXL7mGpKSXE5K12168jTdS0pLyCdB6/F+9znqr8ozzrpSu4pppK6MkaullquRo4ek3ttfb8TYwcbSUZPR3t6DLYkr6W8V+hFUe8W5u1KLspLbZ+ElujNJU0uK6Tf8A9c/dDxxRlVbQpOz125PfTew5UnxRvp8La8ev2I8ThXUt1xX8+djaqYepUUXGD+FW90ufoV1E91CnGKsrt7beO9uvP2NnDVJU6ibTtdrS10ovlfZlXVjJSWrVtL+XNG2tbPpe1/xfmPqk+gezGbU8Th1OkmopcL2+aK+JWu3v11KDPJ3qHFfw8zl0cV3Kl8NaDvGztxJXTT629PZHWY2V5ti4cNZ0o1wHYGjWogGIQJgMQgQhiY4CEMTAI2GAwDzdiG9xMyKA0IBwzAAGRgAgCSMWMlojKjWzFvTQVKVo1563Q4Tk7c76GxlGB76qo+rO8w+Qwt1XijjnyTHp24+O5dvPaFVwb03tccYtP7HeV+yil8rXhfQ1/wDph3s46df+UTOWKvFdubwVSS4k9Yy19TewOUSqyUXdq99eniddgOzEVe/K1ujL/A5ZGm1aK/UV59+lzgUOWdie84ZTWi8vax1mGyGlTg4KN+J67WLbCULvwsbM1w7WO2PcGpj6eVdtuzTpp1IwSVr6bficVhddHHlov1Pbu01JOm7t6rRe/PkeN1vgqPwel7a+ZU6umfmnynkWKcK0JJ8Nnw7bJtX+x6PJ31TvfmeVVOc46Xlr5/v7HpOSycqFNy34F9jtg4bbQhsDsohBcBbMgGxCAYhsTAExNDEPYR9QGMA81YgkCMijAQytAwIjTAGCEwQBOJqY53aNqLNTMXJWaWnMKmLfsnFRqJvd3O/hA81ySpwyTvz5Ho+BldIxc17bOG/pWdCihzihQCxnyrtGSlLSxtUWa1JmTD3uOKXVCpazMrlxNdDWjSukjalTtp4GzC9OGSj7SP4WuVmeUZlhWpN9d/Xme2YzDqatLo7Hn/a/IuCMpray0OkvblnjuPPsPF66bO3g/E9RwlLgpxXRI4TLcqlVcYRTbck34R0u/S56C7U3Gio6Km5uT3k+K36nSckxv9uWPDcpcvsxyRBk2QkaXKUAK4gM7gIVxGYmwE2AAriFcAYBcADzdkRyEZVBMaACgYAAgGA2IZU0KtDii14DTLDJadOVS1TVWbS5N9NPX2FbqbKTd1FFk13US8dj1HLlZI4J4dUMbFL5ZWlHyfL7nX43M+4h8Mbyez5Ix8v6rNNfHPHcrpaUb6GeMUnqeex7S4iKbUZPx4Xb/kKPbie042fimcrhXSZx6VKnHkQpYiENzksq7QutLhT9jL2iwVWnB15StS0s+d3okid/8dFzm3bSjQTSlxT6Io8N2ixOIndXte+1kumvM5alGMpd5aKt/lLWz8FzZb4DtJh6M+Gs6zd0nZSTv/tuvsaMM99Rxzx+bXouFx1RxSq6vk7WIZxRVWjKPWP4o08Dj6de8IcTcVxWlFxnHVaNPz5lq1p56M6li4bsrFRdSV/lSVn4vV/voXsswp17cO8Yy4XzcH8yfrqV2T4RLF1qcl8DTk1vpotfx9ka+Aw1sTNU/wC3DvFr5Wt53sTnlZlHXhxlxyn9rFohJHS0clbin1SfuYcVkkraG383F5cjnWZaNG5uf6PU5otMLlMktgy5JFKOeHsjWkrHYf6O2tisxPZ+d9CceWfJqOnSctidTCySOly7IpJaltDJFazFlzTfRPPowb5GSOEm+R3S7PRWxtUMojEV5vtDcCstn0A9E/02IC/Ov2J8zMQ5CDSwNERjCQCGAAAxDKpInRnwyUlyafszGNCT6XOe0IcNGpBaxaf/AKyd7emha42CfDUeqSvbrpoV+Gj3mGtu1xQfWz1T9LlvlL7yjBb2jwv00f2MGXW59q9D3rL7xU4ONfFqTi+7hGLaitJTdrpJvZeJz1DL6spXqR4UucrXbXTZ2O2xWXyXyp68lexqUskqTl8Wi92zneXU6iseLd3aXZPBJT5O71avb0uejZvlH81gXSjvF3S5fDqv34nPYDAqjZLl92dvkL+F3eg+KeV7+VZddx43gKKw9X44tSi9FLZPyLKCpV66m6MOO6fFq722uloerZvktCvBudOLdtJbP3OYw+GjRlwxStte2v8AyV4ZYX30e8c567bcJcNOy1nL8FfX8ze7lxp3JYXC313MuId1bZW2NGPfdcbJFDTwcFUnVUfjlFxb3032enI1snwCpxcU3JylxNvR3fh5ljFb+pb5FlzfDVq8EbWkoxu23ycnbTrbUfj6H5kwxu3QU6ajFRtskvZD4V0FKtFcyDxEepeowbSdKPRElBdCCrx6g68eofpJksFjF/MR6h/MR+pC6NlsBheKh1IrGQ6h5QmwBiWJi/8AJEu+j1QeUCYEO/j1QB5QPltgwkI6uhgAADQAgABggAZUDTFcECa6HstVTdSD1vHiS/BovsIuB7WXJHC4es4NSi7NF3luZynO0nutPMyc3FlvyjVxcs8fGu8w0lJai7pRdylweKasrhm2OfDwxbu9PUxZNeK5wtVTnpqluzp8udpKDdlexwmHo1KMLU5K97y4v8nz2MuGztxqxUpWV9W9rW5eJ2wutF1d6emYuDUZJPZOz/U4XD5jGpNxej6eK3L3LqCnLvv5mq0/+23FQS6JKP5lNn2TRc3Upy4JXvpt6o7cst7iMMsZ1V9gpNK5OvO5oZTWaioy3+5tVy8fSMq0prclhs2jrCNRNw0lFNNxfRrkE5Wk/I8lzDGyoZtXqxvpNKSXNcMbo7YM/P6ewTzF9TRr5m/qKLLs3hiocdOT0dpRekovo0Tm2d5hGebWkc1l9RmhmcvqKBsXG+oXCK0v6mZPlI0q2aT+plZxvqRkxTjh6WdPNZ85Mm81l9RUMRXhBpZPNp3+Zm5h81n9RQDUmthXjg8XULNH1Ec13surAn8qDxebsQ2IiqAxAgBjEAAwYAACBAgGmw0bGEm1JNbp3Ncy4bcEuto1LpNczappcScuWuv4FdhU+C/TVmxOd4767HncvH4ZN3Hn547WVDGxk7X1MOIw3HJOMo+6K/K8j4m5zlLXZJtJei3LCWBjs5zjbpb05ETt2wxlq+yrMOGPA5q8eXMWddoqVKN5taPTq34FflGBhGpfiqTu/wDJtfbQ7KrhoVINThFxtZRaTSVvud8d3H2nkwmNc9lOc08RFSg1dW8y9rS0v4HNQ7PwoTboppPVq+noW06topMrDfy5XXwSneXrY8ZzTFqdWvX5VKk5x/23tH8Ej0TtZmvcUJRTtUq3pxtuk18cvRPfq0eU5nOyUV5ei/aNHH62zc2X8Vt2ZzOVCSnunfjXVN6+p6NCpGcVKLvFq6Z5RhHZHS9nc47mXBN/05evC+poxunOOvkiDRKlXhUV4TUvJpikWpALErCsJSNhWJiYDaADCwAgJegAHnDEDAzAgABEYyIxmaATGhlQAAANGahuYRVa/Ar8+X6jStsxzzuKfBTt3jW+6gn+ZmyLMO9gm90+F+a/dziq1W/O/Nvq+pb9k6v9SVP643X+6Ov2v7HDmnlHXivjdfd6bl60/dhY7vJXUW/Qrcnx1vgk/JnSU8VBK5hvTXL2o8NltZNO8r+N/wAzq8E6iVn4czUlXTjdSV/M2sBiYuN3r+2dMPYzu1nRtqmcvnmbwoRnUl8sdElvKXKMfG5lzztHSoQbnNLr1tyS8fA80zDMZ4ufeSVqcb91D7zl4s04Y3K6Z885j2jmGPnXk6tTd6KK2hHlFfdvqznMRPiqeWhbY6rwxb/dymwsbs061qRlltu6s6CsjMpkIkVLUdqkqFez4oSs+l7ezL7A9oqsdJPjXSW/pL9TlktWvFmSOgplYenomCzmlV04uGXSWns9iwZ5nTrtb6llgs0qQ+So14PVez0Lmew7kTKDD9pHtUp+sf0f6lphMzpVdIzV+j0f47+hWxttsSHYLDPZgOwAW3mjENiMqgAAFIAADEMZFEhmLDsNDbAIzlZX/Aq8VVbb/fp5GfHTcZKVrq3C0/H7GCdLffye6FRGozLhMQ6VSM47xaf6ojMhCN2l1aJvor7eh90qqU4S4eJKXuShWxEdHaS6oxdn2rRpyeqWh0H8j/529DzcstXT0PFzGNzGrBXSt6kZZpjpU24JK/Nv4vRHQy7PqpK8p39H+pW9psxp4Rd1SvOolrtaCXXxOvF+q6xjnydTuuMWGq1Kv9Vttayu72Ld2Xoc5Tx01UdS9238Xj4Mv4VVKKkno1f9T0uPWtPN5O7tU5xV1UfV/kYMMrEZ/wBSbfib1KFl4Dk+VROcrIhGXNsw1alttbaeRGFJy1k7+HIVVGZSTbaJCUbDRKokhpkUTA041GuZljW6mvcLjlqV/gM8qU7K/HHpLf0kX+DzmlU0vwvpLT2exwPEZI1/UuZh6YmgPPaea1Yqym0lsrsC/KBqsQMDMYAAAaAAADRhCV3p6mCrUbfAvV9EZ4JJWRRpuViHERnIE7AZVkmrNXvyK2qpUm1vfZlnSjfVlfmNa7sFTWnKVzPl8OKpFeJrm9kv96Jyy+mjj7zjusqy9ynBrda+x2eFw19ys7L0XZztp8q/M6FRs77Hm6329TP3qMVWnwQlJbqLa80tDxh1G1JybnKfz6/Nrd39fse2VWravc8fzjKZUKsqbfw/NG2l4t6M2/hNS2MP4uXUrm69Kzdth0cVKMZRW0uX5o2szko2hFbbmlSjdmrWsumWdt/B07Idar0J7RNeodTh4V6+e5typ8Oq2+xrYWOpkqz4p2W0fxkTVJsSG2IlSQrikyIaTtkixSYooxTkMJ8d2ZoIw0oG1FBoqVgMnCAyQYgA5KgYAAKAAAE1cLvLzNoAKno2LmTlyAANk/xfkUk/ml5MAFU5emI3cm/vQ8xARn9NPi+uf29o7P8A9qPr9y25AB58ell7rSrbnmmfzbxtZNt24UrvZcK0XTdgBo/C/uf4y/i/2/8AXKY5/wBSXmxYXcANk+pinpv1TXkAHRUbGF3MWC29wAWRs40AEqRlzBAA0nIwy3AADYpmwgAZVkAAGT//2Q==', 28 | name: 'Salaman Khan', 29 | details: 'Sales dashboard have been created', 30 | time: '9.30 AM' 31 | }, 32 | { 33 | image: 'data:image/jpeg;base64,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', 34 | name: 'Shahrukh Khan', 35 | details: 'Sales dashboard have been created', 36 | time: '9.30 AM' 37 | }, 38 | { 39 | image: 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBxISEhUSEhAVFRUVFRUVFRYVFRUVFRUXFRUWFxUVFRUYHSggGBolHRUVITEhJSkrLi4uGB8zODMtNygtLisBCgoKDg0OGxAQGi4mHSUvLS0tKy0tLS0tLS0tLS0tLS8rLi0tKy0tLS0tLS0tLS0tLS0rLS0tLS0tLS0tLS03Lf/AABEIAMIBAwMBIgACEQEDEQH/xAAcAAABBAMBAAAAAAAAAAAAAAAAAQQFBgIDBwj/xAA/EAABAwEFBQUGBAUDBQEAAAABAAIRAwQFEiExBkFRYXETIoGRsQcjMqHB8DNS0eEUQmJz8RVDsmNygpLyJP/EABoBAAIDAQEAAAAAAAAAAAAAAAADAQIEBQb/xAAwEQACAgEDAgIIBgMAAAAAAAAAAQIRAwQhMRJBMoETIlFhcZGh8AUzNLHB0SOCwv/aAAwDAQACEQMRAD8A6jZR3G9At7U2shljegThgTSpmskgCyhSBilhKGpSFKKsxhCyhEIA1VRktBCc1Rkm5S58l48GDlBX9tHRsre84F25o1/ZRW2214s80aJBrbzqKc8eLuX+Fym2WmSX1HFziZJOZKolZfguVq24dUM9+ODTgb56laae2+DSm4Z73OeD55jqCqWHF2um4LOs8AftPzV+lUV6i/u9pLXNA7Mg7zI8PqmLtu34paHeOHPqI+qonYw3E7QnI6Ss2VBy8lVJE2dl2X23pWgilVOCodMWjuh4q4Becxn+y6DsNtoQW2e0unQU6h15Nf8AqoaolbnTUQka5ZKoCQiEqEAJCWEIQAkIhKhAGKSFmkUgYwkhZQhAGEJIWZCSEAYQhZQhSAl2D3TeidhN7r/Cb0CcpgtmYCEoSqSACIShBUkMRCEIIMKmiqe2m0YslLuwar5DBw4uPRWS8bS2mwucYABJPAASSuCbS3ubTXfUPw6NHBo0/VLnyNhwRtstRkvcSXEkknUk70wBJMuzJ0HBFQ4jO4aD6pChEs2GtCy7SRn5lM3Hgk7Tx9Fayo+zfRc3UsMjodfomFKpyUtdNI9lVd/T55qJY0b58FREscMPCQeRlb2VXD4hPP8AdR9RuHNrp5HVbbLbdx+algjrfs+2uxgWes7MZNcdTwB49V0UFebaFYscHsMEZru2yF9C1Wdj573wuHBw189fFL4L8k6hCEEAlSIQAqEiEACEqEAIkhZJEAYwhKiEAYoWUIQAXUPdN6BOSEyuR80WHkE+TxYoSOKULF6ggVhWZWqkVtcpRDESOdCVYPUkFA9q97dnQbSB71XXk1sE+ZhcgqHcep6Kz+0q8zWtjgDkzujw1PiZ8lT3v16+aTJ2x62QpdiPBo+4RVdlwCMQaJcZPBMKldz3QEWBm985fIalSN13XUqkBrDHFSezuzpeQXBdGuy720xAASZZvYaIafvIh7s2dFOnBEyM1XL52XwkuZIXTtyaWumHBU9IxrxRqqOI2pr2Eg+iZPIOYV72nubMloVEtNIsdGifGfUjJkxuLHFntJGq6D7Mb9FKuaTnd2rEcA4aeeY8lzRrpTuw2ggggwQQQeBGillUz1OxyylQeyN8C1WanVykth4G5zcj+vipxQSKhIlQQCVIhAAhCVACISpEACEIQAIQhADe4R7hnQKRUds/+AzoPRSCeuBRktT1m1IQoASk1bitbVsKsiGYlM73tPZ0Xv4DLqniqvtDt3Z2V/Jp84gfOPND4BcnCb1tPaVnvJ+JxPzUbUr/ALfqs6qY1SkDrEq1S7oFK7PWLEZIUQwTA4q77G2UOaCl5nURunVz3LhclLC0ZKcY7JNLCxrRmU4fWbuKxJ0dB7m3tEjacpuagUJeu2NKhLRLnDcOPNXi7dFJbKyWt9gkaSqBtVs8TLmjMblJUdrbVXdk6nSbuxaqXp1Kj4FXA4O0czjzCdTjuhLakqZx1zC0rKi7OQrJtvdXZuFRoydkeqq7NVoi7VmOUel0dk9jlthtSkTke8ORGvyI8l1IlcH9l95hlpaxxgOkDk4wAu6UnSAoJNwSpAlQQCEIQAJUiEACEIQAIQhAAhCEANtnvwW9ApJR1wH3LegUiU5cCmKgICUKSDFZrFKVKAQlcw9sFuw0hTn4iJ6D/wCV08riftutAFei2dKbnEdXZehVZ8FocnOqrvvimTjmt+blpqshLLmDcjKmrmt5aXUzVLGEzI16JpQohzQea117N3g0fZUSVotBuLtEjarzMns61Vw4zw3p9cN4VC8EVnEjc6TksLuuh7mBjqYgEkEA4jOue8K03Vs8e6XCA0Q0ZTrKTKqNMFK7ZZLLQL6c8Quf3pYe+QBBc4jERMDeV1e4aMNLUwtFytc4gjefVJxqtx099jkrrjdiInEBIBEy7WCJGW5WvYu5LUwy/wCDmforpY7ipA/AJ55qZNBrW5Jzk2hUcaTOce0Kyj+HcY0I9VygarsntGysr/D1C40VbDwJ1CqQ8sFpNOo17Tm0g+S9G7LXy2vZ6b/zAdCYEwRz3LzSF0v2S30WVTZnk4agxN5OA3dQmMUjtQKylN7Hod8GAeMLeoAVCSUqAFQkSoAEIQgASISoARKkSoAa7O/gt6BST1GbOfgt6BSjgnLgU+QasliEoQQI4JSlSFSgEJXCPbMwm0Mqb3NP/qHQ0fJd0qHI9CuL+1+DVojhTnwJEfMFRPgtDk51YqeRlY16cnmnjoa3rH+VqDoz37v1S7GUI0YAGznv/RZUj7xp4ET45R81oJ++a209I5o7AuTrty2YFgI5KVcxrQq7s/eIFIDknNe3Yj95rFKR1FHuWO53b51Wd4PIJLRMSVXKF/BjyMJAA1IyWFe/KlVwFECIOIn5QFWL2orJb2TdC9GuC3G2qk1W1KR0MLfZ7zJyzU2xiqtjD2h1Zsr+UH5hcfBzXVNt6k2OoT/SPNwXLmsWnDwc/Uu5G0DkrNstbIt1neBDZZTgbhhwz55qtsYZiVP7MPayvTedMQPzTRCPRdmHdHRbVrpOkAjTctiqSCEIQAqEiEAKhIhACpUgQgAlCSUIAa7NH3DegUsoTZV3uG9AptOXAp8iJUiVSQCRyVJUMBSBhUGRXE/afWBtUHSlTDOpGf1XRdqNon0hgpUyXkZF0AADMuImQAOS4Zf1ue+q91V0uxGeE7/SPBLmxkF3I2tUk8J0HLitNoqcNFprVDMrNjMQj75KhaxWVNPNOrKZOW5MnsIy36LKnasDmjdv8UPgmPO5crvtDg3JTF1W2m3vVnw47j9Aoa5qokcCrEbI17Yc3osL5OmtzdaL0spEZuHIZfNarPtDSZlRoFx04nyatLKbKf8AtMfw7sHx4pzTtzzkyngG8tEHwVo9IzpjQtevaLT3TTFIb97o6bkCyhoA36KYsVAxJEJlebwwa5aqHuxNlO9oVtw0WURq92I9G5+sKn2ctI5rbf8AeP8AEVy+e6O6zoN/iVHtyWyCqJz8kuqQ/De7POfvzUrcYDzUZMTTc9p4upgvAHMwVDWZ866KUuswcjEBzp4AfsrFTt2wl7GrQDHHvMAGepGYHlBCtAXOdhWFrA7+ot6jIx5k+S6HSdIVSWbEJEqCAQkRKAFKRIlQAqQoQgDSWnihbkIAjtkT7kdFOyq9sa73IVhTlwKfIqEhRKkgVY1NEEpne1qFOk9x4RnlmcgOWqkDnu11vwsq1iRMmm3jDMiB1eTPRcbtBJMnUmVbdpr27UOM9xriG/8AUficXP6ZnzHhUA3E8gpLdsclSGtUrfY3Q6NxEFFps8SsrJTnPh9UED+tSDmzv3+ChbXTIdn4dFNNMEjdAP380wt2YI3tOXRBLN9x3gWGDp6LotzXi14Ga5XZNVYLDWc2C0rNmhvZr083VM6rQoNdmn1Kixu4KhWC/wB7RmE6dtG46ApKs0ui3W+2NY3ULme2d8l4LGmGnU8RwT602qpU+I+CrW0IhNgtxGV1HYgqbVutNGIPFacWaeU6stwnw+i1GEbUHQpCwVvjaMy8CmPFwJ+QUc4QU6sVoDKjKkThcCR0UMlHd9lrF2dGiw6wXO6uP+VaLLv6/RVe476p1qTH0jJjMD8xiB6K02NsCDrvUEscBCEIIBIUqEAIAlQShAAkSpCgBUIQgCG2RqtFPDOYVkBXOLPZ3NMseQVZ7qvg5Mq5HjuKamKZYVi50aoa8HMKq7f2ioymDSe1ry18OfGFuGCTnlizgdeSbjh1SUQRMVL8swJHbNJBgxLoO+YHJUzby++2aKFB2JrhJLcwQRMTwgSeQ5qmXPetazv7ScTamIYnEOc5xEkzrv8AmmlkvLC2sXZuc0hh4YnQ8+UK+pxRxvpTLQXchr8eC8tYZY0w3nnr4qLosznzUrfFFrGUQ0y8sL6nIuPdb4AeZTV7eCyNNF+TRXd+ib0HYXxxRa3rCkYIJ3IsgkajsoGp9OCY2v4zvEfSCnNodDcRyJyHRRr6k/fqglhZRmrFYmyoWxUpMqfu9m5JymjAiSs1JPadnCLPRyT+hQWRmxGoWUASq7tBYC5pjVXN9JNqlixTkmQdC5pNHKAzON4StOaud57LucSWgKti7DqHg+vktuNPI6jyYZxcdxg4YuvqnFns7pAcC3qOPJPql0YWteHB2LdvB4EeKkmXiyowsNIsc0FxjNpiBOfwnotWLB63TIo9lZuuG1VKBPZVIIwuJboM8tZB1zHCea61sXtWy2sgw2s342cR+dnFvouT3NYe1ZEAEuwtOKGt7riTUno0eKsdxXLVstWnVbWonC5rnRU0ZPf3flnzWyelxzh6uz7e3zFRlKzriVMrLe1CpAZWYSdBMHyKeLkyhKLqSoamnwKhAKRVJMkiRCAFQUiJQAISShAFTo2cxiCeNDXiD/hbrrzasq9ljNquIbMbJb30Thfm3cf1VK9pu0NO04KFAF3Zul1QfCS6BgHHdnyT/ay/RSZ2YBkxiMHCG8J4lUixWntH4gA1jc2gAAuz+M/0zMcYWjT5o48kbV39LdfaN2HROeNzbrml3e1/IZW84TgB+ANHiR+qZYyS0TkDHmnd5mXvjg30UfZ6RMcBmU3VOskjNG2kb7wGI9BmeKauqbvBba1WdD4/p+qZPeN331KxOXU7LdKjsjXWZP3p1RQpZyUrgTrkFhUtAaIGqCAtz8Rjgm1NkuARTfOp/wArMU3TI1GqgO5NWKzAblL2Ch3kz2cqCr3f5grhYLuzGSzT5N2NKrFs1myTyjRzT6jZYWdCl3uiVQyzQLPJThtmyTtrAFtVkirK7tFVFGg6dXd0ccxnHhKod1jvOJb8Mdc9ysm1N6NdWwhpPZmBn3Z1dlv3DzTGxVGPFR4AEnIj+V2cAg6jMBWk0kbtJinV/b2NFrsBdTfUpt7jA0nFkWuOURvk/XgoZ1vq0wS6kIfrIAnkpyxOLbPaaZdmRScN+barZ85TOpVptD6ddhIMBmstOcOEfea7MMkvQrIn6yVfHf8AdHHy4L1HQ9o+/sPbvtbq9ncAaLMMEAM7xwQcRmA4wYid6zoB+ZabO4O3VqYa6TniaWN04eqj7uc0NmmHkNmYpucIMTjgaZDPkl/08VO8yoZ394kHeOmUBO0cJ6iacm9uVx9S+shix4umk2+6d/Qn6VMiA9mGnEuNN5e2eMBuJvorrsTebn+7Li4FmNmJ2I4QQJBidSBBK5nZqdopHUngRmPMK13JfjqBD3UwThcDE6OIJ03ktC26rQdWN9Hx3/s5OD1J7d9jpyExui8212YgIO9vBPl5tNPg6OTHLHLpkqYIQkQUBEolIUACEiEAQl0O7qzvq8hZ6ReYnRo4n9FouY91c/8AaPfeNxZTf3Wgsy3knvEHwjwT4YpTjJrsimBReaKnxZXtpr9fbHloJDSR3Qci4wJA8PFWK+qlFlBjKFIsA+PE2HkhuFvhrlzVSuel7yWYXFoLmh8w6BJ03jM+Ck70NpaB2j6XfMBrM357ydwT/wANw4/zJPdPZbbnQ/ENW0/R1u18l7ERD3ue92ESYk8g0Zn5JpaLRDY3eqlLoqCnUqAx8LmSBAlpIOvPeoW2DPkCfkk53cur22YlsqMD3s3GBwCUV2jJoWgyQt7Ghgl2p0CSBhUJiT/lNXt3rZUJcZPgt9CAMx/hSQMg1PLE4gjKeXJZPoBpdw3c50Ti7mQ4EqGC5JK4aYZamFnwuH0XVLMyAueXFQJqirhhpMdJyB810eyNMZpMzXj4N3Zysm0oC3tYtgYl0NNTGLC31ezpufvAyned3zTxoVc2qvakz3RJxiHQIw6HJ3mrwxym6grZMXBSXpHS7lVuuxsd2xrVIiA12HFLnzOL9eabUqHZU30m1gQ445wkF0wMPI5Fba1cgEjORHVZ3dbnul5DZ+HNrSMI0kEQupi/B8z2kluvqacv4rgjThJ7OvL7940umzYqwpkgB7XgyYBww4gRvyUlbrRTdQbRLJc53ZGIaW55HGQYyAjL6ptUqBtanULG90PPdGGco3ZTmnlmsrHsdUxe7cZ70gBzMwTvG8ZcU/DongXTN72c7V6mGplcexqu+76VjtVG0MfUY0BzX43tkktcC0lsS3TONVqv21WNxdXou945wx0WS1ryRm8Fohpykjf1113lau3OOpBAyAAybnBy+pUXXslPGwU8ReXfCHQAADLoOQW9aWWOLlKXJhnkjk9RRNbb8Dsi3C3g0SPHeVJ2e308u+RvAIIC33fcFOrheazXEVQDpECDEjIzmJ5J3V2f7WkcIlwDiCOIEgdCiGdRVKnElaZw9zRI3ffEFrg4tIEEzr0/dX26b3bVABcMW6Dk79+S4hSpubSFQGHMqDxBB1B4EDzWVK83seX4nNcTiO7MmZhec1ccWPK/RRa9qvbyPQwjLVYV6dq62a58zv8AKJVY2L2pba2FjiBWYMx+Zv5h9VZlVOzjTg4ScWKkhCCgoKhJKEAVOz2nBQqOmIYY67vmuYW0do7C0TMq0f6h2rHMZnMCMhzGZ8FXrMwU65Dmw4gjgQRn6T5Bd7Qephb23+dGak8nSSmyVgbTrdqMIaKbiTUnCwkRJOmu7qq7ezKz3kjG9tMtkgaNLsi4DMTCc269XT2bRLcUhswCdcTuMJlUvx9KWUqTKZgtcaZd7wzJdzC42TO5Tbgqj2rud/JpoQgutpy73vXuQ1vJwDy5kw7SeLs3fOU1LMQPit9qtJdJdMmIyGWs6eC1WTQzvB9FEnZzJJJ7DKnlK1kScTtPXkE5YwAFx4kAcT+ibPdmXH75KqFg7jx3clm85Zc1i3PPyWWnXggB05kt5j6fZW2xsJcYEjUhaphoVl2TsEtLzvmPDRRJ0i8Y2yZudgNMiMy2Wnjl9FdbK3IHkqpY7E7sCG/Ex5LOYxGR0jEPFXKxAFoI3gHzSGaVsb2NWYC2NalDVBZMb2ioGNc92jQSfBc4qXg6rWLhGM5kAAnMDI8eC6Fe93vrUyxpgandijMNndnE9FR7hux1G2NZWYWvaQ4mZkPa+IO8SB5FdbQdGKPpJK72r9vqYNTGWWahFX9/wiItTiSThInUxkTxU7szs0+tSLw9oGIgCCT1VyqmmxgaGgDcBkOO5Nbku11Vz65aIBPZNdOGRMuc0Za5DoV2HqumNR2+ouOnqNsrN87NANdieRgGKZjfBMb93mqzWtVWlRNJr+4c8wDrqM9ys9/NrNfUbWyLnNc6BkYADYOpblpy4qCv67HCkx0TjzOWTRqCXbpyyTZqMcbyT3bFt2/VVUMKNZopCrmWmG1Y3HQPAHA5HkeSh7TWY10MMh2TnNnJmrsyrFYrG5lMhzSGVAWgb/h1jiYJjkoildb31OzGEB3dzHE8dyx6xznpbiu2/u9o3Rr/ADxvYt9CkyoDZ7O9naNpMe1uKA4gkhpHgBi1E8E3pXnbqbzT/hg18fmkZaeoVPNJ9C0d13fbDmkHWMiBGhEK/XNfotMF8CoAGk73ZESeenLJYtLD/Cmn2NuqyN6iXVsypf6vVFQsqsaCHQ6MhMycvFaappGpic+ZOhMRyUtfd01a9Su6k0ODHBgLdXZAnqRMFQt2WBuPMYSHOacY3gSQQdDGfgVm1OBzqpbfyV0+seG/Vt9iQuCpUbaG1rMDLDBgjDG+Twjcu62O0CoxrxvHWDvHmuK/wFLtIEPOQyG86NGea6zstQ7OgGT8JM7gCc4HJLlg9HAjNnlldyikS5MJCVrJK1Pq5wkihwlWAchAHC7i/BP/AHH0CyYZq05z7w16hCF6J/pF8P8AlmbF+eviix7UWSmyk8spsaYbm1oafMBc+ujOtnnBbHmEIWHTpdMP9v2R0dW31vy/k03i4y/M/E71RZfolQudLliXyNrVqOiaOQhQijNw08FjT1HihCsQbqu7or1sr+F0P0CEJOQ2YPBLyLdcOn/g356qYuf8Kl/bb/xCVCWSx+UhSoUEIyB7qrW1p90138we2DvGRORQhdWX6fyLaP8AUL4kVZ6riDLiYpOIkkwZ1CvdxD3FL+3T/wCISITn2+BXUeDzNN/0wWVJAPunHMTpoqzZD/8Anb/bPyfkhC3YfyvNGFeIh72aIo5f7rfVo9CfNRdvaO0cI/N6oQtWl5fw/sVn8RWLPnTLjmQKUE5kd+Nei20sqgjLvIQsWh8PyG6jxHQ9nQG2RmERk7TL+dyr+1Yh1UjIkMJjecLxJ55DyQhZZcvzJXhNewDQbQZAyYCOROp6rrVyfDU/uH/gxCFmy+AlD+pomJ1QhZCw5CEIUAf/2Q==', 40 | name: 'Katrina Kaif', 41 | details: 'Sales dashboard have been created', 42 | time: '9.30 AM' 43 | },{ 44 | image: 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBxIQEhUSEhAVFRUVFRUSFRUVFxUVFRUVFRUXFhUVFRUYHSggGBolHRUVITEhJSkrLi4uFx8zODMtNygtLisBCgoKDg0OGhAQFy0dHR4tLSstKy0tLS0tLS0tLS0tLSstLSstKy0tLS0tLS0tLSstLS03LS0tLSstKy0tNzctK//AABEIAMIBAwMBIgACEQEDEQH/xAAcAAACAgMBAQAAAAAAAAAAAAAAAQIFAwQGBwj/xAA6EAACAQIEAwYEBAUDBQAAAAAAAQIDEQQFITESQVEGE2FxgZEiMlKxocHR8AcUIzNCFXLhFkNigrL/xAAZAQADAQEBAAAAAAAAAAAAAAAAAQIEAwX/xAAmEQEBAAICAgECBwEAAAAAAAAAAQIRAyESMUEyUQQTIjNCcYFh/9oADAMBAAIRAxEAPwDzOUn1FxPqKQMt1PjfUfF4kAGGRSfUfE+pjuO4EnxDUvEghgE7sLiuAwmmdH2Kf9bfkc0dJ2Kf9b0RGf01z5PT2rLJPhWr9zar3a3Zq5YvhRvuJnk6RjHG5zTad7sq3J9X7nWZzhbpnLThY2cOW46LTIq8r7v3Z19Gbtu/c4rJX8R2eH2Rz5Pqc/5Mzk+rFxPqxMAWKsnbd+5xXaWUtfifuzs57HG9p+ZGP7g+XN95L6n7saqy+p+7IAbVJ97L6n7sfey+p+7IAMJd5L6n7sO8l9T92RAQh97L6n7sXeS+p+7IgwUfey+p+7E6svqfuxEQCXey+p+7AiAB5wxDYjMYBjEGyCGADBpjuKwAEkyRFEkANHR9i/73oc4bNHEun8smm1q1o/K/InO9WC4XKaew1e22FwrVOTlKSWvAlJRfRu+5yWafxHxNST7qSpQvZU+FOSX1cdt2+h59VxPXz8fUm52tJ3s9DjMdQ8ePGO1h/EHFJNVJRnfZtJdbPS2q2KWt2hqObnxNcV9nZalK5LnJa7Pk1+phq6f5K3XkVOvStSenT5P2pnh5Sa5r5dfm5NP1Lyf8U8TGEVClS40knKSbu+bsmtzzirNef75EFUaej8fNfqPW0XHF7n2b/iXh8QlHELuKl0ucqcr6Kz3j6+529OaklKLTTV01qmns0z5bwtdRtdX1O97Odt8VBKCqw4FbRw4pay+WKj1vzv8AkPuIsez1Nji+1EjrcPie8pqdrXV7czi+0s/isLDvMoowGFjaoCGDGCAYgCIMkIRosQ2IY2QDsAkvN2A2JmbboAALBAYkAxgAIaGSUScVcgh1JWj4t2JvUOTZ96uXL7mGpKSXE5K12168jTdS0pLyCdB6/F+9znqr8ozzrpSu4pppK6MkaullquRo4ek3ttfb8TYwcbSUZPR3t6DLYkr6W8V+hFUe8W5u1KLspLbZ+ElujNJU0uK6Tf8A9c/dDxxRlVbQpOz125PfTew5UnxRvp8La8ev2I8ThXUt1xX8+djaqYepUUXGD+FW90ufoV1E91CnGKsrt7beO9uvP2NnDVJU6ibTtdrS10ovlfZlXVjJSWrVtL+XNG2tbPpe1/xfmPqk+gezGbU8Th1OkmopcL2+aK+JWu3v11KDPJ3qHFfw8zl0cV3Kl8NaDvGztxJXTT629PZHWY2V5ti4cNZ0o1wHYGjWogGIQJgMQgQhiY4CEMTAI2GAwDzdiG9xMyKA0IBwzAAGRgAgCSMWMlojKjWzFvTQVKVo1563Q4Tk7c76GxlGB76qo+rO8w+Qwt1XijjnyTHp24+O5dvPaFVwb03tccYtP7HeV+yil8rXhfQ1/wDph3s46df+UTOWKvFdubwVSS4k9Yy19TewOUSqyUXdq99eniddgOzEVe/K1ujL/A5ZGm1aK/UV59+lzgUOWdie84ZTWi8vax1mGyGlTg4KN+J67WLbCULvwsbM1w7WO2PcGpj6eVdtuzTpp1IwSVr6bficVhddHHlov1Pbu01JOm7t6rRe/PkeN1vgqPwel7a+ZU6umfmnynkWKcK0JJ8Nnw7bJtX+x6PJ31TvfmeVVOc46Xlr5/v7HpOSycqFNy34F9jtg4bbQhsDsohBcBbMgGxCAYhsTAExNDEPYR9QGMA81YgkCMijAQytAwIjTAGCEwQBOJqY53aNqLNTMXJWaWnMKmLfsnFRqJvd3O/hA81ySpwyTvz5Ho+BldIxc17bOG/pWdCihzihQCxnyrtGSlLSxtUWa1JmTD3uOKXVCpazMrlxNdDWjSukjalTtp4GzC9OGSj7SP4WuVmeUZlhWpN9d/Xme2YzDqatLo7Hn/a/IuCMpray0OkvblnjuPPsPF66bO3g/E9RwlLgpxXRI4TLcqlVcYRTbck34R0u/S56C7U3Gio6Km5uT3k+K36nSckxv9uWPDcpcvsxyRBk2QkaXKUAK4gM7gIVxGYmwE2AAriFcAYBcADzdkRyEZVBMaACgYAAgGA2IZU0KtDii14DTLDJadOVS1TVWbS5N9NPX2FbqbKTd1FFk13US8dj1HLlZI4J4dUMbFL5ZWlHyfL7nX43M+4h8Mbyez5Ix8v6rNNfHPHcrpaUb6GeMUnqeex7S4iKbUZPx4Xb/kKPbie042fimcrhXSZx6VKnHkQpYiENzksq7QutLhT9jL2iwVWnB15StS0s+d3okid/8dFzm3bSjQTSlxT6Io8N2ixOIndXte+1kumvM5alGMpd5aKt/lLWz8FzZb4DtJh6M+Gs6zd0nZSTv/tuvsaMM99Rxzx+bXouFx1RxSq6vk7WIZxRVWjKPWP4o08Dj6de8IcTcVxWlFxnHVaNPz5lq1p56M6li4bsrFRdSV/lSVn4vV/voXsswp17cO8Yy4XzcH8yfrqV2T4RLF1qcl8DTk1vpotfx9ka+Aw1sTNU/wC3DvFr5Wt53sTnlZlHXhxlxyn9rFohJHS0clbin1SfuYcVkkraG383F5cjnWZaNG5uf6PU5otMLlMktgy5JFKOeHsjWkrHYf6O2tisxPZ+d9CceWfJqOnSctidTCySOly7IpJaltDJFazFlzTfRPPowb5GSOEm+R3S7PRWxtUMojEV5vtDcCstn0A9E/02IC/Ov2J8zMQ5CDSwNERjCQCGAAAxDKpInRnwyUlyafszGNCT6XOe0IcNGpBaxaf/AKyd7emha42CfDUeqSvbrpoV+Gj3mGtu1xQfWz1T9LlvlL7yjBb2jwv00f2MGXW59q9D3rL7xU4ONfFqTi+7hGLaitJTdrpJvZeJz1DL6spXqR4UucrXbXTZ2O2xWXyXyp68lexqUskqTl8Wi92zneXU6iseLd3aXZPBJT5O71avb0uejZvlH81gXSjvF3S5fDqv34nPYDAqjZLl92dvkL+F3eg+KeV7+VZddx43gKKw9X44tSi9FLZPyLKCpV66m6MOO6fFq722uloerZvktCvBudOLdtJbP3OYw+GjRlwxStte2v8AyV4ZYX30e8c567bcJcNOy1nL8FfX8ze7lxp3JYXC313MuId1bZW2NGPfdcbJFDTwcFUnVUfjlFxb3032enI1snwCpxcU3JylxNvR3fh5ljFb+pb5FlzfDVq8EbWkoxu23ycnbTrbUfj6H5kwxu3QU6ajFRtskvZD4V0FKtFcyDxEepeowbSdKPRElBdCCrx6g68eofpJksFjF/MR6h/MR+pC6NlsBheKh1IrGQ6h5QmwBiWJi/8AJEu+j1QeUCYEO/j1QB5QPltgwkI6uhgAADQAgABggAZUDTFcECa6HstVTdSD1vHiS/BovsIuB7WXJHC4es4NSi7NF3luZynO0nutPMyc3FlvyjVxcs8fGu8w0lJai7pRdylweKasrhm2OfDwxbu9PUxZNeK5wtVTnpqluzp8udpKDdlexwmHo1KMLU5K97y4v8nz2MuGztxqxUpWV9W9rW5eJ2wutF1d6emYuDUZJPZOz/U4XD5jGpNxej6eK3L3LqCnLvv5mq0/+23FQS6JKP5lNn2TRc3Upy4JXvpt6o7cst7iMMsZ1V9gpNK5OvO5oZTWaioy3+5tVy8fSMq0prclhs2jrCNRNw0lFNNxfRrkE5Wk/I8lzDGyoZtXqxvpNKSXNcMbo7YM/P6ewTzF9TRr5m/qKLLs3hiocdOT0dpRekovo0Tm2d5hGebWkc1l9RmhmcvqKBsXG+oXCK0v6mZPlI0q2aT+plZxvqRkxTjh6WdPNZ85Mm81l9RUMRXhBpZPNp3+Zm5h81n9RQDUmthXjg8XULNH1Ec13surAn8qDxebsQ2IiqAxAgBjEAAwYAACBAgGmw0bGEm1JNbp3Ncy4bcEuto1LpNczappcScuWuv4FdhU+C/TVmxOd4767HncvH4ZN3Hn547WVDGxk7X1MOIw3HJOMo+6K/K8j4m5zlLXZJtJei3LCWBjs5zjbpb05ETt2wxlq+yrMOGPA5q8eXMWddoqVKN5taPTq34FflGBhGpfiqTu/wDJtfbQ7KrhoVINThFxtZRaTSVvud8d3H2nkwmNc9lOc08RFSg1dW8y9rS0v4HNQ7PwoTboppPVq+noW06topMrDfy5XXwSneXrY8ZzTFqdWvX5VKk5x/23tH8Ej0TtZmvcUJRTtUq3pxtuk18cvRPfq0eU5nOyUV5ei/aNHH62zc2X8Vt2ZzOVCSnunfjXVN6+p6NCpGcVKLvFq6Z5RhHZHS9nc47mXBN/05evC+poxunOOvkiDRKlXhUV4TUvJpikWpALErCsJSNhWJiYDaADCwAgJegAHnDEDAzAgABEYyIxmaATGhlQAAANGahuYRVa/Ar8+X6jStsxzzuKfBTt3jW+6gn+ZmyLMO9gm90+F+a/dziq1W/O/Nvq+pb9k6v9SVP643X+6Ov2v7HDmnlHXivjdfd6bl60/dhY7vJXUW/Qrcnx1vgk/JnSU8VBK5hvTXL2o8NltZNO8r+N/wAzq8E6iVn4czUlXTjdSV/M2sBiYuN3r+2dMPYzu1nRtqmcvnmbwoRnUl8sdElvKXKMfG5lzztHSoQbnNLr1tyS8fA80zDMZ4ufeSVqcb91D7zl4s04Y3K6Z885j2jmGPnXk6tTd6KK2hHlFfdvqznMRPiqeWhbY6rwxb/dymwsbs061qRlltu6s6CsjMpkIkVLUdqkqFez4oSs+l7ezL7A9oqsdJPjXSW/pL9TlktWvFmSOgplYenomCzmlV04uGXSWns9iwZ5nTrtb6llgs0qQ+So14PVez0Lmew7kTKDD9pHtUp+sf0f6lphMzpVdIzV+j0f47+hWxttsSHYLDPZgOwAW3mjENiMqgAAFIAADEMZFEhmLDsNDbAIzlZX/Aq8VVbb/fp5GfHTcZKVrq3C0/H7GCdLffye6FRGozLhMQ6VSM47xaf6ojMhCN2l1aJvor7eh90qqU4S4eJKXuShWxEdHaS6oxdn2rRpyeqWh0H8j/529DzcstXT0PFzGNzGrBXSt6kZZpjpU24JK/Nv4vRHQy7PqpK8p39H+pW9psxp4Rd1SvOolrtaCXXxOvF+q6xjnydTuuMWGq1Kv9Vttayu72Ld2Xoc5Tx01UdS9238Xj4Mv4VVKKkno1f9T0uPWtPN5O7tU5xV1UfV/kYMMrEZ/wBSbfib1KFl4Dk+VROcrIhGXNsw1alttbaeRGFJy1k7+HIVVGZSTbaJCUbDRKokhpkUTA041GuZljW6mvcLjlqV/gM8qU7K/HHpLf0kX+DzmlU0vwvpLT2exwPEZI1/UuZh6YmgPPaea1Yqym0lsrsC/KBqsQMDMYAAAaAAADRhCV3p6mCrUbfAvV9EZ4JJWRRpuViHERnIE7AZVkmrNXvyK2qpUm1vfZlnSjfVlfmNa7sFTWnKVzPl8OKpFeJrm9kv96Jyy+mjj7zjusqy9ynBrda+x2eFw19ys7L0XZztp8q/M6FRs77Hm6329TP3qMVWnwQlJbqLa80tDxh1G1JybnKfz6/Nrd39fse2VWravc8fzjKZUKsqbfw/NG2l4t6M2/hNS2MP4uXUrm69Kzdth0cVKMZRW0uX5o2szko2hFbbmlSjdmrWsumWdt/B07Idar0J7RNeodTh4V6+e5typ8Oq2+xrYWOpkqz4p2W0fxkTVJsSG2IlSQrikyIaTtkixSYooxTkMJ8d2ZoIw0oG1FBoqVgMnCAyQYgA5KgYAAKAAAE1cLvLzNoAKno2LmTlyAANk/xfkUk/ml5MAFU5emI3cm/vQ8xARn9NPi+uf29o7P8A9qPr9y25AB58ell7rSrbnmmfzbxtZNt24UrvZcK0XTdgBo/C/uf4y/i/2/8AXKY5/wBSXmxYXcANk+pinpv1TXkAHRUbGF3MWC29wAWRs40AEqRlzBAA0nIwy3AADYpmwgAZVkAAGT//2Q==', 45 | name: 'Salaman Khan', 46 | details: 'Sales dashboard have been created', 47 | time: '9.30 AM' 48 | } 49 | ]; 50 | foods = [ 51 | { value: 'steak-0', viewValue: 'Small' }, 52 | { value: 'pizza-1', viewValue: 'Medium' }, 53 | { value: 'tacos-2', viewValue: 'Large' } 54 | ]; 55 | 56 | 57 | } 58 | --------------------------------------------------------------------------------