Update index.html

Author: zorginkopen

index.html

@@ -6,19 +6,19 @@
   <title>Indicatiehulp.ai</title>
   <style>
     body {
-      font-family: Arial, sans-serif;
+      font-family: "Segoe UI", sans-serif;
       margin: 0;
       padding: 0;
-      background-color: #f4f4f4;
+      background-color: #e5ddd5;
       display: flex;
       flex-direction: column;
       height: 100vh;
     }
 
     h1 {
       text-align: center;
-      background-color: #ffc827;
-      color: black;
+      background-color: #128c7e;
+      color: white;
       padding: 12px 0;
       margin: 0;
       font-size: 20px;
@@ -30,59 +30,60 @@
       padding: 16px;
       display: flex;
       flex-direction: column;
+      background: url("https://www.transparenttextures.com/patterns/cubes.png") repeat;
+      background-color: #e5ddd5;
     }
 
     .message {
-      margin-bottom: 12px;
-      padding: 12px 16px;
+      margin-bottom: 10px;
+      padding: 10px 14px;
       border-radius: 10px;
       max-width: 75%;
       word-wrap: break-word;
-      line-height: 1.5;
-      font-size: 16px;
+      font-size: 15px;
+      line-height: 1.4;
     }
 
     .user-message {
-      background-color: #e0f7fa;
+      background-color: #dcf8c6;
       align-self: flex-end;
-      text-align: right;
+      border-bottom-right-radius: 0;
     }
 
     .agent-message {
-      background-color: #f1f1f1;
+      background-color: white;
       align-self: flex-start;
-      text-align: left;
+      border-bottom-left-radius: 0;
     }
 
     #input-form {
       display: flex;
       border-top: 1px solid #ccc;
       padding: 10px;
-      background: white;
+      background: #f0f0f0;
     }
 
     #user-input {
       flex-grow: 1;
       padding: 10px;
       font-size: 16px;
       border: 1px solid #ccc;
-      border-radius: 6px;
+      border-radius: 20px;
       margin-right: 10px;
     }
 
     button {
       padding: 10px 16px;
       font-size: 16px;
-      background-color: #ffc827;
-      color: black;
+      background-color: #128c7e;
+      color: white;
       border: none;
-      border-radius: 6px;
+      border-radius: 20px;
       cursor: pointer;
     }
 
     button:hover {
-      background-color: #125aa3;
-      color: white;
+      background-color: #075e54;
     }
   </style>
 </head>