vsecoder-old-account/Vsevolod_html-password.html

## Vsevolod_html-password.html
<!DOCTYPE html>
<html>
<!-- служебная часть -->
<head>
  <!-- заголовок страницы -->
  <title>Генератор паролей</title>
  <!-- настраиваем служебную информацию для браузеров -->
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- подключаем функцию, которая хеширует строку -->
  <script src="https://thecode.media/wp-content/uploads/2019/05/js-md5.js"></script>
  <!-- задаём CSS-стили прямо здесь же, чтобы всё было в одном файле -->
  <style type="text/css">
    /*задаём общие параметры для всей страницы: шрифт и отступы*/
    body{
      text-align: center;
      margin: 10;
      font-family: Verdana, Arial, sans-serif;
      font-size: 16px;
    }
    /* настраиваем внешний вид полей ввода*/
    input{
      display: inline-block;
      margin: 20px auto;
      border: 2px solid #eee;
      padding: 10px 20px;
      font-family: Verdana, Arial, sans-serif;
      font-size: 16px;
    }
  /*закончили со стилями*/
  </style>
<!-- закрываем служебную часть страницы -->
</head>

<body>
  <!-- началась визуальная часть -->
  <!-- ставим всё содержимое в один блок по центру  -->
  <div class="container"  margin: auto;>
    <!-- заголовок страницы -->
    <h2 class="todo__caption">Генератор паролей</h2>
    <!--делаем отступ -->
    <br>
    <!-- задаём поле ввода для адреса нужного сайта и настраиваем параметры поля -->
    <input type="text" id="site_url" size="50" placeholder="Вставьте адрес сайта, где вам нужен пароль">
    <!--делаем отступ -->
    <br>
    <!-- задаём поле ввода для кодового слова и настраиваем параметры поля -->
    <input type="text" id="keyword" size="50" placeholder="Напишите кодовое слово, чтобы сделать пароль сильнее">
    <!--делаем отступ -->
    <br>
    <!-- задаём числовое поле ввода для секретного числа -->
    <input type="number" id="secnumber" size="50" placeholder="Введите число">
    <!--делаем отступ -->
    <br>
    <!-- добавляем чекбокс, который скажет нам, нужны спецсимволы или нет -->
    <input type="checkbox" id="sym">Использовать спецсимволы
    <!--делаем отступ -->
    <br>
    <!--делаем двойной отступ -->
    <br>
    <br>
    <!-- вставляем кнопку, которая запускает генератор пароля и настраиваем отступы -->
    <button style="font-size: 100%; padding:5px 10px 10px 10px" onclick="generate(); vsevolod();">Создать пароль</button>
    <!--выводим сгенерированный пароль -->
    <p>Ваш пароль:</p>
    <div id = "pass_text" style="font-weight: bold"></div>
  </div>
  <!-- закончилась видимая часть -->
  <!-- пишем скрипт, который будет генерировать пароль по нажатию кнопки -->
  <script>
    // отслеживаем каждое нажатие клавиши при вводе секретной фразы и при каждом нажатии генерируем пароль
    document.getElementById('keyword').addEventListener('keydown', function(e) {
      generate();
    } )
    // функция, которая возвращает случайное число в заданном диапазоне
    function randz(min, max){
        return Math.floor(Math.random() * (max - min + 1)) + min;
      }
    // задаём переменные, где будем хранить адрес сайта, кодовое слово, секретное число…
    var site, salt, secnum;
    // …исходные текстовые данные для пароля и сам пароль
    var text, password;
    // переменная для временного хранения исходного пароля
    var sourcepass;
    // спецсимволы, которые добавим в пароль, если нужно
    var symbols;
    symbols = '%:#@%&😷vsevolod*html';
    // объявляем функцию, которая создаёт пароль и выводит его на экран
    function generate(){
      // кладём в соответствующие переменные текстовое значение адреса сайта,
      site = document.getElementById('site_url').value;
      // кодового слова…
      salt = document.getElementById('keyword').value;
      // и секретного числа…
      secnum = document.getElementById('secnumber').value;
      // нельзя стартовать с нулевой тройки чисел или меньше
      if (secnum < 1) {secnum = 1} ;
      // подготавливаем исходную строку для пароля и добавляем в неё наш секретный ингредиент
      text = site + salt + 'Vsevolod html';
      // на основе этой строки с помощью функции md5, которую мы подключили в самом начале, создаём пароль
      sourcepass = md5(text);
      // обнуляем переменную, где будет храниться изменённый пароль
      password = '';
      // цикл, который отвечает за большие числа и спецсимволы в пароле, проходит всю длину строки и обрабатывает каждый символ
      for (var i=0;i< sourcepass.length ;i++) {
        // секретным числом определяем шаг, с которым будем делать следующую заглавную букву в пароле
        var upperstep = secnum % 3;
        // если шаг сработал — делаем большой символ, иначе оставляем старый
        if (i % upperstep == 0) {password += sourcepass[i].toUpperCase()}
          else {password += sourcepass[i]} ;
        // если поставлена галочка про спецсимволы…
        if (document.getElementById('sym').checked) {
          // на каждой третьей итерации вставляем спецсимвол на нужное место
          if (i % 3 == 0) {password += symbols[secnum % 6]}
        }
      }
  // перед тем как мысленно разбивать пароль на тройки, поместим его в промежуточную переменную
  sourcepass = password;
  // обнуляем строку — в неё будем заново собирать наш пароль из троек
  password = '';
  // если наше секретное число больше, чем групп из трёх символов в исходном пароле — прогоняем тройки по кругу, возвращаемся в начало и останавливаемся на нужной позиции
  if ( Number(secnum)*3 > sourcepass.length ) {secnum = (Number(secnum) * 3) % sourcepass.length}  else {secnum = secnum * 3} ;
  // формируем пароль из групп по три символа с разделителем
  for (var i = 1; i < 10; i++) {
    // если после сложения мы превысили длину исходного пароля — возвращаемся в начало, чтобы продолжить на следующем шаге с первого
    if (sourcepass.length == secnum + i) {secnum = -i} ;
    // добавляем очередной символ в группу из трёх символов
    password += sourcepass[secnum + i];
    // если прошло уже три символа — добавляем разделитель (а после девятого символа — не добавляем)
    if ((i % 3 == 0)&&(i % 9 != 0)) {password += ''} ;
  }
      // выводим финальный пароль
      document.getElementById('pass_text').innerHTML=password;
    }


    function vsevolod () {
    	alert("Подписывайтесь на мой канал Всеволод html");
    }
  // закончилась скриптовая часть
  </script>
