chrisryn/imperial-command-center
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Cool-light theme, Google event colors, photo frame contain+lower-right clock

Browse Source 
- Main app swapped from warm cream/sage to cool slate light theme with
  blue accent; dark-* tokens and text-white/gray overrides remapped in
  tailwind.config.js and index.css
- Calendar events now render in Google's 11-color palette (Tomato through
  Graphite), deterministically hashed from the event summary so the same
  event always gets the same color
- PhotoFrame uses object-contain (whole photo shown, letterboxed) instead
  of object-cover; clock + date moved to lower-right, same white color,
  text-shadow for readability over any photo
- EMAIL_UPLOAD.md / PHOTO_FRAME.md / iCloud sync script and systemd timer
  remain unchanged
This commit is contained in:
root
2026-04-15 02:18:43 -05:00
parent d0db8c55b3
commit 7b36551c32
5 changed files with 105 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/photoframe/PhotoFrame.tsx
View File

@@ -137,7 +137,7 @@ export function PhotoFrame({ intervalMs = 15_000, transitionMs = 1_200 }: PhotoF
key={`prev-${prevSrc}`}
src={prevSrc}
alt=""
className="absolute inset-0 w-full h-full object-cover animate-ken-burns"
className="absolute inset-0 w-full h-full object-contain animate-ken-burns"
style={{ opacity: 1 }}
/>
)}
@@ -146,20 +146,18 @@ export function PhotoFrame({ intervalMs = 15_000, transitionMs = 1_200 }: PhotoF
key={`cur-${index}`}
src={currentSrc}
alt=""
className="absolute inset-0 w-full h-full object-cover animate-ken-burns"
className="absolute inset-0 w-full h-full object-contain animate-ken-burns"
style={{
opacity: 0,
animation: `photo-fade-in ${transitionMs}ms ease-out forwards, ken-burns 20s ease-in-out infinite alternate`,
}}
/>
)}
{/* Gradient + centered clock/date overlay (Skylight style) */}
<div className="pointer-events-none absolute inset-x-0 bottom-0 h-56 bg-gradient-to-t from-black/75 via-black/30 to-transparent" />
<div className="pointer-events-none absolute inset-x-0 bottom-14 flex justify-center">
<div className="px-10 py-5 rounded-3xl bg-black/25 backdrop-blur-md border border-white/10 text-white text-center drop-shadow-2xl">
<div className="text-7xl md:text-8xl font-light tracking-tight leading-none">{timeStr}</div>
<div className="text-2xl md:text-3xl mt-3 capitalize font-light opacity-95">{dateStr}</div>
</div>
{/* Lower-right clock + date overlay */}
<div className="pointer-events-none absolute bottom-8 right-10 text-right text-white leading-tight"
style={{ textShadow: '0 2px 12px rgba(0,0,0,0.9), 0 0 4px rgba(0,0,0,0.7)' }}>
<div className="text-6xl md:text-7xl font-light tracking-tight">{timeStr}</div>
<div className="text-xl md:text-2xl mt-1 capitalize font-light">{dateStr}</div>
</div>
<style>{`
@keyframes photo-fade-in {