UPDATE - shop system and UI

Author: MeMMa137

client/src/components/AdminShopPage.jsx

@@ -5,7 +5,7 @@ const emptyForm = {
   name: "",
   price: "",
   priceUsd: "",
-  dollarPerHour: "",
+  discountPercent: "",
   maxPerPerson: "",
   itemLink: "",
   imageUrl: "",
@@ -185,7 +185,7 @@ export function AdminShopPage() {
                   <th>Max / person</th>
                   <th>bricks</th>
                   <th>$ price</th>
-                  <th>$/h</th>
+                  <th>Discount</th>
                   <th>Link</th>
                   <th>Active</th>
                   <th>Actions</th>
@@ -204,7 +204,7 @@ export function AdminShopPage() {
                       <td>{item.maxPerPerson ?? "None"}</td>
                       <td>{item.price ?? "—"}</td>
                       <td>{item.priceUsd ?? "—"}</td>
-                      <td>{item.dollarPerHour ?? "—"}</td>
+                      <td>{item.discountPercent ? `${item.discountPercent}% off` : "—"}</td>
                       <td>{item.itemLink ? <a href={item.itemLink} target="_blank" rel="noreferrer">View</a> : "—"}</td>
                       <td>{item.active ? "Yes" : "No"}</td>
                       <td>
@@ -268,18 +268,21 @@ function ShopItemForm({ value, submitLabel, onChange, onSubmit }) {
         />
       </label>
       <label>
-        $/h *
+        bricks
+        <input type="number" value={brickValue || ""} readOnly />
+      </label>
+      <label>
+        Discount %
         <input
           type="number"
-          step="0.01"
-          value={value.dollarPerHour || ""}
-          onChange={(event) => onChange("dollarPerHour", event.target.value)}
+          min="0"
+          max="100"
+          step="1"
+          placeholder="25"
+          value={value.discountPercent || ""}
+          onChange={(event) => onChange("discountPercent", event.target.value)}
         />
       </label>
-      <label>
-        bricks
-        <input type="number" value={brickValue || ""} readOnly />
-      </label>
       <label>
         Max purchases per person
         <input type="number" value={value.maxPerPerson || ""} onChange={(event) => onChange("maxPerPerson", event.target.value)} />

client/src/components/ShopPage.css

@@ -148,6 +148,49 @@
   font-size: clamp(1.4rem, 2vw, 2.2rem);
 }
 
+.shop-page__discount {
+  position: absolute;
+  left: -0.45rem;
+  top: -0.62rem;
+  z-index: 2;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: min(5.4rem, 8vw);
+  min-height: min(3.15rem, 4.4vw);
+  padding: 0.35rem 0.55rem;
+  border: 3px solid #fff2bb;
+  border-radius: 999px;
+  background: radial-gradient(circle at 30% 25%, #fff7a8 0%, #ffcb3d 38%, #ff6848 100%);
+  color: #7a1b00;
+  font-size: clamp(0.88rem, 1.25vw, 1.2rem);
+  font-weight: 900;
+  line-height: 1;
+  text-align: center;
+  text-transform: uppercase;
+  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.65);
+  box-shadow: 0 5px 0 #9b2a16, 0 0 18px rgba(255, 203, 61, 0.75);
+  transform: rotate(-10deg);
+  animation: shop-discount-bounce 1.45s ease-in-out infinite;
+}
+
+@keyframes shop-discount-bounce {
+  0%,
+  100% {
+    transform: rotate(-10deg) scale(1);
+    filter: brightness(1);
+  }
+
+  45% {
+    transform: rotate(-7deg) scale(1.08);
+    filter: brightness(1.12);
+  }
+
+  70% {
+    transform: rotate(-13deg) scale(0.98);
+  }
+}
+
 .shop-page__nav {
   position: relative;
   z-index: 4;
@@ -312,27 +355,6 @@
   font: inherit;
 }
 
-.shop-page__modal-rules {
-  margin-top: 0.8rem;
-  padding: 0.7rem;
-  border: 2px solid #c7d6ff;
-  border-radius: 12px;
-  background: rgba(255, 255, 255, 0.58);
-  color: #27376f;
-}
-
-.shop-page__modal-rules p {
-  margin: 0.35rem 0 0.55rem;
-  font-size: 0.88rem;
-}
-
-.shop-page__modal-rules label {
-  display: flex;
-  align-items: flex-start;
-  gap: 0.45rem;
-  font-size: 0.86rem;
-}
-
 .shop-page__modal-total {
   display: flex;
   align-items: center;
@@ -379,6 +401,69 @@
   filter: brightness(1.05);
 }
 
+.shop-page__confirm-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 30;
+  display: grid;
+  place-items: center;
+  padding: 1rem;
+  background: rgba(15, 20, 36, 0.72);
+}
+
+.shop-page__confirm {
+  position: relative;
+  width: min(28rem, 92vw);
+  border: 4px solid #1b4cc0;
+  border-radius: 16px;
+  padding: 1.15rem;
+  background: linear-gradient(160deg, #f6f7fd 0%, #dee6ff 100%);
+  color: #27376f;
+  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
+}
+
+.shop-page__confirm h3 {
+  margin: 0 2rem 0.75rem 0;
+  color: #12235c;
+  font-size: 1.35rem;
+}
+
+.shop-page__confirm p {
+  margin: 0.8rem 0;
+  line-height: 1.45;
+}
+
+.shop-page__confirm a {
+  color: #1b4cc0;
+  font-weight: 800;
+}
+
+.shop-page__confirm-toggle {
+  display: flex;
+  align-items: center;
+  gap: 0.55rem;
+  width: fit-content;
+  font-weight: 800;
+  color: #12235c;
+}
+
+.shop-page__confirm-toggle input {
+  width: 1.2rem;
+  height: 1.2rem;
+  accent-color: #dd3b45;
+}
+
+.shop-page__confirm-total {
+  margin: 0.9rem 0 0;
+  padding: 0.65rem 0.75rem;
+  border: 2px dashed #9cb7ff;
+  border-radius: 12px;
+  background: rgba(255, 255, 255, 0.58);
+  color: #12235c;
+  font-weight: 900;
+  text-align: center;
+}
+
 @media (max-width: 980px) {
   .shop-page__left-panel {
     width: min(16rem, 27vw);