Commit 79298611 authored by PiumikaAlwis's avatar PiumikaAlwis

Add form and web cam connectivity button

parent db51edf7
Pipeline #3431 failed with stages
{ {
"$schema": "./node_modules/@angular/cli/lib/config/schema.json", "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"cli": {
"analytics": false
},
"version": 1, "version": 1,
"newProjectRoot": "projects", "newProjectRoot": "projects",
"projects": { "projects": {
......
...@@ -2,11 +2,14 @@ import { NgModule } from '@angular/core'; ...@@ -2,11 +2,14 @@ import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router'; import { RouterModule, Routes } from '@angular/router';
import { DashboardComponent } from './dashboard/dashboard.component'; import { DashboardComponent } from './dashboard/dashboard.component';
import { HomeComponent } from './home/home.component'; import { HomeComponent } from './home/home.component';
import { FaicialExpressionComponent } from './faicial-expression/faicial-expression.component';
const routes: Routes = [ const routes: Routes = [
{path:'',redirectTo:'home',pathMatch:'full'}, {path:'',redirectTo:'home',pathMatch:'full'},
{path:'home',component:HomeComponent}, {path:'home',component:HomeComponent},
{path:'dashboard',component:DashboardComponent} {path:'dashboard',component:DashboardComponent},
{path:'faicial-expression',component:FaicialExpressionComponent}
]; ];
@NgModule({ @NgModule({
......
...@@ -14,6 +14,7 @@ import { MatMenuModule } from '@angular/material/menu'; ...@@ -14,6 +14,7 @@ import { MatMenuModule } from '@angular/material/menu';
import { MatIconModule } from '@angular/material/icon'; import { MatIconModule } from '@angular/material/icon';
import { MatDividerModule } from '@angular/material/divider'; import { MatDividerModule } from '@angular/material/divider';
import { MatListModule } from '@angular/material/list'; import { MatListModule } from '@angular/material/list';
import { FaicialExpressionComponent } from './faicial-expression/faicial-expression.component';
@NgModule({ @NgModule({
declarations: [ declarations: [
...@@ -21,7 +22,8 @@ import { MatListModule } from '@angular/material/list'; ...@@ -21,7 +22,8 @@ import { MatListModule } from '@angular/material/list';
HeaderComponent, HeaderComponent,
SidenavComponent, SidenavComponent,
HomeComponent, HomeComponent,
DashboardComponent DashboardComponent,
FaicialExpressionComponent
], ],
imports: [ imports: [
BrowserModule, BrowserModule,
......
<div class="container-fluid page"> <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 shadow p-3 position-relative">
<div class="page__content-data position-absolute"> <div class="page__content-data position-absolute">
Dashboard Content Goes Here Dashboard Content Goes Here
......
@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
<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
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();
});
});
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 {
}
}
...@@ -12,7 +12,7 @@ ...@@ -12,7 +12,7 @@
} }
.page__content{ .page__content{
min-height: calc(100vh - 178px); min-height: calc(110vh - 18px);
border-radius: 10px; border-radius: 10px;
margin-top: -2rem; margin-top: -2rem;
background: white; background: white;
......
...@@ -10,7 +10,9 @@ ...@@ -10,7 +10,9 @@
<a mat-list-item routerLinkActive="list-item-active" routerLink="/dashboard"> <a mat-list-item routerLinkActive="list-item-active" routerLink="/dashboard">
<mat-icon>dashboard</mat-icon> Dashboard <mat-icon>dashboard</mat-icon> Dashboard
</a> </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 4 </a>
<a mat-list-item> <mat-icon>edit</mat-icon> Link 5 </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> <a mat-list-item> <mat-icon>edit</mat-icon> Link 6 </a>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment