documents.html - master - AnAb/Collocation

documents.html
594 строки25 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</title>

  <style>
    /* Плавающие круглые кнопки */
    .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, #00acc1), var(--secondary, #3949ab));
      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;
      transition: transform .2s ease, opacity .2s ease, filter .2s ease;
      border: none; cursor: pointer;
    }
    .fab:hover{ transform: translateY(-2px) scale(1.03); filter: brightness(1.05); }
    .fab:active{ transform: translateY(0) scale(.98); }
    .fab svg{ width: 26px; height: 26px; pointer-events: none; }
    #fab-back{ bottom: calc(96px + env(safe-area-inset-bottom)); }
    #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::after{ content:""; position:absolute; inset:0; border-radius:50%; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
    @media (prefers-reduced-motion: reduce){ .fab, #fab-top{ transition:none; } }
  </style>

  <style>
    *{ margin:0; padding:0; box-sizing:border-box; }
    :root{
      --primary:#1a237e;
      --secondary:#3949ab;
      --accent:#00acc1;
      --bg:#0a0e27;
      --card: rgba(22,27,34,0.82);
      --card2: rgba(13,17,23,0.55);
      --border: rgba(255,255,255,0.10);
      --text:#ffffff;
      --muted: rgba(255,255,255,0.88);
      --shadow: 0 10px 40px rgba(0,0,0,0.30);
      --ok:#00c853;
      --warn:#ffd54f;
      --bad:#ff5252;
    }

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

    /* Фон */
    .bg{
      position:fixed; inset:0;
      z-index:-1;
      background: linear-gradient(135deg, #0a0e27, #1a237e);
      overflow:hidden;
    }
    .bg::before{
      content:"";
      position:absolute; inset:-30%;
      background:
        radial-gradient(circle at 20% 80%, rgba(0,172,193,0.28) 0%, transparent 48%),
        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.25) 0%, transparent 55%);
      animation: drift 18s ease-in-out infinite;
    }
    @keyframes drift{
      0%,100%{ transform: translate(0,0) rotate(0deg); }
      33%{ transform: translate(-30px,-25px) rotate(120deg); }
      66%{ transform: translate(35px,-15px) rotate(240deg); }
    }

    /* Шапка */
    header{
      padding: 52px 20px;
      text-align:center;
      background: rgba(26,35,126,0.10);
      backdrop-filter: blur(18px);
      border-bottom: 1px solid var(--border);
    }
    header h1{
      font-size: clamp(1.9rem, 4.2vw, 2.9rem);
      font-weight: 900;
      margin-bottom: 10px;
      background: linear-gradient(135deg, #ffffff 0%, #00acc1 100%);
      -webkit-background-clip:text;
      -webkit-text-fill-color: transparent;
      background-clip:text;
    }
    header p{
      max-width: 1120px;
      margin: 0 auto;
      opacity: .92;
    }

    .badge{
      display:inline-flex;
      align-items:center;
      gap:10px;
      margin-top:14px;
      padding: 10px 14px;
      border-radius:999px;
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(13,17,23,.35);
      font-size: .95rem;
      opacity: .95;
    }
    .dot{
      width:10px; height:10px; border-radius:50%;
      background: var(--accent);
      box-shadow: 0 0 0 4px rgba(0,172,193,.15);
    }

    /* Контейнер */
    .container{
      max-width: 1200px;
      margin: 0 auto;
      padding: 60px 20px;
    }

    /* Карточки */
    .card{
      background: var(--card);
      backdrop-filter: blur(20px);
      border: 1px solid var(--border);
      border-radius: 20px;
      padding: 34px;
      box-shadow: var(--shadow);
      margin-bottom: 24px;
    }
    .card h2{
      color: var(--accent);
      font-size: 1.9rem;
      margin-bottom: 12px;
      font-weight: 900;
      text-align:center;
    }
    .card p{ opacity: .92; }

    /* Инвестор */
    .invest{
      background: linear-gradient(135deg, rgba(57,73,171,0.18) 0%, rgba(0,172,193,0.12) 100%);
      border: 1px solid rgba(57,73,171,0.35);
    }
    .invest h2{ text-align:left; }

    /* Сетка */
    .grid{
      display:grid;
      grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
      gap: 18px;
      margin-top: 18px;
    }
    .box{
      background: var(--card2);
      border: 1px solid rgba(255,255,255,.06);
      border-radius: 16px;
      padding: 22px;
      transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
    }
    .box:hover{
      transform: translateY(-6px);
      border-color: rgba(0,172,193,.22);
      box-shadow: 0 12px 30px rgba(0,172,193,.10);
    }
    .box h3{
      display:flex;
      align-items:center;
      gap:10px;
      margin-bottom: 10px;
      font-size: 1.2rem;
    }
    .icon{
      width: 40px; height: 40px;
      border-radius: 14px;
      display:grid; place-items:center;
      background: rgba(0,172,193,.14);
      border: 1px solid rgba(0,172,193,.22);
      box-shadow: 0 6px 16px rgba(0,0,0,.25);
      flex: 0 0 auto;
      font-size: 1.2rem;
    }
    .box ul{ margin-top: 8px; padding-left: 18px; opacity: .92; }
    .box li{ margin: 6px 0; }
    .muted{ opacity: .78; font-size: .92rem; margin-top: 10px; }

    /* Таблица */
    .table-wrap{
      margin-top: 14px;
      overflow-x: auto;
      border-radius: 14px;
      border: 1px solid rgba(255,255,255,.10);
      background: rgba(13,17,23,.35);
    }
    table{
      width: 100%;
      border-collapse: collapse;
      min-width: 980px;
    }
    th, td{
      padding: 14px 14px;
      border-bottom: 1px solid rgba(255,255,255,.08);
      vertical-align: top;
      font-size: .97rem;
    }
    th{
      text-align: left;
      color: #cfefff;
      background: rgba(0,172,193,.10);
      font-weight: 900;
    }
    td{ opacity: .9; }
    tr:last-child td{ border-bottom: none; }

    /* Оговорки */
    .note{
      background: linear-gradient(135deg, rgba(255,193,7,0.10), rgba(255,152,0,0.10));
      border: 1px solid rgba(255,193,7,0.30);
      border-radius: 16px;
      padding: 22px;
      margin-top: 14px;
      text-align:center;
    }
    .note h3{ color: var(--warn); margin-bottom: 10px; font-size: 1.25rem; }
    .note p{ opacity: .92; }

    /* Чеклист */
    .checklist{
      margin-top: 12px;
      display:grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 12px;
    }
    .check{
      background: rgba(13,17,23,.35);
      border: 1px solid rgba(255,255,255,.08);
      border-radius: 14px;
      padding: 14px;
    }
    .check b{ display:block; margin-bottom:6px; color:#cfefff; }
    .check ul{ padding-left: 18px; opacity:.92; }
    .check li{ margin: 6px 0; }

    /* Кнопка "Вернуться" */
    .back-button{
      display:inline-flex;
      align-items:center;
      gap:10px;
      padding: 15px 30px;
      background: linear-gradient(135deg, #00acc1 0%, #26c6da 100%);
      color: #fff;
      text-decoration:none;
      border-radius: 30px;
      font-weight: 800;
      margin-top: 26px;
      box-shadow: 0 4px 20px rgba(0,172,193,0.30);
      transition: transform .25s ease, box-shadow .25s ease;
    }
    .back-button:hover{
      transform: translateY(-3px);
      box-shadow: 0 8px 30px rgba(0,172,193,0.50);
    }

    @media (max-width: 768px){
      .card{ padding: 24px; }
      table{ min-width: 940px; }
      .icon{ width: 38px; height: 38px; }
    }
  </style>
</head>

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

  <header>
    <h1>Пакет документов</h1>
    <p>
      Перечень документов, необходимых для: (1) привлечения инвестора и (2) запуска услуги центра обработки данных категории III
      в филиале ПАО «Россети Юг» – «Кубаньэнерго». Проект пересчитан под <b>120 стоек</b> и полезную нагрузку <b>840 кВт</b>.
    </p>
    <div class="badge">
      <span class="dot" aria-hidden="true"></span>
      <span>Документы — это “механизм управления рисками”, а не формальность</span>
    </div>
  </header>

  <div class="container">
    <!-- 1. Логика пакета -->
    <section class="card">
      <h2>Логика документации</h2>
      <p>
        Пакет документации делится на две части:
        <b>внешняя</b> (для инвестора) и <b>внутренняя</b> (для запуска услуги и управляемой эксплуатации).
        Инвестору важны экономика и контроль, руководству — управляемость внедрения, риски и готовность к коммерческой эксплуатации.
      </p>

      <div class="checklist" aria-label="Два контура документации">
        <div class="check">
          <b>Контур инвестора</b>
          <ul>
            <li>экономика и денежный поток;</li>
            <li>реализуемость и этапность;</li>
            <li>риски и меры управления;</li>
            <li>условия сделки и защита интересов.</li>
          </ul>
        </div>
        <div class="check">
          <b>Контур запуска услуги</b>
          <ul>
            <li>коммерческие условия и договоры;</li>
            <li>регламенты доступа и эксплуатации;</li>
            <li>контроль качества и ответственность;</li>
            <li>структура управления проектом и услугой.</li>
          </ul>
        </div>
      </div>

      <div class="note">
        <h3>Ключевой принцип</h3>
        <p>
          Если документ не снижает риск и не ускоряет принятие решения — он лишний.
          Если риск есть, а документа нет — риск считается “неуправляемым”.
        </p>
      </div>
    </section>

    <!-- 2. Внешний пакет -->
    <section class="card invest">
      <h2>Пакет документов для инвестора</h2>
      <p>
        Это комплект, который используется для публикации на витринах/площадках и для переговоров.
        Важно иметь две версии: <b>краткую</b> (для размещения) и <b>расширенную</b> (после подтверждения интереса).
      </p>

      <div class="table-wrap" aria-label="Документы для инвестора">
        <table>
          <thead>
            <tr>
              <th>Документ</th>
              <th>Содержание (что внутри)</th>
              <th>Кто использует</th>
              <th>Итог</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td><b>Инвестиционный тизер</b></td>
              <td>параметры 120 стоек / 840 кВт, категория III, выручка, запрос к инвестору, поэтапность</td>
              <td>площадки, витрины, первичный контакт</td>
              <td>получить интерес</td>
            </tr>
            <tr>
              <td><b>Инвестиционная записка</b></td>
              <td>обоснование, модель выручки, логика рынка, конкурентные преимущества, риски и меры</td>
              <td>инвестор, руководство</td>
              <td>решение “входить/не входить”</td>
            </tr>
            <tr>
              <td><b>Финансовая модель</b></td>
              <td>сценарии тарифа 150/170/180 тыс. руб., загрузка, денежный поток, чувствительность</td>
              <td>инвестор, финансовая служба</td>
              <td>понимание окупаемости</td>
            </tr>
            <tr>
              <td><b>Техническая концепция</b></td>
              <td>состав систем категории III, резервирование, поэтапность ввода, контроль качества</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" style="margin-top:16px;">
        <h3>Что “включает голову” инвестору</h3>
        <p>
          Наличие планов продаж, контрольных точек и договорной модели сильнее влияет на решение,
          чем “красивое описание”. Инвестор покупает управляемость.
        </p>
      </div>
    </section>

    <!-- 3. Внутренний пакет -->
    <section class="card">
      <h2>Документы для запуска услуги внутри филиала</h2>
      <p>
        Эти документы нужны, чтобы услуга работала как “продукт”: понятные правила, ответственность, процессы, контроль и отчётность.
        Это также снижает договорные споры и операционные риски.
      </p>

      <div class="grid">
        <div class="box">
          <h3><span class="icon">📌</span>Управленческие документы</h3>
          <ul>
            <li>проектное решение о запуске услуги (служебная записка/доклад);</li>
            <li>паспорт проекта и дорожная карта (внутренние);</li>
            <li>структура управления: ответственные и контрольные точки;</li>
            <li>порядок отчётности по проекту и по услуге.</li>
          </ul>
          <div class="muted">Цель: “кто отвечает” и “как контролируем”.</div>
        </div>

        <div class="box">
          <h3><span class="icon">💼</span>Коммерческая политика</h3>
          <ul>
            <li>тарифные пакеты и условия предоставления;</li>
            <li>правила закрепления мощности и расчёта превышений;</li>
            <li>перечень допуслуг и ставки/порядок расчёта;</li>
            <li>правила скидок для якорных клиентов.</li>
          </ul>
          <div class="muted">Цель: единообразие предложений и защита маржинальности.</div>
        </div>

        <div class="box">
          <h3><span class="icon">🧾</span>Договорная документация</h3>
          <ul>
            <li>типовой договор с клиентом на размещение;</li>
            <li>приложения: параметры стойки, мощность, услуги;</li>
            <li>регламент доступа и порядок работ по заявкам;</li>
            <li>границы ответственности сторон и порядок урегулирования.</li>
          </ul>
          <div class="muted">Цель: минимизация споров и понятные правила.</div>
        </div>

        <div class="box">
          <h3><span class="icon">🧰</span>Эксплуатационные регламенты</h3>
          <ul>
            <li>режим эксплуатации и порядок переключений;</li>
            <li>планово-предупредительные работы;</li>
            <li>журналы, мониторинг, уведомления;</li>
            <li>порядок реагирования на инциденты.</li>
          </ul>
          <div class="muted">Цель: стабильность услуги и управляемые простои.</div>
        </div>

        <div class="box">
          <h3><span class="icon">🛡️</span>Безопасность и доступ</h3>
          <ul>
            <li>контроль доступа по зонам;</li>
            <li>правила сопровождения и журналирование;</li>
            <li>видеонаблюдение и хранение архива;</li>
            <li>правила действий при нарушениях.</li>
          </ul>
          <div class="muted">Цель: защита оборудования клиентов и репутации услуги.</div>
        </div>

        <div class="box">
          <h3><span class="icon">📊</span>Контроль качества и отчётность</h3>
          <ul>
            <li>ключевые показатели: загрузка, средний тариф, выручка;</li>
            <li>показатели эксплуатации: инциденты, простои, исполнение регламентов;</li>
            <li>периодические отчёты руководству;</li>
            <li>порядок пересмотра тарифов и условий.</li>
          </ul>
          <div class="muted">Цель: управляемость и прозрачность для руководства.</div>
        </div>
      </div>

      <div class="note">
        <h3>Важно</h3>
        <p>
          Для инвестора внутренний контур документов — это гарантия, что объект не “просто построят”,
          а будут эксплуатировать как коммерческую услугу с контролем качества и рисков.
        </p>
      </div>
    </section>

    <!-- 4. Минимальный чек-лист к старту переговоров -->
    <section class="card invest">
      <h2>Минимальный комплект для старта переговоров с инвестором</h2>
      <p>
        Чтобы начать переговоры и размещение на площадках, достаточно иметь короткий, но “железобетонный” набор.
        Остальные документы разворачиваются в ходе переговоров и уточнений.
      </p>

      <div class="checklist" aria-label="Минимальный комплект">
        <div class="check">
          <b>Краткий набор (для размещения)</b>
          <ul>
            <li>инвестиционный тизер;</li>
            <li>паспорт проекта (1–2 страницы);</li>
            <li>дорожная карта (крупными этапами);</li>
            <li>краткая финансовая логика по 120 стойкам.</li>
          </ul>
        </div>
        <div class="check">
          <b>Расширенный набор (по запросу)</b>
          <ul>
            <li>инвестиционная записка;</li>
            <li>финансовая модель;</li>
            <li>техническая концепция категории III;</li>
            <li>карта рисков и меры управления;</li>
            <li>проект условий инвестора и черновики договоров.</li>
          </ul>
        </div>
      </div>

      <div class="note" style="margin-top:16px;">
        <h3>Рекомендация</h3>
        <p>
          Размещать на площадках следует краткий тизер без чувствительных деталей.
          Расширенный пакет предоставляется адресно после подтверждения интереса и согласования режима раскрытия информации.
        </p>
      </div>

      <a href="index.html" class="back-button">← Вернуться на главную</a>
    </section>
  </div>

  <!-- Кнопка НАЗАД в главное меню -->
  <a id="fab-back" class="fab" href="index.html" aria-label="Назад в главное меню" title="Назад">
    <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
      <path d="M15 5l-7 7 7 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
    </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"/>
    </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>

  <script>
    // SUBPAGE: «Назад» — возвращаемся на index и просим его восстановить прокрутку
    (function(){
      var back = document.getElementById('fab-back');
      if(!back) return;
      back.addEventListener('click', function(e){
        if (e.metaKey || e.ctrlKey || e.shiftKey || e.altKey || e.button === 1) return;
        e.preventDefault();
        try { sessionStorage.setItem('restoreFlag', '1'); } catch(_) {}
        var href = back.getAttribute('href') || 'index.html';
        window.location.href = href;
      }, {passive:false});
    })();
  </script>
</body>
</html>