File "bod1.php"

Full path: /home/fsibplc/public_html/sommilito-bank/bod1.php
File size: 5.57 B (5.57 KB bytes)
MIME-type: text/x-php
Charset: utf-8

Download   Open   Edit   Advanced Editor   Back

<?php include 'header.php'; ?>

<?php
$page = 'Board of Directors';
$title = "Sammilito Islami Bank PLC Board of Directors";
include 'page-hero.php';
?>

<div class="min-h-screen bg-gradient-to-b from-gray-50 to-white py-16">
  <div class="max-w-7xl mx-auto px-6 py-12">

    <!-- <h1 class="text-4xl font-bold text-center text-gray-800 mb-14">
      Board of Directors
      <span class="block text-lg text-gray-500 mt-2">
        Sammilito Islami Bank PLC
      </span>
    </h1> -->

    <!-- GRID -->
    <div id="cardContainer" class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-12 justify-items-center"></div>

  </div>
</div>

<!-- MODAL -->
<div id="modal" class="fixed inset-0 bg-black/60 backdrop-blur-md hidden items-center justify-center z-50 p-4">

  <div class="bg-white/90 backdrop-blur-xl rounded-3xl w-full max-w-5xl max-h-[90vh] overflow-hidden relative shadow-2xl flex flex-col md:flex-row animate-fadeIn">

    <!-- Close -->
    <button onclick="closeModal()" 
      class="absolute top-4 right-5 text-3xl text-gray-400 hover:text-red-500">&times;</button>

    <!-- LEFT -->
    <div class="md:w-1/3 bg-gray-100 flex flex-col items-center p-8">
      <img id="modalImg" 
        class="w-48 h-48 object-cover object-top shadow-lg ring-4 ring-teal mb-5">

      <h2 id="modalName" class="text-2xl font-bold text-gray-800 text-center"></h2>

      <span id="modalRole" 
        class="inline-block mt-3 bg-teal-600 text-white px-5 py-1 rounded-full text-sm">
      </span>
    </div>

    <!-- RIGHT -->
    <div class="md:w-2/3 overflow-y-auto px-10 py-8">
      <p id="modalText" class="text-gray-700 text-justify leading-relaxed whitespace-pre-line"></p>
    </div>

  </div>
</div>

<style>
@keyframes fadeIn {
  from {opacity: 0; transform: scale(0.95);}
  to {opacity: 1; transform: scale(1);}
}
.animate-fadeIn {
  animation: fadeIn 0.3s ease;
}
</style>

<script>
const data = [
  {
    name: "Mr. Md. Ayub Miah(Resigned)",
    role: "Chairman",
    img: "assets/images/bod/sample.png",
    text: `Mr. Md. Sawkatul Alam is the Managing Director (C.C) of Sammilito Islami Bank PLC. Md. Sawkatul Alam, executive director, Bangladesh Bank, obtained both his bachelor's and master's degrees from the Department of Mathematics, University of Dhaka, and later earned a professional master's degree from the Department of Economics of the same university.
           Beginning his career as an assistant director at Bangladesh Bank in 1996, Md. Sawkatul Alam built a distinguished career spanning 28 years in the central bank. During this time, he served in key positions at Bangladesh Bank's Barishal and Rajshahi offices, as well as at the Department of Offsite Supervision, Bangladesh Financial Intelligence Unit, Banking Inspection Division, and also as a member of the board of directors of Bangladesh Municipal Development Fund.
           As part of his professional duties, he participated in various meetings, seminars and training workshops held in the United Kingdom, France, Austria, South Korea, Thailand, India, Mongolia, Sri Lanka and Nepal.`

  },
  {
    name: "Director 1",
    role: "Director",
    img: "assets/images/bod/sample.png",
    text: "Director details..."
  },
  {
    name: "Director 2",
    role: "Director",
    img: "assets/images/bod/sample.png",
    text: "Details..."
  },
  {
    name: "Director 3",
    role: "Director",
    img: "assets/images/bod/sample.png",
    text: "Details..."
  },
  {
    name: "Director 4",
    role: "Director",
    img: "assets/images/bod/sample.png",
    text: "Details..."
  },
  {
    name: "Director 5",
    role: "Director",
    img: "assets/images/bod/sample.png",
    text: "Details..."
  },
  {
    name: "Director 6",
    role: "Director",
    img: "assets/images/bod/sample.png",
    text: "Details..."
  },
  {
    name: "Director 7",
    role: "Director",
    img: "assets/images/bod/sample.png",
    text: "Details..."
  }
];

const container = document.getElementById("cardContainer");

data.forEach((d, i) => {

  let specialClass = "";

  // 1–3–3–1 layout
  if(i === 0 || i === data.length - 1){
    specialClass = "md:col-span-3 md:justify-self-center";
  }

  const card = `
    <div onclick="openModal(${i})"
      class="${specialClass}  bg-white rounded-sm hover:border-teal-800 shadow-sm hover:shadow-xl transition duration-300 hover:-translate-y-2 group flex flex-col items-center p-6">

      <!-- SMALL IMAGE -->
      <img src="${d.img}" 
        class="w-60 h-60 object-cover object-top aspect-square mb-4 group-hover:scale-105 transition">

      <!-- TEXT -->
      <p class="text-sm font-semibold text-teal-800">
        ${d.role}
      </p>

      <h3 class="text-sm mt-1 text-center text-gray-700 font-semibold">
        ${d.name}
      </h3>

    </div>
  `;

  container.innerHTML += card;
});

function openModal(i){
  let d = data[i];

  const modal = document.getElementById('modal');
  modal.classList.remove('hidden');
  modal.classList.add('flex');

  document.getElementById('modalImg').src = d.img;
  document.getElementById('modalName').innerText = d.name;
  document.getElementById('modalRole').innerText = d.role;
  document.getElementById('modalText').innerText = d.text;
}

function closeModal(){
  document.getElementById('modal').classList.add('hidden');
}

document.getElementById('modal').onclick = (e) => {
  if(e.target.id === 'modal') closeModal();
}

document.onkeydown = (e) => {
  if(e.key === "Escape") closeModal();
}
</script>

<?php include 'footer.php'; ?>