**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.html
<!DOCTYPE html>
<html lang="ur" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=1080">
<title>تیزابیت اور معدے کی خرابی</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Noto+Nastaliq+Urdu:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
width: 1080px;
min-height: 1080px;
background: linear-gradient(135deg, #0a1628 0%, #0d2137 30%, #0a2e3d 60%, #062a1e 100%);
font-family: 'Noto Nastaliq Urdu', 'Jameel Noori Nastaleeq', 'Arial Unicode MS', serif;
direction: rtl;
overflow-x: hidden;
position: relative;
}
/* Background decorative circles */
body::before {
content: '';
position: fixed;
top: -200px; right: -200px;
width: 600px; height: 600px;
background: radial-gradient(circle, rgba(0,180,220,0.12) 0%, transparent 70%);
border-radius: 50%;
pointer-events: none;
}
body::after {
content: '';
position: fixed;
bottom: -200px; left: -200px;
width: 500px; height: 500px;
background: radial-gradient(circle, rgba(0,200,120,0.10) 0%, transparent 70%);
border-radius: 50%;
pointer-events: none;
}
.container {
width: 1080px;
padding: 0;
position: relative;
z-index: 1;
}
/* ─── HEADER ─── */
.header {
background: linear-gradient(90deg, #0077b6, #00b4d8, #0096c7, #023e8a);
padding: 18px 32px;
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
position: relative;
overflow: hidden;
box-shadow: 0 4px 20px rgba(0,180,220,0.5);
}
.header::before {
content: '';
position: absolute;
inset: 0;
background: repeating-linear-gradient(
90deg,
rgba(255,255,255,0.03) 0px,
rgba(255,255,255,0.03) 1px,
transparent 1px,
transparent 60px
);
}
.header-icon { font-size: 32px; animation: pulse 2s infinite; }
@keyframes pulse { 0%,100%{transform:scale(1);} 50%{transform:scale(1.1);} }
.header-text {
font-size: 26px;
font-weight: 700;
color: #ffffff;
letter-spacing: 1px;
text-shadow: 0 2px 8px rgba(0,0,0,0.4);
text-transform: uppercase;
}
.header-sub {
font-size: 13px;
color: rgba(255,255,255,0.85);
text-align: center;
margin-top: 2px;
font-family: Arial, sans-serif;
letter-spacing: 2px;
}
/* ─── MAIN TITLE BOX ─── */
.title-section {
padding: 22px 28px 16px;
text-align: center;
}
.title-box {
background: linear-gradient(135deg, rgba(0,119,182,0.35), rgba(0,180,216,0.25), rgba(0,150,199,0.3));
border: 2px solid rgba(0,212,255,0.6);
border-radius: 20px;
padding: 20px 30px;
position: relative;
overflow: hidden;
box-shadow:
0 0 30px rgba(0,212,255,0.35),
0 0 60px rgba(0,150,199,0.15),
inset 0 1px 0 rgba(255,255,255,0.15);
backdrop-filter: blur(10px);
}
.title-box::before {
content: '';
position: absolute;
top: -50%; left: -50%;
width: 200%; height: 200%;
background: radial-gradient(ellipse at center, rgba(0,212,255,0.08) 0%, transparent 60%);
animation: shimmer 3s infinite;
}
@keyframes shimmer { 0%,100%{opacity:0.5;} 50%{opacity:1;} }
.title-emoji { font-size: 36px; display: block; margin-bottom: 8px; }
.title-urdu {
font-size: 34px;
font-weight: 700;
color: #ffffff;
text-shadow: 0 0 20px rgba(0,212,255,0.8), 0 2px 4px rgba(0,0,0,0.5);
line-height: 1.4;
display: block;
}
.title-en {
font-size: 16px;
color: #00d4ff;
font-family: Arial, sans-serif;
font-weight: 600;
letter-spacing: 2px;
margin-top: 6px;
display: block;
text-shadow: 0 0 10px rgba(0,212,255,0.5);
}
/* ─── SECTION WRAPPER ─── */
.main-content {
padding: 0 22px 16px;
display: flex;
flex-direction: column;
gap: 14px;
}
/* ─── WHAT IS ACIDITY ─── */
.info-box {
background: linear-gradient(135deg, rgba(2,62,138,0.5), rgba(0,119,182,0.3));
border: 1.5px solid rgba(0,180,216,0.4);
border-radius: 16px;
padding: 16px 20px;
backdrop-filter: blur(8px);
box-shadow: 0 4px 20px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.08);
}
.section-title {
font-size: 19px;
font-weight: 700;
color: #00d4ff;
margin-bottom: 10px;
display: flex;
align-items: center;
gap: 8px;
text-shadow: 0 0 10px rgba(0,212,255,0.5);
flex-direction: row-reverse;
justify-content: flex-end;
}
.section-title .icon { font-size: 22px; }
.info-text {
font-size: 15px;
color: rgba(255,255,255,0.92);
line-height: 2.0;
text-align: right;
}
/* ─── TWO COLUMN GRID ─── */
.two-col {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
/* ─── SYMPTOMS / CAUSES CARD ─── */
.card {
border-radius: 16px;
padding: 14px 16px;
backdrop-filter: blur(8px);
box-shadow: 0 4px 20px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.08);
}
.card-symptoms {
background: linear-gradient(135deg, rgba(3,4,94,0.6), rgba(0,119,182,0.35));
border: 1.5px solid rgba(0,180,216,0.45);
}
.card-causes {
background: linear-gradient(135deg, rgba(10,40,60,0.6), rgba(0,77,64,0.35));
border: 1.5px solid rgba(0,200,150,0.45);
}
.card-title {
font-size: 17px;
font-weight: 700;
margin-bottom: 10px;
display: flex;
align-items: center;
gap: 6px;
flex-direction: row-reverse;
justify-content: flex-end;
}
.card-title.blue { color: #48cae4; text-shadow: 0 0 8px rgba(72,202,228,0.5); }
.card-title.green { color: #52b788; text-shadow: 0 0 8px rgba(82,183,136,0.5); }
.item-list {
list-style: none;
display: flex;
flex-direction: column;
gap: 5px;
}
.item-list li {
font-size: 13.5px;
color: rgba(255,255,255,0.90);
line-height: 1.7;
display: flex;
align-items: flex-start;
gap: 6px;
flex-direction: row-reverse;
text-align: right;
}
.item-list li .dot {
width: 6px; height: 6px;
border-radius: 50%;
margin-top: 7px;
flex-shrink: 0;
}
.dot-blue { background: #48cae4; box-shadow: 0 0 6px rgba(72,202,228,0.8); }
.dot-green { background: #52b788; box-shadow: 0 0 6px rgba(82,183,136,0.8); }
.dot-orange { background: #ffd166; box-shadow: 0 0 6px rgba(255,209,102,0.8); }
.dot-red { background: #ef233c; box-shadow: 0 0 6px rgba(239,35,60,0.8); }
/* ─── RISK FACTORS ─── */
.risk-box {
background: linear-gradient(135deg, rgba(30,20,60,0.6), rgba(60,20,80,0.35));
border: 1.5px solid rgba(160,90,220,0.45);
border-radius: 16px;
padding: 14px 16px;
backdrop-filter: blur(8px);
}
.risk-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
margin-top: 10px;
}
.risk-chip {
background: rgba(120,60,180,0.25);
border: 1px solid rgba(160,90,220,0.4);
border-radius: 10px;
padding: 7px 10px;
text-align: center;
font-size: 12.5px;
color: rgba(255,255,255,0.9);
line-height: 1.5;
}
.risk-chip .chip-icon { font-size: 18px; display: block; margin-bottom: 3px; }
/* ─── PREVENTION GREEN BOX ─── */
.prevention-box {
background: linear-gradient(135deg, rgba(0,60,30,0.65), rgba(0,100,60,0.35));
border: 2px solid rgba(80,200,120,0.5);
border-radius: 16px;
padding: 14px 18px;
backdrop-filter: blur(8px);
box-shadow: 0 0 20px rgba(80,200,120,0.15), inset 0 1px 0 rgba(255,255,255,0.08);
}
.prevention-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 7px;
margin-top: 10px;
}
.prev-item {
display: flex;
align-items: flex-start;
gap: 7px;
flex-direction: row-reverse;
font-size: 13px;
color: rgba(255,255,255,0.92);
line-height: 1.7;
text-align: right;
}
.check-green {
color: #40dc7e;
font-size: 14px;
margin-top: 2px;
flex-shrink: 0;
text-shadow: 0 0 6px rgba(64,220,126,0.7);
}
/* ─── EMERGENCY RED BOX ─── */
.emergency-box {
background: linear-gradient(135deg, rgba(80,0,0,0.65), rgba(140,0,30,0.35));
border: 2px solid rgba(239,35,60,0.6);
border-radius: 16px;
padding: 14px 18px;
backdrop-filter: blur(8px);
box-shadow: 0 0 25px rgba(239,35,60,0.2), inset 0 1px 0 rgba(255,255,255,0.06);
}
.emerg-title {
color: #ff4d6d;
font-size: 18px;
font-weight: 700;
text-shadow: 0 0 10px rgba(255,77,109,0.6);
animation: blink 1.5s infinite;
}
@keyframes blink { 0%,100%{opacity:1;} 50%{opacity:0.7;} }
.emerg-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 7px;
margin-top: 10px;
}
.emerg-item {
display: flex;
align-items: flex-start;
gap: 6px;
flex-direction: row-reverse;
font-size: 13px;
color: rgba(255,200,200,0.95);
line-height: 1.7;
text-align: right;
}
.warn-icon { color: #ff4d6d; font-size: 13px; margin-top: 3px; flex-shrink: 0; }
/* ─── HEALTHY HABITS ─── */
.habits-box {
background: linear-gradient(135deg, rgba(0,30,60,0.6), rgba(0,60,100,0.35));
border: 1.5px solid rgba(0,212,255,0.35);
border-radius: 16px;
padding: 14px 18px;
backdrop-filter: blur(8px);
}
.habits-row {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 10px;
justify-content: center;
}
.habit-chip {
background: rgba(0,119,182,0.25);
border: 1px solid rgba(0,180,216,0.4);
border-radius: 20px;
padding: 7px 14px;
font-size: 13px;
color: rgba(255,255,255,0.92);
display: flex;
align-items: center;
gap: 6px;
flex-direction: row-reverse;
}
.habit-chip .hicon { font-size: 16px; }
/* ─── IMPORTANT MESSAGE ─── */
.message-box {
background: linear-gradient(90deg, rgba(0,119,182,0.4), rgba(0,180,216,0.25), rgba(0,150,120,0.3));
border: 2px solid rgba(0,212,255,0.45);
border-radius: 16px;
padding: 14px 20px;
text-align: center;
backdrop-filter: blur(8px);
box-shadow: 0 0 20px rgba(0,212,255,0.15);
}
.message-text {
font-size: 16px;
font-weight: 700;
color: #ffffff;
line-height: 1.9;
text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
/* ─── FOOTER ─── */
.footer {
background: linear-gradient(90deg, #023e8a, #0077b6, #0096c7, #00b4d8, #0096c7);
padding: 20px 28px 16px;
text-align: center;
position: relative;
overflow: hidden;
box-shadow: 0 -4px 20px rgba(0,150,199,0.4);
}
.footer::before {
content: '';
position: absolute;
inset: 0;
background: repeating-linear-gradient(
90deg,
rgba(255,255,255,0.03) 0px,
rgba(255,255,255,0.03) 1px,
transparent 1px,
transparent 80px
);
}
.footer-brand {
font-size: 22px;
font-weight: 700;
color: #ffffff;
letter-spacing: 1.5px;
text-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.footer-tagline {
font-size: 14px;
color: rgba(255,255,255,0.9);
margin: 6px 0;
font-family: Arial, sans-serif;
}
.footer-services {
display: flex;
justify-content: center;
gap: 12px;
flex-wrap: wrap;
margin: 8px 0;
}
.footer-tag {
background: rgba(255,255,255,0.15);
border: 1px solid rgba(255,255,255,0.25);
border-radius: 12px;
padding: 4px 12px;
font-size: 12px;
color: #ffffff;
font-family: Arial, sans-serif;
}
.footer-wa {
font-size: 18px;
font-weight: 700;
color: #90ff90;
margin: 8px 0 4px;
text-shadow: 0 0 10px rgba(144,255,144,0.5);
font-family: Arial, sans-serif;
}
.footer-quote {
font-size: 15px;
color: rgba(255,255,255,0.9);
font-style: italic;
}
.footer-notice {
margin-top: 10px;
background: rgba(0,0,0,0.25);
border-radius: 8px;
padding: 6px 14px;
font-size: 12.5px;
color: rgba(255,220,100,0.95);
font-family: Arial, sans-serif;
}
/* Divider line */
.divider {
height: 1px;
background: linear-gradient(90deg, transparent, rgba(0,212,255,0.5), transparent);
margin: 2px 0;
}
</style>
</head>
<body>
<div class="container">
<!-- HEADER -->
<div class="header">
<span class="header-icon">🏥</span>
<div>
<div class="header-text">SHIFA ONLINE CONSULTATION</div>
<div class="header-sub">PREMIUM MEDICAL AWARENESS</div>
</div>
<span class="header-icon">🩺</span>
</div>
<!-- MAIN TITLE -->
<div class="title-section">
<div class="title-box">
<span class="title-emoji">🩺</span>
<span class="title-urdu">تیزابیت اور معدے کی خرابی</span>
<span class="title-en">⚕ ACIDITY & GASTRIC PROBLEMS ⚕</span>
</div>
</div>
<div class="main-content">
<!-- WHAT IS IT -->
<div class="info-box">
<div class="section-title"><span class="icon">📌</span> تیزابیت اور معدے کی خرابی کیا ہے؟</div>
<p class="info-text">
تیزابیت ایک عام مسئلہ ہے جس میں معدے کا تیزاب غذائی نالی کی طرف واپس آجاتا ہے، جس سے سینے میں جلن، کھٹی ڈکاریں اور معدے میں بے چینی محسوس ہوتی ہے۔ اگر یہ مسئلہ بار بار ہو تو یہ معدے اور نظامِ ہاضمہ کو متاثر کر سکتا ہے۔
</p>
</div>
<!-- SYMPTOMS + CAUSES -->
<div class="two-col">
<!-- Symptoms -->
<div class="card card-symptoms">
<div class="card-title blue"><span>⚠️</span> عام علامات</div>
<ul class="item-list">
<li><span class="dot dot-blue"></span>سینے میں جلن (Heartburn)</li>
<li><span class="dot dot-blue"></span>کھٹی ڈکاریں آنا</li>
<li><span class="dot dot-blue"></span>معدے میں درد یا بھاری پن</li>
<li><span class="dot dot-blue"></span>پیٹ پھولنا اور گیس بننا</li>
<li><span class="dot dot-blue"></span>متلی یا قے کا احساس</li>
<li><span class="dot dot-blue"></span>کھانا ہضم نہ ہونا</li>
<li><span class="dot dot-blue"></span>گلے میں جلن یا کھانسی</li>
<li><span class="dot dot-blue"></span>منہ کا ذائقہ خراب ہونا</li>
</ul>
</div>
<!-- Causes -->
<div class="card card-causes">
<div class="card-title green"><span>🔍</span> ممکنہ وجوہات</div>
<ul class="item-list">
<li><span class="dot dot-green"></span>زیادہ مصالحہ دار غذا</li>
<li><span class="dot dot-green"></span>چکنائی والی اشیاء</li>
<li><span class="dot dot-green"></span>بے وقت کھانا کھانا</li>
<li><span class="dot dot-green"></span>زیادہ چائے، کافی یا کولڈ ڈرنکس</li>
<li><span class="dot dot-green"></span>تمباکو نوشی</li>
<li><span class="dot dot-green"></span>ذہنی دباؤ اور پریشانی</li>
<li><span class="dot dot-green"></span>موٹاپا</li>
<li><span class="dot dot-green"></span>معدے کے السر یا امراض</li>
</ul>
</div>
</div>
<!-- RISK FACTORS -->
<div class="risk-box">
<div class="section-title" style="color:#c77dff;text-shadow:0 0 8px rgba(199,125,255,0.5);">
<span class="icon">👥</span> کن افراد کو زیادہ خطرہ ہے؟
</div>
<div class="risk-grid">
<div class="risk-chip"><span class="chip-icon">⚖️</span>موٹاپے کا شکار افراد</div>
<div class="risk-chip"><span class="chip-icon">🌶️</span>زیادہ مصالحہ دار غذا</div>
<div class="risk-chip"><span class="chip-icon">🚬</span>سگریٹ نوش افراد</div>
<div class="risk-chip"><span class="chip-icon">🤰</span>حاملہ خواتین</div>
<div class="risk-chip"><span class="chip-icon">😰</span>ذہنی دباؤ کا شکار</div>
<div class="risk-chip"><span class="chip-icon">🏥</span>معدے کے مریض</div>
</div>
</div>
<!-- PREVENTION + EMERGENCY (side by side) -->
<div class="two-col">
<!-- Prevention -->
<div class="prevention-box">
<div class="section-title" style="color:#40dc7e;text-shadow:0 0 8px rgba(64,220,126,0.5);">
<span class="icon">💡</span> احتیاط اور بچاؤ
</div>
<div class="prevention-grid">
<div class="prev-item"><span class="check-green">✅</span>متوازن غذا استعمال کریں</div>
<div class="prev-item"><span class="check-green">✅</span>کھانے کے بعد نہ لیٹیں</div>
<div class="prev-item"><span class="check-green">✅</span>مصالحہ دار غذا سے پرہیز</div>
<div class="prev-item"><span class="check-green">✅</span>مناسب مقدار میں پانی</div>
<div class="prev-item"><span class="check-green">✅</span>وزن مناسب رکھیں</div>
<div class="prev-item"><span class="check-green">✅</span>سگریٹ نوشی ترک کریں</div>
<div class="prev-item"><span class="check-green">✅</span>ہلکی غذا کھائیں</div>
</div>
</div>
<!-- Emergency -->
<div class="emergency-box">
<div class="emerg-title">🚨 فوری ڈاکٹر سے رجوع کریں</div>
<div class="emerg-grid">
<div class="emerg-item"><span class="warn-icon">⚠️</span>سینے میں شدید درد</div>
<div class="emerg-item"><span class="warn-icon">⚠️</span>بار بار قے آنا</div>
<div class="emerg-item"><span class="warn-icon">⚠️</span>قے یا پاخانے میں خون</div>
<div class="emerg-item"><span class="warn-icon">⚠️</span>نگلنے میں دشواری</div>
<div class="emerg-item"><span class="warn-icon">⚠️</span>اچانک وزن کم ہونا</div>
<div class="emerg-item"><span class="warn-icon">⚠️</span>ہفتوں تک تیزابیت</div>
</div>
</div>
</div>
<!-- HEALTHY HABITS -->
<div class="habits-box">
<div class="section-title" style="color:#48cae4;">
<span class="icon">🌿</span> صحت مند عادات
</div>
<div class="habits-row">
<div class="habit-chip"><span class="hicon">💧</span>روزانہ 8-10 گلاس پانی</div>
<div class="habit-chip"><span class="hicon">🥗</span>سبزیاں اور فائبر</div>
<div class="habit-chip"><span class="hicon">🚶</span>30 منٹ چہل قدمی</div>
<div class="habit-chip"><span class="hicon">😴</span>مناسب نیند</div>
<div class="habit-chip"><span class="hicon">🧘</span>ذہنی دباؤ کم کریں</div>
</div>
</div>
<!-- IMPORTANT MESSAGE -->
<div class="message-box">
<p class="message-text">
💬 تیزابیت اور معدے کی خرابی کو معمولی نہ سمجھیں۔<br>
بروقت تشخیص اور علاج معدے کے بڑے مسائل سے بچا سکتا ہے۔
</p>
</div>
</div><!-- end main-content -->
<!-- FOOTER -->
<div class="footer">
<div class="footer-brand">🏥 SHIFA ONLINE CONSULTATION</div>
<div class="footer-tagline">👨⚕️ Online Medical Consultation Available</div>
<div class="footer-services">
<span class="footer-tag">✔ Gastric Problems</span>
<span class="footer-tag">✔ Acidity</span>
<span class="footer-tag">✔ Indigestion</span>
<span class="footer-tag">✔ Stomach Pain</span>
<span class="footer-tag">✔ Digestive Disorders</span>
</div>
<div class="footer-wa">📱 WhatsApp: 03024309473</div>
<div class="footer-quote">💬 "ماہر ڈاکٹر سے آن لائن مشورہ حاصل کریں"</div>
<div class="footer-notice">⚠️ تمام آن لائن مشاورتی خدمات فیس کے ساتھ (Paid Services) فراہم کی جاتی ہیں۔</div>
</div>
</div>
</body>
</html>
which chromium-browser || which chromium || which google-chrome || which google-chrome-stable 2>/dev/null; echo "---"; node --version; npm list -g puppeteer 2>/dev/null | head -5
python3 -c "from PIL import Image; print('PIL OK')" 2>/dev/null; python3 -c "import imgkit; print('imgkit OK')" 2>/dev/null; python3 -c "import weasyprint; print('weasyprint OK')" 2>/dev/null; echo "---checking cutycapt/wkhtmltoimage---"; which wkhtmltoimage 2>/dev/null; which cutycapt 2>/dev/null
cd /home/daytona/workspace/acidity-poster && node -e " const { execSync } = require('child_process'); // Try using puppeteer from local install try { require.resolve('puppeteer'); console.log('puppeteer found locally'); } catch(e) { console.log('no local puppeteer, installing...'); execSync('npm install puppeteer --prefix /home/daytona/workspace/acidity-poster', {stdio:'inherit'}); } " 2>&1 | head -5
# Try chromium directly for screenshot /usr/bin/chromium --version && /usr/bin/chromium --headless --disable-gpu --screenshot=/home/daytona/workspace/acidity-poster/poster.png --window-size=1080,1080 "file:///home/daytona/workspace/acidity-poster/poster.html" 2>&1 | tail -5 ls -la /home/daytona/workspace/acidity-poster/poster.png 2>/dev/null || echo "PNG not created"
python3 -c " from PIL import Image img = Image.open('/home/daytona/workspace/acidity-poster/poster.png') print(f'Size: {img.size}, Mode: {img.mode}') "
# Get full page height first /usr/bin/chromium --headless --disable-gpu \ --virtual-time-budget=3000 \ --screenshot=/home/daytona/workspace/acidity-poster/poster_full.png \ --window-size=1080,3600 \ "file:///home/daytona/workspace/acidity-poster/poster.html" 2>&1 | grep -E "bytes|Error" | tail -3 python3 -c " from PIL import Image img = Image.open('/home/daytona/workspace/acidity-poster/poster_full.png') print(f'Full size: {img.size}') "
python3 << 'EOF' from PIL import Image import numpy as np img = Image.open('/home/daytona/workspace/acidity-poster/poster_full.png') arr = np.array(img) # Find last non-background row (background is very dark) # Background color is approximately (10,22,40) - dark blue # Find the last row that has any content (not just background) h, w, c = arr.shape print(f"Image shape: {arr.shape}") # Check bottom rows for y in range(h-1, 0, -1): row = arr[y] # If row has pixels that differ from pure background mean_brightness = row.mean() if mean_brightness > 8: # Not just black/very dark print(f"Last content row: {y}") break # Save cropped version with actual content cropped = img.crop((0, 0, 1080, y+10)) print(f"Cropped size: {cropped.size}") cropped.save('/home/daytona/workspace/acidity-poster/poster_cropped.png') EOF
python3 << 'EOF' from PIL import Image # Load the full poster img = Image.open('/home/daytona/workspace/acidity-poster/poster_full.png') print(f"Original: {img.size}") # Save the full poster as the main deliverable (1080 wide, full height) img.save('/home/daytona/workspace/acidity-poster/Acidity_Poster_Full.png', optimize=True) print("Saved full poster") # Create a 1080x1080 "preview" - show the first 1080px (top portion) preview = img.crop((0, 0, 1080, 1080)) preview.save('/home/daytona/workspace/acidity-poster/Acidity_Poster_Preview_1080x1080.png', optimize=True) print("Saved 1080x1080 preview") # Create a properly scaled version for IG (1080x1350 - portrait) # Scale the full poster to fit in 1080x1350 scale = 1350.0 / img.height new_w = int(img.width * scale) resized = img.resize((new_w, 1350), Image.LANCZOS) # Center crop to 1080 wide left = (new_w - 1080) // 2 resized_crop = resized.crop((left, 0, left+1080, 1350)) resized_crop.save('/home/daytona/workspace/acidity-poster/Acidity_Poster_Instagram_1080x1350.png', optimize=True) print(f"Saved Instagram 1080x1350 version") EOF
ls -lh /home/daytona/workspace/acidity-poster/ python3 -c " from PIL import Image for f in ['Acidity_Poster_Full.png', 'Acidity_Poster_Preview_1080x1080.png', 'Acidity_Poster_Instagram_1080x1350.png']: img = Image.open(f'/home/daytona/workspace/acidity-poster/{f}') print(f'{f}: {img.size}') "
# Clean up temp files rm -f /home/daytona/workspace/acidity-poster/poster.png rm -f /home/daytona/workspace/acidity-poster/poster_full.png rm -f /home/daytona/workspace/acidity-poster/poster_cropped.png rm -rf /home/daytona/workspace/acidity-poster/node_modules echo "Final files:" ls -lh /home/daytona/workspace/acidity-poster/
✅ پوسٹر تیار ہو گیا - Download Links
📥 تینوں فارمیٹس ڈاؤن لوڈ کریں:
| فارمیٹ | سائز | استعمال |
|---|---|---|
| Full Infographic Poster | 1080×3600 px | Facebook, WhatsApp Channel (Full scroll) |
| Square Preview | 1080×1080 px | Instagram Square, WhatsApp Status |
| Portrait Version | 1080×1350 px | Instagram Portrait (Best Engagement) |
Acidity Poster Full
Image · PNG
Acidity Poster Preview 1080x1080
Image · PNG
Acidity Poster Instagram 1080x1350
Image · PNG
poster
HTML File · HTML
🎨 ڈیزائن میں کیا شامل ہے:
- Header: SHIFA ONLINE CONSULTATION بلیو گریڈینٹ بار
- Title Box: گلوئنگ Glassmorphism 3D ہائی لائٹڈ باکس
- تیزابیت کیا ہے: بلیو گلاس کارڈ
- علامات + وجوہات: دو-کالم گرڈ - بلیو vs گرین کارڈز، گلوئنگ ڈاٹس کے ساتھ
- خطرے والے افراد: پرپل تھیم، 6 آئیکن چِپس
- احتیاط: گرین ہائی لائٹڈ باکس، گرین چیک مارکس
- ایمرجنسی: ریڈ وارننگ باکس، بلنکنگ ٹائٹل
- صحت مند عادات: ہل چِپس، ایموجی آئیکنز
- اہم پیغام: گریڈینٹ بارڈر باکس
- Footer: SHIFA برانڈنگ + WhatsApp نمبر + Paid Services نوٹس
- کلر پیلیٹ: Dark Navy, Medical Blue, Teal, Green, Deep Space Background
- ریزولیوشن: Ultra HD 1080px width