feat: Added favicon and PWA

2025-07-10 08:57:57 +00:00
parent 22481e5af2
commit 1df4920406
5 changed files with 55 additions and 1 deletions
@@ -0,0 +1,21 @@
+{
+  "name": "EchoLog",
+  "short_name": "EchoLog",
+  "start_url": "/",
+  "display": "standalone",
+  "background_color": "#ffffff",
+  "theme_color": "#0f172a",
+  "description": "Your personal homelab journal",
+  "icons": [
+    {
+      "src": "/static/echolog.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/static/echolog.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ]
+}
@@ -0,0 +1,15 @@
+self.addEventListener('install', function(event) {
+  self.skipWaiting();
+});
+
+self.addEventListener('activate', function(event) {
+  event.waitUntil(self.clients.claim());
+});
+
+self.addEventListener('fetch', function(event) {
+  event.respondWith(
+    caches.match(event.request).then(function(response) {
+      return response || fetch(event.request);
+    })
+  );
+});
@@ -4,8 +4,22 @@
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>EchoLog</title>
+    <link rel="icon" type="image/png" href="{{ url_for('static', filename='echolog.png') }}">
    <link href="{{ url_for('static', filename='output.css') }}" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
+    <!-- PWA Manifest and Meta -->
+    <link rel="manifest" href="{{ url_for('static', filename='manifest.json') }}">
+    <meta name="theme-color" content="#0f172a">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+    <link rel="apple-touch-icon" href="{{ url_for('static', filename='echolog.png') }}">
+    <script>
+      if ('serviceWorker' in navigator) {
+        window.addEventListener('load', function() {
+          navigator.serviceWorker.register("{{ url_for('static', filename='service-worker.js') }}");
+        });
+      }
+    </script>
 </head>
 <body class="bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900 min-h-screen text-white">
    <div class="container mx-auto max-w-2xl p-6">
@@ -4,7 +4,9 @@
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>EchoLog</title>
+    <link rel="icon" type="image/png" href="{{ url_for('static', filename='echolog.png') }}">
    <link href="{{ url_for('static', filename='output.css') }}" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
 </head>
 <body class="bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900 min-h-screen text-white flex items-center justify-center">
    <div class="w-full max-w-md p-8 bg-gray-900/90 rounded-2xl shadow-2xl border border-gray-800">
@@ -24,7 +26,9 @@
                <label for="password" class="block text-xs font-semibold text-gray-400 mb-1">Password</label>
                <input type="password" id="password" name="password" class="w-full p-3 bg-gray-800 border border-gray-700 rounded focus:ring-2 focus:ring-blue-500" placeholder="Password" required>
            </div>
-            <button type="submit" class="w-full py-3 bg-gradient-to-r from-blue-500 to-pink-500 text-white font-bold rounded shadow hover:scale-105 transition">Login</button>
+            <button type="submit" class="w-full py-3 bg-gradient-to-r from-blue-500 to-pink-500 text-white font-bold rounded shadow hover:scale-105 transition">
+                <i class="fas fa-sign-in-alt mr-2"></i>Login
+            </button>
        </form>
    </div>
 </body>