load newest jquery version locally, added js for loading other pages

css/player.css

@@ -35,6 +35,10 @@
   content: "\e060";
 }
 
+.icon-screen {
+  width: 30px;
+}
+
 /* ==== Player CSS ==== */
 video {
   cursor:pointer;
@@ -78,7 +82,6 @@ video::-webkit-media-controls-enclosure {
 #video-controls .controls .time {
   color: #777;
   font-family: Arial;
-  float: right;
   font-size: 11px;
   line-height: 40px;
   vertical-align: middle;
@@ -90,7 +93,6 @@ video::-webkit-media-controls-enclosure {
 #video-controls input[type=range] {
   -webkit-appearance: none;
   width: 100%;
-  background-color: #FFF;
   height: 6px;
   margin: 0;
   cursor:pointer;
@@ -119,14 +121,14 @@ video::-webkit-media-controls-enclosure {
 #video-controls input[type=range]::-moz-range-thumb {
   height: 6px;
   width: 8px;
-  background: #fe4952;
+  background: #0b9fd8;
   border-radius: 0px;
   cursor: pointer;
 }
 #video-controls input[type=range]::-ms-thumb {
   height: 6px;
   width: 8px;
-  background: #fe4952;
+  background: #0b9fd8;
   border-radius: 0px;
   cursor: pointer;
 }
@@ -151,9 +153,11 @@ video::-webkit-media-controls-enclosure {
   padding: 11px 10px 4px;
   display: inline-block;
 }
+
 #video-controls button.text:hover {
   color: #FFF;
 }
+
 #video-controls button.icon {
   outline: none;
   border: none;
@@ -170,12 +174,10 @@ video::-webkit-media-controls-enclosure {
 }
 
 #video-controls button.mute {
-  float: right;
   text-align: right;
   width: 60px;
 }
 #video-controls input#volume-bar {
-  float: right;
   margin-top: 18px;
   width: 60px;
 }

index.html

@@ -14,13 +14,13 @@
 
     <div class="container">
       <logo>
-        <img class="logo" src=images/logo.png>
+        <img class="logo" id="overview" src=images/logo.png>
         <img class="burger_menu" id="burger_menu" src=images/menu.png>
       </logo>
       <navigation>
         <ul>
-          <li><a href=overview.html>Werkübersicht</a></li>
-          <li><a href=about.html>Über das Projekt</a></li>
+          <li><a href=# id="overview">Werkübersicht</a></li>
+          <li><a href=# id="about">Über das Projekt</a></li>
         </ul>
       </navigation>
       <map>
@@ -41,13 +41,16 @@
             <div id="video-controls">
               <div class="controls">
                 <button type="button" id="play-pause" class="icon play"><span class="icon-play" aria-hidden="true"></span></button>
+                <p id="timeDisplay" class="time"><span id="timeCurrent" class="current">00:00:00</span> / <span id="timeDuration" class="duration">00:00:00</span></p>
                 <div class="seek-bar-wrapper" id="seek-bar-wrapper">
                   <input id="seek-bar" type="range" value="0" step="0.001">
                 </div>
-                <p id="timeDisplay" class="time"><span id="timeCurrent" class="current">00:00:00</span> / <span id="timeDuration" class="duration">00:00:00</span></p>
                 <button type="button" id="mute" class="text mute">100</button>
                 <input type="range" id="volume-bar" value="100">
-                <button type="button" class="icon full-screen" id="fullscreen"><span class="icon-screen" aria-hidden="true"></span></button>
+                <button type="button" class="icon full-screen" id="fullscreen">
+                  <img class="icon-screen" src=images/icon_fullscreen.png>
+                  <!-- <span class="icon-screen" aria-hidden="true"></span> -->
+                </button>
                 <div class="clearfix"></div>
               </div>
             </div>
@@ -68,9 +71,10 @@
       </content>
     </div>
 
-    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
+    <script src="js/jquery-3.2.1.min.js"></script>
     <script src="js/player.js"></script>
     <script src="js/map.js"></script>
+    <script src="js/main.js"></script>
 
   </body>
 

js/main.js

+$( "#overview" ).click(function() {
+  $( "content" ).load( "overview.html" );
+});
+
+$( "#about" ).click(function() {
+  $( "content" ).load( "about.html" );
+});

js/map.js

+var flying = false;
+
+var bounds = [
+  [8.40001, 49.01194],
+  [8.40855, 49.01585]
+];
+
+mapboxgl.accessToken = 'pk.eyJ1Ijoib25ueSIsImEiOiJjajhvdnc1eTgwOTM3MnFudG81MXlpZGJrIn0.lDC0PwJDf704okmeI6w61g';
+var map = new mapboxgl.Map({
+  container: 'map',
+  style: 'mapbox://styles/mapbox/light-v9',
+  center: [8.404, 49.0150],
+  zoom: 14,
+  pitch: 0,
+  bearing: 0
+});
+
+//   maxBounds: bounds,
+
+map.addControl(new mapboxgl.NavigationControl());
+
+map.on('load', function() {
+
+  map.fire('flystart');
+
+  map.flyTo({
+      // These options control the ending camera position: centered at
+      // the target, at zoom level 9, and north up.
+      center: [8.404, 49.0150],
+      zoom: 17,
+      pitch: 40,
+      bearing: 20,
+
+      // These options control the flight curve, making it move
+      // slowly and zoom out almost completely before starting
+      // to pan.
+      speed: 0.5, // make the flying slow
+      curve: 1, // change the speed at which it zooms out
+
+      // This can be any easing function: it takes a number between
+      // 0 and 1 and returns another number between 0 and 1.
+      easing: function (t) {
+          return t;
+      }
+  });
+
+  map.on('moveend', function(e){
+  	if(flying) {
+      map.fire('flyend');
+    }
+  });
+  map.on('flystart', function(){
+  	flying = true;
+  });
+  map.on('flyend', function(){
+  	flying = false;
+  });
+
+  // Insert the layer beneath any symbol layer.
+  var layers = map.getStyle().layers;
+
+  var labelLayerId;
+  for (var i = 0; i < layers.length; i++) {
+    if (layers[i].type === 'symbol' && layers[i].layout['text-field']) {
+        labelLayerId = layers[i].id;
+        break;
+    }
+  }
+
+  map.addLayer({
+    'id': '3d-buildings',
+    'source': 'composite',
+    'source-layer': 'building',
+    'filter': ['==', 'extrude', 'true'],
+    'type': 'fill-extrusion',
+    'minzoom': 15,
+    'paint': {
+        'fill-extrusion-color': '#aaa',
+
+        // use an 'interpolate' expression to add a smooth transition effect to the
+        // buildings as the user zooms in
+        'fill-extrusion-height': [
+            "interpolate", ["linear"], ["zoom"],
+            15, 0,
+            15.05, ["get", "height"]
+        ],
+        'fill-extrusion-base': [
+            "interpolate", ["linear"], ["zoom"],
+            15, 0,
+            15.05, ["get", "min_height"]
+        ],
+        'fill-extrusion-opacity': .6
+    }
+  }, labelLayerId);
+
+});

overview.html

+Hallo Test