HTML Source Code
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Smart Library System</title>
<style>
body{background-color:#f4f6f9;font-family:Arial,sans-serif;margin:0;padding:20px;}
.dashboard{display:grid;grid-template-columns:repeat(auto-
fit,minmax(300px,1fr));gap:20px;max-width:1200px;margin:0 auto;}
.card{background:white;padding:25px;border-radius:10px;box-shadow:0 4px 6px
rgba(0,0,0,0.1);transition:transform 0.3s ease,box-shadow:0 3s ease;}
.card:hover{transform:translateY(-5px);box-shadow:0 8px 15px rgba(0,0,0,0.15);}
h2{color:#1e3a8a;margin-top:0;border-bottom:2px solid #e5e7eb;padding-bottom:10px;}
.form-group{margin-bottom:15px;}
label{display:block;font-weight:bold;margin-bottom:5px;color:#374151;}
input[type="text"],input[type="email"],input[type="password"],input[type="date"],selec
t{width:100%;padding:10px;border:1px solid #ccc;border-radius:5px;box-sizing:border-
box;}
.checkbox-group{display:flex;flex-direction:column;gap:8px;max-height:120px;overflow-
y:auto;border:1px solid #ccc;padding:10px;border-radius:5px;}
.checkbox-line{display:flex;align-items:center;gap:8px;}
button{background-color:#1e3a8a;color:white;padding:12px 20px;border:none;border-
radius:5px;cursor:pointer;width:100%;font-size:16px;font-weight:bold;}
button:hover{background-color:#111827;}
.error{color:#dc2626;font-size:14px;margin-top:5px;display:none;}
.success{color:#16a34a;font-weight:bold;margin-top:15px;}
.output-box{background:#f9fafb;border-left:4px solid #1e3a8a;padding:15px;margin-
top:15px;border-radius:0 5px 5px 0;}
</style>
</head>
<body>
<div class="dashboard">
<div class="card">
<h2>Library Membership Form</h2>
<form id="membershipForm" onsubmit="return validateMembership(event)">
<div class="form-group">
<label for="m_name">Full Name</label>
<input type="text" id="m_name" required>
</div>
<div class="form-group">
<label for="m_id">Student ID</label>
<input type="text" id="m_id" required>
</div>
<div class="form-group">
<label for="m_dept">Department</label>
<select id="m_dept" required>
<option value="">Select Department</option>
<option value="Computer Science">Computer Science</option>
<option value="Artificial Intelligence">Artificial Intelligence</option>
<option value="Electrical Engineering">Electrical Engineering</option>
</select>
</div>
<div class="form-group">
<label for="m_email">Email Address</label>
<input type="email" id="m_email" required>
</div>
<div class="form-group">
<label for="m_phone">Phone Number</label>
<input type="text" id="m_phone" required>
</div>
<div class="form-group">
<label for="m_type">Membership Type</label>
<select id="m_type" required>
<option value="Standard">Standard</option>
<option value="Premium">Premium</option>
</select>
</div>
<div class="form-group">
<label for="m_pass">Password</label>
<input type="password" id="m_pass" required>
</div>
<button type="submit">Register Member</button>
</form>
<div id="m_success" class="success" style="display:none;">Membership Registration
Successful!</div>
</div>
<div class="card">
<h2>Book Issue Panel</h2>
<form id="issueForm" onsubmit="return validateIssue(event)">
<div class="form-group">
<label>Select Books (Max 3)</label>
<div class="checkbox-group">
<div class="checkbox-line"><input type="checkbox" name="books"
value="Introduction to AI" id="b1"><label for="b1">Introduction to AI</label></div>
<div class="checkbox-line"><input type="checkbox" name="books" value="Clean
Code" id="b2"><label for="b2">Clean Code</label></div>
<div class="checkbox-line"><input type="checkbox" name="books" value="Data
Structures" id="b3"><label for="b3">Data Structures</label></div>
<div class="checkbox-line"><input type="checkbox" name="books" value="Thomas
Calculus" id="b4"><label for="b4">Thomas Calculus</label></div>
<div class="checkbox-line"><input type="checkbox" name="books" value="Web
Engineering" id="b5"><label for="b5">Web Engineering</label></div>
</div>
<div id="book_error" class="error">You can select a maximum of 3 books.</div>
</div>
<div class="form-group">
<label for="issue_date">Issue Date</label>
<input type="date" id="issue_date" required>
</div>
<div class="form-group">
<label for="return_date">Return Date</label>
<input type="date" id="return_date" required>
</div>
<div class="form-group">
<label for="availability">Availability Check</label>
<select id="availability">
<option value="Available">Available (In Stock)</option>
<option value="Reserved">Reserved</option>
</select>
</div>
<button type="submit">Issue Books</button>
</form>
<div id="issue_success" class="success" style="display:none;">Books Issued
Successfully!</div>
</div>
<div class="card">
<h2>PHP Backend Handler (POST Simulation)</h2>
<form id="phpForm" onsubmit="return simulatePhpHandling(event)">
<div class="form-group">
<label for="php_user">Username</label>
<input type="text" id="php_user" required>
</div>
<div class="form-group">
<label for="php_action">Action</label>
<select id="php_action" required>
<option value="Renew Membership">Renew Membership</option>
<option value="Pay Fine">Pay Fine</option>
</select>
</div>
<button type="submit">Submit Via POST</button>
</form>
<div id="php_output" class="output-box" style="display:none;"></div>
</div>
</div>
<script>
function validateMembership(e){
[Link]();
[Link]('m_success').[Link] = 'block';
return false;
}
function validateIssue(e){
[Link]();
const checkboxes = [Link]('input[name="books"]:checked');
const errorDiv = [Link]('book_error');
const successDiv = [Link]('issue_success');
if([Link] > 3){
[Link] = 'block';
[Link] = 'none';
return false;
}else if([Link] === 0){
[Link] = 'Please select at least one book.';
[Link] = 'block';
[Link] = 'none';
return false;
}else{
[Link] = 'none';
[Link] = 'block';
return true;
}
}
function simulatePhpHandling(e){
[Link]();
const user = [Link]('php_user').value;
const action = [Link]('php_action').value;
const output = [Link]('php_output');
[Link] = 'block';
[Link] = `
<strong>$_POST Array Server Output:</strong><br>
[status] => SUCCESS<br>
[username] => ${[Link](/</g, "<")}<br>
[action] => ${action}<br>
[timestamp] => ${new Date().toISOString()}
`;
return false;
}
</script>
</body>
</html>
Smart Library System
Rendered Output (Screenshot)