Showing posts with label HTML. Show all posts
Showing posts with label HTML. Show all posts

Friday, October 31, 2025

Symbolic Rakam Tracker

 


💓HTML Save Ase Html Work💗
👇

<!DOCTYPE html>
<html lang="hi">
<head>
  <meta charset="UTF-8">
  <title>Symbolic Rakam Tracker</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- Bootstrap CDN -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    .entry-card { margin-bottom: 15px; border-left: 5px solid #007bff; padding: 10px; background: #f8f9fa; }
    .hidden { display: none; }
    #totalBox { font-size: 1.2rem; font-weight: bold; margin-top: 20px; }
  </style>
</head>
<body class="container py-4">

  <h2 class="mb-4">💠 Symbolic Rakam Tracker</h2>

  <div id="entries"></div>

  <div id="totalBox">कुल राशि: ₹0</div>

  <script>
    let entryCount = 0;
    let total = 0;

    function createEntry(index) {
      const card = document.createElement('div');
      card.className = 'entry-card';
      card.innerHTML = `
        <div class="row g-2">
          <div class="col-md-2">
            <label class="form-label">क्रमांक</label>
            <input type="text" class="form-control" value="${index + 1}" readonly>
          </div>
          <div class="col-md-5">
            <label class="form-label">नाम</label>
            <input type="text" class="form-control" placeholder="नाम लिखें">
          </div>
          <div class="col-md-5">
            <label class="form-label">रकम</label>
            <input type="number" class="form-control amount" placeholder="₹0" oninput="handleInput(this)">
          </div>
        </div>
      `;
      document.getElementById('entries').appendChild(card);
    }

    function handleInput(input) {
      const allAmounts = document.querySelectorAll('.amount');
      total = 0;
      allAmounts.forEach((inp, i) => {
        const val = parseFloat(inp.value);
        if (!isNaN(val)) total += val;

        // Show next bracket if current has value and next doesn't exist
        if (i === allAmounts.length - 1 && val > 0) {
          createEntry(entryCount++);
        }
      });
      document.getElementById('totalBox').textContent = `कुल राशि: ₹${total}`;
    }

    // Initial bracket
    createEntry(entryCount++);
  </script>

</body>
</html>


💬

Wednesday, October 22, 2025

Sunder Sonic Journey

Sunder Sonic Journey
<title>Sunder Sonic Journey</title>
  <style>
    body {
      margin: 0;
      background: linear-gradient(to top, #111, #444);
      color: white;
      font-family: sans-serif;
      overflow: hidden;
    }
    #intro {
      position: absolute;
      top: 40%;
      width: 100%;
      text-align: center;
      font-size: 1.5em;
      animation: fadeOut 5s forwards;
    }
    @keyframes fadeOut {
      0% { opacity: 1; }
      100% { opacity: 0; visibility: hidden; }
    }
    canvas {
      position: absolute;
      top: 0; left: 0;
    }
  </style>
</head>
<body>
  <div id="intro">🎧 Please wear headphones first. Let the sunder begin…</div>
  <canvas id="visual"></canvas>
  <audio id="player" controls autoplay loop>
    <source src="Greatshiv.MP4" type="audio/mpeg">        👈 Replease With Your Audio File 
    Your browser does not support the audio element.
  </audio>

  <script>
    const canvas = document.getElementById('visual');
    const ctx = canvas.getContext('2d');
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    function drawSymbolicWave() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      ctx.beginPath();
      ctx.moveTo(0, canvas.height / 2);
      for (let x = 0; x < canvas.width; x++) {
        ctx.lineTo(x, canvas.height / 2 + Math.sin(x * 0.01 + Date.now() * 0.002) * 50);
      }
      ctx.strokeStyle = '#f0f';
      ctx.lineWidth = 2;
      ctx.stroke();
      requestAnimationFrame(drawSymbolicWave);
    }

    drawSymbolicWave();
  </script>
</body>
</html>




Thursday, October 9, 2025

My Shopping Card With Whatsapp

💚 My Shopping Card With WhatsApp💚

👀 एक सुंदर, हल्का और उपयोगी Shopping Card सिस्टम — Admin और User दोनों के लिए खास!


मुख्य बातें जो इस प्रोटोटाइप में मिलेंगी 💓

🧑‍💼 एडमिन के लिए:

  • 🖼️ Bulk image upload (100 images तक)
  • 📝 Name, Price, Stock (Quantity) सेट करना
  • 📁 PDF / Video upload का विकल्प
  • 📞 WhatsApp नंबर सेट करना (हर प्रोडक्ट के साथ दिखेगा)
  • 📊 प्रोडक्ट details को XLS export करने का ऑप्शन

👤 यूजर के लिए:

🌿 General Features:

  • 📌 Fixed Header & Footer
  • 🍃 Header में Animated Leaf & Greenery Effect (दिन/रात के हिसाब से बदलता)
  • 🌐 Website Logo / Favicon Support
  • ⚙️ Install Setup Progress Bar with motivational lines
  • 🎉 Complete होने पर “Congratulations” message

📁 Assets Details:

  • assets/logo.png — आपका वेबसाइट लोगो
  • assets/leaf-day.gif — दिन वाला animated leaf
  • assets/leaf-night.gif — रात वाला animated leaf
  • assets/qr.png — QR कोड (GPay / PhonePe / Paytm)
🪶 Edited with ❤️ by GREATSHIV | Designed in Notepad++













 👀
  
👍   DOWNLOAD  💗
 
 💬



🙏 Support Us

Your small contribution helps us keep creating content ❤️

 Choice
Donate via PayPal.me

🇮🇳 Donate via UPI:


UPI QR Code

UPI ID:8699335574@ybl

✨ All modifications are perfectly supported in Notepad++. You can edit any file and replace the code with your own  image for a clean and customized look.

Edited with ❤️ by GREATSHIV


Follow Us @soratemplates

Blogger Templates

-