Enhance HogwartsPointsCard design and layout
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:
@@ -424,127 +424,141 @@ export default function App() {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const HogwartsPointsCard = ({ value = 0 }) => {
|
const HogwartsPointsCard = ({ value = 0 }) => {
|
||||||
return (
|
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,
|
||||||
|
padding: 14,
|
||||||
|
display: "grid",
|
||||||
|
gridTemplateRows: "auto 1fr",
|
||||||
|
gap: 10,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{/* Header */}
|
||||||
|
<div style={{ fontWeight: 900, fontSize: 12.5, color: stylesTokens.textDim, opacity: 0.95 }}>
|
||||||
|
Hogwarts Points
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Medallion / parchment inset */}
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
borderRadius: 18,
|
borderRadius: 16,
|
||||||
border: `1px solid ${stylesTokens.panelBorder}`,
|
border: `1px solid ${stylesTokens.panelBorder}`,
|
||||||
boxShadow: "0 14px 40px rgba(0,0,0,0.45)",
|
background: `
|
||||||
overflow: "hidden",
|
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",
|
position: "relative",
|
||||||
minWidth: 0,
|
overflow: "hidden",
|
||||||
background: stylesTokens.panelBg,
|
display: "grid",
|
||||||
backdropFilter: "blur(10px)",
|
placeItems: "center",
|
||||||
|
padding: 12,
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{/* Pergament-Hintergrund */}
|
{/* paper speckles */}
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
position: "absolute",
|
position: "absolute",
|
||||||
inset: 0,
|
inset: 0,
|
||||||
background: `
|
background: `
|
||||||
radial-gradient(120% 120% at 20% 10%, rgba(255, 232, 190, 0.22), transparent 55%),
|
radial-gradient(circle at 18% 38%, rgba(120,70,20,0.10), transparent 42%),
|
||||||
radial-gradient(120% 120% at 90% 80%, rgba(255, 210, 150, 0.18), transparent 55%),
|
radial-gradient(circle at 72% 28%, rgba(120,70,20,0.08), transparent 40%),
|
||||||
linear-gradient(180deg, rgba(80, 55, 30, 0.32), rgba(20, 15, 10, 0.08))
|
radial-gradient(circle at 60% 78%, rgba(255,255,255,0.12), transparent 46%)
|
||||||
`,
|
`,
|
||||||
opacity: 1,
|
opacity: 0.55,
|
||||||
pointerEvents: "none",
|
pointerEvents: "none",
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
{/* Papier-Textur / Flecken */}
|
{/* gold frame line */}
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
position: "absolute",
|
position: "absolute",
|
||||||
inset: 0,
|
inset: 10,
|
||||||
background: `
|
borderRadius: 12,
|
||||||
radial-gradient(circle at 18% 38%, rgba(255, 220, 170, 0.10), transparent 42%),
|
border: `1px solid rgba(202,162,74,0.55)`,
|
||||||
radial-gradient(circle at 72% 28%, rgba(255, 200, 140, 0.08), transparent 40%),
|
boxShadow: `inset 0 0 0 1px rgba(242,210,122,0.18)`,
|
||||||
radial-gradient(circle at 60% 78%, rgba(255, 240, 210, 0.06), transparent 46%)
|
|
||||||
`,
|
|
||||||
mixBlendMode: "overlay",
|
|
||||||
pointerEvents: "none",
|
pointerEvents: "none",
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
{/* goldene Linie */}
|
{/* value */}
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
position: "absolute",
|
display: "flex",
|
||||||
left: 0,
|
alignItems: "baseline",
|
||||||
right: 0,
|
gap: 10,
|
||||||
top: 0,
|
position: "relative",
|
||||||
height: 1,
|
|
||||||
background: stylesTokens.goldLine,
|
|
||||||
opacity: 0.45,
|
|
||||||
pointerEvents: "none",
|
|
||||||
}}
|
}}
|
||||||
/>
|
>
|
||||||
|
<div
|
||||||
<div style={{ position: "relative", padding: 14, height: "100%", display: "grid", gridTemplateRows: "auto 1fr" }}>
|
style={{
|
||||||
<div style={{ fontWeight: 900, fontSize: 12.5, color: stylesTokens.textDim, opacity: 0.95 }}>
|
color: GOLD,
|
||||||
Hogwarts Points
|
fontWeight: 900,
|
||||||
|
fontSize: 46,
|
||||||
|
letterSpacing: 0.5,
|
||||||
|
lineHeight: 1,
|
||||||
|
textShadow:
|
||||||
|
"0 1px 0 rgba(0,0,0,0.25), 0 0 18px rgba(242,210,122,0.22)",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{value}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
display: "flex",
|
color: GOLD,
|
||||||
alignItems: "baseline",
|
fontWeight: 900,
|
||||||
justifyContent: "center",
|
fontSize: 18,
|
||||||
gap: 10,
|
letterSpacing: 1.3,
|
||||||
marginTop: 8,
|
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,
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<div
|
HP
|
||||||
style={{
|
|
||||||
color: stylesTokens.textGold,
|
|
||||||
fontWeight: 900,
|
|
||||||
fontSize: 44,
|
|
||||||
letterSpacing: 0.5,
|
|
||||||
textShadow: "0 0 18px rgba(255, 215, 120, 0.18)",
|
|
||||||
lineHeight: 1,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{value}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
color: stylesTokens.textGold,
|
|
||||||
fontWeight: 900,
|
|
||||||
fontSize: 18,
|
|
||||||
letterSpacing: 1.2,
|
|
||||||
opacity: 0.95,
|
|
||||||
transform: "translateY(-4px)",
|
|
||||||
textShadow: "0 0 14px rgba(255, 215, 120, 0.16)",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
HP
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
marginTop: 10,
|
|
||||||
display: "flex",
|
|
||||||
justifyContent: "center",
|
|
||||||
gap: 8,
|
|
||||||
opacity: 0.85,
|
|
||||||
color: stylesTokens.textDim,
|
|
||||||
fontSize: 11.5,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<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>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{/* small stamp */}
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
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)",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Score
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
</div>
|
||||||
};
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|||||||
Reference in New Issue
Block a user