104 lines
5.8 KiB
HTML
Executable File
104 lines
5.8 KiB
HTML
Executable File
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<script type="text/javascript">
|
|
const time_with_seconds = {{ 'true' if time_with_seconds.as_bool() else 'false' }};
|
|
|
|
function updateTime() {
|
|
const date = new Date();
|
|
const hours = (date.getHours() < 10 ? '0' : '') + date.getHours();
|
|
const minutes = (date.getMinutes() < 10 ? '0' : '') + date.getMinutes();
|
|
const seconds = (date.getSeconds() < 10 ? '0' : '') + date.getSeconds();
|
|
const dayInMonth = date.getDate();
|
|
const month = date.getMonth();
|
|
const year = date.getFullYear();
|
|
const day = date.getDay();
|
|
const dayLabels = ["{{l.basic_day_7}}", "{{l.basic_day_1}}", "{{l.basic_day_2}}", "{{l.basic_day_3}}", "{{l.basic_day_4}}", "{{l.basic_day_5}}", "{{l.basic_day_6}}"];
|
|
const monthLabels = ["{{l.basic_month_1}}", "{{l.basic_month_2}}", "{{l.basic_month_3}}", "{{l.basic_month_4}}", "{{l.basic_month_5}}", "{{l.basic_month_6}}", "{{l.basic_month_7}}", "{{l.basic_month_8}}", "{{l.basic_month_9}}", "{{l.basic_month_10}}", "{{l.basic_month_11}}", "{{l.basic_month_12}}"];
|
|
|
|
const timeLabel = hours + ":" + minutes + (time_with_seconds ? ':' + seconds : '');
|
|
const dateLabel = dayLabels[day] + " " + dayInMonth + " " + monthLabels[month] + " " + year;
|
|
|
|
document.getElementById('time').innerHTML = timeLabel;
|
|
document.getElementById('date').innerHTML = dateLabel;
|
|
setTimeout(updateTime, 1000);
|
|
}
|
|
|
|
window.addEventListener("load", updateTime);
|
|
const urlParams = new URLSearchParams(window.location.search);
|
|
|
|
setInterval(function(){
|
|
const xhr = new XMLHttpRequest();
|
|
xhr.open("GET", "{{ url_for('sysinfo_get_ipaddr') }}", true);
|
|
xhr.onreadystatechange = function () {
|
|
if (xhr.readyState === 4 && xhr.status === 200) {
|
|
const jsonResponse = JSON.parse(xhr.responseText);
|
|
setIps(jsonResponse.interfaces)
|
|
}
|
|
};
|
|
xhr.send();
|
|
}, 1000);
|
|
</script>
|
|
<style>
|
|
* { font-family: 'Tahoma', 'Arial', 'sans-serif'; }
|
|
body { text-align: center; color: white; background-color: black; }
|
|
#bottom { display: flex; justify-content: center; align-items: center; flex-direction: column; background: #111; position: fixed; left: 0; right: 0; bottom: 0; padding: 30px 0 50px 0; min-height: 50px; }
|
|
#time { font-size: 10em; }
|
|
#date { font-size: 3em; }
|
|
.caption { font-size: 1.25em; color: #888888; font-weight: bold; margin-bottom: 10px; }
|
|
.ipaddrs { display: flex; list-style: none; flex-direction: column; align-items: center; align-self:stretch; margin: 20px 40px 0 40px; padding: 10px 0; background: rgba(0,0,0,.3); border-radius: 14px; }
|
|
.ipaddr { color: white; text-decoration: none; font-weight: bold; margin: 5px 0 5px 0; display:flex; flex-direction:row; align-self: stretch; justify-content:center; align-items:center; }
|
|
.ipaddr a { text-decoration: none; font-weight: normal; font-size: 1.2em; color: #666; transition: .1s ease-in all; display:block; flex-direction:row; align-self: stretch; flex: 1; text-align: center; margin: 0 20px; border-radius: 6px; padding: 10px 0; }
|
|
.ipaddr a span { color: white; font-size: 1.2em; }
|
|
.ipaddr a:hover { color: #fff; background: #017BFF; }
|
|
#hidden-container { display: none; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="hidden-container"></div>
|
|
<div id="time"></div>
|
|
<div id="date"></div>
|
|
<div id="bottom">
|
|
</div>
|
|
<script>
|
|
const interfaces = {{ json_dumps(interfaces) | safe }};
|
|
const translation_common_unknown_ipaddr = '{{ l.common_unknown_ipaddr }}';
|
|
const translation_player_default_welcome_message = '{% if noplaylist %}{{ l.player_noplaylist_welcome_message }}{% else %}{{ l.player_default_welcome_message }}{% endif %}';
|
|
const manage_url_template = '{{ 'http://%ipaddr%:' ~ PORT ~ url_for('manage') }}';
|
|
|
|
const setIps = function(ips) {
|
|
const $container = document.getElementById('bottom');
|
|
$container.innerHTML = '';
|
|
const $empty = document.createElement('div');
|
|
Object.assign($empty, { className: 'caption'});
|
|
|
|
if (ips.length === 0) {
|
|
$empty.innerHTML = translation_common_unknown_ipaddr;
|
|
$container.appendChild($empty);
|
|
} else {
|
|
$empty.innerHTML = translation_player_default_welcome_message;
|
|
$container.appendChild($empty);
|
|
const $ipaddrs = document.createElement('ul');
|
|
Object.assign($ipaddrs, { className: 'ipaddrs'});
|
|
$container.appendChild($ipaddrs);
|
|
|
|
for (let i = 0; i < ips.length; i++) {
|
|
addIp(ips[i], $ipaddrs);
|
|
}
|
|
}
|
|
};
|
|
|
|
const addIp = function(ip, $container) {
|
|
const href_label = manage_url_template.replace('%ipaddr%', '<span>'+ip+'</span>');
|
|
const href = manage_url_template.replace('%ipaddr%', ip);
|
|
const link = '<a href="' + href + '" target="_blank">' + href_label + '</a>';
|
|
const $ipaddr = document.createElement('li');
|
|
Object.assign($ipaddr, { className: 'ipaddr'});
|
|
$ipaddr.innerHTML = link;
|
|
$container.appendChild($ipaddr);
|
|
}
|
|
|
|
setIps(interfaces);
|
|
</script>
|
|
</body>
|
|
</html> |