\ubbf8\ub798\ub97c \uc5ec\ub294 MCDI | \ub77c\uc624\uae4c\uc774 \uc2dc\ubc94\uc124\uce58 \ucd08\uccad<\/title>\r\n <meta name=\"description\" content=\"\ud55c\uad6d\uc815\ubd80 \uae30\uc220\uc9c0\uc6d0 \uc0ac\uc5c5 | \ubca0\ud2b8\ub0a8 \ucd5c\uc801\ud654 MCDI | 1\uc77c 100\ud1a4 \uc815\uc218 \uc2dc\uc2a4\ud15c | \ub77c\uc624\uae4c\uc774 \uc2dc\ubc94\uc124\uce58 | 2025\ub144 11\uc6d4 3\uc77c 17:00~20:00 | \uc138\ubbf8\ub098\u00b7\ub9cc\ucc2c \ud3ec\ud568 | \uc120\ucc29\uc21c 50\uba85 \ucd08\uccad\" \/>\r\n <meta property=\"og:title\" content=\"\ubbf8\ub798\ub97c \uc5ec\ub294 MCDI | \ub77c\uc624\uae4c\uc774 \uc2dc\ubc94\uc124\uce58 \ucd08\uccad\" \/>\r\n <meta property=\"og:description\" content=\"1\uc77c 100\ud1a4 \uc815\uc218 \uc2dc\uc2a4\ud15c \u00b7 O2&B \ubb34\uc0c1 \uc2dc\uc2a4\ud15c \u00b7 \uc138\ubbf8\ub098\uc640 \ub9cc\ucc2c \ud3ec\ud568 \u00b7 \uc120\ucc29\uc21c 50\uba85\" \/>\r\n <meta property=\"og:type\" content=\"website\" \/>\r\n <meta name=\"format-detection\" content=\"telephone=no\" \/>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Noto+Sans+KR:wght@400;600;700;800&display=swap\" rel=\"stylesheet\" \/>\r\n <style>\r\n :root{\r\n --bg:#0b1220;\r\n --card:#0f1a2e;\r\n --muted:#98a3b8;\r\n --text:#e6edf7;\r\n --primary:#22d3ee;\r\n --accent:#4f46e5;\r\n --ok:#10b981;\r\n --warn:#f59e0b;\r\n --danger:#ef4444;\r\n --glass: rgba(255,255,255,.06);\r\n --border: rgba(255,255,255,.12);\r\n --shadow: 0 10px 40px rgba(0,0,0,.35);\r\n --radius:16px;\r\n }\r\n *{box-sizing:border-box}\r\n html,body{height:100%}\r\n body{\r\n margin:0;\r\n font-family:\"Noto Sans KR\", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;\r\n color:var(--text);\r\n background:\r\n radial-gradient(1200px 600px at 80% -10%, #1b2a46 0%, transparent 60%),\r\n radial-gradient(800px 600px at -10% 30%, #0e2a35 0%, transparent 60%),\r\n linear-gradient(180deg, #06101f, #0b1220 40%, #0b1220 100%);\r\n }\r\n a{color:inherit;text-decoration:none}\r\n .container{max-width:840px;margin:0 auto;padding:18px}\r\n header{\r\n position:sticky;top:0;z-index:30;\r\n backdrop-filter:saturate(140%) blur(10px);\r\n background:linear-gradient(180deg, rgba(8,12,24,.85), rgba(8,12,24,.4));\r\n border-bottom:1px solid var(--border);\r\n }\r\n .topbar{display:flex;align-items:center;justify-content:space-between;padding:12px 16px}\r\n .brand{display:flex;align-items:center;gap:10px}\r\n .logo{\r\n width:36px;height:36px;border-radius:10px;\r\n background: radial-gradient(circle at 30% 30%, #22d3ee, #4f46e5 60%, #0ea5e9 100%);\r\n box-shadow: 0 6px 20px rgba(34,211,238,.35);\r\n }\r\n .brand h1{font-size:16px;margin:0;font-weight:800;letter-spacing:.2px}\r\n .brand .sub{font-size:12px;color:var(--muted)}\r\n .cta-top{\r\n display:inline-flex;align-items:center;gap:8px;\r\n background:linear-gradient(135deg,var(--primary),#60a5fa);\r\n color:#041018;padding:10px 14px;border-radius:12px;font-weight:700;\r\n box-shadow: 0 8px 24px rgba(34,211,238,.35);\r\n border:0;cursor:pointer\r\n }\r\n .cta-top:disabled{filter:grayscale(1);opacity:.6;cursor:not-allowed}\r\n\r\n .hero{\r\n padding:22px 18px 8px 18px;\r\n }\r\n .headline{\r\n background:linear-gradient(135deg,#9ae6ff 0%, #e0e7ff 100%);\r\n -webkit-background-clip:text;background-clip:text;color:transparent;\r\n font-size:28px;line-height:1.2;font-weight:800;margin:6px 0 8px;\r\n letter-spacing:-.2px;\r\n }\r\n .eyebrow{\r\n display:inline-flex;gap:8px;align-items:center;\r\n padding:6px 10px;border:1px solid var(--border);\r\n border-radius:999px;background:var(--glass);\r\n color:#b7c3d9;font-size:12px\r\n }\r\n .chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}\r\n .chip{\r\n font-size:12px;color:#c3cfe6;border:1px dashed var(--border);\r\n background:rgba(255,255,255,.04);padding:6px 10px;border-radius:999px\r\n }\r\n\r\n .panel{\r\n background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));\r\n border:1px solid var(--border);\r\n border-radius:var(--radius);\r\n box-shadow:var(--shadow);\r\n padding:16px;\r\n margin:16px 0;\r\n }\r\n\r\n .stats{\r\n display:grid;grid-template-columns:1fr;gap:12px;\r\n }\r\n .countdown{\r\n display:flex;align-items:center;justify-content:center;gap:10px;\r\n padding:12px;border-radius:12px;background:rgba(15,26,46,.65);border:1px solid var(--border)\r\n }\r\n .cd-item{display:flex;flex-direction:column;align-items:center;min-width:62px}\r\n .cd-num{\r\n font-variant-numeric:tabular-nums;\r\n font-size:22px;font-weight:800;padding:10px 12px;border-radius:12px;\r\n background:linear-gradient(180deg,#0e203c, #0a1a30);\r\n border:1px solid var(--border);box-shadow: inset 0 1px 0 rgba(255,255,255,.06);\r\n }\r\n .cd-label{font-size:11px;color:var(--muted);margin-top:6px}\r\n\r\n .capacity{margin-top:8px}\r\n .cap-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}\r\n .cap-row .left{font-size:13px;color:#cfe3ff}\r\n .cap-row .right{font-size:12px;color:var(--muted)}\r\n .bar{\r\n position:relative;height:10px;border-radius:999px;background:#0c1b2e;border:1px solid var(--border);overflow:hidden\r\n }\r\n .bar .fill{\r\n position:absolute;top:0;left:0;height:100%;width:0%;\r\n background:linear-gradient(90deg,#22d3ee,#60a5fa,#4f46e5);\r\n transition:width .35s ease;\r\n }\r\n\r\n .video, .gallery, .about{margin:16px 0}\r\n .section-title{font-weight:800;font-size:16px;margin:2px 0 10px;color:#d9e4ff}\r\n .video-embed{\r\n position:relative;width:100%;aspect-ratio:16\/9;border-radius:14px;\r\n overflow:hidden;border:1px solid var(--border);background:#000\r\n }\r\n .video-embed iframe{position:absolute;inset:0;width:100%;height:100%}\r\n\r\n .gallery-wrap{position:relative;border-radius:14px;overflow:hidden;border:1px solid var(--border);background:#071423}\r\n .slides{display:flex;transition:transform .5s ease}\r\n .slide{min-width:100%;height:220px;background-size:cover;background-position:center}\r\n .g-nav{\r\n position:absolute;inset:auto 0 8px 0;display:flex;justify-content:center;gap:6px;z-index:2\r\n }\r\n .dot{width:8px;height:8px;border-radius:999px;background:rgba(255,255,255,.35)}\r\n .dot.active{background:#fff}\r\n\r\n .details{\r\n display:grid;grid-template-columns:1fr;gap:10px;margin-top:8px\r\n }\r\n .detail{\r\n display:flex;gap:10px;align-items:flex-start;background:rgba(255,255,255,.04);\r\n padding:12px;border-radius:12px;border:1px dashed var(--border)\r\n }\r\n .detail .icon{width:22px;height:22px;flex:0 0 22px;opacity:.9}\r\n .detail .txt .t{font-weight:700;font-size:14px}\r\n .detail .txt .d{font-size:13px;color:#c2cce2;margin-top:2px}\r\n\r\n .cta-sticky{\r\n position:sticky;bottom:0;z-index:25;padding:10px 12px;\r\n background:linear-gradient(180deg, rgba(7,12,24,0), rgba(7,12,24,.9));\r\n backdrop-filter:saturate(140%) blur(6px);\r\n border-top:1px solid var(--border);\r\n }\r\n .cta-btn{\r\n width:100%;display:flex;align-items:center;justify-content:center;gap:10px;\r\n background:linear-gradient(135deg,var(--primary),#60a5fa);\r\n color:#06121a;border:0;border-radius:14px;padding:14px 16px;font-weight:800;font-size:16px;\r\n box-shadow:0 12px 28px rgba(34,211,238,.28);\r\n cursor:pointer\r\n }\r\n .cta-btn:disabled{filter:grayscale(1);opacity:.6;cursor:not-allowed}\r\n\r\n \/* Modal *\/\r\n .modal{\r\n position:fixed;inset:0;display:none;align-items:flex-end;justify-content:center;z-index:60;\r\n background:rgba(3,6,12,.6);backdrop-filter:blur(4px)\r\n }\r\n .modal[open]{display:flex}\r\n .sheet{\r\n width:100%;max-width:840px;background:linear-gradient(180deg,#0c1730,#0b1326);\r\n border-radius:18px 18px 0 0;border-top:1px solid var(--border);\r\n box-shadow:var(--shadow);padding:16px\r\n }\r\n .sheet header{position:relative;background:none;border:0}\r\n .sheet .title{font-weight:800;font-size:18px;margin:8px 0 10px}\r\n .close{\r\n position:absolute;right:6px;top:6px;background:transparent;border:0;color:#c9d6f2;font-size:22px\r\n }\r\n\r\n form .row{display:flex;flex-direction:column;gap:6px;margin:8px 0}\r\n label{font-size:13px;color:#cfe3ff}\r\n input{\r\n width:100%;padding:12px 12px;border-radius:12px;background:#0a1a30;border:1px solid var(--border);\r\n color:#eaf2ff;font-size:15px;outline:none\r\n }\r\n input::placeholder{color:#99a7c2}\r\n input:focus{border-color:#60a5fa;box-shadow:0 0 0 3px rgba(96,165,250,.18)}\r\n .agree{display:flex;gap:8px;align-items:flex-start;margin-top:6px;color:#b9c7e6;font-size:12px}\r\n .submit{\r\n margin-top:12px;width:100%;padding:14px;border-radius:14px;border:0;\r\n background:linear-gradient(135deg,#22d3ee,#60a5fa);color:#071626;font-weight:800;font-size:16px;\r\n cursor:pointer\r\n }\r\n .submit:disabled{opacity:.6;cursor:not-allowed}\r\n .helper{font-size:12px;color:#9eb3d8;margin-top:6px}\r\n\r\n .toast{\r\n position:fixed;left:50%;bottom:90px;transform:translateX(-50%) translateY(20px);\r\n background:#0f1a2e;border:1px solid var(--border);padding:12px 16px;border-radius:12px;\r\n opacity:0;pointer-events:none;transition:all .25s ease;z-index:70\r\n }\r\n .toast.show{opacity:1;transform:translateX(-50%) translateY(0)}\r\n footer{color:#8fa3c6;font-size:12px;padding:18px;text-align:center}\r\n \/* Desktop enhancements *\/\r\n @media(min-width:768px){\r\n .headline{font-size:36px}\r\n .slides .slide{height:300px}\r\n .stats{grid-template-columns:1fr 1fr;gap:16px}\r\n .hero{padding-top:28px}\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <header>\r\n <div class=\"topbar\">\r\n <div class=\"brand\">\r\n <div class=\"logo\" aria-hidden=\"true\"><\/div>\r\n <div>\r\n <h1>MCDI Opens the Future<\/h1>\r\n <div class=\"sub\">Korean government technical support \u00b7 Vietnam optimization<\/div>\r\n <\/div>\r\n <\/div>\r\n <button class=\"cta-top\" id=\"openRegTop\">\r\n <span>Participation registration<\/span>\r\n <span style=\"display:inline-flex;width:8px;height:8px;border-radius:999px;background:var(--ok);box-shadow:0 0 0 4px rgba(16,185,129,.18)\"><\/span>\r\n <\/button>\r\n <\/div>\r\n <\/header>\r\n\r\n <main class=\"container\">\r\n <section class=\"hero\">\r\n <span class=\"eyebrow\">Lao Cai Pilot Installation \u00b7 100-ton Water Purification System per Day<\/span>\r\n <h2 class=\"headline\">Vietnam Local Optimized Water Purification Technology Demo & Free O2&B System<\/h2>\r\n <div class=\"chips\">\r\n <div class=\"chip\">Monday, November 3, 2025, 5:00 PM\u20138:00 PM<\/div>\r\n <div class=\"chip\">Seminar and dinner included<\/div>\r\n <div class=\"chip\">Invitation for the first 50 people<\/div>\r\n <\/div>\r\n\r\n <div class=\"panel\">\r\n <div class=\"stats\">\r\n <div>\r\n <div class=\"section-title\">Until the event starts<\/div>\r\n <div class=\"countdown\" aria-live=\"polite\" aria-label=\"Event countdown\">\r\n <div class=\"cd-item\"><div class=\"cd-num\" id=\"d\">--<\/div><div class=\"cd-label\">Day<\/div><\/div>\r\n <div class=\"cd-item\"><div class=\"cd-num\" id=\"h\">--<\/div><div class=\"cd-label\">hour<\/div><\/div>\r\n <div class=\"cd-item\"><div class=\"cd-num\" id=\"m\">--<\/div><div class=\"cd-label\">minute<\/div><\/div>\r\n <div class=\"cd-item\"><div class=\"cd-num\" id=\"s\">--<\/div><div class=\"cd-label\">candle<\/div><\/div>\r\n <\/div>\r\n <div class=\"helper\">As of: 2025-11-03 17:00 (can be changed in the time zone setting code)<\/div>\r\n <\/div>\r\n <div>\r\n <div class=\"section-title\">Application status<\/div>\r\n <div class=\"capacity\">\r\n <div class=\"cap-row\">\r\n <div class=\"left\">\r\n <strong id=\"countLabel\">0<\/strong> \/ <span id=\"capLabel\">50<\/span> Name reception\r\n <\/div>\r\n <div class=\"right\" id=\"remainingLabel\">50 seats left<\/div>\r\n <\/div>\r\n <div class=\"bar\" aria-hidden=\"true\">\r\n <div class=\"fill\" id=\"capFill\" style=\"width:0%\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <button class=\"cta-btn\" id=\"openRegHero\" aria-label=\"Register to participate\">\r\n \ud83d\udce9 Registration\r\n <\/button>\r\n <\/section>\r\n\r\n <section class=\"video\">\r\n <div class=\"section-title\">Equipment and Technology Videos<\/div>\r\n <div class=\"video-embed\" id=\"videoBox\" data-video-id=\"VIDEO_ID_\uc5ec\uae30\uc5d0_\uc785\ub825\">\r\n \r\n <iframe id=\"ytFrame\" src=\"about:blank\" title=\"YouTube video\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen referrerpolicy=\"strict-origin-when-cross-origin\"><\/iframe>\r\n <\/div>\r\n <div class=\"helper\">Just enter the YouTube video ID in data-video-id and it will be loaded automatically.<\/div>\r\n <\/section>\r\n\r\n <section class=\"gallery\">\r\n <div class=\"section-title\">Browse photos<\/div>\r\n <div class=\"gallery-wrap\">\r\n <div class=\"slides\" id=\"slides\">\r\n <div class=\"slide\" style=\"background-image:url('https:\/\/images.unsplash.com\/photo-1528821154947-1aa3d1b7491a?q=80&w=1400&auto=format&fit=crop');\" role=\"img\" aria-label=\"Overview of the water purification plant\"><\/div>\r\n <div class=\"slide\" style=\"background-image:url('https:\/\/images.unsplash.com\/photo-1564865878688-9a2444440429?q=80&w=1400&auto=format&fit=crop');\" role=\"img\" aria-label=\"Membrane filtration and ion removal equipment\"><\/div>\r\n <div class=\"slide\" style=\"background-image:url('https:\/\/images.unsplash.com\/photo-1542326237-94b1c5a538b2?q=80&w=1400&auto=format&fit=crop');\" role=\"img\" aria-label=\"On-site installation and commissioning\"><\/div>\r\n <\/div>\r\n <div class=\"g-nav\" id=\"dots\" aria-hidden=\"true\"><\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <section class=\"about\">\r\n <div class=\"section-title\">Event Information<\/div>\r\n <div class=\"details\">\r\n <div class=\"detail\">\r\n <svg class=\"icon\" viewbox=\"0 0 24 24\" fill=\"none\"><path d=\"M7 10h10M7 14h6\" stroke=\"#a5b4fc\" stroke-width=\"1.6\" stroke-linecap=\"round\"\/><rect x=\"3\" y=\"4\" width=\"18\" height=\"16\" rx=\"3\" stroke=\"#60a5fa\" stroke-width=\"1.6\"\/><\/svg>\r\n <div class=\"txt\">\r\n <div class=\"t\">program<\/div>\r\n <div class=\"d\">Seminar (technology introduction\/Q&A) + equipment demonstration + dinner networking<\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"detail\">\r\n <svg class=\"icon\" viewbox=\"0 0 24 24\" fill=\"none\"><path d=\"M12 6v6l4 2\" stroke=\"#34d399\" stroke-width=\"1.8\" stroke-linecap=\"round\"\/><circle cx=\"12\" cy=\"12\" r=\"9\" stroke=\"#93c5fd\" stroke-width=\"1.6\"\/><\/svg>\r\n <div class=\"txt\">\r\n <div class=\"t\">hour<\/div>\r\n <div class=\"d\">Monday, November 3, 2025, 5:00 PM\u20138:00 PM<\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"detail\">\r\n <svg class=\"icon\" viewbox=\"0 0 24 24\" fill=\"none\"><path d=\"M4 7h16M4 12h16M4 17h10\" stroke=\"#22d3ee\" stroke-width=\"1.6\" stroke-linecap=\"round\"\/><\/svg>\r\n <div class=\"txt\">\r\n <div class=\"t\">core<\/div>\r\n <div class=\"d\">Introducing a 100-ton-per-day water purification system, optimized water quality in Vietnam, and a free O2&B system.<\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"detail\">\r\n <svg class=\"icon\" viewbox=\"0 0 24 24\" fill=\"none\"><path d=\"M20 7l-8 10-4-5-4 6\" stroke=\"#fbbf24\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\r\n <div class=\"txt\">\r\n <div class=\"t\">garden<\/div>\r\n <div class=\"d\">First 50 people (real-time count on this page)<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <section class=\"panel\">\r\n <div class=\"section-title\">Invitees<\/div>\r\n <ul style=\"margin:6px 0 0 16px; color:#c8d6f5; font-size:14px; line-height:1.6\">\r\n <li>Central and local government agencies and public corporations<\/li>\r\n <li>Companies related to water supply, sewage, water treatment, and environmental industries<\/li>\r\n <li>Research institutes, universities, development cooperation organizations, etc.<\/li>\r\n <\/ul>\r\n <\/section>\r\n\r\n <div class=\"cta-sticky\">\r\n <button class=\"cta-btn\" id=\"openRegSticky\">\ud83d\udce9 Registration<\/button>\r\n <\/div>\r\n <\/main>\r\n\r\n <dialog class=\"modal\" id=\"regModal\" aria-labelledby=\"regTitle\" aria-modal=\"true\">\r\n <div class=\"sheet\">\r\n <header>\r\n <div class=\"title\" id=\"regTitle\">Participation registration<\/div>\r\n <button class=\"close\" id=\"closeReg\" aria-label=\"close\">\u2715<\/button>\r\n <\/header>\r\n <form id=\"regForm\" autocomplete=\"on\" action=\"\">\r\n <div class=\"row\">\r\n <label for=\"org\">Company\/organization name<\/label>\r\n <input id=\"org\" name=\"org\" type=\"text\" placeholder=\"Example) O2&B, \u25cb\u25cb City Waterworks Business Headquarters\" required \/>\r\n <\/div>\r\n <div class=\"row\">\r\n <label for=\"title\">title<\/label>\r\n <input id=\"title\" name=\"title\" type=\"text\" placeholder=\"Example) Team leader, researcher, director\" required \/>\r\n <\/div>\r\n <div class=\"row\">\r\n <label for=\"name\">name<\/label>\r\n <input id=\"name\" name=\"name\" type=\"text\" placeholder=\"Hong Gil-dong\" required \/>\r\n <\/div>\r\n <div class=\"row\">\r\n <label for=\"contact\">Contact information (mobile phone or email)<\/label>\r\n <input id=\"contact\" name=\"contact\" type=\"text\" inputmode=\"email\" placeholder=\"010-1234-5678 or name@example.com\" required \/>\r\n <\/div>\r\n <div class=\"agree\">\r\n <input id=\"agree\" type=\"checkbox\" required \/>\r\n <label for=\"agree\">Personal information (name, contact information, affiliation\/title) will be used only for event operation purposes and will be destroyed after the event ends.<\/label>\r\n <\/div>\r\n <button class=\"submit\" id=\"submitBtn\" type=\"submit\">Apply<\/button>\r\n <div class=\"helper\">Applications will automatically close when the number of participants exceeds 50.<\/div>\r\n <input type=\"hidden\" name=\"trp-form-language\" value=\"en\"\/><\/form>\r\n <\/div>\r\n <\/dialog>\r\n\r\n <div class=\"toast\" id=\"toast\" role=\"status\" aria-live=\"polite\">Your submission has been received. Thank you!<\/div>\r\n\r\n <footer>\r\n \u00a9 2025 MCDI, Opening the Future \u00b7 This page is a demo, stored locally (in a browser). Server integration is required for actual operation.\r\n <\/footer>\r\n\r\n <script>\r\n \/\/ ===== \uc124\uc815 =====\r\n const CAPACITY = 50;\r\n \/\/ \ud589\uc0ac \uc2dc\uc791 \uc2dc\uac01: \ud55c\uad6d\uc2dc\uac04(KST, UTC+9). \ubca0\ud2b8\ub0a8\uc2dc\uac04(UTC+7)\uc73c\ub85c \ubc14\uafb8\ub824\uba74 +07:00\ub85c \ubcc0\uacbd.\r\n const EVENT_ISO = '2025-11-03T17:00:00+09:00';\r\n\r\n \/\/ ===== \uc800\uc7a5\uc18c \ud0a4 =====\r\n const STORE_KEY = 'mcdi_registrations_v1';\r\n\r\n \/\/ ===== \uc720\ud2f8 =====\r\n const $ = (s) => document.querySelector(s);\r\n const $$ = (s) => document.querySelectorAll(s);\r\n\r\n function loadRegs(){\r\n try{\r\n const v = JSON.parse(localStorage.getItem(STORE_KEY) || '[]');\r\n return Array.isArray(v) ? v : [];\r\n }catch(e){ return []; }\r\n }\r\n function saveRegs(list){\r\n localStorage.setItem(STORE_KEY, JSON.stringify(list));\r\n }\r\n function showToast(msg='\ucc98\ub9ac\ub418\uc5c8\uc2b5\ub2c8\ub2e4.'){\r\n const t = $('#toast'); t.textContent = msg;\r\n t.classList.add('show');\r\n setTimeout(()=>t.classList.remove('show'), 2200);\r\n }\r\n\r\n \/\/ ===== \uce74\uc6b4\ud2b8\ub2e4\uc6b4 =====\r\n function startCountdown(){\r\n const target = new Date(EVENT_ISO).getTime();\r\n function tick(){\r\n const now = Date.now();\r\n let diff = Math.max(0, target - now);\r\n const d = Math.floor(diff \/ (1000*60*60*24)); diff -= d*24*60*60*1000;\r\n const h = Math.floor(diff \/ (1000*60*60)); diff -= h*60*60*1000;\r\n const m = Math.floor(diff \/ (1000*60)); diff -= m*60*1000;\r\n const s = Math.floor(diff \/ 1000);\r\n $('#d').textContent = String(d).padStart(2,'0');\r\n $('#h').textContent = String(h).padStart(2,'0');\r\n $('#m').textContent = String(m).padStart(2,'0');\r\n $('#s').textContent = String(s).padStart(2,'0');\r\n }\r\n tick();\r\n setInterval(tick, 1000);\r\n }\r\n\r\n \/\/ ===== \uc6a9\ub7c9 \ud45c\uc2dc =====\r\n function updateCapacityUI(){\r\n const regs = loadRegs();\r\n const count = regs.length;\r\n const remaining = Math.max(0, CAPACITY - count);\r\n $('#countLabel').textContent = count;\r\n $('#capLabel').textContent = CAPACITY;\r\n $('#remainingLabel').textContent = remaining === 0 ? '\ub9c8\uac10' : `\ub0a8\uc740 \uc88c\uc11d ${remaining}`;\r\n const fill = Math.min(100, Math.round((count \/ CAPACITY) * 100));\r\n $('#capFill').style.width = fill + '%';\r\n\r\n const disabled = count >= CAPACITY;\r\n ['#openRegTop','#openRegHero','#openRegSticky','#submitBtn'].forEach(sel=>{\r\n const el = $(sel); if(!el) return;\r\n el.disabled = disabled;\r\n });\r\n if(disabled){\r\n $('#submitBtn') && ($('#submitBtn').textContent = '\ub9c8\uac10\ub418\uc5c8\uc2b5\ub2c8\ub2e4');\r\n }else{\r\n $('#submitBtn') && ($('#submitBtn').textContent = '\uc811\uc218\ud558\uae30');\r\n }\r\n }\r\n\r\n \/\/ ===== \uc911\ubcf5 \uccb4\ud06c: \uc5f0\ub77d\ucc98 \uae30\uc900 =====\r\n function isDuplicateContact(contact){\r\n const regs = loadRegs();\r\n return regs.some(r => (r.contact || '').trim().toLowerCase() === contact.trim().toLowerCase());\r\n }\r\n\r\n \/\/ ===== \uac04\ub2e8\ud55c \uc720\ud6a8\uc131 \uac80\uc0ac =====\r\n function validContact(v){\r\n const s = v.trim();\r\n const email = \/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$\/i.test(s);\r\n const phone = \/^(0\\d{1,2}-?\\d{3,4}-?\\d{4}|0\\d{8,10}|\\+?\\d{7,15})$\/.test(s.replace(\/\\s\/g,''));\r\n return email || phone;\r\n }\r\n\r\n \/\/ ===== \ub4f1\ub85d \uc800\uc7a5 (\ub85c\uceec \uc800\uc7a5) =====\r\n function saveRegistration(data){\r\n const regs = loadRegs();\r\n regs.push({\r\n ...data,\r\n ts: Date.now()\r\n });\r\n saveRegs(regs);\r\n updateCapacityUI();\r\n return true;\r\n }\r\n\r\n \/* ===== \uc11c\ubc84 \uc5f0\ub3d9 \uc608\uc2dc (\uc6b4\uc601 \uad8c\uc7a5) =====\r\n async function saveRegistrationToServer(data){\r\n const res = await fetch('https:\/\/YOUR_API_ENDPOINT\/registrations', {\r\n method:'POST',\r\n headers:{'Content-Type':'application\/json'},\r\n body:JSON.stringify(data)\r\n });\r\n if(!res.ok) throw new Error('\uc11c\ubc84 \uc800\uc7a5 \uc2e4\ud328');\r\n const { total } = await res.json(); \/\/ \uc11c\ubc84\uac00 \ucd1d \uc778\uc6d0 \ubc18\ud658\ud55c\ub2e4\uace0 \uac00\uc815\r\n return total; \/\/ total\uc744 UI\uc5d0 \ubc18\uc601\ud558\ub3c4\ub85d updateCapacityUI\ub300\uc2e0 \uc0ac\uc6a9\r\n }\r\n *\/\r\n\r\n \/\/ ===== \ubaa8\ub2ec =====\r\n const regModal = $('#regModal');\r\n function openModal(){\r\n regModal.setAttribute('open','');\r\n document.body.style.overflow='hidden';\r\n $('#org').focus();\r\n }\r\n function closeModal(){\r\n regModal.removeAttribute('open');\r\n document.body.style.overflow='';\r\n $('#regForm').reset();\r\n }\r\n\r\n \/\/ ===== YouTube ID \ub85c\ub529 =====\r\n function loadYouTube(){\r\n const box = $('#videoBox');\r\n const vid = (box.getAttribute('data-video-id') || '').trim();\r\n const frame = $('#ytFrame');\r\n if(vid && vid !== 'VIDEO_ID_\uc5ec\uae30\uc5d0_\uc785\ub825'){\r\n const src = `https:\/\/www.youtube.com\/embed\/${encodeURIComponent(vid)}?rel=0&modestbranding=1&playsinline=1`;\r\n frame.src = src;\r\n }else{\r\n frame.src = 'https:\/\/www.youtube.com\/embed\/1La4QzGeaaQ?rel=0&modestbranding=1&playsinline=1';\r\n \/\/ \uc704\ub294 \uc0d8\ud50c \uc601\uc0c1\uc785\ub2c8\ub2e4. data-video-id\ub85c \uad50\uccb4\ud558\uc138\uc694.\r\n }\r\n }\r\n\r\n \/\/ ===== \uc2ac\ub77c\uc774\ub354 =====\r\n let slideIndex = 0, slideCount = 0, sliderTimer = null, touchStartX = 0, touchEndX = 0;\r\n function initSlider(){\r\n const slides = $('#slides');\r\n slideCount = slides.children.length;\r\n const dots = $('#dots');\r\n dots.innerHTML = '';\r\n for(let i=0;i<slideCount;i++){\r\n const d = document.createElement('div');\r\n d.className = 'dot' + (i===0 ? ' active':'');\r\n d.dataset.index = i;\r\n d.addEventListener('click', ()=>goSlide(i,true));\r\n dots.appendChild(d);\r\n }\r\n const wrap = slides.parentElement;\r\n wrap.addEventListener('touchstart', e=>{ touchStartX = e.changedTouches[0].screenX; });\r\n wrap.addEventListener('touchend', e=>{\r\n touchEndX = e.changedTouches[0].screenX;\r\n const dx = touchEndX - touchStartX;\r\n if(Math.abs(dx) > 40){\r\n if(dx < 0) goSlide(Math.min(slideIndex+1, slideCount-1), true);\r\n else goSlide(Math.max(slideIndex-1, 0), true);\r\n }\r\n });\r\n autoSlide();\r\n window.addEventListener('visibilitychange', ()=>{\r\n if(document.hidden){ clearInterval(sliderTimer); }\r\n else autoSlide();\r\n });\r\n }\r\n function goSlide(i, stopAuto=false){\r\n slideIndex = i;\r\n const slides = $('#slides');\r\n slides.style.transform = `translateX(-${i*100}%)`;\r\n $$('#dots .dot').forEach((d,idx)=>d.classList.toggle('active', idx===i));\r\n if(stopAuto){ clearInterval(sliderTimer); autoSlide(); }\r\n }\r\n function autoSlide(){\r\n clearInterval(sliderTimer);\r\n sliderTimer = setInterval(()=>{\r\n slideIndex = (slideIndex + 1) % slideCount;\r\n goSlide(slideIndex,false);\r\n }, 3500);\r\n }\r\n\r\n \/\/ ===== \ucd08\uae30\ud654 =====\r\n document.addEventListener('DOMContentLoaded', ()=>{\r\n \/\/ \ubc84\ud2bc \ubc14\uc778\ub529\r\n ['#openRegTop','#openRegHero','#openRegSticky'].forEach(sel=>{\r\n const el = $(sel); el && el.addEventListener('click', openModal);\r\n });\r\n $('#closeReg').addEventListener('click', closeModal);\r\n $('#regModal').addEventListener('click', (e)=>{ if(e.target.id==='regModal') closeModal(); });\r\n\r\n \/\/ \ud3fc \uc81c\ucd9c\r\n $('#regForm').addEventListener('submit', async (e)=>{\r\n e.preventDefault();\r\n const count = loadRegs().length;\r\n if(count >= CAPACITY){\r\n showToast('\uc815\uc6d0\uc774 \ub9c8\uac10\ub418\uc5c8\uc2b5\ub2c8\ub2e4.');\r\n updateCapacityUI();\r\n return;\r\n }\r\n const org = $('#org').value.trim();\r\n const title = $('#title').value.trim();\r\n const name = $('#name').value.trim();\r\n const contact = $('#contact').value.trim();\r\n const agree = $('#agree').checked;\r\n\r\n if(!org || !title || !name || !contact || !agree){\r\n showToast('\ud544\uc218 \ud56d\ubaa9\uc744 \ud655\uc778\ud574\uc8fc\uc138\uc694.');\r\n return;\r\n }\r\n if(!validContact(contact)){\r\n showToast('\uc5f0\ub77d\ucc98 \ud615\uc2dd\uc744 \ud655\uc778\ud574\uc8fc\uc138\uc694.');\r\n $('#contact').focus();\r\n return;\r\n }\r\n if(isDuplicateContact(contact)){\r\n showToast('\uc774\ubbf8 \uc811\uc218\ub41c \uc5f0\ub77d\ucc98\uc785\ub2c8\ub2e4.');\r\n return;\r\n }\r\n\r\n const data = { org, title, name, contact };\r\n \/\/ \ub85c\uceec \uc800\uc7a5\r\n const ok = saveRegistration(data);\r\n if(ok){\r\n closeModal();\r\n showToast('\uc811\uc218\ub418\uc5c8\uc2b5\ub2c8\ub2e4. \uac10\uc0ac\ud569\ub2c8\ub2e4!');\r\n }\r\n\r\n \/* \uc11c\ubc84 \uc800\uc7a5(\uc6b4\uc601) \uc0ac\uc6a9 \uc2dc:\r\n try{\r\n const total = await saveRegistrationToServer(data);\r\n closeModal();\r\n showToast('\uc811\uc218\ub418\uc5c8\uc2b5\ub2c8\ub2e4. \uac10\uc0ac\ud569\ub2c8\ub2e4!');\r\n \/\/ \uc11c\ubc84 total\uc744 \uc0ac\uc6a9\ud558\uc5ec UI \uac31\uc2e0\r\n \/\/ \ucee4\uc2a4\ud140: updateCapacityUIFromServer(total);\r\n }catch(err){\r\n console.error(err);\r\n showToast('\uc11c\ubc84 \uc624\ub958\ub85c \uc811\uc218\uc5d0 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4.');\r\n }\r\n *\/\r\n });\r\n\r\n \/\/ UI \ucd08\uae30 \uc0c1\ud0dc\r\n updateCapacityUI();\r\n startCountdown();\r\n loadYouTube();\r\n initSlider();\r\n });\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\n``` Description Summary - Save registration: It is saved in the browser localStorage and the counter is updated in real time. When the quota reaches 50 people, the button is automatically disabled and marked as "Closed." - Timer: Countdown based on 2025-11-03 17:00. To change to Vietnam time, change +09:00 in EVENT_ISO to +07:00. - YouTube video: It will be loaded automatically if you just enter the actual video ID in the data-video-id attribute. - Photo slideshow: Supports autoplay and touch swipe. Operational tips - Currently, it is saved locally, so it is saved separately for each user browser. If you need actual statistics, connect the server API as in the saveRegistrationToServer example in the comments to manage the total number of registrants.\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>\uc544\ub798\ub294 \ubaa8\ubc14\uc77c\uc5d0 \ucd5c\uc801\ud654\ub41c \ud589\uc0ac \ucd08\uccad \ub79c\ub529\ud398\uc774\uc9c0 \uc804\uccb4 HTML\uc785\ub2c8\ub2e4. \uadf8\ub300\ub85c \ubcf5\uc0ac\ud574 \ubd99\uc5ec\ub123\uc73c\uba74 \ub3d9\uc791\ud569\ub2c8\ub2e4. \uc800\uc7a5\uc740 \ube0c\ub77c\uc6b0\uc800\uc758 \ub85c\uceec \uc800\uc7a5\uc18c(localStorage)\uc5d0 \uc800\uc7a5\ub418\uba70, \uc2e4\uc81c \uc6b4\uc601 \uc2dc\uc5d0\ub294 \uc8fc\uc11d\uc758 API \uc5f0\ub3d9 \ubd80\ubd84\uc744 \ucc38\uace0\ud574 \uc11c\ubc84 \uc800\uc7a5\uc73c\ub85c \ubc14\uafd4\uc8fc\uc138\uc694. “`html \ubbf8\ub798\ub97c \uc5ec\ub294 MCDI | \ub77c\uc624\uae4c\uc774 \uc2dc\ubc94\uc124\uce58 \ucd08\uccad \ubbf8\ub798\ub97c \uc5ec\ub294 MCDI \ud55c\uad6d\uc815\ubd80 \uae30\uc220\uc9c0\uc6d0 \u00b7 \ubca0\ud2b8\ub0a8 \ucd5c\uc801\ud654 \ucc38\uac00\ub4f1\ub85d \ub77c\uc624\uae4c\uc774 \uc2dc\ubc94\uc124\uce58 \u00b7 1\uc77c 100\ud1a4 \uc815\uc218 \uc2dc\uc2a4\ud15c \ubca0\ud2b8\ub0a8 \ud604\uc9c0 \ucd5c\uc801\ud654 […]<\/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-3635","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.site\/en\/wp-json\/wp\/v2\/pages\/3635","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cellbio.site\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/cellbio.site\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/cellbio.site\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/cellbio.site\/en\/wp-json\/wp\/v2\/comments?post=3635"}],"version-history":[{"count":0,"href":"https:\/\/cellbio.site\/en\/wp-json\/wp\/v2\/pages\/3635\/revisions"}],"wp:attachment":[{"href":"https:\/\/cellbio.site\/en\/wp-json\/wp\/v2\/media?parent=3635"}],"wp:term":[{"taxonomy":"wf_page_folders","embeddable":true,"href":"https:\/\/cellbio.site\/en\/wp-json\/wp\/v2\/wf_page_folders?post=3635"}],"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\tBelow is the full HTML of the event invitation landing page, optimized for mobile. Copy and paste it as is to see it work. It's saved in your browser's local storage. For actual operation, refer to the API integration section in the comments and change it to server storage. ```html\r\n\r\n\r\n\r\n \r\n \r\n \ubbf8\ub798\ub97c \uc5ec\ub294 MCDI | \ub77c\uc624\uae4c\uc774 \uc2dc\ubc94\uc124\uce58 \ucd08\uccad<\/title>\r\n <meta name=\"description\" content=\"\ud55c\uad6d\uc815\ubd80 \uae30\uc220\uc9c0\uc6d0 \uc0ac\uc5c5 | \ubca0\ud2b8\ub0a8 \ucd5c\uc801\ud654 MCDI | 1\uc77c 100\ud1a4 \uc815\uc218 \uc2dc\uc2a4\ud15c | \ub77c\uc624\uae4c\uc774 \uc2dc\ubc94\uc124\uce58 | 2025\ub144 11\uc6d4 3\uc77c 17:00~20:00 | \uc138\ubbf8\ub098\u00b7\ub9cc\ucc2c \ud3ec\ud568 | \uc120\ucc29\uc21c 50\uba85 \ucd08\uccad\" \/>\r\n <meta property=\"og:title\" content=\"\ubbf8\ub798\ub97c \uc5ec\ub294 MCDI | \ub77c\uc624\uae4c\uc774 \uc2dc\ubc94\uc124\uce58 \ucd08\uccad\" \/>\r\n <meta property=\"og:description\" content=\"1\uc77c 100\ud1a4 \uc815\uc218 \uc2dc\uc2a4\ud15c \u00b7 O2&B \ubb34\uc0c1 \uc2dc\uc2a4\ud15c \u00b7 \uc138\ubbf8\ub098\uc640 \ub9cc\ucc2c \ud3ec\ud568 \u00b7 \uc120\ucc29\uc21c 50\uba85\" \/>\r\n <meta property=\"og:type\" content=\"website\" \/>\r\n <meta name=\"format-detection\" content=\"telephone=no\" \/>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Noto+Sans+KR:wght@400;600;700;800&display=swap\" rel=\"stylesheet\" \/>\r\n <style>\r\n :root{\r\n --bg:#0b1220;\r\n --card:#0f1a2e;\r\n --muted:#98a3b8;\r\n --text:#e6edf7;\r\n --primary:#22d3ee;\r\n --accent:#4f46e5;\r\n --ok:#10b981;\r\n --warn:#f59e0b;\r\n --danger:#ef4444;\r\n --glass: rgba(255,255,255,.06);\r\n --border: rgba(255,255,255,.12);\r\n --shadow: 0 10px 40px rgba(0,0,0,.35);\r\n --radius:16px;\r\n }\r\n *{box-sizing:border-box}\r\n html,body{height:100%}\r\n body{\r\n margin:0;\r\n font-family:\"Noto Sans KR\", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;\r\n color:var(--text);\r\n background:\r\n radial-gradient(1200px 600px at 80% -10%, #1b2a46 0%, transparent 60%),\r\n radial-gradient(800px 600px at -10% 30%, #0e2a35 0%, transparent 60%),\r\n linear-gradient(180deg, #06101f, #0b1220 40%, #0b1220 100%);\r\n }\r\n a{color:inherit;text-decoration:none}\r\n .container{max-width:840px;margin:0 auto;padding:18px}\r\n header{\r\n position:sticky;top:0;z-index:30;\r\n backdrop-filter:saturate(140%) blur(10px);\r\n background:linear-gradient(180deg, rgba(8,12,24,.85), rgba(8,12,24,.4));\r\n border-bottom:1px solid var(--border);\r\n }\r\n .topbar{display:flex;align-items:center;justify-content:space-between;padding:12px 16px}\r\n .brand{display:flex;align-items:center;gap:10px}\r\n .logo{\r\n width:36px;height:36px;border-radius:10px;\r\n background: radial-gradient(circle at 30% 30%, #22d3ee, #4f46e5 60%, #0ea5e9 100%);\r\n box-shadow: 0 6px 20px rgba(34,211,238,.35);\r\n }\r\n .brand h1{font-size:16px;margin:0;font-weight:800;letter-spacing:.2px}\r\n .brand .sub{font-size:12px;color:var(--muted)}\r\n .cta-top{\r\n display:inline-flex;align-items:center;gap:8px;\r\n background:linear-gradient(135deg,var(--primary),#60a5fa);\r\n color:#041018;padding:10px 14px;border-radius:12px;font-weight:700;\r\n box-shadow: 0 8px 24px rgba(34,211,238,.35);\r\n border:0;cursor:pointer\r\n }\r\n .cta-top:disabled{filter:grayscale(1);opacity:.6;cursor:not-allowed}\r\n\r\n .hero{\r\n padding:22px 18px 8px 18px;\r\n }\r\n .headline{\r\n background:linear-gradient(135deg,#9ae6ff 0%, #e0e7ff 100%);\r\n -webkit-background-clip:text;background-clip:text;color:transparent;\r\n font-size:28px;line-height:1.2;font-weight:800;margin:6px 0 8px;\r\n letter-spacing:-.2px;\r\n }\r\n .eyebrow{\r\n display:inline-flex;gap:8px;align-items:center;\r\n padding:6px 10px;border:1px solid var(--border);\r\n border-radius:999px;background:var(--glass);\r\n color:#b7c3d9;font-size:12px\r\n }\r\n .chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}\r\n .chip{\r\n font-size:12px;color:#c3cfe6;border:1px dashed var(--border);\r\n background:rgba(255,255,255,.04);padding:6px 10px;border-radius:999px\r\n }\r\n\r\n .panel{\r\n background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));\r\n border:1px solid var(--border);\r\n border-radius:var(--radius);\r\n box-shadow:var(--shadow);\r\n padding:16px;\r\n margin:16px 0;\r\n }\r\n\r\n .stats{\r\n display:grid;grid-template-columns:1fr;gap:12px;\r\n }\r\n .countdown{\r\n display:flex;align-items:center;justify-content:center;gap:10px;\r\n padding:12px;border-radius:12px;background:rgba(15,26,46,.65);border:1px solid var(--border)\r\n }\r\n .cd-item{display:flex;flex-direction:column;align-items:center;min-width:62px}\r\n .cd-num{\r\n font-variant-numeric:tabular-nums;\r\n font-size:22px;font-weight:800;padding:10px 12px;border-radius:12px;\r\n background:linear-gradient(180deg,#0e203c, #0a1a30);\r\n border:1px solid var(--border);box-shadow: inset 0 1px 0 rgba(255,255,255,.06);\r\n }\r\n .cd-label{font-size:11px;color:var(--muted);margin-top:6px}\r\n\r\n .capacity{margin-top:8px}\r\n .cap-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}\r\n .cap-row .left{font-size:13px;color:#cfe3ff}\r\n .cap-row .right{font-size:12px;color:var(--muted)}\r\n .bar{\r\n position:relative;height:10px;border-radius:999px;background:#0c1b2e;border:1px solid var(--border);overflow:hidden\r\n }\r\n .bar .fill{\r\n position:absolute;top:0;left:0;height:100%;width:0%;\r\n background:linear-gradient(90deg,#22d3ee,#60a5fa,#4f46e5);\r\n transition:width .35s ease;\r\n }\r\n\r\n .video, .gallery, .about{margin:16px 0}\r\n .section-title{font-weight:800;font-size:16px;margin:2px 0 10px;color:#d9e4ff}\r\n .video-embed{\r\n position:relative;width:100%;aspect-ratio:16\/9;border-radius:14px;\r\n overflow:hidden;border:1px solid var(--border);background:#000\r\n }\r\n .video-embed iframe{position:absolute;inset:0;width:100%;height:100%}\r\n\r\n .gallery-wrap{position:relative;border-radius:14px;overflow:hidden;border:1px solid var(--border);background:#071423}\r\n .slides{display:flex;transition:transform .5s ease}\r\n .slide{min-width:100%;height:220px;background-size:cover;background-position:center}\r\n .g-nav{\r\n position:absolute;inset:auto 0 8px 0;display:flex;justify-content:center;gap:6px;z-index:2\r\n }\r\n .dot{width:8px;height:8px;border-radius:999px;background:rgba(255,255,255,.35)}\r\n .dot.active{background:#fff}\r\n\r\n .details{\r\n display:grid;grid-template-columns:1fr;gap:10px;margin-top:8px\r\n }\r\n .detail{\r\n display:flex;gap:10px;align-items:flex-start;background:rgba(255,255,255,.04);\r\n padding:12px;border-radius:12px;border:1px dashed var(--border)\r\n }\r\n .detail .icon{width:22px;height:22px;flex:0 0 22px;opacity:.9}\r\n .detail .txt .t{font-weight:700;font-size:14px}\r\n .detail .txt .d{font-size:13px;color:#c2cce2;margin-top:2px}\r\n\r\n .cta-sticky{\r\n position:sticky;bottom:0;z-index:25;padding:10px 12px;\r\n background:linear-gradient(180deg, rgba(7,12,24,0), rgba(7,12,24,.9));\r\n backdrop-filter:saturate(140%) blur(6px);\r\n border-top:1px solid var(--border);\r\n }\r\n .cta-btn{\r\n width:100%;display:flex;align-items:center;justify-content:center;gap:10px;\r\n background:linear-gradient(135deg,var(--primary),#60a5fa);\r\n color:#06121a;border:0;border-radius:14px;padding:14px 16px;font-weight:800;font-size:16px;\r\n box-shadow:0 12px 28px rgba(34,211,238,.28);\r\n cursor:pointer\r\n }\r\n .cta-btn:disabled{filter:grayscale(1);opacity:.6;cursor:not-allowed}\r\n\r\n \/* Modal *\/\r\n .modal{\r\n position:fixed;inset:0;display:none;align-items:flex-end;justify-content:center;z-index:60;\r\n background:rgba(3,6,12,.6);backdrop-filter:blur(4px)\r\n }\r\n .modal[open]{display:flex}\r\n .sheet{\r\n width:100%;max-width:840px;background:linear-gradient(180deg,#0c1730,#0b1326);\r\n border-radius:18px 18px 0 0;border-top:1px solid var(--border);\r\n box-shadow:var(--shadow);padding:16px\r\n }\r\n .sheet header{position:relative;background:none;border:0}\r\n .sheet .title{font-weight:800;font-size:18px;margin:8px 0 10px}\r\n .close{\r\n position:absolute;right:6px;top:6px;background:transparent;border:0;color:#c9d6f2;font-size:22px\r\n }\r\n\r\n form .row{display:flex;flex-direction:column;gap:6px;margin:8px 0}\r\n label{font-size:13px;color:#cfe3ff}\r\n input{\r\n width:100%;padding:12px 12px;border-radius:12px;background:#0a1a30;border:1px solid var(--border);\r\n color:#eaf2ff;font-size:15px;outline:none\r\n }\r\n input::placeholder{color:#99a7c2}\r\n input:focus{border-color:#60a5fa;box-shadow:0 0 0 3px rgba(96,165,250,.18)}\r\n .agree{display:flex;gap:8px;align-items:flex-start;margin-top:6px;color:#b9c7e6;font-size:12px}\r\n .submit{\r\n margin-top:12px;width:100%;padding:14px;border-radius:14px;border:0;\r\n background:linear-gradient(135deg,#22d3ee,#60a5fa);color:#071626;font-weight:800;font-size:16px;\r\n cursor:pointer\r\n }\r\n .submit:disabled{opacity:.6;cursor:not-allowed}\r\n .helper{font-size:12px;color:#9eb3d8;margin-top:6px}\r\n\r\n .toast{\r\n position:fixed;left:50%;bottom:90px;transform:translateX(-50%) translateY(20px);\r\n background:#0f1a2e;border:1px solid var(--border);padding:12px 16px;border-radius:12px;\r\n opacity:0;pointer-events:none;transition:all .25s ease;z-index:70\r\n }\r\n .toast.show{opacity:1;transform:translateX(-50%) translateY(0)}\r\n footer{color:#8fa3c6;font-size:12px;padding:18px;text-align:center}\r\n \/* Desktop enhancements *\/\r\n @media(min-width:768px){\r\n .headline{font-size:36px}\r\n .slides .slide{height:300px}\r\n .stats{grid-template-columns:1fr 1fr;gap:16px}\r\n .hero{padding-top:28px}\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <header>\r\n <div class=\"topbar\">\r\n <div class=\"brand\">\r\n <div class=\"logo\" aria-hidden=\"true\"><\/div>\r\n <div>\r\n <h1>MCDI Opens the Future<\/h1>\r\n <div class=\"sub\">Korean government technical support \u00b7 Vietnam optimization<\/div>\r\n <\/div>\r\n <\/div>\r\n <button class=\"cta-top\" id=\"openRegTop\">\r\n <span>Participation registration<\/span>\r\n <span style=\"display:inline-flex;width:8px;height:8px;border-radius:999px;background:var(--ok);box-shadow:0 0 0 4px rgba(16,185,129,.18)\"><\/span>\r\n <\/button>\r\n <\/div>\r\n <\/header>\r\n\r\n <main class=\"container\">\r\n <section class=\"hero\">\r\n <span class=\"eyebrow\">Lao Cai Pilot Installation \u00b7 100-ton Water Purification System per Day<\/span>\r\n <h2 class=\"headline\">Vietnam Local Optimized Water Purification Technology Demo & Free O2&B System<\/h2>\r\n <div class=\"chips\">\r\n <div class=\"chip\">Monday, November 3, 2025, 5:00 PM\u20138:00 PM<\/div>\r\n <div class=\"chip\">Seminar and dinner included<\/div>\r\n <div class=\"chip\">Invitation for the first 50 people<\/div>\r\n <\/div>\r\n\r\n <div class=\"panel\">\r\n <div class=\"stats\">\r\n <div>\r\n <div class=\"section-title\">Until the event starts<\/div>\r\n <div class=\"countdown\" aria-live=\"polite\" aria-label=\"Event countdown\">\r\n <div class=\"cd-item\"><div class=\"cd-num\" id=\"d\">--<\/div><div class=\"cd-label\">Day<\/div><\/div>\r\n <div class=\"cd-item\"><div class=\"cd-num\" id=\"h\">--<\/div><div class=\"cd-label\">hour<\/div><\/div>\r\n <div class=\"cd-item\"><div class=\"cd-num\" id=\"m\">--<\/div><div class=\"cd-label\">minute<\/div><\/div>\r\n <div class=\"cd-item\"><div class=\"cd-num\" id=\"s\">--<\/div><div class=\"cd-label\">candle<\/div><\/div>\r\n <\/div>\r\n <div class=\"helper\">As of: 2025-11-03 17:00 (can be changed in the time zone setting code)<\/div>\r\n <\/div>\r\n <div>\r\n <div class=\"section-title\">Application status<\/div>\r\n <div class=\"capacity\">\r\n <div class=\"cap-row\">\r\n <div class=\"left\">\r\n <strong id=\"countLabel\">0<\/strong> \/ <span id=\"capLabel\">50<\/span> Name reception\r\n <\/div>\r\n <div class=\"right\" id=\"remainingLabel\">50 seats left<\/div>\r\n <\/div>\r\n <div class=\"bar\" aria-hidden=\"true\">\r\n <div class=\"fill\" id=\"capFill\" style=\"width:0%\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <button class=\"cta-btn\" id=\"openRegHero\" aria-label=\"Register to participate\">\r\n \ud83d\udce9 Registration\r\n <\/button>\r\n <\/section>\r\n\r\n <section class=\"video\">\r\n <div class=\"section-title\">Equipment and Technology Videos<\/div>\r\n <div class=\"video-embed\" id=\"videoBox\" data-video-id=\"VIDEO_ID_\uc5ec\uae30\uc5d0_\uc785\ub825\">\r\n \r\n <iframe id=\"ytFrame\" src=\"about:blank\" title=\"YouTube video\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen referrerpolicy=\"strict-origin-when-cross-origin\"><\/iframe>\r\n <\/div>\r\n <div class=\"helper\">Just enter the YouTube video ID in data-video-id and it will be loaded automatically.<\/div>\r\n <\/section>\r\n\r\n <section class=\"gallery\">\r\n <div class=\"section-title\">Browse photos<\/div>\r\n <div class=\"gallery-wrap\">\r\n <div class=\"slides\" id=\"slides\">\r\n <div class=\"slide\" style=\"background-image:url('https:\/\/images.unsplash.com\/photo-1528821154947-1aa3d1b7491a?q=80&w=1400&auto=format&fit=crop');\" role=\"img\" aria-label=\"Overview of the water purification plant\"><\/div>\r\n <div class=\"slide\" style=\"background-image:url('https:\/\/images.unsplash.com\/photo-1564865878688-9a2444440429?q=80&w=1400&auto=format&fit=crop');\" role=\"img\" aria-label=\"Membrane filtration and ion removal equipment\"><\/div>\r\n <div class=\"slide\" style=\"background-image:url('https:\/\/images.unsplash.com\/photo-1542326237-94b1c5a538b2?q=80&w=1400&auto=format&fit=crop');\" role=\"img\" aria-label=\"On-site installation and commissioning\"><\/div>\r\n <\/div>\r\n <div class=\"g-nav\" id=\"dots\" aria-hidden=\"true\"><\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <section class=\"about\">\r\n <div class=\"section-title\">Event Information<\/div>\r\n <div class=\"details\">\r\n <div class=\"detail\">\r\n <svg class=\"icon\" viewbox=\"0 0 24 24\" fill=\"none\"><path d=\"M7 10h10M7 14h6\" stroke=\"#a5b4fc\" stroke-width=\"1.6\" stroke-linecap=\"round\"\/><rect x=\"3\" y=\"4\" width=\"18\" height=\"16\" rx=\"3\" stroke=\"#60a5fa\" stroke-width=\"1.6\"\/><\/svg>\r\n <div class=\"txt\">\r\n <div class=\"t\">program<\/div>\r\n <div class=\"d\">Seminar (technology introduction\/Q&A) + equipment demonstration + dinner networking<\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"detail\">\r\n <svg class=\"icon\" viewbox=\"0 0 24 24\" fill=\"none\"><path d=\"M12 6v6l4 2\" stroke=\"#34d399\" stroke-width=\"1.8\" stroke-linecap=\"round\"\/><circle cx=\"12\" cy=\"12\" r=\"9\" stroke=\"#93c5fd\" stroke-width=\"1.6\"\/><\/svg>\r\n <div class=\"txt\">\r\n <div class=\"t\">hour<\/div>\r\n <div class=\"d\">Monday, November 3, 2025, 5:00 PM\u20138:00 PM<\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"detail\">\r\n <svg class=\"icon\" viewbox=\"0 0 24 24\" fill=\"none\"><path d=\"M4 7h16M4 12h16M4 17h10\" stroke=\"#22d3ee\" stroke-width=\"1.6\" stroke-linecap=\"round\"\/><\/svg>\r\n <div class=\"txt\">\r\n <div class=\"t\">core<\/div>\r\n <div class=\"d\">Introducing a 100-ton-per-day water purification system, optimized water quality in Vietnam, and a free O2&B system.<\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"detail\">\r\n <svg class=\"icon\" viewbox=\"0 0 24 24\" fill=\"none\"><path d=\"M20 7l-8 10-4-5-4 6\" stroke=\"#fbbf24\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\r\n <div class=\"txt\">\r\n <div class=\"t\">garden<\/div>\r\n <div class=\"d\">First 50 people (real-time count on this page)<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <section class=\"panel\">\r\n <div class=\"section-title\">Invitees<\/div>\r\n <ul style=\"margin:6px 0 0 16px; color:#c8d6f5; font-size:14px; line-height:1.6\">\r\n <li>Central and local government agencies and public corporations<\/li>\r\n <li>Companies related to water supply, sewage, water treatment, and environmental industries<\/li>\r\n <li>Research institutes, universities, development cooperation organizations, etc.<\/li>\r\n <\/ul>\r\n <\/section>\r\n\r\n <div class=\"cta-sticky\">\r\n <button class=\"cta-btn\" id=\"openRegSticky\">\ud83d\udce9 Registration<\/button>\r\n <\/div>\r\n <\/main>\r\n\r\n <dialog class=\"modal\" id=\"regModal\" aria-labelledby=\"regTitle\" aria-modal=\"true\">\r\n <div class=\"sheet\">\r\n <header>\r\n <div class=\"title\" id=\"regTitle\">Participation registration<\/div>\r\n <button class=\"close\" id=\"closeReg\" aria-label=\"close\">\u2715<\/button>\r\n <\/header>\r\n <form id=\"regForm\" autocomplete=\"on\" action=\"\">\r\n <div class=\"row\">\r\n <label for=\"org\">Company\/organization name<\/label>\r\n <input id=\"org\" name=\"org\" type=\"text\" placeholder=\"Example) O2&B, \u25cb\u25cb City Waterworks Business Headquarters\" required \/>\r\n <\/div>\r\n <div class=\"row\">\r\n <label for=\"title\">title<\/label>\r\n <input id=\"title\" name=\"title\" type=\"text\" placeholder=\"Example) Team leader, researcher, director\" required \/>\r\n <\/div>\r\n <div class=\"row\">\r\n <label for=\"name\">name<\/label>\r\n <input id=\"name\" name=\"name\" type=\"text\" placeholder=\"Hong Gil-dong\" required \/>\r\n <\/div>\r\n <div class=\"row\">\r\n <label for=\"contact\">Contact information (mobile phone or email)<\/label>\r\n <input id=\"contact\" name=\"contact\" type=\"text\" inputmode=\"email\" placeholder=\"010-1234-5678 or name@example.com\" required \/>\r\n <\/div>\r\n <div class=\"agree\">\r\n <input id=\"agree\" type=\"checkbox\" required \/>\r\n <label for=\"agree\">Personal information (name, contact information, affiliation\/title) will be used only for event operation purposes and will be destroyed after the event ends.<\/label>\r\n <\/div>\r\n <button class=\"submit\" id=\"submitBtn\" type=\"submit\">Apply<\/button>\r\n <div class=\"helper\">Applications will automatically close when the number of participants exceeds 50.<\/div>\r\n <input type=\"hidden\" name=\"trp-form-language\" value=\"en\"\/><\/form>\r\n <\/div>\r\n <\/dialog>\r\n\r\n <div class=\"toast\" id=\"toast\" role=\"status\" aria-live=\"polite\">Your submission has been received. Thank you!<\/div>\r\n\r\n <footer>\r\n \u00a9 2025 MCDI, Opening the Future \u00b7 This page is a demo, stored locally (in a browser). Server integration is required for actual operation.\r\n <\/footer>\r\n\r\n <script>\r\n \/\/ ===== \uc124\uc815 =====\r\n const CAPACITY = 50;\r\n \/\/ \ud589\uc0ac \uc2dc\uc791 \uc2dc\uac01: \ud55c\uad6d\uc2dc\uac04(KST, UTC+9). \ubca0\ud2b8\ub0a8\uc2dc\uac04(UTC+7)\uc73c\ub85c \ubc14\uafb8\ub824\uba74 +07:00\ub85c \ubcc0\uacbd.\r\n const EVENT_ISO = '2025-11-03T17:00:00+09:00';\r\n\r\n \/\/ ===== \uc800\uc7a5\uc18c \ud0a4 =====\r\n const STORE_KEY = 'mcdi_registrations_v1';\r\n\r\n \/\/ ===== \uc720\ud2f8 =====\r\n const $ = (s) => document.querySelector(s);\r\n const $$ = (s) => document.querySelectorAll(s);\r\n\r\n function loadRegs(){\r\n try{\r\n const v = JSON.parse(localStorage.getItem(STORE_KEY) || '[]');\r\n return Array.isArray(v) ? v : [];\r\n }catch(e){ return []; }\r\n }\r\n function saveRegs(list){\r\n localStorage.setItem(STORE_KEY, JSON.stringify(list));\r\n }\r\n function showToast(msg='\ucc98\ub9ac\ub418\uc5c8\uc2b5\ub2c8\ub2e4.'){\r\n const t = $('#toast'); t.textContent = msg;\r\n t.classList.add('show');\r\n setTimeout(()=>t.classList.remove('show'), 2200);\r\n }\r\n\r\n \/\/ ===== \uce74\uc6b4\ud2b8\ub2e4\uc6b4 =====\r\n function startCountdown(){\r\n const target = new Date(EVENT_ISO).getTime();\r\n function tick(){\r\n const now = Date.now();\r\n let diff = Math.max(0, target - now);\r\n const d = Math.floor(diff \/ (1000*60*60*24)); diff -= d*24*60*60*1000;\r\n const h = Math.floor(diff \/ (1000*60*60)); diff -= h*60*60*1000;\r\n const m = Math.floor(diff \/ (1000*60)); diff -= m*60*1000;\r\n const s = Math.floor(diff \/ 1000);\r\n $('#d').textContent = String(d).padStart(2,'0');\r\n $('#h').textContent = String(h).padStart(2,'0');\r\n $('#m').textContent = String(m).padStart(2,'0');\r\n $('#s').textContent = String(s).padStart(2,'0');\r\n }\r\n tick();\r\n setInterval(tick, 1000);\r\n }\r\n\r\n \/\/ ===== \uc6a9\ub7c9 \ud45c\uc2dc =====\r\n function updateCapacityUI(){\r\n const regs = loadRegs();\r\n const count = regs.length;\r\n const remaining = Math.max(0, CAPACITY - count);\r\n $('#countLabel').textContent = count;\r\n $('#capLabel').textContent = CAPACITY;\r\n $('#remainingLabel').textContent = remaining === 0 ? '\ub9c8\uac10' : `\ub0a8\uc740 \uc88c\uc11d ${remaining}`;\r\n const fill = Math.min(100, Math.round((count \/ CAPACITY) * 100));\r\n $('#capFill').style.width = fill + '%';\r\n\r\n const disabled = count >= CAPACITY;\r\n ['#openRegTop','#openRegHero','#openRegSticky','#submitBtn'].forEach(sel=>{\r\n const el = $(sel); if(!el) return;\r\n el.disabled = disabled;\r\n });\r\n if(disabled){\r\n $('#submitBtn') && ($('#submitBtn').textContent = '\ub9c8\uac10\ub418\uc5c8\uc2b5\ub2c8\ub2e4');\r\n }else{\r\n $('#submitBtn') && ($('#submitBtn').textContent = '\uc811\uc218\ud558\uae30');\r\n }\r\n }\r\n\r\n \/\/ ===== \uc911\ubcf5 \uccb4\ud06c: \uc5f0\ub77d\ucc98 \uae30\uc900 =====\r\n function isDuplicateContact(contact){\r\n const regs = loadRegs();\r\n return regs.some(r => (r.contact || '').trim().toLowerCase() === contact.trim().toLowerCase());\r\n }\r\n\r\n \/\/ ===== \uac04\ub2e8\ud55c \uc720\ud6a8\uc131 \uac80\uc0ac =====\r\n function validContact(v){\r\n const s = v.trim();\r\n const email = \/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$\/i.test(s);\r\n const phone = \/^(0\\d{1,2}-?\\d{3,4}-?\\d{4}|0\\d{8,10}|\\+?\\d{7,15})$\/.test(s.replace(\/\\s\/g,''));\r\n return email || phone;\r\n }\r\n\r\n \/\/ ===== \ub4f1\ub85d \uc800\uc7a5 (\ub85c\uceec \uc800\uc7a5) =====\r\n function saveRegistration(data){\r\n const regs = loadRegs();\r\n regs.push({\r\n ...data,\r\n ts: Date.now()\r\n });\r\n saveRegs(regs);\r\n updateCapacityUI();\r\n return true;\r\n }\r\n\r\n \/* ===== \uc11c\ubc84 \uc5f0\ub3d9 \uc608\uc2dc (\uc6b4\uc601 \uad8c\uc7a5) =====\r\n async function saveRegistrationToServer(data){\r\n const res = await fetch('https:\/\/YOUR_API_ENDPOINT\/registrations', {\r\n method:'POST',\r\n headers:{'Content-Type':'application\/json'},\r\n body:JSON.stringify(data)\r\n });\r\n if(!res.ok) throw new Error('\uc11c\ubc84 \uc800\uc7a5 \uc2e4\ud328');\r\n const { total } = await res.json(); \/\/ \uc11c\ubc84\uac00 \ucd1d \uc778\uc6d0 \ubc18\ud658\ud55c\ub2e4\uace0 \uac00\uc815\r\n return total; \/\/ total\uc744 UI\uc5d0 \ubc18\uc601\ud558\ub3c4\ub85d updateCapacityUI\ub300\uc2e0 \uc0ac\uc6a9\r\n }\r\n *\/\r\n\r\n \/\/ ===== \ubaa8\ub2ec =====\r\n const regModal = $('#regModal');\r\n function openModal(){\r\n regModal.setAttribute('open','');\r\n document.body.style.overflow='hidden';\r\n $('#org').focus();\r\n }\r\n function closeModal(){\r\n regModal.removeAttribute('open');\r\n document.body.style.overflow='';\r\n $('#regForm').reset();\r\n }\r\n\r\n \/\/ ===== YouTube ID \ub85c\ub529 =====\r\n function loadYouTube(){\r\n const box = $('#videoBox');\r\n const vid = (box.getAttribute('data-video-id') || '').trim();\r\n const frame = $('#ytFrame');\r\n if(vid && vid !== 'VIDEO_ID_\uc5ec\uae30\uc5d0_\uc785\ub825'){\r\n const src = `https:\/\/www.youtube.com\/embed\/${encodeURIComponent(vid)}?rel=0&modestbranding=1&playsinline=1`;\r\n frame.src = src;\r\n }else{\r\n frame.src = 'https:\/\/www.youtube.com\/embed\/1La4QzGeaaQ?rel=0&modestbranding=1&playsinline=1';\r\n \/\/ \uc704\ub294 \uc0d8\ud50c \uc601\uc0c1\uc785\ub2c8\ub2e4. data-video-id\ub85c \uad50\uccb4\ud558\uc138\uc694.\r\n }\r\n }\r\n\r\n \/\/ ===== \uc2ac\ub77c\uc774\ub354 =====\r\n let slideIndex = 0, slideCount = 0, sliderTimer = null, touchStartX = 0, touchEndX = 0;\r\n function initSlider(){\r\n const slides = $('#slides');\r\n slideCount = slides.children.length;\r\n const dots = $('#dots');\r\n dots.innerHTML = '';\r\n for(let i=0;i<slideCount;i++){\r\n const d = document.createElement('div');\r\n d.className = 'dot' + (i===0 ? ' active':'');\r\n d.dataset.index = i;\r\n d.addEventListener('click', ()=>goSlide(i,true));\r\n dots.appendChild(d);\r\n }\r\n const wrap = slides.parentElement;\r\n wrap.addEventListener('touchstart', e=>{ touchStartX = e.changedTouches[0].screenX; });\r\n wrap.addEventListener('touchend', e=>{\r\n touchEndX = e.changedTouches[0].screenX;\r\n const dx = touchEndX - touchStartX;\r\n if(Math.abs(dx) > 40){\r\n if(dx < 0) goSlide(Math.min(slideIndex+1, slideCount-1), true);\r\n else goSlide(Math.max(slideIndex-1, 0), true);\r\n }\r\n });\r\n autoSlide();\r\n window.addEventListener('visibilitychange', ()=>{\r\n if(document.hidden){ clearInterval(sliderTimer); }\r\n else autoSlide();\r\n });\r\n }\r\n function goSlide(i, stopAuto=false){\r\n slideIndex = i;\r\n const slides = $('#slides');\r\n slides.style.transform = `translateX(-${i*100}%)`;\r\n $$('#dots .dot').forEach((d,idx)=>d.classList.toggle('active', idx===i));\r\n if(stopAuto){ clearInterval(sliderTimer); autoSlide(); }\r\n }\r\n function autoSlide(){\r\n clearInterval(sliderTimer);\r\n sliderTimer = setInterval(()=>{\r\n slideIndex = (slideIndex + 1) % slideCount;\r\n goSlide(slideIndex,false);\r\n }, 3500);\r\n }\r\n\r\n \/\/ ===== \ucd08\uae30\ud654 =====\r\n document.addEventListener('DOMContentLoaded', ()=>{\r\n \/\/ \ubc84\ud2bc \ubc14\uc778\ub529\r\n ['#openRegTop','#openRegHero','#openRegSticky'].forEach(sel=>{\r\n const el = $(sel); el && el.addEventListener('click', openModal);\r\n });\r\n $('#closeReg').addEventListener('click', closeModal);\r\n $('#regModal').addEventListener('click', (e)=>{ if(e.target.id==='regModal') closeModal(); });\r\n\r\n \/\/ \ud3fc \uc81c\ucd9c\r\n $('#regForm').addEventListener('submit', async (e)=>{\r\n e.preventDefault();\r\n const count = loadRegs().length;\r\n if(count >= CAPACITY){\r\n showToast('\uc815\uc6d0\uc774 \ub9c8\uac10\ub418\uc5c8\uc2b5\ub2c8\ub2e4.');\r\n updateCapacityUI();\r\n return;\r\n }\r\n const org = $('#org').value.trim();\r\n const title = $('#title').value.trim();\r\n const name = $('#name').value.trim();\r\n const contact = $('#contact').value.trim();\r\n const agree = $('#agree').checked;\r\n\r\n if(!org || !title || !name || !contact || !agree){\r\n showToast('\ud544\uc218 \ud56d\ubaa9\uc744 \ud655\uc778\ud574\uc8fc\uc138\uc694.');\r\n return;\r\n }\r\n if(!validContact(contact)){\r\n showToast('\uc5f0\ub77d\ucc98 \ud615\uc2dd\uc744 \ud655\uc778\ud574\uc8fc\uc138\uc694.');\r\n $('#contact').focus();\r\n return;\r\n }\r\n if(isDuplicateContact(contact)){\r\n showToast('\uc774\ubbf8 \uc811\uc218\ub41c \uc5f0\ub77d\ucc98\uc785\ub2c8\ub2e4.');\r\n return;\r\n }\r\n\r\n const data = { org, title, name, contact };\r\n \/\/ \ub85c\uceec \uc800\uc7a5\r\n const ok = saveRegistration(data);\r\n if(ok){\r\n closeModal();\r\n showToast('\uc811\uc218\ub418\uc5c8\uc2b5\ub2c8\ub2e4. \uac10\uc0ac\ud569\ub2c8\ub2e4!');\r\n }\r\n\r\n \/* \uc11c\ubc84 \uc800\uc7a5(\uc6b4\uc601) \uc0ac\uc6a9 \uc2dc:\r\n try{\r\n const total = await saveRegistrationToServer(data);\r\n closeModal();\r\n showToast('\uc811\uc218\ub418\uc5c8\uc2b5\ub2c8\ub2e4. \uac10\uc0ac\ud569\ub2c8\ub2e4!');\r\n \/\/ \uc11c\ubc84 total\uc744 \uc0ac\uc6a9\ud558\uc5ec UI \uac31\uc2e0\r\n \/\/ \ucee4\uc2a4\ud140: updateCapacityUIFromServer(total);\r\n }catch(err){\r\n console.error(err);\r\n showToast('\uc11c\ubc84 \uc624\ub958\ub85c \uc811\uc218\uc5d0 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4.');\r\n }\r\n *\/\r\n });\r\n\r\n \/\/ UI \ucd08\uae30 \uc0c1\ud0dc\r\n updateCapacityUI();\r\n startCountdown();\r\n loadYouTube();\r\n initSlider();\r\n });\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\n``` Description Summary - Save registration: It is saved in the browser localStorage and the counter is updated in real time. When the quota reaches 50 people, the button is automatically disabled and marked as "Closed." - Timer: Countdown based on 2025-11-03 17:00. To change to Vietnam time, change +09:00 in EVENT_ISO to +07:00. - YouTube video: It will be loaded automatically if you just enter the actual video ID in the data-video-id attribute. - Photo slideshow: Supports autoplay and touch swipe. Operational tips - Currently, it is saved locally, so it is saved separately for each user browser. If you need actual statistics, connect the server API as in the saveRegistrationToServer example in the comments to manage the total number of registrants.\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>\uc544\ub798\ub294 \ubaa8\ubc14\uc77c\uc5d0 \ucd5c\uc801\ud654\ub41c \ud589\uc0ac \ucd08\uccad \ub79c\ub529\ud398\uc774\uc9c0 \uc804\uccb4 HTML\uc785\ub2c8\ub2e4. \uadf8\ub300\ub85c \ubcf5\uc0ac\ud574 \ubd99\uc5ec\ub123\uc73c\uba74 \ub3d9\uc791\ud569\ub2c8\ub2e4. \uc800\uc7a5\uc740 \ube0c\ub77c\uc6b0\uc800\uc758 \ub85c\uceec \uc800\uc7a5\uc18c(localStorage)\uc5d0 \uc800\uc7a5\ub418\uba70, \uc2e4\uc81c \uc6b4\uc601 \uc2dc\uc5d0\ub294 \uc8fc\uc11d\uc758 API \uc5f0\ub3d9 \ubd80\ubd84\uc744 \ucc38\uace0\ud574 \uc11c\ubc84 \uc800\uc7a5\uc73c\ub85c \ubc14\uafd4\uc8fc\uc138\uc694. “`html \ubbf8\ub798\ub97c \uc5ec\ub294 MCDI | \ub77c\uc624\uae4c\uc774 \uc2dc\ubc94\uc124\uce58 \ucd08\uccad \ubbf8\ub798\ub97c \uc5ec\ub294 MCDI \ud55c\uad6d\uc815\ubd80 \uae30\uc220\uc9c0\uc6d0 \u00b7 \ubca0\ud2b8\ub0a8 \ucd5c\uc801\ud654 \ucc38\uac00\ub4f1\ub85d \ub77c\uc624\uae4c\uc774 \uc2dc\ubc94\uc124\uce58 \u00b7 1\uc77c 100\ud1a4 \uc815\uc218 \uc2dc\uc2a4\ud15c \ubca0\ud2b8\ub0a8 \ud604\uc9c0 \ucd5c\uc801\ud654 […]<\/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-3635","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.site\/en\/wp-json\/wp\/v2\/pages\/3635","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cellbio.site\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/cellbio.site\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/cellbio.site\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/cellbio.site\/en\/wp-json\/wp\/v2\/comments?post=3635"}],"version-history":[{"count":0,"href":"https:\/\/cellbio.site\/en\/wp-json\/wp\/v2\/pages\/3635\/revisions"}],"wp:attachment":[{"href":"https:\/\/cellbio.site\/en\/wp-json\/wp\/v2\/media?parent=3635"}],"wp:term":[{"taxonomy":"wf_page_folders","embeddable":true,"href":"https:\/\/cellbio.site\/en\/wp-json\/wp\/v2\/wf_page_folders?post=3635"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}