Emergency Hotline UI

একটি ছোট Emergency Hotline UI / প্রজেক্ট। এই রেপোজিটরিতে একটি responsive ওয়েবপেজ আছে যেখানে জরুরি সার্ভিসগুলোর কার্ড দেখানো হয়, কল এবং কপি ফাংশনালিটি, কয়েন সিস্টেম এবং কল হিস্টোরি সংরক্ষণ করা আছে।

---

🔗 লাইভ লিংক

• Live Demo: https://engsanjid.github.io/Emergency-Hotline/
• রিপোজিটরি: https://github.com/engsanjid/Emergency-Hotline

---

🧰 Technology Stack

• HTML5
• CSS3 (Vanilla CSS / Tailwind CSS / DaisyUI — যে স্টাইল আপনি ব্যবহার করেছেন তা উল্লেখ করুন)
• JavaScript (Vanilla) — কোনো ফ্রেমওয়ার্ক ব্যবহার করা হয়নি

---

✨ Main Features

• Navbar: প্রজেক্ট লোগো, হার্ট কাউন্ট, কয়েন কাউন্ট (ডিফল্ট 100) ও কপি কাউন্ট দেখানো আছে।
• Hero Section: পুরো সেকশন গ্রেডিয়েন্ট ব্যাকগ্রাউন্ড, লোগো, টাইটেল এবং সলোগান।
• Card Grid: বড় কার্ড সেকশন (colspan=9) এবং History সেকশন (colspan=3) — figma লেআউট বেস করে।
• Emergency Hotline Card (কমপক্ষে 6টি): প্রতিটি কার্ডে আইকন/ইমেজ, নাম (বাংলা), নাম (English), ফোন নং, ক্যাটাগরি ব্যাজ, ডান কোণায় 💗 আইকন, এবং নিচে Copy ও Call বোতাম।
• Call বাটন ক্লিক করলে: অ্যালার্ট দেখানো হবে (সেবা নাম এবং নম্বর সহ), কয়েন কাটা হবে (প্রতি কল 20 কয়েন), এবং কল ইতিহাসে সার্ভিস নাম ও নম্বর যোগ হবে সাথে কলের টাইমস্ট্যাম্প। কয়েন কম থাকলে উপযুক্ত অ্যালার্ট দেখানো হবে।
• Copy বাটনে ক্লিক করলে: ফোন নম্বর ক্লিপবোর্ডে কপি হবে, কপি কাউন্ট বাড়বে এবং কপির জন্য একটি অ্যালার্ট দেখানো হবে।
• History Section: সাদা ব্যাকগ্রাউন্ড, History Title (আইকন সহ) এবং Clear History বাটন (টপ-রাইট)। ক্লিয়ার করলে ইতিহাস খালি হবে।
• Responsive: মোবাইল-ফ্রেন্ডলি লেআউট।

---

📸 Screenshot

---

🧩 Dependencies

• (যদি Tailwind/DaisyUI ব্যবহার করে থাকেন) TailwindCSS, DaisyUI
• অন্যথায়: কোনো external dependency নেই — সবকিছু Vanilla CSS + JS এ করা আছে।

---

🛠️ How to run locally (Local Machine)

1. রিপোজিটরি ক্লোন করুন:

git clone <your-repo-url>
cd <your-repo-folder>

2. যদি আপনি সরাসরি HTML ফাইল খুলে দেখতে চান:

• index.html ফাইল ব্রাউজারে খুলুন (double-click বা Open with Live Server ইত্যাদি)।

3. যদি আপনি Live Server ব্যবহার করেন (VSCode):

• index.html ওপেন করে Live Server চালান — লোকালি http://127.0.0.1:5500 বা অনুরূপ URL এ ভিজিট করুন।

4. Tailwind বা কোনো build step থাকলে (যদি ব্যবহার করে থাকেন):

# Tailwind ব্যবহার করলে (উদাহরণ)
npm install
npm run dev
# অথবা build কমান্ড চালান

---

🧪 Implementation Notes (Important JS snippets)

1) Call button logic (coins, alert, history)

// ধরে নিচ্ছি global state:
let coins = 100;
const COST_PER_CALL = 20;

function handleCall(serviceName, phoneNumber) {
  if (coins < COST_PER_CALL) {
    alert('কয়েন পর্যাপ্ত নেই। কল করার জন্য কমপক্ষে ' + COST_PER_CALL + ' কয়েন প্রয়োজন।');
    return;
  }

  coins -= COST_PER_CALL;
  updateNavbarCoins(coins);

  // দেখান অ্যালার্ট
  alert(`Calling ${serviceName} at ${phoneNumber}`);

  // সময় (লোকাল)
  const now = new Date();
  const timeString = now.toLocaleString(); // locale অনুযায়ী লোকাল সময়

  // ইতিহাসে যোগ করুন
  addToHistory({ name: serviceName, number: phoneNumber, time: timeString });
}

2) Copy to clipboard & increase copy count

let copyCount = 0;

function handleCopy(textToCopy) {
  navigator.clipboard.writeText(textToCopy).then(() => {
    copyCount += 1;
    updateNavbarCopyCount(copyCount);
    alert('Number copied to clipboard');
  }).catch(err => {
    alert('Copy failed: ' + err);
  });
}

3) Heart icon logic (increase heart count in navbar)

let heartCount = 0;
function toggleHeart(cardId) {
  heartCount += 1;
  updateNavbarHearts(heartCount);
}

4) Get current local time in JS

const now = new Date();
// human-readable local time
now.toLocaleString();
// or for formatted time only
now.toLocaleTimeString();

---

---

Author

Name: Md Sanjid Islam Email: mdsanjidi36@gmail.com