witty/assets/template/index.html
Zhi Wang 61c917ec47 wip
2022-01-18 08:25:21 -05:00

102 lines
3.2 KiB
HTML

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<!-- automatically refresh the page every 30 seconds -->
<!-- <meta http-equiv="refresh" content="30"> -->
<title>Web Terminal</title>
<!-- Bootstrap core CSS -->
<script src="/assets/external/bootstrap.min.js"></script>
<link href="/assets/external/bootstrap.min.css" rel="stylesheet">
<link href="/assets/main.css" rel="stylesheet">
</head>
<body>
<header>
<nav class="navbar navbar-dark bg-dark shadow-sm navbar-xs">
<div class="container-fluid">
<a class="navbar-brand mx-auto" href="https://github.com/syssecfsu/witty" target="_blank">
<img src="/assets/img/logo.svg" style="margin-right: 0.5rem;" height="32"
class="d-inline-block align-text-top">
WiTTY: Web-based interactive TTY
</a>
<a class="btn btn-primary btn-sm float-end" href="/new" onClick="setTimeout(function(){refresh(true)}, 1000)"
target="_blank" role="button">
New Session
</a>
</div>
</nav>
</header>
<main>
<div class="container-fluid" style="margin-top:1em;">
<ul class="nav nav-tabs" id="js_sucks" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link bg-light active" id="interactive-tab" data-bs-toggle="tab"
data-bs-target="#interactive-cnt" type="button" role="tab" aria-controls="interactive-cnt"
aria-selected="true"><img src="/assets/img/keyboard.svg" style="margin-right: 0.5rem;" height="18px">Live
Sessions</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link bg-light" id="saved-tab" data-bs-toggle="tab" data-bs-target="#saved-cnt"
type="button" role="tab" aria-controls="saved-cnt" aria-selected="false"><img src="/assets/img/record.svg"
style="margin-right: 0.5rem;" height="18px">Recorded Sessions</button>
</li>
</ul>
<div class="tab-content bg-light border border-info rounded-bottom" id="nav-tabContent">
</div>
</div>
</main>
<script>
var active_tab = 0
function del_btn(path) {
fetch("/delete/" + path)
setTimeout(function () {
refresh(true)
}, 20);
}
// fresh the page every 10 seconds, in case active sessions are closed.
function refresh(once) {
tabs = document.getElementById("nav-tabContent")
fetch("/update/" + active_tab)
.then((response) => {
return response.text();
})
.then((result) => {
tabs.innerHTML = result;
});
if (once == false) {
setTimeout(function () {
refresh(false)
}, 8000);
}
}
refresh(false)
var itab = document.querySelector('#interactive-tab')
itab.addEventListener('shown.bs.tab', function (event) {
active_tab = 0
})
var stab = document.querySelector('#saved-tab')
stab.addEventListener('shown.bs.tab', function (event) {
active_tab = 1
})
</script>
</body>
</html>