Compare commits
37 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| f08d9c7833 | |||
| c4a9272444 | |||
| 9b4bc15e80 | |||
| cb07365020 | |||
| 46cf0f1f4e | |||
| 5a0d96b6c6 | |||
| c0c8a43c77 | |||
| a91c21ecfd | |||
| 49f466f298 | |||
| f0171a0232 | |||
| c95880d22f | |||
| 2f99a07ef7 | |||
| 97f62b8ee8 | |||
| 198a83b4c7 | |||
| 803e7185d8 | |||
| 30361a9aae | |||
| 115e8367da | |||
| 0d61dd1725 | |||
| d7147b6c81 | |||
| 63ec0ebaa8 | |||
| f925665d23 | |||
| a1aa1c0d14 | |||
| ff97952f67 | |||
| f0ce402830 | |||
| 80147b69eb | |||
| 11d8475c8a | |||
| 8f684513fd | |||
| 2ff3c846e9 | |||
| fca5a173dc | |||
| 5d79ecf1b7 | |||
| e876bf08da | |||
| b19872fa5b | |||
| 6566a32f6a | |||
| b23212df9c | |||
| 669ae42c97 | |||
| b194724283 | |||
| e782254749 |
128
common.js
128
common.js
@@ -10,6 +10,7 @@ function check_deployments() {
|
||||
apps.length = 0; // reset
|
||||
apps.push(...JSON.parse(data)); // push each element
|
||||
console.log(apps);
|
||||
document.getElementById('installAppsBtn').click();
|
||||
|
||||
// manage
|
||||
html_data = '';
|
||||
@@ -19,6 +20,7 @@ function check_deployments() {
|
||||
service_name = data[k].name;
|
||||
orig_service_name = data[k].orig_name;
|
||||
version = data[k].version;
|
||||
subtitle = data[k].subtitle;
|
||||
installed = data[k].installed;
|
||||
if (installed=='true') {
|
||||
html_data += '<div><a href="#" onclick="reinstall(\''+service_name+'\',\''+service_name+'\')">'+orig_service_name+'</a> - '+version+' - INSTALLED</div>';
|
||||
@@ -88,7 +90,7 @@ function get_repositories() {
|
||||
console.log('repositories: '+data);
|
||||
if (data=="OK") {
|
||||
setTimeout(check_repositories, 500);
|
||||
get_deployments();
|
||||
//get_deployments();
|
||||
}
|
||||
else alert(data);
|
||||
});
|
||||
@@ -108,17 +110,35 @@ function check_vpn() {
|
||||
var url = 'scan.php?op=check_vpn';
|
||||
jQuery.get(url, function(data) {
|
||||
console.log('check_vpn: '+data);
|
||||
if (data=="2") {
|
||||
$('#vpn_off').hide();
|
||||
$('#vpn_on').show();
|
||||
$('#pro_off').hide();
|
||||
$('#pro_on').show();
|
||||
if (data=="1") { // save_vpn has finished or VPN ON
|
||||
const vpn_div = document.getElementById("vpn");
|
||||
console.log('vpn_div: '+vpn_div);
|
||||
if (vpn_div) {
|
||||
vpn_div.innerHTML = 'VPN start process has finished';
|
||||
setTimeout(function() {
|
||||
document.getElementById('installAppsBtn').click();
|
||||
}, 2000);
|
||||
}
|
||||
else {
|
||||
$('#pro_off').hide();
|
||||
$('#pro_on').show();
|
||||
$('#vpn_off').hide();
|
||||
$('#vpn_on').show();
|
||||
//document.getElementById('vpnToggle').checked = true;
|
||||
//document.querySelector(".switch-label").textContent = "ON";
|
||||
}
|
||||
}
|
||||
else if (data=="2") {
|
||||
$('#pro_off').hide();
|
||||
$('#pro_on').show();
|
||||
$('#vpn_on').hide();
|
||||
$('#vpn_off').show();
|
||||
//document.getElementById('vpnToggle').checked = false;
|
||||
//document.querySelector(".switch-label").textContent = "OFF";
|
||||
}
|
||||
else {
|
||||
$('#vpn_on').hide();
|
||||
$('#vpn_off').show();
|
||||
$('#pro_on').hide();
|
||||
$('#pro_off').show();
|
||||
else { // data == 0
|
||||
$('#pro_on').hide();
|
||||
$('#pro_off').show();
|
||||
}
|
||||
setTimeout(check_vpn, 10000);
|
||||
});
|
||||
@@ -130,6 +150,7 @@ function save_vpn() {
|
||||
jQuery.get(url, function(data) {
|
||||
console.log('save_vpn: '+data);
|
||||
if (data=="OK") {
|
||||
check_vpn();
|
||||
}
|
||||
//get_vpn();
|
||||
});
|
||||
@@ -196,7 +217,8 @@ function load_template(additional, block) {
|
||||
jQuery("div.deployment").each(function(index) {
|
||||
$(this).html('');
|
||||
});
|
||||
jQuery("#"+block).html('Loading '+additional+' template...');
|
||||
//jQuery("#"+block).html('Loading '+additional+' template...');
|
||||
jQuery("#"+block).html('<div class="loading">Loading...</div>');
|
||||
var url = 'scan.php?op=deployment&additional='+additional;
|
||||
jQuery.get(url, function(data) {
|
||||
console.log('load_template: '+data);
|
||||
@@ -222,7 +244,8 @@ function reinstall(additional, block) {
|
||||
jQuery("div.deployment").each(function(index) {
|
||||
$(this).html('');
|
||||
});
|
||||
jQuery("#"+block).html('Loading '+additional+' template...');
|
||||
//jQuery("#"+block).html('Loading '+additional+' template...');
|
||||
jQuery("#"+block).html('<div class="loading">Loading...</div>');
|
||||
var url = 'scan.php?op=reinstall&additional='+additional;
|
||||
jQuery.get(url, function(data) {
|
||||
console.log('reinstall '+additional+': '+data);
|
||||
@@ -238,11 +261,13 @@ function check_uninstall(additional) {
|
||||
console.log('check_uninstall '+additional+': '+data);
|
||||
if (data!="") {
|
||||
jQuery("#"+additional).html(data);
|
||||
jQuery("#popupText").html(data); // manage2
|
||||
}
|
||||
if (data!="OK") {
|
||||
setTimeout(check_uninstall, 1000, additional);
|
||||
}
|
||||
else {
|
||||
jQuery("#popupText").html('Uninstall has finished'); // manage2
|
||||
jQuery("#"+additional).html('Uninstall has finished');
|
||||
get_deployments();
|
||||
}
|
||||
@@ -254,17 +279,20 @@ function uninstall(additional) {
|
||||
jQuery("div.deployment").each(function(index) {
|
||||
$(this).html('');
|
||||
});
|
||||
data = '<fieldset><form action="#" method="post"><div class="row">YOU ARE GOING TO UNINSTALL '+additional.toUpperCase()+'.<br>ARE YOU SURE? IF YES, PLEASE CLICK ON THE BUTTON BELOW.<br><br></div><div class="row"><div class="mb-3"><button class="btn btn-lg btn-primary btn-block" type="button" onclick="confirm_uninstall(\''+additional+'\')">Uninstall</button></div></div></form></fieldset>';
|
||||
data = '<div class="confirm"><form action="#" method="post"><div class="row">You are going to uninstall '+additional.toUpperCase()+'.<br>Are you sure? If yes, please click on the Uninstall button below.<br><br></div><div class="row buttons"><div class="mb-3"><button class="btn" type="button" onclick="confirm_uninstall(\''+additional+'\')">Uninstall</button></div><div class="mb-3" style="margin-left:200px;float:"><button class="btn" onclick="reinstall(\''+additional+'\',\''+additional+'\')">Cancel</button></div></div></form></div>';
|
||||
jQuery("#"+additional).html(data);
|
||||
jQuery("#popupText").html(data); // manage2
|
||||
}
|
||||
|
||||
function confirm_uninstall(additional) {
|
||||
jQuery("#"+additional).html('Loading...');
|
||||
jQuery("#"+additional).html('<div class="loading">Loading...</div>');
|
||||
jQuery("#popupText").html('<div class="loading">Loading...</div>'); // manage2
|
||||
var url = 'scan.php?op=uninstall&additional='+additional;
|
||||
jQuery.get(url, function(data) {
|
||||
console.log('uninstall '+additional+': '+data);
|
||||
if (data!="") {
|
||||
jQuery("#"+additional).html(data);
|
||||
jQuery("#popupText").html(data); // manage2
|
||||
setTimeout(check_uninstall, 1000, additional);
|
||||
}
|
||||
});
|
||||
@@ -284,6 +312,7 @@ function update_deployment(additional) {
|
||||
console.log('edit '+additional+': '+data);
|
||||
if (data!="") {
|
||||
jQuery("#"+additional).html(data);
|
||||
jQuery("#popupText").html(data); // manage2
|
||||
setTimeout(check_deployment, 1000, additional);
|
||||
}
|
||||
});
|
||||
@@ -315,7 +344,7 @@ function check_deployment(additional) {
|
||||
var url = 'scan.php?op=check_deployment&additional='+additional;
|
||||
jQuery.get(url, function(data) {
|
||||
console.log('check_deployment '+additional);
|
||||
//console.log('check_deployment data: '+data);
|
||||
console.log('check_deployment data: '+data);
|
||||
if (data!="") {
|
||||
jQuery("#"+additional).html(data);
|
||||
jQuery("#popupText").html(data); // manage2
|
||||
@@ -337,6 +366,7 @@ function deploy(additional) {
|
||||
console.log('deploy '+additional+': '+data);
|
||||
if (data!="") {
|
||||
jQuery("#"+additional).html(data);
|
||||
jQuery("#popupText").html(data); // manage2
|
||||
setTimeout(check_deployment, 1000, additional);
|
||||
}
|
||||
});
|
||||
@@ -355,6 +385,7 @@ function redeploy(additional) {
|
||||
console.log('redeploy '+additional+': '+data);
|
||||
if (data!="") {
|
||||
jQuery("#"+additional).html(data);
|
||||
jQuery("#popupText").html(data); // manage2
|
||||
setTimeout(check_deployment, 1000, additional);
|
||||
}
|
||||
});
|
||||
@@ -383,53 +414,52 @@ function get_services() {
|
||||
|
||||
function get_proxy_html() {
|
||||
proxy_html = `
|
||||
<fieldset>
|
||||
<legend>Enable proxy</legend>
|
||||
<div class="input-group">
|
||||
<form class="form-install" action="#" method="post" id="save_vpn">
|
||||
<div class="app-fields">
|
||||
<div class="app-field">
|
||||
<div class="row">
|
||||
<div class="mb-3">
|
||||
<label for="vpn_domain">Please add domain url to download the VPN hash from (default: https://portal.safebox.network):</label>
|
||||
<input type="text" class="form-control" name="VPN_DOMAIN" id="vpn_domain" value="https://portal.safebox.network">
|
||||
<div class="invalid-feedback">
|
||||
Please enter a valid domain.
|
||||
</div>
|
||||
<label for="vpn_domain">Please add domain url to download the VPN hash from:</label>
|
||||
<div class="input-container">
|
||||
<input type="text" class="form-control" name="VPN_DOMAIN" id="vpn_domain" value="https://portal.safebox.network" size="40">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="app-field">
|
||||
<div class="row">
|
||||
<div class="mb-3">
|
||||
<label for="vpn_pass">Please type in the generated VPN passkey (8 digits):</label>
|
||||
<label for="vpn_pass">Please type in the generated VPN passkey (8 digits):</label>
|
||||
<div class="input-container">
|
||||
<input type="text" class="form-control" name="VPN_PASS" id="vpn_pass" value="" maxlength="8" size="10">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="app-field">
|
||||
<div class="row">
|
||||
<div class="mb-3">
|
||||
<label for="letsencrypt_mail">Please add the letsencrypt mail address:</label>
|
||||
<label for="letsencrypt_mail">Please add the letsencrypt mail address:</label>
|
||||
<div class="input-container">
|
||||
<input type="email" class="form-control" name="LETSENCRYPT_MAIL" id="letsencrypt_mail" value="">
|
||||
<div class="invalid-feedback">
|
||||
Please enter a valid email.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="app-field">
|
||||
<div class="row">
|
||||
<div class="mb-3">
|
||||
<label for="letsencrypt_servername">Please add letsencrypt server name (default is letsencrypt but you can add zerossl too):</label>
|
||||
<label for="letsencrypt_servername">Please add letsencrypt server name (default is letsencrypt but you can add zerossl too):</label>
|
||||
<div class="input-container">
|
||||
<input type="text" class="form-control" name="LETSENCRYPT_SERVERNAME" id="letsencrypt_servername" value="letsencrypt">
|
||||
</div>
|
||||
</div>
|
||||
<div class="row buttons">
|
||||
<div class="mb-3">
|
||||
<button class="btn btn-lg btn-primary btn-block" type="button" id="vpn_save_btn"> Save </button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</fieldset>
|
||||
<div class="row buttons">
|
||||
<div class="mb-3">
|
||||
<button class="btn btn-lg btn-primary btn-block" type="button" id="vpn_save_btn"> Save </button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<script>
|
||||
jQuery('#vpn_save_btn').click(function() {
|
||||
console.log('vpn save');
|
||||
jQuery('#vpn').html('Loading...');
|
||||
save_vpn();
|
||||
jQuery('#vpn').html('<div class="loading">VPN start process in progress. Please wait...</div>');
|
||||
});
|
||||
</script>
|
||||
`;
|
||||
@@ -457,9 +487,19 @@ function get_containers() {
|
||||
});
|
||||
}
|
||||
|
||||
function get_version() {
|
||||
var url = 'scan.php?op=version';
|
||||
jQuery.get(url, function(data) {
|
||||
console.log('version: '+data);
|
||||
jQuery('#logo').attr('title',data);
|
||||
});
|
||||
}
|
||||
|
||||
jQuery(document).ready(function(){
|
||||
|
||||
get_version();
|
||||
get_repositories();
|
||||
get_deployments();
|
||||
get_system();
|
||||
check_vpn();
|
||||
|
||||
@@ -490,19 +530,19 @@ jQuery(document).ready(function(){
|
||||
});
|
||||
|
||||
jQuery('#update_btn').click(function() {
|
||||
jQuery('#updates').html('Looking for updates... Please wait...');
|
||||
jQuery('#updates').html('<div class="loading">Looking for updates...</div>');
|
||||
get_updates();
|
||||
});
|
||||
|
||||
jQuery('#add_repo').submit(function() {
|
||||
jQuery('#repositories').html('Loading...');
|
||||
jQuery('#repositories').html('<div class="loading">Loading...</div>');
|
||||
add_repository();
|
||||
return false;
|
||||
});
|
||||
|
||||
jQuery('#save_vpn').submit(function() {
|
||||
save_vpn();
|
||||
jQuery('#vpn').html('Loading...');
|
||||
jQuery('#vpn').html('<div class="loading">Loading...</div>');
|
||||
return false;
|
||||
});
|
||||
|
||||
|
||||
6
img/apps1.svg
Normal file
6
img/apps1.svg
Normal file
@@ -0,0 +1,6 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M11.9998 13.2999C11.8698 13.2999 11.7398 13.2699 11.6198 13.1999L2.78985 8.0899C2.42985 7.8799 2.30983 7.41987 2.51983 7.05987C2.72983 6.69987 3.17983 6.57985 3.54983 6.78985L11.9998 11.6799L20.3998 6.81988C20.7598 6.60988 21.2198 6.7399 21.4298 7.0899C21.6398 7.4499 21.5098 7.90987 21.1598 8.11987L12.3899 13.1999C12.2599 13.2599 12.1298 13.2999 11.9998 13.2999Z" fill="#7C7D81"/>
|
||||
<path d="M12 22.36C11.59 22.36 11.25 22.02 11.25 21.61V12.54C11.25 12.13 11.59 11.79 12 11.79C12.41 11.79 12.75 12.13 12.75 12.54V21.61C12.75 22.02 12.41 22.36 12 22.36Z" fill="#7C7D81"/>
|
||||
<path d="M12.0001 22.75C11.1201 22.75 10.2501 22.56 9.56012 22.18L4.22012 19.21C2.77012 18.41 1.64014 16.48 1.64014 14.82V9.16998C1.64014 7.50998 2.77012 5.59002 4.22012 4.78002L9.56012 1.82C10.9301 1.06 13.0701 1.06 14.4401 1.82L19.7801 4.78997C21.2301 5.58997 22.3601 7.51999 22.3601 9.17999V14.83C22.3601 16.49 21.2301 18.41 19.7801 19.22L14.4401 22.18C13.7501 22.56 12.8801 22.75 12.0001 22.75ZM12.0001 2.74999C11.3701 2.74999 10.7501 2.88 10.2901 3.13L4.95013 6.09997C3.99013 6.63997 3.14014 8.06999 3.14014 9.17999V14.83C3.14014 15.93 3.99013 17.37 4.95013 17.91L10.2901 20.88C11.2001 21.39 12.8001 21.39 13.7101 20.88L19.0501 17.91C20.0101 17.37 20.8601 15.94 20.8601 14.83V9.17999C20.8601 8.07999 20.0101 6.63997 19.0501 6.09997L13.7101 3.13C13.2501 2.88 12.6301 2.74999 12.0001 2.74999Z" fill="#7C7D81"/>
|
||||
<path d="M17.0002 13.9905C16.5902 13.9905 16.2502 13.6505 16.2502 13.2405V10.0206L7.13018 4.76055C6.77018 4.55055 6.65016 4.09054 6.86016 3.74054C7.07016 3.38054 7.52018 3.26052 7.88018 3.47052L17.3702 8.95056C17.6002 9.08056 17.7502 9.33052 17.7502 9.60052V13.2606C17.7502 13.6506 17.4102 13.9905 17.0002 13.9905Z" fill="#7C7D81"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.8 KiB |
6
img/apps2.svg
Normal file
6
img/apps2.svg
Normal file
@@ -0,0 +1,6 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M11.9998 13.2999C11.8698 13.2999 11.7398 13.2699 11.6198 13.1999L2.78985 8.0899C2.42985 7.8799 2.30983 7.41987 2.51983 7.05987C2.72983 6.69987 3.17983 6.57985 3.54983 6.78985L11.9998 11.6799L20.3998 6.81988C20.7598 6.60988 21.2198 6.7399 21.4298 7.0899C21.6398 7.4499 21.5098 7.90987 21.1598 8.11987L12.3899 13.1999C12.2599 13.2599 12.1298 13.2999 11.9998 13.2999Z" fill="#101010"/>
|
||||
<path d="M12 22.36C11.59 22.36 11.25 22.02 11.25 21.61V12.54C11.25 12.13 11.59 11.79 12 11.79C12.41 11.79 12.75 12.13 12.75 12.54V21.61C12.75 22.02 12.41 22.36 12 22.36Z" fill="#101010"/>
|
||||
<path d="M12.0001 22.75C11.1201 22.75 10.2501 22.56 9.56012 22.18L4.22012 19.21C2.77012 18.41 1.64014 16.48 1.64014 14.82V9.16998C1.64014 7.50998 2.77012 5.59002 4.22012 4.78002L9.56012 1.82C10.9301 1.06 13.0701 1.06 14.4401 1.82L19.7801 4.78997C21.2301 5.58997 22.3601 7.51999 22.3601 9.17999V14.83C22.3601 16.49 21.2301 18.41 19.7801 19.22L14.4401 22.18C13.7501 22.56 12.8801 22.75 12.0001 22.75ZM12.0001 2.74999C11.3701 2.74999 10.7501 2.88 10.2901 3.13L4.95013 6.09997C3.99013 6.63997 3.14014 8.06999 3.14014 9.17999V14.83C3.14014 15.93 3.99013 17.37 4.95013 17.91L10.2901 20.88C11.2001 21.39 12.8001 21.39 13.7101 20.88L19.0501 17.91C20.0101 17.37 20.8601 15.94 20.8601 14.83V9.17999C20.8601 8.07999 20.0101 6.63997 19.0501 6.09997L13.7101 3.13C13.2501 2.88 12.6301 2.74999 12.0001 2.74999Z" fill="#101010"/>
|
||||
<path d="M17.0002 13.9905C16.5902 13.9905 16.2502 13.6505 16.2502 13.2405V10.0206L7.13018 4.76055C6.77018 4.55055 6.65016 4.09054 6.86016 3.74054C7.07016 3.38054 7.52018 3.26052 7.88018 3.47052L17.3702 8.95056C17.6002 9.08056 17.7502 9.33052 17.7502 9.60052V13.2606C17.7502 13.6506 17.4102 13.9905 17.0002 13.9905Z" fill="#101010"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.8 KiB |
4
img/backup1.svg
Normal file
4
img/backup1.svg
Normal file
@@ -0,0 +1,4 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M18.32 12.7504H15C12.51 12.7504 11.25 11.3404 11.25 8.55045V5.68045C11.25 4.66045 11.37 3.20045 12.43 2.40045C13.32 1.74045 14.6 1.69045 16.49 2.24045C18.97 2.96045 21.04 5.03045 21.76 7.51045C22.31 9.39045 22.26 10.6804 21.6 11.5604C20.8 12.6304 19.34 12.7504 18.32 12.7504ZM14.28 3.36045C13.87 3.36045 13.55 3.44045 13.34 3.60045C12.95 3.89045 12.76 4.57045 12.76 5.68045V8.56045C12.76 10.8004 13.62 11.2604 15.01 11.2604H18.33C19.43 11.2604 20.11 11.0704 20.41 10.6804C20.76 10.2204 20.73 9.30045 20.34 7.95045C19.76 5.98045 18.06 4.27045 16.09 3.70045C15.35 3.47045 14.75 3.36045 14.28 3.36045Z" fill="#7C7D81"/>
|
||||
<path d="M11.0699 22.7503C10.5399 22.7503 9.99988 22.7103 9.45988 22.6203C5.36988 21.9603 2.03988 18.6403 1.37988 14.5503C0.529883 9.29032 3.91988 4.33032 9.10988 3.27032C9.51988 3.19032 9.90988 3.45032 9.99988 3.85032C10.0799 4.26032 9.81988 4.65032 9.41988 4.74032C5.02988 5.64032 2.14988 9.84032 2.87988 14.3103C3.43988 17.7703 6.24988 20.5803 9.70988 21.1403C14.1999 21.8603 18.3899 18.9703 19.2799 14.5603C19.3599 14.1503 19.7599 13.8903 20.1599 13.9703C20.5699 14.0503 20.8299 14.4503 20.7499 14.8503C19.7999 19.5203 15.7199 22.7503 11.0699 22.7503Z" fill="#7C7D81"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
4
img/backup2.svg
Normal file
4
img/backup2.svg
Normal file
@@ -0,0 +1,4 @@
|
||||
<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M1.05105 10.4495C1.05105 15.5708 5.03278 19.5654 10.0865 19.6166C15.1913 19.6166 19.2241 15.6732 19.2241 10.5519C19.2241 5.43059 15.2423 1.38477 10.1886 1.38477C5.13487 1.38477 1.05105 5.32816 1 10.5007L1.05105 10.4495Z" stroke="#101010" stroke-width="1.5" stroke-miterlimit="10"/>
|
||||
<path d="M12.0262 6.45442C11.5158 7.1714 11.4647 7.99081 12.0262 8.50293C12.5367 9.06628 13.3535 9.06628 14.1702 8.50293C14.936 9.78326 14.8849 12.3951 12.9451 13.9315C11.2095 15.3143 8.55498 15.1606 6.97249 13.6242C5.39001 12.0366 5.23687 9.42477 6.61516 7.63231C8.14659 5.68622 10.75 5.68622 12.0262 6.4032V6.45442Z" fill="#101010"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 730 B |
|
Before Width: | Height: | Size: 3.2 KiB After Width: | Height: | Size: 3.2 KiB |
4
img/disk1.svg
Normal file
4
img/disk1.svg
Normal file
@@ -0,0 +1,4 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M18.32 12.7504H15C12.51 12.7504 11.25 11.3404 11.25 8.55045V5.68045C11.25 4.66045 11.37 3.20045 12.43 2.40045C13.32 1.74045 14.6 1.69045 16.49 2.24045C18.97 2.96045 21.04 5.03045 21.76 7.51045C22.31 9.39045 22.26 10.6804 21.6 11.5604C20.8 12.6304 19.34 12.7504 18.32 12.7504ZM14.28 3.36045C13.87 3.36045 13.55 3.44045 13.34 3.60045C12.95 3.89045 12.76 4.57045 12.76 5.68045V8.56045C12.76 10.8004 13.62 11.2604 15.01 11.2604H18.33C19.43 11.2604 20.11 11.0704 20.41 10.6804C20.76 10.2204 20.73 9.30045 20.34 7.95045C19.76 5.98045 18.06 4.27045 16.09 3.70045C15.35 3.47045 14.75 3.36045 14.28 3.36045Z" fill="#7C7D81"/>
|
||||
<path d="M11.0699 22.7503C10.5399 22.7503 9.99988 22.7103 9.45988 22.6203C5.36988 21.9603 2.03988 18.6403 1.37988 14.5503C0.529883 9.29032 3.91988 4.33032 9.10988 3.27032C9.51988 3.19032 9.90988 3.45032 9.99988 3.85032C10.0799 4.26032 9.81988 4.65032 9.41988 4.74032C5.02988 5.64032 2.14988 9.84032 2.87988 14.3103C3.43988 17.7703 6.24988 20.5803 9.70988 21.1403C14.1999 21.8603 18.3899 18.9703 19.2799 14.5603C19.3599 14.1503 19.7599 13.8903 20.1599 13.9703C20.5699 14.0503 20.8299 14.4503 20.7499 14.8503C19.7999 19.5203 15.7199 22.7503 11.0699 22.7503Z" fill="#7C7D81"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
4
img/disk2.svg
Normal file
4
img/disk2.svg
Normal file
@@ -0,0 +1,4 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M18.32 12.7504H15C12.51 12.7504 11.25 11.3404 11.25 8.55045V5.68045C11.25 4.66045 11.37 3.20045 12.43 2.40045C13.32 1.74045 14.6 1.69045 16.49 2.24045C18.97 2.96045 21.04 5.03045 21.76 7.51045C22.31 9.39045 22.26 10.6804 21.6 11.5604C20.8 12.6304 19.34 12.7504 18.32 12.7504ZM14.28 3.36045C13.87 3.36045 13.55 3.44045 13.34 3.60045C12.95 3.89045 12.76 4.57045 12.76 5.68045V8.56045C12.76 10.8004 13.62 11.2604 15.01 11.2604H18.33C19.43 11.2604 20.11 11.0704 20.41 10.6804C20.76 10.2204 20.73 9.30045 20.34 7.95045C19.76 5.98045 18.06 4.27045 16.09 3.70045C15.35 3.47045 14.75 3.36045 14.28 3.36045Z" fill="#101010"/>
|
||||
<path d="M11.0699 22.7503C10.5399 22.7503 9.99988 22.7103 9.45988 22.6203C5.36988 21.9603 2.03988 18.6403 1.37988 14.5503C0.529883 9.29032 3.91988 4.33032 9.10988 3.27032C9.51988 3.19032 9.90988 3.45032 9.99988 3.85032C10.0799 4.26032 9.81988 4.65032 9.41988 4.74032C5.02988 5.64032 2.14988 9.84032 2.87988 14.3103C3.43988 17.7703 6.24988 20.5803 9.70988 21.1403C14.1999 21.8603 18.3899 18.9703 19.2799 14.5603C19.3599 14.1503 19.7599 13.8903 20.1599 13.9703C20.5699 14.0503 20.8299 14.4503 20.7499 14.8503C19.7999 19.5203 15.7199 22.7503 11.0699 22.7503Z" fill="#101010"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
BIN
img/grey-box.png
Normal file
BIN
img/grey-box.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
14
img/logo.svg
Normal file
14
img/logo.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 14 KiB |
BIN
img/monitor.jpg
Normal file
BIN
img/monitor.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 50 KiB |
4
img/monitor1.svg
Normal file
4
img/monitor1.svg
Normal file
@@ -0,0 +1,4 @@
|
||||
<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M1.05105 10.4495C1.05105 15.5708 5.03278 19.5654 10.0865 19.6166C15.1913 19.6166 19.2241 15.6732 19.2241 10.5519C19.2241 5.43059 15.2423 1.38477 10.1886 1.38477C5.13487 1.38477 1.05105 5.32816 1 10.5007L1.05105 10.4495Z" stroke="#7C7D81" stroke-width="1.5" stroke-miterlimit="10"/>
|
||||
<path d="M12.0262 6.45442C11.5158 7.1714 11.4647 7.99081 12.0262 8.50293C12.5367 9.06628 13.3535 9.06628 14.1702 8.50293C14.936 9.78326 14.8849 12.3951 12.9451 13.9315C11.2095 15.3143 8.55498 15.1606 6.97249 13.6242C5.39001 12.0366 5.23687 9.42477 6.61516 7.63231C8.14659 5.68622 10.75 5.68622 12.0262 6.4032V6.45442Z" fill="#7C7D81"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 730 B |
4
img/monitor2.svg
Normal file
4
img/monitor2.svg
Normal file
@@ -0,0 +1,4 @@
|
||||
<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M1.05105 10.4495C1.05105 15.5708 5.03278 19.5654 10.0865 19.6166C15.1913 19.6166 19.2241 15.6732 19.2241 10.5519C19.2241 5.43059 15.2423 1.38477 10.1886 1.38477C5.13487 1.38477 1.05105 5.32816 1 10.5007L1.05105 10.4495Z" stroke="#101010" stroke-width="1.5" stroke-miterlimit="10"/>
|
||||
<path d="M12.0262 6.45442C11.5158 7.1714 11.4647 7.99081 12.0262 8.50293C12.5367 9.06628 13.3535 9.06628 14.1702 8.50293C14.936 9.78326 14.8849 12.3951 12.9451 13.9315C11.2095 15.3143 8.55498 15.1606 6.97249 13.6242C5.39001 12.0366 5.23687 9.42477 6.61516 7.63231C8.14659 5.68622 10.75 5.68622 12.0262 6.4032V6.45442Z" fill="#101010"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 730 B |
BIN
img/off.png
BIN
img/off.png
Binary file not shown.
|
Before Width: | Height: | Size: 684 B After Width: | Height: | Size: 914 B |
BIN
img/on.png
BIN
img/on.png
Binary file not shown.
|
Before Width: | Height: | Size: 701 B After Width: | Height: | Size: 992 B |
4
img/settings1.svg
Normal file
4
img/settings1.svg
Normal file
@@ -0,0 +1,4 @@
|
||||
<svg width="19" height="21" viewBox="0 0 19 21" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M18.0632 10.6142C18.0632 11.7655 18.0632 12.8209 18.0632 13.9722C18.0632 15.4113 17.5238 16.4667 16.3551 17.1383C14.5571 18.2896 12.6693 19.4409 10.8713 20.4963C9.70261 21.1679 8.53391 21.1679 7.36523 20.4963C5.56726 19.345 3.76928 18.2896 1.97131 17.1383C0.80263 16.3708 0.17334 15.3154 0.17334 13.8763C0.17334 11.6696 0.17334 9.46292 0.17334 7.16031C0.17334 5.72118 0.80263 4.66579 1.97131 3.89825C3.76928 2.74694 5.56726 1.69158 7.36523 0.540273C8.53391 -0.131322 9.70261 -0.227264 10.8713 0.540273C12.6693 1.69158 14.5571 2.74694 16.3551 3.89825C17.5238 4.56985 18.0632 5.72118 18.0632 7.16031C18.0632 8.31162 18.0632 9.36698 18.0632 10.5183V10.6142ZM16.7147 10.6142C16.7147 9.4629 16.7147 8.31159 16.7147 7.25623C16.7147 6.39275 16.3551 5.72115 15.7258 5.33738C13.9279 4.18608 12.0399 3.03479 10.1521 1.88349C9.43288 1.49972 8.80365 1.49972 8.08446 1.88349C6.28649 3.03479 4.48843 4.09016 2.60056 5.24147C1.88137 5.72118 1.52182 6.39275 1.52182 7.25623C1.52182 9.4629 1.52182 11.7655 1.52182 13.9722C1.52182 14.8357 1.88137 15.5072 2.60056 15.9869C4.39853 17.1383 6.19659 18.1936 8.08446 19.3449C8.80365 19.8246 9.52275 19.7287 10.2419 19.3449C12.0399 18.1936 13.838 17.1383 15.7258 15.9869C16.445 15.5072 16.8046 14.9316 16.8046 14.0681C16.8046 12.9168 16.8046 11.8614 16.8046 10.7101L16.7147 10.6142Z" fill="#7C7D81"/>
|
||||
<path d="M9.16305 14.7404C7.00548 14.7404 5.29736 12.9174 5.29736 10.6148C5.29736 8.31221 7.00548 6.48926 9.16305 6.48926C11.3206 6.48926 13.0287 8.31221 13.0287 10.6148C13.0287 12.9174 11.3206 14.7404 9.16305 14.7404ZM11.6803 10.6148C11.6803 9.17569 10.6014 7.92839 9.16305 7.92839C7.81457 7.92839 6.64584 9.07974 6.64584 10.6148C6.64584 12.054 7.72467 13.3012 9.16305 13.3012C10.5115 13.3012 11.6803 12.1499 11.6803 10.6148Z" fill="#7C7D81"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.8 KiB |
4
img/settings2.svg
Normal file
4
img/settings2.svg
Normal file
@@ -0,0 +1,4 @@
|
||||
<svg width="19" height="21" viewBox="0 0 19 21" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M18.0632 10.6142C18.0632 11.7655 18.0632 12.8209 18.0632 13.9722C18.0632 15.4113 17.5238 16.4667 16.3551 17.1383C14.5571 18.2896 12.6693 19.4409 10.8713 20.4963C9.70261 21.1679 8.53391 21.1679 7.36523 20.4963C5.56726 19.345 3.76928 18.2896 1.97131 17.1383C0.80263 16.3708 0.17334 15.3154 0.17334 13.8763C0.17334 11.6696 0.17334 9.46292 0.17334 7.16031C0.17334 5.72118 0.80263 4.66579 1.97131 3.89825C3.76928 2.74694 5.56726 1.69158 7.36523 0.540273C8.53391 -0.131322 9.70261 -0.227264 10.8713 0.540273C12.6693 1.69158 14.5571 2.74694 16.3551 3.89825C17.5238 4.56985 18.0632 5.72118 18.0632 7.16031C18.0632 8.31162 18.0632 9.36698 18.0632 10.5183V10.6142ZM16.7147 10.6142C16.7147 9.4629 16.7147 8.31159 16.7147 7.25623C16.7147 6.39275 16.3551 5.72115 15.7258 5.33738C13.9279 4.18608 12.0399 3.03479 10.1521 1.88349C9.43288 1.49972 8.80365 1.49972 8.08446 1.88349C6.28649 3.03479 4.48843 4.09016 2.60056 5.24147C1.88137 5.72118 1.52182 6.39275 1.52182 7.25623C1.52182 9.4629 1.52182 11.7655 1.52182 13.9722C1.52182 14.8357 1.88137 15.5072 2.60056 15.9869C4.39853 17.1383 6.19659 18.1936 8.08446 19.3449C8.80365 19.8246 9.52275 19.7287 10.2419 19.3449C12.0399 18.1936 13.838 17.1383 15.7258 15.9869C16.445 15.5072 16.8046 14.9316 16.8046 14.0681C16.8046 12.9168 16.8046 11.8614 16.8046 10.7101L16.7147 10.6142Z" fill="#101010"/>
|
||||
<path d="M9.16305 14.7404C7.00548 14.7404 5.29736 12.9174 5.29736 10.6148C5.29736 8.31221 7.00548 6.48926 9.16305 6.48926C11.3206 6.48926 13.0287 8.31221 13.0287 10.6148C13.0287 12.9174 11.3206 14.7404 9.16305 14.7404ZM11.6803 10.6148C11.6803 9.17569 10.6014 7.92839 9.16305 7.92839C7.81457 7.92839 6.64584 9.07974 6.64584 10.6148C6.64584 12.054 7.72467 13.3012 9.16305 13.3012C10.5115 13.3012 11.6803 12.1499 11.6803 10.6148Z" fill="#101010"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.8 KiB |
BIN
img/yellow-box.png
Normal file
BIN
img/yellow-box.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
13
index.html
13
index.html
@@ -3,21 +3,26 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
|
||||
<meta http-equiv="Pragma" content="no-cache" />
|
||||
<meta http-equiv="Expires" content="0" />
|
||||
<title>Safebox installer</title>
|
||||
<style>
|
||||
body, html {
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
iframe {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
border: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<iframe src="scan.html"></iframe>
|
||||
<iframe src="scan.html?t=1"></iframe>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
257
install.html
257
install.html
@@ -1,175 +1,172 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<!DOCTYPE html>
|
||||
<html lang="hu">
|
||||
<head>
|
||||
<!-- Required meta tags -->
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<title>INSTALLER TOOL</title>
|
||||
<!-- Bootstrap CSS -->
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.2.1/dist/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
|
||||
<!-- Custom styles for this template -->
|
||||
<link href="installer.css?t=3" rel="stylesheet">
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
|
||||
<meta http-equiv="Pragma" content="no-cache" />
|
||||
<meta http-equiv="Expires" content="0" />
|
||||
<title>Safebox - INSTALLER TOOL</title>
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Switzer:ital,wght@0,300;0,400;0,500;0,600;1,400&display=swap"/>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"/>
|
||||
<link rel="stylesheet" href="style.css?t=1" />
|
||||
</head>
|
||||
<body id="installer" class="text-center">
|
||||
<div class="container-fluid">
|
||||
<div class="col-md-12">
|
||||
<body id="installer">
|
||||
<div class="main" style="max-width:1000px;margin:0px auto;">
|
||||
<div id="myAppsContainer">
|
||||
<div class="logo">
|
||||
<img src="/img/logo.svg" alt="Safebox"/>
|
||||
<span>Safebox</span>
|
||||
</div>
|
||||
<h3 style="text-align:center">No any previous deployed environment has found</h3>
|
||||
<div class="main-header">
|
||||
<h1>Base settings</h1>
|
||||
</div>
|
||||
|
||||
<form class="form-install" action="install.php" method="post">
|
||||
|
||||
<h1>No any previous deployed environment found</h1>
|
||||
|
||||
<fieldset>
|
||||
<legend>Base settings</legend>
|
||||
<div class="row">
|
||||
<div class="mb-3">
|
||||
<label for="user_auth">User auth (homeguard) enable?</label>
|
||||
<!-- base settings -->
|
||||
<div class="input-row">
|
||||
<label for="user_auth">User auth (homeguard) enable?</label>
|
||||
<div class="input-container">
|
||||
<select class="custom-select d-block w-100" name="USER_AUTH" id="user_auth">
|
||||
<option value="yes">Yes</option>
|
||||
<option value="no" selected>No</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="div_user_auth" class="hidden">
|
||||
<div class="row">
|
||||
<div class="mb-3">
|
||||
<div class="input-row">
|
||||
<label for="auth_username">Username:</label>
|
||||
<div class="input-container">
|
||||
<input type="text" class="form-control" name="AUTH_USERNAME" id="auth_username" value="" maxlength="20" size="20">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="mb-3">
|
||||
<div class="input-row">
|
||||
<label for="auth_password">Password:</label>
|
||||
<div class="input-container">
|
||||
<input type="text" class="form-control" name="AUTH_PASSWORD" id="auth_password" value="" maxlength="20" size="20">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="mb-3">
|
||||
<div class="input-row">
|
||||
<label for="auth_role">Role:</label>
|
||||
<div class="input-container">
|
||||
<select class="custom-select d-block w-100" name="AUTH_ROLE" id="auth_role">
|
||||
<option value="admin">Admin</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="mb-3">
|
||||
<label for="vpn">Proxy enable?</label>
|
||||
<div class="input-row">
|
||||
<label for="vpn">Proxy enable?</label>
|
||||
<div class="input-container">
|
||||
<select class="custom-select d-block w-100" name="VPN_PROXY" id="vpn">
|
||||
<option value="yes">Yes</option>
|
||||
<option value="no" selected>No</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div id="div_vpn" class="hidden">
|
||||
<div class="row">
|
||||
<div class="mb-3">
|
||||
<label for="vpn_domain">Please add domain url to download the VPN hash from (default: https://portal.safebox.network):</label>
|
||||
<input type="text" class="form-control" name="VPN_DOMAIN" id="vpn_domain" value="https://portal.safebox.network">
|
||||
<div class="invalid-feedback">
|
||||
Please enter a valid domain.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="mb-3">
|
||||
<label for="vpn_pass">Please type in the generated VPN passkey (8 digits):</label>
|
||||
</div>
|
||||
<div id="div_vpn1" class="hidden">
|
||||
<div class="input-row">
|
||||
<label for="vpn_pass">Please type in the generated VPN passkey (8 digits):</label>
|
||||
<div class="input-container">
|
||||
<input type="text" class="form-control" name="VPN_PASS" id="vpn_pass" value="" maxlength="8" size="10">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="mb-3">
|
||||
<label for="letsencrypt_mail">Please add the letsencrypt mail address:</label>
|
||||
<div class="input-row">
|
||||
<label for="letsencrypt_mail">Please add the letsencrypt mail address:</label>
|
||||
<div class="input-container">
|
||||
<input type="email" class="form-control" name="LETSENCRYPT_MAIL" id="letsencrypt_mail" value="">
|
||||
<div class="invalid-feedback">
|
||||
Please enter a valid email.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="mb-3">
|
||||
<label for="letsencrypt_servername">Please add letsencrypt server name (default is letsencrypt but you can add zerossl too):</label>
|
||||
<input type="text" class="form-control" name="LETSENCRYPT_SERVERNAME" id="letsencrypt_servername" value="letsencrypt">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="mb-3">
|
||||
<label for="diagnostic">Diagnostic mode enable?</label>
|
||||
<div class="input-row">
|
||||
<label for="diagnostic">Diagnostic mode enable?</label>
|
||||
<div class="input-container">
|
||||
<select class="custom-select d-block w-100" name="DIAGNOSTIC" id="diagnostic">
|
||||
<option value="yes">Yes</option>
|
||||
<option value="no" selected>No</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend><a href="javascript:void()" id="advanced">Advanced settings</a></legend>
|
||||
<!-- base settings end -->
|
||||
<br>
|
||||
<br>
|
||||
<div class="main-header">
|
||||
<h1 id="advanced" style="cursor:pointer">Advanced settings</h1>
|
||||
</div>
|
||||
<!-- advanced settings -->
|
||||
<div id="advanced_div" style="display:none">
|
||||
<div class="row">
|
||||
<div class="mb-3">
|
||||
<div id="div_vpn2" class="hidden">
|
||||
<div class="input-row">
|
||||
<label for="vpn_domain">Please add domain url to download the VPN hash from:</label>
|
||||
<div class="input-container">
|
||||
<input type="text" class="form-control" name="VPN_DOMAIN" id="vpn_domain" value="https://portal.safebox.network" placeholder="https://portal.safebox.network" size="40">
|
||||
</div>
|
||||
</div>
|
||||
<div class="input-row">
|
||||
<label for="letsencrypt_servername">Please add letsencrypt server name (default is letsencrypt but you can add zerossl too):</label>
|
||||
<div class="input-container">
|
||||
<input type="text" class="form-control" name="LETSENCRYPT_SERVERNAME" id="letsencrypt_servername" value="letsencrypt" placeholder="letsencrypt">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="input-row">
|
||||
<label for="registry">Please fill in the docker registry name (default:safebox):</label>
|
||||
<input type="registry" class="form-control" name="DOCKER_REGISTRY_URL" id="registry" value="safebox" required>
|
||||
<div class="invalid-feedback">
|
||||
Please enter a valid registry url.
|
||||
<div class="input-container">
|
||||
<input type="registry" class="form-control" name="DOCKER_REGISTRY_URL" id="registry" value="safebox" placeholder="safebox" required>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="mb-3">
|
||||
</div>
|
||||
<div class="input-row">
|
||||
<label for="smarthost">Smarthost proxy?</label>
|
||||
<select class="custom-select d-block w-100" name="SMARTHOST_PROXY" id="smarthost">
|
||||
<option value="yes" selected>Yes</option>
|
||||
<option value="no">No</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div id="div_smarthost">
|
||||
<div class="row">
|
||||
<div class="mb-3">
|
||||
<label for="domain">Please fill in the domain name</label>
|
||||
<input type="domain" class="form-control" name="DOMAIN" id="domain" value="localhost">
|
||||
<div class="invalid-feedback">
|
||||
Please enter a valid domain.
|
||||
<div class="input-container">
|
||||
<select class="custom-select d-block w-100" name="SMARTHOST_PROXY" id="smarthost">
|
||||
<option value="yes" selected>Yes</option>
|
||||
<option value="no">No</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="mb-3">
|
||||
<label for="local_backend">Would you like to run local backend?</label>
|
||||
<select class="custom-select d-block w-100" name="LOCAL_BACKEND" id="local_backend">
|
||||
<option value="yes">Yes</option>
|
||||
<option value="no" selected>No</option>
|
||||
</select>
|
||||
</div>
|
||||
<div id="div_smarthost">
|
||||
<div class="input-row">
|
||||
<label for="domain">Please fill in the domain name</label>
|
||||
<div class="input-container">
|
||||
<input type="domain" class="form-control" name="DOMAIN" id="domain" value="localhost">
|
||||
</div>
|
||||
</div>
|
||||
<div class="input-row">
|
||||
<label for="local_backend">Would you like to run local backend?</label>
|
||||
<div class="input-container">
|
||||
<select class="custom-select d-block w-100" name="LOCAL_BACKEND" id="local_backend">
|
||||
<option value="yes">Yes</option>
|
||||
<option value="no" selected>No</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="mb-3">
|
||||
<div class="input-row">
|
||||
<label for="localproxy">Local proxy?</label>
|
||||
<select class="custom-select d-block w-100" name="LOCAL_PROXY" id="localproxy">
|
||||
<option value="yes" selected>Yes</option>
|
||||
<option value="no">No</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="mb-3">
|
||||
<div class="input-container">
|
||||
<select class="custom-select d-block w-100" name="LOCAL_PROXY" id="localproxy">
|
||||
<option value="yes" selected>Yes</option>
|
||||
<option value="no">No</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="input-row">
|
||||
<label for="cron">Cron?</label>
|
||||
<select class="custom-select d-block w-100" name="CRON" id="cron">
|
||||
<option value="yes">Yes</option>
|
||||
<option value="no">No</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="input-container">
|
||||
<select class="custom-select d-block w-100" name="CRON" id="cron">
|
||||
<option value="yes">Yes</option>
|
||||
<option value="no">No</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
<br>
|
||||
<button class="btn btn-lg btn-primary btn-block" type="submit">Start install</button>
|
||||
<!-- advanced settings end -->
|
||||
<button class="save-button" type="submit">Start install</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
<br>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Optional JavaScript -->
|
||||
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
|
||||
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
|
||||
@@ -204,8 +201,14 @@ jQuery(document).ready(function(){
|
||||
else jQuery('#div_user_auth').hide();
|
||||
});
|
||||
jQuery('select#vpn').click(function() {
|
||||
if (jQuery(this).val()=='yes') jQuery('#div_vpn').show();
|
||||
else jQuery('#div_vpn').hide();
|
||||
if (jQuery(this).val()=='yes') {
|
||||
jQuery('#div_vpn1').show();
|
||||
jQuery('#div_vpn2').show();
|
||||
}
|
||||
else {
|
||||
jQuery('#div_vpn1').hide();
|
||||
jQuery('#div_vpn2').hide();
|
||||
}
|
||||
});
|
||||
jQuery('select#discovery').click(function() {
|
||||
if (jQuery(this).val()=='yes') jQuery('#div_discover').show();
|
||||
|
||||
173
install.js
Normal file
173
install.js
Normal file
@@ -0,0 +1,173 @@
|
||||
|
||||
function updateProgress(percentage) {
|
||||
// Clamp percentage between 0 and 99.9 (never reach 100)
|
||||
percentage = Math.max(0, Math.min(99.9, percentage));
|
||||
|
||||
progressBar.style.width = percentage + '%';
|
||||
progressText.textContent = Math.round(percentage) + '%';
|
||||
currentProgress = percentage;
|
||||
}
|
||||
|
||||
function setProgress(percentage) {
|
||||
clearInterval(progressInterval);
|
||||
updateProgress(percentage);
|
||||
startProgress(60000);
|
||||
}
|
||||
|
||||
function startProgress(duration) {
|
||||
clearInterval(progressInterval);
|
||||
const startTime = Date.now() - (currentProgress / 100) * duration;
|
||||
|
||||
progressInterval = setInterval(() => {
|
||||
const elapsed = Date.now() - startTime;
|
||||
// Use exponential approach to 100% - gets slower as it approaches
|
||||
let progress = (1 - Math.exp(-4 * elapsed / duration)) * 100;
|
||||
|
||||
// Ensure it never reaches 100%
|
||||
progress = Math.min(progress, 99.9);
|
||||
|
||||
updateProgress(progress);
|
||||
|
||||
// Stop when we've been running for 60+ seconds
|
||||
if (elapsed >= duration) {
|
||||
clearInterval(progressInterval);
|
||||
}
|
||||
}, 100); // Update every 100ms
|
||||
}
|
||||
|
||||
function resetProgress() {
|
||||
clearInterval(progressInterval);
|
||||
updateProgress(0);
|
||||
}
|
||||
|
||||
// Example: Simulate loading with custom speeds
|
||||
function simulateLoading(duration = 3000) {
|
||||
clearInterval(progressInterval);
|
||||
const startTime = Date.now();
|
||||
|
||||
progressInterval = setInterval(() => {
|
||||
const elapsed = Date.now() - startTime;
|
||||
const progress = Math.min((elapsed / duration) * 100, 99.9);
|
||||
|
||||
updateProgress(progress);
|
||||
|
||||
if (elapsed >= duration) {
|
||||
clearInterval(progressInterval);
|
||||
}
|
||||
}, 16); // ~60fps
|
||||
}
|
||||
|
||||
function redirectToInstall() {
|
||||
setProgress(100);
|
||||
window.location.href = 'install.html?t='+Date.now();
|
||||
}
|
||||
|
||||
function redirectToManage() {
|
||||
setProgress(100);
|
||||
window.location.href = 'manage.html?t='+Date.now();
|
||||
}
|
||||
|
||||
function start_system() {
|
||||
var url = 'scan.php?op=system';
|
||||
$.get(url, function(data){
|
||||
console.log('start_system: '+data);
|
||||
if (data=='OK') {
|
||||
$("#info").html('Scanning for previous install. Please wait...');
|
||||
check_system();
|
||||
}
|
||||
else {
|
||||
$("#info").html('Scanning for previous install has aborted...');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function check_system() {
|
||||
var url = 'scan.php?op=check_system';
|
||||
$.get(url, function(data){
|
||||
console.log('check_system: '+data);
|
||||
if (data=='NEW') {
|
||||
$("#info").html('No previous install has found...');
|
||||
setTimeout(redirectToInstall, 3000);
|
||||
}
|
||||
else if (data=='EXISTS') {
|
||||
$("#info").html('Previous install has found...');
|
||||
setProgress(80);
|
||||
setTimeout(redirectToManage, 3000);
|
||||
}
|
||||
else if (data=='WAIT') {
|
||||
setTimeout(check_system, 1000);
|
||||
}
|
||||
else {
|
||||
// UNEXPECTED ERROR
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function check_redis() {
|
||||
|
||||
var url = 'scan.php?op=redis';
|
||||
$.get(url, function(data){
|
||||
console.log('check_redis: '+data);
|
||||
if (data=='OK') {
|
||||
$("#info").html('Redis server - OK');
|
||||
check_install();
|
||||
}
|
||||
else {
|
||||
$("#info").html('Redis server is not available...');
|
||||
setTimeout(check_redis, 1000);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function check_directory() {
|
||||
|
||||
var url = 'scan.php?op=directory';
|
||||
$.get(url, function(data){
|
||||
console.log('check_directory: '+data);
|
||||
if (data=='OK') {
|
||||
$("#info").html('Connection is ready - OK');
|
||||
check_install();
|
||||
}
|
||||
else {
|
||||
$("#info").html('Shared directory is not available...');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function check_interface() {
|
||||
|
||||
var url = 'scan.php?op=get_interface';
|
||||
$.get(url, function(data){
|
||||
console.log('check_interface: '+data);
|
||||
if (data=='redis') {
|
||||
check_redis();
|
||||
}
|
||||
else if (data=='directory') {
|
||||
check_directory();
|
||||
}
|
||||
else {
|
||||
$("#info").html('Invalid interface definition...');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function check_install() {
|
||||
|
||||
console.log('install: '+install);
|
||||
if (install==1) {
|
||||
var url = 'scan.php?op=check_install';
|
||||
$.get(url, function(data){
|
||||
console.log('check_install:'+data+' counter: '+counter);
|
||||
if (data=='INSTALLED') {
|
||||
redirectToManage();
|
||||
}
|
||||
else {
|
||||
counter+=1
|
||||
$("#info").html('Please wait ...');
|
||||
setTimeout(check_install, 1000);
|
||||
}
|
||||
});
|
||||
}
|
||||
else start_system(); // scan
|
||||
}
|
||||
|
||||
126
install.php
126
install.php
@@ -46,7 +46,7 @@ else {
|
||||
$header_text="Installing in progress... Please wait...";
|
||||
//$key = "install:".date("YmdHis");
|
||||
$key = "install";
|
||||
if (set_output($key,$json)) echo "OK";
|
||||
if (set_output($key,$json)) echo "";
|
||||
else echo "ERROR";
|
||||
}
|
||||
|
||||
@@ -61,106 +61,54 @@ echo "<pre>".$output."</pre>";
|
||||
//echo $output;
|
||||
*/
|
||||
|
||||
?>
|
||||
<!doctype html>
|
||||
?><!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<!-- Required meta tags -->
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<title>INSTALLER TOOL</title>
|
||||
<!-- Bootstrap CSS -->
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.2.1/dist/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
|
||||
<!-- Custom styles for this template -->
|
||||
<link href="installer.css?t=1" rel="stylesheet">
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Safebox - INSTALLER TOOL</title>
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Switzer:ital,wght@0,300;0,400;0,500;0,600;1,400&display=swap"/>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"/>
|
||||
<link rel="stylesheet" href="style.css?t=4" />
|
||||
</head>
|
||||
<body id="install" class="text-center">
|
||||
<div class="container-fluid">
|
||||
<div class="col-md-12">
|
||||
<h1><?php echo $header_text?></h1>
|
||||
<div id="redis"></div>
|
||||
<div id="response"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="main">
|
||||
<div id="myAppsContainer">
|
||||
<div class="logo" style="margin:100px 0px 20px 0px;">
|
||||
<img src="/img/logo.svg" alt="Safebox"/>
|
||||
<span>Safebox</span>
|
||||
</div>
|
||||
<div class="progress-box">
|
||||
<div class="progress-title"><?php echo $header_text?></div>
|
||||
<div class="progress-description" id="info"></div>
|
||||
<div class="progress-container-shadow">
|
||||
</div>
|
||||
<div class="progress-container">
|
||||
<div class="progress-bar" id="progressBar"></div>
|
||||
<div class="progress-text" id="progressText">0%</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Optional JavaScript -->
|
||||
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
|
||||
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.6/dist/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.2.1/dist/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
|
||||
<script src="install.js?t=7"></script>
|
||||
<script>
|
||||
$(function() {
|
||||
const progressBar = document.getElementById('progressBar');
|
||||
const progressText = document.getElementById('progressText');
|
||||
let currentProgress = 0;
|
||||
let progressInterval;
|
||||
let install = 1;
|
||||
|
||||
function redirectToManage() {
|
||||
window.location.href = 'manage.html';
|
||||
}
|
||||
// Initialize
|
||||
updateProgress(0);
|
||||
startProgress(90000);// 90 seconds
|
||||
|
||||
function check_install() {
|
||||
|
||||
var url = 'scan.php?op=check_install&key=<?php echo $key;?>';
|
||||
$.get(url, function(data){
|
||||
console.log('check_install:'+data+' counter: '+counter);
|
||||
if (data=='INSTALLED') {
|
||||
redirectToManage();
|
||||
}
|
||||
else {
|
||||
counter+=1
|
||||
$("#response").html('Please wait... ' + counter);
|
||||
setTimeout(check_install, 1000);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function check_redis() {
|
||||
|
||||
var url = 'scan.php?op=redis';
|
||||
$.get(url, function(data){
|
||||
console.log('check_redis: '+data);
|
||||
if (data=='OK') {
|
||||
$("#redis").html('Redis server - OK');
|
||||
check_install();
|
||||
}
|
||||
else {
|
||||
$("#redis").html('Redis server is not available...');
|
||||
setTimeout(check_redis, 1000);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function check_directory() {
|
||||
|
||||
var url = 'scan.php?op=directory';
|
||||
$.get(url, function(data){
|
||||
console.log('check_directory: '+data);
|
||||
if (data=='OK') {
|
||||
$("#redis").html('Connection is ready - OK');
|
||||
check_install();
|
||||
}
|
||||
else {
|
||||
$("#redis").html('Shared directory is not available...');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function check_interface() {
|
||||
|
||||
var url = 'scan.php?op=get_interface';
|
||||
$.get(url, function(data){
|
||||
console.log('check_interface: '+data);
|
||||
if (data=='redis') {
|
||||
check_redis();
|
||||
}
|
||||
else if (data=='directory') {
|
||||
check_directory();
|
||||
}
|
||||
else {
|
||||
$("#redis").html('Invalid interface definition...');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
check_interface();
|
||||
counter=0;
|
||||
});
|
||||
check_interface();
|
||||
counter=0;
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
514
manage.html
514
manage.html
@@ -1,157 +1,395 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<!DOCTYPE html>
|
||||
<html lang="hu">
|
||||
<head>
|
||||
<!-- Required meta tags -->
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<title>INSTALLER TOOL</title>
|
||||
<!-- Bootstrap CSS -->
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.2.1/dist/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
|
||||
<!-- Custom styles for this template -->
|
||||
<link href="installer.css?t=7" rel="stylesheet">
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
|
||||
<meta http-equiv="Pragma" content="no-cache" />
|
||||
<meta http-equiv="Expires" content="0" />
|
||||
<title>Safebox</title>
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Switzer:ital,wght@0,300;0,400;0,500;0,600;1,400&display=swap"/>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"/>
|
||||
<link rel="stylesheet" href="style.css?t=14" />
|
||||
</head>
|
||||
<body id="manage" class="text-center">
|
||||
<div class="container-fluid">
|
||||
<div class="col-md-12">
|
||||
|
||||
<h1>Found deployed environment</h1>
|
||||
|
||||
<div style="text-align:left;float:left;width:33%">
|
||||
<a href="javascript:void()" id="vpn_btn">VPN</a>
|
||||
Status:
|
||||
<span id="vpn_on" class="hidden green"><b>ON</b></span>
|
||||
<span id="vpn_off" class="hidden red"><b>OFF</b></span>
|
||||
</div>
|
||||
<div style="text-align:center;float:left;width:34%">
|
||||
<a href="manage.html" id="refresh_btn">REFRESH</a>
|
||||
/
|
||||
<a href="manage2.html" id="new_btn">NEW DESIGN</a>
|
||||
</div>
|
||||
<div style="text-align:right;float:right">
|
||||
<a href="javascript:void()" id="settings_btn">SETTINGS</a>
|
||||
</div>
|
||||
<div style="float:none;clear:both"/>
|
||||
|
||||
<div id="vpn" class="hidden">
|
||||
<fieldset>
|
||||
<legend>Enable proxy</legend>
|
||||
<form class="form-install" action="#" method="post" id="save_vpn">
|
||||
<div class="row">
|
||||
<div class="mb-3">
|
||||
<label for="vpn_domain">Please add domain url to download the VPN hash from (default: https://portal.safebox.network):</label>
|
||||
<input type="text" class="form-control" name="VPN_DOMAIN" id="vpn_domain" value="https://portal.safebox.network">
|
||||
<div class="invalid-feedback">
|
||||
Please enter a valid domain.
|
||||
</div>
|
||||
</div>
|
||||
<body>
|
||||
<div class="sidebar">
|
||||
<div class="sidebar-top">
|
||||
<div id="logo" class="logo">
|
||||
<img src="/img/logo.svg" alt="Safebox"/>
|
||||
<span>Safebox</span>
|
||||
</div>
|
||||
<div class="menu">
|
||||
<!--
|
||||
<div class="menu-item"><i class="fas fa-th"></i><span>Applications</span></div>
|
||||
<div class="menu-item"><i class="fas fa-hdd"></i><span>Disk Management</span></div>
|
||||
<div class="menu-item"><i class="fas fa-chart-line"></i><span>Monitor</span></div>
|
||||
<div class="menu-item active"><i class="fas fa-cog"></i><span>Settings</span></div>
|
||||
-->
|
||||
<div class="menu-item" id="installAppsBtn"><img src="/img/apps1.svg" data-src="/img/apps1.svg" data-hover="/img/apps2.svg" alt="Applications" /><span>Applications</span></div>
|
||||
<div class="menu-item" id="backupBtn"><img src="/img/backup1.svg" data-src="/img/backup1.svg" data-hover="/img/backup2.svg" alt="Backup" /><span>Backup</span></div>
|
||||
<div class="menu-item" id="diskBtn"><img src="/img/disk1.svg" data-src="/img/disk1.svg" data-hover="/img/disk2.svg" alt="Disk Management" /><span>Disk Management</span></div>
|
||||
<div class="menu-item" id="monitorBtn"><img src="/img/monitor1.svg" data-src="/img/monitor1.svg" data-hover="/img/monitor2.svg" alt="Monitor" /><span>Monitor</span></div>
|
||||
<div class="menu-item has-submenu" id="settingsBtn"><img src="/img/settings1.svg" data-src="/img/settings1.svg" data-hover="/img/settings2.svg" alt="Settings" /><span>Settings</span><span class="arrow">▾</span></div>
|
||||
<div class="submenu" id="settingsSubmenu">
|
||||
<div id="servicesBtn" class="submenu-item">Services</div>
|
||||
<div id="repositoriesBtn" class="submenu-item">Repositories</div>
|
||||
<div id="systemservicesBtn" class="submenu-item">System services</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="yellow-row">
|
||||
<div id="pro_off">
|
||||
<div class="yellow-box">
|
||||
<div class="pro-text">
|
||||
<span>Safebox Pro</span>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="mb-3">
|
||||
<label for="vpn_pass">Please type in the generated VPN passkey (8 digits):</label>
|
||||
<input type="text" class="form-control" name="VPN_PASS" id="vpn_pass" value="" maxlength="8" size="10">
|
||||
</div>
|
||||
<p>Enjoy benefits and unlock more feature such as remote access, geo-redundant backups etc. <br><br>
|
||||
<a href="" class="details">Read details</a><br><br>
|
||||
<img src="/img/upgrade.png" alt="Upgrade now" width="80%" id="upgradeBtn" style="cursor:pointer"/>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="pro_on" class="hidden">
|
||||
<div class="grey-box">
|
||||
<div class="vpn-text" id="vpnBtn" >
|
||||
<img src="/img/globe.png" data-src="/img/globe.png" data-hover="/img/globe.png" alt="VPN"/>
|
||||
<span>Remote access</span>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="mb-3">
|
||||
<label for="letsencrypt_mail">Please add the letsencrypt mail address:</label>
|
||||
<input type="email" class="form-control" name="LETSENCRYPT_MAIL" id="letsencrypt_mail" value="">
|
||||
<div class="invalid-feedback">
|
||||
Please enter a valid email.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="mb-3">
|
||||
<label for="letsencrypt_servername">Please add letsencrypt server name (default is letsencrypt but you can add zerossl too):</label>
|
||||
<input type="text" class="form-control" name="LETSENCRYPT_SERVERNAME" id="letsencrypt_servername" value="letsencrypt">
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="mb-3">
|
||||
<button class="btn btn-lg btn-primary btn-block" type="submit" id="vpn_save_btn"> Save </button>
|
||||
<button class="btn btn-lg btn-primary btn-block" type="button" id="vpn_cancel_btn"> Cancel </button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</fieldset>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
<div id="settings" class="hidden">
|
||||
<fieldset>
|
||||
<legend>Repositories</legend>
|
||||
<div id="repositories" style="text-align:left">Loading...</div>
|
||||
|
||||
<hr>
|
||||
<form class="form-install" action="#" method="post" id="add_repo">
|
||||
<div class="row">
|
||||
<div class="mb-3" style="text-align:left">
|
||||
<label for="registry">Please add a new GIT repository URL: </label>
|
||||
<input type="registry" class="form-control" name="repository" id="repository" size="100" value="" required>
|
||||
<div class="invalid-feedback">
|
||||
Please enter a valid repository url.
|
||||
<p>It allows you to connect your installed apps to a custom domain (your own or one registered through us), so you can securely log in from any browser, anywhere in the world.
|
||||
</p>
|
||||
<div class="vpn-item">
|
||||
<!--
|
||||
<label class="switch">
|
||||
<input type="checkbox" id="vpnToggle" onclick="return false">
|
||||
<span class="slider-text"><span class="switch-label">OFF</span></span>
|
||||
</label>
|
||||
-->
|
||||
<span id="vpn_on" class="hidden"><img src="/img/on.png" alt="on" /></span>
|
||||
<span id="vpn_off" class="hidden"><img src="/img/off.png" alt="off" /></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="mb-3">
|
||||
<button class="btn btn-lg btn-primary btn-block" type="submit" id="repo_add_btn"> Add </button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend>System services</legend>
|
||||
<div id="system" style="text-align:left">Loading...</div>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend>Updates</legend>
|
||||
<div style="text-align:left">
|
||||
<a href="javascript:void()" id="update_btn">Search for updates</a>
|
||||
</div>
|
||||
</div>
|
||||
<div id="updates" style="text-align:left">
|
||||
</div>
|
||||
</div>
|
||||
<div class="main" >
|
||||
<div id="myAppsContainer">
|
||||
<div class="loading">Loading applications...</div>
|
||||
</div>
|
||||
<div id="popup" class="popup hidden">
|
||||
<div class="popup-content">
|
||||
<div id="popupText" class="deployment"></div>
|
||||
</div>
|
||||
</fieldset>
|
||||
<br>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="default">
|
||||
|
||||
<fieldset>
|
||||
<legend><a href="javascript:void()" id="deployments_btn">Deployments</a></legend>
|
||||
<div id="deployments" style="text-align:left">Loading...</div>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend><a href="javascript:void()" id="services_btn">Services</a></legend>
|
||||
<div id="services" style="text-align:left;display:none;">Loading...</div>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend>Disk management</legend>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend>Monitor</legend>
|
||||
</fieldset>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
<br>
|
||||
<script>
|
||||
// apps array beállítása common.js-ben
|
||||
const apps = []; // GLOBAL VARIABLE
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
|
||||
updateActive();
|
||||
|
||||
const myAppsBtn = document.getElementById('myAppsBtn');
|
||||
const installAppsBtn = document.getElementById('installAppsBtn');
|
||||
const backupBtn = document.getElementById('backupBtn');
|
||||
const diskBtn = document.getElementById('diskBtn');
|
||||
const monitorBtn = document.getElementById('monitorBtn');
|
||||
const settingsBtn = document.getElementById('settingsBtn');
|
||||
|
||||
const vpnBtn = document.getElementById('vpnBtn');
|
||||
const upgradeBtn = document.getElementById('upgradeBtn');
|
||||
|
||||
const myAppsContainer = document.getElementById('myAppsContainer');
|
||||
const popup = document.getElementById('popup');
|
||||
const popupText = document.getElementById('popupText');
|
||||
const closeBtn = document.querySelector('.close');
|
||||
|
||||
|
||||
function updateActive() {
|
||||
document.querySelectorAll('.menu-item').forEach(item => {
|
||||
const img = item.querySelector('img');
|
||||
img.src = img.dataset.src;
|
||||
});
|
||||
document.querySelectorAll('.menu-item.active').forEach(item => {
|
||||
const img = item.querySelector('img');
|
||||
img.src = img.dataset.hover;
|
||||
});
|
||||
}
|
||||
|
||||
//Appok betöltése
|
||||
function renderApps(all) {
|
||||
myAppsContainer.classList.remove('hidden');
|
||||
popup.classList.add('hidden');
|
||||
|
||||
myAppsContainer.innerHTML = '<div class="main-header"><h1>Applications</h1><button id="updatesBtn"><i class="fas fa-bell"></i> Notification</button></div><div id="appsContainer"></div>';
|
||||
const appsContainer = document.getElementById('appsContainer');
|
||||
const updatesBtn = document.getElementById('updatesBtn');
|
||||
updatesBtn.addEventListener('click', () => renderUpdates());
|
||||
|
||||
apps.forEach(app => {
|
||||
//if ((all==false && app.installed=='true') || (all==true && app.installed!='true')) {
|
||||
const appDiv = document.createElement('div');
|
||||
appDiv.className = 'app';
|
||||
if (app.installed=='true') more = 'Installed';
|
||||
else more = 'More';
|
||||
appDiv.innerHTML = `
|
||||
<div class="app-img"><img src="${app.image}" alt="${app.name}" title="${app.orig_name} ${app.version}"></div>
|
||||
<div class="app-label">${app.subtitle}</div>
|
||||
<div class="app-name">${app.orig_name}</div>
|
||||
<button class="more-btn">${more}</button>
|
||||
`;
|
||||
appDiv.addEventListener('click', () => {
|
||||
popupText.textContent = `You clicked on ${app.name} ${app.version}!`;
|
||||
if (app.installed=='true') reinstall(app.name, 'popupText');
|
||||
else load_template(app.name,'popupText');
|
||||
popup.classList.remove('hidden');
|
||||
myAppsContainer.classList.add('hidden');
|
||||
});
|
||||
appsContainer.appendChild(appDiv);
|
||||
//}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
//TODO: Ilyen függvényeket kell csinálni és a listenerekhez adni az egyes részeket
|
||||
function renderText(title) {
|
||||
myAppsContainer.classList.remove('hidden');
|
||||
popup.classList.add('hidden');
|
||||
|
||||
//TODO: itt kell a buttont editálni és így kell hozzáadni hozzá mindent
|
||||
myAppsContainer.innerHTML = `
|
||||
<div class="main-header">
|
||||
<h1>${title}</h1>
|
||||
<button id="updatesBtn"><i class="fas fa-bell"></i> Notification</button>
|
||||
</div>
|
||||
<label>Under development...</label>
|
||||
`;
|
||||
|
||||
const submitButton = document.getElementById('submitButton');
|
||||
const textInput = document.getElementById('textInput');
|
||||
|
||||
if (submitButton && textInput) {
|
||||
submitButton.addEventListener('click', () => {
|
||||
const value = textInput.value.trim();
|
||||
if (value) {
|
||||
alert(`Beírt szöveg: ${value}`);
|
||||
textInput.value = '';
|
||||
} else {
|
||||
alert('Kérlek írj be valamit!');
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function renderMonitor() {
|
||||
myAppsContainer.classList.remove('hidden');
|
||||
popup.classList.add('hidden');
|
||||
|
||||
//TODO: itt kell a buttont editálni és így kell hozzáadni hozzá mindent
|
||||
myAppsContainer.innerHTML = `
|
||||
<div class="main-header">
|
||||
<h1>Monitor</h1>
|
||||
<button id="updatesBtn"><i class="fas fa-bell"></i> Notification</button>
|
||||
</div>
|
||||
<label>Under development...</label><br>
|
||||
<img src="/img/monitor.jpg" alt="Under development..." width="1000" />
|
||||
`;
|
||||
}
|
||||
|
||||
function renderVPN() {
|
||||
myAppsContainer.classList.remove('hidden');
|
||||
popup.classList.add('hidden');
|
||||
|
||||
myAppsContainer.innerHTML = `
|
||||
<div class="main-header">
|
||||
<h1>VPN - enable proxy</h1>
|
||||
</div>
|
||||
<div id="vpn" class="innerDiv">
|
||||
<div class="loading">Loading...</div>
|
||||
</div>
|
||||
`;
|
||||
get_proxy_html();
|
||||
}
|
||||
|
||||
function renderServices() {
|
||||
myAppsContainer.innerHTML = `
|
||||
<div class="main-header">
|
||||
<h1>Services</h1>
|
||||
</div>
|
||||
<div id="services" class="innerDiv">
|
||||
<div class="loading">Loading...</div>
|
||||
</div>
|
||||
`;
|
||||
get_services();
|
||||
}
|
||||
|
||||
function renderUpdates() {
|
||||
myAppsContainer.innerHTML = `
|
||||
<div class="main-header">
|
||||
<h1>Updates</h1>
|
||||
</div>
|
||||
<div id="updates" class="innerDiv">
|
||||
<div class="loading">Looking for updates...</div>
|
||||
</div>
|
||||
`;
|
||||
get_updates();
|
||||
}
|
||||
|
||||
function renderSystemServices() {
|
||||
myAppsContainer.innerHTML = `
|
||||
<div class="main-header">
|
||||
<h1>System services</h1>
|
||||
</div>
|
||||
<div id="system" class="innerDiv">
|
||||
<div class="loading">Loading...</div>
|
||||
</div>
|
||||
`;
|
||||
get_system();
|
||||
}
|
||||
|
||||
function renderSettings() {
|
||||
|
||||
const submenu = document.getElementById("settingsSubmenu");
|
||||
const isVisible = submenu.style.display === "flex";
|
||||
|
||||
submenu.style.display = isVisible ? "none" : "flex";
|
||||
settingsBtn.classList.toggle("open", !isVisible);
|
||||
|
||||
myAppsContainer.classList.remove('hidden');
|
||||
popup.classList.add('hidden');
|
||||
|
||||
myAppsContainer.innerHTML = `
|
||||
<div class="main-header">
|
||||
<h1>Settings</h1>
|
||||
<button id="updatesBtn"><i class="fas fa-bell"></i> Notification</button>
|
||||
</div>
|
||||
|
||||
<div class="input-row">
|
||||
<label>Docker registry name</label>
|
||||
<div class="input-container">
|
||||
<input type="text" placeholder="Enter name" />
|
||||
<button class="clear-btn" onclick="this.previousElementSibling.value = ''">×</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="input-row">
|
||||
<label>Enable logging</label>
|
||||
<div class="input-container">
|
||||
<select>
|
||||
<option>Yes</option>
|
||||
<option>No</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="input-row">
|
||||
<label>Backup folder</label>
|
||||
<div class="input-container">
|
||||
<input type="text" placeholder="Path to backup" />
|
||||
<button class="clear-btn" onclick="this.previousElementSibling.value = ''">×</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="input-row">
|
||||
<label>Send alerts</label>
|
||||
<div class="input-container">
|
||||
<select>
|
||||
<option>Yes</option>
|
||||
<option>No</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<button class="save-button">Save Settings</button>
|
||||
`;
|
||||
const servicesBtn = document.getElementById('servicesBtn');
|
||||
const repositoriesBtn = document.getElementById('repositoriesBtn');
|
||||
const systemservicesBtn = document.getElementById('systemservicesBtn');
|
||||
const updatesBtn = document.getElementById('updatesBtn');
|
||||
servicesBtn.addEventListener('click', () => renderServices());
|
||||
repositoriesBtn.addEventListener('click', () => renderRepositories());
|
||||
systemservicesBtn.addEventListener('click', () => renderSystemServices());
|
||||
updatesBtn.addEventListener('click', () => renderUpdates());
|
||||
}
|
||||
|
||||
function renderRepositories() {
|
||||
myAppsContainer.innerHTML = `
|
||||
<div class="main-header">
|
||||
<h1>Repositories</h1>
|
||||
</div>
|
||||
<div id="repositories" style="text-align:left">Loading repositories...</div>
|
||||
<br>
|
||||
<form class="form-install" action="#" method="post" id="add_repo">
|
||||
<div class="input-row">
|
||||
<label for="registry">Please add a new GIT repository URL: </label>
|
||||
<div class="input-container">
|
||||
<input type="registry" name="repository" id="repository" size="100" value="" required>
|
||||
<button class="clear-btn" onclick="this.previousElementSibling.value = ''">×</button>
|
||||
</div>
|
||||
<!--<div class="invalid-feedback">
|
||||
Please enter a valid repository url.
|
||||
</div>-->
|
||||
</div>
|
||||
<div class="row">
|
||||
<button class="save-button" type="submit" id="repo_add_btn"> Add </button>
|
||||
</div>
|
||||
</form>
|
||||
`;
|
||||
jQuery('#add_repo').submit(function() {
|
||||
jQuery('#repositories').html('Loading...');
|
||||
add_repository();
|
||||
return false;
|
||||
});
|
||||
|
||||
get_repositories();
|
||||
}
|
||||
|
||||
function activate(btn) {
|
||||
//myAppsBtn.classList.remove('active');
|
||||
installAppsBtn.classList.remove('active');
|
||||
backupBtn.classList.remove('active');
|
||||
diskBtn.classList.remove('active');
|
||||
monitorBtn.classList.remove('active');
|
||||
settingsBtn.classList.remove('active');
|
||||
btn.classList.add('active');
|
||||
|
||||
updateActive();
|
||||
}
|
||||
|
||||
//myAppsBtn.addEventListener('click', () => {renderApps(false); activate(myAppsBtn);});
|
||||
installAppsBtn.addEventListener('click', () => {renderApps(true); activate(installAppsBtn);});
|
||||
backupBtn.addEventListener('click', () => {renderText('Backup'); activate(backupBtn);});
|
||||
diskBtn.addEventListener('click', () => {renderText('Disk Management'); activate(diskBtn)});
|
||||
monitorBtn.addEventListener('click', () => {renderMonitor(); activate(monitorBtn)});
|
||||
settingsBtn.addEventListener('click', () => {renderSettings(); activate(settingsBtn)});
|
||||
|
||||
vpnBtn.addEventListener('click', () => renderVPN());
|
||||
upgradeBtn.addEventListener('click', () => renderVPN());
|
||||
|
||||
// renderApps(true);
|
||||
|
||||
/*
|
||||
const vpnToggle = document.getElementById("vpnToggle");
|
||||
const vpnLabel = document.querySelector(".switch-label");
|
||||
|
||||
function updateStatus() {
|
||||
vpnLabel.textContent = vpnToggle.checked ? "ON" : "OFF";
|
||||
}
|
||||
|
||||
vpnToggle.addEventListener("change", updateStatus);
|
||||
vpnToggle.addEventListener('click', function (e) {
|
||||
e.preventDefault();
|
||||
});
|
||||
|
||||
// Alapállapot beállítása
|
||||
updateStatus();
|
||||
*/
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- Optional JavaScript -->
|
||||
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
|
||||
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.6/dist/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.2.1/dist/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
|
||||
<script src="common.js?t=5"></script>
|
||||
<script src="common.js?t=43"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
735
manage3.html
735
manage3.html
@@ -1,735 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="hu">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Safebox</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Switzer:ital,wght@0,300;0,400;0,500;0,600;1,400&display=swap" rel="stylesheet" />
|
||||
<style>
|
||||
:root {
|
||||
--highlight-color: #F9DB54;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: 'Switzer', sans-serif;
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
background-color: #000;
|
||||
color: white;
|
||||
display: flex;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
table {border: 1px solid var(--highlight-color); width:100%;}
|
||||
table th {padding-left: 20px; text-align: left; color: var(--highlight-color); width: 25%;}
|
||||
table td {padding-left: 20px; text-align:left; width: 25%;}
|
||||
|
||||
.sidebar {
|
||||
width: 250px;
|
||||
background-color: #101214;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
padding: 20px 0;
|
||||
margin: 20px;
|
||||
border-radius: 20px;
|
||||
transition: width 0.3s;
|
||||
}
|
||||
|
||||
.logo {
|
||||
text-align: center;
|
||||
margin-bottom: 40px;
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.logo img {
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.menu {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 10px 20px;
|
||||
cursor: pointer;
|
||||
color: white;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
|
||||
.menu-item:hover {
|
||||
color: var(--highlight-color);
|
||||
}
|
||||
|
||||
.menu-item i {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.menu-item span {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.menu-item img {
|
||||
width: 24px;
|
||||
}
|
||||
|
||||
.menu-item.active {
|
||||
background-color: var(--highlight-color);
|
||||
color: black;
|
||||
border-radius: 10px;
|
||||
font-weight: bold;
|
||||
margin: 4px;
|
||||
}
|
||||
|
||||
.menu-item.active:hover {
|
||||
color: black;
|
||||
}
|
||||
|
||||
.details {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.yellow-row {
|
||||
max-width:250px;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
box-sizing: border-box;
|
||||
margin: 0px;
|
||||
width: 100%;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.yellow-box {
|
||||
background-color: var(--highlight-color);
|
||||
color: black;
|
||||
text-align: left;
|
||||
margin: 0px;
|
||||
padding: 10px 18px;
|
||||
border-radius: 20px 20px 0px 20px;
|
||||
font-weight: bold;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.yellow-corner {
|
||||
padding:0px;
|
||||
border: 0px;
|
||||
display: flex;
|
||||
margin: 0px;
|
||||
margin-top: auto;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.main {
|
||||
flex: 1;
|
||||
padding: 30px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
#appsContainer {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 16px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.app {
|
||||
border: 1px solid #41464f;
|
||||
border-radius: 15px;
|
||||
text-align: left;
|
||||
padding: 20px;
|
||||
width: 130px;
|
||||
min-height: 200px;
|
||||
text-align: left;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: left;
|
||||
}
|
||||
|
||||
.app-img {
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.app img {
|
||||
border-radius: 15px;
|
||||
background-color: #101214;
|
||||
width: 110px;
|
||||
height: 110px;
|
||||
object-fit: contain;
|
||||
margin-bottom: 20px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.app-label {
|
||||
font-size: 10px;
|
||||
color: #cccccc;
|
||||
margin-bottom: 10px;
|
||||
align-items: left;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.app-name {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.more-btn {
|
||||
background-color: var(--highlight-color);
|
||||
border: none;
|
||||
border-radius: 15px;
|
||||
padding: 20px;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.main-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.main-header h1 {
|
||||
margin: 0;
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.main-header button {
|
||||
background-color: var(--highlight-color);
|
||||
color: black;
|
||||
border: none;
|
||||
padding: 10px 20px;
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
font-weight: bold;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.input-row, .input-group {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border: 1px solid #41464f;
|
||||
padding: 15px 20px;
|
||||
margin-bottom: 15px;
|
||||
border-radius: 10px;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
flex: 1;
|
||||
justify-content: flex-end;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.input-row input,
|
||||
.input-row select {
|
||||
background: transparent;
|
||||
border: 1px solid #41464f;
|
||||
padding: 8px 30px 8px 8px;
|
||||
border-radius: 10px;
|
||||
color: white;
|
||||
transition: color 0.2s;
|
||||
max-width: 40%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.input-row input:focus,
|
||||
.input-row select:focus {
|
||||
outline: none;
|
||||
background-color: black;
|
||||
color: var(--highlight-color);
|
||||
}
|
||||
|
||||
.input-row select {
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
background-image: url('data:image/svg+xml;utf8,<svg fill="white" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5-5 5 5zM7 14l5 5 5-5z"/></svg>');
|
||||
background-repeat: no-repeat;
|
||||
background-position: right 8px center;
|
||||
background-size: 16px;
|
||||
padding-right: 32px;
|
||||
}
|
||||
|
||||
.clear-btn {
|
||||
position: absolute;
|
||||
right: 8px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
padding: 0;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
text-align: center;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.save-button {
|
||||
background-color: var(--highlight-color);
|
||||
color: black;
|
||||
border: none;
|
||||
padding: 15px 30px;
|
||||
font-size: 16px;
|
||||
border-radius: 10px;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
margin-top: 30px;
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
.save-button:hover {
|
||||
background-color: #f5c300;
|
||||
}
|
||||
|
||||
.popup.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.popup {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0,0,0,0.5);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.popup-content {
|
||||
background: var(--bg-color);
|
||||
padding: 30px;
|
||||
border-radius: 15px;
|
||||
width: 80%;
|
||||
text-align: left;
|
||||
position: relative;
|
||||
animation: fadeIn 0.3s ease;
|
||||
}
|
||||
|
||||
.popup-content .close {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 15px;
|
||||
font-size: 24px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#popup .input-group {
|
||||
background-color: #101214;
|
||||
display: block;
|
||||
}
|
||||
|
||||
#popup .row {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.sidebar {
|
||||
width: 80px;
|
||||
padding: 20px 5px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
.logo span {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
justify-content: center;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.menu-item span {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.yellow-box {
|
||||
font-size: 0;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.input-row {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
width: 100%;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.input-row input,
|
||||
.input-row select {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="sidebar">
|
||||
<div>
|
||||
<div class="logo">
|
||||
<img src="/img/logo.png" alt="Safebox"/>
|
||||
<span>Safebox</span>
|
||||
</div>
|
||||
<div class="menu">
|
||||
<!--
|
||||
<div class="menu-item"><i class="fas fa-th"></i><span>Applications</span></div>
|
||||
<div class="menu-item"><i class="fas fa-hdd"></i><span>Disk Management</span></div>
|
||||
<div class="menu-item"><i class="fas fa-chart-line"></i><span>Monitor</span></div>
|
||||
<div class="menu-item active"><i class="fas fa-cog"></i><span>Settings</span></div>
|
||||
-->
|
||||
<div class="menu-item" id="installAppsBtn"><img src="/img/app.png" data-src="/img/app.png" data-hover="/img/app2.png" alt="Applications" /><span>Applications</span></div>
|
||||
<div class="menu-item" id="backupBtn"><img src="/img/disk.png" data-src="/img/disk.png" data-hover="/img/disk2.png" alt="Backup" /><span>Backup</span></div>
|
||||
<div class="menu-item" id="diskBtn"><img src="/img/disk.png" data-src="/img/disk.png" data-hover="/img/disk2.png" alt="Disk Management" /><span>Disk Management</span></div>
|
||||
<div class="menu-item" id="monitorBtn"><img src="/img/monitor.png" data-src="/img/monitor.png" data-hover="/img/monitor2.png" alt="Monitor" /><span>Monitor</span></div>
|
||||
<div class="menu-item" id="settingsBtn"><img src="/img/settings.png" data-src="/img/settings.png" data-hover="/img/settings2.png" alt="Settings" /><span>Settings</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="yellow-row">
|
||||
<div class="yellow-box">
|
||||
<h4>Safebox Pro</h4>
|
||||
<p>Enjoy benefits and unlock more feature such as remote access, geo-redundant backups etc. <br><br>
|
||||
<a href="" class="details">Read details</a><br><br>
|
||||
<img src="/img/upgrade.png" alt="Upgrade now" width="100%"/>
|
||||
</p>
|
||||
</div>
|
||||
<div class="yellow-corner">
|
||||
<img src="img/yellow_corner.png" alt=""/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="main" >
|
||||
<div id="myAppsContainer">
|
||||
<div class="main-header">
|
||||
<h1>Settings</h1>
|
||||
<button id="updatesBtn"><i class="fas fa-bell"></i> Notification</button>
|
||||
</div>
|
||||
<div class="input-row">
|
||||
<label>Docker registry name</label>
|
||||
<div class="input-container">
|
||||
<input type="text" placeholder="Enter name" />
|
||||
<button class="clear-btn" onclick="this.previousElementSibling.value = ''">×</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="input-row">
|
||||
<label>Enable logging</label>
|
||||
<div class="input-container">
|
||||
<select>
|
||||
<option>Yes</option>
|
||||
<option>No</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="input-row">
|
||||
<label>Backup folder</label>
|
||||
<div class="input-container">
|
||||
<input type="text" placeholder="Path to backup" />
|
||||
<button class="clear-btn" onclick="this.previousElementSibling.value = ''">×</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="input-row">
|
||||
<label>Send alerts</label>
|
||||
<div class="input-container">
|
||||
<select>
|
||||
<option>Yes</option>
|
||||
<option>No</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<button class="save-button">Save Settings</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="popup" class="popup hidden">
|
||||
<div class="popup-content">
|
||||
<span class="close">×</span>
|
||||
<div class="input-group">
|
||||
<div id="popupText" class="deployment">Load app template here</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// apps array beállítása common.js-ben
|
||||
const apps = []; // GLOBAL VARIABLE
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
|
||||
document.querySelectorAll('.menu-item.active').forEach(item => {
|
||||
const img = item.querySelector('img');
|
||||
img.src = img.dataset.hover;
|
||||
/*
|
||||
item.addEventListener('mouseenter', () => {
|
||||
img.src = img.dataset.hover;
|
||||
});
|
||||
item.addEventListener('mouseleave', () => {
|
||||
img.src = img.dataset.src;
|
||||
});
|
||||
*/
|
||||
});
|
||||
|
||||
const myAppsBtn = document.getElementById('myAppsBtn');
|
||||
const installAppsBtn = document.getElementById('installAppsBtn');
|
||||
const backupBtn = document.getElementById('backupBtn');
|
||||
const diskBtn = document.getElementById('diskBtn');
|
||||
const monitorBtn = document.getElementById('monitorBtn');
|
||||
const settingsBtn = document.getElementById('settingsBtn');
|
||||
|
||||
const vpnBtn = document.getElementById('vpnBtn');
|
||||
|
||||
const myAppsContainer = document.getElementById('myAppsContainer');
|
||||
const popup = document.getElementById('popup');
|
||||
const popupText = document.getElementById('popupText');
|
||||
const closeBtn = document.querySelector('.close');
|
||||
|
||||
//Appok betöltése
|
||||
function renderApps(all) {
|
||||
myAppsContainer.innerHTML = '<div class="main-header"><h1>Applications</h1><button id="updatesBtn"><i class="fas fa-bell"></i> Notification</button></div><div id="appsContainer"></div>';
|
||||
const appsContainer = document.getElementById('appsContainer');
|
||||
const updatesBtn = document.getElementById('updatesBtn');
|
||||
updatesBtn.addEventListener('click', () => renderUpdates());
|
||||
|
||||
apps.forEach(app => {
|
||||
//if ((all==false && app.installed=='true') || (all==true && app.installed!='true')) {
|
||||
const appDiv = document.createElement('div');
|
||||
appDiv.className = 'app';
|
||||
appDiv.innerHTML = `
|
||||
<div class="app-img"><img src="${app.image}" alt="${app.name}" title="${app.orig_name} ${app.version}"></div>
|
||||
<div class="app-label">${app.name} ${app.version}</div>
|
||||
<div class="app-name">${app.orig_name}</div>
|
||||
<button class="more-btn">More</button>
|
||||
`;
|
||||
appDiv.addEventListener('click', () => {
|
||||
popupText.textContent = `You clicked on ${app.name} ${app.version}!`;
|
||||
if (app.installed=='true') reinstall(app.name, 'popupText');
|
||||
else load_template(app.name,'popupText');
|
||||
popup.classList.remove('hidden');
|
||||
});
|
||||
appsContainer.appendChild(appDiv);
|
||||
//}
|
||||
});
|
||||
}
|
||||
|
||||
//TODO: Ilyen függvényeket kell csinálni és a listenerekhez adni az egyes részeket
|
||||
function renderText(title) {
|
||||
//TODO: itt kell a buttont editálni és így kell hozzáadni hozzá mindent
|
||||
myAppsContainer.innerHTML = `
|
||||
<h1 style="text-align: center;">${title}</h1>
|
||||
|
||||
<div class="input-group">
|
||||
<input type="text" placeholder="Írj be valamit..." id="textInput">
|
||||
<button id="submitButton">Küldés</button>
|
||||
|
||||
<select id="myComboBox" class="custom-select">
|
||||
<option value="">Válassz egy lehetőséget...</option>
|
||||
<option value="1">Első opció</option>
|
||||
<option value="2">Második opció</option>
|
||||
<option value="3">Harmadik opció</option>
|
||||
</select>
|
||||
|
||||
<label class="checkbox-container">
|
||||
<input type="checkbox" id="myCheckbox">
|
||||
<span class="checkmark"></span>
|
||||
Elfogadom a feltételeket
|
||||
</label>
|
||||
</div>
|
||||
`;
|
||||
|
||||
const submitButton = document.getElementById('submitButton');
|
||||
const textInput = document.getElementById('textInput');
|
||||
|
||||
if (submitButton && textInput) {
|
||||
submitButton.addEventListener('click', () => {
|
||||
const value = textInput.value.trim();
|
||||
if (value) {
|
||||
alert(`Beírt szöveg: ${value}`);
|
||||
textInput.value = '';
|
||||
} else {
|
||||
alert('Kérlek írj be valamit!');
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function renderVPN() {
|
||||
myAppsContainer.innerHTML = `
|
||||
<div class="main-header">
|
||||
<h1>VPN</h1>
|
||||
</div>
|
||||
<div id="vpn" class="innerDiv">
|
||||
Loading...
|
||||
</div>
|
||||
`;
|
||||
get_proxy_html();
|
||||
}
|
||||
|
||||
function renderServices() {
|
||||
myAppsContainer.innerHTML = `
|
||||
<div class="main-header">
|
||||
<h1>Services</h1>
|
||||
</div>
|
||||
<div id="services" class="innerDiv">
|
||||
Loading...
|
||||
</div>
|
||||
`;
|
||||
get_services();
|
||||
}
|
||||
|
||||
function renderUpdates() {
|
||||
myAppsContainer.innerHTML = `
|
||||
<div class="main-header">
|
||||
<h1>Updates</h1>
|
||||
</div>
|
||||
<div id="updates" class="innerDiv">
|
||||
Looking for updates... Please wait...
|
||||
</div>
|
||||
`;
|
||||
get_updates();
|
||||
}
|
||||
|
||||
function renderSystemServices() {
|
||||
myAppsContainer.innerHTML = `
|
||||
<div class="main-header">
|
||||
<h1>System services</h1>
|
||||
</div>
|
||||
<div id="system" class="innerDiv">
|
||||
Loading...
|
||||
</div>
|
||||
`;
|
||||
get_system();
|
||||
}
|
||||
|
||||
function renderSettings() {
|
||||
myAppsContainer.innerHTML = `
|
||||
<div class="main-header">
|
||||
<h1>Settings</h1>
|
||||
<button id="updatesBtn"><i class="fas fa-bell"></i> Notification</button>
|
||||
</div>
|
||||
<div class="input-row">
|
||||
<button id="servicesBtn" class="save-button">Services</button>
|
||||
<button id="repositoriesBtn" class="save-button">Repositories</button>
|
||||
<button id="systemservicesBtn" class="save-button">System services</button>
|
||||
</div>
|
||||
`;
|
||||
const servicesBtn = document.getElementById('servicesBtn');
|
||||
const repositoriesBtn = document.getElementById('repositoriesBtn');
|
||||
const systemservicesBtn = document.getElementById('systemservicesBtn');
|
||||
const updatesBtn = document.getElementById('updatesBtn');
|
||||
servicesBtn.addEventListener('click', () => renderServices());
|
||||
repositoriesBtn.addEventListener('click', () => renderRepositories());
|
||||
systemservicesBtn.addEventListener('click', () => renderSystemServices());
|
||||
updatesBtn.addEventListener('click', () => renderUpdates());
|
||||
}
|
||||
|
||||
function renderRepositories() {
|
||||
myAppsContainer.innerHTML = `
|
||||
<div class="main-header">
|
||||
<h1>Repositories</h1>
|
||||
</div>
|
||||
<div id="repositories" style="text-align:left">Loading...</div>
|
||||
<br>
|
||||
<form class="form-install" action="#" method="post" id="add_repo">
|
||||
<div class="input-row">
|
||||
<label for="registry">Please add a new GIT repository URL: </label>
|
||||
<div class="input-container">
|
||||
<input type="registry" name="repository" id="repository" size="100" value="" required>
|
||||
<button class="clear-btn" onclick="this.previousElementSibling.value = ''">×</button>
|
||||
</div>
|
||||
<!--<div class="invalid-feedback">
|
||||
Please enter a valid repository url.
|
||||
</div>-->
|
||||
</div>
|
||||
<div class="row">
|
||||
<button class="save-button" type="submit" id="repo_add_btn"> Add </button>
|
||||
</div>
|
||||
</form>
|
||||
`;
|
||||
jQuery('#add_repo').submit(function() {
|
||||
jQuery('#repositories').html('Loading...');
|
||||
add_repository();
|
||||
return false;
|
||||
});
|
||||
|
||||
get_repositories();
|
||||
}
|
||||
|
||||
function activate(btn) {
|
||||
//myAppsBtn.classList.remove('active');
|
||||
installAppsBtn.classList.remove('active');
|
||||
backupBtn.classList.remove('active');
|
||||
diskBtn.classList.remove('active');
|
||||
monitorBtn.classList.remove('active');
|
||||
settingsBtn.classList.remove('active');
|
||||
btn.classList.add('active');
|
||||
}
|
||||
|
||||
//myAppsBtn.addEventListener('click', () => {renderApps(false); activate(myAppsBtn);});
|
||||
installAppsBtn.addEventListener('click', () => {renderApps(true); activate(installAppsBtn);});
|
||||
backupBtn.addEventListener('click', () => {renderText('Backup'); activate(backupBtn);});
|
||||
diskBtn.addEventListener('click', () => {renderText('Disk Management'); activate(diskBtn)});
|
||||
monitorBtn.addEventListener('click', () => {renderText('Monitor'); activate(monitorBtn)});
|
||||
settingsBtn.addEventListener('click', () => {renderSettings(); activate(settingsBtn)});
|
||||
|
||||
// vpnBtn.addEventListener('click', () => renderVPN());
|
||||
/*
|
||||
closeBtn.addEventListener('click', () => {
|
||||
popup.classList.add('hidden');
|
||||
});
|
||||
|
||||
popup.addEventListener('click', (event) => {
|
||||
if (event.target === popup) {
|
||||
popup.classList.add('hidden');
|
||||
}
|
||||
});
|
||||
*/
|
||||
// renderApps(false);
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- Optional JavaScript -->
|
||||
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
|
||||
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.6/dist/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.2.1/dist/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
|
||||
<script src="common.js?t=10"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
157
manage_old.html
Normal file
157
manage_old.html
Normal file
@@ -0,0 +1,157 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<!-- Required meta tags -->
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<title>INSTALLER TOOL</title>
|
||||
<!-- Bootstrap CSS -->
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.2.1/dist/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
|
||||
<!-- Custom styles for this template -->
|
||||
<link href="installer.css?t=7" rel="stylesheet">
|
||||
</head>
|
||||
<body id="manage" class="text-center">
|
||||
<div class="container-fluid">
|
||||
<div class="col-md-12">
|
||||
|
||||
<h1>Found deployed environment</h1>
|
||||
|
||||
<div style="text-align:left;float:left;width:33%">
|
||||
<a href="javascript:void()" id="vpn_btn">VPN</a>
|
||||
Status:
|
||||
<span id="vpn_on" class="hidden green"><b>ON</b></span>
|
||||
<span id="vpn_off" class="hidden red"><b>OFF</b></span>
|
||||
</div>
|
||||
<div style="text-align:center;float:left;width:34%">
|
||||
<a href="manage.html" id="refresh_btn">REFRESH</a>
|
||||
/
|
||||
<a href="manage2.html" id="new_btn">NEW DESIGN</a>
|
||||
</div>
|
||||
<div style="text-align:right;float:right">
|
||||
<a href="javascript:void()" id="settings_btn">SETTINGS</a>
|
||||
</div>
|
||||
<div style="float:none;clear:both"/>
|
||||
|
||||
<div id="vpn" class="hidden">
|
||||
<fieldset>
|
||||
<legend>Enable proxy</legend>
|
||||
<form class="form-install" action="#" method="post" id="save_vpn">
|
||||
<div class="row">
|
||||
<div class="mb-3">
|
||||
<label for="vpn_domain">Please add domain url to download the VPN hash from (default: https://portal.safebox.network):</label>
|
||||
<input type="text" class="form-control" name="VPN_DOMAIN" id="vpn_domain" value="https://portal.safebox.network">
|
||||
<div class="invalid-feedback">
|
||||
Please enter a valid domain.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="mb-3">
|
||||
<label for="vpn_pass">Please type in the generated VPN passkey (8 digits):</label>
|
||||
<input type="text" class="form-control" name="VPN_PASS" id="vpn_pass" value="" maxlength="8" size="10">
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="mb-3">
|
||||
<label for="letsencrypt_mail">Please add the letsencrypt mail address:</label>
|
||||
<input type="email" class="form-control" name="LETSENCRYPT_MAIL" id="letsencrypt_mail" value="">
|
||||
<div class="invalid-feedback">
|
||||
Please enter a valid email.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="mb-3">
|
||||
<label for="letsencrypt_servername">Please add letsencrypt server name (default is letsencrypt but you can add zerossl too):</label>
|
||||
<input type="text" class="form-control" name="LETSENCRYPT_SERVERNAME" id="letsencrypt_servername" value="letsencrypt">
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="mb-3">
|
||||
<button class="btn btn-lg btn-primary btn-block" type="submit" id="vpn_save_btn"> Save </button>
|
||||
<button class="btn btn-lg btn-primary btn-block" type="button" id="vpn_cancel_btn"> Cancel </button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</fieldset>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
<div id="settings" class="hidden">
|
||||
<fieldset>
|
||||
<legend>Repositories</legend>
|
||||
<div id="repositories" style="text-align:left">Loading...</div>
|
||||
|
||||
<hr>
|
||||
<form class="form-install" action="#" method="post" id="add_repo">
|
||||
<div class="row">
|
||||
<div class="mb-3" style="text-align:left">
|
||||
<label for="registry">Please add a new GIT repository URL: </label>
|
||||
<input type="registry" class="form-control" name="repository" id="repository" size="100" value="" required>
|
||||
<div class="invalid-feedback">
|
||||
Please enter a valid repository url.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="mb-3">
|
||||
<button class="btn btn-lg btn-primary btn-block" type="submit" id="repo_add_btn"> Add </button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend>System services</legend>
|
||||
<div id="system" style="text-align:left">Loading...</div>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend>Updates</legend>
|
||||
<div style="text-align:left">
|
||||
<a href="javascript:void()" id="update_btn">Search for updates</a>
|
||||
</div>
|
||||
<div id="updates" style="text-align:left">
|
||||
</div>
|
||||
</fieldset>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
<div id="default">
|
||||
|
||||
<fieldset>
|
||||
<legend><a href="javascript:void()" id="deployments_btn">Deployments</a></legend>
|
||||
<div id="deployments" style="text-align:left">Loading...</div>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend><a href="javascript:void()" id="services_btn">Services</a></legend>
|
||||
<div id="services" style="text-align:left;display:none;">Loading...</div>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend>Disk management</legend>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend>Monitor</legend>
|
||||
</fieldset>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
<br>
|
||||
<script>
|
||||
// apps array beállítása common.js-ben
|
||||
const apps = []; // GLOBAL VARIABLE
|
||||
</script>
|
||||
<!-- Optional JavaScript -->
|
||||
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
|
||||
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.6/dist/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.2.1/dist/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
|
||||
<script src="common.js?t=5"></script>
|
||||
</body>
|
||||
</html>
|
||||
224
scan.html
224
scan.html
@@ -1,198 +1,58 @@
|
||||
<!doctype html>
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<!-- Required meta tags -->
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<title>INSTALLER TOOL</title>
|
||||
<!-- Bootstrap CSS -->
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.2.1/dist/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
|
||||
<!-- Custom styles for this template -->
|
||||
<link href="installer.css?t=1" rel="stylesheet">
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
|
||||
<meta http-equiv="Pragma" content="no-cache" />
|
||||
<meta http-equiv="Expires" content="0" />
|
||||
<title>Safebox - INSTALLER TOOL</title>
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Switzer:ital,wght@0,300;0,400;0,500;0,600;1,400&display=swap"/>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"/>
|
||||
<link rel="stylesheet" href="style.css?t=4" />
|
||||
</head>
|
||||
<body id="scan" class="text-center">
|
||||
<div class="container-fluid">
|
||||
<div class="col-md-12">
|
||||
<h1>Scanning your device for any previous installed versions</h1>
|
||||
<div class="row d-flex justify-content-center mt-100">
|
||||
<div class="progress blue" data-value="100">
|
||||
<span class="progress-left">
|
||||
<span class="progress-bar"></span>
|
||||
</span>
|
||||
<span class="progress-right">
|
||||
<span class="progress-bar"></span>
|
||||
</span>
|
||||
<div class="progress-value"></div>
|
||||
</div>
|
||||
<div class="main">
|
||||
<div id="myAppsContainer">
|
||||
<div class="logo" style="margin:100px 0px 20px 0px;">
|
||||
<img src="/img/logo.svg" alt="Safebox"/>
|
||||
<span>Safebox</span>
|
||||
</div>
|
||||
<div><a href="install.html" class="stop">STOP AND START INSTALL</a></div>
|
||||
<br>
|
||||
<br>
|
||||
<div id="redis"></div>
|
||||
<div id="previous"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-box">
|
||||
<div class="progress-title">Scanning your device</div>
|
||||
<div class="progress-description" id="info">Looking for any previously installed version</div>
|
||||
<div class="progress-container-shadow">
|
||||
</div>
|
||||
<div class="progress-container">
|
||||
<div class="progress-bar" id="progressBar"></div>
|
||||
<div class="progress-text" id="progressText">0%</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--
|
||||
<div class="controls">
|
||||
<button onclick="document.location='install.html'" class="save-button">STOP AND START INSTALL</button>
|
||||
</div>
|
||||
-->
|
||||
</div>
|
||||
</div>
|
||||
<!-- Optional JavaScript -->
|
||||
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
|
||||
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.6/dist/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.2.1/dist/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
|
||||
<script src="install.js?t=7"></script>
|
||||
<script>
|
||||
$(function() {
|
||||
const progressBar = document.getElementById('progressBar');
|
||||
const progressText = document.getElementById('progressText');
|
||||
let currentProgress = 0;
|
||||
let progressInterval;
|
||||
let install = 0; // scan
|
||||
|
||||
function redirectToInstall() {
|
||||
window.location.href = 'install.html';
|
||||
}
|
||||
// Initialize
|
||||
updateProgress(0);
|
||||
startProgress(30000);// 30 seconds
|
||||
|
||||
function redirectToManage() {
|
||||
window.location.href = 'manage.html';
|
||||
}
|
||||
|
||||
function start_system() {
|
||||
var url = 'scan.php?op=system';
|
||||
$.get(url, function(data){
|
||||
console.log('start_system: '+data);
|
||||
if (data=='OK') {
|
||||
$("#previous").html('Scanning for previous install. Please wait...');
|
||||
check_system();
|
||||
}
|
||||
else {
|
||||
$("#previous").html('Scanning for previous install has aborted...');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function check_system() {
|
||||
var url = 'scan.php?op=check_system';
|
||||
$.get(url, function(data){
|
||||
console.log('check_system: '+data);
|
||||
if (data=='NEW') {
|
||||
$("#previous").html('No previous install has found...');
|
||||
setTimeout(redirectToInstall, 3000);
|
||||
}
|
||||
else if (data=='EXISTS') {
|
||||
$("#previous").html('Previous install has found...');
|
||||
setTimeout(redirectToManage, 3000);
|
||||
}
|
||||
else if (data=='WAIT') {
|
||||
setTimeout(check_system, 1000);
|
||||
}
|
||||
else {
|
||||
// UNEXPECTED ERROR
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function check_redis() {
|
||||
|
||||
var url = 'scan.php?op=redis';
|
||||
$.get(url, function(data){
|
||||
console.log('check_redis: '+data);
|
||||
if (data=='OK') {
|
||||
$("#redis").html('Redis server - OK');
|
||||
start_system();
|
||||
}
|
||||
else {
|
||||
$("#redis").html('Redis server is not available...');
|
||||
setTimeout(check_redis, 1000);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function check_directory() {
|
||||
|
||||
var url = 'scan.php?op=directory';
|
||||
$.get(url, function(data){
|
||||
console.log('check_directory: '+data);
|
||||
if (data=='OK') {
|
||||
$("#redis").html('Connection is ready - OK');
|
||||
start_system();
|
||||
}
|
||||
else {
|
||||
$("#redis").html('Shared directory is not available...');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function check_interface() {
|
||||
|
||||
var url = 'scan.php?op=get_interface';
|
||||
$.get(url, function(data){
|
||||
console.log('check_interface: '+data);
|
||||
if (data=='redis') {
|
||||
check_redis();
|
||||
}
|
||||
else if (data=='directory') {
|
||||
check_directory();
|
||||
}
|
||||
else {
|
||||
$("#redis").html('Invalid interface definition...');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
check_interface();
|
||||
|
||||
//setTimeout(redirectToManage, 10000);
|
||||
|
||||
$(".progress").each(function() {
|
||||
|
||||
var value = $(this).attr('data-value');
|
||||
var left = $(this).find('.progress-left .progress-bar');
|
||||
var right = $(this).find('.progress-right .progress-bar');
|
||||
|
||||
if (value > 0) {
|
||||
/*
|
||||
angle1 = getRotationDegrees(right);
|
||||
angle2 = getRotationDegrees(left);
|
||||
console.log(angle1);
|
||||
console.log(angle2);
|
||||
idx=1
|
||||
while (idx < 50) {
|
||||
angle1 = getRotationDegrees(right);
|
||||
angle2 = getRotationDegrees(left);
|
||||
console.log(angle1);
|
||||
console.log(angle2);
|
||||
$('div.progress-value').html(angle2);
|
||||
idx++;
|
||||
}
|
||||
*/
|
||||
/*
|
||||
if (value <= 50) {
|
||||
right.css('transform', 'rotate(' + percentageToDegrees(value) + 'deg)')
|
||||
} else {
|
||||
right.css('transform', 'rotate(180deg)')
|
||||
left.css('transform', 'rotate(' + percentageToDegrees(value - 50) + 'deg)')
|
||||
}
|
||||
*/
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
function percentageToDegrees(percentage) {
|
||||
return percentage / 100 * 360
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns rotation in degrees when obtaining transform-styles using javascript
|
||||
* http://stackoverflow.com/questions/8270612/get-element-moz-transformrotate-value-in-jquery
|
||||
*/
|
||||
function getRotationDegrees(obj) {
|
||||
var matrix = obj.css("-webkit-transform") ||
|
||||
obj.css("-moz-transform") ||
|
||||
obj.css("-ms-transform") ||
|
||||
obj.css("-o-transform") ||
|
||||
obj.css("transform");
|
||||
if(matrix !== 'none') {
|
||||
var values = matrix.split('(')[1].split(')')[0].split(',');
|
||||
var a = values[0];
|
||||
var b = values[1];
|
||||
var angle = Math.round(Math.atan2(b, a) * (180/Math.PI));
|
||||
} else { var angle = 0; }
|
||||
return angle;
|
||||
}
|
||||
|
||||
});
|
||||
check_interface();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
137
scan.php
137
scan.php
@@ -59,12 +59,12 @@ switch ($_GET["op"]) {
|
||||
}
|
||||
else echo "WAIT";
|
||||
break;
|
||||
case "check_install": // called in install.php - check if install process has finished
|
||||
$arr = check_response($_GET["key"]); // TODO - replace key with "install", key can be "install*"
|
||||
case "check_install": // called in install.js - check if install process has finished
|
||||
$arr = check_response("install");
|
||||
if (!empty($arr)) {
|
||||
foreach ($arr as $key=>$data) {
|
||||
//echo $key."-".$_GET["key"];
|
||||
if ($key==$_GET["key"]) { // if install key moved to web_out
|
||||
if ($key=="install") { // if install key moved to web_out
|
||||
if ($data["INSTALL_STATUS"]>0) {
|
||||
remove_response("$key");
|
||||
echo "INSTALLED";
|
||||
@@ -146,12 +146,14 @@ switch ($_GET["op"]) {
|
||||
$orig_service_name = $service_name;
|
||||
$service_name = strtolower($service_name);
|
||||
$version = $content["version"];
|
||||
$subtitle = $content["subtitle"];
|
||||
if (empty($subtitle) || $subtitle == "null") $subtitle = "";
|
||||
$icon = $content["icon"];
|
||||
if (empty($icon) || $icon == "null") $icon = "image.png"; // default icon image
|
||||
if (empty($icon) || $icon == "null") $icon = "img/logo.svg"; // default icon image
|
||||
if (array_key_exists($service_name,$data["INSTALLED_SERVICES"])) $installed = "true";
|
||||
else $installed = "false";
|
||||
if (!empty($deployments)) $deployments .= ", ";
|
||||
$deployments .= '{"name": "'.$service_name.'", "orig_name": "'.$orig_service_name.'", "image": "'.$icon.'", "version": "'.$version.'", "installed": "'.$installed.'"}';
|
||||
$deployments .= '{"name": "'.$service_name.'", "orig_name": "'.$orig_service_name.'", "image": "'.$icon.'", "version": "'.$version.'", "subtitle": "'.$subtitle.'", "installed": "'.$installed.'"}';
|
||||
}
|
||||
if (!empty($deployments)) $deployments = "[{$deployments}]";
|
||||
}
|
||||
@@ -180,12 +182,29 @@ switch ($_GET["op"]) {
|
||||
if ($key=="deployment") {
|
||||
if ($data["STATUS"]=="0") { // ask
|
||||
$template = json_decode(base64_decode($data["TEMPLATE"]));
|
||||
echo "<fieldset><form action=\"#\" method=\"post\" id=\"deploy_{$template->name}_form\"><br>";
|
||||
echo '<div id="letsencrypt">';
|
||||
$template->name = strtolower($template->name);
|
||||
|
||||
echo '
|
||||
<div class="app-details">
|
||||
<div class="header-block">
|
||||
<div class="logo-and-text">
|
||||
<div class="applogo">
|
||||
<img src="'.$template->icon.'">
|
||||
</div>
|
||||
<div class="text-content">
|
||||
<h1 class="title">'.$template->title.'</h1>
|
||||
<h2 class="subtitle">'.$template->subtitle.'</h2>
|
||||
<p class="description">'.$template->description.'</p>
|
||||
</div>
|
||||
</div>
|
||||
<button id="updatesBtn" class="notification-btn"><i class="fas fa-bell"></i> Notification</button>
|
||||
</div>
|
||||
';
|
||||
if ($reinstall) {
|
||||
echo '<div id="letsencrypt">';
|
||||
//var_dump($template);
|
||||
$letsencrypt = check_letsencrypt();
|
||||
if (empty($letsencrypt)) echo "LETSENCRYPT file doesn't exists...<br><br>";
|
||||
if (empty($letsencrypt)) echo ""; //echo "LETSENCRYPT file doesn't exists...<br><br>";
|
||||
elseif ($letsencrypt=="ERROR") echo "LETSENCRYPT file: read JSON error...<br><br>";
|
||||
else {
|
||||
$domain = "";
|
||||
@@ -194,65 +213,84 @@ switch ($_GET["op"]) {
|
||||
}
|
||||
if (!empty($domain)) show_letsencrypt($letsencrypt, $domain);
|
||||
}
|
||||
echo '</div>';
|
||||
}
|
||||
echo '</div>';
|
||||
echo "<div class=\"row\">";
|
||||
if (!empty($template->icon)) echo "<img src=\"".$template->icon."\">";
|
||||
if (!empty($template->description)) echo "<label style='padding: 10px'>".$template->description."</label>";
|
||||
echo "</div>";
|
||||
$more = 0;
|
||||
echo "<form action=\"#\" method=\"post\" id=\"deploy_{$template->name}_form\">";
|
||||
echo "<div class=\"app-fields\">";
|
||||
foreach ($template->fields as $field) {
|
||||
if ($field->advanced) $more = 1;
|
||||
echo "<div class=\"app-field ".($field->advanced ? "advanced" : "")."\">";
|
||||
if (!empty($field->title)) echo "<div class=\"row\"><h3>".$field->title."</h3></div>";
|
||||
if (isset($field->generated)) {
|
||||
echo "<input type=\"hidden\" value=\"generated:{$field->generated}:{$field->value}\" name=\"{$field->key}\" id=\"{$template->name}_{$field->key}\" class=\"additional_{$template->name}\">";
|
||||
}
|
||||
else {
|
||||
echo "<div class=\"row\">";
|
||||
echo "<div>
|
||||
<label>".$field->description."</label>
|
||||
<input ".($field->required=="true" ? "required" : "")." type=\"".(!empty($field->type) ? $field->type : "text")."\" value=\"{$field->value}\" name=\"{$field->key}\" id=\"{$template->name}_{$field->key}\" class=\"additional_{$template->name}\">
|
||||
</div>";
|
||||
echo "<label>".$field->description."</label>
|
||||
<div class=\"input-container\"><input ".($field->required=="true" ? "required" : "")." type=\"".(!empty($field->type) ? $field->type : "text")."\" value=\"{$field->value}\" name=\"{$field->key}\" id=\"{$template->name}_{$field->key}\" class=\"additional_{$template->name}\"></div>
|
||||
<div class=\"info-container\">
|
||||
";
|
||||
if (!empty($field->info)) echo "
|
||||
<div class=\"info-container\">
|
||||
<span class=\"info-icon\">i</span>
|
||||
<div class=\"tooltip\">{$field->info}</div>
|
||||
</div>
|
||||
";
|
||||
echo "</div>";
|
||||
echo "</div>";
|
||||
if (!empty($field->details)) echo "<div class=\"row\"><i>".$field->details."</i></div>";
|
||||
}
|
||||
echo "</div>";
|
||||
}
|
||||
|
||||
echo "</div>";
|
||||
|
||||
echo "<div class=\"row buttons\">";
|
||||
if ($more) {
|
||||
echo "
|
||||
<div class=\"mb-3\" style=\"margin-right:30px;\">
|
||||
<button class=\"btn btn-lg btn-primary btn-block\" type=\"button\" id=\"more_{$template->name}_btn\">More</button>
|
||||
</div>";
|
||||
}
|
||||
if ($reinstall) {
|
||||
echo "
|
||||
<div class=\"mb-3\">
|
||||
<div class=\"mb-3\" style=\"margin-right:30px;\">
|
||||
<button class=\"btn btn-lg btn-primary btn-block\" type=\"submit\" id=\"update_{$template->name}_btn\" onclick=\"update_deployment('{$template->name}')\">Update</button>
|
||||
</div>";
|
||||
}
|
||||
echo "
|
||||
<div class=\"mb-3\" style=\"margin-left:30px;\">
|
||||
<div class=\"mb-3\" style=\"margin-right:30px;\">
|
||||
<button class=\"btn btn-lg btn-primary btn-block\" type=\"submit\" id=\"deploy_{$template->name}_btn\">".($reinstall ? "Reinstall" : "Install")."</button>
|
||||
</div>";
|
||||
if ($reinstall) {
|
||||
echo "
|
||||
<div class=\"mb-3\" style=\"margin-left:30px;\">
|
||||
<div class=\"mb-3\" style=\"margin-right:30px;\">
|
||||
<button class=\"btn btn-lg btn-primary btn-block\" type=\"button\" id=\"uninstall_{$template->name}_btn\" onclick=\"uninstall('{$template->name}')\">Uninstall</button>
|
||||
</div>";
|
||||
}
|
||||
echo "<div class=\"mb-3\" style=\"margin-left:230px;float:\">
|
||||
echo "<div class=\"mb-3\" style=\"margin-left:200px;float:\">
|
||||
<button class=\"btn btn-lg btn-primary btn-block\" type=\"button\" id=\"cancel_{$template->name}_btn\">Cancel</button>
|
||||
</div>";
|
||||
echo "
|
||||
</div>
|
||||
</form></fieldset>
|
||||
</form>
|
||||
</div>
|
||||
<script>
|
||||
jQuery('.advanced').each(function() {
|
||||
jQuery(this).hide();
|
||||
});
|
||||
jQuery('#more_{$template->name}_btn').click(function() {
|
||||
currentText = jQuery(this).text();
|
||||
jQuery(this).text(currentText === 'More' ? 'Less' : 'More');
|
||||
jQuery('.advanced').each(function() {
|
||||
jQuery(this).toggle();
|
||||
});
|
||||
});
|
||||
jQuery('#deploy_{$template->name}_form').submit(function() {
|
||||
".($reinstall ? "redeploy" : "deploy")."('{$template->name}');
|
||||
return false;
|
||||
});
|
||||
jQuery('#cancel_{$template->name}_btn').click(function() {
|
||||
$('div#{$template->name}').html('');
|
||||
jQuery('div#{$template->name}').html('');
|
||||
document.getElementById('myAppsContainer').classList.remove('hidden'); // manage3
|
||||
document.getElementById('popup').classList.add('hidden'); // manage2
|
||||
});
|
||||
</script>
|
||||
@@ -297,7 +335,7 @@ switch ($_GET["op"]) {
|
||||
case "check_letsencrypt":
|
||||
$domain = $_GET["domain"];
|
||||
$letsencrypt = check_letsencrypt();
|
||||
if (empty($letsencrypt)) echo "LETSENCRYPT file doesn't exists...";
|
||||
if (empty($letsencrypt)) echo ""; //echo "LETSENCRYPT file doesn't exists...";
|
||||
elseif ($letsencrypt=="ERROR") echo "LETSENCRYPT file: read JSON error...";
|
||||
else {
|
||||
show_letsencrypt($letsencrypt, $domain);
|
||||
@@ -310,7 +348,7 @@ switch ($_GET["op"]) {
|
||||
$text="A deployment ({$_GET["additional"]}) has already started.<br>Please wait and do not start a new one...";
|
||||
}
|
||||
else {
|
||||
$text="Install in progress... Please wait...";
|
||||
$text="Install in progress...";
|
||||
$fields = $_GET;
|
||||
unset($fields["op"]);
|
||||
unset($fields["additional"]);
|
||||
@@ -455,6 +493,15 @@ switch ($_GET["op"]) {
|
||||
}
|
||||
echo $text;
|
||||
break;
|
||||
case "version":
|
||||
$arr = check_response("version");
|
||||
if (!empty($arr)) {
|
||||
$data = $arr["version"];
|
||||
echo "Framework version: ".$data["VERSION"]."\n";
|
||||
}
|
||||
else echo "Framework version not found\n";
|
||||
echo "Frontend version: ".file_get_contents("version.html");
|
||||
break;
|
||||
case "repositories":
|
||||
$arr = array("STATUS" => 0);
|
||||
$json = json_encode($arr, JSON_UNESCAPED_SLASHES|JSON_PRETTY_PRINT);
|
||||
@@ -488,21 +535,29 @@ switch ($_GET["op"]) {
|
||||
else echo "ERROR";
|
||||
break;
|
||||
case "check_vpn":
|
||||
$key = "check_vpn";
|
||||
$arr = array("STATUS" => 0);
|
||||
$json = json_encode($arr, JSON_UNESCAPED_SLASHES|JSON_PRETTY_PRINT);
|
||||
set_output($key,$json);
|
||||
sleep(1);
|
||||
$arr = check_response($key);
|
||||
if (!empty($arr)) {
|
||||
$data = $arr[$key];
|
||||
echo $data["STATUS"];
|
||||
remove_response("$key");
|
||||
}
|
||||
else echo "NO";
|
||||
$arr = check_response("save_vpn");
|
||||
if (!empty($arr)) {
|
||||
$data = $arr["save_vpn"];
|
||||
echo $data["STATUS"];
|
||||
if ($data["STATUS"]=="1") remove_response("save_vpn"); // vpn start has finished
|
||||
}
|
||||
else {
|
||||
$key = "check_vpn";
|
||||
$arr = array("STATUS" => 0);
|
||||
$json = json_encode($arr, JSON_UNESCAPED_SLASHES|JSON_PRETTY_PRINT);
|
||||
set_output($key,$json);
|
||||
sleep(1);
|
||||
$arr = check_response($key);
|
||||
if (!empty($arr)) {
|
||||
$data = $arr[$key];
|
||||
echo $data["STATUS"];
|
||||
remove_response("$key");
|
||||
}
|
||||
else echo "NO";
|
||||
}
|
||||
break;
|
||||
case "save_vpn":
|
||||
remove_response("save_repository");
|
||||
//remove_response("save_repository"); // ???
|
||||
|
||||
$arr = array(
|
||||
"VPN_DOMAIN" => $_GET["vpn_domain"],
|
||||
|
||||
777
style.css
Normal file
777
style.css
Normal file
@@ -0,0 +1,777 @@
|
||||
:root {
|
||||
--highlight-color: #FFB806;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: 'Switzer', sans-serif;
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
background-color: #000;
|
||||
color: white;
|
||||
display: flex;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
table {border: 1px solid var(--highlight-color); width:100%;}
|
||||
table th {padding-left: 20px; text-align: left; color: var(--highlight-color); width: 25%;}
|
||||
table td {padding-left: 20px; text-align:left; width: 25%;}
|
||||
|
||||
.progress-box {
|
||||
max-width: 300px;
|
||||
margin: auto;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
border: 2px solid #41464f;
|
||||
padding: 30px 30px 0px 30px;
|
||||
border-radius: 20px;
|
||||
}
|
||||
.progress-container-shadow {
|
||||
width: 300px;
|
||||
height: 40px;
|
||||
background-color: var(--highlight-color);
|
||||
border-radius: 5px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
margin: 40px auto 0px auto;
|
||||
}
|
||||
.progress-container-shadow::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
pointer-events: none;
|
||||
}
|
||||
.progress-container {
|
||||
width: 300px;
|
||||
height: 40px;
|
||||
border-radius: 5px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
margin: 0px;
|
||||
top:-45px;
|
||||
left:5px;
|
||||
}
|
||||
.progress-bar {
|
||||
height: 100%;
|
||||
background-color: var(--highlight-color);
|
||||
width: 0%;
|
||||
border-radius: 5px;
|
||||
transition: width 0.3s ease;
|
||||
position: relative;
|
||||
}
|
||||
.progress-text {
|
||||
font-size: 20px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
font-weight: bold;
|
||||
color: #000000;
|
||||
z-index: 10;
|
||||
}
|
||||
.progress-title {
|
||||
text-align: left;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.progress-description {
|
||||
text-align: left;
|
||||
font-size: 16px;
|
||||
margin-bottom: 10px;
|
||||
color: #999;
|
||||
min-height: 40px;
|
||||
}
|
||||
.controls {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
width: 250px;
|
||||
background-color: #101214;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
/*height: 100vh;*/
|
||||
justify-content: space-between;
|
||||
margin: 20px;
|
||||
border-radius: 20px;
|
||||
transition: width 0.3s;
|
||||
}
|
||||
|
||||
.sidebar-top {
|
||||
padding: 20px 0px 0px 0px;
|
||||
overflow-y: auto;
|
||||
flex: 1 1 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center; /* ez teszi középre függőlegesen a menüt */
|
||||
}
|
||||
|
||||
.logo {
|
||||
text-align: center;
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.logo img {
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.loading {
|
||||
text-align:center;
|
||||
margin-top:300px;
|
||||
}
|
||||
|
||||
.confirm {
|
||||
border: 2px solid #41464f;
|
||||
border-radius: 10px;
|
||||
margin-top:250px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.menu {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center; /* középre igazít függőlegesen */
|
||||
flex-grow: 1;
|
||||
gap: 5px;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.vpn-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
color: white;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 10px 20px;
|
||||
cursor: pointer;
|
||||
color: white;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
|
||||
.menu-item:hover {
|
||||
color: var(--highlight-color);
|
||||
}
|
||||
|
||||
.menu-item i {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.menu-item span {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.menu-item img {
|
||||
width: 24px;
|
||||
}
|
||||
|
||||
.menu-item.active {
|
||||
background-color: var(--highlight-color);
|
||||
color: black;
|
||||
border-radius: 10px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.menu-item.active:hover {
|
||||
color: black;
|
||||
}
|
||||
|
||||
.menu-item span.arrow {
|
||||
margin-left: auto;
|
||||
color: gray;
|
||||
font-size: 20px;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.menu-item.open .arrow {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.submenu {
|
||||
display: none;
|
||||
margin-left: 40px;
|
||||
flex-direction: column;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.submenu-item {
|
||||
padding: 5px 14px;
|
||||
font-size: 14px;
|
||||
color: #ffffff;
|
||||
cursor: pointer;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.submenu-item:hover {
|
||||
color: #000000;
|
||||
background-color: var(--highlight-color);
|
||||
}
|
||||
|
||||
|
||||
/* Switch container */
|
||||
.switch {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 60px;
|
||||
height: 26px;
|
||||
}
|
||||
|
||||
/* Hide native checkbox */
|
||||
.switch input {
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
/* Slider background */
|
||||
.slider-text {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: #ccc;
|
||||
border-radius: 8px;
|
||||
transition: background-color 0.3s;
|
||||
display: flex !important;
|
||||
align-items: center;
|
||||
justify-content: flex-end; /* default: OFF on the right */
|
||||
padding: 0 8px;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
/* Circle */
|
||||
.slider-text::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
height: 22px;
|
||||
width: 22px;
|
||||
left: 2px;
|
||||
top: 2px;
|
||||
background-color: white;
|
||||
border-radius: 50%;
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
|
||||
/* Checked: move dot, change background and text alignment */
|
||||
.switch input:checked + .slider-text {
|
||||
background-color: var(--highlight-color);
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
/* Dot animation */
|
||||
.switch input:checked + .slider-text::before {
|
||||
transform: translateX(34px);
|
||||
}
|
||||
|
||||
|
||||
/* Status label */
|
||||
.status-label {
|
||||
font-size: 12px;
|
||||
color: #888;
|
||||
min-width: 28px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.details {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.yellow-row {
|
||||
flex-shrink: 0;
|
||||
max-width:250px;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
box-sizing: border-box;
|
||||
margin: 0px;
|
||||
width: 100%;
|
||||
padding: 0px 20px 20px 20px;
|
||||
}
|
||||
|
||||
.yellow-box {
|
||||
background-image: url('img/yellow-box.png');
|
||||
background-repeat: no-repeat;
|
||||
/*background-color: var(--highlight-color);
|
||||
border-radius: 20px 20px 0px 20px;*/
|
||||
color: black;
|
||||
text-align: left;
|
||||
margin: 0px;
|
||||
padding: 20px 18px;
|
||||
font-weight: bold;
|
||||
font-size: 12px;
|
||||
width: 156px;
|
||||
height: 176px;
|
||||
}
|
||||
|
||||
.yellow-corner {
|
||||
padding:0px;
|
||||
border: 0px;
|
||||
display: flex;
|
||||
margin: 0px;
|
||||
margin-top: auto;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.pro-text {
|
||||
font-size: 16px;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.grey-box {
|
||||
background-image: url('img/grey-box.png');
|
||||
background-repeat: no-repeat;
|
||||
/* border: 2px solid #41464f; */
|
||||
border-radius: 20px 20px 0px 20px;
|
||||
color: #999;
|
||||
text-align: left;
|
||||
margin: 0px;
|
||||
padding: 20px 18px;
|
||||
font-weight: bold;
|
||||
font-size: 12px;
|
||||
width: 158px;
|
||||
height: 178px;
|
||||
}
|
||||
|
||||
.vpn-text {
|
||||
display: flex;
|
||||
align-items: center; /* Ez igazítja középre függőlegesen a tartalmat */
|
||||
gap: 10px; /* Távolság kép és szöveg között (opcionális) */
|
||||
font-size: 16px;
|
||||
color: var(--highlight-color);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.main {
|
||||
flex: 1;
|
||||
padding: 30px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
#appsContainer {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 16px;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.app {
|
||||
border: 1px solid #41464f;
|
||||
border-radius: 15px;
|
||||
text-align: left;
|
||||
padding: 20px;
|
||||
width: 130px;
|
||||
min-height: 200px;
|
||||
text-align: left;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: left;
|
||||
}
|
||||
|
||||
.app-img {
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.app img {
|
||||
border-radius: 15px;
|
||||
background-color: #101214;
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
object-fit: contain;
|
||||
margin-bottom: 20px;
|
||||
padding: 30px;
|
||||
}
|
||||
|
||||
.app-label {
|
||||
font-size: 10px;
|
||||
color: #cccccc;
|
||||
margin-bottom: 10px;
|
||||
align-items: left;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.app-name {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.more-btn {
|
||||
background-color: inherit;
|
||||
color: #cccccc;
|
||||
border: 1px solid #cccccc;
|
||||
border-radius: 15px;
|
||||
padding: 18px;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.more-btn:hover {
|
||||
color: var(--highlight-color);
|
||||
border: 1px solid var(--highlight-color);
|
||||
}
|
||||
|
||||
.app-details {
|
||||
padding: 0px 50px;
|
||||
}
|
||||
|
||||
.app-fields {
|
||||
border: 1px solid #41464f;
|
||||
border-radius: 15px;
|
||||
text-align: left;
|
||||
padding: 20px;
|
||||
margin: 30px 0px 10px 0px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: left;
|
||||
}
|
||||
|
||||
.app-fields .row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 5px 20px;
|
||||
border-radius: 10px;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
#letsencrypt {
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
.header-block {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
padding: 20px 0px;
|
||||
}
|
||||
|
||||
.logo-and-text {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.applogo img {
|
||||
border-radius: 15px;
|
||||
background-color: #101214;
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
object-fit: contain;
|
||||
padding: 40px;
|
||||
}
|
||||
|
||||
.text-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 18px;
|
||||
margin: 4px 0;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.description {
|
||||
font-size: 16px;
|
||||
margin: 20px 0 0;
|
||||
color: #999;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.notification-btn {
|
||||
background-color: var(--highlight-color);
|
||||
color: black;
|
||||
border: none;
|
||||
padding: 10px 20px;
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
font-weight: bold;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.main-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.main-header h1 {
|
||||
margin: 0;
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.main-header button {
|
||||
background-color: var(--highlight-color);
|
||||
color: black;
|
||||
border: none;
|
||||
padding: 10px 20px;
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
font-weight: bold;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.input-row, .input-group {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border: 1px solid #41464f;
|
||||
padding: 15px 20px;
|
||||
margin-bottom: 15px;
|
||||
border-radius: 10px;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
flex: 1;
|
||||
justify-content: flex-end;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.input-row input,
|
||||
.input-row select,
|
||||
.row input,
|
||||
.row select {
|
||||
background: transparent;
|
||||
border: 1px solid #41464f;
|
||||
padding: 8px 30px 8px 8px;
|
||||
border-radius: 10px;
|
||||
color: white;
|
||||
transition: color 0.2s;
|
||||
max-width: 40%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.row input,
|
||||
.row select {
|
||||
padding: 12px 30px 12px 12px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.input-row input:focus,
|
||||
.input-row select:focus,
|
||||
.row input,
|
||||
.row select {
|
||||
outline: none;
|
||||
background-color: black;
|
||||
color: var(--highlight-color);
|
||||
}
|
||||
|
||||
.input-row select,
|
||||
.row select {
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
background-image: url('data:image/svg+xml;utf8,<svg fill="white" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5-5 5 5zM7 14l5 5 5-5z"/></svg>');
|
||||
background-repeat: no-repeat;
|
||||
background-position: right 8px center;
|
||||
background-size: 16px;
|
||||
padding-right: 32px;
|
||||
}
|
||||
|
||||
.info-container {
|
||||
position: relative;
|
||||
left: -18px;
|
||||
top: -22px;
|
||||
display: inline-block;
|
||||
font-family: Arial, sans-serif;
|
||||
margin: 0px;
|
||||
width: 0px;
|
||||
}
|
||||
|
||||
.info-icon {
|
||||
background-color: var(--highlight-color);
|
||||
color: black;
|
||||
border-radius: 50%;
|
||||
padding: 1px 4px;
|
||||
cursor: pointer;
|
||||
font-weight: bold;
|
||||
font-size: 10px;
|
||||
text-align: center;
|
||||
line-height: 1;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.tooltip {
|
||||
visibility: hidden;
|
||||
background-color: #333;
|
||||
border-radius: 5px;
|
||||
padding: 4px 8px;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
bottom: 100%; /* above the icon */
|
||||
left: 50%;
|
||||
transform: translateX(-78%);
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s;
|
||||
/*white-space: nowrap;*/
|
||||
text-align: right;
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
.tooltip::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 100%; /* bottom of tooltip */
|
||||
left: 80%;
|
||||
margin-left: -5px;
|
||||
border-width: 5px;
|
||||
border-style: solid;
|
||||
border-color: #333 transparent transparent transparent;
|
||||
}
|
||||
|
||||
.info-container:hover .tooltip {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.clear-btn {
|
||||
position: absolute;
|
||||
right: 8px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
padding: 0;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
text-align: center;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.save-button {
|
||||
background-color: var(--highlight-color);
|
||||
color: black;
|
||||
border: none;
|
||||
padding: 15px 30px;
|
||||
font-size: 16px;
|
||||
border-radius: 10px;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
margin-top: 30px;
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
.save-button:hover {
|
||||
background-color: #f5c300;
|
||||
}
|
||||
|
||||
.buttons .btn {
|
||||
background-color: black;
|
||||
border: 1px solid #999;
|
||||
color: #999;
|
||||
padding: 10px 15px;
|
||||
font-size: 14px;
|
||||
border-radius: 5px;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
margin-top: 10px;
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
.buttons .btn:hover {
|
||||
border: 1px solid #f5c300;
|
||||
color: #f5c300;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.popup {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.popup-content {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
#popup .row {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.sidebar {
|
||||
width: 80px;
|
||||
padding: 20px 5px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
.logo span {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
justify-content: center;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.menu-item span {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.yellow-box {
|
||||
font-size: 0;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.input-row {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
width: 100%;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.input-row input,
|
||||
.input-row select {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
1
version.html
Normal file
1
version.html
Normal file
@@ -0,0 +1 @@
|
||||
1.1.15
|
||||
Reference in New Issue
Block a user