dtoro/mule-image
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: desert dusk theme with animated mule and pixel-art scenery

Browse Source 
Replaces the cool-grey neutral theme with a warm desert dusk palette
pulled from a new pixel-art TopBar: a tiled, right-to-left scrolling
desert under a sky gradient, a 6-frame walking mule sprite where the
logo used to sit, and an ASCII block-character title on a black plate.
The active heap card now uses a cactus/dune scene as its stack
backdrop, and the "Built with hubris" mark moves into the TopBar's
bottom-right corner (AppFooter component removed).

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
authentik Default Admin
2026-04-09 18:49:13 +02:00
parent 938c5dce68
commit 2e7158a5bb
9 changed files with 133 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/App.tsx
View File

@@ -7,7 +7,6 @@ import { TopBar } from './components/layout/TopBar'
import { ScanProgress } from './components/ScanProgress'
import { ToastContainer } from './components/ToastContainer'
import { KeyboardHints } from './components/KeyboardHints'
import { AppFooter } from './components/AppFooter'
import { PreviewView } from './components/preview/PreviewView'
import { FilterBar } from './components/filter/FilterBar'
import { DiscardActionBar } from './components/discard/DiscardActionBar'
@@ -84,7 +83,6 @@ function App() {
* glassy. Mounted here so it's centered against the timeline,
* not the viewport (which would be offset by the sidebars). */}
<KeyboardHints />
<AppFooter />
</div>
{/* Right Sidebar */}

BIN
frontend/src/assets/card.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 MiB

BIN
frontend/src/assets/desert.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 646 KiB

BIN
frontend/src/assets/mule-sprites.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 374 KiB

43
frontend/src/components/AppFooter.tsx
View File

@@ -1,43 +0,0 @@
/**
* Tiny corner footer pinned to the bottom-right of the main column.
* Renders "Built with hubris • <year in roman numerals>", refreshed
* once per page load.
*/
const ROMAN_PAIRS: [number, string][] = [
[1000, 'M'],
[900, 'CM'],
[500, 'D'],
[400, 'CD'],
[100, 'C'],
[90, 'XC'],
[50, 'L'],
[40, 'XL'],
[10, 'X'],
[9, 'IX'],
[5, 'V'],
[4, 'IV'],
[1, 'I'],
]
function toRoman(n: number): string {
let result = ''
for (const [value, symbol] of ROMAN_PAIRS) {
while (n >= value) {
result += symbol
n -= value
}
}
return result
}
export function AppFooter() {
const year = new Date().getFullYear()
return (
<div className="pointer-events-none absolute bottom-2 right-3 z-10 text-[10px] text-text-faint">
<span className="pointer-events-auto">
Built with hubris • {toRoman(year)}
</span>
</div>
)
}

14
frontend/src/components/heaps/ActiveHeapCard.tsx
View File

