<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Apex College Library Dashboard</title>
  <link rel="icon" href="https://www.apexcollegemakrana.in/Uploads/org/321img-01.png" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" />
  <style>
    body {
      margin: 0;
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
      background-color: #ffffff;
      color: #330000;
      max-width: 1200px;
      margin-left: auto;
      margin-right: auto;
      overflow-x: hidden;
    }
    header {
      background: linear-gradient(to right, #8b0000, #b30000);
      color: white;
      padding: 1.5rem 2rem;
      text-align: center;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
      position: relative;
      max-width: 1200px;
      margin: 0 auto;
    }
    header img {
      height: 60px;
      display: block;
      margin: 0 auto 1rem;
    }
    header h1 {
      font-size: 2rem;
      margin: 0;
    }
    header p {
      margin: 0.5rem 0 0;
      font-size: 1rem;
      font-weight: 300;
      color: #f8d7da;
    }
    .header-extra {
      position: absolute;
      top: 0.05rem;
      right: 2rem;
      display: flex;
      flex-direction: column;
      gap: 1.20rem;
      width: 200px;
    }
    .vertical-buttons {
      display: flex;
      flex-direction: column;
      gap: 0.40rem;
    }
    .header-btn {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 0.8rem;
      background-color: #FFA500;
      border: 2px solid #FFA500;
      border-radius: 8px;
      color: white;
      font-size: .90rem;
      padding: 0.7rem 1rem;
      cursor: pointer;
      width: 100%;
      font-weight: 300;
      transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
      box-shadow: 0 3px 6px rgba(184, 134, 11, 0.6);
      user-select: none;
    }
    .header-btn i {
      font-size: 1.3rem;
      min-width: 24px;
      text-align: center;
    }
    .header-btn:hover {
      background-color: #006400;
      color: #fffacd;
      border-color: #006400;
      box-shadow: 0 5px 10px rgba(139, 117, 0, 0.9);
    }
    .marquee {
      background-color: #ffebeb;
      color: #8b0000;
      padding: 0.5rem;
      font-weight: bold;
      font-size: 1.1rem;
      max-width: 1200px;
      margin: 0 auto;
    }
    .container {
      display: flex;
      gap: 2rem;
      padding: 2rem;
      max-width: 1200px;
      margin: 0 auto;
    }
    .grid {
      flex: 0 0 70%;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1.5rem;
      max-width: 840px;
    }
    .card {
      background-color: #fff0f0;
      border-radius: 15px;
      padding: 1.5rem 1rem;
      text-align: center;
      box-shadow: 0 8px 20px rgba(139, 0, 0, 0.15);
      transition: all 0.3s ease;
      min-height: 220px;
      max-width: 280px;
      margin: 0 auto;
    }
    .card:hover {
      transform: translateY(-8px);
      box-shadow: 0 12px 25px rgba(139, 0, 0, 0.3);
    }
    .card i {
      font-size: 2rem;
      color: #8b0000;
      margin-bottom: 0.75rem;
    }
    .card a {
      text-decoration: none;
      font-size: 1rem;
      color: #8b0000;
      font-weight: bold;
    }
    .message-box {
      width: 350px;
      height: 500px;
      background-color: #006400;
      color: white;
      padding: 1.5rem;
      border-radius: 12px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
      overflow-y: auto;
      position: relative;
    }
    .message-box h4 {
      color: #ffffff;
      margin-bottom: 0.5rem;
      font-size: 1.1rem;
      border-bottom: 1px solid #ccc;
      padding-bottom: 0.3rem;
    }
    .message-box p {
      font-style: italic;
      font-size: 0.95rem;
    }
    .message-box .name {
      margin-top: 0.3rem;
      font-style: normal;
      font-weight: bold;
    }
    .info-button {
      display: block;
      margin-top: 1.5rem;
      background-color: #ffc300;
      color: #330000;
      padding: 0.6rem 1rem;
      border: none;
      border-radius: 8px;
      font-size: 0.9rem;
      cursor: pointer;
      font-weight: bold;
      width: 100%;
    }
    .popup {
      display: none;
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: white;
      color: black;
      padding: 2rem;
      border-radius: 10px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
      z-index: 1000;
      max-width: 90%;
    }
    .popup h3 {
      margin-top: 0;
      color: #8b0000;
    }
    .popup p {
      font-size: 0.9rem;
      margin: 0.5rem 0;
    }
    .popup-close {
      background: #8b0000;
      color: white;
      border: none;
      padding: 0.4rem 0.8rem;
      border-radius: 6px;
      margin-top: 1rem;
      cursor: pointer;
    }
    .overlay {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
      z-index: 999;
    }
    footer {
      text-align: center;
      padding: 2rem 1rem;
      background: linear-gradient(to right, #8b0000, #b30000);
      color: white;
      font-size: 1rem;
      font-weight: 500;
      box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.3);
      line-height: 1.8;
      max-width: 1200px;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <header>
    <img src="https://www.apexcollegemakrana.in/Uploads/org/321img-01.png" alt="Apex College Logo" />
    <h1>Apex College, Makrana Library</h1>
    <h2>NAAC Accredited 'B++' College</h2>

    <div class="header-extra">
      <div class="vertical-buttons">
        <button class="header-btn" onclick="window.open('https://apexpgcollege.in/Uploads/fileupload/296digital%20payment.pdf', '_blank')">
          <i class="fas fa-credit-card"></i>
          <span>Digital Payments</span>
        </button>
        <button class="header-btn" onclick="window.open('https://apexpgcollege.in/Uploads/fileupload/77lib%20feedback.pdf', '_blank')">
          <i class="fas fa-comment-dots"></i>
          <span>Feedback</span>
        </button>
        <button class="header-btn" onclick="window.open('https://apexpgcollege.in/notifications', '_blank')">
          <i class="fas fa-bell"></i>
          <span>Notices</span>
        </button>
      </div>
    </div>
  </header>

  <div class="marquee">
    <marquee behavior="scroll" direction="left">
      Welcome to the Apex College Library Dashboard — Explore Resources,
      Access Knowledge, and Stay Informed!
    </marquee>
  </div>

  <!-- Rest of your content and grid/cards remain unchanged -->

  <div class="container">
    <div class="grid">
      <div class="card">
        <i class="fas fa-search"></i>
        <h3>
          <a
            href="https://apexcollegemakrana.paathshalasmart.com/Online/onlineSearchbook?userid=236"
            target="_blank"
            >Search Books (OPAC)</a
          >
        </h3>
        <p>Find books in the library using our Online Public Access Catalog.</p>
      </div>

      <div class="card">
        <i class="fas fa-scale-balanced"></i>
        <h3>
          <a
            href="https://apexpgcollege.in/Uploads/fileupload/290Rules%20and%20Regulation%20library.pdf"
            target="_blank"
            >Rules & Regulations</a
          >
        </h3>
        <p>Understand our library’s policies and usage guidelines.</p>
      </div>

      <div class="card">
        <i class="fas fa-globe"></i>
        <h3>
          <a href="https://apexpgcollege.in/free-e-resources" target="_blank"
            >Open Access Resources</a
          >
        </h3>
        <p>Access free academic journals, books, and learning materials.</p>
      </div>

      <div class="card">
        <i class="fas fa-book-open-reader"></i>
        <h3>
          <a href="https://discovery.delnet.in/" target="_blank"
            >Subscribed E-Resources</a
          >
        </h3>
        <p>Login to DELNET for premium research and reference materials.</p>
      </div>

      <div class="card">
        <i class="fas fa-video"></i>
        <h3>
          <a
            href="https://www.apexpgcollege.in/Uploads/fileupload/102Institution%20Vieo%20Lectures.xlsx"
            target="_blank"
            >Video Lectures</a
          >
        </h3>
        <p>Explore academic video content prepared by faculty experts.</p>
      </div>

      <div class="card">
        <i class="fas fa-concierge-bell"></i>
        <h3>
          <a
            href="https://apexpgcollege.in/Uploads/fileupload/636Intro%20of%20Library.pdf"
            target="_blank"
            >About Library</a
          >
        </h3>
        <p>Learn about the mission, services, and facilities of the library.</p>
      </div>

      <div class="card">
        <i class="fas fa-user-lock"></i>
        <h3>
          <a href="https://apexcollegemakrana.paathshalasmart.com/" target="_blank"
            >Library Login</a
          >
        </h3>
        <p>Login to manage your borrowed books and view your history.</p>
      </div>

      <div class="card">
        <i class="fas fa-book"></i>
        <h3>
          <a href="https://www.apexcollegemakrana.in/syllabus/" target="_blank"
            >Syllabus</a
          >
        </h3>
        <p>Download the latest syllabus of your respective course.</p>
      </div>
    </div>

    <div class="message-box">
      <h4>Principal's Message</h4>
      <p>
        Welcome to Apex College Library! Our institution strives for academic
        excellence and innovation. The library is a cornerstone of this mission
        — explore, learn, and grow.<br /><span class="name">Prof. (Dr.) Umesh Kumar Sidh,
          Principal</span>
      </p>
      <h4>Librarian's Message</h4>
      <p>
        The library is committed to facilitating your learning journey. From
        physical books to digital resources, we ensure access to knowledge is
        just a click away.<br /><span class="name">Mr. P.K. Singh, Librarian</span>
      </p>
<button class="header-btn" onclick="window.open('https://apexpgcollege.in/perodicals', '_blank')">
          <i class="fas fa-bell"></i>
          <span>Perodicals</span>
        </button>      
<button class="info-button" onclick="openPopup()">Important Information</button>
    </div>
  </div>

  <div class="overlay" id="overlay"></div>
  <div class="popup" id="infoPopup">
    <h3>Library Information</h3>
    <p><strong>Library Hours:</strong> Monday to Saturday, 9:00 AM - 4:00 PM</p>
    <p><strong>Email:</strong> apexcollege14@gmail.com</p>
    <p>
      <strong>Library Address:</strong> Top Floor, Campus Apex College, Makrana, Nagaur,
      Rajasthan - 341505
    </p>
    <button class="popup-close" onclick="closePopup()">Close</button>
  </div>

  <footer>
    &copy; 2025 Apex College Library | Empowering Knowledge Through Access and
    Innovation
  </footer>

  <script type="text/javascript">
    function googleTranslateElementInit() {
      new google.translate.TranslateElement(
        { pageLanguage: "en", includedLanguages: "en,hi" },
        "google_translate_element"
      );
    }

    function openPopup() {
      document.getElementById("infoPopup").style.display = "block";
      document.getElementById("overlay").style.display = "block";
    }

    function closePopup() {
      document.getElementById("infoPopup").style.display = "none";
      document.getElementById("overlay").style.display = "none";
    }
  </script>
  <script src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
</body>
</html>