Updated EEPROM landing page.

This commit is contained in:
Pachira 2022-07-05 16:00:20 +00:00
parent ed3068e29c
commit 6ee8738686
4 changed files with 220 additions and 59 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 97 KiB

110
public/assets/style.css Normal file
View 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
View 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">&nbsp;</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>

View file

@ -21,18 +21,6 @@ function eepromOriginAllowed(string $origin): bool {
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')) {
$reqMethod = 'GET'; // short domain is read only, prevent deleting
$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');
if($reqPath === '/' || $reqPath === '/stats' || $reqPath === '/html') {
if($reqPath === '/' || $reqPath === '/stats.json') {
$fileCount = 0;
$userCount = 0;
$totalSize = 0;
@ -211,60 +199,22 @@ if($reqPath === '/' || $reqPath === '/stats' || $reqPath === '/html') {
$getUserStats->execute();
$userStats = $getUserStats->execute() ? $getUserStats->fetchObject() : null;
if(!empty($userStats)) {
if(!empty($userStats))
$userCount = intval($userStats->amount);
}
if($reqPath === '/stats') {
if($reqPath === '/stats.json') {
header('Content-Type: application/json; charset=utf-8');
echo json_encode([
'files_size' => $totalSize,
'files_count' => $fileCount,
'files_types' => $uniqueTypes,
'users_count' => $userCount,
'size' => $totalSize,
'files' => $fileCount,
'types' => $uniqueTypes,
'members' => $userCount,
]);
return;
}
$totalSizeFmt = eepromByteSymbol($totalSize);
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;
header('Content-Type: text/html; charset=utf-8');
header('X-Accel-Redirect: /index.html');
return;
}