index.html - master - MayMi/new

index.html
533 строки24 KB
MayMi
Create: index.html, Update: index.html
18 июн 2026, 19:36
18 июн 2026, 19:363f84a3c
<!doctype html>
<html lang="ru">
<head>
    <!-- Обязательные метатеги -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
    <!-- Bootstrap Icons -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">

    <title>Прикладные инструменты искусственного интеллекта</title>
    
    <style>
        /* Новая цветовая гамма на основе голубых и синих оттенков */
        :root {
            --primary-light: #B0E0E6;
            --primary-light-blue: #ADD8E6;
            --primary-sky: #87CEEB;
            --primary-light-sky: #87CEFA;
            --primary-deep-sky: #00BFFF;
            --primary-dodger: #1E90FF;
            --primary-cornflower: #6495ED;
            --primary-blue-dark: #1A3A5E;
            --primary-blue-mid: #2B5A7A;
            --card-shadow: 0 12px 48px rgba(26, 58, 94, 0.12);
            --card-shadow-hover: 0 24px 64px rgba(26, 58, 94, 0.22);
        }

        body {
            background: linear-gradient(135deg, #F0F8FF 0%, #E6F3F8 100%);
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        h1 {
            color: var(--primary-blue-dark);
            font-weight: 800;
            margin: 30px 0 20px;
            text-shadow: 0 2px 8px rgba(26, 58, 94, 0.12);
        }

        .bg-success {
            background: linear-gradient(135deg, #1A3A5E 0%, #2B5A7A 100%) !important;
        }

        /* Стиль для слова "Блог" в баннере - белый цвет */
        .blog-title-white {
            color: #ffffff !important;
        }

        .nav-scroller .nav-link {
            color: var(--primary-blue-dark);
            font-weight: 600;
            transition: 0.2s;
        }
        .nav-scroller .nav-link:hover {
            color: var(--primary-dodger);
            border-bottom: 3px solid var(--primary-light);
        }

        .card {
            border: none;
            border-radius: 24px;
            box-shadow: var(--card-shadow);
            transition: transform 0.25s, box-shadow 0.25s;
            overflow: hidden;
            background: white;
        }
        .card:hover {
            transform: translateY(-6px);
            box-shadow: var(--card-shadow-hover);
        }
        .card-img-top {
            height: 220px;
            object-fit: cover;
            border-bottom: 5px solid var(--primary-light);
        }
        .card-title {
            color: var(--primary-blue-dark);
            font-weight: 800;
            font-size: 1.7rem;
            border-left: 6px solid var(--primary-sky);
            padding-left: 18px;
            margin-bottom: 20px;
        }
        .card-body {
            background: #ffffff;
            padding: 30px 34px;
        }
        .card-text {
            color: #1a2a3a;
            line-height: 1.9;
            font-size: 1.05rem;
        }

        /* Бейджи в новой гамме */
        .badge-custom {
            background: var(--primary-light);
            color: var(--primary-blue-dark);
            padding: 6px 18px;
            border-radius: 30px;
            font-weight: 700;
            font-size: 0.9rem;
            letter-spacing: 0.3px;
            display: inline-block;
        }
        .badge-dark-custom {
            background: var(--primary-blue-dark);
            color: white;
            padding: 6px 18px;
            border-radius: 30px;
            font-weight: 700;
            font-size: 0.9rem;
            display: inline-block;
        }
        .badge-free {
            background: var(--primary-light);
            color: var(--primary-blue-dark);
            padding: 6px 18px;
            border-radius: 30px;
            font-weight: 700;
            font-size: 0.9rem;
            display: inline-block;
        }
        .badge-primary-custom {
            background: var(--primary-cornflower);
            color: white;
            padding: 6px 18px;
            border-radius: 30px;
            font-weight: 700;
            font-size: 0.9rem;
            display: inline-block;
        }

        /* Алёрты в новой гамме */
        .alert-success-custom {
            background: #E6F3F8;
            border-left: 6px solid var(--primary-cornflower);
            color: var(--primary-blue-dark);
            border-radius: 14px;
            font-weight: 500;
            padding: 15px 20px;
        }
        .alert-custom {
            background: #F0F8FF;
            border-left: 6px solid var(--primary-sky);
            color: var(--primary-blue-dark);
            border-radius: 14px;
            font-weight: 500;
            padding: 15px 20px;
        }

        .blog-post-title {
            color: var(--primary-blue-dark);
            font-weight: 800;
            font-size: 2rem;
            margin-top: 30px;
        }

        .border-bottom {
            border-bottom: 3px solid var(--primary-light) !important;
        }

        .text-warning {
            color: var(--primary-dodger) !important;
            font-weight: 700;
        }

        .stretched-link {
            color: var(--primary-blue-dark);
            font-weight: 700;
            text-decoration: none;
            border-bottom: 3px solid var(--primary-light);
            transition: 0.2s;
            padding-bottom: 2px;
        }
        .stretched-link:hover {
            color: var(--primary-dodger);
            border-bottom-color: var(--primary-blue-dark);
        }

        .blog-post-meta {
            color: var(--primary-blue-mid);
        }

        /* Стили для placeholder изображений */
        .bd-placeholder-img {
            background: var(--primary-light) !important;
        }
        .bd-placeholder-img text {
            fill: var(--primary-blue-dark);
            opacity: 0.5;
        }
        .bd-placeholder-img rect {
            fill: var(--primary-light);
        }

        /* Кнопки */
        .btn-outline-custom {
            color: var(--primary-blue-dark);
            border: 2px solid var(--primary-light);
            border-radius: 30px;
            padding: 8px 28px;
            font-weight: 700;
            transition: 0.2s;
            background: transparent;
        }
        .btn-outline-custom:hover {
            background: var(--primary-light);
            color: var(--primary-blue-dark);
            border-color: var(--primary-sky);
        }
        .btn-custom-primary {
            background: var(--primary-cornflower);
            border: none;
            color: white;
            border-radius: 30px;
            padding: 10px 32px;
            font-weight: 700;
            transition: 0.2s;
        }
        .btn-custom-primary:hover {
            background: var(--primary-dodger);
            color: white;
            transform: scale(1.02);
        }

        /* Accordion */
        .accordion-button:not(.collapsed) {
            background: #E6F3F8;
            color: var(--primary-blue-dark);
            font-weight: 700;
        }
        .accordion-button:focus {
            border-color: var(--primary-sky);
            box-shadow: 0 0 0 0.25rem rgba(135, 206, 235, 0.5);
        }
        .accordion-button {
            font-weight: 600;
            color: var(--primary-blue-dark);
        }
        .accordion-button:hover {
            background: #F0F8FF;
        }
        .accordion-item {
            border: 2px solid #E6F3F8;
            border-radius: 12px;
            overflow: hidden;
        }

        /* Таблицы */
        .table-custom {
            background: #f8f9fa;
            border-radius: 16px;
            overflow: hidden;
        }
        .table-custom thead {
            background: var(--primary-blue-dark);
            color: white;
        }
        .table-custom tbody tr:hover {
            background: #F0F8FF;
        }
        .table-custom tbody tr.table-active-custom {
            background: #E6F3F8;
        }

        /* Блок-схемы */
        .flowchart-step {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 12px 20px;
            border-radius: 16px;
            font-weight: 700;
            font-size: 1rem;
            text-align: center;
            min-width: 120px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.06);
            transition: transform 0.2s;
        }
        .flowchart-step:hover {
            transform: scale(1.02);
        }
        .flowchart-arrow {
            font-size: 2.2rem;
            color: var(--primary-blue-dark);
            line-height: 1.2;
            display: block;
            text-align: center;
        }
        .flowchart-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 10px 0;
        }

        /* Футер карточки */
        .card-footer-custom {
            background: #F0F8FF;
            border-top: 4px solid var(--primary-light);
            padding: 14px 28px;
            color: var(--primary-blue-dark);
            font-weight: 600;
        }

        /* Адаптация для мобильных */
        @media (max-width: 768px) {
            .card-img-top {
                height: 160px;
            }
            .card-body {
                padding: 20px;
            }
            .card-title {
                font-size: 1.3rem;
            }
        }
    </style>
</head>
<body>

     <div class="container">
        <!-- Изменено: добавлен класс main-title для центрирования -->
        <h1 class="main-title"> Прикладные инструменты искусственного интеллекта</h1>
    </div>

    <div class="nav-scroller py-1 mb-2">
        <nav class="nav d-flex justify-content-between container">
            <a class="p-2 link-secondary" href="#">Образование</a>
            <a class="p-2 link-secondary" href="#">Дизайн</a>
            <a class="p-2 link-secondary" href="#">Культура</a>  
            <a class="p-2 link-secondary" href="#">Стиль</a>
            <a class="p-2 link-secondary" href="#">Путешествия</a>
        </nav>
    </div>

  <div class="container">
        <!-- Баннер -->
        <div class="p-4 p-md-5 my-4 text-white rounded bg-success">
            <div class="col-md-6 px-0">
                <!-- Изменено: добавлен класс blog-title-white для белого цвета -->
                <h1 class="display-4 font-italic blog-title-white">Блог</h1>
                <h1 class="main-title-white"> Прикладные инструменты искусственного интеллекта</h1>
            </div>
        </div>
        </div>

        <!-- Карточки-превью -->
        <div class="row mb-2">
            <div class="col-md-6">
                <div class="row g-0 border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
                    <div class="col p-4 d-flex flex-column position-static">
                        <strong class="d-inline-block mb-2 text-warning">Технологии</strong>
                        <h3 class="mb-0">Что такое AI ассистент</h3>
                        <div class="mb-1 text-muted">15 июня</div>
                        <p class="card-text mb-auto">Понятие термина AI ассистент</p>
                        <a href="#" class="stretched-link">Продолжить чтение</a>
                    </div>
                    <div class="col-auto d-none d-lg-block">
                         <img 
style="object-fit: cover;"
src="https://maymi.gitverse.site/new/images/images1806.jpg" 
alt="images1806.jpg" 
width="200" height="250">
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="row g-0 border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
                    <div class="col p-4 d-flex flex-column position-static">
                        <strong class="d-inline-block mb-2 text-warning">Дизайн</strong>
                        <h3 class="mb-0">Платформа для создания AI ассистентов</h3>
                        <div class="mb-1 text-muted">16 июня</div>
                        <p class="mb-auto">Обзор российских и зарубежных платформ для создания AI ассистентов</p>
                        <a href="#" class="stretched-link">Продолжить чтение</a>
                    </div>
                    <div class="col-auto d-none d-lg-block">
                         <img 
style="object-fit: cover;"
src="https://maymi.gitverse.site/new/images/images18062.jpg" 
alt="images18062.jpg" 
width="200" height="250">
                    </div>
                </div>
            </div>
        </div>
    </div>

    <main class="container">
        <h2 class="pb-4 mb-4 font-italic border-bottom">
            Последняя публикация
        </h2>

        <h3 class="blog-post-title">Лучший русскоговорящий AI ассистент</h3>

        <!-- КАРТОЧКА С ИЗОБРАЖЕНИЕМ -->
        <div class="card mb-4">
            <img src="https://iconica.site/upload/iblock/210/psybgsxhfjzg6jm0a949dg942wmlap91.jpg" class="card-img-top" alt="Российские платформы для AI ассистентов">
            <div class="card-body">
                <h5 class="card-title">🇷🇺 Российские платформы для AI ассистентов — без VPN и без оплаты</h5>
                
                <p class="card-text">
                    <span class="badge-custom"> РФ</span>
                    <span class="badge-free ms-2"> Бесплатно</span>
                    <span class="badge-dark-custom ms-2">Без VPN</span>
                    <span class="badge-primary-custom ms-2">⭐ Топ 2026</span>
                </p>

                <p class="card-text">
                    В 2026 году в России сформировалась полноценная экосистема платформ для разработки AI-ассистентов, доступных <strong>без использования VPN</strong> и с <strong>бесплатными тарифами</strong>. Лидерами среди таких решений стали <strong>GigaChat Studio</strong> от Сбера, <strong>Yandex Cloud AI</strong>, <strong>NeuroBot</strong> (Open Source версия) и <strong>Cloud.ru AI</strong> от VK. Все эти платформы работают на российских серверах, соблюдают 152-ФЗ и не требуют иностранных аккаунтов.
                </p>

                <div class="alert alert-success-custom" role="alert">
                    <strong>🔥 Главное преимущество:</strong> Бесплатные тарифы включают до <strong>100 000 токенов в месяц</strong> на GigaChat Studio и до <strong>1 млн символов</strong> в Yandex Cloud AI — этого достаточно для создания полноценного MVP ассистента.
                </div>

                <p class="card-text">
                    <strong>GigaChat Studio</strong> предлагает конструктор диалогов с визуальным редактором, поддержкой RAG и интеграцией с СберБизнес. <strong>Yandex Cloud AI</strong> предоставляет доступ к YandexGPT 5 и YandexART, а также готовые шаблоны для чат-ботов. <strong>NeuroBot</strong> (Open Source) позволяет развернуть собственную инфраструктуру на российских серверах, а <strong>Cloud.ru AI</strong> от VK включает бесплатный доступ к моделям и API для разработчиков.
                </p>

                <!-- Accordion с таблицей -->
                <div class="accordion mb-3" id="accordionExample">
                    <div class="accordion-item">
                        <h2 class="accordion-header" id="headingOne">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
                                🇷🇺 Сравнение российских платформ 2026
                            </button>
                        </h2>
                        <div id="collapseOne" class="accordion-collapse collapse" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
                            <div class="accordion-body">
                                <table class="table table-custom table-hover">
                                    <thead>
                                        <tr>
                                            <th>Платформа</th>
                                            <th>Бесплатный лимит</th>
                                            <th>VPN не требуется</th>
                                            <th>Ключевая особенность</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr class="table-active-custom">
                                            <td><strong>GigaChat Studio</strong></td>
                                            <td>100 000 токенов/мес</td>
                                            <td>✅ Да</td>
                                            <td>Визуальный конструктор</td>
                                        </tr>
                                        <tr>
                                            <td><strong>Yandex Cloud AI</strong></td>
                                            <td>1 млн символов/мес</td>
                                            <td>✅ Да</td>
                                            <td>YandexGPT 5 + YandexART</td>
                                        </tr>
                                        <tr>
                                            <td><strong>NeuroBot (Open Source)</strong></td>
                                            <td>Безлимит (свои сервера)</td>
                                            <td>✅ Да</td>
                                            <td>Полный контроль данных</td>
                                        </tr>
                                        <tr>
                                            <td><strong>Cloud.ru AI (VK)</strong></td>
                                            <td>100 000 токенов/мес</td>
                                            <td>✅ Да</td>
                                            <td>Интеграция с VK Services</td>
                                        </tr>
                                    </tbody>
                                </table>
                                <p class="text-muted mt-2"><small>* Все платформы работают на российских серверах</small></p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Вертикальная блок-схема -->
                <div class="flowchart-container">
                    <div class="flowchart-step" style="background: var(--primary-blue-dark); color: white; border: 3px solid var(--primary-light);">
                        <i class="bi bi-cloud"></i> 1. Выбор платформы
                    </div>
                    <i class="bi bi-arrow-down flowchart-arrow"></i>
                    <div class="flowchart-step" style="background: #F0F8FF; color: var(--primary-blue-dark); border: 3px solid var(--primary-blue-dark);">
                        <i class="bi bi-gear"></i> 2. Настройка ассистента
                    </div>
                    <i class="bi bi-arrow-down flowchart-arrow"></i>
                    <div class="flowchart-step" style="background: var(--primary-light); color: var(--primary-blue-dark); border: 3px solid var(--primary-blue-dark);">
                        <i class="bi bi-database"></i> 3. Подключение данных
                    </div>
                    <i class="bi bi-arrow-down flowchart-arrow"></i>
                    <div class="flowchart-step" style="background: var(--primary-cornflower); color: white; border: 3px solid var(--primary-blue-dark);">
                        <i class="bi bi-rocket"></i> 4. Запуск и мониторинг
                    </div>
                </div>

                <!-- Кнопки -->
                <div class="mt-4">
                    <a href="#" class="btn btn-custom-primary me-2">
                        <i class="bi bi-arrow-right"></i> Начать сейчас
                    </a>
                    <a href="#" class="btn btn-outline-custom">
                        <i class="bi bi-info-circle"></i> Подробнее
                    </a>
                </div>

                <p class="card-text mt-3">
                    <small class="text-muted">Последнее обновление: сегодня, 14:30</small>
                </p>
            </div>
            <div class="card-footer-custom">
                <span>📊 94% пользователей отмечают рост продуктивности с AI-ассистентами</span>
            </div>
        </div>

        <!-- Дополнительная карточка -->
        <div class="card mb-4">
            <div class="card-body">
                <h5 class="card-title">💡 Полезные ресурсы</h5>
                <div class="alert alert-custom" role="alert">
                    <strong>📚 Рекомендуем:</strong> Официальная документация <a href="#" class="link-custom" style="color: var(--primary-dodger); font-weight: 700; text-decoration: none;">GigaChat Studio</a> и <a href="#" class="link-custom" style="color: var(--primary-dodger); font-weight: 700; text-decoration: none;">Yandex Cloud AI</a> содержит подробные гайды по созданию ассистентов.
                </div>
                <p class="card-text">
                    <span class="badge-custom">📖 Читайте также</span>
                    <span class="badge-light ms-2" style="background: var(--primary-light); color: var(--primary-blue-dark); padding: 6px 18px; border-radius: 30px;">Тренды 2026</span>
                </p>
            </div>
        </div>
    </main>

    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>

</body>
</html>