Pastebin

New Paste Add Image

<!DOCTYPE html>

<head>

<title>Скрипт разговора</title>

<style>

body {

margin: 0;

font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

background: #f4f6f8;

display: flex;

justify-content: center;

align-items: center;

min-height: 100vh;

}

.app {

background: #ffffff;

width: 100%;

max-width: 720px;

padding: 28px;

border-radius: 18px;

box-shadow: 0 10px 30px rgba(0,0,0,0.08);

}

.title {

font-size: 22px;

font-weight: 700;

margin-bottom: 14px;

}

.text {

font-size: 17px;

line-height: 1.45;

margin-bottom: 20px;

}

.buttons {

display: grid;

gap: 12px;

}

button {

padding: 14px 16px;

font-size: 16px;

border-radius: 12px;

border: 1px solid #d0d7de;

background: #ffffff;

cursor: pointer;

text-align: left;

transition: all 0.15s ease;

}

button:hover {

background: #f0f4ff;

border-color: #4c6ef5;

}

.result {

background: #f8f9fb;

border-radius: 12px;

padding: 18px;

font-size: 16px;

line-height: 1.45;

}

.footer {

margin-top: 22px;

display: flex;

justify-content: space-between;

align-items: center;

}

.restart {

font-size: 14px;

padding: 8px 12px;

border-radius: 10px;

border: 1px solid #ccc;

background: #fff;

cursor: pointer;

}

.restart:hover {

background: #eee;

}

.step {

font-size: 13px;

color: #666;

}

</style>

</head>

<body>

<button class="restart" onclick="restart()">Начать сначала</button>

</div>

// ====== СЦЕНАРИЙ (упрощённая версия) ======

const script = {

start: "sec_start",

nodes: {

sec_start: {

type: "question",

text: "Добрый день! Подскажите, пожалуйста, кто у вас отвечает за информационную безопасность?",

answers: [

{ label: "Соединяют", next: "lpr_start" },

{ label: "Отправьте информацию на почту", next: "sec_mail" },

{ label: "Его нет на месте", next: "sec_no_person" }

]

sec_mail: {

type: "result",

text: "Понимаю. Мне нечего направлять на почту без понимания задачи. Это вопрос по требованиям регуляторов, соедините, пожалуйста, с ответственным за ИБ."

sec_no_person: {

type: "result",

text: "Подскажите, пожалуйста, когда он будет на месте и как с ним можно связаться напрямую?"

lpr_start: {

type: "question",

text: "Подскажите, вы отвечаете за информационную безопасность?",

answers: [

{ label: "Да", next: "presentation" },

{ label: "Нет", next: "lpr_not_responsible" }

]

lpr_not_responsible: {

type: "result",

text: "Подскажите, пожалуйста, кто в вашей компании занимается вопросами информационной безопасности, и соедините меня с ним."

presentation: {

type: "question",

text: "Коротко расскажу: мы помогаем компаниям соответствовать требованиям ФСТЭК и ФСБ. Актуален ли для вас этот вопрос сейчас?",

answers: [

{ label: "Нет времени", next: "obj_time" },

{ label: "У нас есть подрядчик", next: "obj_contractor" },

{ label: "Нет бюджета", next: "obj_budget" }

]

obj_time: {

type: "result",

text: "Понимаю. Тогда подскажите, когда будет удобно созвониться — я уложусь в 5–10 минут."

obj_contractor: {

type: "result",

text: "Отлично. Мы часто работаем в паре с внутренними ИБ-отделами и подрядчиками, подключаемся для закрытия вопросов регуляторов."

obj_budget: {

type: "result",

text: "Понимаю. Важно учитывать, что штрафы за несоответствие могут быть выше стоимости работ. Могу задать пару вопросов, чтобы понять актуальность?"

}

};

let currentNode = script.start;

let stepCount = 1;

const content = document.getElementById("content");

const step = document.getElementById("step");

function render() {

const node = script.nodes[currentNode];

step.textContent = `Шаг ${stepCount}`;

if (node.type === "question") {

content.innerHTML = `

<div class="title">Вопрос</div>

${node.answers.map(a =>

`<button onclick="go('${a.next}')">${a.label}</button>`

).join("")}

</div>

}

if (node.type === "result") {

content.innerHTML = `

<div class="title">Ответ</div>

}

function go(next) {

currentNode = next;

stepCount++;

render();

}

function restart() {

currentNode = script.start;

stepCount = 1;

render();

}

render();

</script>

</body>

</html>

Settings

Title : [Optional]

Paste Folder : [Optional]

Syntax : [Optional]

Expiration : [Optional]

Status : [Optional]

Password : [Optional]

Description: [Optional]

Tags: [Optional]

Encrypt Paste (?)

You are currently not logged in, this means you can not edit or delete anything you paste. Sign Up or Login

Settings

Site Languages