Assets hinzugefügt

2025-04-04 18:00:49 +02:00
parent e0b696555d
commit b4dca8e5b0
60 changed files with 16275 additions and 0 deletions
--- a/src/assets/css/chatbox.css
+++ b/src/assets/css/chatbox.css
@@ -0,0 +1,148 @@
+@import url('https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap');
+
+
+
+
+/* Basis-Styling */
+
+
+
+    
+
+    #chatbox-button {
+      position: fixed;
+      bottom: 20px;
+      right: 20px;
+      cursor: pointer;
+      background-color: #996633; /* Braun #996633 */
+      color: white; /* Weiße Textfarbe */
+      border: none; /* Keine Umrandung */
+      border-radius: 50%; /* Runde Form */
+      padding: 20px;
+      font-size: 20px;
+      transition: background-color 0.3s ease; /* Hover-Effekt */
+    }
+    
+    #chatbox-button:hover {
+      background-color: #774422; /* Dunkleres Braun beim Hovern */
+    }
+    
+
+    
+
+    #modalbox {
+      position: fixed; /* Festlegen der Position */
+      top: 50%; /* Positionierung vertikal mittig */
+      left: 50%; /* Positionierung horizontal mittig */
+      transform: translate(-50%, -50%); /* Verschieben von der Mitte */
+      width: 550px; /* Breite der Modalbox */
+      max-width: 90%; /* Maximale Breite für Responsiveness */
+      background-color: white;
+      padding: 20px;
+      border-radius: 5px;
+      box-shadow: 0 4px 8px rgba(0,0,0,0.5);
+      display: none; /* Modalbox wird zunächst ausgeblendet */
+      z-index: 100;
+    }
+
+    #modalbox-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 10px;
+    }
+
+    #modalbox-title {
+      font-weight: bold;
+      font-family: "Permanent Marker", cursive;
+    }
+
+    #close-button {
+      cursor: pointer;
+      font-size: 40pt;
+      color: red;
+    }
+
+    #chat-messages {
+      height: 300px; /* Höhe des Nachrichtenbereichs */
+      overflow-y: scroll; /* Scrollfunktion aktivieren */
+      padding: 10px;
+    }
+
+    .message {
+      margin-bottom: 10px;
+      padding: 10px;
+      border-radius: 5px;
+      position: relative;
+    }
+
+    .message-sender {
+      font-weight: bold;
+    }
+
+    .message-content {
+      margin-top: 2px;
+    }
+
+    .own-message {
+      background-color: #f0f0f0;
+      align-self: flex-end; /* Eigene Nachrichten rechtsbündig */
+    }
+
+    .other-message {
+      background-color: #e0e0e0;
+    }
+
+    #chat-input {
+      display: flex;
+      flex-direction: column; /* Anordnung in Spalten */
+    }
+
+    #name-input{
+      margin-top: 10px;
+    }
+
+    #name-input, #email-input {
+      flex-grow: 1; /* Nameingabefeld über die gesamte Breite */
+      padding: 10px;
+      border: 1px solid #ccc;
+      border-radius: 3px; 
+      margin-top: 3px;
+      margin-bottom: 3px;
+      
+    }
+
+    #message-input {
+      padding: 10px;
+      border: 1px solid #ccc;
+      border-radius: 3px; 
+        margin-bottom: 5px; /* Abstand zwischen den Eingabefeldern */
+    }
+
+    #send-button {
+      background-color: #4CAF50; /* Grün */
+      color: white;
+      padding: 10px;
+      border: none;
+      border-radius: 3px;
+      cursor: pointer;
+      width: auto; /* Automatische Breite */
+    }
+
+    @media (max-width: 768px) {
+        #chat-input {
+            flex-direction: column; /* Anordnung in Spalten */
+        }
+
+        #name-input,
+        #message-input {
+            margin-bottom: 1px; /* Abstand zwischen den Eingabefeldern */
+        }
+
+        #send-button {
+            width: 100%; /* Volle Breite des Containers */
+            margin-top: 1px; /* Abstand zum vorherigen Element */
+        }
+        
+
+}