app: create screens for email, password, name; add fonts

App/app/src/main/java/com/example/mystictale/MainActivity.kt

@@ -12,6 +12,8 @@ import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.tooling.preview.Preview
 import com.example.mystictale.Screen.RegistrationEmail
+import com.example.mystictale.Screen.RegistrationPassword
+import com.example.mystictale.Screen.Start
 import com.example.mystictale.ui.theme.MysticTaleTheme
 import drawable.Screen.LoadingScreen
 
@@ -21,7 +23,7 @@ class MainActivity : ComponentActivity() {
         enableEdgeToEdge()
         setContent {
             MysticTaleTheme {
-                RegistrationEmail()
+                RegistrationPassword()
             }
         }
     }

App/app/src/main/java/com/example/mystictale/Screen/RegistrationEmail.kt

@@ -1,45 +1,140 @@
 package com.example.mystictale.Screen
 
 import androidx.compose.foundation.Image
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.Button
-import androidx.compose.material3.CircularProgressIndicator
+import androidx.compose.material3.ButtonColors
+import androidx.compose.material3.LinearProgressIndicator
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
+import androidx.compose.material3.TextField
+import androidx.compose.material3.TextFieldDefaults
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
-import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.paint
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.StrokeCap
+import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
 import com.example.mystictale.R
+import com.example.mystictale.resources.GenericTextField
+import com.example.mystictale.ui.theme.DarkPurple
+import com.example.mystictale.ui.theme.OpenSans
 
