diff --git a/client-web/gradient.css b/client-web/gradient.css new file mode 100644 index 0000000..f2a66c1 --- /dev/null +++ b/client-web/gradient.css @@ -0,0 +1,43 @@ +/* Reset default margin and ensure full viewport coverage */ +body { + margin: 0; + min-height: 100vh; + background: linear-gradient( + 30deg, + #50C878, /* green */ + #7FFFD4, /* aqua */ + #87CEEB, /* light blue */ + #00008B, /* dark blue */ + #800080, /* purple */ + #50C878, /* green */ + #7FFFD4, /* aqua */ + #87CEEB, /* light blue */ + #00008B, /* dark blue */ + #800080, /* purple */ + #50C878 /* green */ + ); + background-size: 1000% 1000%; + animation: gradient 120s ease infinite; +} + +/* Gradient animation keyframes */ +@keyframes gradient { + 0% { + background-position: 0% 50%; + } + 100% { + background-position: 200% 50%; + } +} + +/* Optional: styling for centered content */ +.content { + height: 100vh; + display: flex; + justify-content: center; + align-items: center; + color: white; + font-family: sans-serif; + font-size: 2rem; + text-shadow: 2px 2px 4px rgba(0,0,0,0.3); +} diff --git a/client-web/index.css b/client-web/index.css index 24b7d74..67c72a4 100644 --- a/client-web/index.css +++ b/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 */ +} diff --git a/client-web/index.html b/client-web/index.html index 7f68be9..2ef4c6f 100644 --- a/client-web/index.html +++ b/client-web/index.html @@ -3,16 +3,18 @@
-