Update index.html

zorginkopen · web-flow · commit 981933e49e9d · 2025-06-18T15:43:51.000+02:00
diff --git a/index.html b/index.html
@@ -1,25 +1,99 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="nl">
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
-  <title>Indicatiehulp Webchat</title>
+  <title>Webchat met GPT Agent</title>
   <style>
-    body { font-family: sans-serif; margin: 0; padding: 0; display: flex; flex-direction: column; height: 100vh; }
-    #chat { flex: 1; overflow-y: auto; padding: 1em; background: #f4f4f4; }
-    #input-form { display: flex; padding: 1em; background: #fff; }
-    input { flex: 1; padding: 0.5em; font-size: 1em; }
-    button { padding: 0.5em 1em; }
-    .user { font-weight: bold; margin-top: 1em; }
-    .agent { margin-left: 1em; color: #333; }
+    body {
+      font-family: Arial, sans-serif;
+      margin: 0;
+      padding: 0;
+      background-color: #f4f4f4;
+      display: flex;
+      flex-direction: column;
+      height: 100vh;
+    }
+
+    h1 {
+      text-align: center;
+      background-color: #1976d2;
+      color: white;
+      padding: 12px 0;
+      margin: 0;
+    }
+
+    #chat {
+      flex-grow: 1;
+      overflow-y: auto;
+      padding: 16px;
+      display: flex;
+      flex-direction: column;
+    }
+
+    .message {
+      margin-bottom: 12px;
+      padding: 8px 12px;
+      border-radius: 10px;
+      max-width: 75%;
+      word-wrap: break-word;
+    }
+
+    .user-message {
+      background-color: #e0f7fa;
+      align-self: flex-end;
+      text-align: right;
+    }
+
+    .agent-message {
+      background-color: #f1f1f1;
+      align-self: flex-start;
+      text-align: left;
+    }
+
+    #input-form {
+      display: flex;
+      border-top: 1px solid #ccc;
+      padding: 10px;
+      background: white;
+    }
+
+    #user-input {
+      flex-grow: 1;
+      padding: 10px;
+      font-size: 16px;
+      border: 1px solid #ccc;
+      border-radius: 6px;
+      margin-right: 10px;
+    }
+
+    button {
+      padding: 10px 16px;
+      font-size: 16px;
+      background-color: #1976d2;
+      color: white;
+      border: none;
+      border-radius: 6px;
+      cursor: pointer;
+    }
+
+    button:hover {
+      background-color: #125aa3;
+    }
   </style>
 </head>
 <body>
+
+  <h1>Chat met de AI Agent</h1>
+
   <div id="chat"></div>
+
   <form id="input-form">
-    <input type="text" id="user-input" placeholder="Typ hier je vraag..." autocomplete="off" />
-    <button type="submit">Verzend</button>
+    <input type="text" id="user-input" placeholder="Typ je bericht..." autocomplete="off" />
+    <button type="submit">Verstuur</button>
   </form>
+
   <script src="script.js"></script>
+
 </body>
 </html>
