<!DOCT<!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
}
input[type="text"], input[type="password"] {
padding: 10px;
margin: 10px;
border-radius: 5px;
border: 1px solid #ccc;
}
input[type="submit"] {
padding: 10px 20px;
border-radius: 5px;
border: none;
background-color: #007bff;
color: #fff;
cursor: pointer;
}
</style>
</head>
<body>
<h2>Login</h2>
<form id="loginForm">
<input type="text" id="username" placeholder="Username"><br>
<input type="password" id="password" placeholder="Password"><br>
<input type="submit" value="Login">
</form>
<script>
document.getElementById("loginForm").onsubmit = function(event) {
event.preventDefault();
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
// Here you would typically check credentials against a database
// For simplicity, let's assume credentials are hardcoded
if (username === "admin" && password === "password") {
window.location.href = "interns.html"; // Redirect to interns page
} else {
alert("Invalid username or password");
}
};
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Interns</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
}
input[type="text"] {
padding: 5px;
margin: 5px;
border-radius: 5px;
border: 1px solid #ccc;
}
input[type="submit"] {
padding: 5px 10px;
border-radius: 5px;
border: none;
background-color: #007bff;
color: #fff;
cursor: pointer;
}
table {
width: 50%;
margin: auto;
border-collapse: collapse;
}
th, td {
padding: 10px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<h2>Interns</h2>
<form id="internForm">
<input type="text" id="id" placeholder="ID">
<input type="text" id="name" placeholder="Name">
<input type="submit" value="Add Intern">
</form>
<table id="internTable">
<tr>
<th>ID</th>
<th>Name</th>
<th>Action</th>
</tr>
</table>
<script>
document.getElementById("internForm").onsubmit = function(event) {
event.preventDefault();
var id = document.getElementById("id").value;
var name = document.getElementById("name").value;
var table = document.getElementById("internTable");
var row = table.insertRow(-1);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
cell1.innerHTML = id;
cell2.innerHTML = name;
cell3.innerHTML = '<button onclick="editIntern(this)">Edit</button>
<button onclick="removeIntern(this)">Remove</button>';
};
function editIntern(button) {
var row = button.parentNode.parentNode;
var id = row.cells[0].innerHTML;
var name = row.cells[1].innerHTML;
document.getElementById("id").value = id;
document.getElementById("name").value = name;
row.remove();
}
function removeIntern(button) {
var row = button.parentNode.parentNode;
row.remove();
}
</script>
</body>
</html>
