Add form and web cam connectivity button

test-Angular - Copy/angular.json

 {
   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "cli": {
+    "analytics": false
+  },
   "version": 1,
   "newProjectRoot": "projects",
   "projects": {

test-Angular - Copy/src/app/app-routing.module.ts

@@ -2,11 +2,14 @@ import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { DashboardComponent } from './dashboard/dashboard.component';
 import { HomeComponent } from './home/home.component';
+import { FaicialExpressionComponent } from './faicial-expression/faicial-expression.component';
+
 
 const routes: Routes = [
   {path:'',redirectTo:'home',pathMatch:'full'},
   {path:'home',component:HomeComponent},
-  {path:'dashboard',component:DashboardComponent}
+  {path:'dashboard',component:DashboardComponent},
+  {path:'faicial-expression',component:FaicialExpressionComponent}
 ];
 
 @NgModule({

test-Angular - Copy/src/app/app.module.ts

@@ -14,6 +14,7 @@ import { MatMenuModule } from '@angular/material/menu';
 import { MatIconModule } from '@angular/material/icon';
 import { MatDividerModule } from '@angular/material/divider';
 import { MatListModule } from '@angular/material/list';
+import { FaicialExpressionComponent } from './faicial-expression/faicial-expression.component';
 
 @NgModule({
   declarations: [
@@ -21,7 +22,8 @@ import { MatListModule } from '@angular/material/list';
     HeaderComponent,
     SidenavComponent,
     HomeComponent,
-    DashboardComponent
+    DashboardComponent,
+    FaicialExpressionComponent
   ],
   imports: [
     BrowserModule,

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

 <div class="container-fluid page">
-    <div class="d-flex page__box p-3 mt-2">Home</div>
+    <div class="d-flex page__box p-3 mt-2">Dashboard</div>
     <div class="page__content shadow p-3 position-relative">
       <div class="page__content-data position-absolute">
         Dashboard Content Goes Here

test-Angular - Copy/src/app/faicial-expression/faicial-expression.component.css

+@import url(../home/home.component.css);
+
+body {font-family: Arial, Helvetica, sans-serif;
+    margin-top: 100px;}
+    * {box-sizing: border-box;}
+    
+    .form{
+     margin-top: 20px;
+     font-size:15px;
+    }
+    
+    input[type=text], select, textarea {
+      width: 100%;
+      padding: 12px;
+      border: 1px solid #ccc;
+      border-radius: 4px;
+      box-sizing: border-box;
+      margin-top: 6px;
+      margin-bottom: 16px;
+      resize: vertical;
+    }
+    
+    input[type=submit] {
+      background-color: #b61aa9;
+      color: white;
+      padding: 12px 20px;
+      border: none;
+      border-radius: 4px;
+      cursor: pointer;
+    }
+    
+    input[type=submit]:hover {
+      background-color: #e073bc;
+    }
+    
+    .btn{
+      margin-left: 20px;
+      background-color: #b61aa9;
+      color: white;
+      padding: 10px 20px;
+      border: none;
+      border-radius: 4px;
+      cursor: pointer;
+    }
+    
+    .btn:hover{
+      background-color: #e073bc;
+    }
+    .container {
+      float: left;
+      margin-top: 56px;
+      border-radius: 5px;
+      background-color: #f2f2f2;
+      padding: 20px;
+    }
\ No newline at end of file

test-Angular - Copy/src/app/faicial-expression/faicial-expression.component.html

+<div class="container-fluid page">
+    <div class="d-flex page__box p-3 mt-2">Baby Smile with Simon</div>
+    <div class="page__content shadow p-3 position-relative">
+      <div class="page__content-data position-absolute">
+        <!-- web cam or any other cam can connect -->
+        <button class="btn">Connect to Your Cam</button>
+        <div class="container"></div>
+          <h1>Create Your Baby Profile</h1>        
+          <form class= "form" action="/action_page.php">
+            <label for="fname">Baby's first name</label>
+            <input type="text" id="fname" name="firstname" placeholder="Baby's first name..">
+        
+            <label for="lname">Baby's Last Name / </label>
+            <input type="text" id="lname" name="lastname" placeholder="Baby's last name..">
+        
+            <label for="age">Age</label>
+            <select id="country" name="country">
+              <option value="australia">Age Month 6-1 Year</option>
+              <option value="canada">Age 1 Year - 2 Years </option>
+              <option value="usa">Age 2 Year - 3 Years </option>
+              <option value="usa">Age 3 Year - 4 Years </option>
+            </select>
+        
+            <label for="subject">Optional Details</label>
+            <textarea id="subject" name="subject" placeholder="Fill this if optional.." style="height:200px"></textarea>
+        
+            <input type="submit" value="Submit">
+            <button class="btn">Already have </button>
+          </form>
+        </div>
+      </div>
+    </div>
+  </div>+
\ No newline at end of file

test-Angular - Copy/src/app/faicial-expression/faicial-expression.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FaicialExpressionComponent } from './faicial-expression.component';
+
+describe('FaicialExpressionComponent', () => {
+  let component: FaicialExpressionComponent;
+  let fixture: ComponentFixture<FaicialExpressionComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ FaicialExpressionComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FaicialExpressionComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

test-Angular - Copy/src/app/faicial-expression/faicial-expression.component.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-faicial-expression',
+  templateUrl: './faicial-expression.component.html',
+  styleUrls: ['./faicial-expression.component.css']
+})
+export class FaicialExpressionComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

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

@@ -12,7 +12,7 @@
 }
 
 .page__content{
-    min-height: calc(100vh - 178px);
+    min-height: calc(110vh - 18px);
     border-radius: 10px;
     margin-top: -2rem;
     background: white;

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

@@ -10,7 +10,9 @@
       <a mat-list-item routerLinkActive="list-item-active" routerLink="/dashboard">
         <mat-icon>dashboard</mat-icon> Dashboard
       </a>
-      <a mat-list-item> <mat-icon>edit</mat-icon> Link 3 </a>
+      <a mat-list-item routerLinkActive="list-item-active" routerLink="/faicial-expression">
+        <mat-icon>face</mat-icon> Baby Smile with Simon
+      </a>
       <a mat-list-item> <mat-icon>edit</mat-icon> Link 4 </a>
       <a mat-list-item> <mat-icon>edit</mat-icon> Link 5 </a>
       <a mat-list-item> <mat-icon>edit</mat-icon> Link 6 </a>