From d01919381a9b40421dc8933dd6654ee1dc0b91b6 Mon Sep 17 00:00:00 2001 From: nessi Date: Tue, 3 Feb 2026 09:48:56 +0100 Subject: [PATCH] Enhance UI with animations, fonts, and improved visuals Added custom animations (fadeIn, popIn, and rowPulse) for smoother transitions and visual effect. Integrated Google Fonts to improve typography and updated background design to enrich user experience. Styles were refined for better consistency and responsiveness across elements. --- frontend/index.html | 3 +++ frontend/src/App.jsx | 58 +++++++++++++++++++++++++++++++++++++++++--- 2 files changed, 58 insertions(+), 3 deletions(-) diff --git a/frontend/index.html b/frontend/index.html index 8710bf9..91f2579 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -4,6 +4,9 @@ Cluedo Sheet + + +
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx index fb7a2ab..4635887 100644 --- a/frontend/src/App.jsx +++ b/frontend/src/App.jsx @@ -143,6 +143,7 @@ export default function App() { const [games, setGames] = useState([]); const [gameId, setGameId] = useState(null); const [sheet, setSheet] = useState(null); + const [pulseId, setPulseId] = useState(null); // ✅ Hilfe Modal State const [helpOpen, setHelpOpen] = useState(false); @@ -157,6 +158,24 @@ export default function App() { if (gs[0] && !gameId) setGameId(gs[0].id); }; + useEffect(() => { + document.body.style.margin = "0"; + document.body.style.padding = "0"; + document.body.style.background = "transparent"; + }, []); + + useEffect(() => { + if (document.getElementById("hp-anim-style")) return; + const style = document.createElement("style"); + style.id = "hp-anim-style"; + style.innerHTML = ` + @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } + @keyframes popIn { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } + @keyframes rowPulse { 0%{ transform: scale(1); } 50%{ transform: scale(1.01); } 100%{ transform: scale(1); } } + `; + document.head.appendChild(style); + }, []); + useEffect(() => { (async () => { try { await load(); } catch {} @@ -221,6 +240,8 @@ export default function App() { }); await reloadSheet(); + setPulseId(entry.entry_id); + setTimeout(() => setPulseId(null), 220); }; const toggleTag = async (entry) => { @@ -435,6 +456,10 @@ export default function App() { style={{ ...styles.row, background: getRowBg(e.status), + animation: + pulseId === e.entry_id + ? "rowPulse 220ms ease-out" + : "none", }} >