2025-08-04

Paprastas age verification kodas

Yo, skaitytojau. Šiandienai tiesiog pasidalinsiu paprasčiausiu kodo gabaliuku skirtu patikrinti lankytojų amžiui svetainėse.

Kaip matai… Šiek tiek žemiau pateiktas laukelis iš kurio tiesiog pakanka išsikopijuoti ir įklijuoti esamą sprendimą į savo naudojamo tinklaraščio įrašo failą (nepriklausomai ar naudojamas Astro, Jekyll, Hugo, ar koks nors kitoks puslapių generatorius).

Kodą sudaro:

1. HTML dialog elementas
2. Vanilla JavaScript kodas parodyti moduliui po to, kai užkraunami visi reikiami puslapio resursai.

<dialog id="age-dialog" style="width:100%;height:100vh;position:fixed;left:0;top:0;">
  <form method="dialog" id="age-form" style="width:50%;position:fixed;margin-left:25%;height:auto;top:22vh;text-align:center;align-items:center;">
    <h2 style="display:block;text-align:center;width:100%;color:#000 !important;">🔞 Age Verification</h2>
    <p>Please enter your birth year to continue:</p>
    <input type="number" id="birth-year" placeholder="e.g. 2005" required style="padding:1rem;border-radius:8px;" />

    <div style="margin-top:1rem;">
      <label style="display:block;margin-top:1rem;">
        <input type="checkbox" id="confirm-checkbox" />
        I confirm that I am 18 or older.
      </label>
    </div>

    <div style="margin-top: 1rem;">
      <button type="submit" id="submit-btn" style="padding:1rem;border-radius:8px;font-size:1.2rem;" disabled>Submit</button>
    </div>

    <p id="error-msg" style="color: red; display: none;">Invalid or underage, or confirmation not checked.</p>
  </form>
</dialog>

<script>
  const legalAge = 18;
  const storageKey = "ageVerified_artefaktas_eu";
  const storageTimestampKey = `${storageKey}_timestamp`;
  const validityDurationMs = 24 * 60 * 60 * 1000; // 24 hours

  const dialog = document.getElementById("age-dialog");
  const form = document.getElementById("age-form");
  const errorMsg = document.getElementById("error-msg");
  const checkbox = document.getElementById("confirm-checkbox");
  const submitBtn = document.getElementById("submit-btn");

  function isVerificationStillValid() {
    const stored = localStorage.getItem(storageKey);
    const timestamp = localStorage.getItem(storageTimestampKey);
    if (stored !== "true" || !timestamp) return false;

    const elapsed = Date.now() - parseInt(timestamp, 10);
    return elapsed < validityDurationMs;
  }

  function saveVerificationStatus() {
    localStorage.setItem(storageKey, "true");
    localStorage.setItem(storageTimestampKey, Date.now().toString());
  }

  // Run age check on load
  window.addEventListener("DOMContentLoaded", () => {
    if (isVerificationStillValid()) return;
    dialog.showModal();
  });

  // Enable/disable submit button based on checkbox
  checkbox.addEventListener("change", () => {
    submitBtn.disabled = !checkbox.checked;
  });

  form.addEventListener("submit", (event) => {
    event.preventDefault();

    const birthYear = parseInt(document.getElementById("birth-year").value, 10);
    const currentYear = new Date().getFullYear();
    const age = currentYear - birthYear;

    if (!birthYear || isNaN(birthYear) || age < legalAge || !checkbox.checked) {
      errorMsg.style.display = "block";
      return;
    }

    saveVerificationStatus();
    dialog.close();
  });
</script>

P.s. Rekomenduoju pasikeisti reikšmę ageVerified_artefaktas_eu į savo svetainės pavadinimą, pvz: “ageVerified_example_com” ar panašiai.

#	Žymos
	#post #artefaktas_eu #personal #opinion #age #verification #kodas #programinis #javascript #html5 #dialog #element

Asmeninė nuomonė.

Linktree link: https://linktr.ee/artefaktas

Tinklaraštį galima prenumeruoti net keletu skirtingų būdų:

- Naudojant RSS sklaidos kanalo nuorodą: https://artefaktas.eu/rss.xml

- Naudojantis follow.it forma

🔞 Age Verification

Please enter your birth year to continue:

I confirm that I am 18 or older.

Submit

Invalid or underage, or confirmation not checked.

Close this ad