contract.html - master - AnAb/Collocation

contract.html
620 строк29 KB
AnAb
Create: templates.html, requirements.html, investor.html, businessplan.html, index.html, contract.html, tariffs.html, substations.html, README.md, documents.html, risks.html, business-plan.html, roadmap.html, glossary.html, pricing.html
28 июл 2026, 10:39
Верифицирован
28 июл 2026, 10:39533865d
<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Правовая конструкция | ЦОД категории III на 120 стоек</title>

  <style>
    *{margin:0;padding:0;box-sizing:border-box}

    :root{
      --primary-color:#1a237e;
      --secondary-color:#3949ab;
      --accent-color:#00acc1;
      --text-light:#ffffff;
      --bg:#0a0e27;
      --bg-card: rgba(22,27,34,0.78);
      --bg-soft: rgba(13,17,23,0.42);
      --border: rgba(255,255,255,0.10);
      --border-2: rgba(255,255,255,0.08);
      --shadow: 0 18px 40px rgba(0,0,0,0.35);
      --gradient-2: linear-gradient(135deg,#00acc1 0%,#26c6da 100%);
      --warn: rgba(255,193,7,0.18);
      --ok: rgba(0,172,193,0.14);
      --danger: rgba(244,67,54,0.16);
    }

    body{
      font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,sans-serif;
      background: var(--bg);
      color: var(--text-light);
      overflow-x:hidden;
      line-height:1.65;
    }

    /* Фон */
    .bg-animation{position:fixed;inset:0;z-index:-1;background:linear-gradient(to bottom,#0a0e27 0%,#1a237e 100%);overflow:hidden}
    .bg-animation::before{
      content:"";position:absolute;width:150%;height:150%;
      background:
        radial-gradient(circle at 20% 80%, rgba(0, 172, 193, 0.28) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(57, 73, 171, 0.28) 0%, transparent 50%),
        radial-gradient(circle at 40% 40%, rgba(26, 35, 126, 0.26) 0%, transparent 50%);
      animation: float 18s ease-in-out infinite;
    }
    @keyframes float{
      0%,100%{transform:translate(0,0) rotate(0deg)}
      33%{transform:translate(-28px,-28px) rotate(120deg)}
      66%{transform:translate(28px,-18px) rotate(240deg)}
    }

    header{
      padding: 60px 20px;
      text-align:center;
      background: rgba(26, 35, 126, 0.10);
      backdrop-filter: blur(12px);
      border-bottom: 1px solid var(--border);
    }
    header h1{
      font-size: clamp(2rem, 4.6vw, 3.1rem);
      font-weight: 900;
      margin-bottom: 14px;
      background: linear-gradient(135deg,#ffffff 0%,#00acc1 100%);
      -webkit-background-clip:text;
      -webkit-text-fill-color:transparent;
      background-clip:text;
      text-shadow: 0 2px 20px rgba(0,172,193,0.25);
    }
    header p{
      max-width: 1120px;
      margin: 0 auto;
      opacity: 0.92;
      font-size: 1.05rem;
      line-height: 1.85;
    }

    main{max-width:1200px;margin:0 auto;padding:56px 20px 90px}

    .section{
      background: var(--bg-card);
      backdrop-filter: blur(18px);
      border: 1px solid var(--border);
      border-radius: 20px;
      box-shadow: var(--shadow);
      padding: 34px;
      margin-bottom: 18px;
    }
    .section h2{
      color: var(--accent-color);
      font-size: 1.55rem;
      margin-bottom: 10px;
      font-weight: 900;
    }
    .lead{opacity:0.90;font-size:1.02rem;line-height:1.85}

    .pill{
      display:inline-flex;align-items:center;gap:8px;
      padding:6px 10px;border-radius:999px;
      border:1px solid rgba(255,255,255,0.12);
      background: rgba(13,17,23,0.35);
      font-size:0.9rem;margin-bottom:10px;
    }
    .dot{
      width:9px;height:9px;border-radius:50%;
      background: var(--accent-color);
      box-shadow: 0 0 0 4px rgba(0,172,193,0.14);
    }

    .note{
      margin-top:16px;
      padding:16px 16px;
      border-radius:16px;
      border:1px solid rgba(0,172,193,0.28);
      background: linear-gradient(135deg, rgba(0,172,193,0.10) 0%, rgba(57,73,171,0.10) 100%);
      opacity:0.96;
      line-height:1.75;
    }

    .grid{
      margin-top:16px;
      display:grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap:12px;
    }
    .card{
      background: var(--bg-soft);
      border: 1px solid var(--border-2);
      border-radius: 18px;
      padding: 16px 16px;
      position: relative;
      overflow:hidden;
    }
    .card::before{
      content:"";
      position:absolute;inset:0;
      background: radial-gradient(circle at 20% 20%, rgba(0,172,193,0.12), transparent 55%);
      pointer-events:none;
      opacity:.9;
    }
    .card > *{position:relative;z-index:1}
    .card b{display:block;font-size:1.03rem;margin-bottom:6px}
    .card p{opacity:.88;font-size:.95rem;line-height:1.65}
    .list{margin-top:10px;padding-left:18px;opacity:.92;font-size:.95rem;line-height:1.65}
    .list li{margin:6px 0}

    /* Таблицы */
    .table-wrap{
      overflow:auto;
      border-radius: 16px;
      border: 1px solid rgba(255,255,255,0.10);
      background: rgba(13,17,23,0.35);
      margin-top: 14px;
    }
    table{
      width:100%;
      border-collapse: collapse;
      min-width: 1060px;
    }
    th, td{
      padding: 12px 12px;
      border-bottom: 1px solid rgba(255,255,255,0.08);
      vertical-align: top;
      text-align:left;
      font-size: 0.95rem;
      line-height:1.55;
    }
    th{
      position: sticky;
      top:0;
      background: rgba(22,27,34,0.85);
      backdrop-filter: blur(10px);
      font-weight: 900;
    }
    td small{display:block;opacity:.85;margin-top:6px}

    /* “Рамка” под договорные приложения */
    .apps{
      margin-top: 14px;
      border-radius: 18px;
      border: 1px solid rgba(255,255,255,0.10);
      background: rgba(13,17,23,0.38);
      overflow:hidden;
    }
    .apps .head{
      padding: 14px 16px;
      background: rgba(22,27,34,0.68);
      border-bottom: 1px solid rgba(255,255,255,0.08);
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      align-items:center;
      justify-content:space-between;
    }
    .apps .head b{font-size:1.02rem}
    .apps .body{padding: 12px 16px}
    .app{
      padding: 10px 0;
      border-bottom: 1px solid rgba(255,255,255,0.08);
      display:grid;
      grid-template-columns: 70px 1fr;
      gap: 12px;
      align-items:flex-start;
    }
    .app:last-child{border-bottom:none}
    .tag{
      width:70px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      border-radius: 999px;
      background: rgba(0,172,193,0.10);
      border: 1px solid rgba(0,172,193,0.24);
      font-weight: 900;
      font-size: 0.85rem;
      padding: 8px 10px;
      white-space:nowrap;
    }
    .app strong{display:block}
    .app span{display:block;opacity:.88;font-size:.94rem;line-height:1.55;margin-top:3px}

    /* Навигация */
    .actions{
      margin-top: 18px;
      display:flex;
      flex-wrap:wrap;
      gap: 12px;
      align-items:center;
    }
    .btn{
      display:inline-flex;align-items:center;gap:10px;
      padding: 14px 18px;border-radius: 999px;
      text-decoration:none;color:#fff;font-weight: 900;
      background: var(--gradient-2);
      box-shadow: 0 10px 25px rgba(0,172,193,0.18);
      border:none;cursor:pointer;
    }
    .btn.secondary{
      background: rgba(13,17,23,0.45);
      border: 1px solid rgba(255,255,255,0.12);
      box-shadow:none;
      font-weight: 800;
      opacity: 0.92;
    }

    /* Плавающие кнопки */
    .fab{
      position: fixed;
      right: max(14px, env(safe-area-inset-right));
      width: 56px; height: 56px;
      border-radius: 50%;
      display:grid; place-items:center;
      background: linear-gradient(135deg, var(--accent-color), var(--secondary-color));
      color:#fff;
      text-decoration:none;
      box-shadow: 0 10px 25px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.08) inset;
      z-index:10000;border:none;cursor:pointer;
      transition: transform .2s ease, opacity .2s ease;
    }
    .fab:hover{ transform: translateY(-2px) scale(1.03); }
    .fab svg{ width:26px;height:26px;pointer-events:none; }
    #fab-top{
      bottom: calc(24px + env(safe-area-inset-bottom));
      opacity:0; pointer-events:none;
      transform: translateY(8px) scale(.9);
    }
    #fab-top.show{opacity:1;pointer-events:auto;transform: translateY(0) scale(1)}
    #fab-home{ bottom: calc(92px + env(safe-area-inset-bottom)); }

    footer{
      text-align:center;
      padding: 36px 20px;
      border-top: 1px solid var(--border);
      background: rgba(13,17,23,0.70);
      backdrop-filter: blur(18px);
      opacity:0.8;
    }
    @media (max-width: 768px){
      header{ padding: 46px 20px; }
      .section{ padding: 24px; }
      table{min-width: 980px;}
    }
  </style>
</head>

<body>
  <div class="bg-animation" aria-hidden="true"></div>

  <header>
    <h1>Правовая конструкция</h1>
    <p>
      Раздел описывает, <b>как юридически оформить</b> новую нетарифную услугу и инвестиционное партнёрство так,
      чтобы: 1) услуга была “продаваемой”; 2) режим объекта был соблюдён; 3) ответственность сторон была ясной;
      4) денежный поток проекта был защищён. Все положения ориентированы на ЦОД категории III на <b>120 стоек</b>.
    </p>
  </header>

  <main>
    <section class="section">
      <h2>1) Базовый принцип: один продукт — один набор правил</h2>
      <p class="lead">
        Главная причина конфликтов — несоответствие ожиданий клиента и реального режима объекта.
        Поэтому правовая конструкция строится так, чтобы коммерческая часть (тарифы) и эксплуатационная часть (регламенты)
        были единым продуктом: <b>что продаём — то и обеспечиваем</b>.
      </p>

      <div class="grid">
        <div class="card">
          <b>Что продаём</b>
          <p>Размещение оборудования и использование инженерной инфраструктуры: питание, охлаждение, безопасность, доступ.</p>
          <ul class="list">
            <li>Пакет “стойко-место”</li>
            <li>Опции по заявкам</li>
          </ul>
        </div>
        <div class="card">
          <b>Что фиксируем</b>
          <p>Параметры услуги, лимиты, регламенты доступа, окна работ, ответственность, порядок оплаты.</p>
          <ul class="list">
            <li>Приложения к договору</li>
            <li>Регламенты эксплуатации</li>
          </ul>
        </div>
        <div class="card">
          <b>Что защищаем</b>
          <p>Денежный поток: исключаем “серые зоны”, снижаем риск простоев и спорности с клиентами.</p>
          <ul class="list">
            <li>Чёткая граница ответственности</li>
            <li>Процедуры инцидентов</li>
          </ul>
        </div>
      </div>

      <div class="note">
        <div class="pill"><span class="dot"></span><b>Ключевая мысль для руководства</b></div>
        Договор и регламенты — это часть инженерной надёжности. Если нет чётких правил по мощности, доступу и работам —
        “категория III” перестаёт быть управляемой в реальной эксплуатации.
      </div>
    </section>

    <section class="section">
      <h2>2) Договор с клиентом: структура и смысл</h2>
      <p class="lead">
        Клиентский договор должен быть простым по смыслу, но “закрывать” все спорные зоны.
        Ниже — рекомендуемая структура: что в основном тексте, что в приложениях.
      </p>

      <div class="table-wrap" role="region" aria-label="Структура договора с клиентом" tabindex="0">
        <table>
          <thead>
            <tr>
              <th style="width:260px;">Раздел</th>
              <th>Содержание</th>
              <th style="width:330px;">Зачем это нужно</th>
              <th style="width:240px;">Где фиксировать</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td><b>Предмет</b></td>
              <td>Размещение оборудования клиента в ЦОД и предоставление доступа к инженерной инфраструктуре и сервисам эксплуатации.</td>
              <td>Убирает “аренду помещения” и спорные трактовки. Продукт = услуга.</td>
              <td>Основной текст.</td>
            </tr>
            <tr>
              <td><b>Параметры услуги</b></td>
              <td>Количество стойко-мест, лимит мощности, режим доступа, перечень базовых услуг.</td>
              <td>Фиксирует “что покупается” и что считается нарушением/доп.оплатой.</td>
              <td>Приложение №1.</td>
            </tr>
            <tr>
              <td><b>Порядок доступа и работ</b></td>
              <td>Допуск персонала клиента, сопровождение, окна работ, заявки, ответственность за действия на объекте.</td>
              <td>Минимизирует конфликты и защищает режим объекта.</td>
              <td>Приложение №2 + регламент.</td>
            </tr>
            <tr>
              <td><b>Оплата и расчёты</b></td>
              <td>Тариф(ы), порядок выставления, сроки оплаты, последствия просрочки, индексация (при необходимости).</td>
              <td>Защищает денежный поток и снижает риск дебиторской задолженности.</td>
              <td>Основной текст + приложение.</td>
            </tr>
            <tr>
              <td><b>Ответственность</b></td>
              <td>Граница ответственности сторон, ограничения по оборудованию, порядок инцидентов, исключения.</td>
              <td>Убирает “размывание ответственности” при авариях и перегрузках.</td>
              <td>Основной текст + приложения.</td>
            </tr>
            <tr>
              <td><b>Инциденты и плановые работы</b></td>
              <td>Порядок уведомлений, сроки реакции, регламент плановых работ и “окон”, фиксация событий.</td>
              <td>Снижает спорность, делает эксплуатацию прогнозируемой.</td>
              <td>Регламент + приложение.</td>
            </tr>
          </tbody>
        </table>
      </div>

      <div class="apps" aria-label="Приложения к договору с клиентом">
        <div class="head">
          <b>Рекомендуемые приложения к клиентскому договору</b>
          <span style="opacity:.86">минимальный набор для снижения спорности</span>
        </div>
        <div class="body">
          <div class="app">
            <div class="tag">№1</div>
            <div>
              <strong>Параметры размещения</strong>
              <span>Количество стойко-мест, лимит мощности (ориентир 7 кВт/стойка), перечень базовых услуг, режим эксплуатации.</span>
            </div>
          </div>
          <div class="app">
            <div class="tag">№2</div>
            <div>
              <strong>Регламент доступа</strong>
              <span>Процедуры допуска, списки лиц, сопровождение, порядок работ, учёт посещений, ответственность.</span>
            </div>
          </div>
          <div class="app">
            <div class="tag">№3</div>
            <div>
              <strong>Порядок заявок и работ</strong>
              <span>Окна работ, сроки исполнения заявок, аварийные работы, порядок согласования действий.</span>
            </div>
          </div>
          <div class="app">
            <div class="tag">№4</div>
            <div>
              <strong>Опции и дополнительные услуги</strong>
              <span>Перечень опций, правила и ставки (или методика расчёта), условия подключения линий связи.</span>
            </div>
          </div>
          <div class="app">
            <div class="tag">№5</div>
            <div>
              <strong>Порядок инцидентов</strong>
              <span>Сценарии, уведомления, фиксация событий, действия сторон, ответственность и исключения.</span>
            </div>
          </div>
        </div>
      </div>

      <div class="note">
        <div class="pill"><span class="dot"></span><b>Нормальная управленческая логика</b></div>
        Основной текст договора — “короткий и юридически чистый”. Всё, что меняется (лимиты, режимы, опции),
        — переносится в приложения. Это ускоряет сделки и снижает риск “сломать договор” при изменении параметров.
      </div>
    </section>

    <section class="section">
      <h2>3) Конструкция с инвестором: как оформить и что защищать</h2>
      <p class="lead">
        Так как собственных источников финансирования нет, инвестиционная конструкция должна давать инвестору:
        прозрачность, контроль траншей, понятную механику возврата вложений и управляемые риски.
      </p>

      <div class="grid">
        <div class="card">
          <b>Этапность и транши</b>
          <p>Инвестор финансирует по этапам под подтверждаемый результат (обследование → проект → монтаж → испытания).</p>
          <ul class="list">
            <li>Каждый транш = документальный результат</li>
            <li>Запрет перехода без результата</li>
          </ul>
        </div>
        <div class="card">
          <b>Возврат инвестиций</b>
          <p>Возврат формируется из денежного потока проекта (по согласованной формуле распределения).</p>
          <ul class="list">
            <li>Фиксация долей/порядка выплат</li>
            <li>Порядок контроля выручки</li>
          </ul>
        </div>
        <div class="card">
          <b>Контроль инвестора</b>
          <p>Права на контроль исполнения: проверки, доступ к отчётности, согласование ключевых решений.</p>
          <ul class="list">
            <li>Комитет/рабочая группа</li>
            <li>Единый реестр документов</li>
          </ul>
        </div>
      </div>

      <div class="table-wrap" role="region" aria-label="Содержание инвестиционного соглашения" tabindex="0">
        <table>
          <thead>
            <tr>
              <th style="width:280px;">Раздел соглашения</th>
              <th>Что закрепить</th>
              <th style="width:320px;">Как защищает проект</th>
              <th style="width:240px;">Комментарий</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td><b>Предмет и цель</b></td>
              <td>Инвестирование в создание инженерного комплекса и запуск услуги размещения оборудования в ЦОД.</td>
              <td>Убирает расплывчатость и споры “за что платили”.</td>
              <td>Формулировка должна совпадать с бизнес-планом.</td>
            </tr>
            <tr>
              <td><b>Этапы и результаты</b></td>
              <td>Этапы работ, перечень результатов, документы подтверждения, критерии приемки.</td>
              <td>Контроль вложений и управляемость сроков.</td>
              <td>Привязать к дорожной карте.</td>
            </tr>
            <tr>
              <td><b>Транши и условия выплат</b></td>
              <td>Суммы траншей, порядок перечисления, условия “стоп/пауза” при отсутствии результата.</td>
              <td>Снижает риск недостроя и конфликтов.</td>
              <td>Чёткие критерии — дешевле переговоры.</td>
            </tr>
            <tr>
              <td><b>Механика возврата</b></td>
              <td>Формула распределения денежного потока, приоритет выплат инвестору, сроки, отчётность.</td>
              <td>Дает инвестору понятную окупаемость и мотивацию.</td>
              <td>Согласуется с финансовой моделью.</td>
            </tr>
            <tr>
              <td><b>Контроль и отчётность</b></td>
              <td>Права доступа к отчётам, аудит, порядок принятия решений, согласование крупных расходов.</td>
              <td>Снижает риск “нецелевых” затрат и недоверия.</td>
              <td>Не перегружать, но сделать работающим.</td>
            </tr>
            <tr>
              <td><b>Риски и ответственность</b></td>
              <td>Что считается форс-мажором, кто несёт какие риски, как действовать при изменении условий.</td>
              <td>Снижает вероятность “разрыва” в конфликте.</td>
              <td>Фиксировать процедуры, не эмоции.</td>
            </tr>
          </tbody>
        </table>
      </div>

      <div class="note">
        <div class="pill"><span class="dot"></span><b>Позиция для переговоров</b></div>
        Инвестору важно показать не “высокий доход”, а <b>контролируемый проект</b>: этапность, документы, управляемые риски,
        прозрачная отчётность, понятная механика возврата инвестиций. Это повышает вероятность сделки.
      </div>
    </section>

    <section class="section">
      <h2>4) Что обязательно “зашить” в документы, чтобы не получить споры</h2>
      <p class="lead">
        Ниже — практический перечень спорных зон. Если они не закрыты, проект начинает терять время и деньги на конфликты.
      </p>

      <div class="grid">
        <div class="card">
          <b>Мощность и перегруз</b>
          <p>Лимит, измерение, последствия превышения, право ограничить нагрузку для защиты инфраструктуры.</p>
          <div class="pill"><span class="dot"></span><b>Фиксация:</b> приложение №1</div>
        </div>
        <div class="card">
          <b>Доступ и работы</b>
          <p>Допуск, сопровождение, окна работ, аварийные работы, ответственность за действия персонала клиента.</p>
          <div class="pill"><span class="dot"></span><b>Фиксация:</b> приложение №2–3</div>
        </div>
        <div class="card">
          <b>Инциденты</b>
          <p>Процедуры уведомлений, фиксация, порядок восстановления, ответственность и исключения.</p>
          <div class="pill"><span class="dot"></span><b>Фиксация:</b> приложение №5</div>
        </div>
        <div class="card">
          <b>Опции и дополнительные услуги</b>
          <p>Что входит в базовый пакет, а что оплачивается отдельно; методика расчёта и порядок заказа.</p>
          <div class="pill"><span class="dot"></span><b>Фиксация:</b> приложение №4</div>
        </div>
      </div>

      <div class="note">
        <div class="pill"><span class="dot"></span><b>Заметка</b></div>
        Если вы хотите, я дополню этот раздел блоком “типовые формулировки” (в деловом стиле) —
        но только после того, как мы согласуем “архитектуру договора” на уровне структуры и приложений.
      </div>

      <div class="actions">
        <a class="btn" href="index.html" aria-label="Вернуться на главную">← Вернуться на главную</a>
        <a class="btn secondary" href="templates.html" aria-label="Перейти к пакету документов">Далее: Пакет документов →</a>
      </div>
    </section>
  </main>

  <footer>
    <p>&copy; 2026 филиал ПАО «Россети Юг» – «Кубаньэнерго». Раздел: правовая конструкция.</p>
  </footer>

  <!-- Плавающая кнопка "домой" -->
  <a id="fab-home" class="fab" href="index.html" aria-label="На главную" title="На главную">
    <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
      <path d="M10 20v-6h4v6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
      <path d="M4 11l8-7 8 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
      <path d="M6 10v10h12V10" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
    </svg>
  </a>

  <!-- Плавающая кнопка "вверх" -->
  <button id="fab-top" class="fab" type="button" aria-label="В начало страницы" title="В начало">
    <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
      <path d="M5 15l7-7 7 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
    </svg>
  </button>

  <script>
    // Кнопка "вверх"
    (function(){
      var topBtn = document.getElementById("fab-top");
      if (!topBtn) return;
      var onScroll = function(){
        if (window.scrollY > 300) { topBtn.classList.add("show"); }
        else { topBtn.classList.remove("show"); }
      };
      window.addEventListener("scroll", onScroll, {passive:true});
      onScroll();
      topBtn.addEventListener("click", function(){
        window.scrollTo({ top: 0, behavior: "smooth" });
      }, {passive:true});
    })();
  </script>
</body>
</html>