104 lines
3.5 KiB
HTML
104 lines
3.5 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>Open Media Library</title>
|
|
<link href="../../../oxjs/min/UI/css/UI.css" rel="stylesheet" type="text/css" />
|
|
<style>
|
|
#logo {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 96px;
|
|
width: 256px;
|
|
height: 256px;
|
|
margin: auto;
|
|
moz-user-select: none;
|
|
ms-user-select: none;
|
|
o-user-select: none;
|
|
webkit-user-select: none;
|
|
}
|
|
#loadingIcon {
|
|
position: absolute;
|
|
left: 16px;
|
|
top: 256px;
|
|
right: 0;
|
|
bottom: 0;
|
|
width: 32px;
|
|
height: 32px;
|
|
margin: auto;
|
|
moz-user-select: none;
|
|
ms-user-select: none;
|
|
o-user-select: none;
|
|
webkit-user-select: none;
|
|
}
|
|
#error {
|
|
position: absolute;
|
|
left: 16px;
|
|
top: 256px;
|
|
right: 0;
|
|
bottom: 0;
|
|
width: 240px;
|
|
height: 32px;
|
|
margin: auto;
|
|
padding-bottom: 16px;
|
|
text-align: center;
|
|
display: none;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="OxThemeOxlight">
|
|
<img id="logo" src="../png/oml.png" style="">
|
|
<img id="loadingIcon" src="../../../oxjs/min/UI/themes/oxlight/svg/symbolLoading.svg">
|
|
<div id="error">Failed to launch Open Media Library</div>
|
|
<script>
|
|
(function() {
|
|
var animationInterval;
|
|
function load() {
|
|
var port = document.location.hash.length
|
|
? document.location.hash.slice(1)
|
|
: '9842',
|
|
base = '//127.0.0.1:' + port,
|
|
ws = new WebSocket('ws:' + base + '/ws');
|
|
ws.onopen = function(event) {
|
|
document.location.href = 'http:' + base;
|
|
};
|
|
ws.onerror = function(event) {
|
|
ws.close();
|
|
};
|
|
ws.onclose = function(event) {
|
|
setTimeout(load, 500);
|
|
};
|
|
};
|
|
function startAnimation() {
|
|
var css, deg = 0,
|
|
loadingIcon = document.getElementById('loadingIcon'),
|
|
previousTime = +new Date();
|
|
animationInterval = setInterval(function() {
|
|
var currentTime = +new Date(),
|
|
delta = (currentTime - previousTime) / 1000;
|
|
previousTime = currentTime;
|
|
deg = Math.round((deg + delta * 360) % 360 / 30) * 30;
|
|
css = 'rotate(' + deg + 'deg)';
|
|
loadingIcon.style.MozTransform = css;
|
|
loadingIcon.style.MSTransform = css;
|
|
loadingIcon.style.OTransform = css;
|
|
loadingIcon.style.WebkitTransform = css;
|
|
loadingIcon.style.transform = css;
|
|
}, 83);
|
|
}
|
|
function stopAnimation() {
|
|
clearInterval(animationInterval);
|
|
}
|
|
startAnimation();
|
|
load();
|
|
setTimeout(function() {
|
|
stopAnimation();
|
|
document.getElementById('loadingIcon').style.display = 'none';
|
|
document.getElementById('error').style.display = 'block';
|
|
}, 20000);
|
|
}());
|
|
</script>
|
|
</body>
|
|
</html>
|