diff --git a/app.js b/app.js index 901f84f..59b8eaa 100644 --- a/app.js +++ b/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 + ? `🎉 1st Month €${(Math.max(0, cents - discountCents) / 100).toFixed(2)}` + : ""; + return ` + `; + }) + .join(""); + backdrop.classList.add("open"); } diff --git a/index.html b/index.html index 5f73ec3..9963f09 100644 --- a/index.html +++ b/index.html @@ -957,48 +957,7 @@ Credits will be assigned to key:
- +A 10% handling fee is added on top of the OpenRouter credits value. diff --git a/styles.css b/styles.css index 5307c7c..08bacf8 100644 --- a/styles.css +++ b/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);