LifeSaver

lifeSaver.kt

@Composable
fun LifeSaver(rainbow: List<Color> = SkittlesRainbow) {
    val color by rainbowState(rainbow = rainbow, duration = 2000)
    val highlight by rainbowState(PastelRainbow, 2000)
    val infiniteTransition = rememberInfiniteTransition()
    val arcAngle1 by infiniteTransition.animateFloat(
        initialValue = 0F,
        targetValue = 180F,
        animationSpec = infiniteRepeatable(
            animation = tween(5000, easing = LinearEasing),
            repeatMode = RepeatMode.Restart
        )
    )
    val arcAngle2 by infiniteTransition.animateFloat(
        initialValue = 180F,
        targetValue = 360F,
        animationSpec = infiniteRepeatable(
            animation = tween(5000, easing = LinearEasing),
            repeatMode = RepeatMode.Restart
        )
    )
    Canvas(
        modifier = Modifier
            .size(80.dp)

    ) {
        drawCircle(
            color = color,
            radius = 40.dp.toPx(),
            style = Stroke(width = 40.dp.toPx(), cap = StrokeCap.Round)
        )
        drawCircle(
            color = highlight,
            radius = 24.dp.toPx(),
            style = Stroke(width = 2.dp.toPx(), cap = StrokeCap.Round)
        )
        drawCircle(
            color = highlight,
            radius = 55.dp.toPx(),
            style = Stroke(width = 2.dp.toPx(), cap = StrokeCap.Round)
        )
        drawArc(
            color = highlight,
            startAngle = arcAngle1,
            sweepAngle = 90f,
            useCenter = false,
            style = Stroke(width = 4.dp.toPx(), cap = StrokeCap.Round),
        )
        drawArc(
            color = highlight,
            startAngle = arcAngle2,
            sweepAngle = 90f,
            useCenter = false,
            style = Stroke(width = 4.dp.toPx(), cap = StrokeCap.Round),
        )
    }
}

HTML

<title>Interactive Card Example</title> <style> body { font-family: Arial, sans-serif; display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #f4f4f9; } .card { background: white; padding: 24px; border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); text-align: center; width: 280px; } button { background-color: #007bff; color: white; border: none; padding: 10px 16px; border-radius: 4px; cursor: pointer; font-size: 14px; transition: background-color 0.2s; } button:hover { background-color: #0056b3; } </style>

Counter App

Current Count: 0

Click to Increment

<script> let count = 0; const countDisplay = document.getElementById('count'); const button = document.getElementById('incrementBtn'); button.addEventListener('click', () => { count++; countDisplay.textContent = count; }); </script>

HTML

<title>Interactive Card Example</title> <style> body { font-family: Arial, sans-serif; display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #f4f4f9; } .card { background: white; padding: 24px; border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); text-align: center; width: 280px; } button { background-color: #007bff; color: white; border: none; padding: 10px 16px; border-radius: 4px; cursor: pointer; font-size: 14px; transition: background-color 0.2s; } button:hover { background-color: #0056b3; } </style>

Counter App

Current Count: 0

Click to Increment

<script> let count = 0; const countDisplay = document.getElementById('count'); const button = document.getElementById('incrementBtn'); button.addEventListener('click', () => { count++; countDisplay.textContent = count; }); </script>