.. titolo: Retaj Akronimoj
.. slug: reto-akronimoj
.. dato: 2025-12-26 15:00:00 UTC
.. etikedoj: retigado, referenco, akronimoj
.. kategorio: Artikoloj
.. ligo:
.. priskribo: Ampleksa reto kaj IT-akronimo-referenco kovranta pli ol 200 terminojn tra TCP/IP, vojigo, ŝanĝado, sendrata, sekureco kaj nuba retaj domajnoj.
.. tajpu: tekston
<style>
    .acronyms-container {
        max-width: 1200px;
        margin: 20px auto;
        padding: 20px;
    }

    .intro {
        margin-bottom: 30px;
        padding: 20px;
        background: #f8f9fa;
        border-left: 5px solid #667eea;
        border-radius: 6px;
    }

    .intro p {
        margin: 10px 0;
        color: #495057;
        line-height: 1.6;
    }

    .stats {
        display: flex;
        gap: 20px;
        margin-bottom: 30px;
        flex-wrap: wrap;
    }

    .stat-card {
        flex: 1;
        min-width: 200px;
        padding: 20px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

    .stat-label {
        font-size: 14px;
        opacity: 0.9;
        margin-bottom: 5px;
    }

    .stat-value {
        font-size: 32px;
        font-weight: bold;
    }

    .search-section {
        margin-bottom: 30px;
        padding: 20px;
        background: white;
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    }

    .search-label {
        display: block;
        margin-bottom: 10px;
        font-weight: 600;
        color: #333;
    }

    #searchInput {
        width: 100%;
        padding: 12px 15px;
        font-size: 16px;
        border: 2px solid #ced4da;
        border-radius: 6px;
        transition: all 0.3s ease;
    }

    #searchInput:focus {
        outline: none;
        border-color: #667eea;
        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    }

    .table-container {
        background: white;
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    }

    #acronymsTable {
        width: 100%;
        border-collapse: collapse;
    }

    #acronymsTable thead {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        position: sticky;
        top: 0;
        z-index: 10;
    }

    #acronymsTable th {
        padding: 15px 12px;
        text-align: left;
        font-weight: 600;
        font-size: 14px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    #acronymsTable td {
        padding: 12px;
        border-bottom: 1px solid #e9ecef;
        color: #495057;
    }

    #acronymsTable tbody tr:hover {
        background: #f8f9fa;
        transition: background 0.2s ease;
    }

    #acronymsTable tbody tr:nth-child(even) {
        background: #fafbfc;
    }

    #acronymsTable tbody tr:nth-child(even):hover {
        background: #f0f1f3;
    }

    .loading {
        text-align: center;
        padding: 40px;
        color: #6c757d;
    }

    .loading-spinner {
        display: inline-block;
        width: 40px;
        height: 40px;
        border: 4px solid #f3f3f3;
        border-top: 4px solid #667eea;
        border-radius: 50%;
        animation: spin 1s linear infinite;
    }

    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }

    .error {
        padding: 20px;
        background: #f8d7da;
        color: #721c24;
        border: 1px solid #f5c6cb;
        border-radius: 6px;
        margin: 20px 0;
    }

    .no-results {
        padding: 40px;
        text-align: center;
        color: #6c757d;
        font-size: 16px;
    }

    @media (max-width: 768px) {
        #acronymsTable {
            font-size: 14px;
        }

        #acronymsTable th,
        #acronymsTable td {
            padding: 8px;
        }

        .stats {
            flex-direction: column;
        }

        .stat-card {
            min-width: 100%;
        }
    }
</style>
<div class="acronyms-container">
<div class="intro">
<h2 style="margin-top: 0; color: #333;">Retaj Akronimoj Referenco</h2>
<p>La sekvanta estas ampleksa kolekto de retaj akronimoj, iliaj signifoj, resumo de uzo kaj rilataj normoj. Uzu la serĉkeston sube por filtri la liston.</p>
</div>
<div class="stats">
<div class="stat-card">
<div class="stat-label">Tutaj Akronimoj</div>
<div class="stat-value" id="totalCount">-</div>
</div>
<div class="stat-card">
<div class="stat-label">Filtritaj Rezultoj</div>
<div class="stat-value" id="filteredCount">-</div>
</div>
</div>
<div class="search-section">
<label class="search-label" for="searchInput">🔍 Serĉu Akronimojn</label>
<input autocomplete="off" id="searchInput" placeholder="Type to search by acronym, meaning, summary, or standard..." type="text"/>
</div>
<div class="table-container">
<table id="acronymsTable">
<thead>
<tr>
<th>Akronimo</th>
<th>Signifo</th>
<th>Resumo</th>
<th>Normo</th>
</tr>
</thead>
<tbody id="tableBody">
<tr>
<td class="loading" colspan="4">
<div class="loading-spinner"></div>
<p>Ŝarĝante akronimojn...</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<script>
(function() {
    let acronyms = [];
    let filteredAcronyms = [];

    // Fetch acronyms data
    async function loadAcronyms() {
        try {
            const response = await fetch('/data/acronyms.json');
            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }
            acronyms = await response.json();

            // Sort acronyms alphabetically
            acronyms.sort((a, b) => a.acronym.localeCompare(b.acronym));

            filteredAcronyms = acronyms;
            updateStats();
            renderTable();
            setupSearch();
        } catch (error) {
            console.error('Error loading acronyms:', error);
            document.getElementById('tableBody').innerHTML = `
                <tr>
                    <td colspan="4" class="error">
                        <strong>Error loading acronyms data:</strong> ${error.message}
                        <br><br>
                        Please check that the file exists at /data/acronyms.json
                    </td>
                </tr>
            `;
        }
    }

    // Render table rows
    function renderTable() {
        const tbody = document.getElementById('tableBody');

        if (filteredAcronyms.length === 0) {
            tbody.innerHTML = `
                <tr>
                    <td colspan="4" class="no-results">
                        No acronyms match your search criteria. Try a different search term.
                    </td>
                </tr>
            `;
            return;
        }

        tbody.innerHTML = filteredAcronyms.map(acronym => `
            <tr>
                <td><strong>${escapeHtml(acronym.acronym)}</strong></td>
                <td>${escapeHtml(acronym.meaning)}</td>
                <td>${escapeHtml(acronym.summary)}</td>
                <td>${escapeHtml(acronym.standard)}</td>
            </tr>
        `).join('');
    }

    // Setup search functionality
    function setupSearch() {
        const searchInput = document.getElementById('searchInput');

        searchInput.addEventListener('input', (e) => {
            const searchTerm = e.target.value.toLowerCase().trim();

            if (searchTerm === '') {
                filteredAcronyms = acronyms;
            } else {
                filteredAcronyms = acronyms.filter(acronym =>
                    acronym.acronym.toLowerCase().includes(searchTerm) ||
                    acronym.meaning.toLowerCase().includes(searchTerm) ||
                    acronym.summary.toLowerCase().includes(searchTerm) ||
                    acronym.standard.toLowerCase().includes(searchTerm)
                );
            }

            updateStats();
            renderTable();
        });
    }

    // Update statistics
    function updateStats() {
        document.getElementById('totalCount').textContent = acronyms.length;
        document.getElementById('filteredCount').textContent = filteredAcronyms.length;
    }

    // Escape HTML to prevent XSS
    function escapeHtml(text) {
        const div = document.createElement('div');
        div.textContent = text;
        return div.innerHTML;
    }

    // Initialize on page load
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', loadAcronyms);
    } else {
        loadAcronyms();
    }
})();
</script>