<!DOCTYPE html>
<html>
<head>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1"/>
<meta charset="UTF-8">
<meta name="theme-color" content="#4b75ff">
<link rel="icon" type="image/png" href="./favicon.png" />
<title>Control Panel | Zoraxy</title>
<link rel="stylesheet" href="script/semantic/semantic.min.css">
<script src="script/jquery-3.6.0.min.js"></script>
<script src="../script/ao_module.js"></script>
<script src="script/semantic/semantic.min.js"></script>
<script src="script/tablesort.js"></script>
<style>
body{
background-color:white;
}
.functiontab{
display:none;
}
.menubar{
width: 100%;
padding: 0.4em;
padding-left: 1.2em;
padding-right: 1.2em;
background-color: #f5f5f5;
margin-bottom: 1em;
position: fixed;
top: 0;
width: 100%;
z-index: 10;
box-shadow: 0px 1px 5px 0px rgba(38,38,38,0.26);
}
.menubar .logo{
height: 36px;
}
.menubar .item{
display: inline-block;
vertical-align: middle;
}
.wrapper{
display: flex;
flex-wrap: wrap;
margin-top: 4em;
}
.toolbar{
width: 240px;
}
.contentWindow{
padding: 1em;
flex: 1;
}
@media screen and (max-width: 750px) {
.toolbar {
display: inline-block;
width: 100%;
margin-bottom: 1em;
}
#mainmenu{
width: calc(100% - 1em);
}
.contentWindow{
display: inline-block;
width: 100%;
}
}
.menudivider{
font-size: 0.8em !important;
color: #9c9c9c !important;
padding-left: 0.6em;
}
</style>
</head>
<body>
<div class="menubar">
<div class="item">
<img class="logo" src="img/logo.svg">
</div>
<div class="ui right floated buttons" style="padding-top: 2px;">
<button class="ui basic icon button" onclick="logout();"><i class="sign-out icon"></i></button>
</div>
</div>
<div class="wrapper">
<div class="toolbar">
<div id="mainmenu" class="ui secondary vertical pointing menu">
<a class="item active" tag="status">
<i class="blue info circle icon"></i>Status
</a>
<a class="item" tag="vdir">
<i class="yellow folder icon"></i> Virtual Directory
</a>
<a class="item" tag="subd">
<i class="teal sitemap icon"></i> Subdomain Proxy
</a>
<a class="item" tag="rules">
<i class="brown plus square icon"></i> Create Proxy Rules
</a>
<a class="item" tag="setroot">
<i class="home icon"></i> Set Proxy Root
</a>
<div class="ui divider menudivider">Access & Connections</div>
<a class="item" tag="cert">
<i class="orange lock icon"></i> TLS / SSL certificate
</a>
<a class="item" tag="redirectset">
<i class="violet level up alternate icon"></i> Redirection
</a>
<a class="item" tag="blacklist">
<i class="red ban icon"></i> Blacklist
</a>
<a class="item" tag="upnp">
<i class="blue exchange icon"></i> Port Forward
</a>
<div class="ui divider menudivider">Bridging</div>
<a class="item" tag="">
<i class="remove icon"></i> TCP Proxy
</a>
<a class="item" tag="">
<i class="remove icon"></i> HTTP over Websocket
</a>
<div class="ui divider menudivider">Others</div>
<a class="item" tag="">
<i class="remove icon"></i> Uptime Monitor
</a>
<a class="item" tag="">
<i class="remove icon"></i> Network Tools
</a>
<a class="item" tag="utils">
<i class="grey paperclip icon"></i> Utilities
</a>
<!-- Add more components here -->
</div>
</div>
<div class="contentWindow">
<!-- Status Tab -->
<div id="status" class="functiontab" target="status.html" style="display: block ;">
<br><br><div class="ui active centered inline loader"></div>
</div>
<!-- Virtual Directory Tab -->
<div id="vdir" class="functiontab" target="vdir.html"></div>
<!-- Subdomain Proxy -->
<div id="subd" class="functiontab" target="subd.html"></div>
<!-- Create Rules -->
<div id="rules" class="functiontab" target="rules.html"></div>
<!-- Set proxy root -->
<div id="setroot" class="functiontab" target="rproot.html"></div>
<!-- Set TLS cert -->
<div id="cert" class="functiontab" target="cert.html"></div>
<!-- Redirections -->
<div id="redirectset" class="functiontab" target="redirection.html"></div>
<!-- Blacklist -->
<div id="blacklist" class="functiontab" target="blacklist.html"></div>
<!-- UPnP based port fowarding -->
<div id="upnp" class="functiontab" target="upnp.html"></div>
<!-- Utilities -->
<div id="utils" class="functiontab" target="utils.html"></div>
</div>
</div>
</div>
<br><br>
<div class="ui divider"></div>
<div class="ui container" style="color: grey; font-size: 90%">
<p>CopyRight Zoraxy project and its author, 2022 - <span class="year"></span></p>
</div>
<br><br>
<script>
$(".year").text(new Date().getFullYear());
/*
Loader function
Load all the components view from the
components/ directory into their corrisponding divs
*/
let loadingComponents = 0;
function initTabs(callback=undefined){
$('.functiontab').each(function(){
let loadTarget = $(this).attr("target");
if (loadTarget != undefined){
$(this).load("./components/" + loadTarget, function(){
loadingComponents--;
});
loadingComponents++;
}else{
$(this).html(`<p>Unable to load components for this tab</p>`);
}
})
if (callback != undefined){
waitInit(callback);
}
}
function waitInit(callback = undefined, retryCount = 0){
if (loadingComponents > 0 && retryCount < 5){
setTimeout(function(){
waitInit(callback, retryCount++);
}, 300);
}else if (loadingComponents == 0){
callback();
}else{
alert("Missing component. Please check if your installation is complete.")
}
}
initTabs(function(){
initRPStaste();
if (window.location.hash.length > 1){
let tabID = window.location.hash.substr(1);
openTabById(tabID);
}else{
openTabById("status");
}
$(".ui.dropdown").dropdown();
$(".ui.checkbox").checkbox();
//Click on the current tab
$("#mainmenu").find(".item").each(function(){
$(this).on("click", function(event){
let tabid = $(this).attr("tag");
openTabById(tabid);
});
});
//Initialize all table that is sortable
$('table').tablesort();
});
function logout() {
$.get("/api/auth/logout", function(response) {
if (response === "OK") {
window.location.href = "/";
}
});
}
function getTabButtonById(targetTabId){
let targetTabBtn = undefined;
$("#mainmenu").find(".item").each(function(){
let tabid = $(this).attr("tag");
if (tabid == targetTabId){
targetTabBtn = $(this);
}
});
return targetTabBtn;
}
//Select and open a tab by its tag id
function openTabById(tabID){
let targetBtn = getTabButtonById(tabID);
if (targetBtn == undefined){
alert("Invalid tabid given");
return;
}
$("#mainmenu").find(".item").removeClass("active");
$(targetBtn).addClass("active");
$(".functiontab").hide();
$("#" + tabID).fadeIn('fast');
$('html,body').animate({scrollTop: 0}, 'fast');
window.location.hash = tabID;
}
</script>
</body>
</html>