Updated EEPROM landing page.
This commit is contained in:
parent
ed3068e29c
commit
6ee8738686
4 changed files with 220 additions and 59 deletions
BIN
public/assets/eeprom-logo.png
Normal file
BIN
public/assets/eeprom-logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 97 KiB |
110
public/assets/style.css
Normal file
110
public/assets/style.css
Normal file
|
|
@ -0,0 +1,110 @@
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
html,
|
||||||
|
body {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
background-color: #111;
|
||||||
|
color: #fff;
|
||||||
|
font: 12px/20px Verdana, Geneva, 'Dejavu Sans', Arial, Helvetica, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eeprom {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-start;
|
||||||
|
align-items: center;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eeprom-inner {
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eeprom-header {
|
||||||
|
margin: 20px 0;
|
||||||
|
padding: 0 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eeprom-logo {
|
||||||
|
max-width: 590px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.eeprom-description {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eeprom-stats {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eeprom-stat {
|
||||||
|
text-align: center;
|
||||||
|
margin: 10px;
|
||||||
|
}
|
||||||
|
.eeprom-stat-title {
|
||||||
|
font-size: 1.4em;
|
||||||
|
}
|
||||||
|
.eeprom-stat-num {
|
||||||
|
height: 50px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.eeprom-stat-num-big {
|
||||||
|
font-size: 2em;
|
||||||
|
line-height: 1.2em;
|
||||||
|
}
|
||||||
|
.eeprom-stat-num-small {
|
||||||
|
font-size: .9em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eeprom-divider {
|
||||||
|
height: 60px;
|
||||||
|
background-color: #8559a5;
|
||||||
|
width: 1px;
|
||||||
|
margin: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eeprom-footer {
|
||||||
|
font-size: .8em;
|
||||||
|
opacity: .6;
|
||||||
|
text-align: center;
|
||||||
|
margin: 20px 0;
|
||||||
|
padding: 0 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eeprom-footer a {
|
||||||
|
color: inherit;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
.eeprom-footer a:hover,
|
||||||
|
.eeprom-footer a:focus {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media(max-width: 600px) {
|
||||||
|
.eeprom-divider {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eeprom-stat {
|
||||||
|
border: 1px solid #8559a5;
|
||||||
|
border-radius: 2px;
|
||||||
|
padding: 10px;
|
||||||
|
min-width: 200px;
|
||||||
|
}
|
||||||
|
}
|
||||||
101
public/index.html
Normal file
101
public/index.html
Normal file
|
|
@ -0,0 +1,101 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8"/>
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1"/>
|
||||||
|
<title>EEPROM</title>
|
||||||
|
<link href="/assets/style.css" type="text/css" rel="stylesheet"/>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="eeprom">
|
||||||
|
<div class="eeprom-inner">
|
||||||
|
<div class="eeprom-header">
|
||||||
|
<div class="eeprom-logo">
|
||||||
|
<img src="/assets/eeprom-logo.png" alt="EEPROM" class="eeprom-logo" />
|
||||||
|
</div>
|
||||||
|
<div class="eeprom-description">
|
||||||
|
<p>File Upload Service</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="eeprom-stats">
|
||||||
|
<div class="eeprom-stat">
|
||||||
|
<div class="eeprom-stat-num">
|
||||||
|
<div id="-eeprom-stat-size-fmt" class="eeprom-stat-num-big">---</div>
|
||||||
|
<div id="-eeprom-stat-size-byte" class="eeprom-stat-num-small"> </div>
|
||||||
|
</div>
|
||||||
|
<div class="eeprom-stat-title">
|
||||||
|
Size
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="eeprom-divider"></div>
|
||||||
|
<div class="eeprom-stat">
|
||||||
|
<div class="eeprom-stat-num">
|
||||||
|
<div id="-eeprom-stat-files" class="eeprom-stat-num-big">---</div>
|
||||||
|
</div>
|
||||||
|
<div class="eeprom-stat-title">
|
||||||
|
Files
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="eeprom-divider"></div>
|
||||||
|
<div class="eeprom-stat">
|
||||||
|
<div class="eeprom-stat-num">
|
||||||
|
<div id="-eeprom-stat-types" class="eeprom-stat-num-big">---</div>
|
||||||
|
</div>
|
||||||
|
<div class="eeprom-stat-title">
|
||||||
|
Types
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="eeprom-divider"></div>
|
||||||
|
<div class="eeprom-stat">
|
||||||
|
<div class="eeprom-stat-num">
|
||||||
|
<div id="-eeprom-stat-members" class="eeprom-stat-num-big">---</div>
|
||||||
|
</div>
|
||||||
|
<div class="eeprom-stat-title">
|
||||||
|
Uploaders
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="eeprom-footer">
|
||||||
|
<a href="https://flash.moe" target="_blank" rel="noopener">Flashwave</a> 2020-2022
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<script type="text/javascript">
|
||||||
|
var sSizeFmt = document.getElementById('-eeprom-stat-size-fmt'),
|
||||||
|
sSizeByte = document.getElementById('-eeprom-stat-size-byte'),
|
||||||
|
sFiles = document.getElementById('-eeprom-stat-files'),
|
||||||
|
sTypes = document.getElementById('-eeprom-stat-types'),
|
||||||
|
sMembers = document.getElementById('-eeprom-stat-members');
|
||||||
|
|
||||||
|
Number.prototype.formatFileSize = function(binary) {
|
||||||
|
if(this < 1)
|
||||||
|
return 'Zero Bytes';
|
||||||
|
|
||||||
|
var div = binary ? 1024 : 1000,
|
||||||
|
exp = Math.floor(Math.log(this) / Math.log(div)),
|
||||||
|
size = this / Math.pow(div, exp);
|
||||||
|
|
||||||
|
var symbol = ['', 'K', 'M', 'G', 'T', 'P', 'E', 'Z', 'Y'][exp];
|
||||||
|
|
||||||
|
return size.toFixed(2) + ' ' + symbol + (binary ? 'i' : '') + 'B';
|
||||||
|
};
|
||||||
|
|
||||||
|
var eUpdateStats = function() {
|
||||||
|
var xhr = new XMLHttpRequest;
|
||||||
|
xhr.onload = function() {
|
||||||
|
var stats = JSON.parse(xhr.responseText);
|
||||||
|
sSizeFmt.textContent = stats.size.formatFileSize();
|
||||||
|
sSizeByte.textContent = stats.size.toLocaleString() + ' bytes';
|
||||||
|
sFiles.textContent = stats.files.toLocaleString();
|
||||||
|
sTypes.textContent = stats.types.toLocaleString();
|
||||||
|
sMembers.textContent = stats.members.toLocaleString();
|
||||||
|
};
|
||||||
|
xhr.open('GET', '/stats.json');
|
||||||
|
xhr.send();
|
||||||
|
};
|
||||||
|
|
||||||
|
eUpdateStats();
|
||||||
|
setInterval(eUpdateStats, 5 * 60 * 1000);
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -21,18 +21,6 @@ function eepromOriginAllowed(string $origin): bool {
|
||||||
return in_array($origin, $allowed);
|
return in_array($origin, $allowed);
|
||||||
}
|
}
|
||||||
|
|
||||||
function eepromByteSymbol(int $bytes, bool $decimal = true, array $symbols = ['', 'K', 'M', 'G', 'T', 'P', 'E', 'Z', 'Y']): string {
|
|
||||||
if($bytes < 1)
|
|
||||||
return '0 B';
|
|
||||||
|
|
||||||
$divider = $decimal ? 1000 : 1024;
|
|
||||||
$exp = floor(log($bytes) / log($divider));
|
|
||||||
$bytes = $bytes / pow($divider, $exp);
|
|
||||||
$symbol = $symbols[$exp];
|
|
||||||
|
|
||||||
return sprintf("%.2f %s%sB", $bytes, $symbol, $symbol !== '' && !$decimal ? 'i' : '');
|
|
||||||
}
|
|
||||||
|
|
||||||
if($_SERVER['HTTP_HOST'] !== Config::get('Uploads', 'api_domain')) {
|
if($_SERVER['HTTP_HOST'] !== Config::get('Uploads', 'api_domain')) {
|
||||||
$reqMethod = 'GET'; // short domain is read only, prevent deleting
|
$reqMethod = 'GET'; // short domain is read only, prevent deleting
|
||||||
$reqPath = '/uploads/' . trim($reqPath, '/');
|
$reqPath = '/uploads/' . trim($reqPath, '/');
|
||||||
|
|
@ -179,7 +167,7 @@ if($reqPath === '/eeprom.js' && is_file(PRM_ROOT . '/eeprom.js')) {
|
||||||
|
|
||||||
header('Content-Type: text/plain; charset=us-ascii');
|
header('Content-Type: text/plain; charset=us-ascii');
|
||||||
|
|
||||||
if($reqPath === '/' || $reqPath === '/stats' || $reqPath === '/html') {
|
if($reqPath === '/' || $reqPath === '/stats.json') {
|
||||||
$fileCount = 0;
|
$fileCount = 0;
|
||||||
$userCount = 0;
|
$userCount = 0;
|
||||||
$totalSize = 0;
|
$totalSize = 0;
|
||||||
|
|
@ -211,60 +199,22 @@ if($reqPath === '/' || $reqPath === '/stats' || $reqPath === '/html') {
|
||||||
$getUserStats->execute();
|
$getUserStats->execute();
|
||||||
$userStats = $getUserStats->execute() ? $getUserStats->fetchObject() : null;
|
$userStats = $getUserStats->execute() ? $getUserStats->fetchObject() : null;
|
||||||
|
|
||||||
if(!empty($userStats)) {
|
if(!empty($userStats))
|
||||||
$userCount = intval($userStats->amount);
|
$userCount = intval($userStats->amount);
|
||||||
}
|
|
||||||
|
|
||||||
if($reqPath === '/stats') {
|
if($reqPath === '/stats.json') {
|
||||||
header('Content-Type: application/json; charset=utf-8');
|
header('Content-Type: application/json; charset=utf-8');
|
||||||
echo json_encode([
|
echo json_encode([
|
||||||
'files_size' => $totalSize,
|
'size' => $totalSize,
|
||||||
'files_count' => $fileCount,
|
'files' => $fileCount,
|
||||||
'files_types' => $uniqueTypes,
|
'types' => $uniqueTypes,
|
||||||
'users_count' => $userCount,
|
'members' => $userCount,
|
||||||
]);
|
]);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
$totalSizeFmt = eepromByteSymbol($totalSize);
|
header('Content-Type: text/html; charset=utf-8');
|
||||||
|
header('X-Accel-Redirect: /index.html');
|
||||||
if($reqPath === '/html') {
|
|
||||||
header('Content-Type: text/html; charset=utf-8');
|
|
||||||
echo <<<HTML
|
|
||||||
<!doctype html>
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8"/>
|
|
||||||
<title>Flashii EEPROM</title>
|
|
||||||
<style type="text/css">
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<pre>
|
|
||||||
________________ ____ ____ __ ___
|
|
||||||
/ ____/ ____/ __ \/ __ \/ __ \/ |/ /
|
|
||||||
/ __/ / __/ / /_/ / /_/ / / / / /|_/ /
|
|
||||||
/ /___/ /___/ ____/ _, _/ /_/ / / / /
|
|
||||||
/_____/_____/_/ /_/ |_|\____/_/ /_/
|
|
||||||
|
|
||||||
Currently serving {$totalSizeFmt} ({$totalSize} bytes) of {$fileCount} files in {$uniqueTypes} unique file types from {$userCount} users.
|
|
||||||
</pre>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
HTML;
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
echo <<<ASCII
|
|
||||||
________________ ____ ____ __ ___
|
|
||||||
/ ____/ ____/ __ \/ __ \/ __ \/ |/ /
|
|
||||||
/ __/ / __/ / /_/ / /_/ / / / / /|_/ /
|
|
||||||
/ /___/ /___/ ____/ _, _/ /_/ / / / /
|
|
||||||
/_____/_____/_/ /_/ |_|\____/_/ /_/
|
|
||||||
|
|
||||||
Currently serving {$totalSizeFmt} ({$totalSize} bytes) of {$fileCount} files in {$uniqueTypes} unique file types from {$userCount} users.
|
|
||||||
\r\n
|
|
||||||
ASCII;
|
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue