diff --git a/attached_assets/image_1760173282412.png b/attached_assets/image_1760173282412.png new file mode 100644 index 0000000..122ff7c Binary files /dev/null and b/attached_assets/image_1760173282412.png differ diff --git a/client/src/pages/image-editor.tsx b/client/src/pages/image-editor.tsx index 55d83a3..cb9eff9 100644 --- a/client/src/pages/image-editor.tsx +++ b/client/src/pages/image-editor.tsx @@ -26,6 +26,7 @@ interface PriceBadge { price: string; color: "red" | "yellow"; position: "north_east" | "south_east" | "north_west" | "south_west"; + size: number; // Font size in pixels } interface Logo { @@ -58,7 +59,8 @@ export default function ImageEditor() { enabled: false, price: "", color: "red", - position: "north_east" + position: "north_east", + size: 20 // Default font size }); const [logo, setLogo] = useState({ @@ -239,24 +241,37 @@ export default function ImageEditor() { position: absolute; color: white; font-weight: bold; - font-size: 16px; z-index: 11; pointer-events: none; text-transform: uppercase; + white-space: nowrap; } .ribbon-text.north_west { - top: 20px; - left: 8px; + top: 30px; + left: 5px; transform: rotate(-45deg); - transform-origin: center; + transform-origin: left center; } .ribbon-text.north_east { - top: 20px; - right: 8px; + top: 30px; + right: 5px; transform: rotate(45deg); - transform-origin: center; + transform-origin: right center; + } + + /* Adaptive text sizes for ribbon */ + .ribbon-text.small { + font-size: 10px; + } + + .ribbon-text.medium { + font-size: 14px; + } + + .ribbon-text.large { + font-size: 16px; } `} @@ -471,6 +486,21 @@ export default function ImageEditor() { + +
+
+ + {priceBadge.size}px +
+ setPriceBadge({ ...priceBadge, size: value[0] })} + min={12} + max={40} + step={1} + data-testid="slider-price-size" + /> +
)} @@ -567,7 +597,9 @@ export default function ImageEditor() { {ribbon.enabled && ribbon.text && ( <>
-
+
8 ? 'small' : ribbon.text.length > 5 ? 'medium' : 'large' + }`}> {ribbon.text}
@@ -581,9 +613,10 @@ export default function ImageEditor() { priceBadge.position === "south_east" ? "bottom-4 right-4" : priceBadge.position === "south_west" ? "bottom-4 left-4" : "top-4 left-4" - } px-4 py-2 rounded-full text-white font-bold text-lg z-10 ${ + } px-4 py-2 rounded-full text-white font-bold z-10 ${ priceBadge.color === "red" ? "bg-red-600" : "bg-yellow-500" }`} + style={{ fontSize: `${priceBadge.size}px` }} > €{priceBadge.price}