JsFinalProjOpt2/index.html at master · shopkns/JsFinalProjOpt2 · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Build your car!</title>
  <!-- bootstrap -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <!-- custom css -->
  <link rel="stylesheet" href="style.css">
</head>
<body>
<!--  <div class="container-fluid dealer-locator">
         <div class="row">
            <div id="map" class="col-md-12" style="height:30vh"></div>
         </div>
      </div> -->
  <script id="vehicle-options-template" type="text/x-handlebars-template">
    <div class="col-md-6 vehicle-option {{feature}}" data-panel="vehicle" data-price="{{price}}" data-option="{{feature}}"></div>
  </script>

  <script id="color-options-template" type="text/x-handlebars-template">
    <div class="col-xs-3 panel-body color-option {{feature}}" data-panel="color" data-price="{{price}}" data-option="{{feature}}"></div>
  </script>

  <script id="package-options-template" type="text/x-handlebars-template">
    <div class="panel panel-default">
      <div class="panel-heading package-option" data-panel="package"data-price="{{price}}" data-option="{{feature}}">{{feature}}</div>
    </div>
  </script>

  <script id="summary-options-template" type="text/x-handlebars-template">
    <div class="summary-option">
      <ul>
        <li><strong>Vehicle</strong> &mdash; <span>{{vehicle.choice}}</span>: ${{vehicle.price}}</li>
        <li><strong>Color</strong> &mdash; <span>{{color.choice}}</span>: ${{color.price}}</li>
        <li><strong>Package</strong> &mdash; <span>{{package.choice}}</span>: ${{package.price}}</li>
      </ul>
    </div>
  </script>
  <div class="container-fluid">
    <div class="row app-container">

      <div class="col-md-4 options-container">
        <!-- build a car navigation -->
        <ul class="nav nav-tabs nav-justified navigation">
          <li data-tab="vehicle" class="active"><a class="text-warning" href="#">1. Vehicle</a></li>
          <li data-tab="color"><a class="text-warning" href="#">2. Color</a></li>
          <li data-tab="package"><a class="text-warning" href="#">3. Packages</a></li>
          <li data-tab="summary"><a class="text-warning" href="#">4. Summary</a></li>
        </ul>

        <!-- color options -->
        <div id="options-display">
        </div>

        <!-- footer -->
        <div class="col-md-4 navbar-fixed-bottom">
          <h1 class="cost">Cost: <span class="cost-display"></span></h1>
        </div>
      </div>

      <div class="col-md-8 demo-container">
        <img class="col-md-12 vehicle-display" src="">
      </div>
    </div>
  </div>


  <script src="https://www.gstatic.com/firebasejs/4.3.0/firebase.js"></script>
  <script src="https://code.jquery.com/jquery-3.1.0.min.js"   integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s="   crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js"></script>
  <script src="js/main.js"></script>
</body>
</html>