diff --git a/composeApp/src/commonMain/kotlin/org/example/project/components/defaultBottomBar.kt b/composeApp/src/commonMain/kotlin/org/example/project/components/defaultBottomBar.kt new file mode 100644 index 0000000..bdc500b --- /dev/null +++ b/composeApp/src/commonMain/kotlin/org/example/project/components/defaultBottomBar.kt @@ -0,0 +1,30 @@ +package org.example.project.components + +import androidx.compose.foundation.background +import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.padding +import androidx.compose.material.Text +import androidx.compose.runtime.Composable +import androidx.compose.runtime.collectAsState +import androidx.compose.ui.Alignment +import androidx.compose.ui.Modifier +import androidx.compose.ui.graphics.Color +import androidx.compose.ui.unit.dp +import org.example.project.ViewModel.TimerViewModel + +@Composable +public fun defaultBottomBar(timerViewModel: TimerViewModel) { + val remainingTime = timerViewModel.remainingTime.collectAsState().value + + Column( + modifier = Modifier + .fillMaxWidth() + .background(Color.DarkGray) + .padding(8.dp), + horizontalAlignment = Alignment.CenterHorizontally + ) { + Text(text = remainingTime, + color = Color.White) + } +} diff --git a/composeApp/src/commonMain/kotlin/org/example/project/components/defaultTopBar.kt b/composeApp/src/commonMain/kotlin/org/example/project/components/defaultTopBar.kt new file mode 100644 index 0000000..10e70da --- /dev/null +++ b/composeApp/src/commonMain/kotlin/org/example/project/components/defaultTopBar.kt @@ -0,0 +1,70 @@ +package org.example.project.components + +import androidx.compose.foundation.background +import androidx.compose.foundation.layout.Arrangement +import androidx.compose.foundation.layout.Row +import androidx.compose.foundation.layout.Spacer +import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.layout.width +import androidx.compose.foundation.layout.wrapContentWidth +import androidx.compose.foundation.shape.RoundedCornerShape +import androidx.compose.material.Button +import androidx.compose.material.ButtonDefaults +import androidx.compose.material.MaterialTheme +import androidx.compose.material.Text +import androidx.compose.runtime.Composable +import androidx.compose.ui.Alignment +import androidx.compose.ui.Modifier +import androidx.compose.ui.graphics.Color +import androidx.compose.ui.text.font.FontWeight +import androidx.compose.ui.text.style.TextAlign +import androidx.compose.ui.unit.dp +import cafe.adriel.voyager.navigator.LocalNavigator +import cafe.adriel.voyager.navigator.currentOrThrow + +@Composable +public fun defaultTopBar() { + val navigator = LocalNavigator.currentOrThrow + + Row( + modifier = Modifier + .fillMaxWidth() + .background(Color.DarkGray) + .padding(16.dp), + verticalAlignment = Alignment.CenterVertically, + horizontalArrangement = Arrangement.SpaceBetween + ) { + + Button( + onClick = { navigator.pop() }, + colors = ButtonDefaults.buttonColors( + backgroundColor = Color.LightGray, + contentColor = Color.Black + ), + elevation = null, + shape = RoundedCornerShape(15.dp), + modifier = Modifier + .wrapContentWidth() + + ) { + Text(text = "Назад", + color = Color.Black, + ) + } + + Spacer(modifier = Modifier.width(24.dp)) + + Text( + text = "MARATHON SKILLS 2016", + style = MaterialTheme.typography.h6, + modifier = Modifier.weight(1f), + textAlign = TextAlign.Left, + fontWeight = FontWeight.Bold, + fontSize = MaterialTheme.typography.h4.fontSize, + color = Color.White + ) + + Spacer(modifier = Modifier.width(64.dp)) + } +} \ No newline at end of file diff --git a/composeApp/src/commonMain/kotlin/org/example/project/ui/Screens/Login.kt b/composeApp/src/commonMain/kotlin/org/example/project/ui/Screens/Login.kt new file mode 100644 index 0000000..f2a7487 --- /dev/null +++ b/composeApp/src/commonMain/kotlin/org/example/project/ui/Screens/Login.kt @@ -0,0 +1,181 @@ +package org.example.project.ui.Screens + +import androidx.compose.foundation.background +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.layout.wrapContentWidth +import androidx.compose.foundation.shape.RoundedCornerShape +import androidx.compose.material.Button +import androidx.compose.material.ButtonDefaults +import androidx.compose.material.MaterialTheme +import androidx.compose.material.Scaffold +import androidx.compose.material.Text +import androidx.compose.material.TextField +import androidx.compose.material.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.graphics.Color +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.style.TextAlign +import androidx.compose.ui.unit.dp +import cafe.adriel.voyager.core.screen.Screen +import cafe.adriel.voyager.navigator.LocalNavigator +import cafe.adriel.voyager.navigator.currentOrThrow +import org.example.project.ViewModel.TimerViewModel +import org.example.project.components.defaultBottomBar +import org.example.project.components.defaultTopBar +import javax.swing.text.AbstractDocument.Content + + + +class Login(private val timerViewModel: TimerViewModel): Screen { + + + @Composable + override fun Content() { + val navigator = LocalNavigator.currentOrThrow + var email by remember { mutableStateOf("") } + var password by remember { mutableStateOf("") } + + Scaffold( + topBar = { defaultTopBar() }, + bottomBar = { defaultBottomBar(timerViewModel = timerViewModel) } + ) { paddingValues -> + Box( + modifier = Modifier + .padding(paddingValues) + .fillMaxSize() + .background(Color.White) + ) { + Column( + modifier = Modifier + .fillMaxWidth() + .align(Alignment.Center) + .padding(horizontal = 30.dp), + horizontalAlignment = Alignment.CenterHorizontally + ) { + Text( + text = "Форма авторизации", + style = MaterialTheme.typography.h5, + color = Color.DarkGray, + modifier = Modifier.padding(bottom = 8.dp) + ) + + Text( + text = "Пожалуйста, авторизуйтесь в системе, используя ваш адрес электронной почты и пароль.", + textAlign = TextAlign.Center, + modifier = Modifier.padding(bottom = 32.dp) + ) + + + Row( + modifier = Modifier + .fillMaxWidth() + .padding(horizontal = 20.dp) + .padding(bottom = 16.dp), + verticalAlignment = Alignment.CenterVertically + ) { + Text( + text = "Email:", + modifier = Modifier.width(100.dp) + ) + TextField( + value = email, + onValueChange = { email = it }, + placeholder = { Text("Enter your email address") }, + modifier = Modifier + .weight(1f) + .background(Color.LightGray, RoundedCornerShape(4.dp)), + singleLine = true, + colors = TextFieldDefaults.textFieldColors( + backgroundColor = Color.LightGray, + focusedIndicatorColor = Color.Transparent, + unfocusedIndicatorColor = Color.Transparent + ) + ) + } + + + Row( + modifier = Modifier + .fillMaxWidth() + .padding(horizontal = 20.dp) + .padding(bottom = 32.dp), + verticalAlignment = Alignment.CenterVertically + ) { + Text( + text = "Password:", + modifier = Modifier.width(100.dp) + ) + TextField( + value = password, + onValueChange = { password = it }, + placeholder = { Text("Enter your password") }, + modifier = Modifier + .weight(1f) + .background(Color.LightGray, RoundedCornerShape(4.dp)), + singleLine = true, + visualTransformation = PasswordVisualTransformation(), + colors = TextFieldDefaults.textFieldColors( + backgroundColor = Color.LightGray, + focusedIndicatorColor = Color.Transparent, + unfocusedIndicatorColor = Color.Transparent + ) + ) + } + + + Row( + modifier = Modifier + .fillMaxWidth() + .padding(horizontal = 20.dp), + horizontalArrangement = Arrangement.SpaceEvenly + ) { + Button( + onClick = { }, + modifier = Modifier + .width(120.dp) + .height(40.dp), + shape = RoundedCornerShape(15.dp), + colors = ButtonDefaults.buttonColors( + backgroundColor = Color.LightGray, + contentColor = Color.Black + ) + ) { + Text("Login") + } + + Button( + onClick = { navigator.pop() }, + modifier = Modifier + .width(120.dp) + .height(40.dp), + shape = RoundedCornerShape(15.dp), + colors = ButtonDefaults.buttonColors( + backgroundColor = Color.LightGray, + contentColor = Color.Black + ) + ) { + Text("Cancel") + } + } + } + } + } + } +} diff --git a/composeApp/src/commonMain/kotlin/org/example/project/ui/Screens/MainScreen.kt b/composeApp/src/commonMain/kotlin/org/example/project/ui/Screens/MainScreen.kt index 75142d8..ef8d45d 100644 --- a/composeApp/src/commonMain/kotlin/org/example/project/ui/Screens/MainScreen.kt +++ b/composeApp/src/commonMain/kotlin/org/example/project/ui/Screens/MainScreen.kt @@ -94,7 +94,7 @@ class MainScreen : Screen { Button( - onClick = { }, + onClick = { navigator.push(Login(timerViewModel)) }, modifier = Modifier .align(Alignment.BottomEnd) .height(65.dp) diff --git a/composeApp/src/commonMain/kotlin/org/example/project/ui/Screens/MoreInfo.kt b/composeApp/src/commonMain/kotlin/org/example/project/ui/Screens/MoreInfo.kt index 273a457..142eb09 100644 --- a/composeApp/src/commonMain/kotlin/org/example/project/ui/Screens/MoreInfo.kt +++ b/composeApp/src/commonMain/kotlin/org/example/project/ui/Screens/MoreInfo.kt @@ -32,6 +32,7 @@ import cafe.adriel.voyager.core.screen.Screen import cafe.adriel.voyager.navigator.LocalNavigator import cafe.adriel.voyager.navigator.currentOrThrow import org.example.project.ViewModel.TimerViewModel +import org.example.project.components.defaultBottomBar class MoreInfoScreen(private val timerViewModel: TimerViewModel) : Screen { @@ -45,7 +46,7 @@ class MoreInfoScreen(private val timerViewModel: TimerViewModel) : Screen { Scaffold( topBar = { InfoTopBar() }, - bottomBar = { InfoBottomBar(timerViewModel = timerViewModel) } + bottomBar = { defaultBottomBar(timerViewModel = timerViewModel) } ) { paddingValues -> Box( modifier = Modifier @@ -89,7 +90,8 @@ class MoreInfoScreen(private val timerViewModel: TimerViewModel) : Screen { ), shape = RoundedCornerShape(15.dp) ) { - Text(text = "Marathon Skills 2016", fontSize = 16.sp, + Text( + text = "Marathon Skills 2016", fontSize = 16.sp, fontStyle = FontStyle.Italic ) } @@ -103,8 +105,10 @@ class MoreInfoScreen(private val timerViewModel: TimerViewModel) : Screen { ), shape = RoundedCornerShape(15.dp) ) { - Text(text = "Предыдущие\nрезультаты", fontSize = 16.sp, - fontStyle = FontStyle.Italic) + Text( + text = "Предыдущие\nрезультаты", fontSize = 16.sp, + fontStyle = FontStyle.Italic + ) } Button( @@ -116,8 +120,10 @@ class MoreInfoScreen(private val timerViewModel: TimerViewModel) : Screen { ), shape = RoundedCornerShape(15.dp) ) { - Text(text = "BMI калькулятор", fontSize = 16.sp, - fontStyle = FontStyle.Italic) + Text( + text = "BMI калькулятор", fontSize = 16.sp, + fontStyle = FontStyle.Italic + ) } } @@ -137,8 +143,10 @@ class MoreInfoScreen(private val timerViewModel: TimerViewModel) : Screen { ), shape = RoundedCornerShape(15.dp) ) { - Text(text = "Насколько долгий\nмарафон", fontSize = 16.sp, - fontStyle = FontStyle.Italic) + Text( + text = "Насколько долгий\nмарафон", fontSize = 16.sp, + fontStyle = FontStyle.Italic + ) } Button( @@ -150,8 +158,11 @@ class MoreInfoScreen(private val timerViewModel: TimerViewModel) : Screen { ), shape = RoundedCornerShape(15.dp) ) { - Text(text = "Список\nблаготворительных\nорганизаций", fontSize = 16.sp, - fontStyle = FontStyle.Italic) + Text( + text = "Список\nблаготворительных\nорганизаций", + fontSize = 16.sp, + fontStyle = FontStyle.Italic + ) } Button( @@ -163,8 +174,10 @@ class MoreInfoScreen(private val timerViewModel: TimerViewModel) : Screen { ), shape = RoundedCornerShape(15.dp) ) { - Text(text = "BMR калькулятор", fontSize = 16.sp, - fontStyle = FontStyle.Italic) + Text( + text = "BMR калькулятор", fontSize = 16.sp, + fontStyle = FontStyle.Italic + ) } } } @@ -198,7 +211,8 @@ class MoreInfoScreen(private val timerViewModel: TimerViewModel) : Screen { .wrapContentWidth() ) { - Text(text = "Назад", + Text( + text = "Назад", color = Color.Black, ) } @@ -219,19 +233,4 @@ class MoreInfoScreen(private val timerViewModel: TimerViewModel) : Screen { } } - @Composable - private fun InfoBottomBar(timerViewModel: TimerViewModel) { - val remainingTime = timerViewModel.remainingTime.collectAsState().value - - Column( - modifier = Modifier - .fillMaxWidth() - .background(Color.DarkGray) - .padding(8.dp), - horizontalAlignment = Alignment.CenterHorizontally - ) { - Text(text = remainingTime, - color = Color.White) - } - } } \ No newline at end of file