FaintCoffeeNotesCard

FaintCoffeeNotesCard.kt

MIT LICENSE Copy

import androidx.compose.foundation.Canvas
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
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.ui.Modifier
import androidx.compose.ui.draw.drawBehind
import androidx.compose.ui.draw.shadow
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.geometry.Size
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.Path
import androidx.compose.ui.graphics.PathEffect
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontFamily
import androidx.compose.ui.text.font.FontStyle
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.em
import androidx.compose.ui.unit.sp
import com.composeunstyled.CrossAxisAlignment
import com.composeunstyled.Indicator
import com.composeunstyled.MainAxisArrangement
import com.composeunstyled.Stack
import com.composeunstyled.StackOrientation
import com.composeunstyled.Text
import com.composeunstyled.UnstyledHorizontalSeparator
import com.composeunstyled.UnstyledProgress
import com.composeunstyled.theme.buildTheme
import kotlin.math.PI
import kotlin.math.cos
import kotlin.math.sin

/*
 * Faint's tasting card, front face — a static demo for composables.com, built on Compose Unstyled
 * (`buildTheme`, `Text`, `Stack`, `UnstyledHorizontalSeparator`, `UnstyledProgress`) over Foundation.
 * One file, one hardcoded card, nothing shared with the app.
 */

private val Surface = Color(0xFFF4F1EC)
private val Ink = Color(0xFF141414)
private val Muted = Ink.copy(alpha = 0.55f)
private val Line = Ink.copy(alpha = 0.55f)
private val Accent = Color(0xFFB23A2A)

private val Label = TextStyle(fontFamily = FontFamily.Monospace, fontWeight = FontWeight.SemiBold, fontSize = 9.sp, letterSpacing = 0.14.em)
private val Display = TextStyle(fontWeight = FontWeight.ExtraBold, fontSize = 64.sp, lineHeight = 58.sp, letterSpacing = (-0.04).em)
private val Title = TextStyle(fontWeight = FontWeight.Bold, fontSize = 17.sp, letterSpacing = (-0.01).em)
private val Notes = TextStyle(fontStyle = FontStyle.Italic, fontSize = 10.5.sp, lineHeight = 14.sp)

private val TastingCardTheme =
    buildTheme {
        defaultContentColor = Ink
        defaultTextStyle = TextStyle(fontFamily = FontFamily.Default, fontSize = 13.sp)
    }

