{"id":3640,"date":"2025-10-17T03:55:18","date_gmt":"2025-10-16T20:55:18","guid":{"rendered":"https:\/\/cellbio.site\/?page_id=3640"},"modified":"2025-10-17T04:00:20","modified_gmt":"2025-10-16T21:00:20","slug":"mc-gpt5","status":"publish","type":"page","link":"https:\/\/cellbio.site\/id\/mc-gpt5\/","title":{"rendered":"MC-GPT5"},"content":{"rendered":"
\n\t\t\t\t
\r\n\t\t\t\t\t
\r\n\t\t\t\t
\n\t\t\t\t\tDi bawah ini adalah satu berkas HTML yang siap digunakan. Berkas ini mencakup desain berkualitas tinggi yang dioptimalkan untuk seluler, video YouTube, tayangan slide foto, jumlah pendaftaran (50 peserta), pengatur waktu (per 03-11-2025 pukul 17:00), penyimpanan pendaftaran berbasis localStorage dan pencegahan duplikasi, serta pemrosesan batas waktu pendaftaran. Jika perlu, Anda dapat dengan mudah menggantinya dengan API penyimpanan sisi server yang sebenarnya, seperti yang dijelaskan di komentar. Catatan: - Penyimpanan data: Standarnya adalah localStorage (disimpan dengan aman di peramban). Saat terhubung ke server, cukup ganti fungsi saveRegistration dan getRegistrationCount. - Zona waktu: Atur ke 03-11-2025 pukul 17:00 KST (+09:00). - Batas pendaftaran: Ketika mencapai 50 peserta, tombol akan otomatis ditandai sebagai "ditutup". Salin dan simpan sebagai .html untuk dilihat di peramban seluler. ```html\r\n\r\n\r\n\r\n \r\n \r\n \r\n \ubca0\ud2b8\ub0a8 \ucd5c\uc801\ud654, \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, 1\uc77c 100\ud1a4 \uc815\uc218 \uc2dc\uc2a4\ud15c \ub77c\uc624\uae4c\uc774 \uc2dc\ubc94\uc124\uce58. 2025\ub144 11\uc6d4 3\uc77c \uc624\ud6c4 5\uc2dc~8\uc2dc. O2&B \ubb34\uc0c1 \uc2dc\uc2a4\ud15c, \uc138\ubbf8\ub098\uc640 \ub9cc\ucc2c \ud3ec\ud568. 50\uba85 \uc81c\ud55c \ucd08\uccad. \ucc38\uac00\ub4f1\ub85d \ud544\uc218.\">\r\n <meta property=\"og:title\" content=\"\ubca0\ud2b8\ub0a8 \ucd5c\uc801\ud654, \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 2025.11.03 17:00~20:00 \u00b7 \uc138\ubbf8\ub098 & \ub9cc\ucc2c \u00b7 50\uba85 \uc81c\ud55c\">\r\n <meta property=\"og:type\" content=\"website\">\r\n <meta property=\"og:image\" content=\"https:\/\/images.unsplash.com\/photo-1529101091764-c3526daf38fe?q=80&w=1600&auto=format&fit=crop\">\r\n <meta property=\"og:locale\" content=\"ko_KR\">\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\" crossorigin>\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Noto+Sans+KR:wght@300;400;500;600;700;800&display=swap\" rel=\"stylesheet\">\r\n <style>\r\n :root{\r\n --bg:#0b0b10;\r\n --bg-soft:#11121a;\r\n --card:#141621;\r\n --text:#eef1f7;\r\n --text-dim:#b9bfd1;\r\n --line:#23283b;\r\n --gold:#d4af37;\r\n --gold-2:#f5d06f;\r\n --accent: linear-gradient(135deg, #f5d06f 0%, #d4af37 100%);\r\n --brand:#57c1ff;\r\n --ok:#1fd290;\r\n --warn:#ffb020;\r\n --err:#ff5c5c;\r\n --shadow: 0 10px 30px rgba(0,0,0,.45);\r\n --radius-2:14px;\r\n --radius-3:22px;\r\n --radius-pill:999px;\r\n --gap: 16px;\r\n --fz-1: clamp(12px, 3vw, 14px);\r\n --fz-2: clamp(14px, 4vw, 16px);\r\n --fz-3: clamp(16px, 5vw, 18px);\r\n --fz-4: clamp(18px, 6vw, 22px);\r\n --fz-5: clamp(22px, 7vw, 28px);\r\n --fz-6: clamp(28px, 9vw, 40px);\r\n }\r\n *{box-sizing:border-box}\r\n html,body{height:100%}\r\n body{\r\n margin:0; background:radial-gradient(1200px 800px at 100% -10%, rgba(212,175,55,.08), transparent 60%), var(--bg);\r\n color:var(--text); font-family:\"Noto Sans KR\",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;\r\n -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;\r\n }\r\n a{color:inherit;text-decoration:none}\r\n .wrap{max-width:980px;margin:0 auto;padding:16px 16px 120px}\r\n header.top{\r\n display:flex;align-items:center;justify-content:space-between;gap:10px;\r\n padding:12px; border:1px solid var(--line); border-radius:var(--radius-2);\r\n background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.0));\r\n box-shadow:var(--shadow);\r\n position:sticky; top:12px; z-index:30; backdrop-filter: blur(10px);\r\n }\r\n .tag{\r\n font-size:var(--fz-1); color:var(--text-dim);\r\n border:1px solid var(--line); padding:6px 10px; border-radius:var(--radius-pill);\r\n display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.02)\r\n }\r\n .tag .dot{width:6px;height:6px;border-radius:50%;background:var(--ok);box-shadow:0 0 8px var(--ok)}\r\n .brand{display:flex;align-items:center;gap:8px;font-weight:700}\r\n .brand .logo{\r\n width:34px;height:34px;border-radius:10px; background:var(--accent);\r\n display:grid;place-items:center;color:#111;font-weight:900;letter-spacing:.5px;\r\n border:1px solid rgba(255,255,255,.4);\r\n }\r\n .cta-small{\r\n padding:8px 14px;border-radius:var(--radius-pill);border:1px solid var(--line);\r\n background:linear-gradient(180deg, #192033, #141621);\r\n font-size:var(--fz-1); color:var(--text); display:inline-flex; gap:8px; align-items:center;\r\n }\r\n .hero{\r\n margin-top:18px; border:1px solid var(--line); border-radius:var(--radius-3);\r\n background:\r\n radial-gradient(1200px 600px at -20% -10%, rgba(87,193,255,.12), transparent 60%),\r\n linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.0)),\r\n var(--card);\r\n padding:22px; position:relative; overflow:hidden;\r\n }\r\n .hero h1{\r\n font-size:var(--fz-6); line-height:1.1; margin:6px 0 10px; letter-spacing:-.3px;\r\n font-weight:800;\r\n }\r\n .hero h1 .accent{background:var(--accent); -webkit-background-clip:text; background-clip:text; color:transparent}\r\n .hero p.sub{font-size:var(--fz-3); color:var(--text-dim); margin:0 0 18px}\r\n .pill{\r\n display:flex;gap:8px;flex-wrap:wrap;margin:12px 0 14px\r\n }\r\n .pill .chip{\r\n border:1px solid var(--line); padding:8px 12px; border-radius:var(--radius-pill);\r\n font-size:var(--fz-1); color:var(--text-dim); background:rgba(255,255,255,.02)\r\n }\r\n .countdown{\r\n display:flex; gap:10px; align-items:stretch; margin:14px 0 8px\r\n }\r\n .box{\r\n flex:1; min-width:0; background:rgba(255,255,255,.03); border:1px solid var(--line);\r\n border-radius:12px; padding:12px; text-align:center\r\n }\r\n .box .num{font-size:clamp(18px, 8vw, 36px); font-weight:800; letter-spacing:-.5px}\r\n .box .lab{font-size:var(--fz-1); color:var(--text-dim)}\r\n .meta{\r\n display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:8px\r\n }\r\n .meta .card{\r\n background:rgba(255,255,255,.03); border:1px solid var(--line); border-radius:12px; padding:12px;\r\n display:flex; gap:10px; align-items:center;\r\n }\r\n .icon{\r\n width:34px;height:34px;border-radius:10px; display:grid;place-items:center;\r\n background:linear-gradient(135deg, rgba(245,208,111,.2), rgba(212,175,55,.12));\r\n border:1px solid rgba(212,175,55,.35); color:#f6e7ab\r\n }\r\n .title{font-size:var(--fz-2); font-weight:700}\r\n .muted{color:var(--text-dim); font-size:var(--fz-1)}\r\n .progress{\r\n height:10px; background:#0e111a; border-radius:999px; border:1px solid var(--line); overflow:hidden\r\n }\r\n .progress .bar{\r\n height:100%; background:var(--accent); width:0%; transition:width .4s ease\r\n }\r\n .actions{display:flex; gap:10px; margin-top:16px}\r\n .btn{\r\n border:none; cursor:pointer; border-radius:var(--radius-pill); padding:14px 18px; font-size:var(--fz-2);\r\n font-weight:700; letter-spacing:.2px; transition:transform .06s ease, filter .2s ease, opacity .2s ease;\r\n display:inline-flex; align-items:center; gap:10px;\r\n }\r\n .btn:active{transform:translateY(1px)}\r\n .btn-primary{\r\n background:var(--accent); color:#111; box-shadow:0 12px 28px rgba(245,208,111,.24)\r\n }\r\n .btn-ghost{\r\n background:transparent; border:1px solid var(--line); color:var(--text)\r\n }\r\n\r\n \/* Video + Gallery *\/\r\n section{\r\n margin-top:22px; border:1px solid var(--line); border-radius:var(--radius-3);\r\n background:var(--card); padding:18px;\r\n }\r\n .section-title{\r\n font-size:var(--fz-4); font-weight:800; margin:2px 0 14px;\r\n }\r\n .vid{\r\n position:relative; border-radius:14px; overflow:hidden; aspect-ratio:16\/9;\r\n border:1px solid var(--line); background:#000; box-shadow:var(--shadow);\r\n }\r\n .gallery{\r\n display:flex; gap:10px; overflow-x:auto; padding-bottom:2px; scroll-snap-type:x mandatory;\r\n -webkit-overflow-scrolling: touch;\r\n }\r\n .gallery::-webkit-scrollbar{height:6px}\r\n .gallery::-webkit-scrollbar-thumb{background:#31364d;border-radius:999px}\r\n .slide{\r\n min-width:78%; max-width:78%; scroll-snap-align:start; position:relative; border-radius:14px; overflow:hidden;\r\n border:1px solid var(--line)\r\n }\r\n .slide img{width:100%; height:230px; object-fit:cover; display:block}\r\n .slide .cap{\r\n position:absolute; left:0; right:0; bottom:0; padding:10px 12px; font-size:var(--fz-1);\r\n background:linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.6))\r\n }\r\n\r\n \/* Info list *\/\r\n .grid-2{display:grid; grid-template-columns:1fr 1fr; gap:10px}\r\n .info-card{\r\n background:rgba(255,255,255,.03); border:1px solid var(--line); padding:12px; border-radius:12px\r\n }\r\n .info-card .hd{display:flex; align-items:center; gap:8px; font-weight:700; margin-bottom:6px}\r\n\r\n \/* Floating CTA *\/\r\n .dock{\r\n position:fixed; left:0; right:0; bottom:0; padding:10px 14px 14px; background:linear-gradient(180deg, rgba(11,11,16,.0), rgba(11,11,16,.88) 30%, rgba(11,11,16,.98));\r\n display:grid; gap:10px; z-index:40;\r\n -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);\r\n }\r\n .dock .panel{\r\n border:1px solid var(--line); background:linear-gradient(180deg, #121525, #0f1220);\r\n padding:10px; border-radius:16px; display:flex; align-items:center; justify-content:space-between; gap:10px\r\n }\r\n .dock .mini{display:flex; flex-direction:column}\r\n .dock .mini .when{font-size:var(--fz-1); color:var(--text-dim)}\r\n .dock .mini .remain{font-size:var(--fz-2)}\r\n .dock .btn-primary{padding:12px 16px}\r\n\r\n \/* Modal (bottom sheet) *\/\r\n .sheet{\r\n position:fixed; inset:0; display:none; z-index:60; background:rgba(0,0,0,.52);\r\n }\r\n .sheet.active{display:block}\r\n .sheet .body{\r\n position:absolute; left:0; right:0; bottom:0; border-radius:18px 18px 0 0; border:1px solid var(--line);\r\n background:linear-gradient(180deg, #141621, #0f1120); max-height:84%; overflow:auto; padding:14px 16px 22px; box-shadow:var(--shadow);\r\n transform:translateY(100%); animation:slideUp .22s ease forwards;\r\n }\r\n @keyframes slideUp{to{transform:translateY(0)}}\r\n .dragbar{width:44px;height:4px;border-radius:999px;background:#2d3147;margin:8px auto 10px}\r\n\r\n form .row{display:grid; gap:8px; margin:10px 0}\r\n label{font-size:var(--fz-1); color:var(--text-dim)}\r\n input,select{\r\n width:100%; padding:14px 12px; border-radius:12px; border:1px solid var(--line); background:#0d1020; color:var(--text);\r\n font-size:var(--fz-2); outline:none; transition:border-color .2s ease, box-shadow .2s ease;\r\n }\r\n input:focus{border-color:#3a62ff; box-shadow:0 0 0 3px rgba(58,98,255,.2)}\r\n .helper{font-size:var(--fz-1); color:var(--text-dim)}\r\n .form-actions{display:flex; gap:8px; margin-top:10px}\r\n .btn-line{border:1px solid var(--line); background:transparent; color:var(--text)}\r\n\r\n \/* Toast *\/\r\n .toast{\r\n position:fixed; left:50%; transform:translateX(-50%); bottom:90px; z-index:80; display:none;\r\n background:#0e1326; border:1px solid #2b3250; color:#eaf2ff; padding:12px 14px; border-radius:12px; box-shadow:var(--shadow); font-size:var(--fz-2)\r\n }\r\n .toast.show{display:block; animation:fade .2s ease}\r\n @keyframes fade{from{opacity:0; transform:translateX(-50%) translateY(6px)} to{opacity:1; transform:translateX(-50%) translateY(0)}}\r\n\r\n \/* Desktop tweaks *\/\r\n @media(min-width:840px){\r\n .hero{padding:28px 28px 24px}\r\n .slide img{height:280px}\r\n .gallery .slide{min-width:48%; max-width:48%}\r\n .wrap{padding-bottom:140px}\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"wrap\">\r\n <header class=\"top\">\r\n <span class=\"tag\"><span class=\"dot\"><\/span> Proyek dukungan teknologi pemerintah Korea<\/span>\r\n <div class=\"brand\">\r\n <div class=\"logo\">M<\/div>\r\n <div>\r\n <div style=\"font-size:var(--fz-2);line-height:1;font-weight:800\">MCDI x O2 & B<\/div>\r\n <div class=\"muted\" style=\"font-size:var(--fz-1)\">Vietnam Mengoptimalkan Inovasi Integritas<\/div>\r\n <\/div>\r\n <\/div>\r\n <button class=\"cta-small\" id=\"btnAddCalendar\" aria-label=\"Tambahkan ke Kalender\">\r\n \ud83d\udcc5 Tambahkan kalender\r\n <\/button>\r\n <\/header>\r\n\r\n <section class=\"hero\" aria-label=\"Pengenalan Acara\">\r\n <h1>Optimasi Vietnam, <span class=\"accent\">MCDI Membuka Masa Depan<\/span><\/h1>\r\n <p class=\"sub\">Sistem pemurnian air 100 ton per hari \u00b7 Instalasi percontohan Lao Cai \u00b7 Sistem O2&B gratis<\/p>\r\n <div class=\"pill\">\r\n <span class=\"chip\">Seminar dan makan malam termasuk<\/span>\r\n <span class=\"chip\">Batas undangan: 50 orang<\/span>\r\n <span class=\"chip\">Senin, 3 November 2025, pukul 17.00 - 20.00<\/span>\r\n <\/div>\r\n\r\n <div class=\"countdown\" role=\"timer\" aria-live=\"polite\">\r\n <div class=\"box\">\r\n <div class=\"num\" id=\"dd\">0<\/div>\r\n <div class=\"lab\">Hari<\/div>\r\n <\/div>\r\n <div class=\"box\">\r\n <div class=\"num\" id=\"hh\">00<\/div>\r\n <div class=\"lab\">jam<\/div>\r\n <\/div>\r\n <div class=\"box\">\r\n <div class=\"num\" id=\"mm\">00<\/div>\r\n <div class=\"lab\">menit<\/div>\r\n <\/div>\r\n <div class=\"box\">\r\n <div class=\"num\" id=\"ss\">00<\/div>\r\n <div class=\"lab\">lilin<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"meta\">\r\n <div class=\"card\">\r\n <div class=\"icon\">\u23f1\ufe0f<\/div>\r\n <div>\r\n <div class=\"title\">Jadwal acara<\/div>\r\n <div class=\"muted\">Senin, 3 November 2025, pukul 17.00 - 20.00 (KST)<\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"card\">\r\n <div class=\"icon\">\ud83d\udc65<\/div>\r\n <div style=\"flex:1\">\r\n <div class=\"title\">Status partisipasi<\/div>\r\n <div class=\"muted\"><span id=\"countText\">0<\/span> \/ <span id=\"capText\">50<\/span>jumlah orang<\/div>\r\n <div class=\"progress\" aria-label=\"Kemajuan aplikasi\">\r\n <div class=\"bar\" id=\"progressBar\" style=\"width:0%\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"actions\">\r\n <button class=\"btn btn-primary\" id=\"btnOpenForm\" aria-haspopup=\"dialog\">\ud83c\udf9f\ufe0f Daftar<\/button>\r\n <a class=\"btn btn-ghost\" href=\"#video\">\u25b6\ufe0f Video Peralatan\/Teknologi<\/a>\r\n <\/div>\r\n <\/section>\r\n\r\n <section id=\"video\" aria-label=\"Video Peralatan dan Teknologi\">\r\n <div class=\"section-title\">Peralatan dan teknologi dalam video<\/div>\r\n <div class=\"vid\">\r\n <!-- \uc6d0\ud558\ub294 \uc7a5\ube44\/\uae30\uc220 \uc601\uc0c1\uc73c\ub85c \uad50\uccb4 \uac00\ub2a5 -->\r\n <iframe width=\"100%\" height=\"100%\" src=\"https:\/\/www.youtube.com\/embed\/_dW9Efz0U-w?rel=0&modestbranding=1&playsinline=1&color=white\"\r\n title=\"Teknologi Pengolahan Air\" frameborder=\"0\"\r\n allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\"\r\n allowfullscreen><\/iframe>\r\n <\/div>\r\n <p class=\"helper\" style=\"margin-top:8px\">Video ini hanya untuk referensi. Demonstrasi langsung akan dilakukan di lokasi.<\/p>\r\n <\/section>\r\n\r\n <section aria-label=\"Slide foto\">\r\n <div class=\"section-title\">Pratinjau Foto Sistem<\/div>\r\n <div class=\"gallery\" id=\"gallery\">\r\n <figure class=\"slide\">\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1509391366360-2e959784a276?q=80&w=1600&auto=format&fit=crop\" alt=\"\uc815\uc218 \uc2dc\uc2a4\ud15c \ubaa8\ub4c8\" loading=\"lazy\">\r\n <figcaption class=\"cap\">Sistem pemurnian air modular<\/figcaption>\r\n <\/figure>\r\n <figure class=\"slide\">\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1502304877804-088d480482c7?q=80&w=1600&auto=format&fit=crop\" alt=\"\uc218\ucc98\ub9ac \uacf5\uc815 \ud30c\uc774\ud504\ub77c\uc778\" loading=\"lazy\">\r\n <figcaption class=\"cap\">Desain pipa efisiensi tinggi<\/figcaption>\r\n <\/figure>\r\n <figure class=\"slide\">\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1551292831-023188e78222?q=80&w=1600&auto=format&fit=crop\" alt=\"\ud488\uc9c8 \uad00\ub9ac \ubc0f \ubaa8\ub2c8\ud130\ub9c1\" loading=\"lazy\">\r\n <figcaption class=\"cap\">Pemantauan kualitas waktu nyata<\/figcaption>\r\n <\/figure>\r\n <figure class=\"slide\">\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1581093458791-9d42e3b7a3f2?q=80&w=1600&auto=format&fit=crop\" alt=\"\uc5d0\ub108\uc9c0 \ucd5c\uc801\ud654 \uc7a5\ube44\" loading=\"lazy\">\r\n <figcaption class=\"cap\">Fasilitas optimasi energi<\/figcaption>\r\n <\/figure>\r\n <\/div>\r\n <\/section>\r\n\r\n <section aria-label=\"Informasi Acara\">\r\n <div class=\"section-title\">Ikhtisar Acara<\/div>\r\n <div class=\"grid-2\">\r\n <div class=\"info-card\">\r\n <div class=\"hd\">\ud83d\udccd Lokasi<\/div>\r\n <div class=\"muted\">Situs instalasi percontohan di Lao Cai, Vietnam<\/div>\r\n <\/div>\r\n <div class=\"info-card\">\r\n <div class=\"hd\">\ud83d\uddd3\ufe0f Jadwal<\/div>\r\n <div class=\"muted\">Senin, 3 November 2025, pukul 17.00 - 20.00<\/div>\r\n <\/div>\r\n <div class=\"info-card\">\r\n <div class=\"hd\">\ud83c\udfa4 Program<\/div>\r\n <div class=\"muted\">Seminar, demonstrasi di tempat, dan makan malam jaringan<\/div>\r\n <\/div>\r\n <div class=\"info-card\">\r\n <div class=\"hd\">\ud83c\udf81 Disediakan<\/div>\r\n <div class=\"muted\">Demonstrasi Sistem Gratis O2&B dan Pengumpulan Data<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n <\/div>\r\n\r\n <!-- Floating Dock CTA -->\r\n <div class=\"dock\" role=\"region\" aria-label=\"Area undangan tetap bawah\">\r\n <div class=\"panel\">\r\n <div class=\"mini\">\r\n <div class=\"when\">03 November 2025 pukul 17.00 (KST)<\/div>\r\n <div class=\"remain\"><strong id=\"dockRemain\">50 tersisa<\/strong> \u00b7 <span id=\"dockCount\">0\/50<\/span><\/div>\r\n <\/div>\r\n <button class=\"btn btn-primary\" id=\"btnOpenForm2\">Pendaftaran partisipasi<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Registration Sheet -->\r\n <div class=\"sheet\" id=\"sheet\">\r\n <div class=\"body\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"regTitle\">\r\n <div class=\"dragbar\"><\/div>\r\n <h2 id=\"regTitle\" style=\"margin:4px 0 6px; font-size:var(--fz-4)\">Daftar untuk acaranya<\/h2>\r\n <p class=\"helper\">Batas undangan: 50 orang \u00b7 Pendaftaran duplikat dicegah berdasarkan informasi kontak.<\/p>\r\n <form id=\"regForm\" autocomplete=\"on\" novalidate action=\"\">\r\n <div class=\"row\">\r\n <label for=\"org\">Nama perusahaan\/organisasi<\/label>\r\n <input id=\"org\" name=\"org\" type=\"text\" inputmode=\"text\" placeholder=\"Contoh) O2&B\" 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\" inputmode=\"text\" placeholder=\"Contoh) Direktur Pengembangan\" 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\" inputmode=\"text\" placeholder=\"Hong Gil-dong\" required>\r\n <\/div>\r\n <div class=\"row\">\r\n <label for=\"phone\">kontak<\/label>\r\n <input id=\"phone\" name=\"phone\" type=\"tel\" inputmode=\"tel\" placeholder=\"010-1234-5678\" required>\r\n <div class=\"helper\">Anda dapat memasukkannya tanpa tanda hubung (-).<\/div>\r\n <\/div>\r\n <div class=\"form-actions\">\r\n <button type=\"button\" class=\"btn btn-line\" id=\"btnClose\">pembatalan<\/button>\r\n <button type=\"submit\" class=\"btn btn-primary\" id=\"btnSubmit\">Menerapkan<\/button>\r\n <\/div>\r\n <p class=\"helper\" style=\"margin-top:8px\">Setelah dikirimkan, data tersebut disimpan dengan aman di browser, dan dapat dialihkan ke penyimpanan server berdasarkan permintaan administrator.<\/p>\r\n <input type=\"hidden\" name=\"trp-form-language\" value=\"id\"\/><\/form>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Toast -->\r\n <div class=\"toast\" id=\"toast\" role=\"status\" aria-live=\"polite\">Aplikasi Anda telah diterima. Kami akan segera mengirimkan teks konfirmasi.<\/div>\r\n\r\n <script>\r\n \/\/ ====== \uc124\uc815 ======\r\n const MAX_CAPACITY = 50;\r\n const EVENT_ISO = '2025-11-03T17:00:00+09:00'; \/\/ KST \uae30\uc900\r\n const LS_KEY = 'mcdi_event_registrations_v1';\r\n\r\n \/\/ ====== \uc720\ud2f8 ======\r\n const $ = (q)=>document.querySelector(q);\r\n const $$ = (q)=>document.querySelectorAll(q);\r\n const toast = (msg, ms=2200)=>{\r\n const t = $('#toast');\r\n t.textContent = msg; t.classList.add('show');\r\n clearTimeout(t._t); t._t = setTimeout(()=>t.classList.remove('show'), ms);\r\n };\r\n const sanitizePhone = (v)=> (v||'').replace(\/[^\\d]\/g, '');\r\n const formatCount = (n)=>`${n}\/${MAX_CAPACITY}`;\r\n\r\n \/\/ ====== \ub85c\uceec \uc800\uc7a5\uc18c(\uae30\ubcf8) ======\r\n function loadRegs(){\r\n try{\r\n const raw = localStorage.getItem(LS_KEY);\r\n const arr = raw ? JSON.parse(raw) : [];\r\n return Array.isArray(arr) ? arr : [];\r\n }catch(e){ return []; }\r\n }\r\n function saveRegs(arr){\r\n localStorage.setItem(LS_KEY, JSON.stringify(arr));\r\n }\r\n function existsByPhone(phone){\r\n const p = sanitizePhone(phone);\r\n return loadRegs().some(x=> x.phone === p);\r\n }\r\n function getRegistrationCount(){\r\n return loadRegs().length;\r\n }\r\n function saveRegistration(data){\r\n \/\/ \uc11c\ubc84 \uc5f0\ub3d9\uc774 \ud544\uc694\ud558\uba74 \uc774 \ud568\uc218\ub97c fetch POST\ub85c \uad50\uccb4\ud558\uc138\uc694.\r\n const regs = loadRegs();\r\n regs.push(data);\r\n saveRegs(regs);\r\n return true;\r\n }\r\n\r\n \/\/ ====== UI \uac31\uc2e0 ======\r\n function updateCounts(){\r\n const n = getRegistrationCount();\r\n const remain = Math.max(0, MAX_CAPACITY - n);\r\n const pct = Math.max(0, Math.min(100, Math.round((n \/ MAX_CAPACITY) * 100)));\r\n $('#countText').textContent = n;\r\n $('#capText').textContent = MAX_CAPACITY;\r\n $('#dockCount').textContent = formatCount(n);\r\n $('#dockRemain').textContent = `\uc794\uc5ec ${remain}`;\r\n $('#progressBar').style.width = pct + '%';\r\n\r\n const buttons = [$('#btnOpenForm'), $('#btnOpenForm2'), $('#btnSubmit')].filter(Boolean);\r\n if(n >= MAX_CAPACITY){\r\n buttons.forEach(b=>{\r\n b.disabled = true;\r\n if(b.id === 'btnSubmit') b.textContent = '\ub9c8\uac10';\r\n else b.textContent = '\uc811\uc218 \ub9c8\uac10';\r\n b.style.opacity = .7;\r\n });\r\n }else{\r\n buttons.forEach(b=>{\r\n b.disabled = false;\r\n if(b.id === 'btnSubmit') b.textContent = '\uc811\uc218\ud558\uae30';\r\n else b.textContent = '\ucc38\uac00\ub4f1\ub85d';\r\n b.style.opacity = 1;\r\n });\r\n }\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 const dd = $('#dd'), hh = $('#hh'), mm = $('#mm'), ss = $('#ss');\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*(1000*60*60*24);\r\n const h = Math.floor(diff \/ (1000*60*60)); diff -= h*(1000*60*60);\r\n const m = Math.floor(diff \/ (1000*60)); diff -= m*(1000*60);\r\n const s = Math.floor(diff \/ 1000);\r\n dd.textContent = d;\r\n hh.textContent = String(h).padStart(2,'0');\r\n mm.textContent = String(m).padStart(2,'0');\r\n ss.textContent = String(s).padStart(2,'0');\r\n }\r\n tick();\r\n setInterval(tick, 1000);\r\n }\r\n\r\n \/\/ ====== \ud3fc \ucc98\ub9ac ======\r\n function openSheet(){ $('#sheet').classList.add('active'); setTimeout(()=>$('#org').focus(), 150); }\r\n function closeSheet(){ $('#sheet').classList.remove('active'); }\r\n\r\n function validateForm(form){\r\n const org = form.org.value.trim();\r\n const title = form.title.value.trim();\r\n const name = form.name.value.trim();\r\n const phone = sanitizePhone(form.phone.value);\r\n if(!org || !title || !name || !phone){\r\n toast('\ud544\uc218 \ud56d\ubaa9\uc744 \ubaa8\ub450 \uc785\ub825\ud574\uc8fc\uc138\uc694.'); return null;\r\n }\r\n if(phone.length < 8){\r\n toast('\uc5f0\ub77d\ucc98 \ud615\uc2dd\uc774 \uc62c\ubc14\ub974\uc9c0 \uc54a\uc2b5\ub2c8\ub2e4.'); return null;\r\n }\r\n return { org, title, name, phone };\r\n }\r\n\r\n function attachForm(){\r\n $('#btnOpenForm')?.addEventListener('click', openSheet);\r\n $('#btnOpenForm2')?.addEventListener('click', openSheet);\r\n $('#btnClose')?.addEventListener('click', closeSheet);\r\n\r\n $('#regForm')?.addEventListener('submit', (e)=>{\r\n e.preventDefault();\r\n if(getRegistrationCount() >= MAX_CAPACITY){\r\n toast('\uc811\uc218\uac00 \ub9c8\uac10\ub418\uc5c8\uc2b5\ub2c8\ub2e4.'); updateCounts(); return;\r\n }\r\n const data = validateForm(e.target);\r\n if(!data) return;\r\n if(existsByPhone(data.phone)){\r\n toast('\uc774\ubbf8 \ub4f1\ub85d\ub41c \uc5f0\ub77d\ucc98\uc785\ub2c8\ub2e4.'); return;\r\n }\r\n \/\/ \uc800\uc7a5\r\n const payload = {\r\n ...data,\r\n ts: new Date().toISOString()\r\n };\r\n const ok = saveRegistration(payload);\r\n if(ok){\r\n updateCounts();\r\n toast('\uc811\uc218 \uc644\ub8cc! \ucc38\uc11d\uc744 \ud658\uc601\ud569\ub2c8\ub2e4.');\r\n e.target.reset();\r\n closeSheet();\r\n }else{\r\n toast('\uc800\uc7a5 \uc911 \uc624\ub958\uac00 \ubc1c\uc0dd\ud588\uc2b5\ub2c8\ub2e4. \uc7a0\uc2dc \ud6c4 \ub2e4\uc2dc \uc2dc\ub3c4\ud574\uc8fc\uc138\uc694.');\r\n }\r\n });\r\n }\r\n\r\n \/\/ ====== \uce98\ub9b0\ub354 \ucd94\uac00 (ICS) ======\r\n function addCalendar(){\r\n const start = new Date(EVENT_ISO);\r\n const end = new Date(start.getTime() + 3*60*60*1000); \/\/ 3\uc2dc\uac04 \ud589\uc0ac\r\n const toICS = (d)=> d.toISOString().replace(\/[-:]\/g,'').replace(\/\\.\\d{3}Z$\/,'Z');\r\n const ics =\r\n`BEGIN:VCALENDAR\r\nVERSION:2.0\r\nPRODID:-\/\/MCDI\/\/Invitation\/\/KR\r\nCALSCALE:GREGORIAN\r\nMETHOD:PUBLISH\r\nBEGIN:VEVENT\r\nUID:${crypto.randomUUID ? crypto.randomUUID() : ('mcdi-'+Date.now())}\r\nDTSTAMP:${toICS(new Date())}\r\nDTSTART:${toICS(start)}\r\nDTEND:${toICS(end)}\r\nSUMMARY:\ubca0\ud2b8\ub0a8 \ucd5c\uc801\ud654, \ubbf8\ub798\ub97c \uc5ec\ub294 MCDI \u2014 \ub77c\uc624\uae4c\uc774 \uc2dc\ubc94\uc124\uce58\r\nDESCRIPTION:1\uc77c 100\ud1a4 \uc815\uc218 \uc2dc\uc2a4\ud15c \u00b7 O2&B \ubb34\uc0c1 \uc2dc\uc2a4\ud15c \u00b7 \uc138\ubbf8\ub098 & \ub9cc\ucc2c \ud3ec\ud568\r\nLOCATION:\ub77c\uc624\uae4c\uc774(\ubca0\ud2b8\ub0a8) \uc2dc\ubc94 \uc124\uce58 \ud604\uc7a5\r\nEND:VEVENT\r\nEND:VCALENDAR`;\r\n const blob = new Blob([ics], {type:'text\/calendar'});\r\n const url = URL.createObjectURL(blob);\r\n const a = document.createElement('a');\r\n a.href = url; a.download = 'MCDI_invite_2025-11-03.ics'; a.click();\r\n setTimeout(()=>URL.revokeObjectURL(url), 2000);\r\n }\r\n\r\n \/\/ ====== \uac24\ub7ec\ub9ac \uc790\ub3d9 \uc2ac\ub77c\uc774\ub4dc(\ubd80\ub4dc\ub7ec\uc6b4 \uc790\ub3d9 \uc2a4\ud06c\ub864) ======\r\n function autoScrollGallery(){\r\n const g = $('#gallery'); if(!g) return;\r\n let idx = 0;\r\n const slides = g.querySelectorAll('.slide');\r\n if(slides.length <= 1) return;\r\n function go(){\r\n idx = (idx + 1) % slides.length;\r\n const target = slides[idx];\r\n target.scrollIntoView({behavior:'smooth', inline:'start'});\r\n }\r\n let t = setInterval(go, 3600);\r\n \/\/ \uc0ac\uc6a9\uc790\uac00 \uc2a4\ud06c\ub864\ud558\uba74 \uc790\ub3d9 \uc2ac\ub77c\uc774\ub4dc \uc7a0\uc2dc \uc911\uc9c0\r\n let isUser = false, userTimer;\r\n g.addEventListener('scroll', ()=>{\r\n isUser = true; clearTimeout(userTimer); clearInterval(t);\r\n userTimer = setTimeout(()=>{ isUser=false; t = setInterval(go, 3600); }, 4000);\r\n }, {passive:true});\r\n }\r\n\r\n \/\/ ====== \ucd08\uae30\ud654 ======\r\n function init(){\r\n updateCounts();\r\n startCountdown();\r\n attachForm();\r\n autoScrollGallery();\r\n $('#btnAddCalendar')?.addEventListener('click', addCalendar);\r\n\r\n \/\/ \uc811\uadfc\uc131: \uc2dc\ud2b8 \ubc14\uae65 \ud074\ub9ad \ub2eb\uae30\r\n $('#sheet')?.addEventListener('click', (e)=>{ if(e.target.id === 'sheet') closeSheet(); });\r\n }\r\n document.addEventListener('DOMContentLoaded', init);\r\n\r\n \/\/ ====== \uc11c\ubc84 \uc5f0\ub3d9 \ud301 ======\r\n \/\/ 1) saveRegistration()\ub97c fetch('\/api\/register', { method: 'POST', body: JSON.stringify(payload) })\ub85c \uad50\uccb4\r\n \/\/ 2) getRegistrationCount()\ub97c \uc11c\ubc84\uc758 \ucd1d\ud569 \uce74\uc6b4\ud2b8\ub97c \ubc18\ud658\ud558\ub294 fetch('\/api\/count')\ub85c \uad50\uccb4\r\n \/\/ 3) \uad50\uccb4 \uc2dc \ub85c\uceec \uc800\uc7a5 loadRegs\/saveRegs\ub294 \uc81c\uac70 \uac00\ub2a5\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\n``` Jika Anda mau: - Saya juga dapat memodifikasinya ke versi dengan integrasi API penyimpanan server aktual (Firebase\/Supabase\/Google Apps Script). - Saya juga dapat menyesuaikan warna agar sesuai dengan logo acara\/warna merek, mengganti video\/gambar, dan menambahkan bagian detail program.\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 \ubc14\ub85c \ubc30\ud3ec \uac00\ub2a5\ud55c \ub2e8\uc77c HTML \ud30c\uc77c\uc785\ub2c8\ub2e4. \ubaa8\ubc14\uc77c\uc5d0 \ucd5c\uc801\ud654\ub41c \uace0\uae09 \ub514\uc790\uc778, \uc720\ud29c\ube0c \uc601\uc0c1, \uc0ac\uc9c4 \uc2ac\ub77c\uc774\ub4dc, \uc811\uc218 \uce74\uc6b4\ud2b8(50\uba85), \ud0c0\uc774\uba38(2025-11-03 17:00 \uae30\uc900), \ub85c\uceec \uc800\uc7a5(localStorage) \uae30\ubc18\uc758 \ucc38\uac00 \ub4f1\ub85d \uc800\uc7a5\uacfc \uc911\ubcf5 \ubc29\uc9c0, \uc811\uc218 \ub9c8\uac10 \ucc98\ub9ac\uae4c\uc9c0 \ud3ec\ud568\ud588\uc2b5\ub2c8\ub2e4. \ud544\uc694 \uc2dc \uc8fc\uc11d\uc5d0 \ub530\ub77c \uc2e4\uc81c \uc11c\ubc84 \uc800\uc7a5 API\ub85c \uad50\uccb4\ub3c4 \uc27d\uac8c \ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ucc38\uace0: – \ub370\uc774\ud130 \uc800\uc7a5: \uae30\ubcf8\uc740 localStorage\ub85c \ub3d9\uc791(\ube0c\ub77c\uc6b0\uc800\uc5d0 \uc548\uc804\ud558\uac8c \uc800\uc7a5). \uc11c\ubc84 […]<\/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-3640","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\/3640","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=3640"}],"version-history":[{"count":0,"href":"https:\/\/cellbio.site\/id\/wp-json\/wp\/v2\/pages\/3640\/revisions"}],"wp:attachment":[{"href":"https:\/\/cellbio.site\/id\/wp-json\/wp\/v2\/media?parent=3640"}],"wp:term":[{"taxonomy":"wf_page_folders","embeddable":true,"href":"https:\/\/cellbio.site\/id\/wp-json\/wp\/v2\/wf_page_folders?post=3640"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}