KENALAN<\/title>\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>\n <style>\n * {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n }\n body {\n background: linear-gradient(135deg, #0c0a0a, #1e1a1a);\n color: #ffffff;\n font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;\n min-height: 100vh;\n display: flex;\n flex-direction: column;\n align-items: center;\n padding: 16px;\n }\n .card {\n width: 100%;\n max-width: 900px;\n background: rgba(241, 241, 247, 0.95);\n color: #000;\n border-radius: 16px;\n padding: 24px 24px 20px;\n box-shadow: 0 12px 40px rgba(218, 8, 8, 0.25);\n border: 1px solid #da0808;\n backdrop-filter: blur(10px);\n transition: transform 0.2s ease, box-shadow 0.2s ease;\n }\n .card:hover {\n transform: translateY(-4px);\n box-shadow: 0 16px 50px rgba(218, 8, 8, 0.35);\n }\n .card h2 {\n margin-bottom: 6px;\n text-align: center;\n color: #1E90FF;\n font-size: 22px;\n font-weight: 600;\n }\n .form-description {\n text-align: center;\n font-size: 13px;\n color: #555;\n margin-bottom: 14px;\n }\n form {\n display: flex;\n flex-direction: column;\n }\n label {\n font-size: 13px;\n margin-bottom: 3px;\n color: #333;\n font-weight: 500;\n }\n input[type=\"text\"],\n input[type=\"date\"],\n input[type=\"tel\"] {\n width: 100%;\n padding: 10px 12px;\n margin-bottom: 10px;\n border: 2px solid #d0d0d0;\n border-radius: 8px;\n background-color: #ffffff;\n font-size: 14px;\n outline: none;\n transition: 0.2s ease;\n }\n input[type=\"text\"]:focus,\n input[type=\"date\"]:focus,\n input[type=\"tel\"]:focus {\n border-color: #1E90FF;\n box-shadow: 0 0 0 2px rgba(30, 144, 255, 0.18);\n }\n input[type=\"tel\"]::placeholder,\n input[type=\"text\"]::placeholder {\n color: #aaaaaa;\n }\n .tel-hint {\n font-size: 11px;\n color: #777;\n margin-top: -4px;\n margin-bottom: 10px;\n display: block;\n }\n \/* Bar keterangan berjalan (marquee) *\/\n .marquee-container {\n position: relative;\n overflow: hidden;\n width: 100%;\n border-radius: 10px;\n background: transparent;\n border: none;\n margin: 0 0 6px 0;\n height: 24px;\n }\n .marquee-text {\n position: absolute;\n white-space: nowrap;\n will-change: transform;\n color: #8a4a00;\n font-size: 12px;\n font-weight: 500;\n padding-left: 100%;\n animation: marquee 30s linear infinite;\n }\n @keyframes marquee {\n 0% { transform: translateX(0); }\n 100% { transform: translateX(-100%); }\n }\n\n input[type=\"submit\"] {\n background: linear-gradient(135deg, #1e90ff, #004b8d);\n color: white;\n font-size: 15px;\n font-weight: 600;\n border: none;\n border-radius: 8px;\n padding: 10px 16px;\n cursor: pointer;\n margin-top: 6px;\n transition: 0.2s ease;\n box-shadow: 0 3px 10px rgba(30, 144, 255, 0.25);\n }\n input[type=\"submit\"]:hover {\n background: linear-gradient(135deg, #004b8d, #002c57);\n transform: translateY(-1px);\n }\n input[type=\"submit\"]:disabled {\n background: #aaaaaa;\n cursor: not-allowed;\n transform: none;\n }\n .status {\n margin-top: 10px;\n padding: 8px 10px;\n border-radius: 8px;\n font-size: 13px;\n text-align: center;\n opacity: 0;\n transform: translateY(6px);\n transition: all 0.3s ease;\n }\n .status.show {\n opacity: 1;\n transform: translateY(0);\n }\n .status.success {\n background: #d4edda;\n color: #155724;\n border: 1px solid #c3e6cb;\n }\n .status.error {\n background: #f8d7da;\n color: #721c24;\n border: 1px solid #f5c6cb;\n }\n #footer {\n margin-top: 20px;\n font-size: 11px;\n color: rgba(255, 255, 255, 0.7);\n text-align: center;\n width: 100%;\n }\n @media (min-width: 1024px) {\n body {\n padding: 28px;\n }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"card\">\n <h2>PERKENALAN<\/h2>\n <p class=\"form-description\">\n Isi data berikut dengan benar\n <\/p>\n\n <form\n action=\"https:\/\/script.google.com\/macros\/s\/AKfycbwnB1znrjngehajhB3uCNYNDXtYwICS0z9pG-B9o8cN0IzZnebOVnLzK0536sAM1duR\/exec\"\n method=\"POST\"\n id=\"dataForm\"\n >\n \n <label for=\"nama\">Nama<\/label>\n <div class=\"marquee-container\">\n <div class=\"marquee-text\">\n Tuliskan nama lengkap saudara sesuai identitas.\n <\/div>\n <\/div>\n <input\n type=\"text\"\n id=\"nama\"\n name=\"nama\"\n placeholder=\"Nama Lengkap\"\n required\n \/>\n\n \n <label for=\"mata_kuliah\">Mata Kuliah \/ Kegiatan<\/label>\n <div class=\"marquee-container\">\n <div class=\"marquee-text\">\n Tulis nama mata kuliah atau kegiatan yang sedang saudara ikuti saat ini.\n <\/div>\n <\/div>\n <input\n type=\"text\"\n id=\"mata_kuliah\"\n name=\"mata_kuliah\"\n placeholder=\"Mata Kuliah \/ Kegiatan\"\n required\n \/>\n\n \n <label for=\"kelas\">Kelas \/ Tempat<\/label>\n <div class=\"marquee-container\">\n <div class=\"marquee-text\">\n Cantumkan kelas perkuliahan atau lokasi\/tempat kegiatan berlangsung.\n <\/div>\n <\/div>\n <input\n type=\"text\"\n id=\"kelas\"\n name=\"kelas\"\n placeholder=\"Kelas \/ Lokasi\"\n required\n \/>\n\n \n <label for=\"harapan\">Harapan, saran, atau keinginan<\/label>\n <div class=\"marquee-container\">\n <div class=\"marquee-text\">\n Sampaikan harapan, saran, atau keinginan saudara dari kelas\/kegiatan ini.\n <\/div>\n <\/div>\n <input\n type=\"text\"\n id=\"harapan\"\n name=\"harapan\"\n placeholder=\"Harapan\/Saran\/Keinginan\"\n required\n \/>\n\n \n <label for=\"no_hp\">Nomor HP<\/label>\n <div class=\"marquee-container\">\n <div class=\"marquee-text\">\n Gunakan nomor HP\/WA aktif agar kami dapat menghubungi saudara\/i apabila diperlukan.\n <\/div>\n <\/div>\n <input\n type=\"tel\"\n id=\"no_hp\"\n name=\"no_hp\"\n placeholder=\"Contoh: 081234567890\"\n pattern=\"[0-9]{10,13}\"\n required\n \/>\n <span class=\"tel-hint\">Minimal 10\u201313 digit angka tanpa spasi.<\/span>\n\n <input type=\"submit\" value=\"Simpan Data\" id=\"btnSubmit\" \/>\n <\/form>\n\n <div class=\"status\" id=\"status\">\n Loading\u2026\n <\/div>\n <\/div>\n\n <div id=\"footer\">\n @ syaifuddin mr\n <\/div>\n\n <script>\n const form = document.getElementById(\"dataForm\");\n const status = document.getElementById(\"status\");\n const btnSubmit = document.getElementById(\"btnSubmit\");\n\n form.addEventListener(\"submit\", async (e) => {\n e.preventDefault();\n\n status.textContent = \"Mengirim data...\";\n status.className = \"status show\";\n btnSubmit.disabled = true;\n\n const formData = new FormData(form);\n\n try {\n const response = await fetch(form.action, {\n method: \"POST\",\n body: formData,\n });\n\n if (response.ok) {\n status.textContent = \"\u2705 Data berhasil disimpan, terima kasih, semoga sukses & berkah\";\n status.className = \"status show success\";\n form.reset();\n } else {\n status.textContent = \"\u274c Gagal mengirim data. Silakan coba lagi.\";\n status.className = \"status show error\";\n }\n } catch (err) {\n status.textContent = \"\u274c Terjadi kesalahan koneksi. Cek internet Anda.\";\n status.className = \"status show error\";\n console.error(\"Error submit:\", err);\n } finally {\n btnSubmit.disabled = false;\n }\n });\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>KENALAN PERKENALAN Isi data berikut dengan benar Nama Tuliskan nama lengkap saudara sesuai identitas. Mata Kuliah \/ Kegiatan Tulis nama mata kuliah atau kegiatan yang sedang saudara ikuti saat ini. Kelas \/ Tempat Cantumkan kelas perkuliahan atau lokasi\/tempat kegiatan berlangsung. Harapan, saran, atau keinginan Sampaikan harapan, saran, atau keinginan saudara dari kelas\/kegiatan ini. Nomor HP […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-62","page","type-page","status-publish","hentry"],"_hostinger_reach_plugin_has_subscription_block":false,"_hostinger_reach_plugin_is_elementor":false,"_links":{"self":[{"href":"https:\/\/online-mr.com\/index.php?rest_route=\/wp\/v2\/pages\/62","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/online-mr.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/online-mr.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/online-mr.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/online-mr.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=62"}],"version-history":[{"count":10,"href":"https:\/\/online-mr.com\/index.php?rest_route=\/wp\/v2\/pages\/62\/revisions"}],"predecessor-version":[{"id":77,"href":"https:\/\/online-mr.com\/index.php?rest_route=\/wp\/v2\/pages\/62\/revisions\/77"}],"wp:attachment":[{"href":"https:\/\/online-mr.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=62"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":62,"date":"2026-04-08T10:01:11","date_gmt":"2026-04-08T03:01:11","guid":{"rendered":"https:\/\/online-mr.com\/?page_id=62"},"modified":"2026-04-08T13:08:17","modified_gmt":"2026-04-08T06:08:17","slug":"kenalan","status":"publish","type":"page","link":"https:\/\/online-mr.com\/?page_id=62","title":{"rendered":"Kenalan"},"content":{"rendered":"\n\n\n\n\n\n \n KENALAN<\/title>\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>\n <style>\n * {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n }\n body {\n background: linear-gradient(135deg, #0c0a0a, #1e1a1a);\n color: #ffffff;\n font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;\n min-height: 100vh;\n display: flex;\n flex-direction: column;\n align-items: center;\n padding: 16px;\n }\n .card {\n width: 100%;\n max-width: 900px;\n background: rgba(241, 241, 247, 0.95);\n color: #000;\n border-radius: 16px;\n padding: 24px 24px 20px;\n box-shadow: 0 12px 40px rgba(218, 8, 8, 0.25);\n border: 1px solid #da0808;\n backdrop-filter: blur(10px);\n transition: transform 0.2s ease, box-shadow 0.2s ease;\n }\n .card:hover {\n transform: translateY(-4px);\n box-shadow: 0 16px 50px rgba(218, 8, 8, 0.35);\n }\n .card h2 {\n margin-bottom: 6px;\n text-align: center;\n color: #1E90FF;\n font-size: 22px;\n font-weight: 600;\n }\n .form-description {\n text-align: center;\n font-size: 13px;\n color: #555;\n margin-bottom: 14px;\n }\n form {\n display: flex;\n flex-direction: column;\n }\n label {\n font-size: 13px;\n margin-bottom: 3px;\n color: #333;\n font-weight: 500;\n }\n input[type=\"text\"],\n input[type=\"date\"],\n input[type=\"tel\"] {\n width: 100%;\n padding: 10px 12px;\n margin-bottom: 10px;\n border: 2px solid #d0d0d0;\n border-radius: 8px;\n background-color: #ffffff;\n font-size: 14px;\n outline: none;\n transition: 0.2s ease;\n }\n input[type=\"text\"]:focus,\n input[type=\"date\"]:focus,\n input[type=\"tel\"]:focus {\n border-color: #1E90FF;\n box-shadow: 0 0 0 2px rgba(30, 144, 255, 0.18);\n }\n input[type=\"tel\"]::placeholder,\n input[type=\"text\"]::placeholder {\n color: #aaaaaa;\n }\n .tel-hint {\n font-size: 11px;\n color: #777;\n margin-top: -4px;\n margin-bottom: 10px;\n display: block;\n }\n \/* Bar keterangan berjalan (marquee) *\/\n .marquee-container {\n position: relative;\n overflow: hidden;\n width: 100%;\n border-radius: 10px;\n background: transparent;\n border: none;\n margin: 0 0 6px 0;\n height: 24px;\n }\n .marquee-text {\n position: absolute;\n white-space: nowrap;\n will-change: transform;\n color: #8a4a00;\n font-size: 12px;\n font-weight: 500;\n padding-left: 100%;\n animation: marquee 30s linear infinite;\n }\n @keyframes marquee {\n 0% { transform: translateX(0); }\n 100% { transform: translateX(-100%); }\n }\n\n input[type=\"submit\"] {\n background: linear-gradient(135deg, #1e90ff, #004b8d);\n color: white;\n font-size: 15px;\n font-weight: 600;\n border: none;\n border-radius: 8px;\n padding: 10px 16px;\n cursor: pointer;\n margin-top: 6px;\n transition: 0.2s ease;\n box-shadow: 0 3px 10px rgba(30, 144, 255, 0.25);\n }\n input[type=\"submit\"]:hover {\n background: linear-gradient(135deg, #004b8d, #002c57);\n transform: translateY(-1px);\n }\n input[type=\"submit\"]:disabled {\n background: #aaaaaa;\n cursor: not-allowed;\n transform: none;\n }\n .status {\n margin-top: 10px;\n padding: 8px 10px;\n border-radius: 8px;\n font-size: 13px;\n text-align: center;\n opacity: 0;\n transform: translateY(6px);\n transition: all 0.3s ease;\n }\n .status.show {\n opacity: 1;\n transform: translateY(0);\n }\n .status.success {\n background: #d4edda;\n color: #155724;\n border: 1px solid #c3e6cb;\n }\n .status.error {\n background: #f8d7da;\n color: #721c24;\n border: 1px solid #f5c6cb;\n }\n #footer {\n margin-top: 20px;\n font-size: 11px;\n color: rgba(255, 255, 255, 0.7);\n text-align: center;\n width: 100%;\n }\n @media (min-width: 1024px) {\n body {\n padding: 28px;\n }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"card\">\n <h2>PERKENALAN<\/h2>\n <p class=\"form-description\">\n Isi data berikut dengan benar\n <\/p>\n\n <form\n action=\"https:\/\/script.google.com\/macros\/s\/AKfycbwnB1znrjngehajhB3uCNYNDXtYwICS0z9pG-B9o8cN0IzZnebOVnLzK0536sAM1duR\/exec\"\n method=\"POST\"\n id=\"dataForm\"\n >\n \n <label for=\"nama\">Nama<\/label>\n <div class=\"marquee-container\">\n <div class=\"marquee-text\">\n Tuliskan nama lengkap saudara sesuai identitas.\n <\/div>\n <\/div>\n <input\n type=\"text\"\n id=\"nama\"\n name=\"nama\"\n placeholder=\"Nama Lengkap\"\n required\n \/>\n\n \n <label for=\"mata_kuliah\">Mata Kuliah \/ Kegiatan<\/label>\n <div class=\"marquee-container\">\n <div class=\"marquee-text\">\n Tulis nama mata kuliah atau kegiatan yang sedang saudara ikuti saat ini.\n <\/div>\n <\/div>\n <input\n type=\"text\"\n id=\"mata_kuliah\"\n name=\"mata_kuliah\"\n placeholder=\"Mata Kuliah \/ Kegiatan\"\n required\n \/>\n\n \n <label for=\"kelas\">Kelas \/ Tempat<\/label>\n <div class=\"marquee-container\">\n <div class=\"marquee-text\">\n Cantumkan kelas perkuliahan atau lokasi\/tempat kegiatan berlangsung.\n <\/div>\n <\/div>\n <input\n type=\"text\"\n id=\"kelas\"\n name=\"kelas\"\n placeholder=\"Kelas \/ Lokasi\"\n required\n \/>\n\n \n <label for=\"harapan\">Harapan, saran, atau keinginan<\/label>\n <div class=\"marquee-container\">\n <div class=\"marquee-text\">\n Sampaikan harapan, saran, atau keinginan saudara dari kelas\/kegiatan ini.\n <\/div>\n <\/div>\n <input\n type=\"text\"\n id=\"harapan\"\n name=\"harapan\"\n placeholder=\"Harapan\/Saran\/Keinginan\"\n required\n \/>\n\n \n <label for=\"no_hp\">Nomor HP<\/label>\n <div class=\"marquee-container\">\n <div class=\"marquee-text\">\n Gunakan nomor HP\/WA aktif agar kami dapat menghubungi saudara\/i apabila diperlukan.\n <\/div>\n <\/div>\n <input\n type=\"tel\"\n id=\"no_hp\"\n name=\"no_hp\"\n placeholder=\"Contoh: 081234567890\"\n pattern=\"[0-9]{10,13}\"\n required\n \/>\n <span class=\"tel-hint\">Minimal 10\u201313 digit angka tanpa spasi.<\/span>\n\n <input type=\"submit\" value=\"Simpan Data\" id=\"btnSubmit\" \/>\n <\/form>\n\n <div class=\"status\" id=\"status\">\n Loading\u2026\n <\/div>\n <\/div>\n\n <div id=\"footer\">\n @ syaifuddin mr\n <\/div>\n\n <script>\n const form = document.getElementById(\"dataForm\");\n const status = document.getElementById(\"status\");\n const btnSubmit = document.getElementById(\"btnSubmit\");\n\n form.addEventListener(\"submit\", async (e) => {\n e.preventDefault();\n\n status.textContent = \"Mengirim data...\";\n status.className = \"status show\";\n btnSubmit.disabled = true;\n\n const formData = new FormData(form);\n\n try {\n const response = await fetch(form.action, {\n method: \"POST\",\n body: formData,\n });\n\n if (response.ok) {\n status.textContent = \"\u2705 Data berhasil disimpan, terima kasih, semoga sukses & berkah\";\n status.className = \"status show success\";\n form.reset();\n } else {\n status.textContent = \"\u274c Gagal mengirim data. Silakan coba lagi.\";\n status.className = \"status show error\";\n }\n } catch (err) {\n status.textContent = \"\u274c Terjadi kesalahan koneksi. Cek internet Anda.\";\n status.className = \"status show error\";\n console.error(\"Error submit:\", err);\n } finally {\n btnSubmit.disabled = false;\n }\n });\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>KENALAN PERKENALAN Isi data berikut dengan benar Nama Tuliskan nama lengkap saudara sesuai identitas. Mata Kuliah \/ Kegiatan Tulis nama mata kuliah atau kegiatan yang sedang saudara ikuti saat ini. Kelas \/ Tempat Cantumkan kelas perkuliahan atau lokasi\/tempat kegiatan berlangsung. Harapan, saran, atau keinginan Sampaikan harapan, saran, atau keinginan saudara dari kelas\/kegiatan ini. Nomor HP […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-62","page","type-page","status-publish","hentry"],"_hostinger_reach_plugin_has_subscription_block":false,"_hostinger_reach_plugin_is_elementor":false,"_links":{"self":[{"href":"https:\/\/online-mr.com\/index.php?rest_route=\/wp\/v2\/pages\/62","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/online-mr.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/online-mr.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/online-mr.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/online-mr.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=62"}],"version-history":[{"count":10,"href":"https:\/\/online-mr.com\/index.php?rest_route=\/wp\/v2\/pages\/62\/revisions"}],"predecessor-version":[{"id":77,"href":"https:\/\/online-mr.com\/index.php?rest_route=\/wp\/v2\/pages\/62\/revisions\/77"}],"wp:attachment":[{"href":"https:\/\/online-mr.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=62"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}