Daniel
/
deepseek_chatbot


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107
							<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <title>HR-Bot Webinterface</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      font-family: 'Segoe UI', sans-serif;
      background: linear-gradient(135deg, #ce2d6d 0%, #143d83 100%);
      height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .glass-container {
      background: rgba(255, 255, 255, 0.2);
      border-radius: 20px;
      box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.18);
      padding: 2em;
      width: 90%;
      max-width: 600px;
      color: #fff;
      text-align: center;
      animation: fadeIn 1s ease-out;
    }

    textarea {
      width: 100%;
      padding: 1em;
      border-radius: 10px;
      border: none;
      resize: none;
      font-size: 1em;
    }

    button {
      padding: 0.8em 2em;
      margin-top: 1em;
      border: none;
      border-radius: 8px;
      background-color: #ffffff33;
      color: white;
      font-size: 1em;
      cursor: pointer;
      transition: background 0.3s ease;
    }

    button:hover {
      background-color: #ffffff55;
    }

    #responseBox {
      margin-top: 1.5em;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 10px;
      padding: 1em;
      min-height: 4em;
      white-space: pre-wrap;
    }

    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(20px); }
      to { opacity: 1; transform: translateY(0); }
    }
  </style>
</head>
<body>
<div class="glass-container">
  <h2>🤖 HR-Bot (DeepSeek lokal)</h2>

  <textarea id="question" rows="3" placeholder="Frage eingeben..." >
    Hallo wieviel Tage hab ich noch frei ich hatte 4 Urlaubstage
  </textarea><br>
  <button id="sendBtn">Frage stellen</button>

  <div id="responseBox">Antwort erscheint hier...</div>
</div>

<script>
  document.getElementById('sendBtn').addEventListener('click', async () => {
    const frage = document.getElementById('question').value.trim();
    if (!frage) return;

    const box = document.getElementById('responseBox');
    box.textContent = '⏳ Bitte warten...';

    try {
      const res = await fetch('/api/chatbot.php', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({ question: frage })
      });
      const json = await res.json();
      box.textContent = json.reply || json.answer || '❗️Keine Antwort';
    } catch (e) {
      box.textContent = 'Fehler: ' + e.message;
    }
  });
</script>
</body>
</html>