SURYA JAYA

body {
font-family: ‘Segoe UI’, Tahoma, Geneva, Verdana, sans-serif;
background-color: #f0f2f5;
margin: 0;
padding: 20px;
display: flex;
justify-content: center;
}
.chat-container {
width: 100%;
max-width: 500px;
background: white;
border-radius: 15px;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
display: flex;
flex-direction: column;
height: 80vh;
}
.chat-header {
background: #007bff;
color: white;
padding: 15px;
border-radius: 15px 15px 0 0;
text-align: center;
}
.chat-header h2 { margin: 0; font-size: 1.2rem; }
.chat-header p { margin: 5px 0 0; font-size: 0.8rem; opacity: 0.9; }

#chat-box {
flex: 1;
padding: 15px;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 10px;
}
.message {
max-width: 85%;
padding: 12px;
border-radius: 10px;
font-size: 1rem;
line-height: 1.4;
}
.bot {
background: #e9ecef;
align-self: flex-start;
color: #333;
}
.user {
background: #007bff;
color: white;
align-self: flex-end;
}
.input-area {
padding: 15px;
border-top: 1px solid #ddd;
display: flex;
gap: 10px;
}
input {
flex: 1;
padding: 12px;
border: 1px solid #ccc;
border-radius: 25px;
outline: none;
font-size: 1rem;
}
button {
background: #28a745;
color: white;
border: none;
padding: 0 20px;
border-radius: 25px;
cursor: pointer;
font-weight: bold;
}

// Logika sederhana untuk menanggapi Pak Suryanto
function getResponse(text) {
text = text.toLowerCase();

if (text.includes(“konsultan”) || text.includes(“pembimbing”) || text.includes(“saran”)) {
return “Wah, sae sanget niku Pak! Gadah konsultan niku ibarat gadah penunjuk dalan pas kito lagi bingung. Wong pinter niku saget mbantu kito ningali pundi sing bocor lan pundi sing saget dibathi luwih akeh. Kulo setuju sanget, niku pilihan sing mantep kagem majune jenengan.”;
}

if (text.includes(“sepi”) || text.includes(“kurang”) || text.includes(“angel”)) {
return “Sabar nggih Pak, jenenge bakulan niku pancen kados ombak, kadang pasang kadang surut. Sing penting telaten, ulamipun dijagi supados tetep seger. Coba mangke dadi rembugan kalih konsultanipun, pripun carane narik bakul malih.”;
}

if (text.includes(“syukur”) || text.includes(“alhamdulillah”) || text.includes(“rame”)) {
return “Alhamdulillah! Melu seneng kulo mirengipun. Mugi-mugi berkah terus nggih Pak. Ojo lali bathine disimpen sithik-sithik nggih.”;
}

return “Nggih Pak, kulo nangkep karepe jenengan. Monggo diterusne critone, kulo mirengaken. Pripun malih perkoro dagangane?”;
}

function sendMessage() {
const input = document.getElementById(‘user-input’);
const chatBox = document.getElementById(‘chat-box’);

if (input.value.trim() === “”) return;

// Tampilkan pesan Pak Suryanto
const userDiv = document.createElement(‘div’);
userDiv.className = ‘message user’;
userDiv.innerText = input.value;
chatBox.appendChild(userDiv);

const userText = input.value;
input.value = “”;

// Respon AI sederhana
setTimeout(() => {
const botDiv = document.createElement(‘div’);
botDiv.className = ‘message bot’;
botDiv.innerText = getResponse(userText);
chatBox.appendChild(botDiv);
chatBox.scrollTop = chatBox.scrollHeight;
}, 600);
}

function handleKey(e) {
if (e.key === ‘Enter’) sendMessage();
}