PSF Job Application & Exam Fee Payment<\/title>\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" \/>\r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n <style>\r\n :root {\r\n color-scheme: dark;\r\n }\r\n body {\r\n min-height: 100vh;\r\n background:\r\n radial-gradient(circle at top left, rgba(129, 140, 248, 0.25), transparent 55%),\r\n radial-gradient(circle at top right, rgba(45, 212, 191, 0.16), transparent 55%),\r\n radial-gradient(circle at bottom, rgba(248, 250, 252, 0.04), transparent 55%),\r\n #020617;\r\n font-family: system-ui, -apple-system, BlinkMacSystemFont, \"SF Pro Text\", \"Segoe UI\", sans-serif;\r\n }\r\n .glass-card {\r\n background: linear-gradient(140deg, rgba(15, 23, 42, 0.96), rgba(15, 23, 42, 0.88));\r\n border-radius: 1.25rem;\r\n border: 1px solid rgba(148, 163, 184, 0.45);\r\n box-shadow:\r\n 0 18px 60px rgba(15, 23, 42, 0.95),\r\n 0 0 0 1px rgba(15, 23, 42, 0.9);\r\n backdrop-filter: blur(18px);\r\n }\r\n .input-shell {\r\n position: relative;\r\n }\r\n .input-shell input,\r\n .input-shell select,\r\n .input-shell textarea {\r\n border-radius: 0.9rem;\r\n background: rgba(15, 23, 42, 0.9);\r\n border: 1px solid rgba(51, 65, 85, 0.85);\r\n box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.85);\r\n transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, transform 0.1s ease;\r\n }\r\n .input-shell input:focus,\r\n .input-shell select:focus,\r\n .input-shell textarea:focus {\r\n outline: none;\r\n border-color: rgba(129, 140, 248, 0.9);\r\n box-shadow:\r\n 0 0 0 1px rgba(129, 140, 248, 0.9),\r\n 0 14px 35px rgba(30, 64, 175, 0.55);\r\n background: rgba(15, 23, 42, 0.98);\r\n transform: translateY(-1px);\r\n }\r\n .input-label {\r\n font-size: 0.76rem;\r\n letter-spacing: 0.04em;\r\n text-transform: uppercase;\r\n }\r\n .submit-button {\r\n position: relative;\r\n overflow: hidden;\r\n border-radius: 999px;\r\n background-image: linear-gradient(135deg, #4f46e5, #0ea5e9);\r\n box-shadow:\r\n 0 12px 35px rgba(37, 99, 235, 0.55),\r\n 0 0 0 1px rgba(191, 219, 254, 0.14);\r\n transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;\r\n }\r\n .submit-button::before {\r\n content: \"\";\r\n position: absolute;\r\n inset: 0;\r\n background: radial-gradient(circle at 0 0, rgba(255, 255, 255, 0.3), transparent 55%);\r\n opacity: 0;\r\n transition: opacity 0.2s ease;\r\n }\r\n .submit-button:hover::before {\r\n opacity: 1;\r\n }\r\n .submit-button:hover {\r\n transform: translateY(-1px);\r\n box-shadow:\r\n 0 18px 45px rgba(37, 99, 235, 0.7),\r\n 0 0 0 1px rgba(219, 234, 254, 0.25);\r\n filter: brightness(1.02);\r\n }\r\n .submit-button:active {\r\n transform: translateY(0);\r\n box-shadow:\r\n 0 8px 22px rgba(30, 64, 175, 0.8),\r\n 0 0 0 1px rgba(191, 219, 254, 0.25);\r\n }\r\n .badge-soft {\r\n border-radius: 999px;\r\n background: linear-gradient(120deg, rgba(30, 64, 175, 0.2), rgba(8, 47, 73, 0.3));\r\n border: 1px solid rgba(129, 140, 248, 0.5);\r\n box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.9);\r\n }\r\n .glow-pill {\r\n border-radius: 999px;\r\n background: radial-gradient(circle at top left, rgba(248, 250, 252, 0.12), transparent 55%), rgba(15, 23, 42, 0.88);\r\n border: 1px solid rgba(148, 163, 184, 0.8);\r\n box-shadow:\r\n 0 12px 30px rgba(15, 23, 42, 0.9),\r\n 0 0 0 1px rgba(15, 23, 42, 0.9);\r\n backdrop-filter: blur(14px);\r\n }\r\n .bkash-pill {\r\n background: linear-gradient(135deg, #ec4899, #f97316);\r\n box-shadow:\r\n 0 16px 40px rgba(236, 72, 153, 0.85),\r\n 0 0 0 1px rgba(248, 250, 252, 0.1);\r\n }\r\n .bkash-pill span {\r\n text-shadow: 0 10px 25px rgba(159, 18, 57, 0.8);\r\n }\r\n .floating-orbits {\r\n pointer-events: none;\r\n position: fixed;\r\n inset: 0;\r\n overflow: hidden;\r\n z-index: -1;\r\n opacity: 0.6;\r\n }\r\n .floating-orbits::before,\r\n .floating-orbits::after {\r\n content: \"\";\r\n position: absolute;\r\n border-radius: 999px;\r\n border: 1px solid rgba(148, 163, 184, 0.18);\r\n box-shadow:\r\n 0 0 80px rgba(129, 140, 248, 0.6),\r\n 0 0 180px rgba(56, 189, 248, 0.4);\r\n animation: floatOrbit 26s linear infinite;\r\n }\r\n .floating-orbits::before {\r\n width: 560px;\r\n height: 560px;\r\n top: -280px;\r\n right: -120px;\r\n }\r\n .floating-orbits::after {\r\n width: 460px;\r\n height: 460px;\r\n bottom: -260px;\r\n left: -80px;\r\n animation-duration: 38s;\r\n animation-direction: reverse;\r\n }\r\n @keyframes floatOrbit {\r\n 0% {\r\n transform: translate3d(0, 0, 0) rotate(0deg);\r\n }\r\n 50% {\r\n transform: translate3d(10px, 14px, 0) rotate(180deg);\r\n }\r\n 100% {\r\n transform: translate3d(0, 0, 0) rotate(360deg);\r\n }\r\n }\r\n .alert {\r\n border-radius: 0.9rem;\r\n border-width: 1px;\r\n }\r\n .alert-success {\r\n background: rgba(22, 163, 74, 0.12);\r\n border-color: rgba(34, 197, 94, 0.4);\r\n }\r\n .alert-error {\r\n background: rgba(220, 38, 38, 0.12);\r\n border-color: rgba(248, 113, 113, 0.5);\r\n }\r\n <\/style>\r\n<\/head>\r\n<body class=\"text-slate-100 antialiased\">\r\n <div class=\"floating-orbits\"><\/div>\r\n\r\n <main class=\"relative z-10 flex min-h-screen items-center justify-center px-4 py-10 sm:px-6 lg:px-10\">\r\n <div class=\"w-full max-w-5xl space-y-8\">\r\n <header class=\"flex flex-col gap-6 sm:flex-row sm:items-center sm:justify-between\">\r\n <div class=\"space-y-3\">\r\n <div class=\"inline-flex items-center gap-3 rounded-full border border-slate-700\/70 bg-slate-900\/70 px-3 py-1 text-[0.7rem] font-medium tracking-wide text-slate-300 shadow-md shadow-slate-950\/70 backdrop-blur\">\r\n <span class=\"inline-flex h-6 w-6 items-center justify-center rounded-full bg-gradient-to-br from-indigo-500 via-sky-500 to-cyan-400 text-[0.7rem] font-semibold text-slate-950 shadow-lg shadow-sky-500\/80\">PSF<\/span>\r\n <span class=\"uppercase tracking-[0.18em] text-slate-300\/95\">Recruitment Portal<\/span>\r\n <\/div>\r\n <div>\r\n <h1 class=\"text-3xl font-semibold tracking-tight text-slate-50 sm:text-4xl\">\r\n Job Application & Exam Fee Payment\r\n <\/h1>\r\n <p class=\"mt-2 max-w-2xl text-sm text-slate-300\/85 sm:text-base\">\r\n Apply for your desired position and confirm the mandatory exam fee payment via bKash before submitting your application to\r\n <span class=\"font-semibold text-indigo-300\">info@psf.org.bd<\/span>.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"glow-pill px-4 py-3 sm:px-5 sm:py-4\">\r\n <div class=\"flex flex-col gap-2\">\r\n <div class=\"inline-flex items-center gap-2\">\r\n <span class=\"inline-flex h-8 w-8 items-center justify-center rounded-full bkash-pill text-xs font-semibold uppercase tracking-[0.16em]\">\r\n <span class=\"text-slate-50\">bK<\/span>\r\n <\/span>\r\n <div class=\"flex flex-col text-xs\">\r\n <span class=\"font-semibold uppercase tracking-[0.18em] text-pink-300\/90\">Exam Fee Payment<\/span>\r\n <span class=\"text-[0.68rem] text-slate-300\/85\">Merchant Number (bKash Personal\/Agent)<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"mt-1 flex flex-col\">\r\n <span class=\"text-[0.72rem] font-medium uppercase tracking-[0.16em] text-slate-400\">Pay to<\/span>\r\n <div class=\"mt-1 inline-flex items-baseline gap-2\">\r\n <span class=\"text-xl font-semibold tracking-[0.08em] text-pink-300 sm:text-2xl\">01713-873732<\/span>\r\n <span class=\"rounded-full bg-slate-900\/70 px-2 py-0.5 text-[0.65rem] font-medium uppercase tracking-[0.16em] text-slate-300 shadow-sm shadow-slate-900\/90\">\r\n bKash Merchant\r\n <\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/header>\r\n\r\n <section class=\"glass-card px-5 py-5 sm:px-8 sm:py-7\">\r\n <div class=\"grid gap-6 md:grid-cols-[minmax(0,1.2fr)_minmax(0,1fr)]\">\r\n <div class=\"space-y-4 border-b border-slate-800\/70 pb-5 md:border-b-0 md:border-r md:pb-0 md:pr-6\">\r\n <h2 class=\"text-sm font-semibold uppercase tracking-[0.2em] text-slate-300\/90\">\r\n Available Positions & Exam Fees\r\n <\/h2>\r\n <p class=\"text-xs text-slate-300\/90 sm:text-sm\">\r\n Select one position only. The corresponding exam fee will be calculated automatically and must be paid via bKash before submitting the form.\r\n <\/p>\r\n <div class=\"mt-2 grid gap-3 text-xs sm:grid-cols-2 sm:text-sm\">\r\n <div class=\"rounded-xl border border-indigo-500\/40 bg-slate-900\/80 p-3 shadow-md shadow-slate-950\/80\">\r\n <div class=\"flex items-center justify-between gap-2\">\r\n <div>\r\n <p class=\"font-medium text-slate-50\">Branch Manager<\/p>\r\n <p class=\"mt-0.5 text-[0.74rem] text-slate-400\">Exam Fee<\/p>\r\n <\/div>\r\n <span class=\"badge-soft px-3 py-1 text-xs font-semibold text-indigo-200\">\r\n 200 BDT\r\n <\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"rounded-xl border border-sky-500\/40 bg-slate-900\/80 p-3 shadow-md shadow-slate-950\/80\">\r\n <div class=\"flex items-center justify-between gap-2\">\r\n <div>\r\n <p class=\"font-medium text-slate-50\">Program Officer (Grade 1)<\/p>\r\n <p class=\"mt-0.5 text-[0.74rem] text-slate-400\">Exam Fee<\/p>\r\n <\/div>\r\n <span class=\"badge-soft px-3 py-1 text-xs font-semibold text-sky-100\">\r\n 150 BDT\r\n <\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"rounded-xl border border-emerald-500\/40 bg-slate-900\/80 p-3 shadow-md shadow-slate-950\/80\">\r\n <div class=\"flex items-center justify-between gap-2\">\r\n <div>\r\n <p class=\"font-medium text-slate-50\">Program Officer (Grade 2)<\/p>\r\n <p class=\"mt-0.5 text-[0.74rem] text-slate-400\">Exam Fee<\/p>\r\n <\/div>\r\n <span class=\"badge-soft px-3 py-1 text-xs font-semibold text-emerald-100\">\r\n 100 BDT\r\n <\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"rounded-xl border border-cyan-500\/40 bg-slate-900\/80 p-3 shadow-md shadow-slate-950\/80\">\r\n <div class=\"flex items-center justify-between gap-2\">\r\n <div>\r\n <p class=\"font-medium text-slate-50\">Account Officer<\/p>\r\n <p class=\"mt-0.5 text-[0.74rem] text-slate-400\">Exam Fee<\/p>\r\n <\/div>\r\n <span class=\"badge-soft px-3 py-1 text-xs font-semibold text-cyan-100\">\r\n 100 BDT\r\n <\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"rounded-xl border border-fuchsia-500\/40 bg-slate-900\/80 p-3 shadow-md shadow-slate-950\/80 md:col-span-2\">\r\n <div class=\"flex items-center justify-between gap-2\">\r\n <div>\r\n <p class=\"font-medium text-slate-50\">Peon<\/p>\r\n <p class=\"mt-0.5 text-[0.74rem] text-slate-400\">Exam Fee<\/p>\r\n <\/div>\r\n <span class=\"badge-soft px-3 py-1 text-xs font-semibold text-fuchsia-100\">\r\n 50 BDT\r\n <\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"space-y-4 md:pl-3\">\r\n <h3 class=\"text-sm font-semibold uppercase tracking-[0.2em] text-slate-300\/90\">\r\n Payment Instructions\r\n <\/h3>\r\n <ol class=\"space-y-2 text-xs text-slate-300\/90 sm:text-sm\">\r\n <li class=\"flex items-start gap-2\">\r\n <span class=\"mt-[2px] inline-flex h-4 w-4 items-center justify-center rounded-full bg-slate-800 text-[0.65rem] font-semibold text-slate-200\">1<\/span>\r\n <span>Choose your desired job post in the application form below.<\/span>\r\n <\/li>\r\n <li class=\"flex items-start gap-2\">\r\n <span class=\"mt-[2px] inline-flex h-4 w-4 items-center justify-center rounded-full bg-slate-800 text-[0.65rem] font-semibold text-slate-200\">2<\/span>\r\n <span>Pay the exact exam fee via <span class=\"font-semibold text-pink-300\">bKash<\/span> to\r\n <span class=\"font-semibold text-slate-50\">01713-873732<\/span> (Merchant).<\/span>\r\n <\/li>\r\n <li class=\"flex items-start gap-2\">\r\n <span class=\"mt-[2px] inline-flex h-4 w-4 items-center justify-center rounded-full bg-slate-800 text-[0.65rem] font-semibold text-slate-200\">3<\/span>\r\n <span>After successful payment, note the <span class=\"font-semibold text-slate-50\">bKash Account Number<\/span>, <span class=\"font-semibold text-slate-50\">Transaction ID<\/span> and <span class=\"font-semibold text-slate-50\">Payment Date<\/span>.<\/span>\r\n <\/li>\r\n <li class=\"flex items-start gap-2\">\r\n <span class=\"mt-[2px] inline-flex h-4 w-4 items-center justify-center rounded-full bg-slate-800 text-[0.65rem] font-semibold text-slate-200\">4<\/span>\r\n <span>Fill in all required fields and submit. Your email client will open to send the full application to\r\n <span class=\"font-semibold text-indigo-300\">info@psf.org.bd<\/span>.<\/span>\r\n <\/li>\r\n <\/ol>\r\n <p class=\"mt-2 rounded-lg border border-amber-500\/50 bg-amber-500\/10 px-3 py-2 text-xs text-amber-100 shadow-sm shadow-amber-900\/60\">\r\n <span class=\"font-semibold uppercase tracking-[0.18em] text-amber-200\">Note:<\/span>\r\n Exam fee payment is <span class=\"font-semibold\">mandatory<\/span>. Incomplete or unpaid applications will not be accepted.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <section class=\"glass-card px-5 py-6 sm:px-8 sm:py-8\">\r\n <div class=\"flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between\">\r\n <div>\r\n <h2 class=\"text-lg font-semibold tracking-tight text-slate-50 sm:text-xl\">\r\n Application Form\r\n <\/h2>\r\n <p class=\"mt-1 text-xs text-slate-300\/90 sm:text-sm\">\r\n Please fill in all required (<span class=\"text-rose-400\">*<\/span>) fields carefully. Use English characters where possible.\r\n <\/p>\r\n <\/div>\r\n <div class=\"flex flex-wrap items-center gap-2\">\r\n <span class=\"badge-soft px-3 py-1 text-[0.7rem] font-semibold uppercase tracking-[0.18em] text-emerald-200\">\r\n Intake Open\r\n <\/span>\r\n <span class=\"rounded-full border border-slate-700\/80 bg-slate-900\/70 px-3 py-1 text-[0.7rem] font-medium text-slate-300\/95 shadow-sm shadow-slate-950\/80\">\r\n Submit via Email:\r\n <span class=\"text-indigo-300\">info@psf.org.bd<\/span>\r\n <\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <div id=\"formAlert\" class=\"alert mt-4 hidden px-4 py-3 text-xs sm:text-sm\">\r\n <p id=\"formAlertMessage\" class=\"font-medium\"><\/p>\r\n <\/div>\r\n\r\n <form id=\"applicationForm\" class=\"mt-6 space-y-8\" autocomplete=\"on\" novalidate>\r\n \r\n <div class=\"space-y-4\">\r\n <h3 class=\"text-xs font-semibold uppercase tracking-[0.2em] text-slate-300\/90\">\r\n Step 1 — Position & Basic Information\r\n <\/h3>\r\n <div class=\"grid gap-4 md:grid-cols-2\">\r\n <div class=\"input-shell\">\r\n <label for=\"jobPost\" class=\"input-label mb-1 block text-slate-300\">\r\n Job Post <span class=\"text-rose-400\">*<\/span>\r\n <\/label>\r\n <select id=\"jobPost\" name=\"Job Post\" required class=\"w-full border px-3 py-2.5 text-sm text-slate-100 placeholder-slate-500 focus:outline-none\">\r\n <option value=\"\" disabled selected>Select a position<\/option>\r\n <option value=\"Branch Manager\" data-fee=\"200\">Branch Manager — 200 BDT<\/option>\r\n <option value=\"Program Officer Grade 1\" data-fee=\"150\">Program Officer (Grade 1) — 150 BDT<\/option>\r\n <option value=\"Program Officer Grade 2\" data-fee=\"100\">Program Officer (Grade 2) — 100 BDT<\/option>\r\n <option value=\"Account Officer\" data-fee=\"100\">Account Officer — 100 BDT<\/option>\r\n <option value=\"Peon\" data-fee=\"50\">Peon — 50 BDT<\/option>\r\n <\/select>\r\n <\/div>\r\n <div class=\"input-shell\">\r\n <label for=\"fullName\" class=\"input-label mb-1 block text-slate-300\">\r\n Full Name <span class=\"text-rose-400\">*<\/span>\r\n <\/label>\r\n <input id=\"fullName\" name=\"Full Name\" type=\"text\" required placeholder=\"Enter your full name\" class=\"w-full border px-3 py-2.5 text-sm text-slate-100 placeholder-slate-500\" \/>\r\n <\/div>\r\n <div class=\"input-shell\">\r\n <label for=\"fatherName\" class=\"input-label mb-1 block text-slate-300\">\r\n Father's Name <span class=\"text-rose-400\">*<\/span>\r\n <\/label>\r\n <input id=\"fatherName\" name=\"Father's Name\" type=\"text\" required placeholder=\"Enter father's name\" class=\"w-full border px-3 py-2.5 text-sm text-slate-100 placeholder-slate-500\" \/>\r\n <\/div>\r\n <div class=\"input-shell\">\r\n <label for=\"motherName\" class=\"input-label mb-1 block text-slate-300\">\r\n Mother's Name <span class=\"text-rose-400\">*<\/span>\r\n <\/label>\r\n <input id=\"motherName\" name=\"Mother's Name\" type=\"text\" required placeholder=\"Enter mother's name\" class=\"w-full border px-3 py-2.5 text-sm text-slate-100 placeholder-slate-500\" \/>\r\n <\/div>\r\n <div class=\"input-shell\">\r\n <label for=\"dob\" class=\"input-label mb-1 block text-slate-300\">\r\n Date of Birth <span class=\"text-rose-400\">*<\/span>\r\n <\/label>\r\n <input id=\"dob\" name=\"Date of Birth\" type=\"date\" required class=\"w-full border px-3 py-2.5 text-sm text-slate-100 placeholder-slate-500\" \/>\r\n <\/div>\r\n <div class=\"input-shell\">\r\n <label for=\"gender\" class=\"input-label mb-1 block text-slate-300\">\r\n Gender <span class=\"text-rose-400\">*<\/span>\r\n <\/label>\r\n <select id=\"gender\" name=\"Gender\" required class=\"w-full border px-3 py-2.5 text-sm text-slate-100 placeholder-slate-500\">\r\n <option value=\"\" disabled selected>Select gender<\/option>\r\n <option value=\"Male\">Male<\/option>\r\n <option value=\"Female\">Female<\/option>\r\n <option value=\"Other\">Other<\/option>\r\n <\/select>\r\n <\/div>\r\n <div class=\"input-shell\">\r\n <label for=\"nid\" class=\"input-label mb-1 block text-slate-300\">\r\n National ID \/ Birth Registration No. <span class=\"text-rose-400\">*<\/span>\r\n <\/label>\r\n <input id=\"nid\" name=\"NID \/ Birth Registration\" type=\"text\" required placeholder=\"Enter NID or Birth Registration No.\" class=\"w-full border px-3 py-2.5 text-sm text-slate-100 placeholder-slate-500\" \/>\r\n <\/div>\r\n <div class=\"input-shell\">\r\n <label for=\"phone\" class=\"input-label mb-1 block text-slate-300\">\r\n Mobile Number <span class=\"text-rose-400\">*<\/span>\r\n <\/label>\r\n <input id=\"phone\" name=\"Mobile Number\" type=\"tel\" required pattern=\"01[0-9]{9}\" placeholder=\"01XXXXXXXXX\" class=\"w-full border px-3 py-2.5 text-sm text-slate-100 placeholder-slate-500\" \/>\r\n <p class=\"mt-1 text-[0.7rem] text-slate-400\">Format: 11-digit Bangladeshi number (e.g. 017XXXXXXXX).<\/p>\r\n <\/div>\r\n <div class=\"input-shell\">\r\n <label for=\"email\" class=\"input-label mb-1 block text-slate-300\">\r\n Email Address <span class=\"text-rose-400\">*<\/span>\r\n <\/label>\r\n <input id=\"email\" name=\"Email\" type=\"email\" required placeholder=\"example@mail.com\" class=\"w-full border px-3 py-2.5 text-sm text-slate-100 placeholder-slate-500\" \/>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"space-y-4\">\r\n <h3 class=\"text-xs font-semibold uppercase tracking-[0.2em] text-slate-300\/90\">\r\n Step 2 — Address & Education\r\n <\/h3>\r\n <div class=\"grid gap-4 md:grid-cols-2\">\r\n <div class=\"input-shell md:col-span-2\">\r\n <label for=\"presentAddress\" class=\"input-label mb-1 block text-slate-300\">\r\n Present Address <span class=\"text-rose-400\">*<\/span>\r\n <\/label>\r\n <textarea id=\"presentAddress\" name=\"Present Address\" rows=\"2\" required placeholder=\"House, Road, Area, Thana, District\" class=\"w-full resize-y border px-3 py-2.5 text-sm text-slate-100 placeholder-slate-500\"><\/textarea>\r\n <\/div>\r\n <div class=\"input-shell md:col-span-2\">\r\n <label for=\"permanentAddress\" class=\"input-label mb-1 block text-slate-300\">\r\n Permanent Address <span class=\"text-rose-400\">*<\/span>\r\n <\/label>\r\n <textarea id=\"permanentAddress\" name=\"Permanent Address\" rows=\"2\" required placeholder=\"Village\/Town, Post Office, Thana, District\" class=\"w-full resize-y border px-3 py-2.5 text-sm text-slate-100 placeholder-slate-500\"><\/textarea>\r\n <\/div>\r\n <div class=\"input-shell\">\r\n <label for=\"education\" class=\"input-label mb-1 block text-slate-300\">\r\n Highest Education Qualification <span class=\"text-rose-400\">*<\/span>\r\n <\/label>\r\n <input id=\"education\" name=\"Highest Education\" type=\"text\" required placeholder=\"e.g. BBA, MBA, HSC, SSC\" class=\"w-full border px-3 py-2.5 text-sm text-slate-100 placeholder-slate-500\" \/>\r\n <\/div>\r\n <div class=\"input-shell\">\r\n <label for=\"institution\" class=\"input-label mb-1 block text-slate-300\">\r\n Institution (University\/College\/School) <span class=\"text-rose-400\">*<\/span>\r\n <\/label>\r\n <input id=\"institution\" name=\"Institution\" type=\"text\" required placeholder=\"Name of institution\" class=\"w-full border px-3 py-2.5 text-sm text-slate-100 placeholder-slate-500\" \/>\r\n <\/div>\r\n <div class=\"input-shell\">\r\n <label for=\"passingYear\" class=\"input-label mb-1 block text-slate-300\">\r\n Passing Year <span class=\"text-rose-400\">*<\/span>\r\n <\/label>\r\n <input id=\"passingYear\" name=\"Passing Year\" type=\"number\" min=\"1980\" max=\"2099\" required placeholder=\"e.g. 2022\" class=\"w-full border px-3 py-2.5 text-sm text-slate-100 placeholder-slate-500\" \/>\r\n <\/div>\r\n <div class=\"input-shell\">\r\n <label for=\"result\" class=\"input-label mb-1 block text-slate-300\">\r\n Result (CGPA \/ Division) <span class=\"text-rose-400\">*<\/span>\r\n <\/label>\r\n <input id=\"result\" name=\"Result (CGPA\/Division)\" type=\"text\" required placeholder=\"e.g. 3.50 out of 4.00 \/ 1st Division\" class=\"w-full border px-3 py-2.5 text-sm text-slate-100 placeholder-slate-500\" \/>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"space-y-4\">\r\n <h3 class=\"text-xs font-semibold uppercase tracking-[0.2em] text-slate-300\/90\">\r\n Step 3 — Mandatory Exam Fee Payment (bKash)\r\n <\/h3>\r\n\r\n <div class=\"grid gap-4 md:grid-cols-3\">\r\n <div class=\"input-shell\">\r\n <label for=\"examFee\" class=\"input-label mb-1 block text-slate-300\">\r\n Exam Fee (Auto) <span class=\"text-rose-400\">*<\/span>\r\n <\/label>\r\n <div class=\"relative\">\r\n <input id=\"examFee\" name=\"Exam Fee (BDT)\" type=\"text\" readonly required placeholder=\"Select job post first\" class=\"w-full border px-3 py-2.5 pr-14 text-sm text-slate-100 placeholder-slate-500\" \/>\r\n <span class=\"pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3 text-[0.7rem] font-semibold uppercase tracking-[0.16em] text-slate-400\">\r\n BDT\r\n <\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"input-shell\">\r\n <label for=\"bkashNumber\" class=\"input-label mb-1 block text-slate-300\">\r\n Your bKash Account Number <span class=\"text-rose-400\">*<\/span>\r\n <\/label>\r\n <input id=\"bkashNumber\" name=\"bKash Account Number\" type=\"tel\" required pattern=\"01[0-9]{9}\" placeholder=\"01XXXXXXXXX (used to pay)\" class=\"w-full border px-3 py-2.5 text-sm text-slate-100 placeholder-slate-500\" \/>\r\n <\/div>\r\n <div class=\"input-shell\">\r\n <label for=\"transactionId\" class=\"input-label mb-1 block text-slate-300\">\r\n bKash Transaction ID <span class=\"text-rose-400\">*<\/span>\r\n <\/label>\r\n <input id=\"transactionId\" name=\"bKash Transaction ID\" type=\"text\" required placeholder=\"e.g. 9HG5X2ABCD\" class=\"w-full border px-3 py-2.5 text-sm text-slate-100 placeholder-slate-500 uppercase\" \/>\r\n <\/div>\r\n <div class=\"input-shell\">\r\n <label for=\"paymentDate\" class=\"input-label mb-1 block text-slate-300\">\r\n Payment Date <span class=\"text-rose-400\">*<\/span>\r\n <\/label>\r\n <input id=\"paymentDate\" name=\"Payment Date\" type=\"date\" required class=\"w-full border px-3 py-2.5 text-sm text-slate-100 placeholder-slate-500\" \/>\r\n <\/div>\r\n <div class=\"input-shell\">\r\n <label for=\"paidAmount\" class=\"input-label mb-1 block text-slate-300\">\r\n Paid Amount (BDT) <span class=\"text-rose-400\">*<\/span>\r\n <\/label>\r\n <div class=\"relative\">\r\n <input id=\"paidAmount\" name=\"Paid Amount (BDT)\" type=\"text\" readonly required placeholder=\"Will match exam fee\" class=\"w-full border px-3 py-2.5 pr-14 text-sm text-slate-100 placeholder-slate-500\" \/>\r\n <span class=\"pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3 text-[0.7rem] font-semibold uppercase tracking-[0.16em] text-slate-400\">\r\n BDT\r\n <\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"flex items-center md:items-start\">\r\n <label class=\"inline-flex items-start gap-2 text-xs text-slate-200\/90 sm:text-[0.8rem]\">\r\n <input id=\"confirmPayment\" name=\"Confirm Payment\" type=\"checkbox\" required class=\"mt-[2px] h-4 w-4 rounded border-slate-600 bg-slate-900 text-indigo-500 focus:ring-2 focus:ring-indigo-500\/70 focus:ring-offset-0\" \/>\r\n <span>\r\n I confirm that I have paid the correct exam fee via bKash to\r\n <span class=\"font-semibold text-pink-300\">01713-873732<\/span> and the information above is correct.\r\n <span class=\"text-rose-400\">*<\/span>\r\n <\/span>\r\n <\/label>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"space-y-5 border-t border-slate-800\/80 pt-5\">\r\n <div class=\"rounded-xl border border-slate-700\/80 bg-slate-900\/80 px-4 py-3 text-[0.7rem] text-slate-200\/95 shadow-sm shadow-slate-950\/80 sm:text-xs\">\r\n <p class=\"font-semibold uppercase tracking-[0.18em] text-slate-300\/95\">Applicant's Declaration<\/p>\r\n <p class=\"mt-1.5 leading-relaxed\">\r\n I declare that the information given above is true and correct to the best of my knowledge. I understand that providing false or incomplete information may result in cancellation of my application. I accept that the exam fee is non-refundable.\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between\">\r\n <p class=\"text-[0.72rem] text-slate-300\/85 sm:text-xs\">\r\n After clicking <span class=\"font-semibold text-indigo-200\">Submit Application<\/span>, your email client will open with all entered information. Please review and send the email to\r\n <span class=\"font-semibold text-indigo-300\">info@psf.org.bd<\/span>.\r\n <\/p>\r\n <button type=\"submit\" class=\"submit-button inline-flex items-center justify-center px-7 py-2.5 text-sm font-semibold tracking-wide text-slate-50\">\r\n <span class=\"mr-2 inline-flex h-5 w-5 items-center justify-center rounded-full bg-slate-900\/90 text-[0.65rem] font-bold\">\u2713<\/span>\r\n Submit Application\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/form>\r\n\r\n <div id=\"summaryContainer\" class=\"mt-6 hidden border-t border-slate-800\/80 pt-5\">\r\n <div class=\"flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between\">\r\n <div>\r\n <h3 class=\"text-sm font-semibold tracking-tight text-slate-50\">\r\n Application Summary (for your record)\r\n <\/h3>\r\n <p class=\"mt-1 text-[0.72rem] text-slate-300\/85 sm:text-xs\">\r\n If your email client did not open automatically, copy the details below and send manually to\r\n <span class=\"font-semibold text-indigo-300\">info@psf.org.bd<\/span>.\r\n <\/p>\r\n <\/div>\r\n <button id=\"copySummaryBtn\" type=\"button\" class=\"inline-flex items-center gap-2 rounded-full border border-slate-600\/80 bg-slate-900\/85 px-4 py-1.5 text-[0.7rem] font-medium text-slate-100 shadow-sm shadow-slate-950\/80 hover:border-indigo-400 hover:text-indigo-100 hover:shadow-indigo-800\/60\">\r\n <span class=\"inline-flex h-4 w-4 items-center justify-center rounded-full bg-slate-800 text-[0.6rem]\">\u29c9<\/span>\r\n Copy Details\r\n <\/button>\r\n <\/div>\r\n <pre id=\"applicationSummary\" class=\"mt-3 max-h-72 overflow-auto whitespace-pre-wrap rounded-lg border border-slate-800\/90 bg-slate-950\/70 px-4 py-3 text-[0.7rem] text-slate-100 shadow-inner shadow-slate-950\/80 sm:text-xs\"><\/pre>\r\n <p id=\"copyFeedback\" class=\"mt-2 hidden text-[0.7rem] text-emerald-300 sm:text-xs\">\r\n Application details copied to clipboard.\r\n <\/p>\r\n <\/div>\r\n <\/section>\r\n\r\n <footer class=\"pb-2 pt-1 text-center text-[0.7rem] text-slate-500 sm:text-xs\">\r\n <p>Powered by PSF Online Recruitment — All rights reserved.<\/p>\r\n <\/footer>\r\n <\/div>\r\n <\/main>\r\n\r\n <script>\r\n (function () {\r\n const form = document.getElementById(\"applicationForm\");\r\n const jobPostSelect = document.getElementById(\"jobPost\");\r\n const examFeeInput = document.getElementById(\"examFee\");\r\n const paidAmountInput = document.getElementById(\"paidAmount\");\r\n const formAlert = document.getElementById(\"formAlert\");\r\n const formAlertMessage = document.getElementById(\"formAlertMessage\");\r\n const summaryContainer = document.getElementById(\"summaryContainer\");\r\n const applicationSummary = document.getElementById(\"applicationSummary\");\r\n const copySummaryBtn = document.getElementById(\"copySummaryBtn\");\r\n const copyFeedback = document.getElementById(\"copyFeedback\");\r\n\r\n function showAlert(type, message) {\r\n formAlert.classList.remove(\"hidden\", \"alert-success\", \"alert-error\");\r\n formAlert.classList.add(type === \"success\" ? \"alert-success\" : \"alert-error\");\r\n formAlertMessage.textContent = message;\r\n }\r\n\r\n function clearAlert() {\r\n formAlert.classList.add(\"hidden\");\r\n formAlertMessage.textContent = \"\";\r\n }\r\n\r\n jobPostSelect.addEventListener(\"change\", function () {\r\n const selectedOption = jobPostSelect.options[jobPostSelect.selectedIndex];\r\n const fee = selectedOption.getAttribute(\"data-fee\");\r\n if (fee) {\r\n examFeeInput.value = fee;\r\n paidAmountInput.value = fee;\r\n } else {\r\n examFeeInput.value = \"\";\r\n paidAmountInput.value = \"\";\r\n }\r\n });\r\n\r\n form.addEventListener(\"submit\", function (e) {\r\n e.preventDefault();\r\n clearAlert();\r\n\r\n if (!form.checkValidity()) {\r\n form.reportValidity();\r\n showAlert(\"error\", \"Please fill in all required fields and check the confirmation box before submitting.\");\r\n return;\r\n }\r\n\r\n const jobPost = jobPostSelect.value;\r\n const jobPostLabel = jobPostSelect.options[jobPostSelect.selectedIndex]?.text || jobPost || \"Not specified\";\r\n const fullName = document.getElementById(\"fullName\").value.trim();\r\n\r\n const fields = [\r\n { label: \"Job Post\", id: \"jobPost\", value: jobPostLabel },\r\n { label: \"Full Name\", id: \"fullName\" },\r\n { label: \"Father's Name\", id: \"fatherName\" },\r\n { label: \"Mother's Name\", id: \"motherName\" },\r\n { label: \"Date of Birth\", id: \"dob\" },\r\n { label: \"Gender\", id: \"gender\" },\r\n { label: \"NID \/ Birth Registration\", id: \"nid\" },\r\n { label: \"Mobile Number\", id: \"phone\" },\r\n { label: \"Email\", id: \"email\" },\r\n { label: \"Present Address\", id: \"presentAddress\" },\r\n { label: \"Permanent Address\", id: \"permanentAddress\" },\r\n { label: \"Highest Education\", id: \"education\" },\r\n { label: \"Institution\", id: \"institution\" },\r\n { label: \"Passing Year\", id: \"passingYear\" },\r\n { label: \"Result (CGPA\/Division)\", id: \"result\" },\r\n { label: \"Exam Fee (BDT)\", id: \"examFee\" },\r\n { label: \"bKash Account Number\", id: \"bkashNumber\" },\r\n { label: \"bKash Transaction ID\", id: \"transactionId\" },\r\n { label: \"Payment Date\", id: \"paymentDate\" },\r\n { label: \"Paid Amount (BDT)\", id: \"paidAmount\" }\r\n ];\r\n\r\n const lines = [];\r\n lines.push(\"PSF Job Application\");\r\n lines.push(\"----------------------\");\r\n fields.forEach((field) => {\r\n let value;\r\n if (field.value) {\r\n value = field.value;\r\n } else {\r\n const el = document.getElementById(field.id);\r\n if (!el) return;\r\n if (el.tagName === \"SELECT\") {\r\n value = el.options[el.selectedIndex]?.text || el.value || \"\";\r\n } else {\r\n value = el.value || \"\";\r\n }\r\n }\r\n lines.push(field.label + \": \" + value);\r\n });\r\n\r\n lines.push(\"\");\r\n lines.push(\"Payment Confirmation:\");\r\n lines.push(\"I confirm that I have paid the mandatory exam fee via bKash to 01713-873732 and all information provided is true and correct.\");\r\n\r\n const bodyText = lines.join(\"\\n\");\r\n const subject = \"Job Application - \" + (jobPost || \"Position\") + \" - \" + (fullName || \"Applicant\");\r\n\r\n applicationSummary.textContent = bodyText;\r\n summaryContainer.classList.remove(\"hidden\");\r\n copyFeedback.classList.add(\"hidden\");\r\n\r\n const mailtoLink =\r\n \"mailto:info@psf.org.bd?subject=\" +\r\n encodeURIComponent(subject) +\r\n \"&body=\" +\r\n encodeURIComponent(bodyText);\r\n\r\n showAlert(\r\n \"success\",\r\n \"Application details prepared. Your email client will open now. Please review and send the email to info@psf.org.bd.\"\r\n );\r\n\r\n window.location.href = mailtoLink;\r\n });\r\n\r\n copySummaryBtn.addEventListener(\"click\", function () {\r\n const text = applicationSummary.textContent || \"\";\r\n if (!text) return;\r\n\r\n if (navigator.clipboard && navigator.clipboard.writeText) {\r\n navigator.clipboard.writeText(text).then(\r\n function () {\r\n copyFeedback.classList.remove(\"hidden\");\r\n },\r\n function () {\r\n copyFeedback.textContent = \"Unable to copy automatically. Please select and copy manually.\";\r\n copyFeedback.classList.remove(\"hidden\");\r\n }\r\n );\r\n } else {\r\n const tempTextArea = document.createElement(\"textarea\");\r\n tempTextArea.value = text;\r\n document.body.appendChild(tempTextArea);\r\n tempTextArea.select();\r\n try {\r\n document.execCommand(\"copy\");\r\n copyFeedback.classList.remove(\"hidden\");\r\n } catch (err) {\r\n copyFeedback.textContent = \"Unable to copy automatically. Please select and copy manually.\";\r\n copyFeedback.classList.remove(\"hidden\");\r\n }\r\n document.body.removeChild(tempTextArea);\r\n }\r\n });\r\n })();\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>PSF Job Application & Exam Fee Payment PSF Recruitment Portal Job Application & Exam Fee Payment Apply for your desired position and confirm the mandatory exam fee payment via bKash before submitting your application to info@psf.org.bd. bK Exam Fee Payment Merchant Number (bKash Personal\/Agent) Pay to 01713-873732 bKash Merchant Available Positions & Exam Fees Select […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[],"class_list":["post-582","post","type-post","status-publish","format-standard","hentry","category-career"],"cmb2":{"blog_information":{"author_name":"CodeDokan.Com"}},"_links":{"self":[{"href":"https:\/\/psf.org.bd\/index.php?rest_route=\/wp\/v2\/posts\/582","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/psf.org.bd\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/psf.org.bd\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/psf.org.bd\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/psf.org.bd\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=582"}],"version-history":[{"count":13,"href":"https:\/\/psf.org.bd\/index.php?rest_route=\/wp\/v2\/posts\/582\/revisions"}],"predecessor-version":[{"id":600,"href":"https:\/\/psf.org.bd\/index.php?rest_route=\/wp\/v2\/posts\/582\/revisions\/600"}],"wp:attachment":[{"href":"https:\/\/psf.org.bd\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=582"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/psf.org.bd\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=582"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/psf.org.bd\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=582"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t

