প্রতিনিধি নিবন্ধন ফর্ম — দৈনিক নাগরিক ভাবনা
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }:root {
--red: #C0392B;
--red-dk: #962d22;
--red-lt: #fdf1f0;
--ink: #1a1a1a;
--muted: #555;
--border: #d8d2cc;
--bg: #f9f6f2;
--white: #ffffff;
--green: #27ae60;
--blue: #2980b9;
--wa: #25D366;
--yt: #FF0000;
--fb: #1877F2;
}body {
font-family: 'Hind Siliguri', sans-serif;
background: var(--bg);
color: var(--ink);
min-height: 100vh;
padding: 0 0 60px;
}/* ── HEADER ── */
.site-header {
background: var(--red);
color: #fff;
text-align: center;
padding: 28px 20px 22px;
border-bottom: 4px solid var(--red-dk);
}
.site-header .logo-text {
font-family: 'Noto Serif Bengali', serif;
font-size: clamp(1.5rem, 4vw, 2.4rem);
font-weight: 700;
letter-spacing: .02em;
line-height: 1.2;
}
.site-header .tagline {
margin-top: 6px;
font-size: .92rem;
opacity: .85;
letter-spacing: .04em;
}/* ── BANNER ── */
.form-banner {
background: linear-gradient(135deg, var(--red-dk) 0%, var(--red) 100%);
color: #fff;
text-align: center;
padding: 30px 20px;
}
.form-banner h1 {
font-family: 'Noto Serif Bengali', serif;
font-size: clamp(1.25rem, 3.5vw, 1.9rem);
font-weight: 700;
margin-bottom: 8px;
}
.form-banner p {
font-size: .95rem;
opacity: .88;
max-width: 560px;
margin: 0 auto;
line-height: 1.7;
}/* ── WRAPPER ── */
.wrapper {
max-width: 780px;
margin: 0 auto;
padding: 0 16px;
}/* ── PROGRESS BAR ── */
.progress-wrap {
background: var(--white);
border-bottom: 1px solid var(--border);
padding: 14px 20px;
position: sticky;
top: 0;
z-index: 50;
}
.progress-bar-outer {
background: #e8e0d8;
border-radius: 999px;
height: 6px;
overflow: hidden;
margin-bottom: 6px;
}
.progress-bar-inner {
height: 100%;
border-radius: 999px;
background: var(--red);
transition: width .4s ease;
width: 0%;
}
.progress-label {
font-size: .8rem;
color: var(--muted);
text-align: right;
}/* ── STEPS ── */
.step { display: none; }
.step.active { display: block; }/* ── SECTION CARD ── */
.card {
background: var(--white);
border: 1px solid var(--border);
border-radius: 10px;
margin-top: 24px;
overflow: hidden;
}
.card-head {
background: var(--red);
color: #fff;
padding: 14px 22px;
display: flex;
align-items: center;
gap: 10px;
}
.card-head .step-num {
background: rgba(255,255,255,.22);
border-radius: 50%;
width: 32px; height: 32px;
display: flex; align-items: center; justify-content: center;
font-weight: 700; font-size: .95rem;
flex-shrink: 0;
}
.card-head h2 {
font-size: 1.05rem;
font-weight: 600;
}
.card-body { padding: 22px; }/* ── FORM FIELDS ── */
.field-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }.field { margin-bottom: 18px; }
.field:last-child { margin-bottom: 0; }label {
display: block;
font-size: .88rem;
font-weight: 600;
color: var(--ink);
margin-bottom: 6px;
}
label .req { color: var(--red); margin-left: 3px; }input[type="text"],
input[type="email"],
input[type="tel"],
input[type="date"],
select,
textarea {
width: 100%;
padding: 11px 14px;
border: 1.5px solid var(--border);
border-radius: 7px;
font-family: 'Hind Siliguri', sans-serif;
font-size: .95rem;
color: var(--ink);
background: #fff;
transition: border-color .2s, box-shadow .2s;
outline: none;
}
input:focus, select:focus, textarea:focus {
border-color: var(--red);
box-shadow: 0 0 0 3px rgba(192,57,43,.12);
}
input.error, select.error, textarea.error {
border-color: #e74c3c;
background: #fff8f7;
}
.err-msg {
font-size: .78rem;
color: #e74c3c;
margin-top: 4px;
display: none;
}
.err-msg.show { display: block; }textarea { resize: vertical; min-height: 80px; }/* ── PHOTO UPLOAD ── */
.photo-upload-box {
border: 2px dashed var(--border);
border-radius: 10px;
padding: 24px;
text-align: center;
cursor: pointer;
transition: border-color .2s, background .2s;
position: relative;
}
.photo-upload-box:hover { border-color: var(--red); background: var(--red-lt); }
.photo-upload-box input[type="file"] {
position: absolute; inset: 0; opacity: 0; cursor: pointer;
width: 100%; height: 100%;
}
.photo-preview {
width: 90px; height: 110px;
border-radius: 6px;
object-fit: cover;
border: 2px solid var(--border);
margin: 0 auto 10px;
display: none;
}
.photo-icon { font-size: 2.5rem; margin-bottom: 8px; }
.photo-upload-box p { font-size: .85rem; color: var(--muted); }/* ── SOCIAL CONNECT ── */
.social-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
@media (max-width: 520px) { .social-grid { grid-template-columns: 1fr; } }.social-card {
border: 1.5px solid var(--border);
border-radius: 10px;
padding: 16px 14px;
text-align: center;
background: #fff;
transition: transform .15s, box-shadow .15s;
}
.social-card:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(0,0,0,.08); }.social-card .soc-icon {
width: 48px; height: 48px;
border-radius: 50%;
margin: 0 auto 10px;
display: flex; align-items: center; justify-content: center;
font-size: 1.4rem;
}
.soc-fb { background: #e8f0fe; color: var(--fb); }
.soc-yt { background: #fde8e8; color: var(--yt); }
.soc-wa { background: #e8f8ee; color: var(--wa); }
.soc-tw { background: #e8f4fd; color: #1da1f2; }.social-card h3 { font-size: .92rem; font-weight: 700; margin-bottom: 4px; }
.social-card p { font-size: .78rem; color: var(--muted); margin-bottom: 12px; line-height: 1.5; }.btn-social {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 16px;
border-radius: 20px;
border: none;
font-family: 'Hind Siliguri', sans-serif;
font-size: .83rem;
font-weight: 600;
cursor: pointer;
transition: opacity .15s, transform .1s;
text-decoration: none;
}
.btn-social:hover { opacity: .88; transform: scale(1.03); }
.btn-social:active { transform: scale(.97); }.btn-fb { background: var(--fb); color: #fff; }
.btn-yt { background: var(--yt); color: #fff; }
.btn-wa { background: var(--wa); color: #fff; }
.btn-tw { background: #1da1f2; color: #fff; }.social-done-badge {
display: none;
align-items: center;
gap: 5px;
font-size: .78rem;
color: var(--green);
font-weight: 600;
margin-top: 6px;
justify-content: center;
}
.social-done-badge.show { display: flex; }.checkbox-row {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: .85rem;
color: var(--muted);
line-height: 1.5;
margin-top: 8px;
}
.checkbox-row input[type="checkbox"] {
width: 18px; height: 18px;
flex-shrink: 0;
margin-top: 2px;
accent-color: var(--red);
}/* ── NAV BUTTONS ── */
.nav-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 28px;
gap: 12px;
}
.btn {
padding: 12px 28px;
border-radius: 7px;
border: none;
font-family: 'Hind Siliguri', sans-serif;
font-size: 1rem;
font-weight: 700;
cursor: pointer;
transition: background .2s, transform .1s;
}
.btn:active { transform: scale(.97); }
.btn-prev {
background: #eee;
color: var(--ink);
}
.btn-prev:hover { background: #ddd; }
.btn-next {
background: var(--red);
color: #fff;
}
.btn-next:hover { background: var(--red-dk); }
.btn-submit {
background: var(--green);
color: #fff;
}
.btn-submit:hover { background: #219150; }/* ── ID CARD PREVIEW ── */
#id-card-wrap { display: none; margin-top: 24px; }.id-card {
background: linear-gradient(135deg, #fff 0%, var(--red-lt) 100%);
border: 2px solid var(--red);
border-radius: 14px;
max-width: 420px;
margin: 0 auto;
overflow: hidden;
box-shadow: 0 8px 28px rgba(192,57,43,.18);
}
.id-card-top {
background: var(--red);
color: #fff;
padding: 14px 20px;
display: flex;
align-items: center;
gap: 12px;
}
.id-card-top .org { font-family: 'Noto Serif Bengali', serif; font-weight: 700; font-size: 1.1rem; }
.id-card-top .sub { font-size: .78rem; opacity: .85; }.id-card-body {
padding: 20px;
display: flex;
gap: 16px;
align-items: flex-start;
}
.id-photo {
width: 85px; height: 100px;
border-radius: 7px;
object-fit: cover;
border: 2px solid var(--red);
flex-shrink: 0;
background: #f0e8e6;
display: flex; align-items: center; justify-content: center;
color: var(--muted); font-size: .75rem; text-align: center;
overflow: hidden;
}
.id-photo img { width: 100%; height: 100%; object-fit: cover; }.id-info { flex: 1; }
.id-name {
font-family: 'Noto Serif Bengali', serif;
font-size: 1.15rem;
font-weight: 700;
color: var(--red-dk);
margin-bottom: 4px;
}
.id-role {
background: var(--red);
color: #fff;
display: inline-block;
padding: 2px 10px;
border-radius: 20px;
font-size: .76rem;
font-weight: 600;
margin-bottom: 10px;
}
.id-row {
display: flex;
gap: 6px;
font-size: .82rem;
margin-bottom: 5px;
color: var(--ink);
}
.id-row .lbl { color: var(--muted); min-width: 70px; }.id-card-foot {
background: var(--red-lt);
border-top: 1px dashed var(--border);
padding: 10px 20px;
text-align: center;
font-size: .75rem;
color: var(--muted);
}
.id-card-foot strong { color: var(--red); }/* ── SUCCESS ── */
#success-screen { display: none; text-align: center; padding: 50px 20px; }
#success-screen .success-icon { font-size: 4rem; margin-bottom: 16px; }
#success-screen h2 { font-family: 'Noto Serif Bengali', serif; font-size: 1.6rem; color: var(--green); margin-bottom: 10px; }
#success-screen p { color: var(--muted); font-size: .95rem; line-height: 1.7; max-width: 480px; margin: 0 auto; }/* ── PRINT ── */
@media print {
.progress-wrap, .nav-row, .form-banner, .site-header, .social-grid, .btn { display: none !important; }
.id-card { box-shadow: none; border: 2px solid #c0392b; }
}
জাতীয় পরিচয়পত্র অনুযায়ী পুরো নাম (বাংলায়)* নাম লিখুন
(ইংরেজিতে)* ইংরেজিতে নাম লিখুন
পিতা / স্বামী’র নাম * পিতার নাম লিখুন
মাতার নাম
জন্ম তারিখ* জন্ম তারিখ দিন
জাতীয় পরিচয় পত্র নং
মোবাইল নম্বর (১১ ডিজিট) * সঠিক মোবাইল নম্বর দিন
ই-মেইল ঠিকানা
স্থায়ী ঠিকানা* ঠিকানা লিখুন
পাসপোর্ট সাইজ ছবি *
📷
ছবি আপলোড করতে ক্লিক করুন(JPG/PNG, সর্বোচ্চ ২ MB)
ছবি আপলোড করুন
২
পেশাগত ও কর্মক্ষেত্রের তথ্য
প্রতিনিধির ধরন*
— নির্বাচন করুন —
বিভাগীয় প্রতিনিধি
জেলা প্রতিনিধি
উপজেলা প্রতিনিধি
বিশেষ প্রতিনিধি
ফটো সাংবাদিক / মাল্টিমিডিয়া প্রতিনিধি
ক্যাম্পাস / বিশ্ববিদ্যালয় প্রতিনিধি
ধরন নির্বাচন করুন
প্রতিনিধি প্রকার
— নির্বাচন করুন —
নতুন প্রতিনিধি
পুরাতন প্রতিনিধি (নবায়ন)
কার্যক্ষেত্র / কর্ম স্তল / বিটের নাম
যোগদানের তারিখ
শিক্ষাগত যোগ্যতা
পূর্ববর্তী কাজের অভিজ্ঞতা
জরুরি যোগাযোগ (রক্তের সম্পর্ক রয়েছে এমন অন্য ব্যক্তি)
আমি দৈনিক নাগরিক ভাবনা’র প্রতিনিধি তথ্য নিবন্ধন ফর্মে প্রদেয় সকল তথ্য সঠিক বলে ঘোষণা করছি এবং দৈনিক নাগরিক ভাবনা’র নির্দেশনা মোতাবেক সকল নীতিমালা মেনে চলতে সম্মত হয়েছি ও প্রতি মাসের ১ম সপ্তাহের মধ্যে নির্ধারিত মাসিক বিল নিয়মিত প্রদান করিবো বলে অঙ্গীকার করিতেছি।
শর্তে সম্মত হন
← পূর্ববর্তী
পরবর্তী ধাপ →
৩
সোশ্যাল মিডিয়া ও গ্রুপে যুক্ত হউন
নিচের প্ল্যাটফর্মগুলোতে লাইক / ফলো / সাবস্ক্রাইব করুন এবং গ্রুপে যুক্ত হোন — সকল নির্দেশনা ও আপডেট পাবেন।
📘
ফেসবুক পেজ আমাদের অফিসিয়াল পেজ লাইক ও ফলো দিয়ে সাথেই থাকুন, নিয়মিত আপডেট পান
👍 লাইক করুন ✅ সম্পন্ন হয়েছে
👥
ফেসবুক গ্রুপ প্রতিনিধিদের অফিসিয়াল গ্রুপে যুক্ত হোন
➕ গ্রুপে যোগ দিন ✅ সম্পন্ন হয়েছে
💬
WhatsApp গ্রুপ জরুরি নির্দেশনা ও ব্রেকিং নিউজ পেতে যুক্ত হোন
📲 যুক্ত হোন ✅ সম্পন্ন হয়েছে
⚠️ লিংকগুলো নতুন ট্যাবে খুলবে — যুক্ত হওয়ার পর এই পেজে ফিরে আসুন
🪪 আপনার পরিচয় পত্রের প্রিভিউ দৈনিক নাগরিক ভাবনা
প্রতিনিধি পরিচয় পত্র
ছবি
—
—
জেলা: —
পিতা: —
মোবাইল: —
রক্তের গ্রুপ : —
আইডি নং: —
🖨️ পরিচয় পত্র প্রিন্ট করুন
← পূর্ববর্তী
✅ চূড়ান্ত জমা দিন
🎉
নিবন্ধন সম্পন্ন হয়েছে!
আপনার তথ্য সফলভাবে জমা হয়েছে। অফিস থেকে যাচাই সম্পন্ন হলে আপনার মোবাইলে
নিশ্চিতকরণ বার্তা পাঠানো হবে।
নতুন নিবন্ধন করুন
/* ── STATE ── */
let currentStep = 1;
const totalSteps = 3;/* ── PROGRESS ── */
function updateProgress(step) {
const pct = ((step - 1) / (totalSteps - 1)) * 100;
document.getElementById('progress-bar').style.width = pct + '%';
document.getElementById('progress-label').textContent = 'ধাপ ' + toBanglaNum(step) + ' / ' + toBanglaNum(totalSteps);
}function toBanglaNum(n) {
return String(n).split('').map(d => '০১২৩৪৫৬৭৮৯'[d] ?? d).join('');
}/* ── NAVIGATION ── */
function goStep(target) {
if (target > currentStep && !validateStep(currentStep)) return;document.getElementById('step-' + currentStep).classList.remove('active');
if (target v.length > 1);
check('name_en', v => v.length > 1);
check('father', v => v.length > 1);
check('dob', v => v !== '');
check('phone', v => /^01[3-9]\d{8}$/.test(v));
check('address', v => v.length > 4);
check('district', v => v.length > 1);
check('upazila', v => v.length > 1);const photoErr = document.getElementById('err-photo');
const photoInput = document.getElementById('photo-input');
if (!photoInput.files.length) {
photoErr.classList.add('show'); ok = false;
} else {
photoErr.classList.remove('show');
}
}if (step === 2) {
check('rep_type', v => v !== '');
const terms = document.getElementById('agree_terms');
const termsErr = document.getElementById('err-terms');
if (!terms.checked) {
termsErr.classList.add('show'); ok = false;
} else {
termsErr.classList.remove('show');
}
}return ok;
}/* ── PHOTO PREVIEW ── */
function previewPhoto(input) {
if (!input.files.length) return;
const reader = new FileReader();
reader.onload = e => {
const img = document.getElementById('photo-preview-img');
img.src = e.target.result;
img.style.display = 'block';
document.getElementById('photo-icon').style.display = 'none';
document.getElementById('photo-text').textContent = '✅ ছবি আপলোড হয়েছে';
};
reader.readAsDataURL(input.files[0]);
}/* ── SOCIAL DONE ── */
function markDone(key) {
setTimeout(() => {
document.getElementById('done-' + key).classList.add('show');
}, 1200);
}/* ── BUILD ID CARD ── */
function buildIDCard() {
const get = id => (document.getElementById(id)?.value || '').trim();document.getElementById('card-name').textContent = get('name_bn') || '—';
document.getElementById('card-father').textContent = get('father') || '—';
document.getElementById('card-role').textContent = get('rep_type') || '—';
document.getElementById('card-district').textContent = get('district') || '—';
document.getElementById('card-upazila').textContent = get('upazila') || '—';
document.getElementById('card-phone').textContent = get('phone') || '—';
document.getElementById('card-year').textContent = new Date().getFullYear() + ' – ' + (new Date().getFullYear() + 1);// photo
const imgEl = document.getElementById('photo-preview-img');
const photoBox = document.getElementById('card-photo');
if (imgEl && imgEl.src && imgEl.src !== window.location.href) {
photoBox.innerHTML = '
';
}document.getElementById('id-card-wrap').style.display = 'block';
}/* ── PRINT ── */
function printCard() { window.print(); }/* ── SUBMIT ── */
function submitForm() {
if (!validateStep(3)) return;// Collect all data
const data = {};
['name_bn','name_en','father','mother','dob','nid','phone','email',
'address','district','upazila','rep_type','rep_status','beat',
'joining_date','education','experience','emergency'].forEach(id => {
const el = document.getElementById(id);
if (el) data[id] = el.value.trim();
});// Log to console (replace with your API / webhook / Google Apps Script endpoint)
console.log('Form Data:', JSON.stringify(data, null, 2));// Show success
document.getElementById('step-3').style.display = 'none';
document.querySelector('.progress-wrap').style.display = 'none';
document.getElementById('success-screen').style.display = 'block';
window.scrollTo({ top: 0, behavior: 'smooth' });
}/* ── INIT ── */
updateProgress(1);
';
}document.getElementById('id-card-wrap').style.display = 'block';
}/* ── PRINT ── */
function printCard() { window.print(); }/* ── SUBMIT ── */
function submitForm() {
if (!validateStep(3)) return;// Collect all data
const data = {};
['name_bn','name_en','father','mother','dob','nid','phone','email',
'address','district','upazila','rep_type','rep_status','beat',
'joining_date','education','experience','emergency'].forEach(id => {
const el = document.getElementById(id);
if (el) data[id] = el.value.trim();
});// Log to console (replace with your API / webhook / Google Apps Script endpoint)
console.log('Form Data:', JSON.stringify(data, null, 2));// Show success
document.getElementById('step-3').style.display = 'none';
document.querySelector('.progress-wrap').style.display = 'none';
document.getElementById('success-screen').style.display = 'block';
window.scrollTo({ top: 0, behavior: 'smooth' });
}/* ── INIT ── */
updateProgress(1);