optimized content loading with smaller css

.gitignore

@@ -55,3 +55,6 @@ Thumbs.db
 # Data files (optional - depends on your needs)
 data/secrets.json
 data/credentials.json
+
+# Node.js (Tailwind CSS build)
+node_modules/

package.json

@@ -0,0 +1,19 @@
+{
+  "name": "linkedinworkflow",
+  "version": "1.0.0",
+  "description": "Ein Multi-Agent AI System für die automatisierte Erstellung von LinkedIn Posts mit umfassender Profilanalyse und iterativem Writer-Critic Workflow.",
+  "main": "index.js",
+  "directories": {
+    "test": "tests"
+  },
+  "scripts": {
+    "build:css": "tailwindcss -c tailwind.config.js -i src/web/static/input.css -o src/web/static/tailwind.css --minify && tailwindcss -c tailwind-employee.config.js -i src/web/static/input.css -o src/web/static/tailwind-employee.css --minify",
+    "watch:css": "tailwindcss -c tailwind.config.js -i src/web/static/input.css -o src/web/static/tailwind.css --watch"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "tailwindcss": "3.4.17"
+  }
+}

src/web/static/input.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

src/web/templates/admin/base.html

@@ -5,24 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>{% block title %}Admin Panel{% endblock %}</title>
     <link rel="icon" type="image/png" href="/static/favicon.png">