+@Preview
 @Composable
 fun RegistrationEmail() {
-    var currentProgress by remember { mutableStateOf(0f) }
+    val email = remember {
+        mutableStateOf("")
+    }
     Column(
         Modifier
             .fillMaxSize()
             .paint(
-                painterResource(id = R.drawable.background)
+                painterResource(id = R.drawable.background),
+                contentScale = ContentScale.FillBounds
             )
+            .padding(10.dp),
+        verticalArrangement = Arrangement.SpaceBetween,
+        horizontalAlignment = Alignment.CenterHorizontally
     ) {
-        Row {
-            Button(onClick = { /*TODO*/ }) {
-                Image(
-                    painter = painterResource(id = R.drawable.back),
-                    contentDescription = "back to start page"
-                )
-                CircularProgressIndicator(progress = currentProgress)
-                
-                
-                Button(onClick = {currentProgress = currentProgress+25f}) {
-                    
+
+        Column {
+            Box(
+                modifier = Modifier
+                    .padding(top = 30.dp),
+                contentAlignment = Alignment.TopStart
+            ) {
+                Button(
+                    onClick = { /*TODO*/ }, colors = ButtonColors(
+                        disabledContentColor = Color.White,
+                        disabledContainerColor = Color.Transparent,
+                        contentColor = Color.White,
+                        containerColor = Color.Transparent
+                    )
+                ) {
+                    Image(
+                        painter = painterResource(id = R.drawable.back),
+                        contentDescription = "back",
+                        modifier = Modifier
+                            .width(11.dp)
+                            .height(14.dp)
+                    )
+                }
+                Row(
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .padding(top = 22.dp),
+                    horizontalArrangement = Arrangement.Center,
+                    verticalAlignment = Alignment.CenterVertically
+                ) {
+
+
+                    LinearProgressIndicator(
+                        progress = 0.2f,
+                        modifier = Modifier.width(157.dp),
+                        strokeCap = StrokeCap.Round,
+                        trackColor = Color(0xFFA1A0A3),
+                        color = Color(0xFF28176B)
+                    )
                 }
             }
+            Spacer(modifier = Modifier.height(30.dp))
+            Text(
+                text = "Ваша электронная почта",
+                fontWeight = FontWeight.Bold,
+                fontFamily = OpenSans,
+                fontSize = 30.sp,
+                color = Color.White,
+                modifier = Modifier
+                    .fillMaxWidth(0.9f)
+                    .padding(start = 40.dp),
+                style = MaterialTheme.typography.headlineMedium
+            )
+            Spacer(modifier = Modifier.height(30.dp))
+
+            GenericTextField(email.value,{email.value = it},"E-mail" )
+        }
+
+        Box(Modifier.padding(bottom = 40.dp)){
+            Button(
+                onClick = { /*TODO*/ },
+                modifier = Modifier
+                    .width(290.dp)
+                    .height(48.dp),
+                shape = RoundedCornerShape(12.dp),
+                colors = ButtonColors(
+                    containerColor = DarkPurple,
+                    contentColor = Color.White,
+                    disabledContentColor = Color.White,
+                    disabledContainerColor = DarkPurple
+                )
+            ) {
+                Text("Далее", fontSize = 20.sp, fontWeight = FontWeight.Bold)
+
+            }
+
         }
 
+
     }
-}
+
+}

App/app/src/main/java/com/example/mystictale/Screen/RegistrationName.kt

@@ -0,0 +1,4 @@
+package com.example.mystictale.Screen
+
+class RegistrationName {
+}

App/app/src/main/java/com/example/mystictale/Screen/RegistrationPassword.kt

@@ -0,0 +1,163 @@
+package com.example.mystictale.Screen
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Button
+import androidx.compose.material3.ButtonColors
+import androidx.compose.material3.LinearProgressIndicator
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.paint
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.StrokeCap
+import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import com.example.mystictale.R
+import com.example.mystictale.resources.PasswordTextField
+import com.example.mystictale.ui.theme.DarkPurple
+import com.example.mystictale.ui.theme.OpenSans
+
+@Composable
+fun RegistrationPassword() {
+
+    val password = remember {
+        mutableStateOf("")
+    }
+    val repeatedPassword = remember {
+        mutableStateOf("")
+    }
+    Column(
+        Modifier
+            .fillMaxSize()
+            .paint(
+                painterResource(id = R.drawable.background),
+                contentScale = ContentScale.FillBounds
+            )
+            .padding(10.dp),
+        verticalArrangement = Arrangement.SpaceBetween,
+        horizontalAlignment = Alignment.CenterHorizontally
+    ) {
+
+        Column {
+            Box(
+                modifier = Modifier
+                    .padding(top = 30.dp),
+                contentAlignment = Alignment.TopStart
+            ) {
+                Button(
+                    onClick = { /*TODO*/ }, colors = ButtonColors(
+                        disabledContentColor = Color.White,
+                        disabledContainerColor = Color.Transparent,
+                        contentColor = Color.White,
+                        containerColor = Color.Transparent
+                    )
+                ) {
+                    Image(
+                        painter = painterResource(id = R.drawable.back),
+                        contentDescription = "back",
+                        modifier = Modifier
+                            .width(11.dp)
+                            .height(14.dp)
+                    )
+                }
+                Row(
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .padding(top = 22.dp),
+                    horizontalArrangement = Arrangement.Center,
+                    verticalAlignment = Alignment.CenterVertically
+                ) {
+
+
+                    LinearProgressIndicator(
+                        progress = 0.2f,
+                        modifier = Modifier.width(157.dp),
+                        strokeCap = StrokeCap.Round,
+                        trackColor = Color(0xFFA1A0A3),
+                        color = Color(0xFF28176B)
+                    )
+                }
+            }
+            Spacer(modifier = Modifier.height(30.dp))
+            Text(
+                text = "Придумайте пароль",
+                fontWeight = FontWeight.Bold,
+                fontFamily = OpenSans,
+                fontSize = 30.sp,
+                color = Color.White,
+                modifier = Modifier
+                    .fillMaxWidth(0.9f)
+                    .padding(start = 40.dp),
+                style = MaterialTheme.typography.headlineMedium
+            )
+            Spacer(modifier = Modifier.height(30.dp))
+
+            Text(
+                text = "Пароль должен:\n" +
+                        "  ⚪ состоять не менее чем из 6 символов\n" +
+                        "  ⚪ содержать хотя бы одну букву\n" +
+                        "  ⚪ содержать хотя бы одну цифру", fontWeight = FontWeight.Light,
+                fontFamily = OpenSans,
+                fontSize = 13.sp,
+                color = Color.White,
+                modifier = Modifier
+                    .fillMaxWidth(0.9f)
+                    .padding(start = 40.dp)
+            )
+
+
+            Spacer(modifier = Modifier.height(30.dp))
+
+            PasswordTextField(password.value, { password.value = it }, "Пароль")
+
+            Spacer(modifier = Modifier.height(30.dp))
+
+            PasswordTextField(
+                repeatedPassword.value,
+                { repeatedPassword.value = it },
+                "Повторный пароль"
+            )
+        }
+
+
+        Box(Modifier.padding(bottom = 40.dp)) {
+            Button(
+                onClick = { /*TODO*/ },
+                modifier = Modifier
+                    .width(290.dp)
+                    .height(48.dp),
+                shape = RoundedCornerShape(12.dp),
+                colors = ButtonColors(
+                    containerColor = DarkPurple,
+                    contentColor = Color.White,
+                    disabledContentColor = Color.White,
+                    disabledContainerColor = DarkPurple
+                )
+            ) {
+                Text("Далее", fontSize = 20.sp, fontWeight = FontWeight.Bold)
+
+            }
+
+        }
+
+
+    }
+}

App/app/src/main/java/com/example/mystictale/Screen/Start.kt

@@ -27,6 +27,8 @@ import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import com.example.mystictale.R
 import com.example.mystictale.ui.theme.DarkPurple
+import com.example.mystictale.ui.theme.OpenSans
+import com.example.mystictale.ui.theme.Wolgadeutsche
 
 @Preview
 @Composable
@@ -47,12 +49,11 @@ fun Start() {
             horizontalAlignment = Alignment.CenterHorizontally,
             verticalArrangement = Arrangement.Center
         ) {
-            Text("MysticTale", fontSize = 64.sp, color = Color.White)
+            Text("MysticTale", fontSize = 64.sp, color = Color.White, fontFamily = Wolgadeutsche)
             Text(
                 "Ваш путь в мир магии и тайн Таро",
                 fontSize = 15.sp,
-                color = Color.White,
-                fontWeight = FontWeight.Light,
+                color = Color.White, fontFamily = OpenSans, fontWeight = FontWeight.Light,
                 modifier = Modifier.padding(bottom = 20.dp)
             )
             Spacer(modifier = Modifier.height(50.dp))

App/app/src/main/java/com/example/mystictale/resources/GenericTextField.kt

@@ -0,0 +1,43 @@
+package com.example.mystictale.resources
+
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.Text
+import androidx.compose.material3.TextField
+import androidx.compose.material3.TextFieldDefaults
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import com.example.mystictale.ui.theme.OpenSans
+
+@Composable
+fun GenericTextField(value:String, onValue:(String) -> Unit,placeholder:String) {
+    TextField(
+        value = value,
+        onValueChange = onValue,
+        Modifier
+            .fillMaxWidth(0.95f)
+            .padding(start = 35.dp),
+        colors = TextFieldDefaults.colors(
+            unfocusedTextColor = Color.White,
+            unfocusedPlaceholderColor = Color(0xffA1A0A3),
+            unfocusedContainerColor = Color.Transparent,
+            focusedTextColor = Color.White,
+            focusedContainerColor = Color.Transparent,
+            focusedPlaceholderColor = Color(0xffA1A0A3),
+            focusedIndicatorColor = Color(0xff28176B),
+            unfocusedIndicatorColor = Color(0xff28176B)
+        ),
+        placeholder = { Text(text = placeholder) },
+        maxLines = 1,
+        textStyle = TextStyle(
+            fontFamily = OpenSans,
+            fontWeight = FontWeight.Light,
+            fontSize = 15.sp
+        )
+    )
+}

App/app/src/main/java/com/example/mystictale/resources/PasswordTextField.kt

@@ -0,0 +1,71 @@
+package com.example.mystictale.resources
+
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.width
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconToggleButton
+import androidx.compose.material3.Text
+import androidx.compose.material3.TextField
+import androidx.compose.material3.TextFieldDefaults
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.text.Placeholder
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.input.PasswordVisualTransformation
+import androidx.compose.ui.text.input.VisualTransformation
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import com.example.mystictale.R
+import com.example.mystictale.ui.theme.OpenSans
+
+@Composable
+fun PasswordTextField(value:String, onValueChange:(String)->Unit,placeholder: String) {
+    val checked = remember { mutableStateOf(false) }
+    TextField(
+        value = value,
+        onValueChange = onValueChange,
+        Modifier
+            .fillMaxWidth(0.95f)
+            .padding(start = 35.dp),
+        trailingIcon = {
+            IconToggleButton(
+                checked = checked.value,
+                onCheckedChange = { checked.value = it }) {
+                Icon(
+                    if (checked.value) {
+                        painterResource(id = R.drawable.eye)
+                    } else {
+                        painterResource(id = R.drawable.close_eye)
+                    },
+                    contentDescription = "Скрыть пароль",
+                    tint = Color(0XFF939396),
+                    modifier = Modifier.width(20.dp)
+                )
+            }
+        },
+        visualTransformation = if (checked.value) VisualTransformation.None else PasswordVisualTransformation(),
+        colors = TextFieldDefaults.colors(
+            unfocusedTextColor = Color.White,
+            unfocusedPlaceholderColor = Color(0xffA1A0A3),
+            unfocusedContainerColor = Color.Transparent,
+            focusedTextColor = Color.White,
+            focusedContainerColor = Color.Transparent,
+            focusedPlaceholderColor = Color(0xffA1A0A3),
+            focusedIndicatorColor = Color(0xff28176B),
+            unfocusedIndicatorColor = Color(0xff28176B)
+        ),
+        placeholder = { Text(text = placeholder) },
+        maxLines = 1,
+        textStyle = TextStyle(
+            fontFamily = OpenSans,
+            fontWeight = FontWeight.Light,
+            fontSize = 15.sp
+        )
+    )
+}

App/app/src/main/java/com/example/mystictale/ui/theme/Type.kt

@@ -34,4 +34,11 @@ val Typography = Typography(
     )
     */
 )
-
+val OpenSans = FontFamily(
+    Font(R.font.open_sans_regular, FontWeight.Normal),
+    Font(R.font.open_sans_bold, FontWeight.Bold),
+    Font(R.font.open_sans_light, FontWeight.Light)
+)
+val Wolgadeutsche = FontFamily(
+    Font(R.font.wolgadeutsche)
+)