BetterDesk/web-nodejs/views/cross-platform.ejs

<%- include('layouts/main', {
    title: title,
    pageStyles: pageStyles,
    pageScripts: pageScripts,
    currentPage: currentPage,
    breadcrumb: breadcrumb,
    body: `

<div class="crossplatform-page">

    <!-- Tab navigation -->
    <div class="crossplatform-tabs">
        <button class="crossplatform-tab ${activeTab === 'matrix' ? 'active' : ''}" data-tab="matrix" onclick="CrossPlatform.switchTab('matrix')">
            <span class="material-icons">grid_on</span>
            <span>${ typeof req !== 'undefined' ? req.t('cross_platform.tab_matrix') : 'Compatibility Matrix' }</span>
        </button>
        <button class="crossplatform-tab ${activeTab === 'distribution' ? 'active' : ''}" data-tab="distribution" onclick="CrossPlatform.switchTab('distribution')">
            <span class="material-icons">pie_chart</span>
            <span>${ typeof req !== 'undefined' ? req.t('cross_platform.tab_distribution') : 'Distribution' }</span>
        </button>
        <button class="crossplatform-tab ${activeTab === 'protocols' ? 'active' : ''}" data-tab="protocols" onclick="CrossPlatform.switchTab('protocols')">
            <span class="material-icons">cable</span>
            <span>${ typeof req !== 'undefined' ? req.t('cross_platform.tab_protocols') : 'Protocols' }</span>
        </button>
        <button class="crossplatform-tab ${activeTab === 'limitations' ? 'active' : ''}" data-tab="limitations" onclick="CrossPlatform.switchTab('limitations')">
            <span class="material-icons">warning_amber</span>
            <span>${ typeof req !== 'undefined' ? req.t('cross_platform.tab_limitations') : 'Limitations' }</span>
        </button>
    </div>

    <!-- ======= COMPATIBILITY MATRIX TAB ======= -->
    <div class="crossplatform-panel" id="panel-matrix" style="display: ${activeTab === 'matrix' ? 'block' : 'none'};">
        <p class="crossplatform-hint">` + _('cross_platform.matrix_hint') + `</p>
        <div class="crossplatform-matrix-wrap">
            <table class="crossplatform-matrix-table" id="matrix-table">
                <thead>
                    <tr>
                        <th>` + _('cross_platform.col_feature') + `</th>
                        <th><span class="material-icons">desktop_windows</span> Windows</th>
                        <th><span class="material-icons">computer</span> Linux x86</th>
                        <th><span class="material-icons">memory</span> Linux ARM</th>
                        <th><span class="material-icons">laptop_mac</span> macOS</th>
                        <th><span class="material-icons">phone_android</span> Android</th>
                        <th><span class="material-icons">phone_iphone</span> iOS</th>
                        <th><span class="material-icons">language</span> Web</th>
                        <th><span class="material-icons">laptop_chromebook</span> ChromeOS</th>
                    </tr>
                </thead>
                <tbody id="matrix-body"></tbody>
            </table>
        </div>

        <div class="crossplatform-legend">
            <span class="legend-item"><span class="legend-icon full"></span> ` + _('cross_platform.legend_full') + `</span>
            <span class="legend-item"><span class="legend-icon partial"></span> ` + _('cross_platform.legend_partial') + `</span>
            <span class="legend-item"><span class="legend-icon none"></span> ` + _('cross_platform.legend_none') + `</span>
            <span class="legend-item"><span class="legend-icon planned"></span> ` + _('cross_platform.legend_planned') + `</span>
        </div>
    </div>

    <!-- ======= DISTRIBUTION TAB ======= -->
    <div class="crossplatform-panel" id="panel-distribution" style="display: ${activeTab === 'distribution' ? 'block' : 'none'};">
        <div class="crossplatform-dist-grid">
            <!-- Platform distribution chart area -->
            <div class="crossplatform-card" id="platform-dist-card">
                <h3>` + _('cross_platform.platform_breakdown') + `</h3>
                <div class="crossplatform-chart" id="platform-chart"></div>
            </div>
            <!-- Architecture distribution -->
            <div class="crossplatform-card" id="arch-dist-card">
                <h3>` + _('cross_platform.arch_breakdown') + `</h3>
                <div class="crossplatform-chart" id="arch-chart"></div>
            </div>
            <!-- Version distribution -->
            <div class="crossplatform-card" id="version-dist-card">
                <h3>` + _('cross_platform.version_breakdown') + `</h3>
                <div class="crossplatform-chart" id="version-chart"></div>
            </div>
            <!-- Summary stats -->
            <div class="crossplatform-card" id="summary-card">
                <h3>` + _('cross_platform.summary') + `</h3>
                <div class="crossplatform-summary-grid" id="summary-grid"></div>
            </div>
        </div>
    </div>

    <!-- ======= PROTOCOLS TAB ======= -->
    <div class="crossplatform-panel" id="panel-protocols" style="display: ${activeTab === 'protocols' ? 'block' : 'none'};">
        <p class="crossplatform-hint">` + _('cross_platform.protocols_hint') + `</p>

        <div class="crossplatform-proto-grid">
            <!-- Capability negotiation diagram -->
            <div class="crossplatform-card crossplatform-card-wide">
                <h3>` + _('cross_platform.capability_negotiation') + `</h3>
                <div class="crossplatform-proto-diagram" id="proto-diagram">
                    <svg id="proto-svg" viewBox="0 0 700 200"></svg>
                </div>
            </div>

            <!-- Codec support across online devices -->
            <div class="crossplatform-card">
                <h3>` + _('cross_platform.codec_support') + `</h3>
                <div class="crossplatform-barlist" id="codec-bars"></div>
                <p class="crossplatform-empty" id="codec-empty" style="display:none;">` + _('cross_platform.no_codec_data') + `</p>
            </div>

            <!-- Feature support across online devices -->
            <div class="crossplatform-card">
                <h3>` + _('cross_platform.feature_support') + `</h3>
                <div class="crossplatform-barlist" id="feature-bars"></div>
                <p class="crossplatform-empty" id="feature-empty" style="display:none;">` + _('cross_platform.no_feature_data') + `</p>
            </div>
        </div>

        <!-- Protocol message format reference -->
        <div class="crossplatform-card crossplatform-card-wide" style="margin-top:16px;">
            <h3>` + _('cross_platform.protobuf_schema') + `</h3>
            <pre class="crossplatform-code"><code>message ClientCapabilities {
    bool   can_capture_screen  = 1;
    bool   can_inject_input    = 2;
    bool   can_transfer_files  = 3;
    bool   can_capture_audio   = 4;
    bool   supports_clipboard  = 5;
    repeated string supported_codecs   = 6;
    string platform            = 7;
    string arch                = 8;
    string client_version      = 9;
    repeated string supported_features = 10;
}</code></pre>
        </div>
    </div>

    <!-- ======= LIMITATIONS TAB ======= -->
    <div class="crossplatform-panel" id="panel-limitations" style="display: ${activeTab === 'limitations' ? 'block' : 'none'};">
        <p class="crossplatform-hint">` + _('cross_platform.limitations_hint') + `</p>

        <div class="crossplatform-limitations-grid" id="limitations-grid">
            <!-- Populated by JS -->
        </div>
    </div>

</div>

` }) %>