<!--
============================================================
Agar aap yahan tak aa gaye ho,
toh obviously tumne Inspect open kiya hai 😄

Haa, ye app manually build kiya hu,
aur haa, isko regularly improve kara hu Akele 🔥😭😭😭.

Project  : RR Events App
Developer: Pawan Ponnam
Type     : Mobile-first WebView App
Use Case : College events, games & live updates
Status   : Live & actively maintained

Contact Me
📸 Instagram : @_oyee_duffer_
📱 Mobile    : +91 9867637326

░█▀█░▄▀█░█░█░█░▄▀█░█▄░█
░█▀▀░█▀█░▀▄▀▄▀░█▀█░█░▀█
░░░░░░░░░░░░░░░░░░░░░░░
░█▀█░█▀█░█▄░█░█▄░█░▄▀█░█▀▄▀█
░█▀▀░█▄█░█░▀█░█░▀█░█▀█░█░▀░█
░░░░░░░░░░░░░░░░░░░░░░░░░░░░

██████████████████████████████████████████████████████████
██████████████████████████████▒▒▒▒████████████████████████
████████████▓▓█████████▒░▓██▒▒▒░░░░███████▓░░▓████████████
████████████▒▒░░░░▒███▒▒░░░░▒▒░░░░░░███▒░░░░▓█████████████
████████████▓▒▒░░░░░░█▒░░░░░░░░░░░░░▒░░░░░░▒░█████████████
█████████████▒▒▒░░░░░░░░░░░░░░░░░░░░░░░░░░▒▒░████▓▓▓▓▓▓███
████▒▒▒▒▒▒▒▒░░░░▒░░░░░░░░░░░░░░░░░░░░░░░░░▒░▓░░░░░░░░▒▓███
█████▒▒▒▒▒▒▒▒░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░▒▒█████
███████▒░▒▒▒▒░░░░░░░░░░░▒▒▓▒░░░░░░░░░░░░░░░░░░░░░▒▒▓██████
█████████▒░░▒░░Narayan Narayan 🪷░░░░░Narayan Narayan 🪷░▒▒████████
███████████▒▒░▒░░░░░░▒░░░░░▒▒▒░░░▒▒▒▒░░░▒▒▒▒▓▓░▒██████████
█████████▒▒░▒▒▒▒▒░░░░▒░░░░░░▒░░░░░░░░░░░░▒▒▒▒▒░░░░▒▒▓█████
████▓▓▓▓▒▒▒░░▒▒▒▒▒▒▒▒▒▒▒░░░▒▒░░░░░░░░░░░▒▒▒▒▒░░░░░░░░▒▒███
██▓▓▓▓▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒░░░░▒▒▒▒▒▒▒▒▒▒▒▒▒░▒▒▒▒▒▒▒▓█
██▒▒▒▒▒▓▓▒▒▒▓▓▓▒▒▒▒▒▒▒▒▒▒▒▓▓▓▓▓▓▓▓▓▒▒▒▒▒▒░░░░░░░░░▒▒▒▒▒▓▓█
█████████▓▓▓▓▒▒▓▓▓▓▓▓▓▒▒▒▒▒▒▒▒▒▒▒▒▒▒▓▓▓▓▒▒▒░▒▒▒▒▒▓████████
██████████████▓▓▓▓▓▓▓▓▓▒▒▒▒▒▒▒▒▒▓▒▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓█████████
█████████████▓▓▓▓▓▓▓▓▓▓▓▓▓▒▒▒▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓█████████████
████████████▓▓▓▓▓▓▓▓▓▓▓▓▓██████▓▓▓▓▓▓▓▓▓▓▓▓▓▓█████████████
█████████████▓▓▓▓▓▓███████████████████▓▓▓▓▓▓██████████████
██████████████████████████████████████████████████████████
It's a Lotus 🪷 
============================================================
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>RR International College - Notices</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet" href="style.css">

<!-- ✅ GOOGLE ANALYTICS -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-9JW1V42V83"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config','G-9JW1V42V83',{
  page_title:'RR Events Home',
  page_path:'/index.html'
});
gtag('event','home_loaded');
</script>

