Initial commit

2025-06-05 20:15:38 +12:00
commit fa1cc5035e
16 changed files with 581 additions and 0 deletions
--- a/resource/static/css/styles.css
+++ b/resource/static/css/styles.css
@@ -0,0 +1,156 @@
+:root {
+  --primary-color: rgb(243, 243, 243);
+  --secondary-color: rgb(7, 190, 187);
+  --tertiary-color: rgb(250, 250, 250);
+  --text-color: rgb(62, 62, 62);
+  --text-highlight-color: white;
+}
+
+/* Navigation */
+.navbar {
+  position: fixed;
+  top:0px;
+  left:0px;
+  right:0px;
+  background-color: var(--tertiary-color);
+  border-bottom: 1px solid var(--secondary-color); /* Changed color to lightsteelblue */
+  overflow: hidden;
+  z-index: 1000;
+}
+
+.navbar a {
+  float: left;
+  display: block;
+  text-align: center;
+  padding: 8px 16px;
+  text-decoration: none;
+  transition: background-color 0.15s ease, color 0.15s ease, padding 0.15s ease; /* Only transition the background-color */
+  color: var(--text-color); /* Set default text color */
+}
+
+.navbar a:hover {
+  background-color: var(--secondary-color);
+  color: var(--text-highlight-color); /* Change text color on hover for better contrast */
+  padding: 8px 20px; /* Increase padding on hover */
+}
+
+.navname{
+  font-weight: bolder;
+  user-select: none;
+}
+
+.navname a{
+  background-color: var(--primary-color) !important;
+}
+
+/* Body */
+body {
+  background-color: var(--primary-color);
+  margin: 0px;
+  color: var(--text-color);
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+/* Container */
+.container {
+  padding: 35px 10px;
+  margin: auto;
+  max-width: 800px;
+}
+
+.room-join-box {
+  display: flex;
+  gap: 10px;
+  margin-bottom: 20px;
+}
+
+.room-input {
+  padding: 8px 12px;
+  border: 1px solid var(--secondary-color);
+  border-radius: 5px;
+  background-color: var(--tertiary-color);
+  color: var(--text-color);
+  font-size: 16px;
+  outline: none;
+  transition: padding 0.15s ease, border-color 0.15s ease;
+  flex: 1;
+}
+
+.room-input:focus {
+  border-color: var(--secondary-color);
+  padding-right: 14px;
+}
+
+.room-button {
+  padding: 8px 16px;
+  background-color: var(--tertiary-color);
+  border: 1px solid var(--secondary-color);
+  border-radius: 5px;
+  color: var(--text-color);
+  font-size: 16px;
+  cursor: pointer;
+  transition: background-color 0.15s ease, color 0.15s ease, padding 0.15s ease;
+}
+
+.room-button:hover {
+  background-color: var(--secondary-color);
+  color: var(--text-highlight-color);
+  padding-left: 18px;
+  padding-right: 18px;
+}
+
+#chat-box {
+    flex: 1;                   /* This is the key: allows chat-box to grow and fill vertical space */
+    overflow-y: auto;          /* Adds a scrollbar when content overflows vertically */
+    padding: 10px;
+    border: 1px solid var(--secondary-color); /* Visual border for chat box */
+    border-radius: 5px;
+    margin-bottom: 10px;       /* Space between chat box and input */
+    background-color: var(--tertiary-color); /* Example background for messages */
+    color: var(--text-color);
+    display: flex;
+    flex-direction: column;
+}
+
+#chat-box p {
+    margin: 0 0 5px 0; /* Adjust message spacing */
+    line-height: 1.4;
+    word-wrap: break-word; /* Ensures long words break and wrap */
+}
+
+.chat-input-container {
+    display: flex;
+    width: 100%;
+    gap: 10px;
+}
+
+#chat-input {
+    padding: 8px 12px;
+    border: 1px solid var(--secondary-color);
+    border-radius: 5px;
+    background-color: var(--tertiary-color);
+    color: var(--text-color);
+    font-size: 16px;
+    outline: none;
+    transition: padding 0.15s ease, border-color 0.15s ease;
+    flex: 1; /* Makes the input take up available horizontal space */
+}
+
+#send-button {
+    padding: 8px 16px;
+    background-color: var(--tertiary-color);
+    border: 1px solid var(--secondary-color);
+    border-radius: 5px;
+    color: var(--text-color);
+    font-size: 16px;
+    cursor: pointer;
+    transition: background-color 0.15s ease, color 0.15s ease, padding 0.15s ease;
+    flex-shrink: 0; /* Prevents the button from shrinking */
+}
+
+#send-button:hover {
+    background-color: var(--secondary-color);
+    color: var(--text-highlight-color);
+    padding-left: 18px;
+    padding-right: 18px;
+}