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 // Dark Mode</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>

    <style>
        :root {
            --bg-color: #0f111a;
            --card-bg: #1a1c27;
            --border-color: #2d303e;
            --accent-color: #3d5afe;
        }

        body {
            background-color: var(--bg-color);
            color: #e0e0e0;
            font-family: 'Inter', -apple-system, sans-serif;
            font-size: 0.85rem;
            overflow-x: hidden;
        }

        /* Full Screen Drop Zone */
        #drop-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(61, 90, 254, 0.9);
            z-index: 9999;
            display: none;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            border: 4px dashed #fff;
            color: white;
            pointer-events: none;
        }

        /* Sleek Table Design */
        .main-container {
            padding: 1.5rem;
            max-width: 1600px;
            margin: 0 auto;
        }

        .table-card {
            background: var(--card-bg);
            border: 1px solid var(--border-color);
            border-radius: 12px;
            padding: 1rem;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
        }

        table.dataTable {
            border: none !important;
        }

        table.dataTable thead th {
            background: #242736;
            text-transform: uppercase;
            font-size: 0.7rem;
            letter-spacing: 1px;
            border-bottom: 1px solid var(--border-color) !important;
        }

        /* Level Badges */
        .lvl-badge {
            font-weight: 700;
            font-size: 0.7rem;
            padding: 2px 6px;
            border-radius: 4px;
            display: inline-block;
            min-width: 40px;
            text-align: center;
        }

        .lvl-TRC {
            background: #424242;
            color: #bdbdbd;
        }

        .lvl-DBG {
            background: #1e3a8a;
            color: #93c5fd;
        }

        .lvl-INF {
            background: #064e3b;
            color: #6ee7b7;
        }

        .lvl-WRN {
            background: #78350f;
            color: #fcd34d;
        }

        .lvl-ERR {
            background: #7f1d1d;
            color: #fca5a5;
        }

        .lvl-CRT {
            background: #ec4899;
            color: white;
            animation: pulse 2s infinite;
        }

        @keyframes pulse {
            0% {
                box-shadow: 0 0 0 0 rgba(236, 72, 153, 0.4);
            }

            70% {
                box-shadow: 0 0 0 10px rgba(236, 72, 153, 0);
            }

            100% {
                box-shadow: 0 0 0 0 rgba(236, 72, 153, 0);
            }
        }

        /* Controls */
        .details-control {
            cursor: pointer;
            color: var(--accent-color);
            transition: 0.2s;
        }

        .details-control:hover {
            transform: scale(1.2);
        }

        .exception-view {
            background: #000;
            color: #ff5555;
            padding: 1rem;
            border-radius: 8px;
            font-family: 'Fira Code', monospace;
            font-size: 0.75rem;
            margin: 0.5rem 0;
            border-left: 3px solid #7f1d1d;
        }

        /* Search Bar Customization */
        .dataTables_filter input {
            background: #242736;
            border: 1px solid var(--border-color);
            border-radius: 8px;
            color: white;
            padding: 6px 12px;
            width: 300px !important;
        }

        .btn-more {
            color: var(--accent-color);
            cursor: pointer;
            font-size: 0.75rem;
            text-decoration: none;
        }

        .props-col {
            color: #888;
            font-family: monospace;
            font-size: 0.75rem;
        }
    </style>
</head>

