rbox/static/js/startup-check.js

export function verifyStartup() {
    const checks = [];

    checks.push({
        name: 'LocalStorage Available',
        test: () => {
            try {
                const test = '__storage_test__';
                localStorage.setItem(test, test);
                localStorage.removeItem(test);
                return true;
            } catch (e) {
                return false;
            }
        }
    });

    checks.push({
        name: 'Fetch API Available',
        test: () => typeof fetch === 'function'
    });

    checks.push({
        name: 'Promises Available',
        test: () => typeof Promise === 'function'
    });

    checks.push({
        name: 'Custom Elements Supported',
        test: () => 'customElements' in window
    });

    checks.push({
        name: 'ES6 Modules Supported',
        test: () => {
            try {
                new Function('import("")');
                return true;
            } catch (e) {
                return false;
            }
        }
    });

    const results = {
        passed: [],
        failed: []
    };

    for (const check of checks) {
        try {
            if (check.test()) {
                results.passed.push(check.name);
            } else {
                results.failed.push(check.name);
            }
        } catch (error) {
            results.failed.push(`${check.name} (Error: ${error.message})`);
        }
    }

    return results;
}

export function showCompatibilityError(results) {
    document.body.innerHTML = `
        <div style="padding: 2rem; max-width: 600px; margin: 2rem auto; font-family: sans-serif; background: #fff; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
            <h1 style="color: #d32f2f; margin-bottom: 1rem;">Browser Not Supported</h1>
            <p style="margin-bottom: 1rem;">Your browser does not support the required features for this application.</p>

            <h3 style="color: #666; margin-top: 1.5rem;">Failed Checks:</h3>
            <ul style="color: #d32f2f; margin: 0.5rem 0 1rem 1.5rem;">
                ${results.failed.map(f => `<li>${f}</li>`).join('')}
            </ul>

            ${results.passed.length > 0 ? `
                <h3 style="color: #666; margin-top: 1.5rem;">Passed Checks:</h3>
                <ul style="color: #4caf50; margin: 0.5rem 0 1rem 1.5rem;">
                    ${results.passed.map(p => `<li>${p}</li>`).join('')}
                </ul>
            ` : ''}

            <p style="margin-top: 1.5rem; padding: 1rem; background: #f5f5f5; border-radius: 4px;">
                <strong>Recommended browsers:</strong><br>
                Chrome 90+, Firefox 88+, Safari 14+, Edge 90+
            </p>
        </div>
    `;
}