3 days ago

<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Инфографика: Экспертиза смет для бюджетных объектов</title> <script src="https://cdn.tailwindcss.com"></script> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet"> <style> body { font-family: 'Montserrat', sans-serif; } .process-step { position: relative; padding-bottom: 2rem; padding-left: 2.5rem; border-left: 3px solid #7a5195; } .process-step:last-child { border-left: none; } .process-step::before { content: attr(data-step); position: absolute; left: -1.25rem; top: -0.5rem; width: 2.5rem; height: 2.5rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; color: white; } .table-header { position: sticky; top: 0; z-index: 10; } </style> <!-- Narrative Plan: 1. Introduction: Hook with a key question about the 10M ruble threshold. 2. Two Paths: Side-by-side overview of State vs. Non-State expertise. 3. Mandatory State Expertise: A clear decision flowchart showing the main triggers. 4. When Non-State is an Option: Highlighting scenarios for flexibility. 5. Comparative Analysis: A Radar chart to visually compare key metrics. 6. Process Flow: A step-by-step visualization of the expertise procedure. 7. Key Trends & Risks: A balanced view of the evolving landscape. 8. Detailed Tables: Presenting the core legal information from the report in a clear, accessible format. 9. Conclusion: Summarizing key takeaways. Visualization Choices (NO SVG, NO MERMAID JS): - Key Stat (10M Ruble Rule): Goal: Inform. Method: Large, bold HTML text. - Mandatory Expertise Flowchart: Goal: Organize. Method: HTML/CSS with Tailwind Flexbox/Grid. - State vs. Non-State Comparison: Goal: Compare. Method: Radar Chart using Chart.js (Canvas). - Process Flow: Goal: Organize. Method: HTML/CSS vertical timeline. - Tables: Goal: Organize/Reference. Method: Styled HTML tables. Color Palette: Brilliant Blues (#003f5c, #374c80, #7a5195, #bc5090, #ef5675, #ff764a, #ffa600). --> </head> <body class="bg-slate-50 text-gray-800"> <div class="container mx-auto p-4 md:p-8 max-w-7xl"> <header class="text-center py-8"> <h1 class="text-4xl md:text-5xl font-extrabold text-[#003f5c]">Экспертиза смет для бюджетных объектов</h1> <p class="text-xl md:text-2xl text-gray-600 mt-4">Государственная или Негосударственная: ключевые различия и правила выбора</p> </header> <main class="space-y-12"> <section id="intro" class="bg-white rounded-2xl shadow-lg p-8 ring-1 ring-slate-200"> <div class="text-center"> <p class="text-xl text-gray-700">Стоимость капитального ремонта вашего бюджетного объекта превышает</p> <div class="my-4 text-6xl md:text-8xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-[#bc5090] to-[#ff764a]"> 10 млн ₽ </div> <p class="text-xl text-gray-700">Согласно <span class="font-semibold text-[#003f5c]">ч. 2 ст. 8.3 ГрК РФ</span>, это ключевой порог, который определяет необходимость проведения <span class="font-semibold">обязательной государственной экспертизы</span> достоверности сметной стоимости. Понимание этого и других правил критически важно для законного и эффективного расходования бюджетных средств.</p> </div> </section> <section id="two-paths"> <div class="grid md:grid-cols-2 gap-8"> <div class="bg-white rounded-2xl shadow-lg p-8 ring-1 ring-slate-200"> <h3 class="text-3xl font-bold text-center text-[#374c80] mb-4">Государственная экспертиза</h3> <p class="text-gray-600">Обязательная процедура для установленного законом перечня объектов, финансируемых из бюджета. Проводится уполномоченными государственными учреждениями (ФАУ "Главгосэкспертиза России" и региональные органы). Основная цель — проверка достоверности определения сметной стоимости и соответствия государственным нормативам и стандартам безопасности.</p> </div> <div class="bg-white rounded-2xl shadow-lg p-8 ring-1 ring-slate-200"> <h3 class="text-3xl font-bold text-center text-[#7a5195] mb-4">Негосударственная экспертиза</h3> <p class="text-gray-600">Проводится аккредитованными юридическими лицами. Может быть выбрана заказчиком в случаях, когда государственная экспертиза не является обязательной. Часто используется для оптимизации смет, подготовки к гоЭспертизе или для внутренних аудитов. Юридически равнозначна государственной в допустимых законом случаях.</p> </div> </div> </section> <section id="mandatory-state" class="bg-white rounded-2xl shadow-lg p-8 ring-1 ring-slate-200"> <h2 class="text-3xl font-bold text-center text-[#003f5c] mb-6">Когда государственная экспертиза обязательна?</h2> <p class="text-center text-gray-600 mb-8 max-w-3xl mx-auto">Эта простая схема поможет определить, требуется ли вашему проекту обязательная государственная проверка достоверности сметной стоимости. Ответьте на два ключевых вопроса.</p> <div class="max-w-3xl mx-auto space-y-6"> <div class="bg-blue-50 border-l-4 border-[#374c80] p-6 rounded-r-lg shadow-sm"> <h4 class="font-bold text-lg text-[#374c80]">Шаг 1: Проверка по особому перечню</h4> <p class="mt-2 text-gray-700">Относится ли объект к перечню **ч. 3.4 ст. 49 ГрК РФ** (опасные, технически сложные, объекты обороны и т.д.)?</p> <div class="mt-4 p-4 bg-red-100 border border-red-200 rounded-lg"> <p class="font-bold text-red-700">➜ Если ДА</p> <p class="mt-1 text-red-800">Обязательна государственная экспертиза. Дальнейшая проверка не требуется.</p> </div> </div> <div class="text-center font-bold text-gray-500">▼ ЕСЛИ НА ШАГЕ 1 ПОЛУЧЕН ОТВЕТ "НЕТ" ▼</div> <div class="bg-purple-50 border-l-4 border-[#7a5195] p-6 rounded-r-lg shadow-sm"> <h4 class="font-bold text-lg text-[#7a5195]">Шаг 2: Проверка по стоимости капремонта</h4> <p class="mt-2 text-gray-700">Это капитальный ремонт с бюджетным финансированием и его сметная стоимость **превышает 10 млн рублей**?</p> <div class="mt-4 grid grid-cols-1 md:grid-cols-2 gap-4"> <div class="bg-red-100 border border-red-200 p-4 rounded-lg"> <p class="font-bold text-red-700">➜ ДА</p> <p class="mt-1 text-red-800">Обязательна государственная экспертиза.</p> </div> <div class="bg-green-100 border border-green-200 p-4 rounded-lg"> <p class="font-bold text-green-700">➜ НЕТ</p> <p class="mt-1 text-green-800">Можно выбрать негосударственную экспертизу.</p> </div> </div> </div> </div> </section> <section id="non-state-cases" class="bg-white rounded-2xl shadow-lg p-8 ring-1 ring-slate-200"> <h2 class="text-3xl font-bold text-center text-[#7a5195] mb-6">Когда возможна негосударственная экспертиза?</h2> <p class="text-center text-gray-600 mb-8 max-w-3xl mx-auto">Негосударственная экспертиза предоставляет гибкость и скорость. Для бюджетных объектов она допустима в следующих основных случаях, когда нет прямых законодательных требований об обязательной государственной проверке.</p> <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6"> <div class="bg-purple-50 p-6 rounded-lg border border-purple-200"> <h4 class="font-bold text-lg text-[#7a5195]">✅ Малый объем работ</h4> <p class="text-gray-700 mt-2">Сметная стоимость капитального ремонта, финансируемого из бюджета, **не превышает 10 млн рублей**.</p> </div> <div class="bg-purple-50 p-6 rounded-lg border border-purple-200"> <h4 class="font-bold text-lg text-[#7a5195]">✅ Добровольная проверка</h4> <p class="text-gray-700 mt-2">Заказчик по собственной инициативе решает проверить смету для внутреннего аудита, даже если экспертиза не обязательна по закону.</p> </div> <div class="bg-purple-50 p-6 rounded-lg border border-purple-200"> <h4 class="font-bold text-lg text-[#7a5195]">✅ Подготовка к госэкспертизе</h4> <p class="text-gray-700 mt-2">Предварительная негосударственная проверка для выявления и устранения ошибок перед подачей документов в государственные органы.</p> </div> <div class="bg-purple-50 p-6 rounded-lg border border-purple-200"> <h4 class="font-bold text-lg text-[#7a5195]">✅ Нет в "особом" списке</h4> <p class="text-gray-700 mt-2">Объект не относится к категориям, для которых госэкспертиза является безальтернативной (не входит в перечень ч. 3.4 ст. 49 ГрК РФ).</p> </div> <div class="bg-purple-50 p-6 rounded-lg border border-purple-200"> <h4 class="font-bold text-lg text-[#7a5195]">✅ Право выбора</h4> <p class="text-gray-700 mt-2">Закон требует экспертизу, но не указывает ее вид, давая застройщику право выбора между государственной и негосударственной.</p> </div> <div class="bg-purple-50 p-6 rounded-lg border border-purple-200"> <h4 class="font-bold text-lg text-[#7a5195]">✅ Экспертное сопровождение</h4> <p class="text-gray-700 mt-2">В рамках договора на экспертное сопровождение проекта, которое могут оказывать аккредитованные негосударственные организации.</p> </div> </div> </section> <section id="comparison" class="bg-white rounded-2xl shadow-lg p-8 ring-1 ring-slate-200"> <h2 class="text-3xl font-bold text-center text-[#003f5c] mb-6">Сравнительный анализ: что выбрать?</h2> <p class="text-center text-gray-600 mb-8 max-w-3xl mx-auto">Эта диаграмма наглядно сравнивает государственную и негосударственную экспертизу по ключевым параметрам. Оценка дана по 5-балльной шкале, где 5 — максимальный показатель (лучше для заказчика).</p> <div class="chart-container relative h-96 md:h-[500px] w-full max-w-2xl mx-auto"> <canvas id="comparisonRadarChart"></canvas> </div> </section> <section id="process" class="bg-white rounded-2xl shadow-lg p-8 ring-1 ring-slate-200"> <h2 class="text-3xl font-bold text-center text-[#003f5c] mb-6">Процесс экспертизы: шаг за шагом</h2> <p class="text-center text-gray-600 mb-8 max-w-3xl mx-auto">Хотя процедуры могут незначительно отличаться, основной алгоритм проведения экспертизы сметной документации (как государственной, так и негосударственной) включает следующие этапы.</p> <div class="max-w-3xl mx-auto"> <div class="process-step" data-step="1" style="--tw-border-opacity: 1; border-left-color: rgba(122, 81, 149, var(--tw-border-opacity));"> <h4 class="font-bold text-lg text-[#7a5195] -mt-2">Подача документов</h4> <p class="text-gray-600">Заказчик формирует комплект документов (заявление, проектная документация, задание на проектирование и др.) и подает его в экспертную организацию.</p> </div> <div class="process-step" data-step="2" style="--tw-border-opacity: 1; border-left-color: rgba(188, 80, 144, var(--tw-border-opacity));"> <h4 class="font-bold text-lg text-[#bc5090] -mt-2">Проверка и анализ</h4> <p class="text-gray-600">Эксперты проводят детальный анализ смет на соответствие нормативам, правильность расценок, объемов работ и т.д.</p> </div> <div class="process-step" data-step="3" style="--tw-border-opacity: 1; border-left-color: rgba(239, 86, 117, var(--tw-border-opacity));"> <h4 class="font-bold text-lg text-[#ef5675] -mt-2">Формирование замечаний</h4> <p class="text-gray-600">В случае выявления ошибок или несоответствий, формируется перечень замечаний, который направляется заказчику.</p> </div> <div class="process-step" data-step="4" style="--tw-border-opacity: 1; border-left-color: rgba(255, 118, 74, var(--tw-border-opacity));"> <h4 class="font-bold text-lg text-[#ff764a] -mt-2">Устранение замечаний</h4> <p class="text-gray-600">Заказчик (или проектировщик) вносит исправления в сметную документацию и направляет ее на повторную проверку.</p> </div> <div class="process-step" data-step="5" style="--tw-border-opacity: 1; border-left-color: rgba(255, 166, 0, var(--tw-border-opacity));"> <h4 class="font-bold text-lg text-[#ffa600] -mt-2">Выдача заключения</h4> <p class="text-gray-600">После устранения всех замечаний экспертная организация оформляет и выдает итоговое заключение (положительное или отрицательное).</p> </div> </div> </section> <section id="tables" class="bg-white rounded-2xl shadow-lg p-8 ring-1 ring-slate-200"> <h2 class="text-3xl font-bold text-center text-[#003f5c] mb-8">Справочные таблицы по законодательству</h2> <div class="space-y-10"> <div> <h3 class="text-2xl font-bold text-[#374c80] mb-4">Таблица 1: Объекты обязательной государственной экспертизы</h3> <p class="text-gray-600 mb-4">Ключевые случаи, когда для бюджетных объектов требуется именно государственная экспертиза проектной документации и результатов инженерных изысканий.</p> <div class="overflow-x-auto rounded-lg border"> <table class="w-full text-sm text-left text-gray-500"> <thead class="text-xs text-gray-700 uppercase bg-gray-100 table-header"> <tr> <th scope="col" class="px-6 py-3">Категория объекта</th> <th scope="col" class="px-6 py-3">Примеры</th> <th scope="col" class="px-6 py-3">Основание</th> </tr> </thead> <tbody> <tr class="bg-white border-b"> <td class="px-6 py-4 font-medium text-gray-900">Объекты из ч. 3.4 ст. 49 ГрК РФ</td> <td class="px-6 py-4">ОПО, технически сложные, объекты обороны, ОКН фед. значения, дороги фед. значения</td> <td class="px-6 py-4">ч. 3.4 ст. 49 ГрК РФ</td> </tr> <tr class="bg-gray-50 border-b"> <td class="px-6 py-4 font-medium text-gray-900">Объекты со сметной стоимостью > 10 млн ₽</td> <td class="px-6 py-4">Капитальный ремонт, финансируемый из бюджета или средств ФКР</td> <td class="px-6 py-4">ч. 2 ст. 8.3 ГрК РФ</td> </tr> <tr class="bg-white border-b"> <td class="px-6 py-4 font-medium text-gray-900">Объекты с финансированием из фед. бюджета</td> <td class="px-6 py-4">Строительство, реконструкция, снос, сохранение ОКН</td> <td class="px-6 py-4">пп. "б" п. 2 Пост. № 145</td> </tr> <tr class="bg-gray-50"> <td class="px-6 py-4 font-medium text-gray-900">Объекты, строящиеся госкомпаниями</td> <td class="px-6 py-4">Объекты, где доля гос. (муниц.) участия в УК > 50%</td> <td class="px-6 py-4">пп. "б" п. 2 Пост. № 145</td> </tr> </tbody> </table> </div> </div> <div> <h3 class="text-2xl font-bold text-[#7a5195] mb-4">Таблица 2: Сравнительная характеристика экспертиз</h3> <p class="text-gray-600 mb-4">Ключевые отличия государственной и негосударственной экспертизы для бюджетных проектов.</p> <div class="overflow-x-auto rounded-lg border"> <table class="w-full text-sm text-left text-gray-500"> <thead class="text-xs text-gray-700 uppercase bg-gray-100 table-header"> <tr> <th scope="col" class="px-6 py-3">Критерий</th> <th scope="col" class="px-6 py-3">Государственная экспертиза</th> <th scope="col" class="px-6 py-3">Негосударственная экспертиза</th> </tr> </thead> <tbody> <tr class="bg-white border-b"> <td class="px-6 py-4 font-medium text-gray-900">Сроки</td> <td class="px-6 py-4">До 60 дней, регламентированы</td> <td class="px-6 py-4">Договорные, обычно короче (от 8-15 дней)</td> </tr> <tr class="bg-gray-50 border-b"> <td class="px-6 py-4 font-medium text-gray-900">Стоимость</td> <td class="px-6 py-4">По установленным тарифам</td> <td class="px-6 py-4">Договорная, часто ниже</td> </tr> <tr class="bg-white border-b"> <td class="px-6 py-4 font-medium text-gray-900">Гибкость</td> <td class="px-6 py-4">Низкая, строгий регламент</td> <td class="px-6 py-4">Высокая, определяется договором</td> </tr> <tr class="bg-gray-50"> <td class="px-6 py-4 font-medium text-gray-900">Главный риск</td> <td class="px-6 py-4">Длительные сроки, бюрократия</td> <td class="px-6 py-4">Выбор недобросовестной организации, юридические ошибки</td> </tr> </tbody> </table> </div> </div> </div> </section> <section id="trends-risks" class="bg-white rounded-2xl shadow-lg p-8 ring-1 ring-slate-200"> <h2 class="text-3xl font-bold text-center text-[#003f5c] mb-8">Тренды и риски в сфере экспертизы</h2> <div class="grid md:grid-cols-2 gap-8"> <div> <h3 class="text-2xl font-bold text-emerald-600 mb-4">Основные тренды</h3> <ul class="space-y-3"> <li class="flex items-start"> <span class="text-emerald-500 text-2xl mr-3"></span> <div><span class="font-semibold">Цифровизация:</span> Внедрение электронного взаимодействия и Единого госреестра заключений (ЕГРЗ) для повышения прозрачности.</div> </li> <li class="flex items-start"> <span class="text-emerald-500 text-2xl mr-3"></span> <div><span class="font-semibold">Упрощение процедур:</span> Сокращение сроков экспертизы для нацпроектов и упрощение замены стройматериалов на аналоги.</div> </li> <li class="flex items-start"> <span class="text-emerald-500 text-2xl mr-3"></span> <div><span class="font-semibold">Развитие экспертного сопровождения:</span> Позволяет оперативно вносить изменения в проект на всех этапах его реализации.</div> </li> </ul> </div> <div> <h3 class="text-2xl font-bold text-rose-600 mb-4">Потенциальные риски</h3> <ul class="space-y-3"> <li class="flex items-start"> <span class="text-rose-500 text-2xl mr-3"></span> <div><span class="font-semibold">Юридические коллизии:</span> Разъяснения Минстроя (о замене ресурсов) могут вступать в противоречие с нормами 44-ФЗ.</div> </li> <li class="flex items-start"> <span class="text-rose-500 text-2xl mr-3"></span> <div><span class="font-semibold">Повышение ответственности:</span> Упрощения, такие как замена ресурсов без экспертизы, переносят ответственность на Главного инженера проекта (ГИП) и заказчика.</div> </li> <li class="flex items-start"> <span class="text-rose-500 text-2xl mr-3"></span> <div><span class="font-semibold">Неверный выбор экспертизы:</span> Проведение негосударственной экспертизы там, где обязательна государственная, ведет к недействительности заключения.</div> </li> </ul> </div> </div> </section> </main> </div> <script> function wrapLabel(str, maxwidth) { if (typeof str !== 'string' || str.length <= maxwidth) { return str; } const words = str.split(' '); let a = []; let temp = ''; words.forEach(function(s) { if (temp.length > 0) { let t = temp + ' ' + s; if (t.length > maxwidth) { a.push(temp); temp = s; } else { temp = t; } } else { temp = s; } }); a.push(temp); return a; } const tooltipTitleCallback = (tooltipItems) => { const item = tooltipItems[0]; if (!item) return ''; let label = item.chart.data.labels[item.dataIndex]; return Array.isArray(label) ? label.join(' ') : label; }; const radarChartCtx = document.getElementById('comparisonRadarChart'); if (radarChartCtx) { new Chart(radarChartCtx, { type: 'radar', data: { labels: [ 'Скорость', 'Стоимость', 'Гибкость', 'Юридический авторитет', 'Клиентоориентированность' ], datasets: [{ label: 'Государственная экспертиза', data: [2, 2, 1, 5, 2], fill: true, backgroundColor: 'rgba(55, 76, 128, 0.2)', borderColor: 'rgb(55, 76, 128)', pointBackgroundColor: 'rgb(55, 76, 128)', pointBorderColor: '#fff', pointHoverBackgroundColor: '#fff', pointHoverBorderColor: 'rgb(55, 76, 128)' }, { label: 'Негосударственная экспертиза', data: [5, 4, 5, 3, 5], fill: true, backgroundColor: 'rgba(122, 81, 149, 0.2)', borderColor: 'rgb(122, 81, 149)', pointBackgroundColor: 'rgb(122, 81, 149)', pointBorderColor: '#fff', pointHoverBackgroundColor: '#fff', pointHoverBorderColor: 'rgb(122, 81, 149)' }] }, options: { responsive: true, maintainAspectRatio: false, scales: { r: { angleLines: { color: 'rgba(0, 0, 0, 0.1)' }, grid: { color: 'rgba(0, 0, 0, 0.1)' }, pointLabels: { font: { size: 12, weight: '500' }, color: '#003f5c' }, ticks: { backdropColor: 'rgba(255, 255, 255, 0.75)', stepSize: 1, max: 5, min: 0 } } }, plugins: { legend: { position: 'top', }, tooltip: { callbacks: { title: tooltipTitleCallback } } } } }); } document.querySelectorAll('.process-step').forEach((step, index) => { const colors = ['#7a5195', '#bc5090', '#ef5675', '#ff764a', '#ffa600']; const color = colors[index % colors.length]; step.style.borderColor = color; const beforeStyle = document.createElement('style'); beforeStyle.innerHTML = ` .process-step[data-step="${index + 1}"]::before { background-color: ${color}; border: 3px solid ${color}; } `; document.head.appendChild(beforeStyle); }); </script> </body> </html>

Fork

Windframe is a drag and drop builder for rapidly building tailwind css websites and UIs

Start building stunning tailwind UIs! 

Build from scratch or select prebuilt tailwind templates