task/index.html - master - evgalna/blog

task/index.html
424 строки28 KB
evgalna
Update: index.html
15 июн 2026, 20:17
15 июн 2026, 20:17dd02263
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
    <title>Таджикистан | Отбор лекарственных растений</title>
    <!-- Bootstrap 5 CSS + Icons + Google Fonts -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,300;14..32,400;14..32,500;14..32,600;14..32,700&display=swap" rel="stylesheet">
    <style>
        /* Цветовая схема:
           #92cfae   — основной акцент (светлая зелень)
           #2a8288   — тёмный бирюзово-зелёный (заголовки, шапка)
           #3d6f6513 — прозрачный оттенок (фоны, карточки) 13% прозрачности → rgb(61,111,101,0.075) */
        :root {
            --primary-light: #92cfae;
            --primary-dark: #2a8288;
            --transparent-mint: #3d6f6513;   /* rgba(61,111,101,0.075) */
            --overlay-mint: #92ceaedb;        /* #92cfae с прозрачностью 0.86 (примерно) */
            --accent-teal: #298188dc;         /* #2a8288 с прозрачностью ~0.86 */
        }
        * {
            font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
        }
        body {
            background: #f4fbf7;
            background-image: radial-gradient(circle at 10% 20%, rgba(146, 207, 174, 0.08) 0%, rgba(42, 130, 136, 0.03) 90%);
            color: #1a3a32;
            scroll-behavior: smooth;
        }
        /* hero с градиентом используя основные цвета */
        .hero-section {
            background: linear-gradient(115deg, #1b6b6e 0%, #2a8288 50%, #216e6b 100%);
            color: white;
            border-bottom: 4px solid #92cfae;
            position: relative;
            overflow: hidden;
        }
        .hero-section::after {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            width: 300px;
            height: 100%;
            background: rgba(146, 207, 174, 0.15);
            clip-path: polygon(40% 0, 100% 0, 100% 100%, 0% 100%);
            pointer-events: none;
        }
        .nav-pills .nav-link {
            color: #1e4f4a;
            font-weight: 600;
            transition: all 0.2s;
            border-radius: 40px;
        }
        .nav-pills .nav-link.active {
            background-color: #2a8288;
            color: white;
            box-shadow: 0 6px 12px rgba(42,130,136,0.25);
        }
        .nav-pills .nav-link:hover:not(.active) {
            background-color: #92cfae40;
            color: #155a5e;
        }
        .section-card {
            background: #ffffffdd;
            backdrop-filter: blur(0px);
            background: rgba(255, 255, 255, 0.94);
            border-radius: 1.5rem;
            border: 1px solid rgba(146, 207, 174, 0.5);
            box-shadow: 0 12px 28px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.03);
            transition: transform 0.2s ease, box-shadow 0.2s;
            margin-bottom: 2rem;
        }
        .section-card:hover {
            box-shadow: 0 20px 30px -12px rgba(42,130,136,0.2);
        }
        .section-header {
            border-left: 5px solid #92cfae;
            padding-left: 1rem;
            font-weight: 700;
            letter-spacing: -0.3px;
            color: #1c5e60;
        }
        .badge-plant {
            background-color: #e2f3e9;
            color: #1b6d62;
            font-weight: 600;
            padding: 0.4rem 1rem;
            border-radius: 60px;
            font-size: 0.85rem;
            border-left: 3px solid #92cfae;
            transition: all 0.1s;
        }
        .text-note {
            background-color: #eef9f1;
            border-left: 4px solid #92cfae;
            padding: 0.9rem 1.2rem;
            border-radius: 1rem;
            font-size: 0.9rem;
            color: #1d5a55;
        }
        .img-placeholder {
            background: #e2f0ea;
            border-radius: 1.5rem;
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 220px;
            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%232a8288" width="52px" height="52px"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 14H9V8h2v8zm4 0h-2V8h2v8z"/></svg>');
            background-repeat: no-repeat;
            background-position: center;
            background-size: 54px;
            color: #2a8288;
            font-weight: 500;
            border: 1px solid #92cfae80;
        }
        footer {
            background: #1f5f60;
            background: linear-gradient(100deg, #236b6b, #1d595b);
            color: #e2f3ed;
            border-radius: 1.5rem;
            font-size: 0.85rem;
        }
        .step-badge {
            width: 34px;
            height: 34px;
            background: #2a8288;
            color: white;
            border-radius: 60px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            margin-right: 12px;
            box-shadow: 0 2px 6px rgba(42,130,136,0.4);
        }
        hr {
            opacity: 0.3;
            background-color: #92cfae;
            height: 1px;
        }
        .btn-outline-custom {
            border: 1.5px solid #92cfae;
            color: #226b67;
            background: transparent;
            border-radius: 60px;
            padding: 0.4rem 1.2rem;
            font-weight: 500;
            transition: all 0.2s;
        }
        .btn-outline-custom:hover {
            background: #92cfae;
            color: #1c4d4a;
            border-color: #2a8288;
        }
        .btn-custom-primary {
            background: #2a8288;
            border: none;
            color: white;
            border-radius: 60px;
            padding: 0.5rem 1.5rem;
            font-weight: 500;
            transition: all 0.2s;
        }
        .btn-custom-primary:hover {
            background: #1e6a6e;
            transform: translateY(-1px);
            box-shadow: 0 4px 10px rgba(42,130,136,0.3);
        }
        .table thead th {
            background: #d1efdf;
            color: #205a58;
            font-weight: 600;
            border-bottom: 2px solid #92cfae;
        }
        .table tbody tr:hover {
            background-color: #eef7f1;
        }
        @media (max-width: 768px) {
            .hero-section h1 {
                font-size: 1.8rem;
            }
        }
        /* дополнительные акценты на прозрачные слои */
        .bg-mint-soft {
            background: #3d6f6513;
        }
    </style>
</head>
<body>

<!-- Герой с обновленными цветами -->
<section class="hero-section py-5">
    <div class="container py-3">
        <div class="row align-items-center">
            <div class="col-lg-8">
                <span class="badge bg-white text-dark bg-opacity-90 mb-2 fw-semibold px-3 py-2 rounded-pill" style="color:#1a5d5a;"><i class="bi bi-tree-fill me-1" style="color:#92cfae;"></i> Этноботаника · Устойчивое развитие</span>
                <h1 class="display-5 fw-bold">Отбор лекарственных растений<br>в Таджикистане</h1>
                <p class="lead mt-3 opacity-95">Выделение перспективных видов для поддержки, сохранения биоразнообразия и развития фармацевтической отрасли.</p>
                <div class="d-flex flex-wrap gap-3 mt-4">
                    <a href="#goal" class="btn btn-light px-4 py-2 rounded-pill fw-semibold" style="color:#2a8288; border:1px solid #cbeada;">Цель отбора</a>
                    <a href="#methods" class="btn btn-outline-custom px-4 py-2">Методы отбора</a>
                    <a href="#final-list" class="btn btn-custom-primary px-4 py-2">Итоговый список</a>
                </div>
            </div>
            <div class="col-lg-4 d-none d-lg-block text-end">
                <i class="bi bi-flower2 fs-1 opacity-50"></i>
                <i class="bi bi-capsule fs-2 ms-3 opacity-75"></i>
            </div>
        </div>
    </div>
</section>

<!-- Навигация (якоря) стиль -->
<div class="container mt-4 mb-2">
    <ul class="nav nav-pills justify-content-center flex-wrap gap-2 p-2 bg-white rounded-5 shadow-sm" style="background:#ffffffcc !important; backdrop-filter: blur(2px);">
        <li class="nav-item"><a class="nav-link" href="#goal"><i class="bi bi-bullseye me-1"></i>Цель</a></li>
        <li class="nav-item"><a class="nav-link" href="#methods"><i class="bi bi-diagram-3 me-1"></i>Методы</a></li>
        <li class="nav-item"><a class="nav-link" href="#stage1"><i class="bi bi-list-check me-1"></i>1 этап</a></li>
        <li class="nav-item"><a class="nav-link" href="#analysis"><i class="bi bi-search-heart me-1"></i>Анализ</a></li>
        <li class="nav-item"><a class="nav-link" href="#final-list"><i class="bi bi-table me-1"></i>Итоговые виды</a></li>
    </ul>
</div>

<div class="container py-4">
    <!-- Цель -->
    <div class="section-card p-4 p-lg-5" id="goal">
        <div class="d-flex align-items-center gap-2 mb-3">
            <div class="step-badge"><i class="bi bi-flag-fill"></i></div>
            <h2 class="h3 fw-bold section-header mb-0">Цель отбора</h2>
        </div>
        <p class="fs-5">Целью данного отбора является выделение перспективных видов лекарственных растений, которые при осуществлении возможной поддержки могли бы эффективно приносить пользу заинтересованным сторонам. Отбор сделан с таких точек зрения, как:</p>
        <div class="row g-3 mt-2">
            <div class="col-md-6">
                <div class="d-flex gap-2"><i class="bi bi-shield-shaded fs-4" style="color:#2a8288;"></i><span><strong>Предотвращение вымирания</strong> лекарственных растений на месте естественного произрастания.</span></div>
            </div>
            <div class="col-md-6">
                <div class="d-flex gap-2"><i class="bi bi-graph-up-arrow fs-4" style="color:#2a8288;"></i><span><strong>Частная деятельность, экспорт</strong> и информация по спросу / потреблению.</span></div>
            </div>
            <div class="col-md-6">
                <div class="d-flex gap-2"><i class="bi bi-file-law fs-4" style="color:#2a8288;"></i><span><strong>Соблюдение законодательства</strong> о качестве сырья и безопасности продукции.</span></div>
            </div>
            <div class="col-md-6">
                <div class="d-flex gap-2"><i class="bi bi-building fs-4" style="color:#2a8288;"></i><span><strong>Реальные достижения</strong> исследовательских учреждений в разведении, обработке и инспекции качества.</span></div>
            </div>
        </div>
    </div>

    <!-- Методы отбора + изображение -->
    <div class="section-card p-4 p-lg-5" id="methods">
        <div class="d-flex align-items-center gap-2 mb-3">
            <div class="step-badge"><i class="bi bi-funnel-fill"></i></div>
            <h2 class="h3 fw-bold section-header mb-0">Методы отбора</h2>
        </div>
        <p>Мы выбрали <strong>5 видов лекарственных растений</strong> из <strong>70 самых известных</strong> в Таджикистане в настоящее время. (На основе данных, предоставленных Таджикским национальным университетом: приложение 1: список лекарственных растений Таджикистана).</p>
        <div class="alert rounded-4 border-0" style="background:#eef4ef; color:#23645f;">
            <i class="bi bi-info-circle-fill me-2" style="color:#2a8288;"></i> <strong>Примечание:</strong> В начале исследования официально признанными считались 65 видов, однако к настоящему моменту подтверждено существование 70 видов. Предполагается, что несколько видов могут быть прибавлены или вычеркнуты. Список закупаемых сырьевых растений СССР не изменился еще с советских времен.
        </div>
        <p>Правительственные органы, исследовательские структуры и центры народной медицины помогли подобрать по 10 видов растений (<strong>1 этап</strong>). Затем завершили отбор с учетом рекомендаций Министерства здравоохранения и импортируемых из РФ и других стран (<strong>2 этап</strong>).</p>
        
        <div class="row mt-4 justify-content-center">
            <div class="col-md-8">
               <img src="image.jpeg" style="display: block; width: 300px; margin: 0 auto; border: 1px solid black;" />
                <div class="text-center small mt-2" style="color:#487a75;">Рис. Процесс отбора: от 70 видов → 10 видов (1 этап) → финальные 5 видов (2 этап).</div>
            </div>
        </div>
        <hr class="my-4">
        <p><strong>В процессе отбора</strong> составили список, учитывая отбирателя/основания, сферу потребления, активный компонент, пути применения. Отобранные на 1 этапе виды (около 10 видов) представлены ниже.</p>
    </div>

    <!-- 1 этап: растения (около 10 видов) -->
    <div class="section-card p-4 p-lg-5" id="stage1">
        <div class="d-flex align-items-center gap-2 mb-3">
            <div class="step-badge">1</div>
            <h2 class="h3 fw-bold section-header mb-0">Этап 1. Первоначальный отбор</h2>
        </div>
        <p class="mb-2">Растения, отобранные на первом этапе (около 10 видов):</p>
        <div class="d-flex flex-wrap gap-2 mb-4">
            <span class="badge-plant"><i class="bi bi-flower1 me-1"></i>Дягиль</span>
            <span class="badge-plant"><i class="bi bi-flower1 me-1"></i>Барбарис</span>
            <span class="badge-plant"><i class="bi bi-flower1 me-1"></i>Пекан</span>
            <span class="badge-plant"><i class="bi bi-flower1 me-1"></i>Хвойник</span>
            <span class="badge-plant"><i class="bi bi-flower1 me-1"></i>Ферула</span>
            <span class="badge-plant"><i class="bi bi-flower1 me-1"></i>Солодка</span>
            <span class="badge-plant"><i class="bi bi-flower1 me-1"></i>Облепиха</span>
            <span class="badge-plant"><i class="bi bi-flower1 me-1"></i>Зверобой</span>
            <span class="badge-plant"><i class="bi bi-flower1 me-1"></i>Орех грецкий</span>
            <span class="badge-plant"><i class="bi bi-flower1 me-1"></i>Мелисса</span>
            <span class="badge-plant"><i class="bi bi-flower1 me-1"></i>Мята</span>
            <span class="badge-plant"><i class="bi bi-flower1 me-1"></i>Гармала</span>
            <span class="badge-plant"><i class="bi bi-flower1 me-1"></i>Герань</span>
            <span class="badge-plant"><i class="bi bi-flower1 me-1"></i>Миндаль</span>
            <span class="badge-plant"><i class="bi bi-flower1 me-1"></i>Шиповник</span>
        </div>
        <div class="text-note">
            <i class="bi bi-chat-right-quote fs-5 me-2"></i> Далее подробное объяснение по каждому виду, включая исключение миндаля из-за низкого лечебного эффекта.
        </div>
    </div>

    <!-- Анализ видов + детали по каждому растению (обновленные карточки) -->
    <div class="section-card p-4 p-lg-5" id="analysis">
        <div class="d-flex align-items-center gap-2 mb-4">
            <div class="step-badge"><i class="bi bi-pencil-square"></i></div>
            <h2 class="h3 fw-bold section-header mb-0">Обоснование выбора и исключения</h2>
        </div>
        <div class="row g-4">
            <div class="col-md-6">
                <div class="border rounded-4 p-3 h-100" style="background:#fafef7; border-left: 6px solid #92cfae !important;">
                    <i class="bi bi-star-fill me-1" style="color:#e8b340;"></i> <strong class="fs-5" style="color:#2a8288;">✓ Хвойник, ферула, солодка</strong>
                    <p class="mt-2 mb-0">Сильный лечебный эффект, знакомы с древности. Выращивание требует времени, но пробные посадки сделают их выгодными для производителя. <span class="fst-italic text-secondary">(для хвойника — строгие условия, но в Таджикистане подконтрольно)</span></p>
                </div>
            </div>
            <div class="col-md-6">
                <div class="border rounded-4 p-3 h-100" style="background:#fafef7; border-left: 6px solid #92cfae !important;">
                    <i class="bi bi-star-fill me-1" style="color:#e8b340;"></i> <strong class="fs-5" style="color:#2a8288;">✓ Облепиха</strong>
                    <p class="mt-2 mb-0">Расширяющийся круг потребителей, высокий спрос на масло и ягоды — перспективный рыночный потенциал.</p>
                </div>
            </div>
            <div class="col-md-6">
                <div class="border rounded-4 p-3 h-100" style="background:#fafef7; border-left: 6px solid #92cfae !important;">
                    <i class="bi bi-star-fill me-1" style="color:#e8b340;"></i> <strong class="fs-5" style="color:#2a8288;">✓ Зверобой</strong>
                    <p class="mt-2 mb-0">Неясности по сбыту, но за рубежом потребление растёт — возможны новые рынки.</p>
                </div>
            </div>
            <div class="col-md-6">
                <div class="border rounded-4 p-3 h-100" style="background:#fafef7; border-left: 6px solid #92cfae !important;">
                    <i class="bi bi-star-fill me-1" style="color:#e8b340;"></i> <strong class="fs-5" style="color:#2a8288;">✓ Мята и шиповник</strong>
                    <p class="mt-2 mb-0">Широко используются в Таджикистане, но ввозятся из РФ и Украины. Выращивание не требует особого труда, есть возможности расширения рынка.</p>
                </div>
            </div>
            <div class="col-md-6">
                <div class="border rounded-4 p-3 h-100" style="background:#fff5ed; border-left: 6px solid #d98e5e;">
                    <i class="bi bi-x-circle-fill text-danger me-1"></i> <strong>❌ Герань</strong>
                    <p class="mt-1 mb-0">Рекомендована Минздравом, но для рассады зимой нужны теплицы — герань не отвечает климату Таджикистана.</p>
                </div>
            </div>
            <div class="col-md-6">
                <div class="border rounded-4 p-3 h-100" style="background:#fff5ed; border-left: 6px solid #d98e5e;">
                    <i class="bi bi-exclamation-triangle-fill text-warning me-1"></i> <strong>⚠️ Гармала</strong>
                    <p class="mt-1 mb-0">Лечебный эффект неясен, побочное действие — галлюцинации, что ограничивает применение.</p>
                </div>
            </div>
        </div>
        <div class="alert mt-4 rounded-4 d-flex align-items-start gap-2" style="background: #e5f4ec; border-left: 5px solid #92cfae;">
            <i class="bi bi-tree fs-4" style="color:#2a8288;"></i>
            <div><strong>Региональные особенности:</strong> В каждом районе есть свои лекарственные растения. Если местные специалисты рекомендуют их для разведения и есть лечебное действие, возможно, необходимо рассмотреть новые виды.</div>
        </div>
    </div>

    <!-- Итоговый список (таблица 6-1) 5 видов -->
    <div class="section-card p-4 p-lg-5" id="final-list">
        <div class="d-flex align-items-center gap-2 mb-4">
            <div class="step-badge"><i class="bi bi-check2-square"></i></div>
            <h2 class="h3 fw-bold section-header mb-0">Финальный отбор (5 видов)</h2>
        </div>
        <p class="lead">На основании двухэтапного отбора, с учетом рекомендаций Министерства здравоохранения, фармпромышленности и анализа импорта, окончательно выбраны следующие лекарственные растения Таджикистана:</p>
        <div class="table-responsive mt-3">
            <table class="table table-hover align-middle border rounded-4 overflow-hidden">
                <thead style="background: #cbe6d8;">
                    <tr>
                        <th>Вид растения</th>
                        <th>Основание отбора</th>
                        <th>Примечания</th>
                    </tr>
                </thead>
                <tbody>
                    <tr><td><strong>Хвойник (Ephedra)</strong></td><td>Сильный лечебный эффект, древняя народная медицина, перспективен для производителя</td><td>Требует строгих температурных условий, но для Таджикистана контролируемо</td></tr>
                    <tr><td><strong>Ферула (Ferula)</strong></td><td>Выраженное терапевтическое действие, экспортный потенциал</td><td>Требует время на выращивание, технологии преодолимы</td></tr>
                    <tr><td><strong>Солодка (Glycyrrhiza)</strong></td><td>Известна с древности, высокий спрос, в т.ч. на мировом рынке</td><td>Выгодна для производителей при пробных посадках</td></tr>
                    <tr><td><strong>Облепиха (Hippophae)</strong></td><td>Расширяющийся круг потребителей, рыночная востребованность</td><td>Растение даёт масло, сок, витаминные сборы</td></tr>
                    <tr><td><strong>Мята / Шиповник</strong></td><td>Широкое локальное использование, замещение импорта</td><td>Выращивание нетрудоёмко, расширение рынка сбыта</td></tr>
                </tbody>
             </table>
        </div>
        <div class="text-note mt-3">
            <i class="bi bi-clipboard-data me-2"></i> <strong>Примечание:</strong> Зверобой также перспективен из-за растущего зарубежного потребления, но финальная пятёрка базируется на интегрированных критериях. Миндаль исключён (низкий лечебный эффект), герань — климатические ограничения, гармала — побочные эффекты.
        </div>
    </div>

    <!-- Дополнительные блоки с новой палитрой -->
    <div class="row g-4 mt-2 mb-4">
        <div class="col-md-6">
            <div class="bg-white rounded-4 p-4 h-100 shadow-sm" style="border-top: 4px solid #92cfae;">
                <i class="bi bi-building fs-3" style="color:#2a8288;"></i>
                <h4 class="h5 fw-bold mt-2">Агентство лесного и охотничьего хозяйства</h4>
                <p>В ведомстве не ведется полный учёт выращивания именно 70 видов, однако традиционное использование растений сохранилось, и список из приложения 1 основан на богатом опыте.</p>
            </div>
        </div>
        <div class="col-md-6">
            <div class="bg-white rounded-4 p-4 h-100 shadow-sm" style="border-top: 4px solid #92cfae;">
                <i class="bi bi-journal-bookmark-fill fs-3" style="color:#2a8288;"></i>
                <h4 class="h5 fw-bold mt-2">Роль исследовательских учреждений</h4>
                <p>Таджикский национальный университет, центры народной медицины и Минздрав предоставили базу для отбора. Сравнение с импортом из РФ помогло выделить локализацию производства.</p>
            </div>
        </div>
    </div>

    <footer class="rounded-4 mt-4 p-4 text-center">
        <p class="mb-1"><i class="bi bi-flower2"></i> Отбор лекарственных растений Таджикистана — устойчивое развитие и сохранение биоразнообразия</p>
        <small>Данные предоставлены Таджикским национальным университетом и Министерством здравоохранения РТ.<br>Таблица 6-1: Итоговый список отобранных лекарственных растений.</small>
        <div class="mt-2">
            <span class="badge bg-opacity-25 px-3 py-2 rounded-pill" style="background:#92cfae; color:#1d5f5b;">#этнофармакология</span>
            <span class="badge bg-opacity-25 px-3 py-2 rounded-pill ms-1" style="background:#92cfae; color:#1d5f5b;">#Tajikistan</span>
        </div>
    </footer>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
<script>
    document.querySelectorAll('.nav-link, .btn-light, .btn-outline-custom, .btn-custom-primary').forEach(anchor => {
        anchor.addEventListener('click', function(e) {
            const hash = this.getAttribute('href');
            if (hash && hash.startsWith('#') && hash !== '#') {
                e.preventDefault();
                const target = document.querySelector(hash);
                if (target) target.scrollIntoView({ behavior: 'smooth', block: 'start' });
            }
        });
    });
</script>
</body>
</html>