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="hi">
\<head>
  \<meta charset="UTF-8">
  \<meta name="viewport" content="width=device-width, initial-scale=1.0">
  \<title>खबर ग्रामीण | गांव-गांव की खबर, हर खबर आप तक\</title>
  
  \<!-- Tailwind CSS CDN -->
  \<script src="[https://cdn.tailwindcss.com](https://cdn.tailwindcss.com)">\</script>
  \<!-- Google Fonts: Noto Sans Devanagari & Hind -->
  \<link rel="preconnect" href="[https://fonts.googleapis.com](https://fonts.googleapis.com)">
  \<link rel="preconnect" href="[https://fonts.gstatic.com](https://fonts.gstatic.com)" crossorigin>
  \<link href="[https://fonts.googleapis.com/css2?family=Hind:wght@400;500;600;700&family=Noto+Sans+Devanagari:wght@500;700;800;900&display=swap](https://fonts.googleapis.com/css2?family=Hind:wght@400;500;600;700\&family=Noto+Sans+Devanagari:wght@500;700;800;900\&display=swap)" rel="stylesheet">
  \<!-- Lucide Icons -->
  \<script src="[https://unpkg.com/lucide@latest](https://unpkg.com/lucide@latest)">\</script>
  \<script>
  tailwind.config = {
  theme: {
  extend: {
  colors: {
  brandRed: '#C70000',
  darkCharcoal: '#111827',
  deepNavy: '#0F172A',
  cardBg: '#F8FAFC',
  borderGray: '#E5E7EB'
  },
  fontFamily: {
  hindi: ['"Noto Sans Devanagari"', '"Hind"', 'sans-serif'],
  body: ['"Hind"', '"Noto Sans Devanagari"', 'sans-serif']
  }
  }
  }
  }
  \</script>
  \<style>
  body { font-family: 'Noto Sans Devanagari', 'Hind', sans-serif; }
  @keyframes tickerSlide {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
  }
  .ticker-anim {
  display: flex;
  width: max-content;
  animation: tickerSlide 28s linear infinite;
  }
  .ticker-anim:hover { animation-play-state: paused; }
  .no-scrollbar::-webkit-scrollbar { display: none; }
  .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
  \</style>
