From de096ce76172633c3dbe72e994c27328667508a4 Mon Sep 17 00:00:00 2001 From: Cursor Agent Date: Mon, 24 Nov 2025 10:20:12 +0000 Subject: [PATCH 01/34] feat: Add edit subscription page and modal Co-authored-by: sn.gokul --- profile/edit-subscription.html | 394 +++++++++++++++++++++++++++++++++ 1 file changed, 394 insertions(+) create mode 100644 profile/edit-subscription.html diff --git a/profile/edit-subscription.html b/profile/edit-subscription.html new file mode 100644 index 0000000..213a1e6 --- /dev/null +++ b/profile/edit-subscription.html @@ -0,0 +1,394 @@ + + + + + Edit Subscription Demo + + + +
+

# Available Widgets

+
    +
  • View / Edit Subscription details — Demo
    • +
  • Manage payment methods — Demo
    • +
  • Billing History — Demo
    • +
  • Manage Addresses — Demo
    • +
  • Manage account information — Demo
    • +
+ +
+

Plan – Keep Moving

+

$300 billed every month

+ +
+
+ Shipping +

Chris Foo
Reichenbachstraße 6
München 80469

+
+ +
+ +
+
+ Paid via +

VISA ending 1111

+
+ +
+ +
+ + +
+
+
+ + + + + + From 5b94811d70ac0e44e8b66e5595d5c1d330575dd0 Mon Sep 17 00:00:00 2001 From: Cursor Agent Date: Mon, 24 Nov 2025 10:34:38 +0000 Subject: [PATCH 02/34] Refactor: Improve modal and subscription UI styling Co-authored-by: sn.gokul --- profile/edit-subscription.html | 713 +++++++++++++++++++++++---------- 1 file changed, 497 insertions(+), 216 deletions(-) diff --git a/profile/edit-subscription.html b/profile/edit-subscription.html index 213a1e6..7b7b3a1 100644 --- a/profile/edit-subscription.html +++ b/profile/edit-subscription.html @@ -14,9 +14,8 @@ margin: 0; min-height: 100vh; display: flex; - align-items: flex-start; justify-content: center; - padding: 48px 16px; + padding: 64px 16px; } .page { @@ -25,76 +24,41 @@ background: #fff; border-radius: 20px; padding: 40px; - box-shadow: 0 25px 45px rgba(15, 43, 63, 0.08); + box-shadow: 0 35px 80px rgba(4, 20, 46, 0.06); } h1 { margin-top: 0; font-size: 32px; + color: #0d243b; } - ul { - line-height: 1.9; - margin-bottom: 40px; + ul.widget-list { + list-style: disc; + padding-left: 20px; + margin-bottom: 32px; + color: #0d243b; } - a { - color: #1161ff; - text-decoration: none; - } - - .card { - background: #f7f9ff; - border-radius: 20px; - padding: 32px; - box-shadow: inset 0 0 0 1px #e0e7ff; - } - - .card h2 { - margin: 0 0 4px; - } - - .subtext { - color: #6b7688; - font-size: 14px; - margin-bottom: 20px; - } - - .info-block { - background: #fff; - border-radius: 16px; - padding: 16px 20px; - margin: 8px 0; - box-shadow: 0 10px 25px rgba(15, 43, 63, 0.08); - display: flex; - justify-content: space-between; - align-items: center; - } - - .actions { - margin-top: 24px; - display: flex; - gap: 20px; + ul.widget-list li { + margin-bottom: 8px; } - .ghost-button { - border: none; - background: transparent; - color: #1161ff; - font-size: 16px; - cursor: pointer; - padding: 0; + .link { + color: #1751ff; + text-decoration: none; + font-weight: 600; } - /* Modal */ + /* modal */ .overlay { position: fixed; inset: 0; - background: rgba(14, 23, 38, 0.55); + background: rgba(8, 16, 32, 0.6); display: none; align-items: center; justify-content: center; - padding: 16px; + padding: 12px; } .overlay.open { @@ -102,18 +66,12 @@ } .modal { - background: #f7f9ff; - border-radius: 24px; - width: min(540px, 100%); - padding: 32px; + background: #f8faff; + border-radius: 28px; + width: min(480px, 100%); position: relative; - box-shadow: 0 35px 60px rgba(9, 25, 45, 0.35); - max-height: 96vh; - overflow-y: auto; - } - - .modal h3 { - margin: 0 0 16px; + box-shadow: 0 40px 80px rgba(6, 16, 38, 0.3); + overflow: hidden; } .close { @@ -122,273 +80,596 @@ right: 22px; border: none; background: transparent; - font-size: 24px; - color: #6b7688; + color: #6b7489; + font-size: 26px; cursor: pointer; } - .select-box, - .input-box { - width: 100%; - border: none; - border-radius: 14px; - padding: 18px; - font-size: 16px; - margin-bottom: 16px; - box-shadow: inset 0 0 0 1px #d8e1f9; - background: #fff; + .screen { + display: none; + padding: 32px; + min-height: 520px; } - .addon-grid { - display: grid; + .screen.active { + display: block; + } + + .modal-header { + display: flex; + align-items: center; gap: 12px; - margin-bottom: 16px; + margin-bottom: 24px; + } + + .modal-header h3 { + margin: 0; + font-size: 20px; + } + + .back { + border: none; + background: transparent; + font-size: 20px; + color: #0d243b; + cursor: pointer; } - .addon { + .card { background: #fff; - border-radius: 14px; - padding: 16px; + border-radius: 22px; + padding: 24px; + box-shadow: 0 30px 60px rgba(15, 34, 70, 0.08); + margin-bottom: 18px; + } + + .plan-chip { display: flex; - align-items: center; justify-content: space-between; - box-shadow: inset 0 0 0 1px #d6def5; + align-items: center; + background: #eef3ff; + border-radius: 18px; + padding: 16px 20px; + margin-bottom: 16px; + cursor: pointer; } - .addon label { - display: flex; - flex-direction: column; + .plan-chip strong { + display: block; + font-size: 16px; + } + + .plan-chip small { + color: #6e7a92; + } + + .info-block { + border-top: 1px solid #edf0fa; + padding-top: 16px; + margin-top: 16px; + } + + .info-block strong { + display: block; + margin-bottom: 6px; + } + + .link-button { + display: inline-flex; + color: #1751ff; + text-decoration: none; font-weight: 600; + margin-right: 20px; cursor: pointer; } - .addon small { - font-weight: 400; - color: #6b7688; + .line-items { + list-style: none; + padding: 0; + margin: 0 0 16px; + } + + .line-items li { + display: flex; + justify-content: space-between; + align-items: center; + padding: 10px 0; + border-bottom: 1px solid #edf0fa; + } + + .line-items li:last-child { + border-bottom: none; } - .pill { - background: #e0ecff; - color: #1161ff; + .badge { + display: inline-flex; + align-items: center; + padding: 4px 10px; + font-size: 11px; border-radius: 999px; - padding: 4px 12px; - font-size: 12px; margin-left: 8px; + background: #e8f1ff; + color: #1751ff; + font-weight: 600; } - .summary { - background: #fff; + .input-box { + width: 100%; border-radius: 16px; - padding: 18px; - box-shadow: inset 0 0 0 1px #d8e1f9; + border: 1px solid #dfe4f3; + padding: 16px; + font-size: 15px; margin-bottom: 16px; + background: #fff; } - .summary-row { - display: flex; - justify-content: space-between; - margin-bottom: 6px; + .summary-card { + background: #fff; + border-radius: 18px; + padding: 18px; + box-shadow: inset 0 0 0 1px #dfe4f3; + margin-bottom: 18px; + cursor: pointer; + } + + .summary-card strong { + display: block; + font-size: 18px; } - .save-button { + .primary { width: 100%; - padding: 16px; border: none; - border-radius: 14px; + border-radius: 18px; + padding: 16px; + background: linear-gradient(135deg, #1751ff, #6c7dff); + color: #fff; font-size: 16px; font-weight: 600; - color: #fff; - background: linear-gradient(135deg, #1161ff, #5f7bff); cursor: pointer; } .status { text-align: center; - color: #0b7d4b; + color: #118657; font-weight: 600; - margin-top: 14px; + margin-top: 12px; display: none; } .status.visible { display: block; } + + /* Plan & Addon screens */ + .selector { + width: 100%; + border-radius: 18px; + padding: 16px; + border: 1px solid #dfe4f3; + font-size: 15px; + margin-bottom: 18px; + } + + .frequency-option { + display: flex; + justify-content: space-between; + align-items: center; + padding: 14px; + border-radius: 16px; + border: 1px solid #dfe4f3; + margin-bottom: 12px; + cursor: pointer; + } + + .frequency-option.active { + border-color: #1751ff; + background: #eef3ff; + } + + .addon-list { + display: flex; + flex-direction: column; + gap: 14px; + margin-bottom: 20px; + } + + .addon-item { + display: flex; + justify-content: space-between; + align-items: center; + padding: 16px; + border-radius: 18px; + background: #fff; + border: 1px solid #dfe4f3; + } + + .addon-item label { + display: flex; + flex-direction: column; + font-weight: 600; + } + + .addon-item input { + width: 20px; + height: 20px; + } + + .order-list { + list-style: none; + padding: 0; + margin: 24px 0 0; + } + + .order-list li { + display: flex; + justify-content: space-between; + padding: 10px 0; + }

# Available Widgets

-
    -
  • View / Edit Subscription details — Demo
    • -
  • Manage payment methods — Demo
    • -
  • Billing History — Demo
    • -
  • Manage Addresses — Demo
    • -
  • Manage account information — Demo
    • +
      +
    • + View / Edit Subscription details — + Demo +
      • +
    • Manage payment methods — Demo
      • +
    • Billing History — Demo
      • +
    • Manage Addresses — Demo
      • +
    • Manage account information — Demo
    +
+ +