Spaces:
Running
Running
| <html lang="ru"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>WB AIТехпис - AI редактор текста</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| :root { | |
| --primary-color: #CB11AB; | |
| --secondary-color: #428BF9; | |
| --light-color: #f8f9fa; | |
| --dark-color: #343a40; | |
| --text-color: #333; | |
| --muted-text: #6c757d; | |
| --border-color: #dee2e6; | |
| --shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | |
| } | |
| body { | |
| display: grid; | |
| grid-template-columns: 250px 1fr 300px; | |
| grid-template-rows: 70px 1fr 1fr; | |
| height: 100vh; | |
| overflow: hidden; | |
| color: var(--text-color); | |
| } | |
| /* Header */ | |
| header { | |
| grid-column: 1 / 4; | |
| background-color: white; | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: 0 2rem; | |
| box-shadow: var(--shadow); | |
| z-index: 10; | |
| } | |
| .logo { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| font-size: 1.5rem; | |
| font-weight: 700; | |
| color: var(--primary-color); | |
| } | |
| .logo span { | |
| color: var(--secondary-color); | |
| } | |
| .styleguide-selector { | |
| display: flex; | |
| align-items: center; | |
| gap: 1rem; | |
| } | |
| .styleguide-selector select { | |
| padding: 0.5rem 1rem; | |
| border: 1px solid var(--border-color); | |
| border-radius: 5px; | |
| background-color: white; | |
| color: var(--text-color); | |
| width: 200px; | |
| } | |
| .user-profile { | |
| display: flex; | |
| align-items: center; | |
| gap: 1rem; | |
| } | |
| .user-avatar { | |
| width: 40px; | |
| height: 40px; | |
| border-radius: 50%; | |
| background-color: var(--secondary-color); | |
| color: white; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-weight: bold; | |
| } | |
| /* Sidebar */ | |
| .sidebar { | |
| grid-row: 2 / 4; | |
| background-color: #f8f9fa; | |
| border-right: 1px solid var(--border-color); | |
| padding: 1.5rem; | |
| overflow-y: auto; | |
| } | |
| .sidebar-header { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| margin-bottom: 1.5rem; | |
| } | |
| .sidebar-title { | |
| font-size: 1.2rem; | |
| font-weight: 600; | |
| color: var(--primary-color); | |
| } | |
| .new-doc-btn { | |
| background-color: var(--primary-color); | |
| color: white; | |
| border: none; | |
| border-radius: 5px; | |
| padding: 0.5rem 1rem; | |
| cursor: pointer; | |
| display: flex; | |
| align-items: center; | |
| gap: 5px; | |
| } | |
| .documents-list { | |
| list-style: none; | |
| } | |
| .document-item { | |
| padding: 0.75rem 1rem; | |
| border-radius: 5px; | |
| margin-bottom: 0.5rem; | |
| cursor: pointer; | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| transition: all 0.2s; | |
| } | |
| .document-item:hover { | |
| background-color: rgba(203, 17, 171, 0.1); | |
| } | |
| .document-item.active { | |
| background-color: rgba(203, 17, 171, 0.2); | |
| font-weight: 500; | |
| } | |
| /* Main editor */ | |
| .editor-container { | |
| display: flex; | |
| flex-direction: column; | |
| grid-row: 2 / 3; | |
| padding: 1.5rem; | |
| overflow-y: auto; | |
| position: relative; | |
| } | |
| .editor-toolbar { | |
| display: flex; | |
| gap: 0.5rem; | |
| margin-bottom: 1rem; | |
| flex-wrap: wrap; | |
| } | |
| .toolbar-btn { | |
| padding: 0.5rem 0.75rem; | |
| background-color: white; | |
| border: 1px solid var(--border-color); | |
| border-radius: 4px; | |
| cursor: pointer; | |
| transition: all 0.2s; | |
| font-size: 0.9rem; | |
| } | |
| .toolbar-btn:hover { | |
| background-color: var(--light-color); | |
| } | |
| .toolbar-btn.active { | |
| background-color: var(--primary-color); | |
| color: white; | |
| border-color: var(--primary-color); | |
| } | |
| .editor { | |
| flex: 1; | |
| padding: 1rem; | |
| border: 1px solid var(--border-color); | |
| border-radius: 5px; | |
| outline: none; | |
| min-height: 300px; | |
| overflow-y: auto; | |
| background-color: white; | |
| } | |
| .editor:focus { | |
| border-color: var(--secondary-color); | |
| } | |
| /* AI Functions sidebar */ | |
| .ai-functions { | |
| grid-row: 2 / 4; | |
| background-color: white; | |
| border-left: 1px solid var(--border-color); | |
| padding: 1.5rem; | |
| overflow-y: auto; | |
| } | |
| .ai-functions-title { | |
| font-size: 1.2rem; | |
| font-weight: 600; | |
| color: var(--secondary-color); | |
| margin-bottom: 1.5rem; | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| .ai-function { | |
| border: 1px solid var(--border-color); | |
| border-radius: 8px; | |
| padding: 1rem; | |
| margin-bottom: 1rem; | |
| cursor: pointer; | |
| transition: all 0.2s; | |
| } | |
| .ai-function:hover { | |
| border-color: var(--secondary-color); | |
| box-shadow: 0 0.25rem 0.5rem rgba(66, 139, 249, 0.1); | |
| } | |
| .ai-function-header { | |
| display: flex; | |
| align-items: center; | |
| margin-bottom: 0.5rem; | |
| } | |
| .ai-function-icon { | |
| width: 36px; | |
| height: 36px; | |
| border-radius: 50%; | |
| background-color: rgba(66, 139, 249, 0.1); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| margin-right: 10px; | |
| color: var(--secondary-color); | |
| } | |
| .ai-function-title { | |
| font-weight: 600; | |
| color: var(--dark-color); | |
| } | |
| .ai-function-desc { | |
| font-size: 0.9rem; | |
| color: var(--muted-text); | |
| line-height: 1.4; | |
| } | |
| /* AI Output panel */ | |
| .ai-output { | |
| grid-row: 3 / 4; | |
| grid-column: 2 / 3; | |
| padding: 0 1.5rem 1.5rem; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .ai-output-toolbar { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 0.5rem; | |
| } | |
| .ai-output-title { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| font-weight: 600; | |
| color: var(--primary-color); | |
| } | |
| .ai-output-actions { | |
| display: flex; | |
| gap: 0.5rem; | |
| } | |
| .ai-output-content { | |
| flex: 1; | |
| padding: 1rem; | |
| border: 1px solid var(--border-color); | |
| border-radius: 5px; | |
| background-color: white; | |
| min-height: 200px; | |
| overflow-y: auto; | |
| } | |
| .ai-output-placeholder { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| height: 100%; | |
| color: var(--muted-text); | |
| text-align: center; | |
| padding: 1rem; | |
| } | |
| .ai-output-placeholder i { | |
| font-size: 2rem; | |
| margin-bottom: 1rem; | |
| color: var(--border-color); | |
| } | |
| .btn { | |
| padding: 0.5rem 1rem; | |
| border-radius: 5px; | |
| cursor: pointer; | |
| border: none; | |
| transition: all 0.2s; | |
| font-weight: 500; | |
| display: flex; | |
| align-items: center; | |
| gap: 5px; | |
| } | |
| .btn-primary { | |
| background-color: var(--primary-color); | |
| color: white; | |
| } | |
| .btn-primary:hover { | |
| background-color: #a50e8c; | |
| } | |
| .btn-secondary { | |
| background-color: white; | |
| color: var(--secondary-color); | |
| border: 1px solid var(--secondary-color); | |
| } | |
| .btn-secondary:hover { | |
| background-color: rgba(66, 139, 249, 0.1); | |
| } | |
| /* Loading animation */ | |
| .loading-animation { | |
| display: flex; | |
| gap: 0.5rem; | |
| padding: 1rem; | |
| justify-content: center; | |
| } | |
| .dot { | |
| width: 10px; | |
| height: 10px; | |
| border-radius: 50%; | |
| background-color: var(--secondary-color); | |
| animation: bounce 1.5s infinite ease-in-out; | |
| } | |
| .dot:nth-child(1) { | |
| animation-delay: 0s; | |
| } | |
| .dot:nth-child(2) { | |
| animation-delay: 0.2s; | |
| } | |
| .dot:nth-child(3) { | |
| animation-delay: 0.4s; | |
| } | |
| @keyframes bounce { | |
| 0%, 80%, 100% { transform: translateY(0); } | |
| 40% { transform: translateY(-10px); } | |
| } | |
| /* Responsive adjustments */ | |
| @media (max-width: 1200px) { | |
| body { | |
| grid-template-columns: 200px 1fr 250px; | |
| } | |
| } | |
| @media (max-width: 992px) { | |
| body { | |
| grid-template-columns: 1fr; | |
| grid-template-rows: 70px auto auto auto; | |
| } | |
| header { | |
| grid-column: 1; | |
| padding: 0 1rem; | |
| } | |
| .sidebar { | |
| grid-row: auto; | |
| grid-column: 1; | |
| border-right: none; | |
| border-bottom: 1px solid var(--border-color); | |
| } | |
| .editor-container { | |
| grid-row: auto; | |
| grid-column: 1; | |
| } | |
| .ai-functions { | |
| grid-row: auto; | |
| grid-column: 1; | |
| border-left: none; | |
| border-top: 1px solid var(--border-color); | |
| } | |
| .ai-output { | |
| grid-row: auto; | |
| grid-column: 1; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <header> | |
| <div class="logo"> | |
| <i class="fas fa-robot"></i> | |
| <span>WB</span> AIТехпис | |
| </div> | |
| <div class="styleguide-selector"> | |
| <i class="fas fa-book"></i> | |
| <select id="styleguide-select"> | |
| <option value="">Без стайлгайда</option> | |
| <option value="wb">Wildberries</option> | |
| <option value="yandex">Яндекс</option> | |
| <option value="tinkoff">Тинькофф</option> | |
| <option value="sber">Сбер</option> | |
| <option value="google">Google</option> | |
| <option value="microsoft">Microsoft</option> | |
| </select> | |
| </div> | |
| <div class="user-profile"> | |
| <span>Иван Петров</span> | |
| <div class="user-avatar">ИП</div> | |
| </div> | |
| </header> | |
| <aside class="sidebar"> | |
| <div class="sidebar-header"> | |
| <h3 class="sidebar-title">Мои документы</h3> | |
| <button class="new-doc-btn" id="new-doc-btn"> | |
| <i class="fas fa-plus"></i> Новый | |
| </button> | |
| </div> | |
| <ul class="documents-list"> | |
| <li class="document-item active"> | |
| <i class="fas fa-file-alt"></i> | |
| Техническое задание проекта | |
| </li> | |
| <li class="document-item"> | |
| <i class="fas fa-file-alt"></i> | |
| Описание API v2.3 | |
| </li> | |
| <li class="document-item"> | |
| <i class="fas fa-file-alt"></i> | |
| Roadmap продукта | |
| </li> | |
| <li class="document-item"> | |
| <i class="fas fa-file-alt"></i> | |
| Гайд по интеграции | |
| </li> | |
| <li class="document-item"> | |
| <i class="fas fa-file-alt"></i> | |
| UX-рекомендации | |
| </li> | |
| <li class="document-item"> | |
| <i class="fas fa-file-alt"></i> | |
| Чек-лист тестирования | |
| </li> | |
| <li class="document-item"> | |
| <i class="fas fa-file-alt"></i> | |
| Глоссарий терминов | |
| </li> | |
| </ul> | |
| </aside> | |
| <main class="editor-container"> | |
| <div class="editor-toolbar"> | |
| <button class="toolbar-btn" title="Заголовок 1"><i class="fas fa-heading"></i> H1</button> | |
| <button class="toolbar-btn" title="Заголовок 2"><i class="fas fa-heading"></i> H2</button> | |
| <button class="toolbar-btn" title="Заголовок 3"><i class="fas fa-heading"></i> H3</button> | |
| <div style="width: 1px; height: 24px; background-color: var(--border-color); margin: 0 5px;"></div> | |
| <button class="toolbar-btn" title="Жирный"><i class="fas fa-bold"></i></button> | |
| <button class="toolbar-btn" title="Курсив"><i class="fas fa-italic"></i></button> | |
| <button class="toolbar-btn" title="Подчеркивание"><i class="fas fa-underline"></i></button> | |
| <div style="width: 1px; height: 24px; background-color: var(--border-color); margin: 0 5px;"></div> | |
| <button class="toolbar-btn" title="Маркированный список"><i class="fas fa-list-ul"></i></button> | |
| <button class="toolbar-btn" title="Нумерованный список"><i class="fas fa-list-ol"></i></button> | |
| <button class="toolbar-btn" title="Блок кода"><i class="fas fa-code"></i></button> | |
| <div style="width: 1px; height: 24px; background-color: var(--border-color); margin: 0 5px;"></div> | |
| <button class="toolbar-btn" title="Ссылка"><i class="fas fa-link"></i></button> | |
| <button class="toolbar-btn active" title="Изображение"><i class="fas fa-image"></i></button> | |
| <button class="toolbar-btn" title="Таблица"><i class="fas fa-table"></i></button> | |
| <div style="width: 1px; height: 24px; background-color: var(--border-color); margin: 0 5px;"></div> | |
| <button class="toolbar-btn" title="Отменить"><i class="fas fa-undo"></i></button> | |
| <button class="toolbar-btn" title="Повторить"><i class="fas fa-redo"></i></button> | |
| </div> | |
| <div class="editor" id="editor" contenteditable="true"> | |
| <h1>Техническое задание для нового API</h1> | |
| <p>Этот документ описывает требования к новому REST API для интеграции с внешними сервисами.</p> | |
| <h2>1. Общие требования</h2> | |
| <p>API должно соответствовать следующим стандартам:</p> | |
| <ul> | |
| <li>RESTful архитектура</li> | |
| <li>JSON формат данных</li> | |
| <li>HTTPS протокол</li> | |
| <li>Кодировка UTF-8</li> | |
| <li>API версионирование через URL: /api/v1/...</li> | |
| </ul> | |
| <h2>2. Конечные точки</h2> | |
| <p>Основные эндпоинты API:</p> | |
| <table> | |
| <tr> | |
| <th>Метод</th> | |
| <th>URL</th> | |
| <th>Описание</th> | |
| </tr> | |
| <tr> | |
| <td>GET</td> | |
| <td>/products</td> | |
| <td>Получить список товаров</td> | |
| </tr> | |
| <tr> | |
| <td>GET</td> | |
| <td>/products/{id}</td> | |
| <td>Получить информацию о товаре</td> | |
| </tr> | |
| </table> | |
| <h3>2.1 Аутентификация</h3> | |
| <p>Для доступа к API необходимо использовать JWT токен.</p> | |
| <pre><code>{ | |
| "Authorization": "Bearer {your_jwt_token}" | |
| }</code></pre> | |
| </div> | |
| </main> | |
| <aside class="ai-functions"> | |
| <h3 class="ai-functions-title"><i class="fas fa-magic"></i> AI Функции</h3> | |
| <div class="ai-function" onclick="runAIFunction('improve')"> | |
| <div class="ai-function-header"> | |
| <div class="ai-function-icon"> | |
| <i class="fas fa-spell-check"></i> | |
| </div> | |
| <div class="ai-function-title">Улучшить текст</div> | |
| </div> | |
| <div class="ai-function-desc"> | |
| Оптимизирует текст по выбранному стайлгайду: исправляет формулировки, делает текст более четким и профессиональным. | |
| </div> | |
| </div> | |
| <div class="ai-function" onclick="runAIFunction('shorten')"> | |
| <div class="ai-function-header"> | |
| <div class="ai-function-icon"> | |
| <i class="fas fa-cut"></i> | |
| </div> | |
| <div class="ai-function-title">Сократить текст</div> | |
| </div> | |
| <div class="ai-function-desc"> | |
| Сокращает текст, сохраняя ключевые моменты и смысл. Опционально указывайте сжатие в процентах. | |
| </div> | |
| </div> | |
| <div class="ai-function" onclick="runAIFunction('summarize')"> | |
| <div class="ai-function-header"> | |
| <div class="ai-function-icon"> | |
| <i class="fas fa-newspaper"></i> | |
| </div> | |
| <div class="ai-function-title">Суммаризировать</div> | |
| </div> | |
| <div class="ai-function-desc"> | |
| Генерирует краткое содержание документа с выделением основных тезисов и выводов. | |
| </div> | |
| </div> | |
| <div class="ai-function" onclick="runAIFunction('translate')"> | |
| <div class="ai-function-header"> | |
| <div class="ai-function-icon"> | |
| <i class="fas fa-language"></i> | |
| </div> | |
| <div class="ai-function-title">Перевести</div> | |
| </div> | |
| <div class="ai-function-desc"> | |
| Переводит текст на указанный язык с учетом технической терминологии и контекста. | |
| </div> | |
| </div> | |
| <div class="ai-function" onclick="runAIFunction('generate_examples')"> | |
| <div class="ai-function-header"> | |
| <div class="ai-function-icon"> | |
| <i class="fas fa-lightbulb"></i> | |
| </div> | |
| <div class="ai-function-title">Сгенерировать примеры</div> | |
| </div> | |
| <div class="ai-function-desc"> | |
| Генерирует практические примеры использования описанных API, функций или процессов. | |
| </div> | |
| </div> | |
| <div class="ai-function" onclick="runAIFunction('check_consistency')"> | |
| <div class="ai-function-header"> | |
| <div class="ai-function-icon"> | |
| <i class="fas fa-check-circle"></i> | |
| </div> | |
| <div class="ai-function-title">Проверить согласованность</div> | |
| </div> | |
| <div class="ai-function-desc"> | |
| Анализирует документ на предмет противоречий, дублирования и пропущенных требований. | |
| </div> | |
| </div> | |
| <div class="ai-function" onclick="runAIFunction('generate_test_cases')"> | |
| <div class="ai-function-header"> | |
| <div class="ai-function-icon"> | |
| <i class="fas fa-vial"></i> | |
| </div> | |
| <div class="ai-function-title">Сгенерировать тест-кейсы</div> | |
| </div> | |
| <div class="ai-function-desc"> | |
| На основе требований генерирует набор тестовых сценариев для проверки реализации. | |
| </div> | |
| </div> | |
| </aside> | |
| <section class="ai-output"> | |
| <div class="ai-output-toolbar"> | |
| <div class="ai-output-title"> | |
| <i class="fas fa-robot"></i> | |
| <span>Результат AI</span> | |
| </div> | |
| <div class="ai-output-actions"> | |
| <button class="btn btn-secondary" onclick="copyAIContent()"> | |
| <i class="fas fa-copy"></i> Копировать | |
| </button> | |
| <button class="btn btn-primary" onclick="applyAIContent()"> | |
| <i class="fas fa-check"></i> Применить | |
| </button> | |
| </div> | |
| </div> | |
| <div class="ai-output-content" id="ai-output"> | |
| <div class="ai-output-placeholder"> | |
| <i class="fas fa-comment-alt"></i> | |
| <p>Выберите AI функцию чтобы обработать текст. Результат появится здесь.</p> | |
| <p>Вы можете скопировать или применить результат к документу.</p> | |
| </div> | |
| </div> | |
| </section> | |
| <script> | |
| // Current document state | |
| let currentDoc = { | |
| id: 'doc-1', | |
| title: 'Техническое задание проекта', | |
| content: '', | |
| styleguide: '' | |
| }; | |
| // AI Functions mock | |
| async function runAIFunction(funcType) { | |
| const editorContent = document.getElementById('editor').innerHTML; | |
| const styleguide = document.getElementById('styleguide-select').value; | |
| // Show loading state | |
| const aiOutput = document.getElementById('ai-output'); | |
| aiOutput.innerHTML = ` | |
| <div class="loading-animation"> | |
| <div class="dot"></div> | |
| <div class="dot"></div> | |
| <div class="dot"></div> | |
| </div> | |
| <p style="text-align: center; color: var(--muted-text);">AI обрабатывает ваш запрос...</p> | |
| `; | |
| // Simulate API call delay | |
| setTimeout(() => { | |
| showAIResult(funcType, editorContent, styleguide); | |
| }, 1500); | |
| } | |
| function showAIResult(funcType, content, styleguide) { | |
| const aiOutput = document.getElementById('ai-output'); | |
| let resultContent = ''; | |
| let styleguideText = styleguide ? `<br><small><em>Применен стайлгайд: ${getStyleguideName(styleguide)}</em></small>` : ''; | |
| switch(funcType) { | |
| case 'improve': | |
| resultContent = ` | |
| <h2>Улучшенная версия документа</h2> | |
| ${styleguideText} | |
| <hr> | |
| <h1>Техническое задание для REST API</h1> | |
| <p>Настоящий документ определяет требования к разработке REST API для интеграции с внешними системами.</p> | |
| <h2>1. Общие требования</h2> | |
| <p>API должно соответствовать следующим стандартам и принципам:</p> | |
| <ul> | |
| <li><strong>Архитектура:</strong> RESTful</li> | |
| <li><strong>Формат данных:</strong> JSON</li> | |
| <li><strong>Протокол:</strong> HTTPS (обязательно)</li> | |
| <li><strong>Кодировка:</strong> UTF-8</li> | |
| <li><strong>Версионирование:</strong> через URL (/api/v1/...)</li> | |
| </ul> | |
| `; | |
| break; | |
| case 'shorten': | |
| resultContent = ` | |
| <h2>Сокращенная версия документа</h2> | |
| ${styleguideText} | |
| <hr> | |
| <h3>ТЗ для REST API</h3> | |
| <p><strong>Общие требования:</strong> REST, JSON, HTTPS, UTF-8, версионирование через URL.</p> | |
| <p><strong>Конечные точки:</strong></p> | |
| <ul> | |
| <li>GET /products - список товаров</li> | |
| <li>GET /products/{id} - детали товара</li> | |
| </ul> | |
| <p><strong>Аутентификация:</strong> JWT токен (Authorization: Bearer {token})</p> | |
| `; | |
| break; | |
| case 'summarize': | |
| resultContent = ` | |
| <h2>Краткое содержание документа</h2> | |
| ${styleguideText} | |
| <hr> | |
| <p><strong>Основные моменты:</strong></p> | |
| <ol> | |
| <li>Документ описывает требования к REST API для интеграции</li> | |
| <li>API должно использовать JSON, HTTPS и UTF-8 кодировку</li> | |
| <li>Основные эндпоинты включают получение списка товаров и деталей товара</li> | |
| <li>Аутентификация через JWT токен в заголовке Authorization</li> | |
| </ol> | |
| `; | |
| break; | |
| case 'generate_examples': | |
| resultContent = ` | |
| <h2>Примеры использования API</h2> | |
| ${styleguideText} | |
| <hr> | |
| <h3>Пример 1. Получение списка товаров</h3> | |
| <pre><code>GET /api/v1/products | |
| Accept: application/json | |
| Authorization: Bearer eyJhbGciO... | |
| Ответ: | |
| { | |
| "products": [ | |
| { | |
| "id": 123, | |
| "name": "Смартфон XYZ", | |
| "price": 29999, | |
| "in_stock": true | |
| } | |
| ] | |
| }</code></pre> | |
| `; | |
| break; | |
| default: | |
| resultContent = `<p>Результат обработки AI для функции ${funcType}</p>`; | |
| } | |
| aiOutput.innerHTML = resultContent; | |
| } | |
| function getStyleguideName(value) { | |
| const guides = { | |
| 'wb': 'Wildberries', | |
| 'yandex': 'Яндекс', | |
| 'tinkoff': 'Тинькофф', | |
| 'sber': 'Сбер', | |
| 'google': 'Google', | |
| 'microsoft': 'Microsoft' | |
| }; | |
| return guides[value] || 'Стандартный'; | |
| } | |
| function copyAIContent() { | |
| const aiOutput = document.getElementById('ai-output'); | |
| const range = document.createRange(); | |
| range.selectNode(aiOutput); | |
| window.getSelection().removeAllRanges(); | |
| window.getSelection().addRange(range); | |
| document.execCommand('copy'); | |
| window.getSelection().removeAllRanges(); | |
| // Show notification | |
| alert('Содержимое скопировано в буфер обмена'); | |
| } | |
| function applyAIContent() { | |
| const aiOutput = document.getElementById('ai-output'); | |
| if (aiOutput.children.length > 0 && !aiOutput.querySelector('.loading-animation')) { | |
| document.getElementById('editor').innerHTML = aiOutput.innerHTML; | |
| alert('Содержимое успешно применено к документу'); | |
| } else { | |
| alert('Нет данных для применения'); | |
| } | |
| } | |
| // Initialize | |
| document.getElementById('styleguide-select').addEventListener('change', function() { | |
| currentDoc.styleguide = this.value; | |
| // Here you would save the styleguide preference for the document | |
| console.log('Styleguide selected:', this.value); | |
| }); | |
| document.getElementById('new-doc-btn').addEventListener('click', function() { | |
| // In a real app, this would create a new document | |
| const title = prompt('Введите название нового документа'); | |
| if (title) { | |
| alert(`Документ "${title}" будет создан. В демо-версии эта функция эмулируется.`); | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> |