checkpoint chat

client/css/styles.css

@@ -4,7 +4,7 @@ body {
     display: flex;
     justify-content: center;
     align-items: center;
-    height: 100vh;
+    /* height: 100vh;*/
     margin: 0;
     background-color: #e9ecef;
 }
@@ -89,6 +89,7 @@ button:hover {
 
 /* Header Layout */
 .header {
+    z-index: 10;
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -149,6 +150,7 @@ main {
 
 /* Benutzerliste Styling */
 .user-list {
+    margin-top: 6rem;
     padding: 20px;
     background-color: #f8f9fa;
     border-radius: 8px;
@@ -169,10 +171,9 @@ main {
     color: red;
 }
 
-/* Chat Interface Styles */
+/* Chat Interface Styles
 .chat-container {
     width: 100%;
-    max-width: 600px;
     margin: 0 auto;
     display: flex;
     flex-direction: column;
@@ -181,7 +182,7 @@ main {
     border: 1px solid #ccc;
     border-radius: 8px;
     overflow: hidden;
-}
+}*/
 
 .chat-box {
     flex: 1;
@@ -250,8 +251,11 @@ main {
 
 /* Haupt-Container für Layout mit Seitenleiste */
 .main-container {
+    padding-top: 13rem;
+    width: 100%;
     display: flex;
-    height: 100vh;
+    position: absolute;
+    left: 0px;
 }
 
 /* Linke Seitenleiste */
@@ -288,6 +292,7 @@ main {
 
 /* Chatbereich Styles (wie oben beschrieben) */
 .chat-container {
+    width: 100%;
     flex: 1;
     display: flex;
     flex-direction: column;
@@ -366,3 +371,4 @@ main {
     background-color: #27ae60;
 }
 
+

client/welcome.html

@@ -24,8 +24,28 @@
 </header>
 
 <!-- Freier Platz für zukünftige Features -->
-<main></main>
+<div class="main-container">
+    <!-- Linke Seitenleiste für Chat-Sessions -->
+    <div class="sidebar" id="chatSidebar">
+        <h3>Gespeicherte Chats</h3>
+        <button id="newChatButton">Neuer Chat</button>
+        <div id="chatList"></div>
+    </div>
 
+    <!-- Chatbereich -->
+
+    <div class="chat-container">
+        <div class="chat-box" id="chatBox">
+            <!-- Nachrichten werden hier angezeigt -->
+        </div>
+        <div class="chat-input-container">
+            <textarea id="chatInput" class="chat-input" placeholder="Schreibe eine Nachricht..."></textarea>
+            <button id="sendButton" class="chat-send-button">Senden</button>
+        </div>
+    </div>
+</div>
+
+<script src="js/chat.js"></script>
 <script src="js/main.js"></script>
 </body>
 </html>