</body>
<!-- конец всей страницы -->
<!-- *OVI* -->
</html>
	<!DOCTYPE html>
	<html>
	<!-- служебная часть -->
	<head>
	<!-- заголовок страницы -->
	<title>Генератор паролей</title>
	<!-- настраиваем служебную информацию для браузеров -->
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<!-- подключаем функцию, которая хеширует строку -->
	<script src="https://thecode.media/wp-content/uploads/2019/05/js-md5.js"></script>
	<!-- задаём CSS-стили прямо здесь же, чтобы всё было в одном файле -->
	<style type="text/css">
	/задаём общие параметры для всей страницы: шрифт и отступы/
	body{
	text-align: center;
	margin: 10;
	font-family: Verdana, Arial, sans-serif;
	font-size: 16px;
	}
	/* настраиваем внешний вид полей ввода*/
	input{
	display: inline-block;
	margin: 20px auto;
	border: 2px solid #eee;
	padding: 10px 20px;
	font-family: Verdana, Arial, sans-serif;
	font-size: 16px;
	}
	/закончили со стилями/
	</style>
	<!-- закрываем служебную часть страницы -->
	</head>

	<body>
	<!-- началась визуальная часть -->
	<!-- ставим всё содержимое в один блок по центру -->
	<div class="container" margin: auto;>
	<!-- заголовок страницы -->
	<h2 class="todo__caption">Генератор паролей</h2>
	<!--делаем отступ -->
	<br>
	<!-- задаём поле ввода для адреса нужного сайта и настраиваем параметры поля -->
	<input type="text" id="site_url" size="50" placeholder="Вставьте адрес сайта, где вам нужен пароль">
	<!--делаем отступ -->
	<br>
	<!-- задаём поле ввода для кодового слова и настраиваем параметры поля -->
	<input type="text" id="keyword" size="50" placeholder="Напишите кодовое слово, чтобы сделать пароль сильнее">
	<!--делаем отступ -->
	<br>
	<!-- задаём числовое поле ввода для секретного числа -->
	<input type="number" id="secnumber" size="50" placeholder="Введите число">
	<!--делаем отступ -->
	<br>
	<!-- добавляем чекбокс, который скажет нам, нужны спецсимволы или нет -->
	<input type="checkbox" id="sym">Использовать спецсимволы
	<!--делаем отступ -->
	<br>
	<!--делаем двойной отступ -->
	<br>
	<br>
	<!-- вставляем кнопку, которая запускает генератор пароля и настраиваем отступы -->
	<button style="font-size: 100%; padding:5px 10px 10px 10px" onclick="generate(); vsevolod();">Создать пароль</button>
	<!--выводим сгенерированный пароль -->
	<p>Ваш пароль:</p>
	<div id = "pass_text" style="font-weight: bold"></div>
	</div>
	<!-- закончилась видимая часть -->
	<!-- пишем скрипт, который будет генерировать пароль по нажатию кнопки -->
	<script>
	// отслеживаем каждое нажатие клавиши при вводе секретной фразы и при каждом нажатии генерируем пароль
	document.getElementById('keyword').addEventListener('keydown', function(e) {
	generate();
	} )
	// функция, которая возвращает случайное число в заданном диапазоне
	function randz(min, max){
	return Math.floor(Math.random() * (max - min + 1)) + min;
	}
	// задаём переменные, где будем хранить адрес сайта, кодовое слово, секретное число…
	var site, salt, secnum;
	// …исходные текстовые данные для пароля и сам пароль
	var text, password;
	// переменная для временного хранения исходного пароля
	var sourcepass;
	// спецсимволы, которые добавим в пароль, если нужно
	var symbols;
	symbols = '%:#@%&😷vsevolod*html';
	// объявляем функцию, которая создаёт пароль и выводит его на экран
	function generate(){
	// кладём в соответствующие переменные текстовое значение адреса сайта,
	site = document.getElementById('site_url').value;
	// кодового слова…
	salt = document.getElementById('keyword').value;
	// и секретного числа…
	secnum = document.getElementById('secnumber').value;
	// нельзя стартовать с нулевой тройки чисел или меньше
	if (secnum < 1) {secnum = 1} ;
	// подготавливаем исходную строку для пароля и добавляем в неё наш секретный ингредиент
	text = site + salt + 'Vsevolod html';
	// на основе этой строки с помощью функции md5, которую мы подключили в самом начале, создаём пароль
	sourcepass = md5(text);
	// обнуляем переменную, где будет храниться изменённый пароль
	password = '';
	// цикл, который отвечает за большие числа и спецсимволы в пароле, проходит всю длину строки и обрабатывает каждый символ
	for (var i=0;i< sourcepass.length ;i++) {
	// секретным числом определяем шаг, с которым будем делать следующую заглавную букву в пароле
	var upperstep = secnum % 3;
	// если шаг сработал — делаем большой символ, иначе оставляем старый
	if (i % upperstep == 0) {password += sourcepass[i].toUpperCase()}
	else {password += sourcepass[i]} ;
	// если поставлена галочка про спецсимволы…
	if (document.getElementById('sym').checked) {
	// на каждой третьей итерации вставляем спецсимвол на нужное место
	if (i % 3 == 0) {password += symbols[secnum % 6]}
	}
	}
	// перед тем как мысленно разбивать пароль на тройки, поместим его в промежуточную переменную
	sourcepass = password;
	// обнуляем строку — в неё будем заново собирать наш пароль из троек
	password = '';
	// если наше секретное число больше, чем групп из трёх символов в исходном пароле — прогоняем тройки по кругу, возвращаемся в начало и останавливаемся на нужной позиции
	if ( Number(secnum)3 > sourcepass.length ) {secnum = (Number(secnum) 3) % sourcepass.length} else {secnum = secnum * 3} ;
	// формируем пароль из групп по три символа с разделителем
	for (var i = 1; i < 10; i++) {
	// если после сложения мы превысили длину исходного пароля — возвращаемся в начало, чтобы продолжить на следующем шаге с первого
	if (sourcepass.length == secnum + i) {secnum = -i} ;
	// добавляем очередной символ в группу из трёх символов
	password += sourcepass[secnum + i];
	// если прошло уже три символа — добавляем разделитель (а после девятого символа — не добавляем)
	if ((i % 3 == 0)&&(i % 9 != 0)) {password += ''} ;
	}
	// выводим финальный пароль
	document.getElementById('pass_text').innerHTML=password;
	}


	function vsevolod () {
	alert("Подписывайтесь на мой канал Всеволод html");
	}
	// закончилась скриптовая часть
	</script>
	</body>
	<!-- конец всей страницы -->
	<!-- OVI -->
	</html>