Commit aebf3320 authored by Jonas Heinrich's avatar Jonas Heinrich

added profile images

parent 5e821768
......@@ -6,28 +6,28 @@
<section class="grid">
<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">
<h3 class="meta__title">Dr. Alice Anna Klaassen</h3>
<span class="quiet small">Seminarleitung, Organisation</span>
</div>
</span>
<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">
<h3 class="meta__title">Dr. Jesús Muñoz Morcillo</h3>
<span class="quiet small">Seminarleitung, Regie</span>
</div>
</span>
<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">
<h3 class="meta__title">Anke Leiber</h3>
<span class="quiet small">Kamera, Video-Schnitt, Storyboard</span>
</div>
</span>
<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">
<h3 class="meta__title">Jonas Mangler</h3>
<span class="quiet small">Autor, Schnitt, Kamera</span>
......@@ -41,14 +41,14 @@
</div>
</span>
<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">
<h3 class="meta__title">Timo Sannwald</h3>
<span class="quiet small">Kamera, Video-Schnitt, Storyboard</span>
</div>
</span>
<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">
<h3 class="meta__title">Natalija Traboulsi-Wegner</h3>
<span class="quiet small">Autor, Webseite</span>
......@@ -62,14 +62,14 @@
</div>
</span>
<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">
<h3 class="meta__title">Hanna Eßer</h3>
<span class="quiet small">Autor</span>
</div>
</span>
<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">
<h3 class="meta__title">Jonas Heinrich</h3>
<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 {
video::-webkit-media-controls {
display: none !important; }
video[poster] {
object-fit: cover;
}
......@@ -4,7 +4,7 @@
"type": "Feature",
"properties": {
"type": "painting",
"link": "video/video4.html",
"url": "video/video4.html",
"description": "David Teniers d. J.: <strong>In der Schenke</strong> (1648), Kunsthalle Karlsruhe"
},
"geometry": {
......@@ -20,7 +20,7 @@
"type": "Feature",
"properties": {
"type": "painting",
"url": "video/video",
"url": "video/video8.html",
"description": "Matthias Grünewald: <strong>Heilige Märtyrerin</strong> (1511/12), Kunsthalle Karlsruhe"
},
"geometry": {
......@@ -477,7 +477,7 @@
"properties": {
"type": "painting",
"description": "Wolfgang Münch/Kioyoshi Furukawa: <strong>Bubbles</strong> (2000), ZKM Karlsruhe",
"link": "video/video"
"url": "video/video10.html"
},
"geometry": {
"coordinates": [
......@@ -491,7 +491,7 @@
{
"type": "Feature",
"properties": {
"link": "video/video6.html",
"url": "video/video4.html",
"type": "painting",
"description": "David Teniers d. J.: <strong>Dorffest</strong> (1648), Kunsthalle Karlsruhe"
},
......@@ -509,7 +509,7 @@
"properties": {
"type": "painting",
"description": "Arnulf Rainer: <strong>Van Gogh als verkannter Hochstapler</strong> (1979), Städtische Gallerie Karlsruhe",
"link": "video/video"
"url": "video/video7.html"
},
"geometry": {
"coordinates": [
......@@ -524,7 +524,7 @@
"type": "Feature",
"properties": {
"type": "painting",
"link": "video/video2.html",
"url": "video/video2.html",
"description": "Heinz Mack: <strong>Dynamische Struktur</strong> (1958), Orangerie Kunsthalle Karlsruhe"
},
"geometry": {
......@@ -615,7 +615,7 @@
"properties": {
"type": "painting",
"description": "Marijke van Warmerdam: <strong>Take a long break I, II</strong> (2006), ZKM Karlsruhe",
"link": "video/video"
"url": "video/video5.html"
},
"geometry": {
"coordinates": [
......@@ -631,7 +631,7 @@
"properties": {
"type": "painting",
"description": "Sebastian Vrancx: <strong>Überfall auf einen Geleitzug</strong> (1618), Kunsthalle Karlsruhe",
"link": "video/video3.html"
"url": "video/video3.html"
},
"geometry": {
"coordinates": [
......@@ -646,7 +646,7 @@
"type": "Feature",
"properties": {
"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"
},
"geometry": {
......@@ -1083,7 +1083,7 @@
{
"type": "Feature",
"properties": {
"link": "video/video",
"url": "video/video7.html",
"type": "painting",
"description": "Arnulf Rainer: <strong>Van Gogh im schwarzen Schein</strong> (1977-79), Städtische Gallerie Karlsruhe"
},
......@@ -1100,7 +1100,7 @@
"type": "Feature",
"properties": {
"type": "painting",
"link": "video/video5.html",
"url": "video/video4.html",
"description": "David Teniers d. J.: <strong>Abendessen in der Scheune</strong> (1634), Kunsthalle Karlsruhe"
},
"geometry": {
......@@ -1191,7 +1191,7 @@
"properties": {
"type": "painting",
"description": "Marijke van Warmerdam: <strong>Take a long break I, II</strong> (2006), ZKM Karlsruhe",
"link": "video/"
"url": "video/video5.html"
},
"geometry": {
"coordinates": [
......@@ -1207,7 +1207,7 @@
"properties": {
"description": "Max Beckmann: <strong>Großes Stillleben mit Kerzen und Spiegel</strong> (1930), Orangerie Karlsruhe",
"type": "painting",
"link": "video/"
"url": "video/video6.html"
},
"geometry": {
"coordinates": [
......@@ -1223,7 +1223,7 @@
"properties": {
"type": "painting",
"description": "Matthias Grünewald: <strong>Die heilige Elisabeth von Thüringen</strong> (1511/12), Kunsthalle Karlsruhe",
"link": "video/video"
"url": "video/video8.html"
},
"geometry": {
"coordinates": [
......@@ -1238,7 +1238,7 @@
"type": "Feature",
"properties": {
"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>"
},
"geometry": {
......
This diff is collapsed.
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();
} else if(video.msRequestFullscreen) {
video.msRequestFullscreen();
} else if(video.mozRequestFullScreen) {
video.mozRequestFullScreen();
} else if(video.webkitRequestFullscreen) {
video.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
}
} else {
if(document.exitFullscreen) {
document.exitFullscreen();
} else if(document.msExitFullscreen) {
document.msExitFullscreen();
} else if(document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if(document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}
});
seekBar.on('input', function() {
var time = video.duration * (seekBar.val() / 100);
video.currentTime = time;
});
seekBarWrapper.mousedown(function() {
video.pause();
playButton.html('<span class="icon-play" aria-hidden="true"></span>');
});
seekBarWrapper.mouseup(function() {
video.play();
playButton.html('<span class="icon-pause" aria-hidden="true"></span>');
});
volumeBar.on('input', function() {
video.volume = volumeBar.val()/100;
if(volumeBar.val() == 0){
video.muted = true;
muteButton.text("Muted")
}
else {
video.muted = false;
muteButton.text(volumeBar.val());
}
});
videoContainer.mouseleave(function(){
controls.fadeOut('400');
overlay.fadeOut('400');
});
videoContainer.mouseenter(function(){
controls.fadeIn('400');
overlay.fadeIn('400');
});
timeDuration.text(formatTime(video.duration));
}
......@@ -4,7 +4,7 @@
<div id="player" class="vid-wrapper videre-container mouse-entered" style="width: 100%;">
<div class="vid-html5">
<video src="https://vjs.zencdn.net/v/oceans.mp4?HD" id="html-player" style="width: 100%;"></video>
<video src="video/video1.webm" id="html-player" style="width: 100%;" poster="video/video1.png"></video>
</div>
<div class="vid-toggle-layer"></div>
<div class="vid-shadow-layer"></div>
......@@ -36,7 +36,7 @@
<div class="description">
<h2>Josef Albers - Ehrung des Quadrats: Gelbe Zentrum (1954)</h2>
<p class="prose-big">Bla bla</p>
<p class="prose-big">Öl auf Hartfaserplatte, 109,5 x 109,5 cm</p>
Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla
Bla bla bla Bla bla bla Bla bla bla
Bla bla bla Bla bla bla Bla bla blaBla bla bla Bla bla bla Bla bla bla
......
......@@ -4,7 +4,7 @@
<div id="player" class="vid-wrapper videre-container mouse-entered" style="width: 100%;">
<div class="vid-html5">
<video src="https://vjs.zencdn.net/v/oceans.mp4?HD" id="html-player" style="width: 100%;"></video>
<video src="video/video10.webm" id="html-player" style="width: 100%;" poster="video/video10.png"></video>
</div>
<div class="vid-toggle-layer"></div>
<div class="vid-shadow-layer"></div>
......@@ -35,7 +35,7 @@
</div>
<div class="description">
<h2>Josef Albers - Ehrung des Quadrats: Gelbe Zentrum (1954)</h2>
<h2>Wolfgang Münch/Kiyoshi Furukawa - Bubbles (2000)</h2>
<p class="prose-big">Bla bla</p>
Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla
Bla bla bla Bla bla bla Bla bla bla
......
video1.png
\ No newline at end of file
video1.webm
\ No newline at end of file
......@@ -4,7 +4,7 @@
<div id="player" class="vid-wrapper videre-container mouse-entered" style="width: 100%;">
<div class="vid-html5">
<video src="https://vjs.zencdn.net/v/oceans.mp4?HD" id="html-player" style="width: 100%;"></video>
<video src="video/video2.webm" id="html-player" style="width: 100%;"poster="video/video2.png"></video>
</div>
<div class="vid-toggle-layer"></div>
<div class="vid-shadow-layer"></div>
......@@ -35,8 +35,8 @@
</div>
<div class="description">
<h2>Josef Albers - Ehrung des Quadrats: Gelbe Zentrum (1954)</h2>
<p class="prose-big">Bla bla</p>
<h2>Heinz Mack - Dynmaische Struktur (1958)</h2>
<p class="prose-big">Kunstharzfarben auf Nessel</p>
Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla
Bla bla bla Bla bla bla Bla bla bla
Bla bla bla Bla bla bla Bla bla blaBla bla bla Bla bla bla Bla bla bla
......
video1.png
\ No newline at end of file
video1.webm
\ No newline at end of file
......@@ -4,7 +4,7 @@
<div id="player" class="vid-wrapper videre-container mouse-entered" style="width: 100%;">
<div class="vid-html5">
<video src="https://vjs.zencdn.net/v/oceans.mp4?HD" id="html-player" style="width: 100%;"></video>
<video src="video/video3.webm" id="html-player" style="width: 100%;" poster="video/video3.png"></video>
</div>
<div class="vid-toggle-layer"></div>
<div class="vid-shadow-layer"></div>
......@@ -35,7 +35,7 @@
</div>
<div class="description">
<h2>Josef Albers - Ehrung des Quadrats: Gelbe Zentrum (1954)</h2>
<h2>Sebastian Vrancx - Überfall auf einen Geleitzug (1618)</h2>
<p class="prose-big">Bla bla</p>
Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla
Bla bla bla Bla bla bla Bla bla bla
......
video1.png
\ No newline at end of file
video1.webm
\ No newline at end of file
......@@ -4,7 +4,7 @@
<div id="player" class="vid-wrapper videre-container mouse-entered" style="width: 100%;">
<div class="vid-html5">
<video src="https://vjs.zencdn.net/v/oceans.mp4?HD" id="html-player" style="width: 100%;"></video>
<video src="video/video4.webm" id="html-player" style="width: 100%;" poster="video/video4.png"></video>
</div>
<div class="vid-toggle-layer"></div>
<div class="vid-shadow-layer"></div>
......@@ -35,7 +35,7 @@
</div>
<div class="description">
<h2>Josef Albers - Ehrung des Quadrats: Gelbe Zentrum (1954)</h2>
<h2>David Teniers d. J. - In der Schenke (1648), Abendessen in der Scheune (1634), Dorffest (1648)</h2>
<p class="prose-big">Bla bla</p>
Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla
Bla bla bla Bla bla bla Bla bla bla
......
video1.png
\ No newline at end of file
video1.webm
\ No newline at end of file
......@@ -4,7 +4,7 @@
<div id="player" class="vid-wrapper videre-container mouse-entered" style="width: 100%;">
<div class="vid-html5">
<video src="https://vjs.zencdn.net/v/oceans.mp4?HD" id="html-player" style="width: 100%;"></video>
<video src="video/video5.webm" id="html-player" style="width: 100%;" poster="video/video5.png"></video>
</div>
<div class="vid-toggle-layer"></div>
<div class="vid-shadow-layer"></div>
......@@ -35,7 +35,7 @@
</div>
<div class="description">
<h2>Josef Albers - Ehrung des Quadrats: Gelbe Zentrum (1954)</h2>
<h2>Marijke van Warmerdam - Take a long break I, II (2006)</h2>
<p class="prose-big">Bla bla</p>
Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla
Bla bla bla Bla bla bla Bla bla bla
......
video1.png
\ No newline at end of file
video1.webm
\ No newline at end of file
......@@ -4,7 +4,7 @@
<div id="player" class="vid-wrapper videre-container mouse-entered" style="width: 100%;">
<div class="vid-html5">
<video src="https://vjs.zencdn.net/v/oceans.mp4?HD" id="html-player" style="width: 100%;"></video>
<video src="video/video6.webm" id="html-player" style="width: 100%;" poster="video/video6.png"></video>
</div>
<div class="vid-toggle-layer"></div>
<div class="vid-shadow-layer"></div>
......@@ -35,7 +35,7 @@
</div>