fixes UI in aichat

ShakH00 · Nov 10, 2024 · 1629851 · 1629851
1 parent 8a191db
commit 1629851
Show file tree

Hide file tree

Showing 4 changed files with 109 additions and 20 deletions.
diff --git a/index/aichat.html b/index/aichat.html
@@ -4,15 +4,16 @@
         <meta charset="UTF-8">
         <title>DuoLegal | Legal AI Advice</title>
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <link rel="stylesheet" href="../static/password-reset.css">
+        <link rel="stylesheet" href="../static/aichat.css">
         <link rel="stylesheet" href="../static/all.css">
         <link rel="shortcut icon" type="image/png" href="../static/graphics/logo.png">
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
         <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
         <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
     </head>
     <body>
-    <div class="navbar">
+        <!--NAVBAR-->
+        <div class="navbar">
             <a class="logo" href="/">DuoLegal</a>
             <ul class="nav">
                 <li><a href="/">Home</a></li>
@@ -25,22 +26,22 @@
                 {% endif %}
                 <li><a href="/logout" class="nav-logout">Logout</a></li>
             </ul>
-        </div><br><br><br>
-        <div class="reset-div">
+        </div>
 
-            <form method="POST" action="/aichat">  <!-- Correct the action URL -->
-    <h1>We cannot guarantee that this AI gives completely solid advice</h1>
-    <p>If the account exists, we will email you instructions to reset your password.</p>
-    <p>Please enter the prompt.</p>
-    <hr><br>
-    {% if response %}
-    <p>{{ response }}</p>  <!-- Display the AI response -->
-    {% endif %}
-    <label for="prompt">Prompt: <span class="required">*</span></label><br>
-    <input class="input input-msg" type="text" id="prompt" name="prompt" placeholder="Court Advice" required><br><br>
-    <p class="required-text"><span class="required">*</span> indicates a required field</p>
-    <input type="submit" class="submit-button" value="Get Answer">
-</form>
+        <div class="aichat-div">
+            <form method="POST" action="/aichat">
+                <h1>Disclaimer:</h1>
+                <h2>We cannot guarantee that this AI gives completely solid advice</h2>
+                <hr>
+                <p>Please enter your question</p>
+                {% if response %}
+                <p>{{ response }}</p>
+                {% endif %}
+                <label for="prompt">Question <span class="required">*</span></label><br>
+                <textarea class="msg-box input-msg" id="prompt" name="prompt" placeholder="Is it legal to sell a car without saying it does not work?" required></textarea>
+                <p class="required-text"><span class="required">*</span> indicates a required field</p>
+                <input type="submit" class="submit-button" value="Get Answer">
+            </form>
         </div>
     </body>
 </html>
diff --git a/static/aichat.css b/static/aichat.css
@@ -0,0 +1,87 @@
+/*
+    CSS for password reset page
+*/
+
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600&display=swap');
+
+body {
+    background-color: #f4f0ea;
+}
+
+.aichat-div {
+    top: 75px;
+    position: relative;
+    margin: 50px;
+    box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.15);
+    padding: 50px;
+    padding-top: 30px;
+    background-color: white;
+    max-width: fit-content;
+    margin-right: auto;
+    margin-left: auto;
+}
+
+label {
+    font-family: "Poppins", sans-serif;
+    font-weight: 600;
+    font-style: normal;
+}
+
+.input {
+    height: 39px;
+    border: none;
+    border-radius: 50px;
+    padding-left: 10px;
+    font-size: 15px;
+    max-width: 560px;
+    width: 54vw;
+    background-color: #f4f4f4;
+}
+
+.input-msg:hover {
+    border: none;
+}
+
+.input:focus,
+.msg-box:focus {
+    outline: none;
+}
+
+.input::placeholder,
+.msg-box::placeholder {
+    color: #bfbfbf;
+}
+
+.submit-button {
+    background-color: transparent;
+    color: black;
+    border: 2px solid #a10000;
+    height: 50px;
+    max-width: 500px;
+    width: 24vw;
+    text-align: center;
+    text-decoration: none;
+    font-size: 17px;
+    transition: all .4s ease;
+    border-radius: 50px;
+}
+
+.submit-button:hover {
+    color: white;
+    cursor: pointer;
+    background-color: #a10000;
+}
+
+.msg-box {
+    resize: vertical;
+    min-height: 100px;
+    max-height: 250px;
+    border: none;
+    border-radius: 10px;
+    padding-left: 10px;
+    padding-top: 10px;
+    font-size: 15px;
+    max-width: 500px;
+    width: 65vw;
+    background-color: #f4f4f4;
+}
diff --git a/static/index.css b/static/index.css
@@ -96,7 +96,6 @@
     background: #f4f0ea;
 }
 
-
 /* Forms */
 label {
     font-family: "Poppins", sans-serif;

diff --git a/static/password-reset.css b/static/password-reset.css
@@ -6,12 +6,14 @@
 
 body {
     background-color: #f4f0ea;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
 }
 
 .reset-div {
-    top: 75px;
     position: relative;
-    margin: 50px;
     box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.15);
     padding: 50px;
     padding-top: 30px;
-Original file line number
+Diff line change
@@ Expand Up / @@ -96,7 +96,6 @@ @@
         background: #f4f0ea;
     }
     /* Forms */
     label {
         font-family: "Poppins", sans-serif;
@@ Expand Down @@