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.
This commit is contained in:
@@ -4,6 +4,9 @@
|
|||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>Cluedo Sheet</title>
|
<title>Cluedo Sheet</title>
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700&family=IM+Fell+English:ital@0;1&display=swap" rel="stylesheet">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="root"></div>
|
<div id="root"></div>
|
||||||
|
|||||||
@@ -143,6 +143,7 @@ export default function App() {
|
|||||||
const [games, setGames] = useState([]);
|
const [games, setGames] = useState([]);
|
||||||
const [gameId, setGameId] = useState(null);
|
const [gameId, setGameId] = useState(null);
|
||||||
const [sheet, setSheet] = useState(null);
|
const [sheet, setSheet] = useState(null);
|
||||||
|
const [pulseId, setPulseId] = useState(null);
|
||||||
|
|
||||||
// ✅ Hilfe Modal State
|
// ✅ Hilfe Modal State
|
||||||
const [helpOpen, setHelpOpen] = useState(false);
|
const [helpOpen, setHelpOpen] = useState(false);
|
||||||
@@ -157,6 +158,24 @@ export default function App() {
|
|||||||
if (gs[0] && !gameId) setGameId(gs[0].id);
|
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(() => {
|
useEffect(() => {
|
||||||
(async () => {
|
(async () => {
|
||||||
try { await load(); } catch {}
|
try { await load(); } catch {}
|
||||||
@@ -221,6 +240,8 @@ export default function App() {
|
|||||||
});
|
});
|
||||||
|
|
||||||
await reloadSheet();
|
await reloadSheet();
|
||||||
|
setPulseId(entry.entry_id);
|
||||||
|
setTimeout(() => setPulseId(null), 220);
|
||||||
};
|
};
|
||||||
|
|
||||||
const toggleTag = async (entry) => {
|
const toggleTag = async (entry) => {
|
||||||
@@ -435,6 +456,10 @@ export default function App() {
|
|||||||
style={{
|
style={{
|
||||||
...styles.row,
|
...styles.row,
|
||||||
background: getRowBg(e.status),
|
background: getRowBg(e.status),
|
||||||
|
animation:
|
||||||
|
pulseId === e.entry_id
|
||||||
|
? "rowPulse 220ms ease-out"
|
||||||
|
: "none",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
@@ -474,17 +499,38 @@ export default function App() {
|
|||||||
const styles = {
|
const styles = {
|
||||||
page: {
|
page: {
|
||||||
minHeight: "100vh",
|
minHeight: "100vh",
|
||||||
padding: 16,
|
margin: 0,
|
||||||
|
padding: 0,
|
||||||
background:
|
background:
|
||||||
"radial-gradient(circle at 20% 10%, rgba(255,255,255,0.40), rgba(0,0,0,0) 45%), linear-gradient(180deg, #f3e7cf, #e5d2ac)",
|
`
|
||||||
|
radial-gradient(circle at 12% 18%, rgba(120,80,30,0.18), rgba(0,0,0,0) 38%),
|
||||||
|
radial-gradient(circle at 85% 22%, rgba(120,80,30,0.12), rgba(0,0,0,0) 42%),
|
||||||
|
radial-gradient(circle at 35% 82%, rgba(120,80,30,0.10), rgba(0,0,0,0) 45%),
|
||||||
|
radial-gradient(circle at 70% 75%, rgba(90,60,25,0.10), rgba(0,0,0,0) 40%),
|
||||||
|
|
||||||
|
/* subtile Papier-Noise (Pattern) */
|
||||||
|
repeating-linear-gradient(
|
||||||
|
0deg,
|
||||||
|
rgba(255,255,255,0.03),
|
||||||
|
rgba(255,255,255,0.03) 1px,
|
||||||
|
rgba(0,0,0,0.02) 2px,
|
||||||
|
rgba(0,0,0,0.02) 3px
|
||||||
|
),
|
||||||
|
|
||||||
|
/* Grundfarbe Pergament */
|
||||||
|
linear-gradient(180deg, #f1e2c2, #e3c996)
|
||||||
|
`,
|
||||||
|
backgroundAttachment: "fixed",
|
||||||
},
|
},
|
||||||
shell: {
|
shell: {
|
||||||
fontFamily: "system-ui",
|
fontFamily: '"IM Fell English", system-ui',
|
||||||
|
padding: 16,
|
||||||
maxWidth: 620,
|
maxWidth: 620,
|
||||||
margin: "0 auto",
|
margin: "0 auto",
|
||||||
},
|
},
|
||||||
title: {
|
title: {
|
||||||
fontWeight: 1000,
|
fontWeight: 1000,
|
||||||
|
fontFamily: '"Cinzel Decorative", "IM Fell English", system-ui',
|
||||||
letterSpacing: 0.5,
|
letterSpacing: 0.5,
|
||||||
fontSize: 22,
|
fontSize: 22,
|
||||||
color: "#20140c",
|
color: "#20140c",
|
||||||
@@ -509,10 +555,12 @@ const styles = {
|
|||||||
border: "1px solid rgba(0,0,0,0.18)",
|
border: "1px solid rgba(0,0,0,0.18)",
|
||||||
background: "rgba(255,255,255,0.35)",
|
background: "rgba(255,255,255,0.35)",
|
||||||
boxShadow: "0 10px 24px rgba(0,0,0,0.12)",
|
boxShadow: "0 10px 24px rgba(0,0,0,0.12)",
|
||||||
|
transition: "transform 180ms ease, box-shadow 180ms ease",
|
||||||
},
|
},
|
||||||
sectionHeader: {
|
sectionHeader: {
|
||||||
padding: "10px 12px",
|
padding: "10px 12px",
|
||||||
fontWeight: 1000,
|
fontWeight: 1000,
|
||||||
|
fontFamily: '"Cinzel Decorative", "IM Fell English", system-ui',
|
||||||
letterSpacing: 0.7,
|
letterSpacing: 0.7,
|
||||||
color: "#2b1a0e",
|
color: "#2b1a0e",
|
||||||
background: "linear-gradient(180deg, #caa45a, #a67a2a)",
|
background: "linear-gradient(180deg, #caa45a, #a67a2a)",
|
||||||
@@ -571,6 +619,7 @@ const styles = {
|
|||||||
background: "linear-gradient(180deg, #f3d79b, #caa45a)",
|
background: "linear-gradient(180deg, #f3d79b, #caa45a)",
|
||||||
fontWeight: 1000,
|
fontWeight: 1000,
|
||||||
cursor: "pointer",
|
cursor: "pointer",
|
||||||
|
transition: "transform 140ms ease, box-shadow 140ms ease",
|
||||||
},
|
},
|
||||||
secondaryBtn: {
|
secondaryBtn: {
|
||||||
padding: "10px 12px",
|
padding: "10px 12px",
|
||||||
@@ -579,6 +628,7 @@ const styles = {
|
|||||||
background: "linear-gradient(180deg, rgba(255,255,255,0.75), rgba(0,0,0,0.05))",
|
background: "linear-gradient(180deg, rgba(255,255,255,0.75), rgba(0,0,0,0.05))",
|
||||||
fontWeight: 900,
|
fontWeight: 900,
|
||||||
cursor: "pointer",
|
cursor: "pointer",
|
||||||
|
transition: "transform 140ms ease, box-shadow 140ms ease",
|
||||||
},
|
},
|
||||||
adminWrap: {
|
adminWrap: {
|
||||||
marginTop: 14,
|
marginTop: 14,
|
||||||
@@ -611,6 +661,7 @@ const styles = {
|
|||||||
justifyContent: "center",
|
justifyContent: "center",
|
||||||
padding: 16,
|
padding: 16,
|
||||||
zIndex: 9999,
|
zIndex: 9999,
|
||||||
|
animation: "fadeIn 160ms ease-out",
|
||||||
},
|
},
|
||||||
modalCard: {
|
modalCard: {
|
||||||
width: "100%",
|
width: "100%",
|
||||||
@@ -621,6 +672,7 @@ const styles = {
|
|||||||
boxShadow: "0 18px 50px rgba(0,0,0,0.35)",
|
boxShadow: "0 18px 50px rgba(0,0,0,0.35)",
|
||||||
padding: 14,
|
padding: 14,
|
||||||
backdropFilter: "blur(6px)",
|
backdropFilter: "blur(6px)",
|
||||||
|
animation: "popIn 160ms ease-out",
|
||||||
},
|
},
|
||||||
modalHeader: {
|
modalHeader: {
|
||||||
display: "flex",
|
display: "flex",
|
||||||
|
|||||||
Reference in New Issue
Block a user