Skip to content

D
dcarfixers_angular
Commit 73d3cc08 by Tobin
Options

daily commit

parent 7e19ab0f
Showing with 3065 additions and 369 deletions
package-lock.json
This source diff could not be displayed because it is too large. You can view the blob instead.
package.json
...@@ -11,6 +11,7 @@ ...@@ -11,6 +11,7 @@
}, },
"private": true, "private": true,
"dependencies": { "dependencies": {
"@agm/core": "^1.0.0-beta.5",
"@angular/animations": "~7.1.0", "@angular/animations": "~7.1.0",
"@angular/common": "~7.1.0", "@angular/common": "~7.1.0",
"@angular/compiler": "~7.1.0", "@angular/compiler": "~7.1.0",
...@@ -19,11 +20,15 @@ ...@@ -19,11 +20,15 @@
"@angular/platform-browser": "~7.1.0", "@angular/platform-browser": "~7.1.0",
"@angular/platform-browser-dynamic": "~7.1.0", "@angular/platform-browser-dynamic": "~7.1.0",
"@angular/router": "~7.1.0", "@angular/router": "~7.1.0",
"angular-star-rating": "^4.0.0-beta.3",
"angular-wizard-form": "^0.4.1", "angular-wizard-form": "^0.4.1",
"bootstrap": "^4.1.3", "bootstrap": "^4.1.3",
"core-js": "^2.5.4", "core-js": "^2.5.4",
"hammerjs": "^2.0.8",
"jquery": "^3.3.1", "jquery": "^3.3.1",
"ng2-archwizard": "^2.1.0", "ng2-archwizard": "^2.1.0",
"ngx-carousel": "^1.3.5",
"ngx-google-places-autocomplete": "^2.0.3",
"ngx-slick": "^0.2.1", "ngx-slick": "^0.2.1",
"node-sass": "^4.11.0", "node-sass": "^4.11.0",
"rebuild": "^0.1.2", "rebuild": "^0.1.2",
...@@ -33,13 +38,14 @@ ...@@ -33,13 +38,14 @@
"zone.js": "~0.8.26" "zone.js": "~0.8.26"
}, },
"devDependencies": { "devDependencies": {
"@angular-devkit/build-angular": "~0.11.0", "@angular-devkit/build-angular": "^0.11.4",
"@angular/cli": "~7.1.2", "@angular/cli": "~7.1.2",
"@angular/compiler-cli": "~7.1.0", "@angular/compiler-cli": "~7.1.0",
"@angular/language-service": "~7.1.0", "@angular/language-service": "~7.1.0",
"@types/node": "~8.9.4", "@types/googlemaps": "^3.30.16",
"@types/jasmine": "~2.8.8", "@types/jasmine": "~2.8.8",
"@types/jasminewd2": "~2.0.3", "@types/jasminewd2": "~2.0.3",
"@types/node": "^8.9.5",
"codelyzer": "~4.5.0", "codelyzer": "~4.5.0",
"jasmine-core": "~2.99.1", "jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1", "jasmine-spec-reporter": "~4.2.1",
......
src/app/home/dashboard/dashboard.component.html 0 → 100644
<div class="main_wrapper">
<section class="module parallax parallax_title">
<div class="title_banner_overlay">
<div class="title_banner">
<div class="container">
</div>
</div>
</div>
</section>
<section class="dashboard_tabs">
<div class="container-fluid">
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active profile" data-toggle="tab" href="#profile">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link vehicle" data-toggle="tab" href="#vehicle">My Vehicle</a>
</li>
<li class="nav-item">
<a class="nav-link estimate" data-toggle="tab" href="#estimate">Estimates</a>
</li>
<li class="nav-item">
<a class="nav-link appointment" data-toggle="tab" href="#appointment">Appointments</a>
</li>
<li class="nav-item">
<a class="nav-link time" data-toggle="tab" href="#service">
Service History
</a>
</li>
</ul>
</div>
</section>
<section class="dashboard_tab_content">
<div class="container-fluid">
<div class="tab-content">
<div class="tab-pane container active" id="profile">
<div class="row">
<div class="col-md-7">
<div class="row line_row">
<div class="col-md-12">
<h3>Personal Information</h3>
<hr>
</div>
</div>
<div class="row line_row">
<div class="col-md-12">
<p>Profile Picture</p>
<div class="profile_pic">
<div class="edit">
<input type="file">
</div>
</div>
</div>
</div>
<div class="row line_row">
<div class="col-md-6">
<p>First Name</p>
<input class="text_input" placeholder="" type="text">
</div>
<div class="col-md-6">
<p>Last Name</p>
<input class="text_input" placeholder="" type="text">
</div>
</div>
<div class="row line_row">
<div class="col-md-6">
<p>Email</p>
<input class="text_input" placeholder="" type="text">
</div>
<div class="col-md-6">
<p>Zip Code</p>
<input class="text_input" placeholder="" type="text">
</div>
</div>
<p>Contact Details</p>
<div class="row line_row">
<div class="col-md-6">
<input class="text_input" placeholder="House Name" type="text">
</div>
<div class="col-md-6">
<input class="text_input" placeholder="Street name" type="text">
</div>
</div>
<div class="row line_row">
<div class="col-md-6">
<input class="text_input" placeholder="State" type="text">
</div>
<div class="col-md-6">
<input class="text_input" placeholder="Region" type="text">
</div>
</div>
<div class="row line_row">
<div class="col-md-6">
<input class="text_input" placeholder="Country" type="text">
</div>
<div class="col-md-6">
<input class="text_input" placeholder="Phone Number" type="number">
</div>
</div>
<div class="row line_row">
<div class="col-md-12">
<h3>Login Information</h3>
<hr>
</div>
</div>
<div class="row line_row">
<div class="col-md-6">
<p>User Name</p>
<input class="text_input" placeholder="" type="text">
</div>
<div class="col-md-6">
<p>Email Address</p>
<input class="text_input" placeholder="" type="mail">
</div>
</div>
<div class="row line_row">
<div class="col-md-12">
<h3>Change Password</h3>
<hr>
</div>
</div>
<div class="row line_row">
<div class="col-md-6">
<p>Current Password</p>
<input class="text_input" placeholder="" type="password">
</div>
<div class="col-md-6">
<p>New Password</p>
<input class="text_input" placeholder="" type="password">
</div>
</div>
<div class="row line_row">
<div class="col-md-6">
<p>Confirm new Password</p>
<input class="text_input" placeholder="" type="password">
</div>
<div class="col-md-6">
</div>
</div>
<div class="row line_row">
<div class="col-md-12">
<button class="save_btn">Save</button>
</div>
</div>
</div>
<div class="col-md-5"></div>
</div>
</div>
<div class="tab-pane container fade" id="vehicle">
<div class="row">
<div class="col-md-12">
<div class="row line_row">
<div class="col-md-12">
<h3>Vechicles and Information</h3>
<hr>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane container fade" id="estimate">3</div>
<div class="tab-pane container fade" id="appointment">4</div>
<div class="tab-pane container fade" id="service">5</div>
</div>
</div>
</section>
</div>
\ No newline at end of file
src/app/home/dashboard/dashboard.component.scss 0 → 100644
.parallax_title {
background: url("/assets/images/asset_landing_background.png");
}
.title_banner {
width: 100%;
background: rgba(0, 0, 0, 0.5);
height: 300px;
}
.dashboard_tabs {
background: rgba(0, 0, 0, 0.9);
.container-fluid {
width: calc(100% - 15%);
ul {
margin: 0px;
padding: 0px;
border: none;
li {
list-style: none;
display: inline-block;
width: 20%;
color: #fff;
background: transparent;
cursor: pointer;
a.active {
background-color: rgba(273, 273, 273, 0.2) !important;
}
a.profile {
background-image: url("/assets/images/asset_dashboard.png");
}
a.vehicle {
background-image: url("/assets/images/asset_car.png");
}
a.estimate {
background-image: url("/assets/images/asset_doc.png");
}
a.appointment {
background-image: url("/assets/images/asset_calender.png");
}
a.time {
background-image: url("/assets/images/asset_time.png");
}
a {
color: #fff;
padding: 20px;
font-size: 18px;
font-weight: 500;
cursor: pointer;
border: 1px solid transparent;
border-radius: 0px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
-ms-border-radius: 0px;
-o-border-radius: 0px;
background: transparent;
background-size: 30px;
background-repeat: no-repeat;
background-position: 20px;
padding-left: 65px;
&:focus {
background-color: rgba(273, 273, 273, 0.2);
}
&:hover {
background-color: rgba(273, 273, 273, 0.2);
}
}
}
}
}
}
.dashboard_tab_content {
padding-bottom: 80px;
.container-fluid {
width: calc(100% - 15%);
.tab-content {
.container {
max-width: 100%;
.line_row {
margin-bottom: 20px;
}
h3 {
font-weight: 400;
padding-top: 60px;
}
hr {}
.save_btn {
height: 45px;
border-radius: 0px;
padding-left: 10%;
padding-right: 10%;
color: #fff;
background: #2655bf;
border: none;
font-size: 20px;
font-weight: 300;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
-ms-border-radius: 0px;
-o-border-radius: 0px;
}
.profile_pic {
width: 120px;
height: 120px;
background: #a8a8a8;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
object-fit: cover;
object-position: center;
margin-top: 20px;
position: relative;
.edit {
width: 35px;
height: 35px;
cursor: pointer;
background-color: #1e1e1e;
background-image: url("/assets/images/asset_edit.png");
background-position: center;
background-repeat: no-repeat;
background-size: 20px;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
position: absolute;
top: 0px;
right: 0px;
input {
position: absolute;
top: 0px;
width: 35px;
cursor: pointer;
height: 35px;
left: 0px;
right: 0px;
bottom: 0px;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
opacity: 0;
}
}
img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
}
}
p {
margin: 0px;
padding-bottom: 10px;
color: #1e1e1e;
font-weight: 600;
font-size: 16px;
}
.text_input {
width: 100%;
border: 1px solid #1e1e1e;
height: 40px;
padding-left: 15px;
border-radius: 0px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
-ms-border-radius: 0px;
-o-border-radius: 0px;
}
}
}
}
}
\ No newline at end of file
src/app/home/dashboard/dashboard.component.spec.ts 0 → 100644
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { DashboardComponent } from './dashboard.component';
describe('DashboardComponent', () => {
let component: DashboardComponent;
let fixture: ComponentFixture<DashboardComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ DashboardComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(DashboardComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
src/app/home/dashboard/dashboard.component.ts 0 → 100644
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-dashboard',
templateUrl: './dashboard.component.html',
styleUrls: ['./dashboard.component.scss']
})
export class DashboardComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
src/app/home/home.module.ts
...@@ -3,13 +3,31 @@ import { CommonModule } from '@angular/common'; ...@@ -3,13 +3,31 @@ import { CommonModule } from '@angular/common';
import { IndexComponent } from './index/index.component'; import { IndexComponent } from './index/index.component';
import { moduleRouting } from './home.routing'; import { moduleRouting } from './home.routing';
import { ArchwizardModule } from 'ng2-archwizard'; import { ArchwizardModule } from 'ng2-archwizard';
import { NgxCarouselModule } from 'ngx-carousel';
import { AgmCoreModule } from '@agm/core';
import { StarRatingModule } from 'angular-star-rating';
import 'hammerjs';
import { DashboardComponent } from './dashboard/dashboard.component';
import { ReactiveFormsModule, FormsModule } from '@angular/forms';
@NgModule({ @NgModule({
declarations: [IndexComponent], declarations: [
IndexComponent,
DashboardComponent
],
imports: [ imports: [
FormsModule,
CommonModule, CommonModule,
moduleRouting, moduleRouting,
ArchwizardModule StarRatingModule,
ArchwizardModule,
NgxCarouselModule,
ReactiveFormsModule,
AgmCoreModule.forRoot({
apiKey: 'AIzaSyCcc-YDSJyDpehNE6qfntfWpEQ4uS4aq6A',
libraries: ["places"]
})
] ]
}) })
export class HomeModule { } export class HomeModule { }
src/app/home/home.routing.ts
import { ModuleWithProviders } from '@angular/core'; import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router'; import { Routes, RouterModule } from '@angular/router';
import { IndexComponent } from './index/index.component'; import { IndexComponent } from './index/index.component';
import { DashboardComponent } from './dashboard/dashboard.component';
const ModuleRoutes: Routes = [ const ModuleRoutes: Routes = [
{ path: 'index', component: IndexComponent} { path: 'index', component: IndexComponent},
{path: 'dashboard', component: DashboardComponent}
]; ];
export const moduleRouting: ModuleWithProviders = RouterModule.forChild(ModuleRoutes) export const moduleRouting: ModuleWithProviders = RouterModule.forChild(ModuleRoutes)
......
src/app/home/index/index.component.html
<input type="hidden" #wizardModal data-toggle="modal" data-target="#wizard">
<div class="main_wrapper"> <div class="main_wrapper">
<section class="module parallax parallax_title"> <section class="module parallax parallax_title">
<div class="title_banner_overlay"> <div class="title_banner_overlay">
...@@ -5,9 +7,9 @@ ...@@ -5,9 +7,9 @@
<div class="container"> <div class="container">
<h1>Auto service with Warranty<br> & Your interest is Ours.</h1> <h1>Auto service with Warranty<br> & Your interest is Ours.</h1>
<h5>Where is your car?</h5> <h5>Where is your car?</h5>
<div class="search_input_container"> <div class="search_input_container" [ngClass]="{'input_error': searchLocError}" >
<input class="" placeholder="Enter City, State or Zip Code"> <input #googleLocSearch placeholder="Enter Location" autocorrect="off" autocapitalize="off" spellcheck="off" type="text" (keyup)="searchLocError = false">
<button class="get_started_btn">GET STARTED</button> <button class="get_started_btn" (click)="getVehicleLoc(googleLocSearch.value)">GET STARTED</button>
</div> </div>
</div> </div>
</div> </div>
...@@ -18,7 +20,6 @@ ...@@ -18,7 +20,6 @@
<hr> <hr>
<br> <br>
<br> <br>
<br>
<div class="container-fluid"> <div class="container-fluid">
<div class="row"> <div class="row">
<div class="col-md-1"></div> <div class="col-md-1"></div>
...@@ -69,7 +70,7 @@ ...@@ -69,7 +70,7 @@
<div class="col-md-2"></div> <div class="col-md-2"></div>
<div class="col-md-2 textCenter p0"> <div class="col-md-2 textCenter p0">
<img src="assets/images/asset_icon5.png"> <img src="assets/images/asset_icon5.png">
<h4>Parts Replacement</h4> <h4>Parts and Replacement</h4>
<p>Review causes, symptoms, and estimate repair costs.</p> <p>Review causes, symptoms, and estimate repair costs.</p>
<button class="learn_more"> <button class="learn_more">
GO GO
...@@ -89,7 +90,727 @@ ...@@ -89,7 +90,727 @@
</div> </div>
</section> </section>
<section class="testimonial_div"> <section class="testimonial_div">
<h3>CUSTOMER TESTIMONIALS</h3>
<hr>
<br>
<br>
<div class="container-fluid"> <div class="container-fluid">
<ngx-carousel [inputs]="carouselTile" (carouselLoad)="carouselTileLoad()">
<ngx-tile NgxCarouselItem>
<div class="testmonial_div">
<div class="testimonial_inner">
<h5>Good service!!!</h5>
<p>t is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal....</p>
<p class="textRight m0">Read more</p>
<div class="arrow-down"></div>
</div>
<div class="testimonial_bottom">
<div class="testimonial_circle floatLeft"></div>
<div class="testimonial_detail floatLeft">
<h4>John doe</h4>
<p>March 24</p>
</div>
<div class="clear"></div>
</div>
</div>
</ngx-tile>
<ngx-tile NgxCarouselItem>
<div class="testmonial_div">
<div class="testimonial_inner">
<h5>Good service!!!</h5>
<p>t is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal....</p>
<p class="textRight m0">Read more</p>
<div class="arrow-down"></div>
</div>
<div class="testimonial_bottom">
<div class="testimonial_circle floatLeft"></div>
<div class="testimonial_detail floatLeft">
<h4>John doe</h4>
<p>March 24</p>
</div>
<div class="clear"></div>
</div>
</div>
</ngx-tile>
<ngx-tile NgxCarouselItem>
<div class="testmonial_div">
<div class="testimonial_inner">
<h5>Good service!!!</h5>
<p>t is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal....</p>
<p class="textRight m0">Read more</p>
<div class="arrow-down"></div>
</div>
<div class="testimonial_bottom">
<div class="testimonial_circle floatLeft"></div>
<div class="testimonial_detail floatLeft">
<h4>John doe</h4>
<p>March 24</p>
</div>
<div class="clear"></div>
</div>
</div>
</ngx-tile>
<ngx-tile NgxCarouselItem>
<div class="testmonial_div">
<div class="testimonial_inner">
<h5>Good service!!!</h5>
<p>t is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal....</p>
<p class="textRight m0">Read more</p>
<div class="arrow-down"></div>
</div>
<div class="testimonial_bottom">
<div class="testimonial_circle floatLeft"></div>
<div class="testimonial_detail floatLeft">
<h4>John doe</h4>
<p>March 24</p>
</div>
<div class="clear"></div>
</div>
</div>
</ngx-tile>
<ngx-tile NgxCarouselItem>
<div class="testmonial_div">
<div class="testimonial_inner">
<h5>Good service!!!</h5>
<p>t is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal....</p>
<p class="textRight m0">Read more</p>
<div class="arrow-down"></div>
</div>
<div class="testimonial_bottom">
<div class="testimonial_circle floatLeft"></div>
<div class="testimonial_detail floatLeft">
<h4>John doe</h4>
<p>March 24</p>
</div>
<div class="clear"></div>
</div>
</div>
</ngx-tile>
<button NgxCarouselPrev class='leftRs'>&lt;</button>
<button NgxCarouselNext class='rightRs'>&gt;</button>
</ngx-carousel>
</div>
</section>
<section class="featured_on">
<h3>FEATURED ON</h3>
<hr>
<br>
<br>
<div class="container-fluid">
<ngx-carousel [inputs]="featuredOn" (carouselLoad)="featuredOnLoad()">
<ngx-tile NgxCarouselItem>
<div class="feature_item">
<img src="assets/images/asset_j1.png">
</div>
</ngx-tile>
<ngx-tile NgxCarouselItem>
<div class="feature_item">
<img src="assets/images/asset_j2.png">
</div>
</ngx-tile>
<ngx-tile NgxCarouselItem>
<div class="feature_item">
<img src="assets/images/asset_j3.png">
</div>
</ngx-tile>
<ngx-tile NgxCarouselItem>
<div class="feature_item">
<img src="assets/images/asset_j4.png">
</div>
</ngx-tile>
<ngx-tile NgxCarouselItem>
<div class="feature_item">
<img src="assets/images/asset_j5.png">
</div>
</ngx-tile>
<ngx-tile NgxCarouselItem>
<div class="feature_item">
<img src="assets/images/asset_j6.png">
</div>
</ngx-tile>
<button NgxCarouselPrev class='leftRs'>&lt;</button>
<button NgxCarouselNext class='rightRs'>&gt;</button>
</ngx-carousel>
</div> </div>
</section> </section>
</div> </div>
<!-- WIZARD-MODAL-STARTS-->
<div class="modal" id="wizard">
<div class="modal-dialog modal-full">
<div class="modal-content login_modal_wrapper">
<div class="modal_close" data-dismiss="modal">
&times;
</div>
<div class="modal-body">
<div class="login_modal_content">
<div class="login_modal_inner">
<div class="wizard_inner">
<wizard>
<wizard-step stepTitle="Title of step 1">
<h3>VEHICLE INFORMATION</h3>
<div class="row">
<div class="col-md-6">
<select #modelYear>
<option>YEAR</option>
<option *ngFor="let date of modelDates">{{date}}</option>
</select>
</div>
<div class="col-md-6">
<select (change)="get_model($event.target.value)" #maker>
<option>MAKE</option>
<option *ngFor="let car_date of carSearchJsonData; let key = index" value="{{key}}">{{car_date.brand}}</option>
</select>
</div>
</div>
<div class="row">
<div class="col-md-6" >
<select #modelName>
<option *ngIf="!carModel">MODEL</option>
<option *ngFor="let car_models of carModel">{{car_models}}</option>
</select>
</div>
<div class="col-md-6">
<input #milage placeholder="APPROX VEHICLE MILEAGE" type="">
</div>
</div>
<h6 class="textLeft pb10">OPTIONAL</h6>
<div class="row">
<div class="col-md-6">
<input #emgine placeholder="ENGINE" type="">
</div>
<div class="col-md-6">
<input #trim placeholder="TRIM" type="">
</div>
</div>
<div class="row">
<div class="col-md-12">
<h6 class="pt10 textLeft"><strong>Note:</strong> 'Engine' and 'Trim' are optional... but providing them will improve your results and allow you to select a mileage-based maintenance service for your vehicle.</h6>
</div>
</div>
<div class="row">
<div class="col-md-12">
<button class="log_btn prev_btn floatLeft" type="button" data-dismiss="modal">PREVIOUS</button>
<button class="log_btn next_btn floatRight" type="button" (click)="nextStep2()">
NEXT
</button>
<!-- nextStep -->
</div>
</div>
</wizard-step>
<wizard-step stepTitle="Title of step 2" optionalStep>
<h3>SERVICES</h3>
<div class="row">
<div class="col-md-12">
<input class="search" placeholder="Search Services" type="">
</div>
</div>
<div class="row">
<div class="col-md-12">
<h6 class="pt10 textLeft">Or Select your Services</h6>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="service_list">
<ul>
<li>
<button id="custom_check_button">
<label>
<input id="1" type="checkbox" name="services" value="A">
<p>Diagnosis</p>
</label>
</button>
</li>
<li>
<button id="custom_check_button">
<label>
<input id="1" type="checkbox" name="services" value="A">
<p>Ac / Heating</p>
</label>
</button>
</li>
<li>
<button id="custom_check_button">
<label>
<input id="1" type="checkbox" name="services" value="A">
<p>Brakes</p>
</label>
</button>
</li>
<li>
<button id="custom_check_button">
<label>
<input id="1" type="checkbox" name="services" value="A">
<p>Engine</p>
</label>
</button>
</li>
<li>
<button id="custom_check_button">
<label>
<input id="1" type="checkbox" name="services" value="A">
<p>EXHAUST</p>
</label>
</button>
</li>
<li>
<button id="custom_check_button">
<label>
<input id="1" type="checkbox" name="services" value="A">
<p>FLUIDS</p>
</label>
</button>
</li>
<li>
<button id="custom_check_button">
<label>
<input id="1" type="checkbox" name="services" value="A">
<p>TIRES</p>
</label>
</button>
</li>
<li>
<button id="custom_check_button">
<label>
<input id="1" type="checkbox" name="services" value="A">
<p>TRANSMISSION</p>
</label>
</button>
</li>
</ul>
</div>
</div>
</div>
<br>
<div class="row">
<div class="col-md-12">
<button class="log_btn prev_btn floatLeft" type="button" previousStep>PREVIOUS</button>
<button class="log_btn next_btn floatRight" type="button" nextStep>NEXT</button>
</div>
</div>
</wizard-step>
<wizard-step stepTitle="Title of step 3">
<h3>DESCRIPTION</h3>
<div class="row">
<div class="col-md-12">
<h6 class="pt10 textLeft">Add notes for General Diagnosis (Please provide description in notes section) (optional) *</h6>
</div>
</div>
<div class="row">
<div class="col-md-12">
<textarea class="textarea_input" rows="5" placeholder="Additional Informations you may can gave">
Additional Informations you may can gave
</textarea>
</div>
</div>
<div class="row">
<div class="col-md-12">
<h6 class="pt10 textLeft">Add notes for General Diagnosis (Please provide description in notes section) (optional) *</h6>
</div>
</div>
<div class="row">
<div class="col-md-12">
<textarea class="textarea_input" rows="5">
Additional Informations you may can gave
</textarea>
</div>
</div>
<div class="row">
<div class="col-md-12">
<button class="log_btn prev_btn floatLeft" type="button" previousStep>PREVIOUS</button>
<button class="log_btn next_btn floatRight" type="button" nextStep>
NEXT
</button>
</div>
</div>
</wizard-step>
<wizard-step stepTitle="Title of step 4">
<h3>SUMMARY</h3>
<div class="row">
<div class="col-md-12">
<h6 class="pt10 textLeft">Please check and confirm your services</h6>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="selected_services">
<ul>
<li>EXHAUST<a>&times;</a></li>
<li>TIRES<a>&times;</a></li>
<li>FLUIDS<a>&times;</a></li>
<li>BRAKES<a>&times;</a></li>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<h6 class="pt10 textLeft"><a goToStep="1">Add more services</a></h6>
</div>
</div>
<div class="row">
<div class="col-md-12 textCenter">
<button *ngIf="!loginDetails" (click)="resetForm()" class="wizard_signin" type="button" data-dismiss="modal" data-toggle="modal" data-target="#login">SIGN IN</button>
<button class="wizard_quotes" type="button" data-toggle="modal" data-target="#quotes">VIEW SERVICE QUOTE</button>
</div>
</div>
</wizard-step>
</wizard>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- WIZARD-MODAL-ENDS-->
<!-- QUOTES-MODAL-STARTS-->
<div class="modal" id="quotes">
<div class="modal-dialog modal-full">
<div class="modal-content login_modal_wrapper">
<div class="modal_close" data-dismiss="modal">
&times;
</div>
<div class="modal-body">
<div class="quote_service_wrapper">
<div class="row">
<div class="col-md-8">
<div class="quote_header">
<h4>Car Fixxers Guarantee</h4>
<p>Quality service through our network of approved repair shops Rewards to use towards future services, Vehicle maintenance tracker to easily manage service history Safe and secure payment processing, Dedicated support to
handle any repair related questions Peace-of-Mind Guarantee - no unexpected charges</p>
</div>
<div class="quote_schedule_header">
<div class="row">
<div class="col-md-6">
<h4>Select your day and date</h4>
</div>
<div class="col-md-6">
<button class="quote_arrow left floatLeft"></button>
<div class="schedule_dates floatLeft">
<ul>
<li>Mon 28-12-2018</li>
<li>Mon 29-12-2018</li>
<li>Mon 30-12-2018</li>
</ul>
</div> <button class="quote_arrow right floatRight">
</button>
<div class="clear"></div>
</div>
</div>
</div>
<div class="quote_schedule_list">
<ul>
<li>
<div class="row">
<div class="col-md-6">
<div class="mechanic_profile">
<div class="mechanic_profile_inner">
<div class="mechanic_photo_wrapper">
<div class="mechanic_photo">
<img src="assets/images/asset_m1.png">
</div>
<!-- <star-rating-comp [starType]="'svg'" [rating]="2.63"></star-rating-comp> -->
</div>
<div class="mechanic_detail">
<h4>Rooney Walker</h4>
<h5>Light motor vechicle</h5>
<p>14 North West Avenue Morgrel<br> South Ampton</p>
<h6>+00961 96542584</h6>
<button class="view_profile">View Profile</button>
<button class="book_now">Book now</button>
</div>
<div class="clear"></div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="scheduletiming_listing">
<ul>
<li>09:30 AM</li>
<li>09:30 AM</li>
<li>09:30 AM</li>
<li>09:30 AM</li>
<li>09:30 AM</li>
<li>09:30 AM</li>
<li>09:30 AM</li>
<li>09:30 AM</li>
<li>09:30 AM</li>
</ul>
<ul>
<li>09:30 AM</li>
<li>09:30 AM</li>
<li>09:30 AM</li>
<li>09:30 AM</li>
<li>09:30 AM</li>
<li>09:30 AM</li>
<li>09:30 AM</li>
<li>09:30 AM</li>
<li>09:30 AM</li>
<li>09:30 AM</li>
</ul>
<ul>
<li>09:30 AM</li>
<li>09:30 AM</li>
<li>09:30 AM</li>
<li>09:30 AM</li>
<li>09:30 AM</li>
<li>09:30 AM</li>
<li>09:30 AM</li>
<li>09:30 AM</li>
<li>09:30 AM</li>
<li>09:30 AM</li>
</ul>
</div>
<div class="scheduletiming_btm_btns">
<div class="btm_btns"></div>
<div class="btm_btns"></div>
<div class="btm_btns"></div>
</div>
</div>
</div>
</li>
<li>
<div class="row">
<div class="col-md-6">
<div class="mechanic_profile">
<div class="mechanic_profile_inner">
<div class="mechanic_photo_wrapper">
<div class="mechanic_photo">
<img src="assets/images/asset_m1.png">
</div>
<!-- <star-rating-comp [starType]="'svg'" [rating]="2.63"></star-rating-comp> -->
</div>
<div class="mechanic_detail">
<h4>Rooney Walker</h4>
<h5>Light motor vechicle</h5>
<p>14 North West Avenue Morgrel<br> South Ampton</p>
<h6>+00961 96542584</h6>
<button class="view_profile">View Profile</button>
<button class="book_now">Book now</button>
</div>
<div class="clear"></div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="scheduletiming_listing">
<ul>
<li>09:30 AM</li>
<li>09:30 AM</li>
<li>09:30 AM</li>
<li>09:30 AM</li>
<li>09:30 AM</li>
<li>09:30 AM</li>
<li>09:30 AM</li>
<li>09:30 AM</li>
<li>09:30 AM</li>
</ul>
<ul>
<li>09:30 AM</li>
<li>09:30 AM</li>
<li>09:30 AM</li>
<li>09:30 AM</li>
<li>09:30 AM</li>
<li>09:30 AM</li>
<li>09:30 AM</li>
<li>09:30 AM</li>
<li>09:30 AM</li>
<li>09:30 AM</li>
</ul>
<ul>
<li>09:30 AM</li>
<li>09:30 AM</li>
<li>09:30 AM</li>
<li>09:30 AM</li>
<li>09:30 AM</li>
<li>09:30 AM</li>
<li>09:30 AM</li>
<li>09:30 AM</li>
<li>09:30 AM</li>
<li>09:30 AM</li>
</ul>
</div>
<div class="scheduletiming_btm_btns">
<div class="btm_btns"></div>
<div class="btm_btns"></div>
<div class="btm_btns"></div>
</div>
</div>
</div>
</li>
<li>
<div class="row">
<div class="col-md-6">
<div class="mechanic_profile">
<div class="mechanic_profile_inner">
<div class="mechanic_photo_wrapper">
<div class="mechanic_photo">
<img src="assets/images/asset_m1.png">
</div>
<!-- <star-rating-comp [starType]="'svg'" [rating]="2.63"></star-rating-comp> -->
</div>
<div class="mechanic_detail">
<h4>Rooney Walker</h4>
<h5>Light motor vechicle</h5>
<p>14 North West Avenue Morgrel<br> South Ampton</p>
<h6>+00961 96542584</h6>
<button class="view_profile">View Profile</button>
<button class="book_now">Book now</button>
</div>
<div class="clear"></div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="scheduletiming_listing">
<ul>
<li>09:30 AM</li>
<li>09:30 AM</li>
<li>09:30 AM</li>
<li>09:30 AM</li>
<li>09:30 AM</li>
<li>09:30 AM</li>
<li>09:30 AM</li>
<li>09:30 AM</li>
<li>09:30 AM</li>
</ul>
<ul>
<li>09:30 AM</li>
<li>09:30 AM</li>
<li>09:30 AM</li>
<li>09:30 AM</li>
<li>09:30 AM</li>
<li>09:30 AM</li>
<li>09:30 AM</li>
<li>09:30 AM</li>
<li>09:30 AM</li>
<li>09:30 AM</li>
</ul>
<ul>
<li>09:30 AM</li>
<li>09:30 AM</li>
<li>09:30 AM</li>
<li>09:30 AM</li>
<li>09:30 AM</li>
<li>09:30 AM</li>
<li>09:30 AM</li>
<li>09:30 AM</li>
<li>09:30 AM</li>
<li>09:30 AM</li>
</ul>
</div>
<div class="scheduletiming_btm_btns">
<div class="btm_btns"></div>
<div class="btm_btns"></div>
<div class="btm_btns"></div>
</div>
</div>
</div>
</li>
<li>
<div class="row">
<div class="col-md-6">
<div class="mechanic_profile">
<div class="mechanic_profile_inner">
<div class="mechanic_photo_wrapper">
<div class="mechanic_photo">
<img src="assets/images/asset_m1.png">
</div>
<!-- <star-rating-comp [starType]="'svg'" [rating]="2.63"></star-rating-comp> -->
</div>
<div class="mechanic_detail">
<h4>Rooney Walker</h4>
<h5>Light motor vechicle</h5>
<p>14 North West Avenue Morgrel<br> South Ampton</p>
<h6>+00961 96542584</h6>
<button class="view_profile">View Profile</button>
<button class="book_now">Book now</button>
</div>
<div class="clear"></div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="scheduletiming_listing">
<ul>
<li>09:30 AM</li>
<li>09:30 AM</li>
<li>09:30 AM</li>
<li>09:30 AM</li>
<li>09:30 AM</li>
<li>09:30 AM</li>
<li>09:30 AM</li>
<li>09:30 AM</li>
<li>09:30 AM</li>
</ul>
<ul>
<li>09:30 AM</li>
<li>09:30 AM</li>
<li>09:30 AM</li>
<li>09:30 AM</li>
<li>09:30 AM</li>
<li>09:30 AM</li>
<li>09:30 AM</li>
<li>09:30 AM</li>
<li>09:30 AM</li>
<li>09:30 AM</li>
</ul>
<ul>
<li>09:30 AM</li>
<li>09:30 AM</li>
<li>09:30 AM</li>
<li>09:30 AM</li>
<li>09:30 AM</li>
<li>09:30 AM</li>
<li>09:30 AM</li>
<li>09:30 AM</li>
<li>09:30 AM</li>
<li>09:30 AM</li>
</ul>
</div>
<div class="scheduletiming_btm_btns">
<div class="btm_btns"></div>
<div class="btm_btns"></div>
<div class="btm_btns"></div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="col-md-4">
<div class="service_list">
<h4>Services</h4>
<p>Steering suspension</p>
<p>|</p>
<p>Tire Pressure</p>
<p>|</p>
<p>Exhaust Manifold</p>
<p>|</p>
<p>Oil filter change</p>
<div class="clear"></div>
</div>
<div class="service_map">
<agm-map [latitude]="lat" [longitude]="lng">
<agm-marker [latitude]="lat" [longitude]="lng"></agm-marker>
</agm-map>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- QUOTES-MODAL-ENDS-->
\ No newline at end of file
src/app/home/index/index.component.scss
...@@ -36,7 +36,7 @@ ...@@ -36,7 +36,7 @@
height: 40px; height: 40px;
width: calc(100% - 120px); width: calc(100% - 120px);
background: transparent; background: transparent;
border: none; border: none !important;
padding-left: 15px; padding-left: 15px;
&:focus { &:focus {
border: none; border: none;
...@@ -69,8 +69,11 @@ ...@@ -69,8 +69,11 @@
} }
.how_it_works { .how_it_works {
width: 100%; width: 100%;
padding-top: 50px; padding-top: 60px;
padding-bottom: 50px; padding-bottom: 60px;
.container-fluid {
max-width: calc(100% - 15%);
}
img { img {
width: 120px; width: 120px;
} }
...@@ -97,6 +100,7 @@ ...@@ -97,6 +100,7 @@
padding-bottom: 20px; padding-bottom: 20px;
padding-top: 15px; padding-top: 15px;
font-size: 20px; font-size: 20px;
font-weight: 700;
} }
p { p {
color: #2b4468; color: #2b4468;
...@@ -121,8 +125,8 @@ ...@@ -121,8 +125,8 @@
} }
.service_check { .service_check {
width: 100%; width: 100%;
padding-top: 50px; padding-top: 60px;
padding-bottom: 50px; padding-bottom: 60px;
background: #f8f8f8; background: #f8f8f8;
.container-fluid { .container-fluid {
max-width: calc(100% - 15%); max-width: calc(100% - 15%);
...@@ -134,6 +138,7 @@ ...@@ -134,6 +138,7 @@
color: #2b4468; color: #2b4468;
padding-bottom: 20px; padding-bottom: 20px;
padding-top: 15px; padding-top: 15px;
font-weight: 700;
font-size: 20px; font-size: 20px;
} }
p { p {
...@@ -157,4 +162,748 @@ ...@@ -157,4 +162,748 @@
margin-top: 30px; margin-top: 30px;
} }
} }
.testimonial_div {
width: 100%;
padding-top: 60px;
h3 {
text-align: center;
color: #1e1e1e;
text-transform: uppercase;
font-weight: 600;
}
hr {
width: 80px;
margin: 0 auto;
border: 3px solid #e3e9f7;
margin-top: 15px;
height: 0px;
}
.container-fluid {
max-width: calc(100% - 25%);
position: relative;
border-bottom: 1px solid #e6e8e9;
.testmonial_div {
padding: 20px;
.testimonial_inner {
background: #f2f6f8;
padding: 20px;
padding-top: 25px;
border-radius: 15px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
-ms-border-radius: 15px;
-o-border-radius: 15px;
position: relative;
.arrow-down {
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-top: 15px solid #f2f6f8;
position: absolute;
bottom: -15px;
left: 35px;
}
h5 {
color: #37547e;
font-weight: 700;
}
p {
color: #37547e;
font-weight: 400;
font-size: 15px;
text-align: justify;
}
}
.testimonial_bottom {
width: 100%;
padding: 20px;
.testimonial_circle {
width: 60px;
height: 60px;
background: #2655bf;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
}
.testimonial_detail {
width: calc(100% - 60px);
padding: 10px;
padding-left: 15px;
h4 {
color: #37547e;
font-weight: 700;
text-align: left;
margin: 0px;
font-size: 20px;
}
p {
color: #37547e;
font-weight: 300;
margin: 0px;
}
}
}
}
}
.leftRs {
background: url("/assets/images/asset_left.png");
width: 40px;
height: 40px;
content: none;
color: transparent;
background-repeat: no-repeat;
background-position: center;
background-size: 40px;
border: none;
position: absolute;
left: -40px;
top: 35%;
&:focus {
outline: none;
}
}
.rightRs {
background: url("/assets/images/asset_right.png");
width: 40px;
height: 40px;
content: none;
color: transparent;
background-repeat: no-repeat;
background-position: center;
background-size: 40px;
border: none;
position: absolute;
right: -40px;
top: 35%;
&:focus {
outline: none;
}
}
}
.featured_on {
width: 100%;
padding-top: 60px;
padding-bottom: 60px;
.container-fluid {
max-width: calc(100% - 25%);
}
h3 {
text-align: center;
color: #1e1e1e;
text-transform: uppercase;
font-weight: 600;
}
hr {
width: 80px;
margin: 0 auto;
border: 3px solid #e3e9f7;
margin-top: 15px;
height: 0px;
}
.feature_item {
text-align: center;
}
.leftRs {
display: none;
}
.rightRs {
display: none;
}
}
}
.login_modal_wrapper {
background: url("/assets/images/asset_login_bg.png");
background-position: center;
background-repeat: no-repeat;
position: relative;
overflow: scroll;
.modal_close {
width: 50px;
height: 50px;
border: 1px solid #fff;
position: fixed;
top: 10px;
right: 10px;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
z-index: 999;
color: #fff;
text-align: center;
font-size: 30px;
padding: 0px;
font-weight: 700;
cursor: pointer;
}
.login_modal_content {
max-width: 700px;
min-height: 400px;
background: #ffffff;
margin: 0 auto;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
padding: 30px;
padding-top: 50px;
position: relative;
top: 85px;
.login_modal_inner {
width: 90%;
margin: 0 auto;
h3 {
text-align: center;
text-transform: uppercase;
color: #1e1e1e;
font-weight: 600;
padding-bottom: 40px;
}
.facebook_btn {
background-color: #3b5998;
color: #fff;
text-align: center;
width: 100%;
height: 45px;
border-radius: 20px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
-ms-border-radius: 20px;
-o-border-radius: 20px;
border: none;
font-size: 20px;
font-weight: 300;
&:focus {
outline: none;
}
img {
margin-left: 10px;
}
}
h6 {
text-align: center;
width: 100%;
margin: 0px;
padding: 0px;
}
.search {
background: url("/assets/images/asset_search.png");
background-position: right 10px top 5px;
background-repeat: no-repeat;
padding-right: 50px;
}
input {
border: 1px solid #1e1e1e;
height: 40px;
width: 100%;
border-radius: 25px;
padding-left: 15px;
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
-ms-border-radius: 25px;
-o-border-radius: 25px;
text-align: left;
font-size: 16px;
&::placeholder {
color: #bbbbbb;
}
&:focus {
outline: none;
}
}
select {
border: 1px solid #1e1e1e;
background: url("/assets/images/asset_down_arrow.png");
height: 40px;
width: 100%;
padding-left: 15px;
border-radius: 25px;
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
-ms-border-radius: 25px;
-o-border-radius: 25px;
text-align: center;
-webkit-appearance: none;
-moz-appearance: none;
font-size: 16px;
cursor: pointer;
background-position: right 10px top 10px;
background-repeat: no-repeat;
&::placeholder {
color: #bbbbbb;
}
&:focus {
outline: none;
}
}
.row {
margin-bottom: 25px;
}
.next_btn {
background-image: url("/assets/images/asset_double_right.png");
background-position: right 10px top 10px;
}
.prev_btn {
background-image: url("/assets/images/asset_double_left.png");
background-position: left 10px top 10px;
}
.log_btn {
height: 40px;
width: 160px;
border-radius: 25px;
color: #fff;
background-color: #2655bf;
border: none;
font-size: 16px;
font-weight: 300;
background-repeat: no-repeat;
background-size: 20px;
&:focus {
outline: none;
}
}
.wizard_signin {
height: 40px;
width: 48%;
display: inline-block;
border-radius: 25px;
color: #2655bf;
border: 2px solid #2655bf;
background: transparent;
font-size: 16px;
font-weight: 500;
background-repeat: no-repeat;
background-size: 20px;
margin:3px;
&:focus {
outline: none;
}
}
.wizard_quotes {
height: 40px;
width: 48%;
margin:3px;
display: inline-block;
border-radius: 25px;
color: #fff;
border: 2px solid #2655bf;
background: #2655bf;
font-size: 16px;
font-weight: 500;
background-repeat: no-repeat;
background-size: 20px;
&:focus {
outline: none;
}
}
.create_account {
background-image: url("/assets/images/asset_signin.png");
background-repeat: no-repeat;
background-position: right 13px top 7px;
}
p {
text-align: center;
color: #2655bf;
width: 100%;
font-size: 16px;
cursor: pointer;
}
h6 {
text-align: center;
width: 100%;
font-size: 16px;
a {
color: #2655bf;
margin-left: 5px;
margin-right: 5px;
cursor: pointer;
}
}
}
}
}
.wizard_inner {
width: 100%;
.service_list {
ul {
padding: 0px;
margin: 0px;
li {
list-style: none;
display: inline-block;
position: relative;
min-width: 150px;
margin: 3px;
#custom_check_button {
margin: 4px;
background-color: #fff;
border-radius: 25px !important;
overflow: auto;
color: #1e1e1e;
border: 1px solid #e7e7e7;
position: relative;
height: 30px;
outline: none;
width: 100%;
}
#custom_check_button p {
margin: 0px;
position: absolute;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
padding: 2px;
color: #1e1e1e;
text-transform: uppercase;
}
#custom_check_button label {
width: 100%;
margin: 0px;
}
#custom_check_button label span {
text-align: center;
display: block;
}
#custom_check_button label input {
position: absolute;
left: 0px;
bottom: 0px;
right: 0px;
opacity: 0;
}
#custom_check_button input:checked+p {
background-color: #58b19f;
color: #fff;
border-radius: 25px !important;
margin: 0px;
}
}
}
}
.textarea_input {
width: 100%;
border: 1px solid #1e1e1e;
color: #bfbfbf;
padding-top: 10px;
border-radius: 20px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
-ms-border-radius: 20px;
-o-border-radius: 20px;
text-align: left !important;
&:focus {
outline: none;
}
}
.selected_services {
ul {
margin: 0px;
padding: 0px;
li {
list-style: none;
display: inline-block;
padding-left: 15px;
padding-right: 15px;
border: 1px solid #1e1e1e;
border-radius: 25px;
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
-ms-border-radius: 25px;
-o-border-radius: 25px;
text-align: center;
color: #1e1e1e;
margin: 3px;
a {
margin-left: 10px;
cursor: pointer;
font-weight: 600;
}
}
}
}
}
.quote_service_wrapper {
width: 90%;
background: #f5f5f5;
margin: 0 auto;
min-height: 500px;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
padding: 20px;
.quote_header {
width: 100%;
padding: 10px;
h4 {
margin: 0px;
padding: 0px;
color: #1e1e1e;
padding-bottom: 10px;
font-size: 20px;
font-weight: 600;
}
p {
margin: 0px;
padding: 0px;
color: #4e4e4e;
font-weight: 400;
font-size: 15px;
}
}
.quote_schedule_header {
background: #f9f7f7;
border: 1px solid #e8e8e8;
h4 {
margin: 0px;
color: #1e1e1e;
font-size: 18px;
padding: 10px;
}
.quote_arrow {
height: 40px;
width: 40px;
margin: 0px;
padding: 0px;
background: transparent;
border: none;
background-repeat: no-repeat;
background-position: center;
&:focus {
outline: none;
}
}
.quote_arrow.left {
background-image: url("/assets/images/asset_quote_left.png");
}
.quote_arrow.right {
background-image: url("/assets/images/asset_quote_right.png");
}
.schedule_dates {
width: calc(100% - 80px);
height: 35px;
ul {
padding: 0px;
margin: 0px;
li {
list-style: none;
display: inline-block;
width: 33.3%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
height: 40px;
background: #2655bf;
color: #fff;
font-size: 14px;
text-align: center;
padding: 7px;
border: 2px solid #f9f7f7;
}
}
}
}
.quote_schedule_list {
border: 1px solid #e8e8e8;
background: #ffffff;
ul {
margin: 0px;
padding: 0px;
max-height: 500px;
overflow: scroll;
li {
list-style: none;
padding: 10px;
border-bottom: 10px solid #f5f5f5;
.mechanic_profile {
padding: 5px;
.mechanic_profile_inner {
background: #fbfbfb;
padding: 10px;
.mechanic_photo_wrapper {
float: left;
width: 100px;
.mechanic_photo {
width: 100px;
height: 100px;
background: #bfbfbf;
margin-bottom: 5px;
img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
}
.rating {
.star-container {
.star {
font-size: 16px;
}
}
}
}
.mechanic_detail {
width: calc(100% - 100px);
float: left;
padding: 10px;
padding-left: 15px;
padding-top: 0px;
h4 {
margin: 0px;
padding: 0px;
font-size: 15px;
color: #060708;
padding-bottom: 5px;
}
h5 {
margin: 0px;
padding: 0px;
font-size: 15px;
color: #2655bf;
}
p {
margin: 0px;
padding: 0px;
color: #767676;
font-size: 16px;
line-height: 20px;
padding-top: 5px;
}
h6 {
color: #959595;
margin: 0px;
padding: 0px;
background-image: url("/assets/images/asset_call.png");
background-repeat: no-repeat;
padding: 8px;
background-size: 16px;
padding-left: 30px;
background-position: 5px;
}
.view_profile {
border: 1px solid #898989;
color: #898989;
background: transparent;
margin: 5px;
padding-left: 15px;
padding-right: 15px;
border-radius: 20px;
height: 35px;
font-size: 14px;
&:focus {
outline: none;
}
}
.book_now {
border: 1px solid #2655bf;
color: #2655bf;
background: transparent;
margin: 5px;
padding-left: 15px;
padding-right: 15px;
border-radius: 20px;
height: 35px;
font-size: 14px;
&:focus {
outline: none;
}
}
}
}
}
.scheduletiming_listing {
width: calc(100% - 80px);
margin: 0 auto;
height: 200px;
ul {
margin: 0px;
padding: 0px;
width: 33.3%;
height: 100%;
overflow: scroll;
display: inline-block;
position: relative;
li {
width: 100%;
background: #f5f5f5;
color: #908d8d;
text-align: center;
padding: 7px;
border: 1px solid #fff;
cursor: pointer;
}
}
}
.scheduletiming_btm_btns {
width: calc(100% - 80px);
margin: 0 auto;
.btm_btns {
width: 33.3%;
display: inline-block;
height: 40px;
text-align: center;
background-image: url("/assets/images/asset_down_time_arrow.png");
background-color: #f5f5f5;
border: 1px solid #fff;
background-position: center;
background-repeat: no-repeat;
cursor: pointer;
background-size: 25px;
}
}
}
}
}
.service_list {
width: 100%;
padding: 10px;
background: #f9f7f7;
border: 1px solid #e8e8e8;
padding: 10px;
h4 {
margin: 0px;
padding: 0px;
color: #1e1e1e;
padding-bottom: 10px;
font-size: 20px;
font-weight: 600;
}
p {
margin: 0px;
padding: 0px;
color: #4e4e4e;
font-weight: 400;
font-size: 15px;
float: left;
padding-left: 5px;
padding-right: 5px;
}
}
.service_map {
width: 100%;
border: 1px solid #e8e8e8;
height: 600px;
margin-top: 10px;
}
}
agm-map {
height: 100%;
} }
\ No newline at end of file
src/app/home/index/index.component.ts
import { Component, OnInit } from '@angular/core'; import { Component, OnInit, NgZone, ViewChild, ElementRef } from '@angular/core';
import { WebService } from '../../provider/web.service';
import { NgxCarousel } from 'ngx-carousel';
import { MapsAPILoader } from '@agm/core';
import { SubjectService } from '../../provider/subject.service';
declare const google: any;
@Component({ @Component({
selector: 'app-index', selector: 'app-index',
templateUrl: './index.component.html', templateUrl: './index.component.html',
styleUrls: ['./index.component.scss'] styleUrls: ['./index.component.scss']
}) })
export class IndexComponent implements OnInit { export class IndexComponent implements OnInit {
public featuredOn: NgxCarousel;
public carouselTile: NgxCarousel;
@ViewChild('wizardModal') wizardModalTrrigerInput;
//Default Map Location
lat: number = 51.678418;
lng: number = 7.809007;
wizardData: any;
loginDetails: any;
//Basic Location Search: TAB 1
autocomplete: any;
searchLocError: boolean;
@ViewChild("googleLocSearch") public searchElementRef: ElementRef;
//Vehicle Details: TAB 2
@ViewChild("trim") public trim: ElementRef;
@ViewChild("maker") public maker: ElementRef;
@ViewChild("emgine") public emgine: ElementRef;
@ViewChild("milage") public milage: ElementRef;
@ViewChild("modelName") public modelName: ElementRef;
@ViewChild("modelYear") public modelYear: ElementRef;
constructor() { } carModel: any;
carSearchJsonData: any;
modelDates: number[] = new Array();
constructor(
public ngZone : NgZone,
public webService : WebService,
public mapsAPILoader : MapsAPILoader,
public subjectService : SubjectService,) {
this.loginDetails = false;
this.searchLocError = false;
}
ngOnInit() { ngOnInit() {
this.webService.get_stored_json('car-list.json').subscribe((response: any) => {
this.carSearchJsonData = response;
});
let currentYear = Number((new Date()).getFullYear());
let startingYear = currentYear - 50;
for (let date = startingYear ; date <= currentYear ; date ++) {
this.modelDates.push(date);
}
this.subjectService.getLoginData().subscribe(loginData => {
this.loginDetails = JSON.parse(this.webService.getLocalStorageItem('userData'));
});
this.mapsAPILoader.load().then(() => {
this.autocomplete = new google.maps.places.Autocomplete(this.searchElementRef.nativeElement, {
types: ["address"]
});
});
this.featuredOn = {grid: {xs: 1, sm: 2 , md: 5, lg: 6, all: 0},slide: 1, speed: 400, animation: 'lazy',point: { visible: false },load: 2, touch: true, easing: 'ease'}
this.carouselTile = {grid: {xs: 1, sm: 2 , md: 3, lg: 3, all: 0},slide: 1, speed: 400, animation: 'lazy',point: { visible: false },load: 2, touch: true, easing: 'ease'}
}
get_model(event) {
this.carModel = this.carSearchJsonData[event].models;
}
getVehicleLoc(lastLoc){
if(lastLoc == ''){
this.searchLocError = true;
return;
}
this.ngZone.run(() => {
let place: google.maps.places.PlaceResult = this.autocomplete.getPlace();
if (place == undefined || place == null || place === undefined || place === null ||
place.geometry == undefined || place.geometry == null || place.geometry === undefined || place.geometry === null ||
place.formatted_address == undefined || place.formatted_address == null || place.formatted_address === undefined || place.formatted_address === null) {
this.searchLocError = true;
return;
}
this.wizardData = {'pickup_data':
{'pickup_loc':place.formatted_address,
'pickup_lat':place.geometry.location.lat(),
'pickup_lng':place.geometry.location.lng()
}
};
this.searchLocError = false;
this.wizardModalTrrigerInput.nativeElement.click();
});
}
nextStep2(){
console.log(this.trim.nativeElement.value+' '+this.maker+' '+this.emgine+' '+this.milage+' '+this.modelName+' '+this.modelYear);
} }
featuredOnLoad() {return ''; }
carouselTileLoad(){ return ''; }
} }
src/app/navbar/navbar.component.html
...@@ -25,16 +25,35 @@ ...@@ -25,16 +25,35 @@
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#">AUTO REPAIR SHOP</a> <a class="nav-link" href="#">AUTO REPAIR SHOP</a>
</li> </li>
<li class="nav-item"> <li class="nav-item" *ngIf="!loginDetails">
<button class="sign_btn" data-toggle="modal" data-target="#login"> <button (click)="resetForm()" class="sign_btn" data-toggle="modal" data-target="#login">
<img src="assets/images/asset_signin.png">SIGN IN <img src="assets/images/asset_signin.png">SIGN IN
</button> </button>
</li> </li>
<li class="nav-item"> <li class="nav-item" *ngIf="!loginDetails">
<button class="sign_btn" data-toggle="modal" data-target="#signup"> <button (click)="resetForm()" class="sign_btn" data-toggle="modal" data-target="#signup">
<img src="assets/images/asset_signup.png">SIGN UP <img src="assets/images/asset_signup.png">SIGN UP
</button> </button>
</li> </li>
<li class="nav-item" *ngIf="loginDetails">
<a class="nav-link dropdown">
<div class="account_div dropdown-toggle" data-toggle="dropdown">
<div class="account_name">
Welcome back,&nbsp;&nbsp;{{ loginDetails.first_name | titlecase }}
</div>
<div class="account_pic">
<img src="{{imageServer + loginDetails.profile_image}}" onerror="this.src='./../assets/images/user_avatar.jpg';">
</div>
<div class="clear"></div>
</div>
<div class="dropdown-menu">
<a class="dropdown-item" (click)="goToPage('dashboard')">
My Dashboard</a>
<a class="dropdown-item" (click)="logout()">Logout</a>
</div>
</a>
</li>
</ul> </ul>
</div> </div>
</div> </div>
...@@ -49,7 +68,7 @@ ...@@ -49,7 +68,7 @@
<div class="modal" id="signup"> <div class="modal" id="signup">
<div class="modal-dialog modal-full"> <div class="modal-dialog modal-full">
<div class="modal-content login_modal_wrapper"> <div class="modal-content login_modal_wrapper">
<div class="modal_close" data-dismiss="modal"> <div #signupModal class="modal_close" data-dismiss="modal">
&times; &times;
</div> </div>
<div class="modal-body"> <div class="modal-body">
...@@ -73,42 +92,90 @@ ...@@ -73,42 +92,90 @@
<h6>OR</h6> <h6>OR</h6>
</div> </div>
</div> </div>
<form [formGroup]="signupForm" (ngSubmit)="signupSubmit(signupForm.value)">
<div class="row"> <div class="row">
<div class="col-md-12"> <div class="col-md-6">
<input class="" placeholder="Full Name" type="text"> <input placeholder="First Name" type="text" formControlName="first_name"
[ngClass]="{'input_error': !signupForm.controls['first_name'].valid && (signupForm.controls['first_name'].dirty || signupForm.controls['first_name'].touched || signupSubmitClick),
'input_success': signupForm.controls['first_name'].valid}"
(click)="signupSubmitClick = false">
<div class="s_error" *ngIf="(!signupForm.controls['first_name'].valid && signupForm.controls['first_name'].touched) || (!signupForm.controls['first_name'].valid && signupSubmitClick)">
<div class="s_validation" *ngIf="signupForm.controls['first_name'].hasError('required')">{{errorMsg.errorList.required}} </div>
<div class="s_validation" *ngIf="signupForm.controls['first_name'].hasError('pattern')">{{errorMsg.errorList.valid}} Name</div>
</div>
</div>
<div class="col-md-6">
<input placeholder="Last Name" type="text" formControlName="last_name"
[ngClass]="{'input_error': !signupForm.controls['last_name'].valid && (signupForm.controls['last_name'].dirty || signupForm.controls['last_name'].touched || signupSubmitClick),
'input_success': signupForm.controls['last_name'].valid}"
(click)="signupSubmitClick = false">
<div class="s_error" *ngIf="(!signupForm.controls['last_name'].valid && signupForm.controls['last_name'].touched) || (!signupForm.controls['last_name'].valid && signupSubmitClick)">
<div class="s_validation" *ngIf="signupForm.controls['last_name'].hasError('required')">{{errorMsg.errorList.required}} </div>
<div class="s_validation" *ngIf="signupForm.controls['last_name'].hasError('pattern')">{{errorMsg.errorList.valid}} Sur Name</div>
</div>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-md-12"> <div class="col-md-12">
<input class="" placeholder="Email address" type="mail"> <input placeholder="Email Address" type="mail" formControlName="email"
[ngClass]="{'input_error': !signupForm.controls['email'].valid && (signupForm.controls['email'].dirty || signupForm.controls['email'].touched || signupSubmitClick),
'input_success': signupForm.controls['email'].valid}"
(click)="loginSubmitClick = false">
<div class="s_error" *ngIf="(!signupForm.controls['email'].valid && signupForm.controls['email'].touched) || (!signupForm.controls['email'].valid && signupSubmitClick)">
<div class="s_validation" *ngIf="signupForm.controls['email'].hasError('required')">{{errorMsg.errorList.required}} </div>
<div class="s_validation" *ngIf="signupForm.controls['email'].hasError('pattern')">{{errorMsg.errorList.valid}} Email</div>
<div class="s_validation" *ngIf="signupForm.controls['email'].hasError('maxlength')">{{errorMsg.errorList.maxLength}} 50</div>
</div>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-md-12"> <div class="col-md-12">
<input class="" placeholder="Password (Min. 6 Characters)" type="password"> <input placeholder="Password (Min. 6 Characters)" type="password" formControlName="password"
[ngClass]="{'input_error': !signupForm.controls['password'].valid && (signupForm.controls['password'].dirty || signupForm.controls['password'].touched || signupSubmitClick),
'input_success': signupForm.controls['password'].valid}"
(click)="signupSubmitClick = false">
<div class="s_error" *ngIf="signupForm.controls['password'].invalid && (signupForm.controls['password'].touched || signupSubmitClick)">
<div class="s_validation" *ngIf="signupForm.controls['password'].hasError('required')">{{errorMsg.errorList.required}} </div>
</div>
<h6 class="textLeft pt10">Must be atleast 6 characters</h6> <h6 class="textLeft pt10">Must be atleast 6 characters</h6>
</div> </div>
</div> </div>
<h6 class="textLeft pb10">OPTIONAL</h6> <h6 class="textLeft pb10">OPTIONAL</h6>
<div class="row"> <div class="row">
<div class="col-md-6"> <div class="col-md-6">
<input class="" placeholder="Phone Number" type="number"> <input placeholder="Phone Number" type="text" formControlName="phone"
[ngClass]="{'input_error': signupForm.controls['phone'].value != '' && signupForm.controls['phone'].dirty && signupForm.controls['phone'].invalid,
'input_success': signupForm.controls['phone'].value != '' && signupForm.controls['phone'].dirty && signupForm.controls['phone'].valid}"
(click)="signupSubmitClick = false">
<div class="s_error" *ngIf="!signupForm.controls['phone'].valid && signupForm.controls['phone'].touched">
<div class="s_validation" *ngIf="signupForm.controls['phone'].hasError('pattern')">{{errorMsg.errorList.valid}} Mobile Number</div>
</div>
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<input class="" placeholder="PROMOCODE" type="text"> <input placeholder="PROMOCODE" type="text" formControlName="promocode"
[ngClass]="{'input_error': signupForm.controls['promocode'].value != '' && signupForm.controls['promocode'].dirty && signupForm.controls['promocode'].invalid,
'input_success': signupForm.controls['promocode'].value != '' && signupForm.controls['promocode'].dirty && signupForm.controls['promocode'].valid}"
(click)="signupSubmitClick = false">
<div class="s_error" *ngIf="!signupForm.controls['promocode'].valid && signupForm.controls['promocode'].touched">
<div class="s_validation" *ngIf="signupForm.controls['promocode'].hasError('pattern')">{{errorMsg.errorList.valid}} Promocode</div>
</div>
</div> </div>
<h6 class="pt10">By signing up, I agree to Carfixxers <a>Terms & Conditions</a></h6> <h6 class="pt10">By signing up, I agree to Carfixxers <a>Terms & Conditions</a></h6>
</div> </div>
<div *ngIf="signupResponse" class="s_alert" [ngClass]="(signupResponse.status == 'success') ? 'alert-success' : 'alert-danger'">
<strong>{{signupResponse.message}}<br></strong>
</div>
<div class="row"> <div class="row">
<div class="col-md-12"> <div class="col-md-12">
<button class="log_btn create_account">Create Account</button> <button type="submit" (click)="signupSubmitClick = true" class="log_btn create_account">Create Account</button>
</div> </div>
</div> </div>
</form>
<div class="row"> <div class="row">
<div class="col-md-12"> <div class="col-md-12">
<h6><a data-dismiss="modal" data-toggle="modal" data-target="#login">Sign In</a> OR <a>Continue as guest</a></h6> <h6><a (click)="resetForm()" data-dismiss="modal" data-toggle="modal" data-target="#login">Sign In</a> OR <a>Continue as guest</a></h6>
</div> </div>
</div> </div>
</div> </div>
...@@ -127,7 +194,7 @@ ...@@ -127,7 +194,7 @@
<div class="modal" id="login"> <div class="modal" id="login">
<div class="modal-dialog modal-full"> <div class="modal-dialog modal-full">
<div class="modal-content login_modal_wrapper"> <div class="modal-content login_modal_wrapper">
<div class="modal_close" data-dismiss="modal" (click)="resetForm()"> <div #loginModal class="modal_close" data-dismiss="modal" (click)="resetForm()">
&times; &times;
</div> </div>
<div class="modal-body"> <div class="modal-body">
...@@ -151,31 +218,27 @@ ...@@ -151,31 +218,27 @@
<div class="row"> <div class="row">
<div class="col-md-12"> <div class="col-md-12">
<input placeholder="Email Address" type="mail" formControlName="email" <input placeholder="Email Address" type="mail" formControlName="email"
[ngClass]="{'input_error': !loginForm.controls['email'].valid && (loginForm.controls['email'].touched || loginSubmitClick), [ngClass]="{'input_error': !loginForm.controls['email'].valid && (loginForm.controls['email'].dirty || loginForm.controls['email'].touched || loginSubmitClick),
'input_success': loginForm.controls['email'].valid}"> 'input_success': loginForm.controls['email'].valid}"
</div> (click)="loginSubmitClick = false">
<div class="s_error" *ngIf="!loginForm.controls['email'].valid && loginForm.controls['email'].touched"> <div class="s_error" *ngIf="(!loginForm.controls['email'].valid && loginForm.controls['email'].touched) || (!loginForm.controls['email'].valid && loginSubmitClick)">
<div class="s_validation" *ngIf="loginForm.controls['email'].hasError('required')">{{errorMsg.errorList.required}} </div> <div class="s_validation" *ngIf="loginForm.controls['email'].hasError('required')">{{errorMsg.errorList.required}} </div>
<div class="s_validation" *ngIf="loginForm.controls['email'].hasError('pattern')">{{errorMsg.errorList.email}}</div> <div class="s_validation" *ngIf="loginForm.controls['email'].hasError('pattern')">{{errorMsg.errorList.valid}} Email</div>
<div class="s_validation" *ngIf="loginForm.controls['email'].hasError('maxlength')">{{errorMsg.errorList.maxLength}} 50</div> <div class="s_validation" *ngIf="loginForm.controls['email'].hasError('maxlength')">{{errorMsg.errorList.maxLength}} 50</div>
</div> </div>
<div class="s_error" *ngIf="!loginForm.controls['email'].valid && loginSubmitClick">
<div class="s_validation" *ngIf="loginForm.controls['email'].hasError('required')">{{errorMsg.errorList.required}} </div>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-md-12"> <div class="col-md-12">
<input class="" placeholder="Password" type="password" formControlName="password" <input class="" placeholder="Password" type="password" formControlName="password"
[ngClass]="{'input_error': !loginForm.controls['password'].valid && (loginForm.controls['password'].touched || loginSubmitClick), [ngClass]="{'input_error': !loginForm.controls['password'].valid && (loginForm.controls['password'].dirty || loginForm.controls['password'].touched || loginSubmitClick),
'input_success': loginForm.controls['password'].valid}"> 'input_success': loginForm.controls['password'].valid}"
</div> (click)="loginSubmitClick = false">
<div class="s_error" *ngIf="!loginForm.controls['password'].valid && loginForm.controls['password'].touched"> <div class="s_error" *ngIf="(!loginForm.controls['password'].valid && loginForm.controls['password'].touched) || (!loginForm.controls['password'].valid && loginSubmitClick)">
<div class="s_validation" *ngIf="loginForm.controls['password'].hasError('required')">{{errorMsg.errorList.required}} </div> <div class="s_validation" *ngIf="loginForm.controls['password'].hasError('required')">{{errorMsg.errorList.required}} </div>
<div class="s_validation" *ngIf="loginForm.controls['password'].hasError('minlength')">{{errorMsg.errorList.email}} 6</div> <div class="s_validation" *ngIf="loginForm.controls['password'].hasError('minlength')">{{errorMsg.errorList.minLength}} 6</div>
<div class="s_validation" *ngIf="loginForm.controls['password'].hasError('maxlength')">{{errorMsg.errorList.maxLength}} 16</div> <div class="s_validation" *ngIf="loginForm.controls['password'].hasError('maxlength')">{{errorMsg.errorList.maxLength}} 16</div>
</div> </div>
<div class="s_error" *ngIf="!loginForm.controls['password'].valid && loginSubmitClick">
<div class="s_validation" *ngIf="loginForm.controls['password'].hasError('required')">{{errorMsg.errorList.required}} </div>
</div> </div>
</div> </div>
<div *ngIf="loginResponse" class="s_alert" [ngClass]="(loginResponse.status == 'success') ? 'alert-success' : 'alert-danger'"> <div *ngIf="loginResponse" class="s_alert" [ngClass]="(loginResponse.status == 'success') ? 'alert-success' : 'alert-danger'">
...@@ -183,14 +246,14 @@ ...@@ -183,14 +246,14 @@
</div> </div>
<div class="row"> <div class="row">
<div class="col-md-12"> <div class="col-md-12">
<button type="submit" class="log_btn">Login</button> <button type="submit" class="log_btn" (click)="loginSubmitClick = true">Login</button>
</div> </div>
</div> </div>
</form> </form>
<div class="row"> <div class="row">
<div class="col-md-12"> <div class="col-md-12">
<p> <p>
<a data-dismiss="modal" data-toggle="modal" data-target="#forgot">Forgot Password ?</a> <a (click)="resetForm()" data-dismiss="modal" data-toggle="modal" data-target="#forgot">Forgot Password ?</a>
</p> </p>
</div> </div>
</div> </div>
...@@ -222,21 +285,32 @@ ...@@ -222,21 +285,32 @@
<div class="login_modal_inner"> <div class="login_modal_inner">
<h3>FORGOT PASSWORD</h3> <h3>FORGOT PASSWORD</h3>
<form [formGroup]="forgotForm" (ngSubmit)="forgotSubmit(forgotForm.value)">
<div class="row"> <div class="row">
<div class="col-md-12"> <div class="col-md-12">
<input class="" placeholder="Enter recovery Email Address" type="mail"> <input placeholder="Enter recovery Email Address" type="mail" formControlName="email"
[ngClass]="{'input_error': !forgotForm.controls['email'].valid && (forgotForm.controls['email'].dirty || forgotForm.controls['email'].touched || forgotSubmitClick),
'input_success': forgotForm.controls['email'].valid}" >
<div class="s_error" *ngIf="(!forgotForm.controls['email'].valid && forgotForm.controls['email'].touched) || (!forgotForm.controls['email'].valid && forgotSubmitClick)">
<div class="s_validation" *ngIf="forgotForm.controls['email'].hasError('required')">{{errorMsg.errorList.required}} </div>
<div class="s_validation" *ngIf="forgotForm.controls['email'].hasError('minlength')">{{errorMsg.errorList.valid}} Email</div>
<div class="s_validation" *ngIf="forgotForm.controls['email'].hasError('maxlength')">{{errorMsg.errorList.maxLength}} 50</div>
</div> </div>
</div> </div>
</div>
<div *ngIf="forgotResponse" class="s_alert" [ngClass]="(forgotResponse.status == 'success') ? 'alert-success' : 'alert-danger'">
<strong>{{forgotResponse.message}}<br></strong>
</div>
<div class="row"> <div class="row">
<div class="col-md-12"> <div class="col-md-12">
<button class="log_btn">Send Link</button> <button type="submit" class="log_btn" (click)="forgotSubmitClick = true">Send Link</button>
</div> </div>
</div> </div>
</form>
<div class="row"> <div class="row">
<div class="col-md-12"> <div class="col-md-12">
<h6>Do you have an account? <a data-dismiss="modal" data-toggle="modal" data-target="#signup">Sign Up</a> OR <a data-dismiss="modal" data-toggle="modal" data-target="#login">Sign In</a></h6> <h6>Do you have an account? <a (click)="resetForm()" data-dismiss="modal" data-toggle="modal" data-target="#signup">Sign Up</a> OR <a (click)="resetForm()" data-dismiss="modal" data-toggle="modal" data-target="#login">Sign In</a></h6>
</div> </div>
</div> </div>
</div> </div>
......
src/app/navbar/navbar.component.scss
...@@ -8,6 +8,7 @@ ...@@ -8,6 +8,7 @@
width: 100%; width: 100%;
padding-top: 15px; padding-top: 15px;
padding-bottom: 15px; padding-bottom: 15px;
z-index: 999;
.container-fluid { .container-fluid {
max-width: calc(100% - 15%); max-width: calc(100% - 15%);
.navbar-brand { .navbar-brand {
...@@ -20,6 +21,15 @@ ...@@ -20,6 +21,15 @@
margin-right: 30px; margin-right: 30px;
a { a {
color: #fff; color: #fff;
position: relative;
top: 5px;
.dropdown-menu {
a {
top: 0px;
padding-top: 5px;
padding-bottom: 5px;
}
}
} }
.sign_btn { .sign_btn {
background: transparent; background: transparent;
...@@ -46,21 +56,65 @@ ...@@ -46,21 +56,65 @@
outline: none; outline: none;
} }
} }
.account_div.dropdown-toggle::after {
display: none;
}
.dropdown-menu {
border: none;
margin: 0px;
padding: 0px;
border-radius: 0px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
-ms-border-radius: 0px;
-o-border-radius: 0px;
background: #2655bf;
cursor: pointer;
a {
&:hover {
color: #2655bf;
}
}
}
.account_div {
cursor: pointer;
.account_name {
float: left;
font-weight: 400;
margin-right: 10px;
}
.account_pic {
float: left;
width: 40px;
height: 40px;
background: #fff;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
position: relative;
bottom: 10px;
img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
}
}
}
} }
} }
} }
}
.input_error {
border: 1px solid red !important;
}
.input_success {
border: 1px solid rgb(51, 211, 118) !important;
} }
.scrolled_navbar { .scrolled_navbar {
background: rgba(44, 71, 196, 1) !important; background: #2655bf;
transition-duration: 1s; transition-duration: 1s;
transition-timing-function: ease; transition-timing-function: ease;
.navbar-brand { .navbar-brand {
...@@ -82,7 +136,7 @@ ...@@ -82,7 +136,7 @@
width: 50px; width: 50px;
height: 50px; height: 50px;
border: 1px solid #fff; border: 1px solid #fff;
position: absolute; position: fixed;
top: 10px; top: 10px;
right: 10px; right: 10px;
border-radius: 50%; border-radius: 50%;
...@@ -113,7 +167,7 @@ ...@@ -113,7 +167,7 @@
position: relative; position: relative;
top: 85px; top: 85px;
.login_modal_inner { .login_modal_inner {
width: 75%; width: 85%;
margin: 0 auto; margin: 0 auto;
h3 { h3 {
text-align: center; text-align: center;
...@@ -127,7 +181,7 @@ ...@@ -127,7 +181,7 @@
color: #fff; color: #fff;
text-align: center; text-align: center;
width: 100%; width: 100%;
height: 45px; height: 40px;
border-radius: 20px; border-radius: 20px;
-webkit-border-radius: 20px; -webkit-border-radius: 20px;
-moz-border-radius: 20px; -moz-border-radius: 20px;
...@@ -151,10 +205,10 @@ ...@@ -151,10 +205,10 @@
} }
input { input {
border: 1px solid #1e1e1e; border: 1px solid #1e1e1e;
height: 45px; height: 40px;
width: 100%; width: 100%;
border-radius: 25px; border-radius: 25px;
font-size: 20px; font-size: 16px;
-webkit-border-radius: 25px; -webkit-border-radius: 25px;
-moz-border-radius: 25px; -moz-border-radius: 25px;
-ms-border-radius: 25px; -ms-border-radius: 25px;
...@@ -211,4 +265,3 @@ ...@@ -211,4 +265,3 @@
} }
} }
} }
src/app/navbar/navbar.component.ts
import { Component, OnInit, HostListener } from '@angular/core'; import { Component, OnInit, HostListener, ElementRef, ViewChild } from '@angular/core';
import { Router,ActivatedRoute } from '@angular/router'; import { Router,ActivatedRoute } from '@angular/router';
import { FormGroup, FormControl, Validators, ValidationErrors } from '@angular/forms'; import { FormGroup, FormControl, Validators, ValidationErrors } from '@angular/forms';
import { ValidationService } from './../provider/validation.service'; import { ValidationService } from './../provider/validation.service';
import { WebService } from './../provider/web.service'; import { WebService } from './../provider/web.service';
import { SubjectService } from './../provider/subject.service'; import { SubjectService } from './../provider/subject.service';
import { ImageStorage } from '../../environments/server.config';
declare var $; declare var $;
declare const window: any; declare const window: any;
...@@ -15,11 +16,16 @@ declare const window: any; ...@@ -15,11 +16,16 @@ declare const window: any;
}) })
export class NavbarComponent implements OnInit { export class NavbarComponent implements OnInit {
data: any; data : any;
loader : boolean; loader : boolean;
loginResponse: any; imageServer : any;
loginDetails : any;
loginResponse : any;
forgotResponse : any;
signupResponse : any;
loginSubmitClick : boolean; loginSubmitClick : boolean;
forgotSubmitClick : boolean;
signupSubmitClick : boolean;
constructor ( constructor (
private router : Router, private router : Router,
...@@ -27,45 +33,140 @@ export class NavbarComponent implements OnInit { ...@@ -27,45 +33,140 @@ export class NavbarComponent implements OnInit {
public errorMsg : ValidationService, public errorMsg : ValidationService,
public webService : WebService, public webService : WebService,
public subjectService : SubjectService) { public subjectService : SubjectService) {
this.imageServer = ImageStorage;
this.loginDetails = false;
this.loginSubmitClick = false; this.loginSubmitClick = false;
this.forgotSubmitClick = false;
this.signupSubmitClick = false;
} }
email;
password;
loginForm; loginForm;
emailPattern = '^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$'; forgotForm;
signupForm;
@ViewChild('loginModal') loginModal: ElementRef;
@ViewChild('signupModal') signupModal: ElementRef;
ngOnInit() { ngOnInit() {
this.subjectService.getLoginData().subscribe(loginData => {
this.loginDetails = JSON.parse(this.webService.getLocalStorageItem('userData'));
});
this.loginForm = new FormGroup({ this.loginForm = new FormGroup({
email: new FormControl('', [Validators.required, Validators.maxLength(50), Validators.pattern(this.emailPattern)]), email: new FormControl('', [Validators.required, Validators.maxLength(50), Validators.pattern('^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$')]),
password: new FormControl('', [Validators.required, Validators.maxLength(16), Validators.minLength(6)]) password: new FormControl('', [Validators.required, Validators.maxLength(16), Validators.minLength(6)])
}) });
this.forgotForm = new FormGroup({
email: new FormControl('', [Validators.required, Validators.maxLength(50), Validators.pattern('^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$')])
});
this.signupForm = new FormGroup({
email: new FormControl('', [Validators.required, Validators.maxLength(50), Validators.pattern('^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$')]),
password: new FormControl('', [Validators.required, Validators.maxLength(16), Validators.minLength(6)]),
phone: new FormControl('', [Validators.pattern("^[0-9\ ( ) + , - ]+$")]),
promocode: new FormControl('', [Validators.pattern("^[a-zA-Z0-9\ _ - ]+$")]),
last_name: new FormControl('', [Validators.required, Validators.pattern("^[a-zA-Z\ _ - ' \/]+$")]),
first_name: new FormControl('', [Validators.required, Validators.pattern("^[a-zA-Z\ _ - ' \/]+$")])
});
} }
loginSubmit(data) { loginSubmit(data) {
const This = this; if(this.loginForm.invalid){
this.loginSubmitClick = true;
if(!this.loginForm.valid){
return false; return false;
} }
const This = this;
this.loader = true; this.loader = true;
let funcName = 'customer_login'; let funcName = 'customer_login';
const userObj = this.loginForm.value; this.webService.post_data(funcName, data).subscribe(response => {
this.webService.post_data(funcName, userObj).subscribe(response => {
this.loader = false; this.loader = false;
if ( response.status == '1') { if ( response.status == '1') {
this.webService.setLocalStorageItem('userData', JSON.stringify(response.data)); this.webService.setLocalStorageItem('userData', JSON.stringify(response.data));
this.subjectService.sendLoginData('logged_in'); this.subjectService.sendLoginData('logged_in');
}
this.loginModal.nativeElement.click();
} else {
response.status = 'error';
response.message = (response.message == '')?this.errorMsg.errorList.req_failure:response.message;
this.loginResponse = response; this.loginResponse = response;
}
},error => {
this.loginResponse = {'status':'error','message':this.errorMsg.errorList.req_failure};
},() => {
setTimeout( function() { setTimeout( function() {
This.loginResponse = false; This.loginResponse = false;
}, 2000) }, 2000)
}); });
} }
forgotSubmit(data){
if(this.forgotForm.invalid){
return false;
}
const This = this;
this.loader = true;
let funcName = 'customer_forgot_password';
this.webService.post_data(funcName, data).subscribe(response => {
this.loader = false;
response.status = (response.status == '1')?'success':'error';
response.message = (response.message == '')?this.errorMsg.errorList.req_failure:response.message;
this.forgotResponse = response;
},error => {
this.forgotResponse = {'status':'error','message':this.errorMsg.errorList.req_failure};
},() => {
setTimeout( function() {
This.forgotResponse = false;
}, 2000)
});
}
signupSubmit(data){
if(this.signupForm.invalid){
return false;
}
const This = this;
this.loader = true;
let funcName = 'customer_registration';
this.webService.post_data(funcName, data).subscribe(response => {
this.loader = false;
if ( response.status == '1') {
this.webService.setLocalStorageItem('userData', JSON.stringify(response.data));
this.subjectService.sendLoginData('logged_in');
this.signupModal.nativeElement.click();
} else {
response.status = 'error';
response.message = (response.message == '')?this.errorMsg.errorList.req_failure:response.message;
this.signupResponse = response;
}
},error => {
this.signupResponse = {'status':'error','message':this.errorMsg.errorList.req_failure};
},() => {
setTimeout( function() {
This.signupResponse = false;
}, 2000)
});
}
resetForm(){ resetForm(){
//Login Form
this.loginForm.reset(); this.loginForm.reset();
this.loginResponse = false;
this.loginSubmitClick = false;
//Forgot Form
this.forgotForm.reset();
this.forgotResponse = false;
this.forgotSubmitClick = false;
//SignUP Form
this.signupForm.reset();
this.signupResponse = false;
this.signupSubmitClick = false;
} }
//Design //Design
...@@ -85,4 +186,11 @@ export class NavbarComponent implements OnInit { ...@@ -85,4 +186,11 @@ export class NavbarComponent implements OnInit {
document.body.scrollTop = document.documentElement.scrollTop = 0; document.body.scrollTop = document.documentElement.scrollTop = 0;
} }
logout() {
const userData = this.webService.getLocalStorageItem('userData');
this.webService.removeLocalStorageItem(userData);
this.subjectService.sendLoginData(false);
this.router.navigate(['../index']);
}
} }
src/app/provider/validation.service.ts
...@@ -6,11 +6,10 @@ import { Injectable } from '@angular/core'; ...@@ -6,11 +6,10 @@ import { Injectable } from '@angular/core';
export class ValidationService { export class ValidationService {
constructor() { } constructor() { }
errorList = { errorList = {
'valid': 'Please enter a valid',
'required': 'This field is required', 'required': 'This field is required',
'email': 'Please enter a valid email',
'phone': 'Please enter a valid phone number',
'password': 'Please enter a valid password',
'minLength': 'Minimum characters length is', 'minLength': 'Minimum characters length is',
'maxLength': 'Maximum characters length is' 'maxLength': 'Maximum characters length is',
'req_failure': 'Something went wrong..!'
}; };
} }
src/app/provider/web.service.ts
import { Injectable } from '@angular/core'; import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders, HttpErrorResponse } from '@angular/common/http'; import { HttpClient, HttpHeaders, HttpErrorResponse } from '@angular/common/http';
import { Observable } from 'rxjs';
import { map, catchError } from 'rxjs/operators'; import { map, catchError } from 'rxjs/operators';
import { apiConfig, serverApiDev } from '../../environments/server.config'; import { apiConfig, serverApiDev } from '../../environments/server.config';
...@@ -42,4 +43,7 @@ export class WebService { ...@@ -42,4 +43,7 @@ export class WebService {
online_service(url: string ) { online_service(url: string ) {
return this.http.post(`${serverApiDev + url}`, null).pipe(map((response: any) => response)); return this.http.post(`${serverApiDev + url}`, null).pipe(map((response: any) => response));
} }
get_stored_json(json_file: string) {
return this.http.get("assets/json_data/" + json_file);
}
} }
\ No newline at end of file
src/assets/css/responsive.scss
...@@ -72,7 +72,23 @@ ...@@ -72,7 +72,23 @@
/* 07.0 Desktops and laptops ----------- */ /* 07.0 Desktops and laptops ----------- */
@media only screen and (min-width: 1224px) {} @media only screen and (min-width: 1000px) and (max-device-width: 1280px) {
.login_modal_content {
top: 0px !important;
}
.how_it_works h4 {
height: 70px;
}
.how_it_works p {
height: 100px;
}
.service_check h4 {
height: 70px;
}
.service_check p {
height: 100px;
}
}
/* 08.0 Large screens ----------- */ /* 08.0 Large screens ----------- */
......
src/assets/images/star-rating.icons.svg 0 → 100644
<svg style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id="star-empty" viewBox="0 0 34 32">
<title>star-empty</title>
<path class="path-star-empty"
d="M33.412 12.395l-11.842-1.021-4.628-10.904-4.628 10.92-11.842 1.005 8.993 7.791-2.701 11.579 10.179-6.144 10.179 6.144-2.685-11.579 8.976-7.791zM16.941 22.541l-6.193 3.739 1.647-7.049-5.468-4.744 7.214-0.626 2.8-6.638 2.816 6.654 7.214 0.626-5.468 4.744 1.647 7.049-6.209-3.755z"/>
</symbol>
<symbol id="star-half" viewBox="0 0 34 32">
<title>star-half</title>
<path class="path-star-half"
d="M 33.412,12.395 21.57,11.374 16.942,0.47 12.314,11.39 0.472,12.395 9.465,20.186 6.764,31.765 16.943,25.621 27.122,31.765 24.437,20.186 33.413,12.395 Z M 16.941,22.541 c 0,0 -0.297971,-14.6455833 0,-15.318 l 2.816,6.654 7.214,0.626 -5.468,4.744 1.647,7.049 z"/>
</symbol>
<symbol id="star-filled" viewBox="0 0 34 32">
<title>star-filled</title>
<path class="path-star-filled"
d="M16.941 25.621l10.179 6.144-2.701-11.579 8.993-7.791-11.842-1.005-4.628-10.92-4.628 10.92-11.842 1.005 8.993 7.791-2.701 11.579z"/>
</symbol>
</defs>
</svg>
\ No newline at end of file
src/assets/json_data/car-list.json 0 → 100644
[
{
"brand": "Seat",
"models": [
"Alhambra","Altea","Altea XL","Arosa","Cordoba","Cordoba Vario","Exeo","Ibiza","Ibiza ST","Exeo ST","Leon","Leon ST","Inca","Mii","Toledo"
]
},
{
"brand": "Renault",
"models": [
"Captur","Clio","Clio Grandtour","Espace","Express","Fluence","Grand Espace","Grand Modus","Grand Scenic","Kadjar","Kangoo","Kangoo Express","Koleos","Laguna","Laguna Grandtour","Latitude","Mascott","Mégane","Mégane CC","Mégane Combi","Mégane Grandtour","Mégane Coupé","Mégane Scénic","Scénic","Talisman","Talisman Grandtour","Thalia","Twingo","Wind","Zoé"
]
},
{
"brand": "Peugeot",
"models": [
"1007","107","106","108","2008","205","205 Cabrio","206","206 CC","206 SW","207","207 CC","207 SW","306","307","307 CC","307 SW","308","308 CC","308 SW","309","4007","4008","405","406","407","407 SW","5008","508","508 SW","605","806","607","807","Bipper","RCZ"
]
},
{
"brand": "Dacia",
"models": [
"Dokker","Duster","Lodgy","Logan","Logan MCV","Logan Van","Sandero","Solenza"
]
},
{
"brand": "Citroën",
"models": [
"Berlingo","C-Crosser","C-Elissée","C-Zero","C1","C2","C3","C3 Picasso","C4","C4 Aircross","C4 Cactus","C4 Coupé","C4 Grand Picasso","C4 Sedan","C5","C5 Break","C5 Tourer","C6","C8","DS3","DS4","DS5","Evasion","Jumper","Jumpy","Saxo","Nemo","Xantia","Xsara"
]
},
{
"brand": "Opel",
"models": [
"Agila","Ampera","Antara","Astra","Astra cabrio","Astra caravan","Astra coupé","Calibra","Campo","Cascada","Corsa","Frontera","Insignia","Insignia kombi","Kadett","Meriva","Mokka","Movano","Omega","Signum","Vectra","Vectra Caravan","Vivaro","Vivaro Kombi","Zafira"
]
},
{
"brand": "Alfa Romeo",
"models": [
"145","146","147","155","156","156 Sportwagon","159","159 Sportwagon","164","166","4C","Brera","GTV","MiTo","Crosswagon","Spider","GT","Giulietta","Giulia"
]
},
{
"brand": "Škoda",
"models": [
"Favorit","Felicia","Citigo","Fabia","Fabia Combi","Fabia Sedan","Felicia Combi","Octavia","Octavia Combi","Roomster","Yeti","Rapid","Rapid Spaceback","Superb","Superb Combi"
]
},
{
"brand": "Chevrolet",
"models": [
"Alero","Aveo","Camaro","Captiva","Corvette","Cruze","Cruze SW","Epica","Equinox","Evanda","HHR","Kalos","Lacetti","Lacetti SW","Lumina","Malibu","Matiz","Monte Carlo","Nubira","Orlando","Spark","Suburban","Tacuma","Tahoe","Trax"
]
},
{
"brand": "Porsche",
"models": [
"911 Carrera","911 Carrera Cabrio","911 Targa","911 Turbo","924","944","997","Boxster","Cayenne","Cayman","Macan","Panamera"
]
},
{
"brand": "Honda",
"models": [
"Accord","Accord Coupé","Accord Tourer","City","Civic","Civic Aerodeck","Civic Coupé","Civic Tourer","Civic Type R","CR-V","CR-X","CR-Z","FR-V","HR-V","Insight","Integra","Jazz","Legend","Prelude"
]
},
{
"brand": "Subaru",
"models": [
"BRZ","Forester","Impreza","Impreza Wagon","Justy","Legacy","Legacy Wagon","Legacy Outback","Levorg","Outback","SVX","Tribeca","Tribeca B9","XV"
]
},
{
"brand": "Mazda",
"models": [
"121","2","3","323","323 Combi","323 Coupé","323 F","5","6","6 Combi","626","626 Combi","B-Fighter","B2500","BT","CX-3","CX-5","CX-7","CX-9","Demio","MPV","MX-3","MX-5","MX-6","Premacy","RX-7","RX-8","Xedox 6"
]
},
{
"brand": "Mitsubishi",
"models": [
"3000 GT","ASX","Carisma","Colt","Colt CC","Eclipse","Fuso canter","Galant","Galant Combi","Grandis","L200","L200 Pick up","L200 Pick up Allrad","L300","Lancer","Lancer Combi","Lancer Evo","Lancer Sportback","Outlander","Pajero","Pajeto Pinin","Pajero Pinin Wagon","Pajero Sport","Pajero Wagon","Space Star"
]
},
{
"brand": "Lexus",
"models": [
"CT","GS","GS 300","GX","IS","IS 200","IS 250 C","IS-F","LS","LX","NX","RC F","RX","RX 300","RX 400h","RX 450h","SC 430"
]
},
{
"brand": "Toyota",
"models": [
"4-Runner","Auris","Avensis","Avensis Combi","Avensis Van Verso","Aygo","Camry","Carina","Celica","Corolla","Corolla Combi","Corolla sedan","Corolla Verso","FJ Cruiser","GT86","Hiace","Hiace Van","Highlander","Hilux","Land Cruiser","MR2","Paseo","Picnic","Prius","RAV4","Sequoia","Starlet","Supra","Tundra","Urban Cruiser","Verso","Yaris","Yaris Verso"
]
},
{
"brand": "BMW",
"models": [
"i3","i8","M3","M4","M5","M6","Rad 1","Rad 1 Cabrio","Rad 1 Coupé","Rad 2","Rad 2 Active Tourer","Rad 2 Coupé","Rad 2 Gran Tourer","Rad 3","Rad 3 Cabrio","Rad 3 Compact","Rad 3 Coupé","Rad 3 GT","Rad 3 Touring","Rad 4","Rad 4 Cabrio","Rad 4 Gran Coupé","Rad 5","Rad 5 GT","Rad 5 Touring","Rad 6","Rad 6 Cabrio","Rad 6 Coupé","Rad 6 Gran Coupé","Rad 7","Rad 8 Coupé","X1","X3","X4","X5","X6","Z3","Z3 Coupé","Z3 Roadster","Z4","Z4 Roadster"
]
},
{
"brand": "Volkswagen",
"models": [
"Amarok","Beetle","Bora","Bora Variant","Caddy","Caddy Van","Life","California","Caravelle","CC","Crafter","Crafter Van","Crafter Kombi","CrossTouran","Eos","Fox","Golf","Golf Cabrio","Golf Plus","Golf Sportvan","Golf Variant","Jetta","LT","Lupo","Multivan","New Beetle","New Beetle Cabrio","Passat","Passat Alltrack","Passat CC","Passat Variant","Passat Variant Van","Phaeton","Polo","Polo Van","Polo Variant","Scirocco","Sharan","T4","T4 Caravelle","T4 Multivan","T5","T5 Caravelle","T5 Multivan","T5 Transporter Shuttle","Tiguan","Touareg","Touran"
]
},
{
"brand": "Suzuki",
"models": [
"Alto","Baleno","Baleno kombi","Grand Vitara","Grand Vitara XL-7","Ignis","Jimny","Kizashi","Liana","Samurai","Splash","Swift","SX4","SX4 Sedan","Vitara","Wagon R+"
]
},
{
"brand": "Mercedes-Benz",
"models": [
"100 D","115","124","126","190","190 D","190 E","200 - 300","200 D","200 E","210 Van","210 kombi","310 Van","310 kombi","230 - 300 CE Coupé","260 - 560 SE","260 - 560 SEL","500 - 600 SEC Coupé","Trieda A","A","A L","AMG GT","Trieda B","Trieda C","C","C Sportcoupé","C T","Citan","CL","CL","CLA","CLC","CLK Cabrio","CLK Coupé","CLS","Trieda E","E","E Cabrio","E Coupé","E T","Trieda G","G Cabrio","GL","GLA","GLC","GLE","GLK","Trieda M","MB 100","Trieda R","Trieda S","S","S Coupé","SL","SLC","SLK","SLR","Sprinter"
]
},
{
"brand": "Saab",
"models": [
"9-3","9-3 Cabriolet","9-3 Coupé","9-3 SportCombi","9-5","9-5 SportCombi","900","900 C","900 C Turbo","9000"
]
},
{
"brand": "Audi",
"models": [
"100","100 Avant","80","80 Avant","80 Cabrio","90","A1","A2","A3","A3 Cabriolet","A3 Limuzina","A3 Sportback","A4","A4 Allroad","A4 Avant","A4 Cabriolet","A5","A5 Cabriolet","A5 Sportback","A6","A6 Allroad","A6 Avant","A7","A8","A8 Long","Q3","Q5","Q7","R8","RS4 Cabriolet","RS4/RS4 Avant","RS5","RS6 Avant","RS7","S3/S3 Sportback","S4 Cabriolet","S4/S4 Avant","S5/S5 Cabriolet","S6/RS6","S7","S8","SQ5","TT Coupé","TT Roadster","TTS"
]
},
{
"brand": "Kia",
"models": [
"Avella","Besta","Carens","Carnival","Cee`d","Cee`d SW","Cerato","K 2500","Magentis","Opirus","Optima","Picanto","Pregio","Pride","Pro Cee`d","Rio","Rio Combi","Rio sedan","Sephia","Shuma","Sorento","Soul","Sportage","Venga"
]
},
{
"brand": "Land Rover",
"models": [
"109","Defender","Discovery","Discovery Sport","Freelander","Range Rover","Range Rover Evoque","Range Rover Sport"
]
},
{
"brand": "Dodge",
"models": [
"Avenger","Caliber","Challenger","Charger","Grand Caravan","Journey","Magnum","Nitro","RAM","Stealth","Viper"
]
},
{
"brand": "Chrysler",
"models": [
"300 C","300 C Touring","300 M","Crossfire","Grand Voyager","LHS","Neon","Pacifica","Plymouth","PT Cruiser","Sebring","Sebring Convertible","Stratus","Stratus Cabrio","Town & Country","Voyager"
]
},
{
"brand": "Ford",
"models": [
"Aerostar","B-Max","C-Max","Cortina","Cougar","Edge","Escort","Escort Cabrio","Escort kombi","Explorer","F-150","F-250","Fiesta","Focus","Focus C-Max","Focus CC","Focus kombi","Fusion","Galaxy","Grand C-Max","Ka","Kuga","Maverick","Mondeo","Mondeo Combi","Mustang","Orion","Puma","Ranger","S-Max","Sierra","Street Ka","Tourneo Connect","Tourneo Custom","Transit","Transit","Transit Bus","Transit Connect LWB","Transit Courier","Transit Custom","Transit kombi","Transit Tourneo","Transit Valnik","Transit Van","Transit Van 350","Windstar"
]
},
{
"brand": "Hummer",
"models": [
"H2","H3"
]
},
{
"brand": "Hyundai",
"models": [
"Accent","Atos","Atos Prime","Coupé","Elantra","Galloper","Genesis","Getz","Grandeur","H 350","H1","H1 Bus","H1 Van","H200","i10","i20","i30","i30 CW","i40","i40 CW","ix20","ix35","ix55","Lantra","Matrix","Santa Fe","Sonata","Terracan","Trajet","Tucson","Veloster"
]
},
{
"brand": "Infiniti",
"models": [
"EX","FX","G","G Coupé","M","Q","QX"
]
},
{
"brand": "Jaguar",
"models": [
"Daimler","F-Pace","F-Type","S-Type","Sovereign","X-Type","X-type Estate","XE","XF","XJ","XJ12","XJ6","XJ8","XJ8","XJR","XK","XK8 Convertible","XKR","XKR Convertible"
]
},
{
"brand": "Jeep",
"models": [
"Cherokee","Commander","Compass","Grand Cherokee","Patriot","Renegade","Wrangler"
]
},
{
"brand": "Nissan",
"models": [
"100 NX","200 SX","350 Z","350 Z Roadster","370 Z","Almera","Almera Tino","Cabstar E - T","Cabstar TL2 Valnik","e-NV200","GT-R","Insterstar","Juke","King Cab","Leaf","Maxima","Maxima QX","Micra","Murano","Navara","Note","NP300 Pickup","NV200","NV400","Pathfinder","Patrol","Patrol GR","Pickup","Pixo","Primastar","Primastar Combi","Primera","Primera Combi","Pulsar","Qashqai","Serena","Sunny","Terrano","Tiida","Trade","Vanette Cargo","X-Trail"
]
},
{
"brand": "Volvo",
"models": [
"240","340","360","460","850","850 kombi","C30","C70","C70 Cabrio","C70 Coupé","S40","S60","S70","S80","S90","V40","V50","V60","V70","V90","XC60","XC70","XC90"
]
},
{
"brand": "Daewoo",
"models": [
"Espero","Kalos","Lacetti","Lanos","Leganza","Lublin","Matiz","Nexia","Nubira","Nubira kombi","Racer","Tacuma","Tico"
]
},
{
"brand": "Fiat",
"models": [
"1100","126","500","500L","500X","850","Barchetta","Brava","Cinquecento","Coupé","Croma","Doblo","Doblo Cargo","Doblo Cargo Combi","Ducato","Ducato Van","Ducato Kombi","Ducato Podvozok","Florino","Florino Combi","Freemont","Grande Punto","Idea","Linea","Marea","Marea Weekend","Multipla","Palio Weekend","Panda","Panda Van","Punto","Punto Cabriolet","Punto Evo","Punto Van","Qubo","Scudo","Scudo Van","Scudo Kombi","Sedici","Seicento","Stilo","Stilo Multiwagon","Strada","Talento","Tipo","Ulysse","Uno","X1/9"
]
},
{
"brand": "MINI",
"models": [
"Cooper","Cooper Cabrio","Cooper Clubman","Cooper D","Cooper D Clubman","Cooper S","Cooper S Cabrio","Cooper S Clubman","Countryman","Mini One","One D"
]
},
{
"brand": "Rover",
"models": [
"200","214","218","25","400","414","416","620","75"
]
},
{
"brand": "Smart",
"models": [
"Cabrio","City-Coupé","Compact Pulse","Forfour","Fortwo cabrio","Fortwo coupé","Roadster"
]
}
]
\ No newline at end of file
src/environments/server.config.ts
export const apiConfig = 'http://localhost/dcarfixers/Webservices/'; export const apiConfig = 'http://localhost/dcarfixers/Webservices/';
export const ImageStorage = 'http://techlabz.in/client/truebus-andrew/'; export const ImageStorage = 'http://localhost/dcarfixers/';
export const serverApiDev = 'http://devapp.ticketgoose.com/bookbustickets/rest/json/2.0/'; export const serverApiDev = 'http://devapp.ticketgoose.com/bookbustickets/rest/json/2.0/';
src/index.html
...@@ -3,6 +3,7 @@ ...@@ -3,6 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>CarFixers</title> <title>CarFixers</title>
<base href="/"> <base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
...@@ -10,5 +11,6 @@ ...@@ -10,5 +11,6 @@
</head> </head>
<body> <body>
<app-root></app-root> <app-root></app-root>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCcc-YDSJyDpehNE6qfntfWpEQ4uS4aq6A&libraries=places"></script>
</body> </body>
</html> </html>
src/styles.scss
...@@ -183,6 +183,14 @@ body { ...@@ -183,6 +183,14 @@ body {
background: #D94350; background: #D94350;
} }
.tile {
box-shadow: none !important;
}
.horizontal .steps-indicator {
display: none !important;
}
/*------------------------------- /*-------------------------------
...@@ -435,3 +443,15 @@ section.module.parallax { ...@@ -435,3 +443,15 @@ section.module.parallax {
background-attachment: fixed !important; background-attachment: fixed !important;
background-size: cover !important; background-size: cover !important;
} }
.input_error {
border: 1px solid red !important;
}
.input_success {
border: 1px solid rgb(51, 211, 118) !important;
}
.error{
border:2px solid red !important;
}
\ No newline at end of file
typings.json 0 → 100644
{
"globalDependencies": {
"google.maps": "registry:dt/google.maps#3.25.0+20161208205818"
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment