рабочая рега + почти окончательный дизайн. можно в продакшн

src/lib/userFunction.js

@@ -7,12 +7,13 @@ export async function UserCheck(){
     })
   
     if(!response.ok){
+      window.location.href = '/info'
       return(response.status)
     }
 
     else{
        const data = await response.json();
-       return data
+       return 
     }
   }
 
@@ -62,6 +63,27 @@ export async function checkMail(mail) {
   }
 }
 
+export async function VerificationEmail(Code){
+  const response = await fetch('http://localhost:8000/api/users/email_verification',{
+  method:'POST',
+  credentials:'include',
+  headers:{
+    'Content-Type' : 'application/json'
+  },
+  body: JSON.stringify({
+      "user_code": Code
+    })
+  })
+
+  if(response.status === 200){
+    window.location.href = '/'
+    return ""
+  }
+  else if(response.status === 422){
+    return "Неправильный код"
+  }
+}
+
 
   export async function handleRegister(username,password,email,date_of_birth){
     const response = await fetch('http://localhost:8000/api/users/register',{

src/routes/+page.svelte

@@ -3,14 +3,6 @@
 	import { onMount } from 'svelte';
     import {UserCheck} from '$lib/userFunction.js';
 
-onMount(async () => {
-		const userData = await UserCheck();
-		
-		let userId = userData.id;
-		let chatId = 2;
-		if(userId === undefined)
-			window.location.href = '/login'
-})
 </script>
 
 <Header />

src/routes/register/+page.svelte

@@ -1,9 +1,10 @@
 <script>
 	import Header from './../Header.svelte';
-	import { handleRegister, checkName, checkMail } from '$lib/userFunction.js';
+	import { handleRegister, checkName, checkMail, VerificationEmail } from '$lib/userFunction.js';
 	import { onMount } from 'svelte';
 	import { fly } from 'svelte/transition';
 	import { cubicOut } from 'svelte/easing';
+
 	let days = [];
 	for (let i = 1; i <= 31; i++) {
 		let day = i.toString().padStart(2, '0');
@@ -15,17 +16,10 @@
 	let years = [];
 	for (let i = legalyear - 16; i > legalyear - 100; i--) years.push(i);
 
-	let name, mail, password, password2, dateDay, dateMonth, dateYear;
+	let name = ''; let mail; let password = ''; let password2 = ''; let dateDay = ''; let dateMonth = ''; let dateYear = '';
-	name = '';
-	mail = '';
-	password = '';
-	password2 = '';
 
-	let nameError, mailError, passwordError, password2Error;
+	let nameError = ''; let mailError = ''; let passwordError = ''; let password2Error = '';
-	nameError = '';
+	let code = ''; let codeError = ''; 
-	mailError = '';
-	passwordError = '';
-	password2Error = '';
 
 	async function SendData() {
 console.log(`name=${nameError} mail=${mailError} password=${passwordError} password2=${password2Error}`)
@@ -36,11 +30,9 @@ console.log(`name=${nameError} mail=${mailError} password=${passwordError} passw
 			mailError = 'введи почту';
 		
 		if ((password === '') || (password2 === '') 
-    && (password === undefined) || (password2 === undefined))
+        && (password === undefined) || (password2 === undefined))
 			passwordError = 'акк без пароля?';
 		
-		
-		
     if ((password != "") && (password2 == ""))
       password2Error = "забыл повторить"
       if ((password2 != "") && (password == ""))
@@ -51,15 +43,20 @@ console.log(`name=${nameError} mail=${mailError} password=${passwordError} passw
         	(passwordError === '' )|| (passwordError === undefined) && 
        		(password2Error === '') ||( password2Error === undefined)) {
 			let date = `${dateYear}-${dateMonth}-${dateDay}`;
+
 			let reg = await handleRegister(name, password, mail, date);
 			console.log(reg);
+			rotate();
       console.log("отправлено")
 		}
 	}
 
 	async function lisenerName() {
 		
-		if(name.length < 2){
+		if(name.length == 0){
+			nameError = "";
+		}
+		else if (name.length < 2){
 			nameError = "ник от двух символов";
 		}
 		else if (name != '') {
@@ -70,7 +67,7 @@ console.log(`name=${nameError} mail=${mailError} password=${passwordError} passw
 	}
 
 	async function lisenerEmail() {
-		if (mail == '') {
+		if (mail.length == 0) {
 			mailError = '';
 		} else {
 			let error = await checkMail(mail);
@@ -80,7 +77,7 @@ console.log(`name=${nameError} mail=${mailError} password=${passwordError} passw
 	}
 
 	async function lisenerPassword() {
-		if((password === "") && (password2 != ""))
+		if(password.length == 0)
       { passwordError = ""; password2Error = "" }
 
    	  	else if((password2 === "") && (password != ""))
@@ -95,23 +92,35 @@ console.log(`name=${nameError} mail=${mailError} password=${passwordError} passw
 		else passwordError = '';
 	}
 
-	let VisiblePopUp = false;
+	async function lisenerCode(event){
-	function toggleVisibility() {
+		
-		VisiblePopUp = !VisiblePopUp;
+		code = event.target.value
-		console.log('переключил');
+		
+
+		if(code.length == 6){
+			codeError = await VerificationEmail(code)
+		}
+		
+	}
+
+	let rotated = false;
+	function rotate() {
+		rotated = !rotated;
 	}
 </script>
 
-<button on:click={toggleVisibility}>Показать модальное окно</button>
-{#if VisiblePopUp}
-	<div class="codeDiv"></div>
-{/if}
 <body>
-	<div class="mainDiv">
+
+	<div class="mainDiv {rotated ? 'rotated' : ''}">
+		<div class="mainDivInner">
+
+	<div class="mainDivFront">
 		<div class="jopa1">
 			<div class="marginDiv">
+
 				<form on:submit|preventDefault={SendData}>
 					<h1>Регистрация</h1>
+
 					<div class="group">
 						<div class="groupname">
 							<h3>имя</h3>
@@ -200,23 +209,88 @@ console.log(`name=${nameError} mail=${mailError} password=${passwordError} passw
 						</div>
 					</div>
 
-					<button type="submit">Зарегаться</button>
+					<button class="submitReg" type="submit">Зарегаться</button>
 				</form>
 			</div>
 		</div>
 	</div>
+	
+
+	<div class="mainDivBack">
+		<div class="jopa1">
+		<div class="marginDivBack">
+			
+				<h1>Подтверди</h1>
+				<h1>почту</h1>
+
+				<form class="codeForm" on:submit|preventDefault={VerificationEmail}>
+					<h3 id="codeError">{codeError}</h3>
+				<input maxlength="6" type="text" name="code" id="code" on:input={lisenerCode}>
+				<button id="resendButt" type="submit">отправить код еще раз</button>
+				</form>
+			</div>
+		</div>
+	</div>
+
+		</div>
+	</div>
 </body>
 
 <style lang="scss">
-	.codeDiv {
+
-		width: 30vw;
+	#code{
-		aspect-ratio: 1/1.3;
+		text-align: center;
-		background: #3d53fe;
+	}
-		position: absolute;
+
-		top: 50%;
+	#resendButt{
+		font-size: 16px;
+	}
+
+	.codeForm{
 		display: flex;
-		align-items: center;
+		justify-content:flex-end;
-		justify-content: center;
+		height: 50%;
+	}
+
+	body{
+		overflow-y: hidden;
+	}
+
+	.mainDiv{
+		position: absolute;
+			top: 50%;
+			left: 50%;
+			transform: translate(-50%, -50%);
+		aspect-ratio: 1 / 1.44;
+		height: calc(100% - 100px);
+		perspective: 1000px;
+	}
+	
+	.mainDivInner{
+		width: 100%;
+    	height: 100%;
+    	transition: transform 0.6s;
+		transform-style: preserve-3d;
+	}
+
+	.mainDivFront,
+	.mainDivBack {
+		position: absolute;
+		border: 1px solid transparent;
+		background:
+			linear-gradient(#101010, #101010) padding-box,
+			var(--gradient) border-box;
+		border-radius: 15px;
+
+		width: 100%;
+		height: 100%;
+		backface-visibility: hidden;
+	}
+
+	.rotated
+	.mainDivInner,
+	.mainDivBack{
+		transform: rotateX(180deg);
 	}
 
 	* {
@@ -229,23 +303,20 @@ console.log(`name=${nameError} mail=${mailError} password=${passwordError} passw
 		flex-direction: column;
 		justify-content: space-around;
 		height: 100%;
+		width: 100%;
 		justify-content: space-around;
 	}
 
 	#name,
 	#mail,
 	#password,
-  #password2 {
+    #password2,
+	#codeError {
 		color: var(--disable);
 		font-weight: 700;
 		font-size: 20px;
 	}
 
-	.animate-slide-up {
-		opacity: 1;
-		transform: translateY(0);
-	}
-
 	.groupname {
 		display: flex;
 		flex-direction: row;
@@ -253,10 +324,23 @@ console.log(`name=${nameError} mail=${mailError} password=${passwordError} passw
 		justify-content: space-between;
 	}
 
+	.marginDivBack{
+		display: flex;
+		flex-direction: column; 
+		position: absolute;
+			top: 50%;
+			left: 50%;
+			transform: translate(-50%, -50%);
+		width: 70%;
+		height: 80%;
+		margin: 15px 0 0 0;
+	}
+
 	.marginDiv {
 		display: flex;
 		flex-direction: column;
 		width: 100%;
+		height: 100%;
 		margin: 0 30px;
 	}
 	.birthday {
@@ -287,21 +371,6 @@ console.log(`name=${nameError} mail=${mailError} password=${passwordError} passw
 		border-radius: 15px;
 	}
 
-	.mainDiv {
-		border: 1px solid transparent;
-		background:
-			linear-gradient(#101010, #101010) padding-box,
-			var(--gradient) border-box;
-		border-radius: 15px;
-
-		aspect-ratio: 1 / 1.4;
-		height: calc(100% - 200px);
-		position: absolute;
-		top: 50%;
-		left: 50%;
-		transform: translate(-50%, -50%);
-	}
-
 	input,
 	select {
 		border: 1px solid transparent;
@@ -373,12 +442,7 @@ console.log(`name=${nameError} mail=${mailError} password=${passwordError} passw
 	}
 
 	h1,
-	h2,
 	h3,
-	h4,
-	h5,
-	h6,
-	p,
 	input,
 	select,
 	button[type='submit'] {