aiolabs/bitspire
9
0
Fork 0
Code Issues 52 Pull requests 2 Projects Releases Packages Wiki Activity Actions

feat(machine): add logo with float animation to idle screen

Browse source 
Integrate pyramid logo into idle view with a gentle floating animation
and theme-aware glow. Rename title to Bitcoinmat, enlarge action cards,
and use BitcoinIcon for Buy Bitcoin / cash emoji for Sell Bitcoin.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Patrick Mulligan 2026-02-16 21:18:02 -05:00
commit 333b8b9357
3 changed files with 28 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

BIN
apps/machine/public/logo.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 337 KiB

15
apps/machine/src/style.css
View file

@ -476,3 +476,18 @@
@apply bg-background text-foreground; @apply bg-background text-foreground;
} }
} }
/* Logo float animation */
@keyframes float {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-8px);
}
}
@utility animate-float {
animation: float 3s ease-in-out infinite;
}

21
apps/machine/src/views/IdleView.vue
View file

@ -36,19 +36,24 @@ function handleCashOut() {
<template> <template>
<div class="flex flex-1 flex-col items-center justify-center gap-12 p-8"> <div class="flex flex-1 flex-col items-center justify-center gap-12 p-8">
<!-- Logo --> <!-- Logo -->
<div class="text-center"> <div class="flex flex-col items-center gap-2">
<h1 class="text-5xl font-bold text-primary">⚡ Bitcoin ATM</h1> <img
src="/logo.png"
alt="Lamassu"
class="h-40 w-40 animate-float drop-shadow-[0_0_24px_var(--primary)]"
/>
<h1 class="text-4xl font-bold text-primary">Bitcoinmat</h1>
</div> </div>
<!-- Action Buttons --> <!-- Action Buttons -->
<div class="flex gap-8"> <div class="flex gap-8">
<!-- Buy Bitcoin --> <!-- Buy Bitcoin -->
<Card <Card
class="h-52 w-52 cursor-pointer border-2 border-success/50 bg-success/20 transition-all hover:scale-105 hover:border-success hover:bg-success/30 active:scale-95" class="h-64 w-64 cursor-pointer border-2 border-success/50 bg-success/20 transition-all hover:scale-105 hover:border-success hover:bg-success/30 active:scale-95"
@click="handleCashIn" @click="handleCashIn"
> >
<CardContent class="flex h-full flex-col items-center justify-center gap-2 p-6"> <CardContent class="flex h-full flex-col items-center justify-center gap-3 p-6">
<BitcoinIcon :size="96" /> <BitcoinIcon :size="64" class="shrink-0" />
<span class="text-xl font-bold text-success">Buy Bitcoin</span> <span class="text-xl font-bold text-success">Buy Bitcoin</span>
<span class="text-sm text-foreground/70">Insert cash, receive sats</span> <span class="text-sm text-foreground/70">Insert cash, receive sats</span>
</CardContent> </CardContent>
@ -56,11 +61,11 @@ function handleCashOut() {
<!-- Sell Bitcoin --> <!-- Sell Bitcoin -->
<Card <Card
class="h-52 w-52 cursor-pointer border-2 border-warning/50 bg-warning/20 transition-all hover:scale-105 hover:border-warning hover:bg-warning/30 active:scale-95" class="h-64 w-64 cursor-pointer border-2 border-warning/50 bg-warning/20 transition-all hover:scale-105 hover:border-warning hover:bg-warning/30 active:scale-95"
@click="handleCashOut" @click="handleCashOut"
> >
<CardContent class="flex h-full flex-col items-center justify-center gap-2 p-6"> <CardContent class="flex h-full flex-col items-center justify-center gap-3 p-6">
<span class="text-5xl">🏧</span> <span class="text-7xl">💵</span>
<span class="text-xl font-bold text-warning">Sell Bitcoin</span> <span class="text-xl font-bold text-warning">Sell Bitcoin</span>
<span class="text-sm text-foreground/70">Pay invoice, receive cash</span> <span class="text-sm text-foreground/70">Pay invoice, receive cash</span>
</CardContent> </CardContent>