<body>

    <div id="drop-overlay">
        <i data-lucide="upload-cloud" size="64"></i>
        <h2 class="mt-3">Drop Log File to Import</h2>
    </div>

    <div class="main-container">
        <header class="d-flex justify-content-between align-items-center mb-4">
            <div>
                <h4 class="mb-0 fw-bold"><i data-lucide="terminal" class="me-2 text-primary"></i>LogView <span
                        class="text-primary">Pro</span></h4>
                <p class="text-muted small mb-0">v3.0 • Dark Mode Enabled</p>
            </div>
            <button class="btn btn-outline-primary btn-sm" onclick="document.getElementById('file-input').click()">
                <i data-lucide="file-plus" class="me-1"></i> Open File
            </button>
            <input type="file" id="file-input" hidden accept=".log,.txt">
        </header>

        <div class="table-card">
            <div class="d-flex justify-content-between align-items-center mb-3">
                <div class="d-flex align-items-center gap-3">
                    <select id="level-filter" class="form-select form-select-sm bg-dark border-secondary"
                        style="width: 150px;">
                        <option value="">All Levels</option>
                        <option value="CRT">CRT (Critical)</option>
                        <option value="ERR">ERR (Error)</option>
                        <option value="WRN">WRN (Warning)</option>
                        <option value="INF">INF (Info)</option>
                        <option value="DBG">DBG (Debug)</option>
                        <option value="TRC">TRC (Trace)</option>
                    </select>
                    <div id="stats-area" class="small text-muted"></div>
                </div>
            </div>

            <table id="log-table" class="table table-dark table-hover w-100">
                <thead>
                    <tr>
                        <th width="30"></th>
                        <th width="120">Timestamp</th>
                        <th width="80">Level</th>
                        <th>Message</th>
                        <th width="300">Properties</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>

    <div class="modal fade" id="logModal" tabindex="-1">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content border-secondary shadow-lg">
                <div class="modal-header border-secondary">
                    <h6 class="modal-title">Log Message Detail</h6>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body p-0">
                    <pre id="modal-body-content" class="m-0 p-3"
                        style="background:#000; color:#fff; font-size:0.8rem;"></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();
        const TRUNCATE_LIMIT = 150;

        $(document).ready(function () {
            const table = $('#log-table').DataTable({
                dom: '<"d-flex justify-content-between align-items-center mb-2"f>rtip',
                pageLength: 50,
                columns: [
                    {
                        className: 'details-control',
                        orderable: false,
                        data: null,
                        render: (d, t, row) => row.exception ? '<i data-lucide="chevron-right" size="16"></i>' : ''
                    },
                    { data: 'time', className: 'text-muted' },
                    {
                        data: 'level',
                        render: l => `<span class="lvl-badge lvl-${l}">${l}</span>`
                    },
                    {
                        data: 'message',
                        render: function (data) {
                            if (data.length > TRUNCATE_LIMIT) {
                                return `<span>${data.substring(0, TRUNCATE_LIMIT)}</span><a class="btn-more ms-1" onclick="viewMore('${btoa(unescape(encodeURIComponent(data)))}')">...more</a>`;
                            }
                            return data;
                        }
                    },
                    {
                        data: 'props',
                        className: 'props-col',
                        render: p => p ? `<span title="${p} text-truncate d-block" style="max-width:280px">${p}</span>` : ''
                    }
                ],
                order: [[1, 'asc']],
                drawCallback: function () { lucide.createIcons(); },
                language: { search: "", searchPlaceholder: "Filter logs..." }
            });

            // Expandable Exception Rows
            $('#log-table tbody').on('click', 'td.details-control', function () {
                let tr = $(this).closest('tr'), row = table.row(tr);
                if (row.child.isShown()) {
                    row.child.hide();
                    $(this).html('<i data-lucide="chevron-right" size="16"></i>');
                } else if (row.data().exception) {
                    row.child(`<div class="exception-view">${row.data().exception}</div>`).show();
                    $(this).html('<i data-lucide="chevron-down" class="text-danger" size="16"></i>');
                }
                lucide.createIcons();
            });

            // Level Filter
            $('#level-filter').on('change', function () {
                table.column(2).search(this.value ? `^${this.value}$` : '', true, false).draw();
            });

            // --- FULL SCREEN DRAG & DROP ---
            let dragCounter = 0;
            window.addEventListener('dragenter', e => {
                e.preventDefault();
                dragCounter++;
                $('#drop-overlay').css('display', 'flex');
            });

            window.addEventListener('dragleave', e => {
                dragCounter--;
                if (dragCounter === 0) $('#drop-overlay').hide();
            });

            window.addEventListener('dragover', e => e.preventDefault());

            window.addEventListener('drop', e => {
                e.preventDefault();
                dragCounter = 0;
                $('#drop-overlay').hide();
                processFile(e.dataTransfer.files[0]);
            });

            $('#file-input').on('change', e => processFile(e.target.files[0]));

            function processFile(file) {
                if (!file) return;
                const reader = new FileReader();
                reader.onload = e => {
                    const logs = parseLogs(e.target.result);
                    table.clear().rows.add(logs).draw();
                    updateStats(logs);
                };
                reader.readAsText(file);
            }

            function parseLogs(text) {
                const lines = text.split(/\r?\n/);
                const results = [];
                // Support 6 levels: TRC, DBG, WRN, INF, ERR, CRT
                const headerRegex = /^(\d{2}:\d{2}:\d{2}\.\d{3})\s\[(TRC|DBG|WRN|INF|ERR|CRT)\]\s(.*)$/;

                lines.forEach(line => {
                    if (!line.trim()) return;
                    const match = line.match(headerRegex);

                    if (match) {
                        let content = match[3].trim();
                        let message = content, props = "";

                        // Parse props at the end: (key: value)
                        const lastParenIdx = content.lastIndexOf(' (');
                        if (lastParenIdx !== -1 && content.endsWith(')')) {
                            const possibleProps = content.substring(lastParenIdx + 2, content.length - 1);
                            if (possibleProps.includes(':')) {
                                props = possibleProps;
                                message = content.substring(0, lastParenIdx).trim();
                            }
                        }
                        results.push({ time: match[1], level: match[2], message, props, exception: "" });
                    } else if (results.length > 0) {
                        results[results.length - 1].exception += (results[results.length - 1].exception ? "\n" : "") + line;
                    }
                });
                return results;
            }

            function updateStats(logs) {
                const count = logs.length;
                const errs = logs.filter(l => l.level === 'ERR' || l.level === 'CRT').length;
                $('#stats-area').html(`<span class="me-3">${count} total logs</span> <span class="text-danger">${errs} errors/criticals</span>`);
            }

            window.viewMore = function (encoded) {
                const text = decodeURIComponent(escape(atob(encoded)));
                $('#modal-body-content').text(text);
                new bootstrap.Modal('#logModal').show();
            };
        });
    </script>
