Commit 81fd3b62 authored by Imesh Dilshan's avatar Imesh Dilshan

changes

parent 0329a5ff
Pipeline #6673 failed with stages
<!DOCTYPE html>
<html>
<head>
<title>Customer Satisfaction Survey</title>
<title>Security Assistant Dashboard</title>
<style>
body {
font-family: Arial, sans-serif;
......@@ -17,54 +17,57 @@
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
border: 2px solid #ccc;
background-color: #f9f9f9; /* Update to desired light color */
background-color: #f9f9f9;
text-align: center;
}
h1 {
text-align: center;
color: #333;
margin-top: 0;
}
.response-chart {
margin-bottom: 10px;
text-align: center;
display: flex;
justify-content: center;
margin-bottom: 20px;
}
.response-chart input[type="radio"] {
display: none;
.response-option {
margin: 0 10px;
cursor: pointer;
transition: transform 0.3s ease;
}
.response-chart label {
display: inline-block;
text-align: center;
width: 60px;
height: 60px;
line-height: 60px;
border-radius: 50%;
border: 2px solid #ccc;
padding: 0;
cursor: pointer;
transition: background-color 0.3s ease;
.response-option:hover {
transform: scale(1.1);
}
.response-chart label:hover {
background-color: #f1f1f1;
.response-option input[type="radio"] {
display: none;
}
.response-chart input[type="radio"]:checked + label {
background-color: #4CAF50;
color: #fff;
border-color: #4CAF50;
.response-option label {
display: block;
width: 100px;
height: 100px;
border-radius: 50%;
border: 2px solid #ccc;
background-color: #f9f9f9;
overflow: hidden;
}
.response-chart label img {
.response-option label img {
max-width: 100%;
max-height: 100%;
}
.response-option input[type="radio"]:checked + label {
border-color: #4CAF50;
box-shadow: 0 0 10px rgba(76, 175, 80, 0.5);
}
.stats-container {
text-align: center;
margin-top: 20px;
margin-bottom: 20px;
}
.stats {
......@@ -81,29 +84,61 @@
}
.total-incidents-label {
display: inline-block;
font-size: 14px;
color: #555;
}
.total-incidents {
display: inline-block;
font-size: 20px;
color: #333;
}
.security-tasks {
margin-top: 40px;
}
.security-tasks label {
display: block;
margin-bottom: 10px;
text-align: left;
font-weight: bold;
color: #333;
}
.security-tasks input[type="checkbox"] {
margin-right: 10px;
}
.security-tasks button {
margin-top: 10px;
padding: 8px 16px;
font-size: 16px;
background-color: #4CAF50;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
}
.security-tasks button:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<div class="container">
<h1>Customer Satisfaction Survey</h1>
<h1>Security Assistant Dashboard</h1>
<div class="response-chart">
<div class="response-option">
<input type="radio" id="like" name="satisfaction" value="like" (change)="handleResponse('like')">
<label for="like"><img src="assets/images/dashboard/like.png" alt="Like"></label>
</div>
<div class="response-option">
<input type="radio" id="dislike" name="satisfaction" value="dislike" (change)="handleResponse('dislike')">
<label for="dislike"><img src="assets/images/dashboard/dislike.png" alt="Dislike"></label>
</div>
</div>
<!-- Add more response options if needed -->
......@@ -119,54 +154,20 @@
<span id="dislikesCount">0</span>
<span id="dislikesPercentage">(0%)</span>
</div>
</div>
<div class="total-incidents-label">
<strong>Total Incidents:</strong>
</div>
<div class="total-incidents">
<span id="incidentsCount">0</span>
</div>
</div>
<!-- <script>
// JavaScript code for handling the selected response
var incidentsCount = 0;
var likesCount = 0;
var dislikesCount = 0;
var incidentsCountElem = document.getElementById('incidentsCount');
var likesCountElem = document.getElementById('likesCount');
var dislikesCountElem = document.getElementById('dislikesCount');
var likesPercentageElem = document.getElementById('likesPercentage');
var dislikesPercentageElem = document.getElementById('dislikesPercentage');
function updateStats() {
incidentsCountElem.textContent = incidentsCount;
likesCountElem.textContent = likesCount;
dislikesCountElem.textContent = dislikesCount;
var totalResponses = likesCount + dislikesCount;
var likesPercentage = (likesCount / totalResponses) * 100;
var dislikesPercentage = (dislikesCount / totalResponses) * 100;
likesPercentageElem.textContent = '(' + likesPercentage.toFixed(1) + '%)';
dislikesPercentageElem.textContent = '(' + dislikesPercentage.toFixed(1) + '%)';
}
var radios = document.querySelectorAll('input[type="radio"]');
for (var i = 0; i < radios.length; i++) {
radios[i].addEventListener('change', function() {
console.log('Selected response:', this.value);
incidentsCount++;
if (this.value === 'like') {
likesCount++;
} else if (this.value === 'dislike') {
dislikesCount++;
}
updateStats();
this.checked = false; // Uncheck the radio button for multiple responses
});
}
</script> -->
<div class="security-tasks">
<button type="button">Complete Tasks</button>
</div>
</div>
</body>
</html>
......@@ -37,11 +37,15 @@ export class DashboardComponent implements OnInit {
handleResponse(response: string) {
this.incidentsCount++;
if (response === 'like') {
this.likesCount++;
this.dislikesCount = 0; // Reset dislikes count to 0
} else if (response === 'dislike') {
this.dislikesCount++;
this.likesCount = 0; // Reset likes count to 0
}
this.updateStats();
}
}
<!-- Container-fluid starts-->
<div class="container-fluid">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Profile Page</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<style>
.profile-card {
max-width: 300px;
margin: 0 auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
text-align: center;
background-color: #f9f9f9;
margin-bottom: 20px;
}
.profile-picture {
width: 150px;
height: 150px;
border-radius: 50%;
object-fit: cover;
margin-bottom: 20px;
}
.profile-name {
font-size: 24px;
font-weight: bold;
margin-bottom: 10px;
}
.registration-number {
font-size: 16px;
color: #777;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="card">
<div class="card-header">
<h5>Page Details</h5>
</div>
<div class="card-body">
<div class="custom-datatable">
<button class="btn btn-primary mr-1 mb-3" style="float: right;">Delete</button>
<div class="clearfix"></div>
<ngx-datatable class="bootstrap" [rows]="list_pages" [columnMode]="'force'" [headerHeight]="50"
[footerHeight]="50" [rowHeight]="'auto'" [limit]="5" [selected]="selected"
[selectionType]="'checkbox'" [selectAllRowsOnPage]="false" (select)='onSelect($event)'>
<ngx-datatable-column [width]="30" [sortable]="false" [canAutoResize]="false"
[draggable]="false" [resizeable]="false" [headerCheckboxable]="true"
[checkboxable]="true">
<button type="button" class="btn btn-primery">Delete</button>
</ngx-datatable-column>
<ngx-datatable-column name="Name"></ngx-datatable-column>
<ngx-datatable-column name="Status"></ngx-datatable-column>
<ngx-datatable-column prop="created on"></ngx-datatable-column>
</ngx-datatable>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Container-fluid Ends-->
\ No newline at end of file
<div class="col-md-6">
<div class="profile-card">
<img class="profile-picture" src="../../../../assets/images/dashboard/isira.jpeg" alt="Profile Picture">
<h2 class="profile-name">G.G.I V.M Gamage</h2>
<p class="registration-number">Registration Number: IT20094690</p>
<!-- Add more profile details here -->
</div>
</div>
<div class="col-md-6">
<div class="profile-card">
<img class="profile-picture" src="../../../../assets/images/dashboard/samara.jpeg" alt="Profile Picture">
<h2 class="profile-name">B.S. Sithmini</h2>
<p class="registration-number">Registration Number: IT20036102</p>
<!-- Add more profile details here -->
</div>
</div>
<div class="col-md-6">
<div class="profile-card">
<img class="profile-picture" src="../../../../assets/images/dashboard/harshi.jpeg" alt="Profile Picture">
<h2 class="profile-name">N.W. Harshani Jayawardhana</h2>
<p class="registration-number">Registration Number: IT20140816 </p>
<!-- Add more profile details here -->
</div>
</div>
<div class="col-md-6">
<div class="profile-card">
<img class="profile-picture" src="../../../../assets/images/dashboard/Rajakaruna.jpg" alt="Profile Picture">
<h2 class="profile-name">R.H.M.I.D Rajakaruna </h2>
<p class="registration-number">Registration Number: IT20246396</p>
<!-- Add more profile details here -->
</div>
</div>
</div>
</div>
</body>
</html>
......@@ -11,7 +11,7 @@ const routes: Routes = [
path: 'list-page',
component: ListPageComponent,
data: {
title: "List Page",
title: "About Us",
breadcrumb: "List Page"
}
},
......
......@@ -48,21 +48,12 @@
</ul>
</li>
<li class="onhover-dropdown">
<span class="badge badge-pill badge-primary pull-right notification-badge">3</span>
<span class="badge badge-pill badge-primary pull-right notification-badge">1</span>
<app-feather-icons [icon]="'bell'"></app-feather-icons><span class="dot"></span>
<ul class="notification-dropdown onhover-show-div">
<li>Notification <span class="badge badge-pill badge-primary pull-right">3</span></li>
<li>Notification <span class="badge badge-pill badge-primary pull-right">1</span></li>
<li>
<div class="media">
<div class="media-body">
<h6 class="mt-0"><span>
<app-feather-icons class="shopping-color" [icon]="'shopping-bag'">
</app-feather-icons>
</span>Your order ready for Ship..!
</h6>
<p class="mb-0">Lorem ipsum dolor sit amet, consectetuer.</p>
</div>
</div>
</li>
<li>
<div class="media">
......@@ -76,7 +67,7 @@
</div>
</li>
<li>
<div class="media">
<!-- <div class="media">
<div class="media-body">
<h6 class="mt-0 txt-danger"><span>
<app-feather-icons class="alert-color font-danger" [icon]="'alert-circle'">
......@@ -84,7 +75,7 @@
</span>250 MB trash files</h6>
<p class="mb-0">Lorem ipsum dolor sit amet, consectetuer.</p>
</div>
</div>
</div> -->
</li>
<li class="txt-dark"><a href="javascript:void(0)">All</a> notification</li>
</ul>
......
......@@ -73,12 +73,12 @@ export class NavService {
// { path: '/coupons/create-coupons', title: 'Create Coupons', type: 'link' },
]
},
// {
// title: 'Pages', icon: 'clipboard', type: 'sub', active: false, children: [
// { path: '/pages/list-page', title: 'List Page', type: 'link' },
{
title: 'About Us', icon: 'clipboard', type: 'sub', active: false, children: [
{ path: '/pages/list-page', title: 'About Us', type: 'link' },
// { path: '/pages/create-page', title: 'Create Page', type: 'link' },
// ]
// },
]
},
// {
// title: 'Media', path: '/media', icon: 'camera', type: 'link', active: false
// },
......
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