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\">\ud83c\uddf0\ud83c\uddf7 Korean Government Technology Support Project<\/div>\r\n <h1>MCDI Opens the Future<\/h1>\r\n <div class=\"subtitle\">\r\n Vietnam Optimized Water Purification System<br>\r\n 100 tons per day water purification technology\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"timer-section\">\r\n <div class=\"timer-title\">Until the seminar starts<\/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\">Day<\/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\">hour<\/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\">minute<\/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\">candle<\/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\">Current number of registered people<\/span>\r\n <span class=\"status-count\"><span id=\"currentCount\">12<\/span> \/ 50 people<\/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 Event Information\r\n <\/div>\r\n <div class=\"info-item\">\r\n <span class=\"info-label\">date:<\/span>\r\n <span class=\"info-value\">November 3, 2025, 5:00 PM - 8:00 PM<\/span>\r\n <\/div>\r\n <div class=\"info-item\">\r\n <span class=\"info-label\">location:<\/span>\r\n <span class=\"info-value\">Lao Cai pilot installation site<\/span>\r\n <\/div>\r\n <div class=\"info-item\">\r\n <span class=\"info-label\">detail:<\/span>\r\n <span class=\"info-value\">O2&B Free System Seminar & Dinner<\/span>\r\n <\/div>\r\n <div class=\"info-item\">\r\n <span class=\"info-label\">garden:<\/span>\r\n <span class=\"info-value\">Limited to the first 50 people<\/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\">State-of-the-art water purification system<\/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\">Expert Technical Briefing Session<\/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\">Lao Cai site installation<\/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 Technology introduction video\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\">Registration<\/h2>\r\n <form id=\"registrationForm\" action=\"\">\r\n <div class=\"form-group\">\r\n <label for=\"company\">Company\/Organization Name *<\/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\">Title *<\/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\">name *<\/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\">contact *<\/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\">Apply to participate<\/button>\r\n <input type=\"hidden\" name=\"trp-form-language\" value=\"en\"\/><\/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 Korean government technology support project<br>\r\n Vietnam Optimized Water Purification System<br>\r\n \u00a9 2024 MCDI. All rights reserved.\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;\">Registration complete!<\/h3>\r\n <p style=\"color: #6c757d; font-size: 14px;\">Your application for participation has been successfully received.<\/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``` Key features of the landing page we created: ## \u2728 Design & UX - **Mobile Optimization**: Responsive design that works perfectly on all mobile devices - **Luxurious Gradient**: Sophisticated color combination of purple and blue - **Smooth Animation**: Interactive experience with hover effects and transitions - **Optimized Readability**: Mobile-friendly font size (16px or more) and ample white space ## \ud83d\udd27 Key Features 1. **Real-time Countdown**: Automatically calculates until 5 PM on November 3, 2025 2. **Manage the number of registrants**: Limited to 50, displays real-time progress 3. **Image Slider**: Automatically switches between 3 images (4-second intervals) 4. **YouTube Video**: Plays perfectly with responsive iframe 5. **Data Storage**: Saves registration information using localStorage ## \ud83d\udcf1 Mobile Optimization - Touch-friendly button size (at least 44px) - Auto-focus effect for input fields - Auto-formatting of phone numbers (010-0000-0000) - Smooth scrolling and touch response ## \ud83d\udcbe Data Management - All registration data is stored in browser localStorage - Registration data can be checked in the console - Automatically blocks registrations when the number of people exceeds 50 This page is fully functional and ready to use. For actual operation, you can integrate with the server API instead of localStorage.\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\/en\/wp-json\/wp\/v2\/pages\/3648","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cellbio.shop\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/cellbio.shop\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/cellbio.shop\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/cellbio.shop\/en\/wp-json\/wp\/v2\/comments?post=3648"}],"version-history":[{"count":0,"href":"https:\/\/cellbio.shop\/en\/wp-json\/wp\/v2\/pages\/3648\/revisions"}],"wp:attachment":[{"href":"https:\/\/cellbio.shop\/en\/wp-json\/wp\/v2\/media?parent=3648"}],"wp:term":[{"taxonomy":"wf_page_folders","embeddable":true,"href":"https:\/\/cellbio.shop\/en\/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\">\ud83c\uddf0\ud83c\uddf7 Korean Government Technology Support Project<\/div>\r\n <h1>MCDI Opens the Future<\/h1>\r\n <div class=\"subtitle\">\r\n Vietnam Optimized Water Purification System<br>\r\n 100 tons per day water purification technology\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"timer-section\">\r\n <div class=\"timer-title\">Until the seminar starts<\/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\">Day<\/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\">hour<\/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\">minute<\/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\">candle<\/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\">Current number of registered people<\/span>\r\n <span class=\"status-count\"><span id=\"currentCount\">12<\/span> \/ 50 people<\/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 Event Information\r\n <\/div>\r\n <div class=\"info-item\">\r\n <span class=\"info-label\">date:<\/span>\r\n <span class=\"info-value\">November 3, 2025, 5:00 PM - 8:00 PM<\/span>\r\n <\/div>\r\n <div class=\"info-item\">\r\n <span class=\"info-label\">location:<\/span>\r\n <span class=\"info-value\">Lao Cai pilot installation site<\/span>\r\n <\/div>\r\n <div class=\"info-item\">\r\n <span class=\"info-label\">detail:<\/span>\r\n <span class=\"info-value\">O2&B Free System Seminar & Dinner<\/span>\r\n <\/div>\r\n <div class=\"info-item\">\r\n <span class=\"info-label\">garden:<\/span>\r\n <span class=\"info-value\">Limited to the first 50 people<\/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\">State-of-the-art water purification system<\/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\">Expert Technical Briefing Session<\/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\">Lao Cai site installation<\/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 Technology introduction video\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\">Registration<\/h2>\r\n <form id=\"registrationForm\" action=\"\">\r\n <div class=\"form-group\">\r\n <label for=\"company\">Company\/Organization Name *<\/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\">Title *<\/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\">name *<\/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\">contact *<\/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\">Apply to participate<\/button>\r\n <input type=\"hidden\" name=\"trp-form-language\" value=\"en\"\/><\/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 Korean government technology support project<br>\r\n Vietnam Optimized Water Purification System<br>\r\n \u00a9 2024 MCDI. All rights reserved.\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;\">Registration complete!<\/h3>\r\n <p style=\"color: #6c757d; font-size: 14px;\">Your application for participation has been successfully received.<\/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``` Key features of the landing page we created: ## \u2728 Design & UX - **Mobile Optimization**: Responsive design that works perfectly on all mobile devices - **Luxurious Gradient**: Sophisticated color combination of purple and blue - **Smooth Animation**: Interactive experience with hover effects and transitions - **Optimized Readability**: Mobile-friendly font size (16px or more) and ample white space ## \ud83d\udd27 Key Features 1. **Real-time Countdown**: Automatically calculates until 5 PM on November 3, 2025 2. **Manage the number of registrants**: Limited to 50, displays real-time progress 3. **Image Slider**: Automatically switches between 3 images (4-second intervals) 4. **YouTube Video**: Plays perfectly with responsive iframe 5. **Data Storage**: Saves registration information using localStorage ## \ud83d\udcf1 Mobile Optimization - Touch-friendly button size (at least 44px) - Auto-focus effect for input fields - Auto-formatting of phone numbers (010-0000-0000) - Smooth scrolling and touch response ## \ud83d\udcbe Data Management - All registration data is stored in browser localStorage - Registration data can be checked in the console - Automatically blocks registrations when the number of people exceeds 50 This page is fully functional and ready to use. For actual operation, you can integrate with the server API instead of localStorage.\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\/en\/wp-json\/wp\/v2\/pages\/3648","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cellbio.shop\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/cellbio.shop\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/cellbio.shop\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/cellbio.shop\/en\/wp-json\/wp\/v2\/comments?post=3648"}],"version-history":[{"count":0,"href":"https:\/\/cellbio.shop\/en\/wp-json\/wp\/v2\/pages\/3648\/revisions"}],"wp:attachment":[{"href":"https:\/\/cellbio.shop\/en\/wp-json\/wp\/v2\/media?parent=3648"}],"wp:term":[{"taxonomy":"wf_page_folders","embeddable":true,"href":"https:\/\/cellbio.shop\/en\/wp-json\/wp\/v2\/wf_page_folders?post=3648"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}