MAINHACK

Viewing / Editing File: studentidcards.php

<?php
include("functions.php");
if (!isset($_SESSION['dbmail_Xw211qAAsq4'])) {
  header("location:../auth-login");
  exit;
}

$s_code = $_SESSION['s_code_Xw2119904'];

// Get school name & logo
$getscholname = mysqli_query($new, "SELECT school_name, logo FROM schools WHERE school_code = '$s_code'");
$name = mysqli_fetch_array($getscholname);
$thisname = $name['school_name'];
$logo = $name['logo'];
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Student ID Cards</title>
<meta name="viewport" content="width=device-width, initial-scale=1">

h2 {
  font-family: 'Playfair Display', serif;
  text-transform: uppercase;
  font-size: 26px;
  margin-bottom: 40px;
  letter-spacing: 1px;
}

/* Grid layout */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 35px;
  justify-items: center;
}

.card {
  width: 360px;
  height: 240px;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  position: relative;
  transition: transform 0.2s ease;
}
.card:hover { transform: translateY(-6px); }

.card-header {
  background: #222;
  color: #fff;
  display: flex;
  align-items: center;
  padding: 10px 15px;
  height: 70px;
  box-sizing: border-box;
}

.logo-container {
  width: 90px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
.logo-container img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.card-header-text {
  text-align: left;
  margin-left: 10px;
}
.card-header-text .academy {
  font-family: 'Playfair Display', serif;
  font-size: 1.1em;
  text-transform: uppercase;
  font-weight: 700;
  line-height: 1.2;
}

.card-body {
  display: flex;
  justify-content: space-between;
  padding: 12px 18px;
  height: 120px;
}
.card-left { width: 65%; text-align: left; }
.card-left .name {
  font-family: 'Playfair Display', serif;
  font-weight: 900;
  font-size: 1em;
  text-transform: uppercase;
  margin-bottom: 5px;
}
.card-left .id {
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 6px;
}
.card-left .details {
  font-size: 10px;
  line-height: 1.5;
  text-transform: uppercase;
}
.card-right {
  width: 30%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.card-right img {
  width: 80px;
  height: 90px;
  border-radius: 6px;
  object-fit: cover;
}
.card-footer {
  height: 10px;
  background-color: #2f6b34;
}

.download-btn {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 4px 10px;
  font-size: 12px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.card:hover .download-btn { opacity: 1; }

#loadMore {
  background: #444;
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 8px 16px;
  margin-top: 30px;
  cursor: pointer;
}
#loadMore:hover { background: #333; }
</style>
</head>
<body>

<h2><?= htmlspecialchars($thisname) ?> — Visiting Cards</h2>

<div class="color-picker">
  <label>Header: <input type="color" id="headerColor"></label>
  <label>Footer: <input type="color" id="footerColor"></label>
  <label>Text: <input type="color" id="textColor"></label>
  <button id="saveColors">💾 Save Colors</button>
</div>
<br  />
<input type="text" id="searchInput" placeholder="🔍 Search student by name, ID, or class...">

<div class="card-grid" id="cardGrid"></div>

// === Apply color theme ===
function applyColors(colors) {
  $(".card-header").css("background-color", colors.header);
  $(".card-footer").css("background-color", colors.ribbon);
  $(".academy, .motto, .name, .id, .details").css("color", colors.text);
  $("#headerColor").val(colors.header);
  $("#footerColor").val(colors.ribbon);
  $("#textColor").val(colors.text);
}

// === Fetch cards (with optional search term) ===
function loadCards(searchTerm = "") {
  $("#cardGrid").html('<div class="loader"></div>');
  $.ajax({
    url: "load_students.php",
    method: "GET",
    data: { offset: 0, limit: limit, search: searchTerm },
    success: data => {
      if ($.trim(data) === "") {
        $("#cardGrid").html('<div class="no-results"> No matching students found</div>');
      } else {
        $("#cardGrid").html(data);
        // Apply saved colors to new cards
        $.get("load_colors.php", function(cData){
          let colors = JSON.parse(cData);
          if (colors) applyColors(colors);
        });
      }
    },
    error: () => {
      $("#cardGrid").html('<div class="no-results"> Error loading data</div>');
    }
  });
}

$(document).ready(function() {
  // === Initial load ===
  loadCards();

// === Debounced Live Search ===
  let searchTimer;
  $("#searchInput").on("input", function() {
    clearTimeout(searchTimer);
    const term = $(this).val().trim();
    searchTimer = setTimeout(() => loadCards(term), 500);
  });

// === Load saved colors ===
  $.get("load_colors.php", function(data){
    let colors = JSON.parse(data);
    if (colors) applyColors(colors);
  });

// === Live color preview + auto-save ===
  let saveTimer;
  $("input[type=color]").on("input", function(){
    clearTimeout(saveTimer);
    let colors = {
      header: $("#headerColor").val(),
      ribbon: $("#footerColor").val(),
      chip: $("#footerColor").val(),
      text: $("#textColor").val()
    };
    applyColors(colors);
    saveTimer = setTimeout(() => {
      $.post("save_colors.php", colors, res => console.log("Colors updated:", res));
    }, 400);
  });

// === Manual Save (optional) ===
  $("#saveColors").click(function(){
    let colors = {
      header: $("#headerColor").val(),
      ribbon: $("#footerColor").val(),
      chip: $("#footerColor").val(),
      text: $("#textColor").val()
    };
    $.post("save_colors.php", colors, function(response){
      alert("Color preferences saved successfully!");
    });
  });

// === Download card ===
  $(document).on("click", ".download-btn", function(){
    let cardId = $(this).data("card");
    let studentName = $(this).data("name").replace(/\s+/g, "_");
    const card = document.querySelector("#" + cardId);

// Wait for images to load
    Promise.all(
      Array.from(card.querySelectorAll("img")).map(img => {
        if (img.complete) return Promise.resolve();
        return new Promise(resolve => img.onload = img.onerror = resolve);
      })
    ).then(() => {
      html2canvas(card, {
        backgroundColor: null,
        scale: 2,
        useCORS: true,
        logging: false
      }).then(canvas => {
        canvas.toBlob(blob => saveAs(blob, studentName + "_ID_Card.png"));
      });
    });
  });
});

</script>

</body>
</html>

Cancel / Back

[ MAINHACK ]

Viewing / Editing File: studentidcards.php

Server Info

System Features

User Info