{"id":3571,"date":"2026-08-07T16:07:16","date_gmt":"2026-08-07T08:07:16","guid":{"rendered":"https:\/\/www.ukm.my\/minggudigital\/?page_id=3571"},"modified":"2026-10-03T23:04:05","modified_gmt":"2026-10-03T15:04:05","slug":"program-new","status":"publish","type":"page","link":"https:\/\/www.ukm.my\/minggudigital\/program-new\/","title":{"rendered":"PROGRAM"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t
\n\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Program & Aktiviti<\/h1>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t
<\/div>\n\t\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\tSedia untuk teroka dunia digital?<\/strong>\n\n
\ud83d\ude80 Buat julung kalinya, Pusat Teknologi Digital\u00a0 menganjurkan Minggu Digital UKM 2026! Inilah masanya untuk mendapatkan berbagai ilmu dan mendengar perkongsian eksklusif daripada pakar-pakar hebat sama ada di Podcast atau pun di Zoom. Pameran fizikal teknologi dan inovasi perkhidmatan digital juga ada.\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Cara sertai senang je:<\/strong><\/p>

  • \ud83d\udccc Klik kad jadual untuk tengok senarai penuh program.<\/li>
  • \ud83c\udfa7 Klik pautan terus ke Podcast atau Zoom untuk menyertai sesi!<\/li><\/ul>

    Jangan lepaskan peluang\u2014Jom sertai DigitalUKM sekarang!<\/strong><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

    \n\t\t\t\t\t\t\t
    <\/div>\n\t\t\t\t\t\t\t
    \n\t\t\t\t\t
    \n\t\t\t
    \n\t\t\t\t\t\t
    \n\t\t\t\t\t\n\n\n \n \n Jadual Interaktif Minggu Digital 2026 UKM<\/title>\n <!-- Tailwind CSS for UI controls -->\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <!-- Google Fonts -->\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\">\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap\" rel=\"stylesheet\">\n <!-- FontAwesome Vector Icons -->\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.1\/css\/all.min.css\">\n \n <style>\n body {\n font-family: 'Plus Jakarta Sans', sans-serif;\n background-color: #ffffff;\n color: #0f172a;\n overflow-x: hidden;\n }\n\n .cyber-font {\n font-family: 'Space Grotesk', sans-serif;\n }\n\n \/* Glassmorphic control panel *\/\n .glass-panel {\n background: rgba(255, 255, 255, 0.88);\n backdrop-filter: blur(14px);\n border: 1px solid rgba(226, 232, 240, 0.85);\n box-shadow: 0 4px 20px -2px rgba(124, 58, 237, 0.05);\n }\n\n \/* Card interactive lift & glow *\/\n .schedule-card {\n background: rgba(255, 255, 255, 0.94);\n backdrop-filter: blur(10px);\n transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);\n }\n .schedule-card:hover {\n transform: translateY(-3px);\n box-shadow: 0 12px 28px -4px rgba(99, 102, 241, 0.12), 0 4px 10px -2px rgba(0, 0, 0, 0.04);\n border-color: rgba(99, 102, 241, 0.35);\n }\n\n \/* Tab active pill state *\/\n .day-tab-active {\n background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 100%);\n color: #ffffff !important;\n box-shadow: 0 4px 14px rgba(15, 23, 42, 0.2);\n }\n\n \/* Filter button active *\/\n .filter-btn-active {\n background: #ffffff !important;\n color: #4f46e5 !important;\n box-shadow: 0 2px 8px rgba(99, 102, 241, 0.15);\n font-weight: 700;\n }\n\n \/* Subtle scrollbars *\/\n ::-webkit-scrollbar {\n width: 7px;\n height: 7px;\n }\n ::-webkit-scrollbar-track {\n background: #f8fafc;\n }\n ::-webkit-scrollbar-thumb {\n background: #cbd5e1;\n border-radius: 4px;\n }\n ::-webkit-scrollbar-thumb:hover {\n background: #94a3b8;\n }\n <\/style>\n<\/head>\n<body class=\"bg-white text-slate-900 min-h-screen relative flex flex-col selection:bg-indigo-500 selection:text-white\">\n\n <!-- Fixed Cyber Canvas Background (Smooth 60fps Neon Aura) -->\n <!--<canvas id=\"cyberBackgroundCanvas\" class=\"fixed inset-0 w-full h-full pointer-events-none z-0\"><\/canvas>-->\n\n <!-- Top Sticky Glass Header -->\n <header class=\"sticky top-0 z-40 glass-panel border-b px-4 lg:px-8 py-3.5\">\n <div class=\"max-w-7xl mx-auto flex flex-wrap items-center justify-between gap-3\">\n <div class=\"flex items-center gap-3\">\n <div class=\"w-10 h-10 rounded-xl bg-gradient-to-tr from-cyan-500 via-indigo-600 to-fuchsia-600 flex items-center justify-center text-white shadow-lg shadow-indigo-500\/25 shrink-0\">\n <i class=\"fa-solid fa-microchip text-lg\"><\/i>\n <\/div>\n <div>\n <h1 class=\"text-sm sm:text-base lg:text-lg font-extrabold tracking-tight bg-gradient-to-r from-slate-900 via-indigo-950 to-purple-800 bg-clip-text text-transparent\">\n SLOT AKTIVITI\/PROGRAM MINGGU DIGITAL 2026\n <\/h1>\n <\/div>\n <\/div>\n\n <!-- Quick Filter Tabs -->\n <div class=\"flex items-center flex-wrap gap-1.5 bg-slate-100\/90 p-1.5 rounded-2xl border border-slate-200 text-xs font-semibold\">\n <button id=\"filter-all\" class=\"filter-tab-btn filter-btn-active px-3 py-1.5 rounded-xl text-slate-600 transition-all\" onclick=\"setFilter('all')\">\n <i class=\"fa-solid fa-border-all mr-1\"><\/i> Semua\n <\/button>\n <button id=\"filter-pagi\" class=\"filter-tab-btn px-3 py-1.5 rounded-xl text-slate-600 hover:text-slate-900 transition-all\" onclick=\"setFilter('pagi')\">\n <i class=\"fa-solid fa-sun text-amber-500 mr-1\"><\/i> Sesi Pagi\n <\/button>\n <button id=\"filter-petang\" class=\"filter-tab-btn px-3 py-1.5 rounded-xl text-slate-600 hover:text-slate-900 transition-all\" onclick=\"setFilter('petang')\">\n <i class=\"fa-solid fa-cloud-sun text-sky-500 mr-1\"><\/i> Sesi Petang\n <\/button>\n <button id=\"filter-podcast\" class=\"filter-tab-btn px-3 py-1.5 rounded-xl text-slate-600 hover:text-slate-900 transition-all\" onclick=\"setFilter('podcast')\">\n <i class=\"fa-solid fa-podcast text-purple-600 mr-1\"><\/i> Podcast\n <\/button>\n <button id=\"filter-online\" class=\"filter-tab-btn px-3 py-1.5 rounded-xl text-slate-600 hover:text-slate-900 transition-all\" onclick=\"setFilter('online')\">\n <i class=\"fa-solid fa-video text-blue-600 mr-1\"><\/i> Zoom \/ Online\n <\/button>\n <\/div>\n <\/div>\n <\/header>\n\n <main class=\"relative z-10 flex-1 w-full max-w-7xl mx-auto p-4 sm:p-6 lg:p-8 flex flex-col gap-6\">\n\n <!-- Program Sepanjang Minggu (Top Highlights) -->\n <section class=\"grid grid-cols-1 md:grid-cols-3 gap-3.5\">\n <!-- Program 1 -->\n <div class=\"glass-panel p-4 rounded-2xl border border-cyan-200\/80 shadow-sm flex items-start gap-3.5 hover:shadow-md transition-shadow\">\n <div class=\"w-11 h-11 rounded-xl bg-cyan-500\/10 border border-cyan-400\/20 text-cyan-600 flex items-center justify-center text-lg shrink-0\">\n <i class=\"fa-solid fa-vr-cardboard\"><\/i>\n <\/div>\n <div class=\"min-w-0 flex-1\">\n <div class=\"flex items-center gap-2 mb-0.5\">\n <span class=\"text-[9px] font-bold px-2 py-0.5 rounded-full bg-cyan-100 text-cyan-700 uppercase tracking-wide\">Program Minggu<\/span>\n <\/div>\n <h3 class=\"text-xs sm:text-sm font-bold text-slate-900 truncate\">Hari Bersama Pelanggan (Hibrid)<\/h3>\n <p class=\"text-[11px] text-slate-600 font-medium\">Metaverse (2 jam timeslot pagi & petang)<\/p>\n <p class=\"text-[10.5px] text-cyan-700 font-semibold mt-1\"><i class=\"fa-regular fa-clock mr-1\"><\/i>9.00 - 11.00 pagi, 2.30 - 4.30 petang<\/p>\n <\/div>\n <\/div>\n\n <!-- Program 2 -->\n <div class=\"glass-panel p-4 rounded-2xl border border-purple-200\/80 shadow-sm flex items-start gap-3.5 hover:shadow-md transition-shadow\">\n <div class=\"w-11 h-11 rounded-xl bg-purple-500\/10 border border-purple-400\/20 text-purple-600 flex items-center justify-center text-lg shrink-0\">\n <i class=\"fa-solid fa-podcast\"><\/i>\n <\/div>\n <div class=\"min-w-0 flex-1\">\n <div class=\"flex items-center gap-2 mb-0.5\">\n <span class=\"text-[9px] font-bold px-2 py-0.5 rounded-full bg-purple-100 text-purple-700 uppercase tracking-wide\">Siri Podcast<\/span>\n <\/div>\n <h3 class=\"text-xs sm:text-sm font-bold text-slate-900 truncate\">Wadah Digital<\/h3>\n <p class=\"text-[11px] text-slate-600 font-medium\">Podcast Digital Sepanjang Minggu<\/p>\n <a href=\"https:\/\/www.youtube.com\/@wadahdigitalukm\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"inline-flex items-center gap-1.5 text-[10.5px] text-red-600 hover:text-red-700 font-semibold mt-1 transition-colors\">\n <i class=\"fa-brands fa-youtube text-sm\"><\/i> @wadahdigitalukm <i class=\"fa-solid fa-arrow-up-right-from-square text-[9px]\"><\/i>\n <\/a>\n <\/div>\n <\/div>\n\n <!-- Program 3 -->\n <div class=\"glass-panel p-4 rounded-2xl border border-pink-200\/80 shadow-sm flex items-start gap-3.5 hover:shadow-md transition-shadow\">\n <div class=\"w-11 h-11 rounded-xl bg-pink-500\/10 border border-pink-400\/20 text-pink-600 flex items-center justify-center text-lg shrink-0\">\n <i class=\"fa-solid fa-shield-halved\"><\/i>\n <\/div>\n <div class=\"min-w-0 flex-1\">\n <div class=\"flex items-center gap-2 mb-0.5\">\n <span class=\"text-[9px] font-bold px-2 py-0.5 rounded-full bg-pink-100 text-pink-700 uppercase tracking-wide\">Penyertaan Terbuka<\/span>\n <\/div>\n <h3 class=\"text-xs sm:text-sm font-bold text-slate-900 truncate\">Pertandingan Video Pendek \/ Reel<\/h3>\n <p class=\"text-[11px] text-slate-600 font-medium\">Keselamatan Siber<\/p>\n <p class=\"text-[10.5px] text-pink-700 font-semibold mt-1\"><i class=\"fa-solid fa-trophy mr-1\"><\/i>Penyertaan Terbuka Warga UKM<\/p>\n <\/div>\n <\/div>\n <\/section>\n\n <!-- Day Navigation Selector (Tab Pill Switcher) -->\n <section class=\"glass-panel p-2 sm:p-2.5 rounded-2xl border border-slate-200\/90 shadow-sm flex flex-col sm:flex-row items-center justify-between gap-3\">\n <div class=\"flex items-center gap-2 w-full sm:w-auto overflow-x-auto pb-1 sm:pb-0 scrollbar-none\" id=\"dayTabsContainer\">\n <button class=\"day-tab day-tab-active px-3.5 sm:px-4 py-2 rounded-xl text-xs sm:text-sm font-bold transition-all whitespace-nowrap\" onclick=\"switchDayView('all', this)\">\n <i class=\"fa-solid fa-calendar-days mr-1.5\"><\/i> Semua Hari\n <\/button>\n <button class=\"day-tab px-3.5 sm:px-4 py-2 rounded-xl text-xs sm:text-sm font-bold text-slate-600 hover:text-slate-900 transition-all whitespace-nowrap\" onclick=\"switchDayView(0, this)\">\n Isnin <span class=\"text-[11px] opacity-75 font-normal ml-0.5\">12 Okt<\/span>\n <\/button>\n <button class=\"day-tab px-3.5 sm:px-4 py-2 rounded-xl text-xs sm:text-sm font-bold text-slate-600 hover:text-slate-900 transition-all whitespace-nowrap\" onclick=\"switchDayView(1, this)\">\n Selasa <span class=\"text-[11px] opacity-75 font-normal ml-0.5\">13 Okt<\/span>\n <\/button>\n <button class=\"day-tab px-3.5 sm:px-4 py-2 rounded-xl text-xs sm:text-sm font-bold text-slate-600 hover:text-slate-900 transition-all whitespace-nowrap\" onclick=\"switchDayView(2, this)\">\n Rabu <span class=\"text-[11px] opacity-75 font-normal ml-0.5\">14 Okt<\/span>\n <\/button>\n <button class=\"day-tab px-3.5 sm:px-4 py-2 rounded-xl text-xs sm:text-sm font-bold text-slate-600 hover:text-slate-900 transition-all whitespace-nowrap\" onclick=\"switchDayView(3, this)\">\n Khamis <span class=\"text-[11px] opacity-75 font-normal ml-0.5\">15 Okt<\/span>\n <\/button>\n <button class=\"day-tab px-3.5 sm:px-4 py-2 rounded-xl text-xs sm:text-sm font-bold text-slate-600 hover:text-slate-900 transition-all whitespace-nowrap\" onclick=\"switchDayView(4, this)\">\n Jumaat <span class=\"text-[11px] opacity-75 font-normal ml-0.5\">16 Okt<\/span>\n <\/button>\n <\/div>\n\n <!-- View Switcher Info -->\n <div class=\"text-[11.5px] text-slate-500 font-medium flex items-center gap-1.5 shrink-0 px-2\">\n <i class=\"fa-solid fa-layer-group text-indigo-500\"><\/i>\n <span id=\"activeDayLabel\">Memaparkan 5 Hari Penuh<\/span>\n <\/div>\n <\/section>\n\n <!-- Schedule Days Cards Container -->\n <div id=\"scheduleDaysContainer\" class=\"flex flex-col gap-8\">\n <!-- Injected dynamically through renderScheduleCards() -->\n <\/div>\n\n <!-- Floating Notice Bar (At the bottom of all cards) -->\n <div class=\"sticky bottom-4 z-20 max-w-5xl mx-auto w-full px-2 pointer-events-none mt-4\">\n <div class=\"pointer-events-auto glass-panel px-5 py-3 rounded-2xl shadow-xl shadow-indigo-900\/10 border border-slate-200\/90 flex flex-wrap items-center justify-between gap-3 bg-white\/95 backdrop-blur-md\">\n <div class=\"flex items-center gap-2.5 text-amber-600 font-semibold text-xs sm:text-[13px]\">\n <i class=\"fa-solid fa-triangle-exclamation text-amber-500 animate-pulse text-base\"><\/i>\n <span class=\"text-slate-700 font-medium\">Jadual ini tertakluk kepada perubahan oleh Pihak Penganjur Pusat Teknologi Digital<\/span>\n <\/div>\n <div class=\"flex items-center gap-2 text-slate-500 font-medium text-xs sm:text-[12.5px]\">\n <i class=\"fa-solid fa-calendar-check text-indigo-600\"><\/i>\n <span class=\"font-mono font-semibold text-slate-800 bg-slate-100 px-3 py-1.5 rounded-lg border border-slate-200\/80\">Kemaskini: 3 Oktober 2026<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/main>\n\n <!-- Modal Dialog for Activity Details & Synopsis -->\n <div id=\"detailModal\" class=\"fixed inset-0 z-50 bg-slate-900\/60 backdrop-blur-md flex items-center justify-center p-4 opacity-0 pointer-events-none transition-all duration-300\">\n <div class=\"bg-white border border-slate-200 w-full max-w-xl max-h-[90vh] overflow-y-auto rounded-3xl shadow-2xl p-6 sm:p-7 relative transform scale-95 transition-all duration-300\" id=\"modalContainer\">\n <button onclick=\"closeModal()\" class=\"absolute top-4 right-4 text-slate-400 hover:text-slate-700 w-9 h-9 rounded-full bg-slate-100 flex items-center justify-center transition-colors\">\n <i class=\"fa-solid fa-xmark text-base\"><\/i>\n <\/button>\n <div id=\"modalContent\">\n <!-- Injected dynamically on card selection -->\n <\/div>\n <\/div>\n <\/div>\n\n <script>\n \/*\n * SENARAI PENUH KANDUNGAN JADUAL MINGGU DIGITAL 2026\n * (Mengikut data rasmi terkini)\n *\/\n const SCHEDULE_DAYS = [\n { id: 0, date: '12 Oktober 2026', day: 'Isnin', color: '#0284c7', icon: 'fa-calendar-day' },\n { id: 1, date: '13 Oktober 2026', day: 'Selasa', color: '#7c3aed', icon: 'fa-calendar-day' },\n { id: 2, date: '14 Oktober 2026', day: 'Rabu', color: '#0d9488', icon: 'fa-calendar-day' },\n { id: 3, date: '15 Oktober 2026', day: 'Khamis', color: '#d946ef', icon: 'fa-calendar-day' },\n { id: 4, date: '16 Oktober 2026', day: 'Jumaat', color: '#4f46e5', icon: 'fa-calendar-day' }\n ];\n\n const SCHEDULE_ITEMS = [\n \/\/ ==================== 12 OKTOBER (ISNIN) ====================\n {\n id: 'slot-1',\n dayIndex: 0,\n session: 'pagi',\n time: '9:00 pagi \u2013 11:00 pagi',\n category: 'Majlis Rasmi',\n title: 'Majlis Perasmian',\n speaker: '',\n role: 'Persada Canselori',\n location: 'Persada Canselori',\n details: [\n { text: 'Ucapan Alu-Aluan', indent: false },\n { text: 'Ucapan Perasmian', indent: false },\n { text: 'Montaj', indent: false },\n { text: 'Pelancaran PSD', indent: true },\n { text: 'Pelancaran Wadah Digital', indent: true },\n { text: 'Pelancaran Gerbang Perkhidmatan Digital (Digital4u)', indent: true },\n { text: 'Majlis Penghargaan Tamat Latihan UKM & Blackberry', indent: false },\n { text: 'CCOE Baseline Certification', indent: true },\n { text: 'Chief Information Security Officer (CISO)', indent: true }\n ],\n isOnline: false,\n icon: 'fa-award',\n accentColor: '#f59e0b',\n highlight: true,\n order: 1\n },\n {\n id: 'slot-2',\n dayIndex: 0,\n session: 'pagi',\n time: '11:50 pagi \u2013 12:45 t\/hari',\n category: 'Ceramah (Bersemuka)',\n title: 'Adab Mendahului Reka Bentuk Keselamatan Siber: Memperkukuh Kepercayaan dalam Dunia Digital',\n speaker: 'Ts. Tahrizi Tahreb',\n role: 'Ketua Pegawai Keselamatan Maklumat (CISO), Bank Rakyat | Pengerusi MCCO & rawSEC',\n location: 'Persada Canselori',\n synopsis: 'Adab merupakan teras dalam membentuk nilai tanggungjawab serta etika semasa berinteraksi di ruang digital. Penerapan nilai murni bukan sahaja membina kepercayaan, malah memperkukuh keselamatan maklumat. Sesi ini meneroka bagaimana pemikiran adab-dahulu dan konsep keselamatan Jepun, anshin (ketenangan fikiran), menjadi benteng utama dalam reka bentuk keselamatan siber. Pembudayaan adab ini secara tidak langsung membentuk disiplin dalam reka bentuk persekitaran digital, seterusnya menjadikan institusi sebagai pemegang amanah yang memelihara kepercayaan warganya.',\n isOnline: false,\n icon: 'fa-shield-halved',\n accentColor: '#0284c7',\n order: 2\n },\n {\n id: 'slot-3',\n dayIndex: 0,\n session: 'pagi',\n time: '12:30 t\/hari \u2013 2:00 petang',\n category: 'Pameran',\n title: 'Pameran Inovasi & Perkhidmatan Digital',\n speaker: '',\n role: 'Pameran Inovasi & Perkhidmatan Digital Pusat Teknologi Digital',\n location: 'Persada Canselori',\n synopsis: 'Pameran fizikal teknologi dan inovasi perkhidmatan digital yang berlangsung di Persada Canselori bersempena Minggu Digital 2026.',\n isOnline: false,\n icon: 'fa-building-columns',\n accentColor: '#10b981',\n order: 3\n },\n {\n id: 'slot-4',\n dayIndex: 0,\n session: 'petang',\n time: '2:00 petang \u2013 4:00 petang',\n category: 'Pameran',\n title: 'Pameran Inovasi & Perkhidmatan Digital (Petang)',\n speaker: '',\n role: 'Pameran Inovasi & Perkhidmatan Digital Sesi Petang',\n location: 'Persada Canselori',\n synopsis: 'Pameran fizikal teknologi dan perkhidmatan digital di Persada Canselori.',\n isOnline: false,\n icon: 'fa-building-columns',\n accentColor: '#10b981',\n order: 1\n },\n {\n id: 'slot-5',\n dayIndex: 0,\n session: 'petang',\n time: '2:30 petang \u2013 4:30 petang',\n category: 'Ceramah (Dalam Talian)',\n title: 'Pembangunan Chatbot: Dari Asas ke Penyelesaian Pintar',\n speaker: 'Prof. Madya Dr Abdul Hadi bin Abdul Rahman',\n role: 'Fakulti Teknologi & Sains Maklumat (FTSM), UKM',\n location: '',\n synopsis: 'Membicarakan evolusi pembangunan chatbot daripada fungsi asas kepada penyelesaian digital yang lebih pintar. Sesi ini meneroka bagaimana integrasi teknologi AI mampu meningkatkan kecekapan respons dan automasi perkhidmatan. Ia amat sesuai untuk memahami langkah praktikal dalam menaik taraf sistem perbualan dalam talian organisasi.',\n zoomUrl: 'https:\/\/ukm-edu-my.zoom.us\/j\/96490993297?pwd=JrbUVAMVhsciky7uy2afcIjUL3JG4a.1',\n isOnline: true,\n icon: 'fa-comments',\n accentColor: '#06b6d4',\n order: 2\n },\n {\n id: 'slot-6',\n dayIndex: 0,\n session: 'petang',\n time: '2:30 petang \u2013 3:00 petang',\n category: 'Podcast',\n title: 'AI for Business',\n speaker: 'Mohd Zulhazri bin Azmi (Coach Zul)',\n role: 'Wadah Digital Podcast',\n linkUrl: 'https:\/\/www.youtube.com\/@wadahdigitalukm',\n synopsis: 'Sesi podcast membincangkan aplikasi praktikal kecerdasan buatan (AI) dalam memperkasakan urusan dan strategi perniagaan moden.',\n isOnline: true,\n isPodcast: true,\n icon: 'fa-podcast',\n accentColor: '#8b5cf6',\n order: 3\n },\n {\n id: 'slot-7',\n dayIndex: 0,\n session: 'petang',\n time: '3:15 petang \u2013 3:45 petang',\n category: 'Podcast',\n title: 'Pendekatan Digital Experience untuk Gen Z',\n speaker: 'Dr. Mohd Fadhli Shah Khaidzir',\n role: 'Timbalan Pengarah, Pusat Hal Ehwal Pelajar (HEP-UKM)',\n linkUrl: 'https:\/\/www.youtube.com\/@wadahdigitalukm',\n synopsis: 'Perkongsian mengenai pendekatan dan strategi membina pengalaman digital yang relevan, inklusif dan dinamik untuk generasi Gen Z di universiti.',\n isOnline: true,\n isPodcast: true,\n icon: 'fa-podcast',\n accentColor: '#ec4899',\n order: 4\n },\n {\n id: 'slot-8',\n dayIndex: 0,\n session: 'petang',\n time: '4:00 petang \u2013 4:30 petang',\n category: 'Podcast',\n title: 'Sahsiah Digital: Jiwa Ke Sini, Minda Ke Sana?',\n speaker: 'Ts. Dr. Ahmad Firdhaus Arham',\n role: 'Pengetua Kolej Keris Mas, UKM',\n linkUrl: 'https:\/\/www.youtube.com\/@wadahdigitalukm',\n synopsis: 'Kupasan mendalam mengenai pembentukan jati diri, sahsiah terpuji dan keseimbangan psikologi warga dalam melayari dunia maya.',\n isOnline: true,\n isPodcast: true,\n icon: 'fa-podcast',\n accentColor: '#7c3aed',\n order: 5\n },\n\n \/\/ ==================== 13 OKTOBER (SELASA) ====================\n {\n id: 'slot-9',\n dayIndex: 1,\n session: 'pagi',\n time: '9:00 pagi \u2013 11:00 pagi',\n category: 'Ceramah (Dalam Talian)',\n title: 'Jangan Jadi Mangsa Scam: Bijak & Selamat di Dunia Digital',\n speaker: 'Supt Noor Azwan Bin Mohammed',\n role: 'SUPT Koordinasi Dasar\/ Teknikal, Cawangan Maklumat Sumber Manusia (MSM), Jabatan Pengurusan PDRM',\n location: '',\n synopsis: 'Ceramah ini memberi pendedahan menyeluruh mengenai pelbagai modus operandi dan taktik terkini penipuan dalam talian (scam). Para peserta akan mempelajari langkah-langkah praktikal untuk melindungi data peribadi dan kewangan agar kekal selamat di alam siber. Program ini bertujuan membina masyarakat yang lebih peka, bijak, dan berwaspada semasa mengendalikan teknologi serta perkhidmatan digital.',\n zoomUrl: 'https:\/\/ukm-edu-my.zoom.us\/j\/93993198969?pwd=GbShojRYbXFhcC7ifzTWJWO1efB0UJ.1',\n isOnline: true,\n icon: 'fa-user-shield',\n accentColor: '#7c3aed',\n order: 1\n },\n {\n id: 'slot-10',\n dayIndex: 1,\n session: 'pagi',\n time: '9:30 pagi \u2013 11:00 pagi',\n category: 'Kursus (Dalam Talian)',\n title: 'Literasi Komputer: Cakna AI',\n speaker: 'Puan Suzilawati Ismail',\n role: '(Kursus ini anjuran Perpustakaan Tun Seri Lanang - PTSL)',\n location: '',\n synopsis: 'Kursus Literasi Komputer: Cakna AI anjuran Perpustakaan Tun Seri Lanang (PTSL) ini bertujuan memberi bimbingan praktikal mengenai aplikasi kecerdasan buatan (AI) serta memperkasakan kemahiran literasi maklumat dan digital warga UKM.',\n isOnline: true,\n icon: 'fa-book-bookmark',\n accentColor: '#0d9488',\n order: 2\n },\n {\n id: 'slot-11',\n dayIndex: 1,\n session: 'pagi',\n time: '9:30 pagi \u2013 11:00 pagi',\n category: 'Podcast',\n title: 'Dari Mainframe ke AI: Merentas Evolusi dan Tranformasi Dunia Digital',\n speaker: 'Dr. Shanuddin (M), En. Idris Takyan & Prof. Emeritus Dato\\' Ir. Dr. Mohamad Zawawi Ismail',\n role: 'Wadah Digital Podcast',\n linkUrl: 'https:\/\/www.youtube.com\/@wadahdigitalukm',\n synopsis: 'Perbincangan retrospektif dan pandangan hadapan tentang bagaimana landskap pengkomputeran berubah dari era mainframe sehinggalah kecerdasan buatan masa kini.',\n isOnline: true,\n isPodcast: true,\n icon: 'fa-podcast',\n accentColor: '#8b5cf6',\n order: 3\n },\n {\n id: 'slot-12',\n dayIndex: 1,\n session: 'pagi',\n time: '11:00 pagi \u2013 12:30 t\/hari',\n category: 'Bengkel (Dalam Talian)',\n title: 'Prompt Bijak: Cipta Poster, Sticker dan Video dengan Gemini Pro',\n speaker: 'Dr. Zaihosnita Hood',\n role: 'Pusat Kajian Teknologi & Pengurusan Perisian (SOFTAM), FTSM UKM',\n synopsis: 'Menguji kreativiti dan kemahiran peserta dalam mereka bentuk arahan yang tepat bagi menghasilkan output AI yang optimum. Peserta akan mempelajari teknik menulis arahan AI yang efektif untuk menghasilkan rekaan visual yang menarik, iaitu rekaan poster dan pelekat (sticker) dengan mudah.',\n zoomUrl: 'https:\/\/ukm-edu-my.zoom.us\/j\/93728062381?pwd=UenJpfevFnOVWyT9R2CbPCuAwBPqdR.1',\n isOnline: true,\n icon: 'fa-wand-magic-sparkles',\n accentColor: '#a855f7',\n order: 4\n },\n {\n id: 'slot-13',\n dayIndex: 1,\n session: 'petang',\n time: '2:30 petang \u2013 4:30 petang',\n category: 'Ceramah (Dalam Talian)',\n title: 'AI untuk Pentadbir: Memperkasa Produktiviti dan Transformasi Kerja Digital',\n speaker: 'Prof. Ahmad Kamal Ariffin Mohd Ihsan',\n role: 'Anjuran Kerjasama: DigitalUKM dan PERTADI UKM',\n synopsis: 'Program ceramah ini membantu pentadbir memanfaatkan alatan AI bagi memacu produktiviti dan kecekapan operasi secara maksimum. Para peserta akan mempelajari strategi integrasi teknologi pintar dalam pelaksanaan tugas harian dan pembuat keputusan. Langkah ini penting untuk memperkasakan peranan pentadbir sebagai penggerak utama transformasi digital organisasi.',\n zoomUrl: 'https:\/\/ukm-edu-my.zoom.us\/j\/98591426328?pwd=gcvMfKQmmyTuwYJM2m09nvhbkbGxhi.1',\n isOnline: true,\n icon: 'fa-robot',\n accentColor: '#6366f1',\n order: 1\n },\n {\n id: 'slot-14',\n dayIndex: 1,\n session: 'petang',\n time: '2:30 petang \u2013 2:50 petang',\n category: 'Podcast',\n title: 'Klik, Kembara dan Kalbu: Sembang AI Semasa Solo Travel',\n speaker: 'Dr Kartini Abd Wahab',\n role: 'Fakulti Sains Sosial & Kemanusiaan',\n linkUrl: 'https:\/\/www.youtube.com\/@wadahdigitalukm',\n synopsis: 'Perkongsian santai pengalaman pengembaraan solo dan bagaimana teknologi AI menjadi pembantu pintar dalam merancang perjalanan bermakna.',\n isOnline: true,\n isPodcast: true,\n icon: 'fa-podcast',\n accentColor: '#ec4899',\n order: 2\n },\n {\n id: 'slot-15',\n dayIndex: 1,\n session: 'petang',\n time: '3:00 petang \u2013 3:20 petang',\n category: 'Podcast',\n title: 'Bahasa Rancu dalam Media Sosial',\n speaker: 'Dr. Daing Zairi Bin Ma`Arof',\n role: 'Fakulti Pengajian Sains Citra',\n linkUrl: 'https:\/\/www.youtube.com\/@wadahdigitalukm',\n synopsis: 'Mengupas fenomena percampuran bahasa dan kualiti penggunaan bahasa kebangsaan dalam komunikasi media sosial hari ini.',\n isOnline: true,\n isPodcast: true,\n icon: 'fa-podcast',\n accentColor: '#06b6d4',\n order: 3\n },\n {\n id: 'slot-16',\n dayIndex: 1,\n session: 'petang',\n time: '3:30 petang \u2013 3:50 petang',\n category: 'Podcast',\n title: 'AI, Inovasi, Keusahawanan dan Pelajar',\n speaker: 'Ling Chin Wei (Pelajar)',\n role: 'Fakulti Teknologi & Sains Maklumat',\n linkUrl: 'https:\/\/www.youtube.com\/@wadahdigitalukm',\n synopsis: 'Pandangan anak muda tentang penerapan teknologi AI untuk merangsang inovasi dan mencetuskan peluang keusahawanan pelajar.',\n isOnline: true,\n isPodcast: true,\n icon: 'fa-podcast',\n accentColor: '#10b981',\n order: 4\n },\n {\n id: 'slot-17',\n dayIndex: 1,\n session: 'petang',\n time: '4:00 petang \u2013 4:20 petang',\n category: 'Podcast',\n title: 'Anjakan Minda Digital dalam PdP: AI Membantu, Pelajar Berfikir',\n speaker: 'Ts. Dr. Azura Ishak',\n role: 'Fakulti Teknologi & Sains Maklumat',\n linkUrl: 'https:\/\/www.youtube.com\/@wadahdigitalukm',\n synopsis: 'Meneliti bagaimana AI dapat melengkapkan proses pengajaran dan pembelajaran (PdP) tanpa mengorbankan daya fikir kritis pelajar.',\n isOnline: true,\n isPodcast: true,\n icon: 'fa-podcast',\n accentColor: '#f59e0b',\n order: 5\n },\n\n \/\/ ==================== 14 OKTOBER (RABU) ====================\n {\n id: 'slot-18',\n dayIndex: 2,\n session: 'pagi',\n time: '9:00 pagi \u2013 11:00 pagi',\n category: 'Latihan (Dalam Talian)',\n title: 'Biarkan Power Automate Kerja Keras, dan Kita Kerja Bijak',\n speaker: 'Puan Nor Daina binti Mohamad Yunus',\n role: 'Power Platform Specialist, Enfrasys Solutions Sdn. Bhd.',\n synopsis: 'Ceramah ini mengupas bagaimana Microsoft Power Automate berupaya merevolusikan cara menguruskan tugas dan proses kerja melalui automasi yang pintar dan teratur. Dengan keupayaan menghubungkan pelbagai aplikasi, perkhidmatan dan sumber data, teknologi ini mampu mengoptimumkan aliran kerja merentas pelbagai platform serta meminimumkan risiko kesilapan. Selain itu, peserta turut didedahkan kepada peranan Kecerdasan Buatan (AI) dalam memperkayakan automasi, membolehkan maklumat dianalisis dan diproses dengan lebih bijak.',\n zoomUrl: 'https:\/\/ukm-edu-my.zoom.us\/j\/94968541145?pwd=jw5DxmCg6aBMLT66khTTSiFjxAHQT9.1',\n isOnline: true,\n icon: 'fa-gears',\n accentColor: '#0284c7',\n order: 1\n },\n {\n id: 'slot-19',\n dayIndex: 2,\n session: 'pagi',\n time: '11:00 pagi \u2013 12:30 t\/hari',\n category: 'Ceramah (Dalam Talian)',\n title: 'Gemini 101: Bagaimana AI Menyelamatkan Anda Daripada \\'Burnout\\' di Pejabat',\n speaker: 'Ts. Ahmad Omar Bin Arbain',\n role: 'Pengurus, Workspace Solutions Engineer, Awantec Systems Sdn Bhd',\n synopsis: 'Mendedahkan teknik mengoptimumkan Google Gemini Workspace untuk mengautomasikan tugasan rutin pejabat, mengurus beban kerja dengan lebih tenang, dan mengelakkan burnout.',\n zoomUrl: 'https:\/\/ukm-edu-my.zoom.us\/j\/92860107641?pwd=Uq9dQHw0d7G6iTILpSUAiNbGspwS4y.1',\n isOnline: true,\n icon: 'fa-brain',\n accentColor: '#0d9488',\n order: 2\n },\n {\n id: 'slot-20',\n dayIndex: 2,\n session: 'petang',\n time: '2:30 petang \u2013 4:30 petang',\n category: 'Ceramah (Dalam Talian)',\n title: 'Ceramah Digital (Dalam Talian)',\n speaker: 'Penceramah Jemputan DigitalUKM',\n role: 'Sesi Petang Minggu Digital',\n synopsis: 'Sesi ceramah digital yang dikendalikan secara dalam talian membicarakan perkembangan teknologi masa kini.',\n isOnline: true,\n icon: 'fa-laptop-code',\n accentColor: '#0284c7',\n order: 1\n },\n\n \/\/ ==================== 15 OKTOBER (KHAMIS) ====================\n {\n id: 'slot-21',\n dayIndex: 3,\n session: 'pagi',\n time: '9:00 pagi \u2013 11:00 pagi',\n category: 'Ceramah (Dalam Talian)',\n title: 'Teknologi Memuncul Dunia Digital: Apa Seterusnya?',\n speaker: 'Prof. Dr. Mohamad Haniff Md Saad',\n role: 'Pengarah, Pusat Teknologi Digital UKM',\n synopsis: 'Sesi ceramah ini mengupas evolusi dan impak teknologi memuncul (emerging technologies) dalam membentuk landskap dunia digital masa hadapan serta strategi persediaan organisasi dalam mengharungi gelombang inovasi seterusnya.',\n zoomUrl: 'https:\/\/ukm-edu-my.zoom.us\/j\/94979263360?pwd=VHOONgyM4CusVbwLI1FU6laWAz3pdG.1',\n isOnline: true,\n icon: 'fa-microchip',\n accentColor: '#0284c7',\n order: 1\n },\n {\n id: 'slot-22',\n dayIndex: 3,\n session: 'pagi',\n time: '11:00 pagi \u2013 12:30 t\/hari',\n category: 'Ceramah (Dalam Talian)',\n title: 'Perundangan dan Digital: Elakkan Tindakan Mahkamah Terhadap Anda',\n speaker: 'Puan Raihanah Abd Razak',\n role: 'Timbalan Pendakwa Raya, Jabatan Peguam Negara Malaysia',\n synopsis: 'Perkembangan teknologi digital dan ruang siber yang pesat mempermudahkan urusan harian. Namun tanpa disedari, kesilapan kecil dalam penggunaan platform digital seperti menghantar e-mel palsu, penyebaran maklumat tidak sahih, buli siber mahupun pelanggaran hak cipta boleh mendedahkan individu kepada implikasi undang-undang yang serius.\\n\\nCeramah ini memberikan kesedaran dan pemahaman mengenai batasan serta implikasi undang-undang berkaitan penyalahgunaan teknologi digital.',\n zoomUrl: 'https:\/\/ukm-edu-my.zoom.us\/j\/95402524986?pwd=BUiuwVug2aeEa8DH3GX31LBUwzC2zL.1',\n isOnline: true,\n icon: 'fa-scale-balanced',\n accentColor: '#d946ef',\n order: 2\n },\n {\n id: 'slot-23',\n dayIndex: 3,\n session: 'petang',\n time: '2:30 petang \u2013 3:30 petang',\n category: 'Ceramah (Dalam Talian)',\n title: 'Evolusi AI: Dari sistem pakar ke Agentic AI',\n speaker: 'Ts. Dr. Mohd Nor Akmal Khalid',\n role: 'Pensyarah Kanan, Pusat Kajian Teknologi Kecerdasan Buatan (CAIT), FTSM UKM',\n synopsis: 'Perkembangan kecerdasan buatan (AI) merangkumi evolusi daripada sistem pakar berasaskan peraturan kepada AI generatif yang mampu menghasilkan kandungan, dan seterusnya kepada Agentic AI yang berupaya merancang, membuat keputusan serta melaksanakan tugasan secara lebih autonomi. Sesi ini membincangkan perkembangan teknologi tersebut serta implikasinya terhadap cara manusia bekerja, membuat keputusan dan berinteraksi dengan teknologi.',\n isOnline: true,\n icon: 'fa-robot',\n accentColor: '#6366f1',\n order: 1\n },\n\n \/\/ ==================== 16 OKTOBER (JUMAAT) ====================\n {\n id: 'slot-24',\n dayIndex: 4,\n session: 'pagi',\n time: '9:00 pagi \u2013 11:00 pagi',\n category: 'Ceramah (Hybrid)',\n title: 'Dosa dan Pahala Digital',\n speaker: 'Prof. Dato\u2019 Dr. Haji Mohd Izhar Ariff bin Mohd Kashim',\n role: 'Dekan, Fakulti Pengajian Islam UKM',\n location: 'Bilik Teratai, Pusat Teknologi Digital',\n synopsis: 'Dosa dan Pahala Digital membincangkan bagaimana kehidupan manusia di alam digital turut mempunyai dimensi pahala dan dosa. Setiap hantaran, komen, perkongsian, tontonan dan jejak digital bukan sekadar aktiviti teknologi, tetapi boleh menjadi amal yang diberi ganjaran atau perbuatan yang dipertanggungjawabkan di sisi Allah SWT.\\n\\nBerpandukan al-Quran, al-Sunnah dan prinsip fiqh semasa, Dosa dan Pahala Digital mengajak peserta membina \u201ctakwa digital\u201d \u2014 iaitu menggunakan teknologi dengan ilmu, adab dan rasa bertanggungjawab, kerana apa yang ditaip dengan jari hari ini mungkin menjadi pahala yang terus mengalir atau dosa yang terus berulang, walaupun selepas seseorang meninggal dunia.',\n zoomUrl: 'https:\/\/ukm-edu-my.zoom.us\/j\/98645628887?pwd=YmJEab89XVbmJ8mEBhsrc1O82mAUWB.1',\n isOnline: true,\n icon: 'fa-compass-drafting',\n accentColor: '#6366f1',\n order: 1\n },\n {\n id: 'slot-25',\n dayIndex: 4,\n session: 'pagi',\n time: 'Masa belum ditetapkan lagi',\n category: 'Majlis Rasmi',\n title: 'Majlis Penutup & Penyampaian Hadiah',\n speaker: '',\n role: 'Penutupan rasmi & penyampaian hadiah',\n location: 'Pusat Teknologi Digital',\n details: [\n { text: 'Ucapan penutup', indent: false },\n { text: 'Penyampaian hadiah pertandingan', indent: false },\n { text: 'Pertandingan Video Pendek', indent: true },\n { text: 'Penyampaian hadiah: Artikel terbaik wadah Digital', indent: true },\n { text: 'Penyampaian cenderahati juri Artikel Terbaik Wadah Digital bagi edisi Khas Gemini Notebook', indent: false }\n ],\n isOnline: false,\n icon: 'fa-flag-checkered',\n accentColor: '#8b5cf6',\n highlight: true,\n order: 2\n },\n {\n id: 'slot-26',\n dayIndex: 4,\n session: 'petang',\n time: '2:30 petang \u2013 4:30 petang',\n title: '- Tiada Sesi Petang -',\n speaker: '',\n role: '',\n isOnline: false,\n isOff: true,\n icon: 'fa-circle-pause',\n accentColor: '#94a3b8',\n order: 1\n }\n ];\n\n let activeDayView = 'all'; \/\/ 'all' or dayIndex 0..4\n let activeFilter = 'all'; \/\/ 'all', 'pagi', 'petang', 'podcast', 'online'\n\n function setFilter(filterType) {\n activeFilter = filterType;\n document.querySelectorAll('.filter-tab-btn').forEach(btn => {\n btn.classList.remove('filter-btn-active');\n });\n const activeBtn = document.getElementById(`filter-${filterType}`);\n if (activeBtn) {\n activeBtn.classList.add('filter-btn-active');\n }\n renderScheduleCards();\n }\n\n function switchDayView(day, element) {\n activeDayView = day;\n document.querySelectorAll('.day-tab').forEach(btn => {\n btn.classList.remove('day-tab-active');\n btn.classList.add('text-slate-600');\n });\n element.classList.add('day-tab-active');\n element.classList.remove('text-slate-600');\n\n const labelEl = document.getElementById('activeDayLabel');\n if (day === 'all') {\n labelEl.textContent = 'Memaparkan 5 Hari Penuh';\n } else {\n const targetDay = SCHEDULE_DAYS.find(d => d.id === day);\n labelEl.textContent = `${targetDay.day} (${targetDay.date})`;\n }\n\n renderScheduleCards();\n }\n\n function renderScheduleCards() {\n const container = document.getElementById('scheduleDaysContainer');\n container.innerHTML = '';\n\n const daysToRender = activeDayView === 'all' \n ? SCHEDULE_DAYS \n : SCHEDULE_DAYS.filter(d => d.id === activeDayView);\n\n daysToRender.forEach(day => {\n \/\/ Filter items for this day\n let dayItems = SCHEDULE_ITEMS.filter(it => it.dayIndex === day.id);\n\n \/\/ Apply Session \/ Type Filter\n if (activeFilter === 'pagi') {\n dayItems = dayItems.filter(it => it.session === 'pagi');\n } else if (activeFilter === 'petang') {\n dayItems = dayItems.filter(it => it.session === 'petang');\n } else if (activeFilter === 'podcast') {\n dayItems = dayItems.filter(it => it.isPodcast);\n } else if (activeFilter === 'online') {\n dayItems = dayItems.filter(it => it.isOnline && !it.isOff);\n }\n\n if (dayItems.length === 0) return;\n\n \/\/ Day Section Wrapper\n const daySection = document.createElement('section');\n daySection.className = 'flex flex-col gap-4 animate-fadeIn';\n\n \/\/ Day Sticky Header Pill\n daySection.innerHTML = `\n <div class=\"flex items-center justify-between pb-2 border-b border-slate-200\/80\">\n <div class=\"flex items-center gap-2.5\">\n <span class=\"w-3 h-8 rounded-full\" style=\"background: ${day.color}\"><\/span>\n <div>\n <h2 class=\"text-base sm:text-lg font-extrabold text-slate-900 cyber-font\">\n ${day.day.toUpperCase()} <span class=\"text-indigo-600 font-semibold text-sm sm:text-base ml-1\">\/ ${day.date}<\/span>\n <\/h2>\n <\/div>\n <\/div>\n <span class=\"text-xs font-semibold px-3 py-1 rounded-full bg-slate-100 text-slate-600 border border-slate-200\">\n ${dayItems.length} Aktiviti\n <\/span>\n <\/div>\n\n <!-- Cards Grid (1 col on mobile, 2 col on tablet, 3 col on large desktop) -->\n <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4\" id=\"cards-grid-${day.id}\">\n <\/div>\n `;\n\n container.appendChild(daySection);\n const cardsGrid = daySection.querySelector(`#cards-grid-${day.id}`);\n\n dayItems.forEach(item => {\n const cardEl = document.createElement('div');\n cardEl.className = `schedule-card rounded-2xl p-5 border flex flex-col justify-between cursor-pointer relative overflow-hidden ${\n item.highlight ? 'border-amber-300 bg-amber-50\/40' : (item.isOff ? 'border-dashed border-slate-300 bg-slate-50\/70' : 'border-slate-200\/90')\n }`;\n\n \/\/ Click to show modal\n cardEl.onclick = () => {\n if (!item.isOff) showModal(item);\n };\n\n if (item.isOff) {\n cardEl.innerHTML = `\n <div class=\"py-8 text-center flex flex-col items-center justify-center gap-2 text-slate-400\">\n <i class=\"fa-solid fa-circle-pause text-2xl\"><\/i>\n <span class=\"font-semibold text-sm tracking-wide text-slate-500\">${item.title}<\/span>\n <span class=\"text-xs font-mono\">${item.time}<\/span>\n <\/div>\n `;\n cardsGrid.appendChild(cardEl);\n return;\n }\n\n \/\/ Format Badges\n let formatBadge = '';\n if (item.isPodcast) {\n formatBadge = '<span class=\"text-[10px] font-bold px-2.5 py-0.5 rounded-full bg-purple-100 text-purple-700 border border-purple-200\">\ud83c\udf99 PODCAST<\/span>';\n } else if (item.category === 'Ceramah (Hybrid)') {\n formatBadge = '<span class=\"text-[10px] font-bold px-2.5 py-0.5 rounded-full bg-indigo-100 text-indigo-700 border border-indigo-200\">\u25cf HIBRID<\/span>';\n } else if (item.isOnline) {\n formatBadge = '<span class=\"text-[10px] font-bold px-2.5 py-0.5 rounded-full bg-sky-100 text-sky-700 border border-sky-200\">\u25cf DALAM TALIAN<\/span>';\n } else {\n formatBadge = '<span class=\"text-[10px] font-bold px-2.5 py-0.5 rounded-full bg-slate-100 text-slate-700 border border-slate-200\">BERSEMUKA<\/span>';\n }\n\n \/\/ Zoom Badge\n const zoomBadge = item.zoomUrl \n ? `<span class=\"inline-flex items-center gap-1 text-[10px] font-bold px-2 py-0.5 rounded-md bg-blue-600 text-white shadow-sm shadow-blue-500\/20\">\n <i class=\"fa-solid fa-video text-[9px]\"><\/i> Zoom\n <\/span>` \n : '';\n\n \/\/ Action buttons in card\n const actionButton = item.zoomUrl \n ? `<a href=\"${item.zoomUrl}\" target=\"_blank\" rel=\"noopener noreferrer\" onclick=\"event.stopPropagation()\" class=\"px-2.5 py-1 rounded-lg bg-blue-50 hover:bg-blue-600 text-blue-700 hover:text-white border border-blue-200 text-[11px] font-semibold transition-colors flex items-center gap-1\">\n <i class=\"fa-solid fa-video text-[10px]\"><\/i> Zoom <i class=\"fa-solid fa-arrow-up-right-from-square text-[9px]\"><\/i>\n <\/a>`\n : (item.linkUrl ? `<a href=\"${item.linkUrl}\" target=\"_blank\" rel=\"noopener noreferrer\" onclick=\"event.stopPropagation()\" class=\"px-2.5 py-1 rounded-lg bg-red-50 hover:bg-red-600 text-red-600 hover:text-white border border-red-200 text-[11px] font-semibold transition-colors flex items-center gap-1\">\n <i class=\"fa-brands fa-youtube text-[10px]\"><\/i> Tonton <i class=\"fa-solid fa-arrow-up-right-from-square text-[9px]\"><\/i>\n <\/a>` : '');\n\n cardEl.innerHTML = `\n <!-- Accent Bar Left -->\n <div class=\"absolute left-0 top-3 bottom-3 w-1 rounded-r-full\" style=\"background: ${item.accentColor || '#6366f1'}\"><\/div>\n\n <div>\n <!-- Header: Badges & Time -->\n <div class=\"flex items-center justify-between gap-2 mb-3\">\n <div class=\"flex items-center flex-wrap gap-1.5\">\n ${formatBadge}\n ${zoomBadge}\n <\/div>\n <span class=\"text-[11px] font-semibold font-mono text-slate-500 bg-slate-100\/90 px-2 py-0.5 rounded-md\">\n ${item.time.split('\u2013')[0].trim()}\n <\/span>\n <\/div>\n\n <!-- Title & Vector Icon -->\n <div class=\"flex items-start gap-3 mb-3\">\n <div class=\"w-9 h-9 rounded-xl flex items-center justify-center text-sm shrink-0 shadow-sm\" style=\"background: ${item.accentColor}18; color: ${item.accentColor}\">\n <i class=\"fa-solid ${item.icon}\"><\/i>\n <\/div>\n <div class=\"min-w-0 flex-1\">\n <h4 class=\"text-sm font-bold text-slate-900 leading-snug hover:text-indigo-600 transition-colors\">\n ${item.title}\n <\/h4>\n <span class=\"text-[11px] text-slate-500 block mt-0.5\"><i class=\"fa-regular fa-clock mr-1 text-slate-400\"><\/i>${item.time}<\/span>\n <\/div>\n <\/div>\n <\/div>\n\n <!-- Card Footer Zone -->\n <div class=\"pt-3 border-t border-slate-100 mt-2 flex flex-col gap-2\">\n ${item.speaker ? `\n <div class=\"min-w-0\">\n <p class=\"text-xs font-bold text-slate-800 flex items-center gap-1.5 truncate\">\n <i class=\"fa-solid fa-microphone-lines text-indigo-500 text-[11px]\"><\/i>\n <span>${item.speaker}<\/span>\n <\/p>\n ${item.role ? `<p class=\"text-[11px] text-slate-500 truncate pl-4\">${item.role}<\/p>` : ''}\n <\/div>\n ` : ''}\n\n ${item.location ? `\n <p class=\"text-xs font-semibold text-sky-700 flex items-center gap-1.5 truncate\">\n <i class=\"fa-solid fa-location-dot text-sky-500 text-[11px]\"><\/i>\n <span>${item.location}<\/span>\n <\/p>\n ` : ''}\n\n <div class=\"flex items-center justify-between gap-2 pt-1\">\n <span class=\"text-[11px] font-bold text-indigo-600 hover:text-indigo-700 flex items-center gap-1\">\n ${item.synopsis ? '<i class=\"fa-solid fa-circle-info\"><\/i> Sinopsis' : (item.details ? '<i class=\"fa-solid fa-list-check\"><\/i> Perincian' : '<i class=\"fa-solid fa-circle-info\"><\/i> Maklumat')}\n <i class=\"fa-solid fa-arrow-right text-[9px] transition-transform group-hover:translate-x-0.5\"><\/i>\n <\/span>\n ${actionButton}\n <\/div>\n <\/div>\n `;\n\n cardsGrid.appendChild(cardEl);\n });\n });\n }\n\n function showModal(data) {\n const modal = document.getElementById('detailModal');\n const container = document.getElementById('modalContainer');\n const content = document.getElementById('modalContent');\n\n const html = `\n <div class=\"flex items-start gap-3.5 mb-4\">\n <div class=\"w-12 h-12 rounded-2xl flex items-center justify-center text-white text-xl shrink-0 shadow-md\" style=\"background: ${data.accentColor || '#6366f1'}\">\n <i class=\"fa-solid ${data.icon}\"><\/i>\n <\/div>\n <div>\n <div class=\"flex items-center flex-wrap gap-2 mb-2\">\n ${data.isPodcast\n ? '<span class=\"text-[10.5px] font-bold px-2.5 py-0.5 rounded-full bg-purple-100 text-purple-700 border border-purple-200\">\ud83c\udf99 PODCAST<\/span>'\n : (data.category === 'Ceramah (Hybrid)'\n ? '<span class=\"text-[10.5px] font-bold px-2.5 py-0.5 rounded-full bg-indigo-100 text-indigo-700 border border-indigo-200\">\u25cf HIBRID<\/span>'\n : (data.isOnline \n ? '<span class=\"text-[10.5px] font-bold px-2.5 py-0.5 rounded-full bg-sky-100 text-sky-700 border border-sky-200\">DALAM TALIAN<\/span>' \n : '<span class=\"text-[10.5px] font-bold px-2.5 py-0.5 rounded-full bg-slate-100 text-slate-700 border border-slate-200\">BERSEMUKA<\/span>'))}\n ${data.category ? `<span class=\"text-[10.5px] font-semibold px-2.5 py-0.5 rounded-md bg-purple-50 text-purple-700 border border-purple-100\">${data.category}<\/span>` : ''}\n <\/div>\n <h3 class=\"text-base sm:text-lg font-bold text-slate-900 leading-snug\">${data.title}<\/h3>\n <p class=\"text-xs text-slate-500 font-mono mt-1.5\"><i class=\"fa-regular fa-clock mr-1 text-indigo-500\"><\/i>${data.time}<\/p>\n <\/div>\n <\/div>\n\n ${data.speaker ? `\n <div class=\"bg-slate-50 p-4 rounded-2xl border border-slate-100 space-y-1 mb-3.5\">\n <span class=\"text-[10px] font-bold tracking-wider text-slate-400 uppercase\">Penceramah \/ Penyampai<\/span>\n <p class=\"font-bold text-slate-800 text-sm flex items-center gap-2\">\n <i class=\"fa-solid fa-microphone text-indigo-500\"><\/i> ${data.speaker}\n <\/p>\n ${data.role ? `<p class=\"text-xs text-slate-600 leading-relaxed\">${data.role}<\/p>` : ''}\n <\/div>\n ` : ''}\n\n ${data.location ? `\n <div class=\"bg-amber-50\/70 p-3 rounded-xl border border-amber-200\/80 text-xs text-amber-900 font-medium flex items-center gap-2 mb-3.5\">\n <i class=\"fa-solid fa-location-dot text-amber-600 text-sm\"><\/i>\n <span>Lokasi \/ Tempat: <strong>${data.location}<\/strong><\/span>\n <\/div>\n ` : ''}\n\n ${data.zoomUrl ? `\n <div class=\"mb-3.5\">\n <a href=\"${data.zoomUrl}\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"inline-flex items-center gap-2 px-4 py-2.5 rounded-xl bg-blue-600 hover:bg-blue-700 text-white font-semibold text-xs transition-colors shadow-md shadow-blue-500\/20\">\n <i class=\"fa-solid fa-video text-sm\"><\/i> Sertai Sesi Zoom (Klik Di Sini) <i class=\"fa-solid fa-arrow-up-right-from-square text-[10px]\"><\/i>\n <\/a>\n <\/div>\n ` : ''}\n\n ${data.linkUrl ? `\n <div class=\"mb-3.5\">\n <a href=\"${data.linkUrl}\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"inline-flex items-center gap-2 px-4 py-2.5 rounded-xl bg-red-600 hover:bg-red-700 text-white font-semibold text-xs transition-colors shadow-md\">\n <i class=\"fa-brands fa-youtube text-base\"><\/i> Tonton di YouTube @wadahdigitalukm <i class=\"fa-solid fa-arrow-up-right-from-square text-[10px]\"><\/i>\n <\/a>\n <\/div>\n ` : ''}\n\n ${data.details && data.details.length > 0 ? `\n <div class=\"bg-amber-50\/70 p-4 rounded-2xl border border-amber-200\/80 text-xs text-slate-800 mb-3.5 space-y-2\">\n <div class=\"flex items-center gap-1.5 text-amber-800 font-bold uppercase tracking-wider text-[11px]\">\n <i class=\"fa-solid fa-list-check text-amber-600\"><\/i> Pengisian & Perincian Atur Cara\n <\/div>\n <ul class=\"space-y-1.5 text-slate-700 list-none pl-0\">\n ${data.details.map(d => {\n const isObj = typeof d === 'object';\n const text = isObj ? d.text : d;\n const isIndent = isObj ? d.indent : false;\n if (isIndent) {\n return `<li class=\"flex items-start gap-2 ml-5\">\n <i class=\"fa-solid fa-circle text-amber-500 mt-1.5 text-[6px] shrink-0\"><\/i>\n <span class=\"leading-relaxed font-medium text-slate-700\">${text}<\/span>\n <\/li>`;\n } else {\n return `<li class=\"flex items-start gap-2\">\n <i class=\"fa-solid fa-circle-check text-amber-600 mt-0.5 text-[11px] shrink-0\"><\/i>\n <span class=\"leading-relaxed font-semibold text-slate-800\">${text}<\/span>\n <\/li>`;\n }\n }).join('')}\n <\/ul>\n <\/div>\n ` : ''}\n\n ${data.synopsis ? `\n <div class=\"bg-indigo-50\/60 p-4 rounded-2xl border border-indigo-100 text-xs text-slate-700 mb-3.5 space-y-1.5\">\n <div class=\"flex items-center gap-1.5 text-indigo-700 font-bold uppercase tracking-wider text-[11px]\">\n <i class=\"fa-solid fa-circle-info\"><\/i> Sinopsis Aktiviti\n <\/div>\n <p class=\"leading-relaxed text-slate-700 text-justify whitespace-pre-line\">${data.synopsis}<\/p>\n <\/div>\n ` : ''}\n\n <div class=\"flex justify-end pt-2\">\n <button onclick=\"closeModal()\" class=\"px-5 py-2 bg-slate-900 hover:bg-slate-800 text-white rounded-xl text-xs font-semibold shadow transition-all\">\n Tutup\n <\/button>\n <\/div>\n `;\n\n content.innerHTML = html;\n modal.classList.remove('opacity-0', 'pointer-events-none');\n container.classList.remove('scale-95');\n container.classList.add('scale-100');\n }\n\n function closeModal() {\n const modal = document.getElementById('detailModal');\n const container = document.getElementById('modalContainer');\n modal.classList.add('opacity-0', 'pointer-events-none');\n container.classList.remove('scale-100');\n container.classList.add('scale-95');\n }\n\n \/\/ Close modal on outer backdrop click\n document.getElementById('detailModal').addEventListener('click', (e) => {\n if (e.target.id === 'detailModal') closeModal();\n });\n\n const canvas = document.getElementById('cyberBackgroundCanvas');\n const ctx = canvas.getContext('2d');\n let tick = 0;\n let dpr = window.devicePixelRatio || 1;\n\n function resizeCanvas() {\n dpr = window.devicePixelRatio || 1;\n canvas.width = Math.floor(window.innerWidth * dpr);\n canvas.height = Math.floor(window.innerHeight * dpr);\n ctx.setTransform(1, 0, 0, 1, 0, 0);\n ctx.scale(dpr, dpr);\n }\n\n function drawCyberAura() {\n tick++;\n const w = window.innerWidth;\n const h = window.innerHeight;\n\n ctx.clearRect(0, 0, w, h);\n\n \/\/ Crisp pure white background base\n ctx.fillStyle = '#ffffff';\n ctx.fillRect(0, 0, w, h);\n\n const centerX = w \/ 2;\n const ringY = Math.min(240, h * 0.28);\n const ringRadius = Math.max(40, Math.min(w * 0.28, 220));\n\n \/\/ Central radial ambient portal glow\n const innerGlow = ringRadius * 0.35;\n const outerGlow = ringRadius * 2.1;\n const radialGlow = ctx.createRadialGradient(centerX, ringY, innerGlow, centerX, ringY, outerGlow);\n radialGlow.addColorStop(0, 'rgba(6, 182, 212, 0.09)');\n radialGlow.addColorStop(0.35, 'rgba(124, 58, 237, 0.05)');\n radialGlow.addColorStop(1, 'rgba(255, 255, 255, 0)');\n ctx.fillStyle = radialGlow;\n ctx.fillRect(0, 0, w, h);\n\n \/\/ Concentric Glowing Rings\n ctx.lineWidth = 2;\n ctx.strokeStyle = 'rgba(6, 182, 212, 0.25)';\n ctx.beginPath();\n ctx.arc(centerX, ringY, ringRadius, 0, Math.PI * 2);\n ctx.stroke();\n\n \/\/ Rotating orbit dash rings\n ctx.save();\n ctx.translate(centerX, ringY);\n ctx.rotate(tick * 0.003);\n ctx.setLineDash([8, 14]);\n ctx.strokeStyle = 'rgba(139, 92, 246, 0.25)';\n ctx.beginPath();\n ctx.arc(0, 0, ringRadius + 18, 0, Math.PI * 2);\n ctx.stroke();\n\n \/\/ Inner counter-rotating ring\n ctx.rotate(-tick * 0.007);\n ctx.setLineDash([4, 18]);\n ctx.strokeStyle = 'rgba(2, 132, 199, 0.3)';\n ctx.beginPath();\n ctx.arc(0, 0, Math.max(10, ringRadius - 22), 0, Math.PI * 2);\n ctx.stroke();\n ctx.restore();\n\n \/\/ Perspective cyber grid lines on lower half\n const vanishX = centerX;\n const vanishY = ringY;\n ctx.lineWidth = 1;\n const numGridLines = 14;\n for (let i = -numGridLines; i <= numGridLines; i++) {\n const spreadRatio = i \/ numGridLines;\n const bottomX = centerX + spreadRatio * (w * 0.88);\n\n const gradLine = ctx.createLinearGradient(vanishX, vanishY, bottomX, h);\n const alpha = Math.max(0.02, (1 - Math.abs(spreadRatio)) * 0.15);\n gradLine.addColorStop(0, 'rgba(124, 58, 237, 0)');\n gradLine.addColorStop(0.4, `rgba(6, 182, 212, ${alpha * 0.6})`);\n gradLine.addColorStop(1, i % 2 === 0 ? `rgba(139, 92, 246, ${alpha})` : `rgba(2, 132, 199, ${alpha})`);\n\n ctx.strokeStyle = gradLine;\n ctx.beginPath();\n ctx.moveTo(vanishX, vanishY + ringRadius * 0.25);\n ctx.lineTo(bottomX, h);\n ctx.stroke();\n }\n\n \/\/ High-speed light trail pulses\n const numBeams = 7;\n for (let b = 0; b < numBeams; b++) {\n const progress = ((tick * 1.5 + b * 140) % 1000) \/ 1000;\n const beamIndex = ((b * 4) % (numGridLines * 2)) - numGridLines;\n const spread = beamIndex \/ numGridLines;\n const targetX = centerX + spread * (w * 0.88);\n\n const curX = vanishX + (targetX - vanishX) * progress;\n const curY = (vanishY + ringRadius * 0.25) + (h - (vanishY + ringRadius * 0.25)) * progress;\n\n ctx.fillStyle = b % 2 === 0 ? 'rgba(6, 182, 212, 0.65)' : 'rgba(168, 85, 247, 0.65)';\n ctx.beginPath();\n ctx.arc(curX, curY, Math.max(0.5, 1.5 + progress * 2.5), 0, Math.PI * 2);\n ctx.fill();\n }\n\n requestAnimationFrame(drawCyberAura);\n }\n\n window.addEventListener('resize', () => {\n resizeCanvas();\n });\n\n window.addEventListener('load', () => {\n resizeCanvas();\n renderScheduleCards();\n drawCyberAura();\n });\n <\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Program & Aktiviti Sedia untuk teroka dunia digital? \ud83d\ude80 Buat julung kalinya, Pusat Teknologi Digital\u00a0 menganjurkan Minggu Digital UKM 2026! Inilah masanya untuk mendapatkan berbagai<a class=\"ut-readmore\" href=\"https:\/\/www.ukm.my\/minggudigital\/program-new\/\"> …<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":3,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-3571","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.ukm.my\/minggudigital\/wp-json\/wp\/v2\/pages\/3571","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.ukm.my\/minggudigital\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.ukm.my\/minggudigital\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.ukm.my\/minggudigital\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ukm.my\/minggudigital\/wp-json\/wp\/v2\/comments?post=3571"}],"version-history":[{"count":68,"href":"https:\/\/www.ukm.my\/minggudigital\/wp-json\/wp\/v2\/pages\/3571\/revisions"}],"predecessor-version":[{"id":3651,"href":"https:\/\/www.ukm.my\/minggudigital\/wp-json\/wp\/v2\/pages\/3571\/revisions\/3651"}],"wp:attachment":[{"href":"https:\/\/www.ukm.my\/minggudigital\/wp-json\/wp\/v2\/media?parent=3571"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}