api/v1/Customers/customersDetails.php

@@ -1,3 +1,4 @@
+<div id="page-customers">
 <div class="container-fluid">
 <div class="row">
 <div class="col-sm-6">
@@ -43,7 +44,7 @@
 <?php include "addVehicle.php" ?>
 <?php include "deleteVehicle.php" ?>
 
-
+</div>
 
 
 

api/v1/Customers/vehicles.txt

@@ -1,9 +1,84 @@
 {
     "data": [
         {
-            "Customer_Id": 11,
-            "Id": 35,
-            "Number": "P\/1234"
+            "Customer_Id": 3,
+            "Id": 4,
+            "Number": "2F\/8124"
+        },
+        {
+            "Customer_Id": 3,
+            "Id": 5,
+            "Number": "5B\/3429"
+        },
+        {
+            "Customer_Id": 3,
+            "Id": 6,
+            "Number": "7J\/5931"
+        },
+        {
+            "Customer_Id": 3,
+            "Id": 7,
+            "Number": "RS\/1234"
+        },
+        {
+            "Customer_Id": 3,
+            "Id": 9,
+            "Number": "1M\/9252"
+        },
+        {
+            "Customer_Id": 3,
+            "Id": 10,
+            "Number": "6M\/6445"
+        },
+        {
+            "Customer_Id": 3,
+            "Id": 11,
+            "Number": "DY\/60ES"
+        },
+        {
+            "Customer_Id": 3,
+            "Id": 12,
+            "Number": "9H\/9537"
+        },
+        {
+            "Customer_Id": 3,
+            "Id": 13,
+            "Number": "5K\/9939"
+        },
+        {
+            "Customer_Id": 3,
+            "Id": 14,
+            "Number": "7M\/4947"
+        },
+        {
+            "Customer_Id": 3,
+            "Id": 15,
+            "Number": "7J\/1619"
+        },
+        {
+            "Customer_Id": 3,
+            "Id": 19,
+            "Number": "4C\/1619"
+        },
+        {
+            "Customer_Id": 3,
+            "Id": 21,
+            "Number": "5C\/3113"
+        },
+        {
+            "Customer_Id": 3,
+            "Id": 25,
+            "Number": "2N\/1762"
+        },
+        {
+            "Customer_Id": 3,
+            "Id": 32,
+            "Number": "1K\/9943"
+        },
+        {
+            "Customer_Id": 3,
+            "Id": 33,
+            "Number": "2N\/9995"
         }
     ]
 }

css/style.css

