Update style.css

style.css

@@ -2,7 +2,7 @@ body, html {
     height: 100%;
     margin: 0;
     font-family: 'Arial', sans-serif;
-    background-color: #121212;
+    background: linear-gradient(145deg, #121212, #1d1d1d);
     color: white;
 }
 
@@ -12,11 +12,12 @@ body, html {
     top: 0;
     bottom: 0;
     width: 250px;
-    background-color: #1f1f1f;
+    background: linear-gradient(145deg, #1f1f1f, #2b2b2b);
     display: flex;
     flex-direction: column;
     padding: 20px;
     box-sizing: border-box;
+    box-shadow: 3px 0px 10px rgba(0, 0, 0, 0.5);
 }
 
 button {
@@ -26,18 +27,24 @@ button {
     padding: 10px 20px;
     margin-bottom: 10px;
     cursor: pointer;
+    transition: background-color 0.2s;
+    border-radius: 4px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
 }
 
 button:hover {
-    background-color: #444;
+    background: linear-gradient(145deg, #444, #555);
 }
 
 #dark-mode-toggle {
     margin-top: auto;
+    display: flex;
+    align-items: center;
 }
 
 #dark-mode {
     accent-color: #4caf50;
+    margin-left: auto;
 }
 
 #chat-interface {
@@ -48,21 +55,27 @@ button:hover {
 #conversation-history {
     height: calc(100vh - 180px);
     overflow-y: auto;
-    background-color: #333;
+    background: linear-gradient(145deg, #333, #424242);
     padding: 10px;
     margin-bottom: 20px;
+    border-radius: 4px;
+    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
 }
 
 #message-input-area {
     display: flex;
+    border-radius: 4px;
+    background: #333;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
 }
 
 #message-input {
     flex-grow: 1;
     padding: 10px;
-    background-color: #333;
     border: none;
     color: white;
+    background: transparent;
+    outline: none;
 }
 
 #send-message {
@@ -70,16 +83,22 @@ button:hover {
     border: none;
     padding: 0 20px;
     cursor: pointer;
+    border-radius: 0 4px 4px 0;
+    transition: background-color 0.2s;
 }
 
 #send-message:hover {
-    background-color: #66bb6a;
+    background: linear-gradient(145deg, #66bb6a, #4caf50);
 }
 
 footer {
     display: flex;
     justify-content: space-between;
     align-items: center;
+    padding: 10px;
+    background: #222;
+    border-radius: 4px;
+    box-shadow: 0 -4px 6px rgba(0, 0, 0, 0.2);
 }
 
 #model-version-label, #settings-toggle label {
@@ -89,3 +108,66 @@ footer {
 #footer input[type="checkbox"] {
     accent-color: #4caf50;
 }
+
+/* Zusätzliche Glanzeffekte für die Inputs */
+input[type="text"], input[type="checkbox"] {
+    border: 1px solid #555;
+    background-clip: padding-box;
+}
+
+/* Stil für Nachrichten im Chat */
+.message {
+    margin: 10px;
+    padding: 10px;
+    border-radius: 8px;
+    position: relative;
+    display: inline-block;
+    max-width: 80%;
+}
+
+.message:before {
+    content: '';
+    position: absolute;
+    width: 0;
+    height: 0;
+    border-style: solid;
+}
+
+/* Nachrichten des Benutzers */
+.message.user {
+    background: #4caf50;
+    align-self: flex-end;
+}
+
+.message.user:before {
+    right: -10px;
+    top: 10px;
+    border-width: 5px 0 5px 10px;
+    border-color: transparent transparent transparent #4caf50;
+}
+
+/* Nachrichten des Bots */
+.message.bot {
+    background: #333;
+    align-self: flex-start;
+}
+
+.message.bot:before {
+    left: -10px;
+    top: 10px;
+    border-width: 5px 10px 5px 0;
+    border-color: transparent #333 transparent transparent;
+}
+
+/* Fehlermeldungen */
+.message.error {
+    background: #ff6961;
+}
+
+.message.error:before {
+    left: -10px;
+    top: 10px;
+    border-width: 5px 10px 5px 0;
+    border-color: transparent #ff6961 transparent transparent;
+}
+