<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Elite Defender Security - Verification Portal</title>
  <style>
/* General Layout */
body {
  font-family: "Segoe UI", Arial, sans-serif;
  margin: 0;
  padding: 0;
  background: #f5f5f5;
}

/* Main Section */
.verification-section {
  width: 90%;
  max-width: 900px;
  background: linear-gradient(135deg, #ff9933, #ffffff, #138808);
  border-radius: 12px;
  margin: 20px auto;
  padding: 20px;
  box-shadow: 0 0 15px rgba(0,0,0,0.25);
  animation: fadeIn 0.7s ease-in-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Headings */
h1, h2 {
  margin: 10px 0;
  text-align: center;
  color: #111;
}

h1 {
  font-size: 26px;
  font-weight: bold;
}

h2 {
  font-size: 20px;
  margin-top: 20px;
}

/* Forms */
form input, 
form button, 
form select {
  width: 100%;
  padding: 10px;
  margin: 8px 0;
  border: 2px solid #000;
  border-radius: 6px;
  box-sizing: border-box;
  font-size: 15px;
  transition: 0.3s;
}

form input:focus, 
form select:focus {
  border-color: #138808;
  outline: none;
  box-shadow: 0 0 5px rgba(19,136,8,0.6);
}

form button {
  background: #138808;
  color: white;
  font-weight: bold;
  cursor: pointer;
  border: 2px solid #000;
  transition: all 0.3s;
}

form button:hover {
  background: #0d5e00;
  border-color: #0d5e00;
  transform: scale(1.03);
}

/* Admin Login Button */
#adminLoginBtn {
  background: #ff5733;
  border-color: #c70039;
  color: #fff;
  font-weight: bold;
  padding: 12px;
  margin-top: 10px;
  border-radius: 6px;
  cursor: pointer;
  width: 220px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  transition: 0.3s;
}

#adminLoginBtn:hover {
  background: #c70039;
}

/* ===============================
   Result Card Styling
   =============================== */
.result-card {
  display: none;
  margin-top: 20px;
  padding: 25px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 4px 25px rgba(0,0,0,0.25);
  user-select: none;
  max-width: 450px;
  margin-left: auto;
  margin-right: auto;
}

.result-header {
  text-align: center;
  margin-bottom: 15px;
}

/* ✅ Centered Logo */
.result-header .logo {
  display: block;
  margin: 0 auto 10px auto;
  max-height: 90px;
}

.result-card h2 {
  font-size: 22px;
  font-weight: bold;
  color: #111;
}

/* ✅ Candidate Photo - Square */
.photo {
  width: 160px;
  height: 160px;
  margin: 15px auto;
  display: block;
  border-radius: 6px;
  border: 4px solid #138808;
  object-fit: cover;
  box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

/* Result Details */
.details {
  margin-top: 15px;
  text-align: left;
}

.details p {
  margin: 8px 0;
  font-size: 16px;
  color: #111;
}

.details strong {
  display: inline-block;
  width: 160px;
  font-weight: 700;
  color: #000;
}

/* Status Badge */
.status-text {
  font-weight: bold;
  padding: 4px 12px;
  border-radius: 6px;
  display: inline-block;
}

.status-text.pass { background: #28a745; color: #fff; }
.status-text.fail { background: #dc3545; color: #fff; }
.status-text.pending { background: #ff9800; color: #fff; }

/* ✅ Signature Styling */
.result-footer {
  margin-top: 20px;
  font-style: italic;
  color: #333;
  text-align: center;
}

.result-footer img {
  display: block;
  margin: 0 auto 5px auto;
  max-height: 120px;
}

/* ✅ Single Download Material Button */
.material-btn {
  background: #138808;
  color: #fff;
  padding: 10px 15px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: bold;
  display: inline-block;
  transition: 0.3s;
}

.material-btn:hover {
  background: #0d5e00;
}

/* Disclaimer */
.disclaimer {
  margin-top: 20px;
  font-size: 12px;
  color: #555;
  border-top: 1px solid #ccc;
  padding-top: 10px;
  text-align: center;
  line-height: 1.4;
}

/* Admin Records Table */
.styled-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}

.styled-table th, 
.styled-table td {
  border: 1px solid #333;
  padding: 10px;
  text-align: center;
  font-size: 14px;
}

.styled-table th { background: #eee; }

.thumb {
  width: 60px;
  border-radius: 6px;
}

/* Error Message */
.error {
  color: red;
  font-weight: bold;
  text-align: center;
}

/* Responsive Design */
@media (max-width: 600px) {
  .verification-section { padding: 15px; }
  h1 { font-size: 20px; }
  h2 { font-size: 18px; }
  .details strong { width: 120px; }
  form input, form select, form button { font-size: 14px; }
}
  </style>
</head>
<body>

<div class="verification-section">
  <h1>Welcome to Verification Portal</h1>
  <p style="text-align:center;">Kindly fill up details to get verify students.</p>

  <!-- Example Result Card -->
  <div class="result-card" style="display:block;">
    <div class="result-header">
      <img src="logo.png" alt="Logo" class="logo">
      <h2>Student Result</h2>
    </div>
    <img src="student-photo.jpg" alt="Candidate Photo" class="photo">

    <div class="details">
      <p><strong>Name:</strong> John Doe</p>
      <p><strong>Date of Birth:</strong> 01 Jan 2000</p>
      <p><strong>Serial No.:</strong> 12345</p>
      <p><strong>Status:</strong> <span class="status-text pass">Pass</span></p>
    </div>

    <!-- ✅ Single Download Button -->
    <div style="text-align:center;margin-top:15px;">
      <a href="files/course-material.pdf" target="_blank" class="material-btn">📥 Download Course Material</a>
    </div>

    <div class="result-footer">
      <img src="signature.png" alt="Verification Authority Signature">
      <p>Verification Authority</p>
    </div>

    <div class="disclaimer">
      The information displayed is based on the records submitted to Elite Defender Security. 
      While every effort is made to ensure accuracy, we hold no responsibility for any discrepancies or misuse of this information. 
      For official confirmation, please contact the issuing institution.
    </div>
  </div>
</div>

</body>
</html>