database setup for outsidethebox.top webhosting infrastructure project https://data.outsidethebox.top
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

83 lines
2.5 KiB

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>outsidethebox.top - host registry</title>
<link rel="icon" href="{{ url_for('static', filename='favicon.ico') }}" type="image/x-icon">
<link rel="apple-touch-icon" href="{{ url_for('static', filename='ufo-box.png') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>
<body class="theme-dark">
<header class="topbar">
<div class="brand">Host Registry</div>
<form class="search" action="{{ url_for('hosts') }}" method="get">
<input type="text" name="q" value="{{ q|default('') }}" placeholder="Search hosts, clients, IPs...">
<button type="submit">Search</button>
</form>
<nav>
<a href="{{ url_for('hosts') }}">Hosts</a>
<a href="{{ url_for('hosts_import') }}">Import</a>
<a href="{{ url_for('hosts_bulk') }}">Bulk</a>
<a href="{{ url_for('health') }}">Health</a>
</nav>
<div class="toggles">
<button id="toggleTheme" type="button">Toggle Light</button>
<label><input type="checkbox" id="masker"> Mask</label>
</div>
</header>
<main class="container">
{% with messages = get_flashed_messages(with_categories=true) %}
{% if messages %}
<div class="flashes">
{% for cat,msg in messages %}
<div class="flash {{ cat }}">{{ msg }}</div>
{% endfor %}
</div>
{% endif %}
{% endwith %}
{% block content %}{% endblock %}
</main>
<footer class="footer">
<div class="footer-center">
{{ version }} • © {{ year }} outsidethebox.top • uptime: {{ sys_uptime }} • DB: {% if db_ok %}OK{% else %}DOWN{% endif %} ({{ host_count }} hosts)
</div>
</footer>
<script>
(function(){
const btn=document.getElementById('toggleTheme');
const body=document.body;
btn && btn.addEventListener('click', ()=>{
body.classList.toggle('theme-light');
body.classList.toggle('theme-dark');
});
const masker=document.getElementById('masker');
masker && masker.addEventListener('change', ()=>{
document.body.classList.toggle('mask', masker.checked);
});
})();
</script>
<script>
(function() {
function setTopbarVar() {
var tb = document.querySelector('.topbar');
if (!tb) return;
var h = tb.getBoundingClientRect().height;
document.documentElement.style.setProperty('--topbar-h', h + 'px');
}
window.addEventListener('load', setTopbarVar);
window.addEventListener('resize', setTopbarVar);
setTopbarVar();
})();
</script>
</body>
</html>