FlymeWorld

Первоклассный магазин — все для твоего кубического мира!

Поддержка

<!DOCTYPE html>

<head>

<title>Поддержка магазина EasyDonate</title>

<style>

:root {

--bg: #0b1020;

--panel: #131a2e;

--panel-2: #1a2340;

--text: #eef3ff;

--muted: #aab6d3;

--accent: #6ea8fe;

--accent-2: #8a7dff;

--success: #33d17a;

--border: rgba(255,255,255,0.08);

--shadow: 0 20px 50px rgba(0,0,0,0.35);

--radius: 20px;

}

* { box-sizing: border-box; }

body {

margin: 0;

font-family: Inter, Arial, sans-serif;

background:

radial-gradient(circle at top left, rgba(110,168,254,0.16), transparent 30%),

radial-gradient(circle at top right, rgba(138,125,255,0.16), transparent 25%),

var(--bg);

color: var(--text);

line-height: 1.5;

}

.container {

width: min(1150px, calc(100% - 32px));

margin: 0 auto;

}

.hero {

padding: 64px 0 32px;

}

.hero-card {

background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));

border: 1px solid var(--border);

border-radius: 28px;

box-shadow: var(--shadow);

padding: 40px;

display: grid;

grid-template-columns: 1.2fr 0.8fr;

gap: 28px;

}

.badge {

display: inline-flex;

align-items: center;

gap: 8px;

padding: 8px 14px;

border-radius: 999px;

background: rgba(110,168,254,0.12);

color: #cfe0ff;

font-size: 14px;

border: 1px solid rgba(110,168,254,0.22);

margin-bottom: 18px;

}

h1 {

font-size: clamp(34px, 5vw, 56px);

line-height: 1.05;

margin: 0 0 14px;

}

.subtitle {

font-size: 18px;

color: var(--muted);

max-width: 700px;

margin-bottom: 24px;

}

.hero-actions {

display: flex;

flex-wrap: wrap;

gap: 12px;

}

.btn {

display: inline-flex;

align-items: center;

justify-content: center;

gap: 8px;

padding: 14px 18px;

border-radius: 14px;

text-decoration: none;

border: 1px solid var(--border);

color: var(--text);

background: rgba(255,255,255,0.04);

transition: 0.2s ease;

cursor: pointer;

font-size: 15px;

}

.btn:hover { transform: translateY(-1px); }

.btn-primary {

background: linear-gradient(135deg, var(--accent), var(--accent-2));

border: none;

color: white;

font-weight: 700;

}

.quick-info {

display: grid;

gap: 14px;

}

.info-card {

background: rgba(255,255,255,0.04);

border: 1px solid var(--border);

border-radius: 18px;

padding: 18px;

}

.info-card h3 {

margin: 0 0 8px;

font-size: 18px;

}

.info-card p {

margin: 0;

color: var(--muted);

font-size: 15px;

}

.section {

padding: 18px 0 40px;

}

.section-title {

font-size: 28px;

margin: 0 0 18px;

}

.grid {

display: grid;

gap: 18px;

}

.problems-grid {

grid-template-columns: repeat(3, 1fr);

}

.card {

background: var(--panel);

border: 1px solid var(--border);

border-radius: var(--radius);

padding: 22px;

box-shadow: var(--shadow);

}

.problem-title {

margin: 0 0 10px;

font-size: 18px;

}

.problem-text {

color: var(--muted);

margin: 0 0 14px;

font-size: 15px;

}

.mini-list {

padding-left: 18px;

margin: 0;

color: #d7e2ff;

font-size: 14px;

}

.support-layout {

display: grid;

grid-template-columns: 1fr 0.9fr;

gap: 18px;

}

form {

display: grid;

gap: 14px;

}

.field-group {

display: grid;

grid-template-columns: 1fr 1fr;

gap: 14px;

}

