From 06b6544653ef34df7369b54fb57e6fc06ce34817 Mon Sep 17 00:00:00 2001
From: nessi <sascha@nesterovic.cc>
Date: Sat, 7 Feb 2026 12:21:20 +0100
Subject: [PATCH] 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.
---
 frontend/src/App.jsx | 186 +++++++++++++++++++++++--------------------
 1 file changed, 100 insertions(+), 86 deletions(-)

diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index c5e95d2..3f77a31 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -424,127 +424,141 @@ export default function App() {
   };
 
   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
         style={{
-          borderRadius: 18,
+          borderRadius: 16,
           border: `1px solid ${stylesTokens.panelBorder}`,
-          boxShadow: "0 14px 40px rgba(0,0,0,0.45)",
-          overflow: "hidden",
+          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",
-          minWidth: 0,
-          background: stylesTokens.panelBg,
-          backdropFilter: "blur(10px)",
+          overflow: "hidden",
+          display: "grid",
+          placeItems: "center",
+          padding: 12,
         }}
       >
-        {/* Pergament-Hintergrund */}
+        {/* paper speckles */}
         <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))
+              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: 1,
+            opacity: 0.55,
             pointerEvents: "none",
           }}
         />
 
-        {/* Papier-Textur / Flecken */}
+        {/* gold frame line */}
         <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",
+            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",
           }}
         />
 
-        {/* goldene Linie */}
+        {/* value */}
         <div
           style={{
-            position: "absolute",
-            left: 0,
-            right: 0,
-            top: 0,
-            height: 1,
-            background: stylesTokens.goldLine,
-            opacity: 0.45,
-            pointerEvents: "none",
+            display: "flex",
+            alignItems: "baseline",
+            gap: 10,
+            position: "relative",
           }}
-        />
-
-        <div style={{ position: "relative", padding: 14, height: "100%", display: "grid", gridTemplateRows: "auto 1fr" }}>
-          <div style={{ fontWeight: 900, fontSize: 12.5, color: stylesTokens.textDim, opacity: 0.95 }}>
-            Hogwarts Points
+        >
+          <div
+            style={{
+              color: GOLD,
+              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
             style={{
-              display: "flex",
-              alignItems: "baseline",
-              justifyContent: "center",
-              gap: 10,
-              marginTop: 8,
+              color: GOLD,
+              fontWeight: 900,
+              fontSize: 18,
+              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,
             }}
           >
-            <div
-              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>
+            HP
           </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>
+  );
+};
+
   
 
   return (