profile.html - main - SaiRaz/ReviewTasksBot

profile.html
232 строки11 KB
Sa1Raz
Update profile.html
09 ноя 2025, 10:15
09 ноя 2025, 10:1573f6f9f
<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Профиль | ReviewCash</title>
  <script src="https://telegram.org/js/telegram-web-app.js"></script>
  <style>
    :root {
      --bg: #0a0a14; --card: #141426; --neon: #00ffff; --success: #00ff88; --danger: #ff3366;
      --gold: #ffd700; --glass: rgba(20,20,38,0.8); --border: rgba(0,255,255,0.4);
      --text: #e0f7ff; --text-muted: #88c0d0;
    }
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { background: var(--bg); color: var(--text); font-family: system-ui, -apple-system, sans-serif; min-height: 100vh; overflow: hidden; }
   
    .container { max-width: 420px; margin: 16px auto; padding: 0 16px; }
    .profile-card { background: var(--glass); border: 1px solid var(--border); border-radius: 28px; padding: 24px; }
    .header h1 {
      text-align: center; font-size: 28px; font-weight: 900; margin: 0 0 20px;
      background: linear-gradient(90deg, #00ffff, #00ff88); -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    }
    .avatar { width: 90px; height: 90px; border-radius: 50%; border: 4px solid var(--neon); margin: 0 auto 12px; display: block; }
   
    .balance-card {
      background: linear-gradient(135deg, #1e3c72, #2a5298); border-radius: 24px; padding: 20px; text-align: center;
      margin: 20px 0; border: 1px solid rgba(0,255,255,0.4);
    }
    .balance-label { font-size: 13px; color: var(--text-muted); letter-spacing: 1.5px; margin-bottom: 6px; }
    .balance-amount {
      font-size: 28px; font-weight: 900; margin: 8px 0;
      background: linear-gradient(90deg, #00ffff, #00ff88); -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    }
    .refresh-balance {
      background: rgba(255,255,255,0.15); color: white; border: 1px solid rgba(255,255,255,0.3);
      padding: 12px 28px; border-radius: 30px; font-size: 14px; font-weight: 600; cursor: pointer;
    }
    .btn-row { margin: 30px 0 100px; display: flex; gap: 12px; }
    .btn {
      flex: 1; padding: 18px 0; border: none; border-radius: 20px; font-weight: 700; font-size: 16px;
      text-transform: uppercase; letter-spacing: 1px; cursor: pointer;
    }
    .btn-topup { background: linear-gradient(45deg, var(--success), #00cc66); color: white; }
    .btn-withdraw { background: linear-gradient(45deg, var(--danger), #ff1a50); color: white; }

    .modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.95);
             z-index: 1000; justify-content: center; align-items: center; padding: 20px; }
    .modal.active { display: flex; }
    .modal-content { background: var(--card); border: 2px solid var(--neon); border-radius: 32px;
      padding: 40px 32px; width: 100%; max-width: 460px; text-align: center; position: relative; }
    .close-modal { position: absolute; top: 16px; right: 16px; background: none; border: none; color: var(--neon); font-size: 32px; cursor: pointer; }
    input { width: 100%; padding: 18px; margin: 12px 0; background: rgba(255,255,255,0.08);
      border: 2px solid rgba(0,255,255,0.3); border-radius: 20px; color: white; font-size: 16px; }
    .code {
      font-family: monospace; font-size: 42px; font-weight: 900; color: var(--gold);
      letter-spacing: 8px; background: rgba(0,0,0,0.5); padding: 24px 16px; border-radius: 24px;
      margin: 24px 0; cursor: pointer; text-align: center; border: 2px solid rgba(255,215,0,0.4);
    }

    /* ПЛАВНЫЕ ПЕРЕХОДЫ — КАК В ПРЕМИУМ-ПРИЛОЖЕНИЯХ */
    .page {
      position: fixed; top: 0; left: 0; width: 100%; height: 100%;
      transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
      z-index: 10;
    }
    .page.hidden-left { transform: translateX(-100%); }
    .page.hidden-right { transform: translateX(100%); }
    .page.visible { transform: translateX(0); }

    .bottom-nav {
      position: fixed; bottom: 20px; left: 20px; right: 20px; background: rgba(20,20,38,0.9);
      border: 2px solid rgba(0,255,255,0.3); border-radius: 30px; padding: 8px; display: flex; z-index: 999;
    }
    .nav-btn {
      flex: 1; padding: 16px 24px; border: none; border-radius: 25px; font-weight: 800;
      font-size: 18px; cursor: pointer; background: transparent; color: #88c0d0;
      transition: all 0.3s ease;
    }
    .nav-btn.active {
      background: linear-gradient(45deg, #00ffff, #00ff88); color: #000;
      transform: translateY(-4px);
    }
  </style>
</head>
<body>

  <!-- СТРАНИЦА ПРОФИЛЯ -->
  <div id="profile-page" class="page visible">
    <div class="container">
      <div class="profile-card">
        <div class="header"><h1>ПРОФИЛЬ</h1></div>
        <div style="text-align:center; margin:20px 0;">
          <img id="avatar" src="" alt="Аватар" class="avatar">
          <span id="username" style="display:block; margin-top:12px; font-size:20px; font-weight:700;">@User</span>
        </div>
        <div class="balance-card">
          <div class="balance-label">БАЛАНС</div>
          <div class="balance-amount">
            <span id="balance">0.00</span> ₽
          </div>
          <button class="refresh-balance" onclick="fetchBalance()">Обновить</button>
        </div>
        <div class="btn-row">
          <button class="btn btn-topup" onclick="openTopup()">ПОПОЛНИТЬ</button>
          <button class="btn btn-withdraw" onclick="openWithdraw()">ВЫВОД</button>
        </div>
      </div>
    </div>
  </div>

  <!-- МОДАЛКИ -->
  <div id="topup-modal" class="modal">
    <div class="modal-content">
      <button class="close-modal" onclick="closeTopup()">×</button>
      <h2 style="color:var(--neon); font-size:32px;">Пополнение</h2>
      <input type="number" id="topup-amount" placeholder="Сумма (мин. 100 ₽)" min="100">
      <div id="topup-details" style="display:none;">
        <p>Переведи <b>ровно</b> на телефон:</p>
        <div style="background:rgba(255,255,255,0.05); padding:24px; border-radius:20px; border:1px solid var(--border); font-size:20px; text-align:center;">
          <p><b>Номер:</b> +7 (960) 073-85-59</p>
          <p><b>Имя:</b> Раяз Н.</p>
          <p><b>Банк:</b> Т-Банк (Тинькофф)</p>
        </div>
        <p style="margin:20px 0 10px;">В комментарии напиши код:</p>
        <div class="code" id="topup-code" onclick="copyCode(this)">000000</div>
        <p style="color:var(--success); font-weight:900; margin-top:20px;">
          Я увижу перевод → зачислю за 1–5 минут!
        </p>
      </div>
      <button class="btn btn-topup" onclick="sendTopup()">ОТПРАВИТЬ ЗАЯВКУ</button>
    </div>
  </div>

  <div id="withdraw-modal" class="modal">
    <div class="modal-content">
      <button class="close-modal" onclick="closeWithdraw()">×</button>
      <h2 style="color:var(--danger); font-size:32px;">Вывод на банк</h2>
      <input type="text" id="withdraw-method" placeholder="Карта или телефон">
      <input type="text" id="withdraw-fio" placeholder="ФИО или ник">
      <input type="text" id="withdraw-bank" placeholder="Банк">
      <input type="number" id="withdraw-amount" placeholder="Сумма (мин. 250 ₽)" min="250">
      <button class="btn btn-withdraw" onclick="sendWithdraw()">ОТПРАВИТЬ ЗАЯВКУ</button>
    </div>
  </div>

  <!-- НИЖНЯЯ НАВИГАЦИЯ -->
  <div class="bottom-nav">
    <button class="nav-btn nav-tasks" onclick="goToTasks()">Задания</button>
    <button class="nav-btn nav-profile active">Профиль</button>
  </div>

  <script>
    const tg = window.Telegram.WebApp;
    tg.ready(); tg.expand();

    // Аватар и юзернейм
    document.getElementById('avatar').src = tg.initDataUnsafe.user?.photo_url || 'https://via.placeholder.com/90/00ffff/000000?text=RC';
    document.getElementById('username').innerText = '@' + (tg.initDataUnsafe.user?.username || 'User');

    // Баланс
    function fetchBalance() {
      document.getElementById('balance').innerText = '...';
      tg.sendData(JSON.stringify({ action: "get_balance" }));
    }

    function copyCode(el) {
      navigator.clipboard.writeText(el.innerText);
      tg.showAlert("Код скопирован!");
    }

    tg.onEvent('webAppDataReceived', data => {
      try {
        const res = JSON.parse(data);
        if (res.balance !== undefined) document.getElementById('balance').innerText = res.balance.toFixed(2);
        if (res.success) {
          tg.showAlert("Заявка отправлена!");
          closeTopup(); closeWithdraw();
          fetchBalance();
        }
      } catch (e) {}
    });

    // Модалки
    function openTopup() { document.getElementById('topup-modal').classList.add('active'); }
    function closeTopup() {
      document.getElementById('topup-modal').classList.remove('active');
      document.getElementById('topup-details').style.display = 'none';
    }
    function sendTopup() {
      const amount = parseFloat(document.getElementById('topup-amount').value);
      if (!amount || amount < 100) return tg.showAlert("Минимум 100 ₽");
      const code = Math.floor(100000 + Math.random() * 900000);
      document.getElementById('topup-code').innerText = code;
      document.getElementById('topup-details').style.display = 'block';
      tg.sendData(JSON.stringify({ action: "request_topup", amount, code }));
    }

    function openWithdraw() { document.getElementById('withdraw-modal').classList.add('active'); }
    function closeWithdraw() { document.getElementById('withdraw-modal').classList.remove('active'); }
    function sendWithdraw() {
      const method = document.getElementById('withdraw-method').value.trim();
      const fio = document.getElementById('withdraw-fio').value.trim();
      const bank = document.getElementById('withdraw-bank').value.trim();
      const amount = parseFloat(document.getElementById('withdraw-amount').value);
      if (!method || !fio || !bank || !amount || amount < 500) return tg.showAlert("Заполни все поля! Мин. 500 ₽");
      tg.sendData(JSON.stringify({ action: "request_withdraw", method, fio, bank, amount }));
    }

    // ПЛАВНЫЙ ПЕРЕХОД НА ЗАДАНИЯ
    function goToTasks() {
      document.getElementById('profile-page').classList.add('hidden-left');
      document.getElementById('profile-page').classList.remove('visible');
      setTimeout(() => {
        location.href = 'index.html';
      }, 500);
    }

    // Активная кнопка
    document.querySelectorAll('.nav-btn').forEach(btn => {
      btn.addEventListener('click', () => {
        document.querySelectorAll('.nav-btn').forEach(b => b.classList.remove('active'));
        btn.classList.add('active');
      });
    });

    window.onload = () => {
      fetchBalance();
      setInterval(fetchBalance, 10000);
    };
  </script>
</body>
</html>