26-04-2019|16:36

src/app/footer/footer.component.html

@@ -22,13 +22,13 @@
                         <a>Blog</a>
                     </li>
                     <li>
-                        <a>Privacy Policy</a>
+                        <a (click)="goToPage('privacy')">Privacy Policy</a>
                     </li>
                     <li>
-                        <a>Terms of Use</a>
+                        <a (click)="goToPage('termscondition')">Terms & Conditions</a>
                     </li>
                     <li>
-                        <a>Help</a>
+                        <a (click)="goToPage('termsservice')">Terms of Service</a>
                     </li>
                 </ul>
             </div>

src/app/footer/footer.component.ts

 import { Component, OnInit } from '@angular/core';
+import { Router,ActivatedRoute } from '@angular/router';
 
 @Component({
   selector: 'app-footer',
@@ -7,9 +8,18 @@ import { Component, OnInit } from '@angular/core';
 })
 export class FooterComponent implements OnInit {
 
-  constructor() { }
+  constructor(
+    private router        : Router, 
+    private route         : ActivatedRoute
+  ) { }
 
   ngOnInit() {
   }
 
+
+  goToPage(path,data=null){
+    this.router.navigateByUrl(path,{queryParams:data});
+    document.body.scrollTop = document.documentElement.scrollTop = 0;
+  }
+
 }

src/app/home/home.module.ts

@@ -12,13 +12,19 @@ import { ReactiveFormsModule, FormsModule } from '@angular/forms';
 import { BsDatepickerModule } from 'ngx-bootstrap';
 import { MalihuScrollbarModule } from 'ngx-malihu-scrollbar';
 import { ForgotComponent } from './forgot/forgot.component';
