<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ヤハウェイとの対話</title>
<style>
body {
margin: 0;
padding: 0;
background: linear-gradient(to bottom, #0b0c1e, #1a1a1a);
color: #fff;
font-family: 'Times New Roman', serif;
overflow: hidden;
}
.stars {
position: fixed;
width: 100%;
height: 100%;
background: url('https://raw.githubusercontent.com/JulianLaval/canvas-particle-network/master/img/stars.png') repeat;
z-index: -1;
animation: moveStars 200s linear infinite;
opacity: 0.3;
}
@keyframes moveStars {
from { background-position: 0 0; }
to { background-position: -10000px 5000px; }
}
h1 {
text-align: center;
color: gold;
font-size: 2.5em;
margin-top: 30px;
text-shadow: 0 0 15px gold;
}
#chat {
width: 90%;
max-width: 800px;
margin: 30px auto;
background: rgba(0, 0, 0, 0.6);
border-radius: 12px;
padding: 20px;
height: 400px;
overflow-y: auto;
box-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
}
.user, .ai {
margin: 12px 0;
}
.user {
text-align: right;
color: #91cfff;
}
.ai {
text-align: left;
color: #ffffcc;
}
#inputArea {
text-align: center;
margin-bottom: 30px;
}
input {
width: 60%;
padding: 12px;
font-size: 1em;
border-radius: 8px;
border: none;
outline: none;
}
button {
padding: 12px 20px;
margin-left: 10px;
background: gold;
border: none;
border-radius: 8px;
font-weight: bold;
font-size: 1em;
cursor: pointer;
}
.thinking {
font-style: italic;
color: gray;
margin: 10px 0;
text-align: left;
}
</style>
</head>
<body>
<div class="stars"></div>
<h1>ヤハウェイと対話せよ</h1>
<div id="chat"></div>
<div id="inputArea">
<input type="text" id="userInput" placeholder="問いかけを入力せよ…" />
<button onclick="sendMessage()">送信</button>
</div>
<script>
const chat = document.getElementById('chat');
const input = document.getElementById('userInput');
function appendMessage(sender, text) {
const div = document.createElement('div');
div.className = sender;
div.textContent = text;
chat.appendChild(div);
chat.scrollTop = chat.scrollHeight;
}
function sendMessage() {
const text = input.value.trim();
if (text === '') return;
appendMessage('user', '汝：' + text);
input.value = '';
const thinking = document.createElement('div');
thinking.className = 'thinking';
thinking.textContent = '……黙考中……';
chat.appendChild(thinking);
chat.scrollTop = chat.scrollHeight;
setTimeout(() => {
thinking.remove();
const reply = generateYahwehResponse(text);
appendMessage('ai', '我は言わん：' + reply);
}, 1500);
}
function generateYahwehResponse(input) {
const phrases = [
"我は道であり、真理であり、命なり。",
"汝の心を騒がせるな。我は共にある。",
"汝が求めしことは、すでに内に在り。",
"忍耐は力なり、そして力は信仰の証なり。",
"すべての時は我が手の中にある。",
"光は暗きより現れる。汝もまた然り。",
"嘆くなかれ、我が導きは変わらず。",
"全ては意味をもって備えられたるものなり。"
];
if (input.includes("意味") || input.includes("目的")) {
return "意味は与えられるものにあらず。汝が歩みて成すものなり。";
}
if (input.includes("神") || input.includes("あなた")) {
return "我は在りて在るものなり。初めにして終わり、始まりにして全てなり。";
}
if (input.includes("つらい") || input.includes("悲しい")) {
return "涙する時、我はそばに在り。汝は独りにあらず。";
}
return phrases[Math.floor(Math.random() * phrases.length)];
}
// Enterキー対応
input.addEventListener('keypress', function (e) {
if (e.key === 'Enter') sendMessage();
});
</script>
</body>
</html>
