pricing.html - master - AnAb/Collocation

pricing.html
577 строк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 на 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%);
      --ok: rgba(0,172,193,0.14);
      --warn: rgba(255,193,7,0.18);
      --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 h3{font-size:1.07rem;margin-bottom:6px}
    .card p{opacity:.88;font-size:.95rem;line-height:1.65}
    .meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
    .chip{
      display:inline-flex;align-items:center;gap:8px;
      padding:7px 10px;border-radius:999px;
      font-size:0.88rem;
      background: rgba(22,27,34,0.55);
      border: 1px solid rgba(255,255,255,0.10);
      opacity:.95;
    }
    .chip i{
      width:8px;height:8px;border-radius:50%;
      background: rgba(255,255,255,0.7);
      box-shadow: 0 0 0 4px rgba(255,255,255,0.10);
      display:inline-block;
    }
    .chip.ok i{background: var(--accent-color); box-shadow: 0 0 0 4px rgba(0,172,193,0.14);}
    .chip.warn i{background: #ffc107; box-shadow: 0 0 0 4px rgba(255,193,7,0.14);}
    .chip.danger i{background: #f44336; box-shadow: 0 0 0 4px rgba(244,67,54,0.14);}

    /* Таблица */
    .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: 1080px;
    }
    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}

    /* Блок “прайс-конструктор” */
    .builder{
      margin-top: 14px;
      border-radius: 18px;
      border: 1px solid rgba(255,255,255,0.10);
      background: rgba(13,17,23,0.38);
      overflow:hidden;
    }
    .builder .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;
    }
    .builder .head b{font-size:1.02rem}
    .builder .head span{opacity:.86}
    .builder .body{padding: 12px 16px}
    .line{
      padding: 10px 0;
      border-bottom: 1px solid rgba(255,255,255,0.08);
      display:grid;
      grid-template-columns: 220px 1fr;
      gap: 12px;
      align-items:flex-start;
    }
    .line:last-child{border-bottom:none}
    .k{
      display:inline-flex;align-items:center;gap:10px;
      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.9rem;
      padding: 8px 12px;
      white-space:nowrap;
      width: fit-content;
    }
    .v strong{display:block}
    .v 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: 900px){
      table{min-width: 980px;}
      .line{grid-template-columns: 1fr}
    }
    @media (max-width: 768px){
      header{ padding: 46px 20px; }
      .section{ padding: 24px; }
    }
  </style>