\</head>
\<body class="bg-white text-gray-900 flex flex-col min-h-screen">
  \<!-- ================= 1. TOP UTILITY BAR ================= -->
  \<aside class="bg-darkCharcoal text-gray-300 text-xs py-1.5 px-4 border-b border-gray-800">
  \<div class="max-w-7xl mx-auto flex flex-wrap items-center justify-between gap-2">
  \<div class="flex items-center space-x-3">
  \<span class="flex items-center text-gray-200">
  \<i data-lucide="calendar" class="w-3.5 h-3.5 mr-1 text-brandRed">\</i>
  \<span id="live-date">गुरुवार, 27 अगस्त 2026\</span>
  \</span>
  \<span class="text-gray-600">|\</span>
  \<span class="flex items-center">
  \<i data-lucide="map-pin" class="w-3.5 h-3.5 mr-1 text-brandRed">\</i>
  जबलपुर, म.प्र.
  \</span>
  \<span class="hidden md:inline text-gray-600">|\</span>
  \<span class="hidden md:flex items-center text-amber-400">
  \<i data-lucide="cloud-sun" class="w-3.5 h-3.5 mr-1">\</i>
  31°C आंशिक बादल
  \</span>
  \</div>
  \<div class="flex items-center space-x-4">
  \<a href="#submit-section" class="text-yellow-400 font-bold hover:underline flex items-center">
  \<i data-lucide="send" class="w-3.5 h-3.5 mr-1">\</i>खबर भेजें
  \</a>
  \<a href="#advertise-modal" onclick="alert('विज्ञापन हेतु संपर्क करें: advertise\@khabargramin.in')" class="hover:text-white">विज्ञापन दें\</a>
  \<a href="#" class="hover:text-white">ई-पेपर\</a>
  \</div>
  \</div>
  \</aside>
  \<!-- ================= 2. SECOND HEADER (LOGO & AD SPACE) ================= -->
  \<header class="bg-white border-b border-borderGray py-3 sm:py-4 px-4">
  \<div class="max-w-7xl mx-auto flex flex-col md:flex-row items-center justify-between gap-4">
   
  \<!-- Brand Identity -->
  \<a href="#" class="flex items-center space-x-3 group">
  \<div class="w-11 h-11 bg-darkCharcoal rounded flex items-center justify-center border-b-4 border-brandRed shadow-sm group-hover:bg-brandRed transition">
  \<i data-lucide="radio" class="w-6 h-6 text-white">\</i>
  \</div>
  \<div>
  \<div class="flex items-baseline tracking-tight">
  \<span class="text-3xl sm:text-4xl font-black text-darkCharcoal">खबर\</span>
  \<span class="text-3xl sm:text-4xl font-black text-brandRed ml-1.5">ग्रामीण\</span>
  \</div>
  \<p class="text-[11px] sm:text-xs text-gray-600 font-semibold tracking-wide mt-0.5">
  गांव-गांव की खबर, हर खबर आप तक
  \</p>
  \</div>
  \</a>
  \<!-- 728x90 Billboard Advertisement Slot -->
  \<div class="hidden md:flex flex-col items-center">
  \<div class="w-[520px] lg:w-[680px] h-[78px] bg-cardBg border border-dashed border-gray-300 rounded flex items-center justify-between px-6">
  \<div>
  \<span class="text-[10px] uppercase font-bold text-gray-400 tracking-wider">विज्ञापन (Commercial Space)\</span>
  \<p class="text-sm font-bold text-gray-800">जबलपुर व महाकोशल के लाखों पाठकों तक अपना व्यापार पहुंचाएं\</p>
  \<p class="text-xs text-brandRed font-medium">ईमेल: advertise\@khabargramin.in\</p>
  \</div>
  \<button onclick="alert('विज्ञापन पूछताछ फॉर्म लोड हो रहा है...')" class="text-xs bg-darkCharcoal hover:bg-brandRed text-white font-bold px-3.5 py-1.5 rounded transition">
  विज्ञापन बुक करें
  \</button>
  \</div>
  \</div>
  \</div>
  \</header>
  \<!-- ================= 3. STICKY MAIN NAVIGATION ================= -->
  \<nav class="sticky top-0 z-40 bg-darkCharcoal text-white shadow-md border-b-2 border-brandRed">
  \<div class="max-w-7xl mx-auto px-4 flex items-center justify-between">
  \<ul class="flex items-center overflow-x-auto no-scrollbar py-0 text-sm font-semibold whitespace-nowrap">
  \<li>\<a href="#" class="inline-block px-3.5 py-3 text-white bg-brandRed">\<i data-lucide="home" class="w-4 h-4">\</i>\</a>\</li>
  \<li>\<a href="#tehsil-section" class="inline-block px-3.5 py-3 hover:text-red-400 transition">जबलपुर अंचल\</a>\</li>
  \<li>\<a href="#category-rural" class="inline-block px-3.5 py-3 text-amber-300 hover:text-amber-200 transition">ग्रामीण भारत\</a>\</li>
  \<li>\<a href="#category-agri" class="inline-block px-3.5 py-3 hover:text-red-400 transition">कृषि एवं किसान\</a>\</li>
  \<li>\<a href="#category-politics" class="inline-block px-3.5 py-3 hover:text-red-400 transition">राजनीति\</a>\</li>
  \<li>\<a href="#category-crime" class="inline-block px-3.5 py-3 hover:text-red-400 transition">अपराध व हादसे\</a>\</li>
  \<li>\<a href="#category-ground" class="inline-block px-3.5 py-3 hover:text-red-400 transition">ग्राउंड रिपोर्ट\</a>\</li>
  \<li>\<a href="#category-videos" class="inline-block px-3.5 py-3 hover:text-red-400 transition">वीडियो\</a>\</li>
  \</ul>
  \<div class="hidden lg:flex items-center pl-3">
  \<span class="inline-flex items-center px-3 py-1 rounded bg-red-950 text-brandRed border border-red-800 text-xs font-bold">
  \<span class="w-2 h-2 rounded-full bg-brandRed mr-2 animate-ping">\</span> LIVE DESK
  \</span>
  \</div>
  \</div>
  \</nav>
  \<!-- ================= 4. BREAKING NEWS TICKER ================= -->
  \<section class="bg-gray-100 border-b border-borderGray overflow-hidden">
  \<div class="max-w-7xl mx-auto flex items-center">
  \<div class="bg-brandRed text-white text-xs sm:text-sm font-extrabold px-4 py-2 flex items-center space-x-1.5 shrink-0 z-10">
  \<i data-lucide="zap" class="w-4 h-4 fill-current text-yellow-300 animate-pulse">\</i>
  \<span>ब्रेकिंग न्यूज़\</span>
  \</div>
  \<div class="overflow-hidden relative w-full py-1.5 bg-gray-50 text-xs sm:text-sm font-medium">
  \<div class="ticker-anim space-x-8 text-gray-900">
  \<span class="flex items-center">\<span class="w-1.5 h-1.5 rounded-full bg-brandRed mr-2">\</span>पाटन: इंद्राणा मार्ग निर्माण को लेकर ग्रामीणों ने एसडीएम को सौंपा ज्ञापन, 7 दिन का अल्टीमेटम\</span>
  \<span class="flex items-center">\<span class="w-1.5 h-1.5 rounded-full bg-brandRed mr-2">\</span>जबलपुर: बरगी बांध के 5 गेट खोले गए, नर्मदा तटों पर अलर्ट जारी\</span>
  \<span class="flex items-center">\<span class="w-1.5 h-1.5 rounded-full bg-brandRed mr-2">\</span>कटंगी: मूंग खरीदी केंद्र पर बारदाने की किल्लत से किसान परेशान, चक्काजाम की चेतावनी\</span>
  \<span class="flex items-center">\<span class="w-1.5 h-1.5 rounded-full bg-brandRed mr-2">\</span>मझौली: सिहोरा बायपास पर तेज रफ्तार लोडिंग वाहन पलटा, 2 घायल\</span>
  \</div>
  \</div>
  \</div>
  \</section>
  \<!-- ================= 5. MAIN NEWS GRID ================= -->
  \<main class="max-w-7xl mx-auto px-4 py-6 w-full flex-grow">
   
  \<!-- Hero Editorial Row -->
  \<div class="grid grid-cols-1 lg:grid-cols-12 gap-6 mb-10">
   
  \<!-- Lead 8-Column Block -->
  \<div class="lg:col-span-8 space-y-6">
   
  \<!-- Large Featured Hero Card -->
  \<article class="bg-white border border-borderGray rounded overflow-hidden shadow-sm group">
  \<div class="relative aspect-video overflow-hidden bg-gray-900">
  \<img src="[https://images.unsplash.com/photo-1515694346937-94d85e41e6f0?w=1000&auto=format&fit=crop&q=80](https://images.unsplash.com/photo-1515694346937-94d85e41e6f0?w=1000\&auto=format\&fit=crop\&q=80)" alt="जबलपुर बारिश" class="w-full h-full object-cover group-hover:scale-105 transition duration-500 opacity-90" />
  \<div class="absolute inset-0 bg-gradient-to-t from-black/95 via-black/40 to-transparent">\</div>
  \<div class="absolute bottom-0 left-0 right-0 p-5 sm:p-6 text-white">
  \<div class="flex items-center space-x-2 mb-2">
  \<span class="bg-brandRed text-white text-xs font-black px-2.5 py-0.5 rounded-sm">प्रमुख खबर\</span>
  \<span class="bg-black/60 text-yellow-300 text-xs font-semibold px-2 py-0.5 rounded-sm">जबलपुर अंचल\</span>
  \</div>
  \<h1 class="text-xl sm:text-2xl md:text-3xl font-black text-white leading-tight group-hover:text-red-300 transition">
  जबलपुर में मूसलाधार बारिश के बाद नर्मदा का जलस्तर बढ़ा, बरगी बांध के 5 गेट खोले गए
  \</h1>
  \<p class="hidden sm:block text-xs sm:text-sm text-gray-200 mt-2 line-clamp-2">
  संस्कारधानी जबलपुर में बीते 24 घंटों में 4 इंच से अधिक वर्षा दर्ज की गई है। ग्वारीघाट, तिलवाराघाट और भेड़ाघाट पर प्रशासन ने सतर्कता बढ़ा दी है।
  \</p>
  \<div class="flex items-center space-x-4 text-xs text-gray-300 mt-3 pt-3 border-t border-white/20">
  \<span>संवाददाता: \<strong class="text-white">सुखदेव राजपूत\</strong>\</span>
  \<span>•\</span>
  \<span>27 अगस्त 2026, 10:45 AM\</span>
  \</div>
  \</div>
  \</div>
  \</article>
  \<!-- 2x2 Sub-News Cards -->
  \<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
  \<article class="bg-white border rounded p-3 hover:border-brandRed/60 transition group shadow-sm">
  \<div class="aspect-[16/10] overflow-hidden rounded mb-2.5 bg-gray-100">
  \<img src="[https://images.unsplash.com/photo-1590856029826-c7a73142bbf1?w=800&auto=format&fit=crop&q=80](https://images.unsplash.com/photo-1590856029826-c7a73142bbf1?w=800\&auto=format\&fit=crop\&q=80)" alt="पाटन सड़क" class="w-full h-full object-cover group-hover:scale-105 transition duration-300" />
  \</div>
  \<span class="text-[10px] font-bold text-brandRed uppercase">पाटन तहसील\</span>
  \<h2 class="text-sm font-bold text-gray-900 line-clamp-2 mt-1 leading-snug group-hover:text-brandRed transition">
  इंद्राणा मार्ग की खस्ताहाली से नाराज़ ग्रामीणों ने एसडीएम को सौंपा ज्ञापन, 7 दिन का अल्टीमेटम
  \</h2>
  \<div class="text-[11px] text-gray-500 mt-2 pt-2 border-t flex justify-between">
  \<span>संवाददाता: अमित पटेल\</span>
  \<span>आज, 09:30 AM\</span>
  \</div>
  \</article>
  \<article class="bg-white border rounded p-3 hover:border-brandRed/60 transition group shadow-sm">
  \<div class="aspect-[16/10] overflow-hidden rounded mb-2.5 bg-gray-100">
  \<img src="[https://images.unsplash.com/photo-1592982537447-7440770cbfc9?w=800&auto=format&fit=crop&q=80](https://images.unsplash.com/photo-1592982537447-7440770cbfc9?w=800\&auto=format\&fit=crop\&q=80)" alt="कटंगी किसान" class="w-full h-full object-cover group-hover:scale-105 transition duration-300" />
  \</div>
  \<span class="text-[10px] font-bold text-emerald-700 uppercase">कृषि व मंडी\</span>
  \<h2 class="text-sm font-bold text-gray-900 line-clamp-2 mt-1 leading-snug group-hover:text-brandRed transition">
  कटंगी: उपार्जन केंद्र पर बारदाने का संकट, ट्रॉलियों की लंबी कतारों में रात गुजार रहे किसान
  \</h2>
  \<div class="text-[11px] text-gray-500 mt-2 pt-2 border-t flex justify-between">
  \<span>संवाददाता: राजेश लोधी\</span>
  \<span>आज, 08:15 AM\</span>
  \</div>
  \</article>
  \</div>
  \</div>
  \<!-- Right 4-Column Sidebar -->
  \<aside class="lg:col-span-4 space-y-6">
   
  \<!-- Trending Widget -->
  \<div class="bg-white border rounded p-4 shadow-sm">
  \<div class="border-b-2 border-brandRed pb-2 mb-3">
  \<h3 class="font-extrabold text-base text-gray-900 flex items-center">
  \<i data-lucide="trending-up" class="w-4 h-4 text-brandRed mr-2">\</i>
  ट्रेंडिंग एवं सर्वाधिक पढ़ी गई
  \</h3>
  \</div>
  \<div class="divide-y text-xs">
  \<div class="py-2.5 flex space-x-3 group cursor-pointer">
  \<span class="text-2xl font-black text-gray-300 group-hover:text-brandRed">01\</span>
  \<div>
  \<span class="text-[10px] font-bold text-brandRed uppercase">सिहोरा\</span>
  \<p class="font-bold text-gray-800 group-hover:text-brandRed line-clamp-2">सिहोरा को जिला बनाने की मांग को लेकर संघर्ष समिति का महासम्मेलन\</p>
  \</div>
  \</div>
  \<div class="py-2.5 flex space-x-3 group cursor-pointer">
  \<span class="text-2xl font-black text-gray-300 group-hover:text-brandRed">02\</span>
  \<div>
  \<span class="text-[10px] font-bold text-brandRed uppercase">मझौली\</span>
  \<p class="font-bold text-gray-800 group-hover:text-brandRed line-clamp-2">मझौली में सड़क हादसे के बाद लोगों ने लगाया जाम, पुलिस ने संभाला मोर्चा\</p>
  \</div>
  \</div>
  \<div class="py-2.5 flex space-x-3 group cursor-pointer">
  \<span class="text-2xl font-black text-gray-300 group-hover:text-brandRed">03\</span>
  \<div>
  \<span class="text-[10px] font-bold text-brandRed uppercase">बरेला\</span>
  \<p class="font-bold text-gray-800 group-hover:text-brandRed line-clamp-2">बरेला की महिला स्व-सहायता समूह ने जैविक खाद उत्पादन में बनाया रिकॉर्ड\</p>
  \</div>
  \</div>
  \</div>
  \</div>
  \<!-- WhatsApp CTA -->
  \<div class="bg-emerald-900 text-white rounded p-4 text-center">
  \<i data-lucide="message-circle" class="w-8 h-8 mx-auto text-emerald-400 mb-2">\</i>
  \<h4 class="font-bold text-base">खबर ग्रामीण WhatsApp चैनल\</h4>
  \<p class="text-xs text-emerald-100 mt-1 mb-3">हर जरूरी स्थानीय खबर सीधे अपने मोबाइल पर प्राप्त करें।\</p>
  \<a href="[https://whatsapp.com](https://whatsapp.com)" target="\_blank" class="inline-block bg-emerald-500 hover:bg-emerald-400 text-gray-950 text-xs font-black px-4 py-2 rounded transition">
  चैनल से जुड़ें
  \</a>
  \</div>
  \</aside>
  \</div>
  \<!-- ================= 6. HYPERLOCAL TEHSIL TABS ================= -->
  \<section id="tehsil-section" class="bg-cardBg border border-borderGray rounded-lg p-5 mb-10 shadow-sm">
  \<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 border-b border-gray-300 pb-3 mb-4">
  \<div>
  \<h2 class="text-xl font-extrabold text-darkCharcoal flex items-center">
  \<span class="w-3 h-5 bg-brandRed rounded-sm mr-2 inline-block">\</span>
  आपके क्षेत्र की खबरें (तहसील चयन)
  \</h2>
  \<p class="text-xs text-gray-600 mt-0.5">जबलपुर जिले की प्रत्येक तहसील व ग्रामीण अंचल की ताज़ा खबरें\</p>
  \</div>
   
  \<!-- Interactive Buttons -->
  \<div class="flex items-center space-x-1.5 overflow-x-auto no-scrollbar py-1 text-xs font-bold">
  \<button onclick="renderTehsil('all', this)" class="tehsil-btn px-3 py-1.5 rounded bg-brandRed text-white">सभी क्षेत्र\</button>
  \<button onclick="renderTehsil('patan', this)" class="tehsil-btn px-3 py-1.5 rounded bg-white text-gray-700 border hover:bg-gray-100">पाटन\</button>
  \<button onclick="renderTehsil('majholi', this)" class="tehsil-btn px-3 py-1.5 rounded bg-white text-gray-700 border hover:bg-gray-100">मझौली\</button>
  \<button onclick="renderTehsil('katangi', this)" class="tehsil-btn px-3 py-1.5 rounded bg-white text-gray-700 border hover:bg-gray-100">कटंगी\</button>
  \<button onclick="renderTehsil('sihora', this)" class="tehsil-btn px-3 py-1.5 rounded bg-white text-gray-700 border hover:bg-gray-100">सिहोरा\</button>
  \<button onclick="renderTehsil('shahpura', this)" class="tehsil-btn px-3 py-1.5 rounded bg-white text-gray-700 border hover:bg-gray-100">शहपुरा\</button>
  \<button onclick="renderTehsil('belkheda', this)" class="tehsil-btn px-3 py-1.5 rounded bg-white text-gray-700 border hover:bg-gray-100">बेलखेड़ा\</button>
  \<button onclick="renderTehsil('barela', this)" class="tehsil-btn px-3 py-1.5 rounded bg-white text-gray-700 border hover:bg-gray-100">बरेला\</button>
  \</div>
  \</div>
  \<!-- Dynamic Cards Grid -->
  \<div id="tehsil-grid" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
  \<!-- Injected via JavaScript below -->
  \</div>
  \</section>
  \<!-- ================= 7. CITIZEN JOURNALISM SUBMISSION ================= -->
  \<section id="submit-section" class="max-w-3xl mx-auto bg-white border border-borderGray rounded-lg shadow-sm p-6 mb-10">
  \<div class="border-b pb-3 mb-4">
  \<span class="text-xs font-bold text-brandRed uppercase">नागरिक पत्रकारिता मंच\</span>
  \<h2 class="text-2xl font-black text-darkCharcoal mt-0.5">अपनी खबर हमें भेजें\</h2>
  \<p class="text-xs text-gray-600 mt-1">गांव की सड़क, बिजली, पानी, कृषि समस्या या भ्रष्टाचार का विवरण साझा करें।\</p>
  \</div>
  \<form onsubmit="handleCitizenSubmit(event)" class="space-y-4 text-xs sm:text-sm">
  \<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
  \<div>
  \<label class="block font-bold text-gray-700 mb-1">आपका नाम \*\</label>
  \<input type="text" required class="w-full border rounded px-3 py-2 text-xs focus:outline-none focus:border-brandRed" placeholder="उदा. रामेश्वर सिंह" />
  \</div>
  \<div>
  \<label class="block font-bold text-gray-700 mb-1">मोबाइल नंबर (सत्यापन हेतु) \*\</label>
  \<input type="tel" required class="w-full border rounded px-3 py-2 text-xs focus:outline-none focus:border-brandRed" placeholder="10 अंकों का नंबर" />
  \</div>
  \</div>
  \<div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
  \<div>
  \<label class="block font-bold text-gray-700 mb-1">तहसील चुनें \*\</label>
  \<select class="w-full border rounded px-3 py-2 text-xs bg-white">
  \<option>पाटन\</option>
  \<option>मझौली\</option>
  \<option>कटंगी\</option>
  \<option>सिहोरा\</option>
  \<option>शहपुरा\</option>
  \<option>बेलखेड़ा\</option>
  \<option>बरेला\</option>
  \<option>जबलपुर शहरी\</option>
  \</select>
  \</div>
  \<div class="sm:col-span-2">
  \<label class="block font-bold text-gray-700 mb-1">गांव / मोहल्ला / स्थान \*\</label>
  \<input type="text" required class="w-full border rounded px-3 py-2 text-xs focus:outline-none focus:border-brandRed" placeholder="उदा. ग्राम कुसली" />
  \</div>
  \</div>
  \<div>
  \<label class="block font-bold text-gray-700 mb-1">खबर का शीर्षक \*\</label>
  \<input type="text" required class="w-full border rounded px-3 py-2 text-xs focus:outline-none focus:border-brandRed" placeholder="मुख्य समस्या या घटना का विषय" />
  \</div>
  \<div>
  \<label class="block font-bold text-gray-700 mb-1">खबर का पूरा विवरण \*\</label>
  \<textarea rows="4" required class="w-full border rounded px-3 py-2 text-xs focus:outline-none focus:border-brandRed" placeholder="पूरी जानकारी लिखें...">\</textarea>
  \</div>
  \<button type="submit" class="w-full bg-brandRed hover:bg-red-800 text-white font-bold py-2.5 rounded text-sm transition">
  संपादकीय डेस्क को खबर भेजें
  \</button>
  \</form>
  \</section>
  \</main>
  \<!-- ================= 8. FOOTER ================= -->
  \<footer class="bg-darkCharcoal text-gray-300 border-t-4 border-brandRed pt-8 pb-6 text-xs">
  \<div class="max-w-7xl mx-auto px-4 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
  \<div>
  \<div class="flex items-baseline space-x-1 mb-2">
  \<span class="text-xl font-black text-white">खबर\</span>
  \<span class="text-xl font-black text-brandRed">ग्रामीण\</span>
  \</div>
  \<p class="text-gray-400 leading-relaxed">
  जबलपुर, पाटन, मझौली, कटंगी, सिहोरा, शहपुरा, बेलखेड़ा और बरेला सहित संपूर्ण मध्य प्रदेश की प्रामाणिक डिजिटल पत्रकारिता।
  \</p>
  \</div>
  \<div>
  \<h4 class="text-white font-bold mb-2">कवरेज अंचल\</h4>
  \<p class="text-gray-400 leading-loose">पाटन • मझौली • कटंगी • सिहोरा • शहपुरा • बेलखेड़ा • बरेला • जबलपुर\</p>
  \</div>
  \<div>
  \<h4 class="text-white font-bold mb-2">संपादकीय नीतियां\</h4>
  \<ul class="space-y-1.5 text-gray-400">
  \<li>\<a href="#" class="hover:text-white">तथ्य जांच (Fact Check)\</a>\</li>
  \<li>\<a href="#" class="hover:text-white">गोपनीयता नीति\</a>\</li>
  \<li>\<a href="#" class="hover:text-white">शिकायत निवारण\</a>\</li>
  \</ul>
  \</div>
  \<div>
  \<h4 class="text-white font-bold mb-2">संपर्क\</h4>
  \<p class="text-gray-400">न्यूज़रूम: editor\@khabargramin.in\<br/>विज्ञापन: advertise\@khabargramin.in\</p>
  \</div>
  \</div>
  \<div class="max-w-7xl mx-auto px-4 pt-4 border-t border-gray-800 text-center text-gray-500">
  © 2026 खबर ग्रामीण (Khabar Gramin). सर्वाधिकार सुरक्षित।
  \</div>
  \</footer>
  \<!-- ================= LOGIC & INTERACTION SCRIPT ================= -->
  \<script>
  const newsData = [
  { id: 1, tehsil: 'patan', location: 'पाटन', title: 'इंद्राणा मार्ग की खस्ताहाली से नाराज़ ग्रामीणों ने एसडीएम को सौंपा ज्ञापन', category: 'ग्रामीण विकास', reporter: 'अमित पटेल' },
  { id: 2, tehsil: 'majholi', location: 'मझौली', title: 'सिहोरा मार्ग पर मोड़ के पास अनियंत्रित होकर पलटा वाहन, 2 घायल', category: 'हादसा', reporter: 'दिनेश यादव' },
  { id: 3, tehsil: 'katangi', location: 'कटंगी', title: 'उपार्जन केंद्र पर बारदाने का संकट, ट्रॉलियों की लंबी कतारों में रात गुजार रहे किसान', category: 'कृषि', reporter: 'राजेश लोधी' },
  { id: 4, tehsil: 'sihora', location: 'सिहोरा', title: 'सीएम राइज स्कूल में आधुनिक विज्ञान प्रयोगशाला और लाइब्रेरी का लोकार्पण', category: 'शिक्षा', reporter: 'प्रमोद तिवारी' },
  { id: 5, tehsil: 'shahpura', location: 'शहपुरा', title: 'नल-जल योजना की पाइपलाइन फटने से 5 वार्डों में गहराया पेयजल संकट', category: 'जनसमस्या', reporter: 'अमित पटेल' },
  { id: 6, tehsil: 'belkheda', location: 'बेलखेड़ा', title: 'नर्मदा किनारे अवैध रेत उत्खनन पर खनिज विभाग का छापा, 4 वाहन ज़ब्त', category: 'ग्राउंड रिपोर्ट', reporter: 'सुखदेव राजपूत' },
  { id: 7, tehsil: 'barela', location: 'बरेला', title: 'महिला स्व-सहायता समूह ने जैविक खाद निर्माण में बनाया कीर्तिमान', category: 'सफलता', reporter: 'अमित पटेल' },
  { id: 8, tehsil: 'jabalpur', location: 'जबलपुर', title: 'बरगी बांध के 5 गेट खोले गए, नर्मदा तटों पर अलर्ट जारी', category: 'प्रशासन', reporter: 'सुखदेव राजपूत' }
  ];
  function renderTehsil(tehsilKey, btn) {
  if (btn) {
  document.querySelectorAll('.tehsil-btn').forEach(b => {
  b.className = 'tehsil-btn px-3 py-1.5 rounded bg-white text-gray-700 border hover:bg-gray-100';
  });
  btn.className = 'tehsil-btn px-3 py-1.5 rounded bg-brandRed text-white';
  }
  const grid = document.getElementById('tehsil-grid');
  const filtered = tehsilKey === 'all' ? newsData : newsData.filter(n => n.tehsil === tehsilKey);
  if (filtered.length === 0) {
  grid.innerHTML = '\<div class="col-span-4 text-center py-6 text-gray-500 text-xs">इस क्षेत्र से अभी कोई नई खबर नहीं है।\</div>';
  return;
  }
  grid.innerHTML = filtered.map(item => \`
  \<article class="bg-white border rounded p-3 flex flex-col justify-between hover:border-brandRed transition shadow-sm">
  \<div>
  \<span class="text-[10px] font-bold bg-darkCharcoal text-white px-1.5 py-0.5 rounded">${item.location}\</span>
  \<span class="text-[10px] text-brandRed font-bold uppercase ml-1">${item.category}\</span>
  \<h3 class="text-xs font-bold text-gray-900 mt-2 line-clamp-2 leading-snug">${item.title}\</h3>
  \</div>
  \<div class="mt-3 pt-2 border-t flex justify-between text-[10px] text-gray-500">
  \<span>रिपोर्टर: ${item.reporter}\</span>
  \<span class="text-brandRed font-bold cursor-pointer">पढ़ें →\</span>
  \</div>
  \</article>
  \`).join('');
  if (window\.lucide) lucide.createIcons();
  }
  function handleCitizenSubmit(e) {
  e.preventDefault();
  alert("आपकी खबर खबर ग्रामीण संपादकीय डेस्क को सफलतापूर्वक प्राप्त हो गई है। सत्यापन उपरांत इसे प्रकाशित किया जाएगा।");
  e.target.reset();
  }
  document.addEventListener('DOMContentLoaded', () => {
  renderTehsil('all');
  if (window\.lucide) lucide.createIcons();
  });
  \</script>
\</body>
\</html>Landing Page
This ad does not have a landing page available
Network Timeline
Performance Summary
7
Requests
1
Domains
34KB
Transfer Size
35KB
Content Size
697.0ms
Dom Content Loaded
504.0ms
First Paint
699.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...