add yoo-kassa payment(test setup)

2026-02-16 20:11:59 +07:00
parent bcbe64807b
commit 57c99bd981
6 changed files with 346 additions and 38 deletions
@@ -3942,4 +3942,111 @@
 			animation: spin 1s linear infinite;
 		}
 	}
+}
+
+.modal-window-confirm-payment {
+	background: white;
+	border-radius: 20px;
+	max-width: 480px;
+	margin: 20px;
+	text-align: center;
+	position: relative;
+
+	&-title {
+		color: #1e293b;
+		margin-bottom: 12px;
+		font-size: 24px;
+	}
+
+	&-tariff {
+		color: #1e293b;
+		margin-bottom: 8px;
+		font-size: 20px;
+	}
+
+	&-description {
+		color: #64748b;
+		margin-bottom: 12px;
+		font-size: 16px;
+	}
+
+	&-price {
+		background: #f8fafc;
+		padding: 12px;
+		border-radius: 10px;
+		margin-bottom: 30px;
+
+		div {
+			&:first-child {
+				font-size: 26px;
+				font-weight: 700;
+				color: #6366f1;
+			}
+
+			&:last-child {
+				color: #64748b;
+				font-size: 16px;
+			}
+		}
+	}
+
+	.btn-primary {
+		width: 100%;
+		padding: 12px 18px;
+		border: none;
+		border-radius: 12px;
+		font-size: 16px;
+		font-weight: 600;
+		cursor: pointer;
+		transition: all 0.3s ease;
+		position: relative;
+		overflow: hidden;
+
+		&.btn-confirm {
+			background: linear-gradient(135deg, #6366f1, #8b5cf6);
+			color: white;
+		}
+
+		&.btn-cancel {
+			background: transparent;
+			border: 2px solid #6366f1;
+			color: #6366f1;
+		}
+
+		&.btn-confirm:disabled,
+		.btn-cancel:disabled {
+			opacity: 0.6;
+			cursor: not-allowed;
+			pointer-events: none;
+		}
+
+		.btn-loading {
+			position: relative;
+			/* Можно добавить анимацию загрузки */
+		}
+
+		.btn-loading::after {
+			content: '';
+			position: absolute;
+			width: 16px;
+			height: 16px;
+			top: 50%;
+			right: 10px;
+			transform: translateY(-50%);
+			border: 2px solid transparent;
+			border-top-color: #ffffff;
+			border-radius: 50%;
+			animation: button-loading-spinner 1s ease infinite;
+		}
+
+		@keyframes button-loading-spinner {
+			from {
+				transform: translateY(-50%) rotate(0turn);
+			}
+
+			to {
+				transform: translateY(-50%) rotate(1turn);
+			}
+		}
+	}
 }