Create index.html
Browse files- index.html +60 -0
index.html
ADDED
|
@@ -0,0 +1,60 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="tr">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8">
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
+
<title>HilmanAI</title>
|
| 7 |
+
<style>
|
| 8 |
+
:root { --bg: #f7f5f2; --text: #1a1816; --accent: #c8490a; }
|
| 9 |
+
body { margin: 0; font-family: sans-serif; background: var(--bg); display: flex; flex-direction: column; height: 100vh; }
|
| 10 |
+
|
| 11 |
+
/* Chat Bölgesi */
|
| 12 |
+
#chat-window { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 15px; }
|
| 13 |
+
.msg { padding: 10px 15px; border-radius: 8px; max-width: 80%; }
|
| 14 |
+
.user { align-self: flex-end; background: #333; color: white; }
|
| 15 |
+
.bot { align-self: flex-start; background: #e0e0e0; color: black; }
|
| 16 |
+
|
| 17 |
+
/* Input Bölgesi */
|
| 18 |
+
#input-zone { padding: 20px; background: white; border-top: 1px solid #ccc; display: flex; gap: 10px; }
|
| 19 |
+
input { flex: 1; padding: 10px; border: 1px solid #ccc; border-radius: 4px; outline: none; }
|
| 20 |
+
button { padding: 10px 20px; background: var(--accent); color: white; border: none; border-radius: 4px; cursor: pointer; }
|
| 21 |
+
</style>
|
| 22 |
+
</head>
|
| 23 |
+
<body>
|
| 24 |
+
|
| 25 |
+
<div id="chat-window"></div>
|
| 26 |
+
|
| 27 |
+
<div id="input-zone">
|
| 28 |
+
<input type="text" id="user-input" placeholder="Bir şeyler yaz...">
|
| 29 |
+
<button onclick="sendMessage()">Gönder</button>
|
| 30 |
+
</div>
|
| 31 |
+
|
| 32 |
+
<script>
|
| 33 |
+
const chatWindow = document.getElementById('chat-window');
|
| 34 |
+
const userInput = document.getElementById('user-input');
|
| 35 |
+
|
| 36 |
+
function sendMessage() {
|
| 37 |
+
const text = userInput.value;
|
| 38 |
+
if (!text) return;
|
| 39 |
+
|
| 40 |
+
// Kullanıcı mesajını ekle
|
| 41 |
+
addMsg(text, 'user');
|
| 42 |
+
userInput.value = '';
|
| 43 |
+
|
| 44 |
+
// Bot yanıtı (Burada senin kendi API mantığın çalışacak)
|
| 45 |
+
setTimeout(() => addMsg("HilmanAI olarak hazırım, ne yapmamı istersin?", 'bot'), 500);
|
| 46 |
+
}
|
| 47 |
+
|
| 48 |
+
function addMsg(text, sender) {
|
| 49 |
+
const div = document.createElement('div');
|
| 50 |
+
div.className = `msg ${sender}`;
|
| 51 |
+
div.innerText = text;
|
| 52 |
+
chatWindow.appendChild(div);
|
| 53 |
+
chatWindow.scrollTop = chatWindow.scrollHeight;
|
| 54 |
+
}
|
| 55 |
+
|
| 56 |
+
// Enter tuşu desteği
|
| 57 |
+
userInput.addEventListener('keypress', (e) => { if(e.key === 'Enter') sendMessage(); });
|
| 58 |
+
</script>
|
| 59 |
+
</body>
|
| 60 |
+
</html>
|