promo

app.js

@@ -894,9 +894,38 @@ function buyCredits(keyName) {
   const backdrop = document.getElementById("credits-backdrop");
   backdrop._keyName = keyName;
   document.getElementById("credits-key-name").textContent = keyName;
-  // default to first option
-  const radios = backdrop.querySelectorAll('input[name="credits-amount"]');
-  radios.forEach((r, i) => (r.checked = i === 0));
+
+  // Detect coupon discount from trailing digits in the code
+  const couponInput = document.getElementById("coupon-input");
+  const couponCode =
+    couponApplied && couponInput ? couponInput.value.trim() : "";
+  const discountMatch = couponCode.match(/(\d+)$/);
+  const discountCents = discountMatch ? parseInt(discountMatch[1], 10) : 0;
+
+  const prices = [
+    { value: "5.50", cents: 550 },
+    { value: "11.00", cents: 1100 },
+    { value: "22.00", cents: 2200 },
+    { value: "55.00", cents: 5500 },
+  ];
+
+  backdrop.querySelector(".credits-options").innerHTML = prices
+    .map(({ value, cents }, i) => {
+      const badgeHtml =
+        discountCents > 0
+          ? `<span class="credits-first-month">🎉 1st Month &euro;${(Math.max(0, cents - discountCents) / 100).toFixed(2)}</span>`
+          : "";
+      return `
+        <label class="credits-option">
+          <input type="radio" name="credits-amount" value="${value}"${i === 0 ? " checked" : ""} />
+          <div class="credits-option-content">
+            <span class="credits-option-label">&euro;&thinsp;${value}</span>
+            ${badgeHtml}
+          </div>
+        </label>`;
+    })
+    .join("");
+
   backdrop.classList.add("open");
 }
 

index.html

@@ -957,48 +957,7 @@
                         Credits will be assigned to key:
                         <span id="credits-key-name"></span>
                     </p>
-                    <div class="credits-options">
-                        <label class="credits-option">
-                            <input
-                                type="radio"
-                                name="credits-amount"
-                                value="5.50"
-                            />
-                            <span class="credits-option-label"
-                                >&euro;&thinsp;5.50</span
-                            >
-                        </label>
-                        <label class="credits-option">
-                            <input
-                                type="radio"
-                                name="credits-amount"
-                                value="11.00"
-                            />
-                            <span class="credits-option-label"
-                                >&euro;&thinsp;11.00</span
-                            >
-                        </label>
-                        <label class="credits-option">
-                            <input
-                                type="radio"
-                                name="credits-amount"
-                                value="22.00"
-                            />
-                            <span class="credits-option-label"
-                                >&euro;&thinsp;22.00</span
-                            >
-                        </label>
-                        <label class="credits-option">
-                            <input
-                                type="radio"
-                                name="credits-amount"
-                                value="55.00"
-                            />
-                            <span class="credits-option-label"
-                                >&euro;&thinsp;55.00</span
-                            >
-                        </label>
-                    </div>
+                    <div class="credits-options"></div>
                     <p class="credits-fee-note">
                         A 10% handling fee is added on top of the OpenRouter
                         credits value.

styles.css

@@ -1656,6 +1656,12 @@ body::after {
     cursor: pointer;
 }
 
+.credits-option-content {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+}
+
 .credits-option-label {
     font-size: 15px;
     font-weight: 600;
@@ -1663,6 +1669,20 @@ body::after {
     letter-spacing: 0.02em;
 }
 
+.credits-first-month {
+    display: inline-block;
+    font-size: 10px;
+    font-weight: 700;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+    color: var(--warning);
+    background: rgba(255, 170, 0, 0.12);
+    border: 1px solid rgba(255, 170, 0, 0.35);
+    border-radius: 4px;
+    padding: 1px 6px;
+    white-space: nowrap;
+}
+
 .credits-fee-note {
     font-size: 12px;
     color: var(--text-muted);