75 lines
3.4 KiB
HTML
75 lines
3.4 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<meta name="author" content="Victor Giers">
|
|
<meta name="date" content="2020-02-14">
|
|
<meta property="og:url" content="https://www.victorgiers.com/stern/index.htm" />
|
|
<meta property="og:type" content="animation" />
|
|
<meta property="og:title" content="Kleiner Stern" />
|
|
<meta property="og:description" content="Digitales Replikate von Walter Giers' 'Kleiner Stern' (1990)" />
|
|
<meta property="og:image" content="https://www.victorgiers.com/stern/img/thumbnail_512.jpg" />
|
|
<link rel="icon" type="image/vnd.microsoft.icon" href="img/favicon.ico">
|
|
|
|
<script language="javascript" type="text/javascript" src="p5.min.js"></script>
|
|
<script language="javascript" type="text/javascript" src="stern.js"></script>
|
|
<style>
|
|
body { background-color: #6b718d; display: flex; position:fixed; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%; align-items: center; justify-content: center; border:none; margin:0; padding:0; overflow:hidden; z-index:1;}
|
|
#fsb { position: absolute; right: 20px; bottom: 20px; }
|
|
#nca { position: absolute; width: 100%; height: 100%; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="nca"></div>
|
|
<button id="fsb" onclick="toggleFullscreen();">Vollbild</button>
|
|
<script>
|
|
var elem = document.documentElement;
|
|
var fullScreen = false;
|
|
function toggleFullscreen() {
|
|
if(fullScreen){
|
|
if (document.exitFullscreen) {
|
|
document.exitFullscreen();
|
|
} else if (document.mozCancelFullScreen) { /* Firefox */
|
|
document.mozCancelFullScreen();
|
|
} else if (document.webkitExitFullscreen) { /* Chrome, Safari and Opera */
|
|
document.webkitExitFullscreen();
|
|
} else if (document.msExitFullscreen) { /* IE/Edge */
|
|
document.msExitFullscreen();
|
|
}
|
|
} else {
|
|
if (elem.requestFullscreen) {
|
|
elem.requestFullscreen();
|
|
} else if (elem.mozRequestFullScreen) { /* Firefox */
|
|
elem.mozRequestFullScreen();
|
|
} else if (elem.webkitRequestFullscreen) { /* Chrome, Safari and Opera */
|
|
elem.webkitRequestFullscreen();
|
|
} else if (elem.msRequestFullscreen) { /* IE/Edge */
|
|
elem.msRequestFullscreen();
|
|
}
|
|
document.getElementById('fsb').style.display = "none";
|
|
document.getElementById('nca').style.cursor = "url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAZdEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjbQg61aAAAADUlEQVQYV2P4//8/IwAI/QL/+TZZdwAAAABJRU5ErkJggg=='), url(images/blank.cur), none"
|
|
}
|
|
fullscreen = !fullscreen;
|
|
}
|
|
|
|
if (document.addEventListener)
|
|
{
|
|
document.addEventListener('fullscreenchange', exitHandler, false);
|
|
document.addEventListener('mozfullscreenchange', exitHandler, false);
|
|
document.addEventListener('MSFullscreenChange', exitHandler, false);
|
|
document.addEventListener('webkitfullscreenchange', exitHandler, false);
|
|
}
|
|
function exitHandler()
|
|
{
|
|
if (document.webkitIsFullScreen === false || document.mozFullScreen === false || document.msFullscreenElement === false)
|
|
{
|
|
document.getElementById('fsb').style.display = "";
|
|
document.getElementById('nca').style.cursor = "";
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|