diff --git a/app/src/main/java/com/example/sw0b_001/ui/views/WelcomeView.kt b/app/src/main/java/com/example/sw0b_001/ui/views/WelcomeView.kt index efc63030..d4731207 100644 --- a/app/src/main/java/com/example/sw0b_001/ui/views/WelcomeView.kt +++ b/app/src/main/java/com/example/sw0b_001/ui/views/WelcomeView.kt @@ -1,176 +1,265 @@ package com.example.sw0b_001.ui.views -import android.content.Intent import android.content.res.Configuration +import androidx.compose.foundation.BorderStroke import androidx.compose.foundation.Image -import androidx.compose.foundation.clickable +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.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.size import androidx.compose.foundation.layout.width +import androidx.compose.foundation.pager.HorizontalPager +import androidx.compose.foundation.pager.rememberPagerState +import androidx.compose.foundation.shape.CircleShape import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.material.icons.Icons -import androidx.compose.material.icons.filled.Language +import androidx.compose.material.icons.automirrored.filled.KeyboardArrowRight +import androidx.compose.material.icons.filled.ArrowForward +import androidx.compose.material.icons.filled.KeyboardArrowRight import androidx.compose.material3.Button -import androidx.compose.material3.ButtonDefaults -import androidx.compose.material3.DropdownMenu -import androidx.compose.material3.DropdownMenuItem +import androidx.compose.material3.CardDefaults import androidx.compose.material3.Icon import androidx.compose.material3.MaterialTheme -import androidx.compose.material3.OutlinedButton +import androidx.compose.material3.OutlinedCard import androidx.compose.material3.Scaffold import androidx.compose.material3.Text import androidx.compose.runtime.Composable -import androidx.compose.runtime.LaunchedEffect -import androidx.compose.runtime.getValue -import androidx.compose.runtime.mutableStateOf -import androidx.compose.runtime.remember -import androidx.compose.runtime.setValue +import androidx.compose.runtime.rememberCoroutineScope import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier -import androidx.compose.ui.platform.LocalContext -import androidx.compose.ui.platform.LocalInspectionMode +import androidx.compose.ui.graphics.Color import androidx.compose.ui.res.painterResource -import androidx.compose.ui.res.stringArrayResource import androidx.compose.ui.res.stringResource import androidx.compose.ui.text.style.TextAlign import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp import androidx.navigation.NavController -import com.example.sw0b_001.R -import androidx.core.net.toUri import androidx.navigation.compose.rememberNavController -import com.afkanerd.smswithoutborders_libsmsmms.extensions.context.getCurrentLocale -import com.afkanerd.smswithoutborders_libsmsmms.extensions.context.setLocale -import com.example.sw0b_001.data.Helpers -import com.example.sw0b_001.ui.navigation.OnboardingInteractiveScreen +import com.example.sw0b_001.R import com.example.sw0b_001.ui.theme.AppTheme +import kotlinx.coroutines.launch @Composable -fun WelcomeMainView( - navController: NavController -) { - val context = LocalContext.current +fun WelcomeMainView(navController: NavController) { - var localeExpanded by remember { mutableStateOf(false) } - val localeArraysValues = stringArrayResource(R.array.language_values) - val localeArraysOptions= stringArrayResource(R.array.language_options) + val pageCount = 3 + val pagerState = rememberPagerState(pageCount = { pageCount }) + val scope = rememberCoroutineScope() Scaffold { innerPadding -> Column( modifier = Modifier - .fillMaxHeight() + .fillMaxSize() .padding(innerPadding) - .padding(start = 16.dp, end = 16.dp), - horizontalAlignment = Alignment.CenterHorizontally, - verticalArrangement = Arrangement.Center ) { - Image( - painter = painterResource(id = R.drawable.relay_sms_welcome,), - contentDescription = null, - modifier = Modifier.size(250.dp) - ) - Spacer(modifier = Modifier.height(32.dp)) + HorizontalPager( + state = pagerState, + modifier = Modifier.weight(1f) + ) { page -> + when (page) { + 0 -> PageOneContent() + 1 -> PageTwoContent() + 2 -> PageThreeContent() + } + } - Column( - modifier = Modifier.fillMaxWidth(), - horizontalAlignment = Alignment.CenterHorizontally, - verticalArrangement = Arrangement.Center + Row( + modifier = Modifier + .fillMaxWidth() + .padding(horizontal = 24.dp, vertical = 24.dp), + horizontalArrangement = Arrangement.SpaceBetween, + verticalAlignment = Alignment.CenterVertically ) { - OutlinedButton( + Row(horizontalArrangement = Arrangement.spacedBy(8.dp)) { + repeat(pageCount) { index -> + Box( + modifier = Modifier + .size( + width = if (pagerState.currentPage == index) 24.dp else 8.dp, + height = 8.dp + ) + .background( + color = if (pagerState.currentPage == index) + MaterialTheme.colorScheme.primaryContainer + else + MaterialTheme.colorScheme.outlineVariant, + shape = CircleShape + ) + ) + } + } + + Button( onClick = { - localeExpanded = true + scope.launch { + if (pagerState.currentPage < pageCount - 1) { + pagerState.animateScrollToPage(pagerState.currentPage + 1) + } else { + + } + } }, - shape = RoundedCornerShape(24.dp), - modifier = Modifier.padding(end = 8.dp), + shape = RoundedCornerShape(50.dp) ) { - Icon( - imageVector = Icons.Filled.Language, - contentDescription = stringResource(R.string.language), - modifier = Modifier.size(20.dp), - ) - Spacer(modifier = Modifier.width(4.dp)) Text( - text = context.getCurrentLocale()?.displayName ?: - stringResource(R.string.english1), + text = when (pagerState.currentPage) { + 0 -> "Get Started" + pageCount - 1 -> "Done!" + else -> "Next" + } ) - } - Column( - modifier = Modifier - .fillMaxWidth() - .padding(start = 8.dp) - ) { - DropdownMenu( - expanded = localeExpanded, - onDismissRequest = { localeExpanded = false } + Spacer(modifier = Modifier.width(8.dp)) + + Box( + modifier = Modifier + .size(28.dp) + .background( + color = MaterialTheme.colorScheme.onPrimary, + shape = CircleShape + ), + contentAlignment = Alignment.Center ) { - localeArraysOptions.forEachIndexed { i, item -> - DropdownMenuItem( - text = { Text(item) }, - onClick = { - context.setLocale(localeArraysValues[i]) - localeExpanded = false - } - ) - } + Icon( + imageVector = Icons.Filled.KeyboardArrowRight, + contentDescription = null, + modifier = Modifier.size(18.dp), + tint = MaterialTheme.colorScheme.primary + ) } } - } + } + } +} +@Composable +fun PageOneContent() { + Column( + modifier = Modifier + .fillMaxSize() + .padding(24.dp), + horizontalAlignment = Alignment.CenterHorizontally, + verticalArrangement = Arrangement.Center + ) { + Image( + painter = painterResource(id = R.drawable.relay_sms_welcome), + contentDescription = null, + modifier = Modifier.size(150.dp) + ) - Spacer(modifier = Modifier.height(64.dp)) + Spacer(modifier = Modifier.height(24.dp)) - Text( - text = stringResource(R.string.welcome_to_relaysms_), - style = MaterialTheme.typography.headlineMedium, - textAlign = TextAlign.Center, - color = MaterialTheme.colorScheme.onSurface - ) + Text( + text = stringResource(R.string.welcome_to_relaysms_), + style = MaterialTheme.typography.headlineMedium, + textAlign = TextAlign.Center, + color = MaterialTheme.colorScheme.onSurface + ) - Spacer(modifier = Modifier.height(16.dp)) + Spacer(modifier = Modifier.height(12.dp)) - Text( - text = stringResource(R.string.use_sms_to_make_a_post_send_emails_and_messages_with_no_internet_connection), - style = MaterialTheme.typography.bodyMedium, - textAlign = TextAlign.Center, - color = MaterialTheme.colorScheme.onSurfaceVariant - ) + Text("send encrypted emails and online updates using sms no internet required", + style = MaterialTheme.typography.bodyMedium, + textAlign = TextAlign.Center, + color = MaterialTheme.colorScheme.onSurfaceVariant + ) + + Spacer(modifier = Modifier.height(32.dp)) + + InfoCard() + } +} - Spacer(modifier = Modifier.weight(1f)) +@Composable +fun PageTwoContent() { + Column( + modifier = Modifier + .fillMaxSize() + .padding(24.dp), + horizontalAlignment = Alignment.CenterHorizontally, + verticalArrangement = Arrangement.Center + ) { + Text( + text = "Page Two — Coming Soon", + style = MaterialTheme.typography.headlineMedium, + textAlign = TextAlign.Center, + color = MaterialTheme.colorScheme.onSurface + ) + } +} + +@Composable +fun PageThreeContent() { + Column( + modifier = Modifier + .fillMaxSize() + .padding(24.dp), + horizontalAlignment = Alignment.CenterHorizontally, + verticalArrangement = Arrangement.Center + ) { + Text( + text = "Page Three — Coming Soon", + style = MaterialTheme.typography.headlineMedium, + textAlign = TextAlign.Center, + color = MaterialTheme.colorScheme.onSurface + ) + } +} - Button( - onClick = { - navController.navigate(OnboardingInteractiveScreen) - }, - modifier = Modifier.fillMaxWidth(), - colors = ButtonDefaults.buttonColors( - MaterialTheme.colorScheme.primary) +@Composable +fun InfoCard() { + OutlinedCard( + modifier = Modifier.fillMaxWidth(), + shape = RoundedCornerShape(20.dp), + colors = CardDefaults.outlinedCardColors( + containerColor = MaterialTheme.colorScheme.secondaryContainer + ), + border = BorderStroke( + width = 1.dp, + color = MaterialTheme.colorScheme.primary + ) + ) { + Column( + modifier = Modifier + .fillMaxWidth() + .padding(20.dp), + horizontalAlignment = Alignment.CenterHorizontally + ) { + Row( + verticalAlignment = Alignment.CenterVertically, + horizontalArrangement = Arrangement.Center ) { - Text(text = stringResource(R.string.learn_how_it_works_), - color = MaterialTheme.colorScheme.onPrimary) + Icon( + painter = painterResource(R.drawable.lock_open_right), + contentDescription = null, + tint = MaterialTheme.colorScheme.onSurface, + modifier = Modifier.size(20.dp) + ) + Spacer(modifier = Modifier.width(8.dp)) + + Text( + text = "Zero Accounts, Zero Passwords", + style = MaterialTheme.typography.titleMedium, + color = MaterialTheme.colorScheme.onSurface + ) } - Spacer(modifier = Modifier.height(16.dp)) + Spacer(modifier = Modifier.height(12.dp)) + Text( - text = stringResource(R.string.read_our_privacy_policy), - modifier = if(LocalInspectionMode.current) Modifier - else Modifier.clickable(onClick = { - val intent = Intent(Intent.ACTION_VIEW, - context.getString(R.string.https_smswithoutborders_com_privacy_policy).toUri()) - context.startActivity(intent) - }), - color = MaterialTheme.colorScheme.primary, - style = MaterialTheme.typography.bodySmall + text = "Your device is completely independent. We never ask you to register or log in.", + style = MaterialTheme.typography.bodyMedium, + textAlign = TextAlign.Center, + color = MaterialTheme.colorScheme.onSurfaceVariant ) - Spacer(modifier = Modifier.height(64.dp)) } } } @@ -189,4 +278,6 @@ fun OnboardingViewPreview() { AppTheme { WelcomeMainView(rememberNavController()) } -} \ No newline at end of file +} + + diff --git a/app/src/main/res/drawable/lock_open_right.xml b/app/src/main/res/drawable/lock_open_right.xml new file mode 100644 index 00000000..906a70d2 --- /dev/null +++ b/app/src/main/res/drawable/lock_open_right.xml @@ -0,0 +1,10 @@ + + +