Scribd
Upload
3 views

code

The document contains HTML, CSS, and JavaScript code for a Student Attendance Management System. It includes a sidebar with navigation links, a main content area displaying a welcome message and dashboard cards for classes, students, and roles. The request is to merge this existing code with updates from an external link while maintaining the original color and functionality.

Uploaded by

faiyaz815300
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
3 views

code

The document contains HTML, CSS, and JavaScript code for a Student Attendance Management System. It includes a sidebar with navigation links, a main content area displaying a welcome message and dashboard cards for classes, students, and roles. The request is to merge this existing code with updates from an external link while maintaining the original color and functionality.

Uploaded by

faiyaz815300
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 4

image ki link https://drive.google.

com/file/d/1FvGRYBA85_n9Lp7LekocGPwsRxfgcEgn/
view?usp=drive_link

Note: apko is link ko HTML,CSS,Javascript me conver karna he or mere niche diye


gaye code se update karna he or firse code generate karna he.

Note: Apne muje abhi jo code send kia he isko niche diye gayr kode ke sath merge
karna he or repeat fetures ko update karna he , ye jarur dhyan rakhna he ki niche
diye gaye code ke color or funtionality change nahi honi chahiye isme sirf update
fetures or kuch sidebar me add hona chahiye

**HTML code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Student Attendance Management System</title>
<link rel="stylesheet" href="styles.css" type="text/css">
</head>
<body>
<div class="sidebar">
<h2>Attendance Management System</h2>
<ul>
<li><a href="#">Dashboard</a></li>
<li><a href="#">Attendance</a></li>
<li><a href="#">Add Class</a></li>
<li><a href="#">Add Student</a></li>
<li><a href="#">Report</a></li>
<li><a href="#">Register</a></li>
</ul>
</div>
<div class="main-content">
<header>
<h1>Welcome, Admin</h1>
<p>Role: Admin</p>
<p>Date and Time: <span id="datetime"></span></p>
</header>
<div class="dashboard">
<div class="card">
<h3>Classes</h3>
<p>0</p>
</div>
<div class="card">
<h3>Students</h3>
<p>0</p>
</div>
<div class="card">
<h3>Roles</h3>
<p>2</p>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
**css code

@keyframes gradientBG {
0% {
background-color: #ff9a9e;
}
25% {
background-color: #fad0c4;
}
50% {
background-color: #fad0c4;
}
75% {
background-color: #fbc2eb;
}
100% {
background-color: #a18cd1;
}
}

body {
font-family: 'Poppins', sans-serif;
margin: 0;
padding: 0;
display: flex;
background: linear-gradient(135deg, #f3e7e9, #e3eeff);
animation: gradientBG 10s infinite alternate;
}

.sidebar {
background: linear-gradient(135deg, #667eea, #764ba2);
color: white;
width: 250px;
height: 100vh;
padding: 20px;
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: center;
}

.sidebar h2 {
text-align: center;
font-size: 28px;
margin-bottom: 20px;
letter-spacing: 1px;
}

.sidebar ul {
list-style-type: none;
padding: 0;
width: 100%;
}

.sidebar ul li {
margin: 15px 0;
}

.sidebar ul li a {
color: white;
text-decoration: none;
font-size: 18px;
padding: 10px 15px;
display: block;
border-radius: 4px;
text-align: center;
transition: all 0.5s ease;
background: linear-gradient(135deg, #764ba2, #667eea);
}

.sidebar ul li a:hover {
background: linear-gradient(135deg, #667eea, #764ba2);
transform: scale(1.05);
}

.main-content {
flex: 1;
padding: 20px;
background: #f3f4f6;
}

.main-content header {
display: flex;
justify-content: space-between;
align-items: center;
background: linear-gradient(135deg, #667eea, #764ba2);
color: white;
padding: 15px;
border-radius: 10px;
margin-bottom: 20px;
}

.dashboard {
display: flex;
/* justify-content: space-around; */
justify-content: center;
flex-wrap: wrap;
gap: 20px;
}

.card {
background: linear-gradient(135deg, #764ba2, #667eea);
color: white;
padding: 20px;
text-align: center;
width: 30%;
border-radius: 10px;
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
transition: transform 0.3s, background 1s;
}

.card:hover {
transform: translateY(-10px);
background: linear-gradient(135deg, #667eea, #764ba2);
}

@media (max-width: 768px) {


.card {
width: 45%;
}
}

@media (max-width: 480px) {


.card {
width: 100%;
}
}

**javascript code

document.addEventListener('DOMContentLoaded', function() {
function updateDateTime() {
const now = new Date();
document.getElementById('datetime').textContent = now.toLocaleString();
}
updateDateTime();
setInterval(updateDateTime, 1000);
});

You might also like