nessi/cluedo-hp-webapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Enhance HogwartsPointsCard design and layout

Browse Source 
Refactored the component to improve its visual hierarchy and styling for better usability and aesthetics. Added new design elements like gold accents, updated text shadows, and a refined grid layout. Improved responsiveness and structure to align with overall application design standards.
This commit is contained in:
Sascha Nesterovic
2026-02-07 12:21:20 +01:00
parent 86c4cf2639
commit 06b6544653
1 changed files with 100 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

152
frontend/src/App.jsx
View File

@@ -424,85 +424,95 @@ export default function App() {
};
const HogwartsPointsCard = ({ value = 0 }) => {
const GOLD = "#f2d27a"; // echtes Gold, unabhängig vom Theme
const GOLD2 = "#caa24a"; // dunkleres Gold für Rand
return (
<div
style={{
borderRadius: 18,
border: `1px solid ${stylesTokens.panelBorder}`,
background: stylesTokens.panelBg,
boxShadow: "0 14px 40px rgba(0,0,0,0.45)",
backdropFilter: "blur(10px)",
overflow: "hidden",
position: "relative",
minWidth: 0,
background: stylesTokens.panelBg,
backdropFilter: "blur(10px)",
padding: 14,
display: "grid",
gridTemplateRows: "auto 1fr",
gap: 10,
}}
>
{/* Pergament-Hintergrund */}
<div
style={{
position: "absolute",
inset: 0,
background: `
radial-gradient(120% 120% at 20% 10%, rgba(255, 232, 190, 0.22), transparent 55%),
radial-gradient(120% 120% at 90% 80%, rgba(255, 210, 150, 0.18), transparent 55%),
linear-gradient(180deg, rgba(80, 55, 30, 0.32), rgba(20, 15, 10, 0.08))
`,
opacity: 1,
pointerEvents: "none",
}}
/>
{/* Papier-Textur / Flecken */}
<div
style={{
position: "absolute",
inset: 0,
background: `
radial-gradient(circle at 18% 38%, rgba(255, 220, 170, 0.10), transparent 42%),
radial-gradient(circle at 72% 28%, rgba(255, 200, 140, 0.08), transparent 40%),
radial-gradient(circle at 60% 78%, rgba(255, 240, 210, 0.06), transparent 46%)
`,
mixBlendMode: "overlay",
pointerEvents: "none",
}}
/>
{/* goldene Linie */}
<div
style={{
position: "absolute",
left: 0,
right: 0,
top: 0,
height: 1,
background: stylesTokens.goldLine,
opacity: 0.45,
pointerEvents: "none",
}}
/>
<div style={{ position: "relative", padding: 14, height: "100%", display: "grid", gridTemplateRows: "auto 1fr" }}>
{/* Header */}
<div style={{ fontWeight: 900, fontSize: 12.5, color: stylesTokens.textDim, opacity: 0.95 }}>
Hogwarts Points
</div>
{/* Medallion / parchment inset */}
<div
style={{
borderRadius: 16,
border: `1px solid ${stylesTokens.panelBorder}`,
background: `
radial-gradient(120% 140% at 20% 15%, rgba(255,245,220,0.95), rgba(245,225,185,0.88) 55%, rgba(210,170,110,0.78)),
radial-gradient(90% 120% at 85% 80%, rgba(255,255,255,0.18), transparent 55%),
linear-gradient(180deg, rgba(255,255,255,0.08), rgba(0,0,0,0.06))
`,
boxShadow:
"inset 0 0 0 1px rgba(0,0,0,0.22), inset 0 18px 50px rgba(0,0,0,0.12), 0 18px 50px rgba(0,0,0,0.35)",
position: "relative",
overflow: "hidden",
display: "grid",
placeItems: "center",
padding: 12,
}}
>
{/* paper speckles */}
<div
style={{
position: "absolute",
inset: 0,
background: `
radial-gradient(circle at 18% 38%, rgba(120,70,20,0.10), transparent 42%),
radial-gradient(circle at 72% 28%, rgba(120,70,20,0.08), transparent 40%),
radial-gradient(circle at 60% 78%, rgba(255,255,255,0.12), transparent 46%)
`,
opacity: 0.55,
pointerEvents: "none",
}}
/>
{/* gold frame line */}
<div
style={{
position: "absolute",
inset: 10,
borderRadius: 12,
border: `1px solid rgba(202,162,74,0.55)`,
boxShadow: `inset 0 0 0 1px rgba(242,210,122,0.18)`,
pointerEvents: "none",
}}
/>
{/* value */}
<div
style={{
display: "flex",
alignItems: "baseline",
justifyContent: "center",
gap: 10,
marginTop: 8,
position: "relative",
}}
>
<div
style={{
color: stylesTokens.textGold,
color: GOLD,
fontWeight: 900,
fontSize: 44,
fontSize: 46,
letterSpacing: 0.5,
textShadow: "0 0 18px rgba(255, 215, 120, 0.18)",
lineHeight: 1,
textShadow:
"0 1px 0 rgba(0,0,0,0.25), 0 0 18px rgba(242,210,122,0.22)",
}}
>
{value}
@@ -510,36 +520,39 @@ export default function App() {
<div
style={{
color: stylesTokens.textGold,
color: GOLD,
fontWeight: 900,
fontSize: 18,
letterSpacing: 1.2,
letterSpacing: 1.3,
transform: "translateY(-6px)",
textShadow:
"0 1px 0 rgba(0,0,0,0.22), 0 0 14px rgba(242,210,122,0.18)",
opacity: 0.95,
transform: "translateY(-4px)",
textShadow: "0 0 14px rgba(255, 215, 120, 0.16)",
}}
>
HP
</div>
</div>
{/* small stamp */}
<div
style={{
marginTop: 10,
display: "flex",
justifyContent: "center",
gap: 8,
opacity: 0.85,
color: stylesTokens.textDim,
fontSize: 11.5,
position: "absolute",
bottom: 10,
right: 12,
color: "rgba(40,25,10,0.45)",
fontSize: 11,
fontWeight: 900,
letterSpacing: 1.6,
textTransform: "uppercase",
transform: "rotate(-6deg)",
border: `1px solid rgba(40,25,10,0.18)`,
borderRadius: 999,
padding: "3px 8px",
background: "rgba(255,255,255,0.10)",
}}
>
<span style={{ border: `1px solid ${stylesTokens.panelBorder}`, borderRadius: 999, padding: "4px 8px", background: "rgba(0,0,0,0.12)" }}>
+ / −
</span>
<span style={{ border: `1px solid ${stylesTokens.panelBorder}`, borderRadius: 999, padding: "4px 8px", background: "rgba(0,0,0,0.12)" }}>
Hauswertung
</span>
Score
</div>
</div>
</div>
@@ -547,6 +560,7 @@ export default function App() {
};
return (
<div style={styles.page}>
<div style={styles.bgFixed} aria-hidden="true">