diff --git a/composeApp/src/androidInstrumentedTest/kotlin/com/randomboxd/onboarding/presentation/OnboardingScreenTest.kt b/composeApp/src/androidInstrumentedTest/kotlin/com/randomboxd/onboarding/presentation/OnboardingScreenTest.kt index 6418e80..f0330ad 100644 --- a/composeApp/src/androidInstrumentedTest/kotlin/com/randomboxd/onboarding/presentation/OnboardingScreenTest.kt +++ b/composeApp/src/androidInstrumentedTest/kotlin/com/randomboxd/onboarding/presentation/OnboardingScreenTest.kt @@ -70,7 +70,10 @@ class OnboardingScreenTest { // Page 4 → 5 composeTestRule.onNodeWithText("Next").performClick() composeTestRule.waitForIdle() - // Page 5 — last page, skip button should NOT be visible + // Page 5 → 6 + composeTestRule.onNodeWithText("Next").performClick() + composeTestRule.waitForIdle() + // Page 6 — last page, skip button should NOT be visible composeTestRule.onNodeWithText("Start Exploring").assertIsDisplayed() composeTestRule.onNodeWithText("Start Exploring").performClick() diff --git a/composeApp/src/commonMain/composeResources/values-ar/strings.xml b/composeApp/src/commonMain/composeResources/values-ar/strings.xml index 2dec96f..79614f2 100644 --- a/composeApp/src/commonMain/composeResources/values-ar/strings.xml +++ b/composeApp/src/commonMain/composeResources/values-ar/strings.xml @@ -62,12 +62,18 @@ فيلم تلفزيوني حرب غربي - جديد! + جديد! مرشحات النوع قلص اختيارك العشوائي إلى الأنواع التي تناسب مزاجك. ادمج عدة أنواع للعثور على الفيلم المثالي. تصفية حسب نوع واحد أو أكثر في وقت واحد إعادة تعيين المرشحات في أي وقت بنقرة واحدة يعمل مع وضع المستخدم الواحد ووضع متعدد المستخدمين + سجلك + يتم حفظ اختياراتك تلقائياً في سجلك + يتم حفظ كل اختيار عشوائي تلقائياً + علّم على المفضلة بلمسة على القلب + امسح سجلك في أي وقت + 24 أفلام مختارة إجمالاً جاري رمي النرد... جاري البحث عن فيلمك العشوائي إعادة الرمي diff --git a/composeApp/src/commonMain/composeResources/values-ca/strings.xml b/composeApp/src/commonMain/composeResources/values-ca/strings.xml index 3fca5f3..9940e90 100644 --- a/composeApp/src/commonMain/composeResources/values-ca/strings.xml +++ b/composeApp/src/commonMain/composeResources/values-ca/strings.xml @@ -62,12 +62,18 @@ Pel·lícula de TV Guerra Western - NOU! + NOU! Filtres de gènere Limita la teva elecció aleatòria als gèneres que t\'apeteixen. Combina diversos gèneres per trobar la pel·lícula perfecta. Filtra per un o més gèneres alhora Restableix els filtres en qualsevol moment amb un toc Funciona amb els modes d\'un sol usuari i multiusuari + El teu historial + Les teves seleccions es desen automàticament al teu historial + Cada selecció aleatòria es desa automàticament + Marca favorits amb un toc al cor + Esborra el teu historial quan vulguis + 24 pel·lícules seleccionades en total Llançant els daus... Trobar la teva pel·lícula aleatòria Tornar a tirar diff --git a/composeApp/src/commonMain/composeResources/values-de/strings.xml b/composeApp/src/commonMain/composeResources/values-de/strings.xml index 199c8b6..3b3dba8 100644 --- a/composeApp/src/commonMain/composeResources/values-de/strings.xml +++ b/composeApp/src/commonMain/composeResources/values-de/strings.xml @@ -62,12 +62,18 @@ TV-Film Krieg Western - NEU! + NEU! Genre-Filter Grenze deine zufällige Auswahl auf die Genres ein, nach denen dir der Sinn steht. Kombiniere mehrere Genres, um den perfekten Film zu finden. Nach einem oder mehreren Genres gleichzeitig filtern Filter jederzeit mit einem Tipp zurücksetzen Funktioniert im Einzel- und Mehrbenutzermodus + Dein Verlauf + Deine Auswahlen werden automatisch in deinem Verlauf gespeichert + Jede Zufallsauswahl wird automatisch gespeichert + Markiere Favoriten mit einem Herz-Tipp + Lösche deinen Verlauf jederzeit + 24 Filme insgesamt ausgewählt Würfel rollen... Finde deinen zufälligen Film Neu würfeln diff --git a/composeApp/src/commonMain/composeResources/values-es/strings.xml b/composeApp/src/commonMain/composeResources/values-es/strings.xml index 4ed3020..9a7d612 100644 --- a/composeApp/src/commonMain/composeResources/values-es/strings.xml +++ b/composeApp/src/commonMain/composeResources/values-es/strings.xml @@ -62,12 +62,18 @@ Película de TV Guerra Western - ¡NUEVO! + ¡NUEVO! Filtros por género Acota tu elección aleatoria a los géneros que más te apetezcan. Combina varios géneros para encontrar la película perfecta. Filtra por uno o más géneros a la vez Restablece los filtros en cualquier momento con un toque Funciona con los modos de un solo usuario y multiusuario + Tu historial + Tus selecciones se guardan automáticamente en tu historial + Cada selección aleatoria se guarda automáticamente + Marca favoritos con un toque en el corazón + Borra tu historial cuando quieras + 24 películas seleccionadas en total Lanzando los dados... Encontrando tu película aleatoria Tirar de nuevo diff --git a/composeApp/src/commonMain/composeResources/values-fr/strings.xml b/composeApp/src/commonMain/composeResources/values-fr/strings.xml index 82f3998..6080b35 100644 --- a/composeApp/src/commonMain/composeResources/values-fr/strings.xml +++ b/composeApp/src/commonMain/composeResources/values-fr/strings.xml @@ -62,12 +62,18 @@ Téléfilm Guerre Western - NOUVEAU! + NOUVEAU! Filtres par genre Affinez votre sélection aléatoire aux genres qui vous inspirent. Combinez plusieurs genres pour trouver le film parfait. Filtrez par un ou plusieurs genres à la fois Réinitialisez les filtres à tout moment en un seul geste Fonctionne avec les modes utilisateur unique et multi-utilisateur + Votre historique + Vos sélections sont automatiquement enregistrées dans votre historique + Chaque sélection aléatoire est enregistrée automatiquement + Touchez le cœur pour marquer vos favoris + Effacez votre historique à tout moment + 24 films sélectionnés au total Lancement des dés... Trouver votre film aléatoire Relancer diff --git a/composeApp/src/commonMain/composeResources/values-gl/strings.xml b/composeApp/src/commonMain/composeResources/values-gl/strings.xml index 037e88e..11988d4 100644 --- a/composeApp/src/commonMain/composeResources/values-gl/strings.xml +++ b/composeApp/src/commonMain/composeResources/values-gl/strings.xml @@ -62,12 +62,18 @@ Película de TV Guerra Western - NOVO! + NOVO! Filtros por xénero Afina a túa elección aleatoria aos xéneros que máis che apetezan. Combina varios xéneros para atopar a película perfecta. Filtra por un ou máis xéneros á vez Restablece os filtros en calquera momento cun toque Funciona cos modos de usuario único e multiusuario + O teu historial + As túas seleccións gárdanse automaticamente no teu historial + Cada selección aleatoria gárdase automaticamente + Marca favoritos cun toque no corazón + Borra o teu historial cando queiras + 24 películas seleccionadas en total Lanzando os dados... Atopando o teu filme aleatorio Tirar de novo diff --git a/composeApp/src/commonMain/composeResources/values-hi/strings.xml b/composeApp/src/commonMain/composeResources/values-hi/strings.xml index 1c8433e..e63d1ea 100644 --- a/composeApp/src/commonMain/composeResources/values-hi/strings.xml +++ b/composeApp/src/commonMain/composeResources/values-hi/strings.xml @@ -62,12 +62,18 @@ टीवी फिल्म युद्ध वेस्टर्न - नया! + नया! शैली फ़िल्टर अपनी यादृच्छिक पसंद को उन शैलियों तक सीमित करें जो आपके मूड में हैं। सही फिल्म खोजने के लिए कई शैलियों को मिलाएं। एक या एक से अधिक शैलियों के अनुसार फ़िल्टर करें एक टैप में फ़िल्टर रीसेट करें एकल उपयोगकर्ता और बहु-उपयोगकर्ता मोड दोनों के साथ काम करता है + आपका इतिहास + आपके चयन आपके इतिहास में स्वचालित रूप से सहेजे जाते हैं + हर यादृच्छिक चयन स्वचालित रूप से सहेजा जाता है + दिल पर टैप करके पसंदीदा चिह्नित करें + कभी भी अपना इतिहास साफ़ करें + कुल 24 फ़िल्में चयनित पासा फेंक रहे हैं... आपकी यादृच्छिक फिल्म खोज रहे हैं फिर से फेंकें diff --git a/composeApp/src/commonMain/composeResources/values-it/strings.xml b/composeApp/src/commonMain/composeResources/values-it/strings.xml index 6ce1382..d9e584e 100644 --- a/composeApp/src/commonMain/composeResources/values-it/strings.xml +++ b/composeApp/src/commonMain/composeResources/values-it/strings.xml @@ -62,12 +62,18 @@ Film TV Guerra Western - NUOVO! + NUOVO! Filtri per genere Limita la tua scelta casuale ai generi che preferisci. Combina più generi per trovare il film perfetto. Filtra per uno o più generi contemporaneamente Reimposta i filtri in qualsiasi momento con un tocco Funziona con le modalità utente singolo e multiutente + La tua cronologia + Le tue scelte vengono salvate automaticamente nella tua cronologia + Ogni scelta casuale viene salvata automaticamente + Segna i preferiti con un tocco sul cuore + Cancella la cronologia in qualsiasi momento + 24 film selezionati in totale Lanciando i dadi... Trovare il tuo film casuale Rilancia diff --git a/composeApp/src/commonMain/composeResources/values-ja/strings.xml b/composeApp/src/commonMain/composeResources/values-ja/strings.xml index 7bde56d..5039793 100644 --- a/composeApp/src/commonMain/composeResources/values-ja/strings.xml +++ b/composeApp/src/commonMain/composeResources/values-ja/strings.xml @@ -62,12 +62,18 @@ TVムービー 戦争 西部劇 - 新機能! + 新機能! ジャンルフィルター 気分に合ったジャンルに絞ってランダムな映画を選べます。複数のジャンルを組み合わせて理想の映画を見つけよう。 一度に1つ以上のジャンルでフィルタリング ワンタップでいつでもフィルターをリセット シングルユーザーとマルチユーザーモードの両方で動作 + あなたの履歴 + 選んだ作品は自動的に履歴に保存されます + すべてのランダムな選択が自動的に保存されます + ハートをタップしてお気に入りをマーク + いつでも履歴をクリアできます + 合計24作品を選択済み サイコロを振っています... ランダム映画を探しています もう一度振る diff --git a/composeApp/src/commonMain/composeResources/values-pt/strings.xml b/composeApp/src/commonMain/composeResources/values-pt/strings.xml index a984051..2f81bf4 100644 --- a/composeApp/src/commonMain/composeResources/values-pt/strings.xml +++ b/composeApp/src/commonMain/composeResources/values-pt/strings.xml @@ -62,12 +62,18 @@ Telefilme Guerra Faroeste - NOVO! + NOVO! Filtros por gênero Restrinja sua escolha aleatória aos gêneros que mais lhe apetecem. Combine vários gêneros para encontrar o filme perfeito. Filtre por um ou mais gêneros de uma vez Redefina os filtros a qualquer momento com um toque Funciona nos modos de usuário único e multiusuário + Seu histórico + Suas seleções são salvas automaticamente no seu histórico + Cada seleção aleatória é salva automaticamente + Marque favoritos com um toque no coração + Limpe seu histórico quando quiser + 24 filmes selecionados no total Lançando os dados... Encontrando seu filme aleatório Rolar novamente diff --git a/composeApp/src/commonMain/composeResources/values-ru/strings.xml b/composeApp/src/commonMain/composeResources/values-ru/strings.xml index 8609be1..3563da6 100644 --- a/composeApp/src/commonMain/composeResources/values-ru/strings.xml +++ b/composeApp/src/commonMain/composeResources/values-ru/strings.xml @@ -62,12 +62,18 @@ ТВ-фильм Война Вестерн - НОВИНКА! + НОВИНКА! Фильтры по жанру Сузьте случайный выбор до жанров, которые вам нравятся. Комбинируйте несколько жанров, чтобы найти идеальный фильм. Фильтрация по одному или нескольким жанрам одновременно Сброс фильтров в любой момент одним нажатием Работает в режимах одного и нескольких пользователей + Ваша история + Ваши выборы автоматически сохраняются в истории + Каждый случайный выбор сохраняется автоматически + Отмечайте любимое касанием сердца + Очищайте историю в любое время + Всего выбрано 24 фильма Бросаем кубики... Ищем ваш случайный фильм Перебросить diff --git a/composeApp/src/commonMain/composeResources/values-zh/strings.xml b/composeApp/src/commonMain/composeResources/values-zh/strings.xml index 6f2efce..078ccaf 100644 --- a/composeApp/src/commonMain/composeResources/values-zh/strings.xml +++ b/composeApp/src/commonMain/composeResources/values-zh/strings.xml @@ -62,12 +62,18 @@ 电视电影 战争 西部 - 新功能! + 新功能! 类型筛选 将随机推荐范围缩小到您感兴趣的类型。组合多个类型，找到完美的电影。 同时按一个或多个类型筛选 随时一键重置筛选条件 适用于单用户和多用户模式 + 您的历史 + 您的选择会自动保存到历史记录中 + 每次随机选择都会自动保存 + 点击心形图标标记收藏 + 随时清除您的历史记录 + 共选择了 24 部电影 掷骰子中... 正在寻找您的随机电影 重新掷骰 diff --git a/composeApp/src/commonMain/composeResources/values/strings.xml b/composeApp/src/commonMain/composeResources/values/strings.xml index d8ee340..4a0178f 100644 --- a/composeApp/src/commonMain/composeResources/values/strings.xml +++ b/composeApp/src/commonMain/composeResources/values/strings.xml @@ -62,12 +62,18 @@ TV Movie War Western - NEW! + NEW! Genre Filters Narrow your random pick to the genres you\'re in the mood for. Mix multiple genres to find the perfect movie. Filter by one or more genres at once Reset filters anytime with one tap Works with single user and multi-user modes + Your History + Your picks are automatically saved to your history + Every random pick is saved automatically + Mark favorites with a heart tap + Clear your history anytime + 24 movies picked in total Rolling the dice... Finding your random movie Reroll diff --git a/composeApp/src/commonMain/kotlin/com/nacchofer31/randomboxd/onboarding/presentation/OnboardingScreen.kt b/composeApp/src/commonMain/kotlin/com/nacchofer31/randomboxd/onboarding/presentation/OnboardingScreen.kt index 55d269c..181ab13 100644 --- a/composeApp/src/commonMain/kotlin/com/nacchofer31/randomboxd/onboarding/presentation/OnboardingScreen.kt +++ b/composeApp/src/commonMain/kotlin/com/nacchofer31/randomboxd/onboarding/presentation/OnboardingScreen.kt @@ -36,6 +36,7 @@ import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.sp import com.nacchofer31.randomboxd.core.presentation.RandomBoxdColors import com.nacchofer31.randomboxd.onboarding.presentation.components.OnboardingGenreFiltersPage +import com.nacchofer31.randomboxd.onboarding.presentation.components.OnboardingHistoryPage import com.nacchofer31.randomboxd.onboarding.presentation.components.OnboardingMultiUserPage import com.nacchofer31.randomboxd.onboarding.presentation.components.OnboardingPageIndicator import com.nacchofer31.randomboxd.onboarding.presentation.components.OnboardingRandomSelectionPage @@ -49,7 +50,7 @@ import randomboxd.composeapp.generated.resources.onboarding_next import randomboxd.composeapp.generated.resources.onboarding_skip import randomboxd.composeapp.generated.resources.onboarding_start_exploring -private const val PAGE_COUNT = 5 +private const val PAGE_COUNT = 6 @Composable fun OnboardingScreen(onFinish: () -> Unit) { @@ -111,6 +112,7 @@ fun OnboardingScreen(onFinish: () -> Unit) { 2 -> OnboardingSearchTagsPage() 3 -> OnboardingMultiUserPage() 4 -> OnboardingGenreFiltersPage() + 5 -> OnboardingHistoryPage() } } } diff --git a/composeApp/src/commonMain/kotlin/com/nacchofer31/randomboxd/onboarding/presentation/components/OnboardingGenreFiltersPage.kt b/composeApp/src/commonMain/kotlin/com/nacchofer31/randomboxd/onboarding/presentation/components/OnboardingGenreFiltersPage.kt index d61cd9c..44964a0 100644 --- a/composeApp/src/commonMain/kotlin/com/nacchofer31/randomboxd/onboarding/presentation/components/OnboardingGenreFiltersPage.kt +++ b/composeApp/src/commonMain/kotlin/com/nacchofer31/randomboxd/onboarding/presentation/components/OnboardingGenreFiltersPage.kt @@ -40,7 +40,6 @@ import randomboxd.composeapp.generated.resources.Res import randomboxd.composeapp.generated.resources.onboarding_genre_feature1 import randomboxd.composeapp.generated.resources.onboarding_genre_feature2 import randomboxd.composeapp.generated.resources.onboarding_genre_feature3 -import randomboxd.composeapp.generated.resources.onboarding_genre_new_badge import randomboxd.composeapp.generated.resources.onboarding_genre_subtitle import randomboxd.composeapp.generated.resources.onboarding_genre_title @@ -84,33 +83,13 @@ internal fun OnboardingGenreFiltersPage() { horizontalAlignment = Alignment.CenterHorizontally, verticalArrangement = Arrangement.spacedBy(12.dp), ) { - Row( - verticalAlignment = Alignment.CenterVertically, - horizontalArrangement = Arrangement.spacedBy(10.dp), - ) { - Box( - modifier = - Modifier - .clip(RoundedCornerShape(8.dp)) - .background(RandomBoxdColors.GreenAccent) - .padding(horizontal = 10.dp, vertical = 5.dp), - ) { - Text( - text = stringResource(Res.string.onboarding_genre_new_badge), - color = RandomBoxdColors.BackgroundDarkColor, - fontSize = 13.sp, - fontWeight = FontWeight.ExtraBold, - letterSpacing = 1.sp, - ) - } - Text( - text = stringResource(Res.string.onboarding_genre_title), - color = Color.White, - fontSize = 28.sp, - fontWeight = FontWeight.Bold, - textAlign = TextAlign.Center, - ) - } + Text( + text = stringResource(Res.string.onboarding_genre_title), + color = Color.White, + fontSize = 28.sp, + fontWeight = FontWeight.Bold, + textAlign = TextAlign.Center, + ) Text( text = stringResource(Res.string.onboarding_genre_subtitle), color = RandomBoxdColors.BackgroundLightColor, diff --git a/composeApp/src/commonMain/kotlin/com/nacchofer31/randomboxd/onboarding/presentation/components/OnboardingHistoryPage.kt b/composeApp/src/commonMain/kotlin/com/nacchofer31/randomboxd/onboarding/presentation/components/OnboardingHistoryPage.kt new file mode 100644 index 0000000..de31cb4 --- /dev/null +++ b/composeApp/src/commonMain/kotlin/com/nacchofer31/randomboxd/onboarding/presentation/components/OnboardingHistoryPage.kt @@ -0,0 +1,243 @@ +package com.nacchofer31.randomboxd.onboarding.presentation.components + +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.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.shape.RoundedCornerShape +import androidx.compose.material.icons.Icons +import androidx.compose.material.icons.filled.Favorite +import androidx.compose.material.icons.filled.History +import androidx.compose.material.icons.filled.People +import androidx.compose.material3.Icon +import androidx.compose.material3.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.Brush +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 androidx.compose.ui.unit.sp +import com.nacchofer31.randomboxd.core.presentation.RandomBoxdColors +import org.jetbrains.compose.resources.stringResource +import randomboxd.composeapp.generated.resources.Res +import randomboxd.composeapp.generated.resources.onboarding_history_feature1 +import randomboxd.composeapp.generated.resources.onboarding_history_feature2 +import randomboxd.composeapp.generated.resources.onboarding_history_feature3 +import randomboxd.composeapp.generated.resources.onboarding_history_footer +import randomboxd.composeapp.generated.resources.onboarding_history_subtitle +import randomboxd.composeapp.generated.resources.onboarding_history_title +import randomboxd.composeapp.generated.resources.onboarding_new_badge + +private data class MockHistoryItem( + val title: String, + val meta: String, + val posterGradient: Pair, +) + +private val mockHistoryItems = + listOf( + MockHistoryItem("Inception", "2010 · Sci-Fi", Color(0xFF3B82F6) to Color(0xFF1E3A8A)), + MockHistoryItem("Spirited Away", "2001 · Animation", Color(0xFFF59E0B) to Color(0xFFB45309)), + MockHistoryItem("The Godfather", "1972 · Crime", Color(0xFF6B7280) to Color(0xFF1F2937)), + ) + +@Composable +internal fun OnboardingHistoryPage() { + Column( + horizontalAlignment = Alignment.CenterHorizontally, + verticalArrangement = Arrangement.spacedBy(24.dp), + ) { + Box( + modifier = + Modifier + .fillMaxWidth() + .clip(RoundedCornerShape(16.dp)) + .background(RandomBoxdColors.CardBackground) + .padding(16.dp), + ) { + Column(verticalArrangement = Arrangement.spacedBy(12.dp)) { + Row( + verticalAlignment = Alignment.CenterVertically, + horizontalArrangement = Arrangement.SpaceBetween, + modifier = Modifier.fillMaxWidth(), + ) { + Text( + text = "Your random picks", + color = Color.White, + fontSize = 14.sp, + fontWeight = FontWeight.SemiBold, + ) + Box( + modifier = + Modifier + .clip(RoundedCornerShape(8.dp)) + .background(RandomBoxdColors.GreenAccent) + .padding(horizontal = 8.dp, vertical = 3.dp), + ) { + Text( + text = "24", + color = RandomBoxdColors.BackgroundDarkColor, + fontSize = 12.sp, + fontWeight = FontWeight.ExtraBold, + ) + } + } + mockHistoryItems.forEach { item -> + MockHistoryRow(item) + } + Text( + text = stringResource(Res.string.onboarding_history_footer), + color = RandomBoxdColors.BackgroundLightColor, + fontSize = 12.sp, + ) + } + } + + // Title section + Column( + horizontalAlignment = Alignment.CenterHorizontally, + verticalArrangement = Arrangement.spacedBy(12.dp), + ) { + Row( + verticalAlignment = Alignment.CenterVertically, + horizontalArrangement = Arrangement.spacedBy(10.dp), + ) { + Box( + modifier = + Modifier + .clip(RoundedCornerShape(8.dp)) + .background(RandomBoxdColors.GreenAccent) + .padding(horizontal = 10.dp, vertical = 5.dp), + ) { + Text( + text = stringResource(Res.string.onboarding_new_badge), + color = RandomBoxdColors.BackgroundDarkColor, + fontSize = 13.sp, + fontWeight = FontWeight.ExtraBold, + letterSpacing = 1.sp, + ) + } + Text( + text = stringResource(Res.string.onboarding_history_title), + color = Color.White, + fontSize = 28.sp, + fontWeight = FontWeight.Bold, + textAlign = TextAlign.Center, + ) + } + Text( + text = stringResource(Res.string.onboarding_history_subtitle), + color = RandomBoxdColors.BackgroundLightColor, + fontSize = 15.sp, + lineHeight = 22.sp, + textAlign = TextAlign.Center, + modifier = Modifier.width(300.dp), + ) + } + } + + Spacer(Modifier.height(24.dp)) + + // Feature rows + Column( + verticalArrangement = Arrangement.spacedBy(12.dp), + ) { + OnboardingFeatureRow( + icon = { + Icon( + imageVector = Icons.Filled.History, + contentDescription = null, + modifier = Modifier.size(18.dp), + tint = RandomBoxdColors.GreenAccent, + ) + }, + text = stringResource(Res.string.onboarding_history_feature1), + iconBackgroundColor = TagGreenBg, + ) + OnboardingFeatureRow( + icon = { + Icon( + imageVector = Icons.Filled.People, + contentDescription = null, + modifier = Modifier.size(18.dp), + tint = RandomBoxdColors.GreenAccent, + ) + }, + text = stringResource(Res.string.onboarding_history_feature2), + iconBackgroundColor = TagGreenBg, + ) + OnboardingFeatureRow( + icon = { + Icon( + imageVector = Icons.Filled.Favorite, + contentDescription = null, + modifier = Modifier.size(18.dp), + tint = RandomBoxdColors.GreenAccent, + ) + }, + text = stringResource(Res.string.onboarding_history_feature3), + iconBackgroundColor = TagGreenBg, + ) + } +} + +@Composable +private fun MockHistoryRow(item: MockHistoryItem) { + Row( + verticalAlignment = Alignment.CenterVertically, + horizontalArrangement = Arrangement.spacedBy(12.dp), + modifier = Modifier.fillMaxWidth(), + ) { + Box( + modifier = + Modifier + .size(width = 60.dp, height = 84.dp) + .clip(RoundedCornerShape(8.dp)) + .background( + brush = + Brush.linearGradient( + colors = + listOf( + item.posterGradient.first, + item.posterGradient.second, + ), + ), + ), + ) + Column( + verticalArrangement = Arrangement.spacedBy(4.dp), + modifier = Modifier.weight(1f), + ) { + Text( + text = item.title, + color = Color.White, + fontSize = 14.sp, + fontWeight = FontWeight.SemiBold, + maxLines = 1, + ) + Text( + text = item.meta, + color = RandomBoxdColors.BackgroundLightColor, + fontSize = 12.sp, + maxLines = 1, + ) + } + Icon( + imageVector = Icons.Filled.Favorite, + contentDescription = null, + modifier = Modifier.size(18.dp), + tint = RandomBoxdColors.GreenAccent, + ) + } +} diff --git a/composeApp/src/commonMain/kotlin/com/nacchofer31/randomboxd/random_film/presentation/components/RandomFilmInfoView.kt b/composeApp/src/commonMain/kotlin/com/nacchofer31/randomboxd/random_film/presentation/components/RandomFilmInfoView.kt index 1ac5509..cd8b42a 100644 --- a/composeApp/src/commonMain/kotlin/com/nacchofer31/randomboxd/random_film/presentation/components/RandomFilmInfoView.kt +++ b/composeApp/src/commonMain/kotlin/com/nacchofer31/randomboxd/random_film/presentation/components/RandomFilmInfoView.kt @@ -32,7 +32,7 @@ import org.jetbrains.compose.resources.painterResource import org.jetbrains.compose.resources.stringResource import randomboxd.composeapp.generated.resources.Res import randomboxd.composeapp.generated.resources.enter_description -import randomboxd.composeapp.generated.resources.onboarding_genre_new_badge +import randomboxd.composeapp.generated.resources.onboarding_new_badge import randomboxd.composeapp.generated.resources.ready_to_spin import randomboxd.composeapp.generated.resources.roulette_icon import randomboxd.composeapp.generated.resources.tip_genre_filter @@ -124,7 +124,7 @@ fun RandomFilmInfoView() { accentColor = RandomBoxdColors.OrangeAccent, ) NewFeatureTipCard( - newBadge = stringResource(Res.string.onboarding_genre_new_badge), + newBadge = stringResource(Res.string.onboarding_new_badge), text = stringResource(Res.string.tip_genre_filter), ) } diff --git a/randomboxd.pen b/randomboxd.pen index be039cf..ca57c78 100644 --- a/randomboxd.pen +++ b/randomboxd.pen @@ -1,5 +1,5 @@ { - "version": "2.14", + "version": "2.17", "children": [ { "type": "frame", @@ -5221,6 +5221,14 @@ "fill": "$accent-green", "width": 10, "height": 10 + }, + { + "type": "ellipse", + "id": "b1xHLE", + "name": "dot5Inactive5", + "fill": "$text-muted", + "width": 8, + "height": 8 } ] }, @@ -5240,7 +5248,7 @@ "type": "text", "id": "vubLL", "fill": "#14181C", - "content": "Start Exploring", + "content": "Next", "fontFamily": "$font-primary", "fontSize": 17, "fontWeight": "700" @@ -5250,6 +5258,1899 @@ "id": "kqO5K", "width": 20, "height": 20, + "icon": "arrow-right", + "library": "lucide", + "fill": "#14181C" + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "H4rRi", + "x": 3410, + "y": 0, + "name": "History - Film History", + "clip": true, + "width": 390, + "height": 844, + "fill": "$bg-primary", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "GolTR", + "name": "statusBar", + "width": "fill_container", + "height": 44, + "padding": [ + 12, + 24 + ], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "r1pO6a", + "name": "statusTime", + "fill": "$text-primary", + "content": "9:41", + "fontFamily": "Inter", + "fontSize": 15, + "fontWeight": "600" + }, + { + "type": "frame", + "id": "UXo66", + "name": "statusIcons", + "gap": 6, + "alignItems": "center", + "children": [ + { + "type": "icon", + "id": "d1DmeM", + "name": "signalIcon", + "width": 16, + "height": 16, + "icon": "signal", + "library": "lucide", + "fill": "$text-primary" + }, + { + "type": "icon", + "id": "IMbsy", + "name": "wifiIcon", + "width": 16, + "height": 16, + "icon": "wifi", + "library": "lucide", + "fill": "$text-primary" + }, + { + "type": "icon", + "id": "E9raAZ", + "name": "batteryIcon", + "width": 20, + "height": 16, + "icon": "battery-full", + "library": "lucide", + "fill": "$text-primary" + } + ] + } + ] + }, + { + "type": "frame", + "id": "lbyqn", + "name": "historyHeader", + "width": "fill_container", + "height": 56, + "padding": [ + 0, + 20 + ], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "L3UMyu", + "name": "headerLeft", + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "ZLcH9", + "name": "backBtn", + "width": 36, + "height": 36, + "fill": "$bg-card", + "cornerRadius": 18, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon", + "id": "XUrNf", + "name": "backIcon", + "width": 18, + "height": 18, + "icon": "arrow-left", + "library": "lucide", + "fill": "$text-primary" + } + ] + }, + { + "type": "frame", + "id": "b7fDGX", + "name": "titleGroup", + "layout": "vertical", + "gap": 1, + "children": [ + { + "type": "text", + "id": "Z2QjK", + "name": "historyTitle", + "fill": "$text-primary", + "content": "History", + "fontFamily": "$font-primary", + "fontSize": 20, + "fontWeight": "700" + }, + { + "type": "text", + "id": "h2u1F4", + "name": "historySubtitle", + "fill": "$text-muted", + "content": "Your random picks", + "fontFamily": "$font-secondary", + "fontSize": 11, + "fontWeight": "normal" + } + ] + } + ] + }, + { + "type": "frame", + "id": "N6aot", + "name": "clearHistoryBtn", + "width": 36, + "height": 36, + "fill": "$bg-card", + "cornerRadius": 18, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon", + "id": "P6aapS", + "name": "clearIcon", + "width": 16, + "height": 16, + "icon": "trash-2", + "library": "lucide", + "fill": "$text-secondary" + } + ] + } + ] + }, + { + "type": "frame", + "id": "uSOmz", + "name": "historyMain", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", + "gap": 12, + "padding": [ + 16, + 20, + 20, + 20 + ], + "children": [ + { + "type": "frame", + "id": "d2nlhC", + "name": "historyList", + "width": "fill_container", + "layout": "vertical", + "gap": 12, + "children": [ + { + "type": "frame", + "id": "dgf4z", + "name": "histCard1", + "width": "fill_container", + "fill": "$bg-card", + "cornerRadius": 16, + "gap": 12, + "padding": 12, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "T432s", + "name": "histPoster1", + "width": 60, + "height": 84, + "fill": { + "type": "gradient", + "gradientType": "linear", + "enabled": true, + "rotation": 180, + "size": { + "height": 1 + }, + "colors": [ + { + "color": "#FF8000", + "position": 0 + }, + { + "color": "#14181C", + "position": 1 + } + ] + }, + "cornerRadius": 8, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon", + "id": "W7AOQn", + "name": "histPosterIcon1", + "width": 22, + "height": 22, + "icon": "film", + "library": "lucide", + "fill": "#FFFFFF40" + } + ] + }, + { + "type": "frame", + "id": "Gsi6b", + "name": "histInfo1", + "width": "fill_container", + "layout": "vertical", + "gap": 6, + "children": [ + { + "type": "text", + "id": "Z1fRo2", + "name": "histTitle1", + "fill": "$text-primary", + "textGrowth": "fixed-width", + "width": "fill_container", + "content": "Ghostwatch", + "fontFamily": "$font-primary", + "fontSize": 15, + "fontWeight": "700" + }, + { + "type": "text", + "id": "eTyd2", + "name": "histMeta1", + "fill": "$text-muted", + "textGrowth": "fixed-width", + "width": "fill_container", + "content": "1992 · Today · 21:34", + "fontFamily": "$font-secondary", + "fontSize": 11, + "fontWeight": "normal" + }, + { + "type": "frame", + "id": "m7LYz", + "name": "histUsers1", + "gap": 4, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "gq5MC", + "name": "histUser1_1", + "height": 22, + "fill": "#000000", + "cornerRadius": 11, + "gap": 4, + "padding": [ + 0, + 8 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "oj83K", + "name": "histUserText1_1", + "fill": "#FFFFFF", + "content": "nacchofer31", + "fontFamily": "$font-secondary", + "fontSize": 10, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "frame", + "id": "E70aZ", + "name": "histGenres1", + "gap": 4, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "QVB5k", + "name": "histGenre1_1", + "height": 22, + "fill": "$tag-green", + "cornerRadius": 11, + "padding": [ + 0, + 8 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "TmN0t", + "name": "histGenreText1_1", + "fill": "$accent-green", + "content": "Horror", + "fontFamily": "$font-secondary", + "fontSize": 10, + "fontWeight": "500" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "j84n0i", + "name": "histFav1", + "width": 36, + "height": 36, + "fill": "$tag-green", + "cornerRadius": 18, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon", + "id": "lH1qH", + "name": "histFavIcon1", + "width": 16, + "height": 16, + "icon": "heart", + "library": "lucide", + "fill": "$accent-green" + } + ] + } + ] + }, + { + "type": "frame", + "id": "kGlKb", + "name": "histCard2", + "width": "fill_container", + "fill": "$bg-card", + "cornerRadius": 16, + "gap": 12, + "padding": 12, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "B1BqFF", + "name": "histPoster2", + "width": 60, + "height": 84, + "fill": { + "type": "gradient", + "gradientType": "linear", + "enabled": true, + "rotation": 180, + "size": { + "height": 1 + }, + "colors": [ + { + "color": "#40BCF4", + "position": 0 + }, + { + "color": "#14181C", + "position": 1 + } + ] + }, + "cornerRadius": 8, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon", + "id": "f5uyRd", + "name": "histPosterIcon2", + "width": 22, + "height": 22, + "icon": "film", + "library": "lucide", + "fill": "#FFFFFF40" + } + ] + }, + { + "type": "frame", + "id": "cashe", + "name": "histInfo2", + "width": "fill_container", + "layout": "vertical", + "gap": 6, + "children": [ + { + "type": "text", + "id": "KmeXG", + "name": "histTitle2", + "fill": "$text-primary", + "textGrowth": "fixed-width", + "width": "fill_container", + "content": "Past Lives", + "fontFamily": "$font-primary", + "fontSize": 15, + "fontWeight": "700" + }, + { + "type": "text", + "id": "LSxOI", + "name": "histMeta2", + "fill": "$text-muted", + "textGrowth": "fixed-width", + "width": "fill_container", + "content": "2023 · Today · 20:12", + "fontFamily": "$font-secondary", + "fontSize": 11, + "fontWeight": "normal" + }, + { + "type": "frame", + "id": "eN5T8", + "name": "histUsers2", + "gap": 4, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "OeI5o", + "name": "histUser2_1", + "height": 22, + "fill": "$accent-green", + "cornerRadius": 11, + "gap": 4, + "padding": [ + 0, + 8 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "AVnIa", + "name": "histUserText2_1", + "fill": "#14181C", + "content": "nacchofer31", + "fontFamily": "$font-secondary", + "fontSize": 10, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "uD9te", + "name": "histUser2_2", + "height": 22, + "fill": "$accent-green", + "cornerRadius": 11, + "gap": 4, + "padding": [ + 0, + 8 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "UZmac", + "name": "histUserText2_2", + "fill": "#14181C", + "content": "shoegazer94", + "fontFamily": "$font-secondary", + "fontSize": 10, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "frame", + "id": "iTb25", + "name": "histGenres2", + "gap": 4, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "W16LFB", + "name": "histGenre2_1", + "height": 22, + "fill": "$tag-green", + "cornerRadius": 11, + "padding": [ + 0, + 8 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "dCYf6", + "name": "histGenreText2_1", + "fill": "$accent-green", + "content": "Drama", + "fontFamily": "$font-secondary", + "fontSize": 10, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "R37tl", + "name": "histGenre2_2", + "height": 22, + "fill": "$tag-green", + "cornerRadius": 11, + "padding": [ + 0, + 8 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "FpH7Y", + "name": "histGenreText2_2", + "fill": "$accent-green", + "content": "Romance", + "fontFamily": "$font-secondary", + "fontSize": 10, + "fontWeight": "500" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "AJ09U", + "name": "histFav2", + "width": 36, + "height": 36, + "fill": "$bg-elevated", + "cornerRadius": 18, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon", + "id": "GzD2v", + "name": "histFavIcon2", + "width": 16, + "height": 16, + "icon": "heart", + "library": "lucide", + "fill": "$text-muted" + } + ] + } + ] + }, + { + "type": "frame", + "id": "wHXWI", + "name": "histCard3", + "width": "fill_container", + "fill": "$bg-card", + "cornerRadius": 16, + "gap": 12, + "padding": 12, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "LOl8x", + "name": "histPoster3", + "width": 60, + "height": 84, + "fill": { + "type": "gradient", + "gradientType": "linear", + "enabled": true, + "rotation": 180, + "size": { + "height": 1 + }, + "colors": [ + { + "color": "#00E054", + "position": 0 + }, + { + "color": "#14181C", + "position": 1 + } + ] + }, + "cornerRadius": 8, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon", + "id": "XGqKC", + "name": "histPosterIcon3", + "width": 22, + "height": 22, + "icon": "film", + "library": "lucide", + "fill": "#FFFFFF40" + } + ] + }, + { + "type": "frame", + "id": "LQWmw", + "name": "histInfo3", + "width": "fill_container", + "layout": "vertical", + "gap": 6, + "children": [ + { + "type": "text", + "id": "iaQg9", + "name": "histTitle3", + "fill": "$text-primary", + "textGrowth": "fixed-width", + "width": "fill_container", + "content": "La La Land", + "fontFamily": "$font-primary", + "fontSize": 15, + "fontWeight": "700" + }, + { + "type": "text", + "id": "Vpe4Z", + "name": "histMeta3", + "fill": "$text-muted", + "textGrowth": "fixed-width", + "width": "fill_container", + "content": "2016 · Yesterday · 22:48", + "fontFamily": "$font-secondary", + "fontSize": 11, + "fontWeight": "normal" + }, + { + "type": "frame", + "id": "Nol4m", + "name": "histUsers3", + "gap": 4, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "jv76Q", + "name": "histUser3_1", + "height": 22, + "fill": "#000000", + "cornerRadius": 11, + "gap": 4, + "padding": [ + 0, + 8 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "t8SRI7", + "name": "histUserText3_1", + "fill": "#FFFFFF", + "content": "shoegazer94", + "fontFamily": "$font-secondary", + "fontSize": 10, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "frame", + "id": "K6eNGL", + "name": "histGenres3", + "gap": 4, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "pJACm", + "name": "histGenre3_1", + "height": 22, + "fill": "$bg-elevated", + "cornerRadius": 11, + "padding": [ + 0, + 8 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "fT3tr", + "name": "histGenreText3_1", + "fill": "$text-muted", + "content": "Any genre", + "fontFamily": "$font-secondary", + "fontSize": 10, + "fontWeight": "500" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "Mbf3j", + "name": "histFav3", + "width": 36, + "height": 36, + "fill": "$bg-elevated", + "cornerRadius": 18, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon", + "id": "qic13", + "name": "histFavIcon3", + "width": 16, + "height": 16, + "icon": "heart", + "library": "lucide", + "fill": "$text-muted" + } + ] + } + ] + }, + { + "type": "frame", + "id": "f0T6F", + "name": "histCard4", + "width": "fill_container", + "fill": "$bg-card", + "cornerRadius": 16, + "gap": 12, + "padding": 12, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "RwmLw", + "name": "histPoster4", + "width": 60, + "height": 84, + "fill": { + "type": "gradient", + "gradientType": "linear", + "enabled": true, + "rotation": 180, + "size": { + "height": 1 + }, + "colors": [ + { + "color": "#A24BD6", + "position": 0 + }, + { + "color": "#14181C", + "position": 1 + } + ] + }, + "cornerRadius": 8, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon", + "id": "rzWAI", + "name": "histPosterIcon4", + "width": 22, + "height": 22, + "icon": "film", + "library": "lucide", + "fill": "#FFFFFF40" + } + ] + }, + { + "type": "frame", + "id": "Yhi7F", + "name": "histInfo4", + "width": "fill_container", + "layout": "vertical", + "gap": 6, + "children": [ + { + "type": "text", + "id": "GlCjX", + "name": "histTitle4", + "fill": "$text-primary", + "textGrowth": "fixed-width", + "width": "fill_container", + "content": "The Big Lebowski", + "fontFamily": "$font-primary", + "fontSize": 15, + "fontWeight": "700" + }, + { + "type": "text", + "id": "s0Bos7", + "name": "histMeta4", + "fill": "$text-muted", + "textGrowth": "fixed-width", + "width": "fill_container", + "content": "1998 · Yesterday · 19:05", + "fontFamily": "$font-secondary", + "fontSize": 11, + "fontWeight": "normal" + }, + { + "type": "frame", + "id": "wIKNm", + "name": "histUsers4", + "gap": 4, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "VgWEl", + "name": "histUser4_1", + "height": 22, + "fill": "$accent-orange", + "cornerRadius": 11, + "gap": 4, + "padding": [ + 0, + 8 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "GSAsJ", + "name": "histUserText4_1", + "fill": "#14181C", + "content": "nacchofer31", + "fontFamily": "$font-secondary", + "fontSize": 10, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "xh2QT", + "name": "histUser4_2", + "height": 22, + "fill": "$accent-orange", + "cornerRadius": 11, + "gap": 4, + "padding": [ + 0, + 8 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "M5Rvk", + "name": "histUserText4_2", + "fill": "#14181C", + "content": "shoegazer94", + "fontFamily": "$font-secondary", + "fontSize": 10, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "frame", + "id": "we7Xz", + "name": "histGenres4", + "gap": 4, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "aNs27", + "name": "histGenre4_1", + "height": 22, + "fill": "$tag-green", + "cornerRadius": 11, + "padding": [ + 0, + 8 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "msFvf", + "name": "histGenreText4_1", + "fill": "$accent-green", + "content": "Comedy", + "fontFamily": "$font-secondary", + "fontSize": 10, + "fontWeight": "500" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "rOU1P", + "name": "histFav4", + "width": 36, + "height": 36, + "fill": "$tag-green", + "cornerRadius": 18, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon", + "id": "eWtXC", + "name": "histFavIcon4", + "width": 16, + "height": 16, + "icon": "heart", + "library": "lucide", + "fill": "$accent-green" + } + ] + } + ] + }, + { + "type": "frame", + "id": "wDK7P", + "name": "histCard5", + "width": "fill_container", + "fill": "$bg-card", + "cornerRadius": 16, + "gap": 12, + "padding": 12, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "jlTiw", + "name": "histPoster5", + "width": 60, + "height": 84, + "fill": { + "type": "gradient", + "gradientType": "linear", + "enabled": true, + "rotation": 180, + "size": { + "height": 1 + }, + "colors": [ + { + "color": "#FF8000", + "position": 0 + }, + { + "color": "#14181C", + "position": 1 + } + ] + }, + "cornerRadius": 8, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon", + "id": "C67TiK", + "name": "histPosterIcon5", + "width": 22, + "height": 22, + "icon": "film", + "library": "lucide", + "fill": "#FFFFFF40" + } + ] + }, + { + "type": "frame", + "id": "LHnqY", + "name": "histInfo5", + "width": "fill_container", + "layout": "vertical", + "gap": 6, + "children": [ + { + "type": "text", + "id": "G3Nc6", + "name": "histTitle5", + "fill": "$text-primary", + "textGrowth": "fixed-width", + "width": "fill_container", + "content": "Blade Runner 2049", + "fontFamily": "$font-primary", + "fontSize": 15, + "fontWeight": "700" + }, + { + "type": "text", + "id": "NxqjB", + "name": "histMeta5", + "fill": "$text-muted", + "textGrowth": "fixed-width", + "width": "fill_container", + "content": "2017 · Mon · 21:20", + "fontFamily": "$font-secondary", + "fontSize": 11, + "fontWeight": "normal" + }, + { + "type": "frame", + "id": "GK8UN", + "name": "histUsers5", + "gap": 4, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "jnXC0", + "name": "histUser5_1", + "height": 22, + "fill": "#000000", + "cornerRadius": 11, + "gap": 4, + "padding": [ + 0, + 8 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "ce77Y", + "name": "histUserText5_1", + "fill": "#FFFFFF", + "content": "nacchofer31", + "fontFamily": "$font-secondary", + "fontSize": 10, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "frame", + "id": "oxoAN", + "name": "histGenres5", + "gap": 4, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "sJWvK", + "name": "histGenre5_1", + "height": 22, + "fill": "$tag-green", + "cornerRadius": 11, + "padding": [ + 0, + 8 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "SAWjf", + "name": "histGenreText5_1", + "fill": "$accent-green", + "content": "Sci-Fi", + "fontFamily": "$font-secondary", + "fontSize": 10, + "fontWeight": "500" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "QW2Oh", + "name": "histFav5", + "width": 36, + "height": 36, + "fill": "$bg-elevated", + "cornerRadius": 18, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon", + "id": "UJih3", + "name": "histFavIcon5", + "width": 16, + "height": 16, + "icon": "heart", + "library": "lucide", + "fill": "$text-muted" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "rHxIH", + "name": "historyFooter", + "width": "fill_container", + "padding": [ + 4, + 0, + 0, + 0 + ], + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "OwkiY", + "name": "historyFooterText", + "fill": "$text-muted", + "content": "24 movies picked in total", + "fontFamily": "$font-secondary", + "fontSize": 11, + "fontWeight": "500" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "oS0JX", + "x": 454, + "y": 900, + "name": "Onboarding - History", + "clip": true, + "width": 390, + "height": 844, + "fill": "$bg-primary", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "MFjST", + "name": "contentWrapper6", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", + "padding": [ + 60, + 32, + 40, + 32 + ], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "yGu27", + "name": "topSection6", + "width": "fill_container", + "layout": "vertical", + "gap": 28, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "CGkuj", + "name": "historyMockup", + "width": "fill_container", + "fill": "$bg-card", + "cornerRadius": 20, + "layout": "vertical", + "gap": 10, + "padding": 16, + "children": [ + { + "type": "frame", + "id": "yPV28", + "name": "mockupHeader", + "width": "fill_container", + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "jfBT3", + "name": "mockupTitle", + "fill": "$text-primary", + "content": "Your random picks", + "fontFamily": "$font-primary", + "fontSize": 14, + "fontWeight": "700" + }, + { + "type": "frame", + "id": "Wtpc1", + "name": "countBadge", + "width": 22, + "height": 22, + "fill": "$accent-green", + "cornerRadius": 11, + "layout": "vertical", + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "Ir1xb", + "name": "countText", + "fill": "#14181C", + "content": "24", + "fontFamily": "Inter", + "fontSize": 10, + "fontWeight": "700" + } + ] + } + ] + }, + { + "type": "frame", + "id": "t3U7gB", + "name": "histCard Ghostwatch", + "width": "fill_container", + "fill": "$bg-elevated", + "cornerRadius": 12, + "gap": 10, + "padding": 10, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "fwSu2", + "name": "poster", + "width": 32, + "height": 44, + "fill": { + "type": "gradient", + "gradientType": "linear", + "enabled": true, + "rotation": 180, + "size": { + "height": 1 + }, + "colors": [ + { + "color": "#FF8000", + "position": 0 + }, + { + "color": "#14181C", + "position": 1 + } + ] + }, + "cornerRadius": 6, + "layout": "vertical", + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon", + "id": "SptAp", + "name": "filmIcon", + "width": 14, + "height": 14, + "icon": "film", + "library": "lucide", + "fill": "#FFFFFF40" + } + ] + }, + { + "type": "frame", + "id": "XRHzq", + "name": "info", + "width": "fill_container", + "layout": "vertical", + "gap": 3, + "children": [ + { + "type": "text", + "id": "ePaVw", + "name": "title", + "fill": "$text-primary", + "content": "Ghostwatch", + "fontFamily": "$font-primary", + "fontSize": 12, + "fontWeight": "600" + }, + { + "type": "text", + "id": "rikNR", + "name": "meta", + "fill": "$text-muted", + "content": "1992 · Today · 21:34", + "fontFamily": "$font-secondary", + "fontSize": 10, + "fontWeight": "normal" + } + ] + }, + { + "type": "icon", + "id": "DTTjs", + "name": "favIcon", + "width": 14, + "height": 14, + "icon": "heart", + "library": "lucide", + "fill": "$accent-green" + } + ] + }, + { + "type": "frame", + "id": "XLDoF", + "name": "histCard Past Lives", + "width": "fill_container", + "fill": "$bg-elevated", + "cornerRadius": 12, + "gap": 10, + "padding": 10, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "yWEcV", + "name": "poster", + "width": 32, + "height": 44, + "fill": { + "type": "gradient", + "gradientType": "linear", + "enabled": true, + "rotation": 180, + "size": { + "height": 1 + }, + "colors": [ + { + "color": "#40BCF4", + "position": 0 + }, + { + "color": "#14181C", + "position": 1 + } + ] + }, + "cornerRadius": 6, + "layout": "vertical", + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon", + "id": "j5ST3o", + "name": "filmIcon", + "width": 14, + "height": 14, + "icon": "film", + "library": "lucide", + "fill": "#FFFFFF40" + } + ] + }, + { + "type": "frame", + "id": "hCQjN", + "name": "info", + "width": "fill_container", + "layout": "vertical", + "gap": 3, + "children": [ + { + "type": "text", + "id": "RPEXb", + "name": "title", + "fill": "$text-primary", + "content": "Past Lives", + "fontFamily": "$font-primary", + "fontSize": 12, + "fontWeight": "600" + }, + { + "type": "text", + "id": "V95aUj", + "name": "meta", + "fill": "$text-muted", + "content": "2023 · Today · 20:12", + "fontFamily": "$font-secondary", + "fontSize": 10, + "fontWeight": "normal" + } + ] + }, + { + "type": "icon", + "id": "K4dBW", + "name": "favIcon", + "width": 14, + "height": 14, + "icon": "heart", + "library": "lucide", + "fill": "$text-muted" + } + ] + }, + { + "type": "frame", + "id": "bwaii", + "name": "histCard La La Land", + "width": "fill_container", + "fill": "$bg-elevated", + "cornerRadius": 12, + "gap": 10, + "padding": 10, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "bAAEJ", + "name": "poster", + "width": 32, + "height": 44, + "fill": { + "type": "gradient", + "gradientType": "linear", + "enabled": true, + "rotation": 180, + "size": { + "height": 1 + }, + "colors": [ + { + "color": "#00E054", + "position": 0 + }, + { + "color": "#14181C", + "position": 1 + } + ] + }, + "cornerRadius": 6, + "layout": "vertical", + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon", + "id": "q4VUJV", + "name": "filmIcon", + "width": 14, + "height": 14, + "icon": "film", + "library": "lucide", + "fill": "#FFFFFF40" + } + ] + }, + { + "type": "frame", + "id": "v5CdTg", + "name": "info", + "width": "fill_container", + "layout": "vertical", + "gap": 3, + "children": [ + { + "type": "text", + "id": "kf0Wz", + "name": "title", + "fill": "$text-primary", + "content": "La La Land", + "fontFamily": "$font-primary", + "fontSize": 12, + "fontWeight": "600" + }, + { + "type": "text", + "id": "xAlEX", + "name": "meta", + "fill": "$text-muted", + "content": "2016 · Yesterday · 22:48", + "fontFamily": "$font-secondary", + "fontSize": 10, + "fontWeight": "normal" + } + ] + }, + { + "type": "icon", + "id": "Yzc49", + "name": "favIcon", + "width": 14, + "height": 14, + "icon": "heart", + "library": "lucide", + "fill": "$text-muted" + } + ] + }, + { + "type": "text", + "id": "UWTHk", + "name": "mockupFooter", + "fill": "$text-muted", + "textGrowth": "fixed-width", + "width": "fill_container", + "content": "24 movies picked in total", + "textAlign": "center", + "fontFamily": "$font-secondary", + "fontSize": 10, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "BMqaK", + "name": "titleSection6", + "width": "fill_container", + "layout": "vertical", + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "yIxjB", + "name": "screen5Title", + "fill": "$text-primary", + "content": "Your History", + "textAlign": "center", + "fontFamily": "$font-primary", + "fontSize": 28, + "fontWeight": "700" + }, + { + "type": "text", + "id": "WCSOm", + "name": "screen5Subtitle", + "fill": "$text-secondary", + "textGrowth": "fixed-width", + "width": 300, + "content": "Every random pick is saved automatically. Revisit titles, see who picked them, and keep your favorites close.", + "lineHeight": 1.5, + "textAlign": "center", + "fontFamily": "$font-secondary", + "fontSize": 15, + "fontWeight": "normal" + } + ] + } + ] + }, + { + "type": "frame", + "id": "F9lKg", + "name": "middleSection6", + "width": "fill_container", + "layout": "vertical", + "gap": 10, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "VCEAg", + "name": "featureRow6", + "width": "fill_container", + "fill": "$bg-card", + "cornerRadius": 12, + "gap": 12, + "padding": [ + 12, + 16 + ], + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "ZaR2T", + "width": 36, + "height": 36, + "fill": "$tag-green", + "cornerRadius": 8, + "layout": "vertical", + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon", + "id": "zdQ9X", + "width": 18, + "height": 18, + "icon": "history", + "library": "lucide", + "fill": "$accent-green" + } + ] + }, + { + "type": "text", + "id": "oo2NU", + "fill": "$text-primary", + "content": "Every pick is saved automatically", + "fontFamily": "$font-secondary", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "Ln6he", + "name": "featureRow6", + "width": "fill_container", + "fill": "$bg-card", + "cornerRadius": 12, + "gap": 12, + "padding": [ + 12, + 16 + ], + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "TDWi9", + "width": 36, + "height": 36, + "fill": "$tag-orange", + "cornerRadius": 8, + "layout": "vertical", + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon", + "id": "u2jgfy", + "width": 18, + "height": 18, + "icon": "users", + "library": "lucide", + "fill": "$accent-orange" + } + ] + }, + { + "type": "text", + "id": "z8uWSW", + "fill": "$text-primary", + "content": "See who picked each movie", + "fontFamily": "$font-secondary", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "hesjE", + "name": "featureRow6", + "width": "fill_container", + "fill": "$bg-card", + "cornerRadius": 12, + "gap": 12, + "padding": [ + 12, + 16 + ], + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "GHgNf", + "width": 36, + "height": 36, + "fill": "$tag-green", + "cornerRadius": 8, + "layout": "vertical", + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon", + "id": "AR5cs", + "width": 18, + "height": 18, + "icon": "heart", + "library": "lucide", + "fill": "$accent-green" + } + ] + }, + { + "type": "text", + "id": "feid4", + "fill": "$text-primary", + "content": "Favorite picks and clear anytime", + "fontFamily": "$font-secondary", + "fontSize": 14, + "fontWeight": "500" + } + ] + } + ] + }, + { + "type": "frame", + "id": "Sv4SI", + "name": "bottomSection6", + "width": "fill_container", + "layout": "vertical", + "gap": 16, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "v1GX0A", + "name": "pageIndicator6", + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "ellipse", + "id": "cpANK", + "name": "dot6Inactive1", + "fill": "$text-muted", + "width": 8, + "height": 8 + }, + { + "type": "ellipse", + "id": "tlOiu", + "name": "dot6Inactive2", + "fill": "$text-muted", + "width": 8, + "height": 8 + }, + { + "type": "ellipse", + "id": "fvOiP", + "name": "dot6Inactive3", + "fill": "$text-muted", + "width": 8, + "height": 8 + }, + { + "type": "ellipse", + "id": "Kxhyc", + "name": "dot6Inactive4", + "fill": "$text-muted", + "width": 8, + "height": 8 + }, + { + "type": "ellipse", + "id": "G7re3E", + "name": "dot6Inactive5", + "fill": "$text-muted", + "width": 8, + "height": 8 + }, + { + "type": "ellipse", + "id": "P9xZPd", + "name": "dot6Active", + "fill": "$accent-green", + "width": 10, + "height": 10 + } + ] + }, + { + "type": "frame", + "id": "umyHt", + "name": "finishBtn6", + "width": "fill_container", + "height": 56, + "fill": "$accent-green", + "cornerRadius": 16, + "gap": 8, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "L2VQNO", + "fill": "#14181C", + "content": "Start Exploring", + "fontFamily": "$font-primary", + "fontSize": 17, + "fontWeight": "700" + }, + { + "type": "icon", + "id": "SzKQo", + "width": 20, + "height": 20, "icon": "sparkles", "library": "lucide", "fill": "#14181C"