Главный экран готов

app/src/main/java/com/example/shawarma/screens/home/HomeScreen.kt

@@ -1,17 +1,155 @@
 package com.example.shawarma.screens.home
 
+import androidx.compose.foundation.BorderStroke
+import androidx.compose.foundation.Image
+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.size
+import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material.Button
+import androidx.compose.material.ButtonColors
+import androidx.compose.material.ButtonDefaults
+import androidx.compose.material.Card
 import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Color
+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 androidx.compose.ui.zIndex
+import com.example.shawarma.R
+import com.example.shawarma.ui.theme.MarckFamily
+import com.example.shawarma.ui.theme.MyLightYellow
+import com.example.shawarma.ui.theme.MyMainBackground
+import com.example.shawarma.ui.theme.MyOrange
+import com.example.shawarma.ui.theme.MyPriceBackground
+import com.example.shawarma.ui.theme.NunitoFamily
+import com.example.shawarma.widgets.ShawarmaLogo2
 
 @Composable
 fun HomeScreen() {
     Box(
-        contentAlignment = Alignment.Center
+        contentAlignment = Alignment.TopCenter
     ) {
-        Text(
+        HomeList()
-            text = "Home"
+        ShawarmaLogo2()
-        )
+    }
+}
+
+@Composable
+fun HomeList(){
+    Box(
+        modifier = Modifier
+            .clip(shape = RoundedCornerShape(30.dp))
+            .padding(top = 100.dp)
+            .fillMaxSize()
+            .background(color = MyMainBackground)
+            .zIndex(2f),
+
+        contentAlignment = Alignment.TopCenter
+    ){
+        Text(
+            text = "Шавармашка",
+            fontFamily = MarckFamily,
+            fontSize = 40.sp,
+            modifier = Modifier.padding(top = 15.dp)
+        )
+        LazyColumn(
+            horizontalAlignment = Alignment.CenterHorizontally,
+            modifier = Modifier.padding(top = 80.dp)
+        )
+        {
+            items(3) { index ->
+                Row(
+                    horizontalArrangement = Arrangement.SpaceAround,
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .padding(top = 10.dp)
+                ) {
+                    ProductCard()
+                    ProductCard()
+                }
+
+                // TODO Потом переделать под реальный объем данных
+                if (index == 2) {
+                    Spacer(modifier = Modifier.height(70.dp))
+                }
+            }
+        }
+    }
+}
+
+@Composable
+fun ProductCard(){
+    Card(
+        shape = RoundedCornerShape(20.dp),
+        backgroundColor = Color.White,
+        border = BorderStroke(2.dp, MyOrange),
+        modifier = Modifier
+            .size(160.dp)
+    ) {
+            Column(
+                horizontalAlignment = Alignment.CenterHorizontally
+            ) {
+                Text(
+                    text = "Классика",
+                    fontFamily = NunitoFamily,
+                    fontSize =  20.sp,
+                    fontWeight = FontWeight.Bold,
+                    modifier = Modifier.padding(top = 10.dp)
+                )
+                Image(
+                    painter = painterResource(id = R.drawable.shawarma2),
+                    contentDescription = "Shawarma",
+                    Modifier.size(135.dp, 70.dp)
+                )
+                Spacer(modifier = Modifier.height(16.dp))
+                Card(
+                    shape = RoundedCornerShape(20.dp),
+                    backgroundColor = MyPriceBackground,
+                    border = BorderStroke(2.dp, MyOrange),
+                    modifier = Modifier
+                        .size(160.dp, 36.dp)
+                ) {
+                    Row(
+                    ){
+                        Text(
+                            text = "150 руб. ",
+                            fontFamily = NunitoFamily,
+                            fontSize =  16.sp,
+                            fontWeight = FontWeight.ExtraBold,
+                            modifier = Modifier.padding(start = 12.dp, top = 6.dp)
+                        )
+                        Button(
+                            onClick = { /*TODO*/ },
+                            colors = ButtonDefaults.buttonColors(
+                                backgroundColor = MyLightYellow,
+                                contentColor = Color.Black
+                            ),
+                            shape = RoundedCornerShape(20.dp),
+                        ) {
+                            Text(
+                                text = "Купить",
+                                fontSize = 14.sp,
+                                fontWeight = FontWeight.ExtraBold,
+                                fontFamily = NunitoFamily,
+                            )
+                        }
+                    }
+                }
+            }
     }
 }

app/src/main/java/com/example/shawarma/ui/theme/Color.kt

@@ -5,3 +5,6 @@ import androidx.compose.ui.graphics.Color
 val MyLightYellow = Color(255,225,120,255)
 val MyLightRed = Color(255,100,100,255)
 val MyTextFieldBackground = Color(232,232,232,255)
+val MyPriceBackground = Color(0xFFE8E8E8)
+val MyMainBackground = Color(0x80FFFFFF)
+val MyOrange = Color(0xFFFF9600)

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

@@ -32,3 +32,10 @@ val Typography = Typography(
 val JejuFamily = FontFamily(
     Font(R.font.jejugothic_regular, FontWeight.Normal)
 )
+
+val MarckFamily = FontFamily(
+    Font(R.font.marckscript_regular, FontWeight.Normal)
+)
+val NunitoFamily = FontFamily(
+    Font(R.font.nunito_wght, FontWeight.Normal)
+)

app/src/main/java/com/example/shawarma/widgets/ShawarmaLogo2.kt

@@ -0,0 +1,30 @@
+package com.example.shawarma.widgets
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.size
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.zIndex
+import com.example.shawarma.R
+
+@Composable
+fun ShawarmaLogo2() {
+    Column(
+        modifier = Modifier
+            .zIndex(-1f)
+            .fillMaxSize(),
+        horizontalAlignment = Alignment.CenterHorizontally
+    ) {
+        Image(
+            painter = painterResource(id = R.drawable.shawarma1),
+            contentDescription = null,
+            modifier = Modifier
+                .size(256.dp, 256.dp)
+        )
+    }
+}