Tog bort sektionen <style>, länkar till extern stilmall istället. Lade till möjlighet att ändra storlek på chattfönstret.

2024-07-23 21:44:33 +02:00
parent d0935f771a
commit a2144e0480
1 changed files with 8 additions and 71 deletions
@@ -3,77 +3,7 @@
 <head>
    <meta charset="UTF-8">
    <title>Ollama Chat</title>
-    <style>
-        body {
-            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-            background-color: #f4f4f4;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            min-height: 100vh;
-            margin: 0;
-        }
-
-        h1 {
-            color: #333;
-            margin-bottom: 20px;
-        }
-
-        #chatbox {
-            width: 80%;
-            max-width: 500px;
-            background-color: #fff;
-            border-radius: 10px;
-            padding: 20px;
-            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
-            overflow-y: scroll; /* Allow scrolling within the chatbox */
-        }
-
-        .message {
-            margin-bottom: 15px;
-        }
-
-        .user-message {
-            background-color: #9cc1ecbb;
-            padding: 10px 15px;
-            border-radius: 10px;
-            text-align: left; /* Align user messages to the left */
-        }
-
-        .ai-response {
-            background-color: #f0f8ff;
-            padding: 10px 15px;
-            border-radius: 10px;
-            text-align: left; /* Align AI responses to the left */
-        }
-
-        #userInput {
-            width: calc(50% - 60px); /* Adjust width for input and button */
-            padding: 10px;
-            border: 1px solid #ccc;
-            border-radius: 5px;
-            margin-bottom: 10px;
-        }
-
-        #userInput:focus {
-            outline: none;
-            border-color: #66afe9; /* Blue outline on focus */
-        }
-
-        button[onclick="sendMessage()"] {
-            background-color: #4CAF50; /* Green */
-            border: none;
-            color: white;
-            padding: 10px 20px;
-            text-align: center;
-            text-decoration: none;
-            display: inline-block;
-            font-size: 16px;
-            border-radius: 5px;
-            cursor: pointer;
-        }
-
-    </style>
+    <link rel="stylesheet" href="./clientstyle.css"> 
 </head>
 <body>
    <h1>Ollama Chat</h1>
@@ -85,6 +15,13 @@

    <script src="frontend.js"></script>
    <script>
+        const chatContainer = document.getElementById('chatbox');
+
+        // Handle resize events
+        window.addEventListener('resize', function() {
+        chatContainer.style.height = 'auto'; 
+        });
+
        const userInputElement = document.getElementById('userInput');

        userInputElement.addEventListener('keydown', function(event) {