ok

2025-01-21 07:41:46 +07:00
parent 308eafa6d4
commit e0ef8d5023
7 changed files with 371 additions and 63 deletions
--- a/src/components/Coupon.css
+++ b/src/components/Coupon.css
@@ -0,0 +1,56 @@
+/* Coupon container */
+.coupon {
+    display: flex;
+    border: 2px solid #ccc;
+    height: 50%;
+    background-color: #f8f8f8;
+    border-radius: 8px;
+    font-family: Arial, sans-serif;
+    align-items: center;
+  }
+  
+  /* Left side (with the rotated code and dotted line) */
+  .coupon-left {
+    width: 80px;
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-right: 2px dotted #ccc;
+    height: 100%;
+  }
+  
+  .coupon-code {
+    writing-mode: vertical-rl;
+    font-size: 18px;
+    font-weight: bold;
+    color: #333;
+    margin: 0;
+  }
+  
+  .dotted-line {
+    position: absolute;
+    left: 0;
+    bottom: 10px;
+    width: 60px;
+    border-bottom: 2px dotted #ccc;
+  }
+  
+  /* Right side (coupon details) */
+  .coupon-right {
+    padding: 10px;
+    flex-grow: 1;
+  }
+  .coupon-value {
+    font-size: clamp(18px, 3vw, 24px); /* Minimum 18px, 6vw (responsive), Maximum 24px */
+    font-weight: bold;
+    color: #2c3e50;
+    text-align: left;
+  }
+  
+  .coupon-period,
+  .coupon-expiration {
+    font-size: 14px;
+    color: #7f8c8d;
+  }
+