Решено Ищу красивый html код для платного повышения
- Автор темы AuraDev
- Дата начала
Решение
- Сен
- 195
- 35
Пользователь
Pawn:
<!-- ПРЕМИУМ -->
<div class="dc_card sponsor" data-target="#donate" data-toggle="modal" onclick="changeSelection(51,51)">
<i class="bx bx-star dc_decor"></i>
<h3 class="dc_card_title"><i class='bx bxs-donate-heart'></i>Премиум Пользователь</h3>
<div class="dc_content">
<div class="exclusive_blocks">
<div class="exclusive_block">
<div class="block_title"><i class='bx bx-wrench'></i>Возможности</div>
<div class="block_stats">
<span><i class='bx bxs-star'></i>Скачивать до ∞шт ресурсов в 24-часа</span>
<span><i class='bx bx-lock-open-alt'></i>Просмотр скрытых HIDE</span>
<span><i class='bx bx-crown'></i>Тег [PREMIUM]</span>
</div>
</div>
<div class="exclusive_block">
<div class="block_title"><i class='bx bx-package'></i>БОНУСЫ</div>
<div class="block_stats">
<span><i class='bx bx-bulb'></i>Приоритетная Поддержка</span>
<span><i class='bx bx-up-arrow-alt'></i>Доступ к закрытому разделу</span>
</div>
</div>
<div class="exclusive_block">
<div class="block_title"><i class='bx bx-bomb'></i>Группа Telegram</div>
<div class="block_stats">
<span><i class='bx bx-drink'></i>Личный тэг PREMIUM</span>
<span><i class='bx bx-drink'></i>Модерация и Администрация форума</span>
</div>
</div>
</div>
<div class="dc_price">Цена за месяц 200р</div>
<div class="dc_footer"><i class='bx bx-trophy'></i>Столкнулись с проблемой? support@</div>
</div>
</div>
<div class="modal fade" id="donate">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<div class="modal_head">
<div id="store_name" class="flex_modal_head">
</span>
<div class="line_title">
<span class="line_purse1"></span>
<span class="line_purse"></span>
</div>
</div>
</button>
</div>
</div>
<style>
.card-select-container { margin-bottom: 13px; }
.basket_header {
display: flex; align-items: center; justify-content: center; height: 40px; margin-bottom: 10px;
background: linear-gradient(90deg, transparent, hsl(0deg 0% 100%/4%), transparent);
text-transform: uppercase; font-size: 12px; letter-spacing: 1px; font-weight: 500;
}
.basket_header i { font-size: 15px; margin-right: 5px; color: #f4a633; }
.card-select-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px; }
.card-option {
padding: 10px; border: 1px solid transparent; border-radius: 10px; cursor: pointer; text-align: center;
font-size: 10px; font-weight: 500; color: #ffffff; transition: all 0.3s ease; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
min-height: 49px; display: flex; align-items: center; justify-content: center;
}
#tariff_cards .card-option { background: radial-gradient(100% 100% at 50% 0, #343535 0, #302f2f 100%); }
#tariff_cards .card-option:hover { background: #43775e; transform: translateY(-3px); }
#tariff_cards .card-option.active { background: #43775e; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.25); }
#type_cards .card-option { background: radial-gradient(100% 100% at 50% 0, #343535 0, #302f2f 100%); }
#type_cards .card-option:hover, #type_cards .card-option.active { background: #43775e; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.25); }
.input-container { position: relative; margin-top: 6px; }
.input-container i.bx-steam { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 18px; color: #f4a633; }
.custom-input {
border: none; border-radius: 8px; padding: 12px 12px 12px 40px; font-size: 14px; font-weight: 500; color: #ffffff;
background: radial-gradient(100% 100% at 50% 0, #4fea9f 0, #43775e 100%); box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
width: 100%; transition: all 0.3s ease;
}
.custom-input:focus {
outline: none; background: radial-gradient(100% 100% at 50% 0, #6ff0b0 0, #5a8c73 100%);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
.custom-input::placeholder { color: rgba(255, 255, 255, 0.7); }
@media (max-width: 576px) {
.card-select-grid { grid-template-columns: 1fr; grid-template-rows: auto; }
.card-option { min-height: 50px; font-size: 13px; }
.custom-input { font-size: 13px; padding: 10px 10px 10px 36px; }
.input-container i.bx-steam { font-size: 16px; left: 10px; }
}
:root {
--glass-bg: rgba(255, 255, 255, 0.08); --glass-border: rgba(255, 255, 255, 0.12);
--text: rgba(255, 255, 255, 0.88); --text-light: rgba(255, 255, 255, 0.7);
--gold: #ffd700; --gold-light: #ffec8b; --accent: #6e6eff; --accent-dark: #4d4dff;
--bg: linear-gradient(135deg, #0f0f1f, #1a1a2e, #0a0a1a); --shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}
.dc_container { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; max-width: 1200px; width: 100%; margin: 0 auto; padding: 10px; }
.dc_card {
background: var(--glass-bg); border-radius: 18px; overflow: hidden; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
border: 1px solid var(--glass-border); padding: 22px 18px; display: flex; flex-direction: column; text-align: center;
transition: all 0.4s ease; cursor: pointer; position: relative; box-shadow: var(--shadow); height: 100%;
}
.dc_card:hover { box-shadow: 0 14px 28px rgba(0, 0, 0, 0.35); border-color: rgba(255, 255, 255, 0.22); }
.dc_card_title {
font-size: 1.7rem; font-weight: 900; color: #fff; margin-bottom: 14px; letter-spacing: 0.9px; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
display: flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; position: relative;
}
.dc_card_title i { font-size: 1.55rem; }
.dc_card_title::after { content: ''; position: absolute; bottom: -7px; left: 50%; width: 42px; height: 2.5px; background: var(--accent); transform: translateX(-50%); border-radius: 2px; }
.dc_card.sponsor {
background: linear-gradient(135deg, rgba(255, 215, 0, 0.09), rgba(255, 215, 0, 0.03)); border-color: rgba(255, 215, 0, 0.28);
}
.dc_card.sponsor::before {
content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
background: conic-gradient(from 0deg, transparent, #ffd700, #ffaa00, #ffd700, transparent); animation: rotate 6s linear infinite; z-index: -1; opacity: 0.5;
}
.dc_card.sponsor::after { content: ''; position: absolute; inset: 1.5px; background: rgba(15, 15, 35, 0.95); border-radius: 16px; z-index: -1; backdrop-filter: blur(8px); }
.dc_content { flex: 1; display: flex; flex-direction: column; justify-content: space-between; min-height: 380px; }
.exclusive_blocks { display: flex; flex-direction: column; gap: 12px; margin: 14px 0; flex: 1; }
.exclusive_block {
background: rgba(110, 110, 255, 0.07); border: 1px dashed rgba(110, 110, 255, 0.35); border-radius: 12px; padding: 12px; text-align: center;
transition: all 0.3s ease; min-height: 90px; display: flex; flex-direction: column; justify-content: center;
}
.exclusive_block:hover { background: rgba(110, 110, 255, 0.11); border-color: rgba(110, 110, 255, 0.5); transform: scale(1.015); }
.dc_card.sponsor .exclusive_block { background: rgba(255, 215, 0, 0.07); border: 1px dashed rgba(255, 215, 0, 0.35); }
.dc_card.sponsor .exclusive_block:hover { background: rgba(255, 215, 0, 0.11); border-color: rgba(255, 215, 0, 0.5); }
.block_title { font-size: 1rem; font-weight: 700; margin-bottom: 7px; color: var(--text); display: flex; align-items: center; justify-content: center; gap: 6px; }
.block_title i { font-size: 1.15rem; color: var(--accent); }
.dc_card.sponsor .block_title i { color: var(--gold); }
.block_stats {
display: flex; flex-direction: column; gap: 5px; font-size: 0.8rem; color: var(--gold-light);
min-height: 60px; justify-content: center;
}
.block_stats span {
background: rgba(110, 110, 255, 0.16); padding: 4px 8px; border-radius: 6px; display: flex; align-items: center; gap: 6px;
font-weight: 600; font-size: 0.79rem;
}
.block_stats span i { font-size: 0.9rem; color: var(--accent); }
.dc_card.sponsor .block_stats span { background: rgba(255, 215, 0, 0.16); }
.dc_card.sponsor .block_stats span i { color: var(--gold); }
.dc_price {
font-size: 1.32rem; font-weight: 800; color: var(--gold); margin: 16px 0 10px; padding: 7px 16px;
background: rgba(255, 215, 0, 0.08); border-radius: 8px; box-shadow: 0 2px 8px rgba(255, 215, 0, 0.18);
display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 42px;
}
.dc_card_btn {
margin: 8px 0; padding: 11px 28px; font-weight: 700; font-size: 0.94rem; background: linear-gradient(45deg, var(--accent), var(--accent-dark));
color: #fff; border: none; border-radius: 35px; cursor: pointer; transition: all 0.4s ease; box-shadow: 0 3px 8px rgba(110, 110, 255, 0.25);
display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 48px;
}
.dc_card.sponsor .dc_card_btn { background: linear-gradient(45deg, #ffd700, #ffaa00); color: #1a0d00; box-shadow: 0 3px 8px rgba(255, 215, 0, 0.25); }
.dc_card_btn:hover { transform: translateY(-2px) scale(1.04); box-shadow: 0 6px 14px rgba(110, 110, 255, 0.35); }
.dc_card.sponsor .dc_card_btn:hover { box-shadow: 0 6px 14px rgba(255, 215, 0, 0.35); }
.dc_footer {
font-size: 0.74rem; color: var(--text-light); margin-top: 10px; padding: 6px 10px; background: rgba(255, 255, 255, 0.04);
border-radius: 6px; display: flex; align-items: center; justify-content: center; gap: 5px; min-height: 34px;
}
.dc_footer i { font-size: 0.88rem; color: var(--accent); }
.dc_card.sponsor .dc_footer i { color: var(--gold); }
.dc_decor { position: absolute; top: 8px; left: 8px; font-size: 1.6rem; color: var(--accent); opacity: 0.18; transition: opacity 0.3s ease; }
.dc_card:hover .dc_decor { opacity: 0.35; }
.dc_card.sponsor .dc_decor { color: var(--gold); }
@keyframes rotate { to { transform: rotate(360deg); } }
@media (max-width: 768px) {
.dc_container { grid-template-columns: 1fr; gap: 18px; }
.dc_content { min-height: 360px; }
.exclusive_block { min-height: 85px; }
.block_stats { min-height: 55px; }
.dc_price, .dc_card_btn, .dc_footer { min-height: auto; }
}
</style>
<script>
function changeSelection(value, server) {
var linkElement = document.getElementById("gotodonate");
var selectElement = document.getElementById("store_server");
for (var i = 0; i < selectElement.options.length; i++) {
if (selectElement.options[i].value == server) {
selectElement.selectedIndex = i;
local_change_serv();
break;
}
}
setTimeout(function () {
var selectElement = document.getElementById("store_services");
for (var i = 0; i < selectElement.options.length; i++) {
if (selectElement.options[i].value == value) {
selectElement.selectedIndex = i;
linkElement.innerHTML = selectElement.options[selectElement.selectedIndex].text;
break;
}
}
}, 200);
setTimeout(function () { local_change_service(); }, 275);
}
function local_change_serv() {
var server = $('#store_server option:selected').val();
get_services(server);
get_server_store(server);
}
function local_change_service() {
var service = $('#store_services option:selected').val();
get_tarifs(service);
}
function local_change_type() {
var type = $('#store_type option:selected').val();
change_store_bind_type(type);
}
function populateTariffCards() {
const select = document.getElementById('store_tarifs');
const cardContainer = document.getElementById('tariff_cards');
cardContainer.innerHTML = '';
for (let option of select.options) {
const card = document.createElement('div');
card.className = 'card-option';
card.dataset.value = option.value;
card.textContent = option.text;
card.addEventListener('click', () => {
select.value = option.value;
select.dispatchEvent(new Event('change'));
updateActiveCard('tariff_cards', option.value);
});
cardContainer.appendChild(card);
}
updateActiveCard('tariff_cards', select.value);
}
function initializeTypeCards() {
const typeCards = document.querySelectorAll('#type_cards .card-option');
const select = document.getElementById('store_type');
typeCards.forEach(card => {
card.addEventListener('click', () => {
select.value = card.dataset.value;
select.dispatchEvent(new Event('change'));
updateActiveCard('type_cards', card.dataset.value);
});
});
select.value = '2';
select.dispatchEvent(new Event('change'));
}
function updateActiveCard(containerId, value) {
const container = document.getElementById(containerId);
const cards = container.querySelectorAll('.card-option');
cards.forEach(card => {
card.classList.toggle('active', card.dataset.value === value);
});
}
document.addEventListener('DOMContentLoaded', () => {
initializeTypeCards();
const observer = new MutationObserver(populateTariffCards);
observer.observe(document.getElementById('store_tarifs'), { childList: true });
populateTariffCards();
local_change_serv();
});
</script>
Решение
- Фев
- 420
- 89
Пользователь
кто знает как сюда картинку можно добавить или убрать этот знак вопрооса в стиле KINGZ V3 lite
- Янв
- 339
- 346
Пользователь
SVG вырежи и вставь
- Фев
- 420
- 89
Пользователь
я уже изменил цену
Она другая
Она другая
- Апр
- 90
- 4
Пользователь
Куда это вставлять?
- Май
- 528
- 101
Активный
Панель управления-параметры-публичная навигация(вроде туда)
- Апр
- 90
- 4
Пользователь
У меня такого нету
- Сен
- 195
- 35
Пользователь
Ну вроде написано же все нормально
- Апр
- 90
- 4
Пользователь
А где оно появится?
- Фев
- 420
- 89
Пользователь
у меня оно стоит в «Платном повышении»
- Статус