Загрузка данных


<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>PHARAON</title>
<style>
  @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');
  * { margin:0; padding:0; box-sizing:border-box; user-select:none; }
  html,body { width:100%; height:100%; overflow:hidden; }
  body {
    font-family:'Inter', 'Segoe UI', Arial, sans-serif;
    background:#080a10; color:#e4e6ec;
  }
  svg { display:block; }

  /* ---------- фон ---------- */
  #bg { position:fixed; inset:0; z-index:0;
    background:
      linear-gradient(175deg, #0c0e15 0%, #06070c 55%, #04050a 100%),
      radial-gradient(1100px 600px at 78% 16%, rgba(255,255,255,.03) 0%, transparent 60%);
    background-size:cover; background-position:center;
    transition: background-image 0.6s ease;
  }
  #bg.hasimg { background-image:
      linear-gradient(rgba(5,6,11,.72), rgba(5,6,11,.85)),
      url('__BG_DATA_URI__'); }

  .wrap { position:relative; z-index:1; width:100%; height:100%; }

  /* ---------- топбар ---------- */
  .topbar { position:fixed; top:10px; right:10px; z-index:60; display:flex; gap:6px; }
  .tb-btn { width:36px; height:30px; border-radius:8px; border:1px solid rgba(255,255,255,.07);
    background:rgba(16,16,24,.65); color:#9a9daa; font-size:12px; cursor:pointer;
    transition: all .2s cubic-bezier(.4,0,.2,1); font-family:inherit;
    backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); }
  .tb-btn:hover { background:rgba(40,40,55,.85); color:#fff; border-color:rgba(255,255,255,.15); transform:scale(1.05); }
  .tb-btn.tb-close:hover { background:rgba(180,42,38,.85); border-color:rgba(180,42,38,.6); color:#fff; }

  .themePanel { position:fixed; top:48px; right:10px; z-index:70;
    background:rgba(14,14,22,.96); border:1px solid rgba(255,255,255,.07); border-radius:10px;
    padding:16px 18px; box-shadow:0 24px 60px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.03) inset;
    backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
    animation: panelIn .25s cubic-bezier(.4,0,.2,1); }
  @keyframes panelIn { from { opacity:0; transform:translateY(-8px) scale(.97); } to { opacity:1; transform:none; } }
  .tp-ttl { font-size:9px; letter-spacing:2.5px; color:#6b6e7a; margin-bottom:10px; text-transform:uppercase; font-weight:600; }
  .tp-row { display:flex; gap:8px; }
  .th-c { width:24px; height:24px; border-radius:50%; background:var(--c); cursor:pointer;
    border:2px solid rgba(255,255,255,.1); transition: all .18s cubic-bezier(.4,0,.2,1); }
  .th-c:hover { transform:scale(1.15); box-shadow:0 0 12px var(--c); }
  .th-c.sel { border-color:#fff; box-shadow:0 0 10px var(--c); }
  .tp-sep { height:1px; background:rgba(255,255,255,.05); margin:12px 0; }
  .tp-name { margin-top:10px; font-size:11px; color:#a0a3b0; text-align:center; letter-spacing:1.5px; font-weight:500; }
  .tp-out { color:#d45; font-size:11px; cursor:pointer; text-decoration:none; transition:color .15s; }
  .tp-out:hover { color:#f66; }
  .ram-row { display:flex; gap:5px; justify-content:center; }
  .ram-b { padding:5px 11px; border-radius:7px; font-size:11px; color:#8a8d9a; cursor:pointer;
    border:1px solid rgba(255,255,255,.07); font-weight:600; transition: all .15s; }
  .ram-b.on { background:rgba(255,255,255,.92); color:#0e0e16; border-color:rgba(255,255,255,.9); }
  .ram-b:hover:not(.on) { background:rgba(255,255,255,.06); color:#d0d2dc; }

  /* ---------- темы ---------- */
  body { --acc:#c9cbd2; --acc-glow:rgba(201,203,210,.12); }
  body[data-theme="pharaon"]  { --acc:#d9b46a; --acc-glow:rgba(217,180,106,.14); }
  body[data-theme="emerald"]  { --acc:#4db592; --acc-glow:rgba(77,181,146,.14); }
  body[data-theme="ruby"]     { --acc:#c2685f; --acc-glow:rgba(194,104,95,.14); }
  body[data-theme="ice"]      { --acc:#6aa7d8; --acc-glow:rgba(106,167,216,.14); }
  body[data-theme="amethyst"] { --acc:#9a80c9; --acc-glow:rgba(154,128,201,.14); }
  body[data-theme="midnight"] { --acc:#8e949e; --acc-glow:rgba(142,148,158,.1); }

  /* ---------- экраны ---------- */
  .screen { display:none; position:absolute; inset:0; }
  .screen.active { display:block; animation:screenIn .35s cubic-bezier(.4,0,.2,1); }
  @keyframes screenIn { from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:none} }

  /* ---------- boot ---------- */
  #boot.active { display:flex; align-items:center; justify-content:center; flex-direction:column; }
  #boot .brandbig { margin-top:18px; font-size:26px; font-weight:700; letter-spacing:5px; color:#fff;
    text-shadow:0 0 40px rgba(255,255,255,.06); }
  .spin { width:28px; height:28px; border-radius:50%; margin:24px auto 0;
    border:2.5px solid rgba(255,255,255,.08); border-top-color:var(--acc);
    animation:spin 1s cubic-bezier(.4,0,.2,1) infinite; }
  @keyframes spin { to { transform:rotate(360deg); } }
  #bootStatus { margin-top:16px; font-size:11.5px; color:#7a7d8a; letter-spacing:1.5px; font-weight:500; }
  #bootErr { margin-top:16px; text-align:center; display:none; }

  /* ---------- авторизация ---------- */
  #auth.active, #key.active { display:flex; }
  .split { width:100%; height:100%; display:flex; }
  .split-left { width:38%; background:rgba(8,8,14,.92); border-right:1px solid rgba(255,255,255,.05);
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; position:relative; }
  .split-left .wordmark { font-size:17px; font-weight:700; letter-spacing:5px; color:#fff; }
  .split-left .ver { position:absolute; bottom:18px; font-size:10px; color:#4a4d58; letter-spacing:2.5px; font-weight:500; }
  .split-right { flex:1; display:flex; flex-direction:column; justify-content:center;
    padding:0 64px 0 52px; position:relative; }
  .h1 { font-size:25px; font-weight:700; color:#fff; letter-spacing:.2px; line-height:1.25; }
  .sub { margin-top:8px; font-size:13px; color:#7a7d8a; line-height:1.5; }
  .form { margin-top:28px; display:flex; flex-direction:column; gap:11px; }
  .field { display:flex; align-items:center; gap:10px; background:rgba(14,14,22,.7);
    border:1px solid rgba(255,255,255,.06); border-radius:8px; padding:0 14px; height:48px;
    transition: border-color .2s, box-shadow .2s; }
  .field:focus-within { border-color:rgba(255,255,255,.2); box-shadow:0 0 0 3px rgba(255,255,255,.03); }
  .field svg { flex:0 0 auto; opacity:.5; }
  .field input { flex:1; background:transparent; border:none; outline:none; color:#dcdfe8;
    font-size:13.5px; font-family:inherit; font-weight:500; }
  .field input::placeholder { color:#4a4d58; font-weight:400; }
  .eye { background:none; border:none; color:#6b6e7a; cursor:pointer; font-size:14px;
    font-family:inherit; padding:4px; transition:color .15s; }
  .eye:hover { color:#fff; }
  .btnlight { margin-top:10px; height:50px; border:none; border-radius:8px; cursor:pointer;
    background:rgba(255,255,255,.92); color:#0e0e16; font-size:14px; font-weight:600; font-family:inherit;
    display:flex; align-items:center; justify-content:center; gap:10px; transition: all .2s cubic-bezier(.4,0,.2,1); }
  .btnlight:hover { background:#fff; }
  .btnlight:disabled { opacity:.45; cursor:default; transform:none; box-shadow:none; }
  .err { display:none; margin-top:12px; background:rgba(180,42,38,.1); border:1px solid rgba(180,42,38,.3);
    color:#e8a0a0; font-size:12px; padding:10px 13px; border-radius:10px; line-height:1.45; font-weight:500; }
  .err.show { display:block; animation:shake .35s cubic-bezier(.4,0,.2,1); }
  @keyframes shake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-6px)} 40%{transform:translateX(6px)} 60%{transform:translateX(-3px)} 80%{transform:translateX(3px)} }
  .switchline { margin-top:18px; font-size:12px; color:#6b6e7a; }
  .switchline a { color:#d0d2dc; cursor:pointer; text-decoration:none; transition:color .15s; font-weight:500; }
  .switchline a:hover { color:#fff; }

  .waitbox { margin-top:22px; border:1px dashed rgba(255,255,255,.12); border-radius:12px;
    padding:18px 18px; text-align:center; }
  .waitbox .nic { font-size:20px; font-weight:800; color:#fff; margin-top:10px;
    font-family:'Inter', Consolas, monospace; letter-spacing:1.5px; }
  .waitbox .note { font-size:11px; color:#6b6e7a; margin-top:8px; font-weight:500; }
  .manual { margin-top:16px; }

  /* ---------- главный экран ---------- */
  #main.active { display:flex; flex-direction:column; padding:20px 24px 16px; }
  .main-head { display:flex; align-items:center; gap:12px; }
  .main-head .t { font-size:20px; font-weight:800; color:#fff; letter-spacing:.3px; }

  .cards { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:16px; }
  .card { border-radius:12px; overflow:hidden; cursor:pointer; position:relative;
    border:1.5px solid rgba(255,255,255,.06); background:rgba(14,14,22,.7);
    transition: all .25s cubic-bezier(.4,0,.2,1); }
  .card:hover { border-color:rgba(255,255,255,.14); transform:translateY(-1px); box-shadow:0 10px 26px rgba(0,0,0,.32); }
  .card.sel { border-color:var(--acc); box-shadow:0 0 0 1px var(--acc), 0 12px 34px var(--acc-glow); }
  .thumb { height:140px; background-size:cover; background-position:center;
      background-image:
      linear-gradient(rgba(10,8,16,.2), rgba(10,8,16,.55)),
      radial-gradient(460px 240px at 72% 24%, rgba(255,255,255,.05) 0%, transparent 60%),
      linear-gradient(160deg,#23202e 0%, #17151f 55%, #12121a 100%); }
  .thumb.img { background-image:
      linear-gradient(rgba(10,8,16,.25), rgba(10,8,16,.6)),
      url('__THUMB_DATA_URI__'); }
  .card.locked .thumb { filter:grayscale(1) brightness(.35); }
  .card.locked { cursor:default; opacity:.6; }
  .card.locked:hover { transform:none; box-shadow:none; border-color:rgba(255,255,255,.06); }
  .card.locked .lockov { position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    gap:8px; color:#9a9daa; font-size:12px; font-weight:600; letter-spacing:.5px; }
  .card-row { display:flex; align-items:center; justify-content:space-between; padding:10px 14px; }
  .cname { display:flex; align-items:center; gap:7px; font-size:13px; font-weight:700; color:#fff; }
  .cdate { display:flex; align-items:center; gap:6px; font-size:11.5px; color:#9a9daa; font-weight:500; }
  .cdate.dis { color:#5a5d68; }

  .announce { margin-top:12px; background:rgba(14,14,22,.6); border:1px solid rgba(255,255,255,.04);
    border-radius:10px; padding:10px 14px; font-size:12px; color:#9a9daa; line-height:1.5;
    white-space:pre-wrap; user-select:text; max-height:80px; overflow:auto; display:none; font-weight:500; }

  .bottombar { margin-top:auto; display:flex; align-items:center; gap:12px;
    background:rgba(10,10,16,.8); border:1px solid rgba(255,255,255,.05);
    border-radius:12px; padding:10px 14px; backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); }
  .avatar { width:40px; height:40px; border-radius:50%; background:rgba(28,31,42,.8);
    border:1px solid rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; }
  .uinfo { margin-right:4px; }
  .unick { font-size:13px; font-weight:700; color:#fff; }
  .uid { font-size:10px; color:#5a5d68; margin-top:2px; font-weight:500; }
  .pill { background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.07);
    border-radius:6px; padding:6px 11px; font-size:11px; color:#d0d2dc; font-weight:600; }
  .gearbtn { width:36px; height:36px; border-radius:9px; border:1px solid rgba(255,255,255,.07);
    background:transparent; color:#9a9daa; font-size:14px; cursor:pointer; font-family:inherit;
    transition: all .18s; }
  .gearbtn:hover { background:rgba(255,255,255,.06); color:#fff; }
  .runbtn { margin-left:auto; height:48px; padding:0 32px; border:none; border-radius:8px;
    background:rgba(255,255,255,.92); color:#0e0e16; font-size:14px; font-weight:600; font-family:inherit;
    cursor:pointer; display:flex; align-items:center; gap:10px;
    transition: all .25s cubic-bezier(.4,0,.2,1); letter-spacing:.2px; }
  .runbtn:hover:not(:disabled) { background:#fff; }
  .runbtn:disabled { opacity:.45; cursor:default; transform:none; box-shadow:none; }

  .progressWrap { display:none; margin-top:12px; }
  .prog-top { display:flex; justify-content:space-between; font-size:11px; color:#7a7d8a; margin-bottom:6px; font-weight:500; }
  #pct { color:#fff; font-weight:700; font-family:'Inter', Consolas, monospace; }
  .bar { height:8px; border-radius:6px; background:rgba(255,255,255,.06); overflow:hidden; }
  .bar > div { height:100%; width:0%; border-radius:6px; background:linear-gradient(90deg, var(--acc), rgba(255,255,255,.9));
    transition:width .4s cubic-bezier(.4,0,.2,1); }

  #gameOk { display:none; margin-top:10px; font-size:12px; color:#7de8a8; font-weight:600; }
  #mainErr { display:none; margin-top:10px; font-size:12px; color:#e8a0a0; line-height:1.45; font-weight:500; }

  footer { position:fixed; bottom:6px; left:0; right:0; z-index:5; display:flex;
    justify-content:center; font-size:9.5px; color:#3a3d48; letter-spacing:3px; font-weight:600; }

  /* ---------- эмблема фараона ---------- */
  .emblem-wrap { position:relative; display:flex; align-items:center; justify-content:center; }
  .emblem-glow { position:absolute; width:120px; height:120px; border-radius:50%;
    background:radial-gradient(circle, var(--acc-glow) 0%, transparent 70%);
    filter:blur(30px); animation:emblemPulse 4s ease-in-out infinite; }
  @keyframes emblemPulse { 0%,100%{opacity:.3; transform:scale(1)} 50%{opacity:.55; transform:scale(1.06)} }
  .emblem-svg { filter:drop-shadow(0 0 20px rgba(255,255,255,.1)); position:relative; z-index:1; }
  .emblem-svg path { transition: fill .3s; }
  .logo-img { object-fit:contain; }
  .logo-img.mini { border-radius:50%; }
  .c-ico, .avatar-ico { border-radius:50%; object-fit:cover; }

  /* ---------- анимация появления карточек ---------- */
  .card { opacity:0; animation:cardIn .4s cubic-bezier(.4,0,.2,1) forwards; }
  .card:nth-child(1) { animation-delay:.05s; }
  .card:nth-child(2) { animation-delay:.12s; }
  .card:nth-child(3) { animation-delay:.19s; }
  @keyframes cardIn { from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none} }
  .card.locked { animation:cardIn .4s cubic-bezier(.4,0,.2,1) forwards; }
</style>
</head>
<body>
<div id="bg"></div>
<div class="wrap">
  <div class="topbar">
    <button class="tb-btn" id="tbTheme" title="Настройки">&#9881;</button>
    <button class="tb-btn" id="tbMin" title="Свернуть">&#x2500;</button>
    <button class="tb-btn tb-close" id="tbClose" title="Закрыть">&#x2715;</button>
  </div>

  <div class="themePanel" id="themePanel" style="display:none;">
    <div class="tp-ttl">Тема</div>
    <div class="tp-row">
      <div class="th-c" data-t="pharaon"  style="--c:#e8b84b" title="Фараон"></div>
      <div class="th-c" data-t="emerald"  style="--c:#34d399" title="Изумруд"></div>
      <div class="th-c" data-t="ruby"     style="--c:#e05b5b" title="Кровь"></div>
      <div class="th-c" data-t="ice"      style="--c:#38bdf8" title="Лёд"></div>
      <div class="th-c" data-t="amethyst" style="--c:#a855f7" title="Аметист"></div>
      <div class="th-c" data-t="midnight" style="--c:#9ca3af" title="Полночь"></div>
    </div>
    <div class="tp-name" id="tpName">Фараон</div>
    <div class="tp-sep"></div>
    <div class="tp-ttl">ОЗУ</div>
    <div class="ram-row">
      <div class="ram-b" data-v="2048">2</div>
      <div class="ram-b on" data-v="4096">4</div>
      <div class="ram-b" data-v="6144">6</div>
      <div class="ram-b" data-v="8192">8</div>
    </div>
    <div class="tp-sep"></div>
    <div style="text-align:center;"><a class="tp-out" onclick="logout()">Выйти</a></div>
  </div>

  <!-- ЗАГРУЗКА -->
  <section id="boot" class="screen active">
    <div style="text-align:center;">
      <div class="emblem-wrap">
        <div class="emblem-glow"></div>
        <div class="emblem-svg">
          <img class="logo-img" src="__LOGO_DATA_URI__" alt="Pharaon" width="90" height="90">
        </div>
      </div>
      <div class="brandbig">PHARAON</div>
      <div class="spin"></div>
      <div id="bootStatus">Инициализация...</div>
      <div id="bootErr">
        <div class="err" id="bootErrMsg" style="max-width:400px; text-align:left;"></div>
        <button class="btnlight" style="width:auto; padding:0 30px; margin-top:12px;" onclick="doInit()">Повторить</button>
      </div>
    </div>
  </section>

  <!-- АВТОРИЗАЦИЯ -->
  <section id="auth" class="screen">
    <div class="split">
      <div class="split-left">
        <div class="emblem-wrap">
          <div class="emblem-glow" style="width:100px;height:100px;"></div>
          <div class="emblem-svg">
            <img class="logo-img" src="__LOGO_DATA_URI__" alt="Pharaon" width="130" height="130">
          </div>
        </div>
        <div class="wordmark">PHARAON</div>
        <div class="ver">LOADER v—</div>
      </div>
      <div class="split-right">
        <div class="h1" id="authTitle">С возвращением</div>
        <div class="sub" id="authSub">Войдите в аккаунт загрузчика.</div>
        <div class="form">
          <div class="field">
            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#9a9daa" stroke-width="2"><circle cx="12" cy="8" r="4"/><path d="M4 21c1.5-4 5-6 8-6s6.5 2 8 6"/></svg>
            <input id="authLogin" maxlength="16" placeholder="Логин" autocomplete="off">
          </div>
          <div class="field">
            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#9a9daa" stroke-width="2"><rect x="4" y="10" width="16" height="11" rx="2"/><path d="M8 10V7a4 4 0 0 1 8 0v3"/></svg>
            <input id="authPass" type="password" placeholder="Пароль" autocomplete="off">
            <button class="eye" id="passEye" title="Показать пароль">&#9788;</button>
          </div>
          <div class="field" id="pass2Field" style="display:none;">
            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#9a9daa" stroke-width="2"><rect x="4" y="10" width="16" height="11" rx="2"/><path d="M8 10V7a4 4 0 0 1 8 0v3"/></svg>
            <input id="authPass2" type="password" placeholder="Повтори пароль" autocomplete="off">
          </div>
          <button class="btnlight" id="authBtn" onclick="authSubmit()"><span id="authBtnText">Вход</span><span>&#10132;</span></button>
          <div class="err" id="authErr"></div>
          <div class="switchline" id="switchLine">Нет аккаунта? <a id="switchLink" onclick="switchTab('reg')">Создать</a></div>
        </div>
      </div>
    </div>
  </section>

  <!-- ОЖИДАНИЕ КЛЮЧА -->
  <section id="key" class="screen">
    <div class="split">
      <div class="split-left">
        <div class="emblem-wrap">
          <div class="emblem-glow" style="width:100px;height:100px;"></div>
          <div class="emblem-svg">
            <img class="logo-img" src="__LOGO_DATA_URI__" alt="Pharaon" width="130" height="130">
          </div>
        </div>
        <div class="wordmark">PHARAON</div>
        <div class="ver">LOADER v—</div>
      </div>
      <div class="split-right">
        <div class="h1">Доступ к загрузчику</div>
        <div class="sub">Ключ пока не выдан. Передай админу свой ник — он откроет доступ.</div>
        <div class="waitbox">
          <div class="spin" style="margin:0 auto;"></div>
          <div class="nic" id="nickShow">—</div>
          <div class="note">проверяю автоматически каждые 10 секунд</div>
        </div>
        <div class="form manual">
          <div class="sub" style="margin:0 0 2px;">Или активируй ключ вручную</div>
          <div class="field">
            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#9a9daa" stroke-width="2"><path d="M21 2l-2 2m-7.6 7.6a5.5 5.5 0 1 1-7.8 7.8 5.5 5.5 0 0 1 7.8-7.8zm0 0L19 4m-4 4l2 2"/></svg>
            <input id="keyInput" placeholder="PHAR-XXXX-XXXX-XXXX" maxlength="19" autocomplete="off" style="font-family:'Inter',Consolas,monospace; letter-spacing:1px; text-transform:uppercase;">
          </div>
          <button class="btnlight" id="keyBtn" onclick="activate()">Активировать<span>&#10132;</span></button>
          <div class="err" id="keyErr"></div>
        </div>
      </div>
    </div>
  </section>

  <!-- ГЛАВНАЯ -->
  <section id="main" class="screen">
    <div class="main-head">
      <div class="emblem-wrap" style="display:inline-flex;">
        <div class="emblem-svg">
          <img class="logo-img mini" src="__LOGO_DATA_URI__" alt="" width="24" height="24">
        </div>
      </div>
      <div class="t">Выберите версию</div>
    </div>

    <div class="cards">
      <div class="card sel" id="cardMain">
        <div class="thumb img"></div>
        <div class="card-row">
          <span class="cname"><img class="c-ico" src="__LOGO_DATA_URI__" alt="" width="12" height="12"> Pharaon</span>
          <span class="cdate"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#9a9daa" stroke-width="2"><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M3 10h18M8 3v4M16 3v4"/></svg> <span id="cardDate">—</span></span>
        </div>
      </div>
      <div class="card locked" id="cardBeta">
        <div class="thumb img" style="filter:grayscale(1) brightness(.5);"></div>
        <div class="lockov">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#9a9daa" stroke-width="2"><rect x="4" y="10" width="16" height="11" rx="2"/><path d="M8 10V7a4 4 0 0 1 8 0v3"/></svg>
          Недоступно
        </div>
        <div class="card-row">
          <span class="cname"><img class="c-ico" src="__LOGO_DATA_URI__" alt="" width="12" height="12"> Pharaon Beta</span>
          <span class="cdate dis">Недоступно</span>
        </div>
      </div>
      <div class="card locked">
        <div class="thumb img" style="filter:grayscale(1) brightness(.5);"></div>
        <div class="lockov">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#9a9daa" stroke-width="2"><rect x="4" y="10" width="16" height="11" rx="2"/><path d="M8 10V7a4 4 0 0 1 8 0v3"/></svg>
          Недоступно
        </div>
        <div class="card-row">
          <span class="cname"><img class="c-ico" src="__LOGO_DATA_URI__" alt="" width="12" height="12"> Pharaon Dev.</span>
          <span class="cdate dis">Недоступно</span>
        </div>
      </div>
    </div>

    <div class="announce" id="announce"></div>

    <div class="progressWrap" id="progressWrap">
      <div class="prog-top"><span id="stage">Подготовка...</span><span id="pct">0%</span></div>
      <div class="bar"><div id="barFill"></div></div>
    </div>
    <div id="gameOk"></div>
    <div id="mainErr"></div>

    <div class="bottombar">
      <div class="avatar">
        <img class="avatar-ico" src="__LOGO_DATA_URI__" alt="" width="22" height="22">
      </div>
      <div class="uinfo">
        <div class="unick" id="mLogin">—</div>
        <div class="uid" id="uidLine">UID: —</div>
      </div>
      <div class="pill" id="cardDatePill">—</div>
      <button class="gearbtn" id="tbTheme2" title="Настройки">&#9881;</button>
      <button class="runbtn" id="playBtn" onclick="play()">Запустить <span>&#9654;</span></button>
    </div>
  </section>


</div>

<script>
'use strict';
let reqId = 0; const pend = {};
let session = null; let timerInt = null; let pollTimer = null;
let ramMb = 4096; let myHwid = '';

const $ = id => document.getElementById(id);
function show(name){ document.querySelectorAll('.screen').forEach(s=>s.classList.remove('active')); $(name).classList.add('active'); }
function err(id, msg, on){ const e=$(id); e.innerHTML = msg||''; e.classList.toggle('show', !!on); }
function esc(s){ const d=document.createElement('div'); d.textContent = s==null?'':String(s); return d.innerHTML; }
function busy(btn, on, txt){ btn.disabled = on; if (txt) btn.innerHTML = txt; }

$('tbMin').addEventListener('click', ()=>window.chrome.webview.postMessage({type:'window', action:'min'}));
$('tbClose').addEventListener('click', ()=>window.chrome.webview.postMessage({type:'window', action:'close'}));
$('tbTheme').addEventListener('click', ()=>togglePanel());
$('tbTheme2').addEventListener('click', ()=>togglePanel());
function togglePanel(){
  const p = $('themePanel');
  if (p.style.display === 'none' || p.style.display === '') { p.style.display = 'block'; }
  else { p.style.display = 'none'; }
}
document.addEventListener('mousedown', e => {
  const p = $('themePanel');
  if (p.style.display !== 'none' && !p.contains(e.target) && !e.target.closest('#tbTheme') && !e.target.closest('#tbTheme2')) p.style.display = 'none';
});

const THEME_NAMES = { pharaon:'Фараон', emerald:'Изумруд', ruby:'Кровь', ice:'Лёд', amethyst:'Аметист', midnight:'Полночь' };
function setTheme(t, save){
  document.body.dataset.theme = t;
  document.querySelectorAll('.th-c').forEach(c => c.classList.toggle('sel', c.dataset.t === t));
  $('tpName').textContent = THEME_NAMES[t] || t;
  if (save) window.chrome.webview.postMessage({type:'theme', theme:t});
}
document.querySelectorAll('.th-c').forEach(c => c.addEventListener('click', () => setTheme(c.dataset.t, true)));
document.querySelectorAll('.ram-b').forEach(b => b.addEventListener('click', () => {
  document.querySelectorAll('.ram-b').forEach(x => x.classList.remove('on'));
  b.classList.add('on');
  ramMb = parseInt(b.dataset.v) || 4096;
}));

function stopWaiting(){ if (pollTimer){ clearInterval(pollTimer); pollTimer = null; } }
function startWaiting(nick){
  $('nickShow').textContent = nick || '—';
  show('key');
  stopWaiting();
  pollTimer = setInterval(async ()=>{
    try {
      const s = await call('poll');
      if (s){ stopWaiting(); applySession(s); show('main'); }
    } catch(e){}
  }, 10000);
}

function call(type, data={}){
  return new Promise((resolve, reject)=>{
    const id = ++reqId;
    pend[id] = {resolve, reject};
    window.chrome.webview.postMessage({id, type, data});
  });
}
window.chrome.webview.addEventListener('message', e=>{
  const m = e.data;
  if (m.event){ onEvent(m); return; }
  const p = pend[m.id]; if (!p) return; delete pend[m.id];
  m.ok ? p.resolve(m.data) : p.reject(new Error(m.error||'Ошибка'));
});

function onEvent(m){
  switch (m.event){
    case 'boot_status': $('bootStatus').textContent = m.text; break;
    case 'boot_error':
      $('bootErr').style.display='block';
      err('bootErrMsg', esc(m.message), true);
      $('boot').querySelector('.spin').style.display='none';
      break;
    case 'ready': {
      $('bootErr').style.display='none';
      $('boot').querySelector('.spin').style.display='';
      myHwid = m.hwid || '';
      document.querySelectorAll('.ver').forEach(v=>v.textContent = 'LOADER v' + m.version);
      if (m.theme) setTheme(m.theme, false);
      if (m.bg) $('bg').classList.add('hasimg');
      if (m.announcement){ $('announce').style.display='block'; $('announce').textContent = m.announcement; }
      if (m.ram){
        ramMb = m.ram;
        document.querySelectorAll('.ram-b').forEach(x => x.classList.toggle('on', +x.dataset.v === m.ram));
      }
      applySession(m.session);
      if (m.session) show('main');
      else if (m.needKey && $('authLogin').value) startWaiting($('authLogin').value);
      else show('auth');
      break;
    }
    case 'session':
      if (m.session){ stopWaiting(); applySession(m.session); show('main'); }
      else { stopWaiting(); startWaiting($('authLogin').value || '—'); }
      break;
    case 'progress': {
      if (m.pct != null){
        $('progressWrap').style.display='block';
        $('barFill').style.width = m.pct + '%';
        $('pct').textContent = m.pct + '%';
        $('stage').textContent = m.stage || '';
        if (m.pct >= 100){ setTimeout(()=>{ $('progressWrap').style.display='none'; }, 1500); }
      }
      busy($('playBtn'), !(m.pct != null && m.pct < 100));
      if (!$('playBtn').disabled) $('playBtn').innerHTML = 'Запустить <span>&#9654;</span>';
      break;
    }
    case 'game_started':
      $('gameOk').style.display='block';
      $('gameOk').textContent = 'Игра запущена (PID ' + m.pid + ')';
      setTimeout(()=>{ $('gameOk').style.display='none'; }, 6000);
      busy($('playBtn'), false);
      $('playBtn').innerHTML = 'Запустить <span>&#9654;</span>';
      break;
    case 'game_closed':
      $('mainErr').style.display='block';
      $('mainErr').textContent = 'Игра закрылась. Логи: ' + (m.log||'');
      busy($('playBtn'), false);
      $('playBtn').innerHTML = 'Запустить <span>&#9654;</span>';
      break;
  }
}

function applySession(s){
  session = s;
  if (timerInt){ clearInterval(timerInt); timerInt=null; }
  if (!s) return;
  $('mLogin').textContent = s.login;
  $('uidLine').textContent = 'UID: ' + (myHwid ? myHwid.slice(0,8) : '—');
  const exp = new Date(s.expiryLocal);
  const dstr = exp.toLocaleDateString('ru-RU');
  $('cardDate').textContent = dstr;
  $('cardDatePill').textContent = 'до ' + dstr;
  timerInt = setInterval(()=>{
    const left = exp - new Date();
    if (left <= 0){ $('cardDatePill').textContent = 'истекла'; $('cardDatePill').style.color='#e8a0a0'; }
  }, 30000);
}

let mode = 'login';
function switchTab(m){
  mode = m;
  $('authTitle').textContent = m==='login' ? 'С возвращением' : 'Создай аккаунт';
  $('authSub').textContent = m==='login' ? 'Войдите в аккаунт загрузчика.' : 'Логин станет твоим ником в игре.';
  $('authBtnText').textContent = m==='login' ? 'Вход' : 'Создать';
  $('pass2Field').style.display = m==='reg' ? 'flex' : 'none';
  $('switchLine').innerHTML = m==='login'
    ? 'Нет аккаунта? <a onclick="switchTab(\'reg\')">Создать</a>'
    : 'Уже есть аккаунт? <a onclick="switchTab(\'login\')">Вход</a>';
  err('authErr', null, false);
}
async function authSubmit(){
  err('authErr', null, false);
  const btn = $('authBtn');
  if (mode==='reg' && $('authPass').value !== $('authPass2').value){ err('authErr','Пароли не совпадают.',true); return; }
  busy(btn, true);
  try {
    if (mode==='login') await call('login', {login:$('authLogin').value, pass:$('authPass').value});
    else { await call('register', {login:$('authLogin').value, pass:$('authPass').value}); }
    busy(btn, false);
    if (mode==='reg'){ switchTab('login'); startWaiting($('authLogin').value); }
  } catch(ex){ busy(btn,false); err('authErr', esc(ex.message), true); }
}
$('passEye').addEventListener('click', ()=>{
  const p = $('authPass');
  p.type = p.type === 'password' ? 'text' : 'password';
});
async function activate(){
  err('keyErr', null, false);
  const btn = $('keyBtn'); busy(btn, true);
  try { const s = await call('activate', {key:$('keyInput').value}); busy(btn,false); stopWaiting(); applySession(s); show('main'); }
  catch(ex){ busy(btn,false); err('keyErr', esc(ex.message), true); }
}
async function play(){
  err('mainErr', null, false);
  $('mainErr').style.display='none';
  busy($('playBtn'), true, 'ЗАГРУЗКА...');
  $('progressWrap').style.display='block'; $('barFill').style.width='0%'; $('pct').textContent='0%';
  try { await call('play', {ram: ramMb}); }
  catch(ex){ busy($('playBtn'), false); $('playBtn').innerHTML = 'Запустить <span>&#9654;</span>';
    $('progressWrap').style.display='none'; $('mainErr').style.display='block'; $('mainErr').textContent = ex.message; }
}
async function logout(){ stopWaiting(); switchTab('login'); $('authPass').value=''; show('auth'); try{ await call('logout'); }catch(e){} }
async function doInit(){ $('bootErr').style.display='none'; $('boot').querySelector('.spin').style.display='';
  try{ await call('init'); }catch(ex){} }

$('cardMain').addEventListener('click', ()=>{ $('cardMain').classList.add('sel'); });
$('cardBeta').addEventListener('click', ()=>{});

doInit();
</script>
</body>
</html>