View file application/appearance/account/register/index.tpl

<header>
	<div class="container">
		<div class="nav">
			<div class="Start">
				<a href="/">
					<img src="/public/assets/{appearance}/img/logotype.svg" alt="{site_name}">
				</a>
			</div>
			
			<div class="End">
				<span>{echo(getLang('reg_auth_label'))}</span> <a href="/account/auth" class="button other">{echo(getLang('reg_auth'))}</a>
			</div>
		</div>
	</div>
</header>

<div class="Register">
	<div class="Blocks">
		<div class="Start">
			<img src="/public/assets/{appearance}/img/illustrations/register.svg">
		</div>
		
		<div class="End">
			<div class="Title">
				<h4>{echo(getLang('reg_welcome', ['{site_name}']))}</h4>
				<h6>{echo(getLang('reg_welcome_label'))}</h6>
			</div>
			
			<form data-action="AccountRegister">
				<div class="form-floating mb-2">
					<input type="text" name="first_name" class="form-control" id="floatingFirstName" placeholder="{echo(getLang('reg_form_firstname'))}" autocomplete="off" pattern="[А-Яа-яЁёӘәІіЫыҢңҒғҚқӨөҰұ]+" title="{echo(getLang('reg_form_firstname_title'))}" required>
					<label for="floatingFirstName">{echo(getLang('reg_form_firstname'))}</label>
				</div>
				
				<div class="form-floating mb-2">
					<input type="text" name="last_name" class="form-control" id="floatingLastName" placeholder="{echo(getLang('reg_form_lastname'))}" autocomplete="off" pattern="[А-Яа-яЁёӘәІіЫыҢңҒғҚқӨөҰұ]+" title="{echo(getLang('reg_form_lastname_title'))}" required>
					<label for="floatingLastName">{echo(getLang('reg_form_lastname'))}</label>
				</div>
			
				<div class="form-floating mb-2">
					<input type="text" name="login" class="form-control" id="floatingLogin" placeholder="{echo(getLang('reg_form_login'))}" autocomplete="off" pattern="[A-Za-z0-9]+" title="{echo(getLang('reg_form_login_title'))}" required>
					<label for="floatingLogin">{echo(getLang('reg_form_login'))}</label>
				</div>
					
				<script>
					$(document).ready(function() {
						$('#floatingLogin').on('input', function() {
							var inputValue = $(this).val();
							var filteredValue = inputValue.replace(/[^A-Za-z0-9]/g, '');
							$(this).val(filteredValue);
						});
					});
				</script>
				
				<div class="form-floating Password">
					<input type="password" name="password" class="form-control" id="floatingPassword" placeholder="{echo(getLang('reg_form_password'))}" autocomplete="off" required>
					<label for="floatingPassword">{echo(getLang('reg_form_password'))}</label>
					
					<i class="bi bi-eye"></i>
				</div>
					
				<script>
					$('.Password').find('.bi').click(function() {
						if($(this).hasClass('bi-eye')) {
							$(this).removeClass('bi-eye');
							$(this).addClass('bi-eye-slash');
							
							$('.Password').find('input').attr('type', 'text');
						}
						else {
							$(this).removeClass('bi-eye-slash');
							$(this).addClass('bi-eye');
							
							$('.Password').find('input').attr('type', 'password');
						}
					});
				</script>
				
				<div class="Buttons mt-4">
					<input type="submit" class="button auth" value="{echo(getLang('reg_form_button'))}">
					<a href="/account/auth">{echo(getLang('reg_form_button_auth'))}</a>
				</div>
			</form>
			
			{grab('/elements/language.tpl')}
		</div>
	</div>
</div>