Е-Вестник

<!DOCTYPE html>
<html lang="bg">
<head>
<meta charset="UTF-8">
<title>Асистентът на ДГ "Ален мак"</title>
<style>
  body {
    font-family: Arial, sans-serif;
  }

  #chatbot {
    position: fixed;
    bottom: 80px;
    right: 20px;
    width: 350px;
    max-height: 500px;
    border: 2px solid #4CAF50;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    display: none;
    flex-direction: column;
    overflow: hidden;
    z-index: 1000;
  }

  #chatbot-header {
    background: #4CAF50;
    color: #fff;
    padding: 10px;
    text-align: center;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  #chatbot-messages {
    flex: 1;
    padding: 10px;
    overflow-y: auto;
    font-size: 14px;
    line-height: 1.4;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .message {
    padding: 8px 12px;
    border-radius: 15px;
    max-width: 80%;
    word-wrap: break-word;
  }

  .user-message {
    background: #4CAF50;
    color: white;
    align-self: flex-end;
  }

  .bot-message {
    background: #f1f1f1;
    color: #333;
    align-self: flex-start;
  }

  #chatbot-buttons {
    padding: 10px;
    border-top: 1px solid #ddd;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    justify-content: center;
  }

  .chatbot-btn {
    background: #4CAF50;
    color: white;
    border: none;
    padding: 6px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
  }

  .chatbot-btn:hover {
    background: #45a049;
  }

  #chatbot-toggle {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #4CAF50;
    color: white;
    font-size: 28px;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    z-index: 1001;
  }

  #chatbot-toggle:hover {
    background: #45a049;
  }
</style>
</head>
<body>

<button id="chatbot-toggle" onclick="toggleChat()"></button>

<div id="chatbot">
  <div id="chatbot-header">
    <span>Асистентът на ДГ "Ален Мак"</span>
    <button class="chatbot-btn" onclick="closeChat()"></button>
  </div>
  <div id="chatbot-messages"></div>
  <div id="chatbot-buttons">
    <button class="chatbot-btn" onclick="showAnswer('documents')"> Какъв е списъкът с документи?</button>
    <button class="chatbot-btn" onclick="showAnswer('groups')"> Колко групи има?</button>
    <button class="chatbot-btn" onclick="showAnswer('team')"> Кой е екипът?</button>
    <button class="chatbot-btn" onclick="showAnswer('projects')"> Проекти и програми</button>
    <button class="chatbot-btn" onclick="showAnswer('innovation')"> Иновации</button>
    <button class="chatbot-btn" onclick="stopVoice()"> Стоп</button>
    <button class="chatbot-btn" onclick="repeatVoice()"> Повтори</button>
  </div>
</div>

