updated code
This commit is contained in:
Pooja Fulari
@@ -1,110 +1,376 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Activity Logs</title>
|
||||
<style>
|
||||
body {
|
||||
font-family: "Segoe UI", Tahoma, sans-serif;
|
||||
background-color: #f8f9fa;
|
||||
margin: 20px;
|
||||
}
|
||||
h2 {
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.top-buttons {
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
form {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
input, button {
|
||||
padding: 8px;
|
||||
border-radius: 6px;
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
button {
|
||||
background-color: #007bff;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
}
|
||||
button:hover {
|
||||
background-color: #0056b3;
|
||||
}
|
||||
table {
|
||||
width: 90%;
|
||||
margin: auto;
|
||||
border-collapse: collapse;
|
||||
background: white;
|
||||
box-shadow: 0 0 8px rgba(0,0,0,0.1);
|
||||
}
|
||||
th, td {
|
||||
padding: 12px;
|
||||
border: 1px solid #ddd;
|
||||
text-align: center;
|
||||
}
|
||||
th {
|
||||
background-color: #007bff;
|
||||
color: white;
|
||||
}
|
||||
tr:nth-child(even) {
|
||||
background-color: #f2f2f2;
|
||||
}
|
||||
</style>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||
<title>Activity Logs</title>
|
||||
|
||||
<style>
|
||||
*{
|
||||
margin:0;
|
||||
padding:0;
|
||||
box-sizing:border-box;
|
||||
font-family:'Segoe UI',sans-serif;
|
||||
}
|
||||
|
||||
body{
|
||||
background:#eef2f7;
|
||||
display:flex;
|
||||
}
|
||||
|
||||
/* Sidebar */
|
||||
.sidebar{
|
||||
width:260px;
|
||||
height:100vh;
|
||||
position:fixed;
|
||||
left:0;
|
||||
top:0;
|
||||
background:linear-gradient(180deg,#0f172a,#1e293b);
|
||||
padding:25px;
|
||||
color:#fff;
|
||||
}
|
||||
|
||||
.sidebar h2{
|
||||
text-align:center;
|
||||
margin-bottom:30px;
|
||||
font-size:24px;
|
||||
}
|
||||
|
||||
.sidebar a{
|
||||
display:block;
|
||||
padding:14px 16px;
|
||||
margin:10px 0;
|
||||
border-radius:10px;
|
||||
text-decoration:none;
|
||||
color:#dbeafe;
|
||||
transition:.3s;
|
||||
}
|
||||
|
||||
.sidebar a:hover{
|
||||
background:#3b82f6;
|
||||
color:white;
|
||||
}
|
||||
|
||||
/* Main */
|
||||
.main{
|
||||
margin-left:260px;
|
||||
width:100%;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
.header{
|
||||
height:50px;
|
||||
background:#fff;
|
||||
display:flex;
|
||||
align-items:center;
|
||||
padding-left:30px;
|
||||
font-size:18px;
|
||||
font-weight:600;
|
||||
box-shadow:0 2px 8px rgba(0,0,0,.08);
|
||||
color:#1e293b;
|
||||
}
|
||||
|
||||
/* Title */
|
||||
.page-title{
|
||||
text-align:center;
|
||||
margin:30px 0 20px;
|
||||
font-size:32px;
|
||||
color:#1e293b;
|
||||
font-weight:700;
|
||||
}
|
||||
|
||||
/* Filter Card */
|
||||
.filter-box{
|
||||
width:95%;
|
||||
max-width:1200px;
|
||||
margin:auto;
|
||||
background:white;
|
||||
padding:25px;
|
||||
border-radius:16px;
|
||||
box-shadow:0 4px 12px rgba(0,0,0,.06);
|
||||
}
|
||||
|
||||
.filter-form{
|
||||
display:flex;
|
||||
flex-wrap:wrap;
|
||||
gap:15px;
|
||||
justify-content:center;
|
||||
align-items:end;
|
||||
}
|
||||
|
||||
.filter-group{
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
min-width:220px;
|
||||
}
|
||||
|
||||
label{
|
||||
font-weight:600;
|
||||
margin-bottom:8px;
|
||||
color:#334155;
|
||||
}
|
||||
|
||||
input{
|
||||
padding:11px 14px;
|
||||
border:1px solid #cbd5e1;
|
||||
border-radius:8px;
|
||||
outline:none;
|
||||
}
|
||||
|
||||
input:focus{
|
||||
border-color:#3b82f6;
|
||||
}
|
||||
|
||||
.btn{
|
||||
border:none;
|
||||
padding:12px 20px;
|
||||
border-radius:8px;
|
||||
cursor:pointer;
|
||||
font-weight:600;
|
||||
transition:.3s;
|
||||
}
|
||||
|
||||
.btn-primary{
|
||||
background:#3b82f6;
|
||||
color:#fff;
|
||||
}
|
||||
|
||||
.btn-primary:hover{
|
||||
background:#2563eb;
|
||||
}
|
||||
|
||||
.btn-secondary{
|
||||
background:#64748b;
|
||||
color:white;
|
||||
}
|
||||
|
||||
.btn-secondary:hover{
|
||||
background:#475569;
|
||||
}
|
||||
|
||||
/* Table Section */
|
||||
.table-box{
|
||||
width:95%;
|
||||
max-width:1400px;
|
||||
margin:30px auto;
|
||||
background:white;
|
||||
border-radius:16px;
|
||||
overflow:auto;
|
||||
box-shadow:0 4px 12px rgba(0,0,0,.06);
|
||||
max-height:57vh;
|
||||
}
|
||||
|
||||
table{
|
||||
width:100%;
|
||||
border-collapse:collapse;
|
||||
min-width:1000px;
|
||||
}
|
||||
|
||||
th{
|
||||
position:sticky;
|
||||
top:0;
|
||||
background:#3b82f6;
|
||||
color:white;
|
||||
padding:15px;
|
||||
font-size:15px;
|
||||
}
|
||||
|
||||
td{
|
||||
padding:14px;
|
||||
text-align:center;
|
||||
border-bottom:1px solid #e2e8f0;
|
||||
}
|
||||
|
||||
tr:nth-child(even){
|
||||
background:#f8fafc;
|
||||
}
|
||||
|
||||
tr:hover{
|
||||
background:#eaf2ff;
|
||||
}
|
||||
|
||||
/* Back Button */
|
||||
.top-actions{
|
||||
width:95%;
|
||||
max-width:1200px;
|
||||
margin:auto;
|
||||
display:flex;
|
||||
justify-content:flex-end;
|
||||
margin-bottom:15px;
|
||||
}
|
||||
|
||||
.back-btn{
|
||||
background:#10b981;
|
||||
color:white;
|
||||
padding:12px 18px;
|
||||
text-decoration:none;
|
||||
border-radius:8px;
|
||||
font-weight:600;
|
||||
}
|
||||
|
||||
.back-btn:hover{
|
||||
background:#059669;
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media(max-width:900px){
|
||||
|
||||
.sidebar{
|
||||
width:75px;
|
||||
padding:15px 10px;
|
||||
}
|
||||
|
||||
.sidebar h2{
|
||||
display:none;
|
||||
}
|
||||
|
||||
.sidebar a{
|
||||
font-size:12px;
|
||||
padding:10px;
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
.main{
|
||||
margin-left:75px;
|
||||
}
|
||||
|
||||
.page-title{
|
||||
font-size:26px;
|
||||
}
|
||||
|
||||
.filter-form{
|
||||
flex-direction:column;
|
||||
align-items:stretch;
|
||||
}
|
||||
|
||||
.filter-group{
|
||||
width:100%;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar .logo {
|
||||
width: 60px;
|
||||
height: auto;
|
||||
margin-left: 80px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h2>Activity Logs</h2>
|
||||
|
||||
<div class="top-buttons">
|
||||
<a href="{{ url_for('main.dashboard') }}">
|
||||
<button type="button">⬅ Back to Dashboard</button>
|
||||
</a>
|
||||
</div>
|
||||
<!-- Sidebar -->
|
||||
<div class="sidebar">
|
||||
<img
|
||||
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA+CAYAAAB3NHh5AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA4JpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTMyIDc5LjE1OTI4NCwgMjAxNi8wNC8xOS0xMzoxMzo0MCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo4NkEzOEVGMzEwQTQxMUU4QUFBQkY0QTA2QzlEM0MxNyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo2QUQzQTIzRDE4NTkxMUU4ODE2Q0IwMTY0RjgxQTVGNyIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo2QUQzQTIzQzE4NTkxMUU4ODE2Q0IwMTY0RjgxQTVGNyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxNS41IE1hY2ludG9zaCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOmJhNmE4ZTBmLTI5ZWItNDBlMy05ZWFhLTYzNTdiYjdkMzcwNCIgc3RSZWY6ZG9jdW1lbnRJRD0iYWRvYmU6ZG9jaWQ6cGhvdG9zaG9wOmRhMjgyMWMwLTYwYmQtMTE3Yi04ZGU3LWNjZmQ1MDgzNjUxNiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PrVd/GcAAASESURBVHja7FtrSBRRFL7rrg9MMjUzspTSSqUg6GFBmohh9SeIMOhXhBX0KzL80YN+SBD+qJ+RBhFEQogV0RMLKyuiqIig6GlZRmlRavl2O8c9I7dtZ2adM3d9zB742GHuzpn7zZl7zrnn3nF5vV7hJHEh4aLKaxfgeAXAjee0NoDX7ziCjl2yDsANwHbAsQD3mALYA3ii04e9gEZAP6BM5z9nAA2AKos8FwK+1pcX53noxCJAMuPBzQLEATbotEfpnMeHfIiuSzK4vhnw2KA9GJkryGIoz5hvyjlAr0F7e4BzuYBbdPwG8Mvg+m+APmYfh/qgWbiXqWzQpN3fUSyj19hj8gbYKV7Zwsp9hXS8BHBXIhsqiQglYTf9LgbcGQWywxKqG7cAssiy0aMVkWQLpzGVoYfvMWjvBlQwyKKPiWT2MU628DZACkPZa0CGQXs00zHOBnwBrLF4fTbgnb+X7mJ0qN/EH3iZYUVLfKz2sQMwSSZ8kkKFVTkKOKxw/KF1Zkhx26rUaFb5xFTUpjiWRtmQeHSGMiyNGQkTdgrhVKaeJBvycbM4zE2S/vHSpTRv7beo7CEgXiFh7GwTTSetCE5/f8iEMdOaajJFM5KtgHyFhDcC/gBeMfKEeJnwAcDyMTz0FgAqmTowG6zWxnCrA/zVc9lp9TmAcEgLAOE4HCY8zgoAZuI28RPdiuO45umHw9LuIKoWHPlOiY1RNeIETfI5gkWM6YABv/MZFMeHCWONOAFwWRFhrKjkEPFAshMwB/CReZ9LZn/QCM8ErBe+ZQ9VUid8JdpAclH4llO40kmFjBdmTmsXYL4NFQWzIkGXDt7adA8cGlgZzQrGS+OMpABwW2HVwkrbSAWH5gNBa0nBhCUk3TjOQ9BkIp0phyQ9wl6a+dwb56QTiEOmkNa2IgzyzpWA+zZ2oMNiG0eSydLp/l5aj/Qq4VsLyrXh5jgJz9NpK1Bo6UQqHuCCfbVZ2aSP5smbBW+pYx5gh4FDRM+6D/BZEWksQf2ULVxC5g80L8YqyFPx/xrvSOQUjaUSnfYyevWyFVr6t0wY92AsVXizJJNximnfFuFbAVElGHnyNKfVothjDpr4iyjNAgqlVfbSA+GKR7gAMLEIexzA1SMTjnUA4VjZspsAMQxluGqxVqhbFMetjQcB7xk6umXChUZzyCCkFnBcIeGblI3tZ+h4if3UCJczE49EoXbLA87VcWNLBUMHLvjVamO42YZqxljf8tAcjsNOIuxyGuEMGyoLPQr72SP4Ww/T5LBURZ226rweyWUUC+I2mW9jZ3GTeCnjHk0y4fOCNl8yvHQO4/oBYbzJPIaszKmmdsiEa4R+vSkYwe0IRyxee0X4PkEoNPgPfiKQSsmDVcHaXL5HshBH2i2OsauAdXRstNgWacOcvU12WtyPl6xcf53yb01Ub7sIeQHA6zcZKJ7IiYdMth5QNNpxOJ2pZ5rJGMZcGOvbuEq4WifZSWHoD0bSZS99FvCB6QHRcdXptONOuNP0KuuN+wYiZkV/MPJg6Ck77WPLvwIMAHzX4zyhUFlrAAAAAElFTkSuQmCC"
|
||||
alt="LCEPL Logo"
|
||||
class="logo"
|
||||
/>
|
||||
|
||||
<form method="get" action="{{ url_for('main.activity_log') }}" class="filter-form">
|
||||
<label for="username">Username:</label>
|
||||
<input type="text" id="username" name="username" placeholder="Enter username" value="{{ username or '' }}">
|
||||
<center><h2>Activity Logs</h2></center>
|
||||
<a href="{{ url_for('main.dashboard') }}">Dashboard</a>
|
||||
<a href="{{ url_for('main.activity_log') }}">Activity Logs</a>
|
||||
|
||||
<label for="start_date">Start Date:</label>
|
||||
<input type="date" id="start_date" name="start_date" value="{{ start_date or '' }}">
|
||||
</div>
|
||||
|
||||
<label for="end_date">End Date:</label>
|
||||
<input type="date" id="end_date" name="end_date" value="{{ end_date or '' }}">
|
||||
|
||||
<button type="submit" class="btn btn-primary">Filter</button>
|
||||
</form>
|
||||
<div class="main">
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<th>Timestamp</th>
|
||||
<th>User</th>
|
||||
<th>Action</th>
|
||||
<th>Details</th>
|
||||
</tr>
|
||||
{% for log in logs %}
|
||||
<tr>
|
||||
<td>{{ log.timestamp }}</td>
|
||||
<td>{{ log.user }}</td>
|
||||
<td>{{ log.action }}</td>
|
||||
<td>{{ log.details }}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
{% if logs|length == 0 %}
|
||||
<tr>
|
||||
<td colspan="4">No logs found</td>
|
||||
</tr>
|
||||
{% endif %}
|
||||
</table>
|
||||
<div class="header">
|
||||
LAXMI CIVIL ENGINEERING SERVICES PVT. LTD.
|
||||
</div>
|
||||
|
||||
<h1 class="page-title">Activity Logs</h1>
|
||||
|
||||
<div class="top-actions">
|
||||
<a href="{{ url_for('main.dashboard') }}" class="back-btn">
|
||||
⬅ Back to Dashboard
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Filters -->
|
||||
<div class="filter-box">
|
||||
<form method="get"
|
||||
action="{{ url_for('main.activity_log') }}"
|
||||
class="filter-form">
|
||||
|
||||
<div class="filter-group">
|
||||
<label>Username</label>
|
||||
<input type="text"
|
||||
name="username"
|
||||
placeholder="Enter username"
|
||||
value="{{ username or '' }}">
|
||||
</div>
|
||||
|
||||
<div class="filter-group">
|
||||
<label>Start Date</label>
|
||||
<input type="date"
|
||||
name="start_date"
|
||||
value="{{ start_date or '' }}">
|
||||
</div>
|
||||
|
||||
<div class="filter-group">
|
||||
<label>End Date</label>
|
||||
<input type="date"
|
||||
name="end_date"
|
||||
value="{{ end_date or '' }}">
|
||||
</div>
|
||||
|
||||
<button class="btn btn-primary" type="submit">
|
||||
Filter
|
||||
</button>
|
||||
|
||||
<button class="btn btn-secondary"
|
||||
type="button"
|
||||
onclick="resetFilter()">
|
||||
Reset
|
||||
</button>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Logs Table -->
|
||||
<div class="table-box">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Timestamp</th>
|
||||
<th>User</th>
|
||||
<th>Action</th>
|
||||
<th>Details</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
{% for log in logs %}
|
||||
<tr>
|
||||
<td>{{ log.timestamp }}</td>
|
||||
<td>{{ log.user }}</td>
|
||||
<td>{{ log.action }}</td>
|
||||
<td>{{ log.details }}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
|
||||
{% if logs|length == 0 %}
|
||||
<tr>
|
||||
<td colspan="4">
|
||||
No logs found
|
||||
</td>
|
||||
</tr>
|
||||
{% endif %}
|
||||
</tbody>
|
||||
|
||||
</table>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function resetFilter(){
|
||||
window.location.href="{{ url_for('main.activity_log') }}";
|
||||
}
|
||||
</script>
|
||||
|
||||
<script>
|
||||
function resetFilter() {
|
||||
window.location.href = "{{ url_for('main.activity_log') }}";
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
Reference in New Issue
Block a user