+import { TncComponent } from './tnc/tnc.component';
+import { PrivacyComponent } from './privacy/privacy.component';
+import { TnsComponent } from './tns/tns.component';
 
 
 @NgModule({
   declarations: [
     IndexComponent,
      DashboardComponent,
-     ForgotComponent
+     ForgotComponent,
+     TncComponent,
+     PrivacyComponent,
+     TnsComponent
     ],
   imports: [
     FormsModule,

src/app/home/home.routing.ts

@@ -2,11 +2,19 @@ import { ModuleWithProviders } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 import { IndexComponent } from './index/index.component';
 import { DashboardComponent } from './dashboard/dashboard.component';
+import { TncComponent } from './tnc/tnc.component';
+import { PrivacyComponent } from './privacy/privacy.component';
+import { TnsComponent } from './tns/tns.component';
 
 
 const ModuleRoutes: Routes = [
+    
     { path: 'index', component: IndexComponent},
-    { path: 'dashboard', component: DashboardComponent}
+    { path: 'dashboard', component: DashboardComponent},
+    { path: 'termscondition', component: TncComponent},
+    { path: 'termsservice', component: TnsComponent},
+    { path: 'privacy', component: PrivacyComponent}
+    
 ];
 
 export const moduleRouting: ModuleWithProviders = RouterModule.forChild(ModuleRoutes)

src/app/home/privacy/privacy.component.scss

+.terms_wrapper{
+    width:100%;
+    min-height:550px;
+    padding-top:84px;
+    padding-bottom:100px;
+    .terms_tab_head{
+        
+    }
+    ul{
+        background: rgba(0, 0, 0, 0.9);
+        li{
+            font-size: 25px;
+
+            a{
+                border-radius: 0px;
+                color: #a8a8a8;
+                padding: 20px;
+                border:none;
+                &:hover{
+                    border:none;
+                    outline: none;
+                }
+                &:focus{
+                    border:none;
+                    outline: none;
+                }
+            }
+            .active{
+                background-color: rgba(273, 273, 273, 0.2) !important;
+                color: #fff;
+                border:none;
+            }
+
+        }
+    }
+    .tab-content{
+        padding: 30px;
+        p{
+            text-align: justify;
+        }
+        ol{
+            padding-left: 0px;
+            li{
+                font-size: 20px;
+                font-weight: 500;
+                padding-bottom: 15px;
+                
+            }
+            ol{
+                li{
+                    font-weight: 400;
+                    font-size: 16px;
+                }
+            }
+        }
+        
+    }
+}

src/app/home/privacy/privacy.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PrivacyComponent } from './privacy.component';
+
+describe('PrivacyComponent', () => {
+  let component: PrivacyComponent;
+  let fixture: ComponentFixture<PrivacyComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ PrivacyComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PrivacyComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/home/privacy/privacy.component.ts

+import { Component, OnInit } from '@angular/core';
+import { Router,ActivatedRoute } from '@angular/router';
+
+@Component({
+  selector: 'app-privacy',
+  templateUrl: './privacy.component.html',
+  styleUrls: ['./privacy.component.scss']
+})
+export class PrivacyComponent implements OnInit {
+
+  constructor(
+    private router        : Router, 
+    private route         : ActivatedRoute
+  ) { }
+
+  ngOnInit() {
+  }
+
+
+  goToPage(path,data=null){
+    this.router.navigateByUrl(path,{queryParams:data});
+    document.body.scrollTop = document.documentElement.scrollTop = 0;
+  }
+
+}

src/app/home/tnc/tnc.component.scss

+.terms_wrapper{
+    width:100%;
+    min-height:550px;
+    padding-top:84px;
+    padding-bottom:100px;
+    .terms_tab_head{
+        
+    }
+    ul{
+        background: rgba(0, 0, 0, 0.9);
+        li{
+            font-size: 25px;
+
+            a{
+                border-radius: 0px;
+                color: #a8a8a8;
+                padding: 20px;
+                border:none;
+                &:hover{
+                    border:none;
+                    outline: none;
+                }
+                &:focus{
+                    border:none;
+                    outline: none;
+                }
+            }
+            .active{
+                background-color: rgba(273, 273, 273, 0.2) !important;
+                color: #fff;
+                border:none;
+            }
+
+        }
+    }
+    .tab-content{
+        padding: 30px;
+        p{
+            text-align: justify;
+        }
+        ol{
+            padding-left: 0px;
+            li{
+                font-size: 20px;
+                font-weight: 500;
+                padding-bottom: 15px;
+                
+            }
+            ol{
+                li{
+                    font-weight: 400;
+                    font-size: 16px;
+                }
+            }
+        }
+        
+    }
+}

src/app/home/tnc/tnc.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TncComponent } from './tnc.component';
+
+describe('TncComponent', () => {
+  let component: TncComponent;
+  let fixture: ComponentFixture<TncComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ TncComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TncComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/home/tnc/tnc.component.ts

+import { Component, OnInit } from '@angular/core';
+import { Router,ActivatedRoute } from '@angular/router';
+
+@Component({
+  selector: 'app-tnc',
+  templateUrl: './tnc.component.html',
+  styleUrls: ['./tnc.component.scss']
+})
+export class TncComponent implements OnInit {
+
+  constructor(
+    private router        : Router, 
+    private route         : ActivatedRoute
+  ) { }
+
+  ngOnInit() {
+  }
+
+  goToPage(path,data=null){
+    this.router.navigateByUrl(path,{queryParams:data});
+    document.body.scrollTop = document.documentElement.scrollTop = 0;
+  }
+
+}

src/app/home/tns/tns.component.scss

+.terms_wrapper{
+    width:100%;
+    min-height:550px;
+    padding-top:84px;
+    padding-bottom:100px;
+    .terms_tab_head{
+        
+    }
+    ul{
+        background: rgba(0, 0, 0, 0.9);
+        li{
+            font-size: 25px;
+
+            a{
+                border-radius: 0px;
+                color: #a8a8a8;
+                padding: 20px;
+                border:none;
+                &:hover{
+                    border:none;
+                    outline: none;
+                }
+                &:focus{
+                    border:none;
+                    outline: none;
+                }
+            }
+            .active{
+                background-color: rgba(273, 273, 273, 0.2) !important;
+                color: #fff;
+                border:none;
+            }
+
+        }
+    }
+    .tab-content{
+        padding: 30px;
+        p{
+            text-align: justify;
+        }
+        ol{
+            padding-left: 0px;
+            li{
+                font-size: 20px;
+                font-weight: 500;
+                padding-bottom: 15px;
+                
+            }
+            ol{
+                li{
+                    font-weight: 400;
+                    font-size: 16px;
+                }
+            }
+        }
+        
+    }
+}

src/app/home/tns/tns.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TnsComponent } from './tns.component';
+
+describe('TnsComponent', () => {
+  let component: TnsComponent;
+  let fixture: ComponentFixture<TnsComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ TnsComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TnsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/home/tns/tns.component.ts

+import { Component, OnInit } from '@angular/core';
+import { Router,ActivatedRoute } from '@angular/router';
+
+@Component({
+  selector: 'app-tns',
+  templateUrl: './tns.component.html',
+  styleUrls: ['./tns.component.scss']
+})
+export class TnsComponent implements OnInit {
+
+  constructor(
+    private router        : Router, 
+    private route         : ActivatedRoute
+  ) { }
+
+  ngOnInit() {
+  }
+
+  goToPage(path,data=null){
+    this.router.navigateByUrl(path,{queryParams:data});
+    document.body.scrollTop = document.documentElement.scrollTop = 0;
+  }
+
+}

src/app/navbar/navbar.component.scss

@@ -11,7 +11,7 @@
     padding-bottom: 15px;
     z-index: 999;
     .container-fluid {
-        max-width: calc(100% - 15%);
+        max-width: calc(100% - 10%);
         .navbar-brand {
             img {
                 width: 180px;

src/app/purchase/productdetails/productdetails.component.scss

@@ -248,4 +248,123 @@
             }
         }
     }
+    .bottom_product_list{
+        background: #fff;
+        position: relative;
+        .leftRs{
+            position: absolute;
+            left:10px;
+            top: 35%;
+            width:50px;
+            height:50px;
+            border-radius: 50px;
+            background: url("/assets/images/asset_left.png");
+            border:none;
+            background-position: center;
+            background-repeat: no-repeat;
+            background-size: cover;
+            &:focus{
+                outline: none;
+            }
+
+        }
+        .rightRs{
+            position: absolute;
+            right:10px;
+            top: 35%;
+            width:50px;
+            height:50px;
+            border-radius: 50px;
+            background: url("/assets/images/asset_right.png");
+            border:none;
+            background-position: center;
+            background-repeat: no-repeat;
+            background-size: cover;
+            &:focus{
+                outline: none;
+            }
+
+        }
+        li{
+            list-style: none;
+            padding:10px;
+            width:100%;
+            display: inline-block;  
+            .inner_div_product{
+                border:1px solid #eeeeee;
+                min-height: 300px;
+                padding: 15px;
+                margin:0 auto;
+                width:100%;
+                .product_wrapper{
+                    text-align: center;
+                    padding: 10px;
+                    img{
+                        height: 180px;
+                        width: auto;
+                    }
+                }
+                h5{
+                    padding:0px;
+                    margin:0px;
+                    color: #424242;
+                    font-size: 16px;
+                    white-space: nowrap;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    padding-bottom: 5px;
+                }
+                p{
+                    padding:0px;
+                    margin:0px;
+                    color: #a3afbd;
+                    font-size: 14px;
+                    
+                }
+
+                .star_ratting{
+                    padding-top: 2px;
+                    span{
+                        float: right;
+                        color: #000000;
+                    }
+                    .rating { 
+                        border: none;
+                        float: left;
+                      }
+                      
+                      .rating > input { display: none; } 
+                      .rating > label:before { 
+                        margin: 2px;
+                        font-size: 16px;
+                        font-family: FontAwesome;
+                        display: inline-block;
+                        content: "\f005";
+                      }
+                      
+                      .rating > .half:before { 
+                        content: "\f089";
+                        position: absolute;
+                      }
+                      
+                      .rating > label { 
+                        color: #ddd; 
+                       float: right; 
+                       margin:0px;
+                      }
+                      
+                      /***** CSS Magic to Highlight Stars on Hover *****/
+                      
+                      .rating > input:checked ~ label, /* show gold star when clicked */
+                      .rating:not(:checked) > label:hover, /* hover current star */
+                      .rating:not(:checked) > label:hover ~ label { color: #FFD700;  } /* hover previous stars in list */
+                      
+                      .rating > input:checked + label:hover, /* hover current star when changing rating */
+                      .rating > input:checked ~ label:hover,
+                      .rating > label:hover ~ input:checked ~ label, /* lighten current selection */
+                      .rating > input:checked ~ label:hover ~ label { color: #FFED85;  } 
+                }
+            }
+        }
+    }
 }
\ No newline at end of file

src/app/purchase/productdetails/productdetails.component.ts

@@ -2,6 +2,7 @@ import { Component, OnInit } from '@angular/core';
 import { Router,ActivatedRoute } from '@angular/router';
 import { NgxGalleryOptions, NgxGalleryImage, NgxGalleryAnimation } from 'ngx-gallery';
 import * as $ from 'jquery';
+import { NgxCarousel } from 'ngx-carousel';
 
 @Component({
   selector: 'app-productdetails',
@@ -10,6 +11,7 @@ import * as $ from 'jquery';
 })
 export class ProductdetailsComponent implements OnInit {
   count:any;
+  public carouselTile: NgxCarousel;
   constructor(
     private router        : Router, 
     private route         : ActivatedRoute
@@ -35,6 +37,7 @@ minus(){
     galleryImages: NgxGalleryImage[];
 
     ngOnInit(): void {
+      this.carouselTile = {grid: {xs: 1, sm: 2 , md: 4, lg: 8, all: 0},slide: 1, speed: 400,point: { visible: false },load: 2, touch: true, easing: 'ease'}
       
         this.galleryOptions = [
             {
@@ -88,5 +91,6 @@ minus(){
     this.router.navigateByUrl(path,{queryParams:data});
     document.body.scrollTop = document.documentElement.scrollTop = 0;
   }
+  carouselTileLoad(){ return ''; }
 
 }

src/app/purchase/purchase.module.ts

@@ -6,6 +6,7 @@ import { moduleRouting } from './purchase.routing';
 import { SearchbarComponent } from './searchbar/searchbar.component';
 import { Ng5SliderModule } from 'ng5-slider';
 import { NgxGalleryModule } from 'ngx-gallery';
+import { NgxCarouselModule } from 'ngx-carousel';
 
 
 @NgModule({
@@ -14,7 +15,8 @@ import { NgxGalleryModule } from 'ngx-gallery';
     CommonModule,
     moduleRouting,
     Ng5SliderModule,
-    NgxGalleryModule
+    NgxGalleryModule,
+    NgxCarouselModule
   ]
 })
 export class PurchaseModule { }

src/assets/css/responsive.scss

@@ -282,6 +282,11 @@
                     } 
                 }  
             }
+        }
+        .navbar{
+            .container-fluid {
+                max-width: calc(100% - 2%) !important;
+            } 
         } 
     }
 
@@ -319,6 +324,11 @@
                 }  
             }
         }
+        .navbar{
+            .container-fluid {
+                max-width: calc(100% - 2%) !important;
+            } 
+        } 
     }
     @media only screen and (min-width: 1360px) and (max-device-width: 1399px) {
         .purchase_wrapper{
@@ -339,6 +349,11 @@
                 }  
             }
         }
+        .navbar{
+            .container-fluid {
+                max-width: calc(100% - 2%) !important;
+            } 
+        } 
     }
     @media only screen and (min-width: 1400px) and (max-device-width: 1600px) {
         .purchase_wrapper{

src/styles.scss

@@ -762,3 +762,11 @@ bs-datepicker-container{
   }
 
 
+  .bottom_product_list{
+    ngx-carousel{
+        ngx-tile{
+            width:280px !important;
+        }
+    }
+  }
+