[legko.require("/_sys_/_head.html")]

	<style>
    .kt {  
	color: #efefef;
	background: #fff; 
	margin: 1px;
	border: 1px solid #2d2d2d;
	// text-shadow: 1px 1px #1d1d1d;}
	</style>
<div class="title">Қуръони Карим</div>
<center>
<div class="kt">
  <img id="pImage" src="p1.png" width="100%" height="100%" alt="Саҳифаи 1">
	</div>
	<div class="gb">
  <button id="prev">Саҳифаи қабли</button>
  <button id="next">Саҳифаи оянда</button>
  <br><br>
  <input type="number" id="searchInput" placeholder="Саҳифаро нависед" min="1" max="604">
  <button id="searchButton">Ҷустуҷу</button><br><br>
<div id="pCounter">Саҳифаи 1 аз 604</div></div>
</center>
<script>
  const totalps = 604; // Рақами умуми саҳифа
  let currentp = 1;

  const prevButton = document.getElementById('prev');
  const nextButton = document.getElementById('next');
  const searchInput = document.getElementById('searchInput');
  const searchButton = document.getElementById('searchButton');
  const pImage = document.getElementById('pImage');
  const pCounter = document.getElementById('pCounter');

  function updatep() {
    // Навсозии акси саҳифа
    pImage.src = `p${currentp}.png`;
    pImage.alt = `Саҳифаи ${currentp}`;

    // Навсозии матн ва рақами саҳифа
    pCounter.textContent = `Саҳифаи ҳозира ${currentp} аз ${totalps}`;

    // Идоракунии шароити тугмаҳо
    prevButton.disabled = currentp === 1;
    nextButton.disabled = currentp === totalps;
  }

  prevButton.addEventListener('click', () => {
    if (currentp > 1) {
      currentp--;
      updatep();
    }
  });

  nextButton.addEventListener('click', () => {
    if (currentp < totalps) {
      currentp++;
      updatep();
    }
  });

  searchButton.addEventListener('click', () => {
    const p = parseInt(searchInput.value, 10);
    if (p >= 1 && p <= totalps) {
      currentp = p;
      updatep();
    } else {
      alert('Саҳифаи лозимаро дуруст нависед (аз 1 то 604).📝☺️');
    }
  });

  updatep(); // Намоиши ибтидоӣ
</script>
<div class="tj"><a href="/index.html"> <span class="m home"></span> Ба саҳифаи асосӣ</a></div>

[legko.require("/_sys_/_foot.html")]