209 lines
5.7 KiB
HTML
209 lines
5.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<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=3" />
|
|
</head>
|
|
<body id="scan" class="text-center">
|
|
<div class="main">
|
|
<div id="myAppsContainer">
|
|
<div class="logo" style="margin-top:100px">
|
|
<img src="/img/logo.png" alt="Safebox"/>
|
|
<span>Safebox</span>
|
|
</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>
|
|
const progressBar = document.getElementById('progressBar');
|
|
const progressText = document.getElementById('progressText');
|
|
let currentProgress = 0;
|
|
let progressInterval;
|
|
|
|
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();
|
|
}
|
|
|
|
function startProgress() {
|
|
clearInterval(progressInterval);
|
|
const duration = 60000; // 60 seconds
|
|
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';
|
|
}
|
|
|
|
function redirectToManage() {
|
|
setProgress(100);
|
|
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') {
|
|
$("#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');
|
|
start_system();
|
|
}
|
|
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');
|
|
start_system();
|
|
}
|
|
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...');
|
|
}
|
|
});
|
|
}
|
|
|
|
// Initialize
|
|
updateProgress(0);
|
|
startProgress();
|
|
|
|
check_interface();
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|