fonts

Signed-off-by: ale <ale@manalejandro.com>
2025-07-25 01:22:01 +02:00
commit f039e8d95f
--- 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": {
--- a/public/css/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;
@@ -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 {
@@ -646,8 +670,13 @@ input:checked + .slider:before {

 /* Animations */
@keyframes pulse {
-    from { opacity: 0.8; }
-    to { opacity: 1; }
+    from {
+        opacity: 0.8;
+    }
+
+    to {
+        opacity: 1;
+    }
 }

@keyframes fadeIn {
@@ -655,6 +684,7 @@ input:checked + .slider:before {
        opacity: 0;
        transform: translateY(10px);
    }
+
    to {
        opacity: 1;
        transform: translateY(0);
--- a/public/fonts/Inter-VariableFont_opsz,wght.ttf
+++ b/public/fonts/Inter-VariableFont_opsz,wght.ttf
--- a/public/fonts/JetBrainsMono-Regular.woff2
+++ b/public/fonts/JetBrainsMono-Regular.woff2
--- a/public/index.html
+++ b/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>
--- a/public/js/main.js
+++ b/public/js/main.js