fonts

Signed-off-by: ale <ale@manalejandro.com>

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": {

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);
     }
-}
+}

public/index.html

@@ -7,15 +7,10 @@
     <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">
-    
+    <link href="css/font-awesome.min.css" rel="stylesheet">
     <!-- Stylesheets -->
-    <link rel="stylesheet" type="text/css" href="main.css">
+    <link rel="stylesheet" type="text/css" href="css/main.css">
 </head>
 
 <body>
@@ -161,7 +156,7 @@
     </div>
 
     <!-- JavaScript -->
-    <script src="main.js"></script>
+    <script src="js/main.js"></script>
 </body>
 
 </html>