feat: Sechenov portal clone as main page + white chat below

backup: working version 2026-04-20 (direct API + undici + acc3)
2026-04-20 21:16:28 +03:00 · 2026-04-20 21:10:58 +03:00
3 changed files with 982 additions and 137 deletions
--- a/backups/index.html.2026-04-20
+++ b/backups/index.html.2026-04-20
@@ -0,0 +1,315 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Sechenov — Claude Chat</title>
+  <style>
+    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+      background: #0f0f0f;
+      color: #e8e8e8;
+      height: 100vh;
+      display: flex;
+      flex-direction: column;
+    }
+
+    header {
+      padding: 12px 20px;
+      border-bottom: 1px solid #222;
+      display: flex;
+      align-items: center;
+      gap: 16px;
+      flex-shrink: 0;
+    }
+
+    header h1 { font-size: 16px; font-weight: 600; color: #fff; }
+
+    select {
+      background: #1e1e1e;
+      border: 1px solid #333;
+      color: #e8e8e8;
+      padding: 5px 10px;
+      border-radius: 6px;
+      font-size: 13px;
+      cursor: pointer;
+    }
+
+    select:focus { outline: none; border-color: #555; }
+
+    #status {
+      margin-left: auto;
+      font-size: 12px;
+      color: #666;
+    }
+
+    main {
+      flex: 1;
+      display: flex;
+      gap: 0;
+      overflow: hidden;
+    }
+
+    .pane {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+    }
+
+    .pane + .pane { border-left: 1px solid #222; }
+
+    .pane-label {
+      padding: 8px 16px;
+      font-size: 11px;
+      text-transform: uppercase;
+      letter-spacing: 0.08em;
+      color: #555;
+      border-bottom: 1px solid #1a1a1a;
+      flex-shrink: 0;
+    }
+
+    textarea {
+      flex: 1;
+      background: #0f0f0f;
+      color: #e8e8e8;
+      border: none;
+      padding: 16px;
+      font-size: 14px;
+      line-height: 1.6;
+      resize: none;
+      font-family: inherit;
+    }
+
+    textarea:focus { outline: none; }
+    textarea::placeholder { color: #444; }
+
+    #output {
+      flex: 1;
+      padding: 16px;
+      overflow-y: auto;
+      font-size: 14px;
+      line-height: 1.7;
+      white-space: pre-wrap;
+      word-break: break-word;
+      color: #d4d4d4;
+    }
+
+    #output.empty { color: #444; font-style: italic; }
+
+    footer {
+      padding: 12px 20px;
+      border-top: 1px solid #222;
+      display: flex;
+      gap: 10px;
+      align-items: center;
+      flex-shrink: 0;
+    }
+
+    button {
+      padding: 8px 20px;
+      border: none;
+      border-radius: 6px;
+      font-size: 14px;
+      font-weight: 500;
+      cursor: pointer;
+      transition: background 0.15s;
+    }
+
+    #sendBtn {
+      background: #2563eb;
+      color: #fff;
+    }
+
+    #sendBtn:hover { background: #1d4ed8; }
+    #sendBtn:disabled { background: #1e3a5f; color: #5a7fa8; cursor: not-allowed; }
+
+    #clearBtn {
+      background: #1e1e1e;
+      color: #999;
+      border: 1px solid #333;
+    }
+
+    #clearBtn:hover { background: #252525; }
+
+    .spinner {
+      display: none;
+      width: 14px; height: 14px;
+      border: 2px solid #333;
+      border-top-color: #2563eb;
+      border-radius: 50%;
+      animation: spin 0.7s linear infinite;
+    }
+
+    @keyframes spin { to { transform: rotate(360deg); } }
+
+    .loading .spinner { display: inline-block; }
+
+    /* Markdown-like rendering */
+    #output code {
+      background: #1a1a1a;
+      padding: 1px 5px;
+      border-radius: 3px;
+      font-family: 'Fira Code', 'Consolas', monospace;
+      font-size: 13px;
+      color: #ce9178;
+    }
+
+    #output pre {
+      background: #1a1a1a;
+      border: 1px solid #2a2a2a;
+      border-radius: 6px;
+      padding: 12px;
+      overflow-x: auto;
+      margin: 8px 0;
+    }
+
+    #output pre code {
+      background: none;
+      padding: 0;
+      color: #d4d4d4;
+    }
+  </style>
+</head>
+<body>
+  <header>
+    <h1>Claude Chat</h1>
+    <select id="modelSel">
+      <option value="sonnet">Sonnet 4.6</option>
+      <option value="haiku">Haiku 4.5</option>
+    </select>
+    <span id="status"></span>
+  </header>
+
+  <main>
+    <div class="pane">
+      <div class="pane-label">Запрос</div>
+      <textarea id="input" placeholder="Вставьте текст сюда..."></textarea>
+    </div>
+    <div class="pane">
+      <div class="pane-label">Ответ</div>
+      <div id="output" class="empty">Ответ появится здесь...</div>
+    </div>
+  </main>
+
+  <footer>
+    <button id="sendBtn">Отправить</button>
+    <button id="clearBtn">Очистить</button>
+    <div class="spinner" id="spinner"></div>
+    <span id="timer" style="margin-left:4px;font-size:12px;color:#555;"></span>
+  </footer>
+
+  <script>
+    const inputEl = document.getElementById('input');
+    const outputEl = document.getElementById('output');
+    const sendBtn = document.getElementById('sendBtn');
+    const clearBtn = document.getElementById('clearBtn');
+    const modelSel = document.getElementById('modelSel');
+    const statusEl = document.getElementById('status');
+    const spinnerEl = document.getElementById('spinner');
+    const timerEl = document.getElementById('timer');
+
+    let timerInterval = null;
+    let startTime = null;
+
+    function setLoading(on) {
+      sendBtn.disabled = on;
+      spinnerEl.style.display = on ? 'inline-block' : 'none';
+      if (on) {
+        startTime = Date.now();
+        timerInterval = setInterval(() => {
+          timerEl.textContent = ((Date.now() - startTime) / 1000).toFixed(1) + 's';
+        }, 100);
+      } else {
+        clearInterval(timerInterval);
+      }
+    }
+
+    function renderMarkdown(text) {
+      // Simple: escape html, then apply basic markdown
+      let html = text
+        .replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+
+      // Code blocks
+      html = html.replace(/```[\w]*\n?([\s\S]*?)```/g, (_, code) =>
+        `<pre><code>${code.trim()}</code></pre>`);
+      // Inline code
+      html = html.replace(/`([^`]+)`/g, '<code>$1</code>');
+      // Bold
+      html = html.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>');
+
+      return html;
+    }
+
+    async function send() {
+      const text = inputEl.value.trim();
+      if (!text) return;
+
+      outputEl.className = '';
+      outputEl.innerHTML = '';
+      setLoading(true);
+      statusEl.textContent = 'Генерирую...';
+
+      let fullText = '';
+
+      try {
+        const resp = await fetch('/api/chat', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ text, model: modelSel.value }),
+        });
+
+        const reader = resp.body.getReader();
+        const decoder = new TextDecoder();
+        let buf = '';
+
+        while (true) {
+          const { done, value } = await reader.read();
+          if (done) break;
+          buf += decoder.decode(value, { stream: true });
+
+          const parts = buf.split('\n\n');
+          buf = parts.pop();
+
+          for (const part of parts) {
+            if (!part.startsWith('data: ')) continue;
+            const raw = part.slice(6).trim();
+            if (raw === '[DONE]') continue;
+            try {
+              const obj = JSON.parse(raw);
+              if (obj.error) {
+                outputEl.innerHTML += `<span style="color:#f87171">${obj.error}</span>`;
+              } else if (obj.text) {
+                fullText += obj.text;
+                outputEl.innerHTML = renderMarkdown(fullText);
+                outputEl.scrollTop = outputEl.scrollHeight;
+              }
+            } catch (e) {}
+          }
+        }
+      } catch (e) {
+        outputEl.innerHTML = `<span style="color:#f87171">Ошибка: ${e.message}</span>`;
+      } finally {
+        setLoading(false);
+        statusEl.textContent = fullText ? `${fullText.length} символов` : '';
+      }
+    }
+
+    sendBtn.addEventListener('click', send);
+
+    inputEl.addEventListener('keydown', (e) => {
+      if (e.ctrlKey && e.key === 'Enter') send();
+    });
+
+    clearBtn.addEventListener('click', () => {
+      inputEl.value = '';
+      outputEl.innerHTML = 'Ответ появится здесь...';
+      outputEl.className = 'empty';
+      statusEl.textContent = '';
+      timerEl.textContent = '';
+    });
+  </script>
+</body>
+</html>
--- a/backups/server.js.2026-04-20
+++ b/backups/server.js.2026-04-20
@@ -0,0 +1,110 @@
+const express = require('express');
+const path = require('path');
+const fs = require('fs');
+const os = require('os');
+const { ProxyAgent, setGlobalDispatcher } = require('undici');
+
+const proxyUrl = process.env.HTTPS_PROXY || process.env.HTTP_PROXY;
+if (proxyUrl) {
+    setGlobalDispatcher(new ProxyAgent(proxyUrl));
+    console.log(`✓ Using proxy: ${proxyUrl}`);
+}
+
+const app = express();
+app.use(express.json({ limit: '10mb' }));
+app.use(express.static(path.join(__dirname, 'public')));
+
+const MODELS = {
+    sonnet: 'claude-sonnet-4-6',
+    haiku: 'claude-haiku-4-5-20251001',
+};
+
+function getAccessToken() {
+    const configDir = process.env.CLAUDE_CONFIG_DIR || path.join(os.homedir(), '.claude');
+    const credsPath = path.join(configDir, '.credentials.json');
+    try {
+        const creds = JSON.parse(fs.readFileSync(credsPath, 'utf8'));
+        return creds?.claudeAiOauth?.accessToken || null;
+    } catch (e) {
+        return null;
+    }
+}
+
+app.post('/api/chat', async (req, res) => {
+    const { text, model = 'sonnet' } = req.body;
+    if (!text?.trim()) return res.status(400).json({ error: 'text required' });
+
+    const modelId = MODELS[model] || MODELS.sonnet;
+    const accessToken = getAccessToken();
+
+    if (!accessToken) {
+        return res.status(500).json({ error: 'No credentials in ' + (process.env.CLAUDE_CONFIG_DIR || '~/.claude') });
+    }
+
+    res.setHeader('Content-Type', 'text/event-stream');
+    res.setHeader('Cache-Control', 'no-cache');
+    res.setHeader('Connection', 'keep-alive');
+    res.flushHeaders();
+
+    const heartbeat = setInterval(() => res.write(': ping\n\n'), 15000);
+
+    try {
+        const apiResp = await fetch('https://api.anthropic.com/v1/messages', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                'Authorization': `Bearer ${accessToken}`,
+                'anthropic-version': '2023-06-01',
+                'anthropic-beta': 'claude-code-20250219,oauth-2025-04-20,interleaved-thinking-2025-05-14,fine-grained-tool-streaming-2025-05-14',
+                'x-app': 'cli',
+                'User-Agent': 'claude-cli/2.1.114',
+            },
+            body: JSON.stringify({
+                model: modelId,
+                max_tokens: 8192,
+                stream: true,
+                system: "You are Claude Code, Anthropic's official CLI for Claude.",
+                messages: [{ role: 'user', content: text }],
+            }),
+        });
+
+        if (!apiResp.ok) {
+            const errText = await apiResp.text();
+            res.write(`data: ${JSON.stringify({ error: `${apiResp.status}: ${errText.substring(0, 500)}` })}\n\n`);
+            return;
+        }
+
+        const reader = apiResp.body.getReader();
+        const decoder = new TextDecoder();
+        let buf = '';
+
+        while (true) {
+            const { done, value } = await reader.read();
+            if (done) break;
+            buf += decoder.decode(value, { stream: true });
+            const events = buf.split('\n\n');
+            buf = events.pop();
+            for (const ev of events) {
+                const dataLine = ev.split('\n').find(l => l.startsWith('data: '));
+                if (!dataLine) continue;
+                const payload = dataLine.slice(6);
+                if (payload === '[DONE]') continue;
+                try {
+                    const obj = JSON.parse(payload);
+                    if (obj.type === 'content_block_delta' && obj.delta?.type === 'text_delta') {
+                        res.write(`data: ${JSON.stringify({ text: obj.delta.text })}\n\n`);
+                    }
+                } catch (e) {}
+            }
+        }
+    } catch (err) {
+        console.error('[api error]', err.message);
+        res.write(`data: ${JSON.stringify({ error: err.message })}\n\n`);
+    } finally {
+        clearInterval(heartbeat);
+        res.write('data: [DONE]\n\n');
+        res.end();
+    }
+});
+
+app.listen(8108, () => console.log('sechenov :8108'));
--- a/public/index.html
+++ b/public/index.html
@@ -3,205 +3,645 @@
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Sechenov — Claude Chat</title>
+  <title>Информационная система «Университет — обучающийся»</title>
  <style>
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    body {
-      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-      background: #0f0f0f;
-      color: #e8e8e8;
-      height: 100vh;
-      display: flex;
-      flex-direction: column;
+      font-family: Arial, Helvetica, sans-serif;
+      background: #f0f0f0;
+      color: #333;
+      font-size: 14px;
    }

-    header {
-      padding: 12px 20px;
-      border-bottom: 1px solid #222;
+    /* ── NAVBAR ── */
+    .snav {
+      background: #2d5fa6;
+      display: flex;
+      align-items: stretch;
+      min-height: 48px;
+    }
+
+    .snav-links {
+      display: flex;
+      align-items: stretch;
+    }
+
+    .snav-links a {
      display: flex;
      align-items: center;
-      gap: 16px;
+      padding: 0 20px;
+      color: #fff;
+      text-decoration: none;
+      font-size: 14px;
+      font-weight: 500;
+      border-right: 1px solid rgba(255,255,255,0.15);
+      transition: background 0.15s;
+    }
+
+    .snav-links a:first-child {
+      background: rgba(0,0,0,0.2);
+      border-bottom: 3px solid #fff;
+    }
+
+    .snav-links a:hover { background: rgba(255,255,255,0.1); }
+
+    .snav-right {
+      margin-left: auto;
+      display: flex;
+      align-items: center;
+      padding: 0 16px;
+      gap: 14px;
+    }
+
+    .snav-flag { font-size: 20px; line-height: 1; }
+
+    .snav-bell {
+      color: #fff;
+      font-size: 18px;
+      cursor: pointer;
+    }
+
+    .snav-auth {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      background: transparent;
+      border: 2px solid #fff;
+      color: #fff;
+      padding: 6px 14px;
+      border-radius: 4px;
+      font-size: 13px;
+      font-weight: 600;
+      cursor: pointer;
+      text-decoration: none;
+    }
+
+    .snav-auth:hover { background: rgba(255,255,255,0.15); }
+
+    /* ── CONTENT AREA ── */
+    .scontent {
+      max-width: 960px;
+      margin: 0 auto;
+      background: #fff;
+      padding: 32px 40px 40px;
+      min-height: 600px;
+    }
+
+    .spage-header {
+      display: flex;
+      align-items: flex-start;
+      justify-content: space-between;
+      margin-bottom: 28px;
+    }
+
+    .spage-title {
+      font-size: 24px;
+      font-weight: normal;
+      color: #222;
+      line-height: 1.2;
+    }
+
+    .spage-title::after {
+      content: '';
+      display: block;
+      width: 48px;
+      height: 3px;
+      background: #2d5fa6;
+      margin-top: 8px;
+    }
+
+    .spage-datetime {
+      text-align: right;
+      line-height: 1.3;
+    }
+
+    .spage-date {
+      font-size: 20px;
+      font-weight: bold;
+      color: #2d5fa6;
+    }
+
+    .spage-time {
+      font-size: 20px;
+      font-weight: bold;
+      color: #555;
+    }
+
+    .sinfo-box {
+      background: #d4e5f7;
+      border-radius: 2px;
+      padding: 14px 18px;
+      margin-bottom: 24px;
+      line-height: 1.6;
+      color: #333;
+    }
+
+    .sinfo-box a { color: #2d5fa6; }
+
+    .scontent p {
+      margin-bottom: 14px;
+      line-height: 1.7;
+    }
+
+    .scontent p a { color: #2d5fa6; }
+    .scontent .red { color: #c0392b; }
+    .scontent .blue { color: #2d5fa6; }
+
+    /* ── FORMS ── */
+    .sforms {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 32px;
+      margin-top: 28px;
+    }
+
+    .sform-col h3 {
+      font-size: 18px;
+      font-weight: bold;
+      color: #222;
+      margin-bottom: 10px;
+    }
+
+    .sform-col h3 span {
+      font-size: 14px;
+      font-weight: normal;
+      color: #555;
+    }
+
+    .sform-col .slinks {
+      margin-bottom: 16px;
+      line-height: 2;
+    }
+
+    .sform-col .slinks a {
+      color: #2d5fa6;
+      text-decoration: none;
+      display: block;
+      font-size: 13px;
+    }
+
+    .sform-col .slinks a::before { content: '→ '; }
+    .sform-col .slinks a:hover { text-decoration: underline; }
+
+    .scard {
+      background: #f3f3f3;
+      border-radius: 4px;
+      padding: 20px;
+    }
+
+    .sfield { margin-bottom: 14px; }
+
+    .sfield label {
+      display: block;
+      font-size: 13px;
+      margin-bottom: 5px;
+      color: #333;
+    }
+
+    .sfield label .req { color: #c0392b; margin-left: 2px; }
+    .sfield label .hint { color: #888; margin-left: 4px; font-size: 12px; }
+
+    .sfield input {
+      width: 100%;
+      padding: 8px 10px;
+      border: 1px solid #ccc;
+      border-radius: 3px;
+      font-size: 13px;
+      background: #fff;
+      color: #333;
+    }
+
+    .sfield input:focus {
+      outline: none;
+      border-color: #2d5fa6;
+    }
+
+    .sfield input::placeholder { color: #aaa; }
+
+    .scheckbox {
+      display: flex;
+      align-items: flex-start;
+      gap: 8px;
+      margin-bottom: 16px;
+      font-size: 13px;
+      color: #333;
+      line-height: 1.4;
+    }
+
+    .scheckbox input[type=checkbox] {
+      width: auto;
+      margin-top: 2px;
      flex-shrink: 0;
    }

-    header h1 { font-size: 16px; font-weight: 600; color: #fff; }
+    .sbtn {
+      width: 100%;
+      padding: 10px;
+      background: #2d5fa6;
+      color: #fff;
+      border: none;
+      border-radius: 4px;
+      font-size: 14px;
+      font-weight: bold;
+      cursor: pointer;
+      transition: background 0.15s;
+    }

-    select {
-      background: #1e1e1e;
-      border: 1px solid #333;
-      color: #e8e8e8;
-      padding: 5px 10px;
+    .sbtn:hover { background: #244d8a; }
+
+    /* ── SECHENOV FOOTER ── */
+    .sfooter {
+      background: #fff;
+      max-width: 960px;
+      margin: 0 auto;
+      border-top: 1px solid #ddd;
+      padding: 16px 40px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      font-size: 12px;
+      color: #777;
+    }
+
+    .sfooter-badges { display: flex; gap: 10px; align-items: center; }
+
+    .sbadge {
+      display: inline-flex;
+      align-items: center;
+      gap: 5px;
+      background: #111;
+      color: #fff;
      border-radius: 6px;
+      padding: 4px 10px;
+      font-size: 11px;
+      text-decoration: none;
+      line-height: 1.3;
+    }
+
+    .sbadge-sub { font-size: 9px; display: block; opacity: 0.7; }
+    .sbadge-main { font-size: 12px; font-weight: bold; display: block; }
+
+    .sfooter a { color: #2d5fa6; text-decoration: none; }
+    .sfooter a:hover { text-decoration: underline; }
+
+    /* ── CHAT SECTION ── */
+    .chat-section {
+      max-width: 960px;
+      margin: 0 auto;
+      background: #fff;
+      border-top: 4px solid #2d5fa6;
+      padding: 32px 40px 40px;
+    }
+
+    .chat-section-title {
+      font-size: 20px;
+      font-weight: normal;
+      color: #222;
+      margin-bottom: 4px;
+    }
+
+    .chat-section-title::after {
+      content: '';
+      display: block;
+      width: 48px;
+      height: 3px;
+      background: #2d5fa6;
+      margin-top: 8px;
+      margin-bottom: 20px;
+    }
+
+    .chat-toolbar {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      margin-bottom: 16px;
+    }
+
+    .chat-toolbar label { font-size: 13px; color: #555; }
+
+    .chat-toolbar select {
+      background: #fff;
+      border: 1px solid #ccc;
+      color: #333;
+      padding: 5px 10px;
+      border-radius: 4px;
      font-size: 13px;
      cursor: pointer;
    }

-    select:focus { outline: none; border-color: #555; }
+    .chat-toolbar select:focus { outline: none; border-color: #2d5fa6; }

    #status {
      margin-left: auto;
      font-size: 12px;
-      color: #666;
+      color: #888;
    }

-    main {
-      flex: 1;
-      display: flex;
+    .chat-panels {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
      gap: 0;
+      border: 1px solid #ddd;
+      border-radius: 4px;
      overflow: hidden;
+      height: 380px;
    }

-    .pane {
-      flex: 1;
+    .chat-pane {
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

-    .pane + .pane { border-left: 1px solid #222; }
+    .chat-pane + .chat-pane { border-left: 1px solid #ddd; }

-    .pane-label {
-      padding: 8px 16px;
+    .chat-pane-label {
+      padding: 8px 14px;
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.08em;
-      color: #555;
-      border-bottom: 1px solid #1a1a1a;
+      color: #999;
+      border-bottom: 1px solid #eee;
+      background: #fafafa;
      flex-shrink: 0;
    }

-    textarea {
+    #input {
      flex: 1;
-      background: #0f0f0f;
-      color: #e8e8e8;
+      background: #fff;
+      color: #333;
      border: none;
-      padding: 16px;
-      font-size: 14px;
+      padding: 14px;
+      font-size: 13px;
      line-height: 1.6;
      resize: none;
      font-family: inherit;
    }

-    textarea:focus { outline: none; }
-    textarea::placeholder { color: #444; }
+    #input:focus { outline: none; }
+    #input::placeholder { color: #bbb; }

    #output {
      flex: 1;
-      padding: 16px;
+      padding: 14px;
      overflow-y: auto;
-      font-size: 14px;
+      font-size: 13px;
      line-height: 1.7;
      white-space: pre-wrap;
      word-break: break-word;
-      color: #d4d4d4;
+      color: #333;
+      background: #fff;
    }

-    #output.empty { color: #444; font-style: italic; }
+    #output.empty { color: #bbb; font-style: italic; }

-    footer {
-      padding: 12px 20px;
-      border-top: 1px solid #222;
+    #output code {
+      background: #f5f5f5;
+      padding: 1px 5px;
+      border-radius: 3px;
+      font-family: 'Consolas', monospace;
+      font-size: 12px;
+      color: #c7254e;
+    }
+
+    #output pre {
+      background: #f5f5f5;
+      border: 1px solid #e0e0e0;
+      border-radius: 4px;
+      padding: 10px;
+      overflow-x: auto;
+      margin: 6px 0;
+    }
+
+    #output pre code { background: none; padding: 0; color: #333; }
+
+    .chat-actions {
+      margin-top: 12px;
      display: flex;
      gap: 10px;
      align-items: center;
-      flex-shrink: 0;
-    }
-
-    button {
-      padding: 8px 20px;
-      border: none;
-      border-radius: 6px;
-      font-size: 14px;
-      font-weight: 500;
-      cursor: pointer;
-      transition: background 0.15s;
    }

    #sendBtn {
-      background: #2563eb;
+      padding: 8px 22px;
+      border: none;
+      border-radius: 4px;
+      font-size: 13px;
+      font-weight: bold;
+      cursor: pointer;
+      background: #2d5fa6;
      color: #fff;
+      transition: background 0.15s;
    }

-    #sendBtn:hover { background: #1d4ed8; }
-    #sendBtn:disabled { background: #1e3a5f; color: #5a7fa8; cursor: not-allowed; }
+    #sendBtn:hover { background: #244d8a; }
+    #sendBtn:disabled { background: #8aabcf; cursor: not-allowed; }

    #clearBtn {
-      background: #1e1e1e;
-      color: #999;
-      border: 1px solid #333;
+      padding: 8px 16px;
+      border: 1px solid #ccc;
+      border-radius: 4px;
+      font-size: 13px;
+      cursor: pointer;
+      background: #fff;
+      color: #555;
+      transition: background 0.15s;
    }

-    #clearBtn:hover { background: #252525; }
+    #clearBtn:hover { background: #f5f5f5; }

    .spinner {
      display: none;
      width: 14px; height: 14px;
-      border: 2px solid #333;
-      border-top-color: #2563eb;
+      border: 2px solid #ddd;
+      border-top-color: #2d5fa6;
      border-radius: 50%;
      animation: spin 0.7s linear infinite;
    }

    @keyframes spin { to { transform: rotate(360deg); } }

-    .loading .spinner { display: inline-block; }
-
-    /* Markdown-like rendering */
-    #output code {
-      background: #1a1a1a;
-      padding: 1px 5px;
-      border-radius: 3px;
-      font-family: 'Fira Code', 'Consolas', monospace;
-      font-size: 13px;
-      color: #ce9178;
-    }
-
-    #output pre {
-      background: #1a1a1a;
-      border: 1px solid #2a2a2a;
-      border-radius: 6px;
-      padding: 12px;
-      overflow-x: auto;
-      margin: 8px 0;
-    }
-
-    #output pre code {
-      background: none;
-      padding: 0;
-      color: #d4d4d4;
-    }
+    #timer { font-size: 12px; color: #aaa; }
  </style>
 </head>
 <body>
-  <header>
-    <h1>Claude Chat</h1>
-    <select id="modelSel">
-      <option value="sonnet">Sonnet 4.6</option>
-      <option value="haiku">Haiku 4.5</option>
-    </select>
-    <span id="status"></span>
-  </header>

-  <main>
-    <div class="pane">
-      <div class="pane-label">Запрос</div>
-      <textarea id="input" placeholder="Вставьте текст сюда..."></textarea>
+  <!-- ══ SECHENOV PORTAL CLONE ══ -->
+  <nav class="snav">
+    <div class="snav-links">
+      <a href="#">Главная</a>
+      <a href="#">Репозиторий</a>
+      <a href="#">Обратная связь</a>
+      <a href="#">Заявления</a>
    </div>
-    <div class="pane">
-      <div class="pane-label">Ответ</div>
-      <div id="output" class="empty">Ответ появится здесь...</div>
+    <div class="snav-right">
+      <span class="snav-flag">🇷🇺</span>
+      <span class="snav-bell">🔔</span>
+      <a href="#" class="snav-auth">&#x2192; Авторизация</a>
    </div>
-  </main>
+  </nav>

-  <footer>
-    <button id="sendBtn">Отправить</button>
-    <button id="clearBtn">Очистить</button>
-    <div class="spinner" id="spinner"></div>
-    <span id="timer" style="margin-left:4px;font-size:12px;color:#555;"></span>
+  <div class="scontent">
+    <div class="spage-header">
+      <h1 class="spage-title">Авторизация и регистрация</h1>
+      <div class="spage-datetime">
+        <span class="spage-date" id="sDate"></span>&nbsp;
+        <span class="spage-time" id="sTime"></span>
+      </div>
+    </div>
+
+    <div class="sinfo-box">
+      При наличии каких либо технических проблем, в первую очередь рекомендуем очистить кеш браузера
+      и обновить версию браузера при необходимости. На <a href="#">данном ресурсе</a> вы можете найти
+      инструкцию по очистке «кэша» во всех современных браузерах. После чего рекомендуем
+      авторизоваться в ЛКО.
+    </div>
+
+    <p>В случае возникновения проблем при регистрации, воспользуйтесь <a href="#">формой обратной связи</a>,
+    где в теме кратко укажите проблему, в тексте сообщения укажите ФИО, номер студенческого, факультет,
+    курс, группу (при наличии). <span class="red">Без указания перечисленных данных обращения в
+    службу техподдержки не рассматриваются.</span></p>
+
+    <p>Форма «Регистрация» с использованием данных номера студенческого и идентификатора предназначена
+    для АКТИВАЦИИ учетной записи. После активации она работать не будет! Форма «Авторизации»
+    предназначена для входа ПОСЛЕ активации учетной записи с использованием данных электронного адреса
+    и пароля, который был отправлен по электронному адресу, указанному при активации или внесенному
+    в последствии в Профиль.</p>
+
+    <p class="red"><strong>В случае если вы забыли пароль, необходимо нажать «Восстановить пароль»
+    в форме «Авторизации» и использовать электронный адрес, с которым вы активировали личный кабинет</strong>,
+    или тот, который вы указывали в качестве контактного электронного адреса в «Профиле» личного
+    кабинета обучающегося. Инструкция доступна по ссылке
+    <a href="#">https://student.sechenov.ru/howto.php</a></p>
+
+    <p>При возникновении вопросов/проблем с ЦТ необходимо выбирать соответствующий пункт в причинах
+    на форме. Письма, отправленные не через форму обратной связи с выбором соответствующей причины,
+    а по электронной почте рассматриваться не будут.</p>
+
+    <p class="red">Уважаемые первокурсники! Убедительная просьба не блокировать кампусные карты МИР
+    в личном кабинете Сбербанк Онлайн!</p>
+
+    <div class="sforms">
+      <div class="sform-col">
+        <h3>Регистрация <span>( Получить пароль от портала )</span></h3>
+        <div class="slinks">
+          <a href="#">Как зарегистрироваться в системе/Восстановить пароль?</a>
+          <a href="#">Пароль и результаты ЦТ</a>
+          <a href="#">Предоставление паспортных данных</a>
+        </div>
+        <div class="scard">
+          <div class="sfield">
+            <label>Номер студенческого билета <span class="req">*</span> <span class="hint">(?)</span></label>
+            <input type="text" placeholder="Например, 123456789123">
+          </div>
+          <div class="sfield">
+            <label>Идентификатор <span class="req">*</span> <span class="hint">(?)</span></label>
+            <input type="text" placeholder="Например, 1122345678">
+          </div>
+          <div class="scheckbox">
+            <input type="checkbox" id="agree1">
+            <label for="agree1">Даю согласие на передачу и обработку персональных данных</label>
+          </div>
+          <button class="sbtn">Получить пароль</button>
+        </div>
+      </div>
+
+      <div class="sform-col">
+        <h3>Авторизация <span>( Я уже активировал профиль )</span></h3>
+        <div class="slinks">
+          <a href="#">Восстановить пароль</a>
+          <a href="#">Как зарегистрироваться в системе/Восстановить пароль?</a>
+        </div>
+        <div class="scard">
+          <div class="sfield">
+            <label>Адрес электронной почты <span class="req">*</span> <span class="hint">(?)</span></label>
+            <input type="email" placeholder="ivanov@mail.ru">
+          </div>
+          <div class="sfield">
+            <label>Пароль <span class="req">*</span> <span class="hint">(?)</span></label>
+            <input type="password" placeholder="••••••">
+          </div>
+          <div class="scheckbox">
+            <input type="checkbox" id="agree2">
+            <label for="agree2">Даю согласие на передачу и обработку персональных данных</label>
+          </div>
+          <button class="sbtn">Авторизация</button>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <footer class="sfooter">
+    <span>© Информационная система «Университет — обучающийся» 2015–2026</span>
+    <div class="sfooter-badges">
+      <a href="#" class="sbadge">
+        <span>
+          <span class="sbadge-sub">Доступно в</span>
+          <span class="sbadge-main">App Store</span>
+        </span>
+      </a>
+      <a href="#" class="sbadge">
+        <span>
+          <span class="sbadge-sub">ДОСТУПНО В</span>
+          <span class="sbadge-main">Google Play</span>
+        </span>
+      </a>
+    </div>
+    <a href="#">Форма обратной связи</a>
  </footer>

+  <!-- ══ CHAT SECTION ══ -->
+  <div class="chat-section">
+    <h2 class="chat-section-title">Claude Chat</h2>
+
+    <div class="chat-toolbar">
+      <label for="modelSel">Модель:</label>
+      <select id="modelSel">
+        <option value="sonnet">Sonnet 4.6</option>
+        <option value="haiku">Haiku 4.5</option>
+      </select>
+      <span id="status"></span>
+    </div>
+
+    <div class="chat-panels">
+      <div class="chat-pane">
+        <div class="chat-pane-label">Запрос</div>
+        <textarea id="input" placeholder="Вставьте текст сюда... (Ctrl+Enter — отправить)"></textarea>
+      </div>
+      <div class="chat-pane">
+        <div class="chat-pane-label">Ответ</div>
+        <div id="output" class="empty">Ответ появится здесь...</div>
+      </div>
+    </div>
+
+    <div class="chat-actions">
+      <button id="sendBtn">Отправить</button>
+      <button id="clearBtn">Очистить</button>
+      <div class="spinner" id="spinner"></div>
+      <span id="timer"></span>
+    </div>
+  </div>
+
  <script>
+    // Clock
+    function updateClock() {
+      const now = new Date();
+      const d = now.toLocaleDateString('ru-RU', { day: '2-digit', month: '2-digit', year: 'numeric' })
+        .replace(/\./g, '.').replace(/(\d{2})\.(\d{2})\.(\d{4})/, '$3.$2.$1')
+        .replace(/(\d{4})\.(\d{2})\.(\d{2})/, (_, y, m, d) => `${d}.${m}.${y}`);
+      const dateStr = now.toLocaleDateString('ru-RU', { day: '2-digit', month: '2-digit', year: 'numeric' });
+      const [dd, mm, yyyy] = dateStr.split('.');
+      document.getElementById('sDate').textContent = `${yyyy}-${mm}-${dd}`.replace(/-/g, '.').split('.').reverse().join('.')
+        .replace(/(\d{2})\.(\d{2})\.(\d{4})/, '$3.$2.$1');
+      document.getElementById('sDate').textContent = dateStr.replace(/(\d{2})\.(\d{2})\.(\d{4})/, '$3.$2.$1');
+      const t = now.toLocaleTimeString('ru-RU');
+      document.getElementById('sTime').textContent = t;
+    }
+    updateClock();
+    setInterval(updateClock, 1000);
+
+    // Chat
    const inputEl = document.getElementById('input');
    const outputEl = document.getElementById('output');
    const sendBtn = document.getElementById('sendBtn');
@@ -212,15 +652,14 @@
    const timerEl = document.getElementById('timer');

    let timerInterval = null;
-    let startTime = null;

    function setLoading(on) {
      sendBtn.disabled = on;
      spinnerEl.style.display = on ? 'inline-block' : 'none';
      if (on) {
-        startTime = Date.now();
+        const start = Date.now();
        timerInterval = setInterval(() => {
-          timerEl.textContent = ((Date.now() - startTime) / 1000).toFixed(1) + 's';
+          timerEl.textContent = ((Date.now() - start) / 1000).toFixed(1) + 's';
        }, 100);
      } else {
        clearInterval(timerInterval);
@@ -228,51 +667,36 @@
    }

    function renderMarkdown(text) {
-      // Simple: escape html, then apply basic markdown
-      let html = text
-        .replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
-
-      // Code blocks
-      html = html.replace(/```[\w]*\n?([\s\S]*?)```/g, (_, code) =>
-        `<pre><code>${code.trim()}</code></pre>`);
-      // Inline code
+      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>`);
      html = html.replace(/`([^`]+)`/g, '<code>$1</code>');
-      // Bold
      html = html.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>');
-
      return html;
    }

    async function send() {
      const text = inputEl.value.trim();
      if (!text) return;
-
      outputEl.className = '';
      outputEl.innerHTML = '';
      setLoading(true);
      statusEl.textContent = 'Генерирую...';
-
      let fullText = '';
-
      try {
        const resp = await fetch('/api/chat', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ text, model: modelSel.value }),
        });
-
        const reader = resp.body.getReader();
        const decoder = new TextDecoder();
        let buf = '';
-
        while (true) {
          const { done, value } = await reader.read();
          if (done) break;
          buf += decoder.decode(value, { stream: true });
-
          const parts = buf.split('\n\n');
          buf = parts.pop();
-
          for (const part of parts) {
            if (!part.startsWith('data: ')) continue;
            const raw = part.slice(6).trim();
@@ -280,7 +704,7 @@
            try {
              const obj = JSON.parse(raw);
              if (obj.error) {
-                outputEl.innerHTML += `<span style="color:#f87171">${obj.error}</span>`;
+                outputEl.innerHTML += `<span style="color:#c0392b">${obj.error}</span>`;
              } else if (obj.text) {
                fullText += obj.text;
                outputEl.innerHTML = renderMarkdown(fullText);
@@ -290,7 +714,7 @@
          }
        }
      } catch (e) {
-        outputEl.innerHTML = `<span style="color:#f87171">Ошибка: ${e.message}</span>`;
+        outputEl.innerHTML = `<span style="color:#c0392b">Ошибка: ${e.message}</span>`;
      } finally {
        setLoading(false);
        statusEl.textContent = fullText ? `${fullText.length} символов` : '';
@@ -298,11 +722,7 @@
    }

    sendBtn.addEventListener('click', send);
-
-    inputEl.addEventListener('keydown', (e) => {
-      if (e.ctrlKey && e.key === 'Enter') send();
-    });
-
+    inputEl.addEventListener('keydown', e => { if (e.ctrlKey && e.key === 'Enter') send(); });
    clearBtn.addEventListener('click', () => {
      inputEl.value = '';
      outputEl.innerHTML = 'Ответ появится здесь...';
Author	SHA1	Message	Date
aedes	7314c8df2d	feat: Sechenov portal clone as main page + white chat below	2026-04-20 21:16:28 +03:00
aedes	ec1a587c42	backup: working version 2026-04-20 (direct API + undici + acc3)	2026-04-20 21:10:58 +03:00