calculator/web/index.html

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Калькулятор — Pip-Boy 3000</title>
<link rel="stylesheet" href="style.css">
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><text y='13' font-size='13'>☢</text></svg>">
</head>
<body>
<div class="ff-window">

  <!-- Заголовок окна -->
  <div class="titlebar">
    <span class="titlebar-caption">Pip-Boy 3000 Mark IV — CALC v0.7</span>
    <span class="titlebar-dots"></span>
    <span class="titlebtn min" title="Свернуть">&#8211;</span>
    <span class="titlebtn max" title="Развернуть">&#9633;</span>
    <span class="titlebtn close" title="Закрыть">&#10005;</span>
  </div>

  <!-- Панель вкладок -->
  <div class="screen-bezel">
  <div class="tabbar">
    <div class="tab active">
      <span class="tab-icon">☢</span>
      <span class="tab-title">Калькулятор</span>
      <span class="tab-close">&#10005;</span>
    </div>
    <button class="tab newtab" title="Новая вкладка">+</button>
  </div>

  <!-- Панель навигации -->
  <div class="navtoolbar">
    <div class="nav-btns">
      <button class="nav-btn" title="Назад">&#10140;</button>
      <button class="nav-btn fwd" title="Вперёд">&#10140;</button>
      <button class="nav-btn reload" id="btnReset" title="Сбросить сессию">&#8635;</button>
      <button class="nav-btn" id="btnHome" title="Домашняя">&#8962;</button>
    </div>
    <form class="urlbar-wrap" id="evalForm" autocomplete="off">
      <div class="urlbar" id="urlbar">
        <span class="urlbar-icon">&#129518;</span>
        <input id="addr" type="text" spellcheck="false"
               placeholder="Введите выражение — например 2 + 3 * (4 - 1)  и нажмите Enter"
               aria-label="Строка адреса / выражение">
        <kbd class="urlbar-kbd">Enter</kbd>
      </div>
      <div class="awesomebar" id="suggestions" hidden></div>
    </form>
    <div class="nav-right">
      <button class="nav-btn" id="btnHelp" title="Справка">&#9432;</button>
      <button class="nav-btn" id="btnShield" title="Улучшенная защита">
        <svg width="14" height="16" viewBox="0 0 14 16"><path d="M7 1l5 2v4c0 3.2-2.1 6.5-5 8-2.9-1.5-5-4.8-5-8V3z"
          fill="none" stroke="#fbfbfe" stroke-width="1.4"/></svg>
      </button>
      <button class="nav-btn active" id="btnLibrary" title="Библиотека (история)">&#128218;</button>
    </div>
  </div>

  <!-- Контент -->
  <div class="content">

    <main class="page">
      <section class="display-card">
        <div class="display-expr" id="exprEcho">&nbsp;</div>
        <div class="display-value" id="display">0</div>
        <div class="display-error" id="errorline" hidden></div>
      </section>

      <section class="keypad" id="keypad" aria-label="Клавиатура калькулятора">
        <button class="k fn warn" data-insert="C" title="Очистить ввод">C</button>
        <button class="k fn warn" data-insert="CE" title="Сбросить сессию">CE</button>
        <button class="k fn" data-insert="back" title="Стереть">&#9003;</button>
        <button class="k op" data-insert="/">&#247;</button>
        <button class="k op" data-insert="*">&times;</button>
        <button class="k fn" data-insert="**">x&#121090;</button>

        <button class="k num" data-insert="7">7</button>
        <button class="k num" data-insert="8">8</button>
        <button class="k num" data-insert="9">9</button>
        <button class="k op" data-insert="-">&#8722;</button>
        <button class="k op" data-insert="%">%</button>
        <button class="k fn" data-insert="//">//</button>

        <button class="k num" data-insert="4">4</button>
        <button class="k num" data-insert="5">5</button>
        <button class="k num" data-insert="6">6</button>
        <button class="k op" data-insert="+">+</button>
        <button class="k fn" data-insert="(">(</button>
        <button class="k fn" data-insert=")">)</button>

        <button class="k num" data-insert="1">1</button>
        <button class="k num" data-insert="2">2</button>
        <button class="k num" data-insert="3">3</button>
        <button class="k num" data-insert="0">0</button>
        <button class="k num" data-insert=".">.</button>
        <button class="k eq" data-eval="1" title="Вычислить">=</button>

        <button class="k fn" data-insert="pi">&#960;</button>
        <button class="k fn" data-insert="e">e</button>
        <button class="k fn" data-insert="tau">&#964;</button>
        <button class="k fn" data-insert="ans">ans</button>
        <button class="k fn" data-insert="sqrt">sqrt</button>
        <button class="k fn" data-insert=",">,</button>
      </section>

      <section class="chipshelp">
        <span class="hints">// ФУНКЦИИ: ВКЛАДКА «ФУНКЦИИ» СПРАВА — КУРСОР В СТРОКУ ВВОДА</span>
      </section>
    </main>

    <!-- Боковая панель «Библиотека» -->
    <aside class="library" id="library">
      <div class="lib-header">Библиотека</div>
      <div class="lib-tabs">
        <button class="lib-tab active" data-libtab="history">История</button>
        <button class="lib-tab" data-libtab="funcs">Функции</button>
      </div>

      <div class="lib-panel" id="libHistory">
        <ul class="history-list" id="historyList">
          <li class="history-empty">История пуста</li>
        </ul>
      </div>

      <div class="lib-panel" id="libFuncs" hidden>
        <div class="funcs-grid">
          <button class="func" data-insert="sqrt(" title="Квадратный корень">sqrt</button>
          <button class="func" data-insert="abs(" title="Модуль">abs</button>
          <button class="func" data-insert="exp(" title="e в степени">exp</button>
          <button class="func" data-insert="ln(" title="Натуральный логарифм">ln</button>
          <button class="func" data-insert="log(" title="Логарифм (основание необязательно)">log</button>
          <button class="func" data-insert="log2(" title="Логарифм по 2">log2</button>
          <button class="func" data-insert="log10(" title="Десятичный логарифм">log10</button>
          <button class="func" data-insert="round(" title="Округление (банковское)">round</button>
          <button class="func" data-insert="floor(" title="Внизу">floor</button>
          <button class="func" data-insert="ceil(" title="Вверх">ceil</button>
          <button class="func" data-insert="sin(" title="Синус (радианы)">sin</button>
          <button class="func" data-insert="cos(" title="Косинус (радианы)">cos</button>
          <button class="func" data-insert="tan(" title="Тангенс (радианы)">tan</button>
          <button class="func" data-insert="asin(" title="Арксинус">asin</button>
          <button class="func" data-insert="acos(" title="Арккосинус">acos</button>
          <button class="func" data-insert="atan(" title="Арктангенс">atan</button>
        </div>
        <div class="lib-note">Аргументы тригонометрии — в радианах.<br>
          <code>%</code>: бинарный остаток, если далее идёт операнд, иначе постфиксный процент
          (<code>2 * 50 %</code> = 1).</div>
      </div>
    </aside>
  </div>

  <!-- Строка состояния -->
  <div class="statusbar">
    <span id="statusText">READY — ROBCO INDUSTRIES UNIFIED OPERATING SYSTEM v0.7</span>
    <span class="status-right" id="statusVars">ans = 0</span>
  </div>

  </div><!-- /screen-bezel -->

  <!-- CRT-оверлей: сканлайны, виньетка, мерцание -->
  <div class="crt-layer" aria-hidden="true"></div>