label {

display: block;

font-size: 14px;

margin-bottom: 8px;

color: #d6e0fb;

}

input, select, textarea {

width: 100%;

border: 1px solid var(--border);

background: var(--panel-2);

color: var(--text);

border-radius: 14px;

padding: 14px 14px;

font: inherit;

outline: none;

}

textarea {

min-height: 140px;

resize: vertical;

}

input:focus, select:focus, textarea:focus {

border-color: rgba(110,168,254,0.7);

box-shadow: 0 0 0 3px rgba(110,168,254,0.15);

}

.hint {

font-size: 13px;

color: var(--muted);

margin-top: -4px;

}

.steps {

display: grid;

gap: 14px;

}

.step {

display: flex;

gap: 14px;

align-items: flex-start;

padding: 16px;

border-radius: 16px;

background: rgba(255,255,255,0.04);

border: 1px solid var(--border);

}

.step-number {

width: 34px;

height: 34px;

min-width: 34px;

border-radius: 50%;

display: grid;

place-items: center;

font-weight: 700;

background: linear-gradient(135deg, var(--accent), var(--accent-2));

color: white;

}

.step h4 {

margin: 0 0 6px;

font-size: 16px;

}

.step p {

margin: 0;

color: var(--muted);

font-size: 14px;

}

.faq {

display: grid;

gap: 12px;

}

details {

background: var(--panel);

border: 1px solid var(--border);

border-radius: 16px;

padding: 16px 18px;

}

summary {

cursor: pointer;

font-weight: 600;

}

details p {

color: var(--muted);

margin: 12px 0 0;

}

.result {

display: none;

margin-top: 16px;

padding: 16px;

border-radius: 16px;

background: rgba(51, 209, 122, 0.12);

border: 1px solid rgba(51, 209, 122, 0.35);

color: #dff8e9;

}

.footer {

padding: 8px 0 42px;

color: var(--muted);

text-align: center;

font-size: 14px;

}

