<!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login & Logout</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f4f4f4;
.container {
text-align: center;
background: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
input {
padding: 10px;
margin: 5px 0;
width: 100%;
box-sizing: border-box;
button {
padding: 10px 20px;
background-color: #007BFF;
color: white;
border: none;
cursor: pointer;
border-radius: 4px;
button:hover {
background-color: #0056b3;
.hidden {
display: none;
</style>
</head>
<body>
<!-- Login Form -->
<div id="login-container" class="container">
<h2>Login</h2>
<input type="text" id="username" placeholder="Username" required />
<input type="password" id="password" placeholder="Password" required />
<button onclick="handleLogin()">Login</button>
<p id="login-error" style="color: red; margin-top: 10px;"></p>
</div>
<!-- Homepage -->
<div id="home-container" class="container hidden">
<h2>Welcome to the Homepage!</h2>
<button onclick="handleLogout()">Logout</button>
</div>
<script src="script.js"></script>
</body>
</html>
// Function to handle login
function handleLogin() {
const username = document.getElementById('username').value;
const password = document.getElementById('password').value;
// Simulated credentials (replace with actual authentication logic)
const validUsername = 'admin';
const validPassword = 'password';
if (username === validUsername && password === validPassword) {
// Store user session in local storage
localStorage.setItem('isLoggedIn', 'true');
localStorage.setItem('username', username);
// Redirect to homepage
showHomepage();
} else {
// Show error message
document.getElementById('login-error').textContent = 'Invalid username or password';
// Function to handle logout
function handleLogout() {
// Clear user session from local storage
localStorage.removeItem('isLoggedIn');
localStorage.removeItem('username');
// Redirect to login page
showLoginPage();
// Function to show the homepage
function showHomepage() {
document.getElementById('login-container').classList.add('hidden');
document.getElementById('home-container').classList.remove('hidden');
// Function to show the login page
function showLoginPage() {
document.getElementById('home-container').classList.add('hidden');
document.getElementById('login-container').classList.remove('hidden');
// Check if the user is already logged in when the page loads
window.onload = function () {
const isLoggedIn = localStorage.getItem('isLoggedIn') === 'true';
if (isLoggedIn) {
showHomepage();
} else {
showLoginPage();
};
E learning website
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>E-Learning Platform</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Welcome to the E-Learning Platform</h1>
<nav>
<a href="login.html">Login</a>
<a href="dashboard.html">Dashboard</a>
</nav>
</header>
<main>
<p>Enhance your knowledge with interactive lessons, quizzes, and assignments.</p>
</main>
</body>
</html>
login.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h2>Login to Your Account</h2>
<form id="loginForm">
<input type="text" id="username" placeholder="Enter Username" required>
<input type="password" id="password" placeholder="Enter Password" required>
<button type="submit">Login</button>
</form>
<script src="script.js"></script>
</body>
</html>
dashboard.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dashboard</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h2>Welcome to Your Dashboard</h2>
<nav>
<a href="subjects.html">Subjects</a>
<a href="profile.html">Profile</a>
<a href="results.html">Results</a>
<a href="login.html" onclick="logout()">Logout</a>
</nav>
<script src="script.js"></script>
</body>
</html>
subjects.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Subjects</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h2>Select a Subject</h2>
<ul>
<li><a href="course.html?subject=Math">Mathematics</a></li>
<li><a href="course.html?subject=Science">Science</a></li>
</ul>
</body>
</html>
course.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Course Page</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h2 id="courseTitle"></h2>
<nav>
<a href="quiz.html">Take Quiz</a>
<a href="assignments.html">Assignments</a>
<a href="projects.html">Projects</a>
</nav>
<script>
document.getElementById("courseTitle").innerText = new
URLSearchParams(window.location.search).get("subject") + " Course";
</script>
</body>
</html>
quiz.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Quiz</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h2>Quiz Section</h2>
<div id="quizContainer"></div>
<button onclick="submitQuiz()">Submit Quiz</button>
<script src="script.js"></script>
</body>
</html>
assignments.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Assignments</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h2>Assignments</h2>
<p>Upload your assignment below:</p>
<input type="file" id="assignmentUpload">
<button>Submit Assignment</button>
</body>
</html>
script.js
// Simple Authentication
document.getElementById("loginForm")?.addEventListener("submit", function(event) {
event.preventDefault();
let username = document.getElementById("username").value;
let password = document.getElementById("password").value;
if (username === "student" && password === "password") {
localStorage.setItem("authenticated", "true");
window.location.href = "dashboard.html";
} else {
alert("Invalid credentials!");
});
// Logout
function logout() {
localStorage.removeItem("authenticated");
window.location.href = "login.html";
// Quiz Timer (Example)
let timeLeft = 60;
let timer = setInterval(() => {
timeLeft--;
if (timeLeft <= 0) {
clearInterval(timer);
alert("Time's up! Quiz submitted.");
}, 1000);
