home design
This commit is contained in:
parent
d06f323c9e
commit
d60a888771
@ -30,6 +30,7 @@ import {VgBufferingModule} from 'videogular2/buffering';
|
||||
import { DropzoneModule } from 'ngx-dropzone-wrapper';
|
||||
import { DROPZONE_CONFIG } from 'ngx-dropzone-wrapper';
|
||||
import { DropzoneConfigInterface } from 'ngx-dropzone-wrapper';
|
||||
import { HomeComponent } from './home/home.component';
|
||||
|
||||
|
||||
const DEFAULT_DROPZONE_CONFIG: DropzoneConfigInterface = {
|
||||
@ -40,10 +41,15 @@ const DEFAULT_DROPZONE_CONFIG: DropzoneConfigInterface = {
|
||||
};
|
||||
|
||||
const appRoutes: Routes = [
|
||||
{
|
||||
path: 'home',
|
||||
component: HomeComponent,
|
||||
data: { title: 'home' }
|
||||
},
|
||||
{
|
||||
path: 'main',
|
||||
component: MainComponent,
|
||||
data: { title: 'Home Main' }
|
||||
data: { title: 'Main' }
|
||||
},
|
||||
{
|
||||
path: 'books',
|
||||
@ -61,7 +67,7 @@ const appRoutes: Routes = [
|
||||
data: { title: 'Sign Up' }
|
||||
},
|
||||
{ path: '',
|
||||
redirectTo: '/login',
|
||||
redirectTo: '/home',
|
||||
pathMatch: 'full'
|
||||
}
|
||||
];
|
||||
@ -69,6 +75,7 @@ const appRoutes: Routes = [
|
||||
@NgModule({
|
||||
declarations: [
|
||||
AppComponent,
|
||||
HomeComponent,
|
||||
LoginComponent,
|
||||
SignupComponent,
|
||||
MainComponent,
|
||||
|
136
src/app/home/home.component.html
Normal file
136
src/app/home/home.component.html
Normal file
@ -0,0 +1,136 @@
|
||||
|
||||
<!--Main Navigation-->
|
||||
<header>
|
||||
|
||||
<!--Navbar-->
|
||||
<mdb-navbar SideClass="navbar navbar-expand-lg navbar-dark fixed-top scrolling-navbar">
|
||||
<logo>
|
||||
<a class="logo navbar-brand waves-light" mdbWavesEffect href="#"><strong>SupFile</strong></a>
|
||||
</logo>
|
||||
<links>
|
||||
<ul class="navbar-nav mr-auto">
|
||||
<li class="nav-item active waves-light" mdbWavesEffect>
|
||||
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
|
||||
</li>
|
||||
<li class="nav-item waves-light" mdbWavesEffect>
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
</li>
|
||||
<li class="nav-item waves-light" mdbWavesEffect>
|
||||
<a class="nav-link" href="#">Profile</a>
|
||||
</li>
|
||||
</ul>
|
||||
<form class="form-inline waves-light" mdbWavesEffect>
|
||||
<div class="md-form mt-0">
|
||||
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
|
||||
</div>
|
||||
</form>
|
||||
</links>
|
||||
</mdb-navbar>
|
||||
|
||||
<!--Intro Section-->
|
||||
<section class="view intro-2">
|
||||
<div class="full-bg-img mask rgba-gradient">
|
||||
<div class="container flex-center">
|
||||
<div class="d-flex align-items-center content-height w-100">
|
||||
<div class="row flex-center pt-5 mt-3 w-100">
|
||||
<div class="col-md-6 text-center text-md-left mb-5">
|
||||
<div class="white-text">
|
||||
<h1 class="h1-responsive font-bold wow fadeInLeft" data-wow-delay="0.3s">Sign up right now! </h1>
|
||||
<hr class="hr-light wow fadeInLeft" data-wow-delay="0.3s">
|
||||
<h6 class="wow fadeInLeft" data-wow-delay="0.3s">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem repellendus quasi fuga nesciunt dolorum nulla magnam veniam sapiente, fugiat! Commodi sequi non animi ea dolor molestiae, quisquam iste, maiores. Nulla.</h6>
|
||||
<br>
|
||||
<a class="btn btn-outline-white wow fadeInLeft waves-light" data-wow-delay="0.3s" mdbWavesEffect>Learn more</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 col-xl-5 offset-xl-1">
|
||||
<!--Form-->
|
||||
<div *ngIf="registerbool===false" class="card wow flipInY" data-wow-delay="0.3s">
|
||||
<div class="card-body">
|
||||
<!--Header-->
|
||||
<div class="text-center">
|
||||
<h3 class="white-text"><i class="fa fa-user white-text"></i> Log in:</h3>
|
||||
<hr class="hr-light">
|
||||
</div>
|
||||
|
||||
<!--Body-->
|
||||
<div class="md-form">
|
||||
<i class="fa fa-envelope prefix white-text"></i>
|
||||
<input type="email" id="form2" class="form-control" data-error=" " data-success=" " mdbInputDirective>
|
||||
<label for="form2">Email</label>
|
||||
</div>
|
||||
|
||||
<div class="md-form">
|
||||
<i class="fa fa-lock prefix white-text"></i>
|
||||
<input type="password" id="form4" class="form-control" data-error=" " data-success=" " mdbInputDirective>
|
||||
<label for="form4">Password</label>
|
||||
</div>
|
||||
|
||||
<div class="text-center">
|
||||
<button class="btn btn-indigo waves-light" mdbWavesEffect>Log In</button>
|
||||
<button class="btn btn-indigo waves-light" mdbWavesEffect (click)="showregister()">Sign up</button>
|
||||
<hr class="hr-light mb-3 mt-4">
|
||||
<div class="inline-ul text-center d-flex justify-content-center">
|
||||
<a class="icons-sm fb-ic px-4"><i class="fa fa-facebook white-text"> </i></a>
|
||||
<a class="icons-sm gplus-ic px-4"><i class="fa fa-google white-text"> </i></a>
|
||||
<a class="icons-sm px-4"><i class="fa fa-github white-text" aria-hidden="true"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!--/.Form-->
|
||||
|
||||
|
||||
|
||||
<!--Form-->
|
||||
<div *ngIf="registerbool" class="card wow flipInY" data-wow-delay="0.3s">
|
||||
<div class="card-body">
|
||||
<!--Header-->
|
||||
<div class="text-center">
|
||||
<h3 class="white-text"><i class="fa fa-user white-text"></i> Register:</h3>
|
||||
<hr class="hr-light">
|
||||
</div>
|
||||
|
||||
<!--Body-->
|
||||
<div class="md-form">
|
||||
<i class="fa fa-user prefix white-text"></i>
|
||||
<input type="text" id="form3" class="form-control" data-success=" " data-error=" " mdbInputDirective>
|
||||
<label for="form3">Your name</label>
|
||||
</div>
|
||||
<div class="md-form">
|
||||
<i class="fa fa-envelope prefix white-text"></i>
|
||||
<input type="email" id="form2" data-error="wrong email" data-success=" " data-error=" " class="form-control" mdbInputDirective>
|
||||
<label for="form2">Your email</label>
|
||||
</div>
|
||||
|
||||
<div class="md-form">
|
||||
<i class="fa fa-lock prefix white-text"></i>
|
||||
<input type="password" id="form4" data-success=" " data-error=" " class="form-control" mdbInputDirective>
|
||||
<label for="form4">Your password</label>
|
||||
</div>
|
||||
|
||||
<div class="text-center">
|
||||
<button class="btn btn-indigo waves-light" mdbWavesEffect>Sign up</button>
|
||||
<button class="btn btn-indigo waves-light" mdbWavesEffect (click)="showregister()">Log In</button>
|
||||
<hr class="hr-light mb-3 mt-4">
|
||||
|
||||
<div class="inline-ul text-center d-flex justify-content-center">
|
||||
<a class="icons-sm fb-ic px-4"><i class="fa fa-facebook white-text"> </i></a>
|
||||
<a class="icons-sm gplus-ic px-4"><i class="fa fa-google white-text"> </i></a>
|
||||
<a class="icons-sm px-4"><i class="fa fa-github white-text" aria-hidden="true"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!--/.Form-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</header>
|
||||
<!--Main Navigation-->
|
44
src/app/home/home.component.scss
Normal file
44
src/app/home/home.component.scss
Normal file
@ -0,0 +1,44 @@
|
||||
|
||||
.intro-2 {
|
||||
background: url("http://mdbootstrap.com/img/Photos/Others/img%20(42).jpg")no-repeat center center;
|
||||
background-size: cover;
|
||||
}
|
||||
.view {
|
||||
height: 100vh !important;
|
||||
}
|
||||
.top-nav-collapse {
|
||||
background-color: #3f51b5 !important;
|
||||
}
|
||||
.navbar:not(.top-nav-collapse) {
|
||||
background: transparent !important;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.navbar:not(.top-nav-collapse) {
|
||||
background: #3f51b5 !important;
|
||||
}
|
||||
}
|
||||
.rgba-gradient .full-bg-img {
|
||||
background: linear-gradient(45deg, rgba(83, 125, 210, 0.4), rgba(178, 30, 123, 0.4) 100%);
|
||||
}
|
||||
.card {
|
||||
background-color: rgba(229, 228, 255, 0.2);
|
||||
}
|
||||
|
||||
.md-form .prefix {
|
||||
font-size: 1.5rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
.md-form label {
|
||||
color: #ffffff;
|
||||
}
|
||||
h6 {
|
||||
line-height: 1.7;
|
||||
}
|
||||
@media (max-width: 740px) {
|
||||
.full-height,
|
||||
.full-height body,
|
||||
.full-height header,
|
||||
.full-height header .view {
|
||||
height: 1040px;
|
||||
}
|
||||
}
|
25
src/app/home/home.component.spec.ts
Normal file
25
src/app/home/home.component.spec.ts
Normal file
@ -0,0 +1,25 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { HomeComponent } from './home.component';
|
||||
|
||||
describe('HomeComponent', () => {
|
||||
let component: HomeComponent;
|
||||
let fixture: ComponentFixture<HomeComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ HomeComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(HomeComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
22
src/app/home/home.component.ts
Normal file
22
src/app/home/home.component.ts
Normal file
@ -0,0 +1,22 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-home',
|
||||
templateUrl: './home.component.html',
|
||||
styleUrls: ['./home.component.scss']
|
||||
})
|
||||
export class HomeComponent implements OnInit {
|
||||
registerbool: boolean;
|
||||
|
||||
constructor() {
|
||||
this.registerbool = false;
|
||||
}
|
||||
|
||||
showregister() {
|
||||
this.registerbool = !this.registerbool
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
}
|
||||
|
||||
}
|
Loading…
Reference in New Issue
Block a user