applicationanalysis / index.html
AssanaliAidarkhan's picture
Update index.html
5971b2e verified
Raw History Blame Contribute Delete
48.1 kB
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>MindIA - Помощник Юридической Службы</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; padding: 20px; } .container { max-width: 1400px; margin: 0 auto; background: white; border-radius: 12px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2); overflow: hidden; } .header { background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%); color: white; padding: 30px; text-align: center; } .header .platform-name { font-size: 16px; font-weight: 600; letter-spacing: 2px; margin-bottom: 15px; opacity: 0.9; } .header h1 { font-size: 28px; margin-bottom: 10px; } .header p { font-size: 14px; opacity: 0.9; } .contact-banner { background: #f8f9fa; padding: 15px 30px; border-bottom: 2px solid #e9ecef; display: flex; align-items: center; justify-content: center; gap: 20px; flex-wrap: wrap; } .contact-item { display: flex; align-items: center; gap: 8px; color: #495057; font-size: 14px; } .contact-item strong { color: #2c3e50; } .main-content { padding: 40px; } .section-title { font-size: 22px; font-weight: 600; color: #2c3e50; margin-bottom: 30px; display: flex; align-items: center; gap: 10px; } .cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 25px; margin-bottom: 50px; } .feature-card { background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%); border: 2px solid #e9ecef; border-radius: 12px; padding: 30px; transition: all 0.3s; cursor: pointer; } .feature-card:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(102, 126, 234, 0.2); border-color: #667eea; } .feature-card .icon { width: 60px; height: 60px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 28px; margin-bottom: 20px; } .feature-card h3 { font-size: 20px; color: #2c3e50; margin-bottom: 15px; } .feature-card p { color: #6c757d; line-height: 1.6; margin-bottom: 15px; } .feature-card ul { list-style: none; margin-bottom: 20px; } .feature-card ul li { padding: 5px 0; color: #495057; font-size: 14px; display: flex; align-items: flex-start; gap: 8px; } .feature-card ul li:before { content: "✓"; color: #28a745; font-weight: bold; } .feature-card .btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border: none; border-radius: 6px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.3s; } .feature-card .btn:hover { transform: translateX(5px); box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4); } .modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); z-index: 1000; align-items: center; justify-content: center; } .modal.active { display: flex; } .modal-content { background: white; border-radius: 12px; max-width: 1000px; width: 90%; max-height: 90vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); } .modal-header { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 25px 30px; display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; z-index: 10; } .modal-header h2 { font-size: 22px; display: flex; align-items: center; gap: 10px; } .close-btn { background: none; border: none; color: white; font-size: 28px; cursor: pointer; padding: 0; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; } .close-btn:hover { opacity: 0.8; } .modal-body { padding: 30px; } .form-group { margin-bottom: 20px; } .form-group label { display: block; font-size: 14px; font-weight: 600; color: #495057; margin-bottom: 8px; } .form-group input, .form-group select, .form-group textarea { width: 100%; padding: 10px 12px; border: 1px solid #ced4da; border-radius: 6px; font-size: 14px; font-family: inherit; transition: all 0.3s; } .form-group textarea { min-height: 120px; resize: vertical; } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: #667eea; box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1); } .file-upload { border: 2px dashed #ced4da; border-radius: 6px; padding: 30px; text-align: center; cursor: pointer; transition: all 0.3s; } .file-upload:hover { border-color: #667eea; background: #f8f9fa; } .file-upload input[type="file"] { display: none; } .analysis-result { background: #f8f9fa; border-radius: 8px; padding: 20px; margin-top: 20px; } .analysis-result h4 { color: #2c3e50; margin-bottom: 15px; display: flex; align-items: center; gap: 8px; } .risk-item { background: white; padding: 15px; border-radius: 6px; margin-bottom: 10px; border-left: 4px solid #dc3545; } .risk-item.warning { border-left-color: #ffc107; } .risk-item.info { border-left-color: #17a2b8; } .risk-item h5 { color: #2c3e50; font-size: 16px; margin-bottom: 5px; } .risk-item p { color: #6c757d; font-size: 14px; margin: 0; } .search-results { background: white; border: 1px solid #e9ecef; border-radius: 8px; max-height: 400px; overflow-y: auto; margin-top: 20px; } .search-result-item { padding: 15px; border-bottom: 1px solid #e9ecef; cursor: pointer; transition: all 0.3s; } .search-result-item:hover { background: #f8f9fa; } .search-result-item:last-child { border-bottom: none; } .search-result-item h5 { color: #2c3e50; font-size: 16px; margin-bottom: 8px; } .search-result-item p { color: #6c757d; font-size: 14px; line-height: 1.6; margin: 0; } .search-result-item .meta { display: flex; gap: 15px; margin-top: 8px; font-size: 12px; color: #868e96; } .badge { display: inline-block; padding: 4px 8px; border-radius: 4px; font-size: 12px; font-weight: 600; } .badge-danger { background: #f8d7da; color: #721c24; } .badge-warning { background: #fff3cd; color: #856404; } .badge-info { background: #d1ecf1; color: #0c5460; } .badge-success { background: #d4edda; color: #155724; } .action-buttons { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; } .btn-primary { padding: 12px 24px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border: none; border-radius: 6px; font-weight: 600; cursor: pointer; transition: all 0.3s; } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4); } .btn-secondary { padding: 12px 24px; background: #6c757d; color: white; border: none; border-radius: 6px; font-weight: 600; cursor: pointer; transition: all 0.3s; } .btn-secondary:hover { background: #5a6268; } .tabs-container { display: flex; border-bottom: 2px solid #e9ecef; margin-bottom: 20px; } .tab-button { padding: 12px 24px; background: none; border: none; border-bottom: 3px solid transparent; color: #6c757d; font-weight: 600; cursor: pointer; transition: all 0.3s; } .tab-button.active { color: #667eea; border-bottom-color: #667eea; } .tab-content { display: none; } .tab-content.active { display: block; } .letter-preview { background: white; border: 1px solid #e9ecef; border-radius: 8px; padding: 20px; margin-top: 20px; } .letter-preview h4 { color: #2c3e50; margin-bottom: 15px; } .letter-preview .content { line-height: 1.8; color: #495057; } @media (max-width: 768px) { .main-content { padding: 20px; } .cards-grid { grid-template-columns: 1fr; } .modal-content { width: 95%; } .contact-banner { flex-direction: column; gap: 10px; } } </style> </head> <body> <div class="container"> <!-- Header --> <div class="header"> <div class="platform-name">MindIA</div> <h1>Помощник Юридической Службы</h1> <p>Искусственный интеллект для автоматизации юридических процессов</p> </div> <!-- Contact Banner --> <div class="contact-banner"> <div class="contact-item"> <span>👤</span> <span><strong>Контактное лицо:</strong> Юсупова Гульфия Булатовна</span> </div> <div class="contact-item"> <span>💼</span> <span>Ведущий юрисконсульт отдела правового сопровождения и исполнения судебных актов ЮС</span> </div> <div class="contact-item"> <span>📞</span> <span><strong>Тел.:</strong> 62-04-57 (вн. 2311)</span> </div> </div> <!-- Main Content --> <div class="main-content"> <div class="section-title"> <span>⚙️</span> Функциональные возможности </div> <div class="cards-grid"> <!-- Card 1: Contracts --> <div class="feature-card" onclick="openModal('contractsModal')"> <div class="icon">📑</div> <h3>Анализ договоров</h3> <p>Комплексный анализ и проверка договоров с использованием ИИ</p> <ul> <li>Выявление потенциальных рисков</li> <li>Поиск ошибок и опечаток</li> <li>Обнаружение противоречий</li> <li>Генерация типовых договоров</li> <li>Создание доп. соглашений</li> </ul> <button class="btn"> Открыть <span>→</span> </button> </div> <!-- Card 2: Letters --> <div class="feature-card" onclick="openModal('lettersModal')"> <div class="icon">✉️</div> <h3>Обработка писем</h3> <p>Автоматизация работы с входящей и исходящей корреспонденцией</p> <ul> <li>Сканирование входящих писем</li> <li>Определение типа письма</li> <li>Подготовка ответов</li> <li>Создание служебных записок</li> <li>Классификация претензий</li> </ul> <button class="btn"> Открыть <span>→</span> </button> </div> <!-- Card 3: Legal Search --> <div class="feature-card" onclick="openModal('searchModal')"> <div class="icon">🔍</div> <h3>Поиск информации</h3> <p>Быстрый поиск юридической информации и документов</p> <ul> <li>Судебная практика</li> <li>Законодательные нормы</li> <li>Нормативные акты</li> <li>Комментарии к законам</li> <li>Актуальная правовая база</li> </ul> <button class="btn"> Открыть <span>→</span> </button> </div> </div> </div> </div> <!-- Contracts Modal --> <div id="contractsModal" class="modal"> <div class="modal-content"> <div class="modal-header"> <h2><span>📑</span> Анализ и генерация договоров</h2> <button class="close-btn" onclick="closeModal('contractsModal')">×</button> </div> <div class="modal-body"> <div class="tabs-container"> <button class="tab-button active" onclick="switchTab('analyze', 'contractsModal')">Анализ договора</button> <button class="tab-button" onclick="switchTab('generate', 'contractsModal')">Генерация договора</button> </div> <!-- Analyze Tab --> <div id="analyze-tab" class="tab-content active"> <div class="form-group"> <label>Загрузите договор для анализа:</label> <div class="file-upload" onclick="document.getElementById('contractFile').click()"> <input type="file" id="contractFile" accept=".pdf,.doc,.docx" onchange="handleContractUpload()"> <div style="font-size: 40px; margin-bottom: 10px;">📄</div> <div style="font-weight: 600; margin-bottom: 5px;">Нажмите для загрузки договора</div> <div style="font-size: 12px; color: #6c757d;">Поддерживаются форматы: PDF, DOC, DOCX</div> </div> </div> <div class="form-group"> <label>Тип договора:</label> <select> <option value="">Выберите тип договора</option> <option value="supply">Договор поставки</option> <option value="service">Договор оказания услуг</option> <option value="lease">Договор аренды</option> <option value="employment">Трудовой договор</option> <option value="partnership">Договор партнерства</option> <option value="other">Другое</option> </select> </div> <div class="action-buttons"> <button class="btn-secondary" onclick="closeModal('contractsModal')">Отмена</button> <button class="btn-primary" onclick="analyzeContract()">Анализировать договор</button> </div> <div id="analysisResults" style="display: none;"> <div class="analysis-result"> <h4>📊 Результаты анализа</h4> <div style="margin-bottom: 20px;"> <h5 style="color: #2c3e50; margin-bottom: 10px;">Общая информация:</h5> <p style="color: #495057; margin-bottom: 5px;"><strong>Тип договора:</strong> Договор поставки товаров</p> <p style="color: #495057; margin-bottom: 5px;"><strong>Дата проверки:</strong> 10 января 2026 г.</p> <p style="color: #495057;"><strong>Статус:</strong> <span class="badge badge-warning">Требуется доработка</span></p> </div> <h5 style="color: #2c3e50; margin-bottom: 15px;">Выявленные риски и проблемы:</h5> <div class="risk-item"> <h5>⚠️ Высокий риск: Отсутствие штрафных санкций</h5> <p>В договоре не предусмотрены штрафные санкции за несвоевременную поставку товара. Рекомендуется добавить пункт с неустойкой в размере 0,1% от стоимости товара за каждый день просрочки.</p> </div> <div class="risk-item warning"> <h5>⚠️ Средний риск: Нечеткие сроки исполнения</h5> <p>Пункт 3.2 содержит формулировку "в разумные сроки", что может привести к спорам. Рекомендуется указать конкретные календарные сроки.</p> </div> <div class="risk-item info"> <h5>ℹ️ Замечание: Опечатка в реквизитах</h5> <p>В разделе "Реквизиты сторон" обнаружена опечатка в ИНН контрагента (11 цифр вместо 12). Проверьте корректность указанного ИНН: 77012345678.</p> </div> <div class="risk-item info"> <h5>ℹ️ Рекомендация: Добавить условие о форс-мажоре</h5> <p>Рекомендуется добавить раздел о форс-мажорных обстоятельствах для защиты интересов обеих сторон в случае непредвиденных ситуаций.</p> </div> </div> </div> </div> <!-- Generate Tab --> <div id="generate-tab" class="tab-content"> <div class="form-group"> <label>Тип документа:</label> <select> <option value="">Выберите тип документа</option> <option value="contract">Типовой договор</option> <option value="agreement">Дополнительное соглашение</option> <option value="amendment">Изменение к договору</option> <option value="termination">Соглашение о расторжении</option> </select> </div> <div class="form-group"> <label>Шаблон договора:</label> <select> <option value="">Выберите шаблон</option> <option value="supply">Договор поставки</option> <option value="service">Договор оказания услуг</option> <option value="lease">Договор аренды</option> <option value="employment">Трудовой договор</option> <option value="nda">Соглашение о конфиденциальности</option> </select> </div> <div class="form-group"> <label>Наименование контрагента:</label> <input type="text" placeholder="ТОО 'Название компании'"> </div> <div class="form-group"> <label>Предмет договора:</label> <textarea placeholder="Опишите предмет договора..."></textarea> </div> <div class="form-group"> <label>Сумма договора (тенге):</label> <input type="number" placeholder="0.00"> </div> <div class="form-group"> <label>Дополнительные условия:</label> <textarea placeholder="Укажите особые условия, которые нужно включить в договор..."></textarea> </div> <div class="action-buttons"> <button class="btn-secondary" onclick="closeModal('contractsModal')">Отмена</button> <button class="btn-primary" onclick="generateContract()">Сгенерировать договор</button> </div> </div> </div> </div> </div> <!-- Letters Modal --> <div id="lettersModal" class="modal"> <div class="modal-content"> <div class="modal-header"> <h2><span>✉️</span> Обработка писем и служебных записок</h2> <button class="close-btn" onclick="closeModal('lettersModal')">×</button> </div> <div class="modal-body"> <div class="tabs-container"> <button class="tab-button active" onclick="switchTab('incoming', 'lettersModal')">Входящие письма</button> <button class="tab-button" onclick="switchTab('outgoing', 'lettersModal')">Создать ответ</button> <button class="tab-button" onclick="switchTab('memo', 'lettersModal')">Служебная записка</button> </div> <!-- Incoming Letters Tab --> <div id="incoming-tab" class="tab-content active"> <div class="form-group"> <label>Загрузите входящее письмо:</label> <div class="file-upload" onclick="document.getElementById('letterFile').click()"> <input type="file" id="letterFile" accept=".pdf,.doc,.docx,.jpg,.png" onchange="handleLetterUpload()"> <div style="font-size: 40px; margin-bottom: 10px;">📨</div> <div style="font-weight: 600; margin-bottom: 5px;">Загрузите письмо для анализа</div> <div style="font-size: 12px; color: #6c757d;">Поддерживаются форматы: PDF, DOC, DOCX, JPG, PNG</div> </div> </div> <div class="action-buttons"> <button class="btn-secondary" onclick="closeModal('lettersModal')">Отмена</button> <button class="btn-primary" onclick="analyzeLetter()">Проанализировать письмо</button> </div> <div id="letterAnalysis" style="display: none;"> <div class="analysis-result"> <h4>📋 Результаты анализа письма</h4> <div style="margin-bottom: 20px;"> <p style="color: #495057; margin-bottom: 10px;"><strong>Тип письма:</strong> <span class="badge badge-warning">Претензия</span></p> <p style="color: #495057; margin-bottom: 10px;"><strong>Приоритет:</strong> <span class="badge badge-danger">Высокий</span></p> <p style="color: #495057; margin-bottom: 10px;"><strong>Срок ответа:</strong> 5 рабочих дней</p> <p style="color: #495057;"><strong>От кого:</strong> ТОО "Компания-контрагент"</p> </div> <h5 style="color: #2c3e50; margin-bottom: 10px;">Краткое содержание:</h5> <p style="color: #495057; line-height: 1.6; margin-bottom: 15px;"> Контрагент предъявляет претензию о несвоевременной оплате по договору №123 от 15.10.2025. Требует оплатить задолженность в размере 5 000 000 тенге и уплатить неустойку. Угрожает обращением в суд при отсутствии оплаты в течение 10 дней. </p> <h5 style="color: #2c3e50; margin-bottom: 10px;">Рекомендуемые действия:</h5> <ul style="list-style: none; padding-left: 0;"> <li style="padding: 8px 0; color: #495057;">✓ Проверить статус оплаты по договору №123</li> <li style="padding: 8px 0; color: #495057;">✓ Подготовить мотивированный ответ</li> <li style="padding: 8px 0; color: #495057;">✓ Согласовать с финансовым отделом</li> <li style="padding: 8px 0; color: #495057;">✓ Подготовить план погашения (при наличии задолженности)</li> </ul> </div> </div> </div> <!-- Outgoing Letters Tab --> <div id="outgoing-tab" class="tab-content"> <div class="form-group"> <label>Тип ответного письма:</label> <select id="responseType"> <option value="">Выберите тип письма</option> <option value="answer">Ответ на запрос информации</option> <option value="claim-response">Ответ на претензию</option> <option value="clarification">Письмо-разъяснение</option> <option value="refusal">Мотивированный отказ</option> <option value="acceptance">Письмо-согласие</option> </select> </div> <div class="form-group"> <label>Получатель:</label> <input type="text" placeholder="Наименование организации/ФИО"> </div> <div class="form-group"> <label>Тема письма:</label> <input type="text" placeholder="Укажите тему письма"> </div> <div class="form-group"> <label>Исходное письмо (для контекста):</label> <textarea placeholder="Вставьте текст исходного письма или кратко опишите его содержание..."></textarea> </div> <div class="form-group"> <label>Ключевые моменты для ответа:</label> <textarea placeholder="Укажите ключевую информацию, которую нужно включить в ответ..."></textarea> </div> <div class="action-buttons"> <button class="btn-secondary" onclick="closeModal('lettersModal')">Отмена</button> <button class="btn-primary" onclick="generateResponse()">Сгенерировать ответ</button> </div> <div id="responsePreview" style="display: none;"> <div class="letter-preview"> <h4>Предварительный просмотр ответа:</h4> <div class="content" id="responseContent"></div> <div class="action-buttons" style="margin-top: 20px;"> <button class="btn-secondary">Редактировать</button> <button class="btn-primary">Скачать документ</button> </div> </div> </div> </div> <!-- Memo Tab --> <div id="memo-tab" class="tab-content"> <div class="form-group"> <label>Тип служебной записки:</label> <select> <option value="">Выберите тип</option> <option value="information">Информационная</option> <option value="request">Запрос</option> <option value="proposal">Предложение</option> <option value="report">Отчетная</option> </select> </div> <div class="form-group"> <label>Кому:</label> <input type="text" placeholder="Должность и ФИО адресата"> </div> <div class="form-group"> <label>Тема записки:</label> <input type="text" placeholder="Краткая тема служебной записки"> </div> <div class="form-group"> <label>Описание ситуации/вопроса:</label> <textarea placeholder="Опишите ситуацию или вопрос, по которому создается служебная записка..." style="min-height: 150px;"></textarea> </div> <div class="form-group"> <label>Предлагаемые решения (опционально):</label> <textarea placeholder="Укажите предлагаемые варианты решения..."></textarea> </div> <div class="action-buttons"> <button class="btn-secondary" onclick="closeModal('lettersModal')">Отмена</button> <button class="btn-primary" onclick="generateMemo()">Сгенерировать записку</button> </div> </div> </div> </div> </div> <!-- Search Modal --> <div id="searchModal" class="modal"> <div class="modal-content"> <div class="modal-header"> <h2><span>🔍</span> Поиск юридической информации</h2> <button class="close-btn" onclick="closeModal('searchModal')">×</button> </div> <div class="modal-body"> <div class="form-group"> <label>Тип поиска:</label> <select id="searchType"> <option value="all">Все источники</option> <option value="court">Судебная практика</option> <option value="laws">Законодательство</option> <option value="regulations">Нормативные акты</option> <option value="comments">Комментарии к законам</option> </select> </div> <div class="form-group"> <label>Поисковый запрос:</label> <textarea placeholder="Введите ваш запрос. Например: 'взыскание задолженности по договору поставки' или 'статья 350 ГК РК'" style="min-height: 80px;"></textarea> </div> <div class="form-group"> <label>Дополнительные фильтры:</label> <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px;"> <div> <label style="font-size: 12px; font-weight: normal;">Дата с:</label> <input type="date"> </div> <div> <label style="font-size: 12px; font-weight: normal;">Дата по:</label> <input type="date"> </div> </div> </div> <div class="action-buttons" style="justify-content: space-between;"> <button class="btn-secondary">Очистить</button> <button class="btn-primary" onclick="performSearch()">Искать</button> </div> <div id="searchResults" style="display: none;"> <h4 style="color: #2c3e50; margin: 20px 0 15px 0;">Результаты поиска (23 найдено):</h4> <div class="search-results"> <div class="search-result-item"> <h5>Постановление Верховного Суда РК от 15.11.2024 №2-1234-24</h5> <p>...по делу о взыскании задолженности по договору поставки. Суд указал, что при наличии доказательств ненадлежащего исполнения обязательств поставщиком, покупатель вправе удержать...</p> <div class="meta"> <span class="badge badge-info">Судебная практика</span> <span>📅 15 ноября 2024</span> <span>⚖️ Верховный Суд РК</span> </div> </div> <div class="search-result-item"> <h5>Гражданский кодекс РК, Статья 350. Неустойка</h5> <p>Неустойкой (штрафом, пеней) признается определенная законодательством или договором денежная сумма, которую должник обязан уплатить кредитору в случае неисполнения или ненадлежащего исполнения обязательства...</p> <div class="meta"> <span class="badge badge-success">Законодательство</span> <span>📅 Действует с 01.07.1999</span> <span>📄 ГК РК</span> </div> </div> <div class="search-result-item"> <h5>Нормативное постановление ВС РК №4 от 23.06.2023</h5> <p>О некоторых вопросах применения законодательства о договоре поставки. Разъясняются особенности определения существенных условий договора поставки, порядок расчета неустойки...</p> <div class="meta"> <span class="badge badge-warning">Нормативный акт</span> <span>📅 23 июня 2023</span> <span>⚖️ Верховный Суд РК</span> </div> </div> <div class="search-result-item"> <h5>Комментарий к статье 350 ГК РК</h5> <p>Неустойка является одним из способов обеспечения исполнения обязательств и мерой имущественной ответственности за их нарушение. В практике применения данной нормы следует учитывать...</p> <div class="meta"> <span class="badge badge-info">Комментарий</span> <span>📅 2024</span> <span>👤 Басин Ю.Г.</span> </div> </div> </div> </div> </div> </div> </div> <script> let currentModalTabs = {}; function openModal(modalId) { document.getElementById(modalId).classList.add('active'); } function closeModal(modalId) { document.getElementById(modalId).classList.remove('active'); } function switchTab(tabName, modalId) { const modal = document.getElementById(modalId); const buttons = modal.querySelectorAll('.tab-button'); const contents = modal.querySelectorAll('.tab-content'); buttons.forEach(btn => btn.classList.remove('active')); contents.forEach(content => content.classList.remove('active')); event.target.classList.add('active'); document.getElementById(tabName + '-tab').classList.add('active'); } function handleContractUpload() { const file = document.getElementById('contractFile').files[0]; if (file) { alert('Файл загружен: ' + file.name + '\n\nНажмите "Анализировать договор" для начала проверки.'); } } function analyzeContract() { document.getElementById('analysisResults').style.display = 'block'; document.getElementById('analysisResults').scrollIntoView({ behavior: 'smooth' }); } function generateContract() { alert('Договор генерируется...\n\nВаш документ будет готов через несколько минут. Система создаст договор на основе выбранного шаблона и указанных параметров.'); closeModal('contractsModal'); } function handleLetterUpload() { const file = document.getElementById('letterFile').files[0]; if (file) { alert('Письмо загружено: ' + file.name + '\n\nНажмите "Проанализировать письмо" для начала обработки.'); } } function analyzeLetter() { document.getElementById('letterAnalysis').style.display = 'block'; document.getElementById('letterAnalysis').scrollIntoView({ behavior: 'smooth' }); } function generateResponse() { const responseType = document.getElementById('responseType').value; if (!responseType) { alert('Пожалуйста, выберите тип ответного письма'); return; } const sampleResponse = ` <p style="margin-bottom: 15px;"><strong>Кому:</strong> ТОО "Компания-контрагент"</p> <p style="margin-bottom: 15px;"><strong>От:</strong> [Ваша организация]</p> <p style="margin-bottom: 15px;"><strong>Дата:</strong> 10 января 2026 г.</p> <p style="margin-bottom: 20px;"><strong>Тема:</strong> Ответ на претензию от [дата]</p> <p style="margin-bottom: 15px;">Уважаемые коллеги,</p> <p style="margin-bottom: 15px;"> Настоящим письмом сообщаем о получении Вашей претензии от [дата] относительно задолженности по договору №123 от 15.10.2025. </p> <p style="margin-bottom: 15px;"> После проверки информации установлено, что оплата по указанному договору была произведена платежным поручением №456 от [дата]. Копию платежного поручения направляем в приложении к настоящему письму. </p> <p style="margin-bottom: 15px;"> В связи с вышеизложенным, считаем претензию необоснованной и просим закрыть данный вопрос. </p> <p style="margin-bottom: 20px;">С уважением,<br>[Должность, ФИО]</p> `; document.getElementById('responseContent').innerHTML = sampleResponse; document.getElementById('responsePreview').style.display = 'block'; document.getElementById('responsePreview').scrollIntoView({ behavior: 'smooth' }); } function generateMemo() { alert('Служебная записка генерируется...\n\nДокумент будет создан в соответствии с вашими указаниями и доступен для скачивания.'); } function performSearch() { document.getElementById('searchResults').style.display = 'block'; document.getElementById('searchResults').scrollIntoView({ behavior: 'smooth' }); } // Close modal when clicking outside window.onclick = function(event) { if (event.target.classList.contains('modal')) { event.target.classList.remove('active'); } } </script> </body> </html>
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MindIA - Помощник Юридической Службы</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
padding: 20px;
}
.container {
max-width: 1400px;
margin: 0 auto;
background: white;
border-radius: 12px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
overflow: hidden;
}
.header {
background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
color: white;
padding: 30px;
text-align: center;
}
.header .platform-name {
font-size: 16px;
font-weight: 600;
letter-spacing: 2px;
margin-bottom: 15px;
opacity: 0.9;
}
.header h1 {
font-size: 28px;
margin-bottom: 10px;
}
.header p {
font-size: 14px;
opacity: 0.9;
}
.contact-banner {
background: #f8f9fa;
padding: 15px 30px;
border-bottom: 2px solid #e9ecef;
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
flex-wrap: wrap;
}
.contact-item {
display: flex;
align-items: center;
gap: 8px;
color: #495057;
font-size: 14px;
}
.contact-item strong {
color: #2c3e50;
}
.main-content {
padding: 40px;
}
.section-title {
font-size: 22px;
font-weight: 600;
color: #2c3e50;
margin-bottom: 30px;
display: flex;
align-items: center;
gap: 10px;
}
.cards-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 25px;
margin-bottom: 50px;
}
.feature-card {
background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);