<!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Student Dashboard</title>
<link rel="stylesheet" href="[Link]" />
</head>
<body>
<header id="navbar">
<div id="search-bar">
<input type="text" placeholder="Search" />
<button>Search</button>
</div>
<h1 id="title">STUDENT MANAGEMENT SYSTEM </h1>
</header>
<div id="main">
<div id="Vpanel">
<div id="pan">
<a href="#"
onclick="loadContent('[Link]')">Registration</a><br><br>
<a href="#" onclick="loadContent('[Link]')">Profile</a><br><br>
<a href="#" onclick="loadContent('[Link]')">Calculator</a><br><br>
<a href="#">Logout</a>
</div>
</div>
</div>
<!-- <div id="content">
<a href="[Link]" class="box-link"><div class="box">Academics</div></a>
<a href="[Link]" class="box-link"><div class="box">Hostel</div></a>
<a href="[Link]" class="box-link"><div class="box">Fee</div></a>
<a href="[Link]" class="box-link"><div class="box">Accounts</div></a>
<a href="[Link]" class="box-link"><div class="box">Library</div></a>
<a href="[Link]" class="box-link"><div class="box">Feedback</div></a>
<div class="table-container">
<h2>Student Information</h2>
<table class="student-table">
<thead>
<tr>
<th>Roll No</th>
<th>Name</th>
<th>Contact No.</th>
<th>Course</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>101</td>
<td>Shreya Garud </td>
<td>1234567890</td>
<td>[Link]</td>
<td>Active</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<script>
function loadContent(page) {
fetch(page)
.then(response => [Link]())
.then(data => {
[Link]("content").innerHTML = data;
})
.catch(error => {
[Link]("content").innerHTML = "<p style='color:red;'>Error
loading content.</p>";
[Link]("Error:", error);
});
}
</script> -->
</body>
</html>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #FFFFFF; /* White */
}
/* HEADER */
#navbar {
background-color: #001F3F; /* Navy Blue */
height: 60px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
#title {
color: white;
font-size: 28px;
letter-spacing: 1px;
}
#search-bar {
position: absolute;
left: 10px;
}
#search-bar input {
padding: 6px;
border: none;
border-radius: 4px;
}
#search-bar button {
padding: 6px 12px;
background-color: #0055A4; /* Action Blue */
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
/* MAIN SECTION */
#main {
display: flex;
min-height: 470px;
width: 100%;
}
/* SIDEBAR */
#Vpanel {
width: 200px;
background-color: #003366;
padding-top: 20px;
}
#pan a {
text-decoration: none;
color: white;
display: block;
padding: 12px 20px;
transition: 0.3s;
}
#pan a:hover {
background-color: #004080;
border-radius: 6px;
}
/* CONTENT AREA */
/* #content {
flex: 1;
background-color: #FFFFFF;
padding: 40px;
display: flex;
gap: 30px;
flex-wrap: wrap;
justify-content: flex-start;
}
.box {
flex: 0 0 calc(80.33% - 30px);
max-width: calc(80.33% - 30px);
height: 120px;
background-color: #E6F0FA;
color: #001F3F;
font-weight: bold;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 10px rgba(0,0,0,0.05);
transition: 0.3s;
cursor: pointer;
}
.box:hover {
background-color: #D0E6F7;
transform: scale(1.05);
}
.table-container {
width: 100%;
background-color: white;
padding: 25px;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.table-container h2 {
margin-bottom: 20px;
color: #003366;
}
.student-table {
width: 100%;
border-collapse: collapse;
font-size: 16px;
}
.student-table th, .student-table td {
padding: 12px 15px;
border: 1px solid #ddd;
text-align: center;
}
.student-table th {
background-color: #003366;
color: white;
}
.student-table tr:nth-child(even) {
background-color: #F9F9F9;
}
.student-table tr:hover {
background-color: #F0F8FF;
}
.box-link {
text-decoration: none;
color: inherit;
display: inline-block;
}
.box-link {
text-decoration: none;
display: block;
width: calc(33.33% - 30px);
max-width: calc(33.33% - 30px);
}
.box-link .box {
background-color: #E6F0FA;
color: #001F3F;
font-weight: bold;
border-radius: 12px;
height: 120px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 10px rgba(0,0,0,0.05);
transition: 0.3s;
cursor: pointer;
}
.box-link .box:hover {
background-color: #D0E6F7;
transform: scale(1.05);
}
*/