</div>

<!-- Модальное окно справки -->
<div class="modal-veil" id="helpVeil" hidden>
  <div class="modal" role="dialog" aria-label="Справка">
    <div class="modal-head">
      <span>Справка калькулятора</span>
      <button class="modal-close" id="helpClose">&#10005;</button>
    </div>
    <div class="modal-body">
      <h3>Возможности</h3>
      <ul>
        <li>Операции: <code>+ - * / //</code> (целочисленное), <code>**</code> (степень, правосторонняя), скобки</li>
        <li>Проценты: <code>50 %</code> &#8594; 0.5; <code>7 % 3</code> &#8594; 1 (остаток)</li>
        <li>Экспоненциальная запись: <code>1e3</code>, <code>2.5E-4</code>; разделители: <code>1_000_000</code></li>
        <li>Константы: <code>pi</code>, <code>e</code>, <code>tau</code>, <code>inf</code> (регистр не важен)</li>
        <li>Переменная <code>ans</code> — последний результат</li>
        <li>16 функций: sqrt abs exp ln log log2 log10 round floor ceil sin cos tan asin acos atan</li>
      </ul>
      <h3>Горячие клавиши</h3>
      <ul>
        <li><code>Enter</code> — вычислить; <code>&#8593;/&#8595;</code> — история ввода</li>
        <li><code>Esc</code> — закрыть подсказки/справку</li>
      </ul>
    </div>
  </div>
</div>

<script src="engine.js"></script>
<script src="app.js"></script>
</body>
</html>