arozos-mirror/src/web/SystemAO/info/overview.html

<style>
#ov-root {
    --ov-bg: #ffffff;
    --ov-border: #e5e5e5;
    --ov-text: #1f1f1f;
    --ov-dim: #676767;
    --ov-soft: #f5f5f5;
    --ov-shadow: 0 4px 20px rgba(0,0,0,0.08);
    background: var(--ov-bg);
    border: 1px solid var(--ov-border);
    border-radius: 12px;
    box-shadow: var(--ov-shadow);
    color: var(--ov-text);
    padding: 14px;
    margin-bottom: 4px;
    font-family: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

body.dark #ov-root {
    --ov-bg: #2b2b2b;
    --ov-border: #3b3b3b;
    --ov-text: #ececec;
    --ov-dim: #aaaaaa;
    --ov-soft: #343434;
    --ov-shadow: 0 8px 22px rgba(0,0,0,0.3);
}

#ov-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

#ov-user {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

#ov-avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid var(--ov-border);
    background: var(--ov-soft);
}

#ov-user-meta { min-width: 0; }
#ov-username {
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#ov-usergroup {
    margin-top: 1px;
    font-size: 12px;
    color: var(--ov-dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#ov-actions { display: flex; align-items: center; gap: 8px; }

#ov-logout {
    border: 1px solid var(--ov-border);
    background: var(--ov-soft);
    color: var(--ov-text);
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 10px;
    cursor: pointer;
}

#ov-host {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    padding: 8px 10px;
    border-radius: 9px;
    background: var(--ov-soft);
    border: 1px solid var(--ov-border);
}

#ov-host-icon-wrapper{
    width: 100%;
    display: flex;
    justify-content: end;
}
#ov-host-icon {
    width: 100px;
    height: auto;
    border-radius: 5px;
    object-fit: cover;
    background: var(--ov-bg);
    margin-top: 1em;
}

#ov-host-text {
    min-width: 0;
    font-size: 12px;
    color: var(--ov-dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#ov-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(140px, 1fr));
    gap: 8px;
}

.ov-card {
    border: 1px solid var(--ov-border);
    border-radius: 10px;
    background: var(--ov-soft);
    padding: 10px;
}

.ov-label {
    font-size: 11px;
    color: var(--ov-dim);
    margin-bottom: 4px;
}

.ov-value {
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.35;
    word-break: break-word;
}

#ov-home-status { display: inline-flex; align-items: center; gap: 6px; }
#ov-home-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #c42b1c;
}
#ov-home-dot.online { background: #107c10; }

@media (max-width: 920px) {
    #ov-grid { grid-template-columns: repeat(2, minmax(120px, 1fr)); }
}

@media (max-width: 620px) {
    #ov-root { padding: 10px; }
    #ov-grid { grid-template-columns: 1fr; }
    #ov-top { flex-wrap: wrap; }
}
</style>

<div id="ov-root">
    <div id="ov-top">
        <div id="ov-user">
            <img id="ov-avatar" src="../../SystemAO/users/img/user.svg" alt="">
            <div id="ov-user-meta">
                <div id="ov-username">USER</div>
                <div id="ov-usergroup">@usergroup</div>
            </div>
        </div>
        <div id="ov-actions">
            <button id="ov-logout" onclick="ovLogout()" locale="overview/logout">Logout</button>
        </div>
    </div>

    <div id="ov-host"> 
        <div id="ov-host-text"><span id="ov-hostname">-</span> · <span id="ov-version">-</span></div>
    </div>

    <div id="ov-grid">
        <div class="ov-card">
            <div class="ov-label" locale="overview/used_space">Used Space</div>
            <div class="ov-value" id="ov-used">-</div>
        </div>
        <div class="ov-card">
            <div class="ov-label" locale="overview/total_space">Total Space</div>
            <div class="ov-value" id="ov-total">-</div>
        </div>
        <div class="ov-card">
            <div class="ov-label" locale="overview/personal_homepage">Homepage</div>
            <div class="ov-value" id="ov-home-status"><span id="ov-home-dot"></span><span id="ov-home-text">-</span></div>
        </div>
        <div class="ov-card">
            <div class="ov-label" locale="overview/up_time">Up Time</div>
            <div class="ov-value" id="ov-operation" startunix="0">-</div>
        </div>
    </div>
    <div id="ov-host-icon-wrapper">
        <img id="ov-host-icon" alt="" src="../../SystemAO/img/failed.png">
    </div>
