Formulir Pendaftaran Seminar<\/title>\r\n\r\n<style>\r\n body { background-color: #f4f7f6; font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif; }\r\n .form-container-seminar { font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif; background: #ffffff; padding: 25px 35px; border-radius: 12px; border: 1px solid #e0e0e0; max-width: 900px; margin: 20px auto; box-shadow: 0 4px 15px rgba(0,0,0,0.05); }\r\n .form-container-seminar h2.form-title { color: #2c3e50; text-align: center; font-weight: 600; font-size: 24px; margin-bottom: 1rem; }\r\n .form-container-seminar p.form-description { text-align: center; color: #555; margin-bottom: 25px; font-size: 14px; line-height: 1.6; }\r\n .form-container-seminar .form-grid { display: grid; grid-template-columns: 1fr; gap: 18px 25px; }\r\n .form-container-seminar .form-group { margin-bottom: 0; }\r\n .form-container-seminar .full-width { grid-column: 1 \/ -1; }\r\n .form-container-seminar h3.form-section-title { font-size: 16px; font-weight: bold; color: #34495e; margin-top: 20px; margin-bottom: 10px; }\r\n .form-container-seminar h2.form-section-upload-title { grid-column: 1 \/ -1; font-size: 18px; font-weight: bold; color: #3498db; border-bottom: 2px solid #3498db; padding-bottom: 5px; margin-top: 20px; margin-bottom: 10px; }\r\n .form-container-seminar label { display: block; margin-bottom: 8px; font-weight: 500; color: #34495e; font-size: 14px; }\r\n .form-container-seminar label .required-asterisk { color: #e74c3c; margin-left: 3px; font-weight: bold; }\r\n .form-container-seminar input[type=\"text\"], .form-container-seminar input[type=\"email\"], .form-container-seminar input[type=\"tel\"], .form-container-seminar input[type=\"date\"], .form-container-seminar input[type=\"time\"], .form-container-seminar input[type=\"number\"], .form-container-seminar select, .form-container-seminar textarea, .form-container-seminar input[type=\"file\"] { width: 100%; padding: 12px; box-sizing: border-box; border: 1px solid #bdc3c7; border-radius: 6px; font-size: 14px; background-color: #f8f9fa; }\r\n .form-container-seminar button { background-color: #27ae60; color: white; padding: 14px 20px; border: none; border-radius: 6px; cursor: pointer; width: 100%; font-size: 16px; font-weight: bold; transition: background-color 0.3s; }\r\n .form-container-seminar button:hover { background-color: #229954; }\r\n .form-container-seminar button:disabled { background-color: #95a5a6; cursor: not-allowed; }\r\n \r\n \/* --- CSS untuk Modal Notifikasi --- *\/\r\n .custom-modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); display: flex; align-items: center; justify-content: center; z-index: 9999; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; }\r\n .custom-modal-overlay.show { opacity: 1; visibility: visible; }\r\n .custom-modal-box { background: #fff; padding: 30px; border-radius: 12px; width: 90%; max-width: 400px; text-align: center; box-shadow: 0 5px 20px rgba(0,0,0,0.2); transform: scale(0.9); transition: transform 0.3s ease; }\r\n .custom-modal-overlay.show .custom-modal-box { transform: scale(1); }\r\n .custom-modal-box h4 { margin-top: 0; font-size: 22px; }\r\n .custom-modal-box p { margin-bottom: 25px; color: #555; font-size: 16px; }\r\n .custom-modal-box .modal-button { border: none; padding: 12px 30px; border-radius: 6px; cursor: pointer; font-size: 16px; font-weight: bold; color: white; }\r\n .modal-icon { width: 80px; height: 80px; margin: 0 auto 15px auto; display: block; }\r\n .custom-modal-box.warning h4 { color: #c0392b; }\r\n .custom-modal-box.warning .modal-button { background-color: #3498db; }\r\n .custom-modal-box.success h4 { color: #27ae60; }\r\n .custom-modal-box.success .modal-button { background-color: #27ae60; }\r\n .modal-icon.success .checkmark { stroke-dasharray: 48; stroke-dashoffset: 48; animation: stroke 0.8s cubic-bezier(0.65, 0, 0.45, 1) 0.2s forwards; }\r\n @keyframes stroke { 100% { stroke-dashoffset: 0; } }\r\n\r\n \/* --- CSS untuk Animasi Loading DNA --- *\/\r\n .loading-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.95); display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 10000; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; }\r\n .loading-overlay.show { opacity: 1; visibility: visible; }\r\n .spinner-box { width: 300px; height: 150px; display: flex; justify-content: center; align-items: center; background-color: transparent; }\r\n .bio-spinner { margin: 0 auto; width: 50px; height: 60px; text-align: center; font-size: 10px; }\r\n .bio-spinner > div { background-color: #27ae60; height: 100%; width: 6px; display: inline-block; animation: bio-stretchdelay 1.2s infinite ease-in-out; }\r\n .bio-spinner .rect2 { animation-delay: -1.1s; background-color: #3498db; }\r\n .bio-spinner .rect3 { animation-delay: -1.0s; }\r\n .bio-spinner .rect4 { animation-delay: -0.9s; background-color: #3498db; }\r\n .bio-spinner .rect5 { animation-delay: -0.8s; }\r\n @keyframes bio-stretchdelay { 0%, 40%, 100% { transform: scaleY(0.4); } 20% { transform: scaleY(1.0); } }\r\n .loading-text { margin-top: 0; font-size: 18px; color: #2c3e50; font-weight: 500; letter-spacing: 1px; }\r\n \r\n @media (min-width: 640px) { .form-container-seminar .form-grid { grid-template-columns: repeat(2, 1fr); } }\r\n @media (min-width: 1024px) { .form-container-seminar .form-grid.layout-3-col { grid-template-columns: repeat(3, 1fr); } }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div class=\"form-container-seminar\">\r\n <h2 class=\"form-title\">Formulir Pendaftaran Seminar 1<\/h2>\r\n <p class=\"form-description\">\r\n Setelah melakukan pendaftaran online wajib mengkonfirmasi TU akademik untuk diproses (agar sukses submitnya disarankan file besarannya di bawah yg telah disarankan).<br>\r\n <span style=\"font-weight: bold; color: #c0392b;\">PENGUMUMAN:<\/span> Selama proses Seminar Usulan Penelitian berlangsung mahasiswa TIDAK BOLEH menyediakan makanan dan minuman.\r\n <\/p>\r\n \r\n <form id=\"form-seminar\" novalidate>\r\n <div class=\"form-grid layout-3-col\">\r\n <div class=\"form-group\"><label for=\"nama-seminar\">Nama<span class=\"required-asterisk\">*<\/span><\/label><input type=\"text\" id=\"nama-seminar\" required><\/div>\r\n <div class=\"form-group\"><label for=\"npm-seminar\">NPM<span class=\"required-asterisk\">*<\/span><\/label><input type=\"text\" id=\"npm-seminar\" required><\/div>\r\n <div class=\"form-group\"><label for=\"angkatan-seminar\">Angkatan<span class=\"required-asterisk\">*<\/span><\/label><input type=\"number\" id=\"angkatan-seminar\" placeholder=\"Contoh: 2020\" required><\/div>\r\n <div class=\"form-group\"><label for=\"nomor-wa-seminar\">Nomer WA<span class=\"required-asterisk\">*<\/span><\/label><input type=\"tel\" id=\"nomor-wa-seminar\" required><\/div>\r\n <div class=\"form-group\" style=\"grid-column: span 2 \/ span 2;\"><label for=\"email-seminar\">Email<span class=\"required-asterisk\">*<\/span><\/label><input type=\"email\" id=\"email-seminar\" required><\/div>\r\n <\/div>\r\n <div class=\"form-grid\" style=\"margin-top: 18px;\">\r\n <div class=\"form-group full-width\"><label for=\"bidang-ilmu-seminar\">Bidang Ilmu<span class=\"required-asterisk\">*<\/span><\/label><input type=\"text\" id=\"bidang-ilmu-seminar\" required><\/div>\r\n <div class=\"form-group full-width\"><label for=\"judul-seminar\">Judul<span class=\"required-asterisk\">*<\/span><\/label><textarea id=\"judul-seminar\" rows=\"3\" required><\/textarea><\/div>\r\n <\/div>\r\n <h3 class=\"form-section-title\">Dosen Pembimbing:<\/h3>\r\n <div class=\"form-grid layout-3-col\">\r\n <div class=\"form-group\"><label for=\"pembimbing1-seminar\">Dosen Pembimbing I<span class=\"required-asterisk\">*<\/span><\/label><input type=\"text\" id=\"pembimbing1-seminar\" required><\/div>\r\n <div class=\"form-group\"><label for=\"pembimbing2-seminar\">Dosen Pembimbing II<span class=\"required-asterisk\">*<\/span><\/label><input type=\"text\" id=\"pembimbing2-seminar\" required><\/div>\r\n <div class=\"form-group\"><label for=\"pembimbing3-seminar\">Dosen Pembimbing III<\/label><input type=\"text\" id=\"pembimbing3-seminar\"><\/div>\r\n <\/div>\r\n <h3 class=\"form-section-title\">Dengan ini mengajukan seminar 1 dengan:<\/h3>\r\n <div class=\"form-grid layout-3-col\">\r\n <div class=\"form-group\"><label for=\"hari-tanggal-seminar\">Hari, Tanggal<span class=\"required-asterisk\">*<\/span><\/label><input type=\"date\" id=\"hari-tanggal-seminar\" required><\/div>\r\n <div class=\"form-group\"><label for=\"waktu-seminar\">Waktu<span class=\"required-asterisk\">*<\/span><\/label><input type=\"time\" id=\"waktu-seminar\" required><\/div>\r\n <div class=\"form-group\"><label for=\"lokasi-seminar\">Lokasi<span class=\"required-asterisk\">*<\/span><\/label><input type=\"text\" id=\"lokasi-seminar\" required><\/div>\r\n <\/div>\r\n <div class=\"form-grid\">\r\n <h2 class=\"form-section-upload-title\">Unggah Berkas Persyaratan<\/h2>\r\n <div class=\"form-group\"><label for=\"file-form-pengajuan\">Form pengajuan Seminar UP (pdf, <250kb)<span class=\"required-asterisk\">*<\/span><\/label><input type=\"file\" id=\"file-form-pengajuan\" accept=\".pdf\" required><\/div>\r\n <div class=\"form-group\"><label for=\"file-draft-proposal\">Draft Proposal Bab 1 s\/d 3 (pdf, <1MB)<span class=\"required-asterisk\">*<\/span><\/label><input type=\"file\" id=\"file-draft-proposal\" accept=\".pdf\" required><\/div>\r\n <div class=\"form-group\"><label for=\"file-transkrip\">Transkrip Nilai (pdf, <450kb)<span class=\"required-asterisk\">*<\/span><\/label><input type=\"file\" id=\"file-transkrip\" accept=\".pdf\" required><\/div>\r\n <div class=\"form-group\"><label for=\"file-abstrak\">Abstrak Penelitian (pdf, <250kb)<span class=\"required-asterisk\">*<\/span><\/label><input type=\"file\" id=\"file-abstrak\" accept=\".pdf\" required><\/div>\r\n <div class=\"form-group\"><label for=\"file-form-kesediaan\">Form Kesediaan Menguji (pdf, <250kb)<span class=\"required-asterisk\">*<\/span><\/label><input type=\"file\" id=\"file-form-kesediaan\" accept=\".pdf\" required><\/div>\r\n <div class=\"form-group\"><label for=\"file-kartu-bimbingan\">Kartu Bimbingan (pdf, <1MB)<span class=\"required-asterisk\">*<\/span><\/label><input type=\"file\" id=\"file-kartu-bimbingan\" accept=\".pdf\" required><\/div>\r\n <\/div>\r\n <div class=\"form-group full-width\" style=\"margin-top: 25px;\">\r\n <button type=\"submit\" id=\"submit-button-seminar\">Kirim Pendaftaran<\/button>\r\n <\/div>\r\n <\/form>\r\n<\/div>\r\n\r\n\r\n<div class=\"custom-modal-overlay\" id=\"custom-alert\">\r\n <div class=\"custom-modal-box warning\">\r\n <h4>Peringatan<\/h4>\r\n <p id=\"custom-alert-message\"><\/p>\r\n <button class=\"modal-button\" id=\"custom-alert-close\">OK<\/button>\r\n <\/div>\r\n<\/div>\r\n\r\n<div class=\"custom-modal-overlay\" id=\"custom-success-modal\">\r\n <div class=\"custom-modal-box success\">\r\n <svg class=\"modal-icon success\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 52 52\">\r\n <circle cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" stroke=\"#27ae60\" stroke-width=\"2\"\/>\r\n <path class=\"checkmark\" fill=\"none\" stroke=\"#27ae60\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M14 27l5.917 5.917L38.083 20\"\/>\r\n <\/svg>\r\n <h4>Berhasil!<\/h4>\r\n <p id=\"custom-success-message\"><\/p>\r\n <button class=\"modal-button\" id=\"custom-success-close\">Tutup<\/button>\r\n <\/div>\r\n<\/div>\r\n\r\n<div class=\"loading-overlay\" id=\"loading-animation\">\r\n <div class=\"spinner-box\">\r\n <div class=\"bio-spinner\">\r\n <div class=\"rect1\"><\/div><div class=\"rect2\"><\/div><div class=\"rect3\"><\/div><div class=\"rect4\"><\/div><div class=\"rect5\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <p class=\"loading-text\">Mendaftarkan Seminar...<\/p>\r\n<\/div>\r\n\r\n\r\n<script>\r\n (function() {\r\n const form = document.getElementById('form-seminar');\r\n const submitButton = document.getElementById('submit-button-seminar');\r\n \r\n \/\/ !!! PENTING: Ganti dengan URL Web App BARU Anda dari Apps Script !!!\r\n const WEB_APP_URL = 'https:\/\/script.google.com\/macros\/s\/AKfycby-TRX9bNVvbW9E7ug-CUS6x_-XQ6mw9YQXyE5pJJHslAhSrNtNOcxaBvtbtawZq4ne\/exec';\r\n\r\n const customAlert = document.getElementById('custom-alert');\r\n const customAlertClose = document.getElementById('custom-alert-close');\r\n const customSuccessModal = document.getElementById('custom-success-modal');\r\n const customSuccessClose = document.getElementById('custom-success-close');\r\n const loadingOverlay = document.getElementById('loading-animation');\r\n \r\n function showLoader() { loadingOverlay.classList.add('show'); }\r\n function hideLoader() { loadingOverlay.classList.remove('show'); }\r\n\r\n function showAlert(message) {\r\n document.getElementById('custom-alert-message').textContent = message;\r\n customAlert.classList.add('show');\r\n }\r\n function hideAlert() { customAlert.classList.remove('show'); }\r\n customAlertClose.addEventListener('click', hideAlert);\r\n customAlert.addEventListener('click', (e) => { if (e.target === customAlert) hideAlert(); });\r\n \r\n function showSuccessModal(message) {\r\n document.getElementById('custom-success-message').textContent = message;\r\n customSuccessModal.classList.add('show');\r\n }\r\n function hideSuccessModal() { customSuccessModal.classList.remove('show'); }\r\n customSuccessClose.addEventListener('click', hideSuccessModal);\r\n customSuccessModal.addEventListener('click', (e) => { if (e.target === customSuccessModal) hideSuccessModal(); });\r\n\r\n form.addEventListener('submit', function(e) {\r\n e.preventDefault();\r\n if (!form.checkValidity()) {\r\n showAlert(\"Harap isi semua kolom yang ditandai dengan *\");\r\n return;\r\n }\r\n \r\n submitButton.disabled = true;\r\n showLoader();\r\n\r\n const submissionData = {\r\n nama: document.getElementById('nama-seminar').value,\r\n npm: document.getElementById('npm-seminar').value,\r\n angkatan: document.getElementById('angkatan-seminar').value,\r\n nomorWa: document.getElementById('nomor-wa-seminar').value,\r\n email: document.getElementById('email-seminar').value,\r\n bidangIlmu: document.getElementById('bidang-ilmu-seminar').value,\r\n judul: document.getElementById('judul-seminar').value,\r\n pembimbing1: document.getElementById('pembimbing1-seminar').value,\r\n pembimbing2: document.getElementById('pembimbing2-seminar').value,\r\n pembimbing3: document.getElementById('pembimbing3-seminar').value,\r\n hariTanggal: document.getElementById('hari-tanggal-seminar').value,\r\n waktu: document.getElementById('waktu-seminar').value,\r\n lokasi: document.getElementById('lokasi-seminar').value,\r\n };\r\n\r\n const fileInputs = [\r\n { key: 'fileFormPengajuan', el: document.getElementById('file-form-pengajuan') },\r\n { key: 'fileDraftProposal', el: document.getElementById('file-draft-proposal') },\r\n { key: 'fileTranskrip', el: document.getElementById('file-transkrip') },\r\n { key: 'fileAbstrak', el: document.getElementById('file-abstrak') },\r\n { key: 'fileFormKesediaan', el: document.getElementById('file-form-kesediaan') },\r\n { key: 'fileKartuBimbingan', el: document.getElementById('file-kartu-bimbingan') },\r\n ];\r\n\r\n Promise.all(fileInputs.map(input => readFileAsBase64(input.el.files[0])))\r\n .then(files => {\r\n files.forEach((file, index) => { submissionData[fileInputs[index].key] = file; });\r\n sendData(submissionData);\r\n }).catch(error => handleError(\"Gagal membaca file: \" + error.toString()));\r\n });\r\n\r\n function readFileAsBase64(file) {\r\n return new Promise((resolve, reject) => {\r\n if (!file) { resolve(null); return; }\r\n const reader = new FileReader();\r\n reader.onload = () => resolve({ fileName: file.name, mimeType: file.type, fileData: reader.result.split(',')[1] });\r\n reader.onerror = error => reject(error);\r\n reader.readAsDataURL(file);\r\n });\r\n }\r\n\r\n function sendData(data) {\r\n \/\/ Menggunakan mode no-cors untuk kesederhanaan, seperti formulir sebelumnya\r\n fetch(WEB_APP_URL, { \r\n method: 'POST', \r\n mode: 'no-cors', \r\n cache: 'no-cache', \r\n headers: { 'Content-Type': 'application\/json' }, \r\n redirect: 'follow', \r\n body: JSON.stringify(data) \r\n })\r\n .then(res => handleSuccess(\"Pendaftaran seminar Anda telah berhasil dikirim. Silakan hubungi TU untuk konfirmasi.\"))\r\n .catch(error => handleError(\"\u274c Terjadi kesalahan saat mengirim: \" + error.toString()));\r\n }\r\n\r\n function handleSuccess(message) {\r\n hideLoader();\r\n showSuccessModal(message);\r\n form.reset();\r\n submitButton.disabled = false;\r\n submitButton.textContent = 'Kirim Pendaftaran';\r\n }\r\n\r\n function handleError(message) {\r\n hideLoader();\r\n showAlert(message);\r\n submitButton.disabled = false;\r\n submitButton.textContent = 'Kirim Pendaftaran';\r\n }\r\n })();\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\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>PENDAFTARAN SEMINAR 1 Formulir Pendaftaran Seminar Formulir Pendaftaran Seminar 1 Setelah melakukan pendaftaran online wajib mengkonfirmasi TU akademik untuk diproses (agar sukses submitnya disarankan file besarannya di bawah yg telah […]<\/p>\n","protected":false},"author":14,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-13017","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/biologi.unpad.ac.id\/en\/wp-json\/wp\/v2\/pages\/13017","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/biologi.unpad.ac.id\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/biologi.unpad.ac.id\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/biologi.unpad.ac.id\/en\/wp-json\/wp\/v2\/users\/14"}],"replies":[{"embeddable":true,"href":"https:\/\/biologi.unpad.ac.id\/en\/wp-json\/wp\/v2\/comments?post=13017"}],"version-history":[{"count":0,"href":"https:\/\/biologi.unpad.ac.id\/en\/wp-json\/wp\/v2\/pages\/13017\/revisions"}],"wp:attachment":[{"href":"https:\/\/biologi.unpad.ac.id\/en\/wp-json\/wp\/v2\/media?parent=13017"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}