@media (max-width: 980px) {

.hero-card,

.support-layout,

.problems-grid {

grid-template-columns: 1fr;

}

@media (max-width: 640px) {

.hero-card { padding: 24px; }

.field-group { grid-template-columns: 1fr; }

h1 { font-size: 34px; }

.subtitle { font-size: 16px; }

}

</style>

</head>

<body>

<div>

<div class="badge">Поддержка магазина • EasyDonate</div>

<h1>Поможем с оплатой, донатом и выдачей товаров</h1>

Если покупка не пришла, произошла ошибка при оплате или нужно проверить заказ — оставьте заявку через форму ниже.

Чем подробнее данные, тем быстрее мы решим вопрос.

</p>

<a href="#ticket-form" class="btn btn-primary">Оставить заявку</a>

<a href="#faq" class="btn">Частые вопросы</a>

</div>

<h3>Что подготовить</h3>

<p>Никнейм, сервер, название товара, примерное время оплаты и чек или ID платежа.</p>

</div>

<h3>Когда писать</h3>

<p>Если прошло больше 10–15 минут после успешной оплаты, а товар так и не выдался.</p>

</div>

<h3>Что мы проверим</h3>

<p>Статус платежа, корректность ника, сработала ли выдача и есть ли ошибки со стороны сервера.</p>

</div>

</section>

<h2 class="section-title">Популярные проблемы</h2>

<h3 class="problem-title">Товар не выдался</h3>

<p class="problem-text">Чаще всего нужна ручная проверка платежа и команды выдачи.</p>

<li>Никнейм</li>

<li>Сервер</li>

<li>Название товара</li>

<li>Скрин оплаты</li>

</ul>

</article>

<h3 class="problem-title">Указан неверный ник</h3>

<p class="problem-text">Если при покупке был введён неправильный ник, заявку можно проверить вручную.</p>

<li>Правильный ник</li>

<li>Ошибочный ник</li>

<li>Подтверждение оплаты</li>

</ul>

</article>

<h3 class="problem-title">Ошибка оплаты</h3>

<p class="problem-text">Нужны способ оплаты, описание ошибки и скриншот экрана.</p>

<li>Метод оплаты</li>

<li>Текст ошибки</li>

<li>Время попытки</li>

</ul>

</article>

</div>

</section>

<h2 class="section-title" style="margin-top: 0;">Форма обращения</h2>

<div>

<label for="nickname">Никнейм</label>

</div>

<div>

<label for="server">Сервер</label>

</div>

<div>

<label for="issue">Тип проблемы</label>

<option value="">Выберите вариант</option>

<option>Товар не выдался</option>

<option>Ошибка оплаты</option>

<option>Неверный ник при покупке</option>

<option>Не пришло подтверждение</option>

<option>Возврат</option>

<option>Проблема с промокодом</option>

<option>Другой вопрос</option>

</select>

</div>

<div>

<label for="orderTime">Время оплаты</label>

</div>

<div>

<label for="product">Товар / привилегия</label>

</div>

<div>

<label for="paymentId">ID платежа или чек</label>

</div>

<div>

<label for="contact">Контакт для ответа</label>

</div>

<div>

<label for="message">Подробности</label>

</div>

<div class="hint">Эта демо-форма показывает, как может выглядеть страница поддержки. При необходимости её можно подключить к Telegram-боту, почте или CRM.</div>

<button type="submit" class="btn btn-primary">Отправить заявку</button>

</form>

</div>

<h2 class="section-title" style="margin-top: 0;">Как проходит проверка</h2>

<div>

<h4>Вы оставляете заявку</h4>

<p>Нужны основные данные: ник, сервер, товар, время оплаты и подтверждение платежа.</p>

</div>

<div>

<h4>Мы проверяем заказ</h4>

<p>Смотрим статус оплаты, корректность привязки к нику и успешность выдачи товара.</p>

</div>

<div>

<h4>Решаем проблему</h4>

<p>Если нашли ошибку, подскажем решение или передадим заявку администрации для ручной выдачи.</p>

</div>

</section>

<h2 class="section-title">Частые вопросы</h2>

<summary>Через сколько времени обычно приходит покупка?</summary>

<p>Обычно выдача происходит автоматически почти сразу. Если прошло больше 10–15 минут, стоит создать обращение.</p>

</details>

<summary>Что делать, если я указал неправильный ник?</summary>

<p>Напишите правильный и ошибочный ник, а также приложите подтверждение оплаты. Такие случаи обычно проверяются вручную.</p>

</details>

<summary>Можно ли оформить возврат?</summary>

<p>Зависит от условий магазина и от того, был ли товар уже выдан и использован. Для рассмотрения нужна полная информация по заказу.</p>

</details>

<summary>Что отправить, чтобы поддержка ответила быстрее?</summary>

<p>Лучше сразу указать никнейм, сервер, товар, дату и время оплаты, сумму, способ оплаты и приложить скриншот чека или ID платежа.</p>

</details>

</div>

</section>

Страница поддержки магазина EasyDonate • шаблон для интеграции на сайт

</footer>

</div>

const form = document.getElementById('supportForm');

const resultBox = document.getElementById('resultBox');

form.addEventListener('submit', function (e) {

e.preventDefault();

const data = new FormData(form);

const nickname = data.get('nickname');

const issue = data.get('issue');

const contact = data.get('contact');

resultBox.style.display = 'block';

resultBox.innerHTML = `

<strong>Заявка отправлена.</strong><br><br>

Спасибо, <strong>${nickname}</strong>. Мы получили обращение по теме: <strong>${issue}</strong>.<br>

Ответ отправим по контакту: <strong>${contact}</strong>.<br><br>

Сейчас форма работает как демонстрация интерфейса. Для реальной отправки её можно подключить к Telegram, Discord, email или backend.

form.reset();

});

</script>

</body>

</html>