Commit aebf3320 authored by Jonas Heinrich's avatar Jonas Heinrich

added profile images

parent 5e821768
...@@ -6,28 +6,28 @@ ...@@ -6,28 +6,28 @@
<section class="grid"> <section class="grid">
<span class="grid__item"> <span class="grid__item">
<div class="profile-img clip" style="background-image: url('images/avatar.jpg'); background-size: cover; background-position: 50% 0;"></div> <div class="profile-img clip" style="background-image: url('images/profiles/klaassen.jpeg'); background-size: cover; background-position: 50% 0;"></div>
<div class="meta center"> <div class="meta center">
<h3 class="meta__title">Dr. Alice Anna Klaassen</h3> <h3 class="meta__title">Dr. Alice Anna Klaassen</h3>
<span class="quiet small">Seminarleitung, Organisation</span> <span class="quiet small">Seminarleitung, Organisation</span>
</div> </div>
</span> </span>
<span class="grid__item"> <span class="grid__item">
<div class="profile-img clip" style="background-image: url('images/avatar.jpg'); background-size: cover; background-position: 50% 0;"></div> <div class="profile-img clip" style="background-image: url('images/profiles/muñoz morcillo.jpeg'); background-size: cover; background-position: 50% 0;"></div>
<div class="meta center"> <div class="meta center">
<h3 class="meta__title">Dr. Jesús Muñoz Morcillo</h3> <h3 class="meta__title">Dr. Jesús Muñoz Morcillo</h3>
<span class="quiet small">Seminarleitung, Regie</span> <span class="quiet small">Seminarleitung, Regie</span>
</div> </div>
</span> </span>
<span class="grid__item"> <span class="grid__item">
<div class="profile-img clip" style="background-image: url('images/avatar.jpg'); background-size: cover; background-position: 50% 0;"></div> <div class="profile-img clip" style="background-image: url('images/profiles/leiber.jpeg'); background-size: cover; background-position: 50% 0;"></div>
<div class="meta center"> <div class="meta center">
<h3 class="meta__title">Anke Leiber</h3> <h3 class="meta__title">Anke Leiber</h3>
<span class="quiet small">Kamera, Video-Schnitt, Storyboard</span> <span class="quiet small">Kamera, Video-Schnitt, Storyboard</span>
</div> </div>
</span> </span>
<span class="grid__item"> <span class="grid__item">
<div class="profile-img clip" style="background-image: url('images/avatar.jpg'); background-size: cover; background-position: 50% 0;"></div> <div class="profile-img clip" style="background-image: url('images/profiles/mangler.jpeg'); background-size: cover; background-position: 50% 0;"></div>
<div class="meta center"> <div class="meta center">
<h3 class="meta__title">Jonas Mangler</h3> <h3 class="meta__title">Jonas Mangler</h3>
<span class="quiet small">Autor, Schnitt, Kamera</span> <span class="quiet small">Autor, Schnitt, Kamera</span>
...@@ -41,14 +41,14 @@ ...@@ -41,14 +41,14 @@
</div> </div>
</span> </span>
<span class="grid__item"> <span class="grid__item">
<div class="profile-img clip" style="background-image: url('images/avatar.jpg'); background-size: cover; background-position: 50% 0;"></div> <div class="profile-img clip" style="background-image: url('images/profiles/sannwald.jpeg'); background-size: cover; background-position: 50% 0;"></div>
<div class="meta center"> <div class="meta center">
<h3 class="meta__title">Timo Sannwald</h3> <h3 class="meta__title">Timo Sannwald</h3>
<span class="quiet small">Kamera, Video-Schnitt, Storyboard</span> <span class="quiet small">Kamera, Video-Schnitt, Storyboard</span>
</div> </div>
</span> </span>
<span class="grid__item"> <span class="grid__item">
<div class="profile-img clip" style="background-image: url('images/avatar.jpg'); background-size: cover; background-position: 50% 0;"></div> <div class="profile-img clip" style="background-image: url('images/profiles/traboulsi-wegner.jpeg'); background-size: cover; background-position: 50% 0;"></div>
<div class="meta center"> <div class="meta center">
<h3 class="meta__title">Natalija Traboulsi-Wegner</h3> <h3 class="meta__title">Natalija Traboulsi-Wegner</h3>
<span class="quiet small">Autor, Webseite</span> <span class="quiet small">Autor, Webseite</span>
...@@ -62,14 +62,14 @@ ...@@ -62,14 +62,14 @@
</div> </div>
</span> </span>
<span class="grid__item"> <span class="grid__item">
<div class="profile-img clip" style="background-image: url('images/avatar.jpg'); background-size: cover; background-position: 50% 0;"></div> <div class="profile-img clip" style="background-image: url('images/profiles/esser.jpeg'); background-size: cover; background-position: 50% 0;"></div>
<div class="meta center"> <div class="meta center">
<h3 class="meta__title">Hanna Eßer</h3> <h3 class="meta__title">Hanna Eßer</h3>
<span class="quiet small">Autor</span> <span class="quiet small">Autor</span>
</div> </div>
</span> </span>
<span class="grid__item"> <span class="grid__item">
<div class="profile-img clip" style="background-image: url('images/avatar.jpg'); background-size: cover; background-position: 50% 0;"></div> <div class="profile-img clip" style="background-image: url('images/profiles/heinrich.jpeg'); background-size: cover; background-position: 50% 0;"></div>
<div class="meta center"> <div class="meta center">
<h3 class="meta__title">Jonas Heinrich</h3> <h3 class="meta__title">Jonas Heinrich</h3>
<span class="quiet small">Webseite</span> <span class="quiet small">Webseite</span>
......
/* ==== Specific Entypo icons for interface ==== */
@font-face {
font-family: 'entypo';
src:url('../fonts/entypo.eot');
src:url('../fonts/entypo.eot?#iefix') format('embedded-opentype'),
url('../fonts/entypo.woff') format('woff'),
url('../fonts/entypo.ttf') format('truetype'),
url('../fonts/entypo.svg#entypo') format('svg');
font-weight: normal;
font-style: normal;
}
.icon-play,.icon-pause,.icon-sun,.icon-sun-2,.icon-screen {
font-family: 'entypo';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
}
.icon-play:before {
content: "\e0ab";
}
.icon-pause:before {
content: "\e0ac";
}
.icon-sun:before {
content: "\e05c";
}
.icon-sun-2:before {
content: "\e05d";
}
.icon-screen:before {
content: "\e060";
}
.icon-screen {
width: 30px;
}
/* ==== Player CSS ==== */
video {
cursor:pointer;
object-fit: cover;
}
video::-webkit-media-controls-enclosure {
display: none;
}
#video-container {
position: relative;
width: 100%;
vertical-align: middle;
}
#video-container .overlay {
height: 100%;
width: 100%;
position: absolute;
top: 0px;
left: 0px;
z-index: 2;
opacity: 0.7;
background: linear-gradient(to top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0) 70%);
}
#video-container #video-controls {
position: absolute;
left: 0;
right: 0;
bottom: 4px;
z-index: 2147483647;
}
#video-controls .controls {
padding: 0;
}
#video-controls .controls .clearfix {
clear: both;
}
#video-controls .controls .time {
position: absolute;
bottom: 6px;
left: 50px;
color: #777;
font-family: Arial;
font-size: 11px;
line-height: 40px;
vertical-align: middle;
margin: 0 10px;
}
#video-controls .controls .time .current {
color: #FFF;
}
#video-controls input[type=range] {
position: absolute;
bottom: 23px;
left: 160px;
-webkit-appearance: none;
width: 100%;
height: 6px;
margin: 0;
cursor:pointer;
}
#video-controls input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
}
#video-controls input[type=range]:focus {
outline: none;
}
#video-controls input[type=range]::-ms-track {
width: 100%;
cursor: pointer;
background: transparent;
border-color: transparent;
color: transparent;
}
#video-controls input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
height: 6px;
width: 8px;
background: #fe4952;
border-radius: 0px;
cursor: pointer;
}
#video-controls input[type=range]::-moz-range-thumb {
height: 6px;
width: 8px;
background: #0b9fd8;
border-radius: 0px;
cursor: pointer;
}
#video-controls input[type=range]::-ms-thumb {
height: 6px;
width: 8px;
background: #0b9fd8;
border-radius: 0px;
cursor: pointer;
}
#video-controls .seek-bar-wrapper {
height: 6px;
}
#video-controls input#seek-bar {
position: absolute;
margin: 17px 0px 0px 10px;
width: 300px;
}
#video-controls button:hover {
cursor: pointer;
}
#video-controls button.text {
outline: none;
border: none;
color: #FFF;
background-color: transparent;
font-size: 11px;
line-height: 20px;
padding: 11px 10px 4px;
display: none;
}
#video-controls button.text:hover {
color: #FFF;
}
#video-controls button.icon {
outline: none;
border: none;
color: #FFF;
background-color: transparent;
font-size: 20px;
line-height: 20px;
padding: 10px 10px 8px;
display: inline-block;
}
#video-controls button.play {
position: absolute;
left: 10px;
bottom: 7px;
}
#video-controls button.mute {
text-align: right;
width: 60px;
}
#video-controls input#volume-bar {
position: absolute;
bottom: 23px;
left: 500px;
width: 60px;
}
#video-controls button.full-screen {
float: right;
}
...@@ -228,3 +228,7 @@ button { ...@@ -228,3 +228,7 @@ button {
video::-webkit-media-controls { video::-webkit-media-controls {
display: none !important; } display: none !important; }
video[poster] {
object-fit: cover;
}
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
"type": "Feature", "type": "Feature",
"properties": { "properties": {
"type": "painting", "type": "painting",
"link": "video/video4.html", "url": "video/video4.html",
"description": "David Teniers d. J.: <strong>In der Schenke</strong> (1648), Kunsthalle Karlsruhe" "description": "David Teniers d. J.: <strong>In der Schenke</strong> (1648), Kunsthalle Karlsruhe"
}, },
"geometry": { "geometry": {
...@@ -20,7 +20,7 @@ ...@@ -20,7 +20,7 @@
"type": "Feature", "type": "Feature",
"properties": { "properties": {
"type": "painting", "type": "painting",
"url": "video/video", "url": "video/video8.html",
"description": "Matthias Grünewald: <strong>Heilige Märtyrerin</strong> (1511/12), Kunsthalle Karlsruhe" "description": "Matthias Grünewald: <strong>Heilige Märtyrerin</strong> (1511/12), Kunsthalle Karlsruhe"
}, },
"geometry": { "geometry": {
...@@ -477,7 +477,7 @@ ...@@ -477,7 +477,7 @@
"properties": { "properties": {
"type": "painting", "type": "painting",
"description": "Wolfgang Münch/Kioyoshi Furukawa: <strong>Bubbles</strong> (2000), ZKM Karlsruhe", "description": "Wolfgang Münch/Kioyoshi Furukawa: <strong>Bubbles</strong> (2000), ZKM Karlsruhe",
"link": "video/video" "url": "video/video10.html"
}, },
"geometry": { "geometry": {
"coordinates": [ "coordinates": [
...@@ -491,7 +491,7 @@ ...@@ -491,7 +491,7 @@
{ {
"type": "Feature", "type": "Feature",
"properties": { "properties": {
"link": "video/video6.html", "url": "video/video4.html",
"type": "painting", "type": "painting",
"description": "David Teniers d. J.: <strong>Dorffest</strong> (1648), Kunsthalle Karlsruhe" "description": "David Teniers d. J.: <strong>Dorffest</strong> (1648), Kunsthalle Karlsruhe"
}, },
...@@ -509,7 +509,7 @@ ...@@ -509,7 +509,7 @@
"properties": { "properties": {
"type": "painting", "type": "painting",
"description": "Arnulf Rainer: <strong>Van Gogh als verkannter Hochstapler</strong> (1979), Städtische Gallerie Karlsruhe", "description": "Arnulf Rainer: <strong>Van Gogh als verkannter Hochstapler</strong> (1979), Städtische Gallerie Karlsruhe",
"link": "video/video" "url": "video/video7.html"
}, },
"geometry": { "geometry": {
"coordinates": [ "coordinates": [
...@@ -524,7 +524,7 @@ ...@@ -524,7 +524,7 @@
"type": "Feature", "type": "Feature",
"properties": { "properties": {
"type": "painting", "type": "painting",
"link": "video/video2.html", "url": "video/video2.html",
"description": "Heinz Mack: <strong>Dynamische Struktur</strong> (1958), Orangerie Kunsthalle Karlsruhe" "description": "Heinz Mack: <strong>Dynamische Struktur</strong> (1958), Orangerie Kunsthalle Karlsruhe"
}, },
"geometry": { "geometry": {
...@@ -615,7 +615,7 @@ ...@@ -615,7 +615,7 @@
"properties": { "properties": {
"type": "painting", "type": "painting",
"description": "Marijke van Warmerdam: <strong>Take a long break I, II</strong> (2006), ZKM Karlsruhe", "description": "Marijke van Warmerdam: <strong>Take a long break I, II</strong> (2006), ZKM Karlsruhe",
"link": "video/video" "url": "video/video5.html"
}, },
"geometry": { "geometry": {
"coordinates": [ "coordinates": [
...@@ -631,7 +631,7 @@ ...@@ -631,7 +631,7 @@
"properties": { "properties": {
"type": "painting", "type": "painting",
"description": "Sebastian Vrancx: <strong>Überfall auf einen Geleitzug</strong> (1618), Kunsthalle Karlsruhe", "description": "Sebastian Vrancx: <strong>Überfall auf einen Geleitzug</strong> (1618), Kunsthalle Karlsruhe",
"link": "video/video3.html" "url": "video/video3.html"
}, },
"geometry": { "geometry": {
"coordinates": [ "coordinates": [
...@@ -646,7 +646,7 @@ ...@@ -646,7 +646,7 @@
"type": "Feature", "type": "Feature",
"properties": { "properties": {
"type": "painting", "type": "painting",
"link": "video/video", "url": "video/video9.html",
"description": "Hans Baldung, gen. Grien: <strong>Markgraf Christoph I. von Baden mit seiner Familie in Anbetung vor der heiligen Anna Selbdritt</strong> (um 1510), Kunsthalle Karlsruhe" "description": "Hans Baldung, gen. Grien: <strong>Markgraf Christoph I. von Baden mit seiner Familie in Anbetung vor der heiligen Anna Selbdritt</strong> (um 1510), Kunsthalle Karlsruhe"
}, },
"geometry": { "geometry": {
...@@ -1083,7 +1083,7 @@ ...@@ -1083,7 +1083,7 @@
{ {
"type": "Feature", "type": "Feature",
"properties": { "properties": {
"link": "video/video", "url": "video/video7.html",
"type": "painting", "type": "painting",
"description": "Arnulf Rainer: <strong>Van Gogh im schwarzen Schein</strong> (1977-79), Städtische Gallerie Karlsruhe" "description": "Arnulf Rainer: <strong>Van Gogh im schwarzen Schein</strong> (1977-79), Städtische Gallerie Karlsruhe"
}, },
...@@ -1100,7 +1100,7 @@ ...@@ -1100,7 +1100,7 @@
"type": "Feature", "type": "Feature",
"properties": { "properties": {
"type": "painting", "type": "painting",
"link": "video/video5.html", "url": "video/video4.html",
"description": "David Teniers d. J.: <strong>Abendessen in der Scheune</strong> (1634), Kunsthalle Karlsruhe" "description": "David Teniers d. J.: <strong>Abendessen in der Scheune</strong> (1634), Kunsthalle Karlsruhe"
}, },
"geometry": { "geometry": {
...@@ -1191,7 +1191,7 @@ ...@@ -1191,7 +1191,7 @@
"properties": { "properties": {
"type": "painting", "type": "painting",
"description": "Marijke van Warmerdam: <strong>Take a long break I, II</strong> (2006), ZKM Karlsruhe", "description": "Marijke van Warmerdam: <strong>Take a long break I, II</strong> (2006), ZKM Karlsruhe",
"link": "video/" "url": "video/video5.html"
}, },
"geometry": { "geometry": {
"coordinates": [ "coordinates": [
...@@ -1207,7 +1207,7 @@ ...@@ -1207,7 +1207,7 @@
"properties": { "properties": {
"description": "Max Beckmann: <strong>Großes Stillleben mit Kerzen und Spiegel</strong> (1930), Orangerie Karlsruhe", "description": "Max Beckmann: <strong>Großes Stillleben mit Kerzen und Spiegel</strong> (1930), Orangerie Karlsruhe",
"type": "painting", "type": "painting",
"link": "video/" "url": "video/video6.html"
}, },
"geometry": { "geometry": {
"coordinates": [ "coordinates": [
...@@ -1223,7 +1223,7 @@ ...@@ -1223,7 +1223,7 @@
"properties": { "properties": {
"type": "painting", "type": "painting",
"description": "Matthias Grünewald: <strong>Die heilige Elisabeth von Thüringen</strong> (1511/12), Kunsthalle Karlsruhe", "description": "Matthias Grünewald: <strong>Die heilige Elisabeth von Thüringen</strong> (1511/12), Kunsthalle Karlsruhe",
"link": "video/video" "url": "video/video8.html"
}, },
"geometry": { "geometry": {
"coordinates": [ "coordinates": [
...@@ -1238,7 +1238,7 @@ ...@@ -1238,7 +1238,7 @@
"type": "Feature", "type": "Feature",
"properties": { "properties": {
"type": "painting", "type": "painting",
"link": "video/video1.html", "url": "video/video1.html",
"description": "Josef Albers: <strong>Ehrung des Quadrats: Gelbes Zentrum</strong> (1954), Orangerie Kunsthalle Karlsruhe</p>" "description": "Josef Albers: <strong>Ehrung des Quadrats: Gelbes Zentrum</strong> (1954), Orangerie Kunsthalle Karlsruhe</p>"
}, },
"geometry": { "geometry": {
......
window.onload = function() {
var formatTime = function(rawTime) {
var sec_num = parseInt(rawTime, 10);
if(isNaN(sec_num)){
return '00:00:00';
}
var hours = Math.floor(sec_num / 3600);
var minutes = Math.floor((sec_num - (hours * 3600)) / 60);
var seconds = sec_num - (hours * 3600) - (minutes * 60);
if (hours < 10){hours = '0' + hours;}
if (minutes < 10){minutes = '0' + minutes;}
if (seconds < 10){seconds = '0' + seconds;}
return hours + ':' + minutes + ':' + seconds;
}
// Keep video standard JS DOM element for HTML5 Video API
var video = document.getElementById("video"),
videoContainer = $("#video-container"),
controls = $("#video-controls"),
overlay = $(".overlay"),
playButton = $("#play-pause"),
muteButton = $("#mute"),
fullScreenButton = $("#fullscreen"),
timeCurrent = $("#timeCurrent"),
timeDuration = $("#timeDuration"),
seekBar = $("#seek-bar"),
seekBarWrapper = $("#seek-bar-wrapper"),
volumeBar = $("#volume-bar"),
timeoutId = 0;
videoContainer.mousemove(function() {
controls.fadeIn('400');
overlay.fadeIn('400');
clearTimeout(timeoutId);
timeoutId = window.setTimeout(function(){controls.fadeOut('100'); overlay.fadeOut('100');}, 4000);
});
video.addEventListener("click", function(){
if (video.paused == true) {
video.play();
playButton.html('<span class="icon-pause" aria-hidden="true"></span>');
} else {
video.pause();
playButton.html('<span class="icon-play" aria-hidden="true"></span>');
}
}, false);
video.addEventListener("timeupdate", function() {
var value = (100 / video.duration) * video.currentTime;
seekBar.val(value);
timeCurrent.text(formatTime(video.currentTime));
if(timeDuration.text() == '00:00:00'){
timeDuration.text(formatTime(video.duration));
}
});
playButton.click(function() {
if (video.paused == true) {
video.play();
playButton.html('<span class="icon-pause" aria-hidden="true"></span>');
} else {
video.pause();
playButton.html('<span class="icon-play" aria-hidden="true"></span>');
}
});
muteButton.click(function() {
if (video.muted == false) {
video.muted = true;
muteButton.text("Muted");
} else {
if(video.volume != 0){
video.muted = false;
muteButton.text(video.volume*100);
}
}
});
fullScreenButton.click(function() {
if(!document.fullscreenElement && !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement) {
if(video.requestFullscreen) {
video.requestFullscreen();