Create a PREMIUM 3D MEDICAL AWARENESS INFOGRAPHIC POSTER in Urdu (1080x1080 px) for Social Media, WhatsApp Channel, Facebook, Instagram, and WhatsApp Status. موضوع: تیزابیت اور معدے کی خرابی (Acidity & Gastric Problems) ڈیزائن اسٹائل: - Premium Hospital Branding - Modern Healthcare Advertisement Design - Ultra HD Quality (1080x1080 px) - White, Blue, Teal, Green Medical Color Palette - Premium 3D Medical Elements - Clean Urdu Typography - Glassmorphism & Modern Card Layout - Medical Icons (Stomach, Doctor, Shield, Water, Healthy Food, Warning Sign) - Mobile Friendly Layout - Professional Healthcare Appearance - High Readability Urdu Text TOP HEADER: 🏥 SHIFA ONLINE CONSULTATION MAIN TITLE: 🩺 تیزابیت اور معدے کی خرابی (Acidity & Gastric Problems) Title should appear inside a Premium 3D Highlighted Medical Box with glowing effect. --- 📌 تیزابیت اور معدے کی خرابی کیا ہے؟ تیزابیت ایک عام مسئلہ ہے جس میں معدے کا تیزاب غذائی نالی کی طرف واپس آجاتا ہے، جس سے سینے میں جلن، کھٹی ڈکاریں اور معدے میں بے چینی محسوس ہوتی ہے۔ اگر یہ مسئلہ بار بار ہو تو یہ معدے اور نظامِ ہاضمہ کو متاثر کر سکتا ہے۔ --- ⚠️ عام علامات Display inside attractive icon-based cards: ✔ سینے میں جلن (Heartburn) ✔ کھٹی ڈکاریں آنا ✔ معدے میں درد یا بھاری پن ✔ پیٹ پھولنا اور گیس بننا ✔ متلی یا قے کا احساس ✔ کھانا ہضم نہ ہونا ✔ گلے میں جلن یا کھانسی ✔ منہ کا ذائقہ خراب ہونا --- 🔍 ممکنہ وجوہات Display inside modern rounded cards: ✔ زیادہ مصالحہ دار غذا ✔ چکنائی والی اشیاء کا استعمال ✔ بے وقت کھانا کھانا ✔ زیادہ چائے، کافی یا کولڈ ڈرنکس ✔ تمباکو نوشی ✔ ذہنی دباؤ اور پریشانی ✔ موٹاپا ✔ معدے کے السر یا دیگر امراض --- 👥 کن افراد کو زیادہ خطرہ ہے؟ ✔ موٹاپے کا شکار افراد ✔ زیادہ مصالحہ دار غذا کھانے والے ✔ سگریٹ نوش افراد ✔ حاملہ خواتین ✔ ذہنی دباؤ کا شکار افراد ✔ معدے کے مریض --- 💡 احتیاط اور بچاؤ Create a highlighted green information box: ✅ متوازن غذا استعمال کریں ✅ کھانے کے فوراً بعد نہ لیٹیں ✅ چکنائی اور مصالحہ دار غذاؤں سے پرہیز کریں ✅ روزانہ مناسب مقدار میں پانی پئیں ✅ وزن کو مناسب حد میں رکھیں ✅ سگریٹ نوشی ترک کریں ✅ چھوٹے وقفوں میں ہلکی غذا کھائیں --- 🚨 فوراً ڈاکٹر سے کب رجوع کریں؟ Display inside a Red Emergency Warning Box: ⚠️ سینے میں شدید درد ⚠️ بار بار قے آنا ⚠️ قے یا پاخانے میں خون ⚠️ نگلنے میں دشواری ⚠️ اچانک وزن کم ہونا ⚠️ مسلسل کئی ہفتوں تک تیزابیت رہنا --- 🌿 صحت مند عادات 💧 روزانہ 8-10 گلاس پانی پئیں 🥗 سبزیاں اور فائبر والی غذائیں استعمال کریں 🚶 روزانہ کم از کم 30 منٹ چہل قدمی کریں 😴 مناسب نیند لیں 🧘 ذہنی دباؤ کم کریں --- اہم پیغام تیزابیت اور معدے کی خرابی کو معمولی نہ سمجھیں۔ بروقت تشخیص اور علاج معدے کے بڑے مسائل سے بچا سکتا ہے۔ --- BOTTOM FOOTER 🏥 SHIFA ONLINE CONSULTATION 👨⚕️ Online Medical Consultation Available ✔ Gastric Problems ✔ Acidity ✔ Indigestion ✔ Stomach Pain ✔ Digestive Disorders 📱 WhatsApp: 03024309473 "ماہر ڈاکٹر سے آن لائن مشورہ حاصل کریں" --- IMPORTANT NOTE ⚠️ تمام آن لائن مشاورتی خدمات فیس کے ساتھ (Paid Services) فراہم کی جاتی ہیں۔ FINAL OUTPUT Premium Hospital Quality Medical Awareness Poster, Professional Healthcare Branding, Educational Infographic Design, Crystal Clear Urdu Typography, Modern Medical Advertisement Style, Trustworthy Healthcare Appearance, Attractive 3D Medical Elements, Social Media Ready Design.
ls -la /home/daytona/workspace/ 2>/dev/null || echo "workspace not found"
mkdir -p /home/daytona/workspace/acidity-poster && ls /home/daytona/workspace/acidity-poster/
~/acidity-poster/poster_v2.html
<!DOCTYPE html>
<html lang="ur" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=1080">
<title>Acidity & Gastric Problems - Shifa Online Consultation</title>
<link href="https://fonts.googleapis.com/css2?family=Noto+Nastaliq+Urdu:wght@400;500;600;700&family=Poppins:wght@400;600;700;800;900&display=swap" rel="stylesheet">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
width: 1080px;
min-height: 1080px;
font-family: 'Noto Nastaliq Urdu', 'Poppins', sans-serif;
background: linear-gradient(135deg, #0a1628 0%, #0d2137 25%, #0a2744 50%, #0d3a5c 75%, #0a2744 100%);
color: #ffffff;
overflow-x: hidden;
direction: rtl;
position: relative;
}
/* Animated background orbs */
body::before {
content: '';
position: fixed;
top: -100px; left: -100px;
width: 500px; height: 500px;
background: radial-gradient(circle, rgba(0,200,255,0.08) 0%, transparent 70%);
border-radius: 50%;
pointer-events: none;
}
body::after {
content: '';
position: fixed;
bottom: -100px; right: -100px;
width: 600px; height: 600px;
background: radial-gradient(circle, rgba(0,255,150,0.06) 0%, transparent 70%);
border-radius: 50%;
pointer-events: none;
}
.main-wrapper {
width: 1080px;
background: linear-gradient(180deg, #071020 0%, #0a1a30 15%, #0c2040 30%, #0a1a30 60%, #071020 100%);
position: relative;
overflow: hidden;
}
/* Decorative grid lines */
.grid-overlay {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background-image:
linear-gradient(rgba(0,180,255,0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(0,180,255,0.04) 1px, transparent 1px);
background-size: 60px 60px;
pointer-events: none;
z-index: 0;
}
.content-wrapper {
position: relative;
z-index: 1;
padding: 0;
}
/* ===== HEADER ===== */
.header {
background: linear-gradient(135deg, #00a8e8 0%, #0077b6 40%, #005f8e 70%, #003d5c 100%);
padding: 20px 40px 18px;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 3px solid rgba(0,220,255,0.6);
box-shadow: 0 4px 30px rgba(0,150,255,0.4);
position: relative;
overflow: hidden;
}
.header::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: linear-gradient(45deg, rgba(255,255,255,0.05) 0%, transparent 50%);
}
.header-logo {
display: flex;
align-items: center;
gap: 14px;
}
.header-icon {
width: 56px; height: 56px;
background: rgba(255,255,255,0.2);
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
font-size: 28px;
border: 2px solid rgba(255,255,255,0.3);
backdrop-filter: blur(10px);
box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}
.header-text h1 {
font-family: 'Poppins', sans-serif;
font-size: 22px;
font-weight: 800;
color: #ffffff;
letter-spacing: 1.5px;
text-shadow: 0 2px 10px rgba(0,0,0,0.5);
direction: ltr;
text-align: left;
}
.header-text p {
font-family: 'Poppins', sans-serif;
font-size: 11px;
color: rgba(255,255,255,0.8);
letter-spacing: 2px;
text-transform: uppercase;
direction: ltr;
}
.header-badge {
background: rgba(255,255,255,0.15);
border: 1px solid rgba(255,255,255,0.3);
border-radius: 50px;
padding: 6px 16px;
font-family: 'Poppins', sans-serif;
font-size: 10px;
color: #fff;
letter-spacing: 1px;
backdrop-filter: blur(10px);
direction: ltr;
}
/* ===== HERO SECTION ===== */
.hero-section {
padding: 28px 40px 24px;
text-align: center;
position: relative;
}
.main-title-box {
background: linear-gradient(135deg, rgba(0,150,255,0.25) 0%, rgba(0,80,180,0.35) 50%, rgba(0,180,200,0.2) 100%);
border: 2px solid rgba(0,210,255,0.5);
border-radius: 20px;
padding: 22px 30px 18px;
position: relative;
overflow: hidden;
box-shadow:
0 0 40px rgba(0,180,255,0.3),
0 0 80px rgba(0,100,200,0.15),
inset 0 1px 0 rgba(255,255,255,0.1),
inset 0 -1px 0 rgba(0,0,0,0.2);
backdrop-filter: blur(20px);
}
.main-title-box::before {
content: '';
position: absolute;
top: -50%; left: -50%;
width: 200%; height: 200%;
background: conic-gradient(from 0deg, transparent 0%, rgba(0,200,255,0.05) 25%, transparent 50%, rgba(0,200,255,0.05) 75%, transparent 100%);
animation: none;
}
.main-title-box::after {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: linear-gradient(90deg, transparent, rgba(0,220,255,0.9), rgba(0,255,200,0.7), rgba(0,220,255,0.9), transparent);
border-radius: 2px;
}
.title-icon {
font-size: 20px;
margin-bottom: 8px;
display: block;
}
.main-title-urdu {
font-family: 'Noto Nastaliq Urdu', serif;
font-size: 36px;
font-weight: 700;
color: #ffffff;
line-height: 1.6;
text-shadow: 0 0 30px rgba(0,200,255,0.6), 0 2px 20px rgba(0,0,0,0.8);
display: block;
margin-bottom: 6px;
}
.main-title-en {
font-family: 'Poppins', sans-serif;
font-size: 16px;
font-weight: 600;
color: #00e5ff;
letter-spacing: 2px;
text-transform: uppercase;
direction: ltr;
text-shadow: 0 0 20px rgba(0,229,255,0.5);
}
/* ===== SECTION CARDS ===== */
.section-container {
padding: 0 30px;
}
.info-card {
background: linear-gradient(135deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.03) 100%);
border: 1px solid rgba(255,255,255,0.12);
border-radius: 16px;
padding: 16px 20px;
margin-bottom: 16px;
backdrop-filter: blur(15px);
position: relative;
overflow: hidden;
box-shadow: 0 4px 20px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.08);
}
.info-card::before {
content: '';
position: absolute;
top: 0; right: 0;
width: 4px;
height: 100%;
background: linear-gradient(180deg, #00e5ff, #0077ff);
border-radius: 0 16px 16px 0;
}
.section-title {
font-family: 'Noto Nastaliq Urdu', serif;
font-size: 20px;
font-weight: 700;
color: #00e5ff;
margin-bottom: 10px;
display: flex;
align-items: center;
gap: 8px;
text-shadow: 0 0 15px rgba(0,229,255,0.4);
}
.section-title .icon {
font-size: 20px;
}
.definition-text {
font-family: 'Noto Nastaliq Urdu', serif;
font-size: 14.5px;
line-height: 2.2;
color: rgba(255,255,255,0.88);
text-align: right;
}
/* ===== GRID LAYOUTS ===== */
.grid-2col {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin-bottom: 16px;
}
.grid-3col {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 12px;
margin-bottom: 16px;
}
/* ===== SYMPTOM & CAUSE CARDS ===== */
.symptom-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
margin-bottom: 16px;
}
.symptom-card {
background: linear-gradient(135deg, rgba(0,120,200,0.25) 0%, rgba(0,60,120,0.35) 100%);
border: 1px solid rgba(0,180,255,0.3);
border-radius: 12px;
padding: 12px 8px;
text-align: center;
position: relative;
overflow: hidden;
box-shadow: 0 4px 15px rgba(0,100,200,0.2);
transition: all 0.3s;
}
.symptom-card::after {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: linear-gradient(90deg, #00e5ff, #0077ff);
}
.symptom-icon {
font-size: 22px;
display: block;
margin-bottom: 6px;
}
.symptom-text {
font-family: 'Noto Nastaliq Urdu', serif;
font-size: 11.5px;
color: rgba(255,255,255,0.9);
line-height: 1.8;
display: block;
}
.symptom-en {
font-family: 'Poppins', sans-serif;
font-size: 9px;
color: #00e5ff;
display: block;
margin-top: 2px;
direction: ltr;
letter-spacing: 0.5px;
}
/* ===== CAUSE CARDS ===== */
.cause-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
margin-bottom: 16px;
}
.cause-card {
background: linear-gradient(135deg, rgba(120,50,200,0.2) 0%, rgba(80,20,150,0.3) 100%);
border: 1px solid rgba(160,80,255,0.3);
border-radius: 12px;
padding: 12px 8px;
text-align: center;
box-shadow: 0 4px 15px rgba(100,50,200,0.2);
position: relative;
overflow: hidden;
}
.cause-card::after {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: linear-gradient(90deg, #a855f7, #7c3aed);
}
.cause-icon { font-size: 20px; display: block; margin-bottom: 5px; }
.cause-text {
font-family: 'Noto Nastaliq Urdu', serif;
font-size: 11px;
color: rgba(255,255,255,0.9);
line-height: 1.8;
}
/* ===== RISK SECTION ===== */
.risk-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
margin-bottom: 16px;
}
.risk-card {
background: linear-gradient(135deg, rgba(255,120,30,0.2) 0%, rgba(200,60,0,0.25) 100%);
border: 1px solid rgba(255,140,50,0.35);
border-radius: 12px;
padding: 12px 8px;
text-align: center;
box-shadow: 0 4px 15px rgba(200,80,0,0.2);
position: relative;
overflow: hidden;
}
.risk-card::after {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: linear-gradient(90deg, #ff8c00, #ff4500);
}
.risk-icon { font-size: 20px; display: block; margin-bottom: 5px; }
.risk-text {
font-family: 'Noto Nastaliq Urdu', serif;
font-size: 11.5px;
color: rgba(255,255,255,0.9);
line-height: 1.8;
}
/* ===== PREVENTION BOX ===== */
.prevention-box {
background: linear-gradient(135deg, rgba(0,180,80,0.2) 0%, rgba(0,120,50,0.3) 100%);
border: 2px solid rgba(0,220,100,0.4);
border-radius: 16px;
padding: 18px 20px;
margin-bottom: 16px;
position: relative;
overflow: hidden;
box-shadow: 0 0 30px rgba(0,180,80,0.2), inset 0 1px 0 rgba(255,255,255,0.08);
}
.prevention-box::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: linear-gradient(90deg, transparent, #00dc64, #00ff95, #00dc64, transparent);
}
.prevention-title {
font-family: 'Noto Nastaliq Urdu', serif;
font-size: 19px;
font-weight: 700;
color: #00ff95;
margin-bottom: 12px;
text-shadow: 0 0 15px rgba(0,255,150,0.4);
}
.prevention-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 8px;
}
.prevention-item {
display: flex;
align-items: flex-start;
gap: 8px;
background: rgba(255,255,255,0.05);
border-radius: 8px;
padding: 8px 10px;
border: 1px solid rgba(0,200,80,0.2);
}
.prevention-check {
color: #00ff95;
font-size: 14px;
flex-shrink: 0;
margin-top: 3px;
}
.prevention-text {
font-family: 'Noto Nastaliq Urdu', serif;
font-size: 12px;
color: rgba(255,255,255,0.9);
line-height: 1.8;
text-align: right;
}
/* ===== EMERGENCY BOX ===== */
.emergency-box {
background: linear-gradient(135deg, rgba(220,20,20,0.3) 0%, rgba(150,0,0,0.4) 100%);
border: 2px solid rgba(255,80,80,0.5);
border-radius: 16px;
padding: 18px 20px;
margin-bottom: 16px;
position: relative;
overflow: hidden;
box-shadow: 0 0 30px rgba(220,20,20,0.25), inset 0 1px 0 rgba(255,255,255,0.05);
}
.emergency-box::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: linear-gradient(90deg, transparent, #ff4444, #ff0000, #ff4444, transparent);
}
.emergency-title {
font-family: 'Noto Nastaliq Urdu', serif;
font-size: 19px;
font-weight: 700;
color: #ff6b6b;
margin-bottom: 12px;
text-shadow: 0 0 15px rgba(255,80,80,0.4);
}
.emergency-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
}
.emergency-item {
display: flex;
align-items: flex-start;
gap: 6px;
background: rgba(255,0,0,0.1);
border-radius: 8px;
padding: 8px 10px;
border: 1px solid rgba(255,80,80,0.25);
}
.emergency-warn { color: #ff6b6b; font-size: 13px; flex-shrink: 0; margin-top: 3px; }
.emergency-text {
font-family: 'Noto Nastaliq Urdu', serif;
font-size: 11.5px;
color: rgba(255,255,255,0.9);
line-height: 1.8;
text-align: right;
}
/* ===== HEALTHY HABITS ===== */
.habits-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 8px;
margin-bottom: 16px;
}
.habit-card {
background: linear-gradient(135deg, rgba(0,180,200,0.2) 0%, rgba(0,100,150,0.3) 100%);
border: 1px solid rgba(0,200,220,0.3);
border-radius: 12px;
padding: 12px 6px;
text-align: center;
box-shadow: 0 4px 12px rgba(0,150,200,0.15);
}
.habit-icon { font-size: 22px; display: block; margin-bottom: 5px; }
.habit-text {
font-family: 'Noto Nastaliq Urdu', serif;
font-size: 10.5px;
color: rgba(255,255,255,0.9);
line-height: 1.7;
}
/* ===== KEY MESSAGE ===== */
.key-message {
background: linear-gradient(135deg, rgba(255,200,0,0.15) 0%, rgba(200,140,0,0.2) 100%);
border: 2px solid rgba(255,200,0,0.35);
border-radius: 16px;
padding: 16px 24px;
margin-bottom: 16px;
text-align: center;
position: relative;
overflow: hidden;
box-shadow: 0 0 30px rgba(255,180,0,0.15);
}
.key-message::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: linear-gradient(90deg, transparent, #ffd700, #ffaa00, #ffd700, transparent);
}
.key-message-text {
font-family: 'Noto Nastaliq Urdu', serif;
font-size: 15px;
color: rgba(255,255,255,0.95);
line-height: 2.0;
text-shadow: 0 1px 5px rgba(0,0,0,0.5);
}
/* ===== DIVIDER ===== */
.divider {
height: 1px;
background: linear-gradient(90deg, transparent, rgba(0,200,255,0.4), rgba(0,255,150,0.3), rgba(0,200,255,0.4), transparent);
margin: 0 0 16px;
}
/* ===== SECTION HEADER CHIPS ===== */
.chip-header {
display: inline-flex;
align-items: center;
gap: 6px;
background: linear-gradient(135deg, rgba(0,150,255,0.3), rgba(0,80,200,0.4));
border: 1px solid rgba(0,200,255,0.4);
border-radius: 50px;
padding: 4px 14px 4px 10px;
margin-bottom: 12px;
box-shadow: 0 2px 10px rgba(0,100,200,0.3);
}
.chip-header span {
font-family: 'Noto Nastaliq Urdu', serif;
font-size: 15px;
font-weight: 600;
color: #00e5ff;
text-shadow: 0 0 10px rgba(0,229,255,0.4);
}
/* ===== FOOTER ===== */
.footer {
background: linear-gradient(135deg, #001830 0%, #00243d 40%, #001830 100%);
border-top: 2px solid rgba(0,180,255,0.4);
padding: 20px 30px;
position: relative;
overflow: hidden;
}
.footer::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(90deg, #00e5ff, #0077ff, #00ff95, #0077ff, #00e5ff);
}
.footer-top {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 14px;
}
.footer-brand {
display: flex;
align-items: center;
gap: 12px;
}
.footer-logo-icon {
width: 48px; height: 48px;
background: linear-gradient(135deg, #0077b6, #00b4d8);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
box-shadow: 0 4px 15px rgba(0,150,255,0.4);
}
.footer-brand-text h3 {
font-family: 'Poppins', sans-serif;
font-size: 18px;
font-weight: 800;
color: #fff;
letter-spacing: 1px;
direction: ltr;
}
.footer-brand-text p {
font-family: 'Noto Nastaliq Urdu', serif;
font-size: 12px;
color: rgba(255,255,255,0.7);
}
.footer-contact {
text-align: center;
background: linear-gradient(135deg, rgba(0,200,80,0.2), rgba(0,120,50,0.3));
border: 1px solid rgba(0,200,80,0.4);
border-radius: 12px;
padding: 10px 20px;
box-shadow: 0 4px 15px rgba(0,150,60,0.2);
}
.footer-whatsapp {
font-family: 'Poppins', sans-serif;
font-size: 13px;
font-weight: 700;
color: #00ff95;
direction: ltr;
letter-spacing: 0.5px;
}
.footer-whatsapp-label {
font-family: 'Poppins', sans-serif;
font-size: 10px;
color: rgba(255,255,255,0.6);
direction: ltr;
text-transform: uppercase;
letter-spacing: 1px;
}
.footer-services {
display: flex;
justify-content: center;
gap: 10px;
flex-wrap: wrap;
margin-bottom: 12px;
}
.service-tag {
background: rgba(0,150,255,0.15);
border: 1px solid rgba(0,180,255,0.3);
border-radius: 50px;
padding: 4px 12px;
font-family: 'Poppins', sans-serif;
font-size: 9.5px;
color: #7dd3fc;
direction: ltr;
letter-spacing: 0.3px;
}
.footer-disclaimer {
text-align: center;
background: rgba(255,150,0,0.1);
border: 1px solid rgba(255,150,0,0.3);
border-radius: 10px;
padding: 8px 16px;
}
.disclaimer-text {
font-family: 'Noto Nastaliq Urdu', serif;
font-size: 11px;
color: rgba(255,200,100,0.9);
line-height: 1.8;
}
.disclaimer-en {
font-family: 'Poppins', sans-serif;
font-size: 9.5px;
color: rgba(255,180,80,0.7);
direction: ltr;
margin-top: 2px;
display: block;
}
/* Section header label */
.section-label {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 10px;
}
.section-label-line {
flex: 1;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(0,200,255,0.3));
}
.section-label-text {
font-family: 'Noto Nastaliq Urdu', serif;
font-size: 17px;
font-weight: 700;
color: #00e5ff;
white-space: nowrap;
text-shadow: 0 0 15px rgba(0,229,255,0.3);
}
.section-label-icon {
font-size: 18px;
}
.spacer { height: 10px; }
.spacer-sm { height: 6px; }
</style>
</head>
<body>
<div class="main-wrapper">
<div class="grid-overlay"></div>
<div class="content-wrapper">
<!-- ===== HEADER ===== -->
<div class="header">
<div class="header-logo">
<div class="header-icon">🏥</div>
<div class="header-text">
<h1>SHIFA ONLINE CONSULTATION</h1>
<p>Professional Healthcare Services</p>
</div>
</div>
<div class="header-badge">🩺 MEDICAL AWARENESS</div>
</div>
<!-- ===== HERO ===== -->
<div class="hero-section">
<div class="main-title-box">
<span class="title-icon">🩺</span>
<span class="main-title-urdu">تیزابیت اور معدے کی خرابی</span>
<div class="main-title-en">ACIDITY & GASTRIC PROBLEMS</div>
</div>
</div>
<!-- ===== CONTENT ===== -->
<div class="section-container">
<!-- DEFINITION -->
<div class="info-card">
<div class="section-label">
<div class="section-label-line" style="background: linear-gradient(90deg, rgba(0,200,255,0.3), transparent);"></div>
<span class="section-label-icon">📌</span>
<span class="section-label-text">تیزابیت کیا ہے؟</span>
</div>
<p class="definition-text">
تیزابیت ایک عام مسئلہ ہے جس میں معدے کا تیزاب غذائی نالی کی طرف واپس آجاتا ہے، جس سے سینے میں جلن، کھٹی ڈکاریں اور معدے میں بے چینی محسوس ہوتی ہے۔ اگر یہ مسئلہ بار بار ہو تو یہ معدے اور نظامِ ہاضمہ کو متاثر کر سکتا ہے۔
</p>
</div>
<!-- SYMPTOMS -->
<div class="section-label">
<div class="section-label-line" style="background: linear-gradient(90deg, rgba(0,200,255,0.3), transparent);"></div>
<span class="section-label-icon">⚠️</span>
<span class="section-label-text">عام علامات</span>
</div>
<div class="symptom-grid">
<div class="symptom-card">
<span class="symptom-icon">🔥</span>
<span class="symptom-text">سینے میں جلن</span>
<span class="symptom-en">Heartburn</span>
</div>
<div class="symptom-card">
<span class="symptom-icon">😮💨</span>
<span class="symptom-text">کھٹی ڈکاریں آنا</span>
<span class="symptom-en">Acid Belching</span>
</div>
<div class="symptom-card">
<span class="symptom-icon">😣</span>
<span class="symptom-text">معدے میں درد</span>
<span class="symptom-en">Stomach Pain</span>
</div>
<div class="symptom-card">
<span class="symptom-icon">🫧</span>
<span class="symptom-text">پیٹ پھولنا گیس</span>
<span class="symptom-en">Bloating</span>
</div>
<div class="symptom-card">
<span class="symptom-icon">🤢</span>
<span class="symptom-text">متلی یا قے</span>
<span class="symptom-en">Nausea/Vomiting</span>
</div>
<div class="symptom-card">
<span class="symptom-icon">🍽️</span>
<span class="symptom-text">کھانا ہضم نہ ہونا</span>
<span class="symptom-en">Indigestion</span>
</div>
<div class="symptom-card">
<span class="symptom-icon">🫁</span>
<span class="symptom-text">گلے میں جلن</span>
<span class="symptom-en">Throat Burn</span>
</div>
<div class="symptom-card">
<span class="symptom-icon">👄</span>
<span class="symptom-text">منہ کا ذائقہ خراب</span>
<span class="symptom-en">Bad Taste</span>
</div>
</div>
<div class="divider"></div>
<!-- CAUSES -->
<div class="section-label">
<div class="section-label-line" style="background: linear-gradient(90deg, rgba(160,80,255,0.4), transparent);"></div>
<span class="section-label-icon">🔍</span>
<span class="section-label-text" style="color: #c084fc;">ممکنہ وجوہات</span>
</div>
<div class="cause-grid">
<div class="cause-card">
<span class="cause-icon">🌶️</span>
<span class="cause-text">مصالحہ دار غذا</span>
</div>
<div class="cause-card">
<span class="cause-icon">🍟</span>
<span class="cause-text">چکنائی والی اشیاء</span>
</div>
<div class="cause-card">
<span class="cause-icon">⏰</span>
<span class="cause-text">بے وقت کھانا</span>
</div>
<div class="cause-card">
<span class="cause-icon">☕</span>
<span class="cause-text">چائے، کافی، کولڈ ڈرنکس</span>
</div>
<div class="cause-card">
<span class="cause-icon">🚬</span>
<span class="cause-text">تمباکو نوشی</span>
</div>
<div class="cause-card">
<span class="cause-icon">😰</span>
<span class="cause-text">ذہنی دباؤ</span>
</div>
<div class="cause-card">
<span class="cause-icon">⚖️</span>
<span class="cause-text">موٹاپا</span>
</div>
<div class="cause-card">
<span class="cause-icon">🫃</span>
<span class="cause-text">معدے کے السر</span>
</div>
</div>
<div class="divider"></div>
<!-- RISK GROUPS -->
<div class="section-label">
<div class="section-label-line" style="background: linear-gradient(90deg, rgba(255,140,0,0.4), transparent);"></div>
<span class="section-label-icon">👥</span>
<span class="section-label-text" style="color: #fb923c;">کن افراد کو خطرہ ہے؟</span>
</div>
<div class="risk-grid">
<div class="risk-card">
<span class="risk-icon">⚖️</span>
<span class="risk-text">موٹاپے کا شکار افراد</span>
</div>
<div class="risk-card">
<span class="risk-icon">🌶️</span>
<span class="risk-text">مصالحہ دار غذا کھانے والے</span>
</div>
<div class="risk-card">
<span class="risk-icon">🚬</span>
<span class="risk-text">سگریٹ نوش افراد</span>
</div>
<div class="risk-card">
<span class="risk-icon">🤰</span>
<span class="risk-text">حاملہ خواتین</span>
</div>
<div class="risk-card">
<span class="risk-icon">😰</span>
<span class="risk-text">ذہنی دباؤ کے شکار</span>
</div>
<div class="risk-card">
<span class="risk-icon">🏥</span>
<span class="risk-text">معدے کے مریض</span>
</div>
</div>
<div class="divider"></div>
<!-- PREVENTION -->
<div class="prevention-box">
<div class="section-label" style="margin-bottom: 14px;">
<div class="section-label-line" style="background: linear-gradient(90deg, rgba(0,220,100,0.4), transparent);"></div>
<span class="section-label-icon">💡</span>
<span class="section-label-text" style="color: #00ff95;">احتیاط اور بچاؤ</span>
</div>
<div class="prevention-grid">
<div class="prevention-item">
<span class="prevention-check">✅</span>
<span class="prevention-text">متوازن غذا استعمال کریں</span>
</div>
<div class="prevention-item">
<span class="prevention-check">✅</span>
<span class="prevention-text">کھانے کے فوراً بعد نہ لیٹیں</span>
</div>
<div class="prevention-item">
<span class="prevention-check">✅</span>
<span class="prevention-text">چکنائی اور مصالحے سے پرہیز کریں</span>
</div>
<div class="prevention-item">
<span class="prevention-check">✅</span>
<span class="prevention-text">روزانہ مناسب پانی پئیں</span>
</div>
<div class="prevention-item">
<span class="prevention-check">✅</span>
<span class="prevention-text">وزن مناسب حد میں رکھیں</span>
</div>
<div class="prevention-item">
<span class="prevention-check">✅</span>
<span class="prevention-text">سگریٹ نوشی ترک کریں</span>
</div>
<div class="prevention-item">
<span class="prevention-check">✅</span>
<span class="prevention-text">چھوٹے وقفوں میں ہلکی غذا کھائیں</span>
</div>
<div class="prevention-item">
<span class="prevention-check">✅</span>
<span class="prevention-text">سونے سے 2 گھنٹے پہلے کھانا</span>
</div>
</div>
</div>
<!-- EMERGENCY -->
<div class="emergency-box">
<div class="section-label" style="margin-bottom: 14px;">
<div class="section-label-line" style="background: linear-gradient(90deg, rgba(255,80,80,0.4), transparent);"></div>
<span class="section-label-icon">🚨</span>
<span class="section-label-text" style="color: #ff6b6b;">فوراً ڈاکٹر سے رجوع کریں</span>
</div>
<div class="emergency-grid">
<div class="emergency-item">
<span class="emergency-warn">⚠️</span>
<span class="emergency-text">سینے میں شدید درد</span>
</div>
<div class="emergency-item">
<span class="emergency-warn">⚠️</span>
<span class="emergency-text">بار بار قے آنا</span>
</div>
<div class="emergency-item">
<span class="emergency-warn">⚠️</span>
<span class="emergency-text">قے یا پاخانے میں خون</span>
</div>
<div class="emergency-item">
<span class="emergency-warn">⚠️</span>
<span class="emergency-text">نگلنے میں دشواری</span>
</div>
<div class="emergency-item">
<span class="emergency-warn">⚠️</span>
<span class="emergency-text">اچانک وزن کم ہونا</span>
</div>
<div class="emergency-item">
<span class="emergency-warn">⚠️</span>
<span class="emergency-text">مسلسل کئی ہفتے تیزابیت</span>
</div>
</div>
</div>
<!-- HEALTHY HABITS -->
<div class="section-label">
<div class="section-label-line" style="background: linear-gradient(90deg, rgba(0,200,220,0.4), transparent);"></div>
<span class="section-label-icon">🌿</span>
<span class="section-label-text" style="color: #67e8f9;">صحت مند عادات</span>
</div>
<div class="habits-grid">
<div class="habit-card">
<span class="habit-icon">💧</span>
<span class="habit-text">روزانہ 8-10 گلاس پانی</span>
</div>
<div class="habit-card">
<span class="habit-icon">🥗</span>
<span class="habit-text">سبزیاں اور فائبر</span>
</div>
<div class="habit-card">
<span class="habit-icon">🚶</span>
<span class="habit-text">30 منٹ چہل قدمی</span>
</div>
<div class="habit-card">
<span class="habit-icon">😴</span>
<span class="habit-text">مناسب نیند لیں</span>
</div>
<div class="habit-card">
<span class="habit-icon">🧘</span>
<span class="habit-text">ذہنی دباؤ کم کریں</span>
</div>
</div>
<!-- KEY MESSAGE -->
<div class="key-message">
<div style="font-size: 18px; margin-bottom: 6px;">⭐ اہم پیغام ⭐</div>
<p class="key-message-text">
تیزابیت اور معدے کی خرابی کو معمولی نہ سمجھیں۔ بروقت تشخیص اور علاج معدے کے بڑے مسائل سے بچا سکتا ہے۔
</p>
</div>
</div><!-- end section-container -->
<!-- ===== FOOTER ===== -->
<div class="footer">
<div class="footer-top">
<div class="footer-brand">
<div class="footer-logo-icon">🏥</div>
<div class="footer-brand-text">
<h3>SHIFA ONLINE CONSULTATION</h3>
<p>ماہر ڈاکٹر سے آن لائن مشورہ حاصل کریں</p>
</div>
</div>
<div class="footer-contact">
<div class="footer-whatsapp-label">📱 WHATSAPP</div>
<div class="footer-whatsapp">03024309473</div>
<div style="font-family: Poppins; font-size: 9px; color: rgba(255,255,255,0.5); direction: ltr; margin-top: 2px;">Online Consultation Available</div>
</div>
</div>
<div class="footer-services">
<span class="service-tag">✔ Gastric Problems</span>
<span class="service-tag">✔ Acidity</span>
<span class="service-tag">✔ Indigestion</span>
<span class="service-tag">✔ Stomach Pain</span>
<span class="service-tag">✔ Digestive Disorders</span>
</div>
<div class="footer-disclaimer">
<p class="disclaimer-text">⚠️ تمام آن لائن مشاورتی خدمات فیس کے ساتھ (Paid Services) فراہم کی جاتی ہیں</p>
<span class="disclaimer-en">All online consultation services are paid - fees apply</span>
</div>
</div>
</div><!-- end content-wrapper -->
</div><!-- end main-wrapper -->
</body>
</html>
which chromium-browser || which chromium || which google-chrome || which google-chrome-stable || which puppeteer 2>/dev/null; node --version 2>/dev/null; python3 --version 2>/dev/null
ls /home/daytona/skills/shared/scripts/ 2>/dev/null && cat /home/daytona/skills/shared/scripts/html_to_image.js 2>/dev/null || echo "not found"
node -e "const p = require('puppeteer'); console.log(p ? 'ok' : 'no');" 2>/dev/null || echo "puppeteer not found as module" ls /home/daytona/workspace/acidity-poster/
cd /home/daytona/workspace/acidity-poster && /usr/bin/chromium --headless --no-sandbox --disable-gpu --screenshot=poster_v2_raw.png --window-size=1080,2000 "file:///home/daytona/workspace/acidity-poster/poster_v2.html" 2>&1 | tail -5 sleep 3 ls -la poster_v2_raw.png 2>/dev/null || echo "not created"
python3 -c " from PIL import Image img = Image.open('/home/daytona/workspace/acidity-poster/poster_v2_raw.png') print(f'Size: {img.size}') print(f'Mode: {img.mode}') "
python3 -c " from PIL import Image import numpy as np img = Image.open('/home/daytona/workspace/acidity-poster/poster_v2_raw.png') arr = np.array(img) # Find the last row that isn't the background color (dark blue ~7,16,32) # Background is roughly RGB(7-12, 16-26, 30-50) # Look for the last row with meaningful content for row_idx in range(arr.shape[0]-1, 0, -1): row = arr[row_idx] # Check if this row has pixels different from near-black background bright = np.any(row > 40, axis=1) if np.sum(bright) > 50: print(f'Last content row: {row_idx}') break print(f'Full image height: {img.size[1]}') "
# First check actual page content height using a JS script cd /home/daytona/workspace/acidity-poster # Use chromium to get actual page height /usr/bin/chromium --headless --no-sandbox --disable-gpu \ --run-all-compositor-stages-before-draw \ --virtual-time-budget=5000 \ --dump-dom \ "file:///home/daytona/workspace/acidity-poster/poster_v2.html" 2>/dev/null | \ python3 -c " import sys content = sys.stdin.read() # Look for any height hints print('DOM length:', len(content)) " 2>/dev/null || echo "fallback" # Try to get scrollHeight via a node script approach cat > /tmp/get_height.js << 'EOF' const { execSync } = require('child_process'); // We'll use chromium's screenshot with a tall enough viewport // then detect actual content console.log('Using 1080x3000 to capture full content'); EOF echo "Done"
# Capture with taller window to get all content cd /home/daytona/workspace/acidity-poster /usr/bin/chromium --headless --no-sandbox --disable-gpu \ --screenshot=poster_v2_full.png \ --window-size=1080,3200 \ "file:///home/daytona/workspace/acidity-poster/poster_v2.html" 2>&1 | tail -2 sleep 2 python3 -c " from PIL import Image import numpy as np img = Image.open('/home/daytona/workspace/acidity-poster/poster_v2_full.png') arr = np.array(img) print(f'Full capture size: {img.size}') # Find actual content end - look for last non-dark row for row_idx in range(arr.shape[0]-1, 0, -1): row = arr[row_idx] bright = np.any(row > 30, axis=1) if np.sum(bright) > 100: print(f'Content ends at row: {row_idx+20}') # Crop to actual content + small padding content_height = min(row_idx + 30, img.size[1]) cropped = img.crop((0, 0, 1080, content_height)) cropped.save('/home/daytona/workspace/acidity-poster/Acidity_Poster_Full_v2.png', 'PNG', quality=95) print(f'Saved full poster: 1080x{content_height}') break "
python3 -c " from PIL import Image, ImageFilter import numpy as np # Load the full poster img = Image.open('/home/daytona/workspace/acidity-poster/poster_v2_full.png') print(f'Full poster: {img.size}') # Save as the complete infographic (full height) img.save('/home/daytona/workspace/acidity-poster/Acidity_Gastric_FullPoster_v2.png', 'PNG', optimize=True) print('Full poster saved.') # Create 1080x1080 square - take the top portion (header + title + symptoms + causes) # For social media square, we crop the top 1080px (header through main content) # Scale down proportionally to fit within 1080x1080 scale = 1080 / img.size[0] new_h = int(img.size[1] * scale) resized = img.resize((1080, new_h), Image.LANCZOS) print(f'Resized: {resized.size}') # For 1080x1080 square crop: center crop or top crop # Take from top since header content is most important square = Image.new('RGB', (1080, 1080), (7, 16, 32)) # Paste centered if shorter, or just take top portion paste_y = 0 square.paste(resized, (0, paste_y)) square.save('/home/daytona/workspace/acidity-poster/Acidity_Gastric_1080x1080_v2.png', 'PNG', optimize=True) print('1080x1080 square saved.') # Also create a 4:5 aspect ratio for Instagram feed (1080x1350) target_h_4_5 = 1350 square_4_5 = Image.new('RGB', (1080, target_h_4_5), (7, 16, 32)) square_4_5.paste(resized, (0, 0)) square_4_5.save('/home/daytona/workspace/acidity-poster/Acidity_Gastric_Instagram_1080x1350_v2.png', 'PNG', optimize=True) print('1080x1350 Instagram saved.') print('All done!') "
ls -lh /home/daytona/workspace/acidity-poster/*.png /home/daytona/workspace/acidity-poster/*.html 2>/dev/null
✅ Premium Poster Package Ready!
📥 Download Files:
| File | Format | Use For |
|---|---|---|
Acidity Gastric FullPoster v2 Image · PNG | 1080 × 3200 px | Full Infographic / Website |
Acidity Gastric 1080x1080 v2 Image · PNG | 1080 × 1080 px | WhatsApp Status / Facebook / Instagram Square |
Acidity Gastric Instagram 1080x1350 v2 Image · PNG | 1080 × 1350 px | Instagram Feed (4:5 Ratio) |
poster v2 HTML File · HTML | HTML Source | Editable Source File |
🎨 Design Features Included:
- Premium dark medical color palette - Deep navy blue, cyan, teal, green, purple accents
- Glassmorphism card layout - Frosted glass effect on all section cards
- 3D glowing title box - Neon glow effect on the main title
- 8 Symptom cards with icons in blue gradient cards
- 8 Cause cards in purple gradient cards
- 6 Risk group cards in orange gradient cards
- Green Prevention box with 8 tips in 2-column grid
- Red Emergency warning box with 6 danger signs
- 5 Healthy habits icon cards in teal
- Golden key message banner
- Professional footer with SHIFA ONLINE CONSULTATION branding, WhatsApp number (03024309473), service tags, and paid services disclaimer
- Clean Urdu Nastaliq typography throughout
- 1080x1080px social media ready format