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",
}}
>