diff --git a/package.json b/package.json
index d8b37ac..58a9158 100644
--- a/package.json
+++ b/package.json
@@ -6,6 +6,7 @@
"private": true,
"scripts": {
"start": "node index.js",
+ "install": "cp node_modules/font-awesome/css/font-awesome.min.css public/css/font-awesome.min.css && cp -r node_modules/font-awesome/fonts public/fonts",
"dev": "node index.js ./logs",
"demo": "mkdir -p ./demo-logs && node index.js ./demo-logs",
"test-logs": "mkdir -p ./demo-logs && echo 'Starting demo log generation...' && node -e 'setInterval(() => console.log(new Date().toISOString() + \" [INFO] Sample log entry \" + Math.random()), 1000)' > ./demo-logs/sample.log 2>&1 &",
@@ -22,6 +23,7 @@
],
"dependencies": {
"express": "^5.1.0",
+ "font-awesome": "^4.7.0",
"tail-stream": "^0.3.4"
},
"engines": {
diff --git a/public/main.css b/public/css/main.css
similarity index 95%
rename from public/main.css
rename to public/css/main.css
index 9a6b930..e01ac1f 100644
--- a/public/main.css
+++ b/public/css/main.css
@@ -5,6 +5,23 @@
box-sizing: border-box;
}
+/* Font faces */
+@font-face {
+ font-family: 'Inter';
+ src: url('/fonts/Inter/Inter-VariableFont_slnt,wght.ttf') format('truetype-variations');
+ font-weight: 100 900;
+ font-style: normal;
+ font-display: swap;
+}
+
+@font-face {
+ font-family: 'JetBrains Mono';
+ src: url('/fonts/JetBrainsMono/JetBrainsMono-Regular.woff2') format('woff2');
+ font-weight: 100 800;
+ font-style: normal;
+ font-display: swap;
+}
+
:root {
/* Color palette */
--primary-color: #2563eb;
@@ -14,34 +31,34 @@
--success-color: #10b981;
--warning-color: #f59e0b;
--danger-color: #ef4444;
-
+
/* Background colors */
--bg-primary: #ffffff;
--bg-secondary: #f8fafc;
--bg-tertiary: #f1f5f9;
--bg-dark: #0f172a;
--bg-darker: #020617;
-
+
/* Text colors */
--text-primary: #1e293b;
--text-secondary: #64748b;
--text-muted: #94a3b8;
--text-inverse: #ffffff;
-
+
/* Border colors */
--border-light: #e2e8f0;
--border-medium: #cbd5e1;
--border-dark: #475569;
-
+
/* Shadows */
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
-
+
/* Fonts */
--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--font-mono: 'JetBrains Mono', 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
-
+
/* Spacing */
--spacing-xs: 0.25rem;
--spacing-sm: 0.5rem;
@@ -49,12 +66,12 @@
--spacing-lg: 1.5rem;
--spacing-xl: 2rem;
--spacing-2xl: 3rem;
-
+
/* Border radius */
--radius-sm: 0.375rem;
--radius-md: 0.5rem;
--radius-lg: 0.75rem;
-
+
/* Transitions */
--transition-fast: 150ms ease-in-out;
--transition-normal: 250ms ease-in-out;
@@ -175,8 +192,15 @@ body {
}
@keyframes pulse-green {
- 0%, 100% { opacity: 1; }
- 50% { opacity: 0.6; }
+
+ 0%,
+ 100% {
+ opacity: 1;
+ }
+
+ 50% {
+ opacity: 0.6;
+ }
}
.current-file {
@@ -336,11 +360,11 @@ body {
border-radius: 50%;
}
-input:checked + .slider {
+input:checked+.slider {
background-color: var(--primary-color);
}
-input:checked + .slider:before {
+input:checked+.slider:before {
transform: translateX(24px);
}
@@ -646,16 +670,22 @@ input:checked + .slider:before {
/* Animations */
@keyframes pulse {
- from { opacity: 0.8; }
- to { opacity: 1; }
+ from {
+ opacity: 0.8;
+ }
+
+ to {
+ opacity: 1;
+ }
}
@keyframes fadeIn {
- from {
+ from {
opacity: 0;
transform: translateY(10px);
}
- to {
+
+ to {
opacity: 1;
transform: translateY(0);
}
@@ -692,22 +722,22 @@ input:checked + .slider:before {
.sidebar {
width: 250px;
}
-
+
.nav-content {
padding: var(--spacing-md);
}
-
+
.controls-panel {
flex-direction: column;
align-items: stretch;
gap: var(--spacing-md);
}
-
+
.control-group {
flex-wrap: wrap;
justify-content: space-between;
}
-
+
.input-group input {
width: 150px;
}
@@ -717,16 +747,16 @@ input:checked + .slider:before {
.main-content {
flex-direction: column;
}
-
+
.sidebar {
width: 100%;
height: 200px;
border-right: none;
border-bottom: 1px solid var(--border-light);
}
-
+
.nav-info {
flex-direction: column;
gap: var(--spacing-sm);
}
-}
+}
\ No newline at end of file
diff --git a/public/fonts/Inter-VariableFont_opsz,wght.ttf b/public/fonts/Inter-VariableFont_opsz,wght.ttf
new file mode 100644
index 0000000..e31b51e
Binary files /dev/null and b/public/fonts/Inter-VariableFont_opsz,wght.ttf differ
diff --git a/public/fonts/JetBrainsMono-Regular.woff2 b/public/fonts/JetBrainsMono-Regular.woff2
new file mode 100644
index 0000000..fdf95dd
Binary files /dev/null and b/public/fonts/JetBrainsMono-Regular.woff2 differ
diff --git a/public/index.html b/public/index.html
index d792f00..f318222 100644
--- a/public/index.html
+++ b/public/index.html
@@ -7,15 +7,10 @@
Log Tail Monitor
-
-
-
-
-
-
+
-
+
@@ -161,7 +156,7 @@
-
+