MCDI \ubca0\ud2b8\ub0a8 \uc815\uc218 \uc2dc\uc2a4\ud15c \uc138\ubbf8\ub098 | \ud55c\uad6d\uc815\ubd80 \uae30\uc220\uc9c0\uc6d0 \uc0ac\uc5c5<\/title>\r\n <style>\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n\r\n body {\r\n font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\r\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\r\n min-height: 100vh;\r\n color: #333;\r\n }\r\n\r\n .container {\r\n max-width: 480px;\r\n margin: 0 auto;\r\n background: white;\r\n min-height: 100vh;\r\n }\r\n\r\n \/* \ud5e4\ub354 \uc139\uc158 *\/\r\n .header {\r\n background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);\r\n color: white;\r\n padding: 30px 20px;\r\n text-align: center;\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n .header::before {\r\n content: '';\r\n position: absolute;\r\n top: -50%;\r\n right: -50%;\r\n width: 200%;\r\n height: 200%;\r\n background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);\r\n animation: pulse 3s ease-in-out infinite;\r\n }\r\n\r\n @keyframes pulse {\r\n 0%, 100% { transform: scale(1); }\r\n 50% { transform: scale(1.1); }\r\n }\r\n\r\n .gov-badge {\r\n display: inline-block;\r\n background: rgba(255,255,255,0.2);\r\n padding: 8px 16px;\r\n border-radius: 20px;\r\n font-size: 12px;\r\n margin-bottom: 15px;\r\n backdrop-filter: blur(10px);\r\n }\r\n\r\n h1 {\r\n font-size: 28px;\r\n font-weight: 700;\r\n margin-bottom: 10px;\r\n text-shadow: 2px 2px 4px rgba(0,0,0,0.2);\r\n }\r\n\r\n .subtitle {\r\n font-size: 16px;\r\n opacity: 0.95;\r\n line-height: 1.5;\r\n }\r\n\r\n \/* \ud0c0\uc774\uba38 \uc139\uc158 *\/\r\n .timer-section {\r\n background: #f8f9fa;\r\n padding: 25px 20px;\r\n border-bottom: 1px solid #e9ecef;\r\n }\r\n\r\n .timer-title {\r\n text-align: center;\r\n color: #495057;\r\n font-size: 14px;\r\n margin-bottom: 15px;\r\n }\r\n\r\n .timer {\r\n display: flex;\r\n justify-content: center;\r\n gap: 15px;\r\n }\r\n\r\n .timer-item {\r\n background: white;\r\n padding: 15px;\r\n border-radius: 12px;\r\n box-shadow: 0 2px 10px rgba(0,0,0,0.08);\r\n text-align: center;\r\n min-width: 70px;\r\n }\r\n\r\n .timer-value {\r\n font-size: 28px;\r\n font-weight: 700;\r\n color: #1e3c72;\r\n }\r\n\r\n .timer-label {\r\n font-size: 11px;\r\n color: #6c757d;\r\n margin-top: 5px;\r\n }\r\n\r\n \/* \ub4f1\ub85d \ud604\ud669 *\/\r\n .registration-status {\r\n background: white;\r\n padding: 20px;\r\n margin: 20px;\r\n border-radius: 15px;\r\n box-shadow: 0 4px 15px rgba(0,0,0,0.1);\r\n }\r\n\r\n .status-bar {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n margin-bottom: 10px;\r\n }\r\n\r\n .status-text {\r\n font-size: 14px;\r\n color: #495057;\r\n }\r\n\r\n .status-count {\r\n font-size: 18px;\r\n font-weight: 700;\r\n color: #1e3c72;\r\n }\r\n\r\n .progress-bar {\r\n width: 100%;\r\n height: 8px;\r\n background: #e9ecef;\r\n border-radius: 10px;\r\n overflow: hidden;\r\n }\r\n\r\n .progress-fill {\r\n height: 100%;\r\n background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);\r\n border-radius: 10px;\r\n transition: width 0.3s ease;\r\n }\r\n\r\n \/* \uc774\ubca4\ud2b8 \uc815\ubcf4 *\/\r\n .event-info {\r\n padding: 30px 20px;\r\n }\r\n\r\n .info-card {\r\n background: #f8f9fa;\r\n padding: 25px;\r\n border-radius: 15px;\r\n margin-bottom: 20px;\r\n }\r\n\r\n .info-title {\r\n font-size: 18px;\r\n font-weight: 600;\r\n color: #1e3c72;\r\n margin-bottom: 15px;\r\n display: flex;\r\n align-items: center;\r\n }\r\n\r\n .info-icon {\r\n width: 30px;\r\n height: 30px;\r\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\r\n border-radius: 8px;\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n margin-right: 10px;\r\n color: white;\r\n }\r\n\r\n .info-item {\r\n display: flex;\r\n align-items: center;\r\n margin-bottom: 12px;\r\n padding-left: 40px;\r\n }\r\n\r\n .info-label {\r\n color: #6c757d;\r\n font-size: 14px;\r\n margin-right: 10px;\r\n }\r\n\r\n .info-value {\r\n color: #333;\r\n font-size: 15px;\r\n font-weight: 500;\r\n }\r\n\r\n \/* \uc2ac\ub77c\uc774\ub354 *\/\r\n .slider-container {\r\n padding: 0 20px 30px;\r\n }\r\n\r\n .slider {\r\n position: relative;\r\n width: 100%;\r\n height: 250px;\r\n border-radius: 15px;\r\n overflow: hidden;\r\n box-shadow: 0 5px 20px rgba(0,0,0,0.15);\r\n }\r\n\r\n .slide {\r\n position: absolute;\r\n width: 100%;\r\n height: 100%;\r\n opacity: 0;\r\n transition: opacity 1s ease-in-out;\r\n }\r\n\r\n .slide.active {\r\n opacity: 1;\r\n }\r\n\r\n .slide img {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n }\r\n\r\n .slide-caption {\r\n position: absolute;\r\n bottom: 0;\r\n left: 0;\r\n right: 0;\r\n background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);\r\n color: white;\r\n padding: 20px;\r\n font-size: 14px;\r\n }\r\n\r\n .slider-dots {\r\n display: flex;\r\n justify-content: center;\r\n gap: 8px;\r\n margin-top: 15px;\r\n }\r\n\r\n .dot {\r\n width: 8px;\r\n height: 8px;\r\n border-radius: 50%;\r\n background: #dee2e6;\r\n cursor: pointer;\r\n transition: background 0.3s;\r\n }\r\n\r\n .dot.active {\r\n background: #667eea;\r\n width: 24px;\r\n border-radius: 4px;\r\n }\r\n\r\n \/* \ube44\ub514\uc624 \uc139\uc158 *\/\r\n .video-section {\r\n padding: 0 20px 30px;\r\n }\r\n\r\n .video-wrapper {\r\n position: relative;\r\n padding-bottom: 56.25%;\r\n height: 0;\r\n overflow: hidden;\r\n border-radius: 15px;\r\n box-shadow: 0 5px 20px rgba(0,0,0,0.15);\r\n }\r\n\r\n .video-wrapper iframe {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n border: none;\r\n }\r\n\r\n \/* \ub4f1\ub85d \ud3fc *\/\r\n .registration-form {\r\n padding: 30px 20px;\r\n background: #f8f9fa;\r\n }\r\n\r\n .form-title {\r\n font-size: 22px;\r\n font-weight: 700;\r\n color: #1e3c72;\r\n text-align: center;\r\n margin-bottom: 25px;\r\n }\r\n\r\n .form-group {\r\n margin-bottom: 20px;\r\n }\r\n\r\n label {\r\n display: block;\r\n font-size: 14px;\r\n color: #495057;\r\n margin-bottom: 8px;\r\n font-weight: 500;\r\n }\r\n\r\n input {\r\n width: 100%;\r\n padding: 15px;\r\n border: 2px solid #e9ecef;\r\n border-radius: 10px;\r\n font-size: 16px;\r\n transition: all 0.3s;\r\n background: white;\r\n }\r\n\r\n input:focus {\r\n outline: none;\r\n border-color: #667eea;\r\n box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);\r\n }\r\n\r\n .submit-btn {\r\n width: 100%;\r\n padding: 18px;\r\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\r\n color: white;\r\n border: none;\r\n border-radius: 12px;\r\n font-size: 18px;\r\n font-weight: 600;\r\n cursor: pointer;\r\n transition: transform 0.2s, box-shadow 0.2s;\r\n margin-top: 10px;\r\n }\r\n\r\n .submit-btn:hover {\r\n transform: translateY(-2px);\r\n box-shadow: 0 10px 25px rgba(102, 126, 234, 0.3);\r\n }\r\n\r\n .submit-btn:active {\r\n transform: translateY(0);\r\n }\r\n\r\n .submit-btn:disabled {\r\n background: #6c757d;\r\n cursor: not-allowed;\r\n transform: none;\r\n }\r\n\r\n \/* \ud478\ud130 *\/\r\n .footer {\r\n background: #1e3c72;\r\n color: white;\r\n padding: 30px 20px;\r\n text-align: center;\r\n }\r\n\r\n .footer-logo {\r\n font-size: 20px;\r\n font-weight: 700;\r\n margin-bottom: 10px;\r\n }\r\n\r\n .footer-text {\r\n font-size: 13px;\r\n opacity: 0.8;\r\n line-height: 1.6;\r\n }\r\n\r\n \/* \uc131\uacf5 \uba54\uc2dc\uc9c0 *\/\r\n .success-message {\r\n display: none;\r\n position: fixed;\r\n top: 50%;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n background: white;\r\n padding: 30px;\r\n border-radius: 20px;\r\n box-shadow: 0 20px 60px rgba(0,0,0,0.3);\r\n z-index: 1000;\r\n text-align: center;\r\n max-width: 90%;\r\n width: 350px;\r\n }\r\n\r\n .success-icon {\r\n width: 60px;\r\n height: 60px;\r\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\r\n border-radius: 50%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n margin: 0 auto 20px;\r\n font-size: 30px;\r\n }\r\n\r\n .overlay {\r\n display: none;\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n background: rgba(0,0,0,0.5);\r\n z-index: 999;\r\n }\r\n\r\n \/* \ubc18\uc751\ud615 *\/\r\n @media (max-width: 380px) {\r\n h1 { font-size: 24px; }\r\n .timer-value { font-size: 24px; }\r\n .timer-item { min-width: 60px; padding: 12px; }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"container\">\r\n \r\n <div class=\"header\">\r\n <div class=\"gov-badge\">Proyek Dukungan Teknologi Pemerintah Korea<\/div>\r\n <h1>MCDI Membuka Masa Depan<\/h1>\r\n <div class=\"subtitle\">\r\n Sistem Pemurnian Air yang Dioptimalkan di Vietnam<br>\r\n Teknologi pemurnian air 100 ton per hari\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"timer-section\">\r\n <div class=\"timer-title\">Sampai seminar dimulai<\/div>\r\n <div class=\"timer\" id=\"countdown\">\r\n <div class=\"timer-item\">\r\n <div class=\"timer-value\" id=\"days\">0<\/div>\r\n <div class=\"timer-label\">Hari<\/div>\r\n <\/div>\r\n <div class=\"timer-item\">\r\n <div class=\"timer-value\" id=\"hours\">0<\/div>\r\n <div class=\"timer-label\">jam<\/div>\r\n <\/div>\r\n <div class=\"timer-item\">\r\n <div class=\"timer-value\" id=\"minutes\">0<\/div>\r\n <div class=\"timer-label\">menit<\/div>\r\n <\/div>\r\n <div class=\"timer-item\">\r\n <div class=\"timer-value\" id=\"seconds\">0<\/div>\r\n <div class=\"timer-label\">lilin<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"registration-status\">\r\n <div class=\"status-bar\">\r\n <span class=\"status-text\">Jumlah orang terdaftar saat ini<\/span>\r\n <span class=\"status-count\"><span id=\"currentCount\">12<\/span> \/ 50 orang<\/span>\r\n <\/div>\r\n <div class=\"progress-bar\">\r\n <div class=\"progress-fill\" id=\"progressBar\" style=\"width: 24%\"><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"event-info\">\r\n <div class=\"info-card\">\r\n <div class=\"info-title\">\r\n <span class=\"info-icon\">\ud83d\udcc5<\/span>\r\n Informasi Acara\r\n <\/div>\r\n <div class=\"info-item\">\r\n <span class=\"info-label\">tanggal:<\/span>\r\n <span class=\"info-value\">3 November 2025, pukul 17.00 - 20.00<\/span>\r\n <\/div>\r\n <div class=\"info-item\">\r\n <span class=\"info-label\">lokasi:<\/span>\r\n <span class=\"info-value\">Situs instalasi percontohan Lao Cai<\/span>\r\n <\/div>\r\n <div class=\"info-item\">\r\n <span class=\"info-label\">rincian:<\/span>\r\n <span class=\"info-value\">Seminar & Makan Malam Sistem Bebas O2&B<\/span>\r\n <\/div>\r\n <div class=\"info-item\">\r\n <span class=\"info-label\">kebun:<\/span>\r\n <span class=\"info-value\">Terbatas untuk 50 orang pertama<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"slider-container\">\r\n <div class=\"slider\">\r\n <div class=\"slide active\">\r\n <img decoding=\"async\" src=\"https:\/\/via.placeholder.com\/440x250\/4A90E2\/FFFFFF?text=\uc815\uc218+\uc2dc\uc2a4\ud15c+\uc804\uacbd\" alt=\"\uc815\uc218 \uc2dc\uc2a4\ud15c\">\r\n <div class=\"slide-caption\">Sistem pemurnian air canggih<\/div>\r\n <\/div>\r\n <div class=\"slide\">\r\n <img decoding=\"async\" src=\"https:\/\/via.placeholder.com\/440x250\/7B68EE\/FFFFFF?text=\uae30\uc220+\uc124\uba85\ud68c\" alt=\"\uae30\uc220 \uc124\uba85\">\r\n <div class=\"slide-caption\">Sesi Pengarahan Teknis Ahli<\/div>\r\n <\/div>\r\n <div class=\"slide\">\r\n <img decoding=\"async\" src=\"https:\/\/via.placeholder.com\/440x250\/9370DB\/FFFFFF?text=\ud604\uc7a5+\uc124\uce58\" alt=\"\ud604\uc7a5 \uc124\uce58\">\r\n <div class=\"slide-caption\">Instalasi situs Lao Cai<\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"slider-dots\">\r\n <span class=\"dot active\" onclick=\"currentSlide(1)\"><\/span>\r\n <span class=\"dot\" onclick=\"currentSlide(2)\"><\/span>\r\n <span class=\"dot\" onclick=\"currentSlide(3)\"><\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"video-section\">\r\n <div class=\"info-title\" style=\"margin-bottom: 15px;\">\r\n <span class=\"info-icon\">\ud83c\udfa5<\/span>\r\n Video pengenalan teknologi\r\n <\/div>\r\n <div class=\"video-wrapper\">\r\n <iframe src=\"https:\/\/www.youtube.com\/embed\/dQw4w9WgXcQ\" \r\n allowfullscreen><\/iframe>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"registration-form\">\r\n <h2 class=\"form-title\">Pendaftaran<\/h2>\r\n <form id=\"registrationForm\" action=\"\">\r\n <div class=\"form-group\">\r\n <label for=\"company\">Nama Perusahaan\/Organisasi *<\/label>\r\n <input type=\"text\" id=\"company\" name=\"company\" required>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label for=\"position\">Judul *<\/label>\r\n <input type=\"text\" id=\"position\" name=\"position\" required>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label for=\"name\">nama *<\/label>\r\n <input type=\"text\" id=\"name\" name=\"name\" required>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label for=\"phone\">kontak *<\/label>\r\n <input type=\"tel\" id=\"phone\" name=\"phone\" placeholder=\"010-0000-0000\" required>\r\n <\/div>\r\n <button type=\"submit\" class=\"submit-btn\" id=\"submitBtn\">Daftar untuk berpartisipasi<\/button>\r\n <input type=\"hidden\" name=\"trp-form-language\" value=\"id\"\/><\/form>\r\n <\/div>\r\n\r\n \r\n <div class=\"footer\">\r\n <div class=\"footer-logo\">MCDI<\/div>\r\n <div class=\"footer-text\">\r\n Proyek dukungan teknologi pemerintah Korea<br>\r\n Sistem Pemurnian Air yang Dioptimalkan di Vietnam<br>\r\n \u00a9 2024 MCDI. Seluruh hak cipta dilindungi undang-undang.\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"overlay\" id=\"overlay\"><\/div>\r\n <div class=\"success-message\" id=\"successMessage\">\r\n <div class=\"success-icon\">\u2713<\/div>\r\n <h3 style=\"margin-bottom: 10px;\">Pendaftaran selesai!<\/h3>\r\n <p style=\"color: #6c757d; font-size: 14px;\">Aplikasi partisipasi Anda telah diterima dengan sukses.<\/p>\r\n <\/div>\r\n\r\n <script>\r\n \/\/ \uce74\uc6b4\ud2b8\ub2e4\uc6b4 \ud0c0\uc774\uba38\r\n function updateCountdown() {\r\n const targetDate = new Date('2025-11-03T17:00:00+09:00');\r\n const now = new Date();\r\n const difference = targetDate - now;\r\n\r\n if (difference > 0) {\r\n const days = Math.floor(difference \/ (1000 * 60 * 60 * 24));\r\n const hours = Math.floor((difference % (1000 * 60 * 60 * 24)) \/ (1000 * 60 * 60));\r\n const minutes = Math.floor((difference % (1000 * 60 * 60)) \/ (1000 * 60));\r\n const seconds = Math.floor((difference % (1000 * 60)) \/ 1000);\r\n\r\n document.getElementById('days').textContent = days;\r\n document.getElementById('hours').textContent = hours;\r\n document.getElementById('minutes').textContent = minutes;\r\n document.getElementById('seconds').textContent = seconds;\r\n } else {\r\n document.getElementById('countdown').innerHTML = '<div style=\"font-size: 20px; color: #e74c3c;\">\ud589\uc0ac\uac00 \uc885\ub8cc\ub418\uc5c8\uc2b5\ub2c8\ub2e4<\/div>';\r\n }\r\n }\r\n\r\n setInterval(updateCountdown, 1000);\r\n updateCountdown();\r\n\r\n \/\/ \uc774\ubbf8\uc9c0 \uc2ac\ub77c\uc774\ub354\r\n let slideIndex = 1;\r\n \r\n function currentSlide(n) {\r\n showSlide(slideIndex = n);\r\n }\r\n\r\n function showSlide(n) {\r\n const slides = document.getElementsByClassName('slide');\r\n const dots = document.getElementsByClassName('dot');\r\n \r\n if (n > slides.length) slideIndex = 1;\r\n if (n < 1) slideIndex = slides.length;\r\n \r\n for (let i = 0; i < slides.length; i++) {\r\n slides[i].classList.remove('active');\r\n }\r\n \r\n for (let i = 0; i < dots.length; i++) {\r\n dots[i].classList.remove('active');\r\n }\r\n \r\n slides[slideIndex - 1].classList.add('active');\r\n dots[slideIndex - 1].classList.add('active');\r\n }\r\n\r\n \/\/ \uc790\ub3d9 \uc2ac\ub77c\uc774\ub4dc\r\n setInterval(() => {\r\n slideIndex++;\r\n showSlide(slideIndex);\r\n }, 4000);\r\n\r\n \/\/ \ub4f1\ub85d\uc790 \uc218 \uad00\ub9ac (localStorage \uc0ac\uc6a9)\r\n let registrationCount = parseInt(localStorage.getItem('registrationCount') || '12');\r\n \r\n function updateRegistrationCount() {\r\n document.getElementById('currentCount').textContent = registrationCount;\r\n const percentage = (registrationCount \/ 50) * 100;\r\n document.getElementById('progressBar').style.width = percentage + '%';\r\n \r\n if (registrationCount >= 50) {\r\n document.getElementById('submitBtn').disabled = true;\r\n document.getElementById('submitBtn').textContent = '\uc815\uc6d0 \ub9c8\uac10';\r\n }\r\n }\r\n\r\n updateRegistrationCount();\r\n\r\n \/\/ \ud3fc \uc81c\ucd9c \ucc98\ub9ac\r\n document.getElementById('registrationForm').addEventListener('submit', function(e) {\r\n e.preventDefault();\r\n \r\n if (registrationCount >= 50) {\r\n alert('\uc8c4\uc1a1\ud569\ub2c8\ub2e4. \uc815\uc6d0\uc774 \ub9c8\uac10\ub418\uc5c8\uc2b5\ub2c8\ub2e4.');\r\n return;\r\n }\r\n\r\n \/\/ \ud3fc \ub370\uc774\ud130 \uc218\uc9d1\r\n const formData = {\r\n company: document.getElementById('company').value,\r\n position: document.getElementById('position').value,\r\n name: document.getElementById('name').value,\r\n phone: document.getElementById('phone').value,\r\n timestamp: new Date().toISOString()\r\n };\r\n\r\n \/\/ localStorage\uc5d0 \uc800\uc7a5 (\uc2e4\uc81c\ub85c\ub294 \uc11c\ubc84\ub85c \uc804\uc1a1)\r\n let registrations = JSON.parse(localStorage.getItem('registrations') || '[]');\r\n registrations.push(formData);\r\n localStorage.setItem('registrations', JSON.stringify(registrations));\r\n\r\n \/\/ \ub4f1\ub85d\uc790 \uc218 \uc99d\uac00\r\n registrationCount++;\r\n localStorage.setItem('registrationCount', registrationCount);\r\n updateRegistrationCount();\r\n\r\n \/\/ \uc131\uacf5 \uba54\uc2dc\uc9c0 \ud45c\uc2dc\r\n document.getElementById('overlay').style.display = 'block';\r\n document.getElementById('successMessage').style.display = 'block';\r\n\r\n \/\/ \ud3fc \ucd08\uae30\ud654\r\n this.reset();\r\n\r\n \/\/ 3\ucd08 \ud6c4 \uba54\uc2dc\uc9c0 \uc228\uae30\uae30\r\n setTimeout(() => {\r\n document.getElementById('overlay').style.display = 'none';\r\n document.getElementById('successMessage').style.display = 'none';\r\n }, 3000);\r\n\r\n console.log('\ub4f1\ub85d \ub370\uc774\ud130:', formData);\r\n console.log('\uc804\uccb4 \ub4f1\ub85d \ubaa9\ub85d:', registrations);\r\n });\r\n\r\n \/\/ \uc804\ud654\ubc88\ud638 \ud3ec\ub9f7\ud305\r\n document.getElementById('phone').addEventListener('input', function(e) {\r\n let value = e.target.value.replace(\/[^0-9]\/g, '');\r\n if (value.length > 3 && value.length <= 7) {\r\n value = value.slice(0, 3) + '-' + value.slice(3);\r\n } else if (value.length > 7) {\r\n value = value.slice(0, 3) + '-' + value.slice(3, 7) + '-' + value.slice(7, 11);\r\n }\r\n e.target.value = value;\r\n });\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\n``` Fitur utama landing page yang kami buat: ## \u2728 Desain & UX - **Optimasi Seluler**: Desain responsif yang berfungsi sempurna di semua perangkat seluler - **Gradien Mewah**: Kombinasi warna ungu dan biru yang canggih - **Animasi Halus**: Pengalaman interaktif dengan efek hover dan transisi - **Keterbacaan yang Dioptimalkan**: Ukuran font yang ramah seluler (16 piksel atau lebih) dan ruang putih yang cukup ## \ud83d\udd27 Fitur Utama 1. **Hitung Mundur Waktu Nyata**: Menghitung secara otomatis hingga pukul 17.00 pada tanggal 3 November 2025 2. **Kelola jumlah pendaftar**: Dibatasi hingga 50, menampilkan kemajuan waktu nyata 3. **Penggeser Gambar**: Beralih secara otomatis di antara 3 gambar (interval 4 detik) 4. **Video YouTube**: Diputar sempurna dengan iframe responsif 5. **Penyimpanan Data**: Menyimpan informasi pendaftaran menggunakan localStorage ## \ud83d\udcf1 Optimasi Seluler - Ukuran tombol yang ramah sentuhan (minimal 44 piksel) - Efek fokus otomatis untuk kolom input - Pemformatan otomatis nomor telepon (010-0000-0000) - Pengguliran dan respons sentuhan yang lancar ## \ud83d\udcbe Manajemen Data - Semua data registrasi disimpan di penyimpanan lokal peramban - Data registrasi dapat diperiksa di konsol - Registrasi otomatis diblokir ketika jumlah orang melebihi 50. Halaman ini berfungsi penuh dan siap digunakan. Untuk pengoperasian yang sebenarnya, Anda dapat mengintegrasikannya dengan API server, alih-alih penyimpanan lokal.\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>MCDI \ubca0\ud2b8\ub0a8 \uc815\uc218 \uc2dc\uc2a4\ud15c \uc138\ubbf8\ub098 | \ud55c\uad6d\uc815\ubd80 \uae30\uc220\uc9c0\uc6d0 \uc0ac\uc5c5 \ud83c\uddf0\ud83c\uddf7 \ud55c\uad6d\uc815\ubd80 \uae30\uc220\uc9c0\uc6d0 \uc0ac\uc5c5 \ubbf8\ub798\ub97c \uc5ec\ub294 MCDI \ubca0\ud2b8\ub0a8 \ucd5c\uc801\ud654 \uc815\uc218 \uc2dc\uc2a4\ud15c 1\uc77c 100\ud1a4 \uc815\uc218 \ucc98\ub9ac \uae30\uc220 \uc138\ubbf8\ub098 \uc2dc\uc791\uae4c\uc9c0 0 \uc77c 0 \uc2dc\uac04 0 \ubd84 0 \ucd08 \ud604\uc7ac \ub4f1\ub85d \uc778\uc6d0 12 \/ 50\uba85 \ud83d\udcc5 \ud589\uc0ac \uc815\ubcf4 \uc77c\uc2dc: 2025\ub144 11\uc6d4 3\uc77c \uc624\ud6c4 5\uc2dc~8\uc2dc \uc7a5\uc18c: \ub77c\uc624\uae4c\uc774 \uc2dc\ubc94\uc124\uce58 \ud604\uc7a5 \ub0b4\uc6a9: […]<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"wf_page_folders":[],"class_list":["post-3648","page","type-page","status-publish","format-standard","hentry"],"acf":[],"_hostinger_reach_plugin_has_subscription_block":false,"_hostinger_reach_plugin_is_elementor":false,"_links":{"self":[{"href":"https:\/\/cellbio.shop\/id\/wp-json\/wp\/v2\/pages\/3648","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cellbio.shop\/id\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/cellbio.shop\/id\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/cellbio.shop\/id\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/cellbio.shop\/id\/wp-json\/wp\/v2\/comments?post=3648"}],"version-history":[{"count":0,"href":"https:\/\/cellbio.shop\/id\/wp-json\/wp\/v2\/pages\/3648\/revisions"}],"wp:attachment":[{"href":"https:\/\/cellbio.shop\/id\/wp-json\/wp\/v2\/media?parent=3648"}],"wp:term":[{"taxonomy":"wf_page_folders","embeddable":true,"href":"https:\/\/cellbio.shop\/id\/wp-json\/wp\/v2\/wf_page_folders?post=3648"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\r\n\t\t\t\t\t

\r\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n MCDI \ubca0\ud2b8\ub0a8 \uc815\uc218 \uc2dc\uc2a4\ud15c \uc138\ubbf8\ub098 | \ud55c\uad6d\uc815\ubd80 \uae30\uc220\uc9c0\uc6d0 \uc0ac\uc5c5<\/title>\r\n <style>\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n\r\n body {\r\n font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\r\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\r\n min-height: 100vh;\r\n color: #333;\r\n }\r\n\r\n .container {\r\n max-width: 480px;\r\n margin: 0 auto;\r\n background: white;\r\n min-height: 100vh;\r\n }\r\n\r\n \/* \ud5e4\ub354 \uc139\uc158 *\/\r\n .header {\r\n background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);\r\n color: white;\r\n padding: 30px 20px;\r\n text-align: center;\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n .header::before {\r\n content: '';\r\n position: absolute;\r\n top: -50%;\r\n right: -50%;\r\n width: 200%;\r\n height: 200%;\r\n background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);\r\n animation: pulse 3s ease-in-out infinite;\r\n }\r\n\r\n @keyframes pulse {\r\n 0%, 100% { transform: scale(1); }\r\n 50% { transform: scale(1.1); }\r\n }\r\n\r\n .gov-badge {\r\n display: inline-block;\r\n background: rgba(255,255,255,0.2);\r\n padding: 8px 16px;\r\n border-radius: 20px;\r\n font-size: 12px;\r\n margin-bottom: 15px;\r\n backdrop-filter: blur(10px);\r\n }\r\n\r\n h1 {\r\n font-size: 28px;\r\n font-weight: 700;\r\n margin-bottom: 10px;\r\n text-shadow: 2px 2px 4px rgba(0,0,0,0.2);\r\n }\r\n\r\n .subtitle {\r\n font-size: 16px;\r\n opacity: 0.95;\r\n line-height: 1.5;\r\n }\r\n\r\n \/* \ud0c0\uc774\uba38 \uc139\uc158 *\/\r\n .timer-section {\r\n background: #f8f9fa;\r\n padding: 25px 20px;\r\n border-bottom: 1px solid #e9ecef;\r\n }\r\n\r\n .timer-title {\r\n text-align: center;\r\n color: #495057;\r\n font-size: 14px;\r\n margin-bottom: 15px;\r\n }\r\n\r\n .timer {\r\n display: flex;\r\n justify-content: center;\r\n gap: 15px;\r\n }\r\n\r\n .timer-item {\r\n background: white;\r\n padding: 15px;\r\n border-radius: 12px;\r\n box-shadow: 0 2px 10px rgba(0,0,0,0.08);\r\n text-align: center;\r\n min-width: 70px;\r\n }\r\n\r\n .timer-value {\r\n font-size: 28px;\r\n font-weight: 700;\r\n color: #1e3c72;\r\n }\r\n\r\n .timer-label {\r\n font-size: 11px;\r\n color: #6c757d;\r\n margin-top: 5px;\r\n }\r\n\r\n \/* \ub4f1\ub85d \ud604\ud669 *\/\r\n .registration-status {\r\n background: white;\r\n padding: 20px;\r\n margin: 20px;\r\n border-radius: 15px;\r\n box-shadow: 0 4px 15px rgba(0,0,0,0.1);\r\n }\r\n\r\n .status-bar {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n margin-bottom: 10px;\r\n }\r\n\r\n .status-text {\r\n font-size: 14px;\r\n color: #495057;\r\n }\r\n\r\n .status-count {\r\n font-size: 18px;\r\n font-weight: 700;\r\n color: #1e3c72;\r\n }\r\n\r\n .progress-bar {\r\n width: 100%;\r\n height: 8px;\r\n background: #e9ecef;\r\n border-radius: 10px;\r\n overflow: hidden;\r\n }\r\n\r\n .progress-fill {\r\n height: 100%;\r\n background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);\r\n border-radius: 10px;\r\n transition: width 0.3s ease;\r\n }\r\n\r\n \/* \uc774\ubca4\ud2b8 \uc815\ubcf4 *\/\r\n .event-info {\r\n padding: 30px 20px;\r\n }\r\n\r\n .info-card {\r\n background: #f8f9fa;\r\n padding: 25px;\r\n border-radius: 15px;\r\n margin-bottom: 20px;\r\n }\r\n\r\n .info-title {\r\n font-size: 18px;\r\n font-weight: 600;\r\n color: #1e3c72;\r\n margin-bottom: 15px;\r\n display: flex;\r\n align-items: center;\r\n }\r\n\r\n .info-icon {\r\n width: 30px;\r\n height: 30px;\r\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\r\n border-radius: 8px;\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n margin-right: 10px;\r\n color: white;\r\n }\r\n\r\n .info-item {\r\n display: flex;\r\n align-items: center;\r\n margin-bottom: 12px;\r\n padding-left: 40px;\r\n }\r\n\r\n .info-label {\r\n color: #6c757d;\r\n font-size: 14px;\r\n margin-right: 10px;\r\n }\r\n\r\n .info-value {\r\n color: #333;\r\n font-size: 15px;\r\n font-weight: 500;\r\n }\r\n\r\n \/* \uc2ac\ub77c\uc774\ub354 *\/\r\n .slider-container {\r\n padding: 0 20px 30px;\r\n }\r\n\r\n .slider {\r\n position: relative;\r\n width: 100%;\r\n height: 250px;\r\n border-radius: 15px;\r\n overflow: hidden;\r\n box-shadow: 0 5px 20px rgba(0,0,0,0.15);\r\n }\r\n\r\n .slide {\r\n position: absolute;\r\n width: 100%;\r\n height: 100%;\r\n opacity: 0;\r\n transition: opacity 1s ease-in-out;\r\n }\r\n\r\n .slide.active {\r\n opacity: 1;\r\n }\r\n\r\n .slide img {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n }\r\n\r\n .slide-caption {\r\n position: absolute;\r\n bottom: 0;\r\n left: 0;\r\n right: 0;\r\n background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);\r\n color: white;\r\n padding: 20px;\r\n font-size: 14px;\r\n }\r\n\r\n .slider-dots {\r\n display: flex;\r\n justify-content: center;\r\n gap: 8px;\r\n margin-top: 15px;\r\n }\r\n\r\n .dot {\r\n width: 8px;\r\n height: 8px;\r\n border-radius: 50%;\r\n background: #dee2e6;\r\n cursor: pointer;\r\n transition: background 0.3s;\r\n }\r\n\r\n .dot.active {\r\n background: #667eea;\r\n width: 24px;\r\n border-radius: 4px;\r\n }\r\n\r\n \/* \ube44\ub514\uc624 \uc139\uc158 *\/\r\n .video-section {\r\n padding: 0 20px 30px;\r\n }\r\n\r\n .video-wrapper {\r\n position: relative;\r\n padding-bottom: 56.25%;\r\n height: 0;\r\n overflow: hidden;\r\n border-radius: 15px;\r\n box-shadow: 0 5px 20px rgba(0,0,0,0.15);\r\n }\r\n\r\n .video-wrapper iframe {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n border: none;\r\n }\r\n\r\n \/* \ub4f1\ub85d \ud3fc *\/\r\n .registration-form {\r\n padding: 30px 20px;\r\n background: #f8f9fa;\r\n }\r\n\r\n .form-title {\r\n font-size: 22px;\r\n font-weight: 700;\r\n color: #1e3c72;\r\n text-align: center;\r\n margin-bottom: 25px;\r\n }\r\n\r\n .form-group {\r\n margin-bottom: 20px;\r\n }\r\n\r\n label {\r\n display: block;\r\n font-size: 14px;\r\n color: #495057;\r\n margin-bottom: 8px;\r\n font-weight: 500;\r\n }\r\n\r\n input {\r\n width: 100%;\r\n padding: 15px;\r\n border: 2px solid #e9ecef;\r\n border-radius: 10px;\r\n font-size: 16px;\r\n transition: all 0.3s;\r\n background: white;\r\n }\r\n\r\n input:focus {\r\n outline: none;\r\n border-color: #667eea;\r\n box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);\r\n }\r\n\r\n .submit-btn {\r\n width: 100%;\r\n padding: 18px;\r\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\r\n color: white;\r\n border: none;\r\n border-radius: 12px;\r\n font-size: 18px;\r\n font-weight: 600;\r\n cursor: pointer;\r\n transition: transform 0.2s, box-shadow 0.2s;\r\n margin-top: 10px;\r\n }\r\n\r\n .submit-btn:hover {\r\n transform: translateY(-2px);\r\n box-shadow: 0 10px 25px rgba(102, 126, 234, 0.3);\r\n }\r\n\r\n .submit-btn:active {\r\n transform: translateY(0);\r\n }\r\n\r\n .submit-btn:disabled {\r\n background: #6c757d;\r\n cursor: not-allowed;\r\n transform: none;\r\n }\r\n\r\n \/* \ud478\ud130 *\/\r\n .footer {\r\n background: #1e3c72;\r\n color: white;\r\n padding: 30px 20px;\r\n text-align: center;\r\n }\r\n\r\n .footer-logo {\r\n font-size: 20px;\r\n font-weight: 700;\r\n margin-bottom: 10px;\r\n }\r\n\r\n .footer-text {\r\n font-size: 13px;\r\n opacity: 0.8;\r\n line-height: 1.6;\r\n }\r\n\r\n \/* \uc131\uacf5 \uba54\uc2dc\uc9c0 *\/\r\n .success-message {\r\n display: none;\r\n position: fixed;\r\n top: 50%;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n background: white;\r\n padding: 30px;\r\n border-radius: 20px;\r\n box-shadow: 0 20px 60px rgba(0,0,0,0.3);\r\n z-index: 1000;\r\n text-align: center;\r\n max-width: 90%;\r\n width: 350px;\r\n }\r\n\r\n .success-icon {\r\n width: 60px;\r\n height: 60px;\r\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\r\n border-radius: 50%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n margin: 0 auto 20px;\r\n font-size: 30px;\r\n }\r\n\r\n .overlay {\r\n display: none;\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n background: rgba(0,0,0,0.5);\r\n z-index: 999;\r\n }\r\n\r\n \/* \ubc18\uc751\ud615 *\/\r\n @media (max-width: 380px) {\r\n h1 { font-size: 24px; }\r\n .timer-value { font-size: 24px; }\r\n .timer-item { min-width: 60px; padding: 12px; }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"container\">\r\n \r\n <div class=\"header\">\r\n <div class=\"gov-badge\">Proyek Dukungan Teknologi Pemerintah Korea<\/div>\r\n <h1>MCDI Membuka Masa Depan<\/h1>\r\n <div class=\"subtitle\">\r\n Sistem Pemurnian Air yang Dioptimalkan di Vietnam<br>\r\n Teknologi pemurnian air 100 ton per hari\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"timer-section\">\r\n <div class=\"timer-title\">Sampai seminar dimulai<\/div>\r\n <div class=\"timer\" id=\"countdown\">\r\n <div class=\"timer-item\">\r\n <div class=\"timer-value\" id=\"days\">0<\/div>\r\n <div class=\"timer-label\">Hari<\/div>\r\n <\/div>\r\n <div class=\"timer-item\">\r\n <div class=\"timer-value\" id=\"hours\">0<\/div>\r\n <div class=\"timer-label\">jam<\/div>\r\n <\/div>\r\n <div class=\"timer-item\">\r\n <div class=\"timer-value\" id=\"minutes\">0<\/div>\r\n <div class=\"timer-label\">menit<\/div>\r\n <\/div>\r\n <div class=\"timer-item\">\r\n <div class=\"timer-value\" id=\"seconds\">0<\/div>\r\n <div class=\"timer-label\">lilin<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"registration-status\">\r\n <div class=\"status-bar\">\r\n <span class=\"status-text\">Jumlah orang terdaftar saat ini<\/span>\r\n <span class=\"status-count\"><span id=\"currentCount\">12<\/span> \/ 50 orang<\/span>\r\n <\/div>\r\n <div class=\"progress-bar\">\r\n <div class=\"progress-fill\" id=\"progressBar\" style=\"width: 24%\"><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"event-info\">\r\n <div class=\"info-card\">\r\n <div class=\"info-title\">\r\n <span class=\"info-icon\">\ud83d\udcc5<\/span>\r\n Informasi Acara\r\n <\/div>\r\n <div class=\"info-item\">\r\n <span class=\"info-label\">tanggal:<\/span>\r\n <span class=\"info-value\">3 November 2025, pukul 17.00 - 20.00<\/span>\r\n <\/div>\r\n <div class=\"info-item\">\r\n <span class=\"info-label\">lokasi:<\/span>\r\n <span class=\"info-value\">Situs instalasi percontohan Lao Cai<\/span>\r\n <\/div>\r\n <div class=\"info-item\">\r\n <span class=\"info-label\">rincian:<\/span>\r\n <span class=\"info-value\">Seminar & Makan Malam Sistem Bebas O2&B<\/span>\r\n <\/div>\r\n <div class=\"info-item\">\r\n <span class=\"info-label\">kebun:<\/span>\r\n <span class=\"info-value\">Terbatas untuk 50 orang pertama<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"slider-container\">\r\n <div class=\"slider\">\r\n <div class=\"slide active\">\r\n <img decoding=\"async\" src=\"https:\/\/via.placeholder.com\/440x250\/4A90E2\/FFFFFF?text=\uc815\uc218+\uc2dc\uc2a4\ud15c+\uc804\uacbd\" alt=\"\uc815\uc218 \uc2dc\uc2a4\ud15c\">\r\n <div class=\"slide-caption\">Sistem pemurnian air canggih<\/div>\r\n <\/div>\r\n <div class=\"slide\">\r\n <img decoding=\"async\" src=\"https:\/\/via.placeholder.com\/440x250\/7B68EE\/FFFFFF?text=\uae30\uc220+\uc124\uba85\ud68c\" alt=\"\uae30\uc220 \uc124\uba85\">\r\n <div class=\"slide-caption\">Sesi Pengarahan Teknis Ahli<\/div>\r\n <\/div>\r\n <div class=\"slide\">\r\n <img decoding=\"async\" src=\"https:\/\/via.placeholder.com\/440x250\/9370DB\/FFFFFF?text=\ud604\uc7a5+\uc124\uce58\" alt=\"\ud604\uc7a5 \uc124\uce58\">\r\n <div class=\"slide-caption\">Instalasi situs Lao Cai<\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"slider-dots\">\r\n <span class=\"dot active\" onclick=\"currentSlide(1)\"><\/span>\r\n <span class=\"dot\" onclick=\"currentSlide(2)\"><\/span>\r\n <span class=\"dot\" onclick=\"currentSlide(3)\"><\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"video-section\">\r\n <div class=\"info-title\" style=\"margin-bottom: 15px;\">\r\n <span class=\"info-icon\">\ud83c\udfa5<\/span>\r\n Video pengenalan teknologi\r\n <\/div>\r\n <div class=\"video-wrapper\">\r\n <iframe src=\"https:\/\/www.youtube.com\/embed\/dQw4w9WgXcQ\" \r\n allowfullscreen><\/iframe>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"registration-form\">\r\n <h2 class=\"form-title\">Pendaftaran<\/h2>\r\n <form id=\"registrationForm\" action=\"\">\r\n <div class=\"form-group\">\r\n <label for=\"company\">Nama Perusahaan\/Organisasi *<\/label>\r\n <input type=\"text\" id=\"company\" name=\"company\" required>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label for=\"position\">Judul *<\/label>\r\n <input type=\"text\" id=\"position\" name=\"position\" required>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label for=\"name\">nama *<\/label>\r\n <input type=\"text\" id=\"name\" name=\"name\" required>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label for=\"phone\">kontak *<\/label>\r\n <input type=\"tel\" id=\"phone\" name=\"phone\" placeholder=\"010-0000-0000\" required>\r\n <\/div>\r\n <button type=\"submit\" class=\"submit-btn\" id=\"submitBtn\">Daftar untuk berpartisipasi<\/button>\r\n <input type=\"hidden\" name=\"trp-form-language\" value=\"id\"\/><\/form>\r\n <\/div>\r\n\r\n \r\n <div class=\"footer\">\r\n <div class=\"footer-logo\">MCDI<\/div>\r\n <div class=\"footer-text\">\r\n Proyek dukungan teknologi pemerintah Korea<br>\r\n Sistem Pemurnian Air yang Dioptimalkan di Vietnam<br>\r\n \u00a9 2024 MCDI. Seluruh hak cipta dilindungi undang-undang.\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"overlay\" id=\"overlay\"><\/div>\r\n <div class=\"success-message\" id=\"successMessage\">\r\n <div class=\"success-icon\">\u2713<\/div>\r\n <h3 style=\"margin-bottom: 10px;\">Pendaftaran selesai!<\/h3>\r\n <p style=\"color: #6c757d; font-size: 14px;\">Aplikasi partisipasi Anda telah diterima dengan sukses.<\/p>\r\n <\/div>\r\n\r\n <script>\r\n \/\/ \uce74\uc6b4\ud2b8\ub2e4\uc6b4 \ud0c0\uc774\uba38\r\n function updateCountdown() {\r\n const targetDate = new Date('2025-11-03T17:00:00+09:00');\r\n const now = new Date();\r\n const difference = targetDate - now;\r\n\r\n if (difference > 0) {\r\n const days = Math.floor(difference \/ (1000 * 60 * 60 * 24));\r\n const hours = Math.floor((difference % (1000 * 60 * 60 * 24)) \/ (1000 * 60 * 60));\r\n const minutes = Math.floor((difference % (1000 * 60 * 60)) \/ (1000 * 60));\r\n const seconds = Math.floor((difference % (1000 * 60)) \/ 1000);\r\n\r\n document.getElementById('days').textContent = days;\r\n document.getElementById('hours').textContent = hours;\r\n document.getElementById('minutes').textContent = minutes;\r\n document.getElementById('seconds').textContent = seconds;\r\n } else {\r\n document.getElementById('countdown').innerHTML = '<div style=\"font-size: 20px; color: #e74c3c;\">\ud589\uc0ac\uac00 \uc885\ub8cc\ub418\uc5c8\uc2b5\ub2c8\ub2e4<\/div>';\r\n }\r\n }\r\n\r\n setInterval(updateCountdown, 1000);\r\n updateCountdown();\r\n\r\n \/\/ \uc774\ubbf8\uc9c0 \uc2ac\ub77c\uc774\ub354\r\n let slideIndex = 1;\r\n \r\n function currentSlide(n) {\r\n showSlide(slideIndex = n);\r\n }\r\n\r\n function showSlide(n) {\r\n const slides = document.getElementsByClassName('slide');\r\n const dots = document.getElementsByClassName('dot');\r\n \r\n if (n > slides.length) slideIndex = 1;\r\n if (n < 1) slideIndex = slides.length;\r\n \r\n for (let i = 0; i < slides.length; i++) {\r\n slides[i].classList.remove('active');\r\n }\r\n \r\n for (let i = 0; i < dots.length; i++) {\r\n dots[i].classList.remove('active');\r\n }\r\n \r\n slides[slideIndex - 1].classList.add('active');\r\n dots[slideIndex - 1].classList.add('active');\r\n }\r\n\r\n \/\/ \uc790\ub3d9 \uc2ac\ub77c\uc774\ub4dc\r\n setInterval(() => {\r\n slideIndex++;\r\n showSlide(slideIndex);\r\n }, 4000);\r\n\r\n \/\/ \ub4f1\ub85d\uc790 \uc218 \uad00\ub9ac (localStorage \uc0ac\uc6a9)\r\n let registrationCount = parseInt(localStorage.getItem('registrationCount') || '12');\r\n \r\n function updateRegistrationCount() {\r\n document.getElementById('currentCount').textContent = registrationCount;\r\n const percentage = (registrationCount \/ 50) * 100;\r\n document.getElementById('progressBar').style.width = percentage + '%';\r\n \r\n if (registrationCount >= 50) {\r\n document.getElementById('submitBtn').disabled = true;\r\n document.getElementById('submitBtn').textContent = '\uc815\uc6d0 \ub9c8\uac10';\r\n }\r\n }\r\n\r\n updateRegistrationCount();\r\n\r\n \/\/ \ud3fc \uc81c\ucd9c \ucc98\ub9ac\r\n document.getElementById('registrationForm').addEventListener('submit', function(e) {\r\n e.preventDefault();\r\n \r\n if (registrationCount >= 50) {\r\n alert('\uc8c4\uc1a1\ud569\ub2c8\ub2e4. \uc815\uc6d0\uc774 \ub9c8\uac10\ub418\uc5c8\uc2b5\ub2c8\ub2e4.');\r\n return;\r\n }\r\n\r\n \/\/ \ud3fc \ub370\uc774\ud130 \uc218\uc9d1\r\n const formData = {\r\n company: document.getElementById('company').value,\r\n position: document.getElementById('position').value,\r\n name: document.getElementById('name').value,\r\n phone: document.getElementById('phone').value,\r\n timestamp: new Date().toISOString()\r\n };\r\n\r\n \/\/ localStorage\uc5d0 \uc800\uc7a5 (\uc2e4\uc81c\ub85c\ub294 \uc11c\ubc84\ub85c \uc804\uc1a1)\r\n let registrations = JSON.parse(localStorage.getItem('registrations') || '[]');\r\n registrations.push(formData);\r\n localStorage.setItem('registrations', JSON.stringify(registrations));\r\n\r\n \/\/ \ub4f1\ub85d\uc790 \uc218 \uc99d\uac00\r\n registrationCount++;\r\n localStorage.setItem('registrationCount', registrationCount);\r\n updateRegistrationCount();\r\n\r\n \/\/ \uc131\uacf5 \uba54\uc2dc\uc9c0 \ud45c\uc2dc\r\n document.getElementById('overlay').style.display = 'block';\r\n document.getElementById('successMessage').style.display = 'block';\r\n\r\n \/\/ \ud3fc \ucd08\uae30\ud654\r\n this.reset();\r\n\r\n \/\/ 3\ucd08 \ud6c4 \uba54\uc2dc\uc9c0 \uc228\uae30\uae30\r\n setTimeout(() => {\r\n document.getElementById('overlay').style.display = 'none';\r\n document.getElementById('successMessage').style.display = 'none';\r\n }, 3000);\r\n\r\n console.log('\ub4f1\ub85d \ub370\uc774\ud130:', formData);\r\n console.log('\uc804\uccb4 \ub4f1\ub85d \ubaa9\ub85d:', registrations);\r\n });\r\n\r\n \/\/ \uc804\ud654\ubc88\ud638 \ud3ec\ub9f7\ud305\r\n document.getElementById('phone').addEventListener('input', function(e) {\r\n let value = e.target.value.replace(\/[^0-9]\/g, '');\r\n if (value.length > 3 && value.length <= 7) {\r\n value = value.slice(0, 3) + '-' + value.slice(3);\r\n } else if (value.length > 7) {\r\n value = value.slice(0, 3) + '-' + value.slice(3, 7) + '-' + value.slice(7, 11);\r\n }\r\n e.target.value = value;\r\n });\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\n``` Fitur utama landing page yang kami buat: ## \u2728 Desain & UX - **Optimasi Seluler**: Desain responsif yang berfungsi sempurna di semua perangkat seluler - **Gradien Mewah**: Kombinasi warna ungu dan biru yang canggih - **Animasi Halus**: Pengalaman interaktif dengan efek hover dan transisi - **Keterbacaan yang Dioptimalkan**: Ukuran font yang ramah seluler (16 piksel atau lebih) dan ruang putih yang cukup ## \ud83d\udd27 Fitur Utama 1. **Hitung Mundur Waktu Nyata**: Menghitung secara otomatis hingga pukul 17.00 pada tanggal 3 November 2025 2. **Kelola jumlah pendaftar**: Dibatasi hingga 50, menampilkan kemajuan waktu nyata 3. **Penggeser Gambar**: Beralih secara otomatis di antara 3 gambar (interval 4 detik) 4. **Video YouTube**: Diputar sempurna dengan iframe responsif 5. **Penyimpanan Data**: Menyimpan informasi pendaftaran menggunakan localStorage ## \ud83d\udcf1 Optimasi Seluler - Ukuran tombol yang ramah sentuhan (minimal 44 piksel) - Efek fokus otomatis untuk kolom input - Pemformatan otomatis nomor telepon (010-0000-0000) - Pengguliran dan respons sentuhan yang lancar ## \ud83d\udcbe Manajemen Data - Semua data registrasi disimpan di penyimpanan lokal peramban - Data registrasi dapat diperiksa di konsol - Registrasi otomatis diblokir ketika jumlah orang melebihi 50. Halaman ini berfungsi penuh dan siap digunakan. Untuk pengoperasian yang sebenarnya, Anda dapat mengintegrasikannya dengan API server, alih-alih penyimpanan lokal.\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>MCDI \ubca0\ud2b8\ub0a8 \uc815\uc218 \uc2dc\uc2a4\ud15c \uc138\ubbf8\ub098 | \ud55c\uad6d\uc815\ubd80 \uae30\uc220\uc9c0\uc6d0 \uc0ac\uc5c5 \ud83c\uddf0\ud83c\uddf7 \ud55c\uad6d\uc815\ubd80 \uae30\uc220\uc9c0\uc6d0 \uc0ac\uc5c5 \ubbf8\ub798\ub97c \uc5ec\ub294 MCDI \ubca0\ud2b8\ub0a8 \ucd5c\uc801\ud654 \uc815\uc218 \uc2dc\uc2a4\ud15c 1\uc77c 100\ud1a4 \uc815\uc218 \ucc98\ub9ac \uae30\uc220 \uc138\ubbf8\ub098 \uc2dc\uc791\uae4c\uc9c0 0 \uc77c 0 \uc2dc\uac04 0 \ubd84 0 \ucd08 \ud604\uc7ac \ub4f1\ub85d \uc778\uc6d0 12 \/ 50\uba85 \ud83d\udcc5 \ud589\uc0ac \uc815\ubcf4 \uc77c\uc2dc: 2025\ub144 11\uc6d4 3\uc77c \uc624\ud6c4 5\uc2dc~8\uc2dc \uc7a5\uc18c: \ub77c\uc624\uae4c\uc774 \uc2dc\ubc94\uc124\uce58 \ud604\uc7a5 \ub0b4\uc6a9: […]<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"wf_page_folders":[],"class_list":["post-3648","page","type-page","status-publish","format-standard","hentry"],"acf":[],"_hostinger_reach_plugin_has_subscription_block":false,"_hostinger_reach_plugin_is_elementor":false,"_links":{"self":[{"href":"https:\/\/cellbio.shop\/id\/wp-json\/wp\/v2\/pages\/3648","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cellbio.shop\/id\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/cellbio.shop\/id\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/cellbio.shop\/id\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/cellbio.shop\/id\/wp-json\/wp\/v2\/comments?post=3648"}],"version-history":[{"count":0,"href":"https:\/\/cellbio.shop\/id\/wp-json\/wp\/v2\/pages\/3648\/revisions"}],"wp:attachment":[{"href":"https:\/\/cellbio.shop\/id\/wp-json\/wp\/v2\/media?parent=3648"}],"wp:term":[{"taxonomy":"wf_page_folders","embeddable":true,"href":"https:\/\/cellbio.shop\/id\/wp-json\/wp\/v2\/wf_page_folders?post=3648"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}