</body>

</html>
init 2026-04-27 18:57:25 +07:00			`<!DOCTYPE html>`
rev4 2026-04-27 19:17:17 +07:00			`<html lang="en" data-bs-theme="dark">`
init 2026-04-27 18:57:25 +07:00
			`<head>`
			`<meta charset="UTF-8">`
			`<meta name="viewport" content="width=device-width, initial-scale=1.0">`
rev4 2026-04-27 19:17:17 +07:00			`<title>Log Viewer Pro // Dark Mode</title>`

init 2026-04-27 18:57:25 +07:00			`<link href="css/bootstrap.min.css" rel="stylesheet">`
			`<link href="css/dataTables.bootstrap5.min.css" rel="stylesheet">`
rev4 2026-04-27 19:17:17 +07:00			`<script src="js/lucide.min.js"></script>`

init 2026-04-27 18:57:25 +07:00			`<style>`
rev4 2026-04-27 19:17:17 +07:00			`:root {`
			`--bg-color: #0f111a;`
			`--card-bg: #1a1c27;`
			`--border-color: #2d303e;`
			`--accent-color: #3d5afe;`
rev3 2026-04-27 19:04:47 +07:00			`}`

rev4 2026-04-27 19:17:17 +07:00			`body {`
			`background-color: var(--bg-color);`
			`color: #e0e0e0;`
			`font-family: 'Inter', -apple-system, sans-serif;`
			`font-size: 0.85rem;`
			`overflow-x: hidden;`
init 2026-04-27 18:57:25 +07:00			`}`

rev4 2026-04-27 19:17:17 +07:00			`/* Full Screen Drop Zone */`
			`#drop-overlay {`
			`position: fixed;`
			`top: 0;`
			`left: 0;`
			`width: 100%;`
			`height: 100%;`
			`background: rgba(61, 90, 254, 0.9);`
			`z-index: 9999;`
			`display: none;`
			`flex-direction: column;`
			`align-items: center;`
			`justify-content: center;`
			`border: 4px dashed #fff;`
			`color: white;`
			`pointer-events: none;`
init 2026-04-27 18:57:25 +07:00			`}`

rev4 2026-04-27 19:17:17 +07:00			`/* Sleek Table Design */`
			`.main-container {`
			`padding: 1.5rem;`
			`max-width: 1600px;`
			`margin: 0 auto;`
init 2026-04-27 18:57:25 +07:00			`}`

rev3 2026-04-27 19:04:47 +07:00			`.table-card {`
rev4 2026-04-27 19:17:17 +07:00			`background: var(--card-bg);`
			`border: 1px solid var(--border-color);`
rev3 2026-04-27 19:04:47 +07:00			`border-radius: 12px;`
rev4 2026-04-27 19:17:17 +07:00			`padding: 1rem;`
			`box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);`
rev3 2026-04-27 19:04:47 +07:00			`}`

			`table.dataTable {`
