Тёмный шаблон

Открыт слепок v1. Сохранение пишет новый слепок и не трогает этот.

Название Адрес в кассете

Описание

Макет на один контакт

<section class="sheet">
  <header class="sheet-head">
    <span class="ico" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"/><path d="m9 12 2 2 4-4"/></svg></span>
    <h3 class="sheet-title">Защищенный звонок</h3>
  </header>
  <p class="sheet-copy">Позвоните через интернет звонок DellCall и вам не будут поступать спам звонки от наших конкурентов.</p>
  <div class="actions">
    <a class="btn-call" href="{{url}}"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg>Позвонить защищенно</a>
    <button type="button" class="btn-ghost card" data-open-qr><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="5" height="5" x="3" y="3" rx="1"/><rect width="5" height="5" x="16" y="3" rx="1"/><rect width="5" height="5" x="3" y="16" rx="1"/><path d="M21 16h-3a2 2 0 0 0-2 2v3"/><path d="M21 21v.01"/><path d="M12 7v3a2 2 0 0 1-2 2H7"/><path d="M3 12h.01"/><path d="M12 3h.01"/><path d="M12 16v.01"/><path d="M16 12h1"/><path d="M21 12v.01"/><path d="M12 21v-1"/></svg>Позвонить с QR-кодом</button>
  </div>
  <p class="sheet-lock"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="11" x="3" y="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>Соединение через индивидуальный сервер DellCall — номер скрыт</p>
</section>

Макет на несколько