@@ -4,6 +4,7 @@ import { ShoppingBasket } from 'lucide-react'
import { useActiveHeapMembers } from '../../hooks/useActiveHeapMembersQuery'
import { useFilterStore } from '../../store/filterStore'
import { photos as photosApi, heaps as heapsApi } from '../../services/api'
import cardBg from '../../assets/card.png'
/** How many thumbnails fan out across the stack at once. The newest is
* drawn last (top), older ones fan back-left and back-right. */
@@ -75,10 +76,19 @@ export function ActiveHeapCard() {
{/* Stack row. Re-keyed on activeHeap.id so switching heaps tears
* the animation context down cleanly instead of trying to
* crossfade unrelated photos. */}
* crossfade unrelated photos. The desert scene sits behind the
* fanned thumbnails — `cover` + `bottom` keeps the dunes anchored
* so the cacti frame the photos rather than the (transparent) sky. */}
<div
key={activeHeap.id}
className="relative h-24 overflow-hidden px-3 pb-3"
className="relative h-24 overflow-hidden rounded-b-lg px-3 pb-3"
style={{
backgroundImage: `url(${cardBg})`,
backgroundSize: 'cover',
backgroundPosition: 'center bottom',
backgroundRepeat: 'no-repeat',
imageRendering: 'pixelated',
}}
>
{visible.length === 0 ? (
<div className="flex h-full items-center justify-center px-2 text-center text-[11px] text-text-faint">

83
frontend/src/components/layout/TopBar.tsx
View File

@@ -1,5 +1,6 @@
import { PanelLeftOpen, PanelRightOpen } from 'lucide-react'
import muliLogo from '../../assets/muli-logo.png'
import desertBg from '../../assets/desert.png'
import muleSprites from '../../assets/mule-sprites.png'
interface TopBarProps {
leftSidebarOpen: boolean
@@ -8,10 +9,34 @@ interface TopBarProps {
onExpandRight: () => void
}
// Block-character ASCII rendering of "Mulimago" — sits on a black plate
// in place of the old text title.
const MULIMAGO_ASCII = `▖ ▖ ▜ ▘
▛▖▞▌▌▌▐ ▌▛▛▌▀▌▛▌█▌
▌▝ ▌▙▌▐▖▌▌▌▌█▌▙▌▙▖`
const ROMAN_PAIRS: [number, string][] = [
[1000, 'M'], [900, 'CM'], [500, 'D'], [400, 'CD'],
[100, 'C'], [90, 'XC'], [50, 'L'], [40, 'XL'],
[10, 'X'], [9, 'IX'], [5, 'V'], [4, 'IV'], [1, 'I'],
]
function toRoman(n: number): string {
let result = ''
for (const [value, symbol] of ROMAN_PAIRS) {
while (n >= value) {
result += symbol
n -= value
}
}
return result
}
/**
* Slim top bar — logo on the left, settings gear on the right. The
* active heap badge moved into the Heaps panel in the left sidebar
* (where it actually relates to the heap rows the user navigates to).
* Slim top bar — animated walking mule on the left over a tiled desert
* backdrop, settings gear on the right. The active heap badge moved into
* the Heaps panel in the left sidebar (where it actually relates to the
* heap rows the user navigates to).
*
* Also hosts the "expand sidebar" affordances: when a side panel is
* collapsed, a small panel-open icon appears on the corresponding edge
@@ -26,32 +51,68 @@ export function TopBar({
onExpandRight,
}: TopBarProps) {
return (
<header className="flex h-12 items-center justify-between border-b border-border bg-surface px-4">
<div className="flex items-center gap-2">
<header
className="relative flex h-16 items-center justify-between overflow-hidden border-b border-border px-4"
style={{
// Two layers: desert tile on top (scrolls right→left), dusk-sky
// gradient underneath (static). Tile width is fixed at 200px so
// the `desert-scroll` keyframe can move by exactly one tile and
// loop seamlessly.
backgroundImage: `url(${desertBg}), linear-gradient(to bottom, #2b3a5c 0%, #6b6b8a 35%, #d68a5c 75%, #f0c188 100%)`,
backgroundRepeat: 'repeat-x, no-repeat',
backgroundSize: '200px 100%, 100% 100%',
backgroundPosition: '0 bottom, 0 0',
imageRendering: 'pixelated',
animation: 'desert-scroll 24s linear infinite',
}}
>
<div className="relative flex items-center gap-3">
{!leftSidebarOpen && (
<button
onClick={onExpandLeft}
className="rounded p-1.5 text-text-muted transition-colors hover:bg-surface-2 hover:text-text"
className="rounded bg-black/30 p-1.5 text-text-muted backdrop-blur-sm transition-colors hover:bg-black/50 hover:text-text"
title="Expand panel (Tab)"
aria-label="Expand left panel"
>
<PanelLeftOpen className="h-4 w-4" />
</button>
)}
<img src={muliLogo} alt="Mulimago" className="h-7 w-7 object-contain" />
<h1 className="text-lg font-semibold text-text">Mulimago</h1>
<div
aria-label="Mulimago"
className="h-12 w-14"
style={{
backgroundImage: `url(${muleSprites})`,
backgroundSize: '300% 200%',
backgroundRepeat: 'no-repeat',
imageRendering: 'pixelated',
animation: 'mule-walk 0.6s steps(1) infinite',
}}
/>
<pre
aria-label="Mulimago"
className="rounded bg-black px-2 py-1 font-mono text-[8px] leading-[1.05] text-text"
style={{ letterSpacing: 0 }}
>
{MULIMAGO_ASCII}
</pre>
</div>
<div className="flex items-center gap-2">
<div className="flex h-full items-end gap-2 self-stretch pb-1">
{!rightSidebarOpen && (
<button
onClick={onExpandRight}
className="rounded p-1.5 text-text-muted transition-colors hover:bg-surface-2 hover:text-text"
className="self-center rounded bg-black/30 p-1.5 text-text-muted backdrop-blur-sm transition-colors hover:bg-black/50 hover:text-text"
title="Expand panel (I)"
aria-label="Expand right panel"
>
<PanelRightOpen className="h-4 w-4" />
</button>
)}
<span
className="text-[10px] text-foreground-muted"
style={{ textShadow: '0 1px 2px rgba(0,0,0,0.7)' }}
>
Built with hubris • {toRoman(new Date().getFullYear())}
</span>
</div>
</header>
)

45
frontend/src/index.css
View File

@@ -4,18 +4,18 @@
@layer base {
:root {
--color-bg: #111110;
--color-surface: #161615;
--color-surface-2: #1c1c1a;
--color-surface-offset: #222220;
--color-border: rgba(255, 255, 255, 0.08);
--color-text: #e8e6e0;
--color-text-muted: #878580;
--color-text-faint: #4a4845;
--color-primary: #3b82f6;
--color-pick: #4f9e5c;
--color-reject: #c25a5a;
--color-star: #d4a340;
--color-bg: #1a1424;
--color-surface: #221c2f;
--color-surface-2: #2a2339;
--color-surface-offset: #352c46;
--color-border: rgba(240, 193, 136, 0.10);
--color-text: #f0e6d2;
--color-text-muted: #a8997d;
--color-text-faint: #5e5448;
--color-primary: #e8965a;
--color-pick: #8aaa5a;
--color-reject: #d06464;
--color-star: #f0c188;
}
body {
@@ -40,4 +40,25 @@
::-webkit-scrollbar-thumb:hover {
@apply bg-text-faint;
}
/* Mule walk cycle — 3x2 sprite sheet (6 frames). Each keyframe holds
for one step thanks to `steps(1)` so the background snaps frame-to-frame
instead of interpolating. */
@keyframes mule-walk {
0% { background-position: 0% 0%; }
16.66% { background-position: 50% 0%; }
33.33% { background-position: 100% 0%; }
50% { background-position: 0% 100%; }
66.66% { background-position: 50% 100%; }
83.33% { background-position: 100% 100%; }
100% { background-position: 0% 0%; }
}
/* Parallax desert scroll — moves the desert layer right→left by exactly
one tile width so the loop is seamless. The tile width is fixed in
CSS (see TopBar.tsx) so the keyframe end value matches. */
@keyframes desert-scroll {
from { background-position-x: 0px, 0px; }
to { background-position-x: -200px, 0px; }
}

29
frontend/tailwind.config.js
View File

@@ -8,19 +8,22 @@ export default {
theme: {
extend: {
colors: {
// Dark-first color scheme for photo apps
bg: '#111110',
surface: '#161615',
'surface-2': '#1c1c1a',
'surface-offset': '#222220',
border: 'rgba(255,255,255,0.08)',
text: '#e8e6e0',
'text-muted': '#878580',
'text-faint': '#4a4845',
primary: '#3b82f6', // saturated blue (Tailwind blue-500) — high contrast on dark bg AND on photo content
pick: '#4f9e5c', // green for picked
reject: '#c25a5a', // red for rejected
star: '#d4a340', // amber for stars
// Desert dusk palette — warm, slightly indigo darks pulled from
// the TopBar sunset gradient. Dark enough that photo content
// stays the visual focus, but no longer the cool neutral greys
// we started with.
bg: '#1a1424', // deep dusk indigo (was near-black)
surface: '#221c2f', // panel base
'surface-2': '#2a2339', // raised panels / hover
'surface-offset': '#352c46', // chips, inputs
border: 'rgba(240, 193, 136, 0.10)', // warm sand tint, low alpha
text: '#f0e6d2', // warm cream
'text-muted': '#a8997d', // sandy beige
'text-faint': '#5e5448', // dark sand
primary: '#e8965a', // sunset orange — pulled from horizon
pick: '#8aaa5a', // sage / cactus green
reject: '#d06464', // warmer red
star: '#f0c188', // pale amber matching horizon
},
fontFamily: {
sans: ['Geist', 'system-ui', 'sans-serif'],