safebox/web-installer
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 34 Wiki Activity

changes

Browse Source
This commit is contained in:
laci
2025-07-07 22:16:18 +00:00
parent e782254749
commit b194724283
3 changed files with 158 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
image.png → img/default_logo.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.2 KiB

After

Width:  |  Height:  |  Size: 3.2 KiB

190
manage3.html
View File

@@ -63,6 +63,16 @@
padding: 0 10px; padding: 0 10px;
} }
.vpn-item {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 20px;
cursor: pointer;
color: white;
transition: color 0.3s;
}
.menu-item { .menu-item {
display: flex; display: flex;
align-items: center; align-items: center;
@@ -101,6 +111,73 @@
color: black; color: black;
} }
/* 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: 26px;
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: #fff;
}
/* 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: #4CAF50;
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 { .details {
color: white; color: white;
text-decoration: none; text-decoration: none;
@@ -553,6 +630,17 @@
<span>Safebox</span> <span>Safebox</span>
</div> </div>
<div class="menu"> <div class="menu">
<div class="menu-item" style="margin-bottom:20px">
<img src="/img/globe.png" data-src="/img/globe.png" data-hover="/img/globe.png" alt="VPN" />
<div class="menu-label">
<span id="vpnBtn">VPN</span>
<label class="switch">
<input type="checkbox" id="vpnToggle">
<span class="slider-text"><span class="switch-label">OFF</span></span>
</label>
</div>
</div>
<!-- <!--
<div class="menu-item"><i class="fas fa-th"></i><span>Applications</span></div> <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-hdd"></i><span>Disk Management</span></div>
@@ -581,43 +669,6 @@
</div> </div>
<div class="main" > <div class="main" >
<div id="myAppsContainer"> <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 id="popup" class="popup hidden">
<div class="popup-content"> <div class="popup-content">
@@ -661,6 +712,9 @@
//Appok betöltése //Appok betöltése
function renderApps(all) { 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>'; 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 appsContainer = document.getElementById('appsContainer');
const updatesBtn = document.getElementById('updatesBtn'); const updatesBtn = document.getElementById('updatesBtn');
@@ -688,6 +742,7 @@
}); });
} }
//TODO: Ilyen függvényeket kell csinálni és a listenerekhez adni az egyes részeket //TODO: Ilyen függvényeket kell csinálni és a listenerekhez adni az egyes részeket
function renderText(title) { function renderText(title) {
//TODO: itt kell a buttont editálni és így kell hozzáadni hozzá mindent //TODO: itt kell a buttont editálni és így kell hozzáadni hozzá mindent
@@ -788,6 +843,40 @@
<button id="repositoriesBtn" class="save-button">Repositories</button> <button id="repositoriesBtn" class="save-button">Repositories</button>
<button id="systemservicesBtn" class="save-button">System services</button> <button id="systemservicesBtn" class="save-button">System services</button>
</div> </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 servicesBtn = document.getElementById('servicesBtn');
const repositoriesBtn = document.getElementById('repositoriesBtn'); const repositoriesBtn = document.getElementById('repositoriesBtn');
@@ -848,19 +937,22 @@
monitorBtn.addEventListener('click', () => {renderText('Monitor'); activate(monitorBtn)}); monitorBtn.addEventListener('click', () => {renderText('Monitor'); activate(monitorBtn)});
settingsBtn.addEventListener('click', () => {renderSettings(); activate(settingsBtn)}); settingsBtn.addEventListener('click', () => {renderSettings(); activate(settingsBtn)});
// vpnBtn.addEventListener('click', () => renderVPN()); vpnBtn.addEventListener('click', () => renderVPN());
/*
closeBtn.addEventListener('click', () => { // renderApps(true);
popup.classList.add('hidden');
}); const vpnToggle = document.getElementById("vpnToggle");
const vpnLabel = document.querySelector(".switch-label");
function updateStatus() {
vpnLabel.textContent = vpnToggle.checked ? "ON" : "OFF";
}
vpnToggle.addEventListener("change", updateStatus);
// Alapállapot beállítása
updateStatus();
popup.addEventListener('click', (event) => {
if (event.target === popup) {
popup.classList.add('hidden');
}
});
*/
// renderApps(false);
}); });
</script> </script>

