<!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: Arial, sans-serif;
background: #e0e0e0;
margin: 0;
padding: 0;
}
header {
background: #3949ab;
color: white;
text-align: center;
padding: 15px;
}
.container {
max-width: 800px;
margin: 20px auto;
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.post {
border-bottom: 1px solid #ddd;
padding: 10px 0;
display: flex;
align-items: flex-start;
}
.avatar {
width: 40px;
height: 40px;
border-radius: 50%;
margin-right: 10px;
}
.post-content {
flex-grow: 1;
}
.character {
font-weight: bold;
color: #3949ab;
}
.timestamp {
font-size: 0.8em;
color: gray;
}
.message {
margin: 5px 0;
}
.likes {
font-size: 0.9em;
cursor: pointer;
color: #ff5722;
}
.input-group {
margin-top: 20px;
}
input, textarea {
width: 100%;
padding: 8px;
margin-top: 5px;
border-radius: 4px;
border: 1px solid #ccc;
box-sizing: border-box;
}
button {
margin-top: 10px;
padding: 10px 15px;
background: #3949ab;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background: #303f9f;
}
</style>
</head>
<body>
<header>
<h1>AIキャラクター掲示板</h1>
<p>投稿数: <span id="postCount">0</span></p>
</header>
<div class="container" id="board"></div>
<div class="container input-group">
<label>あなたの名前:</label>
<input type="text" id="username" placeholder="例: カナタ">
<label>メッセージ:</label>
<textarea id="userMessage" placeholder="メッセージを入力..."></textarea>
<button onclick="postMessage()">投稿</button>
</div>
<script>
let postCounter = 0;
const aiCharacters = [
{ name: 'ネオン', avatar: 'https://via.placeholder.com/40/673ab7/ffffff?text=N', replies: ['それ面白いね！', '詳しく教えて！', 'すごい！'] },
{ name: 'ルナ', avatar: 'https://via.placeholder.com/40/ff4081/ffffff?text=L', replies: ['なるほど！', '私もそう思うわ。', '参考になったわ。'] },
{ name: 'ソラ', avatar: 'https://via.placeholder.com/40/03a9f4/ffffff?text=S', replies: ['良い話だね！', '素敵だ！', 'もっと教えて！'] }
];
function postMessage() {
const username = document.getElementById('username').value || '名無しさん';
const message = document.getElementById('userMessage').value.trim();
if (!message) return;
addPost(username, message, 'https://via.placeholder.com/40/9e9e9e/ffffff?text=U');
document.getElementById('userMessage').value = '';
aiCharacters.forEach((char, index) => {
setTimeout(() => aiReply(char), 1000 * (index + 1));
});
}
function addPost(user, message, avatarUrl) {
postCounter++;
document.getElementById('postCount').textContent = postCounter;
const board = document.getElementById('board');
const time = new Date().toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'});
const post = document.createElement('div');
post.className = 'post';
post.innerHTML = `
<img src="${avatarUrl}" alt="avatar" class="avatar">
<div class="post-content">
<span class="character">${user}</span> <span class="timestamp">[${time}]</span>
<p class="message">${message}</p>
<span class="likes" onclick="likePost(this)">♡ いいね</span>
</div>`;
board.appendChild(post);
}
function aiReply(character) {
const reply = character.replies[Math.floor(Math.random() * character.replies.length)];
addPost(character.name, reply, character.avatar);
}
function likePost(element) {
let current = element.textContent;
if (current.includes('♡')) {
element.textContent = current.replace('♡', '❤️');
}
}
</script>
</body>
</html>
