168 líneas
7.2 KiB
HTML
168 líneas
7.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<title>Log Tail Monitor</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<meta name="description" content="Real-time log file monitoring with Server-Sent Events">
|
|
|
|
<!-- Fonts -->
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
|
|
|
|
<!-- Icons -->
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
|
|
|
|
<!-- Stylesheets -->
|
|
<link rel="stylesheet" type="text/css" href="main.css">
|
|
</head>
|
|
|
|
<body>
|
|
<div class="app-container">
|
|
<!-- Navigation Bar -->
|
|
<nav class="navbar">
|
|
<div class="nav-content">
|
|
<div class="nav-brand">
|
|
<i class="fas fa-terminal"></i>
|
|
<h1><a href="/tail">Log Tail Monitor</a></h1>
|
|
</div>
|
|
<div class="nav-info">
|
|
<span id="connection-status" class="status-indicator">
|
|
<i class="fas fa-circle"></i>
|
|
<span>Disconnected</span>
|
|
</span>
|
|
<span id="current-file" class="current-file"></span>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Main Content -->
|
|
<main class="main-content">
|
|
<!-- Sidebar for file selection -->
|
|
<aside class="sidebar" id="sidebar">
|
|
<div class="sidebar-header">
|
|
<h3><i class="fas fa-folder-open"></i> Available Files</h3>
|
|
<button id="refresh-files" class="btn btn-icon" title="Refresh file list">
|
|
<i class="fas fa-sync-alt"></i>
|
|
</button>
|
|
</div>
|
|
<div class="file-list" id="file-list">
|
|
<div class="loading">
|
|
<i class="fas fa-spinner fa-spin"></i>
|
|
<span>Loading files...</span>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
|
|
<!-- Log viewer -->
|
|
<section class="log-viewer">
|
|
<!-- Controls -->
|
|
<div class="controls-panel">
|
|
<div class="control-group">
|
|
<div class="control-item">
|
|
<label class="switch">
|
|
<input type="checkbox" id="auto-scroll" checked>
|
|
<span class="slider"></span>
|
|
</label>
|
|
<span class="control-label">Auto Scroll</span>
|
|
</div>
|
|
|
|
<div class="control-item">
|
|
<div class="input-group">
|
|
<i class="fas fa-search"></i>
|
|
<input type="text" id="filter-input" placeholder="Filter logs..." autocomplete="off">
|
|
<button id="clear-filter" class="btn-clear" title="Clear filter">
|
|
<i class="fas fa-times"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="control-item">
|
|
<div class="input-group">
|
|
<i class="fas fa-highlighter"></i>
|
|
<input type="text" id="highlight-input" placeholder="Highlight text..." autocomplete="off">
|
|
<button id="clear-highlight" class="btn-clear" title="Clear highlight">
|
|
<i class="fas fa-times"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="control-group">
|
|
<button id="pause-btn" class="btn btn-secondary">
|
|
<i class="fas fa-pause"></i>
|
|
<span>Pause</span>
|
|
</button>
|
|
<button id="clear-logs" class="btn btn-secondary">
|
|
<i class="fas fa-trash"></i>
|
|
<span>Clear</span>
|
|
</button>
|
|
<button id="export-logs" class="btn btn-secondary">
|
|
<i class="fas fa-download"></i>
|
|
<span>Export</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Log content -->
|
|
<div class="log-container">
|
|
<div class="log-header">
|
|
<div class="log-stats">
|
|
<span class="stat">
|
|
<i class="fas fa-list"></i>
|
|
<span id="line-count">0</span> lines
|
|
</span>
|
|
<span class="stat">
|
|
<i class="fas fa-eye"></i>
|
|
<span id="visible-count">0</span> visible
|
|
</span>
|
|
<span class="stat" id="last-update-time">
|
|
<i class="fas fa-clock"></i>
|
|
<span>Never updated</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="log-content" id="log-output">
|
|
<div class="welcome-message" id="welcome-message">
|
|
<div class="welcome-icon">
|
|
<i class="fas fa-file-alt"></i>
|
|
</div>
|
|
<h3>Welcome to Log Tail Monitor</h3>
|
|
<p>Select a file from the sidebar to start monitoring logs in real-time.</p>
|
|
<div class="features">
|
|
<div class="feature">
|
|
<i class="fas fa-filter"></i>
|
|
<span>Filter logs by content</span>
|
|
</div>
|
|
<div class="feature">
|
|
<i class="fas fa-highlighter"></i>
|
|
<span>Highlight important text</span>
|
|
</div>
|
|
<div class="feature">
|
|
<i class="fas fa-download"></i>
|
|
<span>Export filtered results</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
</div>
|
|
|
|
<!-- Loading overlay -->
|
|
<div class="loading-overlay" id="loading-overlay">
|
|
<div class="loading-spinner">
|
|
<i class="fas fa-spinner fa-spin"></i>
|
|
<span>Connecting...</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- JavaScript -->
|
|
<script src="main.js"></script>
|
|
</body>
|
|
|
|
</html>
|