<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>神と対話するAI</title>
<style>
/* 神秘的な背景とエフェクト */
body {
font-family: 'Georgia', serif;
background-color: #1a1a2e;
color: #d1d1e9;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
overflow: hidden;
}
.chat-container {
width: 100%;
max-width: 600px;
background-color: rgba(43, 43, 63, 0.9);
border-radius: 10px;
box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.6);
padding: 20px;
position: relative;
overflow: hidden;
}
.messages {
height: 300px;
overflow-y: auto;
margin-bottom: 10px;
padding-right: 10px;
}
.message {
margin: 10px 0;
line-height: 1.5;
}
.user-message {
text-align: right;
color: #00aaff;
}
.ai-message {
text-align: left;
color: #e6e6fa;
font-style: italic;
}
.typing-indicator {
font-size: 1.5em;
color: #e6e6fa;
}
.input-container {
display: flex;
}
input[type="text"] {
flex: 1;
padding: 10px;
border-radius: 5px;
border: 1px solid #555;
background-color: #444;
color: #e6e6fa;
margin-right: 10px;
}
button {
padding: 10px 20px;
border: none;
border-radius: 5px;
background-color: #5a5adb;
color: white;
cursor: pointer;
}
/* 背景アニメーション */
.background-animation {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle, rgba(255,255,255,0.1), rgba(0,0,0,0) 70%);
animation: glow 5s infinite alternate;
pointer-events: none;
}
@keyframes glow {
from {
opacity: 0.4;
}
to {
opacity: 0.7;
}
}
</style>
</head>
<body>
<div class="chat-container">
<h2>神と対話するAI</h2>
<div class="messages" id="messages"></div>
<div class="input-container">
<input type="text" id="userInput" placeholder="質問を入力してください...">
<button onclick="sendMessage()">送信</button>
</div>
<div class="background-animation"></div>
</div>
<script>
const messagesContainer = document.getElementById("messages");
function addMessage(content, className) {
const message = document.createElement("div");
message.className = "message " + className;
message.innerHTML = content;
messagesContainer.appendChild(message);
messagesContainer.scrollTop = messagesContainer.scrollHeight;
}
function getAIResponse(userMessage) {
const responses = {
"目的": [
"あなたの目的はあなたの選択の中にあります。心を澄まし、その小さな声に耳を傾けなさい。",
"目的は定まっているものではなく、あなたが形作るものです。勇気を持って探し続けなさい。"
],
"未来": [
"未来は揺れ動く霧のようなもの…手の中にありながら捉えられぬもの。だが、あなたの意思がその霧を晴らすだろう。",
"未来は、あなたの内にある希望が灯し出すもの。信じる道を歩みなさい。"
],
"愛": [
"愛とは、無限に与えること。光のようにあなたを包み、他者を受け入れるものです。",
"愛とは、心の中の静けさと繋がり、他者の存在をただあるがままに受け入れること。"
],
"default": [
"その問いの答えは、あなた自身が見つけ出すもの。内なる声を信じなさい。",
"すべての答えは既にあなたの心の中にあります。耳を澄まし、その声に従いなさい。"
]
};
const keywords = Object.keys(responses);
for (let keyword of keywords) {
if (userMessage.includes(keyword)) {
const possibleResponses = responses[keyword];
return possibleResponses[Math.floor(Math.random() * possibleResponses.length)];
}
}
const defaultResponses = responses["default"];
return defaultResponses[Math.floor(Math.random() * defaultResponses.length)];
}
function sendMessage() {
const userInput = document.getElementById("userInput").value.trim();
if (userInput === "") return;
addMessage(userInput, "user-message");
document.getElementById("userInput").value = "";
const aiResponse = getAIResponse(userInput);
// タイピングエフェクトを表示
setTimeout(() => {
addMessage(`<span class="typing-indicator">...</span>`, "ai-message");
setTimeout(() => {
messagesContainer.lastChild.remove();
addMessage(aiResponse, "ai-message");
}, 2000); // タイピングエフェクト表示後の応答
}, 800); // 遅延で自然な応答
}
</script>
</body>
</html>
