Upload New File

9b09839e · Karagoda Gamage Pasan Malaka · 23bca8fb · 9b09839e
Commit 9b09839e authored Nov 13, 2022 by Karagoda Gamage Pasan Malaka
Hide whitespace changes
Inline Side-by-side

Showing with 202 additions and 0 deletions

admin.html admin.html +202 -0

No files found.
--- a/admin.html
+++ b/admin.html
+<!DOCTYPE html>
+<html>
+<head>Admin Panel</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
+    <style>
+	html {
+		height: 100%;
+	}
+	* {box-sizing: border-box;}
+	body {
+		margin: 0;
+		height: 100%;
+		font-family: Arial, Helvetica, sans-serif;
+		background-color: black;
+	}
+	.header {
+		overflow: hidden;
+		background-color: #e28743;
+		padding: 5px 10px;
+	}
+	.header a {
+		float: left;
+		color: White;
+		text-align: center;
+		padding: 12px;
+		text-decoration: none;
+		font-size: 18px;
+		line-height: 25px;
+		border-radius: 4px;
+	}
+	.header a.logo {
+		font-size: 25px;
+		font-weight: bold;
+	}
+	.header a:hover {
+		background-color: #e28743;
+		color: black;
+	}
+	.header a.active {
+		background-color: #e28743;
+		color: white;
+	}
+	.header-right {
+		float: right;
+	}
+	@media screen and (max-width: 500px) {
+	  .header a {
+		float: none;
+		display: block;
+		text-align: left;
+	  }
+	  .header-right {
+		float: none;
+	  }
+	}
+   .global-container{
+		margin-top: 20px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		float: left;
+		width: 100%;
+	}
+	form{
+		padding-top: 10px;
+		font-size: 14px;
+		margin-top: 30px;
+	}
+	.card-title{ font-weight:300; }
+	.card{opacity: 0.95;}
+	.effect7{
+		position:relative;
+		-webkit-box-shadow:0 1px 20px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
+		-moz-box-shadow:0 1px 20px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
+        box-shadow:0 1px 20px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
+	}
+	.login-form{
+		width:1175px;
+		margin:20px;
+	}
+	input[type="text"], textarea {
+  background-color : #d1d1d1;
+}
+    </style>
+</head>
+<body>
+<div class="global-container">
+    <div class="card login-form effect7">
+        <div class="card-body">
+            <center>
+                <h3>Admin panel</h3>
+                <ul class="nav nav-tabs">
+                    <li class="active"><a data-toggle="tab" href="#home">Chart View</a></li>
+                    <li><a data-toggle="tab" href="#menu1">Table View</a></li>
+                </ul>
+                <div class="tab-content">
+                    <div id="home" class="tab-pane fade active">
+                        <center><h3>Chart View Feedback</h3></center>
+                        <div class="card-body">
+                            <h4>Result</h4>
+                            <div style="width:80%; margin-left: 150px;">
+                                <canvas id="myChart" style="width:100%;max-width:600px"></canvas>
+                            </div>
+                        </div>
+                    </div>
+                    <div id="menu1" class="tab-pane fade">
+                        <center><h3>Feedback History</h3></center>
+                        <div style="width:80%;">
+                            <table class="table" id="table">
+                                <thead>
+                                <tr>
+                                    <th>Employee ID</th>
+                                    <th>Leave Date</th>
+                                    <th>Real Reason</th>
+                                    <th>Comment about Company</th>
+                                </tr>
+                                </thead>
+                                <tbody>
+                                {% for row in data_table %}
+                                <tr>
+                                    <td>{{row[0]}}</td>
+                                    <td>{{row[1]}}</td>
+                                    <td>{{row[2]}}</td>
+                                    <td>{{row[3]}}</td>
+                                </tr>
+                                {% endfor %}
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                </div>
+            </center>
+        </div>
+    </div>
+</div>
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"
+        integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf"
+        crossorigin="anonymous"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
+<script>
+var xValues = ["1", "2", "3", "4", "5"];
+var yValues = {{data}};
+var barColors = ["rgba(255, 99, 132, 0.2)", "rgba(255, 159, 64, 0.2)","rgba(255, 205, 86, 0.2)","rgba(75, 192, 192, 0.2)","rgba(54, 162, 235, 0.2)"];
+new Chart("myChart", {
+  type: "bar",
+  data: {
+    labels: xValues,
+    datasets: [{
+      backgroundColor: barColors,
+      data: yValues
+    }]
+  },
+  options: {
+    legend: {display: false},
+    title: {
+      display: true,
+      text: "Real Reason "
+    }
+  }
+});
+</script>
+</body>
+</html>
\ No newline at end of file