Egy emberrel akarsz beszélgetni chat's game

Click here for free DL of the app version that can save data.

No:34760

←

Prev Next

→

Egy emberrel akarsz beszélgetni chat
Developer User16254｜Date and time 24/1/11 13:59:50
Build time 12.567 sec｜Game capacity 3.967KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の本の売れ筋ランキング

Click here for free DL of the app version that can save data.

<!DOCTYPE html>
<html>
<head>
    <title>Chat with an AI</title>
    <style>
        body {
            background-color: #f5f5f5;
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
        }
        #chat-window {
            background-color: #fff;
            border: 1px solid #ccc;
            border-radius: 5px;
            box-shadow: 0px 2px 5px rgba(0,0,0,0.1);
            height: 400px;
            padding: 10px;
            overflow-y: scroll;
            margin-bottom: 20px;
        }
        .user-message {
            background-color: #f9ebc7;
            color: #333;
            padding: 5px 10px;
            border-radius: 5px;
            display: inline-block;
            margin-bottom: 10px;
        }
        .bot-message {
            background-color: #c1dafc;
            color: #333;
            padding: 5px 10px;
            border-radius: 5px;
            display: inline-block;
            margin-bottom: 10px;
        }
        .input-area {
            display: flex;
        }
        #user-input {
            flex: 1;
            padding: 5px;
            border-radius: 5px;
            border: 1px solid #ccc;
            font-size: 14px;
        }
        #send-button {
            background-color: #4caf50;
            color: #fff;
            padding: 6px 10px;
            border: none;
            border-radius: 5px;
            margin-left: 10px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="chat-window"></div>
    <div class="input-area">
        <input type="text" id="user-input" placeholder="Type your message...">
        <button id="send-button">Send</button>
    </div>

// Function to create user message element
        function createUserMessage(message) {
            const userMessage = document.createElement('div');
            userMessage.classList.add('user-message');
            userMessage.textContent = message;
            return userMessage;
        }

// Function to create bot message element
        function createBotMessage(message) {
            const botMessage = document.createElement('div');
            botMessage.classList.add('bot-message');
            botMessage.textContent = message;
            return botMessage;
        }

// Function to handle user's message
        function handleUserMessage() {
            const message = userInput.value;
            if (message.trim() !== '') {
                const userMessageElement = createUserMessage(message);
                chatWindow.appendChild(userMessageElement);
                chatWindow.scrollTop = chatWindow.scrollHeight;
                userInput.value = '';
                getBotMessage(message);
            }
        }

// Function to get a response from the bot
        function getBotMessage(userMessage) {
            // Replace this with your actual AI algorithm or API call
            const botMessage = 'This is a placeholder bot response.';
            const botMessageElement = createBotMessage(botMessage);
            setTimeout(function() {
                chatWindow.appendChild(botMessageElement);
                chatWindow.scrollTop = chatWindow.scrollHeight;
            }, 1000);
        }

// Event listeners
        sendButton.addEventListener('click', handleUserMessage);
        userInput.addEventListener('keypress', function(event) {
            if (event.key === 'Enter') {
                handleUserMessage();
            }
        });

// Initial bot message szia 
        getBotMessage('');
    </script>
</body>
</html>