{"id":493,"date":"2025-07-23T15:02:35","date_gmt":"2025-07-23T15:02:35","guid":{"rendered":"https:\/\/tipsbyanita.in\/?page_id=493"},"modified":"2025-07-23T15:02:39","modified_gmt":"2025-07-23T15:02:39","slug":"mala-jaap","status":"publish","type":"page","link":"https:\/\/tipsbyanita.in\/hi\/mala-jaap\/","title":{"rendered":""},"content":{"rendered":"<div class=\"sacred-chant-counter\">\n  <style>\n    \/* General Styles *\/\n    .sacred-chant-counter * {\n      box-sizing: border-box;\n      user-select: none;\n      touch-action: manipulation;\n      -webkit-tap-highlight-color: transparent;\n    }\n\n    .sacred-chant-counter {\n      font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;\n      text-align: center;\n      background: linear-gradient(to bottom right, #fceabb, #f8b500);\n      color: #4a2f03;\n      padding: 20px;\n      border-radius: 15px;\n      box-shadow: 0 10px 30px rgba(0,0,0,0.1);\n      max-width: 100%;\n      margin: 0 auto;\n    }\n\n    .sacred-chant-counter h1 {\n      font-size: 28px;\n      color: #7b3f00;\n      text-shadow: 1px 1px 2px rgba(0,0,0,0.1);\n      margin-bottom: 15px;\n    }\n\n    \/* Mantra Selection *\/\n    .sacred-chant-counter .select-container {\n      position: relative;\n      width: 100%;\n      margin: 15px auto;\n      background: rgba(255, 255, 255, 0.8);\n      border-radius: 12px;\n      box-shadow: 0 4px 10px rgba(0,0,0,0.1);\n      padding: 5px;\n    }\n\n    .sacred-chant-counter select {\n      appearance: none;\n      -webkit-appearance: none;\n      -moz-appearance: none;\n      font-size: 16px;\n      padding: 12px 20px;\n      width: 100%;\n      background: transparent;\n      border: none;\n      color: #6a4a2a;\n      cursor: pointer;\n      outline: none;\n    }\n\n    .sacred-chant-counter .select-container::after {\n      content: '\u25bc';\n      font-size: 14px;\n      color: #7b3f00;\n      position: absolute;\n      right: 15px;\n      top: 50%;\n      transform: translateY(-50%);\n      pointer-events: none;\n    }\n\n    .sacred-chant-counter #selectedMantra {\n      font-size: 18px;\n      margin: 10px auto;\n      color: #7b3f00;\n      min-height: 25px;\n    }\n\n    .sacred-chant-counter #counter {\n      font-size: 60px;\n      margin: 10px 0 15px;\n      color: #7b3f00;\n      font-weight: bold;\n      text-shadow: 2px 2px 5px rgba(0,0,0,0.1);\n      transition: transform 0.2s ease-out;\n    }\n\n    \/* Progress Bar *\/\n    .sacred-chant-counter .progress-container {\n      width: 100%;\n      height: 8px;\n      background-color: rgba(255, 255, 255, 0.5);\n      border-radius: 4px;\n      margin: 0 auto 15px;\n      overflow: hidden;\n    }\n\n    .sacred-chant-counter .progress-bar {\n      height: 100%;\n      background: linear-gradient(to right, #8bc34a, #4caf50);\n      width: 0%;\n      transition: width 0.3s ease;\n      border-radius: 4px;\n    }\n\n    \/* Jaap Button *\/\n    .sacred-chant-counter #jaap-container {\n      position: relative;\n      width: 220px;\n      height: 220px;\n      margin: 20px auto;\n    }\n\n    .sacred-chant-counter .jaap-btn {\n      background-image: linear-gradient(to bottom right, #a5d6a7, #8bc34a);\n      color: white;\n      font-size: 30px;\n      width: 100%;\n      height: 100%;\n      border-radius: 50%;\n      border: 5px solid rgba(255,255,255,0.7);\n      box-shadow: 0 10px 20px rgba(0,0,0,0.25), inset 0 0 15px rgba(255,255,255,0.5);\n      cursor: pointer;\n      position: absolute;\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      transition: transform 0.1s ease-out;\n      outline: none;\n    }\n\n    .sacred-chant-counter .jaap-btn:active {\n      transform: scale(0.95);\n    }\n\n    .sacred-chant-counter .jaap-btn span {\n      font-size: 14px;\n      margin-top: 5px;\n      display: block;\n    }\n\n    \/* Floating Mantra Text *\/\n    .sacred-chant-counter .floating-text {\n      position: absolute;\n      font-size: 18px;\n      color: #6a1b9a;\n      animation: floatOut 2s ease-out forwards;\n      white-space: nowrap;\n      pointer-events: none;\n      text-shadow: 1px 1px 2px rgba(0,0,0,0.1);\n      opacity: 0;\n      font-weight: bold;\n    }\n\n    @keyframes floatOut {\n      0% {\n        opacity: 0.8;\n        transform: translate(-50%, -50%) scale(0.8);\n      }\n      100% {\n        opacity: 0;\n        transform: translate(-50%, -150%) scale(1.3);\n      }\n    }\n\n    \/* Completion Alert *\/\n    .sacred-chant-counter #alert108 {\n      font-size: 20px;\n      color: #d32f2f;\n      margin: 10px auto;\n      display: none;\n      font-weight: bold;\n      animation: fadeInOut 4s forwards;\n      text-shadow: 1px 1px 2px rgba(0,0,0,0.1);\n      line-height: 1.4;\n    }\n\n    @keyframes fadeInOut {\n      0% { opacity: 0; transform: translateY(20px); }\n      10% { opacity: 1; transform: translateY(0); }\n      90% { opacity: 1; transform: translateY(0); }\n      100% { opacity: 0; transform: translateY(-20px); }\n    }\n\n    \/* Control Buttons *\/\n    .sacred-chant-counter .control-buttons {\n      display: flex;\n      justify-content: center;\n      gap: 15px;\n      margin: 15px auto;\n      width: 100%;\n    }\n\n    .sacred-chant-counter .control-btn {\n      background-color: #ffb300;\n      color: white;\n      border: none;\n      padding: 12px 20px;\n      border-radius: 8px;\n      font-size: 16px;\n      cursor: pointer;\n      box-shadow: 0 4px 8px rgba(0,0,0,0.15);\n      transition: all 0.2s ease;\n      outline: none;\n      flex: 1;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n\n    .sacred-chant-counter .control-btn:active {\n      transform: scale(0.96);\n    }\n\n    \/* Daily Verse *\/\n    .sacred-chant-counter #dailyVerse {\n      font-style: italic;\n      font-size: 15px;\n      color: #8d6e63;\n      margin: 10px auto;\n      line-height: 1.5;\n    }\n\n    \/* Credits *\/\n    .sacred-chant-counter .credits {\n      margin: 15px auto 0;\n      font-size: 13px;\n      color: #8d6e63;\n    }\n\n    \/* Stats Section *\/\n    .sacred-chant-counter .stats-container {\n      background: rgba(255, 255, 255, 0.3);\n      border-radius: 10px;\n      padding: 10px;\n      margin: 15px 0;\n      display: none;\n    }\n\n    .sacred-chant-counter .stat-item {\n      display: flex;\n      justify-content: space-between;\n      margin: 5px 0;\n    }\n\n    \/* Settings Toggle *\/\n    .sacred-chant-counter .settings-toggle {\n      background: none;\n      border: none;\n      color: #7b3f00;\n      font-size: 14px;\n      cursor: pointer;\n      margin-top: 10px;\n      text-decoration: underline;\n    }\n\n    \/* Settings Panel *\/\n    .sacred-chant-counter .settings-panel {\n      display: none;\n      margin-top: 15px;\n      background: rgba(255, 255, 255, 0.3);\n      padding: 15px;\n      border-radius: 10px;\n    }\n\n    \/* Vibration Animation *\/\n    .sacred-chant-counter .vibrate {\n      animation: vibration 0.3s ease-in-out;\n    }\n\n    @keyframes vibration {\n      0% { transform: rotate(0deg); }\n      25% { transform: rotate(1deg); }\n      50% { transform: rotate(-1deg); }\n      75% { transform: rotate(1deg); }\n      100% { transform: rotate(0deg); }\n    }\n\n    \/* Responsive Adjustments *\/\n    @media (max-width: 480px) {\n      .sacred-chant-counter h1 {\n        font-size: 24px;\n      }\n      \n      .sacred-chant-counter #jaap-container {\n        width: 180px;\n        height: 180px;\n      }\n      \n      .sacred-chant-counter .control-buttons {\n        flex-direction: column;\n        gap: 10px;\n      }\n    }\n  <\/style>\n\n  <h1>\ud83d\udcff Mala Jaap Counter<\/h1>\n\n  <div id=\"dailyVerse\"><\/div>\n\n  <div class=\"select-container\">\n    <select id=\"mantraSelect\">\n      <option value=\"\">&#8212; Select a Chant &#8212;<\/option>\n      <option value=\"\u0950 \u0928\u092e\u0903 \u0936\u093f\u0935\u093e\u092f\">\u0950 \u0928\u092e\u0903 \u0936\u093f\u0935\u093e\u092f<\/option>\n      <option value=\"\u0950 \u0939\u0928\u0941\u092e\u0924\u0947 \u0928\u092e\u0903\">\u0950 \u0939\u0928\u0941\u092e\u0924\u0947 \u0928\u092e\u0903<\/option>\n      <option value=\"\u0930\u093e\u092e \u0930\u093e\u092e\">\u0930\u093e\u092e \u0930\u093e\u092e<\/option>\n      <option value=\"\u0930\u093e\u0927\u0947 \u0930\u093e\u0927\u0947\">\u0930\u093e\u0927\u0947 \u0930\u093e\u0927\u0947<\/option>\n      <option value=\"\u0950 \u0936\u094d\u0930\u0940 \u0917\u0923\u0947\u0936\u093e\u092f \u0928\u092e\u0903\">\u0950 \u0936\u094d\u0930\u0940 \u0917\u0923\u0947\u0936\u093e\u092f \u0928\u092e\u0903<\/option>\n    <\/select>\n  <\/div>\n\n  <div id=\"selectedMantra\">Please select a chant to begin your spiritual journey.<\/div>\n  <div id=\"counter\">0<\/div>\n\n  <div class=\"progress-container\">\n    <div class=\"progress-bar\" id=\"progressBar\"><\/div>\n  <\/div>\n\n  <div id=\"jaap-container\">\n    <button class=\"jaap-btn\" id=\"jaapButton\">\n      Tap to Chant\n      <span>or press Space<\/span>\n    <\/button>\n  <\/div>\n\n  <div id=\"alert108\"><\/div>\n\n  <div class=\"control-buttons\">\n    <button class=\"control-btn\" id=\"resetBtn\">\ud83d\udd04 Reset<\/button>\n    <button class=\"control-btn\" id=\"undoBtn\">\u21a9\ufe0f Undo<\/button>\n    <button class=\"control-btn\" id=\"statsBtn\">\ud83d\udcca Stats<\/button>\n  <\/div>\n\n  <div class=\"stats-container\" id=\"statsContainer\">\n    <div class=\"stat-item\"><span>Today&#8217;s Count:<\/span> <span id=\"todayCount\">0<\/span><\/div>\n    <div class=\"stat-item\"><span>Total Count:<\/span> <span id=\"totalCount\">0<\/span><\/div>\n    <div class=\"stat-item\"><span>Completed Rounds:<\/span> <span id=\"completedRounds\">0<\/span><\/div>\n    <div class=\"stat-item\"><span>Last Chant:<\/span> <span id=\"lastChantTime\">Never<\/span><\/div>\n  <\/div>\n\n  <button class=\"settings-toggle\" id=\"settingsToggle\">\u2699\ufe0f Settings<\/button>\n\n  <div class=\"settings-panel\" id=\"settingsPanel\">\n    <label style=\"display:block; margin:10px 0;\">\n      <input type=\"checkbox\" id=\"soundToggle\" checked> Enable Sounds\n    <\/label>\n    <label style=\"display:block; margin:10px 0;\">\n      <input type=\"checkbox\" id=\"vibrationToggle\" checked> Enable Vibration\n    <\/label>\n  <\/div>\n\n  <div class=\"credits\">Made with devotion and peace by a seeker \ud83d\ude4f<\/div>\n\n  <audio id=\"jaapSound\" src=\"https:\/\/assets.mixkit.co\/sfx\/preview\/mixkit-positive-interface-beep-221.mp3\"><\/audio>\n  <audio id=\"alertSound\" src=\"https:\/\/assets.mixkit.co\/sfx\/preview\/mixkit-bell-notification-933.mp3\"><\/audio>\n  <audio id=\"successSound\" src=\"https:\/\/assets.mixkit.co\/sfx\/preview\/mixkit-church-bell-single-chime-1093.mp3\"><\/audio>\n\n  <script>\n    \/\/ Inside DOMContentLoaded:\ndocument.addEventListener('DOMContentLoaded', function () {\n  const elements = {\n    mantraSelect: document.getElementById('mantraSelect'),\n    selectedMantra: document.getElementById('selectedMantra'),\n    counter: document.getElementById('counter'),\n    jaapButton: document.getElementById('jaapButton'),\n    progressBar: document.getElementById('progressBar'),\n    alert108: document.getElementById('alert108'),\n    dailyVerse: document.getElementById('dailyVerse'),\n    statsContainer: document.getElementById('statsContainer'),\n    todayCount: document.getElementById('todayCount'),\n    totalCount: document.getElementById('totalCount'),\n    completedRounds: document.getElementById('completedRounds'),\n    lastChantTime: document.getElementById('lastChantTime'),\n    settingsToggle: document.getElementById('settingsToggle'),\n    settingsPanel: document.getElementById('settingsPanel'),\n    soundToggle: document.getElementById('soundToggle'),\n    vibrationToggle: document.getElementById('vibrationToggle'),\n    resetBtn: document.getElementById('resetBtn'),\n    undoBtn: document.getElementById('undoBtn'),\n    statsBtn: document.getElementById('statsBtn'),\n    jaapSound: document.getElementById('jaapSound'),\n    alertSound: document.getElementById('alertSound'),\n    successSound: document.getElementById('successSound')\n  };\n\n  let count = 0, todayCount = 0, totalCount = 0;\n  let currentMantra = \"\", lastChantTime = null;\n  let settings = { soundEnabled: true, vibrationEnabled: true };\n\n  function loadState() {\n    count = parseInt(localStorage.getItem('malaCount') || 0);\n    todayCount = parseInt(localStorage.getItem('malaTodayCount') || 0);\n    totalCount = parseInt(localStorage.getItem('malaTotalCount') || 0);\n    currentMantra = localStorage.getItem('malaMantraValue') || '';\n    lastChantTime = localStorage.getItem('malaLastChant') ? new Date(localStorage.getItem('malaLastChant')) : null;\n    settings = JSON.parse(localStorage.getItem('malaSettings') || JSON.stringify(settings));\n    elements.counter.textContent = count;\n    elements.mantraSelect.value = currentMantra;\n    elements.soundToggle.checked = settings.soundEnabled;\n    elements.vibrationToggle.checked = settings.vibrationEnabled;\n    if (currentMantra) elements.selectedMantra.textContent = `Active Chant: ${currentMantra}`;\n    updateProgress(); updateStats();\n  }\n\n  function saveState() {\n    localStorage.setItem('malaCount', count);\n    localStorage.setItem('malaTodayCount', todayCount);\n    localStorage.setItem('malaTotalCount', totalCount);\n    localStorage.setItem('malaMantraValue', currentMantra);\n    if (lastChantTime) localStorage.setItem('malaLastChant', lastChantTime.toISOString());\n    localStorage.setItem('malaSettings', JSON.stringify(settings));\n  }\n\n  function updateProgress() {\n    elements.progressBar.style.width = `${(count % 108) \/ 108 * 100}%`;\n  }\n\n  function updateStats() {\n    elements.todayCount.textContent = todayCount;\n    elements.totalCount.textContent = totalCount;\n    elements.completedRounds.textContent = Math.floor(count \/ 108);\n    elements.lastChantTime.textContent = lastChantTime ? lastChantTime.toLocaleTimeString() : 'Never';\n  }\n\n  function displayDailyVerse() {\n    const today = new Date();\n    const index = Math.floor((today - new Date(today.getFullYear(), 0, 0)) \/ 86400000) % dailyVerses.length;\n    elements.dailyVerse.textContent = dailyVerses[index];\n  }\n\n  function checkDayChange() {\n    const todayStr = new Date().toDateString();\n    const lastUsedDate = localStorage.getItem('lastUsedDate');\n    if (lastUsedDate !== todayStr) todayCount = 0;\n    localStorage.setItem('lastUsedDate', todayStr);\n  }\n\n  function handleMantraChange() {\n    const newMantra = elements.mantraSelect.value;\n    if (count > 0 && newMantra !== currentMantra) {\n      if (confirm('Change mantra and reset counter?')) resetCounter();\n    }\n    currentMantra = newMantra;\n    elements.selectedMantra.textContent = currentMantra ? `Active Chant: ${currentMantra}` : 'Please select a chant to begin your spiritual journey.';\n    saveState();\n  }\n\n  async function increaseCount() {\n    if (!currentMantra) return alert('Please select a chant first.');\n    count++; todayCount++; totalCount++;\n    lastChantTime = new Date();\n    elements.counter.textContent = count;\n    elements.counter.classList.add('vibrate');\n    setTimeout(() => elements.counter.classList.remove('vibrate'), 300);\n    updateProgress(); updateStats();\n    if (settings.soundEnabled) {\n      try {\n        elements.jaapSound.currentTime = 0;\n        await elements.jaapSound.play();\n      } catch (e) { console.warn('Audio error:', e); }\n    }\n    if (settings.vibrationEnabled && navigator.vibrate) navigator.vibrate(30);\n    createFloatingText(currentMantra);\n    if (count % 108 === 0) {\n      const rounds = count \/ 108;\n      showCompletionAlert(`\ud83c\udf89 ${count} Jaap Completed!<br>${rounds} round${rounds > 1 ? 's' : ''} finished! \ud83d\ude4f`, rounds === 1);\n    }\n    saveState();\n  }\n\n  function createFloatingText(text) {\n    const container = document.getElementById('jaap-container');\n    const floatText = document.createElement('div');\n    floatText.className = 'floating-text';\n    floatText.textContent = text;\n    floatText.style.left = '50%';\n    floatText.style.top = '50%';\n    floatText.style.zIndex = 999;\n    container.appendChild(floatText);\n    setTimeout(() => floatText.remove(), 2000);\n  }\n\n  async function showCompletionAlert(message, isFirst) {\n    elements.alert108.innerHTML = message;\n    elements.alert108.style.display = 'block';\n    try {\n      const sound = isFirst ? elements.successSound : elements.alertSound;\n      if (settings.soundEnabled) {\n        sound.currentTime = 0;\n        await sound.play();\n      }\n    } catch (e) { console.warn('Sound error:', e); }\n    setTimeout(() => elements.alert108.style.display = 'none', 4000);\n  }\n\n  function decreaseCount() {\n    if (count > 0) {\n      count--; todayCount = Math.max(0, todayCount - 1); totalCount = Math.max(0, totalCount - 1);\n      elements.counter.textContent = count;\n      updateProgress(); updateStats();\n      saveState();\n    }\n  }\n\n  function resetCounter() {\n    if (confirm('Reset counter to zero?')) {\n      count = 0;\n      elements.counter.textContent = count;\n      updateProgress(); updateStats();\n      elements.alert108.style.display = 'none';\n      saveState();\n    }\n  }\n\n  function toggleStats() {\n    elements.statsContainer.style.display = elements.statsContainer.style.display === 'none' ? 'block' : 'none';\n  }\n\n  function toggleSettings() {\n    elements.settingsPanel.style.display = elements.settingsPanel.style.display === 'none' ? 'block' : 'none';\n  }\n\n  function handleSettingsChange() {\n    settings.soundEnabled = elements.soundToggle.checked;\n    settings.vibrationEnabled = elements.vibrationToggle.checked;\n    saveState();\n  }\n\n  \/\/ \ud83d\udc47 Event Listeners (with mobile support)\n  elements.mantraSelect.addEventListener('change', handleMantraChange);\n  elements.mantraSelect.addEventListener('touchend', handleMantraChange, { passive: true });\n  elements.jaapButton.addEventListener('click', increaseCount);\n  elements.jaapButton.addEventListener('touchstart', increaseCount, { passive: true });\n  elements.resetBtn.addEventListener('click', resetCounter);\n  elements.undoBtn.addEventListener('click', decreaseCount);\n  elements.statsBtn.addEventListener('click', toggleStats);\n  elements.settingsToggle.addEventListener('click', toggleSettings);\n  elements.soundToggle.addEventListener('change', handleSettingsChange);\n  elements.vibrationToggle.addEventListener('change', handleSettingsChange);\n  document.addEventListener('keydown', (e) => {\n    if (e.code === 'Space') {\n      e.preventDefault();\n      increaseCount();\n    }\n  });\n\n  checkDayChange();\n  loadState();\n  displayDailyVerse();\n});\n\n  <\/script>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>\ud83d\udcff Mala Jaap Counter &#8212; Select a Chant &#8212;\u0950 \u0928\u092e\u0903 \u0936\u093f\u0935\u093e\u092f\u0950 \u0939\u0928\u0941\u092e\u0924\u0947 \u0928\u092e\u0903\u0930\u093e\u092e \u0930\u093e\u092e\u0930\u093e\u0927\u0947 \u0930\u093e\u0927\u0947\u0950 \u0936\u094d\u0930\u0940 \u0917\u0923\u0947\u0936\u093e\u092f \u0928\u092e\u0903 Please select a chant to begin your spiritual journey. 0 Tap to Chant or press Space \ud83d\udd04 Reset \u21a9\ufe0f Undo \ud83d\udcca Stats Today&#8217;s Count: 0 Total Count: 0 Completed Rounds: 0 Last Chant: Never \u2699\ufe0f Settings Enable [&hellip;]<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-493","page","type-page","status-publish"],"_links":{"self":[{"href":"https:\/\/tipsbyanita.in\/hi\/wp-json\/wp\/v2\/pages\/493","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tipsbyanita.in\/hi\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/tipsbyanita.in\/hi\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/tipsbyanita.in\/hi\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tipsbyanita.in\/hi\/wp-json\/wp\/v2\/comments?post=493"}],"version-history":[{"count":1,"href":"https:\/\/tipsbyanita.in\/hi\/wp-json\/wp\/v2\/pages\/493\/revisions"}],"predecessor-version":[{"id":495,"href":"https:\/\/tipsbyanita.in\/hi\/wp-json\/wp\/v2\/pages\/493\/revisions\/495"}],"wp:attachment":[{"href":"https:\/\/tipsbyanita.in\/hi\/wp-json\/wp\/v2\/media?parent=493"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}