/** A 294×523 tasting card, front face. */
@androidx.compose.runtime.Composable
internal fun InternalFaintCoffeeNotesCard(modifier: Modifier = Modifier) =
    TastingCardTheme {
        val shadow = Color.Black.copy(alpha = 0.35f)
        Stack(
            modifier =
                modifier
                    .size(294.dp, 523.dp)
                    .shadow(18.dp, RoundedCornerShape(8.dp), ambientColor = shadow, spotColor = shadow)
                    .background(Surface)
                    .padding(18.dp),
            orientation = StackOrientation.Vertical
        ) {
            // Header: the date over an accent tick.
            Text("2026 · 04 · 02", style = Label, color = Muted)
            Spacer(Modifier.height(14.dp))
            Stack(Modifier.fillMaxWidth().height(3.dp), crossAxisAlignment = CrossAxisAlignment.Center) {
                Box(Modifier.size(14.dp, 3.dp).background(Accent))
                Spacer(Modifier.width(8.dp))
                UnstyledHorizontalSeparator(Line, Modifier.weight(1f), thickness = 1.dp)
            }
            Spacer(Modifier.height(14.dp))

            // Hero: the country code, then the origin under its printed label.
            Stack(Modifier.weight(1f), StackOrientation.Vertical, MainAxisArrangement.SpaceEvenly) {
                Text("COL", style = Display)
                Spacer(Modifier.height(8.dp))
                Text("ORIGIN", style = Label, fontWeight = FontWeight.Bold)
                Text("Huila", style = Title)
                Text("El Diviso · Ombligón", fontSize = 11.sp, color = Muted)
            }
            SectionRule()

            // Sensory profile: one meter per attribute, scored out of 10.
            Stack(Modifier.weight(1f), StackOrientation.Vertical, MainAxisArrangement.SpaceEvenly) {
                listOf("AROMA" to 8, "FLAVOR" to 9, "ACIDITY" to 10, "SWEETNESS" to 8, "BODY" to 9, "AFTERTASTE" to 9, "BALANCE" to 10)
                    .forEach { (name, score) -> Meter(name, score / 10f) }
            }
            SectionRule()

            // Details: the printed form, a dashed rule, the star score and the notes.
            Stack(Modifier.weight(1f), StackOrientation.Vertical, MainAxisArrangement.SpaceEvenly) {
                Stack(Modifier.weight(2f), StackOrientation.Vertical, MainAxisArrangement.SpaceEvenly) {
                    FormRow("PROCESS", "ANAEROBIC NAT.")
                    FormRow("ALTITUDE", "1,600–1,800 M")
                    FormRow("VARIETY", "OMBLIGÓN")
                }
                Canvas(Modifier.fillMaxWidth().height(1.dp)) {
                    drawLine(Line, Offset.Zero, Offset(size.width, 0f), pathEffect = PathEffect.dashPathEffect(floatArrayOf(3f, 3f)))
                }
                Stack(
                    Modifier.fillMaxWidth().weight(1f),
                    mainAxisArrangement = MainAxisArrangement.SpaceBetween,
                    crossAxisAlignment = CrossAxisAlignment.Center
                ) {
                    Text("SCORE", style = Label, fontWeight = FontWeight.Bold, letterSpacing = 0.08.em)
                    Stack(spacing = 3.dp) { repeat(5) { Star() } }
                }
                Text("mango, milk chocolate, pomegranate. long, round aftertaste.", Modifier.padding(top = 10.dp), style = Notes)
            }
        }
    }

/** A hairline track with a square accent knob parked at [fraction]. */
@androidx.compose.runtime.Composable
private fun Meter(
    name: String,
    fraction: Float
) = Stack(Modifier.fillMaxWidth().height(10.dp), crossAxisAlignment = CrossAxisAlignment.Center) {
    Text(name, Modifier.weight(1f), style = Label, fontSize = 8.sp)
    Spacer(Modifier.width(6.dp))
    val track = Modifier.weight(0.7f).height(4.dp).drawBehind { drawRect(Line, Offset(0f, 1.dp.toPx()), Size(size.width, 2.dp.toPx())) }
    UnstyledProgress(fraction, track) {
        Indicator(
            Modifier.drawBehind {
                drawRect(Accent, Offset((size.width - 4.dp.toPx()).coerceAtLeast(0f), 0f), Size(4.dp.toPx(), 4.dp.toPx()))
            }
        )
    }
}

@androidx.compose.runtime.Composable
private fun FormRow(
    key: String,
    value: String
) = Stack(Modifier.fillMaxWidth(), mainAxisArrangement = MainAxisArrangement.SpaceBetween) {
    Text(key, style = Label, color = Muted)
    Text(value, style = Label)
}

/** The rule between the face's blocks, centred in a 10dp band. */
@androidx.compose.runtime.Composable
private fun SectionRule() = UnstyledHorizontalSeparator(Line, Modifier.padding(vertical = 4.5.dp), thickness = 1.dp)

/** A filled five-point star, 12dp. */
@androidx.compose.runtime.Composable
private fun Star() =
    Canvas(Modifier.size(12.dp)) {
        val path = Path()
        repeat(10) { i ->
            val r = size.minDimension / 2f * if (i % 2 == 0) 1f else 0.42f
            val a = -PI / 2 + i * PI / 5
            val point = Offset(center.x + (r * cos(a)).toFloat(), center.y + (r * sin(a)).toFloat())
            if (i == 0) path.moveTo(point.x, point.y) else path.lineTo(point.x, point.y)
        }
        drawPath(path, Accent)
    }

@Preview
@androidx.compose.runtime.Composable
private fun FaintCoffeeNotesCard() = Box(Modifier.background(Color(0xFFECE9E3)).padding(24.dp)) { InternalFaintCoffeeNotesCard() }