76 lines
3.8 KiB
HTML
Executable File
76 lines
3.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) {
|
|
setIp(xhr.responseText);
|
|
}
|
|
};
|
|
xhr.send();
|
|
}, 5000);
|
|
</script>
|
|
<style>
|
|
body { text-align: center; font-family: 'Arial', 'sans-serif'; color: white; background-color: black; }
|
|
#bottom { display: flex; justify-content: center; align-items: center; background: #111; position: fixed; left: 0; right: 0; bottom: 0; padding: 50px 0; min-height: 50px; }
|
|
#time { font-size: 10em; }
|
|
#date { font-size: 3em; }
|
|
#ipaddr { font-size: 1.25em; color: #888888; }
|
|
#ipaddr a { color: $white; text-decoration: none; font-weight: bold; }
|
|
#hidden-container { display: none; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="hidden-container"></div>
|
|
<div id="time"></div>
|
|
<div id="date"></div>
|
|
<div id="bottom">
|
|
<div id="ipaddr"> </div>
|
|
</div>
|
|
<script>
|
|
const js_l_common_unknown_ipaddr = '{{ l.common_unknown_ipaddr }}';
|
|
const js_l_player_default_welcome_message = '{{ l.player_default_welcome_message }}';
|
|
const manage_url_template = '{{ 'http://%ipaddr%:' ~ PORT ~ url_for('manage') }}';
|
|
|
|
const setIp = function(ipaddr) {
|
|
const $container = document.getElementById('ipaddr');
|
|
|
|
if (ipaddr) {
|
|
const link = manage_url_template.replace('%ipaddr%', ipaddr);
|
|
$container.innerHTML = js_l_player_default_welcome_message.replace('%link%', '<a href="'+link+'" target="_blank">'+link+'</a>')
|
|
} else {
|
|
$container.innerHTML = js_l_common_unknown_ipaddr;
|
|
}
|
|
};
|
|
setIp('{{ ipaddr if ipaddr else '' }}')
|
|
</script>
|
|
</body>
|
|
</html> |