</head>

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

  <header>
    <h1>Тарифы и варианты размещения</h1>
    <p>
      Тарифы — это не “прайс ради прайса”. Это инструмент управления нагрузкой, доступом и рисками.
      Здесь описан конструктор тарифов для ЦОД категории III на <b>120 стоек</b> (лимит полезной нагрузки <b>840 кВт</b>,
      ориентир <b>7 кВт на стойку</b>) с понятным разделением: <b>базовый пакет</b> и <b>опции</b>.
    </p>
  </header>

  <main>
    <section class="section">
      <h2>1) Логика тарифа: как избежать спорных зон</h2>
      <p class="lead">
        Правильный тарифный контур решает три задачи одновременно:
        1) гарантирует покрытие эксплуатационных затрат;
        2) защищает инфраструктуру от перегруза и хаотичных работ;
        3) делает для клиента понятным, “что входит” и “за что доплата”.
      </p>

      <div class="grid">
        <div class="card">
          <h3>Единица продажи</h3>
          <p><b>Стойко-место</b> как основной продукт. Мощность, доступ и сервисы фиксируются параметрами.</p>
          <div class="meta">
            <span class="chip ok"><i></i>просто объяснить</span>
            <span class="chip ok"><i></i>легко масштабировать</span>
          </div>
        </div>
        <div class="card">
          <h3>Мощность — это лимит</h3>
          <p>Лимит мощности в базовом пакете. Превышение — отдельная опция или ограничение по правилам.</p>
          <div class="meta">
            <span class="chip warn"><i></i>снижает риски перегруза</span>
          </div>
        </div>
        <div class="card">
          <h3>Доступ — по регламенту</h3>
          <p>Доступ и работы (включая окна работ) являются частью услуги и отражаются в приложениях к договору.</p>
          <div class="meta">
            <span class="chip ok"><i></i>меньше конфликтов</span>
          </div>
        </div>
      </div>

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

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

      <div class="grid">
        <div class="card">
          <h3>Пакет «Базовый»</h3>
          <p>
            Размещение в стойке, электропитание в пределах лимита, базовая эксплуатация, контроль доступа по регламенту,
            мониторинг инженерной инфраструктуры, стандартный порядок заявок.
          </p>
          <div class="meta">
            <span class="chip ok"><i></i>ориентир: 7 кВт/стойка</span>
            <span class="chip ok"><i></i>стандартные окна работ</span>
          </div>
        </div>

        <div class="card">
          <h3>Пакет «Расширенный»</h3>
          <p>
            Увеличенный сервисный контур: ускоренные заявки, расширенные временные окна работ,
            повышенные требования к отчётности/уведомлениям, приоритетная поддержка.
          </p>
          <div class="meta">
            <span class="chip warn"><i></i>строже фиксируем регламенты</span>
            <span class="chip ok"><i></i>приоритет по заявкам</span>
          </div>
        </div>

        <div class="card">
          <h3>Пакет «Индивидуальный»</h3>
          <p>
            Для крупных клиентов: отдельная договорная конфигурация (мощность, доступ, окна работ, опции по связи),
            оформляется как индивидуальная спецификация и приложения.
          </p>
          <div class="meta">
            <span class="chip ok"><i></i>гибко под бизнес клиента</span>
            <span class="chip danger"><i></i>требует строгих приложений</span>
          </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="builder" aria-label="Конструктор опций">
        <div class="head">
          <b>Опции (добавляются к базовому пакету)</b>
          <span>стоимость фиксируется в коммерческой политике / приложении</span>
        </div>
        <div class="body">
          <div class="line">
            <div class="k">Мощность</div>
            <div class="v">
              <strong>Дополнительная мощность сверх лимита</strong>
              <span>Предоставляется при наличии технической возможности и после согласования. Фиксируется порядок измерения и ответственность.</span>
            </div>
          </div>
          <div class="line">
            <div class="k">Доступ</div>
            <div class="v">
              <strong>Расширенный режим доступа</strong>
              <span>Особые окна доступа/работ, дополнительные согласования, повышенные требования к безопасности. Только по регламенту.</span>
            </div>
          </div>
          <div class="line">
            <div class="k">Работы</div>
            <div class="v">
              <strong>Ускоренные заявки и работы</strong>
              <span>Сокращённые сроки исполнения заявок, приоритет, выполнение работ силами эксплуатационной службы.</span>
            </div>
          </div>
          <div class="line">
            <div class="k">Связь</div>
            <div class="v">
              <strong>Кросс-соединения и подключение операторов</strong>
              <span>Организация внутренних соединений, услуги по кроссу, регламенты ввода линий связи и доступа операторов.</span>
            </div>
          </div>
          <div class="line">
            <div class="k">Мониторинг</div>
            <div class="v">
              <strong>Расширенная отчётность</strong>
              <span>Дополнительные отчёты по событиям, работам, инцидентам, потреблению и параметрам (в пределах доступной инфраструктуры).</span>
            </div>
          </div>
          <div class="line">
            <div class="k">Сервис</div>
            <div class="v">
              <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>4) Что включаем в базовый пакет (фиксируем письменно)</h2>
      <p class="lead">
        Базовый пакет должен быть одинаково понятен: коммерции, юристам, эксплуатации и клиенту.
        Ниже — рекомендуемый состав “по умолчанию”, который далее уточняется в приложении “Параметры размещения”.
      </p>

      <div class="table-wrap" role="region" aria-label="Состав базового пакета" tabindex="0">
        <table>
          <thead>
            <tr>
              <th style="width:300px;">Элемент</th>
              <th>Что входит</th>
              <th style="width:320px;">Как фиксируется</th>
              <th style="width:260px;">Риск, если не фиксировать</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>
          </tbody>
        </table>
      </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="substations.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>