<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>Result Search Page</title>
<style>
body{
font-family: Arial, sans-serif;
background:#f2f2f2;
margin:0;
padding:0;
}
.header{
background:#0b5ed7;
color:white;
padding:15px;
text-align:center;
font-size:22px;
font-weight:bold;
}
.container{
width:90%;
max-width:500px;
margin:40px auto;
background:white;
padding:20px;
border-radius:10px;
box-shadow:0 0 10px rgba(0,0,0,0.1);
}
label{
font-weight:bold;
display:block;
margin-top:10px;
}
input, select{
width:100%;
padding:10px;
margin-top:5px;
border:1px solid #ccc;
border-radius:5px;
}
button{
width:48%;
padding:10px;
margin-top:15px;
border:none;
border-radius:5px;
cursor:pointer;
font-weight:bold;
}
.btn-search{
background:#0b5ed7;
color:white;
}
.btn-reset{
background:red;
color:white;
}
.result-box{
display:none;
margin-top:20px;
padding:15px;
background:#e9ffe9;
border:1px solid #2ecc71;
border-radius:10px;
}
</style>
</head>
<body>
<div class=”header”>
Faculty Result Examination Portal
</div>
<div class=”container”>
<label>Roll Number</label>
<input type=”text” id=”roll” placeholder=”Enter Roll Number”>
<label>Registration Number</label>
<input type=”text” id=”reg” placeholder=”Enter Registration Number”>
<label>Date of Birth</label>
<input type=”date” id=”dob”>
<div style=”display:flex; justify-content:space-between;”>
<button class=”btn-search” onclick=”showResult()”>Search Result</button>
<button class=”btn-reset” onclick=”resetForm()”>Reset</button>
</div>
<!– RESULT BOX –>
<div class=”result-box” id=”resultBox”>
<h3>Result Details</h3>
<p><b>Name:</b> Rahul Kumar</p>
<p><b>Roll No:</b> 123456</p>
<p><b>Status:</b> PASS</p>
<p><b>Marks:</b> 78%</p>
</div>
</div>
<script>
function showResult(){
let roll = document.getElementById(“roll”).value;
let reg = document.getElementById(“reg”).value;
let dob = document.getElementById(“dob”).value;
if(roll === “” || reg === “” || dob === “”){
alert(“Please fill all details!”);
return;
}
// result show
document.getElementById(“resultBox”).style.display = “block”;
}
function resetForm(){
document.getElementById(“roll”).value = “”;
document.getElementById(“reg”).value = “”;
document.getElementById(“dob”).value = “”;
document.getElementById(“resultBox”).style.display = “none”;
}
</script>
</body>
</html>
