Scribd
Upload
7 views18 pages

DOCTYPE HTML

The document outlines a Library Management System that includes a login interface for users and admins, allowing them to manage books. Users can search for books, while admins have additional functionalities to add or remove books. The system utilizes local storage to maintain user sessions and book data.

Uploaded by

linuxunix740
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
7 views18 pages

DOCTYPE HTML

The document outlines a Library Management System that includes a login interface for users and admins, allowing them to manage books. Users can search for books, while admins have additional functionalities to add or remove books. The system utilizes local storage to maintain user sessions and book data.

Uploaded by

linuxunix740
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 18

<!

DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Library Login</title>

<link rel="stylesheet" href="styles.css">

</head>

<body>

<div class="login-container">

<h2>🔑 Library Login</h2>

<div class="login-box">

<input type="text" id="username" placeholder="Enter Username">

<input type="password" id="password" placeholder="Enter Password">

<select id="role">

<option value="user">User</option>

<option value="admin">Admin</option>

</select>

<button onclick="login()">Login</button>

<p id="error-msg" class="error"></p>

</div>

</div>

<script>

function login() {

const username = document.getElementById("username").value;

const password = document.getElementById("password").value;

const role = document.getElementById("role").value;


const users = {

"user": "user123",

"admin": "admin123"

};

if (users[role] && users[role] === password) {

localStorage.setItem("loggedInRole", role);

window.location.href = "library.html";

} else {

document.getElementById("error-msg").innerText = "Invalid login. Try again!";

</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>Library Management System</title>

<link rel="stylesheet" href="styles.css">

</head>

<body>

<div class="container">

<h2>📚 Library Management System</h2>

<button class="logout-btn" onclick="logout()">Logout</button>

<!-- Search Panel -->

<div class="search-container">

<input type="text" id="search-box" placeholder="Search by Title, Author, or ISBN">

<button onclick="searchBooks()">🔍 Search</button>

</div>

<!-- Admin Only: Add Books -->

<div class="form-container" id="admin-actions">

<h3>📖 Manage Books (Admin Only)</h3>

<input type="text" id="book-title" placeholder="Book Title">

<input type="text" id="book-author" placeholder="Author">

<input type="text" id="book-isbn" placeholder="ISBN">

<button onclick="addBook()">➕ Add Book</button>

</div>
<!-- Book List -->

<div class="table-container">

<h3>📚 Book List</h3>

<table>

<thead>

<tr>

<th>Title</th>

<th>Author</th>

<th>ISBN</th>

<th>Actions</th>

</tr>

</thead>

<tbody id="book-list"></tbody>

</table>

</div>

</div>

<script src="script.js"></script>

<script>

document.addEventListener("DOMContentLoaded", function() {

const role = localStorage.getItem("loggedInRole");

if (!role) {

window.location.href = "index.html";

if (role !== "admin") {

document.getElementById("admin-actions").style.display = "none";
}

});

function logout() {

localStorage.removeItem("loggedInRole");

window.location.href = "index.html";

</script>

</body>

</html>
document.addEventListener("DOMContentLoaded", () => {

preloadBooks();

loadBooks();

});

// Preload 20 books

function preloadBooks() {

let books = JSON.parse(localStorage.getItem("books")) || [];

if (books.length > 0) return;

let sampleBooks = [

{ title: "To Kill a Mockingbird", author: "Harper Lee", isbn: "9780061120084" },

{ title: "1984", author: "George Orwell", isbn: "9780451524935" },

{ title: "Pride and Prejudice", author: "Jane Austen", isbn: "9780141439518" },

{ title: "The Great Gatsby", author: "F. Scott Fitzgerald", isbn: "9780743273565" },

{ title: "Moby-Dick", author: "Herman Melville", isbn: "9781503280786" }

];

localStorage.setItem("books", JSON.stringify(sampleBooks));

// Load Books and Make Titles Clickable

function loadBooks() {

let books = JSON.parse(localStorage.getItem("books")) || [];

const bookList = document.getElementById("book-list");

bookList.innerHTML = "";
books.forEach((book, index) => {

let row = `<tr>

<td><a href="https://en.wikipedia.org/wiki/${book.title.replace(/\s+/g, '_')}"


target="_blank">${book.title}</a></td>

<td>${book.author}</td>

<td>${book.isbn}</td>

<td>${localStorage.getItem("loggedInRole") === "admin" ? `<button class="delete"


onclick="removeBook(${index})">Delete</button>` : "View Only"}</td>

</tr>`;

bookList.innerHTML += row;

});

// Add a New Book (Admin Only)

function addBook() {

let title = document.getElementById("book-title").value;

let author = document.getElementById("book-author").value;

let isbn = document.getElementById("book-isbn").value;

if (title === "" || author === "" || isbn === "") {

alert("Please fill all fields");

return;

let books = JSON.parse(localStorage.getItem("books")) || [];

books.push({ title, author, isbn });

localStorage.setItem("books", JSON.stringify(books));
loadBooks();

document.getElementById("book-title").value = "";

document.getElementById("book-author").value = "";

document.getElementById("book-isbn").value = "";

// Remove a Book (Admin Only)

function removeBook(index) {

let books = JSON.parse(localStorage.getItem("books"));

books.splice(index, 1);

localStorage.setItem("books", JSON.stringify(books));

loadBooks();

// Search Books

function searchBooks() {

let query = document.getElementById("search-box").value.toLowerCase();

let books = JSON.parse(localStorage.getItem("books")) || [];

const bookList = document.getElementById("book-list");

bookList.innerHTML = "";

let filteredBooks = books.filter(book =>

book.title.toLowerCase().includes(query) ||

book.author.toLowerCase().includes(query) ||

book.isbn.includes(query)

);
filteredBooks.forEach((book, index) => {

let row = `<tr>

<td><a href="https://en.wikipedia.org/wiki/${book.title.replace(/\s+/g, '_')}"


target="_blank">${book.title}</a></td>

<td>${book.author}</td>

<td>${book.isbn}</td>

<td>${localStorage.getItem("loggedInRole") === "admin" ? `<button class="delete"


onclick="removeBook(${index})">Delete</button>` : "View Only"}</td>

</tr>`;

bookList.innerHTML += row;

});

}
/* General Styles */

body {

font-family: 'Arial', sans-serif;

background: #f4f4f4;

margin: 0;

padding: 0;

display: flex;

justify-content: center;

align-items: center;

min-height: 100vh;

/* Login Container */

.login-container {

width: 100%;

max-width: 400px;

background: white;

padding: 25px;

border-radius: 10px;

box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);

text-align: center;

.login-box input, .login-box select {

width: 100%;

padding: 12px;

margin: 10px 0;
border: 1px solid #ccc;

border-radius: 5px;

font-size: 16px;

button {

width: 100%;

padding: 12px;

border: none;

background: #27ae60;

color: white;

font-size: 18px;

cursor: pointer;

border-radius: 5px;

transition: 0.3s;

button:hover {

background: #2ecc71;

/* Logout Button */

.logout-btn {

background: #e74c3c;

margin-bottom: 15px;

}
.logout-btn:hover {

background: #c0392b;

/* Error Message */

.error {

color: red;

font-weight: bold;

margin-top: 10px;

/* Library Page Container */

.container {

width: 90%;

max-width: 1000px;

margin: 20px auto;

background: white;

padding: 30px;

border-radius: 10px;

box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);

text-align: center;

/* Form Container */

.form-container {

background: #ecf0f1;

padding: 20px;
border-radius: 8px;

margin-bottom: 25px;

/* Table Styling */

.table-container {

overflow-x: auto;

max-height: 600px; /* Adjusted for TV screens */

table {

width: 100%;

border-collapse: collapse;

margin-top: 20px;

th, td {

padding: 12px;

border: 1px solid #ddd;

text-align: left;

th {

background: #2980b9;

color: white;

font-size: 18px;

}
td {

background: #f4f4f4;

font-size: 16px;

/* Delete Button */

.delete {

background: #e74c3c;

color: white;

border: none;

padding: 8px 12px;

cursor: pointer;

border-radius: 5px;

transition: 0.3s;

.delete:hover {

background: #c0392b;

/* Responsive Design */

@media (max-width: 1024px) {

.container, .login-container {

width: 95%;

}
.form-container {

padding: 15px;

table {

font-size: 14px;

th, td {

padding: 8px;

@media (max-width: 768px) {

body {

display: block;

padding: 20px;

.container {

width: 100%;

padding: 20px;

table {

font-size: 14px;

}
th, td {

padding: 6px;

.login-box input, .login-box select {

font-size: 14px;

@media (min-width: 1920px) {

.container {

max-width: 1200px;

.table-container {

max-height: 800px; /* Increased height for better visibility */

th, td {

font-size: 20px;

padding: 14px;

.delete {

padding: 10px 15px;

font-size: 18px;
}

.search-container {

display: flex;

justify-content: center;

margin-bottom: 20px;

.search-container input {

width: 60%;

padding: 10px;

border: 1px solid #ccc;

border-radius: 5px;

font-size: 16px;

.search-container button {

padding: 10px 15px;

margin-left: 10px;

border: none;

background: #2980b9;

color: white;

cursor: pointer;

border-radius: 5px;

.search-container button:hover {
background: #1e5c87;

You might also like