title	তাসবিহ কাউন্টার (HTML + Tailwind + JavaScript): অফলাইন, প্রাইভেট, সুন্দর UI
description	কোনও ব্যাকএন্ড ছাড়া ব্রাউজারেই কাজ করে এমন তাসবিহ কাউন্টার। লোকালস্টোরেজে সেভ, ডার্ক মোড, টার্গেট 33/99/কাস্টম, সাউন্ড ও রাউন্ড ট্র্যাকার—সব এক পেজে।
slug	tasbeeh-counter-html-tailwind-javascript
date	2025-11-12
author	Your Name
tags	Tasbeeh Counter HTML Tailwind CSS JavaScript LocalStorage GitHub Pages Bangla
language	bn-BD

তাসবিহ কাউন্টার – অফলাইন ও প্রাইভেট জিকির কাউন্টার (কোনও ব্যাকএন্ড ছাড়াই)

এই আর্টিকেলে দেখাবো কীভাবে মাত্র একটি index.html ফাইল দিয়ে তৈরি করা যায় একটি সুন্দর, দ্রুত এবং ব্যাকএন্ড-ছাড়া (serverless) তাসবিহ কাউন্টার। এটি আপনার ব্রাউজারেই লোকালস্টোরেজে ডাটা সেভ রাখে—অফলাইন ও সম্পূর্ণ প্রাইভেট।

✅ সম্পূর্ণ রেডি কোড আমি দিয়ে রেখেছি—এই ব্লগের শেষে ডিপ্লয় ধাপ আছে।
💡 সম্পূর্ণ ফাইলটি ক্যানভাসে সংরক্ষিত আছে: index.html কপি করে নিলেই লাইভ করতে পারবেন।

---

মূল ফিচারসমূহ

• সুপার ফাস্ট, এক-পেইজ অ্যাপ – HTML + Tailwind CSS + JavaScript (CDN)
• প্রাইভেসি-ফার্স্ট – সব ডেটা আপনার ব্রাউজারেই (LocalStorage)
• বড় গোল বোতাম – স্পর্শে আরামদায়ক, মোবাইল-ফ্রেন্ডলি UI
• ডার্ক মোড সাপোর্ট – সিস্টেম থিম অনুযায়ী অটো অ্যাডজাস্ট
• টার্গেট সিলেক্টর – 33, 99, বা Custom; প্রোগ্রেস বারসহ
• রাউন্ড ট্র্যাকার – টার্গেট পূরণ হলেই রাউন্ড +1
• সাউন্ড টগল – ক্লিক টোন ও টার্গেট পূর্ণ হলে বিশেষ টোন
• কীবোর্ড শর্টকাট – Space = গণা, R = রিসেট, Enter = গণা
• রিসেট কনফার্মেশন – ভুলে ডিলিট হওয়া থেকে সুরক্ষা
• ফ্যাভিকন – ইনলাইন SVG, আলাদা অ্যাসেট লাগবে না

---

UI/UX ডিজাইন হাইলাইট

• কম ঘর্ষণ (Low Friction): বড় CTA বোতাম, এক স্ক্রিনেই সব কাজ।
• ভিজ্যুয়াল ফিডব্যাক: কাউন্টে মাইক্রো-পালস, প্রোগ্রেস বার, টোস্ট।
• অ্যাক্সেসিবিলিটি: aria-* অ্যাট্রিবিউট, কীবোর্ড সাপোর্ট, যথার্থ কনট্রাস্ট।
• হ্যাপটিক ও সাউন্ড: মোবাইলে ভাইব্রেশন, হালকা অডিও বিহেভিওর (টগলযোগ্য)।

---

কীভাবে কাজ করে (টেকনিক্যাল ওভারভিউ)

• LocalStorage Keys:
  tasbeeh-count-v1, tasbeeh-label-v1, tasbeeh-target-v1, tasbeeh-sound-v1, tasbeeh-rounds-v1

• ক্লিক/শর্টকাটে কাউন্ট বাড়ে → লোকালস্টোরেজে সেভ → কাউন্ট ডিসপ্লে আপডেট

• টার্গেট সেট করা থাকলে: count % target === 0 হলে রাউন্ড +1, টোস্ট, বিশেষ সাউন্ড/ভাইব্রেশন

