174n/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>[Text Converter]</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
  <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Montserrat:300,400,900'>
  <style>
    *, input, textarea {
      font-family: 'Montserrat', sans-serif;
      box-sizing: border-box;
      transition: 250ms;
    }

    body {
      background-color: #333;
    }

    .container {
      margin: 0 auto;
      width: 400px;
      background-color: #ccc;
      padding: 15px;
    }
    .container .input {
      width: 100%;
      padding: 5px;
    }
    .container .out {
      padding: 15px 0;
    }
    </style>
</head>

<body translate="no">
  <div class="container">
    <div class="in">
      <input type="text" class="input">
    </div>
    <div class="out"></div>
  </div>
  <script>
  document.querySelector(".input").addEventListener('input', e => {
    document.querySelector(".out").innerHTML = parseText(e.target.value);
  });

  const letters = ["а", "б", "в", "г", "д", "е", "ё", "ж", "з", "и", "й", "к", "л", "м", "н", "о", "п", "р", "с", "т", "у", "ф", "х", "ц", "ч", "ш", "щ", "ъ", "ы", "ь", "э", "ю", "я", "!", "?"];
  const parseText = text =>
    text.toLowerCase().split("")
    .map(v => `:${('0' + (letters.indexOf(v)+1)).slice(-2)}:`)
    .join("")
    .replace(/:00:/g, " ")
    .replace(/\:34\:/g, ":exclamation:")
    .replace(/\:35\:/g, ":question:")
  </script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>[Text Converter]</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
	<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Montserrat:300,400,900'>
	<style>
	*, input, textarea {
	font-family: 'Montserrat', sans-serif;
	box-sizing: border-box;
	transition: 250ms;
	}

	body {
	background-color: #333;
	}

	.container {
	margin: 0 auto;
	width: 400px;
	background-color: #ccc;
	padding: 15px;
	}
	.container .input {
	width: 100%;
	padding: 5px;
	}
	.container .out {
	padding: 15px 0;
	}
	</style>
	</head>

	<body translate="no">
	<div class="container">
	<div class="in">
	<input type="text" class="input">
	</div>
	<div class="out"></div>
	</div>
	<script>
	document.querySelector(".input").addEventListener('input', e => {
	document.querySelector(".out").innerHTML = parseText(e.target.value);
	});

	const letters = ["а", "б", "в", "г", "д", "е", "ё", "ж", "з", "и", "й", "к", "л", "м", "н", "о", "п", "р", "с", "т", "у", "ф", "х", "ц", "ч", "ш", "щ", "ъ", "ы", "ь", "э", "ю", "я", "!", "?"];
	const parseText = text =>
	text.toLowerCase().split("")
	.map(v => `:${('0' + (letters.indexOf(v)+1)).slice(-2)}:`)
	.join("")
	.replace(/:00:/g, " ")
	.replace(/\:34\:/g, ":exclamation:")
	.replace(/\:35\:/g, ":question:")
	</script>
	</body>
	</html>