feat: customize frontend

dfl-aeb · dfl-aeb · commit abc200450d27 · 2025-01-31T08:13:56.000Z
diff --git a/app/frontend/index.html b/app/frontend/index.html
@@ -4,7 +4,7 @@
         <meta charset="UTF-8" />
         <link rel="icon" type="image/x-icon" href="/favicon.ico" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <title>Wahlomat mit GPT</title>
+        <title>AEB Techdocs powered by GPT</title>
     </head>
     <body>
         <div id="root"></div>
diff --git a/app/frontend/src/locales/en/translation.json b/app/frontend/src/locales/en/translation.json
@@ -1,6 +1,6 @@
 {
-    "pageTitle": "Wahlomat mit GPT",
-    "headerTitle": "Wahlomat mit GPT",
+    "pageTitle": "AEB Techdocs powered by GPT",
+    "headerTitle": "AEB Techdocs powered by GPT",
     "chat": "Chat",
     "qa": "Ask a question",
     "login": "Login",
@@ -37,10 +37,10 @@
     "chatEmptyStateTitle": "Chat with your data",
     "chatEmptyStateSubtitle": "Ask anything or try an example",
     "defaultExamples": {
-        "1": "What is included in my Northwind Health Plus plan that is not in standard?",
-        "2": "What happens in a performance review?",
-        "3": "What does a Product Manager do?",
-        "placeholder": "Type a new question (e.g. does my plan cover annual eye exams?)"
+        "1": "How do I deploy an application to test and production environments?",
+        "2": "What do I need to configure in my Helm Charts to enable authentication?",
+        "3": "What is ArgoCD and GitOps?",
+        "placeholder": "Type a new question (e.g. why does my deployment fail?)"
     },
     "askTitle": "Ask your data",
     "gpt4vExamples": {
diff --git a/app/frontend/src/pages/layout/Layout.module.css b/app/frontend/src/pages/layout/Layout.module.css
@@ -5,8 +5,28 @@
 }
 
 .header {
-    background: linear-gradient(to bottom, black, #FF0000, #FFCC00);
-    color: #f2f2f2;
+    background: white; /* Weißer Hintergrund */
+    color: #222; /* Textfarbe anpassen, falls nötig */
+    position: relative; /* Damit das Pseudo-Element relativ dazu positioniert wird */
+    padding-bottom: 5px; /* Platz für die Linie */
+}
+
+.header::after {
+    content: "";
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 3px; /* Dicke der Linie */
+    background: linear-gradient(
+        to right,
+        hsla(345, 100%, 45%, 1) 5%,
+        hsla(274, 43%, 37%, 1) 23%,
+        hsla(220, 73%, 29%, 1) 41%,
+        hsla(211, 100%, 45%, 1) 59%,
+        hsla(88, 63%, 44%, 1) 77%,
+        hsla(45, 100%, 49%, 1) 95%
+    );
 }
 
 .headerContainer {
@@ -21,7 +41,7 @@
 .headerTitleContainer {
     display: flex;
     align-items: center;
-    color: #f2f2f2;
+    color: #000000;
     text-decoration: none;
 }
 
@@ -39,7 +59,7 @@
     z-index: 100;
     display: none;
     flex-direction: column;
-    background-color: #222222;
+    /* background-color: #222222; */
     position: absolute;
     top: 2.7rem;
     right: 0;
@@ -55,9 +75,9 @@
 
 .headerNavPageLink {
     padding: 1rem;
-    border-bottom: 1px solid #333;
+    /* border-bottom: 1px solid #333; */
     text-align: right;
-    color: #f2f2f2;
+    color: #000000;
     text-decoration: none;
     opacity: 0.75;
     transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
@@ -71,11 +91,12 @@
 }
 
 .headerNavPageLinkActive {
-    color: #f2f2f2;
+    color: #000000;
     text-decoration: none;
     font-size: 1.2rem;
     text-align: right;
     padding: 1rem;
+    font-weight: bold;
 }
 
 .headerNavLeftMargin {
