капча на php + html

Хочу сделать переделать весь сайт arzkapcha.ru на свой хост + домен т.к. в Украине больше не работают сайты .ru :( Вот мой сайт arzkapcha.ml - я не понимаю как сделать такую же генерацию капчи kapcha.php. Пов файлы : https://dropmefiles.com.ua/ru/vQ9ks247DM


Ответы (1 шт):

Автор решения: Проста Miha

Вот мой вариант на чистом JS)

const kapcha = document.querySelector('.overlay');
const result = document.querySelector('.result');
var milisec = 0,
  sec = 0,
  min = 0;

document.addEventListener('keypress', function(e) {
  if (e.key == 'n' || e.key == 'N') start();
  if (e.key == 'Enter') check();
})

function start() {
  let kapchaBlock = document.querySelector('.kapcha-block');
  if (kapchaBlock != null) return;
  milisec = 0;
  sec = 0;
  min = 0;
  myTimer = setInterval(timer, 10);
  removeAll();
  let createDiv = document.createElement('div');
  createDiv.className = 'kapcha-block';

  let createText = document.createElement('h1');
  createText.className = 'kapcha-text';
  createText.innerHTML = randomKapchaNumber();

  let createInput = document.createElement('input');
  createInput.setAttribute('type', 'number');
  createInput.className = 'kapcha-input';
  createInput.autofocus = true;

  createDiv.append(createText, createInput);
  kapcha.appendChild(createDiv);
}

function check() {
  let input = document.querySelector('.kapcha-input');
  if (input == null) return;
  clearTimeout(myTimer);
  let text = document.querySelector('.kapcha-text');
  let res = 0,
    inputText, correctText = text.innerHTML;
  inputText = input.value == '' ? 0 : input.value;

  let createDiv = document.createElement('div');
  if (inputText == correctText) {
    res = 'Капча пройдена';
  } else {
    res = 'Капча не пройдена';
  }
  removeAll();
  createDiv.className = 'result-block';
  min = min < 10 ? '0' + min : min;
  sec = sec < 10 ? '0' + sec : sec;
  createDiv.innerHTML = res + ' ' + inputText + '/' + correctText + ' ' + min + ':' + sec + ':' + milisec;
  result.append(createDiv);
}

function timer() {
  milisec++;

  if (milisec == 99) {
    sec++;
    milisec = 0;
  }

  if (sec == 59) {
    min++;
    sec = 0;
  }
}

function removeAll() {
  kapcha.innerHTML = '';
}

function randomKapchaNumber(min = 10000, max = 99999) {
  return Math.floor(Math.random() * (max - min) + min);
}
body {
  margin: 0;
  width: 100%;
  min-height: 100vh;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 0;
}

.kapcha-block {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.kapcha-text {
  z-index: 999;
}

.kapcha-block:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .4);
  z-index: -1;
}

.kapcha-text {
  text-align: center;
  font-family: consolas;
  font-size: 64px;
  margin: 0;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

.result {
  position: relative;
  z-index: 99;
}
<div class="kapcha">
  <div class="result"></div>
  <div class="overlay"></div>
</div>

→ Ссылка