<script>
const answers = {
  documents: `Какъв е списъкът с документи за прием в детска градина Ален мак?
Здравейте, родители!
Ето кратък и ясен списък с документите, които обикновено се изискват при прием на дете в детска градина в град Харманли.
Заявление, което се попълва по образец, предоставен от директора или в сайта на детската градина.
Копие от акта за раждане на детето.
За деца, които постъпват на детска ясла са необходими следните медицински бележки:
- Здравнопрофилактична карта на детето, попълнена от личния лекар
- Изследване за кръв и урина
- Имунизационен паспорт / удостоверение за извършените имунизации
- Изискват се изследвания за чревни паразити, чревни бактерии

За деца, които постъпват на детска градина са необходими следните медицински бележки:
- Имунизационен паспорт / удостоверение за извършените имунизации
- Изискват се изследвания за чревни паразитоносителство и чревни заразоносителство

Как да проверите точно за документите необходими за постъпване на детето в детска градина?
1. Потърсете на сайта на детската градина, там са публикувани образци и списъци с документи.
2. Попитайте в детската градина лично — служителите ще ви дадат точен списък според групата (ясла, първа група и др.).`,

  groups: `Колко групи има в детска градина Ален мак?
Скъпи родители!
Ако предстои детето ви да тръгва в Детска градина "Ален мак", ето малко полезна информация:
В градината има общо 10 групи, разпределени така:
- 2 яслени групи за най-малките деца от 10 месеца до 3 години.
- 2 първи групи за деца от 3 до 4 години.
- 2 втори групи за деца от 4 до 5 години.
- 2 трети групи за деца от 5 до 6 години.
- 2 четвърти групи за деца от 6 до 7 години.

Това означава, че градината има добра структура с равномерно разпределение на децата по възраст, което е супер за адаптация и развитие.`,

  team: `Кой е екипът в детската градина и искате ли да се запознаете с него?
В Детска градина „Ален мак“ вярваме, че най-доброто образование и грижа започват с ангажиран и сърцат екип. 
Представяме ви хората, които всеки ден с внимание и любов се грижат за развитието и безопасността на вашите деца:
- Директор е госпожа Мелихан Чолева, човек, който ръководи с разум и сърце – винаги отворена за диалог и водена от грижата за всяко дете.
- Заместник-директор е госпожа Мирослава Тодорова с високо чувство за отговорност.
- Медицинска сестра е госпожа Светла Миткова, която следи здравословното състояние на децата и оказва първична медицинска помощ.
Специалисти, които оказват обща и допълнителна подкрепа на децата са:
- Психологът Ангел Ангелов, който подкрепя емоционалното и социално развитие на децата.
- Логопедите госпожа Виолета Стратиева и госпожа Дарина Димитрова, които провеждат диагностика и терапия при езиково-говорни затруднения.

Нашата мисия:
Да създадем среда, в която децата да се чувстват сигурни, обичани и вдъхновени да израстват, учат и мечтаят. Всеки член на екипа работи с отговорност, внимание и грижа – защото вашите деца са нашето бъдеще.`,

  projects: `Работа по проекти и национални програми.
Детска градина „Ален мак“, град Харманли активно участва в национални и европейски инициативи, насочени към подобряване на образователната среда, квалификацията на екипа и подкрепа на всяко дете.
Проектите целят:
- Обмен на добри практики с партньори от други страни
- Внасяне на нови идеи и методики в ежедневната работа с децата
- Предлагане на по-качествена грижа и образование
- Развиване на екипа и обогатяване на учебния процес
- Изграждане на иновативна, модерна и отворена към света детска градина.`,

  innovation: `Какви иновации реализира детска градина Ален мак?
Прекрасно е, че искате да знаете за иновациите в Детска градина „Ален мак“ – това е знак, че градината е модерна, мислеща за бъдещето, и прилага проверени педагогически практики.
В детската градина работим със съвременни подходи, които поставят детето в центъра на образователния процес. Една от основните иновации е:
- Монтесори практика в образователната дейност.
Монтесори е педагогическа система, която:
- развива самостоятелност и концентрация,
- работи със специални образователни материали,
- учи децата да се грижат за себе си и околната среда,
- реализира мини проекти,
- развива лична отговорност, самоконтрол и ред – важни стъпки преди училище.

Родителите забелязват:
„Спокойна и подредена среда – децата са уверени и усмихнати.“`
};

let currentText = "";
let utterance;
let voices = [];

function loadVoices() {
  voices = speechSynthesis.getVoices();
}
speechSynthesis.onvoiceschanged = loadVoices;

function showAnswer(key) {
  // Добавяме съобщение от потребителя като балон
  const userMessage = document.createElement("div");
  userMessage.className = "message user-message";
  userMessage.innerText = " " + document.querySelector(`#chatbot-buttons button[onclick*="${key}"]`).innerText;
  document.getElementById("chatbot-messages").appendChild(userMessage);

  // Добавяме отговора на чатбота
  const text = answers[key];
  currentText = text;
  const botMessage = document.createElement("div");
  botMessage.className = "message bot-message";
  botMessage.innerText = " " + text;
  document.getElementById("chatbot-messages").appendChild(botMessage);

  // Скролване надолу
  const chatMessages = document.getElementById("chatbot-messages");
  chatMessages.scrollTop = chatMessages.scrollHeight;

  speakText(text);
}

function speakText(text) {
  stopVoice();
  utterance = new SpeechSynthesisUtterance(text);
  utterance.lang = "bg-BG";
  utterance.pitch = 1.05;
  utterance.rate = 0.95;

  const femaleVoice = voices.find(v =>
    v.lang === "bg-BG" && (v.name.toLowerCase().includes("female") || v.name.toLowerCase().includes("woman"))
  ) || voices.find(v => v.lang === "bg-BG") || voices[0];

  if (femaleVoice) utterance.voice = femaleVoice;
  speechSynthesis.speak(utterance);
}

function stopVoice() {
  if (speechSynthesis.speaking) speechSynthesis.cancel();
}

function repeatVoice() {
  if (currentText) speakText(currentText);
}

function closeChat() {
  document.getElementById("chatbot").style.display = "none";
}

function toggleChat() {
  const chat = document.getElementById("chatbot");
  chat.style.display = (chat.style.display === "none" || chat.style.display === "") ? "flex" : "none";
}
</script>

</body>
</html>