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);
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in a new issue