New charge page

pages/charge/charge.pixy

@@ -5,25 +5,69 @@ component Charge(user *arn.User)
 
 	p.text-center.mountable You can add balance via PayPal. 1 Japanese Yen equals 1 Gem.
 
-	.buttons
+	.payment-cards.feature-cards-alternative-color
-		button.action.mountable(data-trigger="click", data-action="chargeUp", data-amount=1000)
+		.payment-card.action.mountable(data-trigger="click", data-action="chargeUp", data-amount=1000)
-			Icon("diamond")
+			.payment-card-icon
-			span 1000
+				RawIcon("diamond")
+			
+			.payment-card-text
+				p.payment-amount 1,000 ¥
+				p.payment-amount-converted ≈ 9.46 $
 
-		button.action.mountable(data-trigger="click", data-action="chargeUp", data-amount=2000)
+		.payment-card.action.mountable(data-trigger="click", data-action="chargeUp", data-amount=2000)
-			Icon("diamond")
+			.payment-card-icon
-			span 2000
+				RawIcon("diamond")
+			
+			.payment-card-text
+				p.payment-amount 2,000 ¥
+				p.payment-amount-converted ≈ 18.92 $
 
-		button.action.mountable(data-trigger="click", data-action="chargeUp", data-amount=3000)
+		.payment-card.action.mountable(data-trigger="click", data-action="chargeUp", data-amount=3000)
-			Icon("diamond")
+			.payment-card-icon
-			span 3000
+				RawIcon("diamond")
+			
+			.payment-card-text
+				p.payment-amount 3,000 ¥
+				p.payment-amount-converted ≈ 28.38 $
 
-		button.action.mountable(data-trigger="click", data-action="chargeUp", data-amount=6000)
+		.payment-card.action.mountable(data-trigger="click", data-action="chargeUp", data-amount=6000)
-			Icon("diamond")
+			.payment-card-icon
-			span 6000
+				RawIcon("diamond")
+			
+			.payment-card-text
+				p.payment-amount 6,000 ¥
+				p.payment-amount-converted ≈ 56.76 $
 
-		button.action.mountable(data-trigger="click", data-action="chargeUp", data-amount=12000)
+		.payment-card.action.mountable(data-trigger="click", data-action="chargeUp", data-amount=12000)
-			Icon("diamond")
+			.payment-card-icon
-			span 12000
+				RawIcon("diamond")
+			
+			.payment-card-text
+				p.payment-amount 12,000 ¥
+				p.payment-amount-converted ≈ 113.52 $
 
-	.footer.text-center.mountable Different currencies will automatically be converted.
+		.payment-card.action.mountable(data-trigger="click", data-action="chargeUp", data-amount=25000)
+			.payment-card-icon
+				RawIcon("diamond")
+			
+			.payment-card-text
+				p.payment-amount 25,000 ¥
+				p.payment-amount-converted ≈ 236.50 $
+
+		.payment-card.action.mountable(data-trigger="click", data-action="chargeUp", data-amount=50000)
+			.payment-card-icon
+				RawIcon("diamond")
+			
+			.payment-card-text
+				p.payment-amount 50,000 ¥
+				p.payment-amount-converted ≈ 473.00 $
+
+		.payment-card.action.mountable(data-trigger="click", data-action="chargeUp", data-amount=75000)
+			.payment-card-icon
+				RawIcon("diamond")
+			
+			.payment-card-text
+				p.payment-amount 75,000 ¥
+				p.payment-amount-converted ≈ 709.50 $
+
+	.footer.mountable Different currencies will automatically be converted.

pages/paypal/paypal.go

@@ -26,7 +26,7 @@ func CreatePayment(ctx *aero.Context) string {
 	}
 
 	switch amount {
-	case "1000", "2000", "3000", "6000", "12000":
+	case "1000", "2000", "3000", "6000", "12000", "25000", "50000", "75000":
 		// OK
 	default:
 		return ctx.Error(http.StatusBadRequest, "Incorrect amount", nil)

pages/support/support.pixy

@@ -30,8 +30,6 @@ component Support(user *arn.User)
 			
 			.feature-card-text
 				p High-quality servers cost a lot of money on a monthly basis and need to be maintained.
-		
-		//- 
 
 		.feature-card.mountable
 			.feature-card-icon

pages/support/support.scarlet

@@ -1,10 +1,13 @@
-.feature-cards
+.feature-cards,
+.payment-cards
 	horizontal-wrap
 	justify-content center
+	width 100%
 	max-width 1200px
 	margin content-padding auto
 
-.feature-card
+.feature-card,
+.payment-card
 	vertical
 	flex-basis 240px
 	border-radius 5px
@@ -19,8 +22,14 @@
 		box-shadow shadow-medium
 		text-shadow none
 
+.payment-card
+	:hover
+		cursor pointer
+
 .feature-card-icon,
-.feature-card-text
+.feature-card-text,
+.payment-card-icon,
+.payment-card-text
 	horizontal
 	justify-content center
 	align-items center
@@ -28,16 +37,29 @@
 	padding 1rem
 	margin 0
 
-.feature-card-icon
+.feature-card-icon,
+.payment-card-icon
 	font-size 3rem
 	background feature-card-color
 	color feature-card-icon-color
 
-.feature-card-text
+.feature-card-text,
+.payment-card-text
+	vertical
 	color text-color
 
+.payment-amount
+	font-size 1.2rem
+	font-weight bold
+
+.payment-amount-converted
+	font-size 0.9rem
+	opacity 0.5
+	margin-top 0
+
 .feature-cards-alternative-color
-	.feature-card-icon
+	.feature-card-icon,
+	.payment-card-icon
 		background feature-card-alternative-color
 
 .support-button-container