20
scan.php
View File

@@ -147,7 +147,7 @@ switch ($_GET["op"]) {
$service_name = strtolower($service_name); $service_name = strtolower($service_name);
$version = $content["version"]; $version = $content["version"];
$icon = $content["icon"]; $icon = $content["icon"];
if (empty($icon) || $icon == "null") $icon = "image.png"; // default icon image if (empty($icon) || $icon == "null") $icon = "img/default_logo.png"; // default icon image
if (array_key_exists($service_name,$data["INSTALLED_SERVICES"])) $installed = "true"; if (array_key_exists($service_name,$data["INSTALLED_SERVICES"])) $installed = "true";
else $installed = "false"; else $installed = "false";
if (!empty($deployments)) $deployments .= ", "; if (!empty($deployments)) $deployments .= ", ";
@@ -215,6 +215,7 @@ switch ($_GET["op"]) {
echo "<form action=\"#\" method=\"post\" id=\"deploy_{$template->name}_form\">"; echo "<form action=\"#\" method=\"post\" id=\"deploy_{$template->name}_form\">";
echo "<div class=\"app-fields\">"; echo "<div class=\"app-fields\">";
foreach ($template->fields as $field) { foreach ($template->fields as $field) {
echo "<div class=\"app-field ".($field->advanced ? "advanced" : "")."\">";
if (!empty($field->title)) echo "<div class=\"row\"><h3>".$field->title."</h3></div>"; if (!empty($field->title)) echo "<div class=\"row\"><h3>".$field->title."</h3></div>";
if (isset($field->generated)) { 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}\">"; echo "<input type=\"hidden\" value=\"generated:{$field->generated}:{$field->value}\" name=\"{$field->key}\" id=\"{$template->name}_{$field->key}\" class=\"additional_{$template->name}\">";
@@ -233,13 +234,18 @@ switch ($_GET["op"]) {
echo "</div>"; echo "</div>";
if (!empty($field->details)) echo "<div class=\"row\"><i>".$field->details."</i></div>"; if (!empty($field->details)) echo "<div class=\"row\"><i>".$field->details."</i></div>";
} }
echo "</div>";
} }
echo "</div>"; echo "</div>";
echo "<div class=\"row buttons\">"; echo "<div class=\"row buttons\">";
echo "
<div class=\"mb-3\">
<button class=\"btn btn-lg btn-primary btn-block\" type=\"button\" id=\"more_{$template->name}_btn\">More</button>
</div>";
if ($reinstall) { if ($reinstall) {
echo " echo "
<div class=\"mb-3\"> <div class=\"mb-3\" style=\"margin-left:30px;\">
<button class=\"btn btn-lg btn-primary btn-block\" type=\"submit\" id=\"update_{$template->name}_btn\" onclick=\"update_deployment('{$template->name}')\">Update</button> <button class=\"btn btn-lg btn-primary btn-block\" type=\"submit\" id=\"update_{$template->name}_btn\" onclick=\"update_deployment('{$template->name}')\">Update</button>
</div>"; </div>";
} }
@@ -261,12 +267,20 @@ switch ($_GET["op"]) {
</form> </form>
</div> </div>
<script> <script>
jQuery('.advanced').each(function() {
jQuery(this).hide();
});
jQuery('#more_{$template->name}_btn').click(function() {
jQuery('.advanced').each(function() {
jQuery(this).toggle();
});
});
jQuery('#deploy_{$template->name}_form').submit(function() { jQuery('#deploy_{$template->name}_form').submit(function() {
".($reinstall ? "redeploy" : "deploy")."('{$template->name}'); ".($reinstall ? "redeploy" : "deploy")."('{$template->name}');
return false; return false;
}); });
jQuery('#cancel_{$template->name}_btn').click(function() { 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('myAppsContainer').classList.remove('hidden'); // manage3
document.getElementById('popup').classList.add('hidden'); // manage2 document.getElementById('popup').classList.add('hidden'); // manage2
}); });