@@ -1,49 +1,179 @@
-html{
-  font-family: "Helvetica Neue", sans-serif;
-  width:100%;
-  color:#666666;
-  text-align:center;
-}
-
-.popup-overlay{
-  /*Hides pop-up when there is no "active" class*/
-  visibility:hidden;
-  position:absolute;
-  background:#ffffff;
-  border:3px solid #666666;
-  width:50%;
-  height:50%;
-  left:25%; 
-}
-.popup-overlay.active{
-  /*displays pop-up when "active" class is present*/
-  visibility:visible;
-  text-align:center;
-}
-
-.popup-content {
-  /*Hides pop-up content when there is no "active" class */
- visibility:hidden;
-}
-
-.popup-content.active {
-  /*Shows pop-up content when "active" class is present */
-  visibility:visible;
-}
-
-button{
-  display:inline-block;
-  vertical-align:middle;
-  border-radius:30px;
-  margin:.20rem;
-  font-size: 1rem;
-  color:#666666;
-  background:   #ffffff;
-  border:1px solid #666666;  
-}
-
-button:hover{
-  border:1px solid #666666;
-  background:#666666;
-  color:#ffffff;
+body {
+  font-family: 'Open Sans', sans-serif;
+  line-height: 1.6em;
+}
+.container-fluid {
+  background-color: #efecee;
+}
+.profile-sidebar {
+  background-color: #454243;
+  word-wrap: break-word;
+  color: #eee;
+}
+.profile-sidebar h1 {
+  font-weight: bold;
+  color: #fff;
+}
+.profile-sidebar h2 {
+  font-size: 0.9em;
+  font-weight: bold;
+  color: #5BC798;
+}
+.profile-sidebar a {
+  color: #eee;
+}
+.nav-sidebar {
+  background-color: #d8d4d6;
+  word-wrap: break-word;
+}
+.nav-sidebar {
+  padding: 4px;
+}
+.nav-sidebar ul {
+  list-style: none;
+  margin: 15px 0 0 0;
+  padding: 0;
+}
+.nav-sidebar ul li {
+  margin-bottom: 20px;
+}
+.nav-sidebar a {
+  color: #444;
+  font-size: 0.9em;
+  transition: color 0.5s;
+}
+.nav-sidebar a:hover,
+.nav-sidebar a:focus,
+.nav-sidebar a:active {
+  text-decoration: none;
+  color: #777;
+}
+.social-links {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.social-links li {
+  display: inline;
+}
+.social-links a .fa-facebook-square {
+  color: #6a6a6a;
+  transition: color 0.3s;
+}
+.social-links a .fa-linkedin-square {
+  color: #2d6b88;
+  transition: color 0.3s;
+}
+.social-links a .fa-twitter-square {
+  color: #3b91b2;
+  transition: color 0.3s;
+}
+.social-links a .fa-google-plus-square {
+  color: #a37873;
+  transition: color 0.3s;
+}
+.social-links a:hover .fa-facebook-square,
+.social-links a:focus .fa-facebook-square,
+.social-links a:active .fa-facebook-square {
+  color: #3b5998;
+}
+.social-links a:hover .fa-linkedin-square,
+.social-links a:focus .fa-linkedin-square,
+.social-links a:active .fa-linkedin-square {
+  color: #007bb5;
+}
+.social-links a:hover .fa-twitter-square,
+.social-links a:focus .fa-twitter-square,
+.social-links a:active .fa-twitter-square {
+  color: #00aced;
+}
+.social-links a:hover .fa-google-plus-square,
+.social-links a:focus .fa-google-plus-square,
+.social-links a:active .fa-google-plus-square {
+  color: #dd4b39;
+}
+hr {
+  border-top: 1px solid #ccc;
+}
+.content {
+  padding: 0 62px 80px 62px;
+  min-height: 100vh;
+}
+.content h2 {
+  font-weight: bold;
+  font-size: 1.2em;
+  margin-left: -40px;
+  color: #5BC798;
+  text-transform: uppercase;
+}
+.content h3 {
+  font-size: 1.1em;
+  color: #147286;
+  font-weight: bold;
+  text-transform: uppercase;
+}
+.content .skills-ul {
+  -webkit-column-count: 3;
+          column-count: 3;
+  padding-left: 0;
+}
+.fa-star {
+  color: gold;
+}
+@media (min-width: 992px) {
+  hr {
+    display: none;
+  }
+}
+@media (min-width: 1200px) {
+  .wrapper {
+    position: relative;
+    width: 1170px;
+  }
+  .profile-sidebar {
+    position: fixed;
+    width: 292px;
+    top: 0;
+    bottom: 0;
+    overflow-y: hidden;
+    overflow-x: hidden;
+  }
+  .profile-sidebar .profile-pic {
+    margin-left: -15px;
+    max-width: calc(100% + 30px);
+  }
+  .nav-sidebar {
+    position: fixed;
+    width: 165px;
+    /* margin-left: 292px; */
+    top: 0;
+    bottom: 0;
+    overflow-y: hidden;
+    overflow-x: hidden;
+  }
+}
+@media (max-width: 1199px) {
+  .container-fluid {
+    padding: 0;
+  }
+  .profile-sidebar,
+  .nav-sidebar {
+    position: relative;
+    min-height: 100vh;
+  }
+  .container {
+    width: 100%;
+  }
+}
+@media (max-width: 767px) {
+  .profile-pic {
+    max-height: 300px;
+    max-width: 300px;
+    border-radius: 50%;
+  }
+  .profile-sidebar {
+    padding: 15px 0;
+    text-align: center;
+    min-height: inherit;
+  }
 }

index.php

@@ -1,25 +1,14 @@
-<?php 
-$i=null;
-function decimalAndNumberFormat1($number){
-  $i = number_format(round($number,0));
-  return $i;
-}
-function decimalAndNumberFormat2($number){
-  $i = number_format(round($number,1),1);
-  return $i;
-}
-function decimalAndNumberFormat3($number){
-  $i = number_format(round($number,3));
-  return $i;
-}
-?>
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" >
+
 <head>
-  <title>Forward Station Server</title>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <!-- <link rel="stylesheet" type="text/css" href="css/styles.css"> -->
+  <meta charset="UTF-8">
+  <title>Career Profile Page1</title>
+  <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,700,700italic' rel='stylesheet' type='text/css'>
+  
+  <link rel='stylesheet' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
+<link rel='stylesheet' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css'>
+
 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
 <link href="https://cdn.datatables.net/r/bs-3.3.5/jq-2.1.4,dt-1.10.8/datatables.min.css" rel="stylesheet"/>
@@ -32,8 +21,11 @@ function decimalAndNumberFormat3($number){
 
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
 
-</head>
-<style type="text/css">
+
+
+      <link rel="stylesheet" href="css/style.css">
+
+      <style type="text/css">
 	td.details-control {
     background: url('resources/details_open.png') no-repeat center center;
     cursor: pointer;
@@ -80,9 +72,240 @@ tr.shown td.details-control {
    	background-color: #009688;
    }
 </style>
+<style>
+.accordion {
+  background-color: #d8d4d6;
+  color: #444;
+  cursor: pointer;
+  /* padding: 18px; */
+  width: 100%;
+  border: none;
+  text-align: left;
+  outline: none;
+  transition: 0.4s;
+}
+
+.active, .accordion:hover {
+  /* background-color: #ccc;  */
+}
+
+.panel {
+  /* padding: 0 18px; */
+  display: none;
+  background-color: white;
+  overflow: hidden;
+}
+</style>
+</head>
+
 <body>
 
-<?php include "users.php" ?>
+  <div class="container-fluid">
+  <div class="">
+    <div class="row wrapper">
+      
+      <!-- <div class="col-md-3 col-sm-4 profile-sidebar">
+        
+        <img src="https://pbs.twimg.com/profile_images/378800000636617089/b3ee16404fc4fa124ad2917296a897f7.jpeg" class="img-responsive profile-pic center-block"/>
+        <h1>Brett East</h1>
+        <ul class="social-links">
+          <li><a href="#"><i class="fa fa-facebook-square fa-3x"></i></a></li>
+          <li><a href="#"><i class="fa fa-twitter-square fa-3x"></i></a></li>
+          <li><a href="#"><i class="fa fa-linkedin-square fa-3x"></i></a></li>
+          <li><a href="#"><i class="fa fa-google-plus-square fa-3x"></i></a></li>
+        </ul>
+        <h2>Websites</h2>
+        <p><a href="#" class="small">http://www.bretteast.com</a></p>
+        <p><a href="#" class="small">http://www.career.stackoverflow.com/brett</a></p>
+        <h2>Tenure</h2>
+        <p>Full time, Part time, Casual</p>
+        <h2>Availability</h2>
+        <p>Weekdays, Mornings, Afternoons, Evenings</p>
+          
+      </div> -->
+      
+      <div class="col-md-1 visible-md-block visible-lg-block nav-sidebar">
+        <ul class="nav">
+          <li class="image" style="width: 164px;height: 70px; background: #fff;margin-top: -19px;margin-left: -3px;">
+              <img src="img/Autoleum Logo.jpg" alt="Error" style="width:50px;height:50px;margin-left: 54px;margin-top: 8px;" >
+          </li>
+        <li><a href="#page-about" class="accordion"><i class="fa fa-user fa-2x"></i>&nbsp;&nbsp; Operations &nbsp;&nbsp;<i class="fa fa-caret-down"></i></a>
+          <div class="panel">
+          <a href="#page-one">Customers</a><br>
+          <a href="#page-two">Two</a><br>
+          <a href="#page-three">Three</a><br>
+          </div></li>
+          <li><a href="#page-education"><i class="fa fa-graduation-cap fa-2x"></i>&nbsp;&nbsp; Education</a></li>
+          <li><a href="#page-work"><i class="fa fa-briefcase fa-2x"></i>&nbsp;&nbsp; Work History</a></li>
+          <!-- <li><a href="#page-skills" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-wrench fa-2x"></i>&nbsp;&nbsp;<br />Skills <i class="fa fa-caret-down"></i></a></li> -->
+          <!-- <li>
+          <div class="dropdown">
+          <a class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-wrench fa-2x"></i>&nbsp;&nbsp;<br />Skills <i class="fa fa-caret-down"></i></a>
+            <ul class="dropdown-menu">
+              <li><a href="#" class="hover">HTML</a></li>
+              <li><a href="#">CSS</a></li>
+              <li><a href="#">JavaScript</a></li>
+            </ul>
+          </div>
+          </li> -->
+          <li><a class="accordion"><i class="fa fa-wrench fa-2x"></i>&nbsp;&nbsp; Section 1 &nbsp;&nbsp;<i class="fa fa-caret-down"></i></a>
+          <div class="panel">
+          <a>Customers</a><br>
+          <a>Two</a><br>
+          <a>Three</a><br>
+          </div></li>
+
+
+
+
+          <li><a href="#page-licences"><i class="fa fa-certificate fa-2x"></i>&nbsp;&nbsp; Licences </a></li>
+          <li><a href="#page-transport"><i class="fa fa-car fa-2x"></i>&nbsp;&nbsp; Transport</a></li>
+          <li><a href="#page-providers"><i class="fa fa-check fa-2x"></i>&nbsp;&nbsp; Provider Referrals</a></li>
+          <li><a href="#page-referees"><i class="fa fa-users fa-2x"></i>&nbsp;&nbsp; Referees</a></li>
+        </ul>
+      </div>
+      
+      <div class="col-md-12 col-sm-8 col-lg-offset-2 content">
+        <?php include "customers.php" ?>
+        
+        <hr />
+        
+        <?php include "education.php" ?>
+        
+        <hr />
+
+        <div id="page-work">
+        <h2><i class="fa fa-briefcase fa-1x fa-fw"></i> Work History</h2>
+
+        <section class="work-history">
+          <h3 class="wh-company">Warner Music</h3>
+          <p class="wh-dates"><strong>2010 - Present</strong></p>
+          <p class="wh-industry">Entertainment</p>
+
+          <h4 class="wh-name">Senior Music Manager</h4>
+
+          <h5 class="wh-duties-success">Duties & Successes</h5>
+          <p class="wh-duties-success-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non lacus nisl. Sed condimentum porttitor neque, id pellentesque eros porttitor semper. Aenean nec tellus eu ipsum vehicula accumsan. Vivamus auctor ornare lacus et pretium. Aliquam vel maximus dolor.</p>
+        </section><!-- .work-history -->
+
+        <section class="work-history">
+          <h3 class="wh-company">Sony Music</h3>
+          <p class="wh-dates"><strong>2006 - 2009</strong></p>
+          <p class="wh-industry">Entertainment</p>
+
+          <h4 class="wh-name">Junior Music Editor</h4>
+
+          <h5 class="wh-duties-success">Duties & Successes</h5>
+          <p class="wh-duties-success-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non lacus nisl. Sed condimentum porttitor neque, id pellentesque eros porttitor semper. Aenean nec tellus eu ipsum vehicula accumsan. Vivamus auctor ornare lacus et pretium. Aliquam vel maximus dolor.</p>
+        </section><!-- .work-history -->
+          
+        </div><!-- #work -->
+        
+        <hr />
+        
+        <div id="page-skills">
+        <h2><i class="fa fa-wrench fa-1x fa-fw"></i> Skills</h2>
+        <p class="small"><i class="fa fa-star"></i> denotes a 'top skill'</p>
+        <ul class="skills-ul">
+          <li>Music <span class="small"><i class="fa fa-star"></i></span></li>
+          <li>Editing <span class="small"><i class="fa fa-star"></i></span></li>
+          <li>Management <span class="small"><i class="fa fa-star"></i></span></li>
+          <li>Sound <span class="small"><i class="fa fa-star"></i></span></li>
+          <li>Adobe Audition</li>
+          <li>Management</li>
+          <li>Sound</li>
+          <li>Adobe Audition</li>
+        </ul>
+        </div><!-- #skills -->
+        
+        <hr />
+        
+        <div id="page-licences">
+        <h2><i class="fa fa-certificate fa-1x fa-fw"></i> Licences and Accreditations</h2>
+        
+        <dl class="licences-accreditations">
+          <dt class="la-name">Drivers Licence<dt>
+          <dd class="la-state">QLD</dd>
+          <dd class="la-date">current</dd>
+        </dl>
+        <dl class="licences-accreditations">
+          <dt class="la-name">St John's First Aid<dt>
+          <dd class="la-state">Australia</dd>
+          <dd class="la-date">2016</dd>
+        </dl>
+        </div><!-- #licences -->
+        
+        <hr />
+        
+        <div id="page-transport">
+        <h2><i class="fa fa-car fa-1x fa-fw"></i> Transport</h2>
+        <p>I use public transport</p>
+        </div><!-- #transport -->
+       
+        <hr />
+        
+        <div id="page-providers">
+        <h2><i class="fa fa-check fa-1x fa-fw"></i> Provider Referrals</h2>
+        <section class="provider-referrals">
+          <h3 class="pr-name">P1 Providers</h3>
+          <p class="pr-site-desc">P1 Providers specialises in finding roles for skilled workers.</p>
+          <h4 class="pr-contract-type">Contract Type</h4>
+          <a href="#" class="pr-link">www.p1providers.com.au</a>
+        </section><!-- .provider-referrals -->
+        </div><!-- #providers -->
+        
+        <hr />
+        
+        <div id="page-referees">
+        <h2><i class="fa fa-users fa-1x fa-fw"></i> Referees</h2>
+
+        <section class="referees">
+            <h3 class="r-company">Sony Music</h3>
+            <p class="r-name">Manager</p>
+            <h4 class="r-name">John Smith</h4>
+            <p class="r-phone">(07) 1555 9876</p>
+            <p class="r-email"><a href="mailto:#">j.smith@sonymusic.com.au</a></p>
+        </section><!-- .referees -->
+
+        <section class="referees">
+            <h3 class="r-company">Warner Music</h3>
+            <p class="r-name">Manager</p>
+            <h4 class="r-name">Gary Miller</h4>
+            <p class="r-phone">(07) 1555 6543</p>
+            <p class="r-email"><a href="mailto:#">gary.miller@warnermusic.com</a></p>
+        </section>
+        </div><!-- #referees -->
+      
+      </div><!-- .col-md-8 -->  
+      
+    </div><!-- .row -->
+  </div><!-- .container -->
+</div><!-- .containter-fluid -->
+  <!-- <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> -->
+<!-- <script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script> -->
+
+  
+
+    <script  src="js/script.js"></script>
+
+    <script>
+var acc = document.getElementsByClassName("accordion");
+var i;
+
+for (i = 0; i < acc.length; i++) {
+  acc[i].addEventListener("click", function() {
+    this.classList.toggle("active");
+    var panel = this.nextElementSibling;
+    if (panel.style.display === "block") {
+      panel.style.display = "none";
+    } else {
+      panel.style.display = "block";
+    }
+  });
+}
+</script>
+
 
 </body>
-</html>
+
+</html>

js/script.js

@@ -0,0 +1,45 @@
+/* $(function() {
+  $('a[href*=#]:not([href=#])').click(function() {
+    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
+      var target = $(this.hash);
+      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
+      if (target.length) {
+        $('html,body').animate({
+          scrollTop: target.offset().top
+        }, 800);
+        return false;
+      }
+    }
+  });
+});*/
+
+
+$(function () {
+
+  if ($(window).width() >= 992) {
+    $('#page-education, #page-work, #page-skills, #page-licences, #page-transport, #page-providers, #page-referees').hide();
+    $('a[href="#page-customers"]').css({ 'color': '#35BD82' });
+
+    $('a[href^="#page"]').on('click', function () {
+      var attrib = $(this).attr('href');
+      $('a[href^="#page"]').css({ 'color': '#444' });
+      $(this).css({ 'color': '#35BD82' });
+      $('[id^="page"]').hide();
+      $(attrib).show();
+    });
+  };
+
+  $(window).resize(function () {
+    var currentWidth = $(window).width();
+    if (!$('#page-education, #page-about').is(':hidden') && $(window).width() >= 992) {
+      $('#page-education, #page-work, #page-skills, #page-licences, #page-transport, #page-providers, #page-referees').hide();
+      $('a[href^="#page"]').css({ 'color': '#444' });
+      $('a[href="#page-customers"]').css({ 'color': '#35BD82' });
+    };
+
+    if ($(window).width() < 992) {
+      $('#page-about, #page-education, #page-work, #page-skills, #page-licences, #page-transport, #page-providers, #page-referees').show();
+    }
+  });
+
+});