Commit ada49df3 authored by Jonas Heinrich's avatar Jonas Heinrich

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

parent a457f854
...@@ -35,6 +35,10 @@ ...@@ -35,6 +35,10 @@
content: "\e060"; content: "\e060";
} }
.icon-screen {
width: 30px;
}
/* ==== Player CSS ==== */ /* ==== Player CSS ==== */
video { video {
cursor:pointer; cursor:pointer;
...@@ -78,7 +82,6 @@ video::-webkit-media-controls-enclosure { ...@@ -78,7 +82,6 @@ video::-webkit-media-controls-enclosure {
#video-controls .controls .time { #video-controls .controls .time {
color: #777; color: #777;
font-family: Arial; font-family: Arial;
float: right;
font-size: 11px; font-size: 11px;
line-height: 40px; line-height: 40px;
vertical-align: middle; vertical-align: middle;
...@@ -90,7 +93,6 @@ video::-webkit-media-controls-enclosure { ...@@ -90,7 +93,6 @@ video::-webkit-media-controls-enclosure {
#video-controls input[type=range] { #video-controls input[type=range] {
-webkit-appearance: none; -webkit-appearance: none;
width: 100%; width: 100%;
background-color: #FFF;
height: 6px; height: 6px;
margin: 0; margin: 0;
cursor:pointer; cursor:pointer;
...@@ -119,14 +121,14 @@ video::-webkit-media-controls-enclosure { ...@@ -119,14 +121,14 @@ video::-webkit-media-controls-enclosure {
#video-controls input[type=range]::-moz-range-thumb { #video-controls input[type=range]::-moz-range-thumb {
height: 6px; height: 6px;
width: 8px; width: 8px;
background: #fe4952; background: #0b9fd8;
border-radius: 0px; border-radius: 0px;
cursor: pointer; cursor: pointer;
} }
#video-controls input[type=range]::-ms-thumb { #video-controls input[type=range]::-ms-thumb {
height: 6px; height: 6px;
width: 8px; width: 8px;
background: #fe4952; background: #0b9fd8;
border-radius: 0px; border-radius: 0px;
cursor: pointer; cursor: pointer;
} }
...@@ -151,9 +153,11 @@ video::-webkit-media-controls-enclosure { ...@@ -151,9 +153,11 @@ video::-webkit-media-controls-enclosure {
padding: 11px 10px 4px; padding: 11px 10px 4px;
display: inline-block; display: inline-block;
} }
#video-controls button.text:hover { #video-controls button.text:hover {
color: #FFF; color: #FFF;
} }
#video-controls button.icon { #video-controls button.icon {
outline: none; outline: none;
border: none; border: none;
...@@ -170,12 +174,10 @@ video::-webkit-media-controls-enclosure { ...@@ -170,12 +174,10 @@ video::-webkit-media-controls-enclosure {
} }
#video-controls button.mute { #video-controls button.mute {
float: right;
text-align: right; text-align: right;
width: 60px; width: 60px;
} }
#video-controls input#volume-bar { #video-controls input#volume-bar {
float: right;
margin-top: 18px; margin-top: 18px;
width: 60px; width: 60px;
} }
......
...@@ -14,13 +14,13 @@ ...@@ -14,13 +14,13 @@
<div class="container"> <div class="container">
<logo> <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> <img class="burger_menu" id="burger_menu" src=images/menu.png>
</logo> </logo>
<navigation> <navigation>
<ul> <ul>
<li><a href=overview.html>Werkübersicht</a></li> <li><a href=# id="overview">Werkübersicht</a></li>
<li><a href=about.html>Über das Projekt</a></li> <li><a href=# id="about">Über das Projekt</a></li>
</ul> </ul>
</navigation> </navigation>
<map> <map>
...@@ -41,13 +41,16 @@ ...@@ -41,13 +41,16 @@
<div id="video-controls"> <div id="video-controls">
<div class="controls"> <div class="controls">
<button type="button" id="play-pause" class="icon play"><span class="icon-play" aria-hidden="true"></span></button> <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"> <div class="seek-bar-wrapper" id="seek-bar-wrapper">
<input id="seek-bar" type="range" value="0" step="0.001"> <input id="seek-bar" type="range" value="0" step="0.001">
</div> </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> <button type="button" id="mute" class="text mute">100</button>
<input type="range" id="volume-bar" value="100"> <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 class="clearfix"></div>
</div> </div>
</div> </div>
...@@ -68,9 +71,10 @@ ...@@ -68,9 +71,10 @@
</content> </content>
</div> </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/player.js"></script>
<script src="js/map.js"></script> <script src="js/map.js"></script>
<script src="js/main.js"></script>
</body> </body>
......
This diff is collapsed.
$( "#overview" ).click(function() {
$( "content" ).load( "overview.html" );
});
$( "#about" ).click(function() {
$( "content" ).load( "about.html" );
});
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);
});
Hallo Test
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment