<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Meowteens Catalog</title>
<script src="https://telegram.org/js/telegram-web-app.js"></script>
<style>
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; margin: 16px; }
h1 { font-size: 18px; margin: 0 0 12px; }
.row { display: flex; gap: 8px; margin-bottom: 12px; }
input { flex: 1; padding: 10px; font-size: 16px; }
button { padding: 10px 12px; font-size: 16px; cursor: pointer; }
button:disabled { opacity: .6; cursor: not-allowed; }
.hint { font-size: 13px; opacity: .75; margin-top: 8px; line-height: 1.35; }
.box { padding: 10px; border: 1px solid rgba(0,0,0,.15); border-radius: 10px; margin-top: 12px; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
.hidden { display: none !important; }
</style>
</head>
<body>
<h1>Каталог моделей</h1>
<div class="row">
<input id="tag" placeholder="Например: KellyCollins" autocomplete="off" />
<button id="send">Показать</button>
</div>
<div class="hint">
Формат: <b>без #</b>, строго как в БД (регистр важен).<br/>
Пример: <code>KellyCollins</code>
</div>
<div class="box">
<div><b>Диагностика</b></div>
<div id="diag" class="hint">…</div>
<div id="fallbackBlock" class="hint" style="margin-top:10px;">
Если бот молчит, используй fallback-кнопку ниже — она откроет чат с ботом и передаст тег через <code>/start</code>.
<button id="fallback" style="margin-top:10px; width:100%;">Открыть бота с тегом (fallback)</button>
</div>
</div>
<script>
const tg = window.Telegram?.WebApp;
const diagEl = document.getElementById("diag");
const tagInput = document.getElementById("tag");
const sendBtn = document.getElementById("send");
const fallbackBlock = document.getElementById("fallbackBlock");
// ТВОЙ admin user id
const ADMIN_USER_ID = 5106910172;
function setDiag(text) {
diagEl.textContent = text;
}
function normalizeTag(raw) {
return (raw || "").trim().replace(/^#/, "");
}
function isAdmin() {
const uid = tg?.initDataUnsafe?.user?.id;
return !!uid && Number(uid) === ADMIN_USER_ID;
}
// Инициализация
try {
if (!tg) {
setDiag("❌ Telegram.WebApp не найден. Открой внутри Telegram.");
// Вне Telegram fallback можно оставить видимым (но это не основной сценарий)
fallbackBlock.classList.remove("hidden");
} else {
tg.ready();
// tg.expand(); // можно включить, если хочешь по-умолчанию расширять
const hasInitData = !!tg.initData;
const uid = tg.initDataUnsafe?.user?.id;
const uname = tg.initDataUnsafe?.user?.username;
const platform = tg.platform;
const version = tg.version;
setDiag(
`✅ WebApp OK | initData: ${hasInitData ? "есть" : "НЕТ"} | user: ${uid || "?"} @${uname || "?"} | platform: ${platform} | v${version}`
);
// Главное: обычным пользователям fallback НЕ показываем (чтобы не плодить /start)
if (isAdmin()) {
fallbackBlock.classList.remove("hidden");
} else {
fallbackBlock.classList.add("hidden");
}
}
} catch (e) {
setDiag("❌ Ошибка инициализации WebApp: " + String(e));
// на всякий случай fallback оставим
fallbackBlock.classList.remove("hidden");
}
async function sendData(tag) {
if (!tg) {
alert("Открой это внутри Telegram");
return;
}
const payload = `model:${tag}`;
try {
// Отладочная строка (видно в диагностике)
setDiag((diagEl.textContent || "") + ` | sendData: "${payload}"`);
// Отправляем
tg.sendData(payload);
// UX: даём понять, что действие принято (и НЕ закрываем WebApp автоматически)
if (tg.HapticFeedback) {
try { tg.HapticFeedback.impactOccurred("light"); } catch (_) {}
}
if (tg.showAlert) {
tg.showAlert("✅ Отправлено. Вернись в чат — бот пришлёт видео.");
}
} catch (e) {
if (tg.showAlert) tg.showAlert("sendData ошибка: " + String(e));
else alert("sendData ошибка: " + String(e));
}
}
async function onShow() {
const tag = normalizeTag(tagInput.value);
if (!tag) {
if (tg?.showAlert) tg.showAlert("Введи тег");
else alert("Введи тег");
return;
}
// анти-даблклик
sendBtn.disabled = true;
try {
await sendData(tag);
} finally {
setTimeout(() => { sendBtn.disabled = false; }, 800);
}
}
sendBtn.addEventListener("click", (e) => {
e.preventDefault();
onShow();
});
// Enter в поле ввода
tagInput.addEventListener("keydown", (e) => {
if (e.key === "Enter") {
e.preventDefault();
onShow();
}
});
// ===== Fallback: открыть бота через deep-link /start (только для админа) =====
const BOT_USERNAME = "rndmeow_bot";
document.getElementById("fallback").addEventListener("click", () => {
const tag = normalizeTag(tagInput.value);
if (!tag) return (tg?.showAlert ? tg.showAlert("Введи тег") : alert("Введи тег"));
const startPayload = "tag_" + encodeURIComponent(tag);
const link = `https://t.me/${BOT_USERNAME}?start=${startPayload}`;
if (tg) tg.openTelegramLink(link);
else window.location.href = link;
});
</script>
</body>
</html>