Updated form and dashboard chart

test-Angular - Copy/src/app/audio/audio.component.css

@@ -12,7 +12,7 @@
 }
 
 .page__content{
-    min-height: calc(150vh - 178px);
+    min-height: calc(250vh - 178px);
     border-radius: 10px;
     margin-top: -2rem;
     background: white;
@@ -23,8 +23,74 @@
     min-height: calc(50vh - 178px);
     margin-top: 70px;
 }
-.page__content-data{
+/* .page__content-data{
     top: 25%;
     left: 25%;
     transform: translate(-25%, -25%);
+} */
+
+.page__form{
+    box-sizing: border-box;
+    font-family: Verdana, Geneva, Tahoma, sans-serif;
+    font-size:large;
 }
+
+input[type=text], select, textarea {
+    width: 100%;
+    padding: 12px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    resize: vertical;
+  }
+  
+  label {
+    padding: 12px 12px 12px 0;
+    display: inline-block;
+  }
+  
+  input[type=submit] {
+    background-color: #4CAF50;
+    color: white;
+    padding: 12px 20px;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    float: right;
+  }
+  
+  input[type=submit]:hover {
+    background-color: #45a049;
+  }
+  
+  .container {
+    border-radius: 5px;
+    background-color: #f2f2f2;
+    padding: 20px;
+  }
+  
+  .col-25 {
+    float: left;
+    width: 25%;
+    margin-top: 6px;
+  }
+  
+  .col-75 {
+    float: left;
+    width: 75%;
+    margin-top: 6px;
+  }
+  
+  /* Clear floats after the columns */
+  .row:after {
+    content: "";
+    display: table;
+    clear: both;
+  }
+  
+  /* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
+  @media screen and (max-width: 600px) {
+    .col-25, .col-75, input[type=submit] {
+      width: 100%;
+      margin-top: 0;
+    }
+  }
\ No newline at end of file

test-Angular - Copy/src/app/audio/audio.component.html

@@ -15,5 +15,62 @@
           </canvas>
         </div>
       </div>
+      <div class="page__form shadow p-3 position-relative">
+        <h2>For More Details</h2>
+
+
+<div class="container">
+  <form action="/action_page.php">
+  <div class="row">
+    <div class="col-25">
+      <label for="fname">First Name</label>
+    </div>
+    <div class="col-75">
+      <input type="text" id="fname" name="firstname" placeholder="Your name..">
+    </div>
+  </div>
+  <div class="row">
+    <div class="col-25">
+      <label for="lname">Last Name</label>
+    </div>
+    <div class="col-75">
+      <input type="text" id="lname" name="lastname" placeholder="Your last name..">
+    </div>
+  </div>
+  <div class="row">
+    <div class="col-25">
+      <label for="lname">Email</label>
+    </div>
+    <div class="col-75">
+      <input type="text" id="lname" name="lastname" placeholder="Email..">
+    </div>
+  </div>
+  <div class="row">
+    <div class="col-25">
+      <label for="country">Severity Level</label>
+    </div>
+    <div class="col-75">
+      <select id="country" name="country">
+        <option value="australia">Level 1</option>
+        <option value="canada">Level 2</option>
+        <option value="usa">Level 3</option>
+      </select>
+    </div>
+  </div>
+  <div class="row">
+    <div class="col-25">
+      <label for="subject">Subject</label>
+    </div>
+    <div class="col-75">
+      <textarea id="subject" name="subject" placeholder="Write something.." style="height:200px"></textarea>
+    </div>
+  </div>
+  <div class="row">
+    <input type="submit" value="Submit">
+  </div>
+  </form>
+</div>
+
+      </div>
     </div>
   </div>

test-Angular - Copy/src/app/dashboard/dashboard.component.ts

@@ -10,7 +10,7 @@ import { Color, Label } from 'ng2-charts';
 export class DashboardComponent implements OnInit {
   
   lineChartData: ChartDataSets[] = [
-    { data: [85, 72, 78, 75, 77, 75], label: 'ASD Severity Level growth' },
+    { data: [85, 72, 78, 75, 77, 75], label: 'ASD Severity Level Status' },
   ];
 
   lineChartLabels: Label[] = ['January', 'February', 'March', 'April', 'May', 'June'];