website/src/app/app.component.html
2018-07-11 23:18:23 -04:00

104 lines
4.3 KiB
HTML

<!-- Nav -->
<nav class="navbar navbar-expand-lg fixed-top navbar-light bg-light">
<div class="container">
<a class="navbar-brand roboto" [routerLink]="['/']">
<span class="fh-fade">fh</span>
<span class="rainbow"> & </span>
<span class="sons-fade">sons</span>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar" aria-expanded="false">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link text-dark" [routerLink]="['/about']">About</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" [routerLink]="['/store']">Store</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" [routerLink]="['/formulaManager']">Formula Manager</a>
</li>
</ul>
<button mat-stroked-button class="ml-auto" color="primary" data-toggle="modal" data-target="#loginModal">Login</button>
</div>
</div>
</nav>
<!-- Content -->
<div>
<div style="height: 56px"></div>
<router-outlet></router-outlet>
</div>
<!-- Footer -->
<footer>
<div class="container-fluid bg-light">
<div class="container">
<div class="d-inline-block py-3">
<div class="d-none d-md-inline-block align-top mr-5">
<h5>MAIN MENU</h5>
<ul style="list-style-type: none; padding-left: 0;">
<li>
<a [routerLink]="['/about']">About</a>
</li>
<li>
<a [routerLink]="['/store']">Store</a>
</li>
<li>
<a [routerLink]="['/formulaManager']">Formula Manager</a>
</li>
</ul>
</div>
<div class="d-none d-md-inline-block align-top mr-5">
<h5>PRODUCTS</h5>
<ul style="list-style-type: none; padding-left: 0; columns: 3;">
<li *ngFor="let c of categories | async">
<a [routerLink]="['/store', c.name]">{{c.name}}</a>
</li>
</ul>
</div>
<div class="align-top d-inline-block">
<h5>CONTACT</h5>
<p>
Toll Free: 1-888-422-7737
<br> Local: 416-744-2723
<br> Fax: 416-744-4078
</p>
</div>
</div>
</div>
</div>
<div class="container-fluid" style="background-color: #d3d3d3;">
<div class="container text-center">
<p class="mb-0 p-2">© 2018 fh & sons. Created By
<a href="http://zakscode.com">Zak Timson</a>
</p>
</div>
</div>
</footer>
<!-- Login Modal -->
<div class="modal fade" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="loginModal" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Login</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<div id="incorrectAlert" class="alert alert-danger collapse" role="alert">Username or password is incorrect.</div>
<input id="username" class="form-control mb-3" placeholder="Username">
<input id="password" class="form-control" type="password" placeholder="Password">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button id="loginBtn" type="button" class="btn btn-primary">Login</button>
</div>
</div>
</div>
</div>