index.html

<!DOCTYPE html>
<html lang="en" data-bs-theme="dark">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Log Viewer Pro // Analytics</title>

    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/dataTables.bootstrap5.min.css" rel="stylesheet">
    <script src="js/lucide.min.js"></script>
    <script src="js/chart.js"></script>

    <style>
        :root {
            --sidebar-width: 260px;
            --brand-color: #4ade80;
            --bg-dark: #0f172a;
            --card-dark: #1e293b;
            --border-color: #334155;
        }

        body {
            background-color: var(--bg-dark);
            color: #f1f5f9;
            font-family: 'Inter', sans-serif;
            font-size: 0.82rem;
            height: 100vh;
            overflow: hidden;
        }

        .wrapper {
            display: flex;
            height: 100vh;
        }

        /* Sidebar */
        aside {
            width: var(--sidebar-width);
            background: var(--card-dark);
            border-right: 1px solid var(--border-color);
            display: flex;
            flex-direction: column;
        }

        .sidebar-header {
            padding: 1rem;
            border-bottom: 1px solid var(--border-color);
        }

        .file-list {
            overflow-y: auto;
            flex-grow: 1;
            padding: 0.5rem;
        }

        .file-item {
            padding: 8px 12px;
            border-radius: 6px;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            font-size: 0.8rem;
            margin-bottom: 2px;
        }

        .file-item:hover {
            background: rgba(255, 255, 255, 0.05);
        }

        .file-item.active {
            background: rgba(74, 222, 128, 0.15);
            color: var(--brand-color);
            font-weight: 600;
        }

        /* Main Content */
        main {
            flex-grow: 1;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        .top-bar {
            padding: 0.6rem 1.5rem;
            background: var(--card-dark);
            border-bottom: 1px solid var(--border-color);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        /* Intensity Chart */
        .chart-container {
            height: 150px;
            background: #0b0e14;
            padding: 10px 20px;
            border-bottom: 1px solid var(--border-color);
            position: relative;
        }

        /* Stats & Toggles */
        .level-toggles .btn {
            border: none;
            font-size: 0.7rem;
            font-weight: 700;
            padding: 4px 10px;
            margin-right: 3px;
        }

        .btn-check:not(:checked)+.btn {
            opacity: 0.2;
            filter: grayscale(0.8);
        }

        .btn-trc {
            background: #64748b;
            color: #fff;
        }

        .btn-dbg {
            background: #0ea5e9;
            color: #fff;
        }

        .btn-inf {
            background: #10b981;
            color: #fff;
        }

        .btn-wrn {
            background: #f59e0b;
            color: #fff;
        }

        .btn-err {
            background: #ef4444;
            color: #fff;
        }

        .btn-crt {
            background: #a855f7;
            color: #fff;
        }

        /* Search & Time Filter */
        .controls-group {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .search-container {
            position: relative;
            width: 250px;
        }

        .search-container input {
            background: rgba(0, 0, 0, 0.3);
            border: 1px solid var(--border-color);
            color: white;
            border-radius: 6px;
            padding: 4px 30px;
            width: 100%;
        }

        .search-icon {
            position: absolute;
            left: 8px;
            top: 50%;
            transform: translateY(-50%);
            opacity: 0.4;
        }

        .clear-btn {
            position: absolute;
            right: 8px;
            top: 50%;
            transform: translateY(-50%);
            border: none;
            background: none;
            color: #64748b;
            cursor: pointer;
            display: none;
        }

        /* Time Filter Dropdown */
        .time-range-select {
            background: #242b3d;
            border: 1px solid var(--border-color);
            color: #94a3b8;
            font-size: 0.75rem;
            border-radius: 6px;
            padding: 4px 8px;
        }

        /* Table */
        .content-area {
            flex-grow: 1;
            padding: 1rem;
            overflow-y: auto;
        }

        .table-container {
            background: var(--card-dark);
            border-radius: 8px;
            border: 1px solid var(--border-color);
        }

        table.dataTable thead th {
            background: rgba(255, 255, 255, 0.02);
            font-size: 0.65rem;
            text-transform: uppercase;
            padding: 10px 15px !important;
            border-bottom: 1px solid var(--border-color) !important;
        }

        .lvl-indicator {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            display: inline-block;
            margin-right: 8px;
        }

        .row-INF .lvl-indicator {
            background: #10b981;
        }

        .row-ERR .lvl-indicator {
            background: #ef4444;
        }
    </style>
</head>

<body>

    <div class="wrapper">
        <aside>
            <div class="sidebar-header">
                <h6 class="mb-3 d-flex align-items-center gap-2">
                    <i data-lucide="terminal" class="text-success"></i> LogViewer Pro
                </h6>
                <button class="btn btn-sm btn-outline-secondary w-100" onclick="$('#dir-input').click()">
                    <i data-lucide="folder" size="14"></i> Open Directory
                </button>
                <input type="file" id="dir-input" webkitdirectory hidden>
            </div>
            <div class="file-list" id="file-list"></div>
        </aside>

        <main>
            <div class="top-bar">
                <div class="level-toggles">
                    <input type="checkbox" class="btn-check" id="t-INF" checked value="INF">
                    <label class="btn btn-inf" for="t-INF">INF <span id="c-INF">0</span></label>
                    <input type="checkbox" class="btn-check" id="t-WRN" checked value="WRN">
                    <label class="btn btn-wrn" for="t-WRN">WRN <span id="c-WRN">0</span></label>
                    <input type="checkbox" class="btn-check" id="t-ERR" checked value="ERR">
                    <label class="btn btn-err" for="t-ERR">ERR <span id="c-ERR">0</span></label>
                    <input type="checkbox" class="btn-check" id="t-CRT" checked value="CRT">
                    <label class="btn btn-crt" for="t-CRT">CRT <span id="c-CRT">0</span></label>
                </div>

                <div class="controls-group">
                    <select id="time-range" class="time-range-select">
                        <option value="all">All Time</option>
                        <option value="5">Last 5 Mins</option>
                        <option value="15">Last 15 Mins</option>
                        <option value="60">Last 1 Hour</option>
                        <option value="custom">Custom Range...</option>
                    </select>

                    <div class="search-container">
                        <i data-lucide="search" size="14" class="search-icon"></i>
                        <input type="text" id="global-search" placeholder="Search logs...">
                        <button id="clear-search" class="clear-btn"><i data-lucide="x" size="14"></i></button>
                    </div>
                </div>
            </div>

            <div class="chart-container">
                <canvas id="intensityChart"></canvas>
            </div>

            <div class="content-area">
                <div class="table-container">
                    <table id="log-table" class="table table-dark table-hover table-sm w-100">
                        <thead>
                            <tr>
                                <th width="35"></th>
                                <th width="90">Level</th>
                                <th width="130">Time</th>
                                <th>Message</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </main>
    </div>

    <div class="modal fade" id="logModal" tabindex="-1">
        <div class="modal-dialog modal-xl modal-dialog-centered">
            <div class="modal-content bg-dark border-secondary">
                <div class="modal-body p-0">
                    <pre id="modal-content" class="m-0 p-4 text-info-emphasis"
                        style="font-size: 0.75rem; background: #000; overflow-x: auto;"></pre>
                </div>
            </div>
        </div>
    </div>

    <script src="js/jquery-3.7.0.min.js"></script>
    <script src="js/jquery.dataTables.min.js"></script>
    <script src="js/dataTables.bootstrap5.min.js"></script>
    <script src="js/bootstrap.bundle.min.js"></script>

    <script>
        lucide.createIcons();
        let chart, table;
        let latestLogTime = null;

        $(document).ready(function () {
            table = $('#log-table').DataTable({
                dom: 'rtip',
                pageLength: 50,
                order: [[2, 'desc']],
                columns: [
                    { className: 'text-center opacity-50', orderable: false, data: null, defaultContent: '<i data-lucide="eye" size="14"></i>' },
                    { data: 'level', render: l => `<span class="lvl-indicator"></span><strong>${l}</strong>` },
                    { data: 'time', className: 'text-muted' },
                    { data: 'message', render: m => `<span class="text-truncate d-block" style="max-width: 900px;">${m}</span>` }
                ],
                createdRow: (row, data) => $(row).addClass('row-' + data.level),
                drawCallback: () => lucide.createIcons()
            });

            // Search Control
            $('#global-search').on('keyup', function () {
                table.search(this.value, true, false).draw();
                $('#clear-search').toggle(this.value.length > 0);
            });

            $('#clear-search').on('click', function () {
                $('#global-search').val('').trigger('keyup');
                $('#time-range').val('all').trigger('change');
            });

            // Intensity Chart
            const ctx = document.getElementById('intensityChart').getContext('2d');
            chart = new Chart(ctx, {
                type: 'bar',
                data: { labels: [], datasets: [{ label: 'Logs', data: [], backgroundColor: '#4ade80', borderRadius: 2 }] },
                options: {
                    responsive: true, maintainAspectRatio: false,
                    plugins: { legend: { display: false } },
                    scales: {
                        x: { ticks: { color: '#64748b', font: { size: 10 } }, grid: { display: false } },
                        y: { beginAtZero: true, grid: { color: '#1e293b' }, ticks: { color: '#64748b', font: { size: 10 } } }
                    },
                    onClick: (e, els) => {
                        if (els.length > 0) {
                            const label = chart.data.labels[els[0].index];
                            table.column(2).search('^' + label, true, false).draw();
                        }
                    }
                }
            });

            // Right click chart reset
            $('#intensityChart').on('contextmenu', e => { e.preventDefault(); table.column(2).search('').draw(); });

            // --- GRAFANA TIME RANGE LOGIC ---
            $('#time-range').on('change', function () { table.draw(); });

            $.fn.dataTable.ext.search.push((settings, data, dataIndex) => {
                // Level Filter
                const lvl = data[1];
                const checked = $('.btn-check:checked').map((i, el) => $(el).val()).get();
                if (!checked.includes(lvl)) return false;

                // Time Range Filter
                const range = $('#time-range').val();
                if (range === 'all') return true;
                if (range === 'custom') return true; // Placeholder for custom modal

                const logTimeStr = data[2]; // HH:mm:ss.SSS
                if (!latestLogTime) return true;

                const diffMinutes = getMinutesDiff(logTimeStr, latestLogTime);
                return diffMinutes <= parseInt(range);
            });

            function getMinutesDiff(timeStr, latestStr) {
                const parse = (s) => {
                    const parts = s.split(':');
                    return parseInt(parts[0]) * 60 + parseInt(parts[1]) + (parseFloat(parts[2]) / 60);
                };
                return Math.abs(parse(latestStr) - parse(timeStr));
            }

            // Load Files
            $('#dir-input').on('change', function (e) {
                const files = Array.from(e.target.files).filter(f => f.name.endsWith('.log'));
                $('#file-list').empty().append(files.map((f, i) => `<div class="file-item" onclick="loadLog(${i})"><span>${f.name}</span></div>`));
                window.loadedFiles = files;
            });

            window.loadLog = function (idx) {
                $('.file-item').removeClass('active').eq(idx).addClass('active');
                const reader = new FileReader();
                reader.onload = e => {
                    const logs = parseLogs(e.target.result);
                    if (logs.length > 0) latestLogTime = logs[logs.length - 1].time;
                    table.clear().rows.add(logs).draw();
                    updateAnalytics(logs);
                };
                reader.readAsText(window.loadedFiles[idx]);
            };

            function parseLogs(text) {
                const logs = [];
                const regex = /^(\d{2}:\d{2}:\d{2}\.\d{3})\s\[(TRC|DBG|INF|WRN|ERR|CRT)\]\s(.*)$/;
                text.split(/\r?\n/).forEach(line => {
                    const match = line.match(regex);
                    if (match) logs.push({ time: match[1], level: match[2], message: match[3], exception: "" });
                    else if (logs.length > 0) logs[logs.length - 1].exception += line + "\n";
                });
                return logs;
            }

            function updateAnalytics(logs) {
                const counts = { INF: 0, WRN: 0, ERR: 0, CRT: 0 }, bins = {};
                logs.forEach(l => {
                    if (counts[l.level] !== undefined) counts[l.level]++;
                    const min = l.time.substring(0, 5);
                    bins[min] = (bins[min] || 0) + 1;
                });
                Object.keys(counts).forEach(k => $(`#c-${k}`).text(counts[k]));
                const labels = Object.keys(bins).sort();
                chart.data.labels = labels;
                chart.data.datasets[0].data = labels.map(l => bins[l]);
                chart.update();
            }

            $('#log-table tbody').on('click', 'tr', function () {
                const data = table.row(this).data();
                $('#modal-content').text(`[TIME] ${data.time}\n[LVL]  ${data.level}\n\n${data.message}\n\n${data.exception}`);
                new bootstrap.Modal('#logModal').show();
            });
        });
    </script>
</body>

</html>
init 2026-04-27 19:45:25 +07:00			`<!DOCTYPE html>`
			`<html lang="en" data-bs-theme="dark">`
rev1 2026-04-27 21:23:50 +07:00
init 2026-04-27 19:45:25 +07:00			`<head>`
			`<meta charset="UTF-8">`
			`<meta name="viewport" content="width=device-width, initial-scale=1.0">`
rev1.2 2026-04-27 21:31:53 +07:00			`<title>Log Viewer Pro // Analytics</title>`
rev1 2026-04-27 21:23:50 +07:00
init 2026-04-27 19:45:25 +07:00			`<link href="css/bootstrap.min.css" rel="stylesheet">`
			`<link href="css/dataTables.bootstrap5.min.css" rel="stylesheet">`
			`<script src="js/lucide.min.js"></script>`
rev1 2026-04-27 21:23:50 +07:00			`<script src="js/chart.js"></script>`

init 2026-04-27 19:45:25 +07:00			`<style>`
			`:root {`
rev1 2026-04-27 21:23:50 +07:00			`--sidebar-width: 260px;`
init 2026-04-27 19:45:25 +07:00			`--brand-color: #4ade80;`
			`--bg-dark: #0f172a;`
			`--card-dark: #1e293b;`
			`--border-color: #334155;`
			`}`

rev1 2026-04-27 21:23:50 +07:00			`body {`
			`background-color: var(--bg-dark);`
			`color: #f1f5f9;`
			`font-family: 'Inter', sans-serif;`
rev1.1 2026-04-27 21:30:17 +07:00			`font-size: 0.82rem;`
init 2026-04-27 19:45:25 +07:00			`height: 100vh;`
			`overflow: hidden;`
			`}`

rev1 2026-04-27 21:23:50 +07:00			`.wrapper {`
			`display: flex;`
			`height: 100vh;`
			`}`

init 2026-04-27 19:45:25 +07:00			`/* Sidebar */`
			`aside {`
			`width: var(--sidebar-width);`
rev1 2026-04-27 21:23:50 +07:00			`background: var(--card-dark);`
init 2026-04-27 19:45:25 +07:00			`border-right: 1px solid var(--border-color);`
			`display: flex;`
			`flex-direction: column;`
			`}`
rev1 2026-04-27 21:23:50 +07:00
			`.sidebar-header {`
			`padding: 1rem;`
			`border-bottom: 1px solid var(--border-color);`
			`}`

			`.file-list {`
			`overflow-y: auto;`
			`flex-grow: 1;`
			`padding: 0.5rem;`
			`}`

init 2026-04-27 19:45:25 +07:00			`.file-item {`
			`padding: 8px 12px;`
			`border-radius: 6px;`
			`cursor: pointer;`
			`display: flex;`
			`justify-content: space-between;`
rev1 2026-04-27 21:23:50 +07:00			`font-size: 0.8rem;`
rev1.2 2026-04-27 21:31:53 +07:00			`margin-bottom: 2px;`
rev1 2026-04-27 21:23:50 +07:00			`}`

			`.file-item:hover {`
			`background: rgba(255, 255, 255, 0.05);`
			`}`

			`.file-item.active {`
			`background: rgba(74, 222, 128, 0.15);`
			`color: var(--brand-color);`
rev1.1 2026-04-27 21:30:17 +07:00			`font-weight: 600;`
init 2026-04-27 19:45:25 +07:00			`}`

			`/* Main Content */`
rev1 2026-04-27 21:23:50 +07:00			`main {`
			`flex-grow: 1;`
			`display: flex;`
			`flex-direction: column;`
			`overflow: hidden;`
			`}`

			`.top-bar {`
rev1.1 2026-04-27 21:30:17 +07:00			`padding: 0.6rem 1.5rem;`
rev1 2026-04-27 21:23:50 +07:00			`background: var(--card-dark);`
init 2026-04-27 19:45:25 +07:00			`border-bottom: 1px solid var(--border-color);`
			`display: flex;`
			`justify-content: space-between;`
			`align-items: center;`
			`}`

rev1.2 2026-04-27 21:31:53 +07:00			`/* Intensity Chart */`
rev1 2026-04-27 21:23:50 +07:00			`.chart-container {`
rev1.2 2026-04-27 21:31:53 +07:00			`height: 150px;`
rev1.1 2026-04-27 21:30:17 +07:00			`background: #0b0e14;`
rev1 2026-04-27 21:23:50 +07:00			`padding: 10px 20px;`
			`border-bottom: 1px solid var(--border-color);`
rev1.2 2026-04-27 21:31:53 +07:00			`position: relative;`
rev1 2026-04-27 21:23:50 +07:00			`}`

init 2026-04-27 19:45:25 +07:00			`/* Stats & Toggles */`
			`.level-toggles .btn {`
			`border: none;`
rev1.2 2026-04-27 21:31:53 +07:00			`font-size: 0.7rem;`
rev1.1 2026-04-27 21:30:17 +07:00			`font-weight: 700;`
rev1.2 2026-04-27 21:31:53 +07:00			`padding: 4px 10px;`
			`margin-right: 3px;`
rev1 2026-04-27 21:23:50 +07:00			`}`

			`.btn-check:not(:checked)+.btn {`
rev1.2 2026-04-27 21:31:53 +07:00			`opacity: 0.2;`
rev1.1 2026-04-27 21:30:17 +07:00			`filter: grayscale(0.8);`
			`}`

			`.btn-trc {`
			`background: #64748b;`
			`color: #fff;`
rev1 2026-04-27 21:23:50 +07:00			`}`

			`.btn-dbg {`
			`background: #0ea5e9;`
rev1.1 2026-04-27 21:30:17 +07:00			`color: #fff;`
rev1 2026-04-27 21:23:50 +07:00			`}`

			`.btn-inf {`
			`background: #10b981;`
rev1.1 2026-04-27 21:30:17 +07:00			`color: #fff;`
rev1 2026-04-27 21:23:50 +07:00			`}`

			`.btn-wrn {`
			`background: #f59e0b;`
rev1.1 2026-04-27 21:30:17 +07:00			`color: #fff;`
init 2026-04-27 19:45:25 +07:00			`}`
rev1 2026-04-27 21:23:50 +07:00
			`.btn-err {`
			`background: #ef4444;`
rev1.1 2026-04-27 21:30:17 +07:00			`color: #fff;`
			`}`

			`.btn-crt {`
			`background: #a855f7;`
			`color: #fff;`
			`}`

rev1.2 2026-04-27 21:31:53 +07:00			`/* Search & Time Filter */`
			`.controls-group {`
			`display: flex;`
			`align-items: center;`
			`gap: 10px;`
			`}`

rev1.1 2026-04-27 21:30:17 +07:00			`.search-container {`
			`position: relative;`
rev1.2 2026-04-27 21:31:53 +07:00			`width: 250px;`
rev1.1 2026-04-27 21:30:17 +07:00			`}`

			`.search-container input {`
			`background: rgba(0, 0, 0, 0.3);`
			`border: 1px solid var(--border-color);`
			`color: white;`
			`border-radius: 6px;`
rev1.2 2026-04-27 21:31:53 +07:00			`padding: 4px 30px;`
rev1.1 2026-04-27 21:30:17 +07:00			`width: 100%;`
			`}`

			`.search-icon {`
			`position: absolute;`
rev1.2 2026-04-27 21:31:53 +07:00			`left: 8px;`
rev1.1 2026-04-27 21:30:17 +07:00			`top: 50%;`
			`transform: translateY(-50%);`
			`opacity: 0.4;`
			`}`

rev1.2 2026-04-27 21:31:53 +07:00			`.clear-btn {`
rev1.1 2026-04-27 21:30:17 +07:00			`position: absolute;`
rev1.2 2026-04-27 21:31:53 +07:00			`right: 8px;`
rev1.1 2026-04-27 21:30:17 +07:00			`top: 50%;`
			`transform: translateY(-50%);`
			`border: none;`
			`background: none;`
rev1.2 2026-04-27 21:31:53 +07:00			`color: #64748b;`
			`cursor: pointer;`
			`display: none;`
rev1 2026-04-27 21:23:50 +07:00			`}`

rev1.2 2026-04-27 21:31:53 +07:00			`/* Time Filter Dropdown */`
			`.time-range-select {`
			`background: #242b3d;`
			`border: 1px solid var(--border-color);`
			`color: #94a3b8;`
			`font-size: 0.75rem;`
			`border-radius: 6px;`
			`padding: 4px 8px;`
rev1.1 2026-04-27 21:30:17 +07:00			`}`

rev1 2026-04-27 21:23:50 +07:00			`/* Table */`
			`.content-area {`
			`flex-grow: 1;`
rev1.1 2026-04-27 21:30:17 +07:00			`padding: 1rem;`
rev1 2026-04-27 21:23:50 +07:00			`overflow-y: auto;`
			`}`

			`.table-container {`
			`background: var(--card-dark);`
			`border-radius: 8px;`
init 2026-04-27 19:45:25 +07:00			`border: 1px solid var(--border-color);`
			`}`
rev1 2026-04-27 21:23:50 +07:00
			`table.dataTable thead th {`
rev1.1 2026-04-27 21:30:17 +07:00			`background: rgba(255, 255, 255, 0.02);`
			`font-size: 0.65rem;`
rev1 2026-04-27 21:23:50 +07:00			`text-transform: uppercase;`
			`padding: 10px 15px !important;`
init 2026-04-27 19:45:25 +07:00			`border-bottom: 1px solid var(--border-color) !important;`
			`}`
rev1 2026-04-27 21:23:50 +07:00
			`.lvl-indicator {`
			`width: 8px;`
			`height: 8px;`
			`border-radius: 50%;`
			`display: inline-block;`
			`margin-right: 8px;`
			`}`

			`.row-INF .lvl-indicator {`
			`background: #10b981;`
			`}`

			`.row-ERR .lvl-indicator {`
			`background: #ef4444;`
			`}`
init 2026-04-27 19:45:25 +07:00			`</style>`
			`</head>`
rev1 2026-04-27 21:23:50 +07:00
init 2026-04-27 19:45:25 +07:00			`<body>`

rev1 2026-04-27 21:23:50 +07:00			`<div class="wrapper">`
			`<aside>`
			`<div class="sidebar-header">`
rev1.1 2026-04-27 21:30:17 +07:00			`<h6 class="mb-3 d-flex align-items-center gap-2">`
			`<i data-lucide="terminal" class="text-success"></i> LogViewer Pro`
			`</h6>`
rev1.2 2026-04-27 21:31:53 +07:00			`<button class="btn btn-sm btn-outline-secondary w-100" onclick="$('#dir-input').click()">`
			`<i data-lucide="folder" size="14"></i> Open Directory`
rev1 2026-04-27 21:23:50 +07:00			`</button>`
			`<input type="file" id="dir-input" webkitdirectory hidden>`
init 2026-04-27 19:45:25 +07:00			`</div>`
rev1 2026-04-27 21:23:50 +07:00			`<div class="file-list" id="file-list"></div>`
			`</aside>`
init 2026-04-27 19:45:25 +07:00
rev1 2026-04-27 21:23:50 +07:00			`<main>`
			`<div class="top-bar">`
rev1.2 2026-04-27 21:31:53 +07:00			`<div class="level-toggles">`
rev1.1 2026-04-27 21:30:17 +07:00			`<input type="checkbox" class="btn-check" id="t-INF" checked value="INF">`
rev1.2 2026-04-27 21:31:53 +07:00			`<label class="btn btn-inf" for="t-INF">INF <span id="c-INF">0</span></label>`
rev1.1 2026-04-27 21:30:17 +07:00			`<input type="checkbox" class="btn-check" id="t-WRN" checked value="WRN">`
rev1.2 2026-04-27 21:31:53 +07:00			`<label class="btn btn-wrn" for="t-WRN">WRN <span id="c-WRN">0</span></label>`
rev1.1 2026-04-27 21:30:17 +07:00			`<input type="checkbox" class="btn-check" id="t-ERR" checked value="ERR">`
rev1.2 2026-04-27 21:31:53 +07:00			`<label class="btn btn-err" for="t-ERR">ERR <span id="c-ERR">0</span></label>`
rev1.1 2026-04-27 21:30:17 +07:00			`<input type="checkbox" class="btn-check" id="t-CRT" checked value="CRT">`
rev1.2 2026-04-27 21:31:53 +07:00			`<label class="btn btn-crt" for="t-CRT">CRT <span id="c-CRT">0</span></label>`
init 2026-04-27 19:45:25 +07:00			`</div>`
rev1 2026-04-27 21:23:50 +07:00
rev1.2 2026-04-27 21:31:53 +07:00			`<div class="controls-group">`
			`<select id="time-range" class="time-range-select">`
			`<option value="all">All Time</option>`
			`<option value="5">Last 5 Mins</option>`
			`<option value="15">Last 15 Mins</option>`
			`<option value="60">Last 1 Hour</option>`
			`<option value="custom">Custom Range...</option>`
			`</select>`

			`<div class="search-container">`
			`<i data-lucide="search" size="14" class="search-icon"></i>`
			`<input type="text" id="global-search" placeholder="Search logs...">`
			`<button id="clear-search" class="clear-btn"><i data-lucide="x" size="14"></i></button>`
			`</div>`
init 2026-04-27 19:45:25 +07:00			`</div>`
			`</div>`

rev1.2 2026-04-27 21:31:53 +07:00			`<div class="chart-container">`
rev1 2026-04-27 21:23:50 +07:00			`<canvas id="intensityChart"></canvas>`
init 2026-04-27 19:45:25 +07:00			`</div>`
rev1 2026-04-27 21:23:50 +07:00
			`<div class="content-area">`
			`<div class="table-container">`
			`<table id="log-table" class="table table-dark table-hover table-sm w-100">`
			`<thead>`
			`<tr>`
rev1.1 2026-04-27 21:30:17 +07:00			`<th width="35"></th>`
rev1 2026-04-27 21:23:50 +07:00			`<th width="90">Level</th>`
rev1.1 2026-04-27 21:30:17 +07:00			`<th width="130">Time</th>`
rev1.2 2026-04-27 21:31:53 +07:00			`<th>Message</th>`
rev1 2026-04-27 21:23:50 +07:00			`</tr>`
			`</thead>`
			`<tbody></tbody>`
			`</table>`
			`</div>`
init 2026-04-27 19:45:25 +07:00			`</div>`
rev1 2026-04-27 21:23:50 +07:00			`</main>`
			`</div>`

			`<div class="modal fade" id="logModal" tabindex="-1">`
			`<div class="modal-dialog modal-xl modal-dialog-centered">`
rev1.2 2026-04-27 21:31:53 +07:00			`<div class="modal-content bg-dark border-secondary">`
rev1 2026-04-27 21:23:50 +07:00			`<div class="modal-body p-0">`
rev1.1 2026-04-27 21:30:17 +07:00			`<pre id="modal-content" class="m-0 p-4 text-info-emphasis"`
rev1.2 2026-04-27 21:31:53 +07:00			`style="font-size: 0.75rem; background: #000; overflow-x: auto;"></pre>`
rev1 2026-04-27 21:23:50 +07:00			`</div>`
init 2026-04-27 19:45:25 +07:00			`</div>`
			`</div>`
			`</div>`

rev1 2026-04-27 21:23:50 +07:00			`<script src="js/jquery-3.7.0.min.js"></script>`
			`<script src="js/jquery.dataTables.min.js"></script>`
			`<script src="js/dataTables.bootstrap5.min.js"></script>`
			`<script src="js/bootstrap.bundle.min.js"></script>`
init 2026-04-27 19:45:25 +07:00
rev1 2026-04-27 21:23:50 +07:00			`<script>`
			`lucide.createIcons();`
rev1.2 2026-04-27 21:31:53 +07:00			`let chart, table;`
			`let latestLogTime = null;`
init 2026-04-27 19:45:25 +07:00
rev1 2026-04-27 21:23:50 +07:00			`$(document).ready(function () {`
rev1.1 2026-04-27 21:30:17 +07:00			`table = $('#log-table').DataTable({`
rev1 2026-04-27 21:23:50 +07:00			`dom: 'rtip',`
rev1.1 2026-04-27 21:30:17 +07:00			`pageLength: 50,`
rev1 2026-04-27 21:23:50 +07:00			`order: [[2, 'desc']],`
			`columns: [`
rev1.2 2026-04-27 21:31:53 +07:00			`{ className: 'text-center opacity-50', orderable: false, data: null, defaultContent: '<i data-lucide="eye" size="14"></i>' },`
			{ data: 'level', render: l => `<span class="lvl-indicator"></span><strong>${l}</strong>` },
rev1.1 2026-04-27 21:30:17 +07:00			`{ data: 'time', className: 'text-muted' },`
rev1.2 2026-04-27 21:31:53 +07:00			{ data: 'message', render: m => `<span class="text-truncate d-block" style="max-width: 900px;">${m}</span>` }
rev1 2026-04-27 21:23:50 +07:00			`],`
			`createdRow: (row, data) => $(row).addClass('row-' + data.level),`
			`drawCallback: () => lucide.createIcons()`
			`});`
init 2026-04-27 19:45:25 +07:00
rev1.2 2026-04-27 21:31:53 +07:00			`// Search Control`
rev1.1 2026-04-27 21:30:17 +07:00			`$('#global-search').on('keyup', function () {`
rev1.2 2026-04-27 21:31:53 +07:00			`table.search(this.value, true, false).draw();`
			`$('#clear-search').toggle(this.value.length > 0);`
init 2026-04-27 19:45:25 +07:00			`});`

rev1.1 2026-04-27 21:30:17 +07:00			`$('#clear-search').on('click', function () {`
			`$('#global-search').val('').trigger('keyup');`
rev1.2 2026-04-27 21:31:53 +07:00			`$('#time-range').val('all').trigger('change');`
rev1.1 2026-04-27 21:30:17 +07:00			`});`

rev1.2 2026-04-27 21:31:53 +07:00			`// Intensity Chart`
rev1 2026-04-27 21:23:50 +07:00			`const ctx = document.getElementById('intensityChart').getContext('2d');`
			`chart = new Chart(ctx, {`
			`type: 'bar',`
rev1.1 2026-04-27 21:30:17 +07:00			`data: { labels: [], datasets: [{ label: 'Logs', data: [], backgroundColor: '#4ade80', borderRadius: 2 }] },`
rev1 2026-04-27 21:23:50 +07:00			`options: {`
rev1.2 2026-04-27 21:31:53 +07:00			`responsive: true, maintainAspectRatio: false,`
rev1.1 2026-04-27 21:30:17 +07:00			`plugins: { legend: { display: false } },`
rev1 2026-04-27 21:23:50 +07:00			`scales: {`
			`x: { ticks: { color: '#64748b', font: { size: 10 } }, grid: { display: false } },`
rev1.1 2026-04-27 21:30:17 +07:00			`y: { beginAtZero: true, grid: { color: '#1e293b' }, ticks: { color: '#64748b', font: { size: 10 } } }`
rev1 2026-04-27 21:23:50 +07:00			`},`
rev1.2 2026-04-27 21:31:53 +07:00			`onClick: (e, els) => {`
			`if (els.length > 0) {`
			`const label = chart.data.labels[els[0].index];`
rev1 2026-04-27 21:23:50 +07:00			`table.column(2).search('^' + label, true, false).draw();`
			`}`
init 2026-04-27 19:45:25 +07:00			`}`
			`}`
			`});`

rev1.2 2026-04-27 21:31:53 +07:00			`// Right click chart reset`
			`$('#intensityChart').on('contextmenu', e => { e.preventDefault(); table.column(2).search('').draw(); });`

			`// --- GRAFANA TIME RANGE LOGIC ---`
			`$('#time-range').on('change', function () { table.draw(); });`
rev1.1 2026-04-27 21:30:17 +07:00
rev1 2026-04-27 21:23:50 +07:00			`$.fn.dataTable.ext.search.push((settings, data, dataIndex) => {`
rev1.2 2026-04-27 21:31:53 +07:00			`// Level Filter`
rev1.1 2026-04-27 21:30:17 +07:00			`const lvl = data[1];`
rev1 2026-04-27 21:23:50 +07:00			`const checked = $('.btn-check:checked').map((i, el) => $(el).val()).get();`
rev1.2 2026-04-27 21:31:53 +07:00			`if (!checked.includes(lvl)) return false;`

			`// Time Range Filter`
			`const range = $('#time-range').val();`
			`if (range === 'all') return true;`
			`if (range === 'custom') return true; // Placeholder for custom modal`

			`const logTimeStr = data[2]; // HH:mm:ss.SSS`
			`if (!latestLogTime) return true;`

			`const diffMinutes = getMinutesDiff(logTimeStr, latestLogTime);`
			`return diffMinutes <= parseInt(range);`
init 2026-04-27 19:45:25 +07:00			`});`

rev1.2 2026-04-27 21:31:53 +07:00			`function getMinutesDiff(timeStr, latestStr) {`
			`const parse = (s) => {`
			`const parts = s.split(':');`
			`return parseInt(parts[0]) * 60 + parseInt(parts[1]) + (parseFloat(parts[2]) / 60);`
			`};`
			`return Math.abs(parse(latestStr) - parse(timeStr));`
			`}`

			`// Load Files`
rev1 2026-04-27 21:23:50 +07:00			`$('#dir-input').on('change', function (e) {`
			`const files = Array.from(e.target.files).filter(f => f.name.endsWith('.log'));`
rev1.2 2026-04-27 21:31:53 +07:00			$('#file-list').empty().append(files.map((f, i) => `<div class="file-item" onclick="loadLog(${i})"><span>${f.name}</span></div>`));
rev1 2026-04-27 21:23:50 +07:00			`window.loadedFiles = files;`
			`});`

			`window.loadLog = function (idx) {`
			`$('.file-item').removeClass('active').eq(idx).addClass('active');`
			`const reader = new FileReader();`
rev1.2 2026-04-27 21:31:53 +07:00			`reader.onload = e => {`
rev1 2026-04-27 21:23:50 +07:00			`const logs = parseLogs(e.target.result);`
rev1.2 2026-04-27 21:31:53 +07:00			`if (logs.length > 0) latestLogTime = logs[logs.length - 1].time;`
rev1 2026-04-27 21:23:50 +07:00			`table.clear().rows.add(logs).draw();`
rev1.1 2026-04-27 21:30:17 +07:00			`updateAnalytics(logs);`
rev1 2026-04-27 21:23:50 +07:00			`};`
			`reader.readAsText(window.loadedFiles[idx]);`
			`};`

			`function parseLogs(text) {`
			`const logs = [];`
rev1.2 2026-04-27 21:31:53 +07:00			`const regex = /^(\d{2}:\d{2}:\d{2}\.\d{3})\s\[(TRC\|DBG\|INF\|WRN\|ERR\|CRT)\]\s(.*)$/;`
			`text.split(/\r?\n/).forEach(line => {`
			`const match = line.match(regex);`
			`if (match) logs.push({ time: match[1], level: match[2], message: match[3], exception: "" });`
			`else if (logs.length > 0) logs[logs.length - 1].exception += line + "\n";`
rev1 2026-04-27 21:23:50 +07:00			`});`
			`return logs;`
			`}`

rev1.1 2026-04-27 21:30:17 +07:00			`function updateAnalytics(logs) {`
rev1.2 2026-04-27 21:31:53 +07:00			`const counts = { INF: 0, WRN: 0, ERR: 0, CRT: 0 }, bins = {};`
rev1 2026-04-27 21:23:50 +07:00			`logs.forEach(l => {`
rev1.1 2026-04-27 21:30:17 +07:00			`if (counts[l.level] !== undefined) counts[l.level]++;`
			`const min = l.time.substring(0, 5);`
rev1 2026-04-27 21:23:50 +07:00			`bins[min] = (bins[min] \|\| 0) + 1;`
			`});`
rev1.2 2026-04-27 21:31:53 +07:00			Object.keys(counts).forEach(k => $(`#c-${k}`).text(counts[k]));
			`const labels = Object.keys(bins).sort();`
			`chart.data.labels = labels;`
			`chart.data.datasets[0].data = labels.map(l => bins[l]);`
rev1 2026-04-27 21:23:50 +07:00			`chart.update();`
			`}`

rev1.2 2026-04-27 21:31:53 +07:00			`$('#log-table tbody').on('click', 'tr', function () {`
			`const data = table.row(this).data();`
			$('#modal-content').text(`[TIME] ${data.time}\n[LVL] ${data.level}\n\n${data.message}\n\n${data.exception}`);
rev1 2026-04-27 21:23:50 +07:00			`new bootstrap.Modal('#logModal').show();`
			`});`
init 2026-04-27 19:45:25 +07:00			`});`
rev1 2026-04-27 21:23:50 +07:00			`</script>`
init 2026-04-27 19:45:25 +07:00			`</body>`
rev1 2026-04-27 21:23:50 +07:00
init 2026-04-27 19:45:25 +07:00			`</html>`