Skip to content

C
Carfixxes
Commit c63a17a5 by amal
Options

initial commit

parents
Showing with 5517 additions and 0 deletions
.editorconfig 0 → 100644
# Editor configuration, see https://editorconfig.org
root = true
[*]
charset = utf-8
indent_style = space
indent_size = 2
insert_final_newline = true
trim_trailing_whitespace = true
[*.md]
max_line_length = off
trim_trailing_whitespace = false
.gitignore 0 → 100644
# See http://help.github.com/ignore-files/ for more about ignoring files.
# compiled output
/dist
/tmp
/out-tsc
# dependencies
/node_modules
# profiling files
chrome-profiler-events.json
speed-measure-plugin.json
# IDEs and editors
/.idea
.project
.classpath
.c9/
*.launch
.settings/
*.sublime-workspace
# IDE - VSCode
.vscode/*
!.vscode/settings.json
!.vscode/tasks.json
!.vscode/launch.json
!.vscode/extensions.json
# misc
/.sass-cache
/connect.lock
/coverage
/libpeerconnection.log
npm-debug.log
yarn-error.log
testem.log
/typings
# System Files
.DS_Store
Thumbs.db
README.md 0 → 100644
# AutoconnectV2
This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 7.1.2.
## Development server
Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
## Code scaffolding
Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
## Build
Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.
## Running unit tests
Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
## Running end-to-end tests
Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
## Further help
To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
angular.json 0 → 100644
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"autoconnectV2": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"prefix": "app",
"schematics": {
"@schematics/angular:component": {
"styleext": "scss"
}
},
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/autoconnectV2",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.scss",
"node_modules/font-awesome/css/font-awesome.css",
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/assets/css/responsive.scss"
],
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js"
]
},
"configurations": {
"production": {
"fileReplacements": [{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
}]
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "autoconnectV2:build"
},
"configurations": {
"production": {
"browserTarget": "autoconnectV2:build:production"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "autoconnectV2:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.spec.json",
"karmaConfig": "src/karma.conf.js",
"styles": [
"src/styles.scss"
],
"scripts": [],
"assets": [
"src/favicon.ico",
"src/assets"
]
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"src/tsconfig.app.json",
"src/tsconfig.spec.json"
],
"exclude": [
"**/node_modules/**"
]
}
}
}
},
"autoconnectV2-e2e": {
"root": "e2e/",
"projectType": "application",
"prefix": "",
"architect": {
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "autoconnectV2:serve"
},
"configurations": {
"production": {
"devServerTarget": "autoconnectV2:serve:production"
}
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": "e2e/tsconfig.e2e.json",
"exclude": [
"**/node_modules/**"
]
}
}
}
}
},
"defaultProject": "autoconnectV2"
}
\ No newline at end of file
e2e/protractor.conf.js 0 → 100644
// Protractor configuration file, see link for more information
// https://github.com/angular/protractor/blob/master/lib/config.ts
const { SpecReporter } = require('jasmine-spec-reporter');
exports.config = {
allScriptsTimeout: 11000,
specs: [
'./src/**/*.e2e-spec.ts'
],
capabilities: {
'browserName': 'chrome'
},
directConnect: true,
baseUrl: 'http://localhost:4200/',
framework: 'jasmine',
jasmineNodeOpts: {
showColors: true,
defaultTimeoutInterval: 30000,
print: function() {}
},
onPrepare() {
require('ts-node').register({
project: require('path').join(__dirname, './tsconfig.e2e.json')
});
jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
}
};
\ No newline at end of file
e2e/src/app.e2e-spec.ts 0 → 100644
import { AppPage } from './app.po';
describe('workspace-project App', () => {
let page: AppPage;
beforeEach(() => {
page = new AppPage();
});
it('should display welcome message', () => {
page.navigateTo();
expect(page.getTitleText()).toEqual('Welcome to autoconnectV2!');
});
});
e2e/src/app.po.ts 0 → 100644
import { browser, by, element } from 'protractor';
export class AppPage {
navigateTo() {
return browser.get('/');
}
getTitleText() {
return element(by.css('app-root h1')).getText();
}
}
e2e/tsconfig.e2e.json 0 → 100644
{
"extends": "../tsconfig.json",
"compilerOptions": {
"outDir": "../out-tsc/app",
"module": "commonjs",
"target": "es5",
"types": [
"jasmine",
"jasminewd2",
"node"
]
}
}
\ No newline at end of file
package-lock.json 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
package.json 0 → 100644
{
"name": "autoconnect-v2",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@agm/core": "^1.0.0-beta.5",
"@angular/animations": "~7.1.0",
"@angular/common": "~7.1.0",
"@angular/compiler": "~7.1.0",
"@angular/core": "~7.1.0",
"@angular/forms": "~7.1.0",
"@angular/platform-browser": "~7.1.0",
"@angular/platform-browser-dynamic": "~7.1.0",
"@angular/router": "~7.1.0",
"@ngu/carousel": "^1.5.4",
"angular-font-awesome": "^3.1.2",
"angular-star-rating": "^2.0.0-rc.5",
"angular-wizard-form": "^0.4.1",
"bootstrap": "^4.1.3",
"core-js": "^2.5.4",
"font-awesome": "^4.7.0",
"hammerjs": "^2.0.8",
"jquery": "^3.3.1",
"ng2-archwizard": "^2.1.0",
"ngx-carousel": "^1.3.5",
"ngx-rating": "0.0.9",
"ngx-slick": "^0.2.1",
"node-sass": "^4.11.0",
"rebuild": "^0.1.2",
"rxjs": "~6.3.3",
"tslib": "^1.9.0",
"zone.js": "~0.8.26"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.11.0",
"@angular/cli": "~7.1.2",
"@angular/compiler-cli": "~7.1.0",
"@angular/language-service": "~7.1.0",
"@fortawesome/fontawesome-free": "^5.6.3",
"@types/jasmine": "~2.8.8",
"@types/jasminewd2": "~2.0.3",
"@types/node": "~8.9.4",
"codelyzer": "~4.5.0",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~3.1.1",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~1.1.2",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.11.0",
"typescript": "~3.1.6"
}
}
\ No newline at end of file
src/app/app-routing.module.ts 0 → 100644
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [
{path: '', redirectTo: 'index', pathMatch: 'full'}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
src/app/app.component.html 0 → 100644
<app-navbar></app-navbar>
<router-outlet>
</router-outlet>
<app-footer></app-footer>
\ No newline at end of file
src/app/app.component.spec.ts 0 → 100644
import { TestBed, async } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { AppComponent } from './app.component';
describe('AppComponent', () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [
RouterTestingModule
],
declarations: [
AppComponent
],
}).compileComponents();
}));
it('should create the app', () => {
const fixture = TestBed.createComponent(AppComponent);
const app = fixture.debugElement.componentInstance;
expect(app).toBeTruthy();
});
it(`should have as title 'autoconnectV2'`, () => {
const fixture = TestBed.createComponent(AppComponent);
const app = fixture.debugElement.componentInstance;
expect(app.title).toEqual('autoconnectV2');
});
it('should render title in a h1 tag', () => {
const fixture = TestBed.createComponent(AppComponent);
fixture.detectChanges();
const compiled = fixture.debugElement.nativeElement;
expect(compiled.querySelector('h1').textContent).toContain('Welcome to autoconnectV2!');
});
});
src/app/app.component.ts 0 → 100644
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
title = 'autoconnectV2';
}
src/app/app.module.ts 0 → 100644
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HomeModule} from './home/home.module';
import { NavbarComponent } from './navbar/navbar.component';
import { FooterComponent } from './footer/footer.component';
@NgModule({
declarations: [
AppComponent,
NavbarComponent,
FooterComponent
],
imports: [
BrowserModule,
AppRoutingModule,
HomeModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
src/app/footer/footer.component.html 0 → 100644
<footer class="footer_main">
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<div class="footer_img">
<img src="assets/images/asset_logo.png">
</div>
<h6>Contrary to popular, Lorem Ipsum is, not simply random text. It has roots</h6>
<p><span><img src="assets/images/asset_phone.png"></span>0484 5698236</p>
<p><span><img src="assets/images/asset_mail.png"></span>[email protected]</p>
</div>
<div class="col-md-2">
<h5>COMPANY</h5>
<ul>
<li>
<a>Career</a>
</li>
<li>
<a>About</a>
</li>
<li>
<a>Blog</a>
</li>
<li>
<a>Privacy Policy</a>
</li>
<li>
<a>Terms of Use</a>
</li>
<li>
<a>Help</a>
</li>
</ul>
</div>
<div class="col-md-2">
<h5>DISCOVER</h5>
<ul>
<li>
<a>How it works</a>
</li>
<li>
<a>Sign Up</a>
</li>
<li>
<a>Guarantee</a>
</li>
<li>
<a>Repair Services</a>
</li>
<li>
<a>Service Areas</a>
</li>
<li>
<a>Vehicles Serviced</a>
</li>
<li>
<a>Repair cost Estimates</a>
</li>
</ul>
</div>
<div class="col-md-3">
<h5>SERVICE PROVIDERS</h5>
<ul>
<li>
<a>Our products</a>
</li>
<li>
<a>How the marketplace works</a>
</li>
<li>
<a>Our Shops</a>
</li>
<li>
<a>Join Us</a>
</li>
</ul>
</div>
<div class="col-md-2">
<h5>DOWNLOAD NOW</h5>
<div class="appstore">
<img src="assets/images/asset_applestore.png">
<img src="assets/images/asset_playstore.png">
</div>
<div class="social">
<img src="assets/images/asset_fb.png">
<img src="assets/images/asset_twitter.png">
<img src="assets/images/asset_google.png">
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<hr>
</div>
</div>
<div class="row">
<div class="col-md-12">
<p>Carfixxers Corporation © 2018. All Rights Reserved.</p>
</div>
</div>
</div>
</footer>
\ No newline at end of file
src/app/footer/footer.component.scss 0 → 100644
.footer_main {
background: url("/assets/images/asset_footer_background.png");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
padding-top: 50px;
padding-bottom: 50px;
hr {
border: 1px solid #646260;
border-top: none;
margin-top: 50px;
}
p {
margin: 0px;
padding: 0px;
}
.container-fluid {
max-width: calc(100% - 15%);
.footer_img {}
h6 {
color: #fff;
margin: 0px;
padding-left: 50px;
padding-top: 30px;
padding-right: 30%;
padding-bottom: 30px;
}
p {
margin: 0px;
color: #fff;
padding: 0px;
padding-bottom: 10px;
img {
margin-right: 10px;
}
}
h5 {
color: #fff;
padding-bottom: 10px;
}
.appstore {
img {
margin-bottom: 15px;
}
}
.social {
padding-top: 20px;
img {
margin: 3px;
cursor: pointer;
}
}
ul {
margin: 0px;
padding: 0px;
li {
list-style: none;
color: #fff;
padding-bottom: 10px;
a {
color: #fff;
text-decoration: none;
}
}
}
}
}
\ No newline at end of file
src/app/footer/footer.component.spec.ts 0 → 100644
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { FooterComponent } from './footer.component';
describe('FooterComponent', () => {
let component: FooterComponent;
let fixture: ComponentFixture<FooterComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ FooterComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(FooterComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
src/app/footer/footer.component.ts 0 → 100644
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-footer',
templateUrl: './footer.component.html',
styleUrls: ['./footer.component.scss']
})
export class FooterComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
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 class="row line_row">
<div class="col-md-12">
<button class="add_btn" data-toggle="modal" data-target="#addvehicle">Add Vehicle</button>
<div class="clear"></div>
</div>
</div>
<div class="row line_row">
<div class="col-md-12">
<div class="vehicle_list">
<ul>
<li>
<div class="car_photo">
</div>
<div class="car_details">
<h5><strong>Mercedes Benz</strong>B Class B 180 Sport </h5>
<div class="row m0">
<div class="col-md-2 p0">Year</div>
<div class="col-md-1">:</div>
<div class="col-md-9 p0">2017</div>
</div>
<div class="row m0">
<div class="col-md-2 p0">Make</div>
<div class="col-md-1">:</div>
<div class="col-md-9 p0">Mercedes Benz</div>
</div>
<div class="row m0">
<div class="col-md-2 p0">Model</div>
<div class="col-md-1 ">:</div>
<div class="col-md-9 p0">B Class B 180 Sport</div>
</div>
<div class="row m0">
<div class="col-md-2 p0">Engine</div>
<div class="col-md-1">:</div>
<div class="col-md-9 p0">Blue Effiency 4 cylinder</div>
</div>
</div>
<div class="clear"></div>
<div class="button_bay">
<div class="btn-group-justified" role="group" aria-label="Basic example">
<button type="button" class="btn book btn-sm">Book Now</button>
<button type="button" class="btn btn-secondary btn-sm" data-toggle="modal" data-target="#editvehicle">Edit</button>
<button type="button" class="btn btn-danger btn-sm">Delete</button>
</div>
<!-- <button class="book">Book Now</button>
<button class="edit" data-toggle="modal" data-target="#editvehicle"></button>
<button class="delete"></button>
<div class="clear"></div>-->
</div>
</li>
<li>
<div class="car_photo">
</div>
<div class="car_details">
<h5><strong>Mercedes Benz</strong>B Class B 180 Sport </h5>
<div class="row m0">
<div class="col-md-2 p0">Year</div>
<div class="col-md-1">:</div>
<div class="col-md-9 p0">2017</div>
</div>
<div class="row m0">
<div class="col-md-2 p0">Make</div>
<div class="col-md-1">:</div>
<div class="col-md-9 p0">Mercedes Benz</div>
</div>
<div class="row m0">
<div class="col-md-2 p0">Model</div>
<div class="col-md-1 ">:</div>
<div class="col-md-9 p0">B Class B 180 Sport</div>
</div>
<div class="row m0">
<div class="col-md-2 p0">Engine</div>
<div class="col-md-1">:</div>
<div class="col-md-9 p0">Blue Effiency 4 cylinder</div>
</div>
</div>
<div class="clear"></div>
<div class="button_bay">
<div class="btn-group-justified" role="group" aria-label="Basic example">
<button type="button" class="btn book btn-sm">Book Now</button>
<button type="button" class="btn btn-secondary btn-sm" data-toggle="modal" data-target="#editvehicle">Edit</button>
<button type="button" class="btn btn-danger btn-sm">Delete</button>
</div>
<!-- <button class="book">Book Now</button>
<button class="edit" data-toggle="modal" data-target="#editvehicle"></button>
<button class="delete"></button>
<div class="clear"></div>-->
</div>
</li>
<li>
<div class="car_photo">
</div>
<div class="car_details">
<h5><strong>Mercedes Benz</strong>B Class B 180 Sport </h5>
<div class="row m0">
<div class="col-md-2 p0">Year</div>
<div class="col-md-1">:</div>
<div class="col-md-9 p0">2017</div>
</div>
<div class="row m0">
<div class="col-md-2 p0">Make</div>
<div class="col-md-1">:</div>
<div class="col-md-9 p0">Mercedes Benz</div>
</div>
<div class="row m0">
<div class="col-md-2 p0">Model</div>
<div class="col-md-1 ">:</div>
<div class="col-md-9 p0">B Class B 180 Sport</div>
</div>
<div class="row m0">
<div class="col-md-2 p0">Engine</div>
<div class="col-md-1">:</div>
<div class="col-md-9 p0">Blue Effiency 4 cylinder</div>
</div>
</div>
<div class="clear"></div>
<div class="button_bay">
<div class="btn-group-justified" role="group" aria-label="Basic example">
<button type="button" class="btn book btn-sm">Book Now</button>
<button type="button" class="btn btn-secondary btn-sm" data-toggle="modal" data-target="#editvehicle">Edit</button>
<button type="button" class="btn btn-danger btn-sm">Delete</button>
</div>
<!-- <button class="book">Book Now</button>
<button class="edit" data-toggle="modal" data-target="#editvehicle"></button>
<button class="delete"></button>
<div class="clear"></div>-->
</div>
</li>
<li>
<div class="car_photo">
</div>
<div class="car_details">
<h5><strong>Mercedes Benz</strong>B Class B 180 Sport </h5>
<div class="row m0">
<div class="col-md-2 p0">Year</div>
<div class="col-md-1">:</div>
<div class="col-md-9 p0">2017</div>
</div>
<div class="row m0">
<div class="col-md-2 p0">Make</div>
<div class="col-md-1">:</div>
<div class="col-md-9 p0">Mercedes Benz</div>
</div>
<div class="row m0">
<div class="col-md-2 p0">Model</div>
<div class="col-md-1 ">:</div>
<div class="col-md-9 p0">B Class B 180 Sport</div>
</div>
<div class="row m0">
<div class="col-md-2 p0">Engine</div>
<div class="col-md-1">:</div>
<div class="col-md-9 p0">Blue Effiency 4 cylinder</div>
</div>
</div>
<div class="clear"></div>
<div class="button_bay">
<div class="btn-group-justified" role="group" aria-label="Basic example">
<button type="button" class="btn book btn-sm">Book Now</button>
<button type="button" class="btn btn-secondary btn-sm" data-toggle="modal" data-target="#editvehicle">Edit</button>
<button type="button" class="btn btn-danger btn-sm">Delete</button>
</div>
<!-- <button class="book">Book Now</button>
<button class="edit" data-toggle="modal" data-target="#editvehicle"></button>
<button class="delete"></button>
<div class="clear"></div>-->
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane container fade" id="estimate">
<div class="row">
<div class="col-md-12">
<div class="row line_row">
<div class="col-md-12">
<h3>Cost Estimates</h3>
<hr>
</div>
</div>
<div class="row line_row">
<div class="col-md-12">
<div class="table-responsive">
<table>
<thead>
<tr>
<th>Date </th>
<th>Service List</th>
<th>Service Charges</th>
<th>Location</th>
<th>Vehicle</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>22-01-2019</td>
<td>AC Coolant, Suspension winding, Wheel Alignment</td>
<td>$130</td>
<td>South Ampton</td>
<td>Mercedes Benz CLK </td>
<td>
<div class="btn-group btn-group-justified">
<a href="#" class="btn btn-secondary btn-sm">Edit</a>
<a href="#" class="btn btn-danger btn-sm">Delete</a>
</div>
</td>
</tr>
<tr>
<td>22-01-2019</td>
<td>AC Coolant, Suspension winding, Wheel Alignment</td>
<td>$130</td>
<td>South Ampton</td>
<td>Mercedes Benz CLK </td>
<td>
<div class="btn-group btn-group-justified">
<a href="#" class="btn btn-secondary btn-sm">Edit</a>
<a href="#" class="btn btn-danger btn-sm">Delete</a>
</div>
</td>
</tr>
<tr>
<td>22-01-2019</td>
<td>AC Coolant, Suspension winding, Wheel Alignment</td>
<td>$130</td>
<td>South Ampton</td>
<td>Mercedes Benz CLK </td>
<td>
<div class="btn-group btn-group-justified">
<a href="#" class="btn btn-secondary btn-sm">Edit</a>
<a href="#" class="btn btn-danger btn-sm">Delete</a>
</div>
</td>
</tr>
<tr>
<td>22-01-2019</td>
<td>AC Coolant, Suspension winding, Wheel Alignment</td>
<td>$130</td>
<td>South Ampton</td>
<td>Mercedes Benz CLK </td>
<td>
<div class="btn-group btn-group-justified">
<a href="#" class="btn btn-secondary btn-sm">Edit</a>
<a href="#" class="btn btn-danger btn-sm">Delete</a>
</div>
</td>
</tr>
<tr>
<td>22-01-2019</td>
<td>AC Coolant, Suspension winding, Wheel Alignment</td>
<td>$130</td>
<td>South Ampton</td>
<td>Mercedes Benz CLK </td>
<td>
<div class="btn-group btn-group-justified">
<a href="#" class="btn btn-secondary btn-sm">Edit</a>
<a href="#" class="btn btn-danger btn-sm">Delete</a>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane container fade" id="appointment">
<div class="row">
<div class="col-md-12">
<div class="row line_row">
<div class="col-md-12">
<h3>Appointment Details</h3>
<hr>
</div>
</div>
<div class="row line_row">
<div class="col-md-12">
<div class="table-responsive">
<table>
<thead>
<tr>
<th>Order no</th>
<th>Order Date</th>
<th>Vehicle</th>
<th>Mechanic</th>
<th>Cost</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tbody>
<tr>
<td>15DFR64</td>
<td>22-01-2019</td>
<td>Ford Explorer V8</td>
<td>Robin Carten</td>
<td>$203 </td>
<td>
<div class="btn-group btn-group-justified">
<a href="#" class="btn btn-secondary btn-sm">Edit</a>
<a href="#" class="btn btn-danger btn-sm">Delete</a>
</div>
</td>
</tr>
<tr>
<td>15DFR64</td>
<td>22-01-2019</td>
<td>Ford Explorer V8</td>
<td>Robin Carten</td>
<td>$203 </td>
<td>
<div class="btn-group btn-group-justified">
<a href="#" class="btn btn-secondary btn-sm">Edit</a>
<a href="#" class="btn btn-danger btn-sm">Delete</a>
</div>
</td>
</tr>
<tr>
<td>15DFR64</td>
<td>22-01-2019</td>
<td>Ford Explorer V8</td>
<td>Robin Carten</td>
<td>$203 </td>
<td>
<div class="btn-group btn-group-justified">
<a href="#" class="btn btn-secondary btn-sm">Edit</a>
<a href="#" class="btn btn-danger btn-sm">Delete</a>
</div>
</td>
</tr>
<tr>
<td>15DFR64</td>
<td>22-01-2019</td>
<td>Ford Explorer V8</td>
<td>Robin Carten</td>
<td>$203 </td>
<td>
<div class="btn-group btn-group-justified">
<a href="#" class="btn btn-secondary btn-sm">Edit</a>
<a href="#" class="btn btn-danger btn-sm">Delete</a>
</div>
</td>
</tr>
<tr>
<td>15DFR64</td>
<td>22-01-2019</td>
<td>Ford Explorer V8</td>
<td>Robin Carten</td>
<td>$203 </td>
<td>
<div class="btn-group btn-group-justified">
<a href="#" class="btn btn-secondary btn-sm">Edit</a>
<a href="#" class="btn btn-danger btn-sm">Delete</a>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane container fade" id="service">
<div class="row">
<div class="col-md-12">
<div class="row line_row">
<div class="col-md-12">
<h3>Service History</h3>
<hr>
</div>
</div>
<div class="row line_row">
<div class="col-md-12">
<div class="table-responsive">
<table>
<thead>
<tr>
<th>Order no</th>
<th>Order Date</th>
<th>Vehicle</th>
<th>Mechanic</th>
<th>Service Charge</th>
<th>Order Status</th>
</tr>
</thead>
<tbody>
<tbody>
<tr>
<td>15DFR64</td>
<td>22-01-2019</td>
<td>Ford Explorer V8</td>
<td>Robin Carten</td>
<td>$203 </td>
<td>
<p class="success_status">Success</p>
</td>
</tr>
<tr>
<td>15DFR64</td>
<td>22-01-2019</td>
<td>Ford Explorer V8</td>
<td>Robin Carten</td>
<td>$203 </td>
<td>
<p class="pending_status">Pending</p>
</td>
</tr>
<tr>
<td>15DFR64</td>
<td>22-01-2019</td>
<td>Ford Explorer V8</td>
<td>Robin Carten</td>
<td>$203 </td>
<td>
<p class="canceled_status">Canceled</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<!-- ADD-VEHICLE-MODAL-STARTS -->
<div class="modal" id="addvehicle">
<div class="modal-dialog">
<div class="modal-content add_modal_wrapper">
<h3>Add Vehicle
<span data-dismiss="modal" class="close">&times;</span>
</h3>
<div class="modal-body">
<div class="add_modal_tab_head">
<label class="check_container" [class.active]="tab == 'active'" (click)="tab_swap('active')">Vehicle Details
<input type="radio" checked="checked" name="radio">
<span class="checkmark"></span>
</label>
<label class="check_container" [class.active]="tab == 'inactive'" (click)="tab_swap('inactive')">Use VIN
<input type="radio" name="radio">
<span class="checkmark"></span>
</label>
</div>
<div class="add_modal_inner" [hidden]="tab=='inactive'">
<!-- <div class="row line_row">
<div class="col-md-12">
<p>Add Vehicle Photo</p>
</div>
</div>
<div class="row line_row">
<div class="col-md-12">
<div class="add_pic">
<div class="edit">
<input class="" type="input">
</div>
</div>
</div>
</div> -->
<div class="row">
<div class="col-md-12">
<p>Add Vehicle Details</p>
</div>
</div>
<div class="row line_row">
<div class="col-md-6">
<select class="vehicle_input_select" placeholder="Choose Year">
<option>Choose Year</option>
</select>
</div>
<div class="col-md-6">
<select class="vehicle_input_select" placeholder="Choose Make">
<option>Choose Make</option>
</select>
</div>
</div>
<div class="row line_row">
<div class="col-md-6">
<select class="vehicle_input_select" placeholder="Choose Model">
<option>Choose Model</option>
</select>
</div>
<div class="col-md-6">
<select class="vehicle_input_select" placeholder="Choose Engine">
<option>Choose Engine</option>
</select>
</div>
</div>
<div class="row line_row mb0">
<div class="col-md-12">
<button class="add_btn">Add Vehicle</button>
</div>
</div>
</div>
<div class="add_modal_inner" [hidden]="tab=='active'">
<div class="row">
<div class="col-md-12">
<p>Add Vehicle Identification number</p>
</div>
</div>
<div class="row line_row">
<div class="col-md-12">
<input class="vehicle_input" placeholder="Add VIN ">
</div>
</div>
<div class="row line_row mb0">
<div class="col-md-12">
<button class="add_btn">Add Vehicle</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- ADD-VEHICLE-MODAL-ENDS -->
<!-- EDIT-VEHICLE-MODAL-STARTS -->
<div class="modal" id="editvehicle">
<div class="modal-dialog">
<div class="modal-content add_modal_wrapper">
<h3>Edit Vehicle
<span data-dismiss="modal" class="close">&times;</span>
</h3>
<div class="modal-body">
<div class="add_modal_inner">
<!-- <div class="row line_row">
<div class="col-md-12">
<p>Add Vehicle Photo</p>
</div>
</div>
<div class="row line_row">
<div class="col-md-12">
<div class="add_pic">
<div class="edit">
<input class="" type="input">
</div>
</div>
</div>
</div> -->
<div class="row">
<div class="col-md-12">
<p>Edit Vehicle Details</p>
</div>
</div>
<div class="row line_row">
<div class="col-md-12">
<input class="vehicle_input" placeholder="Edit VIN">
</div>
</div>
<div class="row line_row">
<div class="col-md-12">
<input class="vehicle_input" placeholder="Edit Registration Number">
</div>
</div>
<div class="row line_row mb0">
<div class="col-md-12">
<button class="add_btn">Save Vehicle</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- EDIT-VEHICLE-MODAL-ENDS -->
\ 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;
table {
width: 100%;
thead {
background: rgba(0, 0, 0, 0.5);
tr {
th {
color: #fff;
font-size: 18px;
font-weight: 400;
padding: 10px;
padding-left: 25px;
}
}
}
tbody {
tr {
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
td {
font-size: 16px;
font-weight: 400;
padding: 10px;
padding-left: 25px;
p {
margin: 0px !important;
padding: 0px !important;
}
.success_status {
color: #4CAF50 !important;
}
.pending_status {
color: #ffc107 !important;
}
.canceled_status {
color: #b21f2d !important;
}
}
}
}
}
.container-fluid {
width: calc(100% - 15%);
.tab-content {
.container {
max-width: 100%;
.line_row {
margin-bottom: 20px;
.vehicle_list {
width: 100%;
ul {
padding: 0px;
margin: 0px;
li {
list-style: none;
display: inline-block;
position: relative;
border: 1px solid #e2e2e2;
width: 49%;
padding: 15px;
margin: 5px;
min-height: 170px;
.car_photo {
width: 120px;
height: 120px;
background: #a8a8a8;
float: left;
img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
}
.car_details {
width: calc(100% - 120px);
float: left;
padding: 8px;
padding-top: 0px;
padding-bottom: 0px;
padding-left: 15px;
h5 {
color: #2655bf;
font-size: 18px;
strong {
color: #2b4468;
padding-right: 5px;
}
}
h6 {
color: #3d3d3a;
}
p {
margin: 0px;
padding: 0px;
}
}
.button_bay {
padding-top: 10px;
.btn-group-justified {
.btn {
padding-left: 20px;
padding-right: 20px;
border-radius: 0px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
-ms-border-radius: 0px;
-o-border-radius: 0px;
&:focus {
outline: none;
border: none;
}
}
}
.book {
background: #2655bf;
color: #fff;
&:focus {
outline: none;
}
}
.edit {
width: 40px;
height: 40px;
background-image: url("/assets/images/asset_edit_dark.png");
background-color: transparent;
background-repeat: no-repeat;
background-position: center;
background-size: 22px !important;
cursor: pointer;
float: right;
border: none;
&:focus {
outline: none;
}
}
.delete {
width: 40px;
height: 40px;
background-image: url("/assets/images/asset_delete_dark.png");
background-color: transparent;
background-repeat: no-repeat;
background-position: center;
background-size: 22px !important;
cursor: pointer;
float: right;
border: none;
&:focus {
outline: none;
}
}
}
}
}
}
}
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;
&:focus {
outline: none;
}
}
.add_btn {
height: 45px;
border-radius: 0px;
padding-left: 3%;
padding-right: 3%;
color: #fff;
background: transparent;
border: 2px solid #2655bf;
color: #2655bf;
font-size: 20px;
font-weight: 500;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
-ms-border-radius: 0px;
-o-border-radius: 0px;
float: right;
&:focus {
outline: none;
}
}
.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;
}
}
}
}
}
.add_modal_wrapper {
border-radius: 0px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
-ms-border-radius: 0px;
-o-border-radius: 0px;
h3 {
font-weight: 300;
padding: 10px;
margin: 0px;
background: #2b4468;
color: #fff;
position: relative;
.close {
position: absolute;
top: 15px;
right: 15px;
color: #fff;
}
}
p {
margin: 0px;
padding-bottom: 10px;
color: #1e1e1e;
font-weight: 600;
font-size: 16px;
}
.add_pic {
width: 100px;
height: 100px;
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;
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%;
}
}
.add_modal_tab_head {
border-bottom: 1px solid rgba(0, 0, 0, .1);
padding-bottom: 20px;
padding-top: 10px;
.check_container {
display: inline-block;
position: relative;
padding-left: 35px;
margin-bottom: 0px;
padding-right: 30px;
cursor: pointer;
font-size: 16px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.check_container input {
position: absolute;
opacity: 0;
cursor: pointer;
}
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 20px;
width: 20px;
background-color: #eee;
border-radius: 50%;
}
/* On mouse-over, add a grey background color */
.check_container:hover input~.checkmark {
background-color: #ccc;
}
.check_container input:checked~.checkmark {
background-color: #2b4468;
}
.checkmark:after {
content: "";
position: absolute;
display: none;
}
.check_container input:checked~.checkmark:after {
display: block;
}
.check_container .checkmark:after {
top: 4px;
left: 4px;
width: 12px;
height: 12px;
border-radius: 50%;
background: white;
}
}
.add_modal_inner {
padding: 10px;
.line_row {
margin-bottom: 20px;
.vehicle_input {
width: 100%;
border: 1px solid #1e1e1e;
height: 40px;
padding-left: 15px;
font-size: 16px;
}
.vehicle_input_select {
width: 100%;
border: 1px solid #1e1e1e;
background: url("/assets/images/asset_down_arrow.png");
font-size: 16px;
cursor: pointer;
background-position: right 10px top 10px;
background-repeat: no-repeat;
height: 40px;
padding-left: 15px;
-webkit-appearance: none;
-moz-appearance: none;
}
}
.add_btn {
height: 45px;
border-radius: 0px;
width: 100%;
padding-left: 5%;
padding-right: 5%;
color: #fff;
background: #2b4468;
border: none;
font-size: 20px;
font-weight: 500;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
-ms-border-radius: 0px;
-o-border-radius: 0px;
float: right;
&:focus {
outline: none;
}
}
}
}
\ 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 {
tab: any;
constructor() { }
ngOnInit() {
this.tab = 'active';
}
tab_swap(type) {
this.tab = type;
}
}
src/app/home/home.module.ts 0 → 100644
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { IndexComponent } from './index/index.component';
import {moduleRouting} from './home.routing';
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';
@NgModule({
declarations: [
IndexComponent,
DashboardComponent
],
imports: [
StarRatingModule,
CommonModule,
moduleRouting,
ArchwizardModule,
NgxCarouselModule,
AgmCoreModule.forRoot({
apiKey: 'AIzaSyCjHdnKLes_pZBooXe99kIbtlqCi16l2Jk'
})
]
})
export class HomeModule { }
src/app/home/home.routing.ts 0 → 100644
import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { IndexComponent } from './index/index.component';
import { DashboardComponent } from './dashboard/dashboard.component';
const ModuleRoutes: Routes = [
{ path: 'index', component: IndexComponent},
{path: 'dashboard', component: DashboardComponent}
];
export const moduleRouting: ModuleWithProviders = RouterModule.forChild(ModuleRoutes)
src/app/home/index/index.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">
<h1>Auto service with Warranty<br> & Your interest is Ours.</h1>
<h5>Where is your car?</h5>
<div class="search_input_container">
<input class="" placeholder="Enter City, State or Zip Code">
<button class="get_started_btn" data-toggle="modal" data-target="#wizard">GET STARTED</button>
</div>
</div>
</div>
</div>
</section>
<section class="how_it_works">
<h3>HOW IT WORKS</h3>
<hr>
<br>
<br>
<div class="container-fluid">
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-2 textCenter">
<img src="assets/images/asset_icon1.png">
<h4>Get Quotes for Your Service</h4>
<p>Choose your service or describe the problem, then compare quotes from shops nearby.</p>
</div>
<div class="col-md-2 textCenter">
<img src="assets/images/asset_arrow.png" class="arrow">
</div>
<div class="col-md-2 textCenter">
<img src="assets/images/asset_icon2.png">
<h4>Schedule Your Appointment</h4>
<p>Choose the shop that's right for you, then pick a convenient day and time for your service.</p>
</div>
<div class="col-md-2 textCenter">
<img src="assets/images/asset_arrow.png" class="arrow">
</div>
<div class="col-md-2 textCenter">
<img src="assets/images/asset_icon3.png">
<h4>Pay securely online</h4>
<p>Hold your appointment with a credit card, and pay securely online when your service is complete!</p>
</div>
<div class="col-md-1"></div>
</div>
<div class="row">
<div class="col-md-12 textCenter">
<button class="learn_more">
LEARN MORE
</button>
</div>
</div>
</div>
</section>
<section class="service_check">
<div class="container-fluid">
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-2 textCenter p0">
<img src="assets/images/asset_icon4.png">
<h4>Diagnosis Trouble Codes</h4>
<p>Find out what your code really means and what you can expect to pay.</p>
<button class="learn_more">
GO
</button>
</div>
<div class="col-md-2"></div>
<div class="col-md-2 textCenter p0">
<img src="assets/images/asset_icon5.png">
<h4>Parts and Replacement</h4>
<p>Review causes, symptoms, and estimate repair costs.</p>
<button class="learn_more">
GO
</button>
</div>
<div class="col-md-2"></div>
<div class="col-md-2 textCenter p0">
<img src="assets/images/asset_icon6.png">
<h4>Maintenance Schedules</h4>
<p>Need to schedule a maintenance check? You’re in the right place.</p>
<button class="learn_more">
GO
</button>
</div>
<div class="col-md-1"></div>
</div>
</div>
</section>
<section class="testimonial_div">
<h3>CUSTOMER TESTIMONIALS</h3>
<hr>
<br>
<br>
<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>
</section>
</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 class="">
<option>YEAR</option>
</select>
</div>
<div class="col-md-6">
<select class="">
<option>MAKE</option>
</select>
</div>
</div>
<div class="row">
<div class="col-md-6">
<select class="">
<option>MODAL</option>
</select>
</div>
<div class="col-md-6">
<input class="" placeholder="APPROX VEHICLE MILEAGE" type="">
</div>
</div>
<h6 class="textLeft pb10">OPTIONAL</h6>
<div class="row">
<div class="col-md-6">
<select class="">
<option>L</option>
</select>
</div>
<div class="col-md-6">
<select class="">
<option>4 DR SEDAN AWD</option>
</select>
</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" nextStep>NEXT</button>
</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="7" placeholder="Additional Informations you may can gave">
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>ADD PHOTO OR VIDEO</h3>
<div class="row">
<div class="col-md-12">
<h4 class="pt10 textLeft">Add images</h4>
<hr>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="add_images">
<ul>
<li><span>+</span>
<input type="file">
</li>
<li><span>+</span>
<input type="file">
</li>
<li><span>+</span>
<input type="file">
</li>
<li><span>+</span>
<input type="file">
</li>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<h4 class="pt10 textLeft">Add video</h4>
<hr>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="add_images">
<ul>
<li><span>+</span>
<input type="file">
</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 5">
<h3>SUMMARY</h3>
<div class="row">
<div class="col-md-12">
<h6 class="pt10 textLeft">Please add a photo or video</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-6">
<button class="wizard_signin" type="button">SIGN IN</button>
</div>
<div class="col-md-6">
<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 0 → 100644
.main_wrapper {
.parallax_title {
background: url("/assets/images/asset_landing_background.png");
}
.title_banner_overlay {
width: 100%;
background: rgba(0, 0, 0, 0.5);
.title_banner {
width: 100%;
padding: 15%;
h1 {
text-transform: uppercase;
color: #fff;
text-align: center;
font-weight: 600;
}
h5 {
color: #fff;
text-align: center;
font-weight: 300;
font-size: 30px;
padding-top: 20px;
padding-bottom: 25px;
}
.search_input_container {
background: #fff;
width: 400px;
padding: 2px;
margin: 0 auto;
border-radius: 30px;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
-ms-border-radius: 30px;
-o-border-radius: 30px;
input {
height: 40px;
width: calc(100% - 120px);
background: transparent;
border: none;
padding-left: 15px;
&:focus {
border: none;
box-shadow: none;
outline: none;
}
}
.get_started_btn {
width: 120px;
height: 40px;
background: #2655bf;
font-size: 14px;
color: #fff;
margin: 0px;
padding: 0px;
border: none;
border-radius: 30px;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
-ms-border-radius: 30px;
-o-border-radius: 30px;
&:focus {
border: none;
box-shadow: none;
outline: none;
}
}
}
}
}
.how_it_works {
width: 100%;
padding-top: 60px;
padding-bottom: 60px;
.container-fluid {
max-width: calc(100% - 15%);
}
img {
width: 120px;
}
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;
}
.arrow {
width: auto;
position: relative;
top: 60px;
}
h4 {
color: #2b4468;
padding-bottom: 20px;
padding-top: 15px;
font-size: 20px;
font-weight: 700;
}
p {
color: #2b4468;
font-size: 16px;
font-weight: 500;
}
.learn_more {
border: 2px solid #2655bf;
color: #2655bf;
padding: 10px;
background: transparent;
margin: 0 auto;
padding-left: 8%;
padding-right: 8%;
border-radius: 25px;
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
-ms-border-radius: 25px;
-o-border-radius: 25px;
margin-top: 30px;
}
}
.service_check {
width: 100%;
padding-top: 60px;
padding-bottom: 60px;
background: #f8f8f8;
.container-fluid {
max-width: calc(100% - 15%);
}
img {
width: 120px;
}
h4 {
color: #2b4468;
padding-bottom: 20px;
padding-top: 15px;
font-weight: 700;
font-size: 20px;
}
p {
color: #2b4468;
font-size: 16px;
font-weight: 500;
}
.learn_more {
border: 2px solid #2655bf;
color: #2655bf;
padding: 10px;
padding-left: 50px;
padding-right: 50px;
background: transparent;
margin: 0 auto;
border-radius: 25px;
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
-ms-border-radius: 25px;
-o-border-radius: 25px;
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: 100%;
border-radius: 25px;
color: #2655bf;
border: 2px solid #2655bf;
background: transparent;
font-size: 16px;
font-weight: 500;
background-repeat: no-repeat;
background-size: 20px;
&:focus {
outline: none;
}
}
.wizard_quotes {
height: 40px;
width: 100%;
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%;
.add_images {
width: 100%;
ul {
margin: 0px;
padding: 0px;
text-align: center;
li {
list-style: none;
width: 100px;
height: 120px;
border: 1px dashed #a8a8a8;
display: inline-block;
text-align: center;
position: relative;
margin: 4px;
span {
position: relative;
font-size: 50px;
top: 15px;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
input {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
opacity: 0;
height: 120px;
}
}
}
}
.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.spec.ts 0 → 100644
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { IndexComponent } from './index.component';
describe('IndexComponent', () => {
let component: IndexComponent;
let fixture: ComponentFixture<IndexComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ IndexComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(IndexComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
src/app/home/index/index.component.ts 0 → 100644
import { Component, OnInit, ViewChild } from '@angular/core';
import { NgxCarousel } from 'ngx-carousel';
@Component({
selector: 'app-index',
templateUrl: './index.component.html',
styleUrls: ['./index.component.scss']
})
export class IndexComponent implements OnInit {
public carouselTile: NgxCarousel;
public featuredOn: NgxCarousel;
lat: number = 51.678418;
lng: number = 7.809007;
constructor() { }
ngOnInit() {
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'
}
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'
}
}
carouselTileLoad()
{
return '';
}
featuredOnLoad()
{
return '';
}
}
src/app/navbar/navbar.component.html 0 → 100644
<!-- NAVBAR-STARTS -->
<nav class="navbar navbar-expand-md navbar-dark">
<div class="container-fluid">
<!-- Brand -->
<a class="navbar-brand" href="#">
<img src="assets/images/asset_logo.png">
</a>
<!-- Toggler/collapsibe Button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Navbar links -->
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">CAR OWNERS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">AUTO REPAIR SHOP</a>
</li>
<!-- <li class="nav-item">
<button class="sign_btn" data-toggle="modal" data-target="#login">
<img src="assets/images/asset_signin.png">
SIGN IN</button>
</li>
<li class="nav-item">
<button class="sign_btn" data-toggle="modal" data-target="#signup">
<img src="assets/images/asset_signup.png">
SIGN UP</button>
</li> -->
<li class="nav-item">
<a class="nav-link dropdown">
<div class="account_div dropdown-toggle" data-toggle="dropdown">
<div class="account_name">
Welcome back,&nbsp;&nbsp;Ann
</div>
<div class="account_pic">
<img src="assets/images/asset_m3.png">
</div>
<div class="clear"></div>
</div>
<div class="dropdown-menu">
<a class="dropdown-item" (click)="goToPage('dashboard')">
My Dashboard</a>
<a class="dropdown-item" href="#">Logout</a>
</div>
</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- NAVBAR-ENDS -->
<!-- SIGNUP-MODAL-STARTS-->
<div class="modal" id="signup">
<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">
<h3 class="p0">SIGN UP</h3>
<div class="row">
<div class="col-md-12">
<h6>Your privacy is protected, we'll never sell or share your information.</h6>
</div>
</div>
<div class="row">
<div class="col-md-12">
<button class="facebook_btn">
Sign Up with Facebook <img src="assets/images/asset_fb1.png">
</button>
</div>
</div>
<div class="row">
<div class="col-md-12">
<h6>OR</h6>
</div>
</div>
<div class="row">
<div class="col-md-12">
<input class="" placeholder="Full Name" type="text">
</div>
</div>
<div class="row">
<div class="col-md-12">
<input class="" placeholder="Email address" type="mail">
</div>
</div>
<div class="row">
<div class="col-md-12">
<input class="" placeholder="Password (Min. 6 Characters)" type="password">
<h6 class="textLeft pt10">Must be atleast 6 characters</h6>
</div>
</div>
<h6 class="textLeft pb10">OPTIONAL</h6>
<div class="row">
<div class="col-md-6">
<input class="" placeholder="Phone Number" type="number">
</div>
<div class="col-md-6">
<input class="" placeholder="PROMOCODE" type="text">
</div>
<h6 class="pt10">By signing up, I agree to Carfixxers <a>Terms & Conditions</a></h6>
</div>
<div class="row">
<div class="col-md-12">
<button class="log_btn create_account">Create Account</button>
</div>
</div>
<div class="row">
<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>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- SIGNUP-MODAL-ENDS-->
<!-- LOGIN-MODAL-STARTS-->
<div class="modal" id="login">
<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">
<h3>SIGN IN</h3>
<div class="row">
<div class="col-md-12">
<button class="facebook_btn">
Sign in with Facebook <img src="assets/images/asset_fb1.png">
</button>
</div>
</div>
<div class="row">
<div class="col-md-12">
<h6>OR</h6>
</div>
</div>
<div class="row">
<div class="col-md-12">
<input class="" placeholder="Email Address" type="mail">
</div>
</div>
<div class="row">
<div class="col-md-12">
<input class="" placeholder="Password" type="password">
</div>
</div>
<div class="row">
<div class="col-md-12">
<button class="log_btn">Login</button>
</div>
</div>
<div class="row">
<div class="col-md-12">
<p data-dismiss="modal" data-toggle="modal" data-target="#forgot">Forgot Password ?</p>
</div>
</div>
<div class="row">
<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>Continue as guest</a></h6>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- LOGIN-MODAL-ENDS-->
<!-- FORGOT-MODAL-STARTS-->
<div class="modal" id="forgot">
<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">
<h3>FORGOT PASSWORD</h3>
<div class="row">
<div class="col-md-12">
<input class="" placeholder="Enter recovery Email Address" type="mail">
</div>
</div>
<div class="row">
<div class="col-md-12">
<button class="log_btn">Send Link</button>
</div>
</div>
<div class="row">
<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>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- FORGOT-MODAL-ENDS-->
\ No newline at end of file
src/app/navbar/navbar.component.scss 0 → 100644
.navbar {
position: fixed;
transition-duration: 1s;
transition-timing-function: ease;
top: 0px;
left: 0px;
right: 0px;
width: 100%;
padding-top: 15px;
padding-bottom: 15px;
z-index: 999;
.container-fluid {
max-width: calc(100% - 15%);
.navbar-brand {
img {
width: 180px;
}
}
.navbar-nav {
li {
margin-right: 30px;
a {
color: #fff;
position: relative;
top: 5px;
.dropdown-menu {
a {
top: 0px;
padding-top: 5px;
padding-bottom: 5px;
}
}
}
.sign_btn {
background: transparent;
border: 1px solid #fff;
color: #fff;
padding: 3px;
border-radius: 20px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
-ms-border-radius: 20px;
-o-border-radius: 20px;
padding-right: 20px;
padding-left: 40px;
position: relative;
top: 3px;
cursor: pointer;
img {
width: 30px;
position: absolute;
left: 4px;
top: 0px;
}
&:focus {
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%;
}
}
}
}
}
}
}
.scrolled_navbar {
background: #2655bf;
transition-duration: 1s;
transition-timing-function: ease;
.navbar-brand {
img {
width: 160px;
transition-duration: 1s;
transition-timing-function: ease;
}
}
}
.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: 85%;
margin: 0 auto;
h3 {
text-align: center;
text-transform: uppercase;
color: #1e1e1e;
font-weight: 600;
padding-bottom: 30px;
}
.facebook_btn {
background-color: #3b5998;
color: #fff;
text-align: center;
width: 100%;
height: 40px;
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;
}
input {
border: 1px solid #1e1e1e;
height: 40px;
width: 100%;
border-radius: 25px;
font-size: 16px;
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
-ms-border-radius: 25px;
-o-border-radius: 25px;
text-align: center;
&::placeholder {
color: #bbbbbb;
}
&:focus {
outline: none;
}
}
.row {
margin-bottom: 25px;
}
.log_btn {
height: 45px;
width: 100%;
border-radius: 25px;
color: #fff;
background: #2655bf;
border: none;
font-size: 20px;
font-weight: 300;
&: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;
}
}
}
}
}
\ No newline at end of file
src/app/navbar/navbar.component.spec.ts 0 → 100644
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { NavbarComponent } from './navbar.component';
describe('NavbarComponent', () => {
let component: NavbarComponent;
let fixture: ComponentFixture<NavbarComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ NavbarComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(NavbarComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
src/app/navbar/navbar.component.ts 0 → 100644
import { Component, OnInit, HostListener } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
declare var $;
declare const window: any;
@Component({
selector: 'app-navbar',
templateUrl: './navbar.component.html',
styleUrls: ['./navbar.component.scss']
})
export class NavbarComponent implements OnInit {
data: any;
constructor(private router: Router, private route: ActivatedRoute) { }
ngOnInit() {
}
@HostListener('window:scroll', [])
onWindowScroll() {
const number = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
if (number > 100) {
console.log('You are 100px from the top to bottom');
} else if (number > 500) {
console.log('You are 500px from the top to bottom');
}
$(window).scroll(function() {
var sticky = $('.navbar'),
scroll = $(window).scrollTop();
if (scroll > 100) sticky.addClass('scrolled_navbar');
else sticky.removeClass('scrolled_navbar');
});
}
goToPage(path,data=null){
console.log(data)
this.router.navigateByUrl(path,{queryParams:data});
document.body.scrollTop = document.documentElement.scrollTop = 0;
}
}
src/assets/css/responsive.scss 0 → 100644
/*
Site Name: Autoconnect
URI: http:
Description: This is the responsive css for Autoconnect
Version: 2.0
Author: Amal-Techware Solution
Author URI:
Tags:
---------------------------
CUSTOM STYLES
---------------------------
TABLE OF CONTENTS
---------------------------
01.0 Smartphones (portrait and landscape)
02.0 Smartphones (landscape)
03.0 Smartphones (portrait)
04.0 iPads (portrait and landscape)
05.0 iPads (landscape)
06.0 iPads (portrait)
07.0 Desktops and laptops
08.0 Large screens
09.0 iPhone 4
10.0 iPhone 5
11.0 iPhone 6
12.0 iPhone 6+
13.0 Samsung Galaxy S3
14.0 Samsung Galaxy S4
15.0 Samsung Galaxy S5
*/
/* 01. Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
.search_input_container {
width: 100% !important;
}
.title_banner {
padding: 15px !important;
}
.dashboard_tab_content {
.container-fluid {
width: 100% !important;
}
.vehicle_list {
ul {
li {
width: 100% !important;
}
}
}
}
.dashboard_tabs {
.container-fluid {
width: 100% !important;
ul {
li {
width: 100% !important;
}
}
}
}
}
/* 02.0 Smartphones (landscape) ----------- */
@media only screen and (min-width: 321px) {}
/* 03.0 Smartphones (portrait) ----------- */
@media only screen and (max-width: 320px) {}
/* 04.0 iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {}
/* 05.0 iPads (landscape) ----------- */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {}
/* 06.0 iPads (portrait) ----------- */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {}
/* 07.0 Desktops and laptops ----------- */
@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 ----------- */
@media only screen and (min-width: 1824px) {}
/* 09.0 iPhone 4 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {}
/* 10.0 iPhone 5 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2) {}
/* 11.0 iPhone 6 ----------- */
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2) {}
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2) {}
/* 12.0 iPhone 6+ ----------- */
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2) {}
/* 13.0 Samsung Galaxy S3 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2) {}
/* 14.0 Samsung Galaxy S4 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3) {}
/* 15.0 Samsung Galaxy S5 ----------- */
@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3) {}
@media (max-width: 480px) {}
@media only screen and (min-width: 1000px) {}
\ No newline at end of file
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/browserslist 0 → 100644
# This file is currently used by autoprefixer to adjust CSS to support the below specified browsers
# For additional information regarding the format and rule options, please see:
# https://github.com/browserslist/browserslist#queries
#
# For IE 9-11 support, please remove 'not' from the last line of the file and adjust as needed
> 0.5%
last 2 versions
Firefox ESR
not dead
not IE 9-11
\ No newline at end of file
src/environments/environment.prod.ts 0 → 100644
export const environment = {
production: true
};
src/environments/environment.ts 0 → 100644
// This file can be replaced during build by using the `fileReplacements` array.
// `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
// The list of file replacements can be found in `angular.json`.
export const environment = {
production: false
};
/*
* For easier debugging in development mode, you can import the following file
* to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
*
* This import should be commented out in production mode because it will have a negative impact
* on performance if an error is thrown.
*/
// import 'zone.js/dist/zone-error'; // Included with Angular CLI.
src/favicon.ico 0 → 100644
File added
src/index.html 0 → 100644
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CarFixxers</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
</html>
\ No newline at end of file
src/karma.conf.js 0 → 100644
// Karma configuration file, see link for more information
// https://karma-runner.github.io/1.0/config/configuration-file.html
module.exports = function (config) {
config.set({
basePath: '',
frameworks: ['jasmine', '@angular-devkit/build-angular'],
plugins: [
require('karma-jasmine'),
require('karma-chrome-launcher'),
require('karma-jasmine-html-reporter'),
require('karma-coverage-istanbul-reporter'),
require('@angular-devkit/build-angular/plugins/karma')
],
client: {
clearContext: false // leave Jasmine Spec Runner output visible in browser
},
coverageIstanbulReporter: {
dir: require('path').join(__dirname, '../coverage'),
reports: ['html', 'lcovonly', 'text-summary'],
fixWebpackSourcePaths: true
},
reporters: ['progress', 'kjhtml'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['Chrome'],
singleRun: false
});
};
\ No newline at end of file
src/main.ts 0 → 100644
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
if (environment.production) {
enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.error(err));
src/polyfills.ts 0 → 100644
/**
* This file includes polyfills needed by Angular and is loaded before the app.
* You can add your own extra polyfills to this file.
*
* This file is divided into 2 sections:
* 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
* 2. Application imports. Files imported after ZoneJS that should be loaded before your main
* file.
*
* The current setup is for so-called "evergreen" browsers; the last versions of browsers that
* automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
* Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
*
* Learn more in https://angular.io/guide/browser-support
*/
/***************************************************************************************************
* BROWSER POLYFILLS
*/
/** IE9, IE10 and IE11 requires all of the following polyfills. **/
// import 'core-js/es6/symbol';
// import 'core-js/es6/object';
// import 'core-js/es6/function';
// import 'core-js/es6/parse-int';
// import 'core-js/es6/parse-float';
// import 'core-js/es6/number';
// import 'core-js/es6/math';
// import 'core-js/es6/string';
// import 'core-js/es6/date';
// import 'core-js/es6/array';
// import 'core-js/es6/regexp';
// import 'core-js/es6/map';
// import 'core-js/es6/weak-map';
// import 'core-js/es6/set';
/**
* If the application will be indexed by Google Search, the following is required.
* Googlebot uses a renderer based on Chrome 41.
* https://developers.google.com/search/docs/guides/rendering
**/
// import 'core-js/es6/array';
/** IE10 and IE11 requires the following for NgClass support on SVG elements */
// import 'classlist.js'; // Run `npm install --save classlist.js`.
/** IE10 and IE11 requires the following for the Reflect API. */
// import 'core-js/es6/reflect';
/**
* Web Animations `@angular/platform-browser/animations`
* Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
* Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
**/
// import 'web-animations-js'; // Run `npm install --save web-animations-js`.
/**
* By default, zone.js will patch all possible macroTask and DomEvents
* user can disable parts of macroTask/DomEvents patch by setting following flags
*/
// (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
// (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
// (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
/*
* in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
* with the following flag, it will bypass `zone.js` patch for IE/Edge
*/
// (window as any).__Zone_enable_cross_context_check = true;
/***************************************************************************************************
* Zone JS is required by default for Angular itself.
*/
import 'zone.js/dist/zone'; // Included with Angular CLI.
/***************************************************************************************************
* APPLICATION IMPORTS
*/
src/styles.scss 0 → 100644
/*
Site Name: Autoconnect Version 2
URI: http:
Description: This is the theme scss for Autoconnect Version 2
Version: 2.0
Author: Amal-Techware Solution
Author URI:
Tags:
---------------------------
THEME STYLES
---------------------------
TABLE OF CONTENTS
---------------------------
01. FONTS-N-SIZES
02. FONTS-COLOR
03. THEMES-N-BACKGROUNDS
04. SPACING-N-POSITIONS
05. ALIGMENTS
06. ALERTS-N-MESSAGES
*/
/*-------------------------------
01. FONTS-N-SIZES
--------------------------------*/
@import url('https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i');
* {
font-family: 'Lato', sans-serif;
-webkit-font-smoothing: antialiased;
}
*::-webkit-scrollbar {
display: none;
}
.no-scroll .scroll-content {
overflow: hidden;
}
button {
cursor: pointer;
&:focus {
outline: none;
}
}
a {
text-decoration: none !important;
}
html,
body {
font-family: 'Lato', sans-serif !important;
}
.modal-full {
min-width: 100%;
margin: 0 !important;
height: 100vh;
.modal-content {
height: 100%;
border-radius: 0px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
-ms-border-radius: 0px;
-o-border-radius: 0px;
}
}
/*-------------------------------
02. FONTS-SETTINGS
--------------------------------*/
.text_color_white {
color: #fff !important;
}
.text_color_theme {
color: #D94350 !important;
}
.font_size_xs {
font-size: 12px !important;
}
.font_size_sm {
font-size: 14px !important;
}
.font_size_md {
font-size: 16px !important;
}
.font_size_lg {
font-size: 18px !important;
}
.font_size_xl {
font-size: 20px !important;
}
.font_size_vl {
font-size: 35px !important;
}
.font_weight300 {
font-weight: 300 !important;
}
.font_weight400 {
font-weight: 400 !important;
}
.font_weight500 {
font-weight: 500 !important;
}
.font_weight600 {
font-weight: 600 !important;
}
/*-------------------------------
03. THEMES-N-BACKGROUNDS
--------------------------------*/
.theme_background {
background-size: cover !important;
background-position: center !important;
}
.theme_transparent {
background: transparent !important;
}
.theme_white {
background-color: #f7f8fd !important;
}
.theme_off_white {
background-color: #f4f4f4 !important;
}
.theme_dark_transparent {
background-color: rgba(0, 0, 0, 0.6) !important;
}
.theme_white_transparent {
background-color: rgba(243, 243, 243, 0.6) !important;
}
.primary_background {
background: #D94350;
}
.tile {
box-shadow: none !important;
}
.horizontal .steps-indicator {
display: none !important;
}
/*-------------------------------
04. SPACING-N-POSITIONS
--------------------------------*/
.width25 {
width: 25% !important;
}
.width50 {
width: 50% !important;
}
.width75 {
width: 75% !important;
}
.widthFull {
width: 100% !important;
}
.widthAuto {
width: auto !important;
}
.height25 {
height: 25% !important;
}
.height50 {
height: 50% !important;
}
.height75 {
width: 75% !important;
}
.heightFull {
height: 100% !important;
}
.heightAuto {
height: auto !important;
}
.p0 {
padding: 0px !important;
}
.pl0 {
padding-left: 0px !important;
}
.pr0 {
padding-right: 0px !important;
}
.pt0 {
padding-top: 0px !important;
}
.pb0 {
padding-bottom: 0px !important;
}
.p10 {
padding: 10px !important;
}
.pt10 {
padding-top: 10px !important;
}
.pb10 {
padding-bottom: 10px !important;
}
.m0 {
margin: 0px !important;
}
.ml0 {
margin-left: 0px !important;
}
.mr0 {
margin-right: 0px !important;
}
.mt0 {
margin-top: 0px !important;
}
.mb0 {
margin-bottom: 0px !important;
}
.mAuto {
margin: 0 auto !important;
}
.clear {
clear: both !important;
}
.absolute {
position: absolute !important;
}
.relative {
position: relative !important;
}
.fixed {
position: fixed !important;
}
.borderNone {
border: none !important;
}
/*-------------------------------
05. ALIGMENTS
--------------------------------*/
.floatLeft {
float: left !important;
}
.floatRight {
float: right !important;
}
.textLeft {
text-align: left !important;
}
.textRight {
text-align: right !important;
}
.textCenter {
text-align: center !important;
}
/*-------------------------------
06. ALERTS-N-MESSAGES
--------------------------------*/
.alert {
padding: 15px;
margin-bottom: 20px;
border: 1px solid transparent;
font-weight: 600;
transition: all 0.5s ease;
position: fixed;
border-bottom: 0px;
left: 0px;
right: 0px;
}
.warning {
color: #fff;
background-color: #8a6d3b;
}
.success {
color: #fff;
background-color: #3c763d;
}
.error {
color: #fff;
background-color: #a94442;
}
/*-------------------------------
07. ERROR - MESSAGE
--------------------------------*/
.s_error {
padding-bottom: 10px;
}
.s_error .s_validation {
background: #990000 !important;
padding: 5px !important;
position: relative;
display: inline-block !important;
box-shadow: 1px 1px 1px #aaaaaa;
margin-top: 0px;
border-radius: 2px;
color: #fff;
width: 100%;
padding-right: 10px !important;
padding-left: 10px !important;
font-weight: 300;
}
.s_error .s_validation:before {
content: '';
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 8px solid #990000;
position: absolute;
top: -8px;
left: 10px;
}
.s_label:after {
color: #990000 !important;
}
.s_error input,
.c-error select,
.s_error .s_choice-option {
background: #fff0f4;
color: #990000;
}
.s_error input,
.s_error select {
border: 1px solid #990000 !important;
}
/*-------------------------------
08. BODY-STRUCTURE
--------------------------------*/
section.module.parallax {
background-repeat: no-repeat !important;
background-attachment: fixed !important;
background-size: cover !important;
}
.main_wrapper {}
\ No newline at end of file
src/test.ts 0 → 100644
// This file is required by karma.conf.js and loads recursively all the .spec and framework files
import 'zone.js/dist/zone-testing';
import { getTestBed } from '@angular/core/testing';
import {
BrowserDynamicTestingModule,
platformBrowserDynamicTesting
} from '@angular/platform-browser-dynamic/testing';
declare const require: any;
// First, initialize the Angular testing environment.
getTestBed().initTestEnvironment(
BrowserDynamicTestingModule,
platformBrowserDynamicTesting()
);
// Then we find all the tests.
const context = require.context('./', true, /\.spec\.ts$/);
// And load the modules.
context.keys().map(context);
src/tsconfig.app.json 0 → 100644
{
"extends": "../tsconfig.json",
"compilerOptions": {
"outDir": "../out-tsc/app",
"types": []
},
"exclude": [
"test.ts",
"**/*.spec.ts"
]
}
src/tsconfig.spec.json 0 → 100644
{
"extends": "../tsconfig.json",
"compilerOptions": {
"outDir": "../out-tsc/spec",
"types": [
"jasmine",
"node"
]
},
"files": [
"test.ts",
"polyfills.ts"
],
"include": [
"**/*.spec.ts",
"**/*.d.ts"
]
}
src/tslint.json 0 → 100644
{
"extends": "../tslint.json",
"rules": {
"directive-selector": [
true,
"attribute",
"app",
"camelCase"
],
"component-selector": [
true,
"element",
"app",
"kebab-case"
]
}
}
tsconfig.json 0 → 100644
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"module": "es2015",
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"importHelpers": true,
"target": "es5",
"typeRoots": [
"node_modules/@types"
],
"lib": [
"es2018",
"dom"
]
}
}
tslint.json 0 → 100644
{
"rulesDirectory": [
"codelyzer"
],
"rules": {
"arrow-return-shorthand": true,
"callable-types": true,
"class-name": true,
"comment-format": [
true,
"check-space"
],
"curly": true,
"deprecation": {
"severity": "warn"
},
"eofline": true,
"forin": true,
"import-blacklist": [
true,
"rxjs/Rx"
],
"import-spacing": true,
"indent": [
true,
"spaces"
],
"interface-over-type-literal": true,
"label-position": true,
"max-line-length": [
true,
140
],
"member-access": false,
"member-ordering": [
true,
{
"order": [
"static-field",
"instance-field",
"static-method",
"instance-method"
]
}
],
"no-arg": true,
"no-bitwise": true,
"no-console": [
true,
"debug",
"info",
"time",
"timeEnd",
"trace"
],
"no-construct": true,
"no-debugger": true,
"no-duplicate-super": true,
"no-empty": false,
"no-empty-interface": true,
"no-eval": true,
"no-inferrable-types": [
true,
"ignore-params"
],
"no-misused-new": true,
"no-non-null-assertion": true,
"no-redundant-jsdoc": true,
"no-shadowed-variable": true,
"no-string-literal": false,
"no-string-throw": true,
"no-switch-case-fall-through": true,
"no-trailing-whitespace": true,
"no-unnecessary-initializer": true,
"no-unused-expression": true,
"no-use-before-declare": true,
"no-var-keyword": true,
"object-literal-sort-keys": false,
"one-line": [
true,
"check-open-brace",
"check-catch",
"check-else",
"check-whitespace"
],
"prefer-const": true,
"quotemark": [
true,
"single"
],
"radix": true,
"semicolon": [
true,
"always"
],
"triple-equals": [
true,
"allow-null-check"
],
"typedef-whitespace": [
true,
{
"call-signature": "nospace",
"index-signature": "nospace",
"parameter": "nospace",
"property-declaration": "nospace",
"variable-declaration": "nospace"
}
],
"unified-signatures": true,
"variable-name": false,
"whitespace": [
true,
"check-branch",
"check-decl",
"check-operator",
"check-separator",
"check-type"
],
"no-output-on-prefix": true,
"use-input-property-decorator": true,
"use-output-property-decorator": true,
"use-host-property-decorator": true,
"no-input-rename": true,
"no-output-rename": true,
"use-life-cycle-interface": true,
"use-pipe-transform-interface": true,
"component-class-suffix": true,
"directive-class-suffix": true
}
}
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