frontend: дописал reading screen

Frontend/app/src/main/java/com/example/neurea/navigation/Navigation.kt

@@ -8,6 +8,7 @@ import androidx.navigation.compose.composable
 import androidx.navigation.compose.rememberNavController
 import com.example.neurea.views.screens.AuthorizationScreen
 import com.example.neurea.views.screens.BookScreen
+import com.example.neurea.views.screens.ReadingScreen
 import com.example.neurea.views.screens.SplashScreen
 
 @Composable
@@ -23,7 +24,10 @@ fun Navigation(){
             AuthorizationScreen(navController) //navController = navController
         }
         composable("bookScreen"){
-            BookScreen()
+            BookScreen(navController)
+        }
+        composable ("readingScreen"){
+            ReadingScreen()
         }
     }
 

Frontend/app/src/main/java/com/example/neurea/views/screens/BookScreen.kt

@@ -48,6 +48,7 @@ import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
+import androidx.navigation.NavController
 import com.example.neurea.views.ui.theme.NeureaTheme
 import com.example.neurea.R
 
@@ -55,7 +56,7 @@ import com.example.neurea.R
 @Preview()
 @OptIn(ExperimentalMaterial3Api::class)
 @Composable
-fun BookScreen() { // navController: NavController
+fun BookScreen(navController: NavController) { // navController: NavController
     var newName by remember{ mutableStateOf("") }
     var newEmail by remember { mutableStateOf("") }
     var newBirthday by remember { mutableStateOf("") }
@@ -167,7 +168,7 @@ fun BookScreen() { // navController: NavController
 
 
                     }
-                    Button(onClick = {}, colors = ButtonDefaults.buttonColors(containerColor = MaterialTheme.colorScheme.primary))
+                    Button(onClick = {navController.navigate("readingScreen")}, colors = ButtonDefaults.buttonColors(containerColor = MaterialTheme.colorScheme.primary))
                     {
                         Text("Читать", color = MaterialTheme.colorScheme.secondary, fontSize = 15.sp,  fontWeight = FontWeight.Bold)
                     }

Frontend/app/src/main/java/com/example/neurea/views/screens/ReadingScreen.kt

@@ -1,15 +1,20 @@
 package com.example.neurea.views.screens
 
+import androidx.compose.foundation.BorderStroke
 import androidx.compose.foundation.background
 import androidx.compose.foundation.border
+import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxHeight
 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.foundation.text.KeyboardOptions
 import androidx.compose.material3.Button
@@ -18,6 +23,7 @@ import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.HorizontalDivider
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
+import androidx.compose.material3.IconButtonDefaults
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Slider
 import androidx.compose.material3.SliderDefaults
@@ -33,6 +39,7 @@ 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.alpha
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.painterResource
@@ -45,31 +52,71 @@ import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
+import androidx.compose.ui.zIndex
 import androidx.navigation.NavController
 import com.example.neurea.R
 import com.example.neurea.views.ui.theme.NeureaTheme
+import kotlin.math.roundToInt
 
 @Preview()
 @OptIn(ExperimentalMaterial3Api::class)
 @Composable
 fun ReadingScreen() { // navController: NavController
-
+    var menuVisibility by remember { mutableFloatStateOf(1f) }
     NeureaTheme {
-        Column(
-            modifier = Modifier
+        Box(modifier = Modifier.fillMaxSize()){
+            Column(
+                modifier = Modifier
+                    .fillMaxSize()
+                    .background(color = MaterialTheme.colorScheme.secondary)
+                    .padding(top = 50.dp, start = 20.dp, end = 20.dp, bottom = 50.dp)
+                    .clickable(onClick = { menuVisibility = if (menuVisibility == 1f) 0f else 1f }
+                    )
+            ) {
+                Column(modifier = Modifier.fillMaxSize()){
+                    Text("«Автостопом по Галактике», стартовав в качестве радиопостановки на Би-би-си, имел грандиозный успех. Одноименный роман в 1984 году возглавил список английских бестселлеров, а сам Адамс стал самым молодым писателем, получившим награду «Золотая ручка», вручаемую за 1 млн. проданных книг.\u2028Телепостановка 1982 года упрочила успех серии книг про «Автостоп», а полнометражный фильм 2005 года при бюджете в \$50 млн. дважды «отбил» расходы на экранизацию и был номинирован на 7 премий.",
+                        textAlign = TextAlign.Justify, fontSize = 16.sp)
+                }
+
+            }
+            var sliderPosition by remember { mutableFloatStateOf(1f) }
+            Box(modifier = Modifier
+                .alpha(menuVisibility)
+                .padding(horizontal = 20.dp, vertical = 20.dp)
                 .fillMaxSize()
-                .background(color = MaterialTheme.colorScheme.secondary)
-        ) {
-            var sliderPosition by remember { mutableFloatStateOf(0f) }
-            Column {
-                Slider(
-                    value = sliderPosition,
-                    onValueChange = { sliderPosition = it },
-                    colors = SliderDefaults.colors(thumbColor = MaterialTheme.colorScheme.primary, inactiveTickColor = MaterialTheme.colorScheme.onSecondary)
-                )
-                Text(text = sliderPosition.toString())
+                .zIndex(12f), contentAlignment = Alignment.BottomCenter){
+                Column(){
+                    Slider(
+                        value = sliderPosition,
+                        onValueChange = { sliderPosition = it },
+                        valueRange = 1f..307f,
+                        colors = SliderDefaults.colors(thumbColor = MaterialTheme.colorScheme.primary, inactiveTickColor = MaterialTheme.colorScheme.onSecondary)
+                    )
+                    Row(modifier = Modifier.height(30.dp).clip(RoundedCornerShape(30.dp)).background(MaterialTheme.colorScheme.surface).fillMaxWidth(),
+                        horizontalArrangement = Arrangement.SpaceBetween){
+                        IconButton(onClick = { if (sliderPosition > 1f) sliderPosition-=1f }, modifier = Modifier.width(90.dp).clip(RoundedCornerShape(20.dp))
+                            ,
+                                colors = IconButtonDefaults.iconButtonColors(
+                                containerColor = MaterialTheme.colorScheme.primary)
+
+                        ) {
+                            Icon(painter = painterResource(id = R.drawable.arrow_left), contentDescription = "",tint=MaterialTheme.colorScheme.secondary,)
+
+                        }
+                        Text("${(sliderPosition).roundToInt()}/307", color = MaterialTheme.colorScheme.onSecondary, modifier = Modifier.align(Alignment.CenterVertically))
+                        IconButton(onClick = { if (sliderPosition < 307f) sliderPosition+=1f }, modifier = Modifier.width(90.dp).clip(RoundedCornerShape(20.dp)),
+                            colors = IconButtonDefaults.iconButtonColors(
+                                containerColor = MaterialTheme.colorScheme.primary
+                            )
+                        ) {
+                            Icon(painter = painterResource(id = R.drawable.arrow_right), contentDescription = "",tint=MaterialTheme.colorScheme.secondary,)
+
+                        }
+                    }
+                }
             }
 
         }
+
     }
 }

Frontend/app/src/main/res/drawable/arrow_left.xml

@@ -0,0 +1,7 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android" android:height="20.430107dp" android:viewportHeight="76" android:viewportWidth="93" android:width="25dp">
+      
+    <path android:fillColor="#000000" android:pathData="M83,48L18,48A10,10 0,0 1,8 38L8,38A10,10 0,0 1,18 28L83,28A10,10 0,0 1,93 38L93,38A10,10 0,0 1,83 48z"/>
+      
+    <path android:fillColor="#000000" android:pathData="M2.744,40.8C1.219,39.244 1.219,36.756 2.744,35.2L25.393,12.088C27.901,9.529 32.25,11.304 32.25,14.888V61.112C32.25,64.695 27.901,66.471 25.393,63.912L2.744,40.8Z"/>
+    
+</vector>

Frontend/app/src/main/res/drawable/arrow_right.xml

@@ -0,0 +1,7 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android" android:height="20.430107dp" android:viewportHeight="76" android:viewportWidth="93" android:width="25dp">
+      
+    <path android:fillColor="#000000" android:pathData="M10,28L75,28A10,10 0,0 1,85 38L85,38A10,10 0,0 1,75 48L10,48A10,10 0,0 1,0 38L0,38A10,10 0,0 1,10 28z"/>
+      
+    <path android:fillColor="#000000" android:pathData="M90.256,35.2C91.781,36.756 91.781,39.244 90.256,40.8L67.607,63.912C65.099,66.471 60.75,64.696 60.75,61.112V14.888C60.75,11.305 65.099,9.529 67.607,12.088L90.256,35.2Z"/>
+    
+</vector>