Update some CSS, support JSON

client-web/index.css

@@ -3,18 +3,6 @@
     src: url("InterVariable.ttf");
 }
 
-body {
-    color: white;
-    background: rgb(231,255,68);
-    background: linear-gradient(336deg, rgba(231,255,68,0.67) 0%, rgba(73,255,145,0.67) 43%, rgba(104,79,255,1) 100%); 
-    font-family: inter;
-    background-attachment: fixed;
-    margin-left: 20px;
-    margin-right: 20px;
-    margin-top: 20px;
-    margin-bottom: 20px;
-}
-
 a {
     color: white;
 }
@@ -51,36 +39,16 @@ p {
 
 #messagebox {
     overflow-y: auto;
-    border 0px;
+    border: 0px;
     padding: 20px;
     margin: 10px 10px;
-}
-
-.section {
-    background-color: rgba(0, 0, 0, 0.1);
-    max-width: 50%;
-    border-radius: 10px;
-    margin-top: 10px;
-    margin-bottom: 10px;
-    padding: 5px
+    flex-grow: 1; /* This makes it take up remaining space */
 }
 
 .section h2 {
     margin: 20px;
 }
 
-.box {
-    color: white;
-    background: rgba(0, 0, 0, 0.5);
-    max-width: 95%;
-    border-radius: 10px;
-    margin-top: 10px;
-    margin-bottom: 10px;
-    margin-left: auto;
-    margin-right: auto;
-    padding: 5px;
-}
-
 .box p {
     margin: 10px;
 }
@@ -133,5 +101,108 @@ p {
 .hidden {
     display: none;
 }
+html, body {
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+    box-sizing: border-box;
+}
 
+body {
+    color: white;
+    background: rgb(231,255,68);
+    background: linear-gradient(336deg, rgba(231,255,68,0.67) 0%, rgba(73,255,145,0.67) 43%, rgba(104,79,255,1) 100%);
+    font-family: inter;
+    background-attachment: fixed;
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
 
+/* Update section styles */
+.section {
+    background-color: rgba(0, 0, 0, 0.1);
+    border-radius: 10px;
+    padding: 5px;
+    width: calc(100vw - 40px);
+    height: calc(100vh - 40px);
+    box-sizing: border-box; /* Add this to include padding in width calculation */
+}
+
+/* Update box styles */
+.box {
+    color: white;
+    background: rgba(0, 0, 0, 0.5);
+    border-radius: 10px;
+    margin: 10px auto;
+    padding: 20px;
+    max-width: 400px;
+    width: 100%;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+/* Special handling for messaging box */
+#messaging .box {
+    max-width: none;
+    height: 100%;
+    position: relative; /* For absolute positioning of input container */
+}
+
+#messagebox {
+    overflow-y: auto;
+    border: 0px;
+    padding: 20px;
+    margin: 10px 0; /* Remove horizontal margin */
+    flex-grow: 1;
+    width: 100%;
+    box-sizing: border-box;
+}
+
+/* Style for individual messages */
+.message {
+    text-align: left;
+    margin: 5px 0;
+    width: 100%;
+}
+
+/* Create a container for message input and send button */
+.input-container {
+    display: flex;
+    width: 100%;
+    gap: 10px; /* Space between input and button */
+/*    padding: 10px;*/
+    box-sizing: border-box;
+}
+
+/* Update input styles */
+input {
+    color: white;
+    background: rgba(0, 0, 0, 0.5);
+    border: none;
+    border-radius: 10px;
+    padding: 5px 5px;
+    font-family: "inter";
+    max-width: 300px;
+    width: 100%;
+    box-sizing: border-box;
+}
+
+/* Special style for message input */
+#messageInput {
+    max-width: none;
+    flex-grow: 1; /* Take up remaining space */
+    margin: 0; /* Remove default margins */
+}
+
+/* Update button styles */
+.bluebutton, .greenbutton, .redbutton, .backbutton {
+    max-width: 200px;
+    width: auto; /* Allow button to size to content */
+    margin: 0; /* Remove default margins */
+    white-space: nowrap; /* Prevent button text from wrapping */
+}