<script>
document.addEventListener("DOMContentLoaded", function () {
// Найти все тарифные колонки
const tariffColumns = document.querySelectorAll(".t1071__content"); // Замените на ваш реальный класс
// Проверяем, найдены ли колонки
if (tariffColumns.length > 0) {
tariffColumns.forEach((column, index) => {
// Создаем новую кнопку
const button = document.createElement("a");
button.textContent = "Забронировать"; // Текст кнопки
button.href = getBookingLink(index); // Уникальная ссылка для каждой кнопки
button.classList.add("booking-button"); // Класс для стилизации
button.target = "_blank"; // Открывать ссылку в новой вкладке. "_self" — открывает на этой же странице
// Вставляем кнопку в колонку (в самый низ)
column.appendChild(button);
});
}
// Уникальные ссылки для каждой кнопки
function getBookingLink(index) {
const links = [
"https://example.com/plan1", // Первая колонка
"https://example.com/plan2", // Вторая колонка
"https://example.com/plan3" // Третья колонка
];
return links[index] || "#"; // Если ссылки нет, возвращаем "#"
}
});
</script>
<style>
.t1071__content {
display: flex;
flex-direction: column;
justify-content: space-between; /* Контент сверху, кнопка внизу */
height: 100%; /* Убедитесь, что карточка занимает всю высоту */
}
.booking-button {
display: inline-block;
margin-top: 20px; /* отступ от другой кнопки */
padding: 10px 20px;
width: 80%; /* Установите ширину кнопки (80% от карточки) */
max-width: 200px; /* Ограничение ширины кнопки */
background-color: #253B80; /* Цвет фона кнопки */
color: #fff; /* Цвет текста */
font-size: 16px;
font-family: "Montserrat", sans-serif; /* Шрифт текста */
text-align: center;
text-decoration: none;
border-radius: 5px; /* Закругленные углы */
align-self: center; /* Центрирует кнопку по горизонтали */
transition: background-color 0.3s ease;
}
.booking-button:hover {
background-color: #1d2e63; /* Цвет кнопки при наведении */
}
</style>