TV Serial TRP Rating Tracker

<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&family=Hind:wght@400;500;600&family=Bebas+Neue&display=swap" rel="stylesheet">

<div id="trp-widget">
<style>
  #trp-widget{
    --trp-bg: #0D0F14;
    --trp-surface: #161922;
    --trp-surface-2: #1E222E;
    --trp-line: #2A2F3D;
    --trp-text: #F5F3EE;
    --trp-muted: #8B90A3;
    --trp-gold: #E8B54B;
    --trp-gold-dim: #6b5527;
    --trp-rise: #4ADE80;
    --trp-fall: #F87171;
    --trp-flat: #8B90A3;

    all: initial;
    display: block;
    box-sizing: border-box;
    background: var(--trp-bg);
    color: var(--trp-text);
    font-family: 'Hind', sans-serif;
    -webkit-font-smoothing: antialiased;
    border-radius: 18px;
    overflow: hidden;
  }
  #trp-widget *{ box-sizing: border-box; }
  #trp-widget .trp-wrap{ max-width: 880px; margin: 0 auto; padding: 28px 18px 40px; }

  #trp-widget .trp-hero{
    position: relative;
    border-radius: 18px;
    padding: 30px 26px 26px;
    margin-bottom: 22px;
    background:
      radial-gradient(120% 140% at 100% 0%, rgba(232,181,75,0.14), transparent 55%),
      linear-gradient(180deg, #161A24, #101319);
    border: 1px solid var(--trp-line);
    overflow: hidden;
  }
  #trp-widget .trp-hero::before{
    content:"";
    position:absolute; inset:0;
    background-image: repeating-linear-gradient(90deg, rgba(232,181,75,0.05) 0px, rgba(232,181,75,0.05) 1px, transparent 1px, transparent 26px);
    pointer-events:none;
  }
  #trp-widget .trp-eyebrow{
    font-family:'Bebas Neue', sans-serif;
    letter-spacing: 3px;
    font-size: 13px;
    color: var(--trp-gold);
    display:flex; align-items:center; gap:8px;
    line-height: 1.2;
  }
  #trp-widget .trp-dot{ width:7px; height:7px; border-radius:50%; background: var(--trp-rise); box-shadow: 0 0 8px var(--trp-rise); animation: trp-pulse 1.6s infinite; display:inline-block; }
  @keyframes trp-pulse{ 0%,100%{opacity:1} 50%{opacity:.35} }
  #trp-widget h1.trp-title{
    font-family: 'Baloo 2', sans-serif;
    font-weight: 800;
    font-size: 30px;
    margin: 8px 0 4px;
    letter-spacing: 0.2px;
    line-height: 1.25;
    color: var(--trp-text);
  }
  #trp-widget h1.trp-title span{ color: var(--trp-gold); }
  #trp-widget .trp-sub{ color: var(--trp-muted); font-size: 14.5px; max-width: 520px; line-height:1.5; margin:0; }

  #trp-widget .trp-weeknav{
    display:flex; gap:8px; margin-top:20px; flex-wrap:wrap;
    position:relative; z-index:1;
  }
  #trp-widget .trp-weekbtn{
    font-family:'Hind', sans-serif; font-weight:600; font-size: 13.5px;
    background: var(--trp-surface-2); border: 1px solid var(--trp-line);
    color: var(--trp-muted); padding: 8px 14px; border-radius: 999px;
    cursor:pointer; transition: all .18s ease; line-height:1.2;
  }
  #trp-widget .trp-weekbtn:hover{ color: var(--trp-text); border-color:#3a4055; }
  #trp-widget .trp-weekbtn.active{
    background: linear-gradient(180deg, #F3C878, var(--trp-gold));
    color: #1a1305; border-color: transparent;
    box-shadow: 0 3px 14px rgba(232,181,75,0.25);
  }

  #trp-widget .trp-controls{
    display:flex; gap:10px; margin: 22px 0 16px; flex-wrap:wrap;
  }
  #trp-widget .trp-controls input, #trp-widget .trp-controls select{
    background: var(--trp-surface); border: 1px solid var(--trp-line);
    color: var(--trp-text); font-family:'Hind', sans-serif; font-size: 14px;
    padding: 10px 14px; border-radius: 10px; outline:none;
  }
  #trp-widget .trp-controls input{ flex: 1 1 220px; }
  #trp-widget .trp-controls select{ flex: 0 0 auto; cursor:pointer; }
  #trp-widget .trp-controls input:focus, #trp-widget .trp-controls select:focus{ border-color: var(--trp-gold); }

  #trp-widget .trp-list{ display:flex; flex-direction:column; gap:10px; }
  #trp-widget .trp-row{
    display:grid;
    grid-template-columns: 44px 1fr auto;
    gap: 14px;
    align-items:center;
    background: var(--trp-surface);
    border: 1px solid var(--trp-line);
    border-radius: 14px;
    padding: 14px 16px;
    transition: border-color .15s ease, transform .15s ease;
  }
  #trp-widget .trp-row:hover{ border-color: #3a4055; transform: translateY(-1px); }
  #trp-widget .trp-row.trp-top3{ border-color: var(--trp-gold-dim); background: linear-gradient(180deg, rgba(232,181,75,0.06), var(--trp-surface) 40%); }

  #trp-widget .trp-rank{
    font-family:'Bebas Neue', sans-serif;
    font-size: 26px;
    color: var(--trp-muted);
    text-align:center;
    line-height: 1;
  }
  #trp-widget .trp-row.trp-top3 .trp-rank{ color: var(--trp-gold); }

  #trp-widget .trp-info .trp-name{ font-weight:600; font-size: 15.5px; line-height:1.3; }
  #trp-widget .trp-info .trp-meta{
    display:flex; gap:8px; align-items:center; margin-top:5px; flex-wrap:wrap;
  }
  #trp-widget .trp-chip{
    font-size: 11.5px; font-weight:600; color: var(--trp-muted);
    background: var(--trp-surface-2); border:1px solid var(--trp-line);
    padding: 2px 8px; border-radius: 6px; line-height:1.4;
  }
  #trp-widget .trp-bar-track{
    margin-top:8px; height:6px; width:100%; max-width:260px;
    background: var(--trp-surface-2); border-radius: 4px; overflow:hidden;
  }
  #trp-widget .trp-bar-fill{
    height:100%; border-radius:4px;
    background: linear-gradient(90deg, var(--trp-gold-dim), var(--trp-gold));
  }

  #trp-widget .trp-stat{ text-align:right; min-width: 80px; }
  #trp-widget .trp-score{ font-family:'Bebas Neue', sans-serif; font-size: 22px; letter-spacing:0.5px; line-height:1; }
  #trp-widget .trp-delta{
    font-size: 12.5px; font-weight:700; display:flex; align-items:center; justify-content:flex-end; gap:3px; margin-top:4px;
  }
  #trp-widget .trp-delta.trp-up{ color: var(--trp-rise); }
  #trp-widget .trp-delta.trp-down{ color: var(--trp-fall); }
  #trp-widget .trp-delta.trp-flat{ color: var(--trp-flat); }

  #trp-widget .trp-empty{
    text-align:center; color: var(--trp-muted); padding: 40px 10px; font-size: 14px;
  }

  #trp-widget .trp-footnote{
    margin-top: 26px; padding-top:16px; border-top:1px solid var(--trp-line);
    color: var(--trp-muted); font-size: 12.5px; line-height:1.6; text-align:center;
  }
  #trp-widget .trp-footnote b{ color: var(--trp-text); font-weight: 700; }

  @media (max-width: 480px){
    #trp-widget h1.trp-title{ font-size: 24px; }
    #trp-widget .trp-rank{ font-size: 22px; }
    #trp-widget .trp-row{ grid-template-columns: 34px 1fr auto; padding: 12px; gap:10px; }
    #trp-widget .trp-score{ font-size: 18px; }
  }