rev4 2026-04-27 19:17:17 +07:00			`border: none !important;`
			`}`

			`table.dataTable thead th {`
			`background: #242736;`
			`text-transform: uppercase;`
			`font-size: 0.7rem;`
			`letter-spacing: 1px;`
			`border-bottom: 1px solid var(--border-color) !important;`
rev3 2026-04-27 19:04:47 +07:00			`}`

rev4 2026-04-27 19:17:17 +07:00			`/* Level Badges */`
			`.lvl-badge {`
			`font-weight: 700;`
			`font-size: 0.7rem;`
			`padding: 2px 6px;`
rev3 2026-04-27 19:04:47 +07:00			`border-radius: 4px;`
			`display: inline-block;`
rev4 2026-04-27 19:17:17 +07:00			`min-width: 40px;`
rev3 2026-04-27 19:04:47 +07:00			`text-align: center;`
rev1 2026-04-27 19:01:18 +07:00			`}`

rev4 2026-04-27 19:17:17 +07:00			`.lvl-TRC {`
			`background: #424242;`
			`color: #bdbdbd;`
			`}`

			`.lvl-DBG {`
			`background: #1e3a8a;`
			`color: #93c5fd;`
rev1 2026-04-27 19:01:18 +07:00			`}`

rev4 2026-04-27 19:17:17 +07:00			`.lvl-INF {`
			`background: #064e3b;`
			`color: #6ee7b7;`
rev1 2026-04-27 19:01:18 +07:00			`}`

rev4 2026-04-27 19:17:17 +07:00			`.lvl-WRN {`
			`background: #78350f;`
			`color: #fcd34d;`
init 2026-04-27 18:57:25 +07:00			`}`

rev4 2026-04-27 19:17:17 +07:00			`.lvl-ERR {`
			`background: #7f1d1d;`
			`color: #fca5a5;`
init 2026-04-27 18:57:25 +07:00			`}`

rev4 2026-04-27 19:17:17 +07:00			`.lvl-CRT {`
			`background: #ec4899;`
			`color: white;`
			`animation: pulse 2s infinite;`
			`}`

			`@keyframes pulse {`
			`0% {`
			`box-shadow: 0 0 0 0 rgba(236, 72, 153, 0.4);`
			`}`

			`70% {`
			`box-shadow: 0 0 0 10px rgba(236, 72, 153, 0);`
			`}`

			`100% {`
			`box-shadow: 0 0 0 0 rgba(236, 72, 153, 0);`
			`}`
			`}`

			`/* Controls */`
rev3 2026-04-27 19:04:47 +07:00			`.details-control {`
rev1 2026-04-27 19:01:18 +07:00			`cursor: pointer;`
rev4 2026-04-27 19:17:17 +07:00			`color: var(--accent-color);`
			`transition: 0.2s;`
init 2026-04-27 18:57:25 +07:00			`}`

rev4 2026-04-27 19:17:17 +07:00			`.details-control:hover {`
			`transform: scale(1.2);`
			`}`

			`.exception-view {`
			`background: #000;`
			`color: #ff5555;`
			`padding: 1rem;`
			`border-radius: 8px;`
			`font-family: 'Fira Code', monospace;`
rev3 2026-04-27 19:04:47 +07:00			`font-size: 0.75rem;`
rev4 2026-04-27 19:17:17 +07:00			`margin: 0.5rem 0;`
			`border-left: 3px solid #7f1d1d;`
rev3 2026-04-27 19:04:47 +07:00			`}`

rev4 2026-04-27 19:17:17 +07:00			`/* Search Bar Customization */`
			`.dataTables_filter input {`
			`background: #242736;`
			`border: 1px solid var(--border-color);`
			`border-radius: 8px;`
			`color: white;`
			`padding: 6px 12px;`
			`width: 300px !important;`
init 2026-04-27 18:57:25 +07:00			`}`

rev3 2026-04-27 19:04:47 +07:00			`.btn-more {`
rev4 2026-04-27 19:17:17 +07:00			`color: var(--accent-color);`
rev3 2026-04-27 19:04:47 +07:00			`cursor: pointer;`
rev4 2026-04-27 19:17:17 +07:00			`font-size: 0.75rem;`
			`text-decoration: none;`
rev2 2026-04-27 19:03:12 +07:00			`}`

rev4 2026-04-27 19:17:17 +07:00			`.props-col {`
			`color: #888;`
			`font-family: monospace;`
