| title | তাসবিহ কাউন্টার (HTML + Tailwind + JavaScript): অফলাইন, প্রাইভেট, সুন্দর UI | |||||||
|---|---|---|---|---|---|---|---|---|
| description | কোনও ব্যাকএন্ড ছাড়া ব্রাউজারেই কাজ করে এমন তাসবিহ কাউন্টার। লোকালস্টোরেজে সেভ, ডার্ক মোড, টার্গেট 33/99/কাস্টম, সাউন্ড ও রাউন্ড ট্র্যাকার—সব এক পেজে। | |||||||
| slug | tasbeeh-counter-html-tailwind-javascript | |||||||
| date | 2025-11-12 | |||||||
| author | Your Name | |||||||
| tags |
|
|||||||
| language | bn-BD |
এই আর্টিকেলে দেখাবো কীভাবে মাত্র একটি index.html ফাইল দিয়ে তৈরি করা যায় একটি সুন্দর, দ্রুত এবং ব্যাকএন্ড-ছাড়া (serverless) তাসবিহ কাউন্টার। এটি আপনার ব্রাউজারেই লোকালস্টোরেজে ডাটা সেভ রাখে—অফলাইন ও সম্পূর্ণ প্রাইভেট।
✅ সম্পূর্ণ রেডি কোড আমি দিয়ে রেখেছি—এই ব্লগের শেষে ডিপ্লয় ধাপ আছে।
💡 সম্পূর্ণ ফাইলটি ক্যানভাসে সংরক্ষিত আছে:index.htmlকপি করে নিলেই লাইভ করতে পারবেন।
- সুপার ফাস্ট, এক-পেইজ অ্যাপ – HTML + Tailwind CSS + JavaScript (CDN)
- প্রাইভেসি-ফার্স্ট – সব ডেটা আপনার ব্রাউজারেই (LocalStorage)
- বড় গোল বোতাম – স্পর্শে আরামদায়ক, মোবাইল-ফ্রেন্ডলি UI
- ডার্ক মোড সাপোর্ট – সিস্টেম থিম অনুযায়ী অটো অ্যাডজাস্ট
- টার্গেট সিলেক্টর – 33, 99, বা Custom; প্রোগ্রেস বারসহ
- রাউন্ড ট্র্যাকার – টার্গেট পূরণ হলেই রাউন্ড +1
- সাউন্ড টগল – ক্লিক টোন ও টার্গেট পূর্ণ হলে বিশেষ টোন
- কীবোর্ড শর্টকাট –
Space= গণা,R= রিসেট,Enter= গণা - রিসেট কনফার্মেশন – ভুলে ডিলিট হওয়া থেকে সুরক্ষা
- ফ্যাভিকন – ইনলাইন SVG, আলাদা অ্যাসেট লাগবে না
- কম ঘর্ষণ (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 হয় (লেবেল/টার্গেট/সাউন্ড থাকে)
- নতুন রিপো বানান: যেমন
tasbeeh-counter - ক্যানভাস থেকে আপনার
index.htmlকপি করে রিপোতে যোগ করে Commit/Push করুন - Settings → Pages যান → Source: “Deploy from a branch”
Branch:main• Folder:/root→ Save - কিছুক্ষণের মধ্যেই উপরে লাইভ URL দেখাবে — সেটাই আপনার সাইট 🎉
🔐 কোনও সার্ভার/ডাটাবেস লাগবে না। GitHub Pages যথেষ্ট।
- যিকিরের নাম (ঐচ্ছিক) লিখে রাখুন — ব্রাউজারে সেভ থাকবে
- টার্গেট 33/99/Custom সেট করুন — প্রোগ্রেস ও রাউন্ড দেখাবে
- সাউন্ড অন/অফ করুন — ক্লিক ও সম্পূর্ণ হলে ভিন্ন টোন
- রিসেট: কনফার্মেশন ডায়ালগ আছে (লেবেল/টার্গেট/সাউন্ড রিসেট হয় না)
শর্টকাট:
Space= গণাEnter= গণাR= রিসেট ডায়ালগEsc= ডায়ালগ বন্ধ
Q: ইনকগনিটো/প্রাইভেট মোডে সেভ হয় না?
A: অনেক ব্রাউজার ইনকগনিটোতে LocalStorage সীমিত করে। নরম্যাল ট্যাবে ব্যবহার করুন।
Q: সাউন্ড কাজ করছে না কেন?
A: কিছু ডিভাইসে ইউজার ইন্টারঅ্যাকশন ছাড়া অডিও চালু হয় না। আগে বোতাম/পেইজে ক্লিক করে নিন, তারপর সাউন্ড অন করুন।
Q: ডিভাইস/ব্রাউজার বদলালে ডেটা হারায়?
A: হ্যাঁ। ডেটা আপনার ব্রাউজারেই থাকে। চাইলে PWA/Export ফিচার ভবিষ্যতে যোগ করা যাবে।
- প্রিসেট সাইকেল: সুবহানাল্লাহ → আলহামদুলিল্লাহ → আল্লাহু আকবার অটো-সুইচ
- ৩৩×৩ মোড: তিন টার্গেটের মোট অগ্রগতি
- শেয়ার/এক্সপোর্ট: কাউন্ট JSON হিসেবে ডাউনলোড/শেয়ার
- PWA সাপোর্ট: “Add to Home Screen”, অফলাইন আইকন, স্প্ল্যাশ
এই ডেমোটি শিক্ষামূলক/পার্সোনাল ব্যবহারের জন্য তৈরি। আপনার প্রয়োজনমতো কাস্টমাইজ করতে পারেন।
UI গাইডলাইন: মিনিমাল, মোবাইল-ফার্স্ট, হাই কনট্রাস্ট, মাইক্রো-ইন্টারঅ্যাকশন।
একটি ফাইলেই ফুল-ফিচার্ড তাসবিহ কাউন্টার—অফলাইন, প্রাইভেট, এবং দারুণ স্মুথ।
ডিপ্লয় করা সহজ: GitHub Pages-এ index.html দিলেই লাইভ!
👉 পরের ধাপ: ক্যানভাস থেকে index.html কপি করুন, রিপোতে পুশ দিন, আর এই ব্লগের “ডিপ্লয় ধাপ” ফলো করুন।
কোনো কাস্টম ফিচার লাগলে (প্রিসেট সাইকেল, ৩৩×৩, PWA, শেয়ার বাটন)—বলুন, আমি কোডে যুক্ত করে দেবো।