<style>
@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes popIn {
  0% { transform: scale(0.85); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
.header-logo{
    width:42px;
    height:42px;
    margin-right:10px;
    vertical-align:middle;
    filter:drop-shadow(0 0 6px rgba(255,255,255,0.6));
}

.streak-mini{
    background:#161a22;
    border-radius:12px;
    padding:12px 14px;
    margin:14px 0;
    display:flex;
    justify-content:space-between;
    align-items:center;
    box-shadow:0 0 12px rgba(0,0,0,.5);
}
.streak-mini b{color:#ff9800}

/* 🔥 ENHANCED COUNTDOWN */
.countdown-box{
    background:linear-gradient(135deg,#6a11cb,#2575fc);
    border-radius:18px;
    padding:18px 14px;
    margin-bottom:18px;
    text-align:center;
    color:#fff;
    box-shadow:0 0 30px rgba(123,44,255,.9);
    animation:festPulse 1.6s infinite;
}
.countdown-title{
    font-size:14px;
    font-weight:700;
    letter-spacing:1px;
    opacity:.95;
}
.countdown-time{
    font-size:24px;
    font-weight:900;
    margin:8px 0;
}
.countdown-sub{
    font-size:14px;
    opacity:.9;
}

@keyframes festPulse{
    0%{transform:scale(1);}
    50%{transform:scale(1.04);}
    100%{transform:scale(1);}
}

/* ===== POSTER (ONLY NEW CSS) ===== */
.poster-box{
    background:#161a22;
    border-radius:16px;
    padding:12px;
    margin:16px 0;
    box-shadow:0 0 18px rgba(0,0,0,.6);
}
.poster-box img{
    width:100%;
    border-radius:12px;
    display:block;
}

/* ===== STUDENT HELPER ===== */
.ai-box{
    background:#161a22;
    border-radius:14px;
    padding:12px;
    margin-bottom:18px;
    box-shadow:0 0 18px rgba(0,0,0,.6);
}
.ai-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    cursor:pointer;
}
.ai-header h2{font-size:16px;margin:0}
.ai-toggle{font-size:13px;opacity:.7}
.ai-content{display:none;margin-top:10px}
.ai-btn{
    width:100%;
    padding:10px;
    margin-top:8px;
    border:none;
    border-radius:10px;
    color:#fff;
    font-size:14px;
    cursor:pointer;
}
.ai-pay{background:linear-gradient(90deg,#7b2cff,#2575fc)}
.ai-game{background:linear-gradient(90deg,#ff2e63,#ff9800)}
.ai-answer{
    margin-top:10px;
    font-size:14px;
    color:#ffcc80;
    white-space:pre-line;
}

.grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
    margin-bottom:18px;
}
.grid button{
    padding:14px;
    border:none;
    border-radius:14px;
    font-size:15px;
    color:#fff;
    cursor:pointer;
    box-shadow:0 0 16px rgba(0,0,0,.5);
}
.btn-payment{background:linear-gradient(135deg,#00c6ff,#0072ff)}
.btn-promo{background:linear-gradient(135deg,#7b2cff,#ff2e63)}
.btn-album{background:linear-gradient(135deg,#ff9800,#ff2e63)}
.btn-events{background:linear-gradient(135deg,#00b09b,#96c93d)}

.share-app-btn{
    margin:10px 0 6px;
    width:100%;
    padding:14px;
    border:none;
    border-radius:14px;
    background:linear-gradient(135deg,#ff9800,#ff5722);
    color:#fff;
    font-size:16px;
    font-weight:700;
    cursor:pointer;
    box-shadow:0 0 16px rgba(255,152,0,.45);
}
.share-app-btn:active{transform:scale(.98)}

.app-footer{
    margin-top:12px;
    padding-top:14px;
    text-align:center;
    border-top:1px solid rgba(255,255,255,0.08);
}
.powered-text{font-size:13px;color:#9aa0a6}
.powered-brand{font-size:13px;color:#e6e6e6;font-weight:600}

.update-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-top:12px;
    cursor:pointer;
}
.update-header b{color:#ff9800}
.update-toggle{font-size:13px;color:#ff9800}
.update-content{
    display:none;
    margin-top:10px;
    font-size:14px;
    line-height:1.6;
}
.poster-caption{
    margin-top:10px;
    text-align:center;
    font-size:15px;
    font-weight:600;
    color:#ffcc80;
    letter-spacing:0.3px;
}
.poster-caption span{
    display:block;
    margin-top:4px;
    font-size:13px;
    color:#cfcfcf;
    font-weight:400;
}
</style>
</head>

<body>

<div class="header">
  <h1>
    <img src="vishnu1.png" class="header-logo">
    RR INTERNATIONAL COLLEGE
  </h1>
  <p>Notices & Updates</p>
</div>

<div class="container">

<button onclick="trackAndGo('chairman')" class="nav-btn">
👨‍🏫 OUR CHAIRMAN – Shri R. R. Pardeshi
</button>

<!-- 🔔 NOTICE FROM notice.json -->
<div id="noticeBox"></div>


<div class="streak-mini">
🔥 Daily Streak
<b><span id="streakCount">1</span> Day</b>
</div>


<div class="ai-box">
<div class="ai-header" onclick="toggleAI()">
  <h2>🤖 Student Helper</h2>
  <span class="ai-toggle" id="aiToggle">Tap to open</span>
</div>
<div class="ai-content" id="aiContent">
  <button class="ai-btn ai-pay" onclick="aiReply('payment')">Nothing</button>
  <button class="ai-btn ai-game" onclick="aiReply('ai_game')">🎮 How to play with RR AI Bot?</button>
  <div class="ai-answer" id="aiAnswer"></div>
</div>
</div>

<div class="grid">
  <button class="btn-payment" onclick="trackAndGo('payment')">🎟️ Payment</button>
  <button class="btn-promo" onclick="trackAndGo('promo')">🎬 Promo</button>
  <button class="btn-album" onclick="trackAndGo('album')">📸 Album</button>
  <button class="btn-events" onclick="trackAndGo('events')">📅 Events</button>
</div>

<button class="share-app-btn" onclick="location.href='shareapp.html'">
📤 Share RR Events App
</button>

<div class="app-footer">
  <span class="powered-text">Powered by </span>
  <span class="powered-brand">RR International College</span>
</div>

</div>
<script>
/* ================= NOTICE FETCH ================= */
fetch('notice.json?t=' + Date.now())
  .then(res => res.json())
  .then(data => {
    if (!data.show) return;

    let messagesHTML = '';
    data.message.forEach(line => {
      messagesHTML += `<p class="text-muted">${line}</p>`;
    });

    let updatesHTML = '';
    if (data.updates && data.updates.items.length > 0) {
      updatesHTML = `
        <div class="update-header" onclick="toggleUpdates()">
          <b>🆕 ${data.updates.version}</b>
          <span class="update-toggle" id="updateToggle">Tap to open</span>
        </div>

        <div class="update-content" id="updateContent">
          <p><b>🚀 What’s New:</b><br>
            ${data.updates.items.map(i => `• ${i}`).join('<br>')}
          </p>
        </div>
      `;
    }

    document.getElementById("noticeBox").innerHTML = `
      <div class="event">
        <h2>${data.title}</h2>
        ${messagesHTML}
        ${updatesHTML}
      </div>
    `;
  })
  .catch(err => console.log('Notice error:', err));

/* ================= DAILY STREAK ================= */
let today = new Date().toDateString();
let last = localStorage.getItem("lastOpenDate");
let streak = parseInt(localStorage.getItem("dailyStreak") || "0");

if (last !== today) {
  streak = last ? streak + 1 : 1;
  localStorage.setItem("dailyStreak", streak);
  localStorage.setItem("lastOpenDate", today);
}
document.getElementById("streakCount").innerText = streak;


/* ================= 4PM COUNTDOWN ================= */

const countdownEl = document.getElementById("countdown");
const subTextEl = document.getElementById("countdownSub");

const now = new Date();
const festTime = new Date(
  now.getFullYear(),
  now.getMonth(),
  now.getDate(),
  16, 0, 0
).getTime();

setInterval(() => {
  const diff = festTime - Date.now();

  if (diff > 0) {
    const total = Math.floor(diff / 1000);
    const h = Math.floor(total / 3600);
    const m = Math.floor((total % 3600) / 60);
    const s = total % 60;

    countdownEl.innerText = `${h}h : ${m}m : ${s}s`;
    subTextEl.innerText =
      total <= 60
        ? "⚠️ FINAL MOMENT!"
        : "Get ready for the biggest celebration 🎉";
    return;
  }

  countdownEl.innerText = "🎉 FEST STARTED!";
  subTextEl.innerText = "Karmanya Fest is LIVE 🔥";
}, 1000);

/* ================= STUDENT HELPER ================= */
function toggleAI() {
  const box = document.getElementById("aiContent");
  const t = document.getElementById("aiToggle");
  box.style.display = box.style.display === "block" ? "none" : "block";
  t.innerText = box.style.display === "block" ? "Tap to close" : "Tap to open";
}

function toggleUpdates() {
  const box = document.getElementById("updateContent");
  const t = document.getElementById("updateToggle");
  box.style.display = box.style.display === "block" ? "none" : "block";
  t.innerText = box.style.display === "block" ? "Tap to close" : "Tap to open";
}

function aiReply(type) {
  document.getElementById("aiAnswer").innerText =
    type === "payment"
      ? "Nothing "
      : "Open Games Zone → Tic Tac Toe → Hard Mode 🔥";
}


/* ================= NAVIGATION ================= */
function trackAndGo(t) {
  if (t === "payment") location.href = "payments.html";
  if (t === "promo") location.href = "promo.html";
  if (t === "album") location.href = "event_album.html";
  if (t === "events") location.href = "events.html";
  if (t === "chairman") location.href = "chairman.html";
}
/* ================= ANNOUNCEMENT FETCH ================= */
fetch('announcement.json?t=' + Date.now())
  .then(res => res.json())
  .then(data => {
    if (!data.show) return;

    const ann = document.createElement('div');
    ann.style.background = 'linear-gradient(135deg,#ff9800,#ff5722)';
    ann.style.padding = '14px';
    ann.style.borderRadius = '14px';
    ann.style.marginBottom = '16px';
    ann.style.boxShadow = '0 0 20px rgba(255,152,0,.45)';
    ann.innerHTML = `
      <div style="font-weight:700;font-size:15px;">${data.title}</div>
      <div style="margin-top:6px;font-size:14px;line-height:1.5;">
        ${data.message.replace(/\n/g,'<br>')}
      </div>
    `;

    // Insert announcement at TOP of page content
    document.querySelector('.container').prepend(ann);
  })
  .catch(err => console.log('Announcement error:', err));
  
  /* ================= FIREWORKS ================= */

let fireworksStarted = false;

function startFireworks() {
  if (fireworksStarted) return;
  fireworksStarted = true;

  const canvas = document.createElement("canvas");
  canvas.style.position = "fixed";
  canvas.style.inset = "0";
  canvas.style.zIndex = "9999";
  canvas.style.pointerEvents = "none";
  document.body.appendChild(canvas);

  const ctx = canvas.getContext("2d");
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;

  const fireworks = [];

  class Firework {
    constructor() {
      this.x = Math.random() * canvas.width;
      this.y = canvas.height;
      this.t = Math.random() * canvas.height * 0.5;
      this.exploded = false;
      this.p = [];
    }
    update() {
      if (!this.exploded) {
        this.y -= 6;
        if (this.y < this.t) {
          this.exploded = true;
          for (let i = 0; i < 40; i++) {
            this.p.push({
              x: this.x,
              y: this.y,
              vx: Math.random() * 6 - 3,
              vy: Math.random() * 6 - 3,
              a: 1
            });
          }
        }
      } else {
        this.p.forEach(p => {
          p.x += p.vx;
          p.y += p.vy;
          p.a -= 0.02;
        });
      }
    }
    draw() {
      this.p.forEach(p => {
        ctx.fillStyle = `rgba(255,255,255,${p.a})`;
        ctx.fillRect(p.x, p.y, 3, 3);
      });
    }
  }

  function animate() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    if (Math.random() < 0.05) fireworks.push(new Firework());
    fireworks.forEach(f => {
      f.update();
      f.draw();
    });
    requestAnimationFrame(animate);
  }

  animate();

  setTimeout(() => canvas.remove(), 20 * 60 * 1000);
}

function closeAnnouncement(){
  document.getElementById("announcementPopup").style.display = "none";
}

fetch("announcement.json?t=" + Date.now())
  .then(res => res.json())
  .then(data => {
    if (!data.show) return;

    const lastSeenId = localStorage.getItem("announcementLastSeen");

    // 🔥 Show popup only if NEW announcement
    if (lastSeenId === data.id) return;

    document.getElementById("annTitle").innerText =
      data.title || "Announcement";

    document.getElementById("annMsg").innerHTML =
      (data.message || "").replace(/\n/g, "<br>");

    document.getElementById("announcementPopup").style.display = "flex";

    // Save current announcement id
    localStorage.setItem("announcementLastSeen", data.id);
  })
  .catch(err => console.log("Announcement error:", err));
</script>
<!-- 🔔 ANNOUNCEMENT POPUP -->
<div id="announcementPopup" style="
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.85);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:10000;
">

  <!-- POPUP CARD -->
  <div id="announcementCard" style="
    padding:20px;
    border-radius:18px;
    width:90%;
    max-width:360px;
    text-align:center;
    color:#ffffff;
    background:linear-gradient(135deg,#ff9800,#ff5722,#7b2cff,#2575fc);
    box-shadow:0 0 35px rgba(255,152,0,.7);
  ">

    <h2 id="annTitle" style="
      margin:0 0 10px;
      font-size:20px;
      font-weight:800;
    ">
      📢 Announcement
    </h2>

    <p id="annMsg" style="
      font-size:15px;
      line-height:1.6;
      opacity:.95;
    "></p>

    <button
      id="annBtn"
      onclick="closeAnnouncement()"
      style="
        margin-top:14px;
        width:100%;
        padding:12px;
        border:none;
        border-radius:12px;
        background:#000;
        color:#fff;
        font-weight:700;
        font-size:15px;
        cursor:pointer;
      "
    >
      OK, GOT IT 👍
    </button>

  </div>
</div>