• রিসেট করলে: কাউন্ট ও রাউন্ড 0 হয় (লেবেল/টার্গেট/সাউন্ড থাকে)

---

GitHub Pages-এ লাইভ করার ধাপ

1. নতুন রিপো বানান: যেমন tasbeeh-counter
2. ক্যানভাস থেকে আপনার index.html কপি করে রিপোতে যোগ করে Commit/Push করুন
3. Settings → Pages যান → Source: “Deploy from a branch”
   Branch: main • Folder: /root → Save
4. কিছুক্ষণের মধ্যেই উপরে লাইভ URL দেখাবে — সেটাই আপনার সাইট 🎉

🔐 কোনও সার্ভার/ডাটাবেস লাগবে না। GitHub Pages যথেষ্ট।

---

ব্যবহার নির্দেশনা

• যিকিরের নাম (ঐচ্ছিক) লিখে রাখুন — ব্রাউজারে সেভ থাকবে
• টার্গেট 33/99/Custom সেট করুন — প্রোগ্রেস ও রাউন্ড দেখাবে
• সাউন্ড অন/অফ করুন — ক্লিক ও সম্পূর্ণ হলে ভিন্ন টোন
• রিসেট: কনফার্মেশন ডায়ালগ আছে (লেবেল/টার্গেট/সাউন্ড রিসেট হয় না)

শর্টকাট:

• Space = গণা
• Enter = গণা
• R = রিসেট ডায়ালগ
• Esc = ডায়ালগ বন্ধ

---

সাধারণ সমস্যার সমাধান (FAQ)

Q: ইনকগনিটো/প্রাইভেট মোডে সেভ হয় না?
A: অনেক ব্রাউজার ইনকগনিটোতে LocalStorage সীমিত করে। নরম্যাল ট্যাবে ব্যবহার করুন।

Q: সাউন্ড কাজ করছে না কেন?
A: কিছু ডিভাইসে ইউজার ইন্টারঅ্যাকশন ছাড়া অডিও চালু হয় না। আগে বোতাম/পেইজে ক্লিক করে নিন, তারপর সাউন্ড অন করুন।

Q: ডিভাইস/ব্রাউজার বদলালে ডেটা হারায়?
A: হ্যাঁ। ডেটা আপনার ব্রাউজারেই থাকে। চাইলে PWA/Export ফিচার ভবিষ্যতে যোগ করা যাবে।

---

ভবিষ্যৎ উন্নয়ন আইডিয়া

• প্রিসেট সাইকেল: সুবহানাল্লাহ → আলহামদুলিল্লাহ → আল্লাহু আকবার অটো-সুইচ
• ৩৩×৩ মোড: তিন টার্গেটের মোট অগ্রগতি
• শেয়ার/এক্সপোর্ট: কাউন্ট JSON হিসেবে ডাউনলোড/শেয়ার
• PWA সাপোর্ট: “Add to Home Screen”, অফলাইন আইকন, স্প্ল্যাশ

---

লাইসেন্স ও ক্রেডিট

এই ডেমোটি শিক্ষামূলক/পার্সোনাল ব্যবহারের জন্য তৈরি। আপনার প্রয়োজনমতো কাস্টমাইজ করতে পারেন।
UI গাইডলাইন: মিনিমাল, মোবাইল-ফার্স্ট, হাই কনট্রাস্ট, মাইক্রো-ইন্টারঅ্যাকশন।

---

উপসংহার

একটি ফাইলেই ফুল-ফিচার্ড তাসবিহ কাউন্টার—অফলাইন, প্রাইভেট, এবং দারুণ স্মুথ।
ডিপ্লয় করা সহজ: GitHub Pages-এ index.html দিলেই লাইভ!

👉 পরের ধাপ: ক্যানভাস থেকে index.html কপি করুন, রিপোতে পুশ দিন, আর এই ব্লগের “ডিপ্লয় ধাপ” ফলো করুন।

কোনো কাস্টম ফিচার লাগলে (প্রিসেট সাইকেল, ৩৩×৩, PWA, শেয়ার বাটন)—বলুন, আমি কোডে যুক্ত করে দেবো।