hello - master - Gulshat/HelloWorld

hello
309 строк17 KB
Gulshat
create hello
27 дек 2025, 08:07
27 дек 2025, 08:07c89d4c6
<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Симулятор: Переговоры с Боссом о Повышении (Землеустройство и кадастры)</title>
  <style>
    body {
      min-height: 100vh;
      font-family: 'Segoe UI', Verdana, Arial, sans-serif;
      background: linear-gradient(120deg, #7AD7A3 0%, #8bbaff 100%);
      margin:0; padding:0;
    }
    #main {
      max-width: 700px;
      margin: 35px auto;
      background: #fff9;
      color: #25325a;
      border-radius: 25px;
      box-shadow: 0 6px 36px #4446;
      padding: 30px 22px;
    }
    h1 {text-align:center; margin-bottom:8px; color: #1c5559;}
    .memo-block {
      margin: 22px 0 26px 0;
      background: #f3fbf7;
      border: 2.5px solid #beeaf1;
      border-radius: 17px;
      padding: 23px 18px 10px 26px;
      font-size: 1.07em;
      box-shadow: 0 2px 8px #7ad7a388;
    }
    .memo-step {
      margin-top: 10px; margin-bottom: 13px;
      padding: 14px 18px;
      background: #f6faff;
      border-radius: 13px;
      border-left: 7px solid #31b489;
    }
    .memo-step b {color: #085f38;}
    .eg { color: #1c777c; font-style:italic;}
    ol {margin-left: 14px;}
    .step-btn, .send-btn, #next-btn {
      background: linear-gradient(90deg,#31b489 30%,#2699fb 100%);
      color: #fff; border: none; border-radius: 13px; cursor: pointer;
      font-size: 1.07em; padding: 10px 38px; margin: 19px 0;
      transition: .3s; font-weight: bold; box-shadow:0 2px 12px #b6d4e388;
      align-self: flex-end;
    }
    .step-btn:hover, .send-btn:hover, #next-btn:hover { background: #8bbaff; color: #174355; }
    .msg {display:flex;align-items:flex-end; margin:4px 0;}
    .boss {flex-direction: row;}
    .boss .bubble {background: linear-gradient(90deg,#f3fbf7 0%, #e0f4ff 93%); color: #215853; border-radius: 16px 16px 16px 0;}
    .you {flex-direction: row-reverse;}
    .you .bubble {background: linear-gradient(90deg,#cef7c9 8%, #cef1fc 93%); color: #206656; border-radius: 16px 16px 0 16px;}
    .bubble {padding: 12px 18px;margin:0 5px;min-width:55px; font-size: 1.06em; display: inline-block;word-break: break-word;box-shadow:0 1px 8px #d2fee1;}
    .boss-ico {border-radius:80%; background: #178a39; color: #fff; width: 38px; height: 38px; font-size:26px;
      display:flex; justify-content:center;align-items:center;margin-right:8px;box-shadow: 0 1px 5px #8db5d0;}
    .you-ico {border-radius:80%; background: #2091be; color: #fff; width: 38px; height: 38px; font-size:26px;
      display:flex; justify-content:center;align-items:center;margin-left:8px;box-shadow:0 1px 5px #beece1;}
    #chatArea {
      background: #f6f8ff;
      border-radius: 16px;
      min-height: 260px; max-height: 480px; overflow-y: auto;
      display: flex; flex-direction: column;
      padding: 14px 12px;
      margin-bottom: 18px;
      box-shadow:0 1px 8px #b8eeec53;
    }
    #inputArea {display: flex; flex-direction: column; gap:9px; margin: 10px 0;}
    #userMsg {
      flex:1; font-size:1.05em; padding:9px 14px; border-radius:13px;
      border: 1.5px solid #31b489; margin-bottom:0; width:100%;
      min-height:70px; resize:vertical; /* большое поле! */
      box-sizing: border-box;
    }
    .send-btn { min-width:110px;margin-bottom:2.5px; align-self: flex-end; margin-top:6px;}
    .final-yes {
      background: #ebfbe5; color: #197943; border-radius: 20px;
      padding: 22px 18px;
      font-size: 1.22em; margin: 16px 0 27px 0; text-align: center;
      border:2px solid #63bc65; box-shadow:0 2px 14px #adecf758;
    }
    @media (max-width: 700px) {
      #main {padding:10px 3px;} .memo-block{padding:9px 8px 4px 7px;}
      .memo-step {padding:7px 7px;}
      #userMsg { font-size:1em; }
    }
  </style>
</head>
<body>
<div id="main"></div>
<script>
// подсказки те же, их не меняем
const infographic = [
  {
    title: "1. Подготовьте достижения",
    text: `<b>Соберите 3-5 ключевых профессиональных результатов за год:</b>
      <ul>
        <li>Участие в проектах по межеванию крупных земельных участков, постановке их на кадастровый учет.</li>
        <li>Проведение инвентаризации земли, в результате — сокращены сроки оформления на 30%.</li>
        <li>Внедрение электронных ГИС-решений для автоматизации согласования земельных споров.</li>
        <li>Подготовка и сдача пакетных заявок в Росреестр: увеличено количество отработанных дел на 20%.</li>
        <li>Работа над сложными случаями с уточнением границ участков (например: оцифровано и исправлено 18 ошибок в ЕГРН).</li>
      </ul>
      <span class="eg">Главное: указывайте конкретные проекты, цифры, проценты, сроки и результат для организации!</span>`
  },
  {
    title: "2. Демонстрируйте свою профессиональную ценность",
    text: `<b>Расскажите о новых навыках, программах и дополнительной ответственности:</b>
      <ul>
        <li>Освоен сервис ППК Росреестр, работа с ЕГРН, ГИС Панорама/MapInfo.</li>
        <li>Прошел курс по составлению электронных межевых планов, применил технологии электронного документооборота.</li>
        <li>Самостоятельно консультировал клиентов по землеустройству, взял на себя оформление сложных случаев с сервитутами.</li>
      </ul>`
  },
  {
    title: "3. Используйте анализ рынка",
    text: `<b>Сравните уровень оплаты специалистов вашего профиля:</b>
      <ul>
        <li>Изучены объявления работодателей — зарплаты кадастровых инженеров по региону: 45 000—70 000 руб.</li>
        <li>Специалисты с опытом 1-3 года получают 50—65 тыс. руб. средний уровень.</li>
        <li>Сделайте такой анализ на hh.ru, гис-порталах, в профсообществах и предъявите “вилку”!</li>
      </ul>`
  },
  {
    title: "4. Точно формулируйте просьбу",
    text: `<b>Обоснуйте своё ожидание по зарплате:</b>
      <ul>
        <li>Предложить размер повышения по конкретным основаниям (проект/результат/рынок).</li>
        <li><span class="eg">Пример:</span> "Считаю справедливым повысить оклад до 60 тыс. руб. (+15% к текущей), минимум 55 тыс. — если возможна компенсация обучения.</li>
      </ul>`
  },
  {
    title: "5. Аргументируйте по возражениям",
    text: `<b>Если услышите “не сейчас/нет денег” — что ответить?</b>
      <ul>
        <li>“Понимаю, сейчас высокая нагрузка и ограничения, предлагаю зафиксировать условия: если я внедряю автоматизацию или закрываю N дел до конца квартала — обсуждение повышения вернём через 3 месяца.”</li>
        <li>“Давайте рассмотрим альтернативно: корпоративное обучение, оплата лицензий на ГИС, гибкий график." </li>
      </ul>`
  }
];

const chatScript = [
  {
    role: "boss",
    text: "Здравствуйте! Чем могу быть полезен?"
  },
  {
    role: "you",
    prompt: "Вежливо сообщите, зачем вы пришли (повысить зарплату, аргументированно).",
    advice: "Обоснуйте свою просьбу, упомяните повышение и связь с работой.",
    expect: ["повышен","зарплат","оклад","инженер","специалист"]
  },
  {
    role: "boss",
    text: "Опишите, какие достижения у вас были как у кадастрового инженера или землеустроителя за последний год."
  },
  {
    role: "you",
    prompt: "Перечислите ваши основные профессиональные успехи (проекты/цифры/результат).",
    advice: "Упомяните реальные дела, количественные показатели, сроки, внедрение.",
    expect: ["проект","межев","гис","инвентар","учет","росреестр","участк","постановк","электрон","согласов","границ","егрн","результат","ошибк","процент"]
  },
  {
    role: "boss",
    text: "Какие новые знания, технологии или обязанности вы освоили?"
  },
  {
    role: "you",
    prompt: "Охарактеризуйте ваш профессиональный рост (новые софты, курсы, функции).",
    advice: "Расскажите о применении ГИС, работе с ЕГРН, дополнительной ответственности.",
    expect: ["гис","росреестр","егрн","курс","план","документо","электрон","программа","клиент","обучен","обязан"]
  },
  {
    role: "boss",
    text: "Сколько вы хотели бы получать? Почему считаете это справедливым?"
  },
  {
    role: "you",
    prompt: "Опирайтесь на рынок, опыт, исполненные проекты. Назовите 'вилку', минимум и основания.",
    advice: "Сошлитесь на зарплаты по hh.ru, полезность для фирмы.",
    expect: ["рынок","объявлен","зарплат","кадастр","регион","тыс","руб","миним"]
  },
  {
    role: "boss",
    text: "Сейчас сложная экономическая ситуация — если компания не сможет поднять оклад, что вы предлагаете?"
  },
  {
    role: "you",
    prompt: "Аргументируйте мягко: предлагайте этапность, бонусы, обучение, временной план.",
    advice: "Обозначьте гибкость: альтернативы, обучение, график, KPI.",
    expect: ["обучен","аттестац","план","бонус","развит","через","альтернатив","график","договор","автоматизац","этап"]
  },
  {
    role: "boss",
    text: "Спасибо за ваши усилия и вклад в развитие отдела. Готов согласовать повышение! Поздравляю!"
  }
];

let chatState = { step: 0, msgs: [] };

function showMemo() {
  let html = `<h1>Этап 1: Готовимся к разговору о повышении</h1>
  <div class="memo-block">
    <b>Представьте себя сотрудником компании, вы хотите поговорить с боссом о повышении зарплаты.</b>
    <br><br>
    Ниже приведены <b>подсказки</b>, что нужно продемонстрировать начальству, чтобы заявить о своей ценности.
  `;
  infographic.forEach((el,i)=>{
    html += `<div class="memo-step">
      <b>Шаг ${i+1}:</b> ${el.title}<br>${el.text}
    </div>`;
  });
  html+=`<button id="next-btn" onclick="showChat()">К переговорам!</button>
  </div>
  <div style="margin-top:18px;color:#197943;font-size:.97em;background:#e4fbe3;border-radius:9px;padding:6px 18px 7px 18px;">
    Ознакомьтесь с памяткой, затем переходите к симуляции делового разговора.
  </div>`;
  document.getElementById('main').innerHTML = html;
}

function showChat() {
  chatState = {step:0, msgs:[]};
  let html = `<h1>Этап 2: Переговоры о повышении</h1>
  <div style="margin-top:-2px;margin-bottom:14px;background:#eaffef;padding:12px 18px;border-radius:8px;font-size:1.07em;color:#147167;">
    Продемонстрируйте свои компетенции и попробуйте получить согласие!
    <br><b>Дождитесь "Да" от босса — сделайте скриншот результата!</b>
  </div>
  <div id="chatArea"></div>
  <div id="inputArea"></div>`;
  document.getElementById('main').innerHTML = html;
  renderChat();
}

function renderChat() {
  let ca = document.getElementById('chatArea');
  let st = chatState.step;
  let html = '';
  for(let msg of chatState.msgs){
    let who = msg.role==='boss'?'boss':'you';
    let ico = who==='boss'?'<div class="boss-ico">👨‍💼</div>':'<div class="you-ico">🧑</div>';
    html += `<div class="msg ${who}">${ico}<div class="bubble">${msg.text.replace(/\n/g,'<br>')}</div></div>`;
  }
  let next = chatScript[st];

  if (next && next.role === 'boss') {
    setTimeout(()=>{
      chatState.msgs.push({role:"boss", text:next.text});
      chatState.step++;
      renderChat();
    }, 800);
    ca.innerHTML = html + `<div class="msg boss"><div class="boss-ico">👨‍💼</div><div class="bubble" style="opacity:.55">...</div></div>`;
    document.getElementById('inputArea').innerHTML = '';
    return;
  }
  ca.innerHTML = html;
  let div = document.getElementById('inputArea');
  if (next && next.role === 'you') {
    div.innerHTML = `
      <div class="memo-step" style="margin:0 0 7px 0;background:#cef7c9;color:#085f38;border:none;"><b>Ваш шаг:</b> ${next.prompt}</div>
      <textarea id="userMsg" rows="4" style="min-height:70px; resize:vertical;"></textarea>
      <button class="send-btn" onclick="userSend()">Отправить</button>
      <div style="color:#147167;font-size:.93em;margin-top:3px;"><b>💡 Совет:</b> ${next.advice}</div>
    `;
  } else {
    div.innerHTML = '';
    endSuccess();
  }
  ca.scrollTop = 99999;
}

function userSend() {
  let st = chatState.step, userText = document.getElementById('userMsg').value.trim();
  if(!userText || userText.length<13){
    alert("Пожалуйста, дайте развернутый профессиональный ответ по теме вопроса (минимум 13 символов) и используйте идеи из памятки!");
    return;
  }
  let next = chatScript[st];
  let expect = next.expect;
  let ok = false;
  let uc = userText.toLowerCase();
  for(let word of expect) if(uc.includes(word)) ok = true;
  if (!ok) {
    alert("Используйте термины и примеры, связанные с землеустройством, кадастрами, и реальные аргументы как в первой части.");
    return;
  }
  chatState.msgs.push({role:"you", text:userText});
  chatState.step++;
  renderChat();
}

function endSuccess() {
  document.getElementById("chatArea").innerHTML += `
  <div class="final-yes">
    <b>ПОЗДРАВЛЯЕМ!</b> 🎉<br>
    Вы получили согласие руководителя на повышение.<br>
    <b>Сделайте скриншот этого окна и отправьте Гульшат Иршатовне:</b><br>
    Telegram: <b>@JoyBloom1</b> &emsp; WhatsApp: <b>89378452529</b>
  </div>
  <button class="step-btn" onclick="location.reload()">Пройти заново</button>
  `;
  document.getElementById('inputArea').innerHTML = '';
  document.getElementById('chatArea').scrollTop = 99999;
}

showMemo();
</script>
</body>
</html>