\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 Membuka Masa Depan<\/h1>\r\n <div class=\"sub\">Dukungan teknis pemerintah Korea \u00b7 Optimalisasi Vietnam<\/div>\r\n <\/div>\r\n <\/div>\r\n <button class=\"cta-top\" id=\"openRegTop\">\r\n <span>Pendaftaran partisipasi<\/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\">Instalasi Percontohan Lao Cai \u00b7 Sistem Pemurnian Air 100 Ton per Hari<\/span>\r\n <h2 class=\"headline\">Demo Teknologi Pemurnian Air Lokal Vietnam yang Dioptimalkan & Sistem O2&B Gratis<\/h2>\r\n <div class=\"chips\">\r\n <div class=\"chip\">Senin, 3 November 2025, pukul 17.00\u201320.00<\/div>\r\n <div class=\"chip\">Seminar dan makan malam termasuk<\/div>\r\n <div class=\"chip\">Undangan untuk 50 orang pertama<\/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\">Sampai acara dimulai<\/div>\r\n <div class=\"countdown\" aria-live=\"polite\" aria-label=\"Hitung mundur acara\">\r\n <div class=\"cd-item\"><div class=\"cd-num\" id=\"d\">--<\/div><div class=\"cd-label\">Hari<\/div><\/div>\r\n <div class=\"cd-item\"><div class=\"cd-num\" id=\"h\">--<\/div><div class=\"cd-label\">jam<\/div><\/div>\r\n <div class=\"cd-item\"><div class=\"cd-num\" id=\"m\">--<\/div><div class=\"cd-label\">menit<\/div><\/div>\r\n <div class=\"cd-item\"><div class=\"cd-num\" id=\"s\">--<\/div><div class=\"cd-label\">lilin<\/div><\/div>\r\n <\/div>\r\n <div class=\"helper\">Per: 2025-11-03 17:00 (dapat diubah dalam kode pengaturan zona waktu)<\/div>\r\n <\/div>\r\n <div>\r\n <div class=\"section-title\">Status aplikasi<\/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> Nama penerimaan\r\n <\/div>\r\n <div class=\"right\" id=\"remainingLabel\">50 kursi tersisa<\/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=\"Daftar untuk berpartisipasi\">\r\n \ud83d\udce9 Pendaftaran\r\n <\/button>\r\n <\/section>\r\n\r\n <section class=\"video\">\r\n <div class=\"section-title\">Video Peralatan dan Teknologi<\/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=\"Video YouTube\" 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\">Cukup masukkan ID video YouTube di data-video-id dan video akan dimuat secara otomatis.<\/div>\r\n <\/section>\r\n\r\n <section class=\"gallery\">\r\n <div class=\"section-title\">Telusuri foto<\/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=\"Gambaran Umum Pabrik Pemurnian Air\"><\/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=\"Peralatan filtrasi membran dan penghilangan ion\"><\/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=\"Instalasi dan komisioning di tempat\"><\/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\">Informasi Acara<\/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 (pengenalan teknologi\/Q&A) + demonstrasi peralatan + makan malam jaringan<\/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\">jam<\/div>\r\n <div class=\"d\">Senin, 3 November 2025, pukul 17.00\u201320.00<\/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\">inti<\/div>\r\n <div class=\"d\">Memperkenalkan sistem pemurnian air 100 ton per hari, kualitas air yang dioptimalkan di Vietnam, dan sistem O2&B gratis.<\/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\">kebun<\/div>\r\n <div class=\"d\">50 orang pertama (jumlah waktu nyata di halaman ini)<\/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\">Undangan<\/div>\r\n <ul style=\"margin:6px 0 0 16px; color:#c8d6f5; font-size:14px; line-height:1.6\">\r\n <li>Lembaga pemerintah pusat dan daerah serta perusahaan publik<\/li>\r\n <li>Perusahaan yang terkait dengan industri penyediaan air, pembuangan limbah, pengolahan air, dan lingkungan<\/li>\r\n <li>Lembaga penelitian, universitas, organisasi kerja sama pembangunan, dll.<\/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 Pendaftaran<\/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\">Pendaftaran partisipasi<\/div>\r\n <button class=\"close\" id=\"closeReg\" aria-label=\"menutup\">\u2715<\/button>\r\n <\/header>\r\n <form id=\"regForm\" autocomplete=\"on\" action=\"\">\r\n <div class=\"row\">\r\n <label for=\"org\">Nama perusahaan\/organisasi<\/label>\r\n <input id=\"org\" name=\"org\" type=\"text\" placeholder=\"Contoh) O2&B, \u25cb\u25cb Kantor Pusat Bisnis Air Kota\" required \/>\r\n <\/div>\r\n <div class=\"row\">\r\n <label for=\"title\">judul<\/label>\r\n <input id=\"title\" name=\"title\" type=\"text\" placeholder=\"Contoh) Pemimpin tim, peneliti, direktur\" required \/>\r\n <\/div>\r\n <div class=\"row\">\r\n <label for=\"name\">nama<\/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\">Informasi kontak (ponsel atau email)<\/label>\r\n <input id=\"contact\" name=\"contact\" type=\"text\" inputmode=\"email\" placeholder=\"010-1234-5678 atau nama@contoh.com\" required \/>\r\n <\/div>\r\n <div class=\"agree\">\r\n <input id=\"agree\" type=\"checkbox\" required \/>\r\n <label for=\"agree\">Informasi pribadi (nama, informasi kontak, afiliasi\/jabatan) hanya akan digunakan untuk tujuan operasional acara dan akan dimusnahkan setelah acara berakhir.<\/label>\r\n <\/div>\r\n <button class=\"submit\" id=\"submitBtn\" type=\"submit\">Menerapkan<\/button>\r\n <div class=\"helper\">Pendaftaran akan ditutup secara otomatis apabila jumlah peserta telah mencapai 50.<\/div>\r\n <input type=\"hidden\" name=\"trp-form-language\" value=\"id\"\/><\/form>\r\n <\/div>\r\n <\/dialog>\r\n\r\n <div class=\"toast\" id=\"toast\" role=\"status\" aria-live=\"polite\">Kiriman Anda telah diterima. Terima kasih!<\/div>\r\n\r\n <footer>\r\n \u00a9 2025 MCDI, Membuka Masa Depan \u00b7 Halaman ini adalah demo, disimpan secara lokal (di peramban). Integrasi server diperlukan untuk pengoperasian yang sebenarnya.\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``` Ringkasan Deskripsi - Simpan pendaftaran: Tersimpan di penyimpanan lokal peramban dan penghitung diperbarui secara real-time. Ketika kuota mencapai 50 orang, tombol akan otomatis dinonaktifkan dan ditandai "Tutup". - Penghitung Waktu: Hitung mundur berdasarkan 2025-11-03 17:00. Untuk mengubah ke waktu Vietnam, ubah +09:00 di EVENT_ISO menjadi +07:00. - Video YouTube: Akan dimuat secara otomatis jika Anda memasukkan ID video yang sebenarnya di atribut data-video-id. - Tampilan slide foto: Mendukung putar otomatis dan geser sentuh. Tips operasional - Saat ini, disimpan secara lokal, sehingga disimpan secara terpisah untuk setiap peramban pengguna. Jika Anda memerlukan statistik aktual, hubungkan API server seperti pada contoh saveRegistrationToServer di kolom komentar untuk mengelola jumlah total pendaftar.\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\/id\/wp-json\/wp\/v2\/pages\/3635","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cellbio.site\/id\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/cellbio.site\/id\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/cellbio.site\/id\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/cellbio.site\/id\/wp-json\/wp\/v2\/comments?post=3635"}],"version-history":[{"count":0,"href":"https:\/\/cellbio.site\/id\/wp-json\/wp\/v2\/pages\/3635\/revisions"}],"wp:attachment":[{"href":"https:\/\/cellbio.site\/id\/wp-json\/wp\/v2\/media?parent=3635"}],"wp:term":[{"taxonomy":"wf_page_folders","embeddable":true,"href":"https:\/\/cellbio.site\/id\/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\tBerikut adalah HTML lengkap halaman arahan undangan acara, yang dioptimalkan untuk seluler. Salin dan tempel apa adanya untuk melihatnya berfungsi. HTML tersimpan di penyimpanan lokal peramban Anda. Untuk pengoperasian yang sebenarnya, lihat bagian integrasi API di kolom komentar dan ubah ke penyimpanan server. ```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 Membuka Masa Depan<\/h1>\r\n <div class=\"sub\">Dukungan teknis pemerintah Korea \u00b7 Optimalisasi Vietnam<\/div>\r\n <\/div>\r\n <\/div>\r\n <button class=\"cta-top\" id=\"openRegTop\">\r\n <span>Pendaftaran partisipasi<\/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\">Instalasi Percontohan Lao Cai \u00b7 Sistem Pemurnian Air 100 Ton per Hari<\/span>\r\n <h2 class=\"headline\">Demo Teknologi Pemurnian Air Lokal Vietnam yang Dioptimalkan & Sistem O2&B Gratis<\/h2>\r\n <div class=\"chips\">\r\n <div class=\"chip\">Senin, 3 November 2025, pukul 17.00\u201320.00<\/div>\r\n <div class=\"chip\">Seminar dan makan malam termasuk<\/div>\r\n <div class=\"chip\">Undangan untuk 50 orang pertama<\/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\">Sampai acara dimulai<\/div>\r\n <div class=\"countdown\" aria-live=\"polite\" aria-label=\"Hitung mundur acara\">\r\n <div class=\"cd-item\"><div class=\"cd-num\" id=\"d\">--<\/div><div class=\"cd-label\">Hari<\/div><\/div>\r\n <div class=\"cd-item\"><div class=\"cd-num\" id=\"h\">--<\/div><div class=\"cd-label\">jam<\/div><\/div>\r\n <div class=\"cd-item\"><div class=\"cd-num\" id=\"m\">--<\/div><div class=\"cd-label\">menit<\/div><\/div>\r\n <div class=\"cd-item\"><div class=\"cd-num\" id=\"s\">--<\/div><div class=\"cd-label\">lilin<\/div><\/div>\r\n <\/div>\r\n <div class=\"helper\">Per: 2025-11-03 17:00 (dapat diubah dalam kode pengaturan zona waktu)<\/div>\r\n <\/div>\r\n <div>\r\n <div class=\"section-title\">Status aplikasi<\/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> Nama penerimaan\r\n <\/div>\r\n <div class=\"right\" id=\"remainingLabel\">50 kursi tersisa<\/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=\"Daftar untuk berpartisipasi\">\r\n \ud83d\udce9 Pendaftaran\r\n <\/button>\r\n <\/section>\r\n\r\n <section class=\"video\">\r\n <div class=\"section-title\">Video Peralatan dan Teknologi<\/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=\"Video YouTube\" 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\">Cukup masukkan ID video YouTube di data-video-id dan video akan dimuat secara otomatis.<\/div>\r\n <\/section>\r\n\r\n <section class=\"gallery\">\r\n <div class=\"section-title\">Telusuri foto<\/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=\"Gambaran Umum Pabrik Pemurnian Air\"><\/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=\"Peralatan filtrasi membran dan penghilangan ion\"><\/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=\"Instalasi dan komisioning di tempat\"><\/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\">Informasi Acara<\/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 (pengenalan teknologi\/Q&A) + demonstrasi peralatan + makan malam jaringan<\/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\">jam<\/div>\r\n <div class=\"d\">Senin, 3 November 2025, pukul 17.00\u201320.00<\/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\">inti<\/div>\r\n <div class=\"d\">Memperkenalkan sistem pemurnian air 100 ton per hari, kualitas air yang dioptimalkan di Vietnam, dan sistem O2&B gratis.<\/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\">kebun<\/div>\r\n <div class=\"d\">50 orang pertama (jumlah waktu nyata di halaman ini)<\/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\">Undangan<\/div>\r\n <ul style=\"margin:6px 0 0 16px; color:#c8d6f5; font-size:14px; line-height:1.6\">\r\n <li>Lembaga pemerintah pusat dan daerah serta perusahaan publik<\/li>\r\n <li>Perusahaan yang terkait dengan industri penyediaan air, pembuangan limbah, pengolahan air, dan lingkungan<\/li>\r\n <li>Lembaga penelitian, universitas, organisasi kerja sama pembangunan, dll.<\/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 Pendaftaran<\/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\">Pendaftaran partisipasi<\/div>\r\n <button class=\"close\" id=\"closeReg\" aria-label=\"menutup\">\u2715<\/button>\r\n <\/header>\r\n <form id=\"regForm\" autocomplete=\"on\" action=\"\">\r\n <div class=\"row\">\r\n <label for=\"org\">Nama perusahaan\/organisasi<\/label>\r\n <input id=\"org\" name=\"org\" type=\"text\" placeholder=\"Contoh) O2&B, \u25cb\u25cb Kantor Pusat Bisnis Air Kota\" required \/>\r\n <\/div>\r\n <div class=\"row\">\r\n <label for=\"title\">judul<\/label>\r\n <input id=\"title\" name=\"title\" type=\"text\" placeholder=\"Contoh) Pemimpin tim, peneliti, direktur\" required \/>\r\n <\/div>\r\n <div class=\"row\">\r\n <label for=\"name\">nama<\/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\">Informasi kontak (ponsel atau email)<\/label>\r\n <input id=\"contact\" name=\"contact\" type=\"text\" inputmode=\"email\" placeholder=\"010-1234-5678 atau nama@contoh.com\" required \/>\r\n <\/div>\r\n <div class=\"agree\">\r\n <input id=\"agree\" type=\"checkbox\" required \/>\r\n <label for=\"agree\">Informasi pribadi (nama, informasi kontak, afiliasi\/jabatan) hanya akan digunakan untuk tujuan operasional acara dan akan dimusnahkan setelah acara berakhir.<\/label>\r\n <\/div>\r\n <button class=\"submit\" id=\"submitBtn\" type=\"submit\">Menerapkan<\/button>\r\n <div class=\"helper\">Pendaftaran akan ditutup secara otomatis apabila jumlah peserta telah mencapai 50.<\/div>\r\n <input type=\"hidden\" name=\"trp-form-language\" value=\"id\"\/><\/form>\r\n <\/div>\r\n <\/dialog>\r\n\r\n <div class=\"toast\" id=\"toast\" role=\"status\" aria-live=\"polite\">Kiriman Anda telah diterima. Terima kasih!<\/div>\r\n\r\n <footer>\r\n \u00a9 2025 MCDI, Membuka Masa Depan \u00b7 Halaman ini adalah demo, disimpan secara lokal (di peramban). Integrasi server diperlukan untuk pengoperasian yang sebenarnya.\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``` Ringkasan Deskripsi - Simpan pendaftaran: Tersimpan di penyimpanan lokal peramban dan penghitung diperbarui secara real-time. Ketika kuota mencapai 50 orang, tombol akan otomatis dinonaktifkan dan ditandai "Tutup". - Penghitung Waktu: Hitung mundur berdasarkan 2025-11-03 17:00. Untuk mengubah ke waktu Vietnam, ubah +09:00 di EVENT_ISO menjadi +07:00. - Video YouTube: Akan dimuat secara otomatis jika Anda memasukkan ID video yang sebenarnya di atribut data-video-id. - Tampilan slide foto: Mendukung putar otomatis dan geser sentuh. Tips operasional - Saat ini, disimpan secara lokal, sehingga disimpan secara terpisah untuk setiap peramban pengguna. Jika Anda memerlukan statistik aktual, hubungkan API server seperti pada contoh saveRegistrationToServer di kolom komentar untuk mengelola jumlah total pendaftar.\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\/id\/wp-json\/wp\/v2\/pages\/3635","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cellbio.site\/id\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/cellbio.site\/id\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/cellbio.site\/id\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/cellbio.site\/id\/wp-json\/wp\/v2\/comments?post=3635"}],"version-history":[{"count":0,"href":"https:\/\/cellbio.site\/id\/wp-json\/wp\/v2\/pages\/3635\/revisions"}],"wp:attachment":[{"href":"https:\/\/cellbio.site\/id\/wp-json\/wp\/v2\/media?parent=3635"}],"wp:term":[{"taxonomy":"wf_page_folders","embeddable":true,"href":"https:\/\/cellbio.site\/id\/wp-json\/wp\/v2\/wf_page_folders?post=3635"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}