<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="Enhanced IG Spam Filter Checker & Follower Count Tool with multi-language support (English and Hindi), PWA capabilities, offline caching, advanced animations, download options, and improved accessibility.">
  <title>IG Spam Filter Checker & Follower Count</title>
  <!-- Import Google Font -->
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet">
  <!-- FontAwesome for Icons -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
  <style>
    /* CSS Variables for theme colors and languages */
    :root {
      --bg-light: #ffffff;
      --bg-dark: #2c2c2c;
      --text-light: #333;
      --text-dark: #f1f1f1;
      --primary-color: #6EC1E4;
      --secondary-color: #56a3d1;
      --error-bg: #FCE4E4;
      --error-text: #F44336;
      --success-bg: #E8F5E9;
      --success-text: #4CAF50;
      --tooltip-bg: rgba(0, 0, 0, 0.8);
      --tooltip-text: #fff;
      --modal-bg: rgba(0,0,0,0.8);
    }
    /* Enhanced Background for Body */
    body {
      font-family: 'Inter', sans-serif;
      margin: 0;
      padding: 0;
      height: 100vh;
      user-select: none;
      /* Enhanced multi-color gradient background */
      background: linear-gradient(45deg, #6EC1E4, #9b59b6, #e74c3c, #34495e, #2ecc71);
      background-size: 400% 400%;
      animation: gradientAnimation 15s ease infinite;
      transition: background 0.3s ease, color 0.3s ease;
      color: var(--text-light);
    }
    /* Enhanced Dark Mode Background */
    body.dark-mode {
      background: linear-gradient(45deg, #6EC1E4, #2c2c2c, #000000);
      background-size: 400% 400%;
      animation: gradientAnimation 15s ease infinite;
      color: var(--text-dark);
    }
    @keyframes gradientAnimation {
      0% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }
    /* Watermark overlay */
    .watermark {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      opacity: 0.05;
      background: url('https://via.placeholder.com/300?text=Protected') repeat;
      background-size: 300px 300px;
      z-index: 9999;
    }
    /* Main Container */
    .u-tools_container {
      position: relative;
      z-index: 1;
      width: 100%;
      max-width: 650px;
      padding: 2.5rem;
      background-color: rgba(255, 255, 255, 0.9);
      border-radius: 12px;
      box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
      text-align: center;
      overflow: hidden;
      animation: boxAnimation 0.5s ease-out;
      transition: background-color 0.3s ease, color 0.3s ease;
    }
    /* Dark mode for container */
    body.dark-mode .u-tools_container {
      background-color: rgba(44, 44, 44, 0.9);
      color: var(--text-dark);
    }
    @keyframes boxAnimation {
      0% { transform: scale(0.9); opacity: 0; }
      100% { transform: scale(1); opacity: 1; }
    }
    h3 {
      color: inherit;
      font-size: 1.8rem;
      font-weight: 600;
      margin-bottom: 2rem;
    }
    /* Form and Input Styling */
    form {
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
    }
    .visually-hidden {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }
    input[type="text"] {
      width: 100%;
      padding: 1rem;
      margin-bottom: 1.5rem;
      font-size: 1.2rem;
      border-radius: 6px;
      border: 1px solid #B3C7E6;
      background-color: #f9f9f9;
      font-weight: bold;
      text-align: center;
      color: #000;
      transition: box-shadow 0.3s ease, transform 0.3s ease;
    }
    input[type="text"]:focus {
      border: 1px solid #000;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.8);
      transform: scale(1.08);
      outline: none;
      background-color: #fff;
    }
    /* Tooltip for input */
    .tooltip {
      position: absolute;
      top: -40px;
      background: var(--tooltip-bg);
      color: var(--tooltip-text);
      padding: 0.5rem 1rem;
      border-radius: 4px;
      font-size: 0.9rem;
      opacity: 0;
      transition: opacity 0.3s ease;
      pointer-events: none;
      white-space: nowrap;
    }
    input[type="text"]:hover + .tooltip,
    input[type="text"]:focus + .tooltip {
      opacity: 1;
    }
    button, .option-btn {
      width: 100%;
      padding: 1rem;
      font-size: 1.2rem;
      font-weight: 600;
      background-color: var(--primary-color);
      color: white;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      transition: background-color 0.3s ease, transform 0.3s ease;
      margin-bottom: 1rem;
    }
    button:hover, .option-btn:hover {
      background-color: var(--secondary-color);
      transform: scale(1.05);
    }
    /* Additional Reset Button */
    #resetForm {
      background-color: #f44336;
    }
    #resetForm:hover {
      background-color: #d32f2f;
    }
    /* Language Selector */
    #languageSelect {
      width: 100%;
      padding: 0.5rem;
      font-size: 1rem;
      border-radius: 6px;
      border: 1px solid #B3C7E6;
      margin-bottom: 1rem;
      background-color: #fff;
      text-align: center;
    }
    /* Spinner Animation */
    .spinner {
      display: none;
      margin: 1rem auto;
      width: 50px;
      height: 50px;
      border: 5px solid #f3f3f3;
      border-top: 5px solid var(--primary-color);
      border-radius: 50%;
      animation: spin 1s linear infinite;
    }
    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
    .error {
      display: none;
      background-color: var(--error-bg);
      color: var(--error-text);
      border: 1px solid var(--error-text);
      padding: 1rem;
      border-radius: 6px;
      margin-bottom: 1.5rem;
      font-size: 1.1rem;
      opacity: 0;
      transition: opacity 0.5s ease;
    }
    .error.show {
      opacity: 1;
    }
    /* Result Box */
    .result {
      display: none;
      background-color: #F3F7FB;
      padding: 1.5rem;
      border-radius: 8px;
      margin-top: 1.5rem;
      text-align: left;
      color: inherit;
      opacity: 0;
      transform: translateY(50px);
      animation: slideIn 0.5s forwards;
      transition: background-color 0.5s ease, box-shadow 0.3s ease;
      position: relative;
    }
    /* Dark mode for result box */
    body.dark-mode .result {
      background-color: #444;
      color: var(--text-dark);
    }
    @keyframes slideIn {
      from { opacity: 0; transform: translateY(50px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .green {
      background-color: var(--success-bg);
      color: var(--success-text);
      border: 1px solid var(--success-text);
      box-shadow: 0px 10px 20px rgba(76, 175, 80, 0.6);
    }
    .red {
      background-color: var(--error-bg);
      color: var(--error-text);
      border: 1px solid var(--error-text);
      box-shadow: 0px 10px 20px rgba(244, 67, 54, 0.7);
    }
    .profile-image {
      width: 140px;
      height: 140px;
      border-radius: 50%;
      object-fit: cover;
      margin-bottom: 1.5rem;
      border: 2px solid #ccc;
    }
    .result p {
      font-size: 1.1rem;
      margin: 0.5rem 0;
      line-height: 1.4;
    }
    /* Posts Container */
    .posts-container {
      margin-top: 1.5rem;
      display: grid;
      gap: 10px;
    }
    .posts-container h4 {
      grid-column: 1 / -1;
      margin-bottom: 0.5rem;
      font-size: 1.3rem;
      text-align: center;
      color: inherit;
    }
    .posts-container a {
      display: block;
    }
    .posts-container img {
      width: 100%;
      border-radius: 6px;
      object-fit: cover;
      cursor: pointer;
      transition: transform 0.3s ease;
    }
    .posts-container img:hover {
      transform: scale(1.05);
    }
    /* WhatsApp Icon Styling */
    .whatsapp-icon {
      position: fixed;
      bottom: 20px;
      right: 20px;
      width: 70px;
      height: 70px;
      background: linear-gradient(45deg, #25D366, #128C7E);
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
      cursor: pointer;
      animation: pulseGlow 1.5s infinite ease-in-out, rotateIcon 2s infinite linear;
      transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
    }
    @keyframes pulseGlow {
      0% {
        box-shadow: 0 0 5px 0 rgba(0, 255, 0, 0.5);
        background: linear-gradient(45deg, #25D366, #128C7E);
      }
      50% {
        box-shadow: 0 0 25px 10px rgba(0, 255, 0, 1);
        background: linear-gradient(45deg, #128C7E, #25D366);
      }
      100% {
        box-shadow: 0 0 5px 0 rgba(0, 255, 0, 0.5);
        background: linear-gradient(45deg, #25D366, #128C7E);
      }
    }
    @keyframes rotateIcon {
      0% { transform: rotate(0deg); }
      10% { transform: rotate(180deg); }
      20% { transform: rotate(0deg); }
    }
    .whatsapp-icon:hover {
      transform: scale(1.15) rotate(15deg);
      background: linear-gradient(45deg, #128C7E, #00E676);
      box-shadow: 0 0 30px 15px rgba(0, 255, 0, 0.8);
    }
    .whatsapp-icon i {
      font-size: 35px;
      color: white;
      transition: color 0.5s ease;
    }
    .whatsapp-icon:hover i {
      color: #fff;
    }
    /* Options Panel */
    .options-panel {
      display: flex;
      justify-content: space-between;
      gap: 1rem;
      margin-bottom: 1rem;
    }
    .options-panel .option-btn {
      flex: 1;
    }
    /* Notification Toast */
    .notification {
      position: fixed;
      top: 20px;
      right: 20px;
      background: var(--primary-color);
      color: white;
      padding: 0.8rem 1.2rem;
      border-radius: 6px;
      opacity: 0;
      transition: opacity 0.5s ease;
      z-index: 10000;
    }
    .notification.show {
      opacity: 1;
    }
    /* Modal for Instructions */
    .modal {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: var(--modal-bg);
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 20000;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s ease;
    }
    .modal.show {
      opacity: 1;
      pointer-events: auto;
    }
    .modal-content {
      background: var(--bg-light);
      padding: 2rem;
      border-radius: 8px;
      text-align: center;
      max-width: 400px;
    }
    body.dark-mode .modal-content {
      background: var(--bg-dark);
      color: var(--text-dark);
    }
    .modal-close {
      margin-top: 1rem;
      background-color: var(--secondary-color);
    }
  </style>
</head>
<body>
  <!-- Watermark overlay -->
  <div class="watermark"></div>
  
  <!-- Instruction Modal -->
  <div id="instructionModal" class="modal">
    <div class="modal-content">
      <h3 id="modalTitle">How to Use</h3>
      <p id="modalText">Enter an Instagram username or link to check the spam filter status and view follower data along with recent posts.</p>
      <button id="closeModal" class="option-btn modal-close">Got it!</button>
    </div>
  </div>
  
  <div class="u-tools_container">
    <h3 id="headerTitle">IG Spam Filter Checker & Follower Count</h3>
    <!-- Language Selector -->
    <select id="languageSelect">
      <option value="en">English</option>
      <option value="hi">हिन्दी</option>
    </select>
    <!-- Dark Mode Toggle -->
    <button id="toggleTheme" class="option-btn" title="Toggle Dark/Light Mode">
      <i class="fas fa-adjust"></i> Toggle Theme
    </button>
    <!-- Copy, Download & Reset Options -->
    <div class="options-panel">
      <button id="copyResult" class="option-btn" title="Copy Results">
        <i class="fas fa-copy"></i> Copy
      </button>
      <button id="downloadResult" class="option-btn" title="Download Results">
        <i class="fas fa-download"></i> Download
      </button>
      <button id="resetForm" class="option-btn" title="Reset Form">
        <i class="fas fa-redo"></i> Reset
      </button>
    </div>
    <!-- Form for Username Input -->
    <form id="userForm">
      <label for="usernameInput" class="visually-hidden">Enter Username or Link</label>
      <input type="text" id="usernameInput" placeholder="Enter Username or Link" aria-label="Instagram Username or Link" required>
      <span class="tooltip" id="inputTooltip">e.g., @username or a profile URL</span>
      <button type="submit">Get Info</button>
    </form>
    <br>
    <div id="error" class="error" role="alert" aria-live="assertive"></div>
    <!-- Spinner for loading state -->
    <div id="spinner" class="spinner" aria-live="polite"></div>
    <div id="resultBox" class="result" aria-live="polite">
      <img id="profileImage" class="profile-image" src="" alt="Profile Image" style="display: none;">
      <p><strong id="nameLabel">Name:</strong> <span id="resultName">Not available</span></p>
      <p><strong id="usernameLabel">Username:</strong> <span id="resultUsername">Unknown</span></p>
      <p><strong id="followersLabel">Follower Count:</strong> <span id="resultFollowers">Unknown</span></p>
      <p><strong id="followingsLabel">Following Count:</strong> <span id="resultFollowings">Unknown</span></p>
      <p><strong id="postsLabel">Posts Count:</strong> <span id="resultPosts">Unknown</span></p>
      <p><strong id="statusLabel">Account Status:</strong> <span id="resultStatus">Unknown</span></p>
      <p><strong id="spamLabel">Spam Filter:</strong> <span id="resultSpamSetting">Disabled</span></p>
      <p id="resultMessage"></p>
      <!-- Container for recent posts -->
      <div id="postsContainer" class="posts-container" style="display: none;"></div>
    </div>
  </div>

  <!-- WhatsApp Icon for quick contact -->
  <div class="whatsapp-icon" onclick="window.open('https://wa.me/918328311592', '_blank')" aria-label="Contact via WhatsApp">
    <i class="fab fa-whatsapp"></i>
  </div>
  
  <!-- Notification Toast -->
  <div id="notification" class="notification">Results copied to clipboard!</div>

  <script>
    /******************** Security Measures ********************/
    document.addEventListener('contextmenu', event => event.preventDefault());
    window.addEventListener('keydown', function(e) {
      if (e.keyCode === 123 ||
         (e.ctrlKey && e.shiftKey && (e.keyCode === 73 || e.keyCode === 67 || e.keyCode === 74)) ||
         (e.ctrlKey && e.keyCode === 85)) {
        e.preventDefault();
        return false;
      }
    });
    console.log("%cWarning!", "color: red; font-size: 24px; font-weight: bold;");
    console.log("This code is proprietary. Unauthorized copying is prohibited.");

    /******************** Theme Toggle with Persistence ********************/
    const toggleThemeBtn = document.getElementById('toggleTheme');
    function setTheme(theme) {
      if (theme === 'dark') {
        document.body.classList.add('dark-mode');
        localStorage.setItem('theme', 'dark');
      } else {
        document.body.classList.remove('dark-mode');
        localStorage.setItem('theme', 'light');
      }
    }
    toggleThemeBtn.addEventListener('click', () => {
      document.body.classList.contains('dark-mode')
        ? setTheme('light')
        : setTheme('dark');
    });
    if (localStorage.getItem('theme') === 'dark') {
      setTheme('dark');
    }

    /******************** Language Selector ********************/
    const languageSelect = document.getElementById('languageSelect');
    const translations = {
      en: {
        headerTitle: "IG Spam Filter Checker & Follower Count",
        modalTitle: "How to Use",
        modalText: "Enter an Instagram username or link to check the spam filter status and view follower data along with recent posts.",
        nameLabel: "Name:",
        usernameLabel: "Username:",
        followersLabel: "Follower Count:",
        followingsLabel: "Following Count:",
        postsLabel: "Posts Count:",
        statusLabel: "Account Status:",
        spamLabel: "Spam Filter:",
        tooltip: "e.g., @username or a profile URL"
      },
      hi: {
        headerTitle: "आईजी स्पैम फिल्टर चेकर और फॉलोअर काउंट",
        modalTitle: "कैसे उपयोग करें",
        modalText: "एक इंस्टाग्राम उपयोगकर्ता नाम या लिंक दर्ज करें ताकि आप स्पैम फिल्टर स्थिति जांच सकें और हाल की पोस्ट के साथ फॉलोअर डेटा देख सकें।",
        nameLabel: "नाम:",
        usernameLabel: "उपयोगकर्ता नाम:",
        followersLabel: "फॉलोअर काउंट:",
        followingsLabel: "फॉलोइंग काउंट:",
        postsLabel: "पोस्ट काउंट:",
        statusLabel: "खाता स्थिति:",
        spamLabel: "स्पैम फिल्टर:",
        tooltip: "उदाहरण: @username या एक प्रोफ़ाइल URL"
      }
    };
    function updateLanguage(lang) {
      const texts = translations[lang];
      document.getElementById('headerTitle').innerText = texts.headerTitle;
      document.getElementById('modalTitle').innerText = texts.modalTitle;
      document.getElementById('modalText').innerText = texts.modalText;
      document.getElementById('nameLabel').innerText = texts.nameLabel;
      document.getElementById('usernameLabel').innerText = texts.usernameLabel;
      document.getElementById('followersLabel').innerText = texts.followersLabel;
      document.getElementById('followingsLabel').innerText = texts.followingsLabel;
      document.getElementById('postsLabel').innerText = texts.postsLabel;
      document.getElementById('statusLabel').innerText = texts.statusLabel;
      document.getElementById('spamLabel').innerText = texts.spamLabel;
      document.getElementById('inputTooltip').innerText = texts.tooltip;
    }
    languageSelect.addEventListener('change', (e) => {
      updateLanguage(e.target.value);
    });
    updateLanguage(languageSelect.value);

    /******************** Copy, Download & Reset Options ********************/
    document.getElementById('copyResult').addEventListener('click', async () => {
      const resultBox = document.getElementById('resultBox');
      const notification = document.getElementById('notification');
      const textToCopy = resultBox.innerText.trim();
      if (textToCopy) {
        try {
          if (navigator.clipboard && window.isSecureContext) {
            await navigator.clipboard.writeText(textToCopy);
          } else {
            const textArea = document.createElement('textarea');
            textArea.value = textToCopy;
            textArea.style.position = 'fixed';
            textArea.style.top = '-9999px';
            document.body.appendChild(textArea);
            textArea.focus();
            textArea.select();
            document.execCommand('copy');
            document.body.removeChild(textArea);
          }
          notification.classList.add('show');
          setTimeout(() => notification.classList.remove('show'), 2000);
        } catch (err) {
          console.error('Failed to copy: ', err);
        }
      } else {
        alert('No results to copy.');
      }
    });
    document.getElementById('downloadResult').addEventListener('click', () => {
      const resultBox = document.getElementById('resultBox');
      const text = resultBox.innerText.trim();
      if (text) {
        const blob = new Blob([text], {type: 'text/plain'});
        const url = URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = "IG_Result.txt";
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
        URL.revokeObjectURL(url);
      } else {
        alert('No results to download.');
      }
    });
    document.getElementById('resetForm').addEventListener('click', () => {
      document.getElementById('userForm').reset();
      document.getElementById('resultBox').style.display = 'none';
      document.getElementById('error').style.display = 'none';
    });

    /******************** Modal for Instructions ********************/
    const instructionModal = document.getElementById('instructionModal');
    const closeModal = document.getElementById('closeModal');
    window.addEventListener('load', () => {
      if (!localStorage.getItem('modalShown')) {
        instructionModal.classList.add('show');
      }
    });
    closeModal.addEventListener('click', () => {
      instructionModal.classList.remove('show');
      localStorage.setItem('modalShown', 'true');
    });

    /******************** Main API Fetch Functionality & Caching ********************/
    const apiKey = "2adc0cf1cdmsh5f2960e0a585c76p1bc9f4jsn50d471406dde";
    const API_HOST = "instagram-scraper-api2.p.rapidapi.com";
    document.getElementById('userForm').addEventListener('submit', function(event) {
      event.preventDefault();
      fetchUserInfo();
    });
    async function fetchUserInfo() {
      const username = document.getElementById('usernameInput').value.trim();
      const errorBox = document.getElementById('error');
      const spinner = document.getElementById('spinner');
      const resultBox = document.getElementById('resultBox');
      const resultName = document.getElementById('resultName');
      const resultUsername = document.getElementById('resultUsername');
      const resultFollowers = document.getElementById('resultFollowers');
      const resultFollowings = document.getElementById('resultFollowings');
      const resultPosts = document.getElementById('resultPosts');
      const resultStatus = document.getElementById('resultStatus');
      const resultSpamSetting = document.getElementById('resultSpamSetting');
      const resultMessage = document.getElementById('resultMessage');
      const profileImage = document.getElementById('profileImage');
      const postsContainer = document.getElementById('postsContainer');

      errorBox.style.display = 'none';
      errorBox.classList.remove('show');
      resultBox.style.display = 'none';
      resultBox.classList.remove('green', 'red');
      resultMessage.textContent = '';
      postsContainer.innerHTML = '';
      postsContainer.style.display = 'none';
      spinner.style.display = 'block';

      if (!username) {
        showError("Please enter a username or link.");
        spinner.style.display = 'none';
        return;
      }

      // Check local cache first
      const cached = localStorage.getItem(username);
      if (cached) {
        spinner.style.display = 'none';
        populateResult(JSON.parse(cached));
        return;
      }

      try {
        const response = await fetch(`https://${API_HOST}/v1/info?username_or_id_or_url=${encodeURIComponent(username)}`, {
          method: 'GET',
          headers: {
            'x-rapidapi-key': apiKey,
            'x-rapidapi-host': API_HOST
          }
        });
        spinner.style.display = 'none';
        if (response.status === 403) throw new Error("Private account");
        if (response.status === 404) throw new Error("Account not found");
        if (!response.ok) throw new Error(`HTTP error! Status: ${response.status}`);
        const data = await response.json();
        if (data && data.data) {
          localStorage.setItem(username, JSON.stringify(data.data));
          populateResult(data.data);
        } else {
          throw new Error("Unexpected response format.");
        }
      } catch (error) {
        spinner.style.display = 'none';
        showError(error.message || 'An error occurred.');
      }
    }
    function populateResult(data) {
      const resultBox = document.getElementById('resultBox');
      document.getElementById('resultName').textContent = data.full_name || 'Not available';
      document.getElementById('resultUsername').textContent = data.username || 'Unknown';
      document.getElementById('resultFollowers').textContent = data.follower_count || 'Unknown';
      document.getElementById('resultFollowings').textContent = data.following_count || 'Unknown';
      document.getElementById('resultPosts').textContent = data.posts_count || 'Unknown';
      document.getElementById('resultStatus').textContent = data.is_private ? 'Private' : 'Public';
      document.getElementById('resultSpamSetting').textContent = data.spam_follower_setting_enabled ? 'Enabled' : 'Disabled';
      if (data.spam_follower_setting_enabled) {
        document.getElementById('resultMessage').innerHTML = 'Spam Filter is enabled. You are not able to order. Please turn it off or contact via WhatsApp: <a href="https://wa.me/918328311592" target="_blank" style="color: var(--success-text);">+918328311592</a>';
        resultBox.classList.add('red');
      } else {
        document.getElementById('resultMessage').textContent = 'Spam Filter is disabled. You are able to order.';
        resultBox.classList.add('green');
      }
      const profileImage = document.getElementById('profileImage');
      if (data.profile_picture) {
        profileImage.src = data.profile_picture;
        profileImage.alt = `${data.username}'s profile picture`;
        profileImage.style.display = 'block';
      } else {
        profileImage.style.display = 'none';
      }
      const postsContainer = document.getElementById('postsContainer');
      if (data.posts && Array.isArray(data.posts) && data.posts.length > 0) {
        postsContainer.style.display = 'grid';
        postsContainer.innerHTML = '<h4>Recent Posts</h4>';
        data.posts.forEach(post => {
          let postLink = post.post_url || '#';
          let imgSrc = post.image_url || '';
          if (imgSrc) {
            postsContainer.innerHTML += `<a href="${postLink}" target="_blank"><img src="${imgSrc}" alt="Post image"></a>`;
          }
        });
      }
      resultBox.style.display = 'block';
    }
    function showError(message) {
      const errorBox = document.getElementById('error');
      errorBox.textContent = message;
      errorBox.style.display = 'block';
      errorBox.classList.add('show');
    }
    document.getElementById('usernameInput').addEventListener('input', () => {
      const errorBox = document.getElementById('error');
      errorBox.style.display = 'none';
      errorBox.classList.remove('show');
    });

    /******************** Service Worker Registration for PWA Support ********************/
    if ('serviceWorker' in navigator) {
      window.addEventListener('load', () => {
        navigator.serviceWorker.register('service-worker.js')
          .then(registration => {
            console.log('Service Worker registered with scope:', registration.scope);
          })
          .catch(err => {
            console.error('Service Worker registration failed:', err);
          });
      });
    }
  </script>
</body>
</html>