Count your daily Chating

-

 <!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8" />

  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

  <title>Mantra Counter</title>

  <style>

    body {

      font-family: sans-serif;

      background-color: #fff7ed;

      color: #000;

      padding: 20px;

      text-align: center;

      transition: all 0.3s ease;

    }

    body.dark {

      background-color: #111827;

      color: #fff;

    }

    textarea {

      width: 100%;

      padding: 10px;

      font-size: 18px;

      text-align: center;

    }

    .btn {

      padding: 10px 20px;

      margin-top: 10px;

      font-size: 18px;

      cursor: pointer;

      border: none;

      border-radius: 8px;

    }

    .btn-primary {

      background-color: orange;

      color: white;

    }

    .btn-outline {

      background-color: white;

      border: 2px solid gray;

      color: black;

    }

    .btn-outline.dark {

      background-color: #1f2937;

      color: white;

      border-color: white;

    }

    .section {

      margin-top: 20px;

    }

    .toggle {

      margin-top: 10px;

    }

  </style>

</head>

<body>

  <h1>🕉️ Mantra Counter</h1>

  <textarea id="mantraInput" rows="2">ॐ नमः शिवाय</textarea>


  <div class="section">

    <div><strong>Current Count:</strong> <span id="currentCount">0</span></div>

    <div><strong>Completed Circles (108x):</strong> <span id="circleCount">0</span></div>

    <button class="btn btn-primary" onclick="handleTap()">Tap ✨</button>

    <button class="btn btn-outline" onclick="resetAll()">Reset All</button>

  </div>


  <div class="toggle">

    <label>

      <input type="checkbox" id="vibrationToggle" checked />

      Vibration on 108 Completion

    </label><br/>

    <label>

      <input type="checkbox" id="darkToggle" />

      Dark Mode

    </label>

  </div>


  <div class="section">

    <h3>📊 History</h3>

    <p>Today: <span id="todayCount">0</span> mala</p>

    <p>This Week: <span id="weeklyCount">0</span> mala</p>

    <p>This Month: <span id="monthlyCount">0</span> mala</p>

    <p>All Time: <span id="allTimeCount">0</span> mala</p>

  </div>


  <script>

    let count = 0;

    let circles = 0;

    const vibrationToggle = document.getElementById('vibrationToggle');

    const darkToggle = document.getElementById('darkToggle');

    const mantraInput = document.getElementById('mantraInput');


    const currentCount = document.getElementById('currentCount');

    const circleCount = document.getElementById('circleCount');

    const todayCount = document.getElementById('todayCount');

    const weeklyCount = document.getElementById('weeklyCount');

    const monthlyCount = document.getElementById('monthlyCount');

    const allTimeCount = document.getElementById('allTimeCount');


    const getToday = () => new Date().toISOString().split('T')[0];


    function loadHistory() {

      return JSON.parse(localStorage.getItem('malaHistory') || '{}');

    }


    function saveHistory(data) {

      localStorage.setItem('malaHistory', JSON.stringify(data));

    }


    function calculateHistoryStats(history) {

      const today = new Date();

      let week = 0, month = 0, total = 0;


      for (const [date, value] of Object.entries(history)) {

        const entryDate = new Date(date);

        const diffDays = Math.floor((today - entryDate) / (1000 * 60 * 60 * 24));

        total += value;


        if (diffDays < 7) week += value;

        if (entryDate.getMonth() === today.getMonth() &&

            entryDate.getFullYear() === today.getFullYear()) {

          month += value;

        }

      }


      todayCount.textContent = history[getToday()] || 0;

      weeklyCount.textContent = week;

      monthlyCount.textContent = month;

      allTimeCount.textContent = total;

    }


    function handleTap() {

      count++;

      if (count >= 108) {

        circles++;

        count = 0;


        if (vibrationToggle.checked && navigator.vibrate) {

          navigator.vibrate([200, 100, 200]);

        }


        const today = getToday();

        const history = loadHistory();

        history[today] = (history[today] || 0) + 1;

        saveHistory(history);

        calculateHistoryStats(history);

      }

      currentCount.textContent = count;

      circleCount.textContent = circles;

    }


    function resetAll() {

      count = 0;

      circles = 0;

      currentCount.textContent = 0;

      circleCount.textContent = 0;

      localStorage.removeItem('malaHistory');

      calculateHistoryStats({});

    }


    darkToggle.addEventListener('change', () => {

      document.body.classList.toggle('dark', darkToggle.checked);

      const btns = document.querySelectorAll('.btn-outline');

    

  btns.forEach(btn => btn.classList.toggle('dark', darkToggle.checked));

    });


    // Init

    calculateHistoryStats(loadHistory());

  </script>

</body>

</html>

Comments

Post a Comment

Popular posts from this blog

Secondary Blasting Technique

-
Image
In this post we will deal about the Definition of Secondary Blasting and types of Secondary Blasting . Some other Blasting are also available you can read about that. So let's start... Definition of Secondary Blasting The technique used to blast the boulders to achieve the fragmentation is called secondary blasting. This blasting is done to get the rocks which can be easily handled. Why and how to do secondary blasting? Why secondary blasting? We does secondary, in case when the primary blasting don't give fragmentation of rock which can be easily handled. The secondary blasting is followed after the primary blasting. How to do secondary blasting? To do secondary blasting we have to follow some methods which will give us batter resultant. These are here 1. Plaster shooting or Mud Capping.. As name indicates mud capping, the primer cartridge is place at top of Boulder and covered with mud. The blasting is done from the safe place by electric detonator...
Read more

Charge Preparation for Blating in Mines

-
Image
In this post we will discuss about the Charge preparation for underground blasting... For blasting, the charging of hole may consist of one or more cartridge and the separation of cartridge should be least as much possible. Among the charged explosive in a hole, it is necessary that a Detonator is inserted in one of the explosive. The cartridge having Detonator in it, called prime cartridge. To insert Detonator, a hole is maked with a Pricker of brass or wood. Insert the Detonator until it is completely buried in explosive after that put back the flap of cartridge and bind the cartridge around with wire to prevent the detonator to come out during charging. Charging of Shot Holes Proper charging of shot hole is important to get the desire results. We follows two methods to Charge the holes.. 1. Direct Initiation 2. Inverse Initiation Here we will discuss these two methods.. Preparation of Shot Hole Direct Initiation This is the method of Chargi...
Read more

Drilling Patterns

-
Image
Before firing a shot, it is important to drill holes and drill holes are followed by different Drilling Patterns. The selection of Drilling Patterns are different to satisfy the different conditions. So now we will know the different Drilling Patterns which are used(one by one). • Drilling Patterns are also known as shot-hole patterns. 1. Pyramid or Cone cut :-  In this type of drilling the pattern of holes something alike pyramid or cone. Pyramid cut involves the drilling of holes in centre and also at the side which meet at a point at the back. Now in modern design of cone cut involves in forming of polygon, in this also holes meet at a point with central hole. It's depth is restricted up to 60% to the width of drift. 2. Drag Cut :- It is used for smaller drift of 1.8m to 2.4m width. By making the angle so that the strata breaks along to cleavage plane. 3. Wedge Cut :- In this cut holes are drilled, whose angles are less than 45° and the centre meet along a line at...
Read more