second

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)
+    }
+}

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))
+    }
+}

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")
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

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)

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,
+                                Text(
-                                    fontStyle = FontStyle.Italic)
+                                    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,
+                                Text(
-                                    fontStyle = FontStyle.Italic)
+                                    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,
+                                Text(
-                                    fontStyle = FontStyle.Italic)
+                                    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,
+                                Text(
-                                    fontStyle = FontStyle.Italic)
+                                    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,
+                                Text(
-                                    fontStyle = FontStyle.Italic)
+                                    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)
-        }
-    }
 }