From 0870df7341b01642b363a41347ecda498d64c189 Mon Sep 17 00:00:00 2001
From: aedes <plognity@gmail.com>
Date: Mon, 20 Apr 2026 21:30:21 +0300
Subject: [PATCH] feat: pixel-perfect Sechenov clone (Nunito font, exact
 colors, well-lg r0)

---
 public/index.html | 404 +++++++++++++++++++++++++++++++---------------
 1 file changed, 278 insertions(+), 126 deletions(-)

diff --git a/public/index.html b/public/index.html
index 988b51d..84f85d9 100644
--- a/public/index.html
+++ b/public/index.html
@@ -5,42 +5,70 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Авторизация и регистрация</title>
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;700&display=swap" rel="stylesheet">
   <style>
-    /* ── FONT FALLBACK ── */
+    /* ── FONT ── */
     body {
-      font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
+      font-family: 'Nunito', Arial, sans-serif;
       font-size: 14px;
       color: #333;
       background: #fff;
     }
 
+    /* ── HEADINGS ── */
+    h1 { font-size: 36px; font-weight: 300; }
+    h2 { font-size: 30px; font-weight: 700; }
+    h3 { font-size: 24px; font-weight: 700; }
+
+    /* ── LINKS ── */
+    a             { color: #6782bf; }
+    a:hover       { color: #892437; }
+
     /* ── HEADER ── */
     .header-wrapper {
       padding-top: 10px;
       padding-bottom: 10px;
     }
     .headlogowrap {
-      min-height: 80px;
+      min-height: 133px;
       display: flex;
       align-items: center;
     }
-    .headlogowrap img { max-width: 100%; height: auto; max-height: 80px; }
-    .headtextwrap { padding-top: 8px; }
-    .headtextwrap h2 {
-      font-size: 20px;
-      font-weight: bold;
+    .headlogowrap img {
+      max-width: 100%;
+      height: auto;
+      max-height: 100px;
+    }
+    .headlogowrap .logo-fallback {
+      font-size: 13px;
+      font-weight: 700;
       color: #003571;
-      margin-top: 4px;
-      margin-bottom: 2px;
+      line-height: 1.3;
+    }
+    .headtextwrap {
+      padding-top: 16px;
+    }
+    .headtextwrap h2 {
+      font-size: 30px;
+      font-weight: 700;
+      color: #003571;
+      margin-top: 12px;
+      margin-bottom: 4px;
     }
     .headtextwrap h3 {
-      font-size: 16px;
-      font-weight: bold;
+      font-size: 24px;
+      font-weight: 700;
       color: #003571;
       margin-top: 0;
-      margin-bottom: 6px;
+      margin-bottom: 10px;
+    }
+    .gtloginbutton {
+      padding: 0;
+      border: 0;
+      box-shadow: none;
     }
-    .gtloginbutton { padding: 0; border: 0; box-shadow: none; }
 
     /* ── NAVBAR ── */
     .mainmenu.with-back {
@@ -51,6 +79,7 @@
     }
     .mainmenu.with-back .navbar-nav > li > a {
       color: #fff;
+      font-family: 'Nunito', Arial, sans-serif;
       padding-top: 12px;
       padding-bottom: 12px;
     }
@@ -70,17 +99,26 @@
     /* ── CLOCK ── */
     #clock {
       font-size: 20px;
-      font-weight: bold;
+      font-weight: 700;
       text-align: right;
-      margin-top: 40px;
+      margin-top: 50px;
       color: #333;
     }
     #clock span { color: #003571; }
 
     /* ── CONTENT ── */
     .theme-showcase { padding-top: 10px; padding-bottom: 20px; }
-    .page-header { border-bottom: 1px solid #eee; margin: 20px 0 15px; padding-bottom: 9px; }
-    .page-header h1 { font-size: 30px; font-weight: normal; color: #333; margin: 0; }
+    .page-header {
+      border-bottom: 1px solid #eee;
+      margin: 40px 0 20px;
+      padding-bottom: 9px;
+    }
+    .page-header h1 {
+      font-size: 36px;
+      font-weight: 300;
+      color: #333;
+      margin: 0;
+    }
 
     /* ── BUTTONS ── */
     .btn-warning {
@@ -88,7 +126,9 @@
       background-color: #005cc3;
       border-color: #005cc3;
     }
-    .btn-warning:hover, .btn-warning:focus {
+    .btn-warning:hover,
+    .btn-warning:focus,
+    .btn-warning:active {
       color: #fff !important;
       background-color: #004fa8;
       border-color: #004fa8;
@@ -98,17 +138,36 @@
       background-color: #003571;
       border-color: #003571;
     }
-    .btn-primary:hover { background-color: #002558; border-color: #002558; }
-    .btn-primary.disabled, .btn-primary[disabled] {
-      background-color: #003571; border-color: #003571; opacity: 0.5;
+    .btn-primary:hover,
+    .btn-primary:focus,
+    .btn-primary:active {
+      background-color: #002558;
+      border-color: #002558;
     }
-    .btn-warning.disabled, .btn-warning[disabled] {
-      background-color: #005cc3; border-color: #005cc3; opacity: 0.5;
+    .btn-primary.disabled,
+    .btn-primary[disabled] {
+      background-color: #003571;
+      border-color: #003571;
+      opacity: 0.5;
+    }
+    .btn-warning.disabled,
+    .btn-warning[disabled] {
+      background-color: #005cc3;
+      border-color: #005cc3;
+      opacity: 0.5;
     }
 
     /* ── WELL ── */
-    .well { background-color: #f7f7f7; border: none; border-radius: 0; box-shadow: none; }
-    .well-lg { padding: 24px; }
+    .well {
+      background-color: #f7f7f7;
+      border: none;
+      border-radius: 4px;
+      box-shadow: none;
+    }
+    .well-lg {
+      padding: 24px;
+      border-radius: 0;
+    }
 
     /* ── FORMS ── */
     .req { color: #003571; }
@@ -118,9 +177,18 @@
       display: flex;
       flex-direction: column;
     }
-    .form-wrap h3 { font-size: 20px; font-weight: bold; }
-    .form-wrap .well { margin-top: auto; margin-bottom: 0 !important; }
-    .form-wrap__link { display: block; margin-bottom: 4px; white-space: nowrap; }
+    .form-wrap h3 {
+      font-size: 24px;
+      font-weight: 700;
+    }
+    .form-wrap .well {
+      margin-top: auto;
+      margin-bottom: 0 !important;
+    }
+    .form-wrap__link {
+      display: block;
+      margin-bottom: 4px;
+    }
     .form-wrap__link a { color: #6782bf; }
     .form-wrap__link a:hover { color: #892437; }
     .form-wrap__links { margin-bottom: 14px; }
@@ -142,13 +210,18 @@
 
     /* ── FOOTER ── */
     .footer {
-      padding: 16px 15px;
+      padding: 20px 0;
       border-top: 1px solid #ddd;
       color: #777;
       font-size: 13px;
+      overflow: hidden;
     }
     .footer .pull-right a { color: #6782bf; }
-    .applicationLinks { display: inline-block; margin: 0 20px; }
+    .footer .pull-right a:hover { color: #892437; }
+    .applicationLinks {
+      display: inline-block;
+      margin: 0 20px;
+    }
     .applicationLinks a {
       display: inline-block;
       background: #111;
@@ -160,7 +233,27 @@
       margin-right: 6px;
       line-height: 1.6;
     }
-    .applicationLinks a:hover { background: #333; }
+    .applicationLinks a:hover {
+      background: #333;
+      color: #fff;
+      text-decoration: none;
+    }
+
+    /* ── HEADER BUTTONS ── */
+    .notifications-button,
+    .lang-selector-button { display: inline-block; }
+    .bellicon { font-size: 18px; color: #fff; }
+    .btn-secondary {
+      background: transparent;
+      border: none;
+      color: #fff;
+      cursor: pointer;
+      padding: 6px 8px;
+    }
+    .btn-secondary:hover {
+      background: rgba(255,255,255,0.15);
+      border-radius: 4px;
+    }
 
     /* ── CHAT SECTION ── */
     .chat-wrapper {
@@ -169,9 +262,12 @@
       padding: 30px 0 40px;
       margin-top: 0;
     }
+    .chat-wrapper .page-header {
+      margin-top: 0;
+    }
     .chat-wrapper .page-header h2 {
       font-size: 24px;
-      font-weight: normal;
+      font-weight: 300;
       color: #333;
       margin: 0;
     }
@@ -181,7 +277,11 @@
       gap: 12px;
       margin-bottom: 14px;
     }
-    .chat-toolbar label { font-size: 13px; color: #555; margin: 0; }
+    .chat-toolbar label {
+      font-size: 13px;
+      color: #555;
+      margin: 0;
+    }
     .chat-toolbar select {
       border: 1px solid #ccc;
       border-radius: 4px;
@@ -189,8 +289,13 @@
       font-size: 13px;
       color: #333;
       background: #fff;
+      font-family: 'Nunito', Arial, sans-serif;
+    }
+    #chat-status {
+      margin-left: auto;
+      font-size: 12px;
+      color: #888;
     }
-    #chat-status { margin-left: auto; font-size: 12px; color: #888; }
     .chat-panels {
       display: flex;
       border: 1px solid #ddd;
@@ -198,7 +303,12 @@
       overflow: hidden;
       height: 360px;
     }
-    .chat-pane { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
+    .chat-pane {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+    }
     .chat-pane + .chat-pane { border-left: 1px solid #ddd; }
     .chat-pane-label {
       padding: 7px 14px;
@@ -218,7 +328,7 @@
       resize: none;
       color: #333;
       background: #fff;
-      font-family: inherit;
+      font-family: 'Nunito', Arial, sans-serif;
     }
     #chat-input:focus { outline: none; }
     #chat-input::placeholder { color: #bbb; }
@@ -234,37 +344,55 @@
     }
     #chat-output.empty { color: #bbb; font-style: italic; }
     #chat-output code {
-      background: #f5f5f5; padding: 1px 5px; border-radius: 3px;
-      font-family: Consolas, monospace; font-size: 12px; color: #c7254e;
+      background: #f5f5f5;
+      padding: 1px 5px;
+      border-radius: 3px;
+      font-family: Consolas, monospace;
+      font-size: 12px;
+      color: #c7254e;
     }
     #chat-output pre {
-      background: #f5f5f5; border: 1px solid #e0e0e0; border-radius: 4px;
-      padding: 10px; overflow-x: auto; margin: 6px 0;
+      background: #f5f5f5;
+      border: 1px solid #e0e0e0;
+      border-radius: 4px;
+      padding: 10px;
+      overflow-x: auto;
+      margin: 6px 0;
+    }
+    #chat-output pre code {
+      background: none;
+      padding: 0;
+      color: #333;
+    }
+    .chat-actions {
+      margin-top: 12px;
+      display: flex;
+      gap: 10px;
+      align-items: center;
     }
-    #chat-output pre code { background: none; padding: 0; color: #333; }
-    .chat-actions { margin-top: 12px; display: flex; gap: 10px; align-items: center; }
     .chat-spinner {
-      display: none; width: 14px; height: 14px;
-      border: 2px solid #ddd; border-top-color: #003571;
-      border-radius: 50%; animation: spin .7s linear infinite;
+      display: none;
+      width: 14px;
+      height: 14px;
+      border: 2px solid #ddd;
+      border-top-color: #003571;
+      border-radius: 50%;
+      animation: spin .7s linear infinite;
     }
     @keyframes spin { to { transform: rotate(360deg); } }
     #chat-timer { font-size: 12px; color: #aaa; }
 
-    /* notification bell placeholder */
-    .notifications-button, .lang-selector-button { display: inline-block; }
-    .bellicon { font-size: 18px; color: #fff; }
-    .btn-secondary {
-      background: transparent; border: none; color: #fff; cursor: pointer; padding: 6px 8px;
-    }
-    .btn-secondary:hover { background: rgba(255,255,255,0.15); border-radius: 4px; }
-
-    @media(max-width:767px) {
-      .headtextwrap h2 { font-size: 16px; }
-      .headtextwrap h3 { font-size: 13px; }
-      #clock { margin-top: 10px; font-size: 16px; }
+    /* ── RESPONSIVE ── */
+    @media (max-width: 767px) {
+      .headtextwrap h2 { font-size: 18px; }
+      .headtextwrap h3 { font-size: 15px; }
+      .headlogowrap { min-height: 80px; }
+      #clock { margin-top: 10px; font-size: 16px; text-align: left; }
       .chat-panels { height: 280px; flex-direction: column; }
       .chat-pane + .chat-pane { border-left: none; border-top: 1px solid #ddd; }
+      .footer .pull-left,
+      .footer .pull-right { float: none !important; display: block; margin-bottom: 6px; }
+      .applicationLinks { margin: 6px 0; }
     }
   </style>
 </head>
@@ -274,43 +402,47 @@
      SECHENOV PORTAL CLONE
 ══════════════════════════════════════════ -->
 
+<!-- HEADER -->
 <div class="container header-wrapper">
   <div class="row">
     <div class="col-sm-2 headlogowrap">
-      <a href="/"><img src="https://student.sechenov.ru/images/logo_blue_2019.png"
-         onerror="this.style.display='none'"
-         alt="Sechenov" class="img-responsive"></a>
+      <a href="/">
+        <img src="https://student.sechenov.ru/images/logo_blue_2019.png"
+             alt="Первый МГМУ им. И.М. Сеченова"
+             class="img-responsive"
+             onerror="this.style.display='none';this.nextElementSibling.style.display='block'">
+        <span class="logo-fallback" style="display:none">Первый МГМУ<br>им. И.М. Сеченова</span>
+      </a>
     </div>
     <div class="col-md-offset-1 col-md-9 col-sm-10 headtextwrap">
       <h2>Информационная система</h2>
       <h3>«Университет — обучающийся»</h3>
 
-      <form class="gtloginbutton navbar-form navbar-right noborder" style="float:right;margin-top:6px;">
+      <form class="gtloginbutton navbar-form navbar-right noborder gtxinmenu" style="float:right;margin-top:4px;">
         <div class="btn-group pull-right" role="group">
           <button type="button" class="btn btn-warning">
             <span class="glyphicon glyphicon-log-in"></span> Авторизация
           </button>
-
-          <div class="notifications-button" style="display:inline-block;vertical-align:middle;margin-left:4px;">
-            <button class="btn-secondary">
+          <div class="notifications-button" style="display:inline-block;vertical-align:middle;margin-left:2px;">
+            <button type="button" class="btn-secondary">
               <span class="glyphicon glyphicon-bell bellicon"></span>
             </button>
           </div>
-
           <div class="lang-selector-button" style="display:inline-block;vertical-align:middle;">
-            <button class="btn-secondary">🇷🇺</button>
+            <button type="button" class="btn-secondary">🇷🇺</button>
           </div>
         </div>
       </form>
-      <div class="clear"></div>
+      <div class="clearfix"></div>
     </div>
   </div>
 </div>
 
+<!-- BLUE NAVBAR -->
 <nav class="navbar navbar-default with-back mainmenu">
-  <div class="container" style="position:relative;">
+  <div class="container">
     <ul class="nav navbar-nav">
-      <li class="active"><a href="#">Главная</a></li>
+      <li class="active"><a href="/">Главная</a></li>
       <li><a href="#">Репозиторий</a></li>
       <li><a href="#">Обратная связь</a></li>
       <li><a href="#">Заявления</a></li>
@@ -318,6 +450,7 @@
   </div>
 </nav>
 
+<!-- MAIN CONTENT -->
 <div class="container theme-showcase" role="main">
   <div class="row">
     <div class="col-sm-7 col-xs-12">
@@ -379,17 +512,21 @@
           <label>Номер студенческого билета <span class="req">*</span>
             <span class="badge">?</span>
           </label>
-          <div class="row"><div class="col-xs-9">
-            <input type="text" class="form-control" placeholder="Например, 123456789123">
-          </div></div>
+          <div class="row">
+            <div class="col-xs-9">
+              <input type="text" class="form-control" placeholder="Например, 123456789123">
+            </div>
+          </div>
         </div>
         <div class="form-group">
           <label>Идентификатор <span class="req">*</span>
             <span class="badge">?</span>
           </label>
-          <div class="row"><div class="col-xs-9">
-            <input type="password" class="form-control" placeholder="Например, 1122345678">
-          </div></div>
+          <div class="row">
+            <div class="col-xs-9">
+              <input type="password" class="form-control" placeholder="Например, 1122345678">
+            </div>
+          </div>
         </div>
         <div class="checkbox">
           <label>
@@ -412,17 +549,21 @@
           <label>Адрес электронной почты <span class="req">*</span>
             <span class="badge">?</span>
           </label>
-          <div class="row"><div class="col-xs-9">
-            <input type="text" class="form-control" placeholder="ivanov@mail.ru">
-          </div></div>
+          <div class="row">
+            <div class="col-xs-9">
+              <input type="text" class="form-control" placeholder="ivanov@mail.ru">
+            </div>
+          </div>
         </div>
         <div class="form-group">
           <label>Пароль <span class="req">*</span>
             <span class="badge">?</span>
           </label>
-          <div class="row"><div class="col-xs-9">
-            <input type="password" class="form-control" placeholder="******">
-          </div></div>
+          <div class="row">
+            <div class="col-xs-9">
+              <input type="password" class="form-control" placeholder="******">
+            </div>
+          </div>
         </div>
         <div class="checkbox">
           <label>
@@ -435,9 +576,10 @@
   </div>
 </div>
 
+<!-- FOOTER -->
 <div class="container footer">
   <div class="pull-left">
-    © Информационная система «Университет — обучающийся» 2015–2026
+    &copy; Информационная система «Университет — обучающийся» 2015–2026
   </div>
   <div class="applicationLinks">
     <a href="#">App Store</a>
@@ -490,24 +632,26 @@
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 <script>
   // ── Clock ──
+  // The spec requires: <span>DD.MM.YYYY</span>[space][time as text node]
+  // We use two sibling spans but style only #clkDate blue, #clkTime stays dark (inherits #333).
   function updateClock() {
     const now = new Date();
-    const dd = String(now.getDate()).padStart(2,'0');
-    const mm = String(now.getMonth()+1).padStart(2,'0');
+    const dd   = String(now.getDate()).padStart(2, '0');
+    const mm   = String(now.getMonth() + 1).padStart(2, '0');
     const yyyy = now.getFullYear();
-    const hh = String(now.getHours()).padStart(2,'0');
-    const mi = String(now.getMinutes()).padStart(2,'0');
-    const ss = String(now.getSeconds()).padStart(2,'0');
-    document.getElementById('clkDate').textContent = `${dd}.${mm}.${yyyy}`;
-    document.getElementById('clkTime').textContent = `${hh}:${mi}:${ss}`;
+    const hh   = String(now.getHours()).padStart(2, '0');
+    const mi   = String(now.getMinutes()).padStart(2, '0');
+    const ss   = String(now.getSeconds()).padStart(2, '0');
+    document.getElementById('clkDate').textContent = dd + '.' + mm + '.' + yyyy;
+    document.getElementById('clkTime').textContent = hh + ':' + mi + ':' + ss;
   }
   updateClock();
   setInterval(updateClock, 1000);
 
-  // ── Checkbox → enable button ──
+  // ── Checkbox → enable submit button ──
   document.querySelectorAll('.agreement_checkbox').forEach(function(cb) {
     cb.addEventListener('change', function() {
-      const btn = this.closest('.well').querySelector('button');
+      var btn = this.closest('.well').querySelector('button');
       if (this.checked) {
         btn.classList.remove('disabled');
         btn.removeAttribute('disabled');
@@ -519,24 +663,24 @@
   });
 
   // ── Chat ──
-  const inputEl  = document.getElementById('chat-input');
-  const outputEl = document.getElementById('chat-output');
-  const sendBtn  = document.getElementById('sendBtn');
-  const clearBtn = document.getElementById('clearBtn');
-  const modelSel = document.getElementById('modelSel');
-  const statusEl = document.getElementById('chat-status');
-  const spinnerEl= document.getElementById('spinner');
-  const timerEl  = document.getElementById('chat-timer');
+  var inputEl   = document.getElementById('chat-input');
+  var outputEl  = document.getElementById('chat-output');
+  var sendBtn   = document.getElementById('sendBtn');
+  var clearBtn  = document.getElementById('clearBtn');
+  var modelSel  = document.getElementById('modelSel');
+  var statusEl  = document.getElementById('chat-status');
+  var spinnerEl = document.getElementById('spinner');
+  var timerEl   = document.getElementById('chat-timer');
 
-  let timerInterval = null;
+  var timerInterval = null;
 
   function setLoading(on) {
     sendBtn.disabled = on;
     spinnerEl.style.display = on ? 'inline-block' : 'none';
     if (on) {
-      const start = Date.now();
-      timerInterval = setInterval(() => {
-        timerEl.textContent = ((Date.now()-start)/1000).toFixed(1)+'s';
+      var start = Date.now();
+      timerInterval = setInterval(function() {
+        timerEl.textContent = ((Date.now() - start) / 1000).toFixed(1) + 's';
       }, 100);
     } else {
       clearInterval(timerInterval);
@@ -544,44 +688,50 @@
   }
 
   function renderMarkdown(text) {
-    let html = text.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
-    html = html.replace(/```[\w]*\n?([\s\S]*?)```/g, (_,c) => `<pre><code>${c.trim()}</code></pre>`);
+    var html = text
+      .replace(/&/g, '&amp;')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;');
+    html = html.replace(/```[\w]*\n?([\s\S]*?)```/g, function(_, c) {
+      return '<pre><code>' + c.trim() + '</code></pre>';
+    });
     html = html.replace(/`([^`]+)`/g, '<code>$1</code>');
     html = html.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>');
     return html;
   }
 
   async function send() {
-    const text = inputEl.value.trim();
+    var text = inputEl.value.trim();
     if (!text) return;
     outputEl.className = '';
     outputEl.innerHTML = '';
     setLoading(true);
     statusEl.textContent = 'Генерирую...';
-    let fullText = '';
+    var fullText = '';
     try {
-      const resp = await fetch('/api/chat', {
+      var resp = await fetch('/api/chat', {
         method: 'POST',
-        headers: {'Content-Type':'application/json'},
-        body: JSON.stringify({text, model: modelSel.value}),
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ text: text, model: modelSel.value }),
       });
-      const reader = resp.body.getReader();
-      const decoder = new TextDecoder();
-      let buf = '';
+      var reader  = resp.body.getReader();
+      var decoder = new TextDecoder();
+      var buf = '';
       while (true) {
-        const {done, value} = await reader.read();
-        if (done) break;
-        buf += decoder.decode(value, {stream:true});
-        const parts = buf.split('\n\n');
+        var result = await reader.read();
+        if (result.done) break;
+        buf += decoder.decode(result.value, { stream: true });
+        var parts = buf.split('\n\n');
         buf = parts.pop();
-        for (const part of parts) {
+        for (var i = 0; i < parts.length; i++) {
+          var part = parts[i];
           if (!part.startsWith('data: ')) continue;
-          const raw = part.slice(6).trim();
+          var raw = part.slice(6).trim();
           if (raw === '[DONE]') continue;
           try {
-            const obj = JSON.parse(raw);
+            var obj = JSON.parse(raw);
             if (obj.error) {
-              outputEl.innerHTML += `<span style="color:#a94442">${obj.error}</span>`;
+              outputEl.innerHTML += '<span style="color:#a94442">' + obj.error + '</span>';
             } else if (obj.text) {
               fullText += obj.text;
               outputEl.innerHTML = renderMarkdown(fullText);
@@ -591,16 +741,18 @@
         }
       }
     } catch(e) {
-      outputEl.innerHTML = `<span style="color:#a94442">Ошибка: ${e.message}</span>`;
+      outputEl.innerHTML = '<span style="color:#a94442">Ошибка: ' + e.message + '</span>';
     } finally {
       setLoading(false);
-      statusEl.textContent = fullText ? `${fullText.length} символов` : '';
+      statusEl.textContent = fullText ? (fullText.length + ' символов') : '';
     }
   }
 
   sendBtn.addEventListener('click', send);
-  inputEl.addEventListener('keydown', e => { if (e.ctrlKey && e.key==='Enter') send(); });
-  clearBtn.addEventListener('click', () => {
+  inputEl.addEventListener('keydown', function(e) {
+    if (e.ctrlKey && e.key === 'Enter') send();
+  });
+  clearBtn.addEventListener('click', function() {
     inputEl.value = '';
     outputEl.innerHTML = 'Ответ появится здесь...';
     outputEl.className = 'empty';