<!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>