Live Preview
Tag didn’t load? Click here and let us know!Share this result
Previews are deleted daily. Get a permanent share link sent to your inbox:
Script
<!DOCTYPE html>
<html lang="bn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>চকরিয়া-পেকুয়া হাসপাতাল তথ্য</title>
<link href="https://fonts.googleapis.com/css2?family=Hind+Siliguri:wght@300;400;600;700&display=swap" rel="stylesheet">
<style>
:root {
--primary-color: #007bff;
--secondary-color: #28a745;
--bg-light: #f4f7f6;
--text-dark: #333;
--white: #ffffff;
}
body {
font-family: 'Hind Siliguri', sans-serif;
background-color: var(--bg-light);
margin: 0;
padding: 0;
color: var(--text-dark);
}
/* Hero Section */
.hero {
background: linear-gradient(rgba(0, 123, 255, 0.8), rgba(0, 123, 255, 0.8)),
url('https://images.unsplash.com/photo-1519494026892-80bbd2d6fd0d?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80');
background-size: cover;
background-position: center;
color: var(--white);
text-align: center;
padding: 80px 20px;
}
.hero h1 { font-size: 2.5rem; margin-bottom: 10px; }
.hero p { font-size: 1.2rem; margin-bottom: 30px; }
.btn-find {
background-color: var(--secondary-color);
color: white;
padding: 15px 30px;
border: none;
border-radius: 50px;
font-size: 1.1rem;
cursor: pointer;
transition: 0.3s;
text-decoration: none;
display: inline-block;
}
.btn-find:hover { background-color: #218838; transform: scale(1.05); }
/* Container */
.container { max-width: 1200px; margin: auto; padding: 40px 20px; }
.section-title { text-align: center; margin-bottom: 40px; font-size: 2rem; color: var(--primary-color); }
/* Doctor Cards Grid */
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 20px;
}
.doctor-card {
background: var(--white);
border-radius: 15px;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
padding: 20px;
text-align: center;
transition: 0.3s;
border-top: 5px solid var(--primary-color);
}
.doctor-card:hover { transform: translateY(-10px); }
.doctor-card img { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; margin-bottom: 15px; border: 3px solid #eee; }
.doctor-card h3 { margin: 10px 0; font-size: 1.3rem; }
.doctor-card p { margin: 5px 0; font-size: 0.9rem; color: #666; }
.doctor-card .specialty { color: var(--primary-color); font-weight: bold; font-size: 1rem; }
.doctor-card .phone { color: var(--secondary-color); font-weight: bold; margin-top: 10px; }
/* Hidden Sections */
.hidden { display: none; }
/* Hospital List Styles */
.hospital-list {
list-style: none;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 15px;
}
.hospital-item {
background: var(--white);
padding: 20px;
border-radius: 10px;
cursor: pointer;
text-align: center;
font-weight: bold;
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
transition: 0.3s;
}
.hospital-item:hover { background: var(--primary-color); color: white; }
/* Department Cards Animation */
.dept-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 15px;
}
.dept-card {
background: #e9ecef;
padding: 25px;
border-radius: 10px;
text-align: center;
cursor: pointer;
transition: 0.4s;
animation: fadeIn 0.5s ease-in-out;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.dept-card:hover { background: var(--primary-color); color: white; transform: scale(1.05); }
.back-btn {
background: #6c757d;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div class="hero" id="home">
<h1>চিকিৎসা সেবা এখন আপনার হাতের মুঠোয়</h1>
<p>চকরিয়া-পেকুয়ার জনপ্রিয় হাসপাতালের তথ্য</p>
<button class="btn-find" onclick="showHospitals()">ডাক্তার খুঁজুন</button>
</div>
<div class="container" id="popular-doctors">
<h2 class="section-title">জনপ্রিয় বিশেষজ্ঞ ডাক্তারগণ</h2>
<div class="grid-container">
<div class="doctor-card">
<img src="https://cdn-icons-png.flaticon.com/512/387/387561.png" alt="Doctor">
<h3>ডাঃ মোঃ আব্দুর রহমান</h3>
<p class="specialty">মেডিসিন বিশেষজ্ঞ</p>
<p>MBBS, BCS, FCPS (Medicine)</p>
<p>সময়: বিকাল ৪টা - রাত ৮টা</p>
<p class="phone">📞 ০১৮০০-০০০০০০</p>
</div>
<div class="doctor-card">
<img src="https://cdn-icons-png.flaticon.com/512/387/387561.png" alt="Doctor">
<h3>ডাঃ সারা ইসলাম</h3>
<p class="specialty">গাইনি বিশেষজ্ঞ</p>
<p>MBBS, MS (Gynae)</p>
<p>সময়: সকাল ১০টা - ২টা</p>
<p class="phone">📞 ০১৭০০-০০০০০০</p>
</div>
</div>
</div>
<div class="container hidden" id="hospital-section">
<button class="back-btn" onclick="goHome()">← ফিরে যান</button>
<h2 class="section-title">হাসপাতাল নির্বাচন করুন</h2>
<div class="hospital-list" id="h-list">
</div>
</div>
<div class="container hidden" id="dept-section">
<button class="back-btn" onclick="showHospitals()">← হাসপাতালে ফিরে যান</button>
<h2 id="selected-hospital-name" class="section-title">বিভাগসমূহ</h2>
<div class="dept-grid" id="dept-list">
</div>
</div>
<div class="container hidden" id="dept-doctors">
<button class="back-btn" onclick="showDepts()">← বিভাগে ফিরে যান</button>
<h2 id="selected-dept-name" class="section-title">ডাক্তারদের তালিকা</h2>
<div class="grid-container" id="final-doctor-list">
</div>
</div>
<script>
const hospitals = [
"জমজম হাসপাতাল", "চকরিয়া সরকারি হাসপাতাল", "পেকুয়া ডিজিটাল ক্লিনিক",
"মাজহারুল হক মেমোরিয়াল", "শেফা ক্লিনিক", "ইউনিক হাসপাতাল",
"প্যানাসিয়া হাসপাতাল", "সাউথ সিটি", "জনতা ক্লিনিক", "মেডিকেল সেন্টার",
"পপুলার ডায়াগনস্টিক", "ইবনে সিনা চকরিয়া", "কেয়ার হসপিটাল", "মেট্রো ক্লিনিক",
"ডক্টরস চেম্বার", "পেকুয়া হেলথ কেয়ার", "মাতৃসদন", "লাইফ লাইন", "আরোগ্য", "সিটি হাসপাতাল"
];
const departments = [
{n: "মেডিসিন বিভাগ", icon: "💊"}, {n: "কার্ডিওলজি (হৃদরোগ)", icon: "❤️"},
{n: "নিউরোলজি", icon: "🧠"}, {n: "গ্যাস্ট্রোএন্টারোলজি", icon: "🧪"},
{n: "নেফ্রোলজি (কিডনি)", icon: "💧"}, {n: "জেনারেল সার্জারি", icon: "✂️"},
{n: "অর্থোপেডিক", icon: "🦴"}, {n: "ইউরোলজি", icon: "🚽"},
{n: "গাইনি (স্ত্রীরোগ)", icon: "👩"}, {n: "পেডিয়াট্রিক্স (শিশু)", icon: "👶"},
{n: "চক্ষু বিভাগ (Eye)", icon: "👁️"}, {n: "নাক-কান-গলা (ENT)", icon: "👂"},
{n: "ডেন্টাল বিভাগ", icon: "🦷"}
];
function showHospitals() {
document.getElementById('home').classList.add('hidden');
document.getElementById('popular-doctors').classList.add('hidden');
document.getElementById('dept-section').classList.add('hidden');
document.getElementById('dept-doctors').classList.add('hidden');
document.getElementById('hospital-section').classList.remove('hidden');
const hList = document.getElementById('h-list');
hList.innerHTML = '';
hospitals.forEach(h => {
const div = document.createElement('div');
div.className = 'hospital-item';
div.innerText = h;
div.onclick = () => showDepts(h);
hList.appendChild(div);
});
}
function showDepts(hospitalName) {
document.getElementById('hospital-section').classList.add('hidden');
document.getElementById('dept-doctors').classList.add('hidden');
document.getElementById('dept-section').classList.remove('hidden');
if(hospitalName) document.getElementById('selected-hospital-name').innerText = hospitalName;
const dList = document.getElementById('dept-list');
dList.innerHTML = '';
departments.forEach(d => {
const div = document.createElement('div');
div.className = 'dept-card';
div.innerHTML = `<h3>${d.icon}</h3><p>${d.n}</p>`;
div.onclick = () => showDoctors(d.n);
dList.appendChild(div);
});
}
function showDoctors(deptName) {
document.getElementById('dept-section').classList.add('hidden');
document.getElementById('dept-doctors').classList.remove('hidden');
document.getElementById('selected-dept-name').innerText = deptName + " - বিশেষজ্ঞগণ";
const doctorList = document.getElementById('final-doctor-list');
doctorList.innerHTML = `
<div class="doctor-card">
<img src="https://cdn-icons-png.flaticon.com/512/387/387561.png" alt="Doctor">
<h3>ডাঃ এক্স ওয়াই জেড</h3>
<p class="specialty">${deptName} বিশেষজ্ঞ</p>
<p>MBBS, FCPS, MD</p>
<p>সময়: বিকাল ৫টা - রাত ৯টা</p>
<p class="phone">📞 ০১৮০০-১১১২২২</p>
</div>
`;
}
function goHome() {
location.reload(); // সহজভাবে হোমে ফেরার জন্য পেজ রিলোড
}
</script>
</body>
</html>
Landing Page
This ad does not have a landing page available
Network Timeline
Performance Summary
8
Requests
5
Domains
280KB
Transfer Size
283KB
Content Size
160.0ms
Dom Content Loaded
308.0ms
First Paint
302.0ms
Load Time
Domain Breakdown
Transfer Size (bytes)
Loading...
Content Size (bytes)
Loading...
Header Size (bytes)
Loading...
Requests
Loading...
Timings (ms)
Loading...
Total Time
Loading...
Content Breakdown
Transfer Size (bytes)
Loading...
Content Size (bytes)
Loading...
Header Size (bytes)
Loading...
Requests
Loading...