<section class="sheet">
  <header class="sheet-head">
    <span class="ico" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"/><path d="m9 12 2 2 4-4"/></svg></span>
    <h3 class="sheet-title">Защищенный звонок менеджеру</h3>
  </header>
  <p class="sheet-copy">Позвоните через интернет звонок DellCall и вам не будут поступать спам звонки от наших конкурентов.</p>
  <div class="grid">
    {{#contacts}}
    <article class="tile">
      <span class="ava"><img src="{{photo}}" alt="{{name}}"/><span class="ava-fb">{{initials}}</span></span>
      <span class="tile-name">{{name}}</span>
      <span class="tile-role">{{role}}</span>
      <div class="tile-acts">
        <a class="chip" href="{{url}}"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg>Позвонить</a>
        <button type="button" class="chip card" data-open-qr aria-label="Позвонить с QR-кодом — {{name}}"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="5" height="5" x="3" y="3" rx="1"/><rect width="5" height="5" x="16" y="3" rx="1"/><rect width="5" height="5" x="3" y="16" rx="1"/><path d="M21 16h-3a2 2 0 0 0-2 2v3"/><path d="M21 21v.01"/><path d="M12 7v3a2 2 0 0 1-2 2H7"/><path d="M3 12h.01"/><path d="M12 3h.01"/><path d="M12 16v.01"/><path d="M16 12h1"/><path d="M21 12v.01"/><path d="M12 21v-1"/></svg>QR</button>
      </div>
    </article>
    {{/contacts}}
  </div>
  <p class="sheet-lock"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="11" x="3" y="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>Соединение через индивидуальный сервер DellCall — номер скрыт</p>
</section>

Макет QR

<section class="sheet sheet-qr">
  <header class="sheet-head">
    <span class="ico" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"/><path d="m9 12 2 2 4-4"/></svg></span>
    <h3 class="sheet-title">Защищенный звонок</h3>
  </header>
  <p class="sheet-copy">Отсканируйте QR-код камерой телефона — защищенный звонок DellCall откроется на вашем смартфоне.</p>
  <div class="qr-block">
    <figure class="qr-frame"><img src="{{qr}}" alt="QR {{name}}"/></figure>
    <p class="sheet-hint"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 7V5a2 2 0 0 1 2-2h2"/><path d="M17 3h2a2 2 0 0 1 2 2v2"/><path d="M21 17v2a2 2 0 0 1-2 2h-2"/><path d="M7 21H5a2 2 0 0 1-2-2v-2"/><path d="M7 12h10"/></svg>Камера телефона распознает код автоматически</p>
  </div>
  <p class="sheet-lock"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="11" x="3" y="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>Соединение через индивидуальный сервер DellCall — номер скрыт</p>
  <p class="sheet-demo">Демо-режим: после подключения вашей телефонной линии QR-код будет вести на реальный защищенный звонок.</p>
</section>

HTML кнопки CSS кнопки

HTML внутри круглой кнопки. Пусто — трубка. Стили кнопки (.btn) пишите сюда: общий CSS режет :host до попапа.

Общий CSS

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Space+Grotesk:wght@600&display=swap");
:host{
  --night:#0d1321;--snow:#f1f5f9;--steel:#7588a3;--signal:#3c83f6;--ink:#080c16;--mint:#14eba3;
  --tile:rgba(21,30,50,.4);--line:rgba(32,40,60,.6);
  color:var(--snow);
  font:400 16px/24px Inter,sans-serif;
}
.sheet{display:flex;flex-direction:column;gap:12px}
.sheet-head{display:flex;align-items:center;gap:8px;min-height:36px;padding-right:28px}
.ico{width:36px;height:36px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:rgba(60,131,246,.15);border:1px solid rgba(60,131,246,.3);color:var(--signal);flex:0 0 auto}
.ico svg{width:20px;height:20px}
.sheet-title{margin:0;font:600 16px/20px "Space Grotesk",sans-serif}
.sheet-copy{margin:0;color:var(--steel);font:400 14px/22.75px Inter,sans-serif}
.actions{display:flex;flex-direction:column;gap:8px}
.sheet-lock,.sheet-hint{margin:0;display:flex;align-items:center;gap:6px;color:var(--steel);font:400 11px/16.5px Inter,sans-serif}
.sheet-lock svg,.sheet-hint svg{width:12px;height:12px;color:var(--mint);flex:0 0 auto}
.sheet-demo{margin:0;color:rgba(117,136,163,.8);font:400 11px/16.5px Inter,sans-serif}
.btn-call,.btn-ghost{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:36px;padding:0 12px;border-radius:10px;font:500 14px/20px Inter,sans-serif;text-decoration:none;cursor:pointer;box-sizing:border-box}
.btn-call{background:var(--signal);color:var(--ink);border:0}
.btn-ghost{background:var(--ink);color:var(--signal);border:1px solid rgba(60,131,246,.6)}
.btn-call svg,.btn-ghost svg{width:16px;height:16px}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tile{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px;text-align:center;border-radius:12px;border:1px solid var(--line);background:var(--tile);min-width:0}
.ava{position:relative;width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:1px solid rgba(60,131,246,.4);background:linear-gradient(to right bottom,rgba(60,131,246,.25),rgba(60,131,246,.1),rgba(20,235,163,.15));color:var(--signal);font:600 14px/20px "Space Grotesk",sans-serif}
.ava img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%}
.ava img[src=""]{display:none}
.ava img:not([src=""]) + .ava-fb{display:none}
.ava::after{content:"";position:absolute;right:-2px;bottom:-2px;width:14px;height:14px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 2px var(--night)}
.tile-name{font:600 13px/16.25px "Space Grotesk",sans-serif}
.tile-role{color:var(--steel);font:400 11px/15.125px Inter,sans-serif}
.tile-acts{display:flex;width:100%;gap:6px;margin-top:auto}
.chip{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:4px;height:26px;padding:0 8px;border-radius:999px;border:1px solid rgba(60,131,246,.4);color:var(--signal);background:transparent;font:500 11px/1 Inter,sans-serif;text-decoration:none;cursor:pointer}
.chip svg{width:12px;height:12px}
.sheet-qr .qr-block{display:flex;flex-direction:column;align-items:center;gap:12px}
.qr-frame{margin:0;padding:16px;border-radius:16px;background:#fff;border:1px solid rgba(60,131,246,.2)}
.qr-frame img{display:block;width:188px;height:188px}

Общий JS