@import url(‘https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap’);
/* === BAGIAN UNTUK BLOG === */
/* Anda bisa menyalin semua yang ada di dalam ini ke bagian CSS kustom blog Anda,
dan semua yang ada di dalam ke editor HTML postingan Anda. */
#smpn1-pancur-gallery-container {
font-family: ‘Inter’, sans-serif;
background-color: #0f172a; /* bg-slate-900 */
color: #cbd5e1; /* text-slate-300 */
overflow: hidden; /* Mengunci efek di dalam container */
position: relative; /* Diperlukan untuk efek aurora */
border-radius: 1rem; /* Sudut melengkung untuk container */
padding: 1rem; /* Memberi jarak di dalam container */
max-width: 1200px; /* Batas lebar maksimum */
margin: 2rem auto; /* Membuatnya di tengah dan memberi jarak atas/bawah */
}
#smpn1-pancur-gallery-container .aurora-bg {
position: absolute; /* Bukan fixed, agar tetap di dalam container */
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0; /* Di bawah konten */
background-image:
radial-gradient(ellipse 50% 50% at 20% 40%, rgba(67, 56, 202, 0.3), transparent),
radial-gradient(ellipse 50% 50% at 80% 60%, rgba(147, 51, 234, 0.2), transparent);
animation: aurora-flow 20s linear infinite;
}
@keyframes aurora-flow {
0% { background-position: 0% 50%, 0% 50%; }
50% { background-position: 100% 50%, 0% 50%; }
100% { background-position: 0% 50%, 0% 50%; }
}
#smpn1-pancur-gallery-container .content-wrapper {
position: relative; /* Agar konten berada di atas background aurora */
z-index: 1;
}
#smpn1-pancur-gallery-container .glass-card {
background: rgba(30, 41, 59, 0.5);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.1);
transition: all 0.3s ease;
}
#smpn1-pancur-gallery-container .glass-card:hover {
transform: translateY(-8px) scale(1.02);
background: rgba(30, 41, 59, 0.8);
box-shadow: 0 0 25px rgba(79, 70, 229, 0.3);
border-color: rgba(79, 70, 229, 0.5);
}
#smpn1-pancur-gallery-container .filter-btn {
background-color: rgba(30, 41, 59, 0.7);
border: 1px solid rgba(255, 255, 255, 0.1);
transition: all 0.2s ease;
}
#smpn1-pancur-gallery-container .filter-btn:hover {
background-color: #334155;
border-color: rgba(79, 70, 229, 0.5);
}
#smpn1-pancur-gallery-container .filter-btn.active {
background-color: #4f46e5;
color: white;
font-weight: 600;
border-color: #4f46e5;
}
#smpn1-pancur-gallery-container .profile-photo {
width: 80px;
height: 80px;
border-radius: 9999px;
object-fit: cover;
border: 3px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
#smpn1-pancur-gallery-container .fade-in-up {
animation: fadeInUp 0.5s ease-out forwards;
opacity: 0;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
Galeri Pendidik & Staf
SMPN 1 PANCUR
Tidak Ditemukan
Coba kata kunci atau filter yang berbeda.
// Pastikan skrip ini dijalankan setelah elemen HTML dimuat
(function() {
const container = document.getElementById(‘smpn1-pancur-gallery-container’);
if (!container) return;
const allData = [
{ type: ‘staf’, name: “Musmiyarsih”, subject: “Bendahara BOS”, photoUrl: “https://smpnegeri1pancur.sch.id/wp-content/uploads/2024/07/mus.jpg” },
{ type: ‘staf’, name: “Tri Puji Lestari”, subject: “Operator Dapodik”, photoUrl: “https://smpnegeri1pancur.sch.id/wp-content/uploads/2024/07/tri.jpg” },
{ type: ‘staf’, name: “Moch. Yasin”, subject: “Inventaris”, photoUrl: “https://smpnegeri1pancur.sch.id/wp-content/uploads/2024/07/DSC_1608.jpg” },
{ type: ‘staf’, name: “Danang Tirto Aji Pamungkas”, subject: “Persuratan”, photoUrl: “https://smpnegeri1pancur.sch.id/wp-content/uploads/2024/07/dana.jpg” },
{ type: ‘staf’, name: “Khoriah”, subject: “Perpustakaan”, photoUrl: “https://smpnegeri1pancur.sch.id/wp-content/uploads/2024/07/khoriah.jpg” },
{ type: ‘guru’, name: “Moch. Anwar”, subject: “Pend. Agama Islam”, photoUrl: “https://blogger.googleusercontent.com/img/a/AVvXsEj5gTPCT4VE4krvSS52ZUCP4Pmn_SvhGWOSVxik_PcCMIHyYQSBIeWCQ9gklmDnKCn_7to-p43rRtNrYhqPMi688PT6QrywRhBWhZgfqPaQinlzKZN7EQQ8i9eUGZXu5azAwT-tQMGEaifFkV-f75keNrscnNzJSe2bThr903Szma1dDs4kEUEwk-4zj1E=s225” },
{ type: ‘guru’, name: “Syarofah”, subject: “Pend. Agama Islam”, photoUrl: “https://blogger.googleusercontent.com/img/a/AVvXsEgiUFQ2tmMjfcxihapKaf3mpTwEsa1a3EIz7AMf_aHLEcrRU_8sr_s51QoxUeSeR1GkQ4eEmXwAjisZtsPJK2o52xVvGYAb_gdRzC04u_Ccw6Cp5i9KqSxif3oAXe6CxRlhDChChz9FJ5DdK29E0ohHXwUeUM-6DnAMweO4hDXpCnGPD1t8JOwo-qPgeiI=s225” },
{ type: ‘guru’, name: “Laela Nurul Fadlilla”, subject: “Pend. Agama Islam”, photoUrl: “https://blogger.googleusercontent.com/img/a/AVvXsEiGsnZ-5YPep-yzYAcgG2LCt5gvhV8E58o-JY_8fq8Nm1dGZ2TUqO5r4guEWDIMT56TgAZj9j6Kc72QrLj-e64846D1e7gqc6dQ7FTgOJdp-Vpz_Y3DXM24iIuZZrsyP11-k7M3J-Za3i3Jl8DL6AaMJf4lA5hEjEMn2yvmoNg8XIweNLYBawXiWyHLsNE=s1280” },
{ type: ‘guru’, name: “Sri Subekti”, subject: “Pend. Pancasila”, photoUrl: “https://blogger.googleusercontent.com/img/a/AVvXsEjuGn_BAa0nXSyEpIKxFYwFWTnfTYBQQFsAyTqunjyBNELbQS8pc_U3X3FbEK4druzeiC7ap_S51SDkDRAtU0qWOvljncFUMNqlBAIccxFPbyp8lutZd4GU9WrzbnL7IuYcs18leauoY8RPM16OwBPMvZd4Y2X3iih2mbiCkd0zBeMEaxdSHVQDvz3KoBU=s225” },
{ type: ‘guru’, name: “Sri Sunarsih”, subject: “Pend. Pancasila”, photoUrl: “https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhF23Ha-DjB_sQ4Tg3C38zdaszTUn1qlbNLRLq-bziTIoLMXhIHkFZn4iAMKvZC8jBUgpP3hi3_xPicOY20gmgmaCMW5Ichoe-jB3XEXAcZkZDib23Ca920zUuviftFwhoCN_E_XJ-q4HHsxqcQ__5IuPtr8gWDaXPA4EQqdINIib57FHCt5NaLXdKJ0kH6/s1440/WhatsApp%20Image%202024-07-09%20at%2008.23.42.jpeg” },
{ type: ‘guru’, name: “Sumarni”, subject: “Pend. Pancasila”, photoUrl: “https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWAyHTMjfwvorJJVPz45BmbyYXNTO8BFXHUX3NxVnpuZ_73vF-teElS7SKBFZn7ei6P4yo_2ACxMj9_Bsr27APuBe5aB8r5Fthyphenhyphen0b-ut2Z8q0jlD2tSrawULbTHYH_ND5tlcnNk1LzbPY9EQWfcSfbIfEvenwNxRAQLwQm9rThm5IW1UUqU0PblDrF5Y3y/s1440/WhatsApp%20Image%202024-07-09%20at%2008.23.41%20(2).jpeg” },
{ type: ‘guru’, name: “Muhammad Zacky Mubarok”, subject: “Bahasa Indonesia”, photoUrl: “https://blogger.googleusercontent.com/img/a/AVvXsEhr8z8TI1UfotboEYLHP5-ATD-p9JETlsh9Vt05CNAtRxsyck04DZg6X4ip1X2PIZBgkhGO88arpDtWKcVm1ReYfpyoRkKTTnsjqgIY5W91W145VUsPJEv-SpmcQ9GZDpvbp2wIAdh9aExaJJrkORpuMxEybqrQySG6a-QVbFDAYXvUNg8NyJjZR9BgLdM=s200” },
{ type: ‘guru’, name: “Diah Rizki Afitasari”, subject: “Bahasa Indonesia”, photoUrl: “https://blogger.googleusercontent.com/img/a/AVvXsEjSM7x_AvBDTp8MV6xYFUzXmWZGvYEc_fk848XIm8ZTjXdyjFOUbkGZDSoPN8XfXUwCykWh1XKIcFPdSf2Fj26FPwoFVQLytOFkyPVM7ViZIgNAXvZ1sASLtMF-rIqfyxa4GRAoxPwYH4VzR-kgWpWdkRdUaUXJ2o8z8Lj78UBMyGkMkQdRXz9NHY38Jps=s257” },
{ type: ‘guru’, name: “Azza Nurfadlilla”, subject: “Bahasa Indonesia”, photoUrl: “https://blogger.googleusercontent.com/img/a/AVvXsEg9u_jxd_sESA6mTUOs1NNxpraLzaXMjr-4AuWBcMY9z5uGIsQGlYMyb2O6kRtb5H8hxTZu73tobqwcDejpVnLYBFWoIqz8CiAka_KnAIkeb3i5AWbTaNXY49EvvcHOnrrWFe2_dVw-xIU-zDLMTMOI7s88_cnwtGRm67FSppoMJdF7UUKohxspIswYkcU=s151” },
{ type: ‘guru’, name: “Sulistiyani”, subject: “Bahasa Indonesia”, photoUrl: “https://smpnegeri1pancur.sch.id/wp-content/uploads/2026/02/0e4a477a-0ff5-47f4-9d1b-dc08b5ab0195_960x1280.webp.webp” },
{ type: ‘guru’, name: “Santha Dwi Jayana”, subject: “Matematika”, photoUrl: “https://smpnegeri1pancur.sch.id/wp-content/uploads/2026/02/SmartSelect_20240722_203733_WhatsApp.png” },
{ type: ‘guru’, name: “Wahyu Saptorini”, subject: “Matematika”, photoUrl: “https://blogger.googleusercontent.com/img/a/AVvXsEg6ia6LP8vJeX2Ix05BghCo3laUlBbKdzC6dDNwy3MTL4WroKqoPX3sgUpQKceegVuqVyzaJRPIgiK9vyGXnrVdlnINRIdN4PS5hZvWSB4ZdAGSZcrvii0YWp-zAFJqce0ArFPSzR1_nvfKct0ShlUc4ykz-5w_Gt68ZR8vDP97K00y7NMthzEdKzeJwfQ=s225” },
{ type: ‘guru’, name: “Dian Puspitasari”, subject: “Matematika”, photoUrl: “https://blogger.googleusercontent.com/img/a/AVvXsEjUiLRZgAhqFX3N8jqjQAZgPoZLrBDTODHpZJE3HqPzIGLNSg32Gc5m5ia7RX85psXamtLd9DkrtGRsILQBTS9q_tWd5vNrTMK9YO7-rhFf-AX_hdhVuXGNhFIc0A4NzZH_MW4En44U5CyzLQ3mw94eYOCiiNOqEDazAINBTzVN5Cxr2MYY5nnTg9reTNk=s225” },
{ type: ‘guru’, name: “Sukarmiyati”, subject: “Matematika”, photoUrl: “https://blogger.googleusercontent.com/img/a/AVvXsEgB3VhZG8tzadqhxggKTL685Flr-p6lt8WgETzpWYpIXLSlpJIwyFFiYNeWsOIhnOHV1QmprjZ1kagMYWdJ-tXbbblaR1nq1T45A0jn-h-Hl2DJ7JAlFjRV2oTjLZttLBPdr_uxGifeH1RfzLN8OksHtviu86ZA7VMwNb3J1YZHOwD3DFrlPogIkEW_ZYI=s225” },
{ type: ‘guru’, name: “Sulatmi”, subject: “Ilmu Pengetahuan Alam”, photoUrl: “https://blogger.googleusercontent.com/img/a/AVvXsEhVO5qZtTaIxosts_q5l5OnjPeOSnOVO_4exkJAL6mu5EQxY9g5xDW5LIGii4HW9tbsVinvN-Ue6fiykOV_4XE3voLEkHq_BEtkCrgrvTge0GKYQMrJ8dy8893gFTudFq4uNjXUag7AYbaTzxOMIge82BzOvPk3cXaIXvhWE97uqS6b_0dAd7x_5Oat7jE=s200” },
{ type: ‘guru’, name: “Sudarni”, subject: “Ilmu Pengetahuan Alam”, photoUrl: “https://smpnegeri1pancur.sch.id/wp-content/uploads/2024/07/DSC_1595.jpg” },
{ type: ‘guru’, name: “Putri Winuryanti”, subject: “Ilmu Pengetahuan Alam”, photoUrl: “https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4wESAJjwRU-OAhtxYsAiCnWRQzgyQ8xr_Tlrs4lcV-7ICdHGz-1PnT7ESOCDtW6Ys0whyphenhypheno7qCgq6so4qpWis9XxKbfbZvr8RGO_3IiC-va1Za5_mLpCOjuRki-nGzNqrg6ZlwetfvLeUJQXCsl3p12CjfPDM4UWH-_pxvHbGKtHhnuxhUaFl4kx37kgNm/s1440/WhatsApp%20Image%202024-07-09%20at%2008.23.39.jpeg” },
{ type: ‘guru’, name: “Santi Ratnasari”, subject: “Ilmu Pengetahuan Alam”, photoUrl: “https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwZ-DeItUNTSc6JosZxhKHvcnTT69uHZJrdQCQg-Zu8Wn1Q74I00hvzICK3-DpRMTnxyrRzVOdo_kyQMsC_9YO5DiHWFxOrbvM4RZmVkwQ_adEYGMwuYQ7Ks7EfGdY351fgy4u6jVnONLyFc0vEKcDPI4f_yZzuUh1hZaEBPI3rYp3TNskfkt9XQukhZYi/s1440/WhatsApp%20Image%202024-07-09%20at%2008.23.40.jpeg” },
{ type: ‘guru’, name: “Heni Triwahyuni”, subject: “Ilmu Pengetahuan Sosial”, photoUrl: “https://blogger.googleusercontent.com/img/a/AVvXsEhcvxTN_TRhr3gMCMy4PFpqkL1XyRcs9cZgzHUBJ2kDEAc_5UhoiW20MAbszuJlz1AFJ3R7g6qsgZyIaBXiszYRohrYcSttgaZod1V7Jk01y5mWIrgeGVGaJ2G-QWT2O5_BpFjVgzD5VHXTxogIq-d9-cCh-bqgF0UCI3cfoIU8TY4ybU-Mlrji7aO3a9E=s200” },
{ type: ‘guru’, name: “Suyanto”, subject: “Ilmu Pengetahuan Sosial”, photoUrl: “https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvkuWM1W3vJqvIqzJrkUkKR3HWDxpsxAJKt4qyldytE69hWz-6CmxDK-Oiu1478jQ1m0ID6A8DbMacnQOY_0G1P8TJvITbM96A6nf9nSJ1AJk7KSHCAnbObOT3tGzx2pFTXWwOn1WSLAeSG3LKU6lDr2mBVvPPy__bmuvaIw9k8VUbOvDkRlju8ABS6hRC/s1440/WhatsApp%20Image%202024-07-09%20at%2008.23.40%20(1).jpeg” },
{ type: ‘guru’, name: “Sukarmi”, subject: “Ilmu Pengetahuan Sosial”, photoUrl: “https://blogger.googleusercontent.com/img/a/AVvXsEhiHc1Y56Vreq5rYRxpksiPnPjngCuHUp6N9SJz0LY62S5AkOxFEyMZBD94dkiERepuEE_mkekIZQBqsfvctzv11j_t_NbaF5CR7R6W4NK-XgzQNyozx0zPBOinBiKiZYKHvFO5ms_dAZ4-ph3BVezLETQ3eXQ6UmevEs1M6qim5j4iv1NjiLpE2f3uPAU=s225” },
{ type: ‘guru’, name: “Sopiyah”, subject: “Bahasa Inggris”, photoUrl: “https://blogger.googleusercontent.com/img/a/AVvXsEhj9gLtgOjAzo5RrXGZuMFANf-SDp8A6HEM-5dshbOQyBK59lKV0AxbrV3_XJ6ETsDT33LP5jlpJfuArQ2oTzPkjKVPolKt59KRa7xMG5v2Xi3gOuwI5RENGbOaYvFLG61LckkaymMVoeSWyhAtGBQYEywRo4tAj-qwALBTdsS1e3U5xZVtFXGzKZLfo14=s225” },
{ type: ‘guru’, name: “Tulus Hidayati”, subject: “Bahasa Inggris”, photoUrl: “https://blogger.googleusercontent.com/img/a/AVvXsEgQhPo8gNfFLn4xA9LYOy_v_dFphf3qDC_l1qjuMiWlYe_yvKoU4VT31r-NBhT5QMfFCU7B-lTIYpoPgjLM7BNPwY0eIZZ5wxqp0F5VgM5DcXUF4zqMqVgy4BKEVV4VAFFUMTUm1KcjYgsDCGdXKtzQSreRZW75Ngy8Lru1yWNBkUyqA5u95wMPXq-Tm3s=s225” },
{ type: ‘guru’, name: “Agus Wijayanto”, subject: “PJOK”, photoUrl: “https://blogger.googleusercontent.com/img/a/AVvXsEjbRIMHs5rJ94XJbpFLq8ibW1GM96kACNcpGOJ0U5iH7I7eqF1R2pFWPl2SEy6kE2hQOrq8-E-xlS4whoj5Fi1Wj1o5Vrs_DR24w3aEj_399w_hbSGX0bUPje4yiBwAM2HP9OtA1k8CNdNj2F3ZIlLEICdhYGE44dVicIgcFhYuDNZH8zjMy0IBYRk2tg8=s212” },
{ type: ‘guru’, name: “Bayu Krisdianto”, subject: “PJOK”, photoUrl: “https://blogger.googleusercontent.com/img/a/AVvXsEhyzQFovL_V_YF61iA-_ndqSkWfQb48y4uyb041K_mrjo8CooV90uWpMsMmsHmgwa2SAfB9FLV1ypw1b0BDLIeuBoq-uNZyci81CItslnGXN4hKvHU2f1fGZTw6x8SMtguwVcadtE3dgvzox06GvaGgMOQxJj8zHXEyThcri6c_1hJL1t36uWzTuD9mJl0=s220” },
{ type: ‘guru’, name: “Subardi”, subject: “Informatika”, photoUrl: “https://blogger.googleusercontent.com/img/a/AVvXsEjxHzyF5ap8G5Bb5Hw_zyx_hup-0kB_rohyBu3liS7YSUOAAKqVxKHgwwa-GFJMHlNTneo0bVv0zftjt3XL7OGM2ZQqT0sgGBQNz1UEGq3tuE5gPtUx-9xsXxmzzfrdj_uokWejLnph0-2nBnzK0rwE2vYxEtodUrsUu4-OY-DckUEpvj8YJMjNukk6kg8=s200” },
{ type: ‘guru’, name: “Sugiyanti”, subject: “Informatika”, photoUrl: “https://smpnegeri1pancur.sch.id/wp-content/uploads/2024/07/DSC_1555.jpg” },
{ type: ‘guru’, name: “Sri Waeny”, subject: “Informatika”, photoUrl: “https://blogger.googleusercontent.com/img/a/AVvXsEh8CVkM1h2KgP20Kiyeu73vPNfW9ZYVlDOHs8B2sDonTXwLIFEGSCNSEqj-ph3FSqDbCgmMOraLo45S7uiZmnoNAlcTCLcNWp-rr3aDL-tJ7YpSYDfrHZF4va9qMcnyVVb71-TXBpueMf8KqmRJa3SJBVVdiOKi9S22bIVdUwYjoWZqHFNs7vumkUHXaWM=s150” },
{ type: ‘guru’, name: “Suyatmi”, subject: “Seni Budaya”, photoUrl: “https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4kguGTb_mEkJb02cCFLpfSx5IuL7zqRyTCiaEKsI6Oq7xYDp_Jl3OPaTKI-YwyRGRKk64GqdTxVm-pq1eeJ33ct-iUax4pKarBxGvJA1v1snCkKk67EC2F7OACQpoEx69SxIyijHzaxNIIBUkOjFcAT1iI4ooCyJ8Agr7mLZIZ5tC8aFDjWsXOUnHNJT6/s1440/WhatsApp%20Image%202024-07-09%20at%2008.23.41.jpeg” },
{ type: ‘guru’, name: “Juli Aswan Nugroho”, subject: “Seni Budaya”, photoUrl: “https://smpnegeri1pancur.sch.id/wp-content/uploads/2024/07/SmartSelect_20240709_171711_Gallery.jpg” },
{ type: ‘guru’, name: “Kadar Lilik W.”, subject: “Bahasa Jawa”, photoUrl: “https://blogger.googleusercontent.com/img/a/AVvXsEjiQ5ZhynX5us3I23cY4hNrH4QzqPMO6zbQtucdxQD0rNX1ExuzuZaRk0I82rYAqbZjWfY8lLwWsmRRcPZkke2MN6ECcI9W1kFhHP6_KloN75HtkNYbY3jrHo2pxl_IEm_QRFGQhjlPDTKqlx3PKCyvUbUH4Yu4sgz7ViG-DqTreDv_kDuNmRh6gxxZYb0=s225” },
{ type: ‘guru’, name: “Sulistyowati”, subject: “Bimbingan Konseling”, photoUrl: “https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhmBF2AOZxS8g8ojSKcVbdGj4bI1udWYR6tG3LDjjFvlNs2dJoNQZqSbvR2mqLoZ84B7tDUwPMkY06KtLDn_dVipVWJXhU_Qf2O_KqkuR-yWIGmjH-VZ6NifqQp2tA7OxEOODByGMFYpaOcKfaqQjboaQbRP_w6tMz6mpcdO0hICP3mY_pZtV1_7ATz14F/s1440/WhatsApp%20Image%202024-07-09%20at%2008.23.41%20(1).jpeg” },
{ type: ‘guru’, name: “Ismiyati”, subject: “Bimbingan Konseling”, photoUrl: “https://blogger.googleusercontent.com/img/a/AVvXsEgPco-XIP-_p3BPNA_eYPlf_mhH6BRwOC661sdCiA_5lZk40AP8tCcYxTQ2RW7ePPjx7e1gkm4DGIeVtuxQaO_U8Du5DyCDFo7_WohdH56ERyK5tVfEwmZjTmKMd2qt8Wf2FB6fGPJ_V1DtG1IlxGsa57lw7WQFoXxPB7e5-Qm61CEWh2bo49PQP34_i7g=s200” },
];
const grid = container.querySelector(‘#staffAndTeacherGrid’);
const searchInput = container.querySelector(‘#searchInput’);
const noResults = container.querySelector(‘#noResults’);
const filterContainer = container.querySelector(‘#filterContainer’);
function createCard(person, index) {
const label = person.type === ‘staf’ ? person.subject : person.subject;
return `
${person.name}
${label}
`;
}
const subjects = […new Set(allData.filter(p => p.type === ‘guru’).map(p => p.subject))];
subjects.sort();
let filterHtml = ``;
subjects.forEach(subject => {
filterHtml += ``;
});
filterContainer.insertAdjacentHTML(‘beforeend’, filterHtml);
grid.innerHTML = allData.map(createCard).join(”);
const allCards = Array.from(grid.children);
let currentFilter = ‘*’;
function applyFilters() {
const searchTerm = searchInput.value.toLowerCase().trim();
let visibleCount = 0;
allCards.forEach(card => {
const name = card.dataset.name.toLowerCase();
const subject = card.dataset.subject;
const type = card.dataset.type;
const filterMatch = currentFilter === ‘*’ || (currentFilter === ‘staf’ && type === ‘staf’) || (subject === currentFilter);
const searchMatch = name.includes(searchTerm);
if (filterMatch && searchMatch) {
card.style.display = ‘flex’;
visibleCount++;
} else {
card.style.display = ‘none’;
}
});
noResults.style.display = visibleCount === 0 ? ‘block’ : ‘none’;
}
filterContainer.addEventListener(‘click’, (e) => {
const target = e.target.closest(‘button’);
if (target) {
filterContainer.querySelector(‘.active’).classList.remove(‘active’);
target.classList.add(‘active’);
currentFilter = target.dataset.filter;
applyFilters();
}
});
searchInput.addEventListener(‘input’, applyFilters);
})();