-    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="/static/tailwind.css">
-    <script>
-        tailwind.config = {
-            theme: {
-                extend: {
-                    colors: {
-                        'brand': {
-                            'bg': '#3d4848',
-                            'bg-light': '#4a5858',
-                            'bg-dark': '#2d3838',
-                            'highlight': '#ffc700',
-                            'highlight-dark': '#e6b300',
-                        }
-                    }
-                }
-            }
-        }
-    </script>
     <style>
         body { background-color: #3d4848; }
         .nav-link.active { background-color: #ffc700; color: #2d3838; }

src/web/templates/admin/login.html

@@ -5,24 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Login - LinkedIn Posts</title>
     <link rel="icon" type="image/png" href="/static/favicon.png">
-    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="/static/tailwind.css">
-    <script>
-        tailwind.config = {
-            theme: {
-                extend: {
-                    colors: {
-                        'brand': {
-                            'bg': '#3d4848',
-                            'bg-light': '#4a5858',
-                            'bg-dark': '#2d3838',
-                            'highlight': '#ffc700',
-                            'highlight-dark': '#e6b300',
-                        }
-                    }
-                }
-            }
-        }
-    </script>
     <style>
         body { background-color: #3d4848; }
         .btn-primary { background-color: #ffc700; color: #2d3838; }

src/web/templates/base.html

@@ -4,24 +4,8 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>{% block title %}LinkedIn Posts{% endblock %}</title>
-    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="icon" type="image/png" href="/static/favicon.png">
-    <script>
+    <link rel="stylesheet" href="/static/tailwind.css">
-        tailwind.config = {
-            theme: {
-                extend: {
-                    colors: {
-                        'brand': {
-                            'bg': '#3d4848',
-                            'bg-light': '#4a5858',
-                            'bg-dark': '#2d3838',
-                            'highlight': '#ffc700',
-                            'highlight-dark': '#e6b300',
-                        }
-                    }
-                }
-            }
-        }
-    </script>
     <style>
         body { background-color: #3d4848; }
         .nav-link.active { background-color: #ffc700; color: #2d3838; }

src/web/templates/login.html

@@ -4,24 +4,8 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Login - LinkedIn Posts</title>
-    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="icon" type="image/png" href="/static/favicon.png">
-    <script>
+    <link rel="stylesheet" href="/static/tailwind.css">
-        tailwind.config = {
-            theme: {
-                extend: {
-                    colors: {
-                        'brand': {
-                            'bg': '#3d4848',
-                            'bg-light': '#4a5858',
-                            'bg-dark': '#2d3838',
-                            'highlight': '#ffc700',
-                            'highlight-dark': '#e6b300',
-                        }
-                    }
-                }
-            }
-        }
-    </script>
     <style>
         body { background-color: #3d4848; }
         .btn-primary { background-color: #ffc700; color: #2d3838; }

src/web/templates/user/auth_callback.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Anmeldung... - LinkedIn Posts</title>
-    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="/static/tailwind.css">
     <style>
         body { background-color: #3d4848; }
     </style>

src/web/templates/user/base.html

@@ -5,24 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>{% block title %}LinkedIn Posts{% endblock %}</title>
     <link rel="icon" type="image/png" href="/static/favicon.png">
-    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="/static/tailwind.css">
-    <script>
-        tailwind.config = {
-            theme: {
-                extend: {
-                    colors: {
-                        'brand': {
-                            'bg': '#3d4848',
-                            'bg-light': '#4a5858',
-                            'bg-dark': '#2d3838',
-                            'highlight': '#ffc700',
-                            'highlight-dark': '#e6b300',
-                        }
-                    }
-                }
-            }
-        }
-    </script>
     <style>
         body { background-color: #3d4848; }
         .nav-link.active { background-color: #ffc700; color: #2d3838; }

src/web/templates/user/company_base.html

@@ -5,24 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>{% block title %}{{ session.company_name or 'Unternehmen' }} - LinkedIn Posts{% endblock %}</title>
     <link rel="icon" type="image/png" href="/static/favicon.png">
-    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="/static/tailwind.css">
-    <script>
-        tailwind.config = {
-            theme: {
-                extend: {
-                    colors: {
-                        'brand': {
-                            'bg': '#3d4848',
-                            'bg-light': '#4a5858',
-                            'bg-dark': '#2d3838',
-                            'highlight': '#ffc700',
-                            'highlight-dark': '#e6b300',
-                        }
-                    }
-                }
-            }
-        }
-    </script>
     <style>
         body { background-color: #3d4848; }
         .nav-link.active { background-color: #ffc700; color: #2d3838; }

src/web/templates/user/employee_base.html

@@ -5,22 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>{% block title %}Dashboard{% endblock %} - LinkedIn Post Generator</title>
     <link rel="icon" type="image/png" href="/static/favicon.png">
-    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="/static/tailwind-employee.css">
-    <script>
-        tailwind.config = {
-            theme: {
-                extend: {
-                    colors: {
-                        'brand-bg': '#1a1a2e',
-                        'brand-bg-dark': '#0f0f1a',
-                        'brand-bg-light': '#252540',
-                        'brand-highlight': '#e94560',
-                        'brand-accent': '#0f3460',
-                    }
-                }
-            }
-        }
-    </script>
     <style>
         body {
             background-color: #0f0f1a;

src/web/templates/user/invite_accept.html

@@ -5,25 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Einladung annehmen - LinkedIn Posts</title>
     <link rel="icon" type="image/png" href="/static/favicon.png">
-    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="/static/tailwind.css">
-    <script>
-        tailwind.config = {
-            theme: {
-                extend: {
-                    colors: {
-                        'brand': {
-                            'bg': '#3d4848',
-                            'bg-light': '#4a5858',
-                            'bg-dark': '#2d3838',
-                            'highlight': '#ffc700',
-                            'highlight-dark': '#e6b300',
-                        },
-                        'linkedin': '#0A66C2'
-                    }
-                }
-            }
-        }
-    </script>
     <style>
         body { background-color: #3d4848; }
         .btn-linkedin { background-color: #0A66C2; }

src/web/templates/user/login.html

@@ -5,25 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Login - LinkedIn Posts</title>
     <link rel="icon" type="image/png" href="/static/favicon.png">
-    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="/static/tailwind.css">
-    <script>
-        tailwind.config = {
-            theme: {
-                extend: {
-                    colors: {
-                        'brand': {
-                            'bg': '#3d4848',
-                            'bg-light': '#4a5858',
-                            'bg-dark': '#2d3838',
-                            'highlight': '#ffc700',
-                            'highlight-dark': '#e6b300',
-                        },
-                        'linkedin': '#0A66C2'
-                    }
-                }
-            }
-        }
-    </script>
     <style>
         body { background-color: #3d4848; }
         .btn-linkedin { background-color: #0A66C2; }

src/web/templates/user/not_authorized.html

@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Nicht autorisiert - LinkedIn Posts</title>
     <link rel="icon" type="image/png" href="/static/favicon.png">
-    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="/static/tailwind.css">
     <style>
         body { background-color: #3d4848; }
         .card-bg { background-color: #4a5858; border-color: #5a6868; }

src/web/templates/user/onboarding/base.html

@@ -5,24 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>{% block title %}Onboarding{% endblock %} - LinkedIn Posts</title>
     <link rel="icon" type="image/png" href="/static/favicon.png">
-    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="/static/tailwind.css">
-    <script>
-        tailwind.config = {
-            theme: {
-                extend: {
-                    colors: {
-                        'brand': {
-                            'bg': '#3d4848',
-                            'bg-light': '#4a5858',
-                            'bg-dark': '#2d3838',
-                            'highlight': '#ffc700',
-                            'highlight-dark': '#e6b300',
-                        }
-                    }
-                }
-            }
-        }
-    </script>
     <style>
         body { background-color: #3d4848; }
         .card-bg { background-color: #4a5858; border-color: #5a6868; }

src/web/templates/user/register.html

@@ -5,25 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Registrierung - LinkedIn Posts</title>
     <link rel="icon" type="image/png" href="/static/favicon.png">
-    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="/static/tailwind.css">
-    <script>
-        tailwind.config = {
-            theme: {
-                extend: {
-                    colors: {
-                        'brand': {
-                            'bg': '#3d4848',
-                            'bg-light': '#4a5858',
-                            'bg-dark': '#2d3838',
-                            'highlight': '#ffc700',
-                            'highlight-dark': '#e6b300',
-                        },
-                        'linkedin': '#0A66C2'
-                    }
-                }
-            }
-        }
-    </script>
     <style>
         body { background-color: #3d4848; }
         .card-bg { background-color: #4a5858; border-color: #5a6868; }

src/web/templates/user/register_company.html

@@ -5,25 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Unternehmens Registrierung - LinkedIn Posts</title>
     <link rel="icon" type="image/png" href="/static/favicon.png">
-    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="/static/tailwind.css">
-    <script>
-        tailwind.config = {
-            theme: {
-                extend: {
-                    colors: {
-                        'brand': {
-                            'bg': '#3d4848',
-                            'bg-light': '#4a5858',
-                            'bg-dark': '#2d3838',
-                            'highlight': '#ffc700',
-                            'highlight-dark': '#e6b300',
-                        },
-                        'linkedin': '#0A66C2'
-                    }
-                }
-            }
-        }
-    </script>
     <style>
         body { background-color: #3d4848; }
         .btn-linkedin { background-color: #0A66C2; }

src/web/templates/user/register_ghostwriter.html

@@ -5,25 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Ghostwriter Registrierung - LinkedIn Posts</title>
     <link rel="icon" type="image/png" href="/static/favicon.png">
-    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="/static/tailwind.css">
-    <script>
-        tailwind.config = {
-            theme: {
-                extend: {
-                    colors: {
-                        'brand': {
-                            'bg': '#3d4848',
-                            'bg-light': '#4a5858',
-                            'bg-dark': '#2d3838',
-                            'highlight': '#ffc700',
-                            'highlight-dark': '#e6b300',
-                        },
-                        'linkedin': '#0A66C2'
-                    }
-                }
-            }
-        }
-    </script>
     <style>
         body { background-color: #3d4848; }
         .btn-linkedin { background-color: #0A66C2; }

tailwind-employee.config.js

@@ -0,0 +1,16 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ["./src/web/templates/user/employee_base.html", "./src/web/templates/user/employee_*.html"],
+  theme: {
+    extend: {
+      colors: {
+        'brand-bg': '#1a1a2e',
+        'brand-bg-dark': '#0f0f1a',
+        'brand-bg-light': '#252540',
+        'brand-highlight': '#e94560',
+        'brand-accent': '#0f3460',
+      }
+    },
+  },
+  plugins: [],
+}

tailwind.config.js

@@ -0,0 +1,20 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ["./src/web/templates/**/*.html"],
+  theme: {
+    extend: {
+      colors: {
+        'brand': {
+          'bg': '#3d4848',
+          'bg-light': '#4a5858',
+          'bg-dark': '#2d3838',
+          'highlight': '#ffc700',
+          'highlight-dark': '#e6b300',
+        },
+        'linkedin': '#0A66C2',
+      }
+    },
+  },
+  plugins: [],
+}
+