{"id":4457,"date":"2025-05-24T12:58:05","date_gmt":"2025-05-24T12:58:05","guid":{"rendered":"https:\/\/ingenio.vip\/?post_type=tools-pages&#038;p=4457"},"modified":"2025-05-24T12:58:14","modified_gmt":"2025-05-24T12:58:14","slug":"flag-counter","status":"publish","type":"tools-pages","link":"https:\/\/ingenio.vip\/zh\/tools-pages\/flag-counter\/","title":{"rendered":"Flag Counter"},"content":{"rendered":"<div class=\"flag-counter-pro\">\r\n  <div class=\"fc-container\">\r\n    <header class=\"fc-header\">\r\n      <h1><span class=\"dashicons dashicons-location-alt\"><\/span> Flag Counter Pro<\/h1>\r\n      <p class=\"fc-subtitle\">Track and visualize your global audience<\/p>\r\n    <\/header>\r\n\r\n    <div class=\"fc-stats-row\">\r\n      <div class=\"fc-stat-card\">\r\n        <div class=\"fc-stat-value\" id=\"totalVisits\">0<\/div>\r\n        <div class=\"fc-stat-label\">Total Visits<\/div>\r\n      <\/div>\r\n      <div class=\"fc-stat-card\">\r\n        <div class=\"fc-stat-value\" id=\"uniqueCountries\">0<\/div>\r\n        <div class=\"fc-stat-label\">Countries<\/div>\r\n      <\/div>\r\n      <div class=\"fc-stat-card\">\r\n        <div class=\"fc-stat-value\" id=\"topCountry\">-<\/div>\r\n        <div class=\"fc-stat-label\">Top Country<\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"fc-controls\">\r\n      <div class=\"fc-view-options\">\r\n        <select id=\"sortBy\" class=\"fc-select\">\r\n          <option value=\"visits\">Sort by Visits<\/option>\r\n          <option value=\"name\">Sort by Name<\/option>\r\n          <option value=\"recent\">Recently Added<\/option>\r\n        <\/select>\r\n        <select id=\"flagSize\" class=\"fc-select\">\r\n          <option value=\"small\">Small Flags<\/option>\r\n          <option value=\"medium\" selected>Medium Flags<\/option>\r\n          <option value=\"large\">Large Flags<\/option>\r\n        <\/select>\r\n      <\/div>\r\n      <button id=\"refreshData\" class=\"fc-button\">\r\n        <span class=\"dashicons dashicons-update\"><\/span> Refresh\r\n      <\/button>\r\n    <\/div>\r\n\r\n    <div class=\"fc-flags-grid\" id=\"flagsGrid\"><\/div>\r\n\r\n    <div class=\"fc-add-section\">\r\n      <h2>Add New Country Data<\/h2>\r\n      <form id=\"addCountryForm\" class=\"fc-form\" action=\"\">\r\n        <div class=\"fc-form-row\">\r\n          <div class=\"fc-form-group\">\r\n            <label for=\"countryCode\">Country Code<\/label>\r\n            <input type=\"text\" id=\"countryCode\" maxlength=\"2\" placeholder=\"US\" \r\n                   pattern=\"[A-Za-z]{2}\" title=\"2-letter country code\" required>\r\n          <\/div>\r\n          <div class=\"fc-form-group\">\r\n            <label for=\"countryName\">Country Name<\/label>\r\n            <input type=\"text\" id=\"countryName\" placeholder=\"United States\" required>\r\n          <\/div>\r\n          <div class=\"fc-form-group\">\r\n            <label for=\"visitCount\">Visit Count<\/label>\r\n            <input type=\"number\" id=\"visitCount\" placeholder=\"1000\" min=\"0\" required>\r\n          <\/div>\r\n        <\/div>\r\n        <button type=\"submit\" class=\"fc-button fc-button-primary\">\r\n          <span class=\"dashicons dashicons-plus\"><\/span> Add Country\r\n        <\/button>\r\n      <input type=\"hidden\" name=\"trp-form-language\" value=\"zh\"\/><\/form>\r\n    <\/div>\r\n\r\n    <div class=\"fc-embed-section\">\r\n      <h2>Embed Options<\/h2>\r\n      <div class=\"fc-embed-options\">\r\n        <div class=\"fc-embed-preview\" id=\"embedPreview\"><\/div>\r\n        <div class=\"fc-embed-controls\">\r\n          <select id=\"embedType\" class=\"fc-select\">\r\n            <option value=\"widget\">Interactive Widget<\/option>\r\n            <option value=\"image\">Static Image<\/option>\r\n            <option value=\"badge\">Small Badge<\/option>\r\n          <\/select>\r\n          <select id=\"embedTheme\" class=\"fc-select\">\r\n            <option value=\"light\">Light Theme<\/option>\r\n            <option value=\"dark\">Dark Theme<\/option>\r\n            <option value=\"colorful\">Colorful<\/option>\r\n          <\/select>\r\n          <button id=\"copyEmbed\" class=\"fc-button\">\r\n            <span class=\"dashicons dashicons-admin-page\"><\/span> Copy Code\r\n          <\/button>\r\n        <\/div>\r\n        <textarea id=\"embedCode\" class=\"fc-embed-code\" readonly><\/textarea>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<style>\r\n.flag-counter-pro {\r\n  --fc-primary: #2271b1;\r\n  --fc-primary-hover: #135e96;\r\n  --fc-secondary: #f0f0f1;\r\n  --fc-border: #dcdcde;\r\n  --fc-text: #1d2327;\r\n  --fc-text-light: #50575e;\r\n  --fc-card-bg: #ffffff;\r\n  --fc-danger: #d63638;\r\n  --fc-danger-hover: #b32d2e;\r\n  --fc-success: #00a32a;\r\n  --fc-success-hover: #008a20;\r\n\r\n  font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen-Sans, Ubuntu, Cantarell, \"Helvetica Neue\", sans-serif;\r\n  color: var(--fc-text);\r\n  background-color: var(--fc-secondary);\r\n  padding: 20px;\r\n  max-width: 1200px;\r\n  margin: 0 auto;\r\n}\r\n\r\n.fc-container {\r\n  background-color: var(--fc-card-bg);\r\n  border-radius: 8px;\r\n  box-shadow: 0 1px 3px rgba(0,0,0,0.1);\r\n  padding: 30px;\r\n}\r\n\r\n.fc-header {\r\n  text-align: center;\r\n  margin-bottom: 30px;\r\n}\r\n.fc-header h1 {\r\n  color: var(--fc-primary);\r\n  margin: 0;\r\n  font-size: 28px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  gap: 10px;\r\n}\r\n.fc-header .dashicons {\r\n  font-size: 32px;\r\n  width: auto;\r\n  height: auto;\r\n}\r\n.fc-subtitle {\r\n  color: var(--fc-text-light);\r\n  margin-top: 8px;\r\n  font-size: 16px;\r\n}\r\n\r\n.fc-stats-row {\r\n  display: flex;\r\n  justify-content: center;\r\n  gap: 20px;\r\n  margin-bottom: 30px;\r\n}\r\n.fc-stat-card {\r\n  flex: 1;\r\n  max-width: 200px;\r\n  background-color: var(--fc-primary);\r\n  color: white;\r\n  border-radius: 6px;\r\n  padding: 20px;\r\n  text-align: center;\r\n  box-shadow: 0 2px 5px rgba(0,0,0,0.1);\r\n}\r\n.fc-stat-value {\r\n  font-size: 28px;\r\n  font-weight: bold;\r\n  margin-bottom: 5px;\r\n}\r\n.fc-stat-label {\r\n  font-size: 14px;\r\n  opacity: 0.9;\r\n}\r\n\r\n.fc-controls {\r\n  display: flex;\r\n  justify-content: space-between;\r\n  align-items: center;\r\n  margin-bottom: 20px;\r\n  gap: 15px;\r\n}\r\n.fc-view-options {\r\n  display: flex;\r\n  gap: 10px;\r\n}\r\n.fc-select {\r\n  padding: 8px 12px;\r\n  border: 1px solid var(--fc-border);\r\n  border-radius: 4px;\r\n  background-color: white;\r\n  font-size: 14px;\r\n}\r\n.fc-button {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 6px;\r\n  padding: 8px 16px;\r\n  background-color: var(--fc-secondary);\r\n  border: 1px solid var(--fc-border);\r\n  border-radius: 4px;\r\n  color: var(--fc-text);\r\n  cursor: pointer;\r\n  font-size: 14px;\r\n  transition: all 0.2s ease;\r\n}\r\n.fc-button:hover {\r\n  background-color: #f6f7f7;\r\n  border-color: var(--fc-text-light);\r\n}\r\n.fc-button-primary {\r\n  background-color: var(--fc-primary);\r\n  color: white;\r\n  border-color: var(--fc-primary);\r\n}\r\n.fc-button-primary:hover {\r\n  background-color: var(--fc-primary-hover);\r\n  border-color: var(--fc-primary-hover);\r\n}\r\n\r\n.fc-flags-grid {\r\n  display: grid;\r\n  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));\r\n  gap: 15px;\r\n  margin-bottom: 30px;\r\n}\r\n.fc-flag-card {\r\n  position: relative;\r\n  background-color: white;\r\n  border: 1px solid var(--fc-border);\r\n  border-radius: 6px;\r\n  padding: 15px 10px;\r\n  text-align: center;\r\n  transition: transform 0.2s ease, box-shadow 0.2s ease;\r\n}\r\n.fc-flag-card:hover {\r\n  transform: translateY(-3px);\r\n  box-shadow: 0 4px 8px rgba(0,0,0,0.1);\r\n}\r\n.fc-flag-img {\r\n  width: 60px;\r\n  height: 40px;\r\n  object-fit: cover;\r\n  border: 1px solid var(--fc-border);\r\n  margin-bottom: 10px;\r\n}\r\n.fc-flag-name {\r\n  font-weight: 500;\r\n  font-size: 14px;\r\n  margin-bottom: 5px;\r\n}\r\n.fc-flag-count {\r\n  font-size: 13px;\r\n  color: var(--fc-text-light);\r\n}\r\n.fc-flag-delete {\r\n  position: absolute;\r\n  top: 5px;\r\n  right: 5px;\r\n  width: 20px;\r\n  height: 20px;\r\n  background-color: var(--fc-danger);\r\n  color: white;\r\n  border: none;\r\n  border-radius: 50%;\r\n  font-size: 12px;\r\n  cursor: pointer;\r\n  opacity: 0;\r\n  transition: opacity 0.2s ease;\r\n}\r\n.fc-flag-card:hover .fc-flag-delete {\r\n  opacity: 1;\r\n}\r\n.fc-flag-delete:hover {\r\n  background-color: var(--fc-danger-hover);\r\n}\r\n\r\n.fc-add-section {\r\n  background-color: var(--fc-secondary);\r\n  border-radius: 6px;\r\n  padding: 20px;\r\n  margin-bottom: 30px;\r\n}\r\n.fc-add-section h2 {\r\n  margin-top: 0;\r\n  margin-bottom: 20px;\r\n  font-size: 18px;\r\n}\r\n.fc-form {\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 15px;\r\n}\r\n.fc-form-row {\r\n  display: flex;\r\n  gap: 15px;\r\n}\r\n.fc-form-group {\r\n  flex: 1;\r\n}\r\n.fc-form-group label {\r\n  display: block;\r\n  margin-bottom: 5px;\r\n  font-size: 14px;\r\n  font-weight: 500;\r\n}\r\n.fc-form-group input {\r\n  width: 100%;\r\n  padding: 8px 12px;\r\n  border: 1px solid var(--fc-border);\r\n  border-radius: 4px;\r\n  font-size: 14px;\r\n}\r\n\r\n.fc-embed-section h2 {\r\n  margin-top: 0;\r\n  margin-bottom: 20px;\r\n  font-size: 18px;\r\n}\r\n.fc-embed-options {\r\n  display: flex;\r\n  gap: 20px;\r\n}\r\n.fc-embed-preview {\r\n  flex: 1;\r\n  min-height: 150px;\r\n  background-color: var(--fc-secondary);\r\n  border: 1px dashed var(--fc-border);\r\n  border-radius: 6px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n.fc-embed-controls {\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 10px;\r\n  width: 250px;\r\n}\r\n.fc-embed-code {\r\n  width: 100%;\r\n  height: 100px;\r\n  margin-top: 15px;\r\n  padding: 10px;\r\n  border: 1px solid var(--fc-border);\r\n  border-radius: 4px;\r\n  font-family: monospace;\r\n  font-size: 13px;\r\n  resize: none;\r\n}\r\n\r\n@media (max-width: 768px) {\r\n  .fc-stats-row {\r\n    flex-direction: column;\r\n    align-items: center;\r\n  }\r\n  .fc-stat-card {\r\n    max-width: 100%;\r\n    width: 100%;\r\n  }\r\n  .fc-form-row {\r\n    flex-direction: column;\r\n  }\r\n  .fc-embed-options {\r\n    flex-direction: column;\r\n  }\r\n  .fc-embed-controls {\r\n    width: 100%;\r\n  }\r\n}\r\n<\/style>\r\n\r\n<script>\r\ndocument.addEventListener('DOMContentLoaded', function() {\r\n  \/\/ Sample data - in real implementation, this would come from AJAX\r\n  let countries = [\r\n    { code: 'US', name: 'United States', visits: 1245, lastUpdate: '2023-06-15' },\r\n    { code: 'GB', name: 'United Kingdom', visits: 876, lastUpdate: '2023-06-14' },\r\n    { code: 'DE', name: 'Germany', visits: 765, lastUpdate: '2023-06-14' },\r\n    { code: 'FR', name: 'France', visits: 654, lastUpdate: '2023-06-13' },\r\n    { code: 'JP', name: 'Japan', visits: 543, lastUpdate: '2023-06-12' },\r\n    { code: 'CA', name: 'Canada', visits: 432, lastUpdate: '2023-06-11' },\r\n    { code: 'AU', name: 'Australia', visits: 321, lastUpdate: '2023-06-10' },\r\n    { code: 'IN', name: 'India', visits: 987, lastUpdate: '2023-06-15' },\r\n    { code: 'BR', name: 'Brazil', visits: 876, lastUpdate: '2023-06-14' },\r\n    { code: 'IT', name: 'Italy', visits: 765, lastUpdate: '2023-06-13' }\r\n  ];\r\n\r\n  \/\/ DOM elements\r\n  const flagsGrid = document.getElementById('flagsGrid');\r\n  const totalVisitsEl = document.getElementById('totalVisits');\r\n  const uniqueCountriesEl = document.getElementById('uniqueCountries');\r\n  const topCountryEl = document.getElementById('topCountry');\r\n  const sortByEl = document.getElementById('sortBy');\r\n  const flagSizeEl = document.getElementById('flagSize');\r\n  const refreshBtn = document.getElementById('refreshData');\r\n  const addCountryForm = document.getElementById('addCountryForm');\r\n  const embedPreview = document.getElementById('embedPreview');\r\n  const embedTypeEl = document.getElementById('embedType');\r\n  const embedThemeEl = document.getElementById('embedTheme');\r\n  const embedCodeEl = document.getElementById('embedCode');\r\n  const copyEmbedBtn = document.getElementById('copyEmbed');\r\n\r\n  \/\/ Initialize\r\n  renderFlags();\r\n  updateStats();\r\n  updateEmbedPreview();\r\n\r\n  \/\/ Event listeners\r\n  sortByEl.addEventListener('change', renderFlags);\r\n  flagSizeEl.addEventListener('change', renderFlags);\r\n  refreshBtn.addEventListener('click', refreshData);\r\n  addCountryForm.addEventListener('submit', addNewCountry);\r\n  embedTypeEl.addEventListener('change', updateEmbedPreview);\r\n  embedThemeEl.addEventListener('change', updateEmbedPreview);\r\n  copyEmbedBtn.addEventListener('click', copyEmbedCode);\r\n\r\n  \/\/ Render flag cards\r\n  function renderFlags() {\r\n    \/\/ Sort countries\r\n    const sortBy = sortByEl.value;\r\n    const sortedCountries = [...countries];\r\n    \r\n    switch(sortBy) {\r\n      case 'visits':\r\n        sortedCountries.sort((a, b) => b.visits - a.visits);\r\n        break;\r\n      case 'name':\r\n        sortedCountries.sort((a, b) => a.name.localeCompare(b.name));\r\n        break;\r\n      case 'recent':\r\n        sortedCountries.sort((a, b) => new Date(b.lastUpdate) - new Date(a.lastUpdate));\r\n        break;\r\n    }\r\n\r\n    \/\/ Clear grid\r\n    flagsGrid.innerHTML = '';\r\n\r\n    \/\/ Get flag size\r\n    const flagSize = flagSizeEl.value;\r\n    let flagWidth, flagHeight;\r\n    \r\n    switch(flagSize) {\r\n      case 'small':\r\n        flagWidth = 40;\r\n        flagHeight = 30;\r\n        break;\r\n      case 'large':\r\n        flagWidth = 80;\r\n        flagHeight = 60;\r\n        break;\r\n      default: \/\/ medium\r\n        flagWidth = 60;\r\n        flagHeight = 40;\r\n    }\r\n\r\n    \/\/ Add flag cards\r\n    sortedCountries.forEach(country => {\r\n      const card = document.createElement('div');\r\n      card.className = 'fc-flag-card';\r\n      \r\n      card.innerHTML = `\r\n        <button class=\"fc-flag-delete\" data-code=\"${country.code}\">&times;<\/button>\r\n        <img decoding=\"async\" src=\"https:\/\/flagcdn.com\/w${flagWidth}\/${country.code.toLowerCase()}.png\" \r\n             class=\"fc-flag-img\" \r\n             alt=\"${country.name} flag\"\r\n             width=\"${flagWidth}\"\r\n             height=\"${flagHeight}\">\r\n        <div class=\"fc-flag-name\">${country.name}<\/div>\r\n        <div class=\"fc-flag-count\">${country.visits.toLocaleString()} visits<\/div>\r\n      `;\r\n      \r\n      flagsGrid.appendChild(card);\r\n    });\r\n\r\n    \/\/ Add delete handlers\r\n    document.querySelectorAll('.fc-flag-delete').forEach(btn => {\r\n      btn.addEventListener('click', function() {\r\n        const code = this.getAttribute('data-code');\r\n        deleteCountry(code);\r\n      });\r\n    });\r\n  }\r\n\r\n  \/\/ Update statistics\r\n  function updateStats() {\r\n    \/\/ Total visits\r\n    const totalVisits = countries.reduce((sum, country) => sum + country.visits, 0);\r\n    totalVisitsEl.textContent = totalVisits.toLocaleString();\r\n    \r\n    \/\/ Unique countries\r\n    uniqueCountriesEl.textContent = countries.length;\r\n    \r\n    \/\/ Top country\r\n    if (countries.length > 0) {\r\n      const topCountry = [...countries].sort((a, b) => b.visits - a.visits)[0];\r\n      topCountryEl.textContent = topCountry.name;\r\n    } else {\r\n      topCountryEl.textContent = '-';\r\n    }\r\n  }\r\n\r\n  \/\/ Refresh data (simulated)\r\n  function refreshData() {\r\n    refreshBtn.innerHTML = '<span class=\"dashicons dashicons-update\"><\/span> Loading...';\r\n    \r\n    \/\/ Simulate API call\r\n    setTimeout(() => {\r\n      \/\/ In real implementation, this would be an AJAX call\r\n      refreshBtn.innerHTML = '<span class=\"dashicons dashicons-update\"><\/span> Refresh';\r\n      renderFlags();\r\n      updateStats();\r\n    }, 1000);\r\n  }\r\n\r\n  \/\/ Add new country\r\n  function addNewCountry(e) {\r\n    e.preventDefault();\r\n    \r\n    const code = document.getElementById('countryCode').value.trim().toUpperCase();\r\n    const name = document.getElementById('countryName').value.trim();\r\n    const visits = parseInt(document.getElementById('visitCount').value);\r\n    \r\n    \/\/ Validate\r\n    if (!\/^[A-Z]{2}$\/.test(code)) {\r\n      alert('Please enter a valid 2-letter country code.');\r\n      return;\r\n    }\r\n    \r\n    if (name.length < 2) {\r\n      alert('Please enter a valid country name.');\r\n      return;\r\n    }\r\n    \r\n    if (isNaN(visits) || visits < 0) {\r\n      alert('Please enter a valid visit count.');\r\n      return;\r\n    }\r\n    \r\n    \/\/ Check if country already exists\r\n    const existingIndex = countries.findIndex(c => c.code === code);\r\n    const today = new Date().toISOString().split('T')[0];\r\n    \r\n    if (existingIndex >= 0) {\r\n      \/\/ Update existing\r\n      countries[existingIndex].visits += visits;\r\n      countries[existingIndex].lastUpdate = today;\r\n    } else {\r\n      \/\/ Add new\r\n      countries.push({\r\n        code,\r\n        name,\r\n        visits,\r\n        lastUpdate: today\r\n      });\r\n    }\r\n    \r\n    \/\/ Reset form\r\n    addCountryForm.reset();\r\n    \r\n    \/\/ Update UI\r\n    renderFlags();\r\n    updateStats();\r\n    updateEmbedPreview();\r\n  }\r\n\r\n  \/\/ Delete country\r\n  function deleteCountry(code) {\r\n    if (confirm(`Are you sure you want to remove this country?`)) {\r\n      countries = countries.filter(c => c.code !== code);\r\n      renderFlags();\r\n      updateStats();\r\n      updateEmbedPreview();\r\n    }\r\n  }\r\n\r\n  \/\/ Update embed preview\r\n  function updateEmbedPreview() {\r\n    const type = embedTypeEl.value;\r\n    const theme = embedThemeEl.value;\r\n    \r\n    \/\/ Generate preview HTML\r\n    let previewHtml = '';\r\n    let embedHtml = '';\r\n    \r\n    if (type === 'widget') {\r\n      previewHtml = `\r\n        <div style=\"text-align: center; padding: 15px; border-radius: 6px; \r\n                    background: ${theme === 'dark' ? '#1d2327' : theme === 'colorful' ? '#f0f6fc' : '#fff'};\r\n                    border: 1px solid ${theme === 'dark' ? '#2c3338' : '#dcdcde'};\">\r\n          <h3 style=\"margin: 0 0 10px; color: ${theme === 'dark' ? '#fff' : '#1d2327'};\">Visitor Locations<\/h3>\r\n          <div style=\"display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;\">\r\n            ${countries.slice(0, 5).map(c => `\r\n              <div style=\"text-align: center;\">\r\n                <img decoding=\"async\" src=\"https:\/\/flagcdn.com\/w40\/${c.code.toLowerCase()}.png\" \r\n                     alt=\"${c.name}\" \r\n                     style=\"border: 1px solid ${theme === 'dark' ? '#3c434a' : '#dcdcde'};\">\r\n                <div style=\"font-size: 12px; color: ${theme === 'dark' ? '#f0f0f1' : '#50575e'};\">\r\n                  ${c.visits.toLocaleString()}\r\n                <\/div>\r\n              <\/div>\r\n            `).join('')}\r\n          <\/div>\r\n        <\/div>\r\n      `;\r\n      \r\n      embedHtml = `\r\n        <div id=\"flag-counter-widget\" \r\n             data-theme=\"${theme}\" \r\n             style=\"width: 100%; max-width: 300px; margin: 0 auto;\"><\/div>\r\n        <script src=\"https:\/\/yourdomain.com\/path\/to\/flag-counter.js\"><\\\/script>\r\n      `;\r\n    } \r\n    else if (type === 'image') {\r\n      previewHtml = `\r\n        <img decoding=\"async\" src=\"https:\/\/flagcdn.com\/w320\/${countries[0].code.toLowerCase()}.png\" \r\n             style=\"max-width: 100%; height: auto; border: 1px solid #dcdcde;\">\r\n      `;\r\n      \r\n      embedHtml = `\r\n        <img decoding=\"async\" src=\"https:\/\/yourdomain.com\/path\/to\/flag-counter-image.png\" \r\n             alt=\"Visitor Locations\" \r\n             style=\"max-width: 100%; height: auto;\">\r\n      `;\r\n    }\r\n    else { \/\/ badge\r\n      previewHtml = `\r\n        <div style=\"display: inline-flex; align-items: center; gap: 5px; \r\n                    padding: 5px 10px; border-radius: 4px; \r\n                    background: ${theme === 'dark' ? '#1d2327' : theme === 'colorful' ? '#f0f6fc' : '#fff'};\r\n                    border: 1px solid ${theme === 'dark' ? '#2c3338' : '#dcdcde'};\">\r\n          <img decoding=\"async\" src=\"https:\/\/flagcdn.com\/w20\/${countries[0].code.toLowerCase()}.png\" \r\n               alt=\"Visitors\" \r\n               style=\"border: 1px solid ${theme === 'dark' ? '#3c434a' : '#dcdcde'};\">\r\n          <span style=\"font-size: 12px; color: ${theme === 'dark' ? '#f0f0f1' : '#50575e'};\">${countries.length} countries<\/span>\r\n        <\/div>\r\n      `;\r\n      \r\n      embedHtml = `\r\n        <a href=\"https:\/\/yourdomain.com\" target=\"_blank\">\r\n          <img decoding=\"async\" src=\"https:\/\/yourdomain.com\/path\/to\/flag-counter-badge.png\" \r\n               alt=\"Visitors from ${countries.length} countries\">\r\n        <\/a>\r\n      `;\r\n    }\r\n    \r\n    embedPreview.innerHTML = previewHtml;\r\n    embedCodeEl.value = embedHtml;\r\n  }\r\n\r\n  \/\/ Copy embed code\r\n  function copyEmbedCode() {\r\n    embedCodeEl.select();\r\n    document.execCommand('copy');\r\n    \r\n    \/\/ Show confirmation\r\n    const originalText = copyEmbedBtn.innerHTML;\r\n    copyEmbedBtn.innerHTML = '<span class=\"dashicons dashicons-yes\"><\/span> Copied!';\r\n    \r\n    setTimeout(() => {\r\n      copyEmbedBtn.innerHTML = originalText;\r\n    }, 2000);\r\n  }\r\n});\r\n<\/script>\n\n\n\n<p><a href=\"https:\/\/ingenio.vip\/wp-admin\/admin.php?page=ingenio-tools-flag-counter\"><\/a><\/p>\n\n\n\n<p><\/p>","protected":false},"excerpt":{"rendered":"<p>Flag Counter Pro Track and visualize your global audience 0 Total Visits 0 Countries &#8211; Top Country Sort by Visits Sort by Name Recently Added Small Flags Medium Flags Large Flags Refresh Add New Country Data Country Code Country Name Visit Count Add Country Embed Options Interactive Widget Static Image Small Badge Light Theme Dark [&hellip;]<\/p>\n<\/p><div class=\"more-link\"><a href=\"https:\/\/ingenio.vip\/zh\/tools-pages\/flag-counter\/\" class=\"btn btn-small btn--dark btn-hover-shadow\"><span class=\"text\">Continue Reading<\/span><i class=\"seoicon-right-arrow\"><\/i><\/a><\/div>","protected":false},"author":1,"featured_media":0,"menu_order":0,"template":"elementor_header_footer","meta":{"_acf_changed":false,"googlesitekit_rrm_CAowrpbbCw:productID":"","footnotes":""},"tools-categories":[],"class_list":["post-4457","tools-pages","type-tools-pages","status-publish","hentry"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/ingenio.vip\/zh\/wp-json\/wp\/v2\/tools-pages\/4457","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ingenio.vip\/zh\/wp-json\/wp\/v2\/tools-pages"}],"about":[{"href":"https:\/\/ingenio.vip\/zh\/wp-json\/wp\/v2\/types\/tools-pages"}],"author":[{"embeddable":true,"href":"https:\/\/ingenio.vip\/zh\/wp-json\/wp\/v2\/users\/1"}],"version-history":[{"count":1,"href":"https:\/\/ingenio.vip\/zh\/wp-json\/wp\/v2\/tools-pages\/4457\/revisions"}],"predecessor-version":[{"id":4458,"href":"https:\/\/ingenio.vip\/zh\/wp-json\/wp\/v2\/tools-pages\/4457\/revisions\/4458"}],"wp:attachment":[{"href":"https:\/\/ingenio.vip\/zh\/wp-json\/wp\/v2\/media?parent=4457"}],"wp:term":[{"taxonomy":"tools-categories","embeddable":true,"href":"https:\/\/ingenio.vip\/zh\/wp-json\/wp\/v2\/tools-categories?post=4457"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}