diff --git a/frontend/routes/chat.html b/frontend/routes/chat.html
index 0adcbdd..d1f222e 100644
--- a/frontend/routes/chat.html
+++ b/frontend/routes/chat.html
@@ -10,22 +10,28 @@
-
+
diff --git a/frontend/stylesheet/chat.css b/frontend/stylesheet/chat.css
index 001ea79..f300475 100644
--- a/frontend/stylesheet/chat.css
+++ b/frontend/stylesheet/chat.css
@@ -1,112 +1,70 @@
-/* CSS BY chatGPT ( */
body, html, form, button, input {
font-family: "Lucida Console", "Lucida Sans Typewriter", monaco, "Bitstream Vera Sans Mono", monospace;
}
-#input::placeholder, #recipient::placeholder {
- font-family: "Lucida Console", "Lucida Sans Typewriter", monaco, "Bitstream Vera Sans Mono", monospace;
- color: #999;
-}
-
body {
margin: 0;
- padding-bottom: 3rem;
+ padding: 0;
background-color: #121212;
color: #e0e0e0;
+ height: 100vh;
}
-#form, #recipientForm {
- background: rgba(30, 30, 30, 0.95);
- padding: 0.5rem;
+.container {
display: flex;
- align-items: center;
- box-sizing: border-box;
- box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
- backdrop-filter: blur(10px);
- z-index: 1000;
+ height: 100vh;
}
-#form {
- position: fixed;
- bottom: 0;
- left: 0;
- right: 0;
+.sidebar {
+ width: 150px;
+ background-color: #1e1e1e;
+ padding: 1rem;
+ overflow-y: auto;
}
-#recipientForm {
- position: fixed;
- top: 0;
- left: 0;
- right: 0;
-}
-
-#input, #recipient {
- border: 1px solid #555;
- padding: 0.5rem 1rem;
- flex-grow: 1;
- border-radius: 20px;
- margin-right: 0.5rem;
- font-size: 1rem;
- transition: border-color 0.3s ease;
- background-color: #1f1f1f;
+.sidebar h2 {
color: #e0e0e0;
+ margin-bottom: 1rem;
}
-#input:focus, #recipient:focus {
- outline: none;
- border-color: #1a73e8;
+#contacts {
+ list-style-type: none;
+ padding: 0;
}
-button {
- font-family: "Lucida Console";
- background-color: #2c7a2e;
- color: #e0e0e0;
- padding: 10px 15px;
- border: none;
- border-radius: 4px;
- cursor: pointer;
- font-size: 16px;
- margin: 0 10px;
-}
-
-button:hover {
- background-color: #368f39;
-}
-
-#form #recipientForm {
- background: #1a73e8; /
- border: none;
- padding: 0.5rem 1rem;
- margin: 0.25rem;
- border-radius: 20px;
- color: #e0e0e0;
- font-size: 1rem;
+#contacts > li {
+ color: white;
+ padding: 0.5rem;
cursor: pointer;
transition: background-color 0.3s ease;
}
-#form #recipientForm:hover {
- background-color: #155bb5;
+#contacts > li:hover {
+ background-color: #2c2c2c;
}
-#settings {
- background-color: #1a73e8;
+.chat-area {
+ flex-grow: 1;
+ display: flex;
+ flex-direction: column;
+ height: 100vh;
}
-#settings:hover {
- background-color: #1a73e8;
-}
-#error {
- color: red;
+#recipientForm {
+ background: rgba(30, 30, 30, 0.95);
+ padding: 0.5rem;
+ display: flex;
+ align-items: center;
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
+ z-index: 1000;
}
+
#messages {
- font-weight: lighter;
+ flex-grow: 1;
+ overflow-y: auto;
+ padding: 1rem;
list-style-type: none;
- margin: 5rem 0 3rem 0;
- padding: 0;
- max-width: 800px;
- margin-left: auto;
- margin-right: auto;
+ margin: 0;
}
#messages > li {
@@ -122,17 +80,54 @@ button:hover {
background: #2c7a2e;
}
+#form {
+ background: rgba(30, 30, 30, 0.95);
+ padding: 0.5rem;
+ display: flex;
+ align-items: center;
+ box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.5);
+}
-p {
- text-align: center;
- font-size: 20px;
+#input, #recipient {
+ border: 1px solid #555;
+ padding: 0.5rem 1rem;
+ flex-grow: 1;
+ border-radius: 20px;
+ margin-right: 0.5rem;
+ font-size: 1rem;
+ background-color: #1f1f1f;
color: #e0e0e0;
}
+#input:focus, #recipient:focus {
+ outline: none;
+ border-color: #1a73e8;
+}
+
+button {
+ background-color: #2c7a2e;
+ color: #e0e0e0;
+ padding: 10px 15px;
+ border: none;
+ border-radius: 4px;
+ cursor: pointer;
+ font-size: 16px;
+ margin: 0 10px;
+}
+
+button:hover {
+ background-color: #368f39;
+}
+
+#settings {
+ background-color: #1a73e8;
+}
+
+#settings:hover {
+ background-color: #155bb5;
+}
+
#messageBox {
color: red;
-}
-
-#contacts > li {
- color: white;
+ margin: 0 10px;
}
\ No newline at end of file