/* ===== گوگل بلاگر سائڈبار کے لیے انتہائی خوبصورت اردو ویجٹ ===== */
.dastangou-ramadan-widget {
all: initial;
display: block;
max-width: 420px;
width: 100%;
margin: 0 auto;
background: #fffbf2; /* ہلکی کریم */
font-family: ‘Noto Nastaliq Urdu’, ‘Jameel Noori Nastaleeq’, ‘Segoe UI’, ‘Tahoma’, sans-serif;
color: #32281c;
border-radius: 40px 40px 30px 30px;
box-shadow: 0 25px 45px rgba(110, 70, 30, 0.25);
overflow: hidden;
border: 1px solid #e0cdb0;
transition: 0.3s;
}
.dastangou-ramadan-widget * {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* === ثقافتی / اردو ادبی رنگ پیلیٹ (خوبصورت اور پُرجوش) === */
:root {
–d-deep-burgundy: #8b3c3c;
–d-royal-gold: #c49a1c;
–d-soft-gold: #f0c45a;
–d-islamic-green: #1f6d5a;
–d-cream-light: #fff7e8;
–d-ink-soft: #4a3724;
–d-rose-gold: #d68b5c;
–d-teal-light: #479b8a;
}

/* ===== ہیڈر: لوگو + تعارف ===== */
.widget-header {
background: linear-gradient(165deg, #ffffff 0%, #faebd2 100%);
padding: 25px 18px 20px;
text-align: center;
border-bottom: 8px double #b59b76;
position: relative;
box-shadow: inset 0 -5px 15px rgba(170, 120, 20, 0.1);
}

/* لوگو کنٹینر – بالکل آپ کی فراہم کردہ تصویر */
.dastangou-logo-area {
margin-bottom: 12px;
}
.dastangou-logo-area .separator {
clear: both;
display: block;
padding: 0.8em 0;
text-align: center;
}
.dastangou-logo-area .separator img {
max-width: 100%;
height: auto;
width: 340px;
border-radius: 20px;
border: 5px solid #e9d4b0;
box-shadow: 0 15px 30px rgba(120, 70, 30, 0.2);
background: white;
}

.website-title {
font-size: 1.9rem;
font-weight: 700;
color: #2d674b;
text-shadow: 3px 3px 0 #f0cd94;
letter-spacing: 1px;
line-height: 1.4;
margin-top: 8px;
}
.website-title i {
color: #b8863a;
}
.tagline {
background: #e3cfb2;
display: inline-block;
padding: 6px 25px;
border-radius: 60px;
font-size: 0.8rem;
color: #1d4e3a;
margin: 12px 0 5px;
border: 1px solid #c49a6c;
box-shadow: 0 3px 0 #9f8b78;
}

/* ===== نیا خوبصورت تعارف: اردو فروغ کے جملے (بہت دلچسپ) ===== */
.urdu-mission {
background: #f5ede1;
background-image: linear-gradient(135deg, #fffaf0, #faefdd);
padding: 22px 16px;
border-radius: 35px 8px 35px 8px;
margin: 18px 0 10px;
border-right: 10px solid #1f6d5a;
border-left: 2px solid #d68b5c;
color: #1e3f32;
box-shadow: inset 0 -2px 0 #bda37c, 0 6px 0 #9f886b;
font-size: 0.95rem;
line-height: 1.9;
}
.urdu-mission p {
margin-bottom: 14px;
}
.urdu-mission strong {
color: #aa4c4c;
font-size: 1rem;
}
.urdu-mission i {
color: #b8863a;
margin-left: 5px;
margin-right: 5px;
}
.urdu-mission .poetry-line {
font-size: 1rem;
color: #8b3c3c;
background: rgba(196, 154, 28, 0.1);
padding: 8px 15px;
border-radius: 50px;
display: inline-block;
margin: 5px 0;
border: 1px dashed #c49a1c;
}

/* بٹن – خوبصورت اور رنگین */
.action-buttons {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 12px;
margin: 15px 0 5px;
}
.writer-invite-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
background: linear-gradient(145deg, #2d6b5a, #1d5445);
color: white;
padding: 14px 28px;
border-radius: 60px;
text-decoration: none;
font-weight: bold;
font-size: 0.95rem;
border: 2px solid #f5cf81;
box-shadow: 0 7px 0 #1f4035;
transition: 0.1s;
}
.writer-invite-btn:hover {
transform: translateY(-4px);
box-shadow: 0 11px 0 #1f4035;
background: #1f6d5a;
}
.whatsapp-contact {
display: inline-flex;
align-items: center;
gap: 8px;
background: linear-gradient(145deg, #25D366, #128C7E);
color: white;
padding: 8px 18px;
border-radius: 50px;
text-decoration: none;
font-size: 0.8rem;
margin: 2px;
border: 2px solid #b9f5d9;
box-shadow: 0 5px 0 #0b4f3c;
}

/* ===== مرکزی مواد — شہر اور کیلنڈر ===== */
.widget-main {
padding: 18px 14px;
background: #fffbf5;
}

/* شہر پینل */
.cities-panel {
background: #f2ede3;
border-radius: 28px;
padding: 18px 14px;
border: 1px solid #dbbd9c;
box-shadow: inset 0 0 0 2px #fff, 0 10px 0 #9f8b78;
margin-bottom: 22px;
}
.panel-title {
color: #1e6b54;
font-size: 1.5rem;
border-bottom: 4px dotted #c49a6c;
padding-bottom: 8px;
margin-bottom: 15px;
display: flex;
align-items: center;
gap: 10px;
}
.city-list {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
.city-card {
background: #fffbee;
padding: 12px 8px;
border-radius: 20px;
border-right: 8px solid #59806f;
transition: 0.2s;
cursor: pointer;
box-shadow: 0 4px 0 #a6907c;
border: 1px solid #ddc5a5;
}
.city-card.active, .city-card:hover {
border-right-color: #e3a13b;
background: #fbeedb;
transform: translateY(-3px);
box-shadow: 0 7px 0 #9b7b5e;
}
.city-name {
font-size: 1.1rem;
color: #6a4f33;
font-weight: 700;
}
.city-timings {
font-size: 0.65rem;
color: #4f3e2c;
}

/* کیلنڈر پینل */
.calendar-panel {
background: #f4efe5;
border-radius: 40px 12px 40px 12px;
padding: 18px 12px;
border: 1px solid #c8ad7a;
box-shadow: 0 10px 0 #8d735a;
margin-bottom: 10px;
}
.calendar-header {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
background: #dac0a1;
padding: 12px 18px;
border-radius: 50px;
color: #1e352b;
margin-bottom: 18px;
border: 1px solid #b5966a;
}
.selected-city {
font-size: 1.1rem;
font-weight: 800;
}
.calendar-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
}
.calendar-day {
background: #fff9ef;
padding: 9px 4px;
border-radius: 18px;
text-align: center;
border: 1px solid #b7a081;
box-shadow: 0 5px 0 #9b856b;
}
.day-number {
font-size: 1.2rem;
font-weight: bold;
color: #6a4f33;
}
.day-sehr { color: #1f6d5a; font-size: 0.6rem; font-weight: 600; }
.day-iftar { color: #aa4c4c; font-size: 0.6rem; font-weight: 600; }

/* ادبی فیچرز */
.literary-features {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 20px;
justify-content: center;
}
.literary-feature-item {
background: #e7dcc0;
padding: 8px 16px;
border-radius: 40px;
font-size: 0.7rem;
color: #2d4d42;
border: 1px solid #b5966a;
box-shadow: 0 3px 0 #8d7a5e;
}

/* فوٹر */
.widget-footer {
background: #2d4d42;
color: #faf0dd;
padding: 20px 12px;
text-align: center;
font-size: 0.7rem;
border-top: 10px solid #b8916a;
}
.footer-logo {
margin: 10px 0 5px;
}
.footer-logo .separator {
clear: both;
display: block;
padding: 0.5em 0;
text-align: center;
}
.footer-logo .separator img {
max-width: 100%;
height: auto;
width: 220px;
border-radius: 12px;
border: 3px solid #b5966a;
opacity: 0.95;
}
.footer-links a {
color: #f7d9a0;
margin: 0 8px;
text-decoration: none;
}

@media (max-width: 350px) {
.city-list { grid-template-columns: 1fr; }
.calendar-grid { grid-template-columns: repeat(2, 1fr); }
.action-buttons { flex-direction: column; align-items: center; }
}

داستاں گو

اردو زبان و ادب کی آبیاری

؎ ہم نے چھیڑی ہے داستاں اپنی ؎

💫 اردو زبان کی مٹھاس، ادب کی رعنائی، تاریخ کی گہرائی 💫

📚 ہماری ویب سائٹ پر آپ کو ملے گا:

✨ منتخب شاعری ✨ اقوالِ زریں ✨ تاریخ کے درخشاں باب
✨ حالاتِ حاضرہ ✨ سائنسی و معلوماتی مضامین ✨ ادب کے گُل

قلم اٹھا تو کرامات ہوتی ہیں

ہر تحریر ایک نئی صبح کی مانند ہوتی ہے

کیا آپ کے قلم میں بھی ہے کمال؟
اگر آپ کسی موضوع پر لکھ سکتے ہیں — چاہے وہ غزل ہو، افسانہ، مضمون، تحقیق یا کوئی بھی تحریر — تو ہم سے رابطہ کریں۔
📝 ہم آپ کی تحریر کو شرفِ اشاعت دیں گے۔
کیونکہ یہ ویب سائٹ ہماری نہیں، بلکہ آپ کی ہے۔

آئیں مل کر اردو کو پروان چڑھائیں

dastangou.xyz



+92 313 2018313

تحریر و تعاون کے لیے رابطہ کریں

پاکستان کے 15 شہر

رمضان 1447

سحری • افطاری (تخمینہ)

غالبؔ
اقبالؔ
منٹو
فرازؔ
تاریخ
سائنس

اردو ہماری پہچان

© 2026 داستاں گو • رمضان کیلنڈر برائے احباب

ویب سائٹ
واٹس ایپ

// === پاکستان کے 15 شہر – رمضان 2026 (درست شدہ اوقات بمطابق سرگودھا 5:57 PM) ===
const citiesData = {
“islamabad”: { name: “اسلام آباد”, sehr: “05:23 AM”, iftar: “05:56 PM”, offsetSehr: -1.0, offsetIftar: 1.0 },
“karachi”: { name: “کراچی”, sehr: “05:48 AM”, iftar: “06:20 PM”, offsetSehr: -1.0, offsetIftar: 1.0 },
“lahore”: { name: “لاہور”, sehr: “05:17 AM”, iftar: “05:53 PM”, offsetSehr: -1.0, offsetIftar: 1.0 },
“rawalpindi”: { name: “راولپنڈی”, sehr: “05:24 AM”, iftar: “05:57 PM”, offsetSehr: -1.0, offsetIftar: 1.0 },
“faisalabad”: { name: “فیصل آباد”, sehr: “05:20 AM”, iftar: “05:54 PM”, offsetSehr: -1.0, offsetIftar: 1.0 },
“multan”: { name: “ملتان”, sehr: “05:26 AM”, iftar: “06:02 PM”, offsetSehr: -1.0, offsetIftar: 1.0 },
“peshawar”: { name: “پشاور”, sehr: “05:18 AM”, iftar: “05:50 PM”, offsetSehr: -1.0, offsetIftar: 1.0 },
“quetta”: { name: “کوئٹہ”, sehr: “05:43 AM”, iftar: “06:15 PM”, offsetSehr: -1.0, offsetIftar: 1.0 },
“sargodha”: { name: “سرگودھا”, sehr: “05:21 AM”, iftar: “05:57 PM”, offsetSehr: -1.0, offsetIftar: 1.0 },
“sialkot”: { name: “سیالکوٹ”, sehr: “05:16 AM”, iftar: “05:52 PM”, offsetSehr: -1.0, offsetIftar: 1.0 },
“gujranwala”: { name: “گجرانوالہ”, sehr: “05:18 AM”, iftar: “05:53 PM”, offsetSehr: -1.0, offsetIftar: 1.0 },
“bahawalpur”: { name: “بہاولپور”, sehr: “05:30 AM”, iftar: “06:05 PM”, offsetSehr: -1.0, offsetIftar: 1.0 },
“sukkur”: { name: “سکھر”, sehr: “05:42 AM”, iftar: “06:15 PM”, offsetSehr: -1.0, offsetIftar: 1.0 },
“jhelum”: { name: “جہلم”, sehr: “05:22 AM”, iftar: “05:56 PM”, offsetSehr: -1.0, offsetIftar: 1.0 },
“hyderabad”: { name: “حیدرآباد”, sehr: “05:46 AM”, iftar: “06:18 PM”, offsetSehr: -1.0, offsetIftar: 1.0 }
};

const days = [“اتوار”, “پیر”, “منگل”, “بدھ”, “جمعرات”, “جمعہ”, “ہفتہ”];
// ✅ درست تاریخ آغاز: 19 فروری 2026
const startDate = new Date(‘2026-02-19’);

function generateCityList() {
const cityList = document.getElementById(‘cityList’);
let html = ”;
for (let id in citiesData) {
let c = citiesData[id];
html += `

`;
}
cityList.innerHTML = html;
selectCity(‘islamabad’);
}

window.selectCity = function(cityId) {
document.querySelectorAll(‘.city-card’).forEach(el => el.classList.remove(‘active’));
let activeCity = document.getElementById(`city-${cityId}`);
if (activeCity) activeCity.classList.add(‘active’);
document.getElementById(‘selectedCity’).innerText = `${citiesData[cityId].name} • رمضان 1447`;
generateCalendar(cityId);
};

function generateCalendar(cityId) {
let city = citiesData[cityId];
let grid = document.getElementById(‘calendarGrid’);
let html = ”;
for (let d = 1; d <= 30; d++) {
let date = new Date(startDate);
date.setDate(startDate.getDate() + d – 1);
let dayName = days[date.getDay()];
let sehrAdj = adjustTime(city.sehr, d, city.offsetSehr);
let iftarAdj = adjustTime(city.iftar, d, city.offsetIftar);
html += `

`;
}
grid.innerHTML = html;
}

function adjustTime(t, day, offset) {
let parts = t.match(/(d+):(d+) (AM|PM)/);
if (!parts) return t;
let h = parseInt(parts[1]), m = parseInt(parts[2]), p = parts[3];
let total = (h % 12) * 60 + m + (p === ‘PM’ ? 720 : 0);
total += (day – 1) * offset;
let nh = Math.floor(total / 60) % 24;
let nm = Math.floor(total % 60);
let np = nh >= 12 ? ‘PM’ : ‘AM’;
nh = nh % 12 || 12;
return `${nh.toString().padStart(2,’0′)}:${nm.toString().padStart(2,’0′)} ${np}`;
}

function updateDateRange() {
let end = new Date(startDate);
end.setDate(startDate.getDate() + 29);
let s = startDate.toLocaleDateString(‘ur-PK’, { day: ‘numeric’, month: ‘long’ });
let e = end.toLocaleDateString(‘ur-PK’, { day: ‘numeric’, month: ‘long’, year: ‘numeric’ });
document.getElementById(‘currentDate’).innerText = `${s} – ${e}`;
}

document.addEventListener(‘DOMContentLoaded’, function() {
generateCityList();
updateDateRange();
});