</style>

<div class="trp-wrap">

  <div class="trp-hero">
    <div class="trp-eyebrow"><span class="trp-dot"></span>LIVE CHART &middot; BARC INDIA</div>
    <h1 class="trp-title">TV Serial <span>TRP</span> Rating Tracker</h1>
    <p class="trp-sub">Hindi GEC shows ki weekly TRP ranking — kaunsa serial top pe hai, kaun upar chadha, kaun neeche gira. Har hafte update hota hai.</p>

    <div class="trp-weeknav" id="trp-weekNav"></div>
  </div>

  <div class="trp-controls">
    <input type="text" id="trp-searchBox" placeholder="Serial ya channel search karein...">
    <select id="trp-channelFilter">
      <option value="all">Sabhi Channels</option>
    </select>
  </div>

  <div class="trp-list" id="trp-listContainer"></div>
  <div class="trp-empty" id="trp-emptyState" style="display:none;">Koi serial nahi mila. Search ya filter badal kar dekhein.</div>

  <div class="trp-footnote">
    Data source: <b>BARC India</b> weekly ratings (manual update). Yeh figures illustrative hain jab tak admin actual weekly TRP data se update na kare.
    <br>Last updated: <b id="trp-lastUpdated"></b>
  </div>

</div>
</div>

<script>
(function(){
/* ============================================================
   ADMIN: HAR HAFTE YAHAN DATA UPDATE KAREIN
   - Naya week add karne ke liye TRP_WEEKS array mein ek naya object daalein
     (sabse upar / index 0 latest week hona chahiye)
   - Har show ke liye: name, channel, genre, trp (score), rank
   - prevRank optional hai — agar diya to automatic movement dikhega
   ============================================================ */

const TRP_WEEKS = [
  {
    label: "Week 24",
    updated: "2 July 2026",
    shows: [
      { name: "Ganga Mai Ki Betiyan", channel: "Zee TV", genre: "Drama", trp: 1.9, rank: 1 },
      { name: "Vasudha", channel: "Zee TV", genre: "Drama", trp: 1.8, rank: 2},
      { name: "Tum Se Tum Tak", channel: "Zee TV", genre: "Drama", trp: 1.7, rank: 3 },
      { name: "Naagin 7", channel: "Colors TV", genre: "Drama", trp: 1.6, rank: 4, prevRank: 4 },
      { name: "Kyunki Saas Bhi Kabhi Bahu Thi 2", channel: "Star Plus", genre: "Drama", trp: 1.5, rank: 5 },
      
    ]
}

let trpCurrentWeek = 0;
let trpSearchTerm = "";
let trpChannelFilter = "all";

function trpUniqueChannels(){
  const set = new Set();
  TRP_WEEKS.forEach(w => w.shows.forEach(s => set.add(s.channel)));
  return Array.from(set).sort();
}

function trpRenderWeekNav(){
  const nav = document.getElementById('trp-weekNav');
  nav.innerHTML = "";
  TRP_WEEKS.forEach((w, i) => {
    const btn = document.createElement('button');
    btn.className = 'trp-weekbtn' + (i === trpCurrentWeek ? ' active' : '');
    btn.textContent = w.label;
    btn.onclick = () => { trpCurrentWeek = i; trpRenderAll(); };
    nav.appendChild(btn);
  });
}

function trpRenderChannelFilter(){
  const sel = document.getElementById('trp-channelFilter');
  const current = sel.value || "all";
  sel.innerHTML = '<option value="all">Sabhi Channels</option>';
  trpUniqueChannels().forEach(c => {
    const opt = document.createElement('option');
    opt.value = c; opt.textContent = c;
    sel.appendChild(opt);
  });
  sel.value = current;
}

function trpDeltaInfo(show){
  if(show.prevRank == null) return { icon:'\u25CF', cls:'trp-flat', text:'Naya' };
  const diff = show.prevRank - show.rank;
  if(diff > 0) return { icon:'\u25B2', cls:'trp-up', text: diff };
  if(diff < 0) return { icon:'\u25BC', cls:'trp-down', text: Math.abs(diff) };
  return { icon:'\u2013', cls:'trp-flat', text:'Same' };
}

function trpRenderList(){
  const week = TRP_WEEKS[trpCurrentWeek];
  const maxTrp = Math.max(...week.shows.map(s => s.trp));
  const container = document.getElementById('trp-listContainer');
  const empty = document.getElementById('trp-emptyState');
  container.innerHTML = "";

  const filtered = week.shows
    .filter(s => trpChannelFilter === 'all' || s.channel === trpChannelFilter)
    .filter(s => (s.name + ' ' + s.channel).toLowerCase().includes(trpSearchTerm.toLowerCase()))
    .sort((a,b) => a.rank - b.rank);

  if(filtered.length === 0){
    empty.style.display = 'block';
    document.getElementById('trp-lastUpdated').textContent = week.updated;
    return;
  }
  empty.style.display = 'none';

  filtered.forEach(show => {
    const d = trpDeltaInfo(show);
    const row = document.createElement('div');
    row.className = 'trp-row' + (show.rank <= 3 ? ' trp-top3' : '');
    row.innerHTML = `
      <div class="trp-rank">${show.rank}</div>
      <div class="trp-info">
        <div class="trp-name">${show.name}</div>
        <div class="trp-meta">
          <span class="trp-chip">${show.channel}</span>
          <span class="trp-chip">${show.genre}</span>
        </div>
        <div class="trp-bar-track"><div class="trp-bar-fill" style="width:${(show.trp / maxTrp * 100).toFixed(0)}%"></div></div>
      </div>
      <div class="trp-stat">
        <div class="trp-score">${show.trp.toFixed(1)}</div>
        <div class="trp-delta ${d.cls}">${d.icon} ${d.text}</div>
      </div>
    `;
    container.appendChild(row);
  });

  document.getElementById('trp-lastUpdated').textContent = week.updated;
}

function trpRenderAll(){
  trpRenderWeekNav();
  trpRenderChannelFilter();
  trpRenderList();
}

document.getElementById('trp-searchBox').addEventListener('input', e => {
  trpSearchTerm = e.target.value; trpRenderList();
});
document.getElementById('trp-channelFilter').addEventListener('change', e => {
  trpChannelFilter = e.target.value; trpRenderList();
});

trpRenderAll();
})();
</script>