56 lines
2.3 KiB
HTML
56 lines
2.3 KiB
HTML
<!DOCTYPE html>
|
|
<head>
|
|
<title>Obscreen - Fleet View</title>
|
|
<style>
|
|
html {margin:0;padding:0;display:flex;flex:1;background: #0f0035;font-family: 'Arial', 'sans-serif'; color: white;height:100vh;}
|
|
body {margin:0;padding:0;display:flex;flex:1;flex-direction: column}
|
|
ul {list-style:none;margin: 0;padding:0;display: flex;flex-direction: row;border-bottom: 1px solid #0eef5f;}
|
|
ul li {flex:1;display: flex;flex-direction: row;justify-content: center;align-items: center;border-right: 1px solid #0eef5f;}
|
|
ul li a {flex:1;display: flex;flex-direction: row;justify-content: center;align-items: center;padding: 20px 5px;color:#0eef5f;font-weight: bold;text-decoration: none;}
|
|
ul li.active a { background: #0eef5f;color:white; }
|
|
main {display: flex;flex:1;}
|
|
main .studio-frame {display: flex; flex:1;}
|
|
main .studio-frame iframe {display: flex; flex: 1;}
|
|
.hidden {display: none !important;}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<ul>
|
|
{% for studio in studios %}
|
|
<li class="{% if loop.first %}active{% endif %}">
|
|
<a href="javascript:void(0);" class="studio-switch" data-id="{{ studio.id }}" onclick="tab('{{ studio.id }}')">
|
|
{{ studio.name }}
|
|
</a>
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
<main>
|
|
{% for studio in studios %}
|
|
<div class="studio-frame {% if not loop.first %}hidden{% endif %}" data-id="{{ studio.id }}">
|
|
<iframe src="http://{{ studio.host }}:{{ studio.port }}/slideshow?fleet_mode=1" frameborder="0" allowtransparency=""></iframe>
|
|
</div>
|
|
{% endfor %}
|
|
</main>
|
|
<script type="text/javascript">
|
|
const tab = function(id) {
|
|
const $switches = document.getElementsByClassName('studio-switch');
|
|
const $frames = document.getElementsByClassName('studio-frame');
|
|
for (let i = 0; i < $switches.length; i++) {
|
|
const $switch = $switches[i];
|
|
$switch.parentElement.className = $switch.dataset.id === id ? 'active' : '';
|
|
}
|
|
for (let j = 0; j < $frames.length; j++) {
|
|
const $frame = $frames[j];
|
|
$frame.className = $frame.dataset.id === id ? 'studio-frame' : 'studio-frame hidden';
|
|
}
|
|
document.location.hash = id;
|
|
};
|
|
|
|
var hash = document.location.hash.replace('#', '');
|
|
|
|
if (hash) {
|
|
tab(hash);
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |