<!doctype html>
<html lang="kk">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>TURAN — Demo (Canvas + Bots + Admin + QR)</title>

<link rel="stylesheet" href="styles.css">

<script src="https://cdn.jsdelivr.net/npm/qrcode/build/qrcode.min.js" defer></script>

<script src="app.js" defer></script>
</head>
<body>

<header class="header">
    <div class="brand">
      <div class="logo">TURAN</div>
      <div>
        <h1>TURAN</h1>
        <div class="small">Жаңалықтар • Боттар • Админ</div>
      </div>
    </div>

<nav class="controls">
      <button class="btn" id="btn-register">Тіркелу</button>
      <button class="btn" id="btn-login">Кіру</button>
      <button class="btn" id="btn-admin">Админ</button>
      <button class="btn lang" id="btn-lang">Рус</button>
    </nav>
  </header>

<div id="admin-anim" class="anim">? Админ кірді!</div>
  <div id="visitor-anim" class="anim visitor">? Жаңа адам кірді!</div>

<main class="container">
    <section>
      <div class="card hero">
        <div class="left">
          <h2 id="main-title">TURAN — Басты бет</h2>
          <p class="small" id="main-desc">Интерактивті графика, чат боттар, админ панель — демо.</p>

<div style="margin-top:12px; display:flex; gap:10px; align-items:center">
            <button class="btn" id="btn-toggle-anim">Анимацияны тоқтату</button>
            <button class="btn" id="btn-regen">Жаңа деректер</button>
            <div class="small" id="points-count" style="margin-left:12px">Нүкте: 0</div>
          </div>
        </div>

<div class="canvas-wrap card">
          <canvas id="chart"></canvas>
          <div class="small">Интерактивті графика — демо деректер. Hover — tooltip.</div>
        </div>
      </div>

<div class="card" style="margin-top:14px">
        <h3 id="news-title">Жаңалықтар</h3>
        <div id="news" class="news-list"></div>
      </div>

<div class="card" style="margin-top:14px">
        <h3 id="chat-title">Чат (боттар)</h3>
        <div id="chat" class="chat-box"></div>

<div class="chat-input" style="margin-top:8px">
          <input id="chat-input" class="input" placeholder="Хабарлама... (боттың атын жазса — ол жауап береді)"/>
          <button class="btn primary" id="chat-send">Жіберу</button>
        </div>

<div class="card" style="margin-top:14px">
        <h3 id="dev-title">Разработчикпен тілдесу</h3>
        <div id="dev-chat" class="chat-box"></div>
        <div style="margin-top:8px;display:flex;gap:8px">
          <input id="dev-input" class="input" placeholder="Хабарлама..." />
          <button class="btn" id="dev-send">Жіберу</button>
        </div>
      </div>

</section>

<aside class="sidebar">
      <div class="card">
        <div class="section">
          <h4>Kaspi реквизиттері</h4>
          <div class="small">Карта: <strong id="kaspi-card">8707 1234 5678 9012</strong></div>
          <div class="small">Нөмір: <strong id="kaspi-phone">+7 707 389 1499</strong></div>
        </div>

<div class="section" style="margin-top:12px">
          <h4>Байланыс</h4>
          <div style="display:flex;gap:8px;margin-top:8px">
            <a class="btn" id="link-tg" href="https://t.me/" target="_blank">Telegram</a>
            <a class="btn" id="link-wa" href="https://wa.me/77073891499" target="_blank">WhatsApp</a>
            <a class="btn" id="link-dis" href="https://discord.com/" target="_blank">Discord</a>
          </div>
        </div>

<div class="section" style="margin-top:12px">
          <h4>QR-код</h4>
          <canvas id="qrcode" style="background:#fff;padding:8px;border-radius:8px;margin-top:8px"></canvas>
          <div class="small" style="margin-top:8px">QR сканерлесе — сайт ашылады; QR-ды `?visitor=Аты` деп жасауға болады.</div>
        </div>

<div class="section" style="margin-top:12px">
          <h4>Эмодзи</h4>
          <div id="emoji-bar-side" class="emoji-bar" style="margin-top:8px"></div>
        </div>
      </div>
    </aside>
  </main>

<footer style="padding:14px 18px;color:var(--muted);text-align:center">© TURAN demo — клиенттік демо. Продакшн үшін сервер қажет.</footer>

<div id="modal-register" class="modal"><div class="panel">
    <h3>Тіркелу</h3>
    <label>Телефон</label><input id="reg-phone" placeholder="+7..." />
    <label>Құпиясөз</label><input id="reg-pass" type="password" />
    <div style="display:flex;gap:8px;margin-top:10px"><button class="btn" id="do-register">Тіркелу</button><button class="btn" id="close-register">Жабу</button></div>
  </div></div>

<div id="modal-login" class="modal"><div class="panel">
    <h3>Кіру</h3>
    <label>Телефон</label><input id="login-phone" placeholder="+7..." />
    <label>Құпиясөз</label><input id="login-pass" type="password" />
    <div style="display:flex;gap:8px;margin-top:10px"><button class="btn" id="do-login">Кіру</button><button class="btn" id="close-login">Жабу</button></div>
    <p class="small" id="login-msg"></p>
  </div></div>

<div id="modal-admin" class="modal"><div class="panel">
    <h3>Админ панель</h3>
    <p class="small">Админ нөмірі: <strong>+77073891499</strong> / пароль: <strong>BABAY077</strong></p>

<div style="display:flex;gap:12px;margin-top:12px">
      <div style="flex:1">
        <label>Жаңалық тақырыбы</label><input id="admin-title" />
        <label style="margin-top:8px">Жаңалық мәтіні</label><textarea id="admin-body"></textarea>
        <div style="display:flex;gap:8px;margin-top:8px"><button class="btn" id="admin-add">Қосу</button><button class="btn" id="admin-close">Жабу</button></div>

<div style="margin-top:12px">
          <h4>Қолданушылар</h4>
          <div id="admin-users" class="admin-list"></div>
        </div>
      </div>

<div style="width:360px">
        <h4>Жаңалықтар басқару</h4>
        <div id="admin-news" class="admin-list"></div>

<h4 style="margin-top:8px">Боттар</h4>
        <div id="admin-bots" class="admin-list"></div>

<h4 style="margin-top:8px">Журнал</h4>
        <div id="admin-log" class="admin-list"></div>
      </div>
    </div>
  </div></div>

</body>
</html>

/* === TURAN Demo Styles === */
:root {
  --bg: #0b0f19;
  --card: #141a29;
  --primary: #4dabf7;
  --danger: #ff6b6b;
  --text: #e9ecef;
  --muted: #adb5bd;
  --border: #2a3145;
  --radius: 8px;
  --transition: 0.3s ease;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Header */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  background: var(--card);
  border-bottom: 1px solid var(--border);
}
.logo {
  font-weight: 700;
  font-size: 24px;
  color: var(--primary);
  margin-right: 10px;
}
.brand { display: flex; align-items: center; }
.small { font-size: 13px; color: var(--muted); }

/* Buttons */
.btn {
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 6px 12px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: var(--transition);
}
.btn:hover { background: var(--primary); color: #000; }
.btn.primary { background: var(--primary); color: #000; }

/* Container */
.container {
  display: flex;
  flex: 1;
  padding: 18px;
  gap: 18px;
}
section { flex: 1; }
.sidebar { width: 300px; }

/* Cards */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
}
.hero { display: flex; gap: 18px; align-items: stretch; }
.hero .left { flex: 1; }
.canvas-wrap { flex: 1; }

/* Chat */
.chat-box {
  background: #0f1320;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  min-height: 150px;
  max-height: 220px;
  overflow-y: auto;
  padding: 8px;
}
.chat-input { display: flex; gap: 8px; }
.input {
  flex: 1;
  padding: 6px 10px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: #0f1320;
  color: var(--text);
}

/* News */
.news-list { display: flex; flex-direction: column; gap: 8px; }
.news-item {
  padding: 8px;
  background: #1b2235;
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

/* Emoji bar */
.emoji-bar { display: flex; flex-wrap: wrap; gap: 6px; }
.emoji-bar span { cursor: pointer; }

/* Animations */
.anim {
  position: fixed;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--primary);
  color: #000;
  padding: 10px 16px;
  border-radius: var(--radius);
  font-weight: bold;
  display: none;
  animation: fadeInOut 3s ease;
  z-index: 1000;
}
.anim.visitor { background: var(--danger); }

@keyframes fadeInOut {
  0% { opacity: 0; transform: translate(-50%, -20px); }
  20% { opacity: 1; transform: translate(-50%, 0); }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -20px); }
}

/* Sidebar */
.section + .section { border-top: 1px solid var(--border); padding-top: 10px; }

/* Admin */
.modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  justify-content: center;
  align-items: center;
  z-index: 2000;
}
.panel {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  width: 500px;
  max-height: 80vh;
  overflow-y: auto;
}
textarea, input { width: 100%; padding: 6px; margin-top: 4px; border-radius: var(--radius); border: 1px solid var(--border); background: #0f1320; color: var(--text); }
.admin-list { margin-top: 8px; font-size: 14px; }
.admin-list div { padding: 4px 0; border-bottom: 1px solid var(--border); }

/* Footer */
footer {
  border-top: 1px solid var(--border);
}

/* === TURAN Demo Script === */

/* ====== DOM Elements ====== */
const ctx = document.getElementById("turanCanvas").getContext("2d");
const chatLog = document.getElementById("chatLog");
const chatInput = document.getElementById("chatInput");
const newsList = document.getElementById("newsList");
const newsInput = document.getElementById("newsInput");
const newsAddBtn = document.getElementById("newsAddBtn");
const loginBtn = document.getElementById("loginBtn");
const adminModal = document.getElementById("adminModal");
const closeAdmin = document.getElementById("closeAdmin");
const visitorAnim = document.getElementById("visitorAnim");
const adminAnim = document.getElementById("adminAnim");
const emojiBar = document.getElementById("emojiBar");

/* ====== Fake Admin ====== */
const ADMIN = { phone: "+77073891499", pass: "BABAY077" };
let isAdmin = false;
let bannedBots = [];

/* ====== Fake Bots ====== */
const bots = [
  { name: "BotArman", rude: false },
  { name: "BotAigul", rude: false },
  { name: "BotNurlan", rude: false },
];

/* Bot responses */
const replies = [
  "Салем! ?",
  "Қалың қалай? ?",
  "Тамаша сайт екен ?",
  "???",
  "Не істеп жатырсың? ?",
  "Әдемі ой! ?",
  "???",
  "Керемет идея ?",
  "???",
  "Бәсе, супер екен ?",
];

const rudeWords = ["боқ", "ит", "шала", "дурак"];
const rudeReport = document.getElementById("rudeReport");

/* ====== Canvas Background ====== */
function drawCanvas() {
  ctx.clearRect(0, 0, 400, 200);
  let grad = ctx.createLinearGradient(0, 0, 400, 200);
  grad.addColorStop(0, "#4dabf7");
  grad.addColorStop(1, "#364fc7");
  ctx.fillStyle = grad;
  ctx.fillRect(0, 0, 400, 200);

ctx.fillStyle = "#fff";
  ctx.font = "bold 24px Arial";
  ctx.fillText("TURAN Demo Graphic", 90, 100);
}
drawCanvas();

/* ====== Animations ====== */
function showAnim(el) {
  el.style.display = "block";
  setTimeout(() => (el.style.display = "none"), 3000);
}

/* ====== Chat ====== */
function addMessage(sender, text) {
  const div = document.createElement("div");
  div.textContent = `${sender}: ${text}`;
  chatLog.appendChild(div);
  chatLog.scrollTop = chatLog.scrollHeight;

// rude filter
  if (sender.startsWith("Bot")) {
    if (rudeWords.some((w) => text.toLowerCase().includes(w))) {
      rudeReport.textContent = `⚠️ ${sender} боқтады!`;
      if (!bannedBots.includes(sender)) {
        bannedBots.push(sender);
      }
    }
  }
}

chatInput?.addEventListener("keydown", (e) => {
  if (e.key === "Enter" && chatInput.value.trim() !== "") {
    let msg = chatInput.value.trim();
    addMessage("User", msg);

// bot reply
    bots.forEach((bot) => {
      if (!bannedBots.includes(bot.name)) {
        if (msg.includes(bot.name)) {
          let reply =
            replies[Math.floor(Math.random() * replies.length)];
          addMessage(bot.name, reply);
        }
      }
    });

chatInput.value = "";
  }
});

/* ====== Emoji Bar ====== */
emojiBar?.addEventListener("click", (e) => {
  if (e.target.tagName === "SPAN") {
    chatInput.value += e.target.textContent;
    chatInput.focus();
  }
});

/* ====== News Add ====== */
newsAddBtn?.addEventListener("click", () => {
  if (!isAdmin) return alert("Тек админ қоса алады!");
  let text = newsInput.value.trim();
  if (text !== "") {
    let item = document.createElement("div");
    item.className = "news-item";
    item.textContent = text;
    newsList.prepend(item);
    newsInput.value = "";
  }
});

/* ====== Admin Login ====== */
loginBtn?.addEventListener("click", () => {
  let phone = prompt("Номерді енгізіңіз:");
  let pass = prompt("Құпиясөзді енгізіңіз:");
  if (phone === ADMIN.phone && pass === ADMIN.pass) {
    isAdmin = true;
    adminModal.style.display = "flex";
    showAnim(adminAnim);
  } else {
    alert("Қате деректер!");
  }
});
closeAdmin?.addEventListener("click", () => {
  adminModal.style.display = "none";
});

/* ====== Visitor QR Simulation ====== */
function visitorJoined() {
  showAnim(visitorAnim);
}
// әр 20 секундта жаңа "қонақ" кіргендей жасаймыз
setInterval(visitorJoined, 20000);

Liveweave: Generative AI Web Editor & HTML/CSS/JS Playground