Skip to content

W
web-ausstellung-virtuell.de
Commit aebf3320 authored by Jonas Heinrich's avatar Jonas Heinrich
Browse files
Options

added profile images

parent 5e821768
Hide whitespace changes
Inline Side-by-side
Showing with 66 additions and 371 deletions
about.html
View file @ aebf3320
......@@ -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>
......
css/player.css deleted 100755 → 0
View file @ 5e821768
/* ==== 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;
}
css/videre.css
View file @ aebf3320
......@@ -228,3 +228,7 @@ button {
video::-webkit-media-controls {
display: none !important; }
video[poster] {
object-fit: cover;
}
geojson/museum.geojson
View file @ aebf3320
......@@ -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": {
......
js/player.js deleted 100755 → 0
View file @ 5e821768
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));
}
video/video1.html
View file @ aebf3320
......@@ -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
......
video/video10.html
View file @ aebf3320
......@@ -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
......
video/video10.png 0 → 120000
View file @ aebf3320
video1.png
\ No newline at end of file
video/video10.webm 0 → 120000
View file @ aebf3320
video1.webm
\ No newline at end of file
video/video2.html
View file @ aebf3320
......@@ -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
......
video/video2.png 0 → 120000
View file @ aebf3320
video1.png
\ No newline at end of file
video/video2.webm 0 → 120000
View file @ aebf3320
video1.webm
\ No newline at end of file
video/video3.html
View file @ aebf3320
......@@ -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
......
video/video3.png 0 → 120000
View file @ aebf3320
video1.png
\ No newline at end of file
video/video3.webm 0 → 120000
View file @ aebf3320
video1.webm
\ No newline at end of file
video/video4.html
View file @ aebf3320
......@@ -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
......
video/video4.png 0 → 120000
View file @ aebf3320
video1.png
\ No newline at end of file
video/video4.webm 0 → 120000
View file @ aebf3320
video1.webm
\ No newline at end of file
video/video5.html
View file @ aebf3320
......@@ -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
......
video/video5.png 0 → 120000
View file @ aebf3320
video1.png
\ No newline at end of file
video/video5.webm 0 → 120000
View file @ aebf3320
video1.webm
\ No newline at end of file
video/video6.html
View file @ aebf3320
......@@ -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>