aedes/sechenov
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: pixel-perfect Sechenov clone (Nunito font, exact colors, well-lg r0)

Browse Source
This commit is contained in:
aedes
2026-04-20 21:30:21 +03:00
parent 7b74d8d56b
commit 0870df7341
1 changed files with 278 additions and 126 deletions
Download Patch File Download Diff File Expand all files Collapse all files

396
public/index.html
View File

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