index.html

<!doctype html>
<html lang="ru">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta name="description" content="CodeGPT — публичный AI-конструктор приложений на Vercel" />
		<title>CodeGPT — AI coding workspace</title>
		<link rel="icon" type="image/svg+xml" href="/src/logo.svg" />
		<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=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.22/dist/katex.min.css" />
		<link rel="stylesheet" href="/src/styles.css" />
		<script src="https://unpkg.com/lucide@latest"></script>
		<script src="https://cdn.jsdelivr.net/npm/markdown-it@14.1.0/dist/markdown-it.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/dompurify@3.2.6/dist/purify.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/katex@0.16.22/dist/katex.min.js"></script>
	</head>
	<body>
		<div class="app-shell">
			<aside class="sidebar" aria-label="Навигация">
				<div class="brand-row">
					<img class="brand-logo" src="/src/logo.svg" alt="CodeGPT" />
					<span class="brand-name">Code<span>GPT</span></span>
					<button class="icon-button sidebar-close" type="button" aria-label="Закрыть меню"><i data-lucide="x"></i></button>
				</div>

				<button class="new-chat-button" id="new-chat" type="button"><i data-lucide="plus"></i><span>Новый диалог</span><kbd>⌘ K</kbd></button>

				<div class="sidebar-section">
					<div class="section-label"><span>Диалоги</span><button class="icon-button" type="button" aria-label="Поиск диалога"><i data-lucide="search"></i></button></div>
					<nav class="conversation-list" id="conversation-list"></nav>
				</div>

				<div class="sidebar-bottom">
					<button class="profile-row" type="button"><span class="avatar">A</span><span class="profile-copy"><strong>Локальный режим</strong><small>Без API-ключа</small></span><i data-lucide="chevron-up"></i></button>
				</div>
			</aside>

			<main class="main-panel">
				<header class="topbar">
					<button class="icon-button menu-toggle" id="menu-toggle" type="button" aria-label="Открыть меню"><i data-lucide="menu"></i></button>
					<div class="model-picker"><span class="status-pulse"></span><span>v0 App Builder</span><i data-lucide="chevron-down"></i></div>
					<div class="topbar-actions"><button class="icon-button" id="settings-button" type="button" aria-label="Настройки"><i data-lucide="sliders-horizontal"></i></button><button class="avatar top-avatar" type="button" aria-label="Профиль">A</button></div>
				</header>

				<section class="chat-view" id="chat-view">
					<div class="chat-content" id="messages">
						<div class="welcome-block" id="welcome-block">
							<div class="eyebrow"><span class="eyebrow-line"></span>Ваш AI для разработки</div>
							<h1>Что создадим<br /><em>сегодня?</em></h1>
							<p class="welcome-copy">Пишите код, разбирайте ошибки и превращайте идеи в рабочие решения.</p>
							<div class="prompt-grid">
								<button class="prompt-card" type="button" data-prompt="Объясни, как спроектировать чистую архитектуру для нового приложения"><span class="prompt-icon orange"><i data-lucide="layers-3"></i></span><span>Спроектировать архитектуру</span><i data-lucide="arrow-up-right"></i></button>
								<button class="prompt-card" type="button" data-prompt="Помоги найти и исправить ошибку в моем коде"><span class="prompt-icon blue"><i data-lucide="bug"></i></span><span>Найти ошибку в коде</span><i data-lucide="arrow-up-right"></i></button>
								<button class="prompt-card" type="button" data-prompt="Сделай ревью моего кода и предложи улучшения"><span class="prompt-icon green"><i data-lucide="scan-search"></i></span><span>Провести code review</span><i data-lucide="arrow-up-right"></i></button>
							</div>
						</div>
					</div>

					<div class="composer-wrap">
						<div class="composer" id="composer">
							<input id="file-input" type="file" multiple hidden />
							<div class="attachment-list" id="attachment-list" aria-live="polite"></div>
							<textarea id="prompt-input" rows="1" placeholder="Спросите что-нибудь о коде..." aria-label="Сообщение для CodeGPT"></textarea>
							<div class="composer-toolbar"><div class="toolbar-left"><button class="tool-button" id="attach-button" type="button" aria-label="Прикрепить файлы"><i data-lucide="paperclip"></i><span>Файлы</span></button><button class="tool-button" type="button" aria-label="Добавить контекст"><i data-lucide="plus"></i><span>Контекст</span></button></div><div class="toolbar-right"><span class="shortcut-hint">Enter для отправки</span><button class="send-button" id="send-button" type="button" aria-label="Отправить сообщение"><i data-lucide="arrow-up"></i></button></div></div>
						</div>
						<div class="composer-note"><span><i data-lucide="shield-check"></i> Данные остаются в вашем окружении</span><span>CodeGPT может ошибаться — проверяйте важный код</span></div>
					</div>
				</section>
			</main>
			<aside class="workspace-panel" id="workspace-panel" aria-label="Рабочая область приложения" hidden>
				<div class="workspace-header"><div><span class="workspace-kicker">GENERATED APP</span><strong id="workspace-title">Новое приложение</strong></div><button class="icon-button" id="close-workspace" type="button" aria-label="Закрыть рабочую область"><i data-lucide="x"></i></button></div>
				<div class="workspace-tabs"><button class="workspace-tab active" type="button" data-workspace-tab="preview"><i data-lucide="play-square"></i>Preview</button><button class="workspace-tab" type="button" data-workspace-tab="code"><i data-lucide="code-2"></i>Code</button></div>
				<section class="workspace-view active" id="preview-view"><div class="preview-toolbar"><span id="preview-status">Получаем preview...</span><a id="preview-link" href="#" target="_blank" rel="noreferrer" hidden>Открыть отдельно</a></div><iframe id="preview-frame" title="Предпросмотр сгенерированного приложения" sandbox="allow-scripts allow-forms allow-popups"></iframe></section>
				<section class="workspace-view" id="code-view"><div class="code-layout"><aside class="file-explorer"><div class="explorer-heading"><span>EXPLORER</span><i data-lucide="ellipsis"></i></div><div class="explorer-root"><i data-lucide="chevron-down"></i><strong>GENERATED APP</strong></div><nav class="file-tree" id="file-tree"></nav></aside><div class="editor-area"><div class="editor-tab"><span id="active-file-icon"><i data-lucide="file-code-2"></i></span><span id="active-file-name">Выберите файл</span><button class="icon-button" id="save-file" type="button" aria-label="Сохранить файл"><i data-lucide="save"></i></button></div><textarea id="code-editor" spellcheck="false" aria-label="Редактор кода"></textarea><span class="code-status" id="code-status">Готово</span></div></div></section>
			</aside>
		</div>
		<div class="settings-backdrop" id="settings-backdrop" hidden><section class="settings-panel" role="dialog" aria-modal="true" aria-labelledby="settings-title"><header class="settings-header"><div><span class="workspace-kicker">CODEGPT CONTROL</span><h2 id="settings-title">Настройки ИИ</h2></div><button class="icon-button" id="close-settings" type="button" aria-label="Закрыть настройки"><i data-lucide="x"></i></button></header><div class="settings-body"><label class="setting-field"><span>Стиль ответа</span><select id="ai-tone"><option value="professional">Профессиональный</option><option value="friendly">Дружелюбный</option><option value="direct">Прямой и строгий</option><option value="playful">Шуточный</option></select></label><label class="setting-field"><span>Язык ответа</span><select id="ai-language"><option value="ru">Русский</option><option value="en">English</option><option value="auto">Язык запроса</option></select></label><label class="setting-field"><span>Детализация</span><select id="ai-detail"><option value="concise">Кратко</option><option value="balanced">Сбалансированно</option><option value="deep">Подробно</option></select></label><label class="setting-toggle"><span><strong>Самопроверка</strong><small>Проверять решение на ошибки перед ответом</small></span><input id="ai-self-check" type="checkbox" checked /><i></i></label><label class="setting-toggle"><span><strong>Проверять интерфейс</strong><small>Искать проблемы в UX и адаптивности</small></span><input id="ai-ui-check" type="checkbox" checked /><i></i></label><label class="setting-toggle"><span><strong>Автообновление preview</strong><small>Обновлять preview после изменений проекта</small></span><input id="auto-preview" type="checkbox" checked /><i></i></label></div><footer class="settings-footer"><span id="settings-saved">Сохраняется автоматически</span><button class="settings-done" id="settings-done" type="button">Готово</button></footer></section></div>
		<div class="mobile-overlay" id="mobile-overlay"></div>
		<script type="module" src="/src/script.js"></script>
	</body>
</html>