rev3 2026-04-27 19:04:47 +07:00			`font-size: 0.75rem;`
init 2026-04-27 18:57:25 +07:00			`}`
			`</style>`
			`</head>`

			`<body>`

rev4 2026-04-27 19:17:17 +07:00			`<div id="drop-overlay">`
			`<i data-lucide="upload-cloud" size="64"></i>`
			`<h2 class="mt-3">Drop Log File to Import</h2>`
			`</div>`

			`<div class="main-container">`
			`<header class="d-flex justify-content-between align-items-center mb-4">`
			`<div>`
			`<h4 class="mb-0 fw-bold"><i data-lucide="terminal" class="me-2 text-primary"></i>LogView <span`
			`class="text-primary">Pro</span></h4>`
			`<p class="text-muted small mb-0">v3.0 • Dark Mode Enabled</p>`
			`</div>`
			`<button class="btn btn-outline-primary btn-sm" onclick="document.getElementById('file-input').click()">`
			`<i data-lucide="file-plus" class="me-1"></i> Open File`
			`</button>`
rev1 2026-04-27 19:01:18 +07:00			`<input type="file" id="file-input" hidden accept=".log,.txt">`
rev4 2026-04-27 19:17:17 +07:00			`</header>`
init 2026-04-27 18:57:25 +07:00
rev3 2026-04-27 19:04:47 +07:00			`<div class="table-card">`
			`<div class="d-flex justify-content-between align-items-center mb-3">`
rev4 2026-04-27 19:17:17 +07:00			`<div class="d-flex align-items-center gap-3">`
			`<select id="level-filter" class="form-select form-select-sm bg-dark border-secondary"`
			`style="width: 150px;">`
rev3 2026-04-27 19:04:47 +07:00			`<option value="">All Levels</option>`
rev4 2026-04-27 19:17:17 +07:00			`<option value="CRT">CRT (Critical)</option>`
			`<option value="ERR">ERR (Error)</option>`
			`<option value="WRN">WRN (Warning)</option>`
			`<option value="INF">INF (Info)</option>`
			`<option value="DBG">DBG (Debug)</option>`
			`<option value="TRC">TRC (Trace)</option>`
init 2026-04-27 18:57:25 +07:00			`</select>`
rev4 2026-04-27 19:17:17 +07:00			`<div id="stats-area" class="small text-muted"></div>`
init 2026-04-27 18:57:25 +07:00			`</div>`
			`</div>`

rev4 2026-04-27 19:17:17 +07:00			`<table id="log-table" class="table table-dark table-hover w-100">`
rev1 2026-04-27 19:01:18 +07:00			`<thead>`
init 2026-04-27 18:57:25 +07:00			`<tr>`
rev1 2026-04-27 19:01:18 +07:00			`<th width="30"></th>`
rev4 2026-04-27 19:17:17 +07:00			`<th width="120">Timestamp</th>`
			`<th width="80">Level</th>`
init 2026-04-27 18:57:25 +07:00			`<th>Message</th>`
rev4 2026-04-27 19:17:17 +07:00			`<th width="300">Properties</th>`
init 2026-04-27 18:57:25 +07:00			`</tr>`
			`</thead>`
			`<tbody></tbody>`
			`</table>`
			`</div>`
			`</div>`

rev1 2026-04-27 19:01:18 +07:00			`<div class="modal fade" id="logModal" tabindex="-1">`
rev4 2026-04-27 19:17:17 +07:00			`<div class="modal-dialog modal-lg modal-dialog-centered">`
			`<div class="modal-content border-secondary shadow-lg">`
			`<div class="modal-header border-secondary">`
			`<h6 class="modal-title">Log Message Detail</h6>`
rev1 2026-04-27 19:01:18 +07:00			`<button type="button" class="btn-close" data-bs-dismiss="modal"></button>`
			`</div>`
rev4 2026-04-27 19:17:17 +07:00			`<div class="modal-body p-0">`
			`<pre id="modal-body-content" class="m-0 p-3"`
			`style="background:#000; color:#fff; font-size:0.8rem;"></pre>`
rev1 2026-04-27 19:01:18 +07:00			`</div>`
			`</div>`
			`</div>`
			`</div>`

init 2026-04-27 18:57:25 +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>`
rev1 2026-04-27 19:01:18 +07:00			`<script src="js/bootstrap.bundle.min.js"></script>`
init 2026-04-27 18:57:25 +07:00
			`<script>`
rev4 2026-04-27 19:17:17 +07:00			`lucide.createIcons();`
			`const TRUNCATE_LIMIT = 150;`
rev1 2026-04-27 19:01:18 +07:00
rev4 2026-04-27 19:17:17 +07:00			`$(document).ready(function () {`
rev3 2026-04-27 19:04:47 +07:00			`const table = $('#log-table').DataTable({`
rev4 2026-04-27 19:17:17 +07:00			`dom: '<"d-flex justify-content-between align-items-center mb-2"f>rtip',`
			`pageLength: 50,`
init 2026-04-27 18:57:25 +07:00			`columns: [`
			`{`
rev1 2026-04-27 19:01:18 +07:00			`className: 'details-control',`
			`orderable: false,`
			`data: null,`
rev4 2026-04-27 19:17:17 +07:00			`render: (d, t, row) => row.exception ? '<i data-lucide="chevron-right" size="16"></i>' : ''`
init 2026-04-27 18:57:25 +07:00			`},`
rev4 2026-04-27 19:17:17 +07:00			`{ data: 'time', className: 'text-muted' },`
rev1 2026-04-27 19:01:18 +07:00			`{`
			`data: 'level',`
rev4 2026-04-27 19:17:17 +07:00			render: l => `<span class="lvl-badge lvl-${l}">${l}</span>`
rev1 2026-04-27 19:01:18 +07:00			`},`
init 2026-04-27 18:57:25 +07:00			`{`
			`data: 'message',`
rev3 2026-04-27 19:04:47 +07:00			`render: function (data) {`
			`if (data.length > TRUNCATE_LIMIT) {`
rev4 2026-04-27 19:17:17 +07:00			return `<span>${data.substring(0, TRUNCATE_LIMIT)}</span><a class="btn-more ms-1" onclick="viewMore('${btoa(unescape(encodeURIComponent(data)))}')">...more</a>`;
rev1 2026-04-27 19:01:18 +07:00			`}`
			`return data;`
init 2026-04-27 18:57:25 +07:00			`}`
			`},`
rev1 2026-04-27 19:01:18 +07:00			`{`
			`data: 'props',`
rev4 2026-04-27 19:17:17 +07:00			`className: 'props-col',`
			render: p => p ? `<span title="${p} text-truncate d-block" style="max-width:280px">${p}</span>` : ''
rev1 2026-04-27 19:01:18 +07:00			`}`
			`],`
			`order: [[1, 'asc']],`
rev4 2026-04-27 19:17:17 +07:00			`drawCallback: function () { lucide.createIcons(); },`
			`language: { search: "", searchPlaceholder: "Filter logs..." }`
init 2026-04-27 18:57:25 +07:00			`});`

rev4 2026-04-27 19:17:17 +07:00			`// Expandable Exception Rows`
rev1 2026-04-27 19:01:18 +07:00			`$('#log-table tbody').on('click', 'td.details-control', function () {`
rev4 2026-04-27 19:17:17 +07:00			`let tr = $(this).closest('tr'), row = table.row(tr);`
rev1 2026-04-27 19:01:18 +07:00			`if (row.child.isShown()) {`
			`row.child.hide();`
rev4 2026-04-27 19:17:17 +07:00			`$(this).html('<i data-lucide="chevron-right" size="16"></i>');`
rev1 2026-04-27 19:01:18 +07:00			`} else if (row.data().exception) {`
rev4 2026-04-27 19:17:17 +07:00			row.child(`<div class="exception-view">${row.data().exception}</div>`).show();
			`$(this).html('<i data-lucide="chevron-down" class="text-danger" size="16"></i>');`
rev1 2026-04-27 19:01:18 +07:00			`}`
rev4 2026-04-27 19:17:17 +07:00			`lucide.createIcons();`
init 2026-04-27 18:57:25 +07:00			`});`

rev3 2026-04-27 19:04:47 +07:00			`// Level Filter`
			`$('#level-filter').on('change', function () {`
rev4 2026-04-27 19:17:17 +07:00			table.column(2).search(this.value ? `^${this.value}$` : '', true, false).draw();
init 2026-04-27 18:57:25 +07:00			`});`

rev4 2026-04-27 19:17:17 +07:00			`// --- FULL SCREEN DRAG & DROP ---`
			`let dragCounter = 0;`
			`window.addEventListener('dragenter', e => {`
rev1 2026-04-27 19:01:18 +07:00			`e.preventDefault();`
rev4 2026-04-27 19:17:17 +07:00			`dragCounter++;`
			`$('#drop-overlay').css('display', 'flex');`
			`});`

			`window.addEventListener('dragleave', e => {`
			`dragCounter--;`
			`if (dragCounter === 0) $('#drop-overlay').hide();`
init 2026-04-27 18:57:25 +07:00			`});`
rev4 2026-04-27 19:17:17 +07:00
			`window.addEventListener('dragover', e => e.preventDefault());`

			`window.addEventListener('drop', e => {`
			`e.preventDefault();`
			`dragCounter = 0;`
			`$('#drop-overlay').hide();`
			`processFile(e.dataTransfer.files[0]);`
			`});`

rev3 2026-04-27 19:04:47 +07:00			`$('#file-input').on('change', e => processFile(e.target.files[0]));`
init 2026-04-27 18:57:25 +07:00
rev3 2026-04-27 19:04:47 +07:00			`function processFile(file) {`
rev1 2026-04-27 19:01:18 +07:00			`if (!file) return;`
init 2026-04-27 18:57:25 +07:00			`const reader = new FileReader();`
rev1 2026-04-27 19:01:18 +07:00			`reader.onload = e => {`
rev4 2026-04-27 19:17:17 +07:00			`const logs = parseLogs(e.target.result);`
			`table.clear().rows.add(logs).draw();`
			`updateStats(logs);`
init 2026-04-27 18:57:25 +07:00			`};`
			`reader.readAsText(file);`
			`}`

rev4 2026-04-27 19:17:17 +07:00			`function parseLogs(text) {`
init 2026-04-27 18:57:25 +07:00			`const lines = text.split(/\r?\n/);`
rev3 2026-04-27 19:04:47 +07:00			`const results = [];`
rev4 2026-04-27 19:17:17 +07:00			`// Support 6 levels: TRC, DBG, WRN, INF, ERR, CRT`
			`const headerRegex = /^(\d{2}:\d{2}:\d{2}\.\d{3})\s\[(TRC\|DBG\|WRN\|INF\|ERR\|CRT)\]\s(.*)$/;`
init 2026-04-27 18:57:25 +07:00
			`lines.forEach(line => {`
rev4 2026-04-27 19:17:17 +07:00			`if (!line.trim()) return;`
rev3 2026-04-27 19:04:47 +07:00			`const match = line.match(headerRegex);`
rev4 2026-04-27 19:17:17 +07:00
rev3 2026-04-27 19:04:47 +07:00			`if (match) {`
			`let content = match[3].trim();`
rev4 2026-04-27 19:17:17 +07:00			`let message = content, props = "";`

			`// Parse props at the end: (key: value)`
			`const lastParenIdx = content.lastIndexOf(' (');`
			`if (lastParenIdx !== -1 && content.endsWith(')')) {`
			`const possibleProps = content.substring(lastParenIdx + 2, content.length - 1);`
			`if (possibleProps.includes(':')) {`
			`props = possibleProps;`
			`message = content.substring(0, lastParenIdx).trim();`
rev3 2026-04-27 19:04:47 +07:00			`}`
init 2026-04-27 18:57:25 +07:00			`}`
rev4 2026-04-27 19:17:17 +07:00			`results.push({ time: match[1], level: match[2], message, props, exception: "" });`
			`} else if (results.length > 0) {`
			`results[results.length - 1].exception += (results[results.length - 1].exception ? "\n" : "") + line;`
init 2026-04-27 18:57:25 +07:00			`}`
			`});`
rev3 2026-04-27 19:04:47 +07:00			`return results;`
init 2026-04-27 18:57:25 +07:00			`}`
rev3 2026-04-27 19:04:47 +07:00
rev4 2026-04-27 19:17:17 +07:00			`function updateStats(logs) {`
			`const count = logs.length;`
			`const errs = logs.filter(l => l.level === 'ERR' \|\| l.level === 'CRT').length;`
			$('#stats-area').html(`<span class="me-3">${count} total logs</span> <span class="text-danger">${errs} errors/criticals</span>`);
			`}`

			`window.viewMore = function (encoded) {`
rev3 2026-04-27 19:04:47 +07:00			`const text = decodeURIComponent(escape(atob(encoded)));`
			`$('#modal-body-content').text(text);`
			`new bootstrap.Modal('#logModal').show();`
			`};`
init 2026-04-27 18:57:25 +07:00			`});`
			`</script>`
			`</body>`

			`</html>`