</div>

<script>
(function () {
    var overviewLocale = NewAppLocale();

    function applyTheme() {
        // Theme is driven by body.dark (set by system_setting/main.js and desktopThemeChanged).
        // Sync body.dark here for the initial load in case it isn't set yet.
        var isDark = false;
        try {
            if (typeof preferredTheme !== 'undefined') {
                isDark = (preferredTheme === 'dark' || preferredTheme === 'darkTheme');
            } else {
                ao_module_getSystemThemeColor(function (c) {
                    document.body.classList.toggle('dark', c !== 'whiteTheme');
                });
                return;
            }
        } catch (e) {}
        document.body.classList.toggle('dark', isDark);
    }

    function ovS(key, fallback) {
        return overviewLocale ? overviewLocale.getString(key, fallback) : fallback;
    }

    function initHostInfo() {
        $.get('../../system/info/getArOZInfo?icon=true', function (data) {
            if (data && data.VendorIcon) {
                $('#ov-host-icon').attr('src', 'data:image/png;base64,' + data.VendorIcon);
            }
            $('#ov-hostname').text((data && data.HostName) ? data.HostName : '-');
            $('#ov-version').text((data && data.BuildVersion) ? data.BuildVersion : '-');
        });
    }

    function initUserInfo() {
        $.get('../../system/users/userinfo', function (data) {
            if (!data || data.error !== undefined) return;
            $('#ov-username').text(data.Username || 'USER');
            if (data.Usergroup && data.Usergroup.length) {
                $('#ov-usergroup').text('@' + data.Usergroup.join(','));
            }
            if (data.Icondata) {
                $('#ov-avatar').attr('src', data.Icondata);
            }
        });
    }

    function initStorageInfo() {
        $.get('../../system/disk/quota/quotaInfo', function (data) {
            if (!data || data.error !== undefined) return;
            var percentageText = '0%';
            if (data.Total === -1) {
                $('#ov-total').text(ovS('overview/info/unlimited', 'Unlimited'));
            } else if (data.Total === 0) {
                $('#ov-total').text(ovS('overview/info/readonly', 'Read Only'));
                percentageText = '100%';
            } else {
                $('#ov-total').text(ao_module_utils.formatBytes(data.Total, 2));
                percentageText = parseFloat((data.Used / data.Total) * 100).toFixed(2) + '%';
            }
            $('#ov-used').text(ao_module_utils.formatBytes(data.Used, 2) + ' (' + percentageText + ')');
        });
    }

    function initHomepageState() {
        $.get('../../system/network/www/toggle', function (data) {
            var online = (data === true);
            $('#ov-home-dot').toggleClass('online', online);
            $('#ov-home-text').text(
                online
                    ? ovS('overview/status/online', 'Online')
                    : ovS('overview/status/offline', 'Offline')
            );
        });
    }

    function initRuntimeInfo() {
        $.getJSON('../../system/info/getRuntimeInfo', function (data) {
            if (!data || data.error !== undefined) return;
            $('#ov-operation').text(ao_module_utils.durationConverter(data.ContinuesRuntime));
            $('#ov-operation').attr('startunix', data.StartupTime);
            accumulateOperationTime();
        });
    }

    function accumulateOperationTime() {
        setTimeout(function () {
            if ($('#ov-operation').length === 0) return;
            var startUnix = parseInt($('#ov-operation').attr('startunix'), 10);
            if (isNaN(startUnix) || startUnix <= 0) {
                accumulateOperationTime();
                return;
            }
            var newOprTime = parseInt(Date.now() / 1000, 10) - startUnix;
            $('#ov-operation').text(ao_module_utils.durationConverter(newOprTime));
            accumulateOperationTime();
        }, 1000);
    }

    window.ovLogout = function () {
        if (window.parent && typeof window.parent.logout === 'function') {
            window.parent.logout();
            return;
        }
        if (typeof logout === 'function') {
            logout();
        }
    };

    applyTheme();
    overviewLocale.init('../locale/system_settings/overview.json', function () {
        overviewLocale.translate();
        initHostInfo();
        initUserInfo();
        initStorageInfo();
        initHomepageState();
        initRuntimeInfo();
    });
})();
</script>