396 lines
14 KiB
HTML
396 lines
14 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="hu">
|
||
<head>
|
||
<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=16" />
|
||
</head>
|
||
<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>
|
||
<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.svg" 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>
|
||
<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.svg" alt="on" /></span>
|
||
<span id="vpn_off" class="hidden"><img src="/img/off.svg" alt="off" /></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</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>
|
||
</div>
|
||
</div>
|
||
|
||
<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=57"></script>
|
||
</body>
|
||
</html>
|