\n\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n \r\n PSF Job Application & Exam Fee Payment<\/title>\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" \/>\r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n <style>\r\n :root {\r\n color-scheme: dark;\r\n }\r\n body {\r\n min-height: 100vh;\r\n background:\r\n radial-gradient(circle at top left, rgba(129, 140, 248, 0.25), transparent 55%),\r\n radial-gradient(circle at top right, rgba(45, 212, 191, 0.16), transparent 55%),\r\n radial-gradient(circle at bottom, rgba(248, 250, 252, 0.04), transparent 55%),\r\n #020617;\r\n font-family: system-ui, -apple-system, BlinkMacSystemFont, \"SF Pro Text\", \"Segoe UI\", sans-serif;\r\n }\r\n .glass-card {\r\n background: linear-gradient(140deg, rgba(15, 23, 42, 0.96), rgba(15, 23, 42, 0.88));\r\n border-radius: 1.25rem;\r\n border: 1px solid rgba(148, 163, 184, 0.45);\r\n box-shadow:\r\n 0 18px 60px rgba(15, 23, 42, 0.95),\r\n 0 0 0 1px rgba(15, 23, 42, 0.9);\r\n backdrop-filter: blur(18px);\r\n }\r\n .input-shell {\r\n position: relative;\r\n }\r\n .input-shell input,\r\n .input-shell select,\r\n .input-shell textarea {\r\n border-radius: 0.9rem;\r\n background: rgba(15, 23, 42, 0.9);\r\n border: 1px solid rgba(51, 65, 85, 0.85);\r\n box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.85);\r\n transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, transform 0.1s ease;\r\n }\r\n .input-shell input:focus,\r\n .input-shell select:focus,\r\n .input-shell textarea:focus {\r\n outline: none;\r\n border-color: rgba(129, 140, 248, 0.9);\r\n box-shadow:\r\n 0 0 0 1px rgba(129, 140, 248, 0.9),\r\n 0 14px 35px rgba(30, 64, 175, 0.55);\r\n background: rgba(15, 23, 42, 0.98);\r\n transform: translateY(-1px);\r\n }\r\n .input-label {\r\n font-size: 0.76rem;\r\n letter-spacing: 0.04em;\r\n text-transform: uppercase;\r\n }\r\n .submit-button {\r\n position: relative;\r\n overflow: hidden;\r\n border-radius: 999px;\r\n background-image: linear-gradient(135deg, #4f46e5, #0ea5e9);\r\n box-shadow:\r\n 0 12px 35px rgba(37, 99, 235, 0.55),\r\n 0 0 0 1px rgba(191, 219, 254, 0.14);\r\n transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;\r\n }\r\n .submit-button::before {\r\n content: \"\";\r\n position: absolute;\r\n inset: 0;\r\n background: radial-gradient(circle at 0 0, rgba(255, 255, 255, 0.3), transparent 55%);\r\n opacity: 0;\r\n transition: opacity 0.2s ease;\r\n }\r\n .submit-button:hover::before {\r\n opacity: 1;\r\n }\r\n .submit-button:hover {\r\n transform: translateY(-1px);\r\n box-shadow:\r\n 0 18px 45px rgba(37, 99, 235, 0.7),\r\n 0 0 0 1px rgba(219, 234, 254, 0.25);\r\n filter: brightness(1.02);\r\n }\r\n .submit-button:active {\r\n transform: translateY(0);\r\n box-shadow:\r\n 0 8px 22px rgba(30, 64, 175, 0.8),\r\n 0 0 0 1px rgba(191, 219, 254, 0.25);\r\n }\r\n .badge-soft {\r\n border-radius: 999px;\r\n background: linear-gradient(120deg, rgba(30, 64, 175, 0.2), rgba(8, 47, 73, 0.3));\r\n border: 1px solid rgba(129, 140, 248, 0.5);\r\n box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.9);\r\n }\r\n .glow-pill {\r\n border-radius: 999px;\r\n background: radial-gradient(circle at top left, rgba(248, 250, 252, 0.12), transparent 55%), rgba(15, 23, 42, 0.88);\r\n border: 1px solid rgba(148, 163, 184, 0.8);\r\n box-shadow:\r\n 0 12px 30px rgba(15, 23, 42, 0.9),\r\n 0 0 0 1px rgba(15, 23, 42, 0.9);\r\n backdrop-filter: blur(14px);\r\n }\r\n .bkash-pill {\r\n background: linear-gradient(135deg, #ec4899, #f97316);\r\n box-shadow:\r\n 0 16px 40px rgba(236, 72, 153, 0.85),\r\n 0 0 0 1px rgba(248, 250, 252, 0.1);\r\n }\r\n .bkash-pill span {\r\n text-shadow: 0 10px 25px rgba(159, 18, 57, 0.8);\r\n }\r\n .floating-orbits {\r\n pointer-events: none;\r\n position: fixed;\r\n inset: 0;\r\n overflow: hidden;\r\n z-index: -1;\r\n opacity: 0.6;\r\n }\r\n .floating-orbits::before,\r\n .floating-orbits::after {\r\n content: \"\";\r\n position: absolute;\r\n border-radius: 999px;\r\n border: 1px solid rgba(148, 163, 184, 0.18);\r\n box-shadow:\r\n 0 0 80px rgba(129, 140, 248, 0.6),\r\n 0 0 180px rgba(56, 189, 248, 0.4);\r\n animation: floatOrbit 26s linear infinite;\r\n }\r\n .floating-orbits::before {\r\n width: 560px;\r\n height: 560px;\r\n top: -280px;\r\n right: -120px;\r\n }\r\n .floating-orbits::after {\r\n width: 460px;\r\n height: 460px;\r\n bottom: -260px;\r\n left: -80px;\r\n animation-duration: 38s;\r\n animation-direction: reverse;\r\n }\r\n @keyframes floatOrbit {\r\n 0% {\r\n transform: translate3d(0, 0, 0) rotate(0deg);\r\n }\r\n 50% {\r\n transform: translate3d(10px, 14px, 0) rotate(180deg);\r\n }\r\n 100% {\r\n transform: translate3d(0, 0, 0) rotate(360deg);\r\n }\r\n }\r\n .alert {\r\n border-radius: 0.9rem;\r\n border-width: 1px;\r\n }\r\n .alert-success {\r\n background: rgba(22, 163, 74, 0.12);\r\n border-color: rgba(34, 197, 94, 0.4);\r\n }\r\n .alert-error {\r\n background: rgba(220, 38, 38, 0.12);\r\n border-color: rgba(248, 113, 113, 0.5);\r\n }\r\n <\/style>\r\n<\/head>\r\n<body class=\"text-slate-100 antialiased\">\r\n <div class=\"floating-orbits\"><\/div>\r\n\r\n <main class=\"relative z-10 flex min-h-screen items-center justify-center px-4 py-10 sm:px-6 lg:px-10\">\r\n <div class=\"w-full max-w-5xl space-y-8\">\r\n <header class=\"flex flex-col gap-6 sm:flex-row sm:items-center sm:justify-between\">\r\n <div class=\"space-y-3\">\r\n <div class=\"inline-flex items-center gap-3 rounded-full border border-slate-700\/70 bg-slate-900\/70 px-3 py-1 text-[0.7rem] font-medium tracking-wide text-slate-300 shadow-md shadow-slate-950\/70 backdrop-blur\">\r\n <span class=\"inline-flex h-6 w-6 items-center justify-center rounded-full bg-gradient-to-br from-indigo-500 via-sky-500 to-cyan-400 text-[0.7rem] font-semibold text-slate-950 shadow-lg shadow-sky-500\/80\">PSF<\/span>\r\n <span class=\"uppercase tracking-[0.18em] text-slate-300\/95\">Recruitment Portal<\/span>\r\n <\/div>\r\n <div>\r\n <h1 class=\"text-3xl font-semibold tracking-tight text-slate-50 sm:text-4xl\">\r\n Job Application & Exam Fee Payment\r\n <\/h1>\r\n <p class=\"mt-2 max-w-2xl text-sm text-slate-300\/85 sm:text-base\">\r\n Apply for your desired position and confirm the mandatory exam fee payment via bKash before submitting your application to\r\n <span class=\"font-semibold text-indigo-300\">info@psf.org.bd<\/span>.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"glow-pill px-4 py-3 sm:px-5 sm:py-4\">\r\n <div class=\"flex flex-col gap-2\">\r\n <div class=\"inline-flex items-center gap-2\">\r\n <span class=\"inline-flex h-8 w-8 items-center justify-center rounded-full bkash-pill text-xs font-semibold uppercase tracking-[0.16em]\">\r\n <span class=\"text-slate-50\">bK<\/span>\r\n <\/span>\r\n <div class=\"flex flex-col text-xs\">\r\n <span class=\"font-semibold uppercase tracking-[0.18em] text-pink-300\/90\">Exam Fee Payment<\/span>\r\n <span class=\"text-[0.68rem] text-slate-300\/85\">Merchant Number (bKash Personal\/Agent)<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"mt-1 flex flex-col\">\r\n <span class=\"text-[0.72rem] font-medium uppercase tracking-[0.16em] text-slate-400\">Pay to<\/span>\r\n <div class=\"mt-1 inline-flex items-baseline gap-2\">\r\n <span class=\"text-xl font-semibold tracking-[0.08em] text-pink-300 sm:text-2xl\">01713-873732<\/span>\r\n <span class=\"rounded-full bg-slate-900\/70 px-2 py-0.5 text-[0.65rem] font-medium uppercase tracking-[0.16em] text-slate-300 shadow-sm shadow-slate-900\/90\">\r\n bKash Merchant\r\n <\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/header>\r\n\r\n <section class=\"glass-card px-5 py-5 sm:px-8 sm:py-7\">\r\n <div class=\"grid gap-6 md:grid-cols-[minmax(0,1.2fr)_minmax(0,1fr)]\">\r\n <div class=\"space-y-4 border-b border-slate-800\/70 pb-5 md:border-b-0 md:border-r md:pb-0 md:pr-6\">\r\n <h2 class=\"text-sm font-semibold uppercase tracking-[0.2em] text-slate-300\/90\">\r\n Available Positions & Exam Fees\r\n <\/h2>\r\n <p class=\"text-xs text-slate-300\/90 sm:text-sm\">\r\n Select one position only. The corresponding exam fee will be calculated automatically and must be paid via bKash before submitting the form.\r\n <\/p>\r\n <div class=\"mt-2 grid gap-3 text-xs sm:grid-cols-2 sm:text-sm\">\r\n <div class=\"rounded-xl border border-indigo-500\/40 bg-slate-900\/80 p-3 shadow-md shadow-slate-950\/80\">\r\n <div class=\"flex items-center justify-between gap-2\">\r\n <div>\r\n <p class=\"font-medium text-slate-50\">Branch Manager<\/p>\r\n <p class=\"mt-0.5 text-[0.74rem] text-slate-400\">Exam Fee<\/p>\r\n <\/div>\r\n <span class=\"badge-soft px-3 py-1 text-xs font-semibold text-indigo-200\">\r\n 200 BDT\r\n <\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"rounded-xl border border-sky-500\/40 bg-slate-900\/80 p-3 shadow-md shadow-slate-950\/80\">\r\n <div class=\"flex items-center justify-between gap-2\">\r\n <div>\r\n <p class=\"font-medium text-slate-50\">Program Officer (Grade 1)<\/p>\r\n <p class=\"mt-0.5 text-[0.74rem] text-slate-400\">Exam Fee<\/p>\r\n <\/div>\r\n <span class=\"badge-soft px-3 py-1 text-xs font-semibold text-sky-100\">\r\n 150 BDT\r\n <\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"rounded-xl border border-emerald-500\/40 bg-slate-900\/80 p-3 shadow-md shadow-slate-950\/80\">\r\n <div class=\"flex items-center justify-between gap-2\">\r\n <div>\r\n <p class=\"font-medium text-slate-50\">Program Officer (Grade 2)<\/p>\r\n <p class=\"mt-0.5 text-[0.74rem] text-slate-400\">Exam Fee<\/p>\r\n <\/div>\r\n <span class=\"badge-soft px-3 py-1 text-xs font-semibold text-emerald-100\">\r\n 100 BDT\r\n <\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"rounded-xl border border-cyan-500\/40 bg-slate-900\/80 p-3 shadow-md shadow-slate-950\/80\">\r\n <div class=\"flex items-center justify-between gap-2\">\r\n <div>\r\n <p class=\"font-medium text-slate-50\">Account Officer<\/p>\r\n <p class=\"mt-0.5 text-[0.74rem] text-slate-400\">Exam Fee<\/p>\r\n <\/div>\r\n <span class=\"badge-soft px-3 py-1 text-xs font-semibold text-cyan-100\">\r\n 100 BDT\r\n <\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"rounded-xl border border-fuchsia-500\/40 bg-slate-900\/80 p-3 shadow-md shadow-slate-950\/80 md:col-span-2\">\r\n <div class=\"flex items-center justify-between gap-2\">\r\n <div>\r\n <p class=\"font-medium text-slate-50\">Peon<\/p>\r\n <p class=\"mt-0.5 text-[0.74rem] text-slate-400\">Exam Fee<\/p>\r\n <\/div>\r\n <span class=\"badge-soft px-3 py-1 text-xs font-semibold text-fuchsia-100\">\r\n 50 BDT\r\n <\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"space-y-4 md:pl-3\">\r\n <h3 class=\"text-sm font-semibold uppercase tracking-[0.2em] text-slate-300\/90\">\r\n Payment Instructions\r\n <\/h3>\r\n <ol class=\"space-y-2 text-xs text-slate-300\/90 sm:text-sm\">\r\n <li class=\"flex items-start gap-2\">\r\n <span class=\"mt-[2px] inline-flex h-4 w-4 items-center justify-center rounded-full bg-slate-800 text-[0.65rem] font-semibold text-slate-200\">1<\/span>\r\n <span>Choose your desired job post in the application form below.<\/span>\r\n <\/li>\r\n <li class=\"flex items-start gap-2\">\r\n <span class=\"mt-[2px] inline-flex h-4 w-4 items-center justify-center rounded-full bg-slate-800 text-[0.65rem] font-semibold text-slate-200\">2<\/span>\r\n <span>Pay the exact exam fee via <span class=\"font-semibold text-pink-300\">bKash<\/span> to\r\n <span class=\"font-semibold text-slate-50\">01713-873732<\/span> (Merchant).<\/span>\r\n <\/li>\r\n <li class=\"flex items-start gap-2\">\r\n <span class=\"mt-[2px] inline-flex h-4 w-4 items-center justify-center rounded-full bg-slate-800 text-[0.65rem] font-semibold text-slate-200\">3<\/span>\r\n <span>After successful payment, note the <span class=\"font-semibold text-slate-50\">bKash Account Number<\/span>, <span class=\"font-semibold text-slate-50\">Transaction ID<\/span> and <span class=\"font-semibold text-slate-50\">Payment Date<\/span>.<\/span>\r\n <\/li>\r\n <li class=\"flex items-start gap-2\">\r\n <span class=\"mt-[2px] inline-flex h-4 w-4 items-center justify-center rounded-full bg-slate-800 text-[0.65rem] font-semibold text-slate-200\">4<\/span>\r\n <span>Fill in all required fields and submit. Your email client will open to send the full application to\r\n <span class=\"font-semibold text-indigo-300\">info@psf.org.bd<\/span>.<\/span>\r\n <\/li>\r\n <\/ol>\r\n <p class=\"mt-2 rounded-lg border border-amber-500\/50 bg-amber-500\/10 px-3 py-2 text-xs text-amber-100 shadow-sm shadow-amber-900\/60\">\r\n <span class=\"font-semibold uppercase tracking-[0.18em] text-amber-200\">Note:<\/span>\r\n Exam fee payment is <span class=\"font-semibold\">mandatory<\/span>. Incomplete or unpaid applications will not be accepted.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <section class=\"glass-card px-5 py-6 sm:px-8 sm:py-8\">\r\n <div class=\"flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between\">\r\n <div>\r\n <h2 class=\"text-lg font-semibold tracking-tight text-slate-50 sm:text-xl\">\r\n Application Form\r\n <\/h2>\r\n <p class=\"mt-1 text-xs text-slate-300\/90 sm:text-sm\">\r\n Please fill in all required (<span class=\"text-rose-400\">*<\/span>) fields carefully. Use English characters where possible.\r\n <\/p>\r\n <\/div>\r\n <div class=\"flex flex-wrap items-center gap-2\">\r\n <span class=\"badge-soft px-3 py-1 text-[0.7rem] font-semibold uppercase tracking-[0.18em] text-emerald-200\">\r\n Intake Open\r\n <\/span>\r\n <span class=\"rounded-full border border-slate-700\/80 bg-slate-900\/70 px-3 py-1 text-[0.7rem] font-medium text-slate-300\/95 shadow-sm shadow-slate-950\/80\">\r\n Submit via Email:\r\n <span class=\"text-indigo-300\">info@psf.org.bd<\/span>\r\n <\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <div id=\"formAlert\" class=\"alert mt-4 hidden px-4 py-3 text-xs sm:text-sm\">\r\n <p id=\"formAlertMessage\" class=\"font-medium\"><\/p>\r\n <\/div>\r\n\r\n <form id=\"applicationForm\" class=\"mt-6 space-y-8\" autocomplete=\"on\" novalidate>\r\n \r\n <div class=\"space-y-4\">\r\n <h3 class=\"text-xs font-semibold uppercase tracking-[0.2em] text-slate-300\/90\">\r\n Step 1 — Position & Basic Information\r\n <\/h3>\r\n <div class=\"grid gap-4 md:grid-cols-2\">\r\n <div class=\"input-shell\">\r\n <label for=\"jobPost\" class=\"input-label mb-1 block text-slate-300\">\r\n Job Post <span class=\"text-rose-400\">*<\/span>\r\n <\/label>\r\n <select id=\"jobPost\" name=\"Job Post\" required class=\"w-full border px-3 py-2.5 text-sm text-slate-100 placeholder-slate-500 focus:outline-none\">\r\n <option value=\"\" disabled selected>Select a position<\/option>\r\n <option value=\"Branch Manager\" data-fee=\"200\">Branch Manager — 200 BDT<\/option>\r\n <option value=\"Program Officer Grade 1\" data-fee=\"150\">Program Officer (Grade 1) — 150 BDT<\/option>\r\n <option value=\"Program Officer Grade 2\" data-fee=\"100\">Program Officer (Grade 2) — 100 BDT<\/option>\r\n <option value=\"Account Officer\" data-fee=\"100\">Account Officer — 100 BDT<\/option>\r\n <option value=\"Peon\" data-fee=\"50\">Peon — 50 BDT<\/option>\r\n <\/select>\r\n <\/div>\r\n <div class=\"input-shell\">\r\n <label for=\"fullName\" class=\"input-label mb-1 block text-slate-300\">\r\n Full Name <span class=\"text-rose-400\">*<\/span>\r\n <\/label>\r\n <input id=\"fullName\" name=\"Full Name\" type=\"text\" required placeholder=\"Enter your full name\" class=\"w-full border px-3 py-2.5 text-sm text-slate-100 placeholder-slate-500\" \/>\r\n <\/div>\r\n <div class=\"input-shell\">\r\n <label for=\"fatherName\" class=\"input-label mb-1 block text-slate-300\">\r\n Father's Name <span class=\"text-rose-400\">*<\/span>\r\n <\/label>\r\n <input id=\"fatherName\" name=\"Father's Name\" type=\"text\" required placeholder=\"Enter father's name\" class=\"w-full border px-3 py-2.5 text-sm text-slate-100 placeholder-slate-500\" \/>\r\n <\/div>\r\n <div class=\"input-shell\">\r\n <label for=\"motherName\" class=\"input-label mb-1 block text-slate-300\">\r\n Mother's Name <span class=\"text-rose-400\">*<\/span>\r\n <\/label>\r\n <input id=\"motherName\" name=\"Mother's Name\" type=\"text\" required placeholder=\"Enter mother's name\" class=\"w-full border px-3 py-2.5 text-sm text-slate-100 placeholder-slate-500\" \/>\r\n <\/div>\r\n <div class=\"input-shell\">\r\n <label for=\"dob\" class=\"input-label mb-1 block text-slate-300\">\r\n Date of Birth <span class=\"text-rose-400\">*<\/span>\r\n <\/label>\r\n <input id=\"dob\" name=\"Date of Birth\" type=\"date\" required class=\"w-full border px-3 py-2.5 text-sm text-slate-100 placeholder-slate-500\" \/>\r\n <\/div>\r\n <div class=\"input-shell\">\r\n <label for=\"gender\" class=\"input-label mb-1 block text-slate-300\">\r\n Gender <span class=\"text-rose-400\">*<\/span>\r\n <\/label>\r\n <select id=\"gender\" name=\"Gender\" required class=\"w-full border px-3 py-2.5 text-sm text-slate-100 placeholder-slate-500\">\r\n <option value=\"\" disabled selected>Select gender<\/option>\r\n <option value=\"Male\">Male<\/option>\r\n <option value=\"Female\">Female<\/option>\r\n <option value=\"Other\">Other<\/option>\r\n <\/select>\r\n <\/div>\r\n <div class=\"input-shell\">\r\n <label for=\"nid\" class=\"input-label mb-1 block text-slate-300\">\r\n National ID \/ Birth Registration No. <span class=\"text-rose-400\">*<\/span>\r\n <\/label>\r\n <input id=\"nid\" name=\"NID \/ Birth Registration\" type=\"text\" required placeholder=\"Enter NID or Birth Registration No.\" class=\"w-full border px-3 py-2.5 text-sm text-slate-100 placeholder-slate-500\" \/>\r\n <\/div>\r\n <div class=\"input-shell\">\r\n <label for=\"phone\" class=\"input-label mb-1 block text-slate-300\">\r\n Mobile Number <span class=\"text-rose-400\">*<\/span>\r\n <\/label>\r\n <input id=\"phone\" name=\"Mobile Number\" type=\"tel\" required pattern=\"01[0-9]{9}\" placeholder=\"01XXXXXXXXX\" class=\"w-full border px-3 py-2.5 text-sm text-slate-100 placeholder-slate-500\" \/>\r\n <p class=\"mt-1 text-[0.7rem] text-slate-400\">Format: 11-digit Bangladeshi number (e.g. 017XXXXXXXX).<\/p>\r\n <\/div>\r\n <div class=\"input-shell\">\r\n <label for=\"email\" class=\"input-label mb-1 block text-slate-300\">\r\n Email Address <span class=\"text-rose-400\">*<\/span>\r\n <\/label>\r\n <input id=\"email\" name=\"Email\" type=\"email\" required placeholder=\"example@mail.com\" class=\"w-full border px-3 py-2.5 text-sm text-slate-100 placeholder-slate-500\" \/>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"space-y-4\">\r\n <h3 class=\"text-xs font-semibold uppercase tracking-[0.2em] text-slate-300\/90\">\r\n Step 2 — Address & Education\r\n <\/h3>\r\n <div class=\"grid gap-4 md:grid-cols-2\">\r\n <div class=\"input-shell md:col-span-2\">\r\n <label for=\"presentAddress\" class=\"input-label mb-1 block text-slate-300\">\r\n Present Address <span class=\"text-rose-400\">*<\/span>\r\n <\/label>\r\n <textarea id=\"presentAddress\" name=\"Present Address\" rows=\"2\" required placeholder=\"House, Road, Area, Thana, District\" class=\"w-full resize-y border px-3 py-2.5 text-sm text-slate-100 placeholder-slate-500\"><\/textarea>\r\n <\/div>\r\n <div class=\"input-shell md:col-span-2\">\r\n <label for=\"permanentAddress\" class=\"input-label mb-1 block text-slate-300\">\r\n Permanent Address <span class=\"text-rose-400\">*<\/span>\r\n <\/label>\r\n <textarea id=\"permanentAddress\" name=\"Permanent Address\" rows=\"2\" required placeholder=\"Village\/Town, Post Office, Thana, District\" class=\"w-full resize-y border px-3 py-2.5 text-sm text-slate-100 placeholder-slate-500\"><\/textarea>\r\n <\/div>\r\n <div class=\"input-shell\">\r\n <label for=\"education\" class=\"input-label mb-1 block text-slate-300\">\r\n Highest Education Qualification <span class=\"text-rose-400\">*<\/span>\r\n <\/label>\r\n <input id=\"education\" name=\"Highest Education\" type=\"text\" required placeholder=\"e.g. BBA, MBA, HSC, SSC\" class=\"w-full border px-3 py-2.5 text-sm text-slate-100 placeholder-slate-500\" \/>\r\n <\/div>\r\n <div class=\"input-shell\">\r\n <label for=\"institution\" class=\"input-label mb-1 block text-slate-300\">\r\n Institution (University\/College\/School) <span class=\"text-rose-400\">*<\/span>\r\n <\/label>\r\n <input id=\"institution\" name=\"Institution\" type=\"text\" required placeholder=\"Name of institution\" class=\"w-full border px-3 py-2.5 text-sm text-slate-100 placeholder-slate-500\" \/>\r\n <\/div>\r\n <div class=\"input-shell\">\r\n <label for=\"passingYear\" class=\"input-label mb-1 block text-slate-300\">\r\n Passing Year <span class=\"text-rose-400\">*<\/span>\r\n <\/label>\r\n <input id=\"passingYear\" name=\"Passing Year\" type=\"number\" min=\"1980\" max=\"2099\" required placeholder=\"e.g. 2022\" class=\"w-full border px-3 py-2.5 text-sm text-slate-100 placeholder-slate-500\" \/>\r\n <\/div>\r\n <div class=\"input-shell\">\r\n <label for=\"result\" class=\"input-label mb-1 block text-slate-300\">\r\n Result (CGPA \/ Division) <span class=\"text-rose-400\">*<\/span>\r\n <\/label>\r\n <input id=\"result\" name=\"Result (CGPA\/Division)\" type=\"text\" required placeholder=\"e.g. 3.50 out of 4.00 \/ 1st Division\" class=\"w-full border px-3 py-2.5 text-sm text-slate-100 placeholder-slate-500\" \/>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"space-y-4\">\r\n <h3 class=\"text-xs font-semibold uppercase tracking-[0.2em] text-slate-300\/90\">\r\n Step 3 — Mandatory Exam Fee Payment (bKash)\r\n <\/h3>\r\n\r\n <div class=\"grid gap-4 md:grid-cols-3\">\r\n <div class=\"input-shell\">\r\n <label for=\"examFee\" class=\"input-label mb-1 block text-slate-300\">\r\n Exam Fee (Auto) <span class=\"text-rose-400\">*<\/span>\r\n <\/label>\r\n <div class=\"relative\">\r\n <input id=\"examFee\" name=\"Exam Fee (BDT)\" type=\"text\" readonly required placeholder=\"Select job post first\" class=\"w-full border px-3 py-2.5 pr-14 text-sm text-slate-100 placeholder-slate-500\" \/>\r\n <span class=\"pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3 text-[0.7rem] font-semibold uppercase tracking-[0.16em] text-slate-400\">\r\n BDT\r\n <\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"input-shell\">\r\n <label for=\"bkashNumber\" class=\"input-label mb-1 block text-slate-300\">\r\n Your bKash Account Number <span class=\"text-rose-400\">*<\/span>\r\n <\/label>\r\n <input id=\"bkashNumber\" name=\"bKash Account Number\" type=\"tel\" required pattern=\"01[0-9]{9}\" placeholder=\"01XXXXXXXXX (used to pay)\" class=\"w-full border px-3 py-2.5 text-sm text-slate-100 placeholder-slate-500\" \/>\r\n <\/div>\r\n <div class=\"input-shell\">\r\n <label for=\"transactionId\" class=\"input-label mb-1 block text-slate-300\">\r\n bKash Transaction ID <span class=\"text-rose-400\">*<\/span>\r\n <\/label>\r\n <input id=\"transactionId\" name=\"bKash Transaction ID\" type=\"text\" required placeholder=\"e.g. 9HG5X2ABCD\" class=\"w-full border px-3 py-2.5 text-sm text-slate-100 placeholder-slate-500 uppercase\" \/>\r\n <\/div>\r\n <div class=\"input-shell\">\r\n <label for=\"paymentDate\" class=\"input-label mb-1 block text-slate-300\">\r\n Payment Date <span class=\"text-rose-400\">*<\/span>\r\n <\/label>\r\n <input id=\"paymentDate\" name=\"Payment Date\" type=\"date\" required class=\"w-full border px-3 py-2.5 text-sm text-slate-100 placeholder-slate-500\" \/>\r\n <\/div>\r\n <div class=\"input-shell\">\r\n <label for=\"paidAmount\" class=\"input-label mb-1 block text-slate-300\">\r\n Paid Amount (BDT) <span class=\"text-rose-400\">*<\/span>\r\n <\/label>\r\n <div class=\"relative\">\r\n <input id=\"paidAmount\" name=\"Paid Amount (BDT)\" type=\"text\" readonly required placeholder=\"Will match exam fee\" class=\"w-full border px-3 py-2.5 pr-14 text-sm text-slate-100 placeholder-slate-500\" \/>\r\n <span class=\"pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3 text-[0.7rem] font-semibold uppercase tracking-[0.16em] text-slate-400\">\r\n BDT\r\n <\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"flex items-center md:items-start\">\r\n <label class=\"inline-flex items-start gap-2 text-xs text-slate-200\/90 sm:text-[0.8rem]\">\r\n <input id=\"confirmPayment\" name=\"Confirm Payment\" type=\"checkbox\" required class=\"mt-[2px] h-4 w-4 rounded border-slate-600 bg-slate-900 text-indigo-500 focus:ring-2 focus:ring-indigo-500\/70 focus:ring-offset-0\" \/>\r\n <span>\r\n I confirm that I have paid the correct exam fee via bKash to\r\n <span class=\"font-semibold text-pink-300\">01713-873732<\/span> and the information above is correct.\r\n <span class=\"text-rose-400\">*<\/span>\r\n <\/span>\r\n <\/label>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"space-y-5 border-t border-slate-800\/80 pt-5\">\r\n <div class=\"rounded-xl border border-slate-700\/80 bg-slate-900\/80 px-4 py-3 text-[0.7rem] text-slate-200\/95 shadow-sm shadow-slate-950\/80 sm:text-xs\">\r\n <p class=\"font-semibold uppercase tracking-[0.18em] text-slate-300\/95\">Applicant's Declaration<\/p>\r\n <p class=\"mt-1.5 leading-relaxed\">\r\n I declare that the information given above is true and correct to the best of my knowledge. I understand that providing false or incomplete information may result in cancellation of my application. I accept that the exam fee is non-refundable.\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between\">\r\n <p class=\"text-[0.72rem] text-slate-300\/85 sm:text-xs\">\r\n After clicking <span class=\"font-semibold text-indigo-200\">Submit Application<\/span>, your email client will open with all entered information. Please review and send the email to\r\n <span class=\"font-semibold text-indigo-300\">info@psf.org.bd<\/span>.\r\n <\/p>\r\n <button type=\"submit\" class=\"submit-button inline-flex items-center justify-center px-7 py-2.5 text-sm font-semibold tracking-wide text-slate-50\">\r\n <span class=\"mr-2 inline-flex h-5 w-5 items-center justify-center rounded-full bg-slate-900\/90 text-[0.65rem] font-bold\">\u2713<\/span>\r\n Submit Application\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/form>\r\n\r\n <div id=\"summaryContainer\" class=\"mt-6 hidden border-t border-slate-800\/80 pt-5\">\r\n <div class=\"flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between\">\r\n <div>\r\n <h3 class=\"text-sm font-semibold tracking-tight text-slate-50\">\r\n Application Summary (for your record)\r\n <\/h3>\r\n <p class=\"mt-1 text-[0.72rem] text-slate-300\/85 sm:text-xs\">\r\n If your email client did not open automatically, copy the details below and send manually to\r\n <span class=\"font-semibold text-indigo-300\">info@psf.org.bd<\/span>.\r\n <\/p>\r\n <\/div>\r\n <button id=\"copySummaryBtn\" type=\"button\" class=\"inline-flex items-center gap-2 rounded-full border border-slate-600\/80 bg-slate-900\/85 px-4 py-1.5 text-[0.7rem] font-medium text-slate-100 shadow-sm shadow-slate-950\/80 hover:border-indigo-400 hover:text-indigo-100 hover:shadow-indigo-800\/60\">\r\n <span class=\"inline-flex h-4 w-4 items-center justify-center rounded-full bg-slate-800 text-[0.6rem]\">\u29c9<\/span>\r\n Copy Details\r\n <\/button>\r\n <\/div>\r\n <pre id=\"applicationSummary\" class=\"mt-3 max-h-72 overflow-auto whitespace-pre-wrap rounded-lg border border-slate-800\/90 bg-slate-950\/70 px-4 py-3 text-[0.7rem] text-slate-100 shadow-inner shadow-slate-950\/80 sm:text-xs\"><\/pre>\r\n <p id=\"copyFeedback\" class=\"mt-2 hidden text-[0.7rem] text-emerald-300 sm:text-xs\">\r\n Application details copied to clipboard.\r\n <\/p>\r\n <\/div>\r\n <\/section>\r\n\r\n <footer class=\"pb-2 pt-1 text-center text-[0.7rem] text-slate-500 sm:text-xs\">\r\n <p>Powered by PSF Online Recruitment — All rights reserved.<\/p>\r\n <\/footer>\r\n <\/div>\r\n <\/main>\r\n\r\n <script>\r\n (function () {\r\n const form = document.getElementById(\"applicationForm\");\r\n const jobPostSelect = document.getElementById(\"jobPost\");\r\n const examFeeInput = document.getElementById(\"examFee\");\r\n const paidAmountInput = document.getElementById(\"paidAmount\");\r\n const formAlert = document.getElementById(\"formAlert\");\r\n const formAlertMessage = document.getElementById(\"formAlertMessage\");\r\n const summaryContainer = document.getElementById(\"summaryContainer\");\r\n const applicationSummary = document.getElementById(\"applicationSummary\");\r\n const copySummaryBtn = document.getElementById(\"copySummaryBtn\");\r\n const copyFeedback = document.getElementById(\"copyFeedback\");\r\n\r\n function showAlert(type, message) {\r\n formAlert.classList.remove(\"hidden\", \"alert-success\", \"alert-error\");\r\n formAlert.classList.add(type === \"success\" ? \"alert-success\" : \"alert-error\");\r\n formAlertMessage.textContent = message;\r\n }\r\n\r\n function clearAlert() {\r\n formAlert.classList.add(\"hidden\");\r\n formAlertMessage.textContent = \"\";\r\n }\r\n\r\n jobPostSelect.addEventListener(\"change\", function () {\r\n const selectedOption = jobPostSelect.options[jobPostSelect.selectedIndex];\r\n const fee = selectedOption.getAttribute(\"data-fee\");\r\n if (fee) {\r\n examFeeInput.value = fee;\r\n paidAmountInput.value = fee;\r\n } else {\r\n examFeeInput.value = \"\";\r\n paidAmountInput.value = \"\";\r\n }\r\n });\r\n\r\n form.addEventListener(\"submit\", function (e) {\r\n e.preventDefault();\r\n clearAlert();\r\n\r\n if (!form.checkValidity()) {\r\n form.reportValidity();\r\n showAlert(\"error\", \"Please fill in all required fields and check the confirmation box before submitting.\");\r\n return;\r\n }\r\n\r\n const jobPost = jobPostSelect.value;\r\n const jobPostLabel = jobPostSelect.options[jobPostSelect.selectedIndex]?.text || jobPost || \"Not specified\";\r\n const fullName = document.getElementById(\"fullName\").value.trim();\r\n\r\n const fields = [\r\n { label: \"Job Post\", id: \"jobPost\", value: jobPostLabel },\r\n { label: \"Full Name\", id: \"fullName\" },\r\n { label: \"Father's Name\", id: \"fatherName\" },\r\n { label: \"Mother's Name\", id: \"motherName\" },\r\n { label: \"Date of Birth\", id: \"dob\" },\r\n { label: \"Gender\", id: \"gender\" },\r\n { label: \"NID \/ Birth Registration\", id: \"nid\" },\r\n { label: \"Mobile Number\", id: \"phone\" },\r\n { label: \"Email\", id: \"email\" },\r\n { label: \"Present Address\", id: \"presentAddress\" },\r\n { label: \"Permanent Address\", id: \"permanentAddress\" },\r\n { label: \"Highest Education\", id: \"education\" },\r\n { label: \"Institution\", id: \"institution\" },\r\n { label: \"Passing Year\", id: \"passingYear\" },\r\n { label: \"Result (CGPA\/Division)\", id: \"result\" },\r\n { label: \"Exam Fee (BDT)\", id: \"examFee\" },\r\n { label: \"bKash Account Number\", id: \"bkashNumber\" },\r\n { label: \"bKash Transaction ID\", id: \"transactionId\" },\r\n { label: \"Payment Date\", id: \"paymentDate\" },\r\n { label: \"Paid Amount (BDT)\", id: \"paidAmount\" }\r\n ];\r\n\r\n const lines = [];\r\n lines.push(\"PSF Job Application\");\r\n lines.push(\"----------------------\");\r\n fields.forEach((field) => {\r\n let value;\r\n if (field.value) {\r\n value = field.value;\r\n } else {\r\n const el = document.getElementById(field.id);\r\n if (!el) return;\r\n if (el.tagName === \"SELECT\") {\r\n value = el.options[el.selectedIndex]?.text || el.value || \"\";\r\n } else {\r\n value = el.value || \"\";\r\n }\r\n }\r\n lines.push(field.label + \": \" + value);\r\n });\r\n\r\n lines.push(\"\");\r\n lines.push(\"Payment Confirmation:\");\r\n lines.push(\"I confirm that I have paid the mandatory exam fee via bKash to 01713-873732 and all information provided is true and correct.\");\r\n\r\n const bodyText = lines.join(\"\\n\");\r\n const subject = \"Job Application - \" + (jobPost || \"Position\") + \" - \" + (fullName || \"Applicant\");\r\n\r\n applicationSummary.textContent = bodyText;\r\n summaryContainer.classList.remove(\"hidden\");\r\n copyFeedback.classList.add(\"hidden\");\r\n\r\n const mailtoLink =\r\n \"mailto:info@psf.org.bd?subject=\" +\r\n encodeURIComponent(subject) +\r\n \"&body=\" +\r\n encodeURIComponent(bodyText);\r\n\r\n showAlert(\r\n \"success\",\r\n \"Application details prepared. Your email client will open now. Please review and send the email to info@psf.org.bd.\"\r\n );\r\n\r\n window.location.href = mailtoLink;\r\n });\r\n\r\n copySummaryBtn.addEventListener(\"click\", function () {\r\n const text = applicationSummary.textContent || \"\";\r\n if (!text) return;\r\n\r\n if (navigator.clipboard && navigator.clipboard.writeText) {\r\n navigator.clipboard.writeText(text).then(\r\n function () {\r\n copyFeedback.classList.remove(\"hidden\");\r\n },\r\n function () {\r\n copyFeedback.textContent = \"Unable to copy automatically. Please select and copy manually.\";\r\n copyFeedback.classList.remove(\"hidden\");\r\n }\r\n );\r\n } else {\r\n const tempTextArea = document.createElement(\"textarea\");\r\n tempTextArea.value = text;\r\n document.body.appendChild(tempTextArea);\r\n tempTextArea.select();\r\n try {\r\n document.execCommand(\"copy\");\r\n copyFeedback.classList.remove(\"hidden\");\r\n } catch (err) {\r\n copyFeedback.textContent = \"Unable to copy automatically. Please select and copy manually.\";\r\n copyFeedback.classList.remove(\"hidden\");\r\n }\r\n document.body.removeChild(tempTextArea);\r\n }\r\n });\r\n })();\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>PSF Job Application & Exam Fee Payment PSF Recruitment Portal Job Application & Exam Fee Payment Apply for your desired position and confirm the mandatory exam fee payment via bKash before submitting your application to info@psf.org.bd. bK Exam Fee Payment Merchant Number (bKash Personal\/Agent) Pay to 01713-873732 bKash Merchant Available Positions & Exam Fees Select […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[],"class_list":["post-582","post","type-post","status-publish","format-standard","hentry","category-career"],"cmb2":{"blog_information":{"author_name":"CodeDokan.Com"}},"_links":{"self":[{"href":"https:\/\/psf.org.bd\/index.php?rest_route=\/wp\/v2\/posts\/582","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/psf.org.bd\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/psf.org.bd\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/psf.org.bd\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/psf.org.bd\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=582"}],"version-history":[{"count":13,"href":"https:\/\/psf.org.bd\/index.php?rest_route=\/wp\/v2\/posts\/582\/revisions"}],"predecessor-version":[{"id":600,"href":"https:\/\/psf.org.bd\/index.php?rest_route=\/wp\/v2\/posts\/582\/revisions\/600"}],"wp:attachment":[{"href":"https:\/\/psf.org.bd\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=582"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/psf.org.bd\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=582"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/psf.org.bd\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=582"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}