diff --git a/index.html b/index.html index 383ab97..a8b949c 100644 --- a/index.html +++ b/index.html @@ -4,7 +4,7 @@ - Log Analytics Dashboard + Log Viewer Pro @@ -24,7 +24,7 @@ background-color: var(--bg-dark); color: #f1f5f9; font-family: 'Inter', sans-serif; - font-size: 0.85rem; + font-size: 0.82rem; height: 100vh; overflow: hidden; } @@ -62,6 +62,7 @@ justify-content: space-between; margin-bottom: 2px; font-size: 0.8rem; + transition: 0.2s; } .file-item:hover { @@ -71,6 +72,7 @@ .file-item.active { background: rgba(74, 222, 128, 0.15); color: var(--brand-color); + font-weight: 600; } /* Main Content */ @@ -82,7 +84,7 @@ } .top-bar { - padding: 0.75rem 1.5rem; + padding: 0.6rem 1.5rem; background: var(--card-dark); border-bottom: 1px solid var(--border-color); display: flex; @@ -92,8 +94,8 @@ /* Chart Area */ .chart-container { - height: 180px; - background: #111827; + height: 160px; + background: #0b0e14; padding: 10px 20px; border-bottom: 1px solid var(--border-color); } @@ -101,41 +103,92 @@ /* Stats & Toggles */ .level-toggles .btn { border: none; - font-size: 0.7rem; - font-weight: 600; - padding: 4px 10px; + font-size: 0.72rem; + font-weight: 700; + padding: 4px 12px; margin-right: 4px; + border-radius: 4px; } .btn-check:not(:checked)+.btn { - opacity: 0.2; - filter: grayscale(1); + opacity: 0.25; + filter: grayscale(0.8); + } + + .btn-trc { + background: #64748b; + color: #fff; } .btn-dbg { background: #0ea5e9; - color: white; + color: #fff; } .btn-inf { background: #10b981; - color: white; + color: #fff; } .btn-wrn { background: #f59e0b; - color: white; + color: #fff; } .btn-err { background: #ef4444; + color: #fff; + } + + .btn-crt { + background: #a855f7; + color: #fff; + } + + /* Search with Clear Button */ + .search-container { + position: relative; + width: 320px; + } + + .search-container input { + background: rgba(0, 0, 0, 0.3); + border: 1px solid var(--border-color); color: white; + border-radius: 6px; + padding: 5px 35px 5px 35px; + width: 100%; + } + + .search-icon { + position: absolute; + left: 10px; + top: 50%; + transform: translateY(-50%); + opacity: 0.4; + } + + .clear-search { + position: absolute; + right: 10px; + top: 50%; + transform: translateY(-50%); + opacity: 0.4; + cursor: pointer; + display: none; + border: none; + background: none; + color: white; + } + + .clear-search:hover { + opacity: 1; } /* Table */ .content-area { flex-grow: 1; - padding: 1.25rem; + padding: 1rem; overflow-y: auto; } @@ -146,11 +199,12 @@ } table.dataTable thead th { - background: rgba(255, 255, 255, 0.03); - font-size: 0.7rem; + 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; + color: #94a3b8; } .lvl-indicator { @@ -161,30 +215,39 @@ margin-right: 8px; } - .row-INF .lvl-indicator { - background: #10b981; - } - - .row-ERR .lvl-indicator { - background: #ef4444; + .row-TRC .lvl-indicator { + background: #64748b; } .row-DBG .lvl-indicator { background: #0ea5e9; } + .row-INF .lvl-indicator { + background: #10b981; + } + .row-WRN .lvl-indicator { background: #f59e0b; } - .search-input { - background: rgba(0, 0, 0, 0.2); - border: 1px solid var(--border-color); - color: white; - border-radius: 4px; - padding: 4px 10px; - font-size: 0.8rem; - width: 250px; + .row-ERR .lvl-indicator { + background: #ef4444; + } + + .row-CRT .lvl-indicator { + background: #a855f7; + } + + .details-trigger { + cursor: pointer; + opacity: 0.4; + transition: 0.2s; + } + + .details-trigger:hover { + opacity: 1; + color: var(--brand-color); } @@ -194,10 +257,12 @@