<html>
<head>
<style>
body {
background-color: rgb(0, 0, 0);
width: 100%;
height: 100%;
overflow: hidden;
font-family: 'Arial';
font-size: 11px;
padding: 0;
margin: 0;
}
.InfoBox {
width: 300px;
height: auto;
background: rgba(0, 0, 0, 0.85);
color: rgb(220, 220, 220);
padding: 10px;
}
.InfoBox a {
color: rgb(220, 220, 220);
text-decoration: underline;
}
.InfoBox a:hover {
color: rgb(255, 255, 255);
text-decoration: underline;
}
.InfoBoxTitle {
width: 100%;
height: auto;
padding: 0;
padding-bottom: 5px;
margin-bottom: 5px;
border: 0px dashed rgb(128, 128, 128);
border-bottom-width: 1px;
color: rgb(220, 220, 220);
font-weight: bold;
font-size: 14px;
}
.GridLogo {
position: absolute;
top: 50px;
left: 50px;
border: 0;
}
.ScrollBar::-webkit-scrollbar {
width: 3px;
}
.ScrollBar::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}
.ScrollBar::-webkit-scrollbar-thumb {
background: rgba(38, 38, 38, 0.9);
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}
</style>
</head>
<body>
<img src='' style='border: 0; display: block; opacity; 0; position: absolute;' id='Image1' />
<img src='' style='border: 0; display: block; opacity: 0; position: absolute;' id='Image2' />
<script type='text/javascript'>
var Images = %%JSONIMAGEARRAY%%;
var MakeAnimation = true;
var CurrentIndex = 2;
var CurrentImage = -1;
var ImageTimeout = 0;
var CurrentImageTranslation = -1;
var ImagePositions = [{'x': -50, 'y': -50, 'px': 1, 'py': 1},
{'x': -50, 'y': -50, 'px': 1, 'py': 1}];
document.getElementById('Image1').onload = function() {
if (MakeAnimation)
{
this.style.width = (window.innerWidth + 100) + 'px';
if (this.offsetHeight < window.innerHeight + 100)
{
this.style.width = null;
this.style.height = (window.innerHeight + 100) + 'px';
}
ImagePositions[0].x = -50;
ImagePositions[0].y = -50;
}
else
{
this.style.width = window.innerWidth + 'px';
if (this.offsetHeight < window.innerHeight)
{
this.style.width = null;
this.style.height = window.innerHeight + 'px';
}
ImagePositions[0].x = 0;
ImagePositions[0].y = 0;
}
CurrentImageTranslation = 0;
};
document.getElementById('Image2').onload = function() {
if (MakeAnimation)
{
this.style.width = (window.innerWidth + 100) + 'px';
if (this.offsetHeight < window.innerHeight + 100)
{
this.style.width = null;
this.style.height = (window.innerHeight + 100) + 'px';
}
ImagePositions[1].x = -50;
ImagePositions[1].y = -50;
}
else
{
this.style.width = window.innerWidth + 'px';
if (this.offsetHeight < window.innerHeight)
{
this.style.width = null;
this.style.height = window.innerHeight + 'px';
}
ImagePositions[0].x = 0;
ImagePositions[0].y = 0;
}
CurrentImageTranslation = 0;
};
window.setInterval(function() {
ImageTimeout = ImageTimeout - 1;
if (ImageTimeout <= 0)
{
ImageTimeout = 10;
CurrentImage = CurrentImage + 1;
if (CurrentImage >= Images.length)
{CurrentImage = 0;}
if (CurrentIndex == 1)
{CurrentIndex = 2;}
else
{CurrentIndex = 1;}
document.getElementById('Image' + CurrentIndex).style.width = null;
document.getElementById('Image' + CurrentIndex).style.height = null;
document.getElementById('Image' + CurrentIndex).src = Images[CurrentImage];
}
}, 1000);
window.setInterval(function() {
if (MakeAnimation)
{
for (var i = 0; i < 2; ++i)
{
ImagePositions[i].x = ImagePositions[i].x + ImagePositions[i].px;
ImagePositions[i].y = ImagePositions[i].y + ImagePositions[i].py;
var OffWidth = document.getElementById('Image' + (i + 1)).offsetWidth;
var OffHeight = document.getElementById('Image' + (i + 1)).offsetHeight;
if (ImagePositions[i].x >= 0 || ImagePositions[i].x + OffWidth <= window.innerWidth)
{ImagePositions[i].px = -ImagePositions[i].px;}
if (ImagePositions[i].y >= 0 || ImagePositions[i].y + OffHeight <= window.innerHeight)
{ImagePositions[i].py = -ImagePositions[i].py;}
document.getElementById('Image' + (i + 1)).style.left = ImagePositions[i].x + 'px';
document.getElementById('Image' + (i + 1)).style.top = ImagePositions[i].y + 'px';
}
}
if (CurrentImageTranslation > -1)
{
var DoReset = false;
CurrentImageTranslation = CurrentImageTranslation + 0.025;
if (CurrentImageTranslation >= 1.0)
{
CurrentImageTranslation = 1.0;
DoReset = true;
}
if (CurrentIndex == 1)
{
document.getElementById('Image1').style.opacity = CurrentImageTranslation;
document.getElementById('Image2').style.opacity = 1 - CurrentImageTranslation;
}
else
{
document.getElementById('Image2').style.opacity = CurrentImageTranslation;
document.getElementById('Image1').style.opacity = 1 - CurrentImageTranslation;
}
if (DoReset)
{CurrentImageTranslation = -1;}
}
}, 50);
</script>
<div class='InfoBox' style='position: absolute; right: 50px; top: 50px;'>
<div class='InfoBoxTitle'>%%GRIDNAME%%</div>
Willkommen<br />
Bitte melde dich an, um %%GRIDNAME%% zu betreten.<br />
<br />
%%SHOWNEWS%%
</div>
<div class='InfoBox' style='position: absolute; left: 50px; bottom: 50px;'>
<div class='InfoBoxTitle'>
Status: <span style='color: rgb(0, 255, 0);'>Online</span>
</div>
%%SHOWSTATS%%
</div>
</body>
</html>