{"id":680,"date":"2025-08-05T03:30:22","date_gmt":"2025-08-05T03:30:22","guid":{"rendered":"https:\/\/mi.politeknikassalaam.ac.id\/?page_id=680"},"modified":"2025-08-05T03:31:42","modified_gmt":"2025-08-05T03:31:42","slug":"galery-mi","status":"publish","type":"page","link":"https:\/\/mi.politeknikassalaam.ac.id\/index.php\/galery-mi\/","title":{"rendered":"Galery MI"},"content":{"rendered":"\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<!-- Judul Halaman Galeri MI -->\n<style>\n  .agenda-header-full {\n    background-image: url('https:\/\/mi.politeknikassalaam.ac.id\/wp-content\/uploads\/2025\/07\/MG_2085-scaled.jpg');\n    background-size: cover;\n    background-position: center;\n    padding: 2rem 1rem;\n    text-align: center;\n    position: relative;\n    overflow: hidden;\n    width: 100%;\n    margin: 0;\n  }\n  .agenda-header-full::before {\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    background: rgba(0, 0, 0, 0.45);\n    z-index: 1;\n  }\n  .agenda-header-full h2 {\n    position: relative;\n    z-index: 2;\n    font-size: 1.8rem;\n    color: #fff;\n    font-weight: bold;\n    margin: 0;\n  }\n  .agenda-header-full h2::after {\n    content: \"\";\n    display: block;\n    width: 60px;\n    height: 3px;\n    background-color: #e91e63;\n    margin: 0.5rem auto 0;\n  }\n\n  \/* Judul Kedua *\/\n  .judul-kedua {\n    text-align: center;\n    margin-top: 30px;\n    font-size: 1.6rem;\n    color: #e91e63;\n    font-weight: bold;\n  }\n\n  \/* Galeri Angkatan Grid *\/\n  .angkatan-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));\n    gap: 20px;\n    max-width: 1000px;\n    margin: 40px auto;\n    padding: 0 20px;\n  }\n  .angkatan-card {\n    background: transparent;\n    border: 2px solid rgba(0,0,0,0.1);\n    border-radius: 12px;\n    padding: 30px 20px;\n    text-align: center;\n    transition: 0.3s ease;\n    cursor: pointer;\n  }\n  .angkatan-card:hover {\n    box-shadow: 0 5px 15px rgba(0,0,0,0.1);\n    border-color: #e91e63;\n    transform: translateY(-5px);\n  }\n  .angkatan-card h3 {\n    margin: 0 0 10px;\n  }\n  .angkatan-card span {\n    font-size: 0.9rem;\n    color: #555;\n  }\n  .btn-lihat {\n    margin-top: 18px;\n    padding: 8px 16px;\n    border: 2px dashed #e91e63;\n    background-color: transparent;\n    color: #e91e63;\n    border-radius: 8px;\n    text-decoration: none;\n    font-weight: bold;\n    display: inline-block;\n    transition: all 0.3s ease;\n  }\n  .btn-lihat:hover {\n    background-color: #e91e63;\n    color: #fff;\n  }\n\n  \/* Container dan styling gallery mahasiswa 2023 *\/\n  #konten-2023 {\n    display: none;\n    max-width: 1000px;\n    margin: 30px auto;\n    padding: 20px;\n    background: rgba(255, 255, 255, 0.95);\n    border-radius: 20px;\n    box-shadow: 0 0 12px rgba(233, 30, 99, 0.2);\n    animation: fadeIn 0.5s ease forwards;\n  }\n  #konten-2023 h3 {\n    text-align: center;\n    color: #e91e63;\n    margin-bottom: 20px;\n  }\n\n  \/* Input Cari *\/\n  #searchInput {\n    display: block;\n    padding: 10px 16px;\n    margin: 0 auto 20px auto;\n    border: 2px solid #e91e63;\n    border-radius: 10px;\n    outline: none;\n    font-size: 1rem;\n    max-width: 320px;\n    width: 100%;\n  }\n\n  \/* Grid mahasiswa *\/\n  .mahasiswa-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fill,minmax(180px,1fr));\n    gap: 24px;\n  }\n  .mahasiswa-card {\n    background: #fff;\n    border: 2px solid #e91e63;\n    border-radius: 12px;\n    padding: 12px 8px;\n    text-align: center;\n    box-shadow: 0 2px 10px rgba(233, 30, 99, 0.1);\n    transition: 0.3s;\n  }\n  .mahasiswa-card:hover {\n    box-shadow: 0 8px 16px rgba(233, 30, 99, 0.3);\n    transform: translateY(-5px);\n  }\n  .mahasiswa-card img {\n    width: 100%;\n    height: auto;\n    object-fit: contain;\n    border-radius: 10px;\n    margin-bottom: 10px;\n    box-shadow: 0 4px 9px rgba(233, 30, 99, 0.2);\n  }\n  .mahasiswa-card .nama {\n    font-weight: 700;\n    font-size: 1rem;\n    color: #e91e63;\n    margin-bottom: 4px;\n    word-break: break-word;\n  }\n  .mahasiswa-card .nim {\n    font-size: 0.95rem;\n    color: #444;\n    word-break: break-word;\n  }\n\n  @keyframes fadeIn {\n    from { opacity: 0; transform: translateY(10px);}\n    to { opacity: 1; transform: translateY(0);}\n  }\n<\/style>\n\n<!-- Judul Utama -->\n<div class=\"agenda-header-full\">\n  <h2>Galeri MI<\/h2>\n<\/div>\n\n<!-- Judul Kedua -->\n<h2 class=\"judul-kedua\">\ud83c\udf93 Galeri Angkatan Mahasiswa MI<\/h2>\n\n<!-- Grid Angkatan -->\n<div class=\"angkatan-grid\">\n  <div class=\"angkatan-card\" onclick=\"toggle2023()\">\n    <h3>Angkatan 2023 \ud83c\udfc3\u200d\u2640\ufe0f<\/h3>\n    <span>Klik untuk melihat data lengkap mahasiswa &#038; KTM<\/span><br>\n    <a class=\"btn-lihat\" href=\"javascript:void(0)\">\ud83d\udcc2 Lihat Data Mahasiswa<\/a>\n  <\/div>\n  <div class=\"angkatan-card\">\n    <h3>Angkatan 2024 \u270f\ufe0f<\/h3>\n    <span>Belum Ada Data<\/span>\n  <\/div>\n  <div class=\"angkatan-card\">\n    <h3>Angkatan 2025 \ud83c\udf93<\/h3>\n    <span>Belum Ada Data<\/span>\n  <\/div>\n<\/div>\n\n<!-- Konten Mahasiswa Angkatan 2023 -->\n<div id=\"konten-2023\" aria-live=\"polite\" aria-atomic=\"true\">\n  <h3>Data Lengkap Mahasiswa Angkatan 2023 dengan KTM<\/h3>\n  <input type=\"text\" id=\"searchInput\" oninput=\"filterMahasiswa()\" placeholder=\"\ud83d\udd0d Cari Nama atau NIM...\">\n  <div class=\"mahasiswa-grid\" id=\"mahasiswa-grid\"><\/div>\n<\/div>\n\n<script>\n  const data2023 = [\n    { nim: \"202301002309\", nama: \"Ardha Rakhmawati Putri\", url: \"https:\/\/mi.politeknikassalaam.ac.id\/wp-content\/uploads\/2025\/08\/202301002309-Ardha-Rakhmawati-Putri.jpg\" },\n    { nim: \"202301002312\", nama: \"Buana Anggir Bayu Pratama\", url: \"https:\/\/mi.politeknikassalaam.ac.id\/wp-content\/uploads\/2025\/08\/202301002312-Buana-Anggir-Bayu-Pratama.jpg\" },\n    { nim: \"202301002313\", nama: \"Defita Dwi Irmawati\", url: \"https:\/\/mi.politeknikassalaam.ac.id\/wp-content\/uploads\/2025\/08\/202301002313-Defita-Dwi-Irmawati.jpg\" },\n    { nim: \"202301002314\", nama: \"Evafurati Tina Ajiyastuti\", url: \"https:\/\/mi.politeknikassalaam.ac.id\/wp-content\/uploads\/2025\/08\/202301002314-Evafurati-Tina-Ajiyastuti.jpg\" },\n    { nim: \"202301002315\", nama: \"Jumi Darsih\", url: \"https:\/\/mi.politeknikassalaam.ac.id\/wp-content\/uploads\/2025\/08\/202301002315-Jumi-Darsih.jpg\" },\n    { nim: \"202301002317\", nama: \"Lestari\", url: \"https:\/\/mi.politeknikassalaam.ac.id\/wp-content\/uploads\/2025\/08\/202301002317-Lestari.jpg\" },\n    { nim: \"202301002318\", nama: \"Laurentius Krisma Briliano\", url: \"https:\/\/mi.politeknikassalaam.ac.id\/wp-content\/uploads\/2025\/08\/202301002318-Laurentius-Krisma-Briliano.jpg\" },\n    { nim: \"202301002320\", nama: \"Muhammad Rizki Romadhon\", url: \"https:\/\/mi.politeknikassalaam.ac.id\/wp-content\/uploads\/2025\/08\/202301002320-Muhammad-Rizki-Romadhon.jpg\" },\n    { nim: \"202301002322\", nama: \"Putri Amelia Salsabillah\", url: \"https:\/\/mi.politeknikassalaam.ac.id\/wp-content\/uploads\/2025\/08\/202301002322-Putri-Amelia-Salsabillah.jpg\" },\n    { nim: \"202301002328\", nama: \"Tutik Rahayu\", url: \"https:\/\/mi.politeknikassalaam.ac.id\/wp-content\/uploads\/2025\/08\/202301002328-Tutik-Rahayu.jpg\" },\n    { nim: \"202301002329\", nama: \"Veronica Noviametti Ariyani\", url: \"https:\/\/mi.politeknikassalaam.ac.id\/wp-content\/uploads\/2025\/08\/202301002329-Veronica-Noviametti-Ariyani.jpg\" },\n    { nim: \"202301002330\", nama: \"Yemima Suko Kristian Putri\", url: \"https:\/\/mi.politeknikassalaam.ac.id\/wp-content\/uploads\/2025\/08\/202301002330-Yemima-Suko-Kristian-Putri.jpg\" },\n    { nim: \"202301002333\", nama: \"Reno Hari Septian\", url: \"https:\/\/mi.politeknikassalaam.ac.id\/wp-content\/uploads\/2025\/08\/202301002333-Reno-Hari-Septian.jpg\" },\n    { nim: \"202301002335\", nama: \"Ikke Aprilia Susetyanti\", url: \"https:\/\/mi.politeknikassalaam.ac.id\/wp-content\/uploads\/2025\/08\/202301002335-Ikke-Aprilia-Susetyanti.jpg\" },\n    { nim: \"202301002339\", nama: \"Heru Widodo\", url: \"https:\/\/mi.politeknikassalaam.ac.id\/wp-content\/uploads\/2025\/08\/202301002339-Heru-Widodo.jpg\" },\n    { nim: \"202301002340\", nama: \"Kiki Aditya\", url: \"https:\/\/mi.politeknikassalaam.ac.id\/wp-content\/uploads\/2025\/08\/202301002340-Kiki-Aditya.jpg\" }\n  ];\n\n  function toggle2023() {\n    const konten = document.getElementById('konten-2023');\n    if (konten.style.display === 'block') {\n      konten.style.display = 'none';\n    } else {\n      if (!konten.dataset.rendered) {\n        renderMahasiswa(data2023);\n        konten.dataset.rendered = \"true\";\n      }\n      konten.style.display = 'block';\n      konten.scrollIntoView({ behavior: \"smooth\" });\n    }\n  }\n\n  function renderMahasiswa(data) {\n    const container = document.getElementById('mahasiswa-grid');\n    container.innerHTML = data.map(m => `\n      <div class=\"mahasiswa-card\">\n        <img decoding=\"async\" src=\"${m.url}\" alt=\"${m.nama} - KTM\">\n        <div class=\"nama\">${m.nama}<\/div>\n        <div class=\"nim\">${m.nim}<\/div>\n      <\/div>\n    `).join('');\n  }\n\n  function filterMahasiswa() {\n    const query = document.getElementById('searchInput').value.toLowerCase();\n    const filtered = data2023.filter(m =>\n      m.nama.toLowerCase().includes(query) || m.nim.includes(query)\n    );\n    renderMahasiswa(filtered);\n  }\n<\/script>\n\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Galeri MI \ud83c\udf93 Galeri Angkatan Mahasiswa MI Angkatan 2023 \ud83c\udfc3\u200d\u2640\ufe0f Klik untuk melihat data lengkap mahasiswa &#038; KTM \ud83d\udcc2 Lihat Data Mahasiswa Angkatan 2024 \u270f\ufe0f Belum Ada Data Angkatan 2025 \ud83c\udf93 Belum Ada Data Data Lengkap Mahasiswa Angkatan 2023 dengan KTM<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"neve_meta_sidebar":"","neve_meta_container":"","neve_meta_enable_content_width":"","neve_meta_content_width":0,"neve_meta_title_alignment":"","neve_meta_author_avatar":"","neve_post_elements_order":"","neve_meta_disable_header":"","neve_meta_disable_footer":"","neve_meta_disable_title":"on","_vp_format_video_url":"","_vp_image_focal_point":[],"footnotes":""},"class_list":["post-680","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/mi.politeknikassalaam.ac.id\/index.php\/wp-json\/wp\/v2\/pages\/680","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mi.politeknikassalaam.ac.id\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/mi.politeknikassalaam.ac.id\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/mi.politeknikassalaam.ac.id\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mi.politeknikassalaam.ac.id\/index.php\/wp-json\/wp\/v2\/comments?post=680"}],"version-history":[{"count":17,"href":"https:\/\/mi.politeknikassalaam.ac.id\/index.php\/wp-json\/wp\/v2\/pages\/680\/revisions"}],"predecessor-version":[{"id":697,"href":"https:\/\/mi.politeknikassalaam.ac.id\/index.php\/wp-json\/wp\/v2\/pages\/680\/revisions\/697"}],"wp:attachment":[{"href":"https:\/\/mi.politeknikassalaam.ac.id\/index.php\/wp-json